加载倾斜模型 图层组件封装 路由相关调整 项目基础路径调整

shuishen

2024-10-31 f789d1d5841d0f8feefc16570189304c9d9204a9

加载倾斜模型
图层组件封装
路由相关调整
项目基础路径调整

 .env.development

@@ -13,7 +13,7 @@
VITE_APP_ENV = 'development'

#接口地址
VITE_APP_API=/api
VITE_APP_API=/zhyqapi

#页面基础路径
VITE_APP_BASE=/bigScreen
VITE_APP_BASE=/zhyq/

 .env.production

@@ -1,13 +1,23 @@
###
 # @Author: shuishen 1109946754@qq.com
 # @Date: 2024-10-25 11:21:30
 # @LastEditors: shuishen 1109946754@qq.com
 # @LastEditTime: 2024-10-31 10:37:36
 # @FilePath: \bigScreen\.env.production
 # @Description: 
 # 
 # Copyright (c) 2024 by shuishen, All Rights Reserved. 
### 
#生产环境配置
VITE_APP_ENV = 'production'

#接口地址
#填写前缀 [/api] 需要用nginx进行反向代理
#填写地址 [https://api.bladex.cn] 只需要保证接口支持跨域即可, 无需再做代理
VITE_APP_API=/api
VITE_APP_API=/zhyqapi

#页面基础路径
VITE_APP_BASE=/bigScreen
VITE_APP_BASE=/zhyq/

# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

 .gitignore

@@ -8,6 +8,7 @@
lerna-debug.log*

node_modules
zhyq
dist
dist-ssr
*.local

 package.json

@@ -17,15 +17,16 @@
    "@element-plus/icons-vue": "^2.3.1",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "axios": "^1.7.7",
    "crypto-js": "^4.1.1",
    "element-plus": "^2.8.6",
    "element-tree-line": "^0.2.1",
    "js-base64": "^3.7.4",
    "js-md5": "^0.7.3",
    "nprogress": "^0.2.0",
    "pinia": "^2.2.4",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.5.12",
    "vue-router": "^4.4.5",
    "crypto-js": "^4.1.1",
    "js-base64": "^3.7.4",
    "js-md5": "^0.7.3"
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-basic-ssl": "^1.1.0",

 pnpm-lock.yaml

@@ -26,6 +26,9 @@
  element-plus:
    specifier: ^2.8.6
    version: 2.8.6(vue@3.5.12)
  element-tree-line:
    specifier: ^0.2.1
    version: 0.2.1(vue@3.5.12)
  js-base64:
    specifier: ^3.7.4
    version: 3.7.4
@@ -987,6 +990,14 @@
      - '@vue/composition-api'
    dev: false

  /element-tree-line@0.2.1(vue@3.5.12):
    resolution: {integrity: sha512-YWHftDSOFiBuw49drxJV7Yi7pCqPpwBBBeQmySjchcxU3uUOAu72FDLK5RyTGJ5qt4Ci+yoUg7zJqsFP5u7N5A==}
    peerDependencies:
      vue: ^2.6.11 || ^3.2.0
    dependencies:
      vue: 3.5.12
    dev: false

  /encodeurl@1.0.2:
    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
    engines: {node: '>= 0.8'}

 src/hooks/initMap.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 15:09:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-30 18:09:34
 * @LastEditTime: 2024-10-31 18:27:53
 * @FilePath: \bigScreen\src\hooks\initMap.js
 * @Description: 
 * 
@@ -23,7 +23,7 @@

    nextTick(() => {
      DC.ready({
        baseUrl: `${VITE_APP_BASE}/libs/dc-sdk/resources/`
        baseUrl: `${VITE_APP_BASE}libs/dc-sdk/resources/`
      }).then(() => {

        viewer = new DC.Viewer('viewer-container')
@@ -33,21 +33,6 @@
        global.$viewer = viewer

        store.setLoadMap(true)

        // let layer = new DC.HtmlLayer('layer')
        // viewer.addLayer(layer)
        // let divIcon = new DC.DivIcon(
        //   new DC.Position(125, 25),
        //   `<div class="public-map-popup">
        //     <div class="marsBlueGradientPnl">
        //       <div>指挥室</div>
        //     </div>
        //   </div>`
        // )

        // divIcon.setStyle({
        // })
        // layer.addOverlay(divIcon)
      })
    })
  }

 src/main.js

@@ -2,13 +2,13 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 10:56:27
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-28 10:53:47
 * @LastEditTime: 2024-10-31 11:01:20
 * @FilePath: \bigScreen\src\main.js
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 */
import { createApp } from 'vue'
import { createApp, h } from 'vue'
import { createPinia } from 'pinia'
import router from '@/router/index'

