From 8b207d4ea5a01c64f639464cebf54ea99d998d14 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Tue, 12 Nov 2024 18:10:24 +0800
Subject: [PATCH] 应急空间点击定位，到指定位置，企业应急空间，点击图标上图
---
src/pages/layout/components/scomponents/layersControl.vue | 150 ++++++++++++++++++
src/views/companyInfo/components/leftContainer.vue | 14
src/views/companyInfo/components/box/dataContent.vue | 126 +++++++++++++++
src/store/usepoint.js | 34 ++++
src/views/companyInfo/index.vue | 12 +
src/views/survey/components/leftContainer.vue | 17 +
src/views/companyInfo/components/mainMenu.vue | 15 +
src/views/space/components/box/dataContent.vue | 79 ++++-----
8 files changed, 374 insertions(+), 73 deletions(-)
diff --git a/src/pages/layout/components/scomponents/layersControl.vue b/src/pages/layout/components/scomponents/layersControl.vue
index 84cc8a4..77be38d 100644
--- a/src/pages/layout/components/scomponents/layersControl.vue
+++ b/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)
diff --git a/src/store/usepoint.js b/src/store/usepoint.js
new file mode 100644
index 0000000..e2ef7e4
--- /dev/null
+++ b/src/store/usepoint.js
@@ -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,
+ // }
+ // ]
+ // }
+})
\ No newline at end of file
diff --git a/src/views/companyInfo/components/box/dataContent.vue b/src/views/companyInfo/components/box/dataContent.vue
index 7152a88..befe499 100644
--- a/src/views/companyInfo/components/box/dataContent.vue
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/src/views/companyInfo/components/leftContainer.vue b/src/views/companyInfo/components/leftContainer.vue
index eb16e22..1b2d647 100644
--- a/src/views/companyInfo/components/leftContainer.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/src/views/companyInfo/components/mainMenu.vue b/src/views/companyInfo/components/mainMenu.vue
index 5bc5f9c..7658868 100644
--- a/src/views/companyInfo/components/mainMenu.vue
+++ b/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) {
diff --git a/src/views/companyInfo/index.vue b/src/views/companyInfo/index.vue
index 0b6cbdd..51057b3 100644
--- a/src/views/companyInfo/index.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/space/components/box/dataContent.vue b/src/views/space/components/box/dataContent.vue
index 33fc026..79f9527 100644
--- a/src/views/space/components/box/dataContent.vue
+++ b/src/views/space/components/box/dataContent.vue
@@ -52,7 +52,7 @@
total: 0,
}
-function positionColor () {
+function positionColor() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -67,7 +67,7 @@
}
}
-function positionDisabled () {
+function positionDisabled() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -137,50 +137,42 @@
})
}
-// 行点击
-function rowClick (row) {
- // 读取定位飞
- window.$viewer.zoomToPosition(new DC.Position(
- Number(row.lng),
- Number(row.lat),
- 800,
- 0,
- -80,
- 0
- ), () => {
- })
+let state = reactive({
+ layer: {}
+})
- // 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)
- // })
+
+// 行点击
+function rowClick(row) {
+
+ 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()
@@ -210,8 +202,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">
diff --git a/src/views/survey/components/leftContainer.vue b/src/views/survey/components/leftContainer.vue
index 581965a..b22c221 100644
--- a/src/views/survey/components/leftContainer.vue
+++ b/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>
\ No newline at end of file
+<style lang="scss" scoped></style>
--
Gitblit v1.9.3