3 files modified
6 files added
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-25 15:09:55 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-10-31 18:27:53 |
| | | * @LastEditTime: 2024-11-04 18:08:12 |
| | | * @FilePath: \bigScreen\src\hooks\initMap.js |
| | | * @Description: |
| | | * |
| | |
| | | viewer = new DC.Viewer('viewer-container') |
| | | |
| | | const global = appContext.config.globalProperties |
| | | |
| | | global.$viewer = viewer |
| | | |
| | | store.setLoadMap(true) |
| | | global.$viewer.zoomToPosition(new DC.Position( |
| | | 115.1048036679409, |
| | | 27.276835758787513, |
| | | 4000, |
| | | 0, |
| | | -90, |
| | | 0 |
| | | ), () => { |
| | | |
| | | |
| | | store.setLoadMap(true) |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-04 14:27:54 |
| | | * @LastEditTime: 2024-11-04 19:12:02 |
| | | * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | |
| | | <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"> |
| | | <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"> |
| | | <template v-slot:default="{ node }"> |
| | | <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']"> |
| | | <!-- 自定义label的slot --> |
| | |
| | | <script setup> |
| | | import { getPage } from '@/api/indParkInfo' |
| | | import { getList } from "@/api/space/space" |
| | | import { getList as getRiskList } from "@/api/riskSource/riskSource" |
| | | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | import { getViewer } from 'utils/getViewer' |
| | | const globalViewer = getViewer() |
| | | |
| | | const treeRef = ref(null) |
| | | |
| | | const treeProps = { |
| | | indent: 16, |
| | |
| | | |
| | | const data = [ |
| | | { |
| | | id: 1, |
| | | id: '1', |
| | | label: '化工园区', |
| | | type: 'layer', |
| | | subType: '3Dtile', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 2, |
| | | id: '2', |
| | | label: '企业分布', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3, |
| | | id: '3', |
| | | label: '应急空间', |
| | | children: [ |
| | | { |
| | | id: 3 - 1, |
| | | id: '3-1', |
| | | label: '应急池', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | layerName: 'yjc' |
| | | }, |
| | | { |
| | | id: 3 - 2, |
| | | id: '3-2', |
| | | label: '阀门', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3 - 3, |
| | | id: '3-3', |
| | | label: '公共管网', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3 - 4, |
| | | id: '3-4', |
| | | label: '污水提升泵站', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3 - 5, |
| | | id: '3-5', |
| | | label: '水库', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3 - 6, |
| | | id: '3-6', |
| | | label: '应急泵', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | }, |
| | | |
| | | { |
| | | id: 3 - 7, |
| | | id: '3-7', |
| | | label: '消防沙', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | layerName: 'xfs' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | |
| | | { |
| | | id: '4', |
| | | label: '风险源', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getRiskList, |
| | | params: { |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | layerName: 'fxy' |
| | | }, |
| | | ] |
| | | |
| | | const defaultProps = { |
| | |
| | | let tileLayers = new DC.TilesetLayer('tileLayers') |
| | | globalViewer.addLayer(tileLayers) |
| | | |
| | | |
| | | const checkNodeById = (id) => { |
| | | const node = treeRef.value.getNode(id) |
| | | if (node) { |
| | | treeRef.value.setChecked(node, true, true) // true for checked, true for emit event |
| | | } |
| | | } |
| | | |
| | | const handleCheckChange = (data, options) => { |
| | | collectedNodes.value = [] |
| | |
| | | tileLayers.addOverlay(addTileLayers[item.layerName]) |
| | | globalViewer.flyTo(addTileLayers[item.layerName]) |
| | | } else if (item.subType == 'labelPoint') { |
| | | addTileLayers[item.layerName] = new DC.HtmlLayer('labelLayer') |
| | | globalViewer.addLayer(addTileLayers[item.layerName]) |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName]) |
| | | globalViewer.addLayer(addTileLayers[item.layerName]) |
| | | } |
| | | |
| | | item.method(item.params).then(res => { |
| | | let data = res.data.data.records |
| | |
| | | new DC.Position(i.lng, i.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | <div class="marsBlueGradientPnl"> |
| | | <div>${i.name}</div> |
| | | <div>${i[item.showParams] || i.name}</div> |
| | | </div> |
| | | </div>` |
| | | ) |
| | |
| | | }) |
| | | } |
| | | } else { |
| | | if (item.subType == '3Dtile') { |
| | | tileLayers.removeOverlay(addTileLayers[item.layerName]) |
| | | } else if (item.subType == 'labelPoint') { |
| | | globalViewer.removeLayer(addTileLayers[item.layerName]) |
| | | } |
| | | if (addTileLayers[item.layerName]) { |
| | | if (item.subType == '3Dtile') { |
| | | tileLayers.removeOverlay(addTileLayers[item.layerName]) |
| | | } else if (item.subType == 'labelPoint') { |
| | | globalViewer.removeLayer(addTileLayers[item.layerName]) |
| | | } |
| | | |
| | | delete addTileLayers[item.layerName] |
| | | delete addTileLayers[item.layerName] |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // onMounted(() => { |
| | | // setTimeout(() => { |
| | | // checkNodeById('1') |
| | | // }, 1000) |
| | | // }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | |
| | | <script setup> |
| | | import { Text } from 'vue'; |
| | | import { Text } from 'vue' |
| | | import publicContent from './publicContent.vue' |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | import { getDetail } from '@/api/indParkInfo' |
| | | |
| | | import { getAssetsFile } from 'utils/utils' |
| | | |
| | | let state = reactive({ |
| | | parkInfo: {} |
| | | }) |
| | | |
| | | // 企业信息统计数组 |
| | | let parkInfoList = ref([ |
| | | let parkInfoList = reactive([ |
| | | { |
| | | id: 1, |
| | | name: 'plaArea', |
| | | title: '园区面积', |
| | | content: '1000', |
| | | unit: '公顷', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-mj.png', '/bgicon') |
| | | }, |
| | | { |
| | | id: 2, |
| | |
| | | title: '救援人员数量', |
| | | content: '1000', |
| | | unit: '人', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-jy.png', '/bgicon') |
| | | |
| | | }, |
| | | { |
| | |
| | | name: 'riskFirmNum', |
| | | title: '风险企业数量', |
| | | content: '1000', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-fx.png', '/bgicon') |
| | | }, |
| | | { |
| | | id: 4, |
| | | name: 'proTarNum', |
| | | title: '保护目标数量', |
| | | content: '1000', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-bh.png', '/bgicon') |
| | | }, |
| | | { |
| | | id: 5, |
| | | name: 'spaceNum', |
| | | title: '应急空间数量', |
| | | content: '1000', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-yj.png', '/bgicon') |
| | | }, |
| | | { |
| | | id: 6, |
| | | name: 'firmNum', |
| | | title: '企业数量', |
| | | content: '1000', |
| | | img: 'images/雨量站@2x.png' |
| | | img: getAssetsFile('yq-qy.png', '/bgicon') |
| | | } |
| | | ] |
| | | ) |
| | | |
| | | |
| | | |
| | | |
| | | // 初始化 |
| | | onMounted(() => { |
| | |
| | | |
| | | }) |
| | | // 获取详情 |
| | | function getData() { |
| | | function getData () { |
| | | getDetail().then(res => { |
| | | state.parkInfo = res.data.data |
| | | parkInfoList.value.forEach(item => { |
| | | parkInfoList.forEach(item => { |
| | | if (item.name == 'plaArea') { |
| | | state.parkInfo[item.name] && (item.content = (state.parkInfo[item.name] * 100).toFixed(2)) |
| | | } else { |
| | |
| | | |
| | | <div class="container"> |
| | | <div class="box-content-sj" v-for="item in parkInfoList" :key="item.id"> |
| | | <img :src="VITE_APP_BASE + item.img" alt=""> |
| | | <img :src="item.img" alt=""> |
| | | <div> |
| | | <div class="box-content-ss"> |
| | | <div> |
| | |
| | | |
| | | .box-content-img { |
| | | height: 300px; |
| | | overflow: scroll; |
| | | // 隐藏滚动条 |
| | | scrollbar-width: none; |
| | | overflow-x: hidden; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .box-content-img img { |
| | |
| | | } |
| | | |
| | | .box-content-sj img { |
| | | max-width: 60%; |
| | | height: 60px; |
| | | width: 36px; |
| | | height: 36px; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .box-content-ss { |