|
|
@ -3,26 +3,24 @@ |
|
|
|
<div class="RoadNetworkFacilities"> |
|
|
|
<div class="header"> |
|
|
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" /> |
|
|
|
<!-- <Video class="video-stream" :pileNum="dialogData.stakeMark" /> --> |
|
|
|
</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" /> |
|
|
|
</ElTabPane> |
|
|
|
<ElTabPane label="测点历史数据"> |
|
|
|
<el-date-picker |
|
|
|
v-model="daterangeChangeTime" |
|
|
|
size="mini" |
|
|
|
style="width: 320px;float:right;margin-bottom: 10px;" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="daterange" |
|
|
|
range-separator="-" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
></el-date-picker> |
|
|
|
<ElTabPane label="测点历史数据" v-if="dialogData.facilityType === 9"> |
|
|
|
<el-date-picker v-model="daterangeChangeTime" size="mini" |
|
|
|
style="width: 320px;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" /> |
|
|
|
</ElTabPane> |
|
|
|
|
|
|
|
<ElTabPane :label="item" :key="'UPS_'+item" :name="'UPS_'+item" v-for="item in upsList" v-if="dialogData.facilityType === 1"> |
|
|
|
<Descriptions labelWidth="142px" :list="upsList" :data="upsData" style="gap: 12px" column="6" /> |
|
|
|
</ElTabPane> |
|
|
|
|
|
|
|
|
|
|
|
</ElTabs> |
|
|
|
</div> |
|
|
|
|
|
|
@ -67,18 +65,29 @@ export default { |
|
|
|
deviceVendors: "XXX厂家", |
|
|
|
}, |
|
|
|
formList: [], |
|
|
|
dateRange:[], |
|
|
|
daterangeChangeTime:[] |
|
|
|
dateRange: [], |
|
|
|
daterangeChangeTime: [], |
|
|
|
upsList:[], |
|
|
|
upsData:[], |
|
|
|
// 收费站增加UPS |
|
|
|
upsList:['SNMP'] |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
daterangeChangeTime: { |
|
|
|
handler(val) { |
|
|
|
this.dateRange = [moment(val[0]).valueOf(),moment(val[1]).valueOf()]; |
|
|
|
this.dateRange = [moment(val[0]).valueOf(), moment(val[1]).valueOf()]; |
|
|
|
|
|
|
|
this.bindListAsync(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
activeName:{ |
|
|
|
handler(val){ |
|
|
|
if(val.indexOf('UPS_') !== -1){ |
|
|
|
this.bindUPS(val.substr(4)) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
async created() { |
|
|
|
let dData = { ...this.dialogData }; |
|
|
@ -88,7 +97,7 @@ export default { |
|
|
|
if (dData.otherConfig) { |
|
|
|
let otherConfig = JSON.parse(dData.otherConfig); |
|
|
|
dData.latitude = otherConfig.dimension |
|
|
|
if(dData.direction){ |
|
|
|
if (dData.direction) { |
|
|
|
dData.direction = DirectionTypes[dData.direction] |
|
|
|
} |
|
|
|
let resPointList = await request({ |
|
|
@ -97,25 +106,46 @@ export default { |
|
|
|
}); |
|
|
|
if (resPointList.code != 200) return Message.error(resPointList?.msg); |
|
|
|
let pointList = {}; |
|
|
|
if(resPointList.data && resPointList.data.result && resPointList.data.result.length > 0){ |
|
|
|
if (resPointList.data && resPointList.data.result && resPointList.data.result.length > 0) { |
|
|
|
pointList = resPointList.data.result[0] |
|
|
|
} |
|
|
|
dData = { ...dData, ...otherConfig,...pointList } |
|
|
|
dData = { ...dData, ...otherConfig, ...pointList } |
|
|
|
//获取历史数据echart |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
this.data = dData; |
|
|
|
this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'),moment().endOf('months').format('YYYY-MM-DD')] |
|
|
|
this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'), moment().endOf('months').format('YYYY-MM-DD')] |
|
|
|
|
|
|
|
console.log('this.data', this.data) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async bindListAsync(){ |
|
|
|
bindUPS(id){ |
|
|
|
request({ |
|
|
|
url: `business/device/properties/latest/${id}`, |
|
|
|
method: "get" |
|
|
|
}).then(res=>{ |
|
|
|
let _list = []; |
|
|
|
let _data = {}; |
|
|
|
|
|
|
|
if (res.code != 200) return Message.error(res?.msg); |
|
|
|
res.data.forEach(e => { |
|
|
|
_list.push( { |
|
|
|
label: e.propertyName, |
|
|
|
key: e.propertyName, |
|
|
|
gridColumn: "3", |
|
|
|
}) |
|
|
|
_data[e.propertyName] = e.formatValue; |
|
|
|
}); |
|
|
|
this.upsList = _list; |
|
|
|
this.upsData = _data; |
|
|
|
}) |
|
|
|
}, |
|
|
|
async bindListAsync() { |
|
|
|
let res = await request({ |
|
|
|
url: `sideSlope/GetPointDataListAsync`, |
|
|
|
method: "get", |
|
|
|
params:{ |
|
|
|
params: { |
|
|
|
projCode: this.data.pro_code, |
|
|
|
unitCode: this.data.unit_code, |
|
|
|
meaPointNum: this.data.meaPointNum, |
|
|
@ -143,14 +173,12 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.LineChart { |
|
|
|
width: 450px !important; |
|
|
|
height: 160px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.RoadNetworkFacilities { |
|
|
|
width: 452px; |
|
|
|
color: #fff; |
|
|
@ -183,6 +211,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 260px; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
.el-tabs__content { |
|
|
|
flex: 1; |
|
|
|