智慧园区前端大屏
shuishen
2024-11-12 7ebb90b4d99cd661dcb9c9bdc9a1932e5b4a102f
Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen
7 files modified
1 files added
446 ■■■■ changed files
src/pages/layout/components/scomponents/layersControl.vue 150 ●●●●● patch | view | raw | blame | history
src/store/usepoint.js 34 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/box/dataContent.vue 126 ●●●●● patch | view | raw | blame | history
src/views/companyInfo/components/leftContainer.vue 14 ●●●● patch | view | raw | blame | history
src/views/companyInfo/components/mainMenu.vue 15 ●●●● patch | view | raw | blame | history
src/views/companyInfo/index.vue 12 ●●●●● patch | view | raw | blame | history
src/views/space/components/box/dataContent.vue 78 ●●●●● patch | view | raw | blame | history
src/views/survey/components/leftContainer.vue 17 ●●●● patch | view | raw | blame | history
src/pages/layout/components/scomponents/layersControl.vue
@@ -21,7 +21,8 @@
    <template #content>
      <div class="tree-content">
        <el-tree ref="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
          :default-checked-keys="['1']" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
          :default-checked-keys="indexPoint" :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 -->
@@ -68,8 +69,12 @@
import ysgw from "@/assets/json/ysgw"
import { onUnmounted } from 'vue'
import EventBus from 'utils/bus'
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()
const { VITE_APP_BASE } = import.meta.env
let indexPoint = ref(['1'])
const treeRef = ref(null)
const Cesium = DC.getLib('Cesium')
@@ -384,7 +389,6 @@
        } else {
          addTileLayers[item.layerName].forEach(i => i.show = true)
        }
        window.$viewer.flyTo(addTileLayers[item.layerName][0])
      } else if (item.subType == 'labelPoint') {
        if (!addTileLayers[item.layerName]) {
@@ -459,7 +463,7 @@
          addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
          window.$viewer.addLayer(addTileLayers[item.layerName])
          function computeCircle (radius) {
          function computeCircle(radius) {
            var positions = []
            for (var i = 0; i < 1080; i++) {
              var radians = DC.Math.toRadians(i)
@@ -502,7 +506,7 @@
  })
}
function findObjectById (data, id) {
function findObjectById(data, id) {
  // 遍历数据数组
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
@@ -551,9 +555,145 @@
EventBus.on('restHandleDelChange', restHandleDelChange)
onMounted(() => {
  handleCheckChange(data.filter(i => i.id == '1'))
  handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
})
const sharedData = computed(() => pointStore.sharedData);
//
watch(sharedData, (newValue) => {
  let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  if (newValue === '1') {
    // 处理切换了应急空间页面,把图标隐藏
    if (indexPoint.value.includes('3')) {
      let allList = data.filter(i => indexPoint.value.includes(i.id))
      let temp = indexPoint.value.filter(ie => ie != '3')
      // console.log(temp, '***************************************')
      let checkList = data.filter(i => temp.includes(i.id))
      treeRef.value?.setCheckedNodes(checkList)
      handleCheckChangeTwo(allList, companyInfo.id)
    }
    return
  }
  // 处理切换到应急空间页面,把图标显示
  console.log('sharedData changed to:', newValue);
  // 获取缓存里面的企业id
  indexPoint.value.includes(newValue) ? '' : indexPoint.value.push(newValue)
  let checkList = data.filter(i => indexPoint.value.includes(i.id))
  treeRef.value?.setCheckedNodes(checkList)
  handleCheckChangeTwo(checkList, companyInfo.id)
});
const handleCheckChangeTwo = (data, firmId) => {
  let options = treeRef.value?.getCheckedNodes()
  // console.log(options, "*************222222***********")
  collectedNodes.value = []
  collectNodesWithFlag(data)
  collectedNodes.value.forEach(item => {
    let layerName = item.layerName + '_' + firmId
    console.log(layerName, "**************************************")
    if (options.some(i => i.id == item.id)) {
      if (item.subType == 'labelPoint') {
        if (!addTileLayers[layerName]) {
          addTileLayers[layerName] = new DC.HtmlLayer(addTileLayers[layerName])
          window.$viewer.addLayer(addTileLayers[layerName])
          let params = { ...item.params }
          params.firmId = firmId
          item.method(params).then(res => {
            let data = res.data.data.records
            data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
              let iconEl = ''
              if ('showPanel' in item && item.showPanel == false) {
                if (item.backgroundIcon) {
                  iconEl = `
                  <div class="map-name">${i[item.showParams] || i.name}</div>
                  <div class="map-icon">
                    <img src="${item.backgroundIcon}">
                  </div>
                  `
                }
              } else {
                iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i[item.showParams] || i.name}</div>
                </div>`
              }
              let divIcon = new DC.DivIcon(
                new DC.Position(i.lng, i.lat, 0),
                `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
              )
              addTileLayers[layerName].addOverlay(divIcon)
            })
          })
        } else {
          addTileLayers[layerName].show = true
        }
      }
    } else {
      if (addTileLayers[layerName]) {
        if (item.subType == 'labelPoint') {
          addTileLayers[layerName].show = false
        }
      }
    }
  })
}
// const handleCheckChangeTwo = (data, firmId) => {
//   let options = treeRef.value?.getCheckedNodes()
//   console.log(options, "*************222222***********")
//   collectedNodes.value = []
//   collectNodesWithFlag(data)
//   collectedNodes.value.forEach(item => {
//     if (options.some(i => i.id == item.id)) {
//       if (item.subType == 'labelPoint') {
//         if (!addTileLayers[item.layerName]) {
//           addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName])
//           window.$viewer.addLayer(addTileLayers[item.layerName])
//           let params = { ...item.params }
//           params.firmId = firmId
//           item.method(params).then(res => {
//             let data = res.data.data.records
//             data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
//               let iconEl = ''
//               if ('showPanel' in item && item.showPanel == false) {
//                 if (item.backgroundIcon) {
//                   iconEl = `
//                   <div class="map-name">${i[item.showParams] || i.name}</div>
//                   <div class="map-icon">
//                     <img src="${item.backgroundIcon}">
//                   </div>
//                   `
//                 }
//               } else {
//                 iconEl = `<div class="marsBlueGradientPnl">
//                   <div>${i[item.showParams] || i.name}</div>
//                 </div>`
//               }
//               let divIcon = new DC.DivIcon(
//                 new DC.Position(i.lng, i.lat, 0),
//                 `<div class="public-map-popup">
//                     ${iconEl}
//                   </div>`
//               )
//               addTileLayers[item.layerName].addOverlay(divIcon)
//             })
//           })
//         } else {
//           addTileLayers[item.layerName].show = true
//         }
//       }
//     } else {
//       if (addTileLayers[item.layerName]) {
//         if (item.subType == 'labelPoint') {
//           addTileLayers[item.layerName].show = false
//         }
//       }
//     }
//   })
// }
onUnmounted(() => {
  tileLayers && window.$viewer.removeLayer(tileLayers)
  let arr = Object.keys(addTileLayers)
src/store/usepoint.js
New file
@@ -0,0 +1,34 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-06 10:46:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-07 18:58:32
 * @FilePath: \bigScreen\src\store\router.js
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
 */
// src/stores/useUserStore.js
import { defineStore } from 'pinia'
export const usePointStore = defineStore('usePointStore', {
  state: () => ({
    sharedData: '1'
  }),
  actions: {
    updateSharedData(newData) {
      this.sharedData = newData;
    }
  }
  // persist: {
  //   enabled: true,
  //   strategies: [
  //     {
  //       key: 'usepoint',
  //       paths: ['usepoint'],
  //       storage: localStorage,
  //     }
  //   ]
  // }
})
src/views/companyInfo/components/box/dataContent.vue
@@ -4,22 +4,136 @@
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 15:00:55
 * @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
import publicContent from './publicContent.vue'
const fxy = () => {
    if (state.layer) {
        console.log("***************************")
        window.$viewer.removeLayer(state.layer)
    }
    let layer = new DC.VectorLayer(`${row.id}`)
    state.layer = layer
    window.$viewer.addLayer(layer)
    let material = new DC.PolylineDashMaterialProperty({
        color: DC.Color.ORANGE
    })
    let item = new DC.Position(row.lng, row.lat, 100)
    let label = new DC.CustomLabel(
        item,
        row.name
    )
    label.setStyle({
        fillColor: DC.Color.YELLOW,
        font: '12px',
        pixelOffset: { x: 0, y: -10 },
    })
    label.setVLine({
        width: 2,
        material
    })
    layer.addOverlay(label)
}
const fxe = () => {
    if (state.layer) {
        console.log("***************************")
        window.$viewer.removeLayer(state.layer)
    }
    let layer = new DC.VectorLayer(`${row.id}`)
    state.layer = layer
    window.$viewer.addLayer(layer)
    let material = new DC.PolylineDashMaterialProperty({
        color: DC.Color.ORANGE
    })
    let item = new DC.Position(row.lng, row.lat, 100)
    let label = new DC.CustomLabel(
        item,
        row.name
    )
    label.setStyle({
        fillColor: DC.Color.YELLOW,
        font: '12px',
        pixelOffset: { x: 0, y: -10 },
    })
    label.setVLine({
        width: 2,
        material
    })
    layer.addOverlay(label)
}
const fxs = () => {
    if (state.layer) {
        console.log("***************************")
        window.$viewer.removeLayer(state.layer)
    }
    let layer = new DC.VectorLayer(`${row.id}`)
    state.layer = layer
    window.$viewer.addLayer(layer)
    let material = new DC.PolylineDashMaterialProperty({
        color: DC.Color.ORANGE
    })
    let item = new DC.Position(row.lng, row.lat, 100)
    let label = new DC.CustomLabel(
        item,
        row.name
    )
    label.setStyle({
        fillColor: DC.Color.YELLOW,
        font: '12px',
        pixelOffset: { x: 0, y: -10 },
    })
    label.setVLine({
        width: 2,
        material
    })
    layer.addOverlay(label)
}
</script>
<template>
    <public-content>
        <template #content>
            <div>
            <div class="data-content">
                <ul>
                    <li @click="fxy">防线一</li>
                    <li @click="fxe">防线二</li>
                    <li @click="fxs">防线三</li>
                </ul>
            </div>
        </template>
    </public-content>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.data-content {
    color: #fff;
}
.data-content>ul {
    margin-top: 90px;
    margin-left: 90px;
}
.data-content>ul>li {
    display: block;
    color: #000;
    margin-top: 160px;
    background-color: #fff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
}
</style>
src/views/companyInfo/components/leftContainer.vue
@@ -4,9 +4,9 @@
 * @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.
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
import dataContent from './box/dataContent.vue'
@@ -16,14 +16,14 @@
<template>
  <div class="left-container">
    <!-- <div class="data box">
    <div class="data box">
      <title-box>
        <template #titleName>
          数据概览
          <!-- 数据概览 -->
        </template>
      </title-box>
      <data-content></data-content>
    </div> -->
    </div>
    <!-- <div class="unit box">
      <title-box>
@@ -45,4 +45,4 @@
  </div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped></style>
src/views/companyInfo/components/mainMenu.vue
@@ -12,6 +12,8 @@
import { useRouter, useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getTime } from '@/utils/getTime.js'
import { usePointStore } from 'store/usepoint'
const useAppStore = usePointStore()
let router = useRouter()
let currentUrl = ref('statistics')
@@ -48,15 +50,22 @@
const goToPath = (params) => {
  if (params.value == 1) {
   useAppStore.updateSharedData('1')
    emit('childEvent', params.value)
    return
  } else if (params.value == 2) {
   useAppStore.updateSharedData('1')
    emit('childEvent', params.value)
    return
  } else if (params.value == 3) {
   useAppStore.updateSharedData('3')
    emit('childEvent', params.value)
    return
  } else if (params.value == 4) {
   useAppStore.updateSharedData('1')
    emit('childEvent', params.value)
    return
  }
  emit('childEvent', params.value)
  if (params.children && params.children.length > 0) return
  if (params.path) {
src/views/companyInfo/index.vue
@@ -4,14 +4,15 @@
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-09 15:31:53
 * @FilePath: \bigScreen\src\views\companyInfo\index.vue
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
 * @Description:
 *
 * Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<script setup>
import { computerCapacity } from "utils/turfPolygon.js"
import qyfw from "@/assets/json/qyfw"
import rightContainer from './components/rightContainer.vue'
import leftContainer from './components/leftContainer.vue'
import centerContainer from './components/centerContainer.vue' // 修改这里
import mainMenuVue from './components/mainMenu.vue'
import { onUnmounted } from "vue"
@@ -62,6 +63,9 @@
    <div class="main-header">
      <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer>
    </div>
    <div class="main-container" v-if="buttonIndex == 4">
      <left-container :button-index="buttonIndex"></left-container>
    </div>
    <div class="main-container" v-if="buttonIndex <= 2">
      <right-container :button-index="buttonIndex"></right-container>
@@ -97,4 +101,4 @@
}
.cur-page-container {}
</style>
</style>
src/views/space/components/box/dataContent.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-12 17:55:45
 * @LastEditTime: 2024-11-12 18:31:08
 * @FilePath: \bigScreen\src\views\space\components\box\dataContent.vue
 * @Description: 
 * 
@@ -45,7 +45,7 @@
  total: 0,
}
function positionColor () {
function positionColor() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -60,7 +60,7 @@
  }
}
function positionDisabled () {
function positionDisabled() {
  return (row) => {
    if (
      (row.X && row.X != 0) ||
@@ -106,51 +106,42 @@
    })
}
let state = reactive({
  layer: {}
})
// 行点击
function rowClick (row) {
  // 读取定位飞
  window.$viewer.zoomToPosition(new DC.Position(
    Number(row.lng),
    Number(row.lat),
    800,
    0,
    -80,
    0
  ), () => {
  })
function rowClick(row) {
  // let layer = new DC.VectorLayer('layer')
  // window.$viewer.addLayer(layer)
  // let positions = generatePosition(row.lng, row.lat)
  // let material = new DC.PolylineDashMaterialProperty({
  //   color: DC.Color.ORANGE
  // })
  // positions.forEach(item => {
  //   let label = new DC.CustomLabel(
  //     item,
  //     row.name
  //   )
  //   label.setStyle({
  //     fillColor: DC.Color.YELLOW,
  //     font: '12px',
  //     pixelOffset: { x: 0, y: -10 }
  //   })
  //   label.setVLine({
  //     width: 2,
  //     material
  //   })
  //   layer.addOverlay(label)
  // })
  if (state.layer) {
    window.$viewer.removeLayer(state.layer)
  }
  let layer = new DC.HtmlLayer(`${row.id}`)
  state.layer = layer
  window.$viewer.addLayer(layer)
  let iconEl = `<div class="marsBlueGradientPnl">
                  <div>${row.name}</div>
                </div>`
  let divIcon = new DC.DivIcon(
    new DC.Position(row.lng, row.lat, 0),
    `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
  )
  // divIcon.attrParams = row
  let incident = () => { }
  // if (item.incident) incident = item.incident
  divIcon.on(DC.MouseEventType.CLICK, incident)
  layer.addOverlay(divIcon)
  window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
}
function generatePosition (lng, lat) {
  let list = []
  list.push(new DC.Position(lng, lat, 100))
  return list
}
// 查看详情
function goDetail (row) { }
function goDetail(row) { }
const searchBtn = (params) => {
  resetPage()
@@ -192,8 +183,7 @@
<template>
  <div class="w100 h0 flex-1 flex f-d-c">
    <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn"
      ref="SeachBarCondition"></global-search>
    <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search>
    <div class="h0 flex-1 table-content" ref="TableContent">
      <el-table :data="tableData" :height="curTableHeight" style="width: 100%" v-loading="loading">
src/views/survey/components/leftContainer.vue
@@ -4,14 +4,23 @@
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-05 16:33:44
 * @FilePath: \bigScreen\src\views\survey\components\leftContainer.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 * @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'
import { useRouterStore } from 'store/router'
const store = useRouterStore()
onMounted(() => {
  console.log('leftContainer*************************************')
  store.setLoadSub(false)
})
</script>
<template>
@@ -51,4 +60,4 @@
  </div>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped></style>