28 changed files with 4342 additions and 32 deletions
@ -0,0 +1,199 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="语音广播" width="470px" style="z-index:3000"> |
||||
|
<Video class="video-stream" :camId="camId" img="语音广播" /> |
||||
|
|
||||
|
<div class="Broadcast"> |
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px"> |
||||
|
</Descriptions> |
||||
|
</ElTabPane> |
||||
|
<!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> --> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<Button @click.native="releaseVisible = true" v-hasPermi="['business:home:broadcast']">广播发布</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<BroadcastReleases v-model="releaseVisible" :pileNum="dialogData.stakeMark" :otherConfig="dialogData.otherConfig" /> |
||||
|
</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 BroadcastReleases from "../Dialogs/Broadcast/components/BroadcastReleases.vue"; |
||||
|
import Video from "@screen/components/Video"; |
||||
|
import LineChart from "../LineChart/index.vue"; |
||||
|
|
||||
|
import { DeviceTypeEnum } from "@screen/utils/enum.js"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getOrganizationName, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
|
||||
|
// 广播发布 |
||||
|
export default { |
||||
|
name: "Broadcast", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
BroadcastReleases, |
||||
|
Video, |
||||
|
LineChart, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
DeviceTypeEnum, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "所属方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
// { |
||||
|
// label: "所属机构", |
||||
|
// key: "organizationName", |
||||
|
// }, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
|
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId).then((data) => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}); |
||||
|
} |
||||
|
if(this.dialogData.iotDeviceId!=null){ |
||||
|
getOrganizationName(this.dialogData.iotDeviceId).then((data) => { |
||||
|
this.dialogData.organizationName = data?.organizationName; |
||||
|
}); |
||||
|
} |
||||
|
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData(){}, |
||||
|
handleClickTabs() { }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.Broadcast { |
||||
|
width: 420px; |
||||
|
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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,271 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" :title="dialogData.deviceName" @update:close="visibleClose" |
||||
|
width="450px" style="z-index:3000"> |
||||
|
<div class="Camera"> |
||||
|
<Video class="video-stream" :camId="dialogData.iotDeviceId" :img="AENUM[dialogData.childType]" /> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px"> |
||||
|
<template #content-deviceName > |
||||
|
<span>{{ dialogData.deviceName || "-" }}</span> |
||||
|
<img |
||||
|
@click="controlDialogVisible = true" |
||||
|
v-if="check(['business:home:camera']) && |
||||
|
[0, '0'].includes( |
||||
|
dialogData.parseOtherConfig && |
||||
|
dialogData.parseOtherConfig.ptzCtrl |
||||
|
) |
||||
|
" |
||||
|
src="@screen/images/camera-control-icon.svg" |
||||
|
width="18px" |
||||
|
height="18px" |
||||
|
style="cursor: pointer" |
||||
|
/> |
||||
|
</template> |
||||
|
</Descriptions> |
||||
|
|
||||
|
<div |
||||
|
v-if="check(['business:home:camera']) && PanoramicCameraTypes.indexOf(dialogData.childType) == -1" |
||||
|
style="width: 50%; display: flex; margin-top: 18px" |
||||
|
> |
||||
|
<span |
||||
|
style=" |
||||
|
color: #3de8ff; |
||||
|
font-size: 15px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
line-height: 18px; |
||||
|
" |
||||
|
> |
||||
|
雨刷: |
||||
|
</span> |
||||
|
<Button style="margin-left: 5px" @click.native="controlClick(49)" |
||||
|
>开</Button |
||||
|
> |
||||
|
<Button style="margin-left: 5px" @click.native="controlClick(48)" |
||||
|
>关</Button |
||||
|
> |
||||
|
</div> |
||||
|
</ElTabPane> |
||||
|
<!-- <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane> --> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart |
||||
|
v-if="activeName === 'third'" |
||||
|
:productId="dialogData.id" |
||||
|
style="height: 180px" |
||||
|
/> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
|
||||
|
<!-- <div class="bottom"> |
||||
|
<Button> 录像查看</Button> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
|
||||
|
<CameraControlDialog :deviceId="dialogData.iotDeviceId" :dialogData="dialogData" @update:value="handleClose" :visible="controlDialogVisible" |
||||
|
/> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import Video from "@screen/components/Video"; |
||||
|
import Descriptions from "@screen/components/Descriptions.vue"; |
||||
|
import CameraControlDialog from "../Dialogs/Camera/components/CameraControlDialog.vue"; |
||||
|
import LineChart from "../LineChart/index.vue"; |
||||
|
import { PanoramicCameraTypes } from "@screen/utils/enum.js"; |
||||
|
import { checkPermi } from "@/utils/permission.js"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getOrganizationName, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { throttle } from "lodash"; |
||||
|
|
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
|
||||
|
// 摄像机弹窗 |
||||
|
export default { |
||||
|
name: "Camera", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
CameraControlDialog, |
||||
|
LineChart, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
AENUM:{ |
||||
|
'1-3': '门架监控摄像机', |
||||
|
'1-4': '360全景摄像机', |
||||
|
'1-2': '高清网络摄像机', |
||||
|
'1-5': '180全景摄像机', |
||||
|
'1-1': '高清网络枪型固定摄像机', |
||||
|
}, |
||||
|
PanoramicCameraTypes, |
||||
|
activeName: "first", |
||||
|
controlDialogVisible: false, |
||||
|
data: {}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
gridColumn: 2 |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
|
||||
|
}, |
||||
|
// { |
||||
|
// label: "状态更新时间", |
||||
|
// key: "updateTime", |
||||
|
// // gridColumn: 2, |
||||
|
// // enum: "CameraDirectionEnum" |
||||
|
// }, |
||||
|
// { |
||||
|
// label: '经/纬度', |
||||
|
// key: "${longitude} / ${latitude}", |
||||
|
// }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
watch: {}, |
||||
|
async created() { |
||||
|
this.data = { ...this.dialogData, organizationName: null, roadName: null }; |
||||
|
if(this.dialogData.iotDeviceId!=null){ |
||||
|
getOrganizationName(this.dialogData.iotDeviceId).then((data) => { |
||||
|
this.data.organizationName = data?.organizationName; |
||||
|
}); |
||||
|
} |
||||
|
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
check(arr){ |
||||
|
return checkPermi(arr); |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.controlDialogVisible = false; |
||||
|
}, |
||||
|
controlClick: throttle(function (type) { |
||||
|
// console.log(this.dialogData, "dialogData") |
||||
|
if (this.dialogData.deviceState != "0") |
||||
|
controlCamera(this.dialogData.iotDeviceId, type, false); |
||||
|
else this.$message.info("设备离线, 无法操作"); |
||||
|
}, 150), |
||||
|
visibleClose(bool) { |
||||
|
if (bool) return; |
||||
|
this.controlDialogVisible = false; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.Camera { |
||||
|
width: 400px; |
||||
|
height: 510px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.icon-content { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
img { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.video-stream { |
||||
|
width: 100%; |
||||
|
height: 216px; |
||||
|
margin-top: 10px; |
||||
|
// background: #00ebc1; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,224 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="合流区预警" width="550px" style="z-index:3000"> |
||||
|
<Video class="video-stream" :camId="camId" img="河流区预警-超级雾灯" /> |
||||
|
|
||||
|
<div class="confluencearea"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first" style="height: 180px; "> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px;overflow: hidden;" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second" style="height: 180px;overflow-y:auto ;"> |
||||
|
<DeviceParams ref="refParam" disabled :dialogData="dialogData" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<Button v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true"> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
</template> |
||||
|
|
||||
|
<DeviceControlDialog :rebind="rebind" v-model="deviceControlVisible" :dialogData="dialogData" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import DeviceParams from "../Dialogs/ConfluenceArea/components/DeviceParams.vue"; |
||||
|
import DeviceControlDialog from "../Dialogs/ConfluenceArea/components/DeviceControlDialog.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import { resolve } from "@antv/x6/lib/registry/node-anchor/util"; |
||||
|
|
||||
|
// 离网光伏供电 |
||||
|
export default { |
||||
|
name: "ConfluenceArea", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
|
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Button, |
||||
|
DeviceParams, |
||||
|
DeviceControlDialog |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
refParam:null, |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
// visible: false, |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// 修改camid |
||||
|
if(typeof this.dialogData.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.dialogData.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
this.data = { |
||||
|
...this.dialogData, |
||||
|
roadName: '济菏高速', |
||||
|
}; |
||||
|
//厂商 |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
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: { |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
rebind(){ |
||||
|
this.$refs.refParam.bind() |
||||
|
}, |
||||
|
async getDeviceInfo() { |
||||
|
return request({ |
||||
|
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" |
||||
|
}/3`, |
||||
|
method: "get", |
||||
|
params: {}, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.confluencearea { |
||||
|
width: 508px; |
||||
|
// height: 248px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
overflow-y: auto; |
||||
|
max-height: 220px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.camera-video { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
.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>../mixin../mixin../mixin |
||||
|
|
||||
@ -0,0 +1,198 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="疲劳唤醒弹窗" width="470px" style="z-index:3000" > |
||||
|
<div class="FatigueWakesUp"> |
||||
|
<Video class="video-stream" :camId="camId" img="激光疲劳唤醒" /> |
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> --> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="data.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<template #footer v-if="check(['business:home:laserFatigueAwakening'])"> |
||||
|
<Button @click.native="onControlClick" disabled :style="(data.deviceState==='1' && data.iotDeviceId)?'':'background-color:#A9AEB8'">设备操作</Button> |
||||
|
</template> |
||||
|
<!-- 设备操作弹窗 --> |
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :deviceId="data.iotDeviceId" :productId="data.id" |
||||
|
:deviceType="data.deviceType" /> |
||||
|
</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 "../Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue"; |
||||
|
import { checkPermi } from "@/utils/permission.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import LineChart from "../LineChart/index.vue"; |
||||
|
|
||||
|
|
||||
|
// 疲劳唤醒弹窗 |
||||
|
export default { |
||||
|
name: "DialogFatigueWakesUp", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
DeviceControlDialog, |
||||
|
Button, |
||||
|
LineChart, |
||||
|
}, |
||||
|
|
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
camId: null , |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
async mounted() { |
||||
|
// 修改camid |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
console.log("8888888888",this.data) |
||||
|
this.data = { ...this.data, roadName: '济菏高速' }; |
||||
|
|
||||
|
|
||||
|
getProduct(this.data.productId).then((data) => { |
||||
|
this.data.brand = data.brand; |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.data.stakeMark); |
||||
|
|
||||
|
// if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName); |
||||
|
}, |
||||
|
methods: { |
||||
|
check(arr){ |
||||
|
return checkPermi(arr); |
||||
|
}, |
||||
|
|
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
onControlClick(){ |
||||
|
if(this.data.deviceState==='1' && this.data.iotDeviceId){ |
||||
|
this.deviceControlVisible = true |
||||
|
} |
||||
|
}, |
||||
|
handleClickTabs() { }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.fatigue-wakes-up { |
||||
|
position: absolute; /* 或 fixed，取决于你的需求 */ |
||||
|
z-index: 3000; /* 确保这个值足够高 */ |
||||
|
/* 其他样式 */ |
||||
|
} |
||||
|
.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,268 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="行车诱导" width="470px" style="z-index:3000" > |
||||
|
<div class="DrivingGuidance"> |
||||
|
<Video class="video-stream" :camId="camId" img="智能行车诱导" /> |
||||
|
|
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> --> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<Button v-hasPermi="['business:home:drivingGuidance']" @click.native="onControlClick" :style="dialogData.useState ? '':'background-color:grey'">设备操作</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" :id="dialogData.id" |
||||
|
:deviceType="dialogData.deviceType" /> |
||||
|
</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 DeviceControlDialog from "../Dialogs/DrivingGuidance/components/DeviceControlDialog.vue"; |
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import Video from "@screen/components/Video"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { delay } from "@screen/utils/common.js"; |
||||
|
import { handle3CResult } from "@screen/utils/deviceControl.js"; |
||||
|
import { inducerModeDic, inducerWorkTypeDic } from "@screen/utils/enum.js"; |
||||
|
import { find, assign } from "lodash"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import LineChart from "../LineChart/index.vue"; |
||||
|
|
||||
|
// 行车诱导 |
||||
|
export default { |
||||
|
name: "DrivingGuidance", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
provide() { |
||||
|
return { |
||||
|
requestURL: this.requestURL, |
||||
|
updateFormData: this.updateFormData |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
DeviceControlDialog, |
||||
|
Video, |
||||
|
LineChart, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
camId: '', |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "济菏高速", |
||||
|
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: "manufacturer", |
||||
|
}, |
||||
|
{ |
||||
|
label: "工作模式", |
||||
|
key: "workMode", |
||||
|
}, |
||||
|
{ |
||||
|
label: "上行工作状态", |
||||
|
key: "onWorkStatus", |
||||
|
}, |
||||
|
{ |
||||
|
label: "下行工作状态", |
||||
|
key: "inWorkStatus", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// 修改camid |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId) |
||||
|
.then((data) => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}) |
||||
|
.catch((err) => { }); |
||||
|
} |
||||
|
|
||||
|
// this.requestURL(52) |
||||
|
// .then((result) => { |
||||
|
// this.data.workMode = { |
||||
|
// "00": "手动控制", |
||||
|
// "01": "自动控制", |
||||
|
// "02": "万年历", |
||||
|
// }[result.mode]; |
||||
|
// this.data.onWorkStatus = result.onWorkStatus; |
||||
|
// this.data.inWorkStatus = result.inWorkStatus; |
||||
|
// }) |
||||
|
// .catch((err) => { }); |
||||
|
this.requestURL().then(async (data) => { |
||||
|
await delay(0); |
||||
|
const formData = {}; |
||||
|
formData.controlType = data.mode; |
||||
|
await handle3CResult(data, formData, this.requestURL); |
||||
|
this.updateFormData({ ...formData, workMode: data.mode }); |
||||
|
}); |
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
// console.log( |
||||
|
// "%c [ roadInfo ]-103-「index.vue」", |
||||
|
// "font-size:15px; background:#36347c; color:#7a78c0;", |
||||
|
// roadInfo.roadName |
||||
|
// ); |
||||
|
|
||||
|
// if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() {}, |
||||
|
onControlClick(){ |
||||
|
if(this.dialogData.useState){ |
||||
|
this.deviceControlVisible = true |
||||
|
} |
||||
|
}, |
||||
|
updateFormData(formData) { |
||||
|
formData.workMode && |
||||
|
this.$set(this.data, "workMode", inducerModeDic[formData.workMode]); //(this.data.workMode = inducerModeDic[formData.controlType]); |
||||
|
formData.inWorkStatus && |
||||
|
this.$set(this.data, "inWorkStatus", inducerWorkTypeDic[formData.inWorkStatus]); //(this.data.inWorkStatus = inducerWorkTypeDic[formData.inWorkStatus]); |
||||
|
formData.onWorkStatus && |
||||
|
this.$set(this.data, "onWorkStatus", inducerWorkTypeDic[formData.onWorkStatus]); //(this.data.onWorkStatus = inducerWorkTypeDic[formData.onWorkStatus]); |
||||
|
|
||||
|
}, |
||||
|
handleClickTabs() { }, |
||||
|
requestURL(functionId = 52, options = {}) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
if (!this.dialogData.iotDeviceId) { |
||||
|
reject(); |
||||
|
} else { |
||||
|
request |
||||
|
.post( |
||||
|
`business/device/functions/${this.dialogData.iotDeviceId}/${functionId}`, |
||||
|
options |
||||
|
) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return reject(); |
||||
|
resolve(result.data[0]); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
reject(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.DrivingGuidance { |
||||
|
width: 420px; |
||||
|
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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,250 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="护栏碰撞弹窗" width="600px" style="z-index:3000"> |
||||
|
<Video class="video-stream" :camId="camId" img="护栏碰撞预警系统" /> |
||||
|
|
||||
|
<div class="GuardrailCollision"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
<div class="jsdcontrol" v-hasPermi="['business:home:guardrailCollision']"> |
||||
|
<span style=" |
||||
|
color: #3de8ff; |
||||
|
font-size: 12px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
line-height: 25px; |
||||
|
"> |
||||
|
警示灯: |
||||
|
</span> |
||||
|
<Button style="margin-left: 5px" @click.native="controlClick(30)">开</Button> |
||||
|
<Button style="margin-left: 5px" @click.native="controlClick(31)">关</Button> |
||||
|
<Button style="margin-left: 5px" @click.native="controlClick(34)">退出</Button> |
||||
|
</div> |
||||
|
</ElTabPane> |
||||
|
|
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
|
||||
|
import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue"; |
||||
|
|
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; |
||||
|
|
||||
|
// 广播发布 |
||||
|
export default { |
||||
|
name: "GuardrailCollision", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Switcher, |
||||
|
RadioGroup, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
secondLoading: true, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
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: [], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; |
||||
|
|
||||
|
// 修改camid |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
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:{ |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
controlClick(id){ |
||||
|
request({ |
||||
|
url: `/business/device/functions/${this.dialogData.iotDeviceId}/A3`, |
||||
|
method: "POST", |
||||
|
data: { |
||||
|
function:id |
||||
|
} |
||||
|
}).then(res=>{ |
||||
|
if (result.code != 200) { |
||||
|
this.$message.error(result.msg); |
||||
|
return; |
||||
|
}; |
||||
|
this.$message.success('设备请求完成') |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.GuardrailCollision { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.jsdcontrol{ |
||||
|
display:flex; |
||||
|
margin-top:20px; |
||||
|
align-content: center; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
File diff suppressed because it is too large
@ -0,0 +1,250 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="一体机柜" width="550px" > |
||||
|
<Video class="video-stream" :camId="camId" img="一体机柜" /> |
||||
|
|
||||
|
<div class="IntegratedCabinet"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<!-- {{ dialogData }} --> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second"> |
||||
|
<DeviceParams disabled :dialogData="dialogData" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="空调参数" name="second2"> |
||||
|
<DevicePacks disabled :dialogData="dialogData" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<Button v-hasPermi="['business:home:airConditioning']" v-if="activeName === 'second' && data.deviceState == '1'" @click.native="deviceControlVisible = true"> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
<Button v-hasPermi="['business:home:airConditioning']" v-else-if="activeName === 'second2' && airStatus == '1'" @click.native="airConditioningVisible = true"> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
<Button v-else-if="activeName != 'first'" style="background-color: #bbb"> |
||||
|
设备离线 |
||||
|
</Button> |
||||
|
</template> |
||||
|
|
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" /> |
||||
|
<AirConditioning v-model="airConditioningVisible" :dialogData="dialogData" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import DeviceParams from "../Dialogs/IntegratedCabinet/components/DeviceParams.vue"; |
||||
|
import DeviceControlDialog from "../Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue"; |
||||
|
import AirConditioning from "../Dialogs/IntegratedCabinet/components/AirConditioning.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
import DevicePacks from "../Dialogs/IntegratedCabinet/components/DevicePacks.vue"; |
||||
|
import { getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
|
||||
|
|
||||
|
// 一体机柜 |
||||
|
export default { |
||||
|
name: "IntegratedCabinet", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Button, |
||||
|
DeviceParams, |
||||
|
DevicePacks, |
||||
|
DeviceControlDialog, |
||||
|
AirConditioning, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
airStatus:"", |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
deviceControlVisible: false, |
||||
|
airConditioningVisible:false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
// { |
||||
|
// label: "设备状态", |
||||
|
// key: "deviceStateLiteral", |
||||
|
// }, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// 修改camid |
||||
|
if(typeof this.dialogData.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.dialogData.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速', }; |
||||
|
|
||||
|
//厂商 |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId).then((data) => { |
||||
|
this.data.brand = data.brand; |
||||
|
}); |
||||
|
} |
||||
|
if(this.dialogData!=null&&this.dialogData.iotDeviceId!=null){ |
||||
|
this.getSattue(); |
||||
|
} |
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
// if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
async getDeviceInfo() { |
||||
|
return request({ |
||||
|
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" }/3`, |
||||
|
method: "get", |
||||
|
params: {}, |
||||
|
}); |
||||
|
}, |
||||
|
async getSattue(){ |
||||
|
const iotDeviceId = this.dialogData.iotDeviceId.replace(/-502$/, '-5000'); |
||||
|
return request({ |
||||
|
url: `/business/device/getDeviceById`, |
||||
|
method: "post", |
||||
|
data: { iotDeviceId:iotDeviceId }, |
||||
|
}).then((res) => { |
||||
|
if(res.code!=200){ |
||||
|
console.log('err', res.msg) |
||||
|
} |
||||
|
console.log(res.data.deviceState) |
||||
|
this.airStatus=res.data.deviceState; |
||||
|
}).catch((err) => { |
||||
|
console.log('err', err) |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.IntegratedCabinet { |
||||
|
width: 508px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 250px; |
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
overflow-y: auto; |
||||
|
max-height: 220px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,276 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="一类交调站弹窗" width="600px" style="z-index:3000"> |
||||
|
<Video class="video-stream" :camId="camId" img="一类交通量" /> |
||||
|
|
||||
|
<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" |
||||
|
@input="changeRadio" |
||||
|
/> |
||||
|
<span>当前车流量: {{ carNum }}辆</span> |
||||
|
<LineChartForTraffic |
||||
|
style="flex: 1" |
||||
|
v-if="isShowCar && activeName === 'second'" |
||||
|
:xData="xData" |
||||
|
:yData="yData" |
||||
|
/> |
||||
|
</div> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import LineChartForTraffic from "../Dialogs/Intermodulation/components/LineChartForTraffic/index.vue"; |
||||
|
import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue"; |
||||
|
|
||||
|
|
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
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 { |
||||
|
name: "Intermodulation", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
LineChartForTraffic, |
||||
|
Video, |
||||
|
Switcher, |
||||
|
RadioGroup, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
secondLoading: true, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
carNum: 0, |
||||
|
objectValue: { |
||||
|
1: 0, |
||||
|
3: 0, |
||||
|
}, |
||||
|
xData: [], |
||||
|
yData: [], |
||||
|
hzYData: [], |
||||
|
jnYData: [], |
||||
|
isShowCar: true, |
||||
|
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: [], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; |
||||
|
|
||||
|
// 修改camid |
||||
|
if(typeof this.dialogData.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.dialogData.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
|
||||
|
|
||||
|
if (this.dialogData.iotDeviceId!=null) { |
||||
|
this.getPropertiesHistory(this.dialogData.iotDeviceId); |
||||
|
} |
||||
|
|
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
|
||||
|
// if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
}, |
||||
|
changeRadio(value) { |
||||
|
this.carNum = this.objectValue[value + ""]; |
||||
|
this.isShowCar = false; |
||||
|
if (value == 3) { |
||||
|
this.yData = this.jnYData; |
||||
|
} else { |
||||
|
this.yData = this.hzYData; |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
this.isShowCar = true; |
||||
|
}, 0); |
||||
|
}, |
||||
|
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[result.data.length - 1]; |
||||
|
this.carNum = result.data[result.data.length - 1]["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> |
||||
|
|
||||
|
<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,256 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="气象设备" width="470px" style="z-index:3000"> |
||||
|
<div class="MeteorologicalDetection"> |
||||
|
<Video class="video-stream" :camId="camId" img="气象监测器" /> |
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first" style="height: 150px"> |
||||
|
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px;" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="气象情况" name="second" style="height: 150px;overflow-y: auto;"> |
||||
|
<Descriptions labelWidth="104px" :list="weatherList" :data="weatherData" style="gap: 14px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third" style="height: 150px"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button @click.native="deviceControlVisible = true; btnType = 1">气温变化趋势</Button> |
||||
|
<Button @click.native="deviceControlVisible = true; btnType = 2">能见度变化趋势</Button> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 设备操作弹窗 --> |
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :deviceName="dialogData.deviceName" :btnType="btnType" /> |
||||
|
|
||||
|
</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 LineChart from "../LineChart/index.vue"; |
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
getMeteorologicalDetector |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import Video from "@screen/components/Video"; |
||||
|
import DeviceControlDialog from "../Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
// 疲劳唤醒弹窗 |
||||
|
export default { |
||||
|
name: "MeteorologicalDetection", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
DeviceControlDialog, |
||||
|
Button, |
||||
|
LineChart, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "济菏高速", |
||||
|
direction: "1", |
||||
|
deviceState: "0", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
}, |
||||
|
btnType: 1, |
||||
|
weatherData: {}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
weatherList: [ |
||||
|
{ |
||||
|
label: "路面状态", |
||||
|
key: "remoteRoadSurfaceStatus", |
||||
|
enum: "remoteRoadSurfaceStatus", |
||||
|
}, |
||||
|
{ |
||||
|
label: "路表温度(℃)", |
||||
|
key: "remoteRoadSurfaceTemperature", |
||||
|
}, |
||||
|
{ |
||||
|
label: "下雨类型", |
||||
|
key: "precipitationType", |
||||
|
enum: "precipitationType", |
||||
|
}, |
||||
|
{ |
||||
|
label: "雨量( mm )", |
||||
|
key: "rainfall", |
||||
|
}, |
||||
|
{ |
||||
|
label: "能见度类型", |
||||
|
key: "visibilityType", |
||||
|
enum: "visibilityType", |
||||
|
}, |
||||
|
{ |
||||
|
label: "能见度( km )", |
||||
|
key: "visibility", |
||||
|
}, |
||||
|
{ |
||||
|
label: "温度( ℃ )", |
||||
|
key: "temperature", |
||||
|
}, |
||||
|
{ |
||||
|
label: "湿度( % )", |
||||
|
key: "humidity", |
||||
|
}, |
||||
|
{ |
||||
|
label: "风向( ° )", |
||||
|
key: "windDirection", |
||||
|
}, |
||||
|
{ |
||||
|
label: "风速( m/s )", |
||||
|
key: "windSpeed", |
||||
|
}, |
||||
|
{ |
||||
|
label: "水膜厚度( mm )", |
||||
|
key: "waterFilmIceSnowValue", |
||||
|
}, |
||||
|
{ |
||||
|
label: "大气压力( hPa )", |
||||
|
key: "atmosphericPressure", |
||||
|
}, |
||||
|
{ |
||||
|
label: "时间", |
||||
|
key: "createTime", |
||||
|
gridColumn: 2, |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData, roadName:'济菏高速' }; |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId).then((data) => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}); |
||||
|
} |
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
// if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName); |
||||
|
if (this.dialogData.deviceName != null&&this.dialogData.deviceName !='') { |
||||
|
const weatherInfo = await getMeteorologicalDetector(this.dialogData.deviceName); |
||||
|
if (weatherInfo && weatherInfo.visibility) { |
||||
|
weatherInfo.visibility = parseInt(weatherInfo.visibility, 10); // 最好明确指定基数，以避免潜在的解析错误 |
||||
|
} |
||||
|
this.weatherData = { ...weatherInfo }; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() {}, |
||||
|
handleClickTabs() { }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.MeteorologicalDetection { |
||||
|
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,251 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="毫米波雷达" width="470px" style="z-index:3000"> |
||||
|
<div class="MillimeterWaveRadar"> |
||||
|
<Video class="video-stream" :camId="camId" img="毫米波雷达" /> |
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button @click.native="deviceControlVisible = true;" style="margin-top: 20px;">感知事件</Button> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 设备操作弹窗 --> |
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" :btnType="btnType" /> |
||||
|
|
||||
|
</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, |
||||
|
getMeteorologicalDetector |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import Video from "@screen/components/Video"; |
||||
|
import DeviceControlDialog from "../Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import LineChart from "../LineChart/index.vue"; |
||||
|
|
||||
|
// 毫米波雷达 |
||||
|
export default { |
||||
|
name: "MillimeterWaveRadar", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
DeviceControlDialog, |
||||
|
Button, |
||||
|
LineChart, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "", |
||||
|
direction: "1", |
||||
|
deviceState: "0", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
}, |
||||
|
btnType: 1, |
||||
|
weatherData: {}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
weatherList: [ |
||||
|
{ |
||||
|
label: "路面状态", |
||||
|
key: "remoteRoadSurfaceStatus", |
||||
|
enum: "remoteRoadSurfaceStatus", |
||||
|
}, |
||||
|
{ |
||||
|
label: "路表温度(℃)", |
||||
|
key: "remoteRoadSurfaceTemperature", |
||||
|
}, |
||||
|
{ |
||||
|
label: "下雨类型", |
||||
|
key: "precipitationType", |
||||
|
enum: "precipitationType", |
||||
|
}, |
||||
|
{ |
||||
|
label: "雨量(mm)", |
||||
|
key: "rainfall", |
||||
|
}, |
||||
|
{ |
||||
|
label: "能见度类型", |
||||
|
key: "visibilityType", |
||||
|
enum: "visibilityType", |
||||
|
}, |
||||
|
{ |
||||
|
label: "能见度(km)", |
||||
|
key: "visibility", |
||||
|
}, |
||||
|
{ |
||||
|
label: "温度(℃)", |
||||
|
key: "temperature", |
||||
|
}, |
||||
|
{ |
||||
|
label: "湿度", |
||||
|
key: "humidity", |
||||
|
}, |
||||
|
{ |
||||
|
label: "风向", |
||||
|
key: "windDirection", |
||||
|
}, |
||||
|
{ |
||||
|
label: "风速(m/s)", |
||||
|
key: "windSpeed", |
||||
|
}, |
||||
|
{ |
||||
|
label: "水膜厚度(mm)", |
||||
|
key: "waterFilmIceSnowValue", |
||||
|
}, |
||||
|
{ |
||||
|
label: "大气压力(hPa)", |
||||
|
key: "atmosphericPressure", |
||||
|
}, |
||||
|
{ |
||||
|
label: "时间", |
||||
|
key: "createTime", |
||||
|
gridColumn: 2, |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
|
||||
|
|
||||
|
// 修改camid |
||||
|
if(typeof this.dialogData.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.dialogData.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData , roadName: '济菏高速' }; |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId).then((data) => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
// const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
// if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName); |
||||
|
if (this.dialogData.deviceName != null&&this.dialogData.deviceName !='') { |
||||
|
const weatherInfo = await getMeteorologicalDetector(this.dialogData.deviceName) |
||||
|
this.weatherData = { ...weatherInfo } |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
}, |
||||
|
handleClickTabs() { }, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.MillimeterWaveRadar { |
||||
|
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,223 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" title="远端机" width="470px" > |
||||
|
<Video class="video-stream" :camId="camId" img="远端机" /> |
||||
|
|
||||
|
<div class="RemoteMachine"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<!-- {{ dialogData }} --> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second"> |
||||
|
<DeviceParams disabled :dialogData="dialogData" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<Button v-if="check(['business:home:equipmentBox']) && activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true"> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
<Button v-else-if="check(['business:home:equipmentBox']) && activeName != 'first'" style="background-color: #bbb"> |
||||
|
设备离线 |
||||
|
</Button> |
||||
|
</template> |
||||
|
|
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import DeviceParams from "../Dialogs/RemoteMachine/components/DeviceParams.vue"; |
||||
|
import DeviceControlDialog from "../Dialogs/RemoteMachine/components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import { checkPermi } from "@/utils/permission.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
|
||||
|
// 广播发布 |
||||
|
export default { |
||||
|
name: "RemoteMachine", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Button, |
||||
|
DeviceParams, |
||||
|
DeviceControlDialog, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// 修改camid |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.data = { ...this.dialogData }; |
||||
|
let deviceInfo; |
||||
|
if(this.dialogData.iotDeviceId!=null){ |
||||
|
deviceInfo = await this.getDeviceInfo(); |
||||
|
} |
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
getProduct(this.dialogData.productId).then((data) => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}); |
||||
|
} |
||||
|
let roadInfo; |
||||
|
if(this.dialogData.stakeMark!=null&&this.dialogData.stakeMark!=''){ |
||||
|
roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
||||
|
} |
||||
|
if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
check(arr){ |
||||
|
return checkPermi(arr); |
||||
|
}, |
||||
|
async getDeviceInfo() { |
||||
|
return request({ |
||||
|
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" |
||||
|
}/3`, |
||||
|
method: "get", |
||||
|
params: {}, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.RemoteMachine { |
||||
|
width: 420px; |
||||
|
// 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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,256 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="智能设备箱" width="470px" > |
||||
|
<Video class="video-stream" :camId="camId" img="设备箱" /> |
||||
|
|
||||
|
<div class="SmartDevice"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<!-- {{ dialogData }} --> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second"> |
||||
|
<DeviceParams disabled :dialogData="dialogData" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart |
||||
|
v-if="activeName === 'third'" |
||||
|
:productId="dialogData.id" |
||||
|
style="height: 180px" |
||||
|
/> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<Button |
||||
|
v-if=" |
||||
|
check(['business:home:equipmentBox']) && |
||||
|
activeName != 'first' && |
||||
|
data.deviceState == '1' |
||||
|
" |
||||
|
@click.native="deviceControlVisible = true" |
||||
|
> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
<Button |
||||
|
v-else-if=" |
||||
|
check(['business:home:equipmentBox']) && activeName != 'first' |
||||
|
" |
||||
|
style="background-color: #bbb" |
||||
|
> |
||||
|
设备离线 |
||||
|
</Button> |
||||
|
</template> |
||||
|
|
||||
|
<DeviceControlDialog |
||||
|
v-model="deviceControlVisible" |
||||
|
:dialogData="dialogData" |
||||
|
/> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import DeviceParams from "../Dialogs/SmartDevice/components/DeviceParams.vue"; |
||||
|
import DeviceControlDialog from "../Dialogs/SmartDevice/components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import { checkPermi } from "@/utils/permission.js"; |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
import { resolve } from "@antv/x6/lib/registry/node-anchor/util"; |
||||
|
|
||||
|
// 广播发布 |
||||
|
export default { |
||||
|
name: "SmartDevice", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Button, |
||||
|
DeviceParams, |
||||
|
DeviceControlDialog, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; |
||||
|
|
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
this.data = { ...this.dialogData, roadName: '济菏高速' }; |
||||
|
|
||||
|
let deviceInfo; |
||||
|
if(this.dialogData.iotDeviceId!=null){ |
||||
|
deviceInfo = await this.getDeviceInfo(); |
||||
|
} |
||||
|
|
||||
|
this.data = { |
||||
|
roadName: '济菏高速' , |
||||
|
//deviceStateLiteral: deviceInfo?.data.formatValue.deviceState, |
||||
|
...this.data, |
||||
|
deviceStateName: (this.data.deviceState === '0'?'离线':'在线') |
||||
|
}; |
||||
|
|
||||
|
// console.log( |
||||
|
// "%c [ dialogData ]-103-「index.vue」", |
||||
|
// "font-size:15px; background:#36347c; color:#7a78c0;", |
||||
|
// this.dialogData, |
||||
|
// "+++========" |
||||
|
// ); |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
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: { |
||||
|
getData() { }, |
||||
|
check(arr){ |
||||
|
return checkPermi(arr); |
||||
|
}, |
||||
|
async getDeviceInfo() { |
||||
|
return request({ |
||||
|
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" |
||||
|
}/3`, |
||||
|
method: "get", |
||||
|
params: {}, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.SmartDevice { |
||||
|
width: 420px; |
||||
|
// 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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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,229 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="visibleModel" |
||||
|
title="离网光伏供电" width="550px" style="z-index:3000"> |
||||
|
<Video class="video-stream" :camId="camId" img="离网光伏供电" /> |
||||
|
|
||||
|
<div class="SolarEnergy"> |
||||
|
<ElTabs v-model="activeName" class="tabs"> |
||||
|
<ElTabPane label="基本信息" name="first"> |
||||
|
<!-- {{ dialogData }} --> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second"> |
||||
|
<DeviceParams disabled :dialogData="data" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="在线率统计" name="third"> |
||||
|
<LineChart v-if="activeName === 'third'" :productId="data.id" style="height: 180px" /> |
||||
|
</ElTabPane> |
||||
|
</ElTabs> |
||||
|
</div> |
||||
|
<!-- <template #footer> |
||||
|
<Button v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true"> |
||||
|
设备操作 |
||||
|
</Button> |
||||
|
<Button v-else-if="activeName != 'first'" style="background-color: #bbb"> |
||||
|
设备离线 |
||||
|
</Button> |
||||
|
</template> --> |
||||
|
|
||||
|
<DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" /> |
||||
|
</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 "../LineChart/index.vue"; |
||||
|
import DeviceParams from "../Dialogs/SolarEnergy/components/DeviceParams.vue"; |
||||
|
import DeviceControlDialog from "../Dialogs/SolarEnergy/components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { |
||||
|
getRoadInfoByStakeMark, |
||||
|
getProduct, |
||||
|
} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
import { dialogDelayVisible } from "../Dialogs/mixin.js"; |
||||
|
|
||||
|
|
||||
|
// 离网光伏供电 |
||||
|
export default { |
||||
|
name: "SolarEnergy", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
LineChart, |
||||
|
Video, |
||||
|
Button, |
||||
|
DeviceParams, |
||||
|
DeviceControlDialog, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
releaseVisible: false, |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "济菏高速", |
||||
|
stakeMark: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: "设备名称", |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备桩号", |
||||
|
key: "stakeMark", |
||||
|
}, |
||||
|
{ |
||||
|
label: "道路名称", |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备方向", |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
}, |
||||
|
{ |
||||
|
label: "设备状态", |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum", |
||||
|
}, |
||||
|
// { |
||||
|
// label: "设备状态", |
||||
|
// key: "deviceStateLiteral", |
||||
|
// }, |
||||
|
{ |
||||
|
label: "设备厂商", |
||||
|
key: "manufacturer", |
||||
|
}, |
||||
|
], |
||||
|
camId:null |
||||
|
}; |
||||
|
}, |
||||
|
async created() { |
||||
|
// if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; |
||||
|
|
||||
|
// let deviceInfo = await this.getDeviceInfo(); |
||||
|
// 修改camid |
||||
|
if(typeof this.data.otherConfig === 'string'){ |
||||
|
const oConfig = JSON.parse(this.data.otherConfig) |
||||
|
if(oConfig && oConfig.camId){ |
||||
|
this.camId = oConfig.camId |
||||
|
} |
||||
|
} |
||||
|
this.data = { |
||||
|
...this.dialogData, |
||||
|
roadName: '济菏高速', |
||||
|
// deviceStateLiteral: deviceInfo.data.formatValue.deviceState, |
||||
|
}; |
||||
|
|
||||
|
//厂商 |
||||
|
if(this.dialogData.productId!=null){ |
||||
|
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: { |
||||
|
getData(){}, |
||||
|
async getDeviceInfo() { |
||||
|
return request({ |
||||
|
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" |
||||
|
}/3`, |
||||
|
method: "get", |
||||
|
params: {}, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
div.switcher { |
||||
|
font-size: 12px; |
||||
|
padding: 2px; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.SolarEnergy { |
||||
|
width: 508px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 250px; |
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
overflow-y: auto; |
||||
|
max-height: 220px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
|
|
||||
Loading…
Reference in new issue