This commit is contained in:
yangxiaojiang
parent
f68ac3812c
commit
ceb5dd0c92
|
|
@ -103,7 +103,7 @@
|
|||
<script type="text/javascript" src="./static/leaflet/leaflet.motion.min.js"></script>
|
||||
<script type="text/javascript" src="./static/leaflet/leaflet.polylineDecorator.js"></script>
|
||||
<script type="text/javascript" src="./static/leaflet/leaflet-tooltip-layout.dist.js"></script>
|
||||
<script type="text/javascript" src="./static/leaflet/leaflet.canvas-markers.js"></script>
|
||||
<!-- <script type="text/javascript" src="./static/leaflet/leaflet.canvas-markers.js"></script> -->
|
||||
<script type="text/javascript" src="./static/leaflet/leaflet.markercluster.js"></script>
|
||||
<!-- 热力图 -->
|
||||
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
<script type="text/javascript" src="./static/js/encrypt.js"></script>
|
||||
<script type="text/javascript" src="./static/js/DHWs.js"></script>
|
||||
|
||||
<script type="text/javascript" src="./TextIconOverlay_min.js"></script>
|
||||
<!-- <script type="text/javascript" src="./TextIconOverlay_min.js"></script> -->
|
||||
<script type="text/javascript" src="./MarkerClusterer_min.js"></script>
|
||||
<script src="./static/js/InfoBox.js"></script>
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,26 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function selectWaterPoint(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterPoint',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function selectWaterCamera(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectWaterCamera',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function selectCameraByName(params) {
|
||||
return request({
|
||||
url: 'api/project/water/selectCameraByName',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -195,15 +195,15 @@ const router = new Router({
|
|||
router.beforeEach((to, from, next) => {
|
||||
|
||||
|
||||
// const userName = Cookies.get('userCJZT');
|
||||
// console.log(userName)
|
||||
// if (to.path === '/login' || to.path === '/') {
|
||||
// return next();
|
||||
// }else{
|
||||
// if (!userName) {
|
||||
// return next(`/login?redirect=${to.path}`)
|
||||
// }
|
||||
// }
|
||||
const userName = Cookies.get('userCJZT');
|
||||
console.log(userName)
|
||||
if (to.path === '/login' || to.path === '/' || to.path === '/waterPoints') {
|
||||
return next();
|
||||
}else{
|
||||
if (!userName) {
|
||||
return next(`/login?redirect=${to.path}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (to.name == 'mapHome') {
|
||||
document.title = _global.config.sysTitle
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import { selectByChannelCode } from '@/api/videoSurveillance/index.js'
|
|||
import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGovernancePop'
|
||||
import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop'
|
||||
import SiteListPop from '@/views/pages/construction/components/SiteListPop'
|
||||
import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
|
||||
|
||||
/**
|
||||
* 生成专题通用弹窗Dom
|
||||
|
|
@ -626,6 +627,24 @@ function createSiteListPop(feature) {
|
|||
return popupDom.initDom()
|
||||
}
|
||||
|
||||
// 创建积水点的弹窗
|
||||
function createWaterPointPop(feature) {
|
||||
const popupDom = new Dom({
|
||||
template: '<Water-Point-Pop :feature="feature"></Water-Point-Pop>',
|
||||
data() {
|
||||
return {
|
||||
feature: feature
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
components: {
|
||||
WaterPointPop
|
||||
}
|
||||
})
|
||||
return popupDom.initDom()
|
||||
}
|
||||
|
||||
export {
|
||||
createTopicGeneralPopup,
|
||||
createKeyRiskAreaPopup,
|
||||
|
|
@ -651,4 +670,5 @@ export {
|
|||
createRoadGovernancePop,
|
||||
createEventListDetailsPop,
|
||||
createSiteListPop,
|
||||
createWaterPointPop,
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -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'?[37,49]:[36, 36],
|
||||
iconSize: url == ('construction.png'||url == 'waterPoint.png')?[37,49]:[36, 36],
|
||||
})
|
||||
const arr = []
|
||||
features.map((feature, index) => {
|
||||
|
|
@ -587,7 +587,9 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou
|
|||
} else if(feature.type=='site'){
|
||||
L.popup({ className: 'site-popup', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
}
|
||||
else {
|
||||
else if(feature.type=='waterPoint'){
|
||||
L.popup({ className: 'water-point-pop', keepInView: true,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
} else{
|
||||
L.popup({ className: 'epidemic-address', keepInView: true, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label-content">
|
||||
<div v-if="tabsActiveName == '视频标签'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
prefix-icon="el-icon-search"
|
||||
|
|
@ -33,6 +33,48 @@
|
|||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div v-if="tabsActiveName == '视频列表'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="labelSearch"
|
||||
@input="searchCameraTree"
|
||||
>
|
||||
</el-input>
|
||||
<el-radio v-model="checkStatus" label="2">全部</el-radio>
|
||||
<el-radio v-model="checkStatus" label="1">正常</el-radio>
|
||||
<el-radio v-model="checkStatus" label="0">异常</el-radio>
|
||||
<span class="reset-button" @click="reset">重置</span>
|
||||
<el-tree
|
||||
v-show="camreaTreeIsShow"
|
||||
id="tree"
|
||||
:data="camreaTree"
|
||||
:props="{label:'name',children:'children',isLeaf:'leaf',}"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
@node-click="treeCameraClick"
|
||||
empty-text="暂无数据"
|
||||
:filter-node-method="filterNode"
|
||||
lazy>
|
||||
<!-- 是否离线checkStatus -->
|
||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.name }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<el-tree
|
||||
v-show="!camreaTreeIsShow"
|
||||
ref="tree"
|
||||
:data="camreaTreeSingle"
|
||||
:props="{label:'channelName',children:'children'}"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="treeCameraClick"
|
||||
>
|
||||
<span :style="{backgroundColor: data.checkStatus == 0 ?'#ccc':''}" slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span>{{data.checkStatus == 0 ? `(离线)`:''}}{{ data.channelName }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -49,6 +91,10 @@ export default {
|
|||
labelSearch:'',
|
||||
checkboxGroup: [],
|
||||
cameraAllData:[],
|
||||
camreaTreeIsShow:true,
|
||||
camreaTreeSingle: [],
|
||||
checkStatus: '2',
|
||||
camreaTree:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -59,6 +105,21 @@ export default {
|
|||
this.cameraAllData = res.data
|
||||
// this.addResourceTomap('cameraAll',res.data);
|
||||
})
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTreeSingle.push({
|
||||
channelName: item.name,
|
||||
children: []
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
checkStatus(newV,oldV) {
|
||||
console.log(newV)
|
||||
this.$refs.tree.filter(newV)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabHandleClick(item) {
|
||||
|
|
@ -98,6 +159,98 @@ export default {
|
|||
this.tabList = res.data.data
|
||||
})
|
||||
},
|
||||
searchCameraTree(value) {
|
||||
if(value.length > 0){
|
||||
const params = {
|
||||
channelName:value
|
||||
}
|
||||
selectByChannelName(params).then((res) => {
|
||||
console.log(res)
|
||||
this.camreaTree = []
|
||||
res.data.data.forEach((item) => {
|
||||
this.camreaTree.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
})
|
||||
}else {
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
})
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.checkboxGroup = []
|
||||
this.checkStatus = "2";
|
||||
this.camreaTreeIsShow = true
|
||||
getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
|
||||
this.camreaTree = res.data.data
|
||||
})
|
||||
document.getElementById("tree").scrollTop = 0;
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
// if (node.level === 0) {
|
||||
// return resolve([{ name: 'region' }]);
|
||||
// }
|
||||
console.log(node)
|
||||
if (node.level > 0) {
|
||||
let subData = []
|
||||
getCameraAllOrgan({parentId:node.data.id}).then((res) => {
|
||||
if(res.data.data.length == 0){
|
||||
const params = {
|
||||
parentId:node.data.id,
|
||||
checkStatus: this.checkStatus=='2'?["0","1"]:this.checkStatus,
|
||||
}
|
||||
getCameraByParentId(params).then((res) => {
|
||||
res.data.data.forEach((item) => {
|
||||
subData.push({
|
||||
name: item.channelName,
|
||||
gpsX: item.gpsX,
|
||||
gpsY: item.gpsY,
|
||||
channelCode:item.channelCode,
|
||||
checkStatus:item.checkStatus,
|
||||
leaf:true,
|
||||
})
|
||||
})
|
||||
return resolve(subData);
|
||||
})
|
||||
}else{
|
||||
subData = res.data.data
|
||||
return resolve(subData);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
// if(data.channelCode){
|
||||
// const cameraTree = [{
|
||||
// latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
// data: data,
|
||||
// type:'cameraTree'
|
||||
// }]
|
||||
// this.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
// this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
// const arr = [0,0.0,'','0','0.0']
|
||||
// if(arr.indexOf(data.gpsX) == -1){
|
||||
// this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
// this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
// }
|
||||
// }
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (value == "2") return true;
|
||||
if (value == "0") {
|
||||
return data.checkStatus == 0;
|
||||
}
|
||||
if (value == "1") {
|
||||
return data.checkStatus == 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -323,8 +323,20 @@ export default {
|
|||
|
||||
methods: {
|
||||
// 道路污染数据 昨日
|
||||
// async getRoadData() {
|
||||
// const res = await getRoadData({ dt: this.preTime });
|
||||
// //路网数据
|
||||
// this.roadData = res.data.data;
|
||||
// //道路事件 pm>200
|
||||
// // const data = res.data.data.filter((item) => item.pm10 > 150);
|
||||
// // this.tableData = data;
|
||||
// // this.dateTabs[0].data = data;
|
||||
// // this.dateTabs[0].dataNum = data.length;
|
||||
// // this.addToMap(data);
|
||||
// this.roadOnMap();
|
||||
// },
|
||||
async getRoadData() {
|
||||
const res = await getRoadData({ dt: this.preTime });
|
||||
const res = await getRoadData({ dt: '2022-7-7 00:00:00' });
|
||||
//路网数据
|
||||
this.roadData = res.data.data;
|
||||
//道路事件 pm>200
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<header>
|
||||
<div class="title">事件感知</div>
|
||||
<div class="title">易积水点列表</div>
|
||||
</header>
|
||||
<div class="toady-list">
|
||||
<div class="toady-list-content">
|
||||
<div class="toady-list-rotate"></div>
|
||||
<div class="toady-list-icon"></div>
|
||||
<div class="toady-list-num">今日事件<span> 36 </span>件</div>
|
||||
<div class="toady-list-num">易积水点<span>{{list.length || 0}} </span>个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-box">
|
||||
|
|
@ -37,18 +37,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class='box3'>
|
||||
<div class="item" v-for='item in list' :key='item.id'>
|
||||
<div class="item" v-for='item in list' :key='item.index' @click="openDialog(item)">
|
||||
<div class="top">
|
||||
<div>
|
||||
<span class='name'>{{item.name}}</span>
|
||||
<span class='topType'>{{item.topType}}</span>
|
||||
<span class='name'>{{item.waterPointName}}</span>
|
||||
<!-- <span class='topType'>物联感知</span> -->
|
||||
</div>
|
||||
<div>
|
||||
<span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span>
|
||||
<span class="type">{{item.type}}</span>
|
||||
<!-- <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span> -->
|
||||
<span class="type"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">{{item.text}}</div>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,6 +57,7 @@
|
|||
</template>
|
||||
<script>
|
||||
import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
|
||||
import { selectWaterPoint,selectWaterCamera } from '@/api/waterPoints'
|
||||
import StatisticalAnalysis from './StatisticalAnalysis.vue'
|
||||
import bus from '@/views/layout/bus'
|
||||
import {
|
||||
|
|
@ -82,79 +83,15 @@ export default {
|
|||
preTime: '',
|
||||
total: 0,
|
||||
roadData: [],
|
||||
list: [{
|
||||
name: '香港中路山东路',
|
||||
id: '1',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '2',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '3',
|
||||
topType: '物联感知',
|
||||
type: '影响行人(<30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '4',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '5',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '6',
|
||||
topType: '物联感知',
|
||||
type: '无积水(<10cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '7',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '8',
|
||||
topType: '物联感知',
|
||||
type: '影响行人(<30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '9',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '10',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '11',
|
||||
topType: '物联感知',
|
||||
type: '影响车辆(>30cm)',
|
||||
text: '液位：12cm'
|
||||
}, {
|
||||
name: '香港中路山东路',
|
||||
id: '12',
|
||||
topType: '物联感知',
|
||||
type: '无积水(<10cm)',
|
||||
text: '液位：12cm'
|
||||
}]
|
||||
list: [
|
||||
// {
|
||||
// name: '香港中路山东路',
|
||||
// id: '1',
|
||||
// topType: '物联感知',
|
||||
// type: '影响车辆(>30cm)',
|
||||
// text: '液位：12cm'
|
||||
// },
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -178,6 +115,17 @@ export default {
|
|||
this.selectRoadData()
|
||||
this.selectRaise()
|
||||
this.selectNoiceEvent()
|
||||
|
||||
selectWaterPoint().then( (res) => {
|
||||
console.log(res)
|
||||
this.list = res.data.data
|
||||
bus.$emit('waterPoint',res.data.data)
|
||||
})
|
||||
// selectWaterCamera().then( (res) => {
|
||||
// console.log(res)
|
||||
// this.list = res.data.data
|
||||
// bus.$emit('waterPoint',res.data.data)
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
selectType (item) {
|
||||
|
|
@ -271,6 +219,10 @@ export default {
|
|||
this.eventListData = res.data.data.roadData
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
openDialog(item) {
|
||||
bus.$emit("openWaterPointDialog", item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -302,7 +254,7 @@ export default {
|
|||
font-family: "Tensentype-ZhiHeiJ-W5";
|
||||
}
|
||||
.title::before {
|
||||
content: "事件感知";
|
||||
content: "易积水点列表";
|
||||
text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
|
@ -585,6 +537,7 @@ export default {
|
|||
margin-top: 10px;
|
||||
height: 620px;
|
||||
overflow-y: scroll;
|
||||
cursor: pointer;
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
background: rgba(5, 33, 59, 0.35);
|
||||
|
|
@ -593,7 +546,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
& > div:nth-of-type(2) {
|
||||
width: 140px;
|
||||
// width: 140px;
|
||||
}
|
||||
.name {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<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="eventData">
|
||||
<div id="event-type-chart"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,409 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2021-05-21 17:43:34
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2021-12-01 13:32:53
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="dh-view" />
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const DHWsInstance = DHWs.getInstance({
|
||||
reConnectCount: 2,
|
||||
connectionTimeout: 30 * 1000,
|
||||
messageEvents: {
|
||||
loginState() {
|
||||
console.log('aaaa');
|
||||
}
|
||||
}
|
||||
}); // 获取对象实例，使用单例模式，唯一
|
||||
DHWsInstance.detectConnectQt().then(res => {
|
||||
if (res) {
|
||||
console.info('登陆成功');
|
||||
} else {
|
||||
console.info('登陆失败,重新登录');
|
||||
DHWsInstance.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
DHWsInstance.on('loginState', (res) => {
|
||||
// this.isLogin = res;
|
||||
if (res) {
|
||||
// this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2'
|
||||
} else {
|
||||
// this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
import bus from '@/views/layout/bus';
|
||||
export default {
|
||||
props: {
|
||||
isDestroyed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posX: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
posY: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
channelId: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// ws: {
|
||||
// type: Object,
|
||||
// default: () => {
|
||||
// return {};
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ws: DHWsInstance,
|
||||
activePanel: 'key12580',
|
||||
isLogin: false,
|
||||
loginType: '1',
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
ctrlType: 'playerWin',
|
||||
ctrlList: [
|
||||
{
|
||||
value: 'ctrl1',
|
||||
label: '控件1',
|
||||
},
|
||||
{
|
||||
value: 'ctrl2',
|
||||
label: '控件2',
|
||||
},
|
||||
{
|
||||
value: 'ctrl3',
|
||||
label: '控件3',
|
||||
},
|
||||
],
|
||||
splitList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '1 * 1',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '2 * 2',
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
label: '3 * 3',
|
||||
},
|
||||
],
|
||||
displayModeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '播放器预览模式',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '播放器回放模式',
|
||||
},
|
||||
],
|
||||
ctrl: 'ctrl133',
|
||||
splitNum: 1,
|
||||
displayMode: 1,
|
||||
displayTimeRange: [],
|
||||
recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
|
||||
downloadName: '',
|
||||
downTimeRange: [],
|
||||
downloadFormat: 0,
|
||||
downloadFormatList: [
|
||||
{
|
||||
value: 0,
|
||||
label: 'dav',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: 'avi',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'mp4',
|
||||
},
|
||||
],
|
||||
downloadSource: 3,
|
||||
downloadSourceList: [
|
||||
{
|
||||
value: 3,
|
||||
label: '中心录像',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '设备录像',
|
||||
},
|
||||
],
|
||||
showDownloadStreamType: false,
|
||||
downloadStreamType: 1,
|
||||
downloadStreamTypeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '主码流',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '辅码流',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '三码流',
|
||||
},
|
||||
],
|
||||
downloadIsShow: true,
|
||||
downloadIsShowList: [
|
||||
{
|
||||
value: true,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: false,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
// posX: 650,
|
||||
// posY: 120,
|
||||
// width: 1250,
|
||||
height: 800,
|
||||
ratio: 100,
|
||||
scrollX: 0,
|
||||
scrollXH: 0,
|
||||
scrollY: 0,
|
||||
scrollYW: 0,
|
||||
cutPosX: 0,
|
||||
cutPosY: 0,
|
||||
cutWidth: 100,
|
||||
cutHeight: 100,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
channelId() {
|
||||
console.log('监测到了节点的变化', this.channelId);
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.login();
|
||||
|
||||
this.realTimeVideo();
|
||||
},
|
||||
count() {
|
||||
// this.setVisible();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log("#############################我是新的")
|
||||
// this.destroy();
|
||||
// this.login();
|
||||
},
|
||||
mounted() {
|
||||
this.realTimeVideo();
|
||||
// bus.$emit('destroyVideoSur', true);
|
||||
// this.loginOut();
|
||||
// this.login();
|
||||
// bus.$off('destroyDHView');
|
||||
// bus.$on('destroyDHView', val =>{
|
||||
// console.log('销毁弹窗插件', val);
|
||||
// if(!val) {
|
||||
// this.destroy();
|
||||
// this.loginOut();
|
||||
// } else {
|
||||
// this.login();
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
loginOut() {
|
||||
this.ws.logout({
|
||||
loginIp: _global.config.loginInfo.loginIp
|
||||
});
|
||||
},
|
||||
create() {
|
||||
// 调用创建控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlType: this.ctrlType,
|
||||
ctrlCode: this.ctrl,
|
||||
ctrlProperty: {
|
||||
displayMode: this.displayMode,
|
||||
splitNum: this.splitNum,
|
||||
channelList: [{ channelId: this.channelId }],
|
||||
},
|
||||
visible: true,
|
||||
posX: this.posX,
|
||||
posY: this.posY,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
ratio: this.ratio,
|
||||
scrollX: this.scrollX,
|
||||
scrollY: this.scrollY,
|
||||
scrollXH: this.scrollXH,
|
||||
scrollYW: this.scrollYW,
|
||||
cutList: [
|
||||
{
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
this.ws.createCtrl(params);
|
||||
this.ws.on('createCtrlResult', (res) => {
|
||||
console.info('插件返回信息', res);
|
||||
});
|
||||
},
|
||||
login() { // 调用登录接口
|
||||
this.ws.detectConnectQt().then(res => {
|
||||
if (res) { // 连接客户端成功
|
||||
this.ws.login({
|
||||
loginIp: _global.config.loginInfo.loginIp,
|
||||
loginPort: _global.config.loginInfo.loginPort,
|
||||
userName: _global.config.loginInfo.userName,
|
||||
userPwd: _global.config.loginInfo.userPwd,
|
||||
https: 1
|
||||
});
|
||||
// this.$Message.info('登录中...');
|
||||
this.ws.on('loginState', (res) => {
|
||||
this.isLogin = res;
|
||||
if (res) {
|
||||
this.$Message.success('登录成功');
|
||||
// this.activePanel = 'key2';
|
||||
} else {
|
||||
this.$Message.info('登录失败');
|
||||
}
|
||||
});
|
||||
} else { // 连接客户端失败
|
||||
// this.$Message.info('请重新安装客户端');
|
||||
this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
|
||||
confirmButtonText: '下载',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const agent = this.getPCNum();
|
||||
if (agent === 32) {
|
||||
// 64位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
|
||||
} else {
|
||||
// 32位操作系统
|
||||
this.downloadFile(_global.config.loginInfo.name_64, _global.config.loginInfo.url_64);
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
downloadFile(name, url) {
|
||||
const alink = document.createElement('a');
|
||||
alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
|
||||
alink.href = url;// 创建 url地址
|
||||
alink.click(); // 自动点击
|
||||
},
|
||||
getPCNum() {
|
||||
const agent = navigator.userAgent.toLowerCase();
|
||||
if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
|
||||
return 32;
|
||||
}
|
||||
if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
|
||||
return 64;
|
||||
}
|
||||
},
|
||||
setVisible() {
|
||||
// 调用设置控件显隐接口
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
const params = [
|
||||
{
|
||||
ctrlCode: this.ctrl,
|
||||
visible: !this.ws.ctrls.find((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i;
|
||||
}
|
||||
}).visible,
|
||||
},
|
||||
];
|
||||
this.ws.setCtrlVisible(params);
|
||||
},
|
||||
realTimeVideo() {
|
||||
// // 调用控件实时播放接口
|
||||
// if (!this.isLogin) {
|
||||
// console.log("正在登陆客户端，请稍等......");
|
||||
// // this.$Message.info("正在登陆客户端，请稍等......");
|
||||
// return false;
|
||||
// }
|
||||
// this.displayMode = 1;
|
||||
// if (this.ws.ctrls.length === 0) {
|
||||
// console.log("请先创建控件！");
|
||||
// // this.$Message.info("请先创建控件！");
|
||||
// }
|
||||
// const params = {
|
||||
// ctrlCode: this.ctrl,
|
||||
// channelIds: [this.channelId],
|
||||
// };
|
||||
// this.ws.openCtrlPreview(params);
|
||||
console.log('播放', this.channelId);
|
||||
if (!this.isLogin) {
|
||||
// this.$Message.info('正在登陆客户端，请稍等......');
|
||||
// return false;
|
||||
this.login();
|
||||
}
|
||||
// const params = [this.channelId];
|
||||
console.log('播放', this.channelId);
|
||||
this.ws.openVideo(this.channelId);
|
||||
},
|
||||
destroy() {
|
||||
// 调用销毁控件接口
|
||||
if (!this.isLogin) {
|
||||
// this.login();
|
||||
// this.$Message.info("正在登陆客户端，请稍等......");
|
||||
return false;
|
||||
}
|
||||
console.log('销毁插件', this.ws.ctrls);
|
||||
const ctrls = this.ws.ctrls.map((i) => {
|
||||
if (i.ctrlCode === this.ctrl) {
|
||||
return i.ctrlCode;
|
||||
}
|
||||
});
|
||||
console.log('销毁的插件名称', ctrls);
|
||||
this.ws.destroyCtrl(ctrls);
|
||||
},
|
||||
},
|
||||
// beforeDestroyed() {
|
||||
// this.destroy()
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
<template>
|
||||
<div class="pop-box">
|
||||
<div class="title-bg"></div>
|
||||
<div class="title">
|
||||
<span>{{ feature.data.address || feature.data.waterPointName || "" }}</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
所属区市: {{ feature.data.ssqy || "" }}
|
||||
</div>
|
||||
<div>
|
||||
积水级别:
|
||||
</div>
|
||||
<div>
|
||||
液位:
|
||||
</div>
|
||||
<!-- <div class="site-address">{{ feature.data.sgwz || "" }}</div> -->
|
||||
<div class="site-content">
|
||||
<div class="site-content-right">
|
||||
<div
|
||||
class="images"
|
||||
v-viewer="{movable: false}"
|
||||
style="
|
||||
width: 280px;
|
||||
height: 158px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
<img @click="show" style="width:100%;height:100%;" :src="`http://15.72.183.90:7004`+feature.data.videoCapture||''" alt="">
|
||||
</div>
|
||||
<div class="video-table">
|
||||
<h4>周边监控</h4>
|
||||
<el-table
|
||||
:data="cameraData"
|
||||
@row-click="openVideo"
|
||||
:cell-style="{
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
'background-color': '#18304c',
|
||||
borderColor: '#325d94'
|
||||
}"
|
||||
:header-cell-style="{
|
||||
color: '#1ffefd',
|
||||
borderColor: '#325d94',
|
||||
'background-color': '#2b4b7a',
|
||||
}"
|
||||
>
|
||||
<el-table-column align="center" width="64" label="序号" type="index" style="text-align: center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
描述:
|
||||
</div>
|
||||
<div>
|
||||
更新时间: {{ feature.data.updatedDate || "" }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from "@/views/layout/bus";
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { directive as viewer } from "v-viewer"
|
||||
import * as echarts from 'echarts'
|
||||
import {selectWeekPmAndNoice,selectMonthPmAndNoice} from '@/api/construction/index.js'
|
||||
import { selectCameraByName } from '@/api/waterPoints'
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
feature: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
selectCameraByName({ waterPointName: this.feature.data.waterPointName }).then((res) => {
|
||||
this.feature.data.channelCode = res.data.data[0].channelCode
|
||||
this.feature.data.channelName = res.data.data[0].channelName
|
||||
this.feature.data.ssqy = res.data.data[0].ssqy
|
||||
this.feature.data.videoCapture = res.data.data[0].videoCapture
|
||||
console.log(this.feature);
|
||||
this.cameraData.push({
|
||||
cameraName: this.feature.data.channelName,
|
||||
channelCode: this.feature.data.channelCode
|
||||
})
|
||||
})
|
||||
|
||||
selectWeekPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
selectMonthPmAndNoice({buildLicense:this.feature.data.buildLicense}).then((res) => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterButton:{
|
||||
typeSelect:['近7天','近30天',],
|
||||
typeSelectActive:'近7天',
|
||||
},
|
||||
cameraData: []
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// particularsClick(data){
|
||||
// console.log(data)
|
||||
// bus.$emit("mainClick", data);
|
||||
// },
|
||||
|
||||
typeSelect(item) {
|
||||
this.filterButton.typeSelectActive = item
|
||||
},
|
||||
|
||||
show () {
|
||||
const viewer = this.$el.querySelector('.images').$viewer
|
||||
viewer.show()
|
||||
},
|
||||
|
||||
openVideo(row){
|
||||
console.log(row)
|
||||
bus.$emit('openCurrentVideoWaterPoint',row.channelCode)
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
viewer: viewer({
|
||||
debug: true,
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .leaflet-popup {
|
||||
// width: auto !important;
|
||||
// }
|
||||
.water-point-pop {
|
||||
.leaflet-popup-content-wrapper {
|
||||
box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: .4);
|
||||
background: rgba(24,51,76,.95);
|
||||
border: 1px solid rgba(50,227,235,.95);
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
width: 634px !important;
|
||||
height: 400px;
|
||||
padding: 12px 16px;
|
||||
.pop-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
opacity: .4;
|
||||
background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
|
||||
}
|
||||
|
||||
.title{
|
||||
color: #1ffefd;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0494ff;
|
||||
color: #1ffefd;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-address {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.site-content {
|
||||
|
||||
.site-content-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// width: 280px;
|
||||
.images {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.video-table {
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table{
|
||||
margin-top: 8px;
|
||||
border: 1px solid #325d94;
|
||||
.el-table__body-wrapper{
|
||||
height: 90px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
}
|
||||
th,td {
|
||||
border-right: 1px solid #325d94;
|
||||
}
|
||||
}
|
||||
.el-table::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
color: #3afefc !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='scss' scoped>
|
||||
.particulars {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.List-Details-pop {
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
|
||||
.topContent {
|
||||
background: #000;
|
||||
padding: 14px;
|
||||
width: 400px;
|
||||
}
|
||||
.content {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
b {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
|
||||
<header>
|
||||
<div class="title">青岛市积水点地图</div>
|
||||
<div class="title">青岛市易积水点地图</div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
|
|
@ -26,20 +26,20 @@
|
|||
>
|
||||
<template slot-scope="{ item }">
|
||||
<div style="margin-bottom: -10px" class="name">
|
||||
{{ item.text || '' }}
|
||||
{{ item.text || "" }}
|
||||
</div>
|
||||
<span style="font-size: 10px; color: #afbcc5">{{
|
||||
item.detail.address || ''
|
||||
item.detail.address || ""
|
||||
}}</span>
|
||||
</template>
|
||||
<!-- <template slot="append">搜索</template> -->
|
||||
</el-autocomplete>
|
||||
</div>
|
||||
|
||||
<div class="eventNum">
|
||||
<!-- <div class="eventNum">
|
||||
累计事件数量
|
||||
<p><span>1236</span>件</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 事件感知 -->
|
||||
<div class="complaintContent">
|
||||
|
|
@ -47,17 +47,17 @@
|
|||
</div>
|
||||
|
||||
<!-- 视频标签、列表 -->
|
||||
<div class="videoList">
|
||||
<!-- <div class="videoList">
|
||||
<video-list ref="videoListRef"></video-list>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 工地列表 -->
|
||||
<div class="siteList">
|
||||
<!-- <div class="siteList">
|
||||
<site-list></site-list>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 事件多选 -->
|
||||
<div class="eventSelection">
|
||||
<!-- <div class="eventSelection">
|
||||
<el-checkbox-group v-model="eventCheckList">
|
||||
<el-checkbox label="影响车辆(>30cm)"></el-checkbox>
|
||||
<el-checkbox label="影响行人(<30cm)"></el-checkbox>
|
||||
|
|
@ -66,22 +66,22 @@
|
|||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
<i class="eventSelectionIcon"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<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-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<video-play
|
||||
v-if="openVideo"
|
||||
:key="channelCode"
|
||||
:channel-id="channelCode"
|
||||
></video-play>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -95,10 +95,8 @@ import complaintEvent from './components/ComplaintEvent'
|
|||
import VideoList from './components/VideoList'
|
||||
import SiteList from './components/SiteList'
|
||||
import { selectByJdWd } from '@/api/construction/index'
|
||||
import {
|
||||
createSiteListPop,
|
||||
createCameraDetailsPop
|
||||
} from '@/supermap/createMarkerPopup'
|
||||
import { createSiteListPop, createCameraDetailsPop,createWaterPointPop } from '@/supermap/createMarkerPopup'
|
||||
import VideoPlay from './components/VideoPlay'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
|
@ -108,16 +106,21 @@ export default {
|
|||
|
||||
state: '',
|
||||
constructionSiteData: [],
|
||||
changeLayerBtnList: ['视频监控', '积水点'],
|
||||
// changeLayerBtnList: ['视频监控', '易积水点'],
|
||||
changeLayerBtnList: ['易积水点'],
|
||||
changeLayerBtnGroup: [],
|
||||
eventCheckList: []
|
||||
eventCheckList: [],
|
||||
openVideo: false,
|
||||
channelCode:[]
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TiledMap,
|
||||
complaintEvent,
|
||||
VideoList,
|
||||
SiteList
|
||||
SiteList,
|
||||
VideoPlay
|
||||
},
|
||||
created () {},
|
||||
mounted () {
|
||||
|
|
@ -127,23 +130,15 @@ export default {
|
|||
this.hiMapFun
|
||||
)
|
||||
|
||||
// 根据经纬度查询半径内所有的工地
|
||||
bus.$off('openCauseAnalysis')
|
||||
bus.$on('openCauseAnalysis', (row) => {
|
||||
// this.timeRegion = data.data.dt;
|
||||
// this.hiMapFun.removerPolygon();
|
||||
this.hiMapFun.removeLayerByLayerName('constructionSite')
|
||||
// debugger
|
||||
// this.circle(latLng);
|
||||
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
|
||||
// this.WithinRadiusSite(latLng);
|
||||
const dataEvent = [
|
||||
{
|
||||
const dataEvent = [{
|
||||
latLng: { lat: row.wd, lng: row.jd },
|
||||
data: row,
|
||||
type: 'site'
|
||||
}
|
||||
]
|
||||
}]
|
||||
this.hiMapFun.addPointsToMap(
|
||||
dataEvent,
|
||||
'construction.png',
|
||||
|
|
@ -152,9 +147,9 @@ export default {
|
|||
)
|
||||
})
|
||||
|
||||
bus.$off('roadOnMap')
|
||||
bus.$on('roadOnMap', (roadData) => {
|
||||
this.roadOnMap(roadData)
|
||||
bus.$off('waterPoint')
|
||||
bus.$on('waterPoint', (waterPointData) => {
|
||||
this.waterPointOnMap(waterPointData)
|
||||
})
|
||||
|
||||
bus.$off('removeCameraLayer')
|
||||
|
|
@ -166,6 +161,30 @@ export default {
|
|||
bus.$on('CameraSingleDataOnMap', (labelName, data) => {
|
||||
this.addResourceTomap(labelName, data)
|
||||
})
|
||||
|
||||
bus.$off('openWaterPointDialog')
|
||||
bus.$on('openWaterPointDialog', (item) => {
|
||||
this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude },16)
|
||||
// this.WithinRadiusSite(latLng);
|
||||
// const dataEvent = [{
|
||||
// latLng: { lat: item.latitude, lng: item.longitude },
|
||||
// data: item,
|
||||
// type: 'waterPoint'
|
||||
// }]
|
||||
// this.hiMapFun.addPointsToMap(
|
||||
// dataEvent,
|
||||
// 'waterPoint.png',
|
||||
// 'waterPoint',
|
||||
// createWaterPointPop
|
||||
// )
|
||||
})
|
||||
|
||||
bus.$off('openCurrentVideoWaterPoint')
|
||||
bus.$on('openCurrentVideoWaterPoint',channelCode => {
|
||||
this.openVideo = true;
|
||||
this.channelCode.unshift(channelCode)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync (queryString, cb) {
|
||||
|
|
@ -273,7 +292,7 @@ export default {
|
|||
case '视频监控':
|
||||
// this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||
break
|
||||
case '积水点':
|
||||
case '易积水点':
|
||||
break
|
||||
default:
|
||||
break
|
||||
|
|
@ -283,7 +302,7 @@ export default {
|
|||
case '视频监控':
|
||||
// this.hiMapFun.removeLayerByLayerName('全部')
|
||||
break
|
||||
case '积水点':
|
||||
case '易积水点':
|
||||
break
|
||||
default:
|
||||
break
|
||||
|
|
@ -303,12 +322,22 @@ export default {
|
|||
})
|
||||
}
|
||||
})
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
dataEvent,
|
||||
'videoSurveillance.png',
|
||||
type,
|
||||
createCameraDetailsPop
|
||||
)
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
|
||||
},
|
||||
|
||||
waterPointOnMap (data) {
|
||||
const dataEvent = []
|
||||
data.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.longitude) == -1) {
|
||||
dataEvent.push({
|
||||
latLng: { lat: Number(item.latitude), lng: Number(item.longitude) },
|
||||
data: item,
|
||||
type: 'waterPoint'
|
||||
})
|
||||
}
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(dataEvent, 'waterPoint.png', 'waterPoint', createWaterPointPop)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {}
|
||||
|
|
@ -319,7 +348,7 @@ export default {
|
|||
|
||||
@font-face {
|
||||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
src: url('../../../assets/construction/TTZhiHeiJ-W5.ttf');
|
||||
src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
|
||||
}
|
||||
.map-box {
|
||||
width: 100%;
|
||||
|
|
@ -338,7 +367,7 @@ export default {
|
|||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 166px;
|
||||
background: url('~@/assets/construction/title.png') no-repeat;
|
||||
background: url("~@/assets/construction/title.png") no-repeat;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 46px;
|
||||
|
|
@ -350,8 +379,8 @@ export default {
|
|||
font-family: 'Tensentype-ZhiHeiJ-W5';
|
||||
}
|
||||
.title::before {
|
||||
content: '青岛市积水点地图';
|
||||
text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
|
||||
content: '青岛市易积水点地图';
|
||||
text-shadow: 0px 3px 10px rgba(0,0,0,.9);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -362,20 +391,20 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 496px;
|
||||
top: 90px;
|
||||
border: 1px solid rgba(31, 254, 253, 0.9);
|
||||
border: 1px solid rgba(31,254,253,.9);
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
background: rgba($color: #203b5d, $alpha: 0.8);
|
||||
background: rgba($color: #203b5d, $alpha: .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, 0.9);
|
||||
color: rgba(31,254,253,.9);
|
||||
}
|
||||
::v-deep .el-input-group__append {
|
||||
width: 54px;
|
||||
|
|
@ -394,7 +423,7 @@ export default {
|
|||
z-index: -1 !important;
|
||||
width: 226px !important;
|
||||
left: 0px !important;
|
||||
background: rgba(32, 59, 93, 0.8);
|
||||
background: rgba(32,59,93,.8);
|
||||
border: 1px solid #1ffefd;
|
||||
li {
|
||||
color: #fff;
|
||||
|
|
@ -410,9 +439,9 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 10px;
|
||||
top: 90px;
|
||||
height: 908px;
|
||||
height:908px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
}
|
||||
|
||||
.eventNum {
|
||||
|
|
@ -433,7 +462,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;
|
||||
|
|
@ -449,7 +478,7 @@ export default {
|
|||
top: 92px;
|
||||
width: 398px;
|
||||
// height:460px;
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
}
|
||||
|
||||
.siteList {
|
||||
|
|
@ -459,13 +488,13 @@ export default {
|
|||
top: 660px;
|
||||
width: 398px;
|
||||
// height:500px;
|
||||
background: rgba($color: #05213b, $alpha: 0.85);
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
}
|
||||
|
||||
.changeLayer {
|
||||
width: 332px;
|
||||
height: 67px;
|
||||
background: rgba(7, 26, 44, 0.8);
|
||||
background: rgba(7,26,44,.8);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
|
|
@ -476,7 +505,7 @@ export default {
|
|||
width: 96px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: rgba(255,255,255,.6);
|
||||
text-align: center;
|
||||
line-height: 67px;
|
||||
}
|
||||
|
|
@ -487,16 +516,17 @@ export default {
|
|||
padding-left: 20px;
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
.el-checkbox-button__inner {
|
||||
.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;
|
||||
}
|
||||
|
|
@ -504,7 +534,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.eventSelection {
|
||||
.eventSelection{
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
background: rgba(7, 26, 44, 0.8);
|
||||
|
|
@ -515,16 +545,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 {
|
||||
::v-deep .el-checkbox{
|
||||
margin:0 15px;
|
||||
.el-checkbox__inner{
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.eventSelectionIcon {
|
||||
.eventSelectionIcon{
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -534,13 +564,13 @@ export default {
|
|||
left: 34.5px;
|
||||
top: 21px;
|
||||
}
|
||||
.eventSelectionIcon:nth-child(2) {
|
||||
.eventSelectionIcon:nth-child(2){
|
||||
background: #ffae2b;
|
||||
position: absolute;
|
||||
left: 34.5px;
|
||||
top: 42px;
|
||||
}
|
||||
.eventSelectionIcon:nth-child(3) {
|
||||
.eventSelectionIcon:nth-child(3){
|
||||
background: #31d779;
|
||||
position: absolute;
|
||||
left: 34.5px;
|
||||
|
|
@ -549,7 +579,7 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
<style lang='scss'>
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 8px;
|
||||
// background: rgba(255, 255, 255, 0.1);
|
||||
|
|
|
|||
Loading…
Reference in New Issue