智慧园区前端大屏
shuishen
2024-12-24 bbc9839678d31edf1ba80281db13ae6e977f2deb
临川调整
2 files modified
1 files added
489 ■■■■■ changed files
src/pages/map/components/scomponents/layersControl.vue 346 ●●●● patch | view | raw | blame | history
src/pages/sign.vue 131 ●●●●● patch | view | raw | blame | history
src/router/index.js 12 ●●●●● patch | view | raw | blame | history
src/pages/map/components/scomponents/layersControl.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-24 16:31:17
 * @LastEditTime: 2024-12-24 17:04:32
 * @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
 * @Description:
 *
@@ -145,7 +145,7 @@
      {
        parentId: '3',
        id: '3-1',
        label: '应急池',
        label: '初期雨水收集池',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
@@ -156,7 +156,7 @@
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'yjc-yq',
        layerName: 'cq-yssjc',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
@@ -187,175 +187,30 @@
      {
        parentId: '3',
        id: '3-2',
        label: '阀门',
        children: [
          {
            parentId: '3-2',
            id: '3-2-1',
            label: '园区',
            type: 'layer',
            subType: 'labelPoint',
            method: getList,
            params: {
              type: 2,
              size: 1000,
              category: 1
            },
            backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
            className: 'ysf-box',
            showPanel: false,
            layerName: 'fm-yq',
            incident: (e) => {
              const { attrParams } = e.overlay
              // 删除
              destroyPop()
              if (!attrParams.firmName) {
                return
              }
              addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id)
              window.$viewer.addLayer(addPopLayers[attrParams.id])
              let iconEl = `<div class="marsBlueGradientPnl">
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
              let divIcon = new DC.DivIcon(
                new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
                `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
              )
              let incident = () => {
                destroyPop()
              }
              divIcon.on(DC.MouseEventType.CLICK, incident)
              addPopLayers[attrParams.id].addOverlay(divIcon)
            }
          },
          {
            parentId: '3-2',
            id: '3-2-2',
            label: '企业',
            type: 'layer',
            subType: 'labelPoint',
            method: getList,
            params: {
              type: 2,
              size: 1000,
              category: 2
            },
            backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
            className: 'ysf-box',
            showPanel: false,
            layerName: 'fm-qy',
            incident: (e) => {
              const { attrParams } = e.overlay
              // 删除
              destroyPop()
              if (!attrParams.firmName) {
                return
              }
              addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id)
              window.$viewer.addLayer(addPopLayers[attrParams.id])
              let iconEl = `<div class="marsBlueGradientPnl">
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
              let divIcon = new DC.DivIcon(
                new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
                `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
              )
              let incident = () => {
                destroyPop()
              }
              divIcon.on(DC.MouseEventType.CLICK, incident)
              addPopLayers[attrParams.id].addOverlay(divIcon)
            }
          }
        ]
      },
      {
        parentId: '3',
        id: '3-3',
        label: '公共管网',
        children: [
          // 给水管网、污水管网、燃气管网、雨水管网
          {
            parentId: '3-3',
            id: '3-3-2',
            label: '污水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'wsgw',
            source: wsgw,
            color: DC.Color.DARKBLUE.withAlpha(0.9),
            height: 60.2,
          },
          {
            parentId: '3-3',
            id: '3-3-4',
            label: '雨水管网',
            type: 'layer',
            subType: 'geojsonPipe',
            layerName: 'ysgw',
            source: ysgw,
            color: DC.Color.CYAN.withAlpha(0.9),
            height: 60,
          },
          // {
          //   id: '3-3-1',
          //   label: '给水管网',
          //   type: 'layer',
          //   subType: 'geojsonPipe',
          //   layerName: 'gsgw',
          //   source: gsgw,
          //   color: DC.Color.BLUE.withAlpha(0.9),
          //   height: 60.4,
          // },
          // {
          //   id: '3-3-3',
          //   label: '燃气管网',
          //   type: 'layer',
          //   subType: 'geojsonPipe',
          //   layerName: 'rqgw',
          //   source: rqgw,
          //   color: DC.Color.RED.withAlpha(0.9),
          //   height: 60.6,
          // },
        ]
      },
      {
        parentId: '3',
        id: '3-4',
        label: '污水提升泵站',
        label: '事故应急池',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        // className: 'sk-box',
        // showPanel: false,
        params: {
          type: 4,
          size: 1000
          type: 2,
          size: 1000,
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/wstsb.png',
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
        className: 'yjc-box',
        showPanel: false,
        layerName: 'wstsbz',
        layerName: 'sg-yjc',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroyPop()
          if (!attrParams.imageUrl) {
          if (!attrParams.firmName) {
            return
          }
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id)
          window.$viewer.addLayer(addPopLayers[attrParams.id])
          let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${attrParams.fullName}</div>
                  <img src="${attrParams.imageUrl}" width="160" height="160" />
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
@@ -367,7 +222,49 @@
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPopLayers[attrParams.name].addOverlay(divIcon)
          addPopLayers[attrParams.id].addOverlay(divIcon)
        }
      },
      {
        parentId: '3',
        id: '3-3',
        label: '切断阀',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 3,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
        className: 'ysf-box',
        showPanel: false,
        layerName: 'qdf',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id)
          window.$viewer.addLayer(addPopLayers[attrParams.id])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPopLayers[attrParams.id].addOverlay(divIcon)
        }
      },
@@ -412,137 +309,6 @@
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
        parentId: '3',
        id: '3-6',
        label: '应急泵',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 6,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
        className: 'yjb-box',
        showPanel: false,
        layerName: 'yjb',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPopLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPopLayers[attrParams.name].addOverlay(divIcon)
        }
      },
      {
        parentId: '3',
        id: '3-8',
        label: '沟渠',
        type: 'layer',
        subType: 'geojsonPolygon',
        method: getGouQu,
        params: {
          type: 8,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/gouqu.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'gouqu'
      },
      // {
      //   id: '3-9',
      //   label: '废水处理站',
      //   type: 'layer',
      //   subType: 'labelPoint',
      //   method: getList,
      //   params: {
      //     type: 9,
      //     size: 1000
      //     // name: '吉水县绿源污水处理厂',
      //   },
      //   backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png',
      //   className: 'xfs-box',
      //   showPanel: false,
      //   layerName: 'fsclz'
      // },
      {
        parentId: '3',
        id: '3-10',
        label: '排水口',
        type: 'layer',
        subType: 'labelPoint',
        method: getList,
        params: {
          type: 10,
          size: 1000
        },
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/psk.png',
        className: 'xfs-box',
        showPanel: false,
        layerName: 'psk',
        incident: (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroyPop()
          if (!attrParams.firmName) {
            return
          }
          addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id)
          window.$viewer.addLayer(addPopLayers[attrParams.id])
          let iconEl = `<div class="marsBlueGradientPnl">
            <div>企业名称:${attrParams.firmName}</div>
            <div>作用:${attrParams.mainFuncName}</div>
                </div>`
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
            `<div class="public-map-popup-two">
                    ${iconEl}
                  </div>`
          )
          let incident = () => {
            destroyPop()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPopLayers[attrParams.id].addOverlay(divIcon)
        }
      },
      // {
      //   id: '3-11',
      //   label: '污水池',
      //   type: 'layer',
      //   subType: 'labelPoint',
      //   method: getList,
      //   params: {
      //     type: 11,
      //     size: 1000
      //   },
      //   backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png',
      //   className: 'xfs-box',
      //   showPanel: false,
      //   layerName: 'wsc'
      // }
    ]
  },
src/pages/sign.vue
New file
@@ -0,0 +1,131 @@
<template>
  <!-- <div class="box">
    <div class="login">
      <div class="logintitle">
        新干化工园区“一园一策一图”VR平台
      </div>
      <div class="getingo">
        <p class="title">用户登录</p>
        <el-input type="text" class="input username" v-model="loginForm.username" />
        <el-input type="password" class="input password" v-model="loginForm.password" />
        <el-button class="loginto" type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div> -->
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
import { ElLoading } from 'element-plus'
import { useLogin } from 'store/login'
const store = useLogin()
const loginForm = reactive({
  //租户ID
  tenantId: '000000',
  //部门ID
  deptId: '',
  //角色ID
  roleId: '',
  //用户名
  username: 'admin',
  //密码
  password: 'hbgyy@2024',
  //账号类型
  type: 'account',
  //验证码的值
  code: '',
  //验证码的索引
  key: '',
  //预加载白色背景
  image:
    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
  flag: 1,
})
store.LoginByUsername(loginForm).then(res => {
  router.push({
    path: '/layout'
  })
}).catch(() => {
})
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  .login {
    width: 100%;
    height: 100%;
    background: url('../assets/images/login-bg.png');
    background-size: 100% 100%;
    position: relative;
    .logintitle {
      position: absolute;
      top: 18%;
      right: 25%;
      transform: translateX(50%);
      font-size: 40px;
      color: #00afe9;
    }
    .getingo {
      width: 500px;
      position: absolute;
      text-align: center;
      top: 45%;
      right: 25%;
      transform: translateY(-40%) translateX(50%);
      color: #ffffff;
      padding: 30px;
      background: url('../assets/images/login-content-bg.png'),
        url('../assets/images/left-top.png') no-repeat left top,
        url('../assets/images/left-bottom.png') no-repeat left bottom,
        url('../assets/images/right-top.png') no-repeat right top,
        url('../assets/images/right-bottom.png') no-repeat right bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%, 25px, 25px, 25px, 25px;
      .title {
        font-size: 20px;
      }
      :deep().el-input__inner {
        padding: 0px;
      }
      .input {
        margin: 30px 0;
        width: 300px;
        padding: 10px 10px 10px 40px;
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        border-width: 0px;
        font-size: 18px;
      }
      .username {
        background: url('../assets/images/login-input.png') no-repeat,
          url('../assets/images/user-icon.png') no-repeat 10px center;
        background-size: 100% 100%, 20px;
      }
      .password {
        background: url('../assets/images/login-input.png') no-repeat,
          url('../assets/images/password-icon.png') no-repeat 10px center;
        background-size: 100% 100%, 20px;
      }
      .loginto {
        width: 300px;
        margin: 30px 0;
      }
    }
  }
}
</style>
src/router/index.js
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 16:35:31
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-02 17:23:21
 * @LastEditTime: 2024-12-24 16:57:10
 * @FilePath: \bigScreen\src\router\index.js
 * @Description: 
 * 
@@ -36,6 +36,16 @@
    },
  },
  {
    path: '/sign',
    name: '免登录',
    component: () => import('@/pages/sign.vue'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false,
    },
  },
  {
    path: '/layout',
    name: 'layout',
    redirect: '/layout/map/main/survey',