前端页面优化
This commit is contained in:
gaoyuanwei
parent
3aa1284cfb
commit
ac15b43e98
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -19,18 +19,18 @@ const restoreIconObj = {
|
|||
restoreIcon: null,
|
||||
currentLayer: null
|
||||
}
|
||||
const progress = document.getElementById('progress');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const progress = document.getElementById('progress')
|
||||
const progressBar = document.getElementById('progress-bar')
|
||||
function updateProgressBar(processed, total, elapsed, layersArray) {
|
||||
if (elapsed > 1000) {
|
||||
// if it takes more than a second to load, display the progress bar:
|
||||
progress.style.display = 'block';
|
||||
progressBar.style.width = Math.round(processed/total*100) + '%';
|
||||
progress.style.display = 'block'
|
||||
progressBar.style.width = Math.round(processed / total * 100) + '%'
|
||||
}
|
||||
|
||||
if (processed === total) {
|
||||
// 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 据此判断是否需要自定义聚合图层的样式
|
||||
* @returns {*}
|
||||
*/
|
||||
function createMarkerClusterLayer (layerClassName) {
|
||||
function createMarkerClusterLayer(layerClassName) {
|
||||
let markerClusterLayer = null
|
||||
if (layerClassName) { // 如果存在类名，表示需要自定义图标
|
||||
markerClusterLayer = L.markerClusterGroup({
|
||||
iconCreateFunction (cluster) {
|
||||
iconCreateFunction(cluster) {
|
||||
const markers = cluster.getAllChildMarkers()
|
||||
let n = 0
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
|
|
@ -80,7 +80,7 @@ function createMarkerClusterLayer (layerClassName) {
|
|||
* @param doChunk 处理数据的函数
|
||||
* @param chunkCompleted 数据处理完以后执行的函数
|
||||
*/
|
||||
function chunkData (data, doChunk, chunkCompleted) {
|
||||
function chunkData(data, doChunk, chunkCompleted) {
|
||||
const chunk = data.splice(0, 1000)
|
||||
doChunk(chunk)
|
||||
if (data.length > 0) {
|
||||
|
|
@ -107,7 +107,7 @@ function chunkData (data, doChunk, chunkCompleted) {
|
|||
* @param layerGroup
|
||||
* @return {*|void} layer对象，可以直接用map的removeLayer删除
|
||||
*/
|
||||
function addPointOnMap ({
|
||||
function addPointOnMap({
|
||||
feature,
|
||||
iconSize = [48, 48],
|
||||
iconUrl = 'poi.png',
|
||||
|
|
@ -168,7 +168,7 @@ function addPointOnMap ({
|
|||
* @returns {Promise<any>}
|
||||
* @private
|
||||
*/
|
||||
function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '') {
|
||||
function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') {
|
||||
const queryUrl = _mapConfig.config.QUERY_URL
|
||||
// 构造查询条件authorityFilter
|
||||
let authorityFilter = ''
|
||||
|
|
@ -223,7 +223,7 @@ function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '')
|
|||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPopupFun,
|
||||
function addResourceOnMapNew(features, layerConfig, getLayerPopupInfo, createPopupFun,
|
||||
mapObj, featureGroup, layerGroup) {
|
||||
// 如果资源要素数量为0，则说明该种资源没有记录
|
||||
if (features.length < 1) {
|
||||
|
|
@ -298,7 +298,7 @@ function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPo
|
|||
* @return {*}
|
||||
* @private
|
||||
*/
|
||||
function addResourceOnMap ({
|
||||
function addResourceOnMap({
|
||||
features,
|
||||
layerName,
|
||||
layerConfigInfo,
|
||||
|
|
@ -312,7 +312,7 @@ function addResourceOnMap ({
|
|||
replaceIconUrl = '/src/supermap/image/poi.png',
|
||||
replaceIconSize = [44, 44]
|
||||
} = {}, mapObj, featureGroup, layerGroup) {
|
||||
// debugger;
|
||||
// debugger;
|
||||
console.log('上图数据', layerClassName)
|
||||
// 如果资源要素数量为0，则说明该种资源没有记录
|
||||
if (features.length < 1) {
|
||||
|
|
@ -369,11 +369,11 @@ function addResourceOnMap ({
|
|||
console.log('图标点击e', e)
|
||||
// 判断是否需要选中之后更换marker的图标
|
||||
if (clickReplaceIcon) {
|
||||
// 先把之前选中的图标切换回来
|
||||
// const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId);
|
||||
// if (previousLayer) {
|
||||
// previousLayer.setIcon(icon);
|
||||
// }
|
||||
// 先把之前选中的图标切换回来
|
||||
// const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId);
|
||||
// if (previousLayer) {
|
||||
// previousLayer.setIcon(icon);
|
||||
// }
|
||||
const layers = layerGroup.get(layerName).getLayers()
|
||||
layers.forEach(layer => {
|
||||
layer.setIcon(icon)
|
||||
|
|
@ -390,11 +390,11 @@ function addResourceOnMap ({
|
|||
let type = null
|
||||
// 根据layerName1 传递不同的 resourceType
|
||||
switch (e.sourceTarget.layerConfigInfo.layerName1) {
|
||||
// 直升机起降点
|
||||
// 直升机起降点
|
||||
case 'f_helicopter':
|
||||
type = 'resourceHelicopter'
|
||||
break
|
||||
// 物资储备库
|
||||
// 物资储备库
|
||||
case 'f_repository':
|
||||
type = 'resourceStorage'
|
||||
break
|
||||
|
|
@ -417,7 +417,7 @@ function addResourceOnMap ({
|
|||
case 'f_check_station':
|
||||
type = 'resourceProtection'
|
||||
break
|
||||
// 墓地
|
||||
// 墓地
|
||||
case 'f_cemetery':
|
||||
type = 'resourceProtection'
|
||||
break
|
||||
|
|
@ -458,7 +458,7 @@ function addResourceOnMap ({
|
|||
})
|
||||
}
|
||||
// 根据类型返回具体用聚合图层的样式。
|
||||
function typeToStyle (layerName) {
|
||||
function typeToStyle(layerName) {
|
||||
let returnStyle = null
|
||||
const typeToImg = {
|
||||
fireForest: 'multi-marker-cluster-resource-protection',
|
||||
|
|
@ -495,7 +495,7 @@ function typeToStyle (layerName) {
|
|||
return returnStyle
|
||||
}
|
||||
// 无聚合上图 =》阳性人员路径
|
||||
function addResourceOnMapWithoutSuperMap (
|
||||
function addResourceOnMapWithoutSuperMap(
|
||||
features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) {
|
||||
// 如果资源要素数量为0，则说明该种资源没有记录
|
||||
// if (features.length < 1) {
|
||||
|
|
@ -519,10 +519,10 @@ function addResourceOnMapWithoutSuperMap (
|
|||
const marker = L.marker(feature.latLng, { icon })
|
||||
// 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>' +
|
||||
feature.traveladdress + '(' + feature.count + '次)</span></p>'
|
||||
, {
|
||||
permanent: true
|
||||
})
|
||||
feature.traveladdress + '(' + feature.count + '次)</span></p>'
|
||||
, {
|
||||
permanent: true
|
||||
})
|
||||
L.tooltipLayout.resetMarker(marker)
|
||||
if (createPopupFun !== null) {
|
||||
marker.on('click', async e => {
|
||||
|
|
@ -551,7 +551,7 @@ function addResourceOnMapWithoutSuperMap (
|
|||
// 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，则说明该种资源没有记录
|
||||
// if (features.length < 1) {
|
||||
// return Promise.resolve(0);
|
||||
|
|
@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
// layers = createMarkerClusterLayer(defaultStyle)
|
||||
const icon = createDefaultFeatureStyle({
|
||||
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 = []
|
||||
features.map((feature, index) => {
|
||||
|
|
@ -582,15 +582,15 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
marker.on('click', async e => {
|
||||
const elementHtml = createPopupFun(feature)
|
||||
if (elementHtml) {
|
||||
if(feature.type=='road'){
|
||||
L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='site'){
|
||||
L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='siteRoad'){
|
||||
L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if(feature.type=='waterPoint'){
|
||||
L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else{
|
||||
if (feature.type == 'road') {
|
||||
L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if (feature.type == 'site') {
|
||||
L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if (feature.type == 'siteRoad') {
|
||||
L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else if (feature.type == 'waterPoint') {
|
||||
L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else {
|
||||
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 {*}
|
||||
* @private
|
||||
*/
|
||||
function addResourceOnMapWithoutSuper ({
|
||||
function addResourceOnMapWithoutSuper({
|
||||
features,
|
||||
layerName,
|
||||
layerConfigInfo,
|
||||
|
|
@ -727,11 +727,11 @@ function addResourceOnMapWithoutSuper ({
|
|||
case 'wf_storage':
|
||||
resourceType = 'resourceStorage'
|
||||
break
|
||||
// 应急队伍
|
||||
// 应急队伍
|
||||
case 'wf_team':
|
||||
resourceType = 'resourceTeam'
|
||||
break
|
||||
// 危险源
|
||||
// 危险源
|
||||
case 'wf_danger':
|
||||
resourceType = 'resourceDanger'
|
||||
break
|
||||
|
|
@ -774,7 +774,7 @@ function addResourceOnMapWithoutSuper ({
|
|||
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)
|
||||
// debugger;
|
||||
console.log(response)
|
||||
|
|
|
|||
|
|
@ -23,7 +23,14 @@
|
|||
</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-processStateSelect">
|
||||
<div class="processStateSelect-btn"
|
||||
|
|
@ -94,25 +101,25 @@ export default {
|
|||
{
|
||||
title: '智能算法识别',
|
||||
id: 'video'
|
||||
},
|
||||
{
|
||||
title: '城管局',
|
||||
id: 'case'
|
||||
}
|
||||
// {
|
||||
// title: '城管局',
|
||||
// id: 'case'
|
||||
// }
|
||||
// {
|
||||
// title:'水务集团',
|
||||
// id:'null'
|
||||
// },
|
||||
],
|
||||
tabsActiveName: '全部',
|
||||
tabsActiveName: '水务局',
|
||||
statisticalAnalysisIsShow: false,
|
||||
filterButton: {
|
||||
typeSelect: ['事件', '事件1'],
|
||||
typeSelectActive: '事件',
|
||||
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
|
||||
type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
|
||||
processStateSelect: ['全部', '未派发', '未处置', '已处置'],
|
||||
processStateSelectActive: '全部',
|
||||
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
|
||||
typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
|
||||
},
|
||||
eventListData: [],
|
||||
preTime: '',
|
||||
|
|
@ -130,7 +137,8 @@ export default {
|
|||
listAll: [],
|
||||
policeList: [],
|
||||
// 单项总数
|
||||
allNum: 0
|
||||
allNum: 0,
|
||||
reportType: '随手拍'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -161,10 +169,18 @@ export default {
|
|||
selectWaterPoliceList().then((policeRes) => {
|
||||
this.policeList = policeRes.data.data || []
|
||||
const dataAll = [...res.data.data, ...policeRes.data.data]
|
||||
this.list = dataAll
|
||||
// this.list = 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
|
||||
bus.$emit('waterPoint', dataAll)
|
||||
bus.$emit('waterPoint', this.list)
|
||||
})
|
||||
// this.list = res.data.data
|
||||
// this.listAll = res.data.data
|
||||
|
|
@ -187,7 +203,7 @@ export default {
|
|||
return `影响行人(${deepth}cm)`
|
||||
break
|
||||
default:
|
||||
return `无积水(${deepth}cm)`
|
||||
return `无积水或少量积水(${deepth}cm)`
|
||||
break
|
||||
}
|
||||
},
|
||||
|
|
@ -204,7 +220,7 @@ export default {
|
|||
case '影响行人(<30cm)':
|
||||
this.list = this.list.filter(v => v.pointLevel != 'pedestrian')
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
case '无积水或少量积水(<10cm)':
|
||||
this.list = this.list.filter(v => v.pointLevel != 'non')
|
||||
break
|
||||
}
|
||||
|
|
@ -221,7 +237,7 @@ export default {
|
|||
case '影响行人(<30cm)':
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian'))
|
||||
break
|
||||
case '无积水(<10cm)':
|
||||
case '无积水或少量积水(<10cm)':
|
||||
this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non'))
|
||||
break
|
||||
}
|
||||
|
|
@ -234,7 +250,7 @@ export default {
|
|||
tabHandleClick (item) {
|
||||
this.allNum = 0
|
||||
this.tabsActiveName = item.title
|
||||
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
|
||||
this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)']
|
||||
|
||||
if (item.title == '全部') {
|
||||
selectWaterPoint().then((res) => {
|
||||
|
|
@ -259,6 +275,20 @@ export default {
|
|||
})
|
||||
this.allNum = this.list.length
|
||||
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 {
|
||||
selectReportOrigin({ reportOrigin: item.id }).then((res) => {
|
||||
this.list = res.data.data
|
||||
|
|
@ -356,6 +386,14 @@ export default {
|
|||
|
||||
openDialog (item) {
|
||||
bus.$emit('openWaterPointDialog', item)
|
||||
},
|
||||
// 爱山东、随手拍
|
||||
reportTypeChange (item) {
|
||||
this.reportType = item
|
||||
this.tabHandleClick({
|
||||
title: '群众上报',
|
||||
id: 'commonReport'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -504,6 +542,21 @@ export default {
|
|||
.allNum {
|
||||
color: #ffffff;
|
||||
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 {
|
||||
margin-top: 16px;
|
||||
|
|
@ -701,13 +754,13 @@ export default {
|
|||
.box3 {
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
height: 600px;
|
||||
height: 565px;
|
||||
overflow-y: scroll;
|
||||
cursor: pointer;
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
background: rgba(5, 33, 59, 0.35);
|
||||
padding: 10px;
|
||||
padding: 6px 10px;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -716,7 +769,7 @@ export default {
|
|||
}
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.topType {
|
||||
margin-left: 5px;
|
||||
|
|
@ -743,6 +796,9 @@ export default {
|
|||
.green {
|
||||
background: #31d779;
|
||||
}
|
||||
.type {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<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 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">
|
||||
<el-input
|
||||
|
|
@ -72,7 +74,7 @@ import {
|
|||
selectWeekAll,
|
||||
selectMonthAll
|
||||
} from '@/api/construction/index'
|
||||
import { selectCountWater } from '@/api/waterPoints'
|
||||
import { selectCountWater, selectCountLevel } from '@/api/waterPoints'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
|
@ -127,27 +129,60 @@ export default {
|
|||
// selectValue: ''
|
||||
// }
|
||||
return {
|
||||
district:['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
|
||||
districtData: [],
|
||||
|
||||
// district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
|
||||
// districtData: []
|
||||
rank: [
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '无积水或少量积水'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '影响行人'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '影响车辆'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
mounted () {
|
||||
selectCountWater().then((res) => {
|
||||
this.district.map((district) => {
|
||||
let eligibility = res.data.data.find((data) => {
|
||||
return district == data.ssqy
|
||||
})
|
||||
if(eligibility){
|
||||
this.districtData.push(eligibility.count)
|
||||
} else {
|
||||
this.districtData.push(0)
|
||||
// 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.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()
|
||||
|
|
@ -189,7 +224,7 @@ export default {
|
|||
},
|
||||
grid: {
|
||||
bottom: 30,
|
||||
top:10,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -240,10 +275,8 @@ export default {
|
|||
show: true,
|
||||
position: 'inside',
|
||||
distance: 0,
|
||||
formatter: function(param) {
|
||||
if(param.value > 0)
|
||||
return param.value
|
||||
else return ''
|
||||
formatter: function (param) {
|
||||
if (param.value > 0) { return param.value } else return ''
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
|
|
@ -257,6 +290,73 @@ export default {
|
|||
document.getElementById('event-type-chart')
|
||||
)
|
||||
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: {
|
||||
|
|
@ -347,33 +447,42 @@ export default {
|
|||
padding: 0px 0 18px 0px;
|
||||
.title {
|
||||
color: #fff;
|
||||
background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) );
|
||||
p{
|
||||
font-weight: bold;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(27, 103, 176, 1),
|
||||
rgba(27, 103, 176, 0)
|
||||
);
|
||||
p {
|
||||
padding: 5px;
|
||||
}
|
||||
.bottomLine{
|
||||
.bottomLine {
|
||||
width: 100%;
|
||||
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%;
|
||||
margin-top: 14px;
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.el-input__inner {
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
border: 1px solid rgba(31, 254, 253, 0.9);
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
background: rgba($color: #203b5d, $alpha: 0.8);
|
||||
border-radius: unset;
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.el-input__prefix {
|
||||
color: rgba(31,254,253,.9);
|
||||
color: rgba(31, 254, 253, 0.9);
|
||||
}
|
||||
|
||||
.el-select {
|
||||
|
|
@ -382,12 +491,18 @@ export default {
|
|||
width: 161px;
|
||||
}
|
||||
}
|
||||
#event-type-chart,#event-state-chart {
|
||||
#event-type-chart,
|
||||
#event-state-chart {
|
||||
width: 100%;
|
||||
height: 207px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#analysis-of-water-level {
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
margin: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .eventNoise {
|
||||
|
|
@ -395,9 +510,10 @@ export default {
|
|||
.el-table {
|
||||
border: 1px solid #325d94;
|
||||
width: 100%;
|
||||
th,td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border-right: 1px solid #325d94 !important;
|
||||
}
|
||||
// .descending.is-leaf.is-sortable {
|
||||
// .sort-caret {
|
||||
// border-top-color: #1dfeff;
|
||||
|
|
|
|||
|
|
@ -35,11 +35,12 @@
|
|||
</div>
|
||||
<div id="analysis-of-water-source"></div>
|
||||
<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>
|
||||
<div id="analysis-of-water-level"></div>
|
||||
|
||||
<!-- <div id="analysis-of-water-level"></div> -->
|
||||
<div id="event-type-chart"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
<script>
|
||||
import moment from 'moment'
|
||||
import * as echarts from 'echarts'
|
||||
import { selectCountWaters,selectCountLevel, selectWaterPoliceList } from '@/api/waterPoints'
|
||||
import { selectCountWaters, selectCountLevel, selectWaterPoliceList, selectCountWater } from '@/api/waterPoints'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
|
@ -80,48 +81,48 @@ export default {
|
|||
}
|
||||
],
|
||||
source: [
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '水务集团上报',
|
||||
id:'auditorReport'
|
||||
},
|
||||
// {
|
||||
// value: 0,
|
||||
// unit: '个',
|
||||
// name: '水务集团上报',
|
||||
// id:'auditorReport'
|
||||
// },
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '群众上报',
|
||||
id:'commonReport'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '城管局',
|
||||
id:'case'
|
||||
id: 'commonReport'
|
||||
},
|
||||
// {
|
||||
// value: 0,
|
||||
// unit: '个',
|
||||
// name: '城管局',
|
||||
// id:'case'
|
||||
// },
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '智能算法识别',
|
||||
id:'video'
|
||||
id: 'video'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '水务局',
|
||||
id:'null'
|
||||
id: 'auditorReport'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '交警',
|
||||
id:'trafficPolice'
|
||||
id: 'trafficPolice'
|
||||
}
|
||||
],
|
||||
rank: [
|
||||
{
|
||||
value: 0,
|
||||
unit: '个',
|
||||
name: '无积水'
|
||||
name: '无积水或少量积水'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
|
|
@ -132,55 +133,68 @@ export default {
|
|||
value: 0,
|
||||
unit: '个',
|
||||
name: '影响车辆'
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
district: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
|
||||
districtData: []
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
|
||||
selectCountWaters().then((res) => {
|
||||
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
|
||||
}
|
||||
if(item.reportOrigin == 'commonReport') {
|
||||
// if(item.reportOrigin == 'case') {
|
||||
// this.source[2].value = item.count
|
||||
// }
|
||||
if (item.reportOrigin == 'video') {
|
||||
this.source[1].value = item.count
|
||||
}
|
||||
if(item.reportOrigin == 'case') {
|
||||
if (item.reportOrigin == 'auditorReport') {
|
||||
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) => {
|
||||
this.source[5].value = policeRes.data.data.length
|
||||
this.source[3].value = policeRes.data.data.length
|
||||
this.initEventTypeCharts()
|
||||
})
|
||||
})
|
||||
|
||||
selectCountLevel().then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
//无积水
|
||||
if(item.pointLevel == 'non') {
|
||||
// 无积水
|
||||
if (item.pointLevel == 'non') {
|
||||
this.rank[0].value = item.count
|
||||
}
|
||||
//影响行人
|
||||
if(item.pointLevel == 'pedestrian') {
|
||||
// 影响行人
|
||||
if (item.pointLevel == 'pedestrian') {
|
||||
this.rank[1].value = item.count
|
||||
}
|
||||
//影响车辆
|
||||
if(item.pointLevel == 'traffic') {
|
||||
// 影响车辆
|
||||
if (item.pointLevel == 'traffic') {
|
||||
this.rank[2].value = item.count
|
||||
}
|
||||
})
|
||||
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: {
|
||||
// 积水点来源分析charts图
|
||||
|
|
@ -188,7 +202,7 @@ export default {
|
|||
const legend1 = this.source.map((v) => v.name)
|
||||
const legendData = [...legend1]
|
||||
const option = {
|
||||
color: ['#24a9ff', '#6873ff', '#4df6f7', '#3ee79d','#b7baff'],
|
||||
color: ['#4df6f7', '#3ee79d', '#6873ff', '#24a9ff', '#b7baff'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
|
|
@ -201,8 +215,8 @@ export default {
|
|||
left: 'left',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
|
|
@ -233,7 +247,7 @@ export default {
|
|||
normal: {
|
||||
position: 'inner',
|
||||
show: false
|
||||
},
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
|
|
@ -267,8 +281,8 @@ export default {
|
|||
left: 'left',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
|
|
@ -297,9 +311,9 @@ export default {
|
|||
radius: ['45%', '80%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: function(value) {
|
||||
if(value == 0) return false
|
||||
}(),
|
||||
show: (function (value) {
|
||||
if (value == 0) return false
|
||||
}()),
|
||||
position: 'inner'
|
||||
}
|
||||
},
|
||||
|
|
@ -316,7 +330,89 @@ export default {
|
|||
document.getElementById('analysis-of-water-level')
|
||||
)
|
||||
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>
|
||||
|
|
@ -334,7 +430,7 @@ export default {
|
|||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
}
|
||||
.time {
|
||||
text-align: left;
|
||||
|
|
@ -414,13 +510,19 @@ export default {
|
|||
}
|
||||
& > div:last-child {
|
||||
width: 40%;
|
||||
height: 165px;
|
||||
// height: 165px;
|
||||
}
|
||||
}
|
||||
#analysis-of-water-source,#analysis-of-water-level {
|
||||
#analysis-of-water-source,
|
||||
#analysis-of-water-level {
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
margin: 22px;
|
||||
}
|
||||
#event-type-chart {
|
||||
width: 100%;
|
||||
height: 207px;
|
||||
margin: 22px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
console.log(res.data.data, 'res')
|
||||
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)
|
||||
})
|
||||
console.log(this.depthDayX, this.depthDayY, ' this.depthDayX')
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
更新时间: {{ feature.data.updatedDate || "" }}
|
||||
</div>
|
||||
<div class="btn-area">
|
||||
<button class="button" @click="analyse(feature)">线索分析</button>
|
||||
<button class="button" @click="analyse(feature)">周边视频</button>
|
||||
</div>
|
||||
<WaterHistory v-if="feature.data.reportOrigin!='police'" :feature='feature' />
|
||||
</div>
|
||||
|
|
@ -141,7 +141,7 @@ export default {
|
|||
} else if (data.pointLevel == 'pedestrian') {
|
||||
return '影响行人(<30cm)'
|
||||
} else {
|
||||
return '无积水(<10cm)'
|
||||
return '无积水或少量积水(<10cm)'
|
||||
}
|
||||
},
|
||||
typeSelect (item) {
|
||||
|
|
|
|||
|
|
@ -46,21 +46,18 @@
|
|||
<complaint-event ref="complaintEventRef"></complaint-event>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 事件多选 -->
|
||||
<div class="eventSelection">
|
||||
<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="无积水(<10cm)" @change="selectType('无积水(<10cm)')"></el-checkbox>
|
||||
<el-checkbox label="无积水或少量积水(<10cm)" @change="selectType('无积水或少量积水(<10cm)')"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 视频标签、列表 -->
|
||||
<div class="videoList">
|
||||
<video-list ref="videoListRef"></video-list>
|
||||
|
|
@ -71,14 +68,14 @@
|
|||
<site-list></site-list>
|
||||
</div>
|
||||
|
||||
<div class="changeLayer">
|
||||
<!-- <div class="changeLayer">
|
||||
<div class="title">地图图层</div>
|
||||
<div class="change-btn-box">
|
||||
<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-group>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
|
|
@ -99,7 +96,7 @@ import complaintEvent from './components/ComplaintEvent'
|
|||
import VideoList from './components/VideoList'
|
||||
import SiteList from './components/SiteList'
|
||||
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'
|
||||
|
||||
export default {
|
||||
|
|
@ -113,9 +110,9 @@ export default {
|
|||
// changeLayerBtnList: ['视频监控', '易积水点'],
|
||||
changeLayerBtnList: ['易积水点'],
|
||||
changeLayerBtnGroup: [],
|
||||
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
|
||||
eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'],
|
||||
openVideo: false,
|
||||
channelCode:[]
|
||||
channelCode: []
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -180,7 +177,7 @@ export default {
|
|||
|
||||
bus.$off('openWaterPointDialog')
|
||||
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);
|
||||
// const dataEvent = [{
|
||||
// latLng: { lat: item.latitude, lng: item.longitude },
|
||||
|
|
@ -196,11 +193,10 @@ export default {
|
|||
})
|
||||
|
||||
bus.$off('openCurrentVideoWaterPoint')
|
||||
bus.$on('openCurrentVideoWaterPoint',channelCode => {
|
||||
this.openVideo = true;
|
||||
bus.$on('openCurrentVideoWaterPoint', channelCode => {
|
||||
this.openVideo = true
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync (queryString, cb) {
|
||||
|
|
@ -372,51 +368,54 @@ export default {
|
|||
this.hiMapFun.removeLayerByLayerName('waterPoint1')
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint2')
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint3')
|
||||
this.hiMapFun.removeLayerByLayerName('waterPoint4')
|
||||
const dataEvent1 = []
|
||||
const dataEvent2 = []
|
||||
const dataEvent3 = []
|
||||
const dataEvent4 = []
|
||||
|
||||
data.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.longitude) == -1) {
|
||||
switch(item.pointLevel){
|
||||
switch (item.pointLevel) {
|
||||
case 'non':
|
||||
dataEvent1.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
break
|
||||
case 'pedestrian':
|
||||
dataEvent2.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
break
|
||||
case 'traffic':
|
||||
dataEvent3.push({
|
||||
dataEvent3.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
break
|
||||
default:
|
||||
dataEvent1.push({
|
||||
dataEvent4.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop)
|
||||
this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', 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)
|
||||
}
|
||||
},
|
||||
|
|
@ -427,7 +426,7 @@ export default {
|
|||
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||||
}
|
||||
.map-box {
|
||||
|
|
@ -456,11 +455,11 @@ export default {
|
|||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
}
|
||||
.title::before {
|
||||
content: '青岛市易积水点地图';
|
||||
text-shadow: 0px 3px 10px rgba(0,0,0,.9);
|
||||
content: "青岛市易积水点地图";
|
||||
text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -471,20 +470,20 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 496px;
|
||||
top: 90px;
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
border: 1px solid rgba(31, 254, 253, 0.9);
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: .8);
|
||||
background: rgba($color: #203b5d, $alpha: 0.8);
|
||||
width: 226px;
|
||||
height: 36px;
|
||||
border:none;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: rgba($color: #fff, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__prefix {
|
||||
top: -1px;
|
||||
color: rgba(31,254,253,.9);
|
||||
color: rgba(31, 254, 253, 0.9);
|
||||
}
|
||||
::v-deep .el-input-group__append {
|
||||
width: 54px;
|
||||
|
|
@ -503,7 +502,7 @@ export default {
|
|||
z-index: -1 !important;
|
||||
width: 226px !important;
|
||||
left: 0px !important;
|
||||
background: rgba(32,59,93,.8);
|
||||
background: rgba(32, 59, 93, 0.8);
|
||||
border: 1px solid #1ffefd;
|
||||
li {
|
||||
color: #fff;
|
||||
|
|
@ -519,9 +518,9 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 10px;
|
||||
top: 90px;
|
||||
height:908px;
|
||||
height: 908px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.eventNum {
|
||||
|
|
@ -542,7 +541,7 @@ export default {
|
|||
span {
|
||||
font-size: 46px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% );
|
||||
background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
|
@ -558,23 +557,23 @@ export default {
|
|||
top: 92px;
|
||||
width: 398px;
|
||||
// height:460px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.siteList {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
right: 8px;
|
||||
top: 660px;
|
||||
top: 703px;
|
||||
width: 398px;
|
||||
// height:500px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
}
|
||||
|
||||
.changeLayer {
|
||||
width: 332px;
|
||||
height: 67px;
|
||||
background: rgba(7,26,44,.8);
|
||||
background: rgba(7, 26, 44, 0.8);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
|
|
@ -585,7 +584,7 @@ export default {
|
|||
width: 96px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
line-height: 67px;
|
||||
}
|
||||
|
|
@ -596,17 +595,16 @@ export default {
|
|||
padding-left: 20px;
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
.el-checkbox-button__inner{
|
||||
padding: 6px 14px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
.el-checkbox-button__inner {
|
||||
padding: 6px 14px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner{
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-checkbox-button.is-checked .el-checkbox-button__inner{
|
||||
background: #027DB4;
|
||||
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||
background: #027db4;
|
||||
color: #ffffff;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
|
@ -614,7 +612,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.eventSelection{
|
||||
.eventSelection {
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
background: rgba(7, 26, 44, 0.8);
|
||||
|
|
@ -625,16 +623,16 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
::v-deep .el-checkbox__label{
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-checkbox{
|
||||
margin:0 15px;
|
||||
.el-checkbox__inner{
|
||||
margin-right: 15px;
|
||||
::v-deep .el-checkbox {
|
||||
margin: 0 15px;
|
||||
.el-checkbox__inner {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.eventSelectionIcon{
|
||||
.eventSelectionIcon {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -642,21 +640,27 @@ export default {
|
|||
background: #f74b3f;
|
||||
position: absolute;
|
||||
left: 34.5px;
|
||||
top: 21px;
|
||||
top: 13px;
|
||||
}
|
||||
.eventSelectionIcon:nth-child(2){
|
||||
.eventSelectionIcon:nth-child(2) {
|
||||
background: #ffae2b;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
left: 34.5px;
|
||||
top: 42px;
|
||||
top: 34px;
|
||||
}
|
||||
.eventSelectionIcon:nth-child(3){
|
||||
.eventSelectionIcon:nth-child(3) {
|
||||
background: #31d779;
|
||||
position: absolute;
|
||||
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 lang='scss'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue