<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-13 14:54:26
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-12-03 00:22:00
|
* @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, 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 panoramaShow = ref(false)
|
const panoramaTitle = ref('')
|
const panoramaUrl = ref('')
|
const TableContent = ref(null)
|
const curTableHeight = ref(0)
|
const loading = ref(false)
|
|
const tableData = ref([])
|
const pages = {
|
page: 1,
|
pageSize: 1000,
|
total: 0,
|
}
|
|
let data = reactive({
|
companyInfo: {}
|
})
|
|
onMounted(() => {
|
curTableHeight.value = TableContent.value.offsetHeight
|
data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
|
getLists()
|
})
|
|
// 搜索条件
|
const formInline = reactive({
|
name: "",
|
ownership: ''
|
})
|
|
// 提交查询
|
const onSubmit = () => {
|
pages.page = 1
|
pages.pageSize = 1000
|
pages.total = 0
|
getLists(formInline)
|
}
|
|
// 分页树改变
|
const handleSizeChange = (val) => {
|
pages.pageSize = val
|
getLists(formInline)
|
}
|
// 分页改变
|
const handleCurrentChange = (val) => {
|
pages.page = val
|
getLists(formInline)
|
}
|
// 重置条件
|
const clearBtn = () => {
|
formInline.name = ''
|
formInline.ownership = ''
|
pages.page = 1
|
pages.pageSize = 1000
|
pages.total = 0
|
getLists(formInline)
|
}
|
// 应急物资图片
|
let picList = ref([])
|
|
// 查询分页数据
|
function getLists (param = {}) {
|
param.current = pages.page
|
param.size = pages.pageSize
|
param.firmId = data.companyInfo.id
|
loading.value = true
|
getCompanyList(param)
|
.then((res) => {
|
const data = res.data.data
|
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
|
|
console.log(attrParams, 894654)
|
|
|
if (
|
attrParams.panoramicUrl && attrParams.panoramicUrl.length > 0 &&
|
attrParams.panoramicUrl.indexOf("http://vr.jxpskj.com:180") != -1
|
) {
|
let panoramicUrl = attrParams.panoramicUrl.replace(
|
"http://vr.jxpskj.com:180",
|
"/panorama"
|
)
|
|
panoramaTitle.value = attrParams.name
|
panoramaUrl.value = panoramicUrl
|
panoramaShow.value = true
|
|
return
|
}
|
|
|
// 删除
|
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'
|
|
const closePanoramaPopup = () => {
|
panoramaShow.value = false
|
}
|
</script>
|
|
<template>
|
<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>
|
<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>
|
|
<!-- <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>
|
|
<panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
|
</panorama>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-form-item__label {
|
color: #fff !important;
|
}
|
|
.reset-btn {
|
color: #D4E8F8;
|
background: #43779B;
|
border-color: #43779B;
|
}
|
|
/* 当表格没有数据时，修改表格的背景颜色 */
|
.el-table--empty .el-table__body {
|
background-color: rgba(135, 158, 199, 0.3) !important;
|
/* 你想要的背景颜色 */
|
}
|
|
.form-item-input {
|
width: 160px;
|
|
::v-deep(.el-input) {
|
width: 0;
|
flex: 1;
|
|
.el-input__wrapper {
|
font-size: 16px;
|
font-weight: 400;
|
border-radius: 5px;
|
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>
|
