hui
2 years ago
70 changed files with 11723 additions and 2826 deletions
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,146 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const chartOption ={ |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "日", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ['00:00','02:00','04:00','06:00'], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
name: "雨量日计", |
|||
type: "value", |
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
// align: "right",
|
|||
fontSize: 15, |
|||
// padding: [0, -15, 0, 0],
|
|||
}, |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value}", |
|||
}, |
|||
},{ |
|||
name: "雨量累计", |
|||
type: "value", |
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
// align: "right",
|
|||
fontSize: 15, |
|||
// padding: [0, -15, 0, 0],
|
|||
}, |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value}", |
|||
}, |
|||
}], |
|||
grid: { |
|||
left: 33, |
|||
top: 33, |
|||
bottom: 24, |
|||
right: 36, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
formatter: "{b}：{c}", |
|||
}, |
|||
legend: { |
|||
textStyle: { |
|||
color: '#2AD9FD' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [1,2,3,4], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
name: '计数', |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, { |
|||
data: [1,2,3,4], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
name: '计数', |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 797 B |
@ -0,0 +1,28 @@ |
|||
// import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
|
|||
import * as PresetFormItems from "@screen/common/PresetFormItems.js"; |
|||
// import { merge, cloneDeep } from "lodash";
|
|||
|
|||
import {directionOptions} from '@screen/utils/enum.js'; |
|||
export const searchFormList = [ |
|||
|
|||
{ |
|||
label: "设备名称:", |
|||
key: "deviceName", |
|||
type: "input", |
|||
default: "" |
|||
}, |
|||
{ |
|||
label: "物联编号:", |
|||
key: "iotDeviceId", |
|||
type: "input", |
|||
default: "" |
|||
}, { |
|||
label: "设备方向:", |
|||
key: "direction", |
|||
type: "select", |
|||
options: { |
|||
options: directionOptions, |
|||
}, |
|||
}, |
|||
|
|||
]; |
|||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<div class='content'> |
|||
<div class="left"> |
|||
|
|||
<WgtTitle :title="'设备列表'"></WgtTitle> |
|||
<el-form :model="form" class="formSearch keep-ratio" size="mini"> |
|||
<el-form-item> |
|||
<el-col :span="11"> |
|||
<el-input v-model="form.deviceName" size="medium" placeholder="设备名称" class="direction"></el-input> |
|||
</el-col> |
|||
<el-col :span="10" :offset="1"> |
|||
<el-checkbox-group v-model="form.deviceState" style="height:26px"> |
|||
<el-checkbox :label="1">在线</el-checkbox> |
|||
<el-checkbox :label="0">异常</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
</el-form-item> |
|||
<el-form-item style="display: flex; justify-content: center;"> |
|||
<el-button class="btnInfoBoard" type="add" @click.native="onSearch()">搜索</el-button> |
|||
<el-button type="publish" @click.native="onResetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="body"> |
|||
<vuescroll :ops="scrollOptions"> |
|||
<div class="device keep-ratio" v-for="(item, index) of list"> |
|||
<div>{{ item.deviceName }}</div> |
|||
<el-tooltip :content="(item.deviceState == 0 || item.deviceState == null) ? '异常' : '在线'" placement="top"> |
|||
<img src="@/assets/jihe/images/offline.svg" class="state" |
|||
v-if="item.deviceState == '0' || item.deviceState == null"> |
|||
<img src="@/assets/jihe/images/online.svg" class="state" v-else> |
|||
</el-tooltip> |
|||
</div> |
|||
<div v-if="list.length === 0" style="color: #fff; text-align: center; line-height: 60px"> |
|||
暂无数据 |
|||
</div> |
|||
</vuescroll> |
|||
</div> |
|||
<div class="footer"> |
|||
<ElPagination @current-change="bindList" @size-change="onSizeChange" width="'100%'" |
|||
:page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize" :current-page.sync="page.pageNum" |
|||
layout="total, prev, pager, next" :total="total" class="Pagination"> |
|||
</ElPagination> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="top"> |
|||
<div class="search"> |
|||
<el-date-picker |
|||
size="small" |
|||
type="date" |
|||
class="selectDate" |
|||
v-model="date" |
|||
style="width: 140px" |
|||
placeholder="请选择" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="bottom"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import request from "@/utils/request"; |
|||
import vuescroll from "vuescroll"; |
|||
import scrollOptions from "@/common/scrollbar.js"; |
|||
import { Message } from "element-ui"; |
|||
import WgtTitle from "@screen/pages/perception/widgets/title"; |
|||
export default { |
|||
name: 'smartAnalysis', |
|||
components: { |
|||
vuescroll, |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
form: { |
|||
deviceName: '', |
|||
deviceState: [1, 0] |
|||
}, |
|||
page: { |
|||
pageNum: 0, |
|||
pageSize: 20 |
|||
}, |
|||
total: 0, |
|||
list: [], |
|||
scrollOptions, |
|||
date:'' |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.bindList(); |
|||
this.date = moment().format('YYYY-MM-DD') |
|||
}, |
|||
methods: { |
|||
onSizeChange(pageSize) { |
|||
this.page.pageSize = pageSize; |
|||
this.bindList(); |
|||
}, |
|||
bindList() { |
|||
const params = { |
|||
...this.form, ...this.page, |
|||
}; |
|||
if (params.deviceState.length === 2) { |
|||
delete params.deviceState; |
|||
} else { |
|||
params.deviceState = params.deviceState.join('') |
|||
} |
|||
if (params.deviceName === '') { |
|||
delete params.deviceName |
|||
} |
|||
request({ |
|||
url: 'business/device/selectDeviceNameList', |
|||
method: 'get', |
|||
params |
|||
}).then(result => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
this.list = result.rows; |
|||
this.total = result.total; |
|||
}) |
|||
}, |
|||
onResetSearch() { |
|||
this.form = { |
|||
deviceName: '', |
|||
deviceState: [1, 0] |
|||
}; |
|||
this.pageNum = 0; |
|||
this.bindList(); |
|||
}, |
|||
onSearch() { |
|||
this.pageNum = 0; |
|||
this.bindList(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
background-color: #101d23; |
|||
padding: 20px; |
|||
|
|||
.left { |
|||
width: 400px; |
|||
background-color: #112533; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.body { |
|||
flex: 1; |
|||
height: 0; |
|||
padding: 0 10px 10px; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 10px; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
margin-left: 30px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .formSearch { |
|||
padding: 20px 20px 0; |
|||
|
|||
.el-form-item__label { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.direction { |
|||
::v-deep .el-input { |
|||
.el-input__inner { |
|||
font-size: 14px !important; |
|||
padding: 8px 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.device { |
|||
padding: 7.5px 15px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.device:hover { |
|||
background-color: #1d647f; |
|||
} |
|||
|
|||
.state { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
.top{ |
|||
.search{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Pagination { |
|||
// color: #fff; |
|||
|
|||
::v-deep { |
|||
|
|||
>button, |
|||
>ul li { |
|||
background: #064258; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
color: #fff; |
|||
} |
|||
|
|||
>button { |
|||
padding: 0 3px; |
|||
border: 1px solid #00b3cc; |
|||
} |
|||
|
|||
>ul li { |
|||
background: linear-gradient(180deg, #004960 0%, #004b62 100%); |
|||
margin: 0 1.5px; |
|||
|
|||
&.active { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
} |
|||
} |
|||
|
|||
.el-pagination__total { |
|||
color: #fff; |
|||
} |
|||
|
|||
.el-pagination__sizes { |
|||
.el-select { |
|||
.el-input { |
|||
width: 81px; |
|||
|
|||
.el-input__inner { |
|||
font-size: 12px; |
|||
height: 23px; |
|||
background-color: #064258 !important; |
|||
} |
|||
} |
|||
|
|||
.el-input__suffix { |
|||
.el-input__icon { |
|||
line-height: 23px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-pagination__jump { |
|||
margin-left: 10px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
|
|||
.el-input { |
|||
width: 27px; |
|||
margin: 0 3px; |
|||
|
|||
.el-input__inner { |
|||
font-size: 12px; |
|||
background-color: #064258 !important; |
|||
border-radius: 2px 2px 2px 2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-next { |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.btn-prev { |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-pagination__total { |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.selectDate { |
|||
width: 89px; |
|||
border: 1px solid #00b3cc; |
|||
|
|||
::v-deep { |
|||
.el-input__prefix{ |
|||
top:-4px; |
|||
} |
|||
.el-input__inner { |
|||
|
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div class="Carousel"> |
|||
<img src="./images/arrow.svg" @click="prevSlide" class="arrow" /> |
|||
|
|||
<VueSlickCarousel v-if="pictures.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel"> |
|||
<div v-for="(item, index) in pictures" :key="index" class="item"> |
|||
<!-- <img :src="require(`@screen/images/${item}`)" style="height: 100%"> --> |
|||
<!-- <img :src="item" style="height: 100%"> --> |
|||
<el-image style="height: 100%" :src="item" :preview-src-list="pictures"> |
|||
</el-image> |
|||
</div> |
|||
</VueSlickCarousel> |
|||
|
|||
<VueSlickCarousel v-if="videos.length > 0" v-bind="videoSettings" ref="CarouselRef" class="vueSlickCarousel"> |
|||
<div v-for="(item, index) in videos " :key="index" class="item"> |
|||
<Video style="height: 100%;" :showHeader="false" :url="item || ''" videoType="mp4" /> |
|||
</div> |
|||
</VueSlickCarousel> |
|||
|
|||
<img src="./images/arrow.svg" @click="nextSlide" class="arrow" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import VueSlickCarousel from 'vue-slick-carousel' |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel.css' |
|||
// optional style for arrows & dots |
|||
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css' |
|||
import Video from "@screen/components/Video"; |
|||
|
|||
export default { |
|||
name: "Carousel", |
|||
components: { VueSlickCarousel, Video }, |
|||
props: { |
|||
pictures: { |
|||
type: Array, |
|||
default: () => [ |
|||
// "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", |
|||
// "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", |
|||
// "require('@screen/images/shareWith/message-active.svg')", |
|||
// "require('@screen/images/shareWith/message.svg')", |
|||
// "require('@screen/images/shareWith/website-active.svg')", |
|||
// "require('@screen/images/shareWith/website.svg')", |
|||
// "require('@screen/images/shareWith/weChat-active.svg')", |
|||
// "require('@screen/images/shareWith/weChat-active.svg')" |
|||
] |
|||
}, |
|||
videos: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
carouselItems: [], |
|||
settings: { |
|||
infinite: true, |
|||
arrows: false, |
|||
speed: 600, |
|||
slidesToShow: 1, |
|||
slidesToScroll: 1, |
|||
autoplay: true, |
|||
autoplaySpeed: 1800, |
|||
}, |
|||
videoSettings: { |
|||
infinite: true, |
|||
arrows: false, |
|||
speed: 600, |
|||
slidesToShow: 1, |
|||
slidesToScroll: 1, |
|||
autoplay: false, |
|||
autoplaySpeed: 1800, |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
prevSlide() { |
|||
this.$refs.CarouselRef.prev() |
|||
}, |
|||
nextSlide() { |
|||
// console.log('pics',this.pictures) |
|||
this.$refs.CarouselRef.next() |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.Carousel { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
gap: 9px; |
|||
|
|||
.vueSlickCarousel { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
|
|||
::v-deep { |
|||
.slick-list { |
|||
height: 100%; |
|||
|
|||
div { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
img { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.arrow { |
|||
cursor: pointer; |
|||
width: 15px; |
|||
|
|||
&:first-child { |
|||
transform: rotate(-180deg) |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
export const _formList = [ |
|||
{ |
|||
label: "事件源:", |
|||
key: "stringEventSource", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "桩号:", |
|||
key: "stakeMark", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "行驶方向:", |
|||
key: "direction", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件类型:", |
|||
key: "stringEventType", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "高速名称:", |
|||
key: "roadName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件状态:", |
|||
key: "stringEventState", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "操作员:", |
|||
key: "nickName", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "发生时间:", |
|||
key: "startTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "预计结束时间:", |
|||
key: "estimatedEndTime", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
{ |
|||
label: "水膜厚度(mm):", |
|||
key: "waterFilmThickness", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.waterFilmThickness) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "风速:", |
|||
key: "windSpeed", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.windSpeed) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "能见度(m):", |
|||
key: "visibility", |
|||
type: "input", |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.visibility) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件描述:", |
|||
key: "remark", |
|||
type: "input", |
|||
isAlone: true, |
|||
gridColumn: 3, |
|||
options: { |
|||
disabled: true, |
|||
placeholder: "", |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
export const timeLine1List = [ |
|||
{ |
|||
time: "16.36", |
|||
label: "接警记录", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "16.36", |
|||
label: "指令下达", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "16.36", |
|||
label: "清障到达", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "安全防护", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "开始清障", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "清障结束", |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
time: "", |
|||
label: "恢复畅通", |
|||
isActive: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="事件详情" width="890px" top="11%"> |
|||
<div class="EventDetail" style="height:380px"> |
|||
<Form ref="FormConfigRef" :formList="formList" :dFormData="formData" label-width="100px" /> |
|||
|
|||
<div class="video-pic" :style="{ |
|||
height: formData.component === 'VideoMulti' ? '242px' : undefined, |
|||
}"> |
|||
<component :is="formData.component" style="height: 100%; width: 380px" |
|||
:showHeader="false" :url="formData.videoList && formData.videoList.length > 0 |
|||
? formData.videoList[1] |
|||
: '' |
|||
" :camId="formData.downCamId" :pileNum="formData.stakeMark" rangeIndex="downCamera" |
|||
:videoType="formData.videoType" /> |
|||
|
|||
<Carousel style="flex: 1" :videos="formData.videoList" :pictures="[]" /> |
|||
<Carousel style="flex: 1" :pictures="formData.pictures" :videos="[]" /> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<template #footer> |
|||
<Button :style="{ padding: '0 24px' }" |
|||
@click.native="modelVisible = false">关闭</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import { _formList } from "./data"; |
|||
import Video from "@screen/components/Video"; |
|||
import VideoMulti from "@screen/components/VideoMulti"; |
|||
import Carousel from "./Carousel/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
var moment = require("moment"); |
|||
|
|||
export default { |
|||
name: "EventDetail", |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Video, |
|||
VideoMulti, |
|||
Carousel, |
|||
Button, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
|
|||
formData: { |
|||
type: Object, |
|||
default: () => { }, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
formList:[..._formList], |
|||
isShowDialog: false, |
|||
info: [], |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.formList = [..._formList] |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
// height: 768px; |
|||
flex-direction: column; |
|||
|
|||
.video-pic { |
|||
display: flex; |
|||
height: 190px; |
|||
gap: 15px; |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,258 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="交通事故录入" width="1100px" top="14%"> |
|||
<div class="EventDetailDialog"> |
|||
<ElTabs v-model="activeName" @tab-click="handleChange"> |
|||
<ElTabPane v-for="(item, index) in tabConfigList" :key="index" :label="item.label" :name="item.key" /> |
|||
</ElTabs> |
|||
|
|||
<Transition name="fade"> |
|||
<Form class="form" ref="FormConfigRef" :formList="formConfig.list" v-bind="getFormOptions" labelWidth="120px" /> |
|||
</Transition> |
|||
</div> |
|||
|
|||
<template #footer> |
|||
<Button style="background: #c9c9c9; padding: 0 24px" |
|||
@click.native="(modelVisible = false), (submitting = false)">取消</Button> |
|||
<Button style="padding: 0 24px" @click.native="handleSubmit" :loading="submitting">保存</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
|
|||
import { tabConfigList } from "./data.js"; |
|||
|
|||
export default { |
|||
name: "EventDetailDialog", |
|||
components: { |
|||
Dialog, |
|||
Form, |
|||
Button, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "close", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "TrafficAccident", |
|||
submitting: false, |
|||
formConfig: {}, |
|||
tabConfigList, |
|||
index: 1, |
|||
roads: [], |
|||
direction: [], |
|||
lwss: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
// this.formConfig = tabConfigList[0].formConfig; |
|||
this.initData().then(() => { |
|||
this.handleChange({ index: 0 }); |
|||
}); |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("close", val); |
|||
}, |
|||
}, |
|||
getFormOptions() { |
|||
return { |
|||
column: 3, |
|||
...this.formConfig.formOptions, |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
return Promise.all([ |
|||
//道路 |
|||
request({ |
|||
url: `/business/road/query`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
result.data.forEach((it) => { |
|||
this.roads.push({ key: it.id, label: it.roadName }); |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error("查询失败4", err); |
|||
}), |
|||
//方向字典 |
|||
request({ |
|||
url: `/system/dict/data/type/iot_event_direction`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
result.data.forEach((it) => { |
|||
this.direction.push({ key: it.dictValue, label: it.dictLabel }); |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error("查询失败5", err); |
|||
}), |
|||
//路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 |
|||
request({ |
|||
url: `/business/facility/query`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
result.data.forEach((it) => |
|||
this.lwss.push({ |
|||
key: it.id, |
|||
label: it.facilityName, |
|||
type: it.facilityType, |
|||
}) |
|||
); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
Message.error("查询失败6", err); |
|||
}), |
|||
]); |
|||
}, |
|||
handleChange({ index }) { |
|||
// console.log('index',index) |
|||
this.index = index; |
|||
let formConfig = tabConfigList[index].formConfig; |
|||
console.log("formConfig", formConfig); |
|||
formConfig.list.forEach((it) => { |
|||
if (it.key == "direction") { |
|||
it.options.options = this.direction; |
|||
} |
|||
if (it.key == "roadId") { |
|||
it.options.options = this.roads; |
|||
} |
|||
if (index == 7 && it.key == "dcEventServiceArea.facilityId") { |
|||
it.options.options = this.lwss.filter((ss) => ss.type == 6); |
|||
} |
|||
// if (index == 0 || index == 1 || index == 7) { |
|||
// if (it.key === 'dcEventAccident.facilityId' || it.key === 'dcEventVehicleAccident.facilityId' || it.key === 'dcEventServiceArea.facilityId') { |
|||
// it.options.options = this.lwss.filter(ss => ss.type == 6); |
|||
// } |
|||
// } |
|||
}); |
|||
|
|||
this.formConfig = formConfig; |
|||
}, |
|||
handleSubmit() { |
|||
// return |
|||
this.$refs.FormConfigRef.validate().then((formData) => { |
|||
this.submitting = true; |
|||
|
|||
if (this.index == 0 || this.index == 1) { |
|||
formData.lang = formData.lang.join(","); |
|||
} else { |
|||
formData.lang = ""; |
|||
} |
|||
if (this.index == 2 && formData.dcEventTrafficControl.facilityId instanceof Array) { |
|||
let ids = formData.dcEventTrafficControl.facilityId; |
|||
formData.dcEventTrafficControl.facilityIds = ids |
|||
formData.dcEventTrafficControl.facilityId = '' |
|||
} |
|||
if (formData.endStakeMark && formData.endStakeMark[0] != null) { |
|||
let endStakeMark = formData.endStakeMark; |
|||
let strMark = endStakeMark && endStakeMark.length > 0 ? "K" + endStakeMark[0] + "+" + endStakeMark[1] : ""; |
|||
if (this.index == 3) { |
|||
formData.dcEventTrafficCongestion.endStakeMark = strMark; |
|||
} |
|||
if (this.index == 6) { |
|||
formData.dcEventConstruction.endStakeMark = strMark; |
|||
} |
|||
if (this.index == 9) { |
|||
formData.dcEventAbnormalWeather.endStakeMark = strMark; |
|||
} |
|||
formData.endStakeMark = ""; |
|||
} else { |
|||
formData.endStakeMark = ""; |
|||
} |
|||
let stakeMark = formData.stakeMark; |
|||
// console.log('formData', { |
|||
// ...formData, |
|||
// eventType: Number(this.index) + 1, |
|||
// stakeMark: (stakeMark && stakeMark[0] != null) ? ((stakeMark && stakeMark.length > 0) ? ('K' + stakeMark[0] + '+' + stakeMark[1]) : '') : '', |
|||
// }) |
|||
// this.modelVisible = false; |
|||
// this.submitting = false; |
|||
// this.$emit('queryData',true) |
|||
// return; |
|||
|
|||
request({ |
|||
url: `/dc/system/event`, |
|||
method: "post", |
|||
data: { |
|||
...formData, |
|||
eventType: Number(this.index) + 1, |
|||
eventState: 0, |
|||
stakeMark: |
|||
stakeMark && stakeMark[0] != null |
|||
? stakeMark && stakeMark.length > 0 |
|||
? "K" + stakeMark[0] + "+" + stakeMark[1] |
|||
: "" |
|||
: "", |
|||
}, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
this.modelVisible = false; |
|||
}) |
|||
.catch(() => { |
|||
Message.error("提交失败"); |
|||
}) |
|||
.finally(() => { |
|||
this.submitting = false; |
|||
this.$emit("queryData", true); |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.24s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.EventDetailDialog { |
|||
gap: 9px; |
|||
width: 1050px; |
|||
// height: 810px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.form { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.footer { |
|||
display: flex; |
|||
justify-content: end; |
|||
gap: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,275 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
import { merge, cloneDeep } from "lodash"; |
|||
|
|||
const station = { |
|||
label: "桩号:", |
|||
key: "stakeMark", |
|||
required: true, |
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "K", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[0]", |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (value || data.stakeMark[1]){ |
|||
return /^0\d{2}|\d{3}$/.test(value); |
|||
} else { |
|||
return true |
|||
} |
|||
}, |
|||
} |
|||
], |
|||
|
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "+", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[1]", |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (value || data.stakeMark[0]){ |
|||
return /^0\d{2}|\d{3}$/.test(value); |
|||
} else { |
|||
return true |
|||
} |
|||
}, |
|||
} |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export const tabMap = { |
|||
"1": { |
|||
state: 21, |
|||
textColor: "#007FF4", |
|||
text: "上报", |
|||
}, |
|||
"2": { |
|||
state: 22, |
|||
textColor: "#007FF4", |
|||
text: "已完成", |
|||
}, |
|||
"3": { |
|||
state: 23, |
|||
textColor: "#007FF4", |
|||
text: "已终止", |
|||
}, |
|||
"4": { |
|||
state: 24, |
|||
textColor: "#007FF4", |
|||
text: "自动结束", |
|||
}, |
|||
}; |
|||
export const searchFormList = [ |
|||
{ |
|||
label: "事件状态:", |
|||
key: "warningState", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
value: 1, |
|||
label: "上报", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "已完成", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "已终止", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "自动结束", |
|||
} |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件来源:", |
|||
key: "warningSource", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "视频AI", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "雷达识别", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "锥桶", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "护栏碰撞", |
|||
}, |
|||
{ |
|||
key: "5", |
|||
label: "扫码报警", |
|||
}, |
|||
// {
|
|||
// key: "6",
|
|||
// label: "非机预警",
|
|||
// },
|
|||
{ |
|||
key: "7", |
|||
label: "气象监测器", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "方向:", |
|||
key: "direction", |
|||
type: "RadioGroup", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "菏泽方向", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "济南方向", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件主类:", |
|||
key: "warningType", |
|||
type: "select", |
|||
options: { |
|||
clearable: true, |
|||
options: [ |
|||
{ |
|||
value: 1, |
|||
label: "交通拥堵", |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "行人", |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "非机动车", |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "停车", |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "违规驾驶", |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "路障", |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "道路施工", |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "异常天气", |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "护栏碰撞", |
|||
}, |
|||
{ |
|||
value: 10, |
|||
label: "交通事故", |
|||
}, |
|||
{ |
|||
value: 11, |
|||
label: "车辆故障", |
|||
}, |
|||
{ |
|||
value: 99, |
|||
label: "其他事件", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "时间范围:", |
|||
key: "daterange", |
|||
required: false, |
|||
type: "datePicker", |
|||
options: { |
|||
style: "width: auto", |
|||
type: "datetimerange", |
|||
format: "yyyy-MM-dd HH:mm:ss", |
|||
valueFormat: "yyyy-MM-dd HH:mm:ss", |
|||
}, |
|||
}, |
|||
{ |
|||
...station, |
|||
label: "开始桩号:", |
|||
required: false, |
|||
}, |
|||
merge(cloneDeep(station), { |
|||
options: { |
|||
options: [ |
|||
{ |
|||
key: "endStakeMark[0]", |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (value || data.endStakeMark[1]){ |
|||
return /^0\d{2}|\d{3}$/.test(value); |
|||
} else { |
|||
return true |
|||
} |
|||
}, |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
key: "endStakeMark[1]", |
|||
rules: [ |
|||
{ |
|||
message: "请补全桩号", |
|||
callback(value, data) { |
|||
if (value || data.endStakeMark[0]){ |
|||
return /^0\d{2}|\d{3}$/.test(value); |
|||
} else { |
|||
return true |
|||
} |
|||
}, |
|||
} |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
label: "结束桩号:", |
|||
required: false, |
|||
}), |
|||
]; |
|||
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<div class="RoadNetworkMonitoring2"> |
|||
<!-- 搜索栏 --> |
|||
<div class="filter"> |
|||
<div> |
|||
<ButtonGradient @click="onExport"> |
|||
|
|||
<template #prefix> |
|||
<img src="./images/export.svg" /> |
|||
</template> |
|||
导出 |
|||
</ButtonGradient> |
|||
<ButtonGradient @click="onRefresh"> |
|||
|
|||
<template #prefix> |
|||
<img src="./images/refresh.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
</div> |
|||
<InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" /> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="body" v-loading> |
|||
<RoadStateCard v-for="(item, index) in data" :key="index" v-bind="getStateCardBind(item)" |
|||
@firstBtnClick="firstBtnClick" @lastBtnClick="onLastBtnClick" /> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="footer"> |
|||
<Pagination @current-change="getData" @size-change="onSizeChange" width="'100%'" |
|||
:page-sizes="[12, 16, 20, 30, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" |
|||
layout="total, sizes, prev, pager, next" :total="total"> |
|||
</Pagination> |
|||
</div> |
|||
|
|||
<!-- "详情"弹出框 --> |
|||
<EventDetailDialog @update:value="handleDialogClose" :visible="eventDetailDialogVisible" :formData="detailDialogFormData" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|||
import Tabs from "@screen/components/Tabs/index.vue"; |
|||
import RoadStateCard from "@screen/components/RoadStateCard/index.vue"; |
|||
import Pagination from "@screen/components/Pagination.vue"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import EventDetailDialog from "./EventDetailDialog/index"; |
|||
import FormEvent from "./FormEvent/index"; |
|||
import { tabMap,searchFormList } from "./data"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
import { Loading } from 'element-ui'; |
|||
import { WarningType as warningTypeMapping, WarningSubclass as warningSubclassTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js" |
|||
|
|||
export default { |
|||
name: "RoadNetworkMonitoring2", |
|||
components: { |
|||
ButtonGradient, |
|||
Tabs, |
|||
Pagination, |
|||
RoadStateCard, |
|||
InputSearch, |
|||
EventDetailDialog, |
|||
FormEvent, |
|||
}, |
|||
data() { |
|||
return { |
|||
data: [], |
|||
total: 0, |
|||
searchFormList, |
|||
eventDetailDialogVisible: false, |
|||
isShowAddNew: false, |
|||
searchData: { |
|||
pageSize: 12, |
|||
pageNum: 1 |
|||
}, |
|||
detailDialogFormData: {}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
getStateCardBind(item) { |
|||
const { state, textColor, text } = tabMap[item.warningState]; |
|||
return { |
|||
cardData: { ...item, state }, |
|||
lastBtnColor: textColor, |
|||
lastBtnText: text, |
|||
}; |
|||
}, |
|||
queryData(flag) { |
|||
this.getData() |
|||
}, |
|||
getData() { //列表数据查询 |
|||
request({ |
|||
url: `/perceivedEvents/warning/perceivedEventsList`,//感知事件 |
|||
method: "post", |
|||
params: { pageNum: this.searchData.pageNum, pageSize: this.searchData.pageSize }, |
|||
data: { ...this.searchData } |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
result.rows.forEach(it => { |
|||
it.stringEventSource = it?.warningSource ? warningSourceMapping[it?.warningSource] : ''; |
|||
it.stringDirection = gzDirectionMapping[it.direction] || it.direction; |
|||
|
|||
let strSub = ''; |
|||
if (it.warningSubclass && warningSubclassTypeMapping[it.warningType][it.warningSubclass] || '') { |
|||
strSub = `(${warningSubclassTypeMapping[it.warningType][it.warningSubclass] || ''})` |
|||
} |
|||
it.stringEventType = warningTypeMapping[it.warningType] + strSub; |
|||
|
|||
it.startTime = it.warningTime; |
|||
|
|||
if (it.otherConfig) { |
|||
let otherConfig = JSON.parse(it.otherConfig); |
|||
it.pictures = otherConfig.pictures || []; |
|||
} |
|||
|
|||
}) |
|||
this.data = result.rows; |
|||
|
|||
this.total = result.total; |
|||
}); |
|||
}, |
|||
onRefresh() { |
|||
this.searchData.pageNum = 1; |
|||
this.$refs.searchComp.handleResetForm(); |
|||
}, |
|||
onSizeChange(pageSize) { |
|||
this.searchData.pageSize = pageSize; |
|||
this.getData(); |
|||
}, |
|||
onExport() { |
|||
let url ='/business/warning/export' |
|||
|
|||
let loadingInstance = Loading.service({ |
|||
fullscreen: true, |
|||
background: "#00000052", |
|||
text: "文件正在下载...", |
|||
}); |
|||
// request.post(url, {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' }) |
|||
request({ |
|||
url: url,//感知事件 |
|||
method: "post", |
|||
data: { ...this.searchData, warningState: 1 }, |
|||
responseType: 'blob' |
|||
}) |
|||
.then((res) => { |
|||
console.log(res); |
|||
const url = window.URL.createObjectURL(new Blob([res])); |
|||
let link = document.createElement("a"); |
|||
link.style.display = "none"; |
|||
link.href = url; |
|||
link.setAttribute("download", "事件信息列表.xlsx"); |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
URL.revokeObjectURL(link.href); // 释放URL 对象 |
|||
document.body.removeChild(link); |
|||
link = null; |
|||
loadingInstance.close(); |
|||
}) |
|||
.catch((err) => { |
|||
Message.error(err); |
|||
loadingInstance.close(); |
|||
}); |
|||
}, |
|||
firstBtnClick(id) {//点击去确认/详情/处置记录等第一个按钮 |
|||
console.log("id", id); |
|||
request({ |
|||
url: `/perceivedEvents/warning/getWarningById`,//感知事件 |
|||
method: "post", |
|||
data: { id } |
|||
}).then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let data = result.data; |
|||
|
|||
data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : ''; |
|||
data.nickName = data.userName; |
|||
data.direction = gzDirectionMapping[data.direction] || data.direction; |
|||
data.startTime = data.warningTime; |
|||
data.stringEventState = warningStateMapping[data.warningState]; |
|||
data.stringEventType = warningTypeMapping[data.warningType]; |
|||
|
|||
data.videoList = []; |
|||
if (data.otherConfig) { |
|||
let otherConfig = JSON.parse(data.otherConfig); |
|||
|
|||
data.waterFilmThickness = otherConfig.waterFilmThickness; |
|||
data.windSpeed = otherConfig.windSpeed; |
|||
data.visibility = otherConfig.visibility; |
|||
|
|||
data.pictures = otherConfig.pictures || []; |
|||
data.videoList = otherConfig.videoList || []; |
|||
// data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4', |
|||
// 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4'] |
|||
} |
|||
data.videoType = "mp4"; |
|||
data.component = "Video"; |
|||
this.detailDialogFormData = data; |
|||
// console.log('data', this.detailDialogFormData) |
|||
|
|||
this.eventDetailDialogVisible = true; |
|||
}); |
|||
}, |
|||
onLastBtnClick(id) { |
|||
this.$router.push(`/control/event/commandDispatch?eventId=${id}`); |
|||
}, |
|||
handleDialogClose() { |
|||
this.eventDetailDialogVisible = false; |
|||
}, |
|||
handleSearch(data) { |
|||
let daterange = data.daterange; |
|||
|
|||
let dStakeMark = data.stakeMark; |
|||
let dendStakeMark = data.endStakeMark; |
|||
|
|||
let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : ''; |
|||
let endStakeMark = ''; |
|||
if (dendStakeMark) { |
|||
endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0]}+${dendStakeMark[1]}` : ''; |
|||
} |
|||
|
|||
this.searchData = { |
|||
...this.searchData, |
|||
warningState: data.warningState, |
|||
warningType: data.warningType, |
|||
warningSource: data?.warningSource || '', |
|||
direction: data.direction, |
|||
startTime: daterange && daterange.length > 0 ? daterange[0] : "", |
|||
// endTime: this.activeName != "-1" && daterange && daterange.length > 0 ? daterange[1] : "", |
|||
completeTime: daterange && daterange.length > 0 ? daterange[1] : "", |
|||
startStakeMark: stakeMark, |
|||
endStakeMark: endStakeMark, |
|||
}; |
|||
console.log(this.searchData) |
|||
this.getData(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.RoadNetworkMonitoring2 { |
|||
padding: 0px 21px 21px 21px; |
|||
|
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 6; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.filter { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
flex: 1; |
|||
overflow: auto; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
grid-gap: 24px; |
|||
// grid-row-gap: 9px; |
|||
// grid-column-gap: 9px; |
|||
grid-auto-rows: min-content; |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 15px; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue