qingzhengli
11 months ago
13 changed files with 501 additions and 31 deletions
@ -0,0 +1,10 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
// 查询非机预警列表
|
||||
|
export function perceivedEventsList(data) { |
||||
|
return request({ |
||||
|
url: "/perceivedEvents/warning/perceivedEventsList", |
||||
|
method: "post", |
||||
|
data, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
// 关系 对照的 图片
|
||||
|
export const statusMap = { |
||||
|
// 已确认
|
||||
|
1: "confirmed", |
||||
|
// 误报
|
||||
|
2: "falsePositives", |
||||
|
// 已处理
|
||||
|
3: "processed", |
||||
|
// 处理中
|
||||
|
4: "processing", |
||||
|
// 待确认
|
||||
|
5: "toBeConfirmed", |
||||
|
}; |
||||
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,240 @@ |
|||||
|
<template> |
||||
|
<BorderRadiusImage |
||||
|
class="RoadStateCard" |
||||
|
borderRadius="2px" |
||||
|
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" |
||||
|
borderWidth="2px" |
||||
|
> |
||||
|
<div class="left"> |
||||
|
<!-- <img :src="(cardData.pictures ? cardData.pictures[0] : null) || require(`./test.png`)"> --> |
||||
|
<!-- <img :src="require(`./test.png`)"> --> |
||||
|
<ElImage |
||||
|
style="width: 212px; height: 159px" |
||||
|
:src="cardData.pictures ? cardData.pictures[0] : null" |
||||
|
:preview-src-list="cardData.pictures || []" |
||||
|
> |
||||
|
<div slot="error"> |
||||
|
<i class="el-icon-picture-outline icon"></i> |
||||
|
</div> |
||||
|
</ElImage> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="info"> |
||||
|
<p class="linText" v-for="(item, index) in keyMap" :key="index"> |
||||
|
<span>{{ item.label }}: </span> |
||||
|
<span>{{ cardData[item.key] ? cardData[item.key] : "-" }}</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="controls"> |
||||
|
<!-- <Button |
||||
|
:style="{ background: firstBtnColor, width: '50%' }" |
||||
|
@click.native="$emit('firstBtnClick', cardData.id)" |
||||
|
>{{ getFirstBtnText(cardData.state) }}</Button |
||||
|
> |
||||
|
<Button |
||||
|
v-if="cardData.state == 4" |
||||
|
:style="{ background: lastBtnColor, width: '50%' }" |
||||
|
@click.native="$emit('lastBtnClick', cardData.id)" |
||||
|
>{{ getLastBtnText(cardData.state) }}</Button |
||||
|
> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<img |
||||
|
v-if="cardData.state" |
||||
|
class="status" |
||||
|
:src="require(`./images/${statusMap[cardData.state]}.svg`)" |
||||
|
/> |
||||
|
</BorderRadiusImage> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
import BorderRadiusImage from "@screen/components/BorderRadiusImage.vue"; |
||||
|
import { statusMap } from "./data.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: "ManualWarningCard", |
||||
|
props: { |
||||
|
cardData: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
time: "2023.12.22 13:00:00", |
||||
|
source: "视频智能识别", |
||||
|
location: "k100+000", |
||||
|
direction: "济南方向", |
||||
|
}), |
||||
|
}, |
||||
|
firstBtnText: { |
||||
|
type: String, |
||||
|
default: "详情", |
||||
|
}, |
||||
|
lastBtnText: { |
||||
|
type: String, |
||||
|
default: "调度记录", |
||||
|
}, |
||||
|
firstBtnColor: { |
||||
|
type: String, |
||||
|
default: "#00B3CC", |
||||
|
}, |
||||
|
lastBtnColor: { |
||||
|
type: String, |
||||
|
default: "#CB7A00", |
||||
|
}, |
||||
|
keyMap: { |
||||
|
type: Array, |
||||
|
default: () => [ |
||||
|
{ |
||||
|
key: "warningType", |
||||
|
label: "类型", |
||||
|
}, |
||||
|
// { |
||||
|
// key: "warningSubclass", |
||||
|
// label: "类型", |
||||
|
// }, |
||||
|
{ |
||||
|
key: "source", |
||||
|
label: "来源", |
||||
|
}, |
||||
|
{ |
||||
|
key: "facilityName", |
||||
|
label: "位置", |
||||
|
}, |
||||
|
{ |
||||
|
key: "stringDirection", |
||||
|
label: "方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "warningTime", |
||||
|
label: "时间", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
picUrl: "./test.png", |
||||
|
}; |
||||
|
}, |
||||
|
emit: ["firstBtnClick", "lastBtnClick"], |
||||
|
components: { |
||||
|
Button, |
||||
|
BorderRadiusImage, |
||||
|
}, |
||||
|
created() { |
||||
|
this.statusMap = statusMap; |
||||
|
}, |
||||
|
methods: { |
||||
|
getFirstBtnText(state) { |
||||
|
let text = "详情"; |
||||
|
if (state == 5) text = "去确认"; |
||||
|
if (state == 4) text = "详情"; |
||||
|
if (state == 3) text = "处置记录"; |
||||
|
return text; |
||||
|
}, |
||||
|
getLastBtnText(state) { |
||||
|
let text = "去处置"; |
||||
|
return text; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.RoadStateCard { |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
background: #133242; |
||||
|
border-radius: 2px 2px 2px 2px; |
||||
|
opacity: 1; |
||||
|
// border: 1px solid; |
||||
|
// border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
||||
|
padding: 18px 12px; |
||||
|
gap: 12px; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
|
||||
|
.left { |
||||
|
img { |
||||
|
width: 212px; |
||||
|
height: 159px; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
display: inline-block; |
||||
|
width: 212px; |
||||
|
height: 159px; |
||||
|
line-height: 157px; |
||||
|
text-align: center; |
||||
|
border: 1px solid #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1; |
||||
|
gap: 12px; |
||||
|
height: 159px; |
||||
|
width: 201px; |
||||
|
|
||||
|
.info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
> p { |
||||
|
font-size: 14px; |
||||
|
color: #f4f4f4; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 10px; |
||||
|
&:nth-child(1) span:nth-child(2) { |
||||
|
color: #ff5f5f; |
||||
|
} |
||||
|
|
||||
|
// &:nth-child(-n + 2) { |
||||
|
// color: #37e7ff; |
||||
|
// font-size: 16px; |
||||
|
// font-weight: bold; |
||||
|
// } |
||||
|
|
||||
|
// &:nth-child(2) { |
||||
|
// margin-bottom: 15px; |
||||
|
// } |
||||
|
} |
||||
|
.linText { |
||||
|
/*不换行*/ |
||||
|
white-space: nowrap; |
||||
|
/*超出的显示省略号*/ |
||||
|
text-overflow: ellipsis; |
||||
|
/*超出部分隐藏*/ |
||||
|
overflow: hidden; |
||||
|
/*长单词不换行-兼容ie*/ |
||||
|
// word-wrap: normal; |
||||
|
:nth-child(1) { |
||||
|
color: #3de8ff; |
||||
|
} |
||||
|
:nth-child(2) { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.controls { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
|
||||
|
> div { |
||||
|
// flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 140 KiB |
@ -0,0 +1,81 @@ |
|||||
|
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
||||
|
import { merge, cloneDeep } from "lodash"; |
||||
|
|
||||
|
export const searchFormList = [ |
||||
|
{ |
||||
|
label: "事件状态:", |
||||
|
key: "eventState", |
||||
|
type: "RadioGroup", |
||||
|
default: "0", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "0", |
||||
|
label: "未解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "已解决", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "已关闭", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
PresetFormItems.eventSources, |
||||
|
PresetFormItems.eventType, |
||||
|
{ |
||||
|
label: "方向:", |
||||
|
key: "direction", |
||||
|
type: "RadioGroup", |
||||
|
default: "1", |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "1", |
||||
|
label: "菏泽方向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "2", |
||||
|
label: "双向", |
||||
|
}, |
||||
|
{ |
||||
|
key: "3", |
||||
|
label: "济南方向", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "时间范围:", |
||||
|
key: "warningTime", |
||||
|
required: false, |
||||
|
type: "datePicker", |
||||
|
options: { |
||||
|
type: "daterange", |
||||
|
format: "yyyy-MM-dd HH:mm:ss", |
||||
|
valueFormat: "yyyy-MM-dd HH:mm:ss", |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
...PresetFormItems.station, |
||||
|
label: "开始桩号:", |
||||
|
required: false, |
||||
|
}, |
||||
|
merge(cloneDeep(PresetFormItems.station), { |
||||
|
options: { |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "endStakeMark[0]", |
||||
|
}, |
||||
|
{ |
||||
|
key: "endStakeMark[1]", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
label: "结束桩号:", |
||||
|
required: false, |
||||
|
}), |
||||
|
]; |
||||
Loading…
Reference in new issue