Browse Source

感知事件

wangqin
zhoule 1 year ago
parent
commit
2ff5adf925
  1. 14
      ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue
  2. 12
      ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue
  4. 2
      ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue
  5. 66
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js
  6. 88
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue
  7. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js
  8. 59
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue
  9. 89
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

14
ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue

@ -60,6 +60,10 @@ export default {
* options?: {}
* }[]
*/
dFormData: {
type: Object,
default: () => {}
},
formList: {
type: Array,
default: () => []
@ -95,10 +99,12 @@ export default {
}
},
},
// created() {
// this.reset(true);
// console.log("%c [ this.formData ]-82-index.vue", "font-size:15px; background:#9c7eed; color:#e0c2ff;", this.formData);
// },
created() {
this.reset(true);
if(this.dFormData) {
this.modelFormData = this.dFormData;
}
},
computed: {
modelFormData: {
get() {

12
ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue

@ -12,10 +12,10 @@
</p>
</div>
<div class="controls">
<Button :style="{ background: firstBtnColor }" @click.native="$emit('firstBtnClick', $event)">{{
<Button :style="{ background: firstBtnColor,width: '50%' }" @click.native="$emit('firstBtnClick', $event)">{{
firstBtnText
}}</Button>
<Button :style="{ background: lastBtnColor }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
<Button v-if="cardData.state != 3" :style="{ background: lastBtnColor,width: '50%' }" @click.native="$emit('lastBtnClick', $event)">{{ lastBtnText
}}</Button>
</div>
</div>
@ -61,11 +61,11 @@ export default {
type: Array,
default: () => ([
{
key: "source",
key: "stringEventSource",
label: "来源"
},
{
key: "location",
key: "stakeMark",
label: "位置"
},
{
@ -73,7 +73,7 @@ export default {
label: "方向"
},
{
key: "time",
key: "startTime",
label: "时间"
},
])
@ -141,7 +141,7 @@ export default {
gap: 9px;
>div {
flex: 1;
// flex: 1;
}
}
}

2
ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue

@ -1,7 +1,7 @@
<template>
<div :class='["TimeLine1", { "auto-size": autoSize }]' ref="TimeLine1Ref">
<!-- 节点 -->
<div class="node" v-for="(item, index) in data" ref="nodeRefs">
<div class="node" v-for="(item, index) in data" :key="index" ref="nodeRefs">
<span class="top-label keep-ratio-bottom">
<slot name="bottom-label" :data="item">
{{ item.time }}

2
ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine2/index.vue

@ -1,6 +1,6 @@
<template>
<div class='TimeLine2'>
<div class="node" v-for="(item, index) in data">
<div class="node" v-for="(item, index) in data" :key="index">
<div class="content" v-if="direction != 'right'">
<!-- <template v-if="direction === 'auto' ? !!((index + 1) & 1) : true"> -->
<template v-if="getDirection(item, index, 'left')">

66
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js

@ -1,54 +1,94 @@
export const formList = [
{
label: "事件源:",
key: "事件源",
key: "stringEventSource",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "桩号:",
key: "桩号:",
key: "stakeMark",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "行驶方向:",
key: "行驶方向",
key: "direction",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "事件类型:",
key: "事件类型",
key: "stringEventType",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "事件原因:",
key: "事件原因",
key: "eventCause",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "事件状态:",
key: "事件状态",
key: "eventState",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "操作员:",
key: "操作员",
key: "createBy",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "发生时间:",
key: "发生时间",
key: "startTime",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "完结时间:",
key: "完结时间",
key: "endTime",
type: "input",
options: {
disabled: true,
placeholder: ''
}
},
{
label: "事件描述:",
key: "事件描述",
key: "direction",
type: "input",
gridColumn: 3,
options: {
disabled: true,
placeholder: ''
}
},
];
@ -56,17 +96,17 @@ export const timeLine1List = [
{
time: "16.36",
label: "接警记录",
isActive: true,
isActive: false,
},
{
time: "16.36",
label: "指令下达",
isActive: true,
isActive: false,
},
{
time: "16.36",
label: "清障到达",
isActive: true,
isActive: false,
},
{
time: "",

88
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@ -1,7 +1,7 @@
<template>
<Dialog v-model="modelVisible" title="事件详情">
<div class="EventDetail">
<Form :formList="formList" />
<Form :formList="formList" :dFormData="formData" label-width="100px" />
<div class="video-pic">
<Video style="height: 100%;" />
@ -14,8 +14,8 @@
</div>
<template #footer>
<Button style="padding: 0 24px;">确认</Button>
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"> 取消</Button>
<Button style="padding: 0 24px;" @click.native="modelVisible = false">确认</Button>
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> 取消</Button>
</template>
</Dialog>
</template>
@ -25,11 +25,13 @@ import Dialog from "@screen/components/Dialog/index";
import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
import Form from '@screen/components/FormConfig';
import { formList, timeLine1List } from "./data"
import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
import { formList } from "./data"
// import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
import Video from "@screen/components/Video";
import Carousel from "./Carousel/index.vue"
import Button from '@screen/components/Buttons/Button.vue';
import request from "@/utils/request";
var moment = require("moment");
export default {
name: 'EventDetail',
@ -47,24 +49,94 @@ export default {
event: 'update:value'
},
props: {
visible: Boolean
visible: Boolean,
formData: {
type: Object,
default: () => { }
}
},
data() {
return {
formList,
timeLine1List,
timeLine2List,
timeLine1List: [{
time: "",
label: "",
isActive: false,
}],
timeLine2List: [
{
time: "",
name: "",
desc: '',
posts: "",
direction: "left",
}
],
}
},
computed: {
modelVisible: {
get() {
if (this.visible) {
this.getProcess();
}
return this.visible;
},
set(val) {
this.$emit('update:value', val)
}
}
},
methods: {
getProcess() {
let directionFlg = true;
request({
url: `/system/process/list`,
method: "get",
params: { eventId: this.formData.id }
}).then(result => {
if (result.code != 200) return Message.error(result?.msg);
const rows = result.rows;
this.timeLine1List = [];
this.timeLine2List = [];
this.formData?.processConfigList.forEach(it => {
const process = rows.find(row => it.nodeNode == row.processId);
if (process) {
this.timeLine1List.push(
{
time: moment(process.operationTime || new Date()).format('HH:mm'),
label: it.processNode,
isActive: true,
}
);
this.timeLine2List.push({
time: moment(process.operationTime || new Date()).format('yyyy-MM-DD HH:mm:ss'),
name: process.operator,
desc: process.context,
posts: "",
direction: directionFlg ? 'left' : 'right',
})
directionFlg = !directionFlg;
} else {
this.timeLine1List.push(
{
time: "",
label: it.processNode,
isActive: false,
}
)
}
})
})
}
}
}
</script>

4
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js

@ -179,6 +179,7 @@ export const startTime = {
isAlone: true,
type: "datePicker",
options:{
type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss'
}
@ -190,6 +191,7 @@ export const expectedEndTime = {
isAlone: true,
type: "datePicker",
options:{
type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss'
}
@ -716,6 +718,7 @@ export const eventHappenTime = {
required: true,
type: "datePicker",
options:{
type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss'
}
@ -726,6 +729,7 @@ export const aEstimatedReleaseTime = {
key: "estimatedEndTime",
type: "datePicker",
options:{
type: "datetime",
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss'
}

59
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@ -11,7 +11,7 @@
</template>
新增
</ButtonGradient>
<ButtonGradient>
<ButtonGradient @click="onExport">
<template #prefix>
<img src="./images/export.svg" />
</template>
@ -43,7 +43,7 @@
</div>
<!-- "详情"弹出框 -->
<EventDetailDialog :visible="eventDetailDialogVisible" @update:value="handleClose" />
<EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" @update:value="handleClose" />
<!-- "新增"弹出框 -->
<FormEvent :visible="isShowAddNew" @close="onCloseAddNew" />
@ -115,7 +115,8 @@ export default {
pageSize: 12,
pageNum: 1,
eventState: null
}
},
detailDialogFormData: {}
}
},
created() {
@ -127,7 +128,7 @@ export default {
this.searchData.eventState = activeName == '-1' ? null : activeName;
// this.data = getMockData();
this.getData();
},
getStateCardBind(item) {
const { state, textColor, text } = tabMap[this.activeName]
@ -162,11 +163,45 @@ export default {
onAddNew() {
this.isShowAddNew = true;
},
onExport() {
let loadingInstance = Loading.service({ fullscreen: true, background: "#00000052", text: "文件正在下载..." });
request({
url: '/dc/system/event/export',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
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();
})
},
onCloseAddNew() {
this.isShowAddNew = false;
},
firstBtnClick() {
firstBtnClick(id) {
console.log('id', id)
request({
url: `/dc/system/event/${id}`,
method: "get",
}).then(result => {
if (result.code != 200) return Message.error(result?.msg);
this.detailDialogFormData = result.data;
this.eventDetailDialogVisible = true
})
},
handleClose() {
this.eventDetailDialogVisible = false;
@ -192,8 +227,22 @@ export default {
}
this.getData();
},
resultMapping(type, value) {
const keyMap = {
'eventSource': {
1: '96659',
2: '交警转接',
3: '道路巡查',
4: '视频巡查',
5: '视频AI',
6: '一键救援',
7: '其他',
}
}
return keyMap[type][value];
},
}
}
</script>

89
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@ -4,7 +4,7 @@
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="设备分析" name="first">
<div class="topTabs">
<div class="item" v-for=" item in equipments" >
<div class="item" v-for=" (item, index) in equipments" :key="index">
<div class="title-tool">
<span class="text">{{ item.text }}</span>
</div>
@ -45,7 +45,8 @@
<div class="topdiv">
<div class="left-div">
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch">刷新</el-button>
<el-button size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport" >导出Excel</el-button>
<el-button size="mini" icon="el-icon-download" class="btnSearch"
@click="SystemStatusExport">导出Excel</el-button>
</div>
<div class="right-div">
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
@ -57,48 +58,19 @@
</div>
</div>
<div>
<el-table
:border="false"
:data="tableData"
height="480"
style="width: 100%">
<el-table-column
prop="nem"
label="序号"
width="80">
<el-table :border="false" :data="tableData" height="480" style="width: 100%">
<el-table-column prop="nem" label="序号" width="80">
</el-table-column>
<el-table-column
prop="deviceName"
label="设备名称"
></el-table-column>
<el-table-column
prop="deviceNo"
label="设备桩号"
width="">
<el-table-column prop="deviceName" label="设备名称"></el-table-column>
<el-table-column prop="deviceNo" label="设备桩号" width="">
</el-table-column>
<el-table-column
prop="direction"
label="方向"
class-name="showClass"
width="">
<el-table-column prop="direction" label="方向" class-name="showClass" width="">
</el-table-column>
<el-table-column
prop="deviceIp"
label="设备IP"
width=""
>
<el-table-column prop="deviceIp" label="设备IP" width="">
</el-table-column>
<el-table-column
prop="production"
label="厂家"
width=""
>
<el-table-column prop="production" label="厂家" width="">
</el-table-column>
<el-table-column
prop="type"
label="型号"
width=""
>
<el-table-column prop="type" label="型号" width="">
<template slot-scope="scope">
<div v-if="scope.row.type == 1">高清网络枪型固定摄像机</div>
<div v-if="scope.row.type == 2">高清网络球形摄像机</div>
@ -119,23 +91,11 @@
<div v-if="scope.row.type == 17">智能设备箱</div>
</template>
</el-table-column>
<el-table-column
prop="network"
label="网段"
width=""
>
<el-table-column prop="network" label="网段" width="">
</el-table-column>
<el-table-column
prop="time"
label="监测时间"
width=""
>
<el-table-column prop="time" label="监测时间" width="">
</el-table-column>
<el-table-column
prop="deviceStatus"
label="操作"
width=""
>
<el-table-column prop="deviceStatus" label="操作" width="">
<template slot-scope="scope">
<div v-if="scope.row.deviceStatus == 1">在线</div>
<div v-if="scope.row.deviceStatus == 0">离线</div>
@ -143,13 +103,8 @@
</el-table-column>
</el-table>
<div class="foot">
<Pagination
@current-change="changePage"
width="'100%'"
:page-size="pageSize"
:current-page.sync="pageIndex"
layout="total, sizes, prev, pager, next"
:total="pageTotal">
<Pagination @current-change="changePage" width="'100%'" :page-size="pageSize" :current-page.sync="pageIndex"
layout="total, sizes, prev, pager, next" :total="pageTotal">
</Pagination>
</div>
</div>
@ -471,6 +426,9 @@ import * as echarts from "echarts";
document.body.removeChild(link)
link = null
loadingInstance.close();
}).catch(err => {
Message.error(err);
loadingInstance.close();
})
},
queryChartList() {
@ -571,8 +529,6 @@ import * as echarts from "echarts";
</script>
<style lang='scss' scoped>
.bottomTabs {
position: relative;
display: inline-flex;
@ -794,6 +750,7 @@ import * as echarts from "echarts";
background-color: #064258;
color: #fff;
}
::v-deep .el-table .el-table__cell {
height: 47px;
font-size: 14px;
@ -812,6 +769,7 @@ import * as echarts from "echarts";
background-color: #13272F;
border: 0px !important;
}
::v-deep .el-table tr:nth-child(even) td {
border: 0px !important;
}
@ -931,10 +889,12 @@ import * as echarts from "echarts";
margin-bottom: 20px;
}
}
.content-r {
width: 49.4%;
}
}
.foot {
width: 98%;
margin: auto;
@ -944,6 +904,7 @@ import * as echarts from "echarts";
flex: 1;
pointer-events: none;
margin-top: 8px;
>div {
pointer-events: auto;
}
@ -956,9 +917,11 @@ import * as echarts from "echarts";
.foot-l {
width: 726px;
}
.foot-m {
width: 613px;
}
.foot-r {
width: 493px;
}

Loading…
Cancel
Save