@@ -24,6 +24,9 @@
// 全局组件自动注册
import components from '@/components/index'

import { getElementLabelLine } from 'element-tree-line';
import 'element-tree-line/dist/style.css';

import * as DC from '@dvgis/dc-sdk'
import '@dvgis/dc-sdk/dist/dc.min.css'
window.DC = Object.create(DC)  //Since the imported DC is read-only, it needs to be re-expanded
@@ -31,6 +34,9 @@
const pinia = createPinia()

pinia.use(piniaPersistPlugin)
const ElementLabelLine = getElementLabelLine(h);
app.component(ElementLabelLine.name, ElementLabelLine);

app.use(router)
app.use(ElementPlus)
app.use(pinia)

 src/page/login.vue

@@ -111,10 +111,9 @@
      .input {
        margin: 30px 0;
        width: 300px;
        padding: 10px 0px;
        padding: 10px 10px 10px 40px;
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        padding-left: 40px;
        border-width: 0px;
        font-size: 18px;
      }

 src/router/index.js

@@ -2,13 +2,13 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 16:35:31
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-30 15:01:50
 * @LastEditTime: 2024-10-31 18:22:25
 * @FilePath: \bigScreen\src\router\index.js
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
 */
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

const routes = [
  {
@@ -39,6 +39,13 @@
        component: () => import('@/views/survey/index.vue')
      },
      {
        path: 'rs',
        meta: {
          title: '固定风险源'
        },
        component: () => import('@/views/rs/index.vue')
      },
      {
        path: 'space',
        meta: {
          title: '应急空间'
@@ -53,18 +60,18 @@
        component: () => import('@/views/supplies/index.vue')
      },
      {
        path: 'equipment',
        meta: {
          title: '应急设备'
        },
        component: () => import('@/views/equipment/index.vue')
      },
      {
        path: 'pac',
        meta: {
          title: '三级防控'
        },
        component: () => import('@/views/pac/index.vue')
      },
      {
        path: 'rt',
        meta: {
          title: '救援队伍'
        },
        component: () => import('@/views/rt/index.vue')
      }
    ]
  },
@@ -73,7 +80,8 @@
const { VITE_APP_BASE } = import.meta.env

const router = createRouter({
  history: createWebHistory(VITE_APP_BASE),
  base: VITE_APP_BASE,
  history: createWebHashHistory(VITE_APP_BASE),
  routes
})


 src/styles/base/container.scss

@@ -8,11 +8,13 @@
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cursor-p {

 src/styles/base/dc-base.scss

New file
@@ -0,0 +1,41 @@
.div-icon {
  padding: 0 !important;
}

.public-map-popup {
  position: absolute;
  bottom: 60px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  z-index: auto;

  .marsBlueGradientPnl {
    text-align: center;
    padding: 5px 30px;
    margin: 0;
    color: #fff;
    background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-height: 130px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      bottom: -60px;
      left: calc(50% - 3px);
      display: block;
      width: 3px;
      height: 60px;
      border-right: 3px solid #2bcdbb;
    }
  }
}

 src/styles/base/index.scss

@@ -1,39 +1,2 @@
@use './container.scss'as *;

.public-map-popup {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  z-index: auto;

  .marsBlueGradientPnl {
    text-align: center;
    padding: 5px 30px;
    margin: 0;
    color: #fff;
    background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-height: 130px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      bottom: -60px;
      left: calc(50% - 3px);
      display: block;
      width: 3px;
      height: 60px;
      border-right: 3px solid #2bcdbb;
    }
  }
}
@use './dc-base.scss'as *;

 src/views/layout/components/mainMenu.vue

@@ -22,6 +22,10 @@
      path: '/layout/survey'
    },
    {
      menuName: '固定风险源',
      path: '/layout/rs'
    },
    {
      menuName: '应急空间',
      path: '/layout/space'
    },
@@ -30,13 +34,13 @@
      path: '/layout/supplies'
    },
    {
      menuName: '应急设备',
      path: '/layout/equipment'
    },
    {
      menuName: '三级防控',
      path: '/layout/pac'
    },
    {
      menuName: '救援队伍',
      path: '/layout/rt'
    },
  ]
)


 src/views/layout/components/mainTool.vue

@@ -6,16 +6,17 @@
    </el-button>
  </div>

  <base-map v-show="showBaseMap" @close="closeBox"></base-map>

  <base-map v-show="currentComponent == 'map'" @close="closeBox"></base-map>
  <layers-control v-show="currentComponent == 'layers'" @close="closeBox"></layers-control>
  <tool-list :moreToolShow="moreToolShow" @close="closeBox"></tool-list>
</template>

<script setup>
import baseMap from './scomponents/baseMap.vue'
import layersControl from './scomponents/layersControl.vue'
import toolList from './scomponents/toolList.vue'

