hui
1 year ago
36 changed files with 1410 additions and 287 deletions
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,278 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="设备操作"> |
|||
<div class='DeviceControlDialog'> |
|||
|
|||
<ElTabs v-model="activeName" class="tabs"> |
|||
<ElTabPane label="一般模式" name="first"> |
|||
<Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList1" column="1" labelWidth="120px" /> |
|||
</ElTabPane> |
|||
<ElTabPane label="自定义模式" name="second"> |
|||
<Form class="form" ref="FormConfigRef" :formList="formList2" column="1" labelWidth="120px" /> |
|||
</ElTabPane> |
|||
</ElTabs> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false"> |
|||
取消 |
|||
</Button> |
|||
<Button @click.native="handleSubmit" :loading="submitting"> |
|||
确定 |
|||
</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import Form from '@screen/components/FormConfig'; |
|||
|
|||
import { delay } from "@screen/utils/common.js" |
|||
import request from "@/utils/request"; |
|||
|
|||
import { Message } from "element-ui"; |
|||
|
|||
|
|||
export default { |
|||
name: 'DeviceControlDialog', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Form |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: "update:value" |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
deviceId: String |
|||
}, |
|||
data() { |
|||
return { |
|||
submitting: false, |
|||
activeName: "first", |
|||
formData: {}, |
|||
formList1: [ |
|||
{ |
|||
label: "设备模式:", |
|||
key: "controlType", |
|||
type: "RadioGroup", |
|||
default: "00", |
|||
options: { |
|||
type: 'circle', |
|||
options: [ |
|||
{ |
|||
key: "00", |
|||
label: "常量", |
|||
}, |
|||
{ |
|||
key: "01", |
|||
label: "闪烁", |
|||
} |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "操作时长:", |
|||
key: "onWorkStatus", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
placeholder: "请选择", |
|||
} |
|||
}, |
|||
], |
|||
formList2: [ |
|||
{ |
|||
label: "设备模式:", |
|||
key: "controlType", |
|||
type: "RadioGroup", |
|||
default: "00", |
|||
options: { |
|||
type: 'circle', |
|||
options: [ |
|||
{ |
|||
key: "00", |
|||
label: "常量", |
|||
}, |
|||
{ |
|||
key: "01", |
|||
label: "闪烁", |
|||
} |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "线路选择:", |
|||
key: "onWorkStatus2", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
placeholder: "请选择", |
|||
} |
|||
}, |
|||
{ |
|||
label: "操作时长:", |
|||
key: "onWorkStatus", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
placeholder: "请选择", |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
modelVisible: { |
|||
immediate: true, |
|||
handler(bool) { |
|||
if (!bool) return; |
|||
|
|||
this.reDisplay(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
requestURL(functionId, options = {}) { |
|||
return new Promise((resolve, reject) => { |
|||
request.post(`business/device/functions/${this.deviceId}/${functionId}`, options) |
|||
.then((result) => { |
|||
if (result.code != 200) return reject(); |
|||
|
|||
resolve(result.data[0]); |
|||
}) |
|||
.catch((err) => { |
|||
reject(); |
|||
}); |
|||
}); |
|||
}, |
|||
reDisplay() { |
|||
this.requestURL(52) |
|||
.then(async (data) => { |
|||
await delay(0); |
|||
|
|||
const formData = this.$refs.FormConfigRef?.formData; |
|||
|
|||
formData.controlType = data.mode; |
|||
|
|||
switch (data.mode) { |
|||
case "00": |
|||
formData.onWorkStatus = data.onWorkStatus; |
|||
formData.inWorkStatus = data.inWorkStatus; |
|||
break; |
|||
case "01": |
|||
case "02": |
|||
await this.requestURL("3C") |
|||
.then((data2) => { |
|||
formData.onWorkStatus = data2.onWorkStatus; |
|||
formData.inWorkStatus = data2.inWorkStatus; |
|||
|
|||
if (data.mode === '01') |
|||
formData.displayTime = [data.startDisplay, data.endDisplay]; |
|||
}) |
|||
.catch(() => { }); |
|||
break; |
|||
} |
|||
|
|||
this.oldFormData = { ...formData }; |
|||
|
|||
}) |
|||
}, |
|||
handleSubmit() { |
|||
const result = {}, formData = this.$refs.FormConfigRef?.formData; |
|||
|
|||
result.mode = formData.controlType; |
|||
|
|||
delete result.controlType; |
|||
|
|||
if (result.mode === '01') { |
|||
if (!formData.displayTime?.length) return Message.error(`时间不能为空!`); |
|||
} |
|||
|
|||
if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`); |
|||
|
|||
if (["01", "02"].includes(result.mode)) { |
|||
if (["04", "00"].includes(formData.onWorkStatus)) return Message.error(`上行工作状态不能选择当前类型!`); |
|||
if (["04", "00"].includes(formData.inWorkStatus)) return Message.error(`下行工作状态不能选择当前类型!`); |
|||
} |
|||
|
|||
result.onWorkStatus = formData.onWorkStatus; |
|||
result.inWorkStatus = formData.inWorkStatus; |
|||
|
|||
this.submitting = true; |
|||
|
|||
// this.submitting = false; |
|||
// return; |
|||
|
|||
/** |
|||
* 接口 地址 |
|||
* |
|||
* https://www.showdoc.com.cn/2450725213006196/10877717880262686 |
|||
*/ |
|||
let promise = []; |
|||
|
|||
switch (result.mode) { |
|||
case "00": |
|||
promise.push(this.requestURL("51", result)) |
|||
break; |
|||
case "01": |
|||
case "02": |
|||
|
|||
const options = { mode: result.mode }; |
|||
|
|||
if (result.mode === '01') { |
|||
options.startDisplayTime = formData.displayTime[0]; |
|||
options.endDisplayTime = formData.displayTime[1]; |
|||
} |
|||
|
|||
promise.push( |
|||
this.requestURL("30", { |
|||
onWorkStatus: result.onWorkStatus, |
|||
inWorkStatus: result.inWorkStatus, |
|||
}), |
|||
this.requestURL("51", options), |
|||
) |
|||
break; |
|||
} |
|||
Promise.all(promise) |
|||
.then(() => { |
|||
this.modelVisible = false; |
|||
}) |
|||
.catch((err) => { |
|||
console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err); |
|||
Message.error(`设备操作失败!`); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DeviceControlDialog { |
|||
width: 450px; |
|||
height: 210px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<Dialog v-model="obverseVisible" title="疲劳唤醒弹窗"> |
|||
<div class="FatigueWakesUp"> |
|||
<Video class="video-stream" :pileNum="dialogData.stakeMark" /> |
|||
|
|||
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" /> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button @click.native="deviceControlVisible = true">设备操作</Button> |
|||
</template> |
|||
|
|||
<DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" /> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|||
import Video from "@screen/components/Video" |
|||
import DeviceControlDialog from "./components/DeviceControlDialog.vue" |
|||
|
|||
import request from "@/utils/request"; |
|||
import { dialogDelayVisible } from "./../mixin" |
|||
|
|||
// 疲劳唤醒弹窗 |
|||
export default { |
|||
name: 'FatigueWakesUp', |
|||
mixins: [dialogDelayVisible], |
|||
components: { |
|||
Dialog, |
|||
Descriptions, |
|||
Video, |
|||
DeviceControlDialog, |
|||
Button |
|||
}, |
|||
data() { |
|||
return { |
|||
deviceControlVisible: false, |
|||
data: { |
|||
deviceType: "行车诱导", |
|||
deviceStation: "k094+079", |
|||
roadName: "G35济泽高速", |
|||
direction: "1", |
|||
deviceState: "0", |
|||
deviceVendors: "XXX厂家", |
|||
}, |
|||
list: [ |
|||
{ |
|||
label: '设备名称', |
|||
key: "deviceName", |
|||
}, |
|||
{ |
|||
label: '设备桩号', |
|||
key: "stakeMark", |
|||
}, |
|||
{ |
|||
label: '道路名称', |
|||
key: "roadName", |
|||
}, |
|||
{ |
|||
label: '设备方向', |
|||
key: "direction", |
|||
enum: "CameraDirectionEnum" |
|||
}, |
|||
{ |
|||
label: '设备状态', |
|||
key: "deviceState", |
|||
enum: "DeviceTypeEnum" |
|||
}, |
|||
{ |
|||
label: '设备厂商', |
|||
key: "brand", |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
async created() { |
|||
this.data = { ...this.dialogData }; |
|||
|
|||
getProduct(this.dialogData.productId) |
|||
.then(data => { |
|||
this.dialogData.brand = data.brand; |
|||
}) |
|||
|
|||
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
|||
|
|||
if (roadInfo) this.data.roadName = roadInfo.roadName; |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.FatigueWakesUp { |
|||
width: 420px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 12px; |
|||
padding-bottom: 24px; |
|||
|
|||
.camera-video { |
|||
flex: 1.5; |
|||
} |
|||
|
|||
.tabs { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep { |
|||
.el-tabs__content { |
|||
flex: 1; |
|||
|
|||
.el-tab-pane { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 12px; |
|||
display: flex; |
|||
gap: 9px; |
|||
align-items: center; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
font-size: 16px; |
|||
padding: 6px 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const lineChartOption = { |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "日", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ["1", "5", "10", "15", "20", "25", "30"], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: 51, |
|||
top: 15, |
|||
bottom: 24, |
|||
right: 36, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
formatter: "{b}：{c}", |
|||
// formatter: function([axisData]) {
|
|||
// console.log(axisData)
|
|||
// let str = axisData.name + ' ' + axisData.data + '辆</br>';
|
|||
// // params.forEach(item => {
|
|||
// // if (item.seriesName === '供温' || item.seriesName === '回温') {
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
|
|||
// // } else if (item.seriesName === '压力值(Mpa)') {
|
|||
// // // 柱状图渐变时设置marker
|
|||
// // item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
|
|||
// // }
|
|||
// // });
|
|||
// return str;
|
|||
// }
|
|||
}, |
|||
yAxis: { |
|||
max: 100, |
|||
type: "value", |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value} %", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [0, 90, 65, 90, 45, 36, 27], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div class='chart LineChart' ref="LineChartRef" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { lineChartOption } from "./chart" |
|||
|
|||
export default { |
|||
name: 'LineChart', |
|||
mounted() { |
|||
const chartIns = echarts.init(this.$refs.LineChartRef); |
|||
chartIns.setOption(lineChartOption); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.LineChart { |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const lineChartOption = { |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "时", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22"], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
yAxis: { |
|||
max: 1, |
|||
name: "辆", |
|||
type: "value", |
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
// align: "right",
|
|||
fontSize: 15, |
|||
// padding: [0, -15, 0, 0],
|
|||
}, |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value}", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: 33, |
|||
top: 33, |
|||
bottom: 24, |
|||
right: 36, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
formatter: "{b}：{c}", |
|||
// formatter: function([axisData]) {
|
|||
// console.log(axisData)
|
|||
// let str = axisData.name + ' ' + axisData.data + '辆</br>';
|
|||
// // params.forEach(item => {
|
|||
// // if (item.seriesName === '供温' || item.seriesName === '回温') {
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
|
|||
// // } else if (item.seriesName === '压力值(Mpa)') {
|
|||
// // // 柱状图渐变时设置marker
|
|||
// // item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
|
|||
// // }
|
|||
// // });
|
|||
// return str;
|
|||
// }
|
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [0, 0.3, 0.6, 0.24, 0.15, 0.66, 0.9, 0, 0.36, 0.51, 0.72, 0.6, 0.3], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div class='chart LineChart' ref="LineChartRef" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { lineChartOption } from "./chart" |
|||
|
|||
export default { |
|||
name: 'LineChart', |
|||
mounted() { |
|||
const chartIns = echarts.init(this.$refs.LineChartRef); |
|||
chartIns.setOption(lineChartOption); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.LineChart { |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<Dialog v-model="obverseVisible" title="一类交调站弹窗"> |
|||
<Video class="video-stream" :pileNum="dialogData.stakeMark" /> |
|||
|
|||
<div class="Intermodulation"> |
|||
<ElTabs v-model="activeName" class="tabs"> |
|||
<ElTabPane label="基本信息" name="first"> |
|||
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
|||
</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'" /> |
|||
</div> |
|||
</ElTabPane> |
|||
<ElTabPane label="在线统计率" name="third"> |
|||
<LineChart v-if="activeName === 'third'" /> |
|||
</ElTabPane> |
|||
</ElTabs> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
import Video from "@screen/components/Video" |
|||
import LineChart from './components/LineChart/index.vue'; |
|||
import LineChartForTraffic from './components/LineChartForTraffic/index.vue'; |
|||
import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue'; |
|||
|
|||
import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|||
import { dialogDelayVisible } from "./../mixin" |
|||
import request from "@/utils/request"; |
|||
import { Message } from 'element-ui'; |
|||
import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue'; |
|||
|
|||
// 广播发布 |
|||
export default { |
|||
name: 'Intermodulation', |
|||
mixins: [dialogDelayVisible], |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Descriptions, |
|||
LineChart, |
|||
LineChartForTraffic, |
|||
Video, |
|||
Switcher, |
|||
RadioGroup |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: 'first', |
|||
releaseVisible: false, |
|||
secondLoading: true, |
|||
data: { |
|||
deviceName: "LH24", |
|||
roadName: "G35济泽高速", |
|||
stakeMark: "k094+079", |
|||
direction: "1", |
|||
organizationName: "山东高速济南发展公司", |
|||
brand: "XXX厂家", |
|||
deviceState: "0", |
|||
}, |
|||
|
|||
roadTypeList: [ |
|||
{ key: '1', label: '济南方向' }, |
|||
{ key: '3', label: '菏泽方向' }, |
|||
], |
|||
roadType: '1', |
|||
list: [ |
|||
{ |
|||
label: '设备名称', |
|||
key: "deviceName", |
|||
}, |
|||
{ |
|||
label: '设备桩号', |
|||
key: "stakeMark", |
|||
}, |
|||
{ |
|||
label: '道路名称', |
|||
key: "roadName", |
|||
}, |
|||
{ |
|||
label: '设备方向', |
|||
key: "direction", |
|||
enum: "CameraDirectionEnum" |
|||
}, |
|||
{ |
|||
label: '设备状态', |
|||
key: "deviceState", |
|||
enum: "DeviceTypeEnum" |
|||
}, |
|||
// { |
|||
// label: '设备厂商', |
|||
// key: "brand", |
|||
// }, |
|||
], |
|||
activeOption: { |
|||
active: { |
|||
text: "开" |
|||
}, |
|||
unActive: { |
|||
text: "关" |
|||
} |
|||
}, |
|||
devicesList: [] |
|||
} |
|||
}, |
|||
async created() { |
|||
// if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; |
|||
|
|||
this.data = { ...this.dialogData, roadName: null } |
|||
|
|||
console.log("%c [ dialogData ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", this.dialogData); |
|||
|
|||
// getProduct(this.dialogData.productId) |
|||
// .then(data => { |
|||
// this.dialogData.brand = data.brand; |
|||
// }) |
|||
|
|||
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
|||
|
|||
if (roadInfo) this.data.roadName = roadInfo.roadName; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
div.switcher { |
|||
font-size: 12px; |
|||
padding: 2px; |
|||
} |
|||
</style> |
|||
<style lang='scss' scoped> |
|||
.Intermodulation { |
|||
width: 510px; |
|||
height: 240px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.camera-video { |
|||
flex: 1.5; |
|||
} |
|||
|
|||
.tabs { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep { |
|||
.el-tabs__content { |
|||
flex: 1; |
|||
|
|||
.el-tab-pane { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-second { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
gap: 9px; |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 12px; |
|||
display: flex; |
|||
gap: 9px; |
|||
align-items: center; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
font-size: 16px; |
|||
padding: 6px 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="设备操作"> |
|||
<div class='DeviceControlDialog'> |
|||
<DeviceParams :dialogData="dialogData" /> |
|||
|
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import DeviceParams from "./DeviceParams.vue" |
|||
|
|||
export default { |
|||
name: 'DeviceControlDialog', |
|||
components: { |
|||
Dialog, |
|||
DeviceParams |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: "update:value" |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
dialogData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DeviceControlDialog { |
|||
width: 510px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
min-height: 360px; |
|||
|
|||
.tips { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div class='DeviceParams'> |
|||
<div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div> |
|||
<Descriptions :list="devicesList" style="gap: 18px;" column="5"> |
|||
<template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }"> |
|||
<span>{{ data.text }}</span> |
|||
<Switcher class="switcher" :disabled="disabled" :activeOption="activeOption" :value="data.state" |
|||
@change="(value) => handleSwitcherChange(value, data)" /> |
|||
</template> |
|||
</Descriptions> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue'; |
|||
|
|||
import request from "@/utils/request"; |
|||
import { Message } from 'element-ui'; |
|||
import { confirm } from "@screen/utils/common"; |
|||
|
|||
export default { |
|||
name: 'DeviceParams', |
|||
components: { |
|||
Descriptions, |
|||
Switcher |
|||
}, |
|||
props: { |
|||
dialogData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
disabled: Boolean |
|||
}, |
|||
data() { |
|||
return { |
|||
secondLoading: true, |
|||
devicesList: [], |
|||
activeOption: { |
|||
active: { |
|||
text: "开" |
|||
}, |
|||
unActive: { |
|||
text: "关" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
// https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc= |
|||
// 获取设备参数 |
|||
request({ |
|||
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}`, |
|||
method: "get", |
|||
params: {} |
|||
}) |
|||
.then(result => { |
|||
if (result.code != 200) return; |
|||
const [deviceInfo] = result.data; |
|||
|
|||
const typeMap = { |
|||
ac: '220v', |
|||
dc: '12v', |
|||
} |
|||
|
|||
for (const key in deviceInfo.formatValue) { |
|||
// electricity 电流 |
|||
// voltage 电压 |
|||
if (key.includes('electricity')) { |
|||
const args = key.match(/[a-z]+|[0-9]+$/g); |
|||
|
|||
const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_'); |
|||
this.devicesList.push( |
|||
{ |
|||
label: `支路${num} （${typeMap[type]}） 电压`, |
|||
key: `${prefix}_voltage_${num}`, |
|||
text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], |
|||
gridColumn: 3 |
|||
}, |
|||
{ |
|||
label: '电流', |
|||
key: `${prefix}_electricity_${num}`, |
|||
text: deviceInfo.formatValue[key], |
|||
gridColumn: 2, |
|||
state: deviceInfo.value[key] > 0 |
|||
} |
|||
); |
|||
} |
|||
} |
|||
this.devicesList.push( |
|||
{ |
|||
label: '风扇', |
|||
key: `fan_status`, |
|||
text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-', |
|||
gridColumn: 1 |
|||
}, |
|||
{ |
|||
label: '箱门', |
|||
key: `door_status`, |
|||
text: { 0: '关闭', 1: '打开' }[deviceInfo.formatValue['door_status']] || '-', |
|||
gridColumn: 1 |
|||
}, |
|||
{ |
|||
label: '温度', |
|||
key: `temperature`, |
|||
text: deviceInfo.formatValue['temperature'] ? `${deviceInfo.formatValue['temperature']} °C` : '-', |
|||
gridColumn: 1 |
|||
}, |
|||
{ |
|||
label: '湿度', |
|||
key: `humidity`, |
|||
text: deviceInfo.formatValue['humidity'] || '-', |
|||
gridColumn: 1 |
|||
}, |
|||
{ |
|||
label: '市电掉电', |
|||
key: `power_status`, |
|||
text: { 0: '正常', 1: '掉电' }[deviceInfo.formatValue['power_status']] || '-', |
|||
gridColumn: 2 |
|||
}, |
|||
) |
|||
// this.data = result.rows; |
|||
// this.total = result.total; |
|||
}) |
|||
.finally(() => { |
|||
this.secondLoading = false |
|||
}) |
|||
}, |
|||
methods: { |
|||
async handleSwitcherChange(value, data) { |
|||
data.state = value; |
|||
|
|||
const isContinue = await confirm({ message: "是否要删除该辖段信息?" }) |
|||
.catch(() => { |
|||
data.state = !value; |
|||
}); |
|||
|
|||
if (!isContinue) return; |
|||
|
|||
// https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc= |
|||
request({ |
|||
url: `/business/device/functions/${this.dialogData.iotDeviceId}/${102}`, |
|||
method: "POST", |
|||
data: { |
|||
deviceName: data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en", |
|||
// 开关：1=打开，0=关闭 |
|||
value: value ? 1 : 0 |
|||
} |
|||
}) |
|||
.then(result => { |
|||
if (result.code != 200) { |
|||
Message.error("操作失败"); |
|||
data.state = !value; |
|||
return; |
|||
}; |
|||
Message.success("操作成功"); |
|||
}) |
|||
.catch(() => { |
|||
data.state = !value; |
|||
Message.error("操作失败"); |
|||
}) |
|||
}, |
|||
getSlotKey(key) { |
|||
return key.includes('electricity') ? key : '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DeviceParams { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue