22 changed files with 757 additions and 231 deletions
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="obverseValue" |
||||
|
v-on="resolveListeners(item.ons)" :_config="item" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'Proxy', |
||||
|
inject: ['getComponent', 'getBindData', "getFormData"], |
||||
|
props: { |
||||
|
value: {}, |
||||
|
item: Object |
||||
|
}, |
||||
|
computed: { |
||||
|
obverseValue: { |
||||
|
get() { |
||||
|
return this.value |
||||
|
}, |
||||
|
set(value) { |
||||
|
this.$emit("update:value", value) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
resolveListeners(callbacks) { |
||||
|
if (!callbacks) return; |
||||
|
|
||||
|
const result = {}; |
||||
|
|
||||
|
for (const key in callbacks) { |
||||
|
result[key] = (...args) => callbacks[key](...args, this.getFormData(), this) |
||||
|
} |
||||
|
|
||||
|
return result |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class='TextData'> |
||||
|
<slot :value="getValue"> |
||||
|
{{ getValue || '-' }} |
||||
|
</slot> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as EnumMap from "@screen/utils/enum.js"; |
||||
|
import { get as pathGet } from "lodash"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'TextData', |
||||
|
props: { |
||||
|
value: [String, Number], |
||||
|
data: Object, |
||||
|
_config: Object |
||||
|
}, |
||||
|
computed: { |
||||
|
getValue() { |
||||
|
const item = this._config; |
||||
|
|
||||
|
const result = this.data ? pathGet(this.data, item.key) : this.value; |
||||
|
|
||||
|
if (item.enum) return EnumMap[item.enum][result]?.text || "-"; |
||||
|
|
||||
|
if (!this.data) return result; |
||||
|
|
||||
|
const templateResult = item.key?.replace( |
||||
|
/\$\{[^}]+\}/g, |
||||
|
(key) => pathGet(this.data, key.slice(2, -1)) || "-" |
||||
|
); |
||||
|
|
||||
|
if (templateResult && templateResult != item.key) return templateResult; |
||||
|
|
||||
|
return result || item.text || "-"; |
||||
|
}, |
||||
|
getDisplayColor() { |
||||
|
const style = {}; |
||||
|
|
||||
|
if (this._config.enum) { |
||||
|
const config = EnumMap[this._config.enum][this.value]; |
||||
|
|
||||
|
if (config?.color) style.color = config.color; |
||||
|
} |
||||
|
|
||||
|
return style; |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.TextData {} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 969 B |
|
After Width: | Height: | Size: 969 B |
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" title="感知事件"> |
||||
|
<div class="PerceiveEvent"> |
||||
|
<Video class="item-video" /> |
||||
|
<div class="chart"></div> |
||||
|
|
||||
|
<Form class="form" :value="data" ref="FormConfigRef" :formList="formList" column="1" /> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<Button>误操作</Button> |
||||
|
<Button style="background-color: rgba(0, 179, 204, 0.3);">取消</Button> |
||||
|
<Button>确定</Button> |
||||
|
</template> |
||||
|
</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 Form from '@screen/components/FormConfig'; |
||||
|
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
|
||||
|
import { dialogDelayVisible } from "./../mixin" |
||||
|
|
||||
|
// 感知事件 |
||||
|
export default { |
||||
|
name: 'PerceiveEvent', |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
Video, |
||||
|
Form |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'first', |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "G35济泽高速", |
||||
|
direction: "1", |
||||
|
deviceState: "0", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
time: "2023/01/02 09:09:09" |
||||
|
}, |
||||
|
formList: [ |
||||
|
{ |
||||
|
label: "报警时间:", |
||||
|
key: "warningTime", |
||||
|
type: "text", |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件地点:", |
||||
|
key: "stakeMarkId", |
||||
|
type: "text", |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件来源:", |
||||
|
key: "warningSource", |
||||
|
type: "text", |
||||
|
enum: "InfoWarningSource" |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件类型:", |
||||
|
key: "warningType", |
||||
|
type: "select", |
||||
|
options: { |
||||
|
options: [] |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "细分类型:", |
||||
|
key: "warningSubclass", |
||||
|
type: "select", |
||||
|
}, |
||||
|
{ |
||||
|
label: "事件描述:", |
||||
|
key: "desc.duration", |
||||
|
options: { |
||||
|
type: "textarea", |
||||
|
maxlength: 100, |
||||
|
autosize: { minRows: 6, maxRows: 6 }, |
||||
|
showWordLimit: true, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
label: "影响车道:", |
||||
|
key: "lane", |
||||
|
type: "RadioGroup", |
||||
|
options: { |
||||
|
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "0", |
||||
|
label: "应急", |
||||
|
}, |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "行", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "行2", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "行3", |
||||
|
}, |
||||
|
{ |
||||
|
key: "4", |
||||
|
label: "行4", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "持续时长:", |
||||
|
key: "parseOtherConfig.duration", |
||||
|
type: "text", |
||||
|
}, |
||||
|
{ |
||||
|
label: "天气情况:", |
||||
|
key: "createTime8", |
||||
|
type: "text", |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
this.data = { ...this.dialogData, roadName: null } |
||||
|
console.log("%c [ this.data ]-108-「index.vue」", "font-size:15px; background:#1be811; color:#5fff55;", this.data); |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.PerceiveEvent { |
||||
|
width: 870px; |
||||
|
color: #fff; |
||||
|
display: grid; |
||||
|
grid-template-columns: 1.2fr 1fr; |
||||
|
grid-template-rows: repeat(2, 1fr); |
||||
|
gap: 9px; |
||||
|
|
||||
|
.item-video { |
||||
|
grid-area: 1/1/1/1; |
||||
|
} |
||||
|
|
||||
|
.chart { |
||||
|
grid-area: 2/1/2/1; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.form { |
||||
|
grid-area: 1/2/3/3; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,165 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title"> |
||||
|
<div class="TrafficIncidents"> |
||||
|
<Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" column="7" /> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
|
||||
|
import request from "@/utils/request"; |
||||
|
import { dialogDelayVisible } from "./../mixin" |
||||
|
|
||||
|
// 所有交通事件的详情 |
||||
|
export default { |
||||
|
name: 'TrafficIncidents', |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Descriptions, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'first', |
||||
|
deviceControlVisible: false, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "G35济泽高速", |
||||
|
direction: "1", |
||||
|
deviceState: "0", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: '机构', |
||||
|
key: "origin", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '高速名称', |
||||
|
key: "roadName", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '感知时间', |
||||
|
key: "occurrenceTime", |
||||
|
gridColumn: '3', |
||||
|
visible: () => this.isPerceived |
||||
|
}, |
||||
|
{ |
||||
|
label: '桩号', |
||||
|
key: "stakeMark", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '事件源', |
||||
|
key: "stringEventSource", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '车道列表', |
||||
|
key: "roadName23", |
||||
|
gridColumn: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '事件状态', |
||||
|
key: "eventState", |
||||
|
enum: "EventType", |
||||
|
gridColumn: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '经/纬度', |
||||
|
key: "${longitude} / ${latitude}", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '发生时间', |
||||
|
key: "occurrenceTime", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '行驶方向', |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '完结时间', |
||||
|
key: "endTime", |
||||
|
gridColumn: '3' |
||||
|
}, |
||||
|
{ |
||||
|
label: '事件描述', |
||||
|
key: "description", |
||||
|
gridColumn: '5' |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
this.data = { ...this.dialogData }; |
||||
|
request({ |
||||
|
url: `/business/trafficIncidents/getEventInfo/${this.dialogData.id}`, |
||||
|
method: "get" |
||||
|
}) |
||||
|
.then(({ code, data }) => { |
||||
|
if (code != 200) return; |
||||
|
|
||||
|
this.data = { ...data, ...this.data }; |
||||
|
console.log(data) |
||||
|
}).catch((err) => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickTabs() { } |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.TrafficIncidents { |
||||
|
width: 600px; |
||||
|
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> |
||||
@ -1,131 +0,0 @@ |
|||||
<template> |
|
||||
<Dialog class="ViewDetails"> |
|
||||
<div class="list-content"> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">机 构：</span> |
|
||||
<span class="value">XX运管中心</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">高速名称：</span> |
|
||||
<span class="value">G35济菏高速</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">感知时间：</span> |
|
||||
<span class="value">2023-11-30 17:32:18</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label"> 桩   号 ：</span> |
|
||||
<span class="value">K081+411</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">事 件 源 ：</span> |
|
||||
<span class="value">视频AI</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">车道列表：</span> |
|
||||
<span class="value">3</span> |
|
||||
<span class="event">事件状态：</span> |
|
||||
<span class="event-value">上报</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">经 / 纬度：</span> |
|
||||
<span class="value">117.253,34.867</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">发生时间：</span> |
|
||||
<span class="value">2023-11-06 17:09:55</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">行驶方向：</span> |
|
||||
<span class="value">济南方向</span> |
|
||||
</div> |
|
||||
<div class="list-item"> |
|
||||
<span class="label">完结时间：</span> |
|
||||
<span class="value">2023-11-06 17:09:55</span> |
|
||||
</div> |
|
||||
<div class="list-item-describe"> |
|
||||
<span class="label">事件描述：</span> |
|
||||
<span class="value">2023-11-30 17:32:18 G35 K081+411 下行方向发生 |
|
||||
撒撤落物(撒落物)事件。</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="video-presentation"></div> |
|
||||
</Dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Dialog from "@screen/components/Dialog/index.vue"; |
|
||||
|
|
||||
// 查看详情 |
|
||||
export default { |
|
||||
name: 'ViewDetails', |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.ViewDetails { |
|
||||
.video-presentation { |
|
||||
width: 100%; |
|
||||
height: 216px; |
|
||||
margin-top: 10px; |
|
||||
background: #00ebc1; |
|
||||
|
|
||||
img { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.list-content { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: wrap; |
|
||||
|
|
||||
.list-item { |
|
||||
width: 230px; |
|
||||
height: 35px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.label { |
|
||||
width: 90px; |
|
||||
display: inline-block; |
|
||||
font-size: 14px; |
|
||||
color: #3de8ff; |
|
||||
} |
|
||||
|
|
||||
.labels { |
|
||||
width: 120px; |
|
||||
display: inline-block; |
|
||||
font-size: 14px; |
|
||||
color: #3de8ff; |
|
||||
} |
|
||||
|
|
||||
.value { |
|
||||
font-size: 14px; |
|
||||
color: #ffffff; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
img { |
|
||||
display: inline-block; |
|
||||
// width: 20px; |
|
||||
// height: 20px; |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.event { |
|
||||
font-size: 14px; |
|
||||
color: #3de8ff; |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
|
|
||||
.event-value { |
|
||||
color: #19e1b1; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue