|
|
|
@ -2,56 +2,60 @@ |
|
|
|
<Dialog |
|
|
|
v-model="obverseVisible" |
|
|
|
:title="dialogData._itemData && dialogData._itemData.title" |
|
|
|
@update:close="camClose" |
|
|
|
:width="isCameraMap?'1300px':'500px'" top="10%"> |
|
|
|
:width="isCameraMap?'1300px':'500px'" |
|
|
|
top="10%" @update:close="camClose"> |
|
|
|
<div class="panelParent" style="display:flex;"> |
|
|
|
<div class="RoadNetworkFacilities"> |
|
|
|
<div class="header"> |
|
|
|
<Video :facilityType="dialogData.facilityType" ref="refVideo" class="video-stream" @nearload="bindNearLoad" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'" :showHeader="false" /> |
|
|
|
<Video ref="refVideo" :facilityType="dialogData.facilityType" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'" |
|
|
|
:showHeader="false" class="video-stream" |
|
|
|
@nearload="bindNearLoad"/> |
|
|
|
</div> |
|
|
|
<div class="SolarEnergy"> |
|
|
|
<ElTabs v-model="activeName" class="tabs"> |
|
|
|
<ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key"> |
|
|
|
<Descriptions :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" /> |
|
|
|
<Descriptions :data="data" :labelWidth="item.labelWidth" :list="item.list" column="6" style="gap: 12px"/> |
|
|
|
</ElTabPane> |
|
|
|
<ElTabPane label="边坡测点数据" v-if="dialogData.facilityType === 9"> |
|
|
|
<Table :data="bianpoData" height="200px" > |
|
|
|
<ElTableColumn label="项目编号" prop="pro_code" width="80" ></ElTableColumn> |
|
|
|
<ElTableColumn label="标段编号" prop="con_code" width="80" ></ElTableColumn> |
|
|
|
<ElTableColumn label="测点名称" prop="meaPointName" width="80" ></ElTableColumn> |
|
|
|
<ElTableColumn label="工程编号" prop="unit_code" ></ElTableColumn> |
|
|
|
<ElTableColumn label="测点编号" prop="meaPointNum" ></ElTableColumn> |
|
|
|
</Table> |
|
|
|
<ElTabPane v-if="dialogData.facilityType === 9" label="边坡测点数据"> |
|
|
|
<Table :data="bianpoData" height="200px"> |
|
|
|
<ElTableColumn label="项目编号" prop="pro_code" width="80"></ElTableColumn> |
|
|
|
<ElTableColumn label="标段编号" prop="con_code" width="80"></ElTableColumn> |
|
|
|
<ElTableColumn label="测点名称" prop="meaPointName" width="80"></ElTableColumn> |
|
|
|
<ElTableColumn label="工程编号" prop="unit_code"></ElTableColumn> |
|
|
|
<ElTableColumn label="测点编号" prop="meaPointNum"></ElTableColumn> |
|
|
|
</Table> |
|
|
|
</ElTabPane> |
|
|
|
<ElTabPane label="测点历史数据" v-if="dialogData.facilityType === 9"> |
|
|
|
<el-select v-model="bindpoSelecte" placeholder="" @change="bindListAsync" transfer="true" |
|
|
|
style="width: 240px;"> |
|
|
|
<el-option v-for="item in bianpoOptions" |
|
|
|
:key="item.key" :label="item.label" |
|
|
|
:value="item.key"> |
|
|
|
</el-option> |
|
|
|
<ElTabPane v-if="dialogData.facilityType === 9" label="测点历史数据"> |
|
|
|
<el-select v-model="bindpoSelecte" placeholder="" style="width: 240px;" transfer="true" |
|
|
|
@change="bindListAsync"> |
|
|
|
<el-option v-for="item in bianpoOptions" |
|
|
|
:key="item.key" :label="item.label" |
|
|
|
:value="item.key"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-date-picker v-model="daterangeChangeTime" size="mini" |
|
|
|
style="width: 190px;float:right;margin-bottom: 10px;" value-format="yyyy-MM-dd" type="daterange" |
|
|
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
|
|
|
<div class='chart LineChart' ref="chartRef" /> |
|
|
|
<el-date-picker v-model="daterangeChangeTime" end-placeholder="结束日期" |
|
|
|
range-separator="-" size="mini" |
|
|
|
start-placeholder="开始日期" |
|
|
|
style="width: 190px;float:right;margin-bottom: 10px;" type="daterange" value-format="yyyy-MM-dd"></el-date-picker> |
|
|
|
<div ref="chartRef" class='chart LineChart'/> |
|
|
|
</ElTabPane> |
|
|
|
<template v-if="dialogData.facilityType === 1"> |
|
|
|
<ElTabPane :label="'UPS'+(index+1)" :key="'UPS_'+item" :name="'UPS_'+item" v-for="(item,index) in upsList"> |
|
|
|
<Descriptions labelWidth="142px" :list="upsForm" :data="upsData" style="gap: 12px" column="6" /> |
|
|
|
<template v-if="dialogData.facilityType === 1"> |
|
|
|
<ElTabPane v-for="(item,index) in upsList" :key="'UPS_'+item" :label="'UPS'+(index+1)" |
|
|
|
:name="'UPS_'+item"> |
|
|
|
<Descriptions :data="upsData" :list="upsForm" column="6" labelWidth="142px" style="gap: 12px"/> |
|
|
|
</ElTabPane> |
|
|
|
</template> |
|
|
|
|
|
|
|
</ElTabs> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin-left:20px" v-if="isCameraMap"> |
|
|
|
<div v-if="isCameraMap" style="margin-left:20px"> |
|
|
|
<div :style="'background-image:url('+imgSrc+')'" class="cameraMap"> |
|
|
|
<img v-for="(item,index) of cameraMaps" :key="index" @click="showCamera(item)" |
|
|
|
:style="'left:'+item.left+'px;top:'+item.top+'px'" |
|
|
|
width="50px" height="50px" :src="item.status===0?item.iconUn:item.icon" /> |
|
|
|
<img v-for="(item,index) of cameraMaps" :key="index" :src="item.status===0?item.iconUn:item.icon" |
|
|
|
:style="'left:'+item.left+'px;top:'+item.top+'px'" |
|
|
|
height="50px" width="50px" @click="showCamera(item)"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Dialog> |
|
|
|
</template> |
|
|
|
@ -63,14 +67,15 @@ import Descriptions from "@screen/components/Descriptions.vue"; |
|
|
|
import Video from "@screen/components/VideoMulti"; |
|
|
|
// import Video from "@screen/components/Video"; |
|
|
|
import request from "@/utils/request"; |
|
|
|
import { dialogDelayVisible } from "./../mixin"; |
|
|
|
import { tabList } from './data' |
|
|
|
import { DirectionTypes } from "@screen/utils/enum.js" |
|
|
|
import {dialogDelayVisible} from "./../mixin"; |
|
|
|
import {tabList} from './data' |
|
|
|
import {DirectionTypes} from "@screen/utils/enum.js" |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import { chartOption } from "./chart" |
|
|
|
import {chartOption} from "./chart" |
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
import Table from "@screen/components/Table.vue"; |
|
|
|
|
|
|
|
const icona = require(`@screen/images/layerb/路测设备/摄像机_active.svg`);// childType==='1-2 高清网络枪机 |
|
|
|
const icona_f = require(`@screen/images/layerb/路测设备/摄像机_fault.svg`); |
|
|
|
const iconb = require(`@screen/images/deviceType/ballb_active.svg`); // childType==='1-2 高清网络球形摄像机 |
|
|
|
@ -96,9 +101,9 @@ export default { |
|
|
|
tabList, |
|
|
|
activeName: "first", |
|
|
|
deviceControlVisible: false, |
|
|
|
bianpoData:[], |
|
|
|
bianpoOptions:[], |
|
|
|
bindpoSelecte:"", |
|
|
|
bianpoData: [], |
|
|
|
bianpoOptions: [], |
|
|
|
bindpoSelecte: "", |
|
|
|
data: { |
|
|
|
deviceType: "", |
|
|
|
deviceStation: "", |
|
|
|
@ -110,21 +115,21 @@ export default { |
|
|
|
formList: [], |
|
|
|
dateRange: [], |
|
|
|
daterangeChangeTime: [], |
|
|
|
upsForm:[], |
|
|
|
upsData:{}, |
|
|
|
upsForm: [], |
|
|
|
upsData: {}, |
|
|
|
// 收费站增加UPS |
|
|
|
upsList:[], |
|
|
|
upsList: [], |
|
|
|
// 收费站 |
|
|
|
isCameraMap:false, |
|
|
|
imgSrc:'', |
|
|
|
cameraMaps:[], |
|
|
|
isCameraMap: false, |
|
|
|
imgSrc: '', |
|
|
|
cameraMaps: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
obverseVisible:{ |
|
|
|
handler(val){ |
|
|
|
if(val === false){ |
|
|
|
if(this.$refs.refVideo.closeContrl){ |
|
|
|
obverseVisible: { |
|
|
|
handler(val) { |
|
|
|
if (val === false) { |
|
|
|
if (this.$refs.refVideo.closeContrl) { |
|
|
|
this.$refs.refVideo.closeContrl() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -133,23 +138,23 @@ export default { |
|
|
|
|
|
|
|
daterangeChangeTime: { |
|
|
|
handler(val) { |
|
|
|
if(this.dialogData.facilityType === 9){ |
|
|
|
if (this.dialogData.facilityType === 9) { |
|
|
|
this.dateRange = [moment(val[0]).valueOf(), moment(val[1]).valueOf()]; |
|
|
|
this.bindListAsync(); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
activeName:{ |
|
|
|
handler(val){ |
|
|
|
if(val.indexOf('UPS_') !== -1){ |
|
|
|
activeName: { |
|
|
|
handler(val) { |
|
|
|
if (val.indexOf('UPS_') !== -1) { |
|
|
|
this.bindUPS(val.substr(4)) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
async created() { |
|
|
|
let dData = { ...this.dialogData }; |
|
|
|
let dData = {...this.dialogData}; |
|
|
|
this.formList = tabList[dData.facilityType] |
|
|
|
|
|
|
|
if (dData.facilityType) |
|
|
|
@ -159,7 +164,7 @@ export default { |
|
|
|
if (dData.direction) { |
|
|
|
dData.direction = DirectionTypes[dData.direction] |
|
|
|
} |
|
|
|
if(dData.facilityType === 9){ |
|
|
|
if (dData.facilityType === 9) { |
|
|
|
let resPointList = await request({ |
|
|
|
url: `sideSlope/GetMeasurePointList`, |
|
|
|
method: "get", |
|
|
|
@ -167,10 +172,10 @@ export default { |
|
|
|
if (resPointList.code != 200) return Message.error(resPointList?.msg); |
|
|
|
this.bianpoData = resPointList.data.result; |
|
|
|
let _options = []; |
|
|
|
for(let i of resPointList.data.result){ |
|
|
|
for (let i of resPointList.data.result) { |
|
|
|
_options.push({ |
|
|
|
key: i['pro_code']+'|'+i['unit_code']+'|'+i['meaPointNum'], |
|
|
|
label: i['meaPointName']+' '+i['meaPointNum'] |
|
|
|
key: i['pro_code'] + '|' + i['unit_code'] + '|' + i['meaPointNum'], |
|
|
|
label: i['meaPointName'] + ' ' + i['meaPointNum'] |
|
|
|
}) |
|
|
|
} |
|
|
|
console.log(_options) |
|
|
|
@ -184,65 +189,64 @@ export default { |
|
|
|
// if (resPointList.data && resPointList.data.result && resPointList.data.result.length > 0) { |
|
|
|
// pointList = resPointList.data.result[0] |
|
|
|
// } |
|
|
|
dData = { ...dData, ...otherConfig,} |
|
|
|
dData = {...dData, ...otherConfig,} |
|
|
|
this.isCameraMap = false; |
|
|
|
this.cameraMaps = []; |
|
|
|
if(dData.facilityType === 1){ |
|
|
|
if (dData.facilityType === 1) { |
|
|
|
// console.log('收费站单独处理图像') |
|
|
|
if(dData.facilityName === '大学城收费站'){ |
|
|
|
if (dData.facilityName === '大学城收费站') { |
|
|
|
this.imgSrc = require('@screen/images/shoufeiz/大学城收费站.jpg') |
|
|
|
this.cameraMaps = [ |
|
|
|
{icon:icona,iconUn:icona_f,left:50,top:50,status:0,iotDeviceId:'57954'}, |
|
|
|
{icon:iconb,iconUn:iconb_f,left:500,top:50,status:0,iotDeviceId:'57939'}, |
|
|
|
{icon:iconc,iconUn:iconc_f,left:100,top:200,status:0,iotDeviceId:'57941'}, |
|
|
|
{icon:iconc,iconUn:iconc_f,left:600,top:500,status:0,iotDeviceId:'111111'}, |
|
|
|
{icon:icone,iconUn:icone_f,left:200,top:400,status:0,iotDeviceId:'222222'}, |
|
|
|
{icon:icona,iconUn:icona_f,left:30,top:30,status:0,iotDeviceId:'57953'} |
|
|
|
{icon: icona, iconUn: icona_f, left: 50, top: 50, status: 0, iotDeviceId: '57954'}, |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 500, top: 50, status: 0, iotDeviceId: '57939'}, |
|
|
|
{icon: iconc, iconUn: iconc_f, left: 100, top: 200, status: 0, iotDeviceId: '57941'}, |
|
|
|
{icon: iconc, iconUn: iconc_f, left: 600, top: 500, status: 0, iotDeviceId: '111111'}, |
|
|
|
{icon: icone, iconUn: icone_f, left: 200, top: 400, status: 0, iotDeviceId: '222222'}, |
|
|
|
{icon: icona, iconUn: icona_f, left: 30, top: 30, status: 0, iotDeviceId: '57953'} |
|
|
|
] |
|
|
|
this.isCameraMap = true; |
|
|
|
} |
|
|
|
else if(dData.facilityName === '孝里收费站'){ |
|
|
|
} else if (dData.facilityName === '孝里收费站') { |
|
|
|
this.imgSrc = require('@screen/images/shoufeiz/孝里收费站.jpg') |
|
|
|
this.isCameraMap = true; |
|
|
|
} |
|
|
|
} |
|
|
|
this.upsList=otherConfig.UPSList||[] |
|
|
|
this.upsList = otherConfig.UPSList || [] |
|
|
|
} |
|
|
|
this.data = dData; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
bindNearLoad(e){ |
|
|
|
for(let i of this.cameraMaps){ |
|
|
|
if(e.indexOf(i.iotDeviceId) !== -1){ |
|
|
|
bindNearLoad(e) { |
|
|
|
for (let i of this.cameraMaps) { |
|
|
|
if (e.indexOf(i.iotDeviceId) !== -1) { |
|
|
|
i.status = 1; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
camClose(){ |
|
|
|
if(this.$refs.refVideo.closeContrl){ |
|
|
|
camClose() { |
|
|
|
if (this.$refs.refVideo.closeContrl) { |
|
|
|
this.$refs.refVideo.closeContrl() |
|
|
|
} |
|
|
|
this.upsList =[] |
|
|
|
this.upsList = [] |
|
|
|
}, |
|
|
|
showCamera(item){ |
|
|
|
if(item.status === 1){ |
|
|
|
showCamera(item) { |
|
|
|
if (item.status === 1) { |
|
|
|
this.$refs.refVideo.setCameraId(item.iotDeviceId) |
|
|
|
} else { |
|
|
|
this.$message.warning('设备离线') |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
bindUPS(id){ |
|
|
|
bindUPS(id) { |
|
|
|
request({ |
|
|
|
url: `business/device/properties/latest/${id}`, |
|
|
|
method: "get" |
|
|
|
}).then(res=>{ |
|
|
|
}).then(res => { |
|
|
|
let _list = []; |
|
|
|
let _data = {}; |
|
|
|
|
|
|
|
if (res.code != 200) return Message.error(res?.msg); |
|
|
|
res.data.forEach(e => { |
|
|
|
_list.push( { |
|
|
|
_list.push({ |
|
|
|
label: e.propertyName, |
|
|
|
key: e.propertyName, |
|
|
|
gridColumn: "3", |
|
|
|
@ -255,7 +259,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
async bindListAsync() { |
|
|
|
let aryParam = _.find(this.bianpoOptions,{key:this.bindpoSelecte}).key.split('|') |
|
|
|
let aryParam = _.find(this.bianpoOptions, {key: this.bindpoSelecte}).key.split('|') |
|
|
|
let res = await request({ |
|
|
|
url: `sideSlope/GetPointDataListAsync`, |
|
|
|
method: "get", |
|
|
|
@ -286,17 +290,39 @@ export default { |
|
|
|
} |
|
|
|
res.data.forEach(e => { |
|
|
|
cdata.push((moment(e.measureTime).format('YYYY-MM-DD'))) |
|
|
|
if(title === ''){ |
|
|
|
if (title === '') { |
|
|
|
title = enum_title[e.data[0].type] |
|
|
|
} |
|
|
|
cseries1.push(e.data[0].value) |
|
|
|
cseries2.push(e.data[0].cum) |
|
|
|
}); |
|
|
|
|
|
|
|
chartOption.xAxis.data = cdata; |
|
|
|
chartOption.yAxis[0].name =title+'日计' |
|
|
|
chartOption.yAxis[1].name =title+'累计' |
|
|
|
chartOption.series[0].name = title + '日计'; |
|
|
|
chartOption.series[1].name = title + '累计'; |
|
|
|
|
|
|
|
chartOption.series[0].data = cseries1; |
|
|
|
chartOption.series[1].data = cseries2; |
|
|
|
// 假设 chartOption 已经初始化 |
|
|
|
chartOption.tooltip = { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross' |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
console.log('Params:', params); // 调试信息 |
|
|
|
let tooltipText = `<div><b>${params[0].name}</b></div>`; // 显示日期 |
|
|
|
params.forEach(function (item) { |
|
|
|
console.log('Item:', item); // 调试信息 |
|
|
|
if (item.seriesName === (title + '日计')) { |
|
|
|
tooltipText += `<div>${item.seriesName}: ${item.value}</div>`; |
|
|
|
} else if (item.seriesName === (title + '累计')) { |
|
|
|
tooltipText += `<div>${item.seriesName}: ${item.value}</div>`; |
|
|
|
} |
|
|
|
}); |
|
|
|
return tooltipText; |
|
|
|
} |
|
|
|
}; |
|
|
|
const chartIns = echarts.init(this.$refs.chartRef); |
|
|
|
chartIns.setOption(chartOption); |
|
|
|
} |
|
|
|
@ -305,15 +331,21 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.el-table .cell { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.LineChart { |
|
|
|
width: 450px !important; |
|
|
|
height: 160px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.panelParent{ |
|
|
|
|
|
|
|
.panelParent { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
} |
|
|
|
|
|
|
|
.RoadNetworkFacilities { |
|
|
|
width: 452px; |
|
|
|
color: #fff; |
|
|
|
@ -336,7 +368,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
>div.video-stream { |
|
|
|
> div.video-stream { |
|
|
|
height: 286px; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -365,20 +397,21 @@ export default { |
|
|
|
align-items: center; |
|
|
|
justify-content: end; |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
font-size: 16px; |
|
|
|
padding: 6px 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cameraMap{ |
|
|
|
position:relative; |
|
|
|
width:800px; |
|
|
|
height:600px; |
|
|
|
.cameraMap { |
|
|
|
position: relative; |
|
|
|
width: 800px; |
|
|
|
height: 600px; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
img{ |
|
|
|
|
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