let showBaseMap = ref(false)
const currentComponent = ref('')
let moreToolShow = ref(false)

const btnGroup = [
@@ -27,31 +28,29 @@
  {
    name: '图层',
    icon: 'fa fa-tasks',
    key: 'task'
    key: 'layers',
  },
  {
    name: '工具',
    icon: 'fa fa-cubes',
    key: 'tool'
    key: 'tool',
  },
]

const btnClick = (item) => {

  if (item.key == 'map') {
    showBaseMap.value = !showBaseMap.value

  }

  if (item.key == 'tool') {
    moreToolShow.value = !moreToolShow.value
  } else {
    currentComponent.value = item.key
  }
}

const closeBox = (type) => {
  if (type == 'map') showBaseMap.value = false

  if (type == 'tool') moreToolShow.value = false
  if (type == 'tool') {
    moreToolShow.value = false
  } else {
    currentComponent.value = ''
  }
}
</script>


 src/views/layout/components/scomponents/baseMap.vue

@@ -289,6 +289,21 @@
    global.$viewer.setTerrain()
  }
} 

  let layer = new DC.HtmlLayer('layer')
  global.$viewer.addLayer(layer)
        let divIcon = new DC.DivIcon(
          new DC.Position(124, 24, 100),
          `<div class="public-map-popup">
            <div class="marsBlueGradientPnl">
              <div>指挥室</div>
            </div>
          </div>`
        )

        divIcon.setStyle({
        })
        layer.addOverlay(divIcon)
</script>

<style lang="scss" scoped>

 src/views/layout/components/scomponents/layersControl.vue

New file
@@ -0,0 +1,174 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-31 18:16:33
 * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <public-box>
    <template #name>
      <div class="name"><i class="fa fa-tasks"></i>&nbsp;图层</div>
    </template>

    <template #close>
      <div class="close" @click="$emit('close', 'layers')"><i class="fa fa-close"></i></div>
    </template>

    <template #content>
      <div class="tree-content">
        <el-tree ref="tree" :data="data" draggable="" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
          <template v-slot:default="{ node }">
            <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
              <!-- 自定义label的slot -->
              <template v-slot:node-label>
                <span style="font-size: 12px">
                  {{ node.label }}
                  <i class="el-icon-eleme"></i></span>
              </template>
              <!-- 在右边追加内容的slot -->
              <!-- <template v-slot:after-node-label>
                <span style="padding-right: 10px">
                  <el-button type="primary" size="mini" @click.stop="openDrawer(node)">新增子节点</el-button>
                  <el-button type="primary" size="mini" @click.stop="openDrawer(node)">修改</el-button>
                  <el-button type="danger" size="mini" @click.stop="openDialog">删除</el-button></span>
              </template> -->
            </element-tree-line>
          </template>
        </el-tree>
      </div>
    </template>
  </public-box>
</template>

<script setup>
const { VITE_APP_BASE } = import.meta.env
import { getViewer } from 'utils/getViewer'
const globalViewer = getViewer()

const treeProps = {
  indent: 16,
  showLabelLine: true,
}

const data = [
  {
    id: 1,
    label: '三维模型',
    children: [
      {
        id: 4,
        label: '倾斜摄影',
        children: [
          {
            id: 9,
            label: '化工园区',
            type: 'layer',
            subType: '3Dtile',
            url: VITE_APP_BASE + 'mx/tileset.json'
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}

const checkType = (value) => {
  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
    return 'obj'
  } else if (Array.isArray(value)) {
    return 'arr'
  }
}
// 用于存储收集到的节点的数组  
const collectedNodes = reactive([])

// 递归函数，收集所有 flag 为 true 的子节点  
const collectNodesWithFlag = (nodes) => {
  if (checkType(nodes) == 'obj') {
    if (nodes.type == 'layer') {
      collectedNodes.value.push(nodes)
    }
    if (nodes.children && nodes.children.length > 0) {
      collectNodesWithFlag(nodes.children)
      return
    }
  }

  if (checkType(nodes) == 'arr') {
    nodes.forEach(item => {
      if (item.type == 'layer') {
        collectedNodes.value.push(item)
      }

      if (item.children && item.children.length > 0) {
        collectNodesWithFlag(item.children)
      }
    })
  }
}

let addTileLayers = {}
let tileLayers = new DC.TilesetLayer('tileLayers')
globalViewer.addLayer(tileLayers)

const handleCheckChange = (data, options) => {
  collectedNodes.value = []
  collectNodesWithFlag(data)

  collectedNodes.value.forEach(item => {
    if (options.checkedKeys.some(i => i == item.id)) {
      if (item.subType == '3Dtile') {
        addTileLayers[item.layerName] = new DC.Tileset(
          item.url
        )
        tileLayers.addOverlay(addTileLayers[item.layerName])
        globalViewer.flyTo(addTileLayers[item.layerName])
      }
    } else {
      if (item.subType == '3Dtile') {
        tileLayers.removeOverlay(addTileLayers[item.layerName])

        delete addTileLayers[item.layerName]
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.tree-content {
  min-width: 200px;
  padding: 10px;

  ::v-deep(.el-tree) {
    color: #fff;
    background: transparent;

    /* 鼠标浮动过的背景颜色 */
    .el-tree-node__content:hover {
      background: #0074b7;
    }

    /* 鼠标点击时节点的背景颜色 */
    .el-tree-node:focus>.el-tree-node__content {
      background-color: #0074b7 !important;
      color: rgb(255, 255, 255);
    }

    /* 鼠标失去焦点时节点背景的颜色 */
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background: rgb(0, 129, 204);
    }
  }
}
</style>

 src/views/rs/components/box/dataContent.vue

copy from src/views/equipment/components/box/dataContent.vue
copy to src/views/rs/components/box/dataContent.vue

 src/views/rs/components/box/fireContent.vue

copy from src/views/equipment/components/box/fireContent.vue
copy to src/views/rs/components/box/fireContent.vue

 src/views/rs/components/box/fireSource.vue

copy from src/views/equipment/components/box/fireSource.vue
copy to src/views/rs/components/box/fireSource.vue

 src/views/rs/components/box/fireTrend.vue

copy from src/views/equipment/components/box/fireTrend.vue
copy to src/views/rs/components/box/fireTrend.vue

 src/views/rs/components/box/occurStatistics.vue

copy from src/views/equipment/components/box/occurStatistics.vue
copy to src/views/rs/components/box/occurStatistics.vue

 src/views/rs/components/box/publicContent.vue

copy from src/views/equipment/components/box/publicContent.vue
copy to src/views/rs/components/box/publicContent.vue

 src/views/rs/components/box/unitContent.vue

copy from src/views/equipment/components/box/unitContent.vue
copy to src/views/rs/components/box/unitContent.vue

 src/views/rs/components/leftContainer.vue

 src/views/rs/components/rightContainer.vue

copy from src/views/equipment/components/rightContainer.vue
copy to src/views/rs/components/rightContainer.vue

 src/views/rs/index.vue

copy from src/views/equipment/index.vue
copy to src/views/rs/index.vue

 src/views/rt/components/box/dataContent.vue

 src/views/rt/components/box/fireContent.vue

 src/views/rt/components/box/fireSource.vue

 src/views/rt/components/box/fireTrend.vue

 src/views/rt/components/box/occurStatistics.vue

 src/views/rt/components/box/publicContent.vue

 src/views/rt/components/box/unitContent.vue

 src/views/rt/components/leftContainer.vue

New file
@@ -0,0 +1,48 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-25 18:43:23
 * @FilePath: \bigScreen\src\views\statistics\components\leftContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import dataContent from './box/dataContent.vue'
import unitContent from './box/unitContent.vue'
import fireContent from './box/fireContent.vue'
</script>

<template>
  <div class="left-container">
    <div class="data box">
      <title-box>
        <template #titleName>
          数据概览2
        </template>
      </title-box>
      <data-content></data-content>
    </div>

    <div class="unit box">
      <title-box>
        <template #titleName>
          入住单位统计
        </template>
      </title-box>
      <unit-content></unit-content>
    </div>

    <div class="fire box">
      <title-box>
        <template #titleName>
          实时火警事件
        </template>
      </title-box>
      <fire-content></fire-content>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>

 src/views/rt/components/rightContainer.vue

 src/views/rt/index.vue

 vite.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-25 10:56:27
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-30 16:06:44
 * @LastEditTime: 2024-10-31 18:23:13
 * @FilePath: \bigScreen\vite.config.js
 * @Description: 
 * 
@@ -24,7 +24,7 @@

  // 根据是否生产环境，动态设置压缩配置
  const buildConfig = {
    outDir: 'manage',
    outDir: 'zhyq',
    target: 'esnext',
    minify: isProd ? 'terser' : 'esbuild', // 根据环境选择压缩工具
  }
@@ -81,11 +81,11 @@
      https: true,
      host: '0.0.0.0',
      proxy: {
        '/api': {
        '/zhyqapi': {
          // target: 'http://localhost',
          target: 'https://wrj.shuixiongit.com/zhyqapi',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, ''),
          rewrite: path => path.replace(/^\/zhyqapi/, ''),
        },
      },
    },

 vite.config.js.timestamp-1730167409245-f650f9b358bf.mjs

File was deleted