From 5c5ad7b217e0a0da24f039b0b7b8829b3e2ca130 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Wed, 20 Nov 2024 16:01:31 +0800
Subject: [PATCH] 上图图标优化+搜索按钮优化
---
src/views/companyInfo/components/box/unitContent.vue | 27 +++++-
src/views/rs/components/box/dataContent.vue | 35 +-------
public/img/mapicon/wy.png | 0
public/img/mapicon/yjwz.png | 0
src/views/companyInfo/components/box/dataContent.vue | 31 ++++---
src/views/companyInfo/components/box/fireTrend.vue | 47 +++++++----
src/components/global/GlobalSearch.vue | 37 ++++++--
src/views/space/components/box/dataContent.vue | 11 +-
8 files changed, 103 insertions(+), 85 deletions(-)
diff --git a/public/img/mapicon/wy.png b/public/img/mapicon/wy.png
new file mode 100644
index 0000000..7ee2e55
--- /dev/null
+++ b/public/img/mapicon/wy.png
Binary files differ
diff --git a/public/img/mapicon/yjwz.png b/public/img/mapicon/yjwz.png
new file mode 100644
index 0000000..993acf5
--- /dev/null
+++ b/public/img/mapicon/yjwz.png
Binary files differ
diff --git a/src/components/global/GlobalSearch.vue b/src/components/global/GlobalSearch.vue
index 8377e8c..bdb3165 100644
--- a/src/components/global/GlobalSearch.vue
+++ b/src/components/global/GlobalSearch.vue
@@ -7,8 +7,7 @@
<el-select :teleported="false" :size="item.size || ''" v-model="params[item.props]"
:clearable="item.clearable || false" :multiple="item.multiple || false" collapse-tags
:placeholder="item.placeholder || (item.label ? '请选择' + item.label : '请选择')"
- :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }"
- @change="searchSelectChange($event, item)">
+ :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchSelectChange($event, item)">
<el-option v-for="selectItem in item.data" :key="selectItem.value" :label="selectItem.label"
:value="selectItem.value">
</el-option>
@@ -60,8 +59,8 @@
<div class="search-cont" v-if="item.type === 'multiDate' && options.quickMultiDateBtn">
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
- <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]"
- :type="multiDateType" :key="multiDateType" :clearable="item.clearable || false"
+ <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" :type="multiDateType"
+ :key="multiDateType" :clearable="item.clearable || false"
:placeholder="item.placeholder || item.label || '多选择时间'" :editable="false"
:style="{ width: $px2rem(`${item.width || '180'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
:value-format="item.format || 'yyyy-MM-dd'">
@@ -72,20 +71,20 @@
<div class="search-cont search-cont-btn" v-if="options.searchBtnGroup">
<el-button v-if="options.searchBtn || false"
:type="options.searchBtnTitleShow ? '' : options.searchType || 'primary'"
- :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search"
- @click="searchClick" :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
+ :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search" @click="searchClick"
+ :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
options.searchBtnTitleShow ?
- options.searchBtnTitle : '查 询'
+ options.searchBtnTitle : '查 询'
}}</el-button>
<el-button v-if="options.resetBtn || false" :type="options.resetType || ''"
- :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh"
- @click="resetClick" class="btn-h32-w76 reset-btn">重
+ :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh" @click="resetClick"
+ class="btn-h32-w76 reset-btn">重
置</el-button>
<el-button v-if="options.exportBtn || false" :type="options.exportType || 'primary'"
- :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download"
- @click="exportClick" class="btn-h32-w76">导 出</el-button>
+ :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download" @click="exportClick"
+ class="btn-h32-w76">导 出</el-button>
</div>
</div>
</template>
@@ -494,6 +493,22 @@
}
}
+
+.search-bar .search-cont-btn[data-v-4fa3a782] .el-button {
+ background: none;
+}
+
+::v-deep .el-button {
+ 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-date-editor {
width: 100%;
color: #fff;
diff --git a/src/views/companyInfo/components/box/dataContent.vue b/src/views/companyInfo/components/box/dataContent.vue
index 4f048bf..8b0791e 100644
--- a/src/views/companyInfo/components/box/dataContent.vue
+++ b/src/views/companyInfo/components/box/dataContent.vue
@@ -11,23 +11,30 @@
<script setup>
import { getFacilityList } from "@/api/facility"
import { onUnmounted, reactive } from 'vue'
+const { VITE_APP_BASE } = import.meta.env
const resData = reactive({
data: [{
label: '防线一',
value: '1',
type: 1,
- remark: '防火提及配套设置、装置围堰、罐区围堰'
+ remark: '防火提及配套设置、装置围堰、罐区围堰',
+ showPanel: false,
+ backgroundIcon: VITE_APP_BASE + 'img/mapicon/wy.png'
}, {
label: '防线二',
value: '2',
type: 2,
- remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀'
+ remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀',
+ showPanel: false,
+ backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png'
},
{
label: '防线三',
value: '3',
type: 3,
- remark: '事故应急池、雨水收集池'
+ remark: '事故应急池、雨水收集池',
+ showPanel: false,
+ backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png'
}
]
})
@@ -52,21 +59,17 @@
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>
- `
+ <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>`
+ 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>`
+ new DC.Position(i.lng, i.lat, 0), `<div class="public-map-popup ${'qyfb-box'}"> ${iconEl} </div>`
)
divIcon.attrParams = i
diff --git a/src/views/companyInfo/components/box/fireTrend.vue b/src/views/companyInfo/components/box/fireTrend.vue
index 8572ebb..feb4aad 100644
--- a/src/views/companyInfo/components/box/fireTrend.vue
+++ b/src/views/companyInfo/components/box/fireTrend.vue
@@ -13,6 +13,11 @@
import { getList } 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 loading = ref(false)
const tableData = ref([])
@@ -104,9 +109,8 @@
let addTileLayers = {}
// 行点击
function rowClick(row) {
- // window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
-
- // return
+ // 销毁之前的
+ destroy()
if (!addTileLayers[row.name]) {
addTileLayers[row.name] = new DC.HtmlLayer(row.name)
window.$viewer.addLayer(addTileLayers[row.name])
@@ -119,23 +123,23 @@
// 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>
- // `
+ iconEl = `
+ <div class="map-name">${row.name}</div>
+ <div class="map-icon">
+ <img src="${image.value}">
+ </div>
+ `
// }
// } else
- {
- iconEl = `<div class="marsBlueGradientPnl">
- <div>${row.name}</div>
- </div>`
- }
+ // {
+ // iconEl = `<div class="marsBlueGradientPnl">
+ // <div>${row.name}</div>
+ // </div>`
+ // }
let divIcon = new DC.DivIcon(
new DC.Position(row.lng, row.lat, 64),
- `<div class="public-map-popup ${'sk-box'}">
+ `<div class="public-map-popup ${'qyfb-box'}">
${iconEl}
</div>`
)
@@ -154,12 +158,17 @@
}
}
-onUnmounted(() => {
- console.log('销毁***************************')
+// 销毁
+function destroy() {
let arr = Object.keys(addTileLayers)
arr.forEach(i => {
addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
})
+}
+
+onUnmounted(() => {
+ console.log('销毁***************************')
+ destroy()
})
</script>
@@ -177,10 +186,10 @@
<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="名称" width="160" />
+ <el-table-column prop="name" label="名称" width="200" />
<el-table-column prop="numUnit" label="数量" />
<el-table-column prop="personInCha" label="负责人" />
- <el-table-column fixed="right" label="操作" width="80">
+ <el-table-column label="操作">
<template #default="scope">
<el-button link type="primary" size="small" :disabled="scope.row.lng == ''"
@click="rowClick(scope.row)">定位</el-button>
diff --git a/src/views/companyInfo/components/box/unitContent.vue b/src/views/companyInfo/components/box/unitContent.vue
index 6070010..0daaeef 100644
--- a/src/views/companyInfo/components/box/unitContent.vue
+++ b/src/views/companyInfo/components/box/unitContent.vue
@@ -14,6 +14,13 @@
import { getDictionary } from "@/api/dict/dict"
import { onUnmounted, reactive } from 'vue'
import { getList } from "@/api/space/space"
+const { VITE_APP_BASE } = import.meta.env
+let image = ref(
+ [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
+ , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
+ , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
+)
+
const resData = reactive({
data: []
})
@@ -38,17 +45,23 @@
let data = res.data.data.records
data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
let iconEl = ''
- {
- iconEl = `<div class="marsBlueGradientPnl">
- <div>${i.name}</div>
- </div>`
- }
+ // {
+ // iconEl = `<div class="marsBlueGradientPnl">
+ // <div>${i.name}</div>
+ // </div>`
+ // }
+ let img = image.value.filter(l => i.name.includes(l.label))
+ img = img.length > 0 ? img : image
+ iconEl = `<div class="map-name">${i.name}</div>
+ <div class="map-icon">
+ <img src="${img[0].value}">
+ </div>`
let divIcon = new DC.DivIcon(
new DC.Position(i.lng, i.lat, 0),
- `<div class="public-map-popup">
+ `<div class="public-map-popup ${'qyfb-box'}">
${iconEl}
- </div>`
+ </div>`
)
divIcon.attrParams = i
diff --git a/src/views/rs/components/box/dataContent.vue b/src/views/rs/components/box/dataContent.vue
index d74ffc1..d56a15d 100644
--- a/src/views/rs/components/box/dataContent.vue
+++ b/src/views/rs/components/box/dataContent.vue
@@ -42,7 +42,7 @@
total: 0,
}
-function positionColor () {
+function positionColor() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -57,7 +57,7 @@
}
}
-function positionDisabled () {
+function positionDisabled() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -108,34 +108,13 @@
})
// 行点击
-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>`
- // )
- // let incident = () => { }
- // divIcon.on(DC.MouseEventType.CLICK, incident)
- // layer.addOverlay(divIcon)
-
+function rowClick(row) {
window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))
-
}
// 查看详情
-function goDetail (row) { }
+function goDetail(row) { }
const searchBtn = (params) => {
resetPage()
@@ -177,10 +156,10 @@
<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" v-loading="loading" element-loading-background="rgba(46, 81, 136, 0.9)">
+ <div class="h0 flex-1 table-content" ref="TableContent" v-loading="loading"
+ element-loading-background="rgba(46, 81, 136, 0.9)">
<el-table border :data="tableData" :height="curTableHeight" style="width: 100%">
<el-table-column align="center" label="序号" width="62" prop="rank">
<template #default="{ $index, row }">
diff --git a/src/views/space/components/box/dataContent.vue b/src/views/space/components/box/dataContent.vue
index 3f74573..48fc9e8 100644
--- a/src/views/space/components/box/dataContent.vue
+++ b/src/views/space/components/box/dataContent.vue
@@ -44,7 +44,7 @@
total: 0,
}
-function positionColor () {
+function positionColor() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -59,7 +59,7 @@
}
}
-function positionDisabled () {
+function positionDisabled() {
return (row) => {
if (
(row.X && row.X != 0) ||
@@ -111,7 +111,7 @@
// 行点击
-function rowClick (row) {
+function rowClick(row) {
// if (state.layer) {
// window.$viewer.removeLayer(state.layer)
@@ -138,7 +138,7 @@
// 查看详情
-function goDetail (row) { }
+function goDetail(row) { }
const searchBtn = (params) => {
resetPage()
@@ -180,8 +180,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" v-loading="loading"
element-loading-background="rgba(46, 81, 136, 0.9)">
--
Gitblit v1.9.3