| src/pages/layout/components/scomponents/layersControl.vue | ●●●●● patch | view | raw | blame | history | |
| src/store/usepoint.js | ●●●●● patch | view | raw | blame | history | |
| src/views/companyInfo/components/box/dataContent.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/companyInfo/components/leftContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/companyInfo/components/mainMenu.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/companyInfo/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/space/components/box/dataContent.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/survey/components/leftContainer.vue | ●●●●● 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>