qingzhengli
2 years 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