|
|
|
@ -9,12 +9,10 @@ |
|
|
|
</ElTabPane> |
|
|
|
<ElTabPane label="设备参数" name="second"> |
|
|
|
<div class="content-second" style="height: 185px"> |
|
|
|
<RadioGroup v-model="roadType" :options="roadTypeList" /> |
|
|
|
<span>当前车流量: 999辆</span> |
|
|
|
<LineChartForTraffic |
|
|
|
style="flex: 1" |
|
|
|
v-if="activeName === 'second'" |
|
|
|
/> |
|
|
|
<RadioGroup v-model="roadType" :options="roadTypeList" @input="changeRadio" /> |
|
|
|
<span>当前车流量: {{ carNum }}辆</span> |
|
|
|
<LineChartForTraffic style="flex: 1" v-if="isShowCar && activeName === 'second'" :xData="xData" |
|
|
|
:yData="yData" /> |
|
|
|
</div> |
|
|
|
</ElTabPane> |
|
|
|
<ElTabPane label="在线率统计" name="third"> |
|
|
|
@ -45,6 +43,7 @@ import { dialogDelayVisible } from "./../mixin"; |
|
|
|
import request from "@/utils/request"; |
|
|
|
import { Message } from "element-ui"; |
|
|
|
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; |
|
|
|
import moment from 'moment/moment'; |
|
|
|
|
|
|
|
// 广播发布 |
|
|
|
export default { |
|
|
|
@ -74,10 +73,19 @@ export default { |
|
|
|
brand: "XXX厂家", |
|
|
|
deviceState: "0", |
|
|
|
}, |
|
|
|
|
|
|
|
carNum: 0, |
|
|
|
objectValue: { |
|
|
|
'1': 0, |
|
|
|
'3': 0 |
|
|
|
}, |
|
|
|
xData: [], |
|
|
|
yData: [], |
|
|
|
hzYData: [], |
|
|
|
jnYData: [], |
|
|
|
isShowCar: true, |
|
|
|
roadTypeList: [ |
|
|
|
{ key: "1", label: "济南方向" }, |
|
|
|
{ key: "3", label: "菏泽方向" }, |
|
|
|
{ key: "1", label: "菏泽方向" }, |
|
|
|
{ key: "3", label: "济南方向" }, |
|
|
|
], |
|
|
|
roadType: "1", |
|
|
|
list: [ |
|
|
|
@ -138,7 +146,51 @@ export default { |
|
|
|
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
|
|
|
|
|
|
|
if (roadInfo) this.data.roadName = roadInfo.roadName; |
|
|
|
|
|
|
|
if (this.dialogData.iotDeviceId) { |
|
|
|
this.getPropertiesHistory(this.dialogData.iotDeviceId); |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
changeRadio(value) { |
|
|
|
this.carNum = this.objectValue[value + '']; |
|
|
|
this.isShowCar = false; |
|
|
|
if (value == 3) { |
|
|
|
this.yData = this.jnYData; |
|
|
|
} else { |
|
|
|
this.yData = this.hzYData; |
|
|
|
} |
|
|
|
console.log('xdata', this.xData); |
|
|
|
console.log('ydata', this.hzYData); |
|
|
|
console.log('rdata', this.jnYData); |
|
|
|
setTimeout(() => { |
|
|
|
this.isShowCar = true; |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
getPropertiesHistory(deviceId) { |
|
|
|
this.xData = []; |
|
|
|
this.yData = []; |
|
|
|
this.hzYData = []; |
|
|
|
this.jnYData = []; |
|
|
|
|
|
|
|
this.isShowCar = false; |
|
|
|
request({ |
|
|
|
url: `/business/device/properties/history/day/${deviceId}/01`, |
|
|
|
method: "get", |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) return Message.error(result?.msg); |
|
|
|
this.objectValue = result.data[0]; |
|
|
|
this.carNum = result.data[0]['1']; |
|
|
|
result.data.forEach(it => { |
|
|
|
this.xData.push(moment(it.timestamp).format("HH:mm")); |
|
|
|
this.hzYData.push(it['1']); |
|
|
|
this.jnYData.push(it['3']); |
|
|
|
this.yData = this.hzYData; |
|
|
|
}) |
|
|
|
this.isShowCar = true; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -191,7 +243,7 @@ div.switcher { |
|
|
|
align-items: center; |
|
|
|
justify-content: end; |
|
|
|
|
|
|
|
> div { |
|
|
|
>div { |
|
|
|
font-size: 16px; |
|
|
|
padding: 6px 12px; |
|
|
|
} |
|
|
|
|
qingzhengli
11 months ago