From b67f46b4a768b4cd72d4e463c5dffefe977ddeb7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Dec 2024 22:04:27 +0800
Subject: [PATCH] 应急空间及全局图层去除废水处理站、污水池
---
src/views/companyInfo/components/box/fireTrend.vue | 205 ++++++++++++++++++++++++++++++++++-----------------
1 files changed, 137 insertions(+), 68 deletions(-)
diff --git a/src/views/companyInfo/components/box/fireTrend.vue b/src/views/companyInfo/components/box/fireTrend.vue
index 835e5f0..3f49081 100644
--- a/src/views/companyInfo/components/box/fireTrend.vue
+++ b/src/views/companyInfo/components/box/fireTrend.vue
@@ -2,17 +2,23 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-13 14:54:26
* @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-12-02 21:23:17
+ * @FilePath: \bigScreen\src\views\companyInfo\components\box\fireTrend.vue
+ * @Description:
+ *
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
import publicContent from "./publicContent.vue"
-import { getList } from "@/api/emergencySupplies/emergencySupplies"
+import { getList, getCompanyList } from "@/api/emergencySupplies/emergencySupplies"
import { reactive } from "vue"
+const { VITE_APP_BASE } = import.meta.env
+
+let image = ref(VITE_APP_BASE + 'img/mapicon/yjwz.png')
+
+const TableContent = ref(null)
+const curTableHeight = ref(0)
const loading = ref(false)
const tableData = ref([])
@@ -27,20 +33,11 @@
})
onMounted(() => {
+ curTableHeight.value = TableContent.value.offsetHeight
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({
name: "",
@@ -52,7 +49,6 @@
pages.page = 1
pages.pageSize = 1000
pages.total = 0
- console.log("submit!")
getLists(formInline)
}
@@ -75,51 +71,142 @@
pages.total = 0
getLists(formInline)
}
+// 应急物资图片
+let picList = ref([])
// 查询分页数据
-function getLists(param = {}) {
+function getLists (param = {}) {
param.current = pages.page
param.size = pages.pageSize
param.firmId = data.companyInfo.id
loading.value = true
- getList(param)
+ getCompanyList(param)
.then((res) => {
const data = res.data.data
- data.records.forEach((element) => {
- if (element.ownership == 1) {
- element.ownership = "园区"
- } else {
- element.ownership = "企业"
- }
- })
- tableData.value = data.records
+ tableData.value = data.dataList
+ picList.value = data.picList
pages.total = data.total
loading.value = false
+ rowClick(tableData.value[0], '', '')
})
.catch((err) => {
loading.value = false
console.log(err)
})
}
+let addTileLayers = {}
+let addPupoLayers = {}
+
+// 行点击
+function rowClick (row, column, event) {
+ if (!row.lng || !row.lat) {
+ return
+ }
+ // 销毁之前的
+ destroy()
+ if (!addTileLayers[row.name]) {
+ addTileLayers[row.name] = new DC.HtmlLayer(row.name)
+ window.$viewer.addLayer(addTileLayers[row.name])
+ let iconEl = `
+ <div class="map-name">${'应急物资'}</div>
+ <div class="map-icon">
+ <img src="${image.value}">
+ </div>
+ `
+ let divIcon = new DC.DivIcon(
+ new DC.Position(row.lng, row.lat, row.ele || 64),
+ `<div class="public-map-popup qyfb-box yjwz-height-box ">
+ ${iconEl}
+ </div>`
+ )
+ divIcon.attrParams = row
+ let incident = (e) => {
+ const { attrParams } = e.overlay
+ // 删除
+ destroyPupoLayers()
+ if (picList.value.length == 0) {
+ return
+ }
+ addPupoLayers['企业应急物资'] = new DC.HtmlLayer('企业应急物资')
+ window.$viewer.addLayer(addPupoLayers['企业应急物资'])
+ let iconEl = `<div class="marsBlueGradientPnl">
+ <img src="${picList.value[0].link}" />
+ </div>`
+ let divIcon = new DC.DivIcon(
+ new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
+ `<div class="public-map-popup-two">
+ ${iconEl}
+ </div>`
+ )
+ let incident = () => {
+ destroyPupoLayers()
+ }
+ divIcon.on(DC.MouseEventType.CLICK, incident)
+ addPupoLayers['企业应急物资'].addOverlay(divIcon)
+ }
+
+ divIcon.on(DC.MouseEventType.CLICK, incident)
+
+ addTileLayers[row.name].addOverlay(divIcon)
+ // })
+ // })
+ }
+}
+
+// 销毁
+function destroy () {
+ let arr = Object.keys(addTileLayers)
+ arr.forEach(i => {
+ addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
+ addTileLayers[i] = null
+ delete addTileLayers[i]
+ })
+ addTileLayers = {}
+}
+// 销毁
+function destroyPupoLayers () {
+ let arr = Object.keys(addPupoLayers)
+ arr.filter(i => i != 'hgyq').forEach(i => {
+ addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
+ addPupoLayers[i] = null
+ delete addPupoLayers[i]
+ })
+ addPupoLayers = {}
+}
+onUnmounted(() => {
+ destroy()
+ destroyPupoLayers()
+ addTileLayers = null
+ addPupoLayers = null
+})
+import { Search, Refresh } from '@element-plus/icons-vue'
</script>
<template>
- <div class="search-box w100 h100">
+ <div class="search-box w100 h100 flex f-d-c">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="" class="form-item-input">
<el-input v-model="formInline.name" placeholder="请输入名称" clearable style="width: 120px" />
</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-button type="primary" :icon="Search" @click="onSubmit">查 询</el-button>
+ <el-button class="reset-btn" :icon="Refresh" @click="clearBtn">重 置</el-button>
</el-form-item>
</el-form>
- <div class="table-box">
- <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="名称" />
+
+ <!-- <global-search :options="options" @searchBtn="searchBtn" @resetBtn="resetBtn" ref="SeachBarCondition"></global-search> -->
+ <div class="table-box h0 flex-1" ref="TableContent">
+ <el-table empty-text="暂无数据" border :data="tableData" @row-click="rowClick" style="width: 100%"
+ element-loading-background="rgba(122, 122, 122, 0.1)" :height="curTableHeight">
+ <el-table-column prop="name" label="名称" width="240" />
<el-table-column prop="numUnit" label="数量" />
<el-table-column prop="personInCha" label="负责人" />
+ <!-- <el-table-column label="操作">
+ <template #default="scope">
+ <el-button link type="primary" size="small" :disabled="scope.row.lng == ''"
+ @click="rowClick(scope.row)">定位</el-button>
+ </template>
+</el-table-column> -->
</el-table>
</div>
</div>
@@ -130,34 +217,16 @@
color: #fff !important;
}
-.search-box {
- padding: 10px;
-
- ::v-deep .el-table__body-wrapper {
- background-color: #152851;
- }
-}
-
-.search-box .table-box {
- height: 700px;
- overflow: scroll;
- // 隐藏滚动条
- scrollbar-width: none;
+.reset-btn {
+ color: #D4E8F8;
+ background: #43779B;
+ border-color: #43779B;
}
/* 当表格没有数据时，修改表格的背景颜色 */
.el-table--empty .el-table__body {
background-color: rgba(135, 158, 199, 0.3) !important;
/* 你想要的背景颜色 */
-}
-
-.el-page {
- margin-top: 10px;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- // margin-bottom:10px;
}
.form-item-input {
@@ -170,7 +239,7 @@
.el-input__wrapper {
font-size: 16px;
font-weight: 400;
- border-radius: 0;
+ border-radius: 5px;
background: rgba(135, 158, 199, 0.3);
box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
@@ -183,14 +252,14 @@
}
.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);
- }
+ // ::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>
--
Gitblit v1.9.3