| | |
| | | handleCheckChange(data.filter(i => indexPoint.value.includes(i.id))) |
| | | }) |
| | | |
| | | const sharedData = computed(() => pointStore.sharedData); |
| | | // |
| | | watch(sharedData, (newValue) => { |
| | | let companyInfo = JSON.parse(localStorage.getItem('companyInfo')) |
| | | // const sharedData = computed(() => pointStore.sharedData); |
| | | // watch(sharedData, (newValue) => { |
| | | // }); |
| | | |
| | | 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) |
| | |
| | | <!-- |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @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. |
| | | * @LastEditTime: 2024-11-12 18:10:32 |
| | | * @FilePath: \bigScreen\src\views\space\components\leftContainer.vue |
| | | * @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) |
| | | import { getList } from "@/api/space/space" |
| | | import { onUnmounted, reactive } from 'vue' |
| | | const resData = reactive({ |
| | | data: [{ |
| | | label: '防线一', |
| | | value: '1', |
| | | type: 1, |
| | | remark: '防火提及配套设置、装置围堰、罐区围堰' |
| | | }, { |
| | | label: '防线二', |
| | | value: '2', |
| | | type: 1, |
| | | remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀' |
| | | }, |
| | | { |
| | | label: '防线三', |
| | | value: '3', |
| | | type: 1, |
| | | remark: '事故应急池、雨水收集池' |
| | | } |
| | | let layer = new DC.VectorLayer(`${row.id}`) |
| | | state.layer = layer |
| | | window.$viewer.addLayer(layer) |
| | | let material = new DC.PolylineDashMaterialProperty({ |
| | | color: DC.Color.ORANGE |
| | | ] |
| | | }) |
| | | const curSelect = ref('1') |
| | | let addTileLayers = {} |
| | | const handleCheckChange = (row) => { |
| | | let companyInfo = JSON.parse(localStorage.getItem('companyInfo')) |
| | | console.log(row) |
| | | resData.data.forEach(item => { |
| | | if (row.value === item.value) { |
| | | if (!addTileLayers[item.label]) { |
| | | addTileLayers[item.label] = new DC.HtmlLayer(item.label) |
| | | window.$viewer.addLayer(addTileLayers[item.label]) |
| | | getList({ |
| | | firmId: companyInfo.id, |
| | | size: 1000, |
| | | type: item.type, |
| | | }).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>${item.remark}</div> </div>` |
| | | } |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(i.lng, i.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | |
| | | divIcon.attrParams = i |
| | | |
| | | let incident = () => { } |
| | | |
| | | if (item.incident) incident = item.incident |
| | | |
| | | divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | |
| | | addTileLayers[item.label].addOverlay(divIcon) |
| | | }) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.label].show = true |
| | | } |
| | | } else { |
| | | if (addTileLayers[item.label]) { |
| | | addTileLayers[item.label].show = false |
| | | } |
| | | } |
| | | }) |
| | | 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 tabClick = (item) => { |
| | | handleCheckChange(item) |
| | | curSelect.value = item.value |
| | | } |
| | | |
| | | |
| | | const fxs = () => { |
| | | if (state.layer) { |
| | | console.log("***************************") |
| | | window.$viewer.removeLayer(state.layer) |
| | | const showOn = computed(() => (item) => { |
| | | if (curSelect.value == item.value) { |
| | | return true |
| | | } |
| | | let layer = new DC.VectorLayer(`${row.id}`) |
| | | state.layer = layer |
| | | window.$viewer.addLayer(layer) |
| | | let material = new DC.PolylineDashMaterialProperty({ |
| | | color: DC.Color.ORANGE |
| | | return false |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | tabClick(resData.data[0]) |
| | | }), |
| | | |
| | | onUnmounted(() => { |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) |
| | | }) |
| | | }) |
| | | 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 class="data-content"> |
| | | <ul> |
| | | <li @click="fxy">防线一</li> |
| | | <li @click="fxe">防线二</li> |
| | | <li @click="fxs">防线三</li> |
| | | </ul> |
| | | <div class="left-container cur-container"> |
| | | <div class="tablist h100"> |
| | | <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index" |
| | | @click="tabClick(item)"> |
| | | <div class="nowrap-ellipsis-hidden"> |
| | | {{ item.label }} |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .data-content { |
| | | color: #fff; |
| | | } |
| | | .cur-container { |
| | | background: transparent; |
| | | pointer-events: none; |
| | | |
| | | .data-content>ul { |
| | | margin-top: 90px; |
| | | margin-left: 90px; |
| | | } |
| | | .tablist { |
| | | pointer-events: all; |
| | | |
| | | .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%; |
| | | |
| | | &>div { |
| | | margin-top: 86px; |
| | | padding: 10px; |
| | | width: 64px; |
| | | height: 64px; |
| | | line-height: 64px; |
| | | text-align: center; |
| | | border-radius: 50%; |
| | | box-shadow: inset 0 0 40px #409eff; |
| | | color: #fff; |
| | | box-sizing: content-box; |
| | | |
| | | &.on { |
| | | position: relative; |
| | | color: #75b1ff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="table-box"> |
| | | <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="tableCellStyle" |
| | | v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.1)"> |
| | | <el-table-column fixed prop="name" label="名称" /> |
| | | <el-table-column prop="numUnit" label="数量" width="100" /> |
| | | <!-- <el-table-column prop="firmName" label="单位名称" /> --> |
| | | <el-table-column prop="personInCha" label="负责人" width="100" /> |
| | | <el-table :data="tableData" empty-text="" style="width: 100%" :header-cell-style="headerCellStyle" |
| | | :cell-style="tableCellStyle" element-loading-background="rgba(122, 122, 122, 0.1)"> |
| | | <el-table-column prop="name" label="名称" /> |
| | | <el-table-column prop="numUnit" label="数量" /> |
| | | <el-table-column prop="personInCha" label="负责人" /> |
| | | </el-table> |
| | | </div> |
| | | <!-- <div class="el-page"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | data.companyInfo = JSON.parse(localStorage.getItem('companyInfo')) |
| | | getLists() |
| | | }) |
| | | // 表格样式 |
| | | const tableCellStyle = ({ row, column }) => { |
| | | return { background: "#152851", color: "#fff" } |
| | | } |
| | | // 表格表头样式 |
| | | const headerCellStyle = ({ }) => { |
| | | return { |
| | | background: "#152851", |
| | | color: "#fff", |
| | | } |
| | | } |
| | | // 搜索条件 |
| | | const formInline = reactive({ |
| | | perInCha: "", |
| | | type: '' |
| | | }) |
| | | |
| | | // 提交查询 |
| | | const onSubmit = () => { |
| | | pages.page = 1 |
| | | pages.pageSize = 13 |
| | | pages.total = 0 |
| | | console.log("submit!") |
| | | getLists(formInline) |
| | | } |
| | | |
| | | // 分页树改变 |
| | | const handleSizeChange = (val) => { |
| | | pages.pageSize = val |
| | | getLists(formInline) |
| | | } |
| | | // 分页改变 |
| | | const handleCurrentChange = (val) => { |
| | | pages.page = val |
| | | getLists(formInline) |
| | | } |
| | | // 重置条件 |
| | | const clearBtn = () => { |
| | | formInline.perInCha = '' |
| | | formInline.type = '' |
| | | pages.page = 1 |
| | | pages.pageSize = 13 |
| | | pages.total = 0 |
| | | getLists(formInline) |
| | | } |
| | | |
| | | // 查询分页数据 |
| | | function getLists (param = {}) { |
| | | param.current = pages.page |
| | | param.size = pages.pageSize |
| | | param.firmId = data.companyInfo.id |
| | | loading.value = true |
| | | getList(param) |
| | | .then((res) => { |
| | | const data = res.data.data |
| | | data.records.forEach((element) => { |
| | | if (element.type == 1) { |
| | | element.ownership = "园区" |
| | | } else { |
| | | element.ownership = "企业" |
| | | } |
| | | }) |
| | | tableData.value = data.records |
| | | pages.total = data.total |
| | | loading.value = false |
| | | }) |
| | | .catch((err) => { |
| | | loading.value = false |
| | | console.log(err) |
| | | }) |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="search-box"> |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item label="" class="form-item-input"> |
| | | <el-input v-model="formInline.perInCha" placeholder="请输入姓名" clearable style="width: 120px" /> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="归属"> |
| | | <el-select v-model="formInline.type" placeholder="请选择" clearable style="width: 120px"> |
| | | <el-option label="园区" value="1" /> |
| | | <el-option label="企业" value="2" /> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <el-form-item class="search-btn"> |
| | | <el-button type="primary" @click="onSubmit">查询</el-button> |
| | | <el-button type="primary" @click="clearBtn">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="tableCellStyle" |
| | | v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.1)"> |
| | | <el-table-column fixed prop="perInCha" label="责任人姓名" /> |
| | | <el-table-column prop="perInChaPho" label="联系电话" /> |
| | | <!-- <el-table-column prop="firmName" label="单位名称" /> --> |
| | | <el-table-column prop="perInCha" label="负责人" width="100" /> |
| | | </el-table> |
| | | <div class="el-page"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
| | | </div> |
| | | 1111111111111111 |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .el-form-item__label { |
| | | color: #fff !important; |
| | | } |
| | | |
| | | /* 当表格没有数据时,修改表格的背景颜色 */ |
| | | .el-table--empty .el-table__body { |
| | | background-color: #19284e !important; |
| | | /* 你想要的背景颜色 */ |
| | | } |
| | | |
| | | .search-box { |
| | | padding: 10px; |
| | | |
| | | ::v-deep .el-table__body-wrapper { |
| | | background-color: #152851; |
| | | } |
| | | } |
| | | |
| | | .el-page { |
| | | margin-top: 10px; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | // margin-bottom:10px; |
| | | } |
| | | |
| | | .form-item-input { |
| | | width: 160px; |
| | | |
| | | ::v-deep(.el-input) { |
| | | width: 0; |
| | | flex: 1; |
| | | |
| | | .el-input__wrapper { |
| | | font-size: 16px; |
| | | font-weight: 400; |
| | | border-radius: 0; |
| | | background: rgba(135, 158, 199, 0.3); |
| | | box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95); |
| | | |
| | | .el-input__inner { |
| | | color: #BFD3E5; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .search-btn { |
| | | ::v-deep .el-button--primary { |
| | | background-color: transparent; |
| | | border-color: none; |
| | | border: none; |
| | | cursor: pointer; |
| | | color: #edffff; |
| | | background: rgba(135, 158, 199, 0.3); |
| | | box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95); |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped></style> |
| | |
| | | <!-- |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-03-13 14:54:26 |
| | | * @Date: 2023-03-10 15:27:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-03-13 15:00:55 |
| | | * @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue |
| | | * @LastEditTime: 2024-11-12 18:10:32 |
| | | * @FilePath: \bigScreen\src\views\space\components\leftContainer.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | import publicContent from './publicContent.vue' |
| | | import EventBus from 'utils/bus' |
| | | |
| | | import { getDictionary } from "@/api/dict/dict" |
| | | import { onUnmounted, reactive } from 'vue' |
| | | import { getList } from "@/api/space/space" |
| | | const resData = reactive({ |
| | | data: [] |
| | | }) |
| | | const curSelect = ref('') |
| | | |
| | | let addTileLayers = {} |
| | | |
| | | const handleCheckChange = (row) => { |
| | | let companyInfo = JSON.parse(localStorage.getItem('companyInfo')) |
| | | resData.data.forEach(item => { |
| | | if (row.value == item.value) { |
| | | if (!addTileLayers[item.label]) { |
| | | addTileLayers[item.label] = new DC.HtmlLayer(item.label) |
| | | window.$viewer.addLayer(addTileLayers[item.label]) |
| | | getList({ |
| | | firmId: companyInfo.id, |
| | | size: 1000, |
| | | type: item.type, |
| | | }).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.name}</div> |
| | | </div>` |
| | | } |
| | | |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(i.lng, i.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | |
| | | divIcon.attrParams = i |
| | | |
| | | let incident = () => { } |
| | | |
| | | if (item.incident) incident = item.incident |
| | | |
| | | divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | |
| | | addTileLayers[item.label].addOverlay(divIcon) |
| | | }) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.label].show = true |
| | | } |
| | | } else { |
| | | if (addTileLayers[item.label]) { |
| | | addTileLayers[item.label].show = false |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 获取下拉字典 |
| | | const getDictData = (code) => { |
| | | const param = { |
| | | code: code, |
| | | } |
| | | getDictionary(param).then((res) => { |
| | | resData.data = res.data.data.map(item => { |
| | | return { |
| | | type: item.sort, |
| | | label: item.dictValue, |
| | | value: item.dictKey |
| | | } |
| | | }) |
| | | |
| | | tabClick(resData.data[0]) |
| | | }) |
| | | } |
| | | |
| | | const tabClick = (item) => { |
| | | handleCheckChange(item) |
| | | curSelect.value = item.value |
| | | } |
| | | |
| | | const showOn = computed(() => (item) => { |
| | | if (curSelect.value == item.value) { |
| | | return true |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | getDictData("emergency_space_type") |
| | | |
| | | onUnmounted(() => { |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) |
| | | }) |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <public-content> |
| | | <template #content> |
| | | <div> |
| | | |
| | | <div class="left-container cur-container"> |
| | | <div class="tablist h100"> |
| | | <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index" |
| | | @click="tabClick(item)"> |
| | | <div class="nowrap-ellipsis-hidden"> |
| | | {{ item.label }} |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .cur-container { |
| | | background: transparent; |
| | | pointer-events: none; |
| | | |
| | | .tablist { |
| | | pointer-events: all; |
| | | |
| | | &>div { |
| | | margin-top: 16px; |
| | | padding: 10px; |
| | | width: 64px; |
| | | height: 64px; |
| | | line-height: 64px; |
| | | text-align: center; |
| | | border-radius: 50%; |
| | | box-shadow: inset 0 0 40px #409eff; |
| | | color: #fff; |
| | | box-sizing: content-box; |
| | | |
| | | &.on { |
| | | position: relative; |
| | | color: #75b1ff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | import dataContent from './box/dataContent.vue' |
| | | import unitContent from './box/unitContent.vue' |
| | | import fireContent from './box/fireContent.vue' |
| | | |
| | | let state = defineProps({ |
| | | buttonIndex: { |
| | | type: Number, |
| | | default: 1 |
| | | } |
| | | }) |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="left-container"> |
| | | <div class="data box"> |
| | | |
| | | <div class="unit box" v-if="state.buttonIndex == 3"> |
| | | <title-box> |
| | | <template #titleName> |
| | | <!-- 数据概览 --> |
| | | <!-- 应急空间 --> |
| | | </template> |
| | | </title-box> |
| | | <unit-content></unit-content> |
| | | </div> |
| | | |
| | | <div class="data box" v-if="state.buttonIndex == 4"> |
| | | <title-box> |
| | | <template #titleName> |
| | | <!-- 三道防线 --> |
| | | </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> |
| | |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .left-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100px; |
| | | height: 100%; |
| | | pointer-events: auto; |
| | | // background: rgba(28, 115, 195, 0.2); |
| | | } |
| | | </style> |
| | |
| | | [ |
| | | { |
| | | menuName: '企业信息', |
| | | path: '/layout/sub/companyInfo', |
| | | value: 1, |
| | | }, |
| | | { |
| | | menuName: '应急物质', |
| | | path: '/layout/sub/', |
| | | value: 2, |
| | | }, |
| | | { |
| | | menuName: '应急空间', |
| | | path: '/layout/ws', |
| | | value: 3, |
| | | }, |
| | | { |
| | | menuName: '三道防线', |
| | | path: '/layout/sj', |
| | | value: 4, |
| | | } |
| | | ] |
| | |
| | | |
| | | 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 |
| | | } |
| | | if (params.children && params.children.length > 0) return |
| | | |
| | | if (params.path) { |
| | | if (router.currentRoute.value.path == params.path) return |
| | | // router.push(params.path) |
| | | } else { |
| | | params.childrenFlag = !params.childrenFlag |
| | | } |
| | | } |
| | | |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="fire-trend box" v-if="state.buttonIndex == 3"> |
| | | <!-- <div class="fire-trend box" > |
| | | <title-box> |
| | | <template #titleName> |
| | | 救援队伍 |
| | |
| | | <div class="content-box"> |
| | | <occur-statistics></occur-statistics> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | <div class="main-header"> |
| | | <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer> |
| | | </div> |
| | | <div class="main-container" v-if="buttonIndex == 4"> |
| | | <div class="main-container"> |
| | | <left-container :button-index="buttonIndex"></left-container> |
| | | </div> |
| | | |
| | |
| | | // 行点击 |
| | | 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) |
| | | // 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>` |
| | | // ) |
| | | // let incident = () => { } |
| | | // divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | // layer.addOverlay(divIcon) |
| | | |
| | | window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0)) |
| | | |