wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

前端页面优化

This commit is contained in:
gaoyuanwei 2022-09-09 10:54:50 +08:00
parent 3aa1284cfb
commit ac15b43e98
8 changed files with 491 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/supermap/image/waterPoint4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

84
src/supermap/map-showResource.js
View File

@ -19,18 +19,18 @@ const restoreIconObj = {
restoreIcon: null, restoreIcon: null,
currentLayer: null currentLayer: null
} }
const progress = document.getElementById('progress'); const progress = document.getElementById('progress')
const progressBar = document.getElementById('progress-bar'); const progressBar = document.getElementById('progress-bar')
function updateProgressBar(processed, total, elapsed, layersArray) { function updateProgressBar(processed, total, elapsed, layersArray) {
if (elapsed > 1000) { if (elapsed > 1000) {
// if it takes more than a second to load, display the progress bar: // if it takes more than a second to load, display the progress bar:
progress.style.display = 'block'; progress.style.display = 'block'
progressBar.style.width = Math.round(processed/total*100) + '%'; progressBar.style.width = Math.round(processed / total * 100) + '%'
} }
if (processed === total) { if (processed === total) {
// all markers processed - hide the progress bar: // all markers processed - hide the progress bar:
progress.style.display = 'none'; progress.style.display = 'none'
} }
} }
/** /**
@ -38,11 +38,11 @@ function updateProgressBar(processed, total, elapsed, layersArray) {
* @param layerClassName 据此判断是否需要自定义聚合图层的样式 * @param layerClassName 据此判断是否需要自定义聚合图层的样式
* @returns {*} * @returns {*}
*/ */
function createMarkerClusterLayer (layerClassName) { function createMarkerClusterLayer(layerClassName) {
let markerClusterLayer = null let markerClusterLayer = null
if (layerClassName) { // 如果存在类名，表示需要自定义图标 if (layerClassName) { // 如果存在类名，表示需要自定义图标
markerClusterLayer = L.markerClusterGroup({ markerClusterLayer = L.markerClusterGroup({
iconCreateFunction (cluster) { iconCreateFunction(cluster) {
const markers = cluster.getAllChildMarkers() const markers = cluster.getAllChildMarkers()
let n = 0 let n = 0
for (let i = 0; i < markers.length; i++) { for (let i = 0; i < markers.length; i++) {
@ -80,7 +80,7 @@ function createMarkerClusterLayer (layerClassName) {
* @param doChunk 处理数据的函数 * @param doChunk 处理数据的函数
* @param chunkCompleted 数据处理完以后执行的函数 * @param chunkCompleted 数据处理完以后执行的函数
*/ */
function chunkData (data, doChunk, chunkCompleted) { function chunkData(data, doChunk, chunkCompleted) {
const chunk = data.splice(0, 1000) const chunk = data.splice(0, 1000)
doChunk(chunk) doChunk(chunk)
if (data.length > 0) { if (data.length > 0) {
@ -107,7 +107,7 @@ function chunkData (data, doChunk, chunkCompleted) {
* @param layerGroup * @param layerGroup
* @return {*|void} layer对象，可以直接用map的removeLayer删除 * @return {*|void} layer对象，可以直接用map的removeLayer删除
*/ */
function addPointOnMap ({ function addPointOnMap({
feature, feature,
iconSize = [48, 48], iconSize = [48, 48],
iconUrl = 'poi.png', iconUrl = 'poi.png',
@ -168,7 +168,7 @@ function addPointOnMap ({
* @returns {Promise<any>} * @returns {Promise<any>}
* @private * @private
*/ */
function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '') { function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') {
const queryUrl = _mapConfig.config.QUERY_URL const queryUrl = _mapConfig.config.QUERY_URL
// 构造查询条件authorityFilter // 构造查询条件authorityFilter
let authorityFilter = '' let authorityFilter = ''
@ -223,7 +223,7 @@ function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '')
* @param {*} * @param {*}
* @return {*} * @return {*}
*/ */
function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPopupFun, function addResourceOnMapNew(features, layerConfig, getLayerPopupInfo, createPopupFun,
mapObj, featureGroup, layerGroup) { mapObj, featureGroup, layerGroup) {
// 如果资源要素数量为0，则说明该种资源没有记录 // 如果资源要素数量为0，则说明该种资源没有记录
if (features.length < 1) { if (features.length < 1) {
@ -298,7 +298,7 @@ function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPo
* @return {*} * @return {*}
* @private * @private
*/ */
function addResourceOnMap ({ function addResourceOnMap({
features, features,
layerName, layerName,
layerConfigInfo, layerConfigInfo,
@ -312,7 +312,7 @@ function addResourceOnMap ({
replaceIconUrl = '/src/supermap/image/poi.png', replaceIconUrl = '/src/supermap/image/poi.png',
replaceIconSize = [44, 44] replaceIconSize = [44, 44]
} = {}, mapObj, featureGroup, layerGroup) { } = {}, mapObj, featureGroup, layerGroup) {
// debugger; // debugger;
console.log('上图数据', layerClassName) console.log('上图数据', layerClassName)
// 如果资源要素数量为0，则说明该种资源没有记录 // 如果资源要素数量为0，则说明该种资源没有记录
if (features.length < 1) { if (features.length < 1) {
@ -369,11 +369,11 @@ function addResourceOnMap ({
console.log('图标点击e', e) console.log('图标点击e', e)
// 判断是否需要选中之后更换marker的图标 // 判断是否需要选中之后更换marker的图标
if (clickReplaceIcon) { if (clickReplaceIcon) {
// 先把之前选中的图标切换回来 // 先把之前选中的图标切换回来
// const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId); // const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId);
// if (previousLayer) { // if (previousLayer) {
// previousLayer.setIcon(icon); // previousLayer.setIcon(icon);
// } // }
const layers = layerGroup.get(layerName).getLayers() const layers = layerGroup.get(layerName).getLayers()
layers.forEach(layer => { layers.forEach(layer => {
layer.setIcon(icon) layer.setIcon(icon)
@ -390,11 +390,11 @@ function addResourceOnMap ({
let type = null let type = null
// 根据layerName1 传递不同的 resourceType // 根据layerName1 传递不同的 resourceType
switch (e.sourceTarget.layerConfigInfo.layerName1) { switch (e.sourceTarget.layerConfigInfo.layerName1) {
// 直升机起降点 // 直升机起降点
case 'f_helicopter': case 'f_helicopter':
type = 'resourceHelicopter' type = 'resourceHelicopter'
break break
// 物资储备库 // 物资储备库
case 'f_repository': case 'f_repository':
type = 'resourceStorage' type = 'resourceStorage'
break break
@ -417,7 +417,7 @@ function addResourceOnMap ({
case 'f_check_station': case 'f_check_station':
type = 'resourceProtection' type = 'resourceProtection'
break break
// 墓地 // 墓地
case 'f_cemetery': case 'f_cemetery':
type = 'resourceProtection' type = 'resourceProtection'
break break
@ -458,7 +458,7 @@ function addResourceOnMap ({
}) })
} }
// 根据类型返回具体用聚合图层的样式。 // 根据类型返回具体用聚合图层的样式。
function typeToStyle (layerName) { function typeToStyle(layerName) {
let returnStyle = null let returnStyle = null
const typeToImg = { const typeToImg = {
fireForest: 'multi-marker-cluster-resource-protection', fireForest: 'multi-marker-cluster-resource-protection',
@ -495,7 +495,7 @@ function typeToStyle (layerName) {
return returnStyle return returnStyle
} }
// 无聚合上图 =》阳性人员路径 // 无聚合上图 =》阳性人员路径
function addResourceOnMapWithoutSuperMap ( function addResourceOnMapWithoutSuperMap(
features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) {
// 如果资源要素数量为0，则说明该种资源没有记录 // 如果资源要素数量为0，则说明该种资源没有记录
// if (features.length < 1) { // if (features.length < 1) {
@ -519,10 +519,10 @@ function addResourceOnMapWithoutSuperMap (
const marker = L.marker(feature.latLng, { icon }) const marker = L.marker(feature.latLng, { icon })
// marker.zjmc = feature.zjmc // marker.zjmc = feature.zjmc
marker.bindTooltip('<p style="display:flex;align-items:center"><span style="color: red; font-size: 28px;font-weight: 700 margin-bottom: 2px">' + numArr[index] + '</span><span>' + marker.bindTooltip('<p style="display:flex;align-items:center"><span style="color: red; font-size: 28px;font-weight: 700 margin-bottom: 2px">' + numArr[index] + '</span><span>' +
feature.traveladdress + '(' + feature.count + '次)</span></p>' feature.traveladdress + '(' + feature.count + '次)</span></p>'
, { , {
permanent: true permanent: true
}) })
L.tooltipLayout.resetMarker(marker) L.tooltipLayout.resetMarker(marker)
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.on('click', async e => { marker.on('click', async e => {
@ -551,7 +551,7 @@ function addResourceOnMapWithoutSuperMap (
// L.layerGroup.addLayer(layers) // L.layerGroup.addLayer(layers)
} }
// 道路污染治理专题-点位上图 // 道路污染治理专题-点位上图
function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { function addPointsToMap(features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) {
// 如果资源要素数量为0，则说明该种资源没有记录 // 如果资源要素数量为0，则说明该种资源没有记录
// if (features.length < 1) { // if (features.length < 1) {
// return Promise.resolve(0); // return Promise.resolve(0);
@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
// layers = createMarkerClusterLayer(defaultStyle) // layers = createMarkerClusterLayer(defaultStyle)
const icon = createDefaultFeatureStyle({ const icon = createDefaultFeatureStyle({
img: url || 'the-head.png', img: url || 'the-head.png',
iconSize: url == ('construction.png'||url == 'waterPoint2.png'||url == 'waterPoint1.png'||url == 'waterPoint3.png')?[37,49]:[36, 36], iconSize: url == ('construction.png' || url == 'waterPoint2.png' || url == 'waterPoint1.png' || url == 'waterPoint3.png' || url == 'waterPoint4.png') ? [37, 49] : [36, 36]
}) })
const arr = [] const arr = []
features.map((feature, index) => { features.map((feature, index) => {
@ -582,15 +582,15 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
marker.on('click', async e => { marker.on('click', async e => {
const elementHtml = createPopupFun(feature) const elementHtml = createPopupFun(feature)
if (elementHtml) { if (elementHtml) {
if(feature.type=='road'){ if (feature.type == 'road') {
L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if(feature.type=='site'){ } else if (feature.type == 'site') {
L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if(feature.type=='siteRoad'){ } else if (feature.type == 'siteRoad') {
L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else if(feature.type=='waterPoint'){ } else if (feature.type == 'waterPoint') {
L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} else{ } else {
L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
} }
} }
@ -635,7 +635,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
* @return {*} * @return {*}
* @private * @private
*/ */
function addResourceOnMapWithoutSuper ({ function addResourceOnMapWithoutSuper({
features, features,
layerName, layerName,
layerConfigInfo, layerConfigInfo,
@ -727,11 +727,11 @@ function addResourceOnMapWithoutSuper ({
case 'wf_storage': case 'wf_storage':
resourceType = 'resourceStorage' resourceType = 'resourceStorage'
break break
// 应急队伍 // 应急队伍
case 'wf_team': case 'wf_team':
resourceType = 'resourceTeam' resourceType = 'resourceTeam'
break break
// 危险源 // 危险源
case 'wf_danger': case 'wf_danger':
resourceType = 'resourceDanger' resourceType = 'resourceDanger'
break break
@ -774,7 +774,7 @@ function addResourceOnMapWithoutSuper ({
chunkData(features, doChunk, chunkCompleted) chunkData(features, doChunk, chunkCompleted)
}) })
} }
async function myGetLayerPopupInfo (resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { async function myGetLayerPopupInfo(resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) {
const response = await getLayerPopupInfo(resId, layerConfigInfo, type) const response = await getLayerPopupInfo(resId, layerConfigInfo, type)
// debugger; // debugger;
console.log(response) console.log(response)

94
src/views/pages/waterPoints/components/ComplaintEvent.vue
View File

@ -23,7 +23,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="allNum">总数：{{allNum}}个</div> <div class="allNum"><div>总数：{{allNum}}个</div>
<div v-if="tabsActiveName==='群众上报'">
<el-radio-group v-model="reportType" @change="reportTypeChange">
<el-radio-button label="随手拍"></el-radio-button>
<el-radio-button label="爱山东"></el-radio-button>
</el-radio-group>
</div>
</div>
<div class="filter-btn-box"> <div class="filter-btn-box">
<div class="filter-btn-processStateSelect"> <div class="filter-btn-processStateSelect">
<div class="processStateSelect-btn" <div class="processStateSelect-btn"
@ -94,25 +101,25 @@ export default {
{ {
title: '智能算法识别', title: '智能算法识别',
id: 'video' id: 'video'
},
{
title: '城管局',
id: 'case'
} }
// { // {
// title: '城管局',
// id: 'case'
// }
// {
// title:'水务集团', // title:'水务集团',
// id:'null' // id:'null'
// }, // },
], ],
tabsActiveName: '全部', tabsActiveName: '水务局',
statisticalAnalysisIsShow: false, statisticalAnalysisIsShow: false,
filterButton: { filterButton: {
typeSelect: ['事件', '事件1'], typeSelect: ['事件', '事件1'],
typeSelectActive: '事件', typeSelectActive: '事件',
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'], type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
processStateSelect: ['全部', '未派发', '未处置', '已处置'], processStateSelect: ['全部', '未派发', '未处置', '已处置'],
processStateSelectActive: '全部', processStateSelectActive: '全部',
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
}, },
eventListData: [], eventListData: [],
preTime: '', preTime: '',
@ -130,7 +137,8 @@ export default {
listAll: [], listAll: [],
policeList: [], policeList: [],
// 单项总数 // 单项总数
allNum: 0 allNum: 0,
reportType: '随手拍'
} }
}, },
components: { components: {
@ -161,10 +169,18 @@ export default {
selectWaterPoliceList().then((policeRes) => { selectWaterPoliceList().then((policeRes) => {
this.policeList = policeRes.data.data || [] this.policeList = policeRes.data.data || []
const dataAll = [...res.data.data, ...policeRes.data.data] const dataAll = [...res.data.data, ...policeRes.data.data]
this.list = dataAll // this.list = dataAll
this.listAll = dataAll this.listAll = dataAll
this.allNum = this.listAll.length
// bus.$emit('waterPoint', dataAll)
this.list = []
this.listAll.forEach(tempItem => {
if (tempItem.reportOrigin === 'auditorReport') {
this.list.push(tempItem)
}
})
this.allNum = this.list.length this.allNum = this.list.length
bus.$emit('waterPoint', dataAll) bus.$emit('waterPoint', this.list)
}) })
// this.list = res.data.data // this.list = res.data.data
// this.listAll = res.data.data // this.listAll = res.data.data
@ -187,7 +203,7 @@ export default {
return `影响行人(${deepth}cm)` return `影响行人(${deepth}cm)`
break break
default: default:
return `无积水(${deepth}cm)` return `无积水或少量积水(${deepth}cm)`
break break
} }
}, },
@ -204,7 +220,7 @@ export default {
case '影响行人(<30cm)': case '影响行人(<30cm)':
this.list = this.list.filter(v => v.pointLevel != 'pedestrian') this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
break break
case '无积水(<10cm)': case '无积水或少量积水(<10cm)':
this.list = this.list.filter(v => v.pointLevel != 'non') this.list = this.list.filter(v => v.pointLevel != 'non')
break break
} }
@ -221,7 +237,7 @@ export default {
case '影响行人(<30cm)': case '影响行人(<30cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian')) this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
break break
case '无积水(<10cm)': case '无积水或少量积水(<10cm)':
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non')) this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
break break
} }
@ -234,7 +250,7 @@ export default {
tabHandleClick (item) { tabHandleClick (item) {
this.allNum = 0 this.allNum = 0
this.tabsActiveName = item.title this.tabsActiveName = item.title
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
if (item.title == '全部') { if (item.title == '全部') {
selectWaterPoint().then((res) => { selectWaterPoint().then((res) => {
@ -259,6 +275,20 @@ export default {
}) })
this.allNum = this.list.length this.allNum = this.list.length
bus.$emit('waterPoint', this.list) bus.$emit('waterPoint', this.list)
} else if (item.id == 'commonReport') {
if (this.reportType == '随手拍') {
selectReportOrigin({ reportOrigin: 'case' }).then((res) => {
this.list = res.data.data
this.allNum = this.list.length
bus.$emit('waterPoint', res.data.data)
})
} else if (this.reportType == '爱山东') {
selectReportOrigin({ reportOrigin: 'commonReport' }).then((res) => {
this.list = res.data.data
this.allNum = this.list.length
bus.$emit('waterPoint', res.data.data)
})
}
} else { } else {
selectReportOrigin({ reportOrigin: item.id }).then((res) => { selectReportOrigin({ reportOrigin: item.id }).then((res) => {
this.list = res.data.data this.list = res.data.data
@ -356,6 +386,14 @@ export default {
openDialog (item) { openDialog (item) {
bus.$emit('openWaterPointDialog', item) bus.$emit('openWaterPointDialog', item)
},
// 爱山东、随手拍
reportTypeChange (item) {
this.reportType = item
this.tabHandleClick({
title: '群众上报',
id: 'commonReport'
})
} }
} }
} }
@ -504,6 +542,21 @@ export default {
.allNum { .allNum {
color: #ffffff; color: #ffffff;
margin: 12px 0px 0 12px; margin: 12px 0px 0 12px;
display: flex;
justify-content: space-between;
::v-deep .el-radio-button__inner {
background: rgba(24, 51, 76, 0.95);
color: #ffffff;
border: none;
width: 70px;
padding: 6px;
border-radius: 2px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #279ff5;
border: none;
margin-right: 2px;
}
} }
.filter-btn-box { .filter-btn-box {
margin-top: 16px; margin-top: 16px;
@ -701,13 +754,13 @@ export default {
.box3 { .box3 {
color: #fff; color: #fff;
margin-top: 10px; margin-top: 10px;
height: 600px; height: 565px;
overflow-y: scroll; overflow-y: scroll;
cursor: pointer; cursor: pointer;
.item { .item {
margin-top: 10px; margin-top: 8px;
background: rgba(5, 33, 59, 0.35); background: rgba(5, 33, 59, 0.35);
padding: 10px; padding: 6px 10px;
.top { .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -716,7 +769,7 @@ export default {
} }
.name { .name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 16px;
} }
.topType { .topType {
margin-left: 5px; margin-left: 5px;
@ -743,6 +796,9 @@ export default {
.green { .green {
background: #31d779; background: #31d779;
} }
.type {
font-size: 14px;
}
} }
.bottom { .bottom {
margin-top: 10px; margin-top: 10px;

182
src/views/pages/waterPoints/components/SiteList.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<div class="box"> <div class="box">
<div class="title"><p>易积水点市区分布</p><div class="bottomLine"></div></div> <div class="title"><p>积水点级别分析</p><div class="bottomLine"></div></div>
<!-- <div class="title"><p>易积水点市区分布</p><div class="bottomLine"></div></div> -->
<!-- 工地列表 --> <!-- 工地列表 -->
<div class="eventData"> <div class="eventData">
<div id="event-type-chart"></div> <!-- <div id="event-type-chart"></div> -->
<div id="analysis-of-water-level"></div>
<!-- <div style="display: flex;justify-content: space-between"> <!-- <div style="display: flex;justify-content: space-between">
<el-input <el-input
@ -72,7 +74,7 @@ import {
selectWeekAll, selectWeekAll,
selectMonthAll selectMonthAll
} from '@/api/construction/index' } from '@/api/construction/index'
import { selectCountWater } from '@/api/waterPoints' import { selectCountWater, selectCountLevel } from '@/api/waterPoints'
export default { export default {
data () { data () {
@ -127,27 +129,60 @@ export default {
// selectValue: '' // selectValue: ''
// } // }
return { return {
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'], // district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: [], // districtData: []
rank: [
{
value: 0,
unit: '个',
name: '无积水或少量积水'
},
{
value: 0,
unit: '个',
name: '影响行人'
},
{
value: 0,
unit: '个',
name: '影响车辆'
}
]
} }
}, },
created () { created () {
}, },
mounted () { mounted () {
selectCountWater().then((res) => { // selectCountWater().then((res) => {
this.district.map((district) => { // this.district.map((district) => {
let eligibility = res.data.data.find((data) => { // const eligibility = res.data.data.find((data) => {
return district == data.ssqy // return district == data.ssqy
}) // })
if(eligibility){ // if (eligibility) {
this.districtData.push(eligibility.count) // this.districtData.push(eligibility.count)
} else { // } else {
this.districtData.push(0) // this.districtData.push(0)
// }
// })
// this.initEventTypeCharts()
// })
selectCountLevel().then((res) => {
res.data.data.forEach((item) => {
// 无积水
if (item.pointLevel == 'non') {
this.rank[0].value = item.count
}
// 影响行人
if (item.pointLevel == 'pedestrian') {
this.rank[1].value = item.count
}
// 影响车辆
if (item.pointLevel == 'traffic') {
this.rank[2].value = item.count
} }
}) })
this.initEventTypeCharts() this.initEventTypeCharts2()
}) })
// this.selectSiteByName() // this.selectSiteByName()
@ -189,7 +224,7 @@ export default {
}, },
grid: { grid: {
bottom: 30, bottom: 30,
top:10, top: 10
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -240,10 +275,8 @@ export default {
show: true, show: true,
position: 'inside', position: 'inside',
distance: 0, distance: 0,
formatter: function(param) { formatter: function (param) {
if(param.value > 0) if (param.value > 0) { return param.value } else return ''
return param.value
else return ''
}, },
textStyle: { textStyle: {
color: '#fff', color: '#fff',
@ -257,6 +290,73 @@ export default {
document.getElementById('event-type-chart') document.getElementById('event-type-chart')
) )
eventType.setOption(option) eventType.setOption(option)
},
initEventTypeCharts2 () {
const legend1 = this.rank.map((v) => v.name)
const legendData = [...legend1]
const option = {
color: ['#31d779', '#ffae2b', '#f74b3f'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
grid: {
// height: '10px'
},
legend: {
width: '30%',
left: 'left',
top: 'center',
textStyle: {
color: '#fff'
}
},
// itemStyle: {
// normal: {
// borderWidth: 2
// },
// label: {
// textStyle: {
// color: 'black',
// fontSize: 14,
// fontWeight: 'bolder'
// }
// }
// },
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
series: [
{
name: '',
type: 'pie',
radius: ['45%', '80%'],
label: {
normal: {
show: (function (value) {
if (value == 0) return false
}()),
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: this.rank
}
]
}
const eventType = echarts.init(
document.getElementById('analysis-of-water-level')
)
eventType.setOption(option)
} }
} }
// methods: { // methods: {
@ -347,33 +447,42 @@ export default {
padding: 0px 0 18px 0px; padding: 0px 0 18px 0px;
.title { .title {
color: #fff; color: #fff;
background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) ); font-weight: bold;
p{ background: linear-gradient(
to right,
rgba(27, 103, 176, 1),
rgba(27, 103, 176, 0)
);
p {
padding: 5px; padding: 5px;
} }
.bottomLine{ .bottomLine {
width: 100%; width: 100%;
height: 5px; height: 5px;
background: linear-gradient( to right, rgba(55, 185, 192, 1), rgba(55, 185, 192, 0) ); background: linear-gradient(
to right,
rgba(55, 185, 192, 1),
rgba(55, 185, 192, 0)
);
} }
} }
.eventData { .eventData {
width: 100%; width: 100%;
margin-top: 14px; margin-top: 14px;
.el-input { .el-input {
width: 200px; width: 200px;
} }
.el-input__inner { .el-input__inner {
border: 1px solid rgba(31,254,253,.9); border: 1px solid rgba(31, 254, 253, 0.9);
color: #fff; color: #fff;
background: rgba($color: #203b5d, $alpha: .8); background: rgba($color: #203b5d, $alpha: 0.8);
border-radius: unset; border-radius: unset;
&::placeholder { &::placeholder {
color: rgba($color: #fff, $alpha: 0.6); color: rgba($color: #fff, $alpha: 0.6);
} }
} }
.el-input__prefix { .el-input__prefix {
color: rgba(31,254,253,.9); color: rgba(31, 254, 253, 0.9);
} }
.el-select { .el-select {
@ -382,12 +491,18 @@ export default {
width: 161px; width: 161px;
} }
} }
#event-type-chart,#event-state-chart { #event-type-chart,
#event-state-chart {
width: 100%; width: 100%;
height: 207px; height: 207px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#analysis-of-water-level {
width: 100%;
height: 165px;
margin: 22px;
}
} }
::v-deep .eventNoise { ::v-deep .eventNoise {
@ -395,9 +510,10 @@ export default {
.el-table { .el-table {
border: 1px solid #325d94; border: 1px solid #325d94;
width: 100%; width: 100%;
th,td { th,
border-right: 1px solid #325d94 !important; td {
} border-right: 1px solid #325d94 !important;
}
// .descending.is-leaf.is-sortable { // .descending.is-leaf.is-sortable {
// .sort-caret { // .sort-caret {
// border-top-color: #1dfeff; // border-top-color: #1dfeff;

210
src/views/pages/waterPoints/components/VideoList.vue
View File

@ -35,11 +35,12 @@
</div> </div>
<div id="analysis-of-water-source"></div> <div id="analysis-of-water-source"></div>
<div class="water-point-reporting-title"> <div class="water-point-reporting-title">
<div class="water-point-reporting-title-top">积水点级别分析</div> <div class="water-point-reporting-title-top">易积水点市区分布</div>
<!-- <div class="water-point-reporting-title-top">积水点级别分析</div> -->
<div class="water-point-reporting-title-bottom"></div> <div class="water-point-reporting-title-bottom"></div>
</div> </div>
<div id="analysis-of-water-level"></div> <!-- <div id="analysis-of-water-level"></div> -->
<div id="event-type-chart"></div>
</div> </div>
</div> </div>
@ -47,7 +48,7 @@
<script> <script>
import moment from 'moment' import moment from 'moment'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { selectCountWaters,selectCountLevel, selectWaterPoliceList } from '@/api/waterPoints' import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
export default { export default {
data () { data () {
@ -80,48 +81,48 @@ export default {
} }
], ],
source: [ source: [
{ // {
value: 0, // value: 0,
unit: '个', // unit: '个',
name: '水务集团上报', // name: '水务集团上报',
id:'auditorReport' // id:'auditorReport'
}, // },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '群众上报', name: '群众上报',
id:'commonReport' id: 'commonReport'
},
{
value: 0,
unit: '个',
name: '城管局',
id:'case'
}, },
// {
// value: 0,
// unit: '个',
// name: '城管局',
// id:'case'
// },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '智能算法识别', name: '智能算法识别',
id:'video' id: 'video'
}, },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '水务局', name: '水务局',
id:'null' id: 'auditorReport'
}, },
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '交警', name: '交警',
id:'trafficPolice' id: 'trafficPolice'
} }
], ],
rank: [ rank: [
{ {
value: 0, value: 0,
unit: '个', unit: '个',
name: '无积水' name: '无积水或少量积水'
}, },
{ {
value: 0, value: 0,
@ -132,55 +133,68 @@ export default {
value: 0, value: 0,
unit: '个', unit: '个',
name: '影响车辆' name: '影响车辆'
}, }
] ],
district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
districtData: []
} }
}, },
mounted () { mounted () {
selectCountWaters().then((res) => { selectCountWaters().then((res) => {
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
if(item.reportOrigin == 'null') { // if(item.reportOrigin == 'null') {
// this.source[0].value = item.count
// }
if (item.reportOrigin == 'commonReport') {
this.source[0].value = item.count this.source[0].value = item.count
} }
if(item.reportOrigin == 'commonReport') { // if(item.reportOrigin == 'case') {
// this.source[2].value = item.count
// }
if (item.reportOrigin == 'video') {
this.source[1].value = item.count this.source[1].value = item.count
} }
if(item.reportOrigin == 'case') { if (item.reportOrigin == 'auditorReport') {
this.source[2].value = item.count this.source[2].value = item.count
} }
if(item.reportOrigin == 'video') {
this.source[3].value = item.count
}
if(item.reportOrigin == 'auditorReport') {
this.source[4].value = item.count
}
}) })
selectWaterPoliceList().then((policeRes) => { selectWaterPoliceList().then((policeRes) => {
this.source[5].value = policeRes.data.data.length this.source[3].value = policeRes.data.data.length
this.initEventTypeCharts() this.initEventTypeCharts()
}) })
}) })
selectCountLevel().then((res) => { selectCountLevel().then((res) => {
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
//无积水 // 无积水
if(item.pointLevel == 'non') { if (item.pointLevel == 'non') {
this.rank[0].value = item.count this.rank[0].value = item.count
} }
//影响行人 // 影响行人
if(item.pointLevel == 'pedestrian') { if (item.pointLevel == 'pedestrian') {
this.rank[1].value = item.count this.rank[1].value = item.count
} }
//影响车辆 // 影响车辆
if(item.pointLevel == 'traffic') { if (item.pointLevel == 'traffic') {
this.rank[2].value = item.count this.rank[2].value = item.count
} }
}) })
this.initEventTypeCharts2() this.initEventTypeCharts2()
}) })
selectCountWater().then((res) => {
this.district.map((district) => {
const eligibility = res.data.data.find((data) => {
return district == data.ssqy
})
if (eligibility) {
this.districtData.push(eligibility.count)
} else {
this.districtData.push(0)
}
})
this.initEventTypeCharts3()
})
}, },
methods: { methods: {
// 积水点来源分析charts图 // 积水点来源分析charts图
@ -188,7 +202,7 @@ export default {
const legend1 = this.source.map((v) => v.name) const legend1 = this.source.map((v) => v.name)
const legendData = [...legend1] const legendData = [...legend1]
const option = { const option = {
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'], color: ['#4df6f7', '#3ee79d', '#6873ff', '#24a9ff', '#b7baff'],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' formatter: '{a} <br/>{b}: {c} ({d}%)'
@ -201,8 +215,8 @@ export default {
left: 'left', left: 'left',
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#fff', color: '#fff'
}, }
}, },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
@ -233,7 +247,7 @@ export default {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
}, }
}, },
labelLine: { labelLine: {
normal: { normal: {
@ -267,8 +281,8 @@ export default {
left: 'left', left: 'left',
top: 'center', top: 'center',
textStyle: { textStyle: {
color: '#fff', color: '#fff'
}, }
}, },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
@ -297,9 +311,9 @@ export default {
radius: ['45%', '80%'], radius: ['45%', '80%'],
label: { label: {
normal: { normal: {
show: function(value) { show: (function (value) {
if(value == 0) return false if (value == 0) return false
}(), }()),
position: 'inner' position: 'inner'
} }
}, },
@ -316,7 +330,89 @@ export default {
document.getElementById('analysis-of-water-level') document.getElementById('analysis-of-water-level')
) )
eventType.setOption(option) eventType.setOption(option)
},
initEventTypeCharts3 () {
const option = {
title: {
// text: '事件类型分布',
left: 'left',
top: 15,
textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
}
},
grid: {
bottom: 30,
top: 10
},
xAxis: {
type: 'category',
data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
axisLabel: {
color: '#fff',
margin: 7,
show: true,
interval: 0,
rotate: 30
},
axisLine: {
lineStyle: {
color: 'rgba(254, 125, 42,0.6)'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
show: false
},
series: [
{
data: this.districtData,
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(254,125,42,1)'
}, {
offset: 1,
color: 'rgba(254,125,42,0)'
}]),
borderWidth: 2,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,211,107,1)'
}, {
offset: 1,
color: 'rgba(255,211,107,0)'
}])
},
barWidth: 23,
label: {
show: true,
position: 'inside',
distance: 0,
formatter: function (param) {
if (param.value > 0) { return param.value } else return ''
},
textStyle: {
color: '#fff',
fontSize: 12
}
}
}
]
}
const eventType = echarts.init(
document.getElementById('event-type-chart')
)
eventType.setOption(option)
} }
} }
} }
</script> </script>
@ -334,7 +430,7 @@ export default {
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
} }
.time { .time {
text-align: left; text-align: left;
@ -414,13 +510,19 @@ export default {
} }
& > div:last-child { & > div:last-child {
width: 40%; width: 40%;
height: 165px; // height: 165px;
} }
} }
#analysis-of-water-source,#analysis-of-water-level { #analysis-of-water-source,
#analysis-of-water-level {
width: 100%; width: 100%;
height: 165px; height: 165px;
margin: 22px; margin: 22px;
} }
#event-type-chart {
width: 100%;
height: 207px;
margin: 22px 0;
}
} }
</style> </style>

2
src/views/pages/waterPoints/components/WaterHistory.vue
View File

@ -90,7 +90,7 @@ export default {
selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => { selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => {
console.log(res.data.data, 'res') console.log(res.data.data, 'res')
res.data.data.map(val => { res.data.data.map(val => {
this.depthDayX.push(val.hour + ':' + val.minute) this.depthDayX.push((val.hour > 9 ? val.hour : '0' + val.hour) + ':' + (val.minute > 9 ? val.minute : '0' + val.minute))
this.depthDayY.push(Number(val.depth) * 100) this.depthDayY.push(Number(val.depth) * 100)
}) })
console.log(this.depthDayX, this.depthDayY, ' this.depthDayX') console.log(this.depthDayX, this.depthDayY, ' this.depthDayX')

4
src/views/pages/waterPoints/components/WaterPointPop.vue
View File

@ -69,7 +69,7 @@
更新时间: {{ feature.data.updatedDate || "" }} 更新时间: {{ feature.data.updatedDate || "" }}
</div> </div>
<div class="btn-area"> <div class="btn-area">
<button class="button" @click="analyse(feature)">线索分析</button> <button class="button" @click="analyse(feature)">周边视频</button>
</div> </div>
<WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' /> <WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
</div> </div>
@ -141,7 +141,7 @@ export default {
} else if (data.pointLevel == 'pedestrian') { } else if (data.pointLevel == 'pedestrian') {
return '影响行人(<30cm)' return '影响行人(<30cm)'
} else { } else {
return '无积水(<10cm)' return '无积水或少量积水(<10cm)'
} }
}, },
typeSelect (item) { typeSelect (item) {

122
src/views/pages/waterPoints/index.vue
View File

@ -46,21 +46,18 @@
<complaint-event ref="complaintEventRef"></complaint-event> <complaint-event ref="complaintEventRef"></complaint-event>
</div> </div>
<!-- 事件多选 --> <!-- 事件多选 -->
<div class="eventSelection"> <div class="eventSelection">
<el-checkbox-group v-model="eventCheckList"> <el-checkbox-group v-model="eventCheckList">
<el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox> <el-checkbox label="影响车辆(>30cm)" @change="selectType('影响车辆(>30cm)')"></el-checkbox>
<el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox> <el-checkbox label="影响行人(<30cm)" @change="selectType('影响行人(<30cm)')"></el-checkbox>
<el-checkbox label="无积水(<10cm)" @change="selectType('无积水(<10cm)')"></el-checkbox> <el-checkbox label="无积水或少量积水(<10cm)" @change="selectType('无积水或少量积水(<10cm)')"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
<i class="eventSelectionIcon"></i> <i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i> <i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i> <i class="eventSelectionIcon"></i>
</div> </div>
<!-- 视频标签、列表 --> <!-- 视频标签、列表 -->
<div class="videoList"> <div class="videoList">
<video-list ref="videoListRef"></video-list> <video-list ref="videoListRef"></video-list>
@ -71,14 +68,14 @@
<site-list></site-list> <site-list></site-list>
</div> </div>
<div class="changeLayer"> <!-- <div class="changeLayer">
<div class="title">地图图层</div> <div class="title">地图图层</div>
<div class="change-btn-box"> <div class="change-btn-box">
<el-checkbox-group v-model="changeLayerBtnGroup"> <el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button> <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div> -->
<video-play <video-play
v-if="openVideo" v-if="openVideo"
@ -99,7 +96,7 @@ import complaintEvent from './components/ComplaintEvent'
import VideoList from './components/VideoList' import VideoList from './components/VideoList'
import SiteList from './components/SiteList' import SiteList from './components/SiteList'
import { selectByJdWd } from '@/api/construction/index' import { selectByJdWd } from '@/api/construction/index'
import { createSiteListPop, createCameraDetailsPop,createWaterPointPop } from '@/supermap/createMarkerPopup' import { createSiteListPop, createCameraDetailsPop, createWaterPointPop } from '@/supermap/createMarkerPopup'
import VideoPlay from './components/VideoPlay' import VideoPlay from './components/VideoPlay'
export default { export default {
@ -113,9 +110,9 @@ export default {
// changeLayerBtnList: ['视频监控', '易积水点'], // changeLayerBtnList: ['视频监控', '易积水点'],
changeLayerBtnList: ['易积水点'], changeLayerBtnList: ['易积水点'],
changeLayerBtnGroup: [], changeLayerBtnGroup: [],
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'], eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
openVideo: false, openVideo: false,
channelCode:[] channelCode: []
} }
}, },
@ -180,7 +177,7 @@ export default {
bus.$off('openWaterPointDialog') bus.$off('openWaterPointDialog')
bus.$on('openWaterPointDialog', (item) => { bus.$on('openWaterPointDialog', (item) => {
this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude },16) this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude }, 16)
// this.WithinRadiusSite(latLng); // this.WithinRadiusSite(latLng);
// const dataEvent = [{ // const dataEvent = [{
// latLng: { lat: item.latitude, lng: item.longitude }, // latLng: { lat: item.latitude, lng: item.longitude },
@ -196,11 +193,10 @@ export default {
}) })
bus.$off('openCurrentVideoWaterPoint') bus.$off('openCurrentVideoWaterPoint')
bus.$on('openCurrentVideoWaterPoint',channelCode => { bus.$on('openCurrentVideoWaterPoint', channelCode => {
this.openVideo = true; this.openVideo = true
this.channelCode.unshift(channelCode) this.channelCode.unshift(channelCode)
}) })
}, },
methods: { methods: {
querySearchAsync (queryString, cb) { querySearchAsync (queryString, cb) {
@ -372,51 +368,54 @@ export default {
this.hiMapFun.removeLayerByLayerName('waterPoint1') this.hiMapFun.removeLayerByLayerName('waterPoint1')
this.hiMapFun.removeLayerByLayerName('waterPoint2') this.hiMapFun.removeLayerByLayerName('waterPoint2')
this.hiMapFun.removeLayerByLayerName('waterPoint3') this.hiMapFun.removeLayerByLayerName('waterPoint3')
this.hiMapFun.removeLayerByLayerName('waterPoint4')
const dataEvent1 = [] const dataEvent1 = []
const dataEvent2 = [] const dataEvent2 = []
const dataEvent3 = [] const dataEvent3 = []
const dataEvent4 = []
data.forEach((item) => { data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0'] const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.longitude) == -1) { if (arr.indexOf(item.longitude) == -1) {
switch(item.pointLevel){ switch (item.pointLevel) {
case 'non': case 'non':
dataEvent1.push({ dataEvent1.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item, data: item,
type: 'waterPoint' type: 'waterPoint'
}) })
break; break
case 'pedestrian': case 'pedestrian':
dataEvent2.push({ dataEvent2.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item, data: item,
type: 'waterPoint' type: 'waterPoint'
}) })
break; break
case 'traffic': case 'traffic':
dataEvent3.push({ dataEvent3.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item, data: item,
type: 'waterPoint' type: 'waterPoint'
}) })
break; break
default: default:
dataEvent1.push({ dataEvent4.push({
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
data: item, data: item,
type: 'waterPoint' type: 'waterPoint'
}) })
break; break
} }
} }
}) })
this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop) this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop) this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop) this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop)
this.hiMapFun.addPointsToMap(dataEvent4, 'waterPoint4.png', 'waterPoint4', createWaterPointPop)
}, },
selectType(item){ selectType (item) {
this.$refs.complaintEventRef.selectType(item) this.$refs.complaintEventRef.selectType(item)
} }
}, },
@ -427,7 +426,7 @@ export default {
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css); @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@font-face { @font-face {
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf"); src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
} }
.map-box { .map-box {
@ -456,11 +455,11 @@ export default {
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-family: 'Tensentype-ZhiHeiJ-W5'; font-family: "Tensentype-ZhiHeiJ-W5";
} }
.title::before { .title::before {
content: '青岛市易积水点地图'; content: "青岛市易积水点地图";
text-shadow: 0px 3px 10px rgba(0,0,0,.9); text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
@ -471,20 +470,20 @@ export default {
z-index: 1000; z-index: 1000;
left: 496px; left: 496px;
top: 90px; top: 90px;
border: 1px solid rgba(31,254,253,.9); border: 1px solid rgba(31, 254, 253, 0.9);
::v-deep .el-input__inner { ::v-deep .el-input__inner {
color: #fff; color: #fff;
background: rgba($color: #203b5d, $alpha: .8); background: rgba($color: #203b5d, $alpha: 0.8);
width: 226px; width: 226px;
height: 36px; height: 36px;
border:none; border: none;
&::placeholder { &::placeholder {
color: rgba($color: #fff, $alpha: 0.6); color: rgba($color: #fff, $alpha: 0.6);
} }
} }
::v-deep .el-input__prefix { ::v-deep .el-input__prefix {
top: -1px; top: -1px;
color: rgba(31,254,253,.9); color: rgba(31, 254, 253, 0.9);
} }
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
width: 54px; width: 54px;
@ -503,7 +502,7 @@ export default {
z-index: -1 !important; z-index: -1 !important;
width: 226px !important; width: 226px !important;
left: 0px !important; left: 0px !important;
background: rgba(32,59,93,.8); background: rgba(32, 59, 93, 0.8);
border: 1px solid #1ffefd; border: 1px solid #1ffefd;
li { li {
color: #fff; color: #fff;
@ -519,9 +518,9 @@ export default {
z-index: 1000; z-index: 1000;
left: 10px; left: 10px;
top: 90px; top: 90px;
height:908px; height: 908px;
width: 478px; width: 478px;
background: rgba($color: #05213b, $alpha: .85) background: rgba($color: #05213b, $alpha: 0.85);
} }
.eventNum { .eventNum {
@ -542,7 +541,7 @@ export default {
span { span {
font-size: 46px; font-size: 46px;
font-weight: bold; font-weight: bold;
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% ); background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -558,23 +557,23 @@ export default {
top: 92px; top: 92px;
width: 398px; width: 398px;
// height:460px; // height:460px;
background: rgba($color: #05213b, $alpha: .85); background: rgba($color: #05213b, $alpha: 0.85);
} }
.siteList { .siteList {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
right: 8px; right: 8px;
top: 660px; top: 703px;
width: 398px; width: 398px;
// height:500px; // height:500px;
background: rgba($color: #05213b, $alpha: .85); background: rgba($color: #05213b, $alpha: 0.85);
} }
.changeLayer { .changeLayer {
width: 332px; width: 332px;
height: 67px; height: 67px;
background: rgba(7,26,44,.8); background: rgba(7, 26, 44, 0.8);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 50%; left: 50%;
@ -585,7 +584,7 @@ export default {
width: 96px; width: 96px;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
color: rgba(255,255,255,.6); color: rgba(255, 255, 255, 0.6);
text-align: center; text-align: center;
line-height: 67px; line-height: 67px;
} }
@ -596,17 +595,16 @@ export default {
padding-left: 20px; padding-left: 20px;
::v-deep .el-checkbox-group { ::v-deep .el-checkbox-group {
.el-checkbox-button__inner{ .el-checkbox-button__inner {
padding: 6px 14px; padding: 6px 14px;
border: 0; border: 0;
border-radius: 10px; border-radius: 10px;
} }
.el-checkbox-button:first-child .el-checkbox-button__inner{ .el-checkbox-button:first-child .el-checkbox-button__inner {
margin-right: 10px; margin-right: 10px;
} }
.el-checkbox-button.is-checked .el-checkbox-button__inner{ .el-checkbox-button.is-checked .el-checkbox-button__inner {
background: #027DB4; background: #027db4;
color: #ffffff; color: #ffffff;
box-shadow: unset; box-shadow: unset;
} }
@ -614,7 +612,7 @@ export default {
} }
} }
.eventSelection{ .eventSelection {
width: 170px; width: 170px;
height: 100px; height: 100px;
background: rgba(7, 26, 44, 0.8); background: rgba(7, 26, 44, 0.8);
@ -625,16 +623,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
::v-deep .el-checkbox__label{ ::v-deep .el-checkbox__label {
color: #ffffff; color: #ffffff;
} }
::v-deep .el-checkbox{ ::v-deep .el-checkbox {
margin:0 15px; margin: 0 15px;
.el-checkbox__inner{ .el-checkbox__inner {
margin-right: 15px; margin-right: 15px;
} }
} }
.eventSelectionIcon{ .eventSelectionIcon {
display: block; display: block;
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -642,21 +640,27 @@ export default {
background: #f74b3f; background: #f74b3f;
position: absolute; position: absolute;
left: 34.5px; left: 34.5px;
top: 21px; top: 13px;
} }
.eventSelectionIcon:nth-child(2){ .eventSelectionIcon:nth-child(2) {
background: #ffae2b; background: #ffae2b;
position: absolute; position: absolute;
left: 34.5px; left: 34.5px;
top: 42px; top: 34px;
} }
.eventSelectionIcon:nth-child(3){ .eventSelectionIcon:nth-child(3) {
background: #31d779; background: #31d779;
position: absolute; position: absolute;
left: 34.5px; left: 34.5px;
top: 63px; top: 54px;
} }
} }
::v-deep .el-checkbox__label {
display: inline-grid;
width: 170px;
white-space: pre-line;
word-wrap: break-word;
}
} }
</style> </style>
<style lang='scss'> <style lang='scss'>