13 changed files with 425 additions and 30 deletions
@ -0,0 +1,169 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="感知事件" width="740px" > |
||||
|
<div class="DeviceControlDialog"> |
||||
|
<div class="headSearch"> |
||||
|
<p>查询事件:</p> |
||||
|
<el-select |
||||
|
v-model="eventType" |
||||
|
style="width: 180px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in eventTypeOption" |
||||
|
:key="item.key" |
||||
|
:label="item.label" |
||||
|
:value="item.key" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<p style="margin-left: 10px;">时间范围:</p> |
||||
|
<!-- <el-date-picker style="width:220px;" class="selectRoad" v-model="time" type="daterange" placeholder="请选择" :clearable="false"> --> |
||||
|
<!-- </el-date-picker> --> |
||||
|
<el-date-picker |
||||
|
v-model="dateRange" |
||||
|
size="mini" |
||||
|
style="width: 200px" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
type="daterange" |
||||
|
range-separator="-" |
||||
|
unlink-panels |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
<Button @click.native="bindData" style="margin-left: 10px;"> 查询 </Button> |
||||
|
<Button |
||||
|
style="background-color: rgba(0, 179, 204, 0.3)" |
||||
|
@click.native="handleResetForm" |
||||
|
> |
||||
|
重置 |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { throttle } from "lodash" |
||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
export default { |
||||
|
name: "DeviceControlDialog", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button |
||||
|
}, |
||||
|
model: { |
||||
|
prop: "visible", |
||||
|
event: "update:value", |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
deviceId: String, |
||||
|
btnType: Number, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
submitting: false, |
||||
|
eventType:'all', |
||||
|
eventTypeOption:[ |
||||
|
{key:'all',label:'全部'}, |
||||
|
{key:'RADAR_TOPIC',label:'雷达目标检测事件'}, |
||||
|
{key:'trafficAnalysis',label:'交通事件'}, |
||||
|
{key:'timeRange',label:'交通统计'}, |
||||
|
{key:'realTime',label:'交通状态数据'}, |
||||
|
], |
||||
|
|
||||
|
dateRange: [], |
||||
|
searchData: { |
||||
|
pageSize: 12, |
||||
|
pageNum: 1 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(val) { |
||||
|
// this.$emit("update:value", val); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
visible: { |
||||
|
immediate: true, |
||||
|
handler(bool) { |
||||
|
this.initData(); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.time = new Date().format('yyyy-MM-dd') |
||||
|
}, |
||||
|
methods: { |
||||
|
initData(){ |
||||
|
this.dateRange = []; |
||||
|
this.eventType = 'all'; |
||||
|
this.searchData = { |
||||
|
pageSize: 12, |
||||
|
pageNum: 1 |
||||
|
} |
||||
|
this.bindData(); |
||||
|
}, |
||||
|
async bindData() { |
||||
|
console.log(this.deviceId) |
||||
|
// request({ |
||||
|
// url: `business/device/events/history/{deviceId}/type/{type}`, |
||||
|
// method: "get", |
||||
|
// }).then(res=>{ |
||||
|
// if (result.code != 200) return Message.error(result?.msg); |
||||
|
// }) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.DeviceControlDialog { |
||||
|
max-height: 78vh; |
||||
|
height: 410px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.headSearch { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 700px; |
||||
|
p { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-input__prefix { |
||||
|
top: -5px |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.selectRoad { |
||||
|
|
||||
|
::v-deep { |
||||
|
|
||||
|
.el-input__inner { |
||||
|
background-color: #064258 !important; |
||||
|
border-width: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,214 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" title="毫米波雷达" width="470px"> |
||||
|
<div class="MillimeterWaveRadar"> |
||||
|
<Video class="video-stream" :pileNum="dialogData.stakeMark" /> |
||||
|
<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.deviceId" :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 "./components/DeviceControlDialog.vue"; |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
import { dialogDelayVisible } from "./../mixin"; |
||||
|
import LineChart from "../../LineChart/index.vue"; |
||||
|
|
||||
|
// 毫米波雷达 |
||||
|
export default { |
||||
|
name: "MillimeterWaveRadar", |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
DeviceControlDialog, |
||||
|
Button, |
||||
|
LineChart, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: "first", |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "G35济泽高速", |
||||
|
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, |
||||
|
}, |
||||
|
] |
||||
|
}; |
||||
|
}, |
||||
|
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.$set(this.data, "roadName", roadInfo.roadName); |
||||
|
|
||||
|
const weatherInfo = await getMeteorologicalDetector(this.dialogData.deviceName) |
||||
|
this.weatherData = { ...weatherInfo } |
||||
|
}, |
||||
|
methods: { |
||||
|
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> |
||||
Loading…
Reference in new issue