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