|
@ -3,26 +3,24 @@ |
|
|
<div class="RoadNetworkFacilities"> |
|
|
<div class="RoadNetworkFacilities"> |
|
|
<div class="header"> |
|
|
<div class="header"> |
|
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" /> |
|
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" /> |
|
|
<!-- <Video class="video-stream" :pileNum="dialogData.stakeMark" /> --> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="SolarEnergy"> |
|
|
<div class="SolarEnergy"> |
|
|
<ElTabs v-model="activeName" class="tabs"> |
|
|
<ElTabs v-model="activeName" class="tabs"> |
|
|
<ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key"> |
|
|
<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 :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" /> |
|
|
</ElTabPane> |
|
|
</ElTabPane> |
|
|
<ElTabPane label="测点历史数据"> |
|
|
<ElTabPane label="测点历史数据" v-if="dialogData.facilityType === 9"> |
|
|
<el-date-picker |
|
|
<el-date-picker v-model="daterangeChangeTime" size="mini" |
|
|
v-model="daterangeChangeTime" |
|
|
style="width: 320px;float:right;margin-bottom: 10px;" value-format="yyyy-MM-dd" type="daterange" |
|
|
size="mini" |
|
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
|
|
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" /> |
|
|
<div class='chart LineChart' ref="chartRef" /> |
|
|
</ElTabPane> |
|
|
</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> |
|
|
</ElTabs> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
@ -68,7 +66,11 @@ export default { |
|
|
}, |
|
|
}, |
|
|
formList: [], |
|
|
formList: [], |
|
|
dateRange: [], |
|
|
dateRange: [], |
|
|
daterangeChangeTime:[] |
|
|
daterangeChangeTime: [], |
|
|
|
|
|
upsList:[], |
|
|
|
|
|
upsData:[], |
|
|
|
|
|
// 收费站增加UPS |
|
|
|
|
|
upsList:['SNMP'] |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
@ -79,6 +81,13 @@ export default { |
|
|
this.bindListAsync(); |
|
|
this.bindListAsync(); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
activeName:{ |
|
|
|
|
|
handler(val){ |
|
|
|
|
|
if(val.indexOf('UPS_') !== -1){ |
|
|
|
|
|
this.bindUPS(val.substr(4)) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
async created() { |
|
|
async created() { |
|
|
let dData = { ...this.dialogData }; |
|
|
let dData = { ...this.dialogData }; |
|
@ -111,6 +120,27 @@ export default { |
|
|
console.log('this.data', this.data) |
|
|
console.log('this.data', this.data) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
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() { |
|
|
async bindListAsync() { |
|
|
let res = await request({ |
|
|
let res = await request({ |
|
|
url: `sideSlope/GetPointDataListAsync`, |
|
|
url: `sideSlope/GetPointDataListAsync`, |
|
@ -143,14 +173,12 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.LineChart { |
|
|
.LineChart { |
|
|
width: 450px !important; |
|
|
width: 450px !important; |
|
|
height: 160px; |
|
|
height: 160px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.RoadNetworkFacilities { |
|
|
.RoadNetworkFacilities { |
|
|
width: 452px; |
|
|
width: 452px; |
|
|
color: #fff; |
|
|
color: #fff; |
|
@ -183,6 +211,7 @@ export default { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
height: 260px; |
|
|
height: 260px; |
|
|
|
|
|
|
|
|
::v-deep { |
|
|
::v-deep { |
|
|
.el-tabs__content { |
|
|
.el-tabs__content { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|