王钦
2 years ago
96 changed files with 2255 additions and 1490 deletions
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<Card class="DeviceControl" title="设备管控"> |
|||
<div class="container"> |
|||
<el-row v-for="(item, index) in tableData" :key="index" class="rowBlock"> |
|||
<ScopeTable |
|||
:tableInfo="item" |
|||
:index="index" |
|||
@onAdd="onAdd" |
|||
@onDel="onDel" |
|||
@onConfirm="onConfirm" |
|||
@onContentEdit="onContentEdit" |
|||
></ScopeTable> |
|||
</el-row> |
|||
</div> |
|||
<div class="foot"> |
|||
<ButtonGradient |
|||
class="special-button" |
|||
style="background: rgb(229, 68, 73)" |
|||
@click.native="handleSubmit(1)" |
|||
> |
|||
一键控制 |
|||
</ButtonGradient> |
|||
<ButtonGradient |
|||
class="special-button" |
|||
style="background: rgb(250, 152, 56)" |
|||
@click.native="handleSubmit(2)" |
|||
> |
|||
一键恢复 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card2/Card.vue"; |
|||
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|||
import ScopeTable from "./components/ScopeTable.vue"; |
|||
import { provideMixin } from "./../../mixin"; |
|||
import { defaultTableInfo } from "./data"; |
|||
import { Message } from "element-ui"; |
|||
import request from "@/utils/request"; |
|||
|
|||
export default { |
|||
name: "DeviceControl", |
|||
mixins: [provideMixin], |
|||
components: { |
|||
Card, |
|||
ScopeTable, |
|||
ButtonGradient, |
|||
}, |
|||
data() { |
|||
return { |
|||
planId: "", |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
mounted() {}, |
|||
methods: { |
|||
detailChange(eventId) { |
|||
this.initData(this.detailData); |
|||
}, |
|||
initData(eventInfo) { |
|||
request({ |
|||
url: `business/plans/list/event/type`, |
|||
method: "post", |
|||
data: { ...eventInfo }, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let data = result.data; |
|||
if (data.length == 0) { |
|||
this.tableData = [{ ...defaultTableInfo }]; |
|||
return Message.warning("该事件暂无处置预案"); |
|||
} |
|||
|
|||
let dcExecuteAction = data[0].dcExecuteAction || []; |
|||
this.planId = data[0].id; |
|||
|
|||
let dcArr = []; |
|||
dcExecuteAction.forEach((it) => { |
|||
let action = { ...it }; |
|||
if (it.executeConfig) { |
|||
let executeConfig = JSON.parse(it.executeConfig); |
|||
let execute = this.mapKeys(executeConfig, "zx_"); |
|||
action = { ...action, ...execute }; |
|||
} |
|||
if (it.recoverConfig) { |
|||
let recoverConfig = JSON.parse(it.recoverConfig); |
|||
let recover = this.mapKeys(recoverConfig, "hf_"); |
|||
action = { ...action, ...recover }; |
|||
} |
|||
if (it.deviceList) { |
|||
action.devList = it.deviceList.split(",").map((str) => str); |
|||
} |
|||
|
|||
dcArr.push(action); |
|||
}); |
|||
this.tableData = |
|||
dcArr.length == 0 ? [{ ...defaultTableInfo }] : dcArr; |
|||
|
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
Message.error("查询事件预案列表失败", err); |
|||
}); |
|||
}, |
|||
mapKeys(obj, prefix) { |
|||
return Object.keys(obj).reduce((result, key) => { |
|||
result[`${prefix}${key}`] = obj[key]; |
|||
return result; |
|||
}, {}); |
|||
}, |
|||
onAdd() { |
|||
this.tableData.push({ ...defaultTableInfo }); |
|||
}, |
|||
onDel(index) { |
|||
if (this.tableData.length <= 1) { |
|||
return Message.warning("最后一项不可删除！"); |
|||
} |
|||
this.tableData.splice(index, 1); |
|||
}, |
|||
onConfirm(index){ |
|||
const param = { |
|||
"dcEvent": { |
|||
"eventType": this.detailData.eventType, |
|||
"direction": this.detailData.direction, |
|||
"id": this.detailData.id, |
|||
"stakeMark": this.detailData.stakeMark, |
|||
"subclass": this.detailData.subclass |
|||
}, |
|||
"dcExecuteAction": { |
|||
"id": "", |
|||
"emergencyPlansId": "", |
|||
"deviceType": this.tableData[index].deviceType, |
|||
"searchRule": this.tableData[index].searchRule, |
|||
"number": this.tableData[index].number, |
|||
"deviceList": this.tableData[index].devList.join(','), |
|||
"executeConfig": "{\"operationType\":2}", |
|||
"recoverConfig": "{\"operationType\":2}" |
|||
} |
|||
} |
|||
request({ |
|||
url: `business/plans/list/event/emergencyPlans`, |
|||
method: "post", |
|||
data: param, |
|||
}).then(result=>{ |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
console.log(param,result,'===============') |
|||
let data = result.data; |
|||
this.tableData[index].executeConfig = JSON.parse(data.executeConfig) |
|||
this.tableData[index].recoverConfig = JSON.parse(data.recoverConfig) |
|||
this.tableData[index].zx_operationType = this.tableData[index].executeConfig?.operationType; |
|||
this.tableData[index].hf_operationType = this.tableData[index].recoverConfig?.operationType; |
|||
this.tableData = _.cloneDeep(this.tableData) |
|||
}) |
|||
}, |
|||
onContentEdit({field,index,idx,type}){ |
|||
if(type==='edit'){ |
|||
this.tableData[index][field]['contentList'][idx]['isEditor'] = this.tableData[index][field]['contentList'][idx].content; |
|||
} else if(type === 'cancel'){ |
|||
this.tableData[index][field]['contentList'][idx]['content'] = this.tableData[index][field]['contentList'][idx].isEditor; |
|||
delete this.tableData[index][field]['contentList'][idx].isEditor |
|||
} else if(type === 'confirm'){ |
|||
delete this.tableData[index][field]['contentList'][idx].isEditor |
|||
} |
|||
this.tableData = _.cloneDeep(this.tableData) |
|||
}, |
|||
handleSubmit(value = 1) { |
|||
let dcArr = []; |
|||
this.tableData.forEach((item) => { |
|||
let dcData = { |
|||
deviceType: item.deviceType, |
|||
searchRule: item.searchRule, |
|||
number: item.number, |
|||
}; |
|||
if (item.devList && item.devList.length > 0) { |
|||
dcData.deviceList = item.devList.join(","); |
|||
} |
|||
let zxData = {}, |
|||
hfData = {}; |
|||
if(item.executeConfig){ |
|||
zxData['executeConfig'] = item.executeConfig |
|||
} |
|||
if(item.recoverConfig){ |
|||
zxData['recoverConfig'] = item.recoverConfig |
|||
} |
|||
Object.keys(item).forEach((key) => { |
|||
if (/^zx_/.test(key)) { |
|||
let keyName = key.substring(3); |
|||
zxData[keyName] = item[key]; |
|||
} |
|||
if (/^hf_/.test(key)) { |
|||
let keyName = key.substring(3); |
|||
hfData[keyName] = item[key]; |
|||
} |
|||
}); |
|||
if (item.deviceType == 12) { |
|||
zxData = this.formatData(zxData); |
|||
hfData = this.formatData(hfData); |
|||
} |
|||
dcData.executeConfig = JSON.stringify(zxData); |
|||
dcData.recoverConfig = JSON.stringify(hfData); |
|||
|
|||
dcArr.push(dcData); |
|||
}); |
|||
|
|||
let reqData = { |
|||
operationType: value, //1-执行操作 2-恢复操作 |
|||
dcEmergencyPlans: { |
|||
id: this.planId, |
|||
dcExecuteAction: dcArr, |
|||
}, |
|||
dcEvent: { |
|||
id: this.detailData.id, |
|||
eventType: this.detailData.eventType, |
|||
stakeMark: this.detailData.stakeMark, |
|||
subclass: this.detailData.subclass, |
|||
direction: this.detailData.direction == "菏泽方向" ? "1" : "3", |
|||
}, |
|||
}; |
|||
console.log("reqData", reqData); |
|||
|
|||
return; |
|||
request({ |
|||
url: "/business/plans/event/confirm", |
|||
method: "post", |
|||
data: reqData, |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
Message.success("提交成功"); |
|||
}) |
|||
.catch(() => { |
|||
Message.error("提交失败"); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.DeviceControl { |
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
|
|||
.container { |
|||
flex: 1; |
|||
min-height: 300px; |
|||
overflow-y: auto; |
|||
|
|||
.rowBlock { |
|||
background-color: #296887; |
|||
padding: 5px 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
.foot { |
|||
display: flex; |
|||
height: "100px"; |
|||
justify-content: space-evenly; |
|||
margin-top: 10px; |
|||
.special-button { |
|||
width: 100px; |
|||
cursor: pointer; |
|||
.icon { |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 20px; |
|||
height: 20px; |
|||
transition: all 0.3s linear; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,644 +0,0 @@ |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
import request from "@/utils/request"; |
|||
import { Message } from "element-ui"; |
|||
|
|||
export const tabConfigList = [ |
|||
{ |
|||
key: "TrafficControl", |
|||
label: "交通管制", |
|||
formConfig: { |
|||
formOptions: { |
|||
column: 2, |
|||
}, |
|||
list: [ |
|||
{ |
|||
label: "管制设施:", |
|||
key: "eventSubclass", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
default: "3-1", |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "3-1", |
|||
label: "主线", |
|||
}, |
|||
{ |
|||
key: "3-2", |
|||
label: "收费站", |
|||
}, |
|||
{ |
|||
key: "3-3", |
|||
label: "立交", |
|||
}, |
|||
{ |
|||
key: "3-4", |
|||
label: "服务区", |
|||
}, |
|||
{ |
|||
key: "3-5", |
|||
label: "其他", |
|||
}, |
|||
], |
|||
}, |
|||
ons: { |
|||
input(value, ...args) { |
|||
const { data, formList } = args.slice(-1)[0]; |
|||
const classify = formList.find( |
|||
(it) => it.key == "dcEventTrafficControl.classify" |
|||
); |
|||
let ss = { |
|||
"3-1": "主线", |
|||
"3-2": "收费站", |
|||
"3-3": "立交", |
|||
"3-4": "服务区", |
|||
}; |
|||
let ad = { |
|||
1: [ |
|||
{ |
|||
key: "1", |
|||
label: `${ss[value]}关闭`, |
|||
}, |
|||
], |
|||
2: [ |
|||
{ |
|||
key: "2", |
|||
label: "主线限行", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "主线间隔放行", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "主线并道", |
|||
}, |
|||
{ |
|||
key: "5", |
|||
label: "主线限速", |
|||
}, |
|||
], |
|||
}; |
|||
classify.options.options = |
|||
ad[data.dcEventTrafficControl.controlType]; |
|||
|
|||
if (data.dcEventTrafficControl) { |
|||
data.dcEventTrafficControl.facilityId = null; |
|||
} |
|||
let facilityType = 1; |
|||
if (value == "3-2") { |
|||
facilityType = 1; |
|||
} else if (value == "3-3") { |
|||
facilityType = 4; |
|||
} else if (value == "3-4") { |
|||
facilityType = 6; |
|||
} |
|||
if (value && value != "3-1") { |
|||
//路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区
|
|||
request({ |
|||
url: `/business/facility/query?facilityType=${facilityType}`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let lwss = []; |
|||
result.data.forEach((it) => |
|||
lwss.push({ key: it.id, label: it.facilityName }) |
|||
); |
|||
|
|||
formList.forEach((it) => { |
|||
if (it.key == "dcEventTrafficControl.facilityId") { |
|||
it.options.options = lwss; |
|||
} |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
Message.error("查询失败1", err); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
label: "管制分类:", |
|||
key: "dcEventTrafficControl.controlType", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
default: "1", |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: 1, |
|||
label: "封闭", |
|||
}, |
|||
{ |
|||
key: 2, |
|||
label: "限行", |
|||
}, |
|||
], |
|||
}, |
|||
ons: { |
|||
input(value, ...args) { |
|||
const { data, formList } = args.slice(-1)[0]; |
|||
const classify = formList.find( |
|||
(it) => it.key == "dcEventTrafficControl.classify" |
|||
); |
|||
const measure = formList.find( |
|||
(it) => it.key == "dcEventTrafficControl.measure" |
|||
); |
|||
let ss = { |
|||
"3-1": "主线", |
|||
"3-2": "收费站", |
|||
"3-3": "立交", |
|||
"3-4": "服务区", |
|||
"3-5": "其他", |
|||
}; |
|||
let ad = { |
|||
1: [ |
|||
{ |
|||
key: "1", |
|||
label: `${ss[data.eventSubclass]}关闭`, |
|||
}, |
|||
], |
|||
2: [ |
|||
{ |
|||
key: "2", |
|||
label: "主线限行", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "主线间隔放行", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "主线并道", |
|||
}, |
|||
{ |
|||
key: "5", |
|||
label: "主线限速", |
|||
}, |
|||
], |
|||
}; |
|||
let cs = { |
|||
1: [ |
|||
{ |
|||
value: "1", |
|||
label: "临时关闭", |
|||
}, |
|||
], |
|||
2: [ |
|||
{ |
|||
value: "2", |
|||
label: "限行车辆", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "限行车道", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "限行车道且限行车辆", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "间隔放行", |
|||
}, |
|||
{ |
|||
value: "6", |
|||
label: "并道行驶", |
|||
}, |
|||
{ |
|||
value: "7", |
|||
label: "限速", |
|||
}, |
|||
], |
|||
}; |
|||
measure.options.options = cs[value]; |
|||
classify.options.options = ad[value]; |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
label: "分类:", |
|||
key: "dcEventTrafficControl.classify", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
default: "1", |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "主线关闭", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "分类原因:", |
|||
key: "dcEventTrafficControl.controlCause", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
default: "1", |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "车流量大", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "交通事故", |
|||
}, |
|||
{ |
|||
key: "3", |
|||
label: "恶劣天气", |
|||
}, |
|||
{ |
|||
key: "4", |
|||
label: "施工", |
|||
}, |
|||
{ |
|||
key: "5", |
|||
label: "警备任务", |
|||
}, |
|||
{ |
|||
key: "6", |
|||
label: "其他", |
|||
}, |
|||
], |
|||
}, |
|||
ons: { |
|||
input(value, ...args) { |
|||
const { formList } = args.slice(-1)[0]; |
|||
const config = formList.find( |
|||
(it) => it.key == "dcEventTrafficControl.causeType" |
|||
); |
|||
let ad = { |
|||
3: [ |
|||
{ |
|||
value: "3-1", |
|||
label: "雨", |
|||
}, |
|||
{ |
|||
value: "3-2", |
|||
label: "雪", |
|||
}, |
|||
{ |
|||
value: "3-3", |
|||
label: "雾", |
|||
}, |
|||
{ |
|||
value: "3-4", |
|||
label: "道路积水", |
|||
}, |
|||
{ |
|||
value: "3-5", |
|||
label: "道路湿滑", |
|||
}, |
|||
{ |
|||
value: "3-6", |
|||
label: "道路结冰", |
|||
}, |
|||
{ |
|||
value: "3-7", |
|||
label: "沙尘暴", |
|||
}, |
|||
], |
|||
4: [ |
|||
{ |
|||
value: "4-1", |
|||
label: "专项工程施工", |
|||
}, |
|||
{ |
|||
value: "4-2", |
|||
label: "改扩建工程施工", |
|||
}, |
|||
{ |
|||
value: "4-3", |
|||
label: "其他施工", |
|||
}, |
|||
], |
|||
}; |
|||
config.options.options = ad[value]; |
|||
}, |
|||
}, |
|||
}, |
|||
PresetFormItems.isInTunnel, |
|||
{ |
|||
label: "原因类型:", |
|||
key: "dcEventTrafficControl.causeType", |
|||
type: "select", |
|||
options: { |
|||
options: [], |
|||
}, |
|||
visible: (data) => { |
|||
if ( |
|||
data?.dcEventTrafficControl.controlCause == "3" || |
|||
data?.dcEventTrafficControl.controlCause == "4" |
|||
) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
PresetFormItems.freeway, |
|||
PresetFormItems.direction, |
|||
PresetFormItems.emptyLine, |
|||
{ |
|||
label: "出入口:", |
|||
key: "dcEventTrafficControl.exitsInlets", |
|||
type: "RadioGroup", |
|||
isAlone: true, |
|||
required: true, |
|||
default: "2", |
|||
options: { |
|||
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", |
|||
options: [ |
|||
{ |
|||
key: "1", |
|||
label: "出口", |
|||
}, |
|||
{ |
|||
key: "2", |
|||
label: "入口", |
|||
}, |
|||
], |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-2" || data?.eventSubclass == "3-4") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "收费站:", |
|||
key: "dcEventTrafficControl.facilityId", |
|||
type: "select", |
|||
isAlone: false, |
|||
required: true, |
|||
options: { |
|||
options: [], |
|||
multiple: true, |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-2") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "立交桥:", |
|||
key: "dcEventTrafficControl.facilityId", |
|||
type: "select", |
|||
isAlone: false, |
|||
required: true, |
|||
options: { |
|||
options: [] |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-3") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
ons: { |
|||
change(value, ...args) { |
|||
const { formList } = args.slice(-1)[0]; |
|||
|
|||
//匝道
|
|||
request({ |
|||
url: `/system/ramp/listAll?facilityId=${value}`, |
|||
method: "get", |
|||
}) |
|||
.then((result) => { |
|||
if (result.code != 200) return Message.error(result?.msg); |
|||
let zd = []; |
|||
result.rows.forEach((it) => |
|||
zd.push({ key: it.id, label: it.rampName }) |
|||
); |
|||
// console.log("zd", zd);
|
|||
formList.forEach((it) => { |
|||
if (it.key == "dcEventTrafficControl.rampId") { |
|||
console.log("it", it); |
|||
it.options.options = zd; |
|||
} |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("err", err); |
|||
Message.error("查询失败3", err); |
|||
}); |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
label: "匝道:", |
|||
key: "dcEventTrafficControl.rampId", |
|||
type: "select", |
|||
isAlone: false, |
|||
required: true, |
|||
options: { |
|||
options: [], |
|||
multiple: true, |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-3") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "服务区:", |
|||
key: "dcEventTrafficControl.facilityId", |
|||
type: "select", |
|||
isAlone: false, |
|||
required: true, |
|||
options: { |
|||
options: [], |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-4") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "措施:", |
|||
required: true, |
|||
key: "dcEventTrafficControl.measure", |
|||
type: "select", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
value: "1", |
|||
label: "临时关闭", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "限制类型:", |
|||
key: "dcEventTrafficControl.limitedType", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
options: [ |
|||
{ key: "1", label: "只允许" }, |
|||
{ key: "2", label: "禁止" }, |
|||
], |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.dcEventTrafficControl.controlType == "2") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "车辆类型:", |
|||
key: "dcEventTrafficControl.vehicleType", |
|||
required: true, |
|||
type: "select", |
|||
options: { |
|||
options: [ |
|||
{ key: "1", label: "10座以下客车" }, |
|||
{ key: "2", label: "10座以下客车(间隔放行)" }, |
|||
{ key: "3", label: "19座以上客车" }, |
|||
{ key: "4", label: "一型客车(不含面包车)" }, |
|||
{ key: "5", label: "两客一危" }, |
|||
{ key: "6", label: "三类以上班线客车" }, |
|||
{ |
|||
key: "7", |
|||
label: "四轴及四轴以上货车(运送生鲜果蔬、抗疫物资车辆除外)", |
|||
}, |
|||
{ key: "8", label: "三轴及以上(含三轴)货车" }, |
|||
{ key: "9", label: "3轴以上货车(不含危险品运输车)" }, |
|||
{ key: "10", label: "3轴以上货车" }, |
|||
{ key: "11", label: "四轴及以上(含四轴)货车" }, |
|||
{ key: "12", label: "4轴以上货车(不含危险品运输车)" }, |
|||
{ key: "13", label: "4轴以上货车" }, |
|||
{ key: "14", label: "4轴以下货车" }, |
|||
{ key: "15", label: "57座以上客车" }, |
|||
{ key: "16", label: "五轴及以上货车" }, |
|||
{ key: "17", label: "5轴以上货车" }, |
|||
{ key: "18", label: "5轴以上货车(不含危险品运输车)" }, |
|||
{ key: "19", label: "5轴以下货车" }, |
|||
{ key: "20", label: "6座以上客车" }, |
|||
{ key: "21", label: "6座以上面包车" }, |
|||
{ key: "22", label: "7座以上客车" }, |
|||
{ key: "23", label: "7座以下客车" }, |
|||
{ key: "24", label: "8座以上客车" }, |
|||
// 25- 8座以下客车
|
|||
// 26- 8座以下客车(间隔放行)
|
|||
// 27- 9座以上客车
|
|||
// 28- 半挂货车
|
|||
// 29- 车辆（不含10座以下客车）
|
|||
// 30- 车辆（不含8座以下客车）
|
|||
// 31- 车辆（不含小轿车）
|
|||
// 32- 不可解体物品超限运输车
|
|||
// 33- 不可解体物品运输车
|
|||
// 34- 超长超宽超高车辆
|
|||
// 35- 车辆运输车
|
|||
// 36- 超限运输车
|
|||
// 37- 大型货车(不含危险品运输车)
|
|||
// 38- 大型货车
|
|||
// 39- 大型客车
|
|||
// 40- 大中型货车
|
|||
// 41- 已安装ETC的客车
|
|||
// 42- 已安装ETC的小型客车
|
|||
// 43- 罐车
|
|||
// 44- 货车
|
|||
// 45- 黄牌货车
|
|||
// 46- 黄牌货车(不含危险品运输车)
|
|||
// 47- 黄牌货车(运送民生物资车辆除外)
|
|||
// 48- 核载总质量4.5吨以上货车(运送民生物资车辆除外)
|
|||
// 49- 客车（包括小轿车）
|
|||
// 50- 客运车辆
|
|||
// 51- 蓝牌货车
|
|||
// 52- 旅游包车
|
|||
// 53- 面包车
|
|||
// 54- 皮卡
|
|||
// 55- 全部车型
|
|||
// 56- (未安装ETC)车辆
|
|||
// 57- 外埠号牌车辆
|
|||
// 58- 危化品运输车
|
|||
// 59- 危险物品运输车
|
|||
// 60- 武装押运车辆
|
|||
// 61- 小轿车
|
|||
// 62- 厢式货车
|
|||
// 63- 小型车辆
|
|||
// 64- (已安装ETC)车辆
|
|||
// 65- 已安装ETC的货车
|
|||
// 66- 押款车辆
|
|||
// 67- 疫情防控物资运输车辆
|
|||
// 68- 运输剧毒、放射性物品车辆
|
|||
// 69- 运输枪支弹药、爆炸、剧毒、放射性物品车辆
|
|||
// 70- 营运客车
|
|||
// 71- 重型货车
|
|||
// 72- 核载总质量1.8吨以上货车
|
|||
// 73- 中型货车
|
|||
// 74- 小型车辆限速80公里/小时、大型车辆限速70
|
|||
], |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.dcEventTrafficControl.controlType == "2") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
{ |
|||
label: "桩号:", |
|||
key: "stakeMark", |
|||
required: true, |
|||
type: "MultipleLabelItem", |
|||
options: { |
|||
options: [ |
|||
{ |
|||
prefix: { |
|||
text: "K", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[0]", |
|||
}, |
|||
{ |
|||
prefix: { |
|||
text: "+", |
|||
style: { |
|||
color: "#3DE8FF", |
|||
}, |
|||
}, |
|||
key: "stakeMark[1]", |
|||
}, |
|||
], |
|||
}, |
|||
visible: (data) => { |
|||
if (data?.eventSubclass == "3-1") { |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}, |
|||
PresetFormItems.startTime, |
|||
PresetFormItems.expectedEndTime, |
|||
PresetFormItems.remark, |
|||
PresetFormItems.source, |
|||
], |
|||
}, |
|||
}, |
|||
]; |
|||
|
Before Width: | Height: | Size: 678 B After Width: | Height: | Size: 678 B |
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<div class="statisticAna"> |
|||
<DeviceSummary |
|||
class="deviceSummary" |
|||
:dataList="equipments" |
|||
></DeviceSummary> |
|||
<div class="bottomTabs"> |
|||
<DeviceUptime :dataList="equipments" class="tabs-lo" /> |
|||
<OnLineBarCharts :dataList="sectionData" class="tabs-mo" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import barCharts from "./assets/barCharts"; |
|||
import DeviceUptime from "./components/deviceUptime"; |
|||
import OnLineBarCharts from "./components/onLineBarCharts"; |
|||
import DeviceSummary from "./components/deviceSummary"; |
|||
import { |
|||
getSystemStatusType, |
|||
getStatusSection, |
|||
} from "@/api/MonthlyEquipment"; |
|||
export default { |
|||
name: "statisticAna", |
|||
components: { |
|||
DeviceUptime, |
|||
DeviceSummary, |
|||
OnLineBarCharts, |
|||
}, |
|||
data() { |
|||
return { |
|||
equipSeries: [ |
|||
"高清网络球形摄像机", |
|||
"360°全景摄像机", |
|||
"门架式可变信息标志", |
|||
"站前悬臂式可变信息标志", |
|||
"气象检测器", |
|||
"合流区预警系统", |
|||
"高清网络枪型固定摄像机", |
|||
"智能设备箱", |
|||
"毫米波雷达", |
|||
"路段语音广播系统", |
|||
"护碰撞预警系统", |
|||
"激光疲劳唤醒系统", |
|||
"180°全景摄像机", |
|||
"一类交通量调音站", |
|||
"雨棚可变信息标志", |
|||
"智能行车诱导系统", |
|||
], |
|||
equipments: [], |
|||
activeName: "first", |
|||
interval: null, |
|||
sectionData: [], |
|||
}; |
|||
}, |
|||
provide() { |
|||
return { |
|||
initDataList: this.initDevice, |
|||
}; |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.interval); |
|||
}, |
|||
methods: { |
|||
getSection() { |
|||
getStatusSection().then((res) => { |
|||
this.sectionData = res.data; |
|||
}); |
|||
}, |
|||
initData() { |
|||
clearInterval(this.interval); |
|||
this.initDevice(); |
|||
this.interval = setInterval(() => { |
|||
if (this.activeName == "first") { |
|||
this.initDevice(); |
|||
} |
|||
}, 30000); |
|||
}, |
|||
initDevice() { |
|||
getSystemStatusType().then((res) => { |
|||
let allList = []; |
|||
if(res.data){ |
|||
|
|||
let sort = res.data["排序规则"].rule.split(","); |
|||
sort.forEach((i) => { |
|||
for (let key in res.data) { |
|||
let val = res.data[key]; |
|||
let item = { |
|||
title: key, |
|||
total: val.sum, |
|||
pctOnl: val.sucessRate, |
|||
pctOffl: val.failRate, |
|||
pctLose: val.lostRate, |
|||
sumUseState: val.sumUseState, |
|||
}; |
|||
if (i === key) { |
|||
allList.push(item); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
this.equipments = allList; |
|||
}); |
|||
}, |
|||
}, |
|||
async mounted() { |
|||
this.getSection(); |
|||
await this.initData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.floatEmpty { |
|||
position: absolute; |
|||
z-index: 100; |
|||
// background: rgba($color: #000000, $alpha: 0.2); |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.bottomTabs { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
flex-direction: row; |
|||
flex: 1; |
|||
.tabs-lo { |
|||
display: inline-flex; |
|||
width: 670px; |
|||
height: 100%; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.tabs-mo { |
|||
display: inline-flex; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.deviceSummary { |
|||
height: 390px; |
|||
margin-bottom: 6px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
|
|||
.statisticAna { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,673 @@ |
|||
<template> |
|||
<div class="statisticAnalysis"> |
|||
<el-tabs class="full_tab" v-model="activeName" @tab-click="changeTabs"> |
|||
<el-tab-pane label="设备分析" name="first" class="tab_con"> |
|||
<DeviceSummary |
|||
class="deviceSummary" |
|||
:dataList="equipments" |
|||
></DeviceSummary> |
|||
<div class="bottomTabs"> |
|||
<DeviceUptime :dataList="equipments" class="tabs-lo" /> |
|||
<OnLineBarCharts :dataList="sectionData" class="tabs-mo" /> |
|||
<!-- <MonthlyEquipment class="tabs-mo" :dataList="equipments" /> --> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="设备查询" name="second" class="tab_con"> |
|||
<div class="topdiv"> |
|||
<div class="left-div"> |
|||
<el-button |
|||
size="mini" |
|||
icon="el-icon-refresh-left" |
|||
class="btnSearch" |
|||
@click="onRefreshData" |
|||
>刷新</el-button |
|||
> |
|||
<el-button |
|||
size="mini" |
|||
icon="el-icon-download" |
|||
class="btnSearch" |
|||
@click="SystemStatusExport" |
|||
>导出Excel</el-button |
|||
> |
|||
</div> |
|||
<div class="right-div"> |
|||
<InputSearch |
|||
:formList="searchFormList" |
|||
@handleSearch="handleSearch" |
|||
/> |
|||
<!-- :placeholder="searchText" --> |
|||
</div> |
|||
</div> |
|||
<div class="queryChart"> |
|||
<!-- v-if="isEmpty01" --> |
|||
<Empty |
|||
v-if="isEmpty01" |
|||
class="floatEmpty" |
|||
:text="emptyText01" |
|||
></Empty> |
|||
<div ref="queryChart" class="keep-ratio"></div> |
|||
</div> |
|||
<div style="position: relative; bottom: 15px"> |
|||
<Empty |
|||
v-if="isEmpty02" |
|||
class="floatEmpty" |
|||
:text="emptyText02" |
|||
></Empty> |
|||
<el-table |
|||
:border="false" |
|||
:data="tableData" |
|||
height="420" |
|||
header-align="left" |
|||
empty-text=" " |
|||
> |
|||
<el-table-column prop="order" label="序号" width="80"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="deviceName" |
|||
label="设备名称" |
|||
></el-table-column> |
|||
<el-table-column prop="deviceNo" label="设备桩号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="direction" |
|||
label="方向" |
|||
class-name="showClass" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ |
|||
scope.row.direction == "1" |
|||
? "菏泽" |
|||
: scope.row.direction == "2" |
|||
? "双向" |
|||
: "济南" |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="deviceIp" label="设备IP"> </el-table-column> |
|||
<el-table-column prop="production" label="厂家"> </el-table-column> |
|||
<!-- <el-table-column prop="model" label="型号"> </el-table-column> --> |
|||
<!-- <el-table-column prop="network" label="网段"> </el-table-column> --> |
|||
<el-table-column prop="time" label="监测时间"> </el-table-column> |
|||
<el-table-column prop="deviceStatus" label="设备状态"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.deviceStatus == 1">在线</div> |
|||
<div v-if="scope.row.deviceStatus == 0" style="color: #bbb"> |
|||
离线 |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="footer"> |
|||
<Pagination |
|||
@current-change="changePage" |
|||
width="'100%'" |
|||
:page-size="pageSize" |
|||
:current-page.sync="pageIndex" |
|||
layout="total, sizes, prev, pager, next" |
|||
:total="pageTotal" |
|||
@size-change="handleSizeChange" |
|||
> |
|||
</Pagination> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import onlineCharts from "./assets/charts"; |
|||
// import barCharts from "./assets/barCharts"; |
|||
import DeviceUptime from "./components/deviceUptime"; |
|||
import OnLineBarCharts from "./components/onLineBarCharts"; |
|||
import MonthlyEquipment from "./components/monthlyEquipment"; |
|||
import DeviceSummary from "./components/deviceSummary"; |
|||
import { |
|||
getSystemStatusList, |
|||
getSystemStatusTabList, |
|||
getSystemStatusType, |
|||
getSystemStatusExport, |
|||
getStatusSection, |
|||
} from "@/api/MonthlyEquipment"; |
|||
// import { download } from "../../../../../utils/request.js"; |
|||
import Pagination from "@screen/components/Pagination.vue"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import { searchFormList } from "./data"; |
|||
import { Loading } from "element-ui"; |
|||
import { first } from "lodash"; |
|||
|
|||
export default { |
|||
name: "publicService", |
|||
components: { |
|||
DeviceUptime, |
|||
MonthlyEquipment, |
|||
Pagination, |
|||
InputSearch, |
|||
DeviceSummary, |
|||
OnLineBarCharts, |
|||
}, |
|||
data() { |
|||
return { |
|||
searchText: "请设置查询条件", |
|||
isEmpty01: true, |
|||
emptyText01: "请输入参数查询...", |
|||
isEmpty02: true, |
|||
emptyText02: "请输入参数查询...", |
|||
startTime: "", |
|||
time: "", |
|||
typeQuery: "", //高清网络枪型固定摄像机 |
|||
pageTotal: 0, |
|||
pageIndex: 1, |
|||
pageSize: 30, |
|||
searchFormList, |
|||
equipSeries: [ |
|||
"高清网络球形摄像机", |
|||
"360°全景摄像机", |
|||
"门架式可变信息标志", |
|||
"站前悬臂式可变信息标志", |
|||
"气象检测器", |
|||
"合流区预警系统", |
|||
"高清网络枪型固定摄像机", |
|||
"智能设备箱", |
|||
"毫米波雷达", |
|||
"路段语音广播系统", |
|||
"护碰撞预警系统", |
|||
"激光疲劳唤醒系统", |
|||
"180°全景摄像机", |
|||
"一类交通量调音站", |
|||
"雨棚可变信息标志", |
|||
"智能行车诱导系统", |
|||
], |
|||
equipments: [], |
|||
activeName: "first", |
|||
tableData: [], |
|||
interval: null, |
|||
sectionData: [], |
|||
}; |
|||
}, |
|||
provide() { |
|||
return { |
|||
initDataList: this.initDevice, |
|||
}; |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this.interval); |
|||
}, |
|||
methods: { |
|||
getSection() { |
|||
getStatusSection().then((res) => { |
|||
this.sectionData = res.data; |
|||
}); |
|||
}, |
|||
handleSizeChange(size) { |
|||
this.pageSize = size; |
|||
this.initData(); |
|||
}, |
|||
initData() { |
|||
this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment().format("YYYY-MM-DD HH:mm:ss"); |
|||
this.typeQuery = this.searchFormList[1].options.options[0].value; |
|||
clearInterval(this.interval); |
|||
if (this.activeName == "first") { |
|||
this.initDevice(); |
|||
} else if (this.activeName == "second") { |
|||
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|||
this.queryChart.setOption(onlineCharts); |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
} |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.activeName == "first") { |
|||
this.initDevice(); |
|||
} |
|||
}, 30000); |
|||
}, |
|||
changePage(page) { |
|||
this.initQueryTable(page); |
|||
}, |
|||
formatDate(val) { |
|||
let year = val.getFullYear(); |
|||
var m = val.getMonth() + 1; |
|||
var day = val.getDate(); |
|||
|
|||
m = m < 10 ? "0" + m : "" + m; |
|||
day = day < 10 ? "0" + day : "" + day; |
|||
|
|||
return year + "-" + m + "-" + day + " 00:00:00"; |
|||
}, |
|||
onRefreshData() { |
|||
if (!this.typeQuery || !this.startTime) { |
|||
this.$message({ |
|||
message: "请先设置查询条件！", |
|||
type: "warning", |
|||
}); |
|||
return; |
|||
} |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
}, |
|||
handleSearch(data) { |
|||
this.typeQuery = data.type; |
|||
this.startTime = moment(data.time[0]).format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment(data.time[1]).format("YYYY-MM-DD HH:mm:ss"); |
|||
let typeText = |
|||
this.searchFormList[1].options.options[this.typeQuery - 1]?.label; |
|||
this.searchText = `${moment(this.startTime).format( |
|||
"YYYY年MM月DD日" |
|||
)}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; |
|||
this.initQueryChart(); |
|||
this.initQueryTable(1); |
|||
}, |
|||
changeTabs() { |
|||
this.initData(); |
|||
this.$nextTick(() => { |
|||
this.queryChart.resize(); |
|||
}); |
|||
}, |
|||
//导出 |
|||
SystemStatusExport() { |
|||
let loadingInstance = Loading.service({ |
|||
fullscreen: true, |
|||
background: "#00000052", |
|||
text: "文件正在下载...", |
|||
}); |
|||
getSystemStatusExport({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
}) |
|||
.then((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(); |
|||
}); |
|||
}, |
|||
initDevice() { |
|||
//设备在线离线率接口 |
|||
|
|||
// if (process.env.NODE_ENV == "development") { |
|||
// this.equipments = []; |
|||
// this.equipSeries.forEach((item) => { |
|||
// this.equipments.push({ |
|||
// title: item, |
|||
// total: Math.floor(Math.random() * 600) + 800, |
|||
// pctOnl: Math.floor(100 * Math.random()) + "%", |
|||
// pctOffl: "25%", |
|||
// pctLose: "15%", |
|||
// sumUseState: "90%", |
|||
// }); |
|||
// }); |
|||
// return; |
|||
// } |
|||
|
|||
getSystemStatusType().then((res) => { |
|||
let allList = []; |
|||
let sort = res.data["排序规则"].rule.split(","); |
|||
sort.forEach((i) => { |
|||
for (let key in res.data) { |
|||
let val = res.data[key]; |
|||
let item = { |
|||
title: key, |
|||
total: val.sum, |
|||
pctOnl: val.sucessRate, |
|||
pctOffl: val.failRate, |
|||
pctLose: val.lostRate, |
|||
sumUseState: val.sumUseState, |
|||
}; |
|||
if (i === key) { |
|||
allList.push(item); |
|||
} |
|||
// if (key.includes("全部设备")) { |
|||
// allList.unshift(item); |
|||
// } else { |
|||
// allList.push(item); |
|||
// } |
|||
} |
|||
}); |
|||
|
|||
this.equipments = allList; |
|||
}); |
|||
}, |
|||
setStatus(id, status) { |
|||
if (status == "doing") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "数据查询中..."; |
|||
} else if (status == "empty") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "暂无数据..."; |
|||
} else if (status == "finish") { |
|||
this["isEmpty" + id] = false; |
|||
this["emptyText" + id] = ""; |
|||
} |
|||
}, |
|||
initQueryChart() { |
|||
this.setStatus("01", "doing"); |
|||
let data = this.searchFormList[1].options.options; |
|||
let typeLabel = ""; |
|||
data.forEach((item) => { |
|||
if (item.value == this.typeQuery) { |
|||
typeLabel = item.label; |
|||
} |
|||
}); |
|||
getSystemStatusList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
this.setStatus("01", "finish"); |
|||
let origin = res.data; |
|||
let startStamp = +moment(this.startTime).startOf("day").format("x"); |
|||
let endStamp = +moment(this.time).endOf("day").format("x"); |
|||
let oneDay = 86400000; |
|||
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); |
|||
let queryChartData = []; |
|||
let dataX = []; |
|||
let data0 = []; |
|||
let data1 = []; |
|||
for (let i = 0; i < daysTotal; i++) { |
|||
let ts = startStamp + i * oneDay; |
|||
let date = moment(ts).format("YYYY-M-D"); |
|||
let val = origin[date] ? +origin[date].replace("%", "") : 0; |
|||
dataX.push(moment(ts).format("MM-DD")); |
|||
data0.push(val); |
|||
data1.push(100); |
|||
} |
|||
onlineCharts.xAxis.data = dataX; |
|||
onlineCharts.series[0].data = data0; |
|||
onlineCharts.series[0].name = typeLabel; |
|||
onlineCharts.series[1].data = data1; |
|||
onlineCharts.yAxis[0].name = "在线率(%)"; |
|||
|
|||
this.$nextTick(() => { |
|||
this.queryChart.setOption(onlineCharts); |
|||
}); |
|||
// } else { |
|||
// this.setStatus("01", "empty"); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
//查询列表 |
|||
initQueryTable(pageIndex) { |
|||
this.setStatus("02", "doing"); |
|||
getSystemStatusTabList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.typeQuery, |
|||
pageNum: pageIndex, |
|||
pageSize: this.pageSize, |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
// if (res.rows && res.rows.length > 0) { |
|||
this.setStatus("02", "finish"); |
|||
this.pageIndex = pageIndex; |
|||
this.pageTotal = res.total; |
|||
this.tableData = res.rows; |
|||
this.tableData.forEach((it, index) => { |
|||
it.order = (pageIndex - 1) * this.pageSize + index + 1; |
|||
}); |
|||
// } else { |
|||
// this.setStatus("02", "empty"); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
async mounted() { |
|||
await this.initData(); |
|||
this.getSection(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.floatEmpty { |
|||
position: absolute; |
|||
z-index: 100; |
|||
// background: rgba($color: #000000, $alpha: 0.2); |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.bottomTabs { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
flex-direction: row; |
|||
flex: 1; |
|||
height: 0; |
|||
|
|||
.tabs-lo { |
|||
display: inline-flex; |
|||
width: 670px; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.tabs-mo { |
|||
display: inline-flex; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.deviceSummary { |
|||
height: 390px; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.btnSearch { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color: #00d1ff; |
|||
border-color: #064258 !important; |
|||
border: 0px !important; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border: 0px !important; |
|||
background-color: transparent; |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__cell { |
|||
height: 47px; |
|||
padding-left: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color: #00d1ff; |
|||
height: 47px; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td { |
|||
background-color: #13272f; |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(even) td { |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse: 0; |
|||
border: 0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
::v-deep .el-tabs__item { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
min-width: 128px; |
|||
position: relative; |
|||
left: 10px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__active-bar { |
|||
min-width: 128px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.full_tab { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
::v-deep .el-tabs__header { |
|||
} |
|||
::v-deep .el-tabs__content { |
|||
flex: 1; |
|||
.el-tab-pane { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tab_con { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.topdiv { |
|||
display: inline-flex; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 40px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.right-div { |
|||
display: inline; |
|||
width: 450px; |
|||
} |
|||
} |
|||
|
|||
.statisticAnalysis { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 8px 20px 20px; |
|||
|
|||
.header-shot { |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height: 160px; |
|||
} |
|||
|
|||
.queryChart { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 343px; |
|||
margin-top: 20px; |
|||
padding: 0 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #06425860 100%); |
|||
margin-bottom: 30px; |
|||
--keep-ratio: scaleX(1); |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
|
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(25%); |
|||
|
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: calc(100% / 4); |
|||
margin-right: 20px; |
|||
|
|||
.content-m-t { |
|||
width: 100%; |
|||
height: 240px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
.content-r { |
|||
width: 49.4%; |
|||
} |
|||
} |
|||
} |
|||
.footer { |
|||
margin: 15px 0; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
|
|||
var options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
valueFormatter: function (value) { |
|||
return value + " %"; |
|||
}, |
|||
}, |
|||
legend: { |
|||
icon: "circle", |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "5%", |
|||
x: "right", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: "25%", //上边距
|
|||
right: "0%", //右边距
|
|||
left: "0%", //左边距
|
|||
bottom: "10%", //下边距
|
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: [], |
|||
axisTick: { |
|||
show: false, //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#fff", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "%", |
|||
nameTextStyle: { |
|||
color: "#fff", |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
align: "right", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontFamily: "HarmonyOS Sans-Regular", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "line", |
|||
symbol: "circle", |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: "#32BB8A", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [] |
|||
} |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -1,4 +1,137 @@ |
|||
export default { |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export const deviceType = [ |
|||
{ |
|||
value: "all", |
|||
label: "全选", |
|||
}, |
|||
{ |
|||
value: "1-1", |
|||
label: "高清网络枪型固定摄像机", |
|||
color: "#009A29", |
|||
}, |
|||
{ |
|||
value: "1-2", |
|||
label: "高清网络球形摄像机", |
|||
color: "#0DA5AA", |
|||
}, |
|||
{ |
|||
value: "1-3", |
|||
label: "桥下高清网络球形摄像机", |
|||
color: "#206CCF", |
|||
}, |
|||
{ |
|||
value: "1-4", |
|||
label: "360°全景摄像机", |
|||
color: "#CB272D", |
|||
}, |
|||
{ |
|||
value: "1-5", |
|||
label: "180°全景摄像机", |
|||
color: "#CC5120", |
|||
}, |
|||
{ |
|||
value: "2-1", |
|||
label: "门架式可变信息标志", |
|||
color: "#D25F00", |
|||
}, |
|||
{ |
|||
value: "2-3", |
|||
label: "雨棚可变信息标志", |
|||
color: "#CC9213", |
|||
}, |
|||
{ |
|||
value: "2-4", |
|||
label: "站前悬臂式可变信息标志", |
|||
color: "#CFAF0F", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "气象检测器", |
|||
color: "#7EB712", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "路段语音广播系统", |
|||
color: "#0E42D2", |
|||
}, |
|||
{ |
|||
value: "6", |
|||
label: "护栏碰撞预警系统", |
|||
color: "#551DB0", |
|||
}, |
|||
{ |
|||
value: "7", |
|||
label: "毫米波雷达", |
|||
color: "#CB1E83", |
|||
}, |
|||
{ |
|||
value: "8", |
|||
label: "合流区预警系统", |
|||
color: "#072CA6", |
|||
}, |
|||
{ |
|||
value: "10", |
|||
label: "激光疲劳唤醒", |
|||
color: "#114BA3", |
|||
}, |
|||
{ |
|||
value: "11", |
|||
label: "一类交通量调查站", |
|||
color: "#008026", |
|||
}, |
|||
{ |
|||
value: "12", |
|||
label: "智能行车诱导系统", |
|||
color: "#A38408", |
|||
}, |
|||
{ |
|||
value: "13", |
|||
label: "智能设备箱", |
|||
color: "#A64500", |
|||
}, |
|||
] |
|||
export const tabMap = { |
|||
AlarmEvents: { |
|||
state: 5, |
|||
textColor: "#007FF4", |
|||
text: "去确认", |
|||
}, |
|||
EventsConfirmed: { |
|||
state: 5, |
|||
textColor: "#007FF4", |
|||
text: "去确认", |
|||
}, |
|||
DisposingEvents: { |
|||
state: 4, |
|||
textColor: "#007FF4", |
|||
text: "去处置", |
|||
}, |
|||
IncidentDisposed: { |
|||
state: 3, |
|||
textColor: "#007FF4", |
|||
text: "处置记录", |
|||
}, |
|||
}; |
|||
|
|||
export const searchFormList = [ |
|||
{ |
|||
label: "时间范围:", |
|||
key: "time", |
|||
required: true, |
|||
type: "datePicker", |
|||
default: [ |
|||
moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"), |
|||
moment().format("YYYY-MM-DD HH:mm:ss"), |
|||
], |
|||
options: { |
|||
format: "yyyy-MM-dd", |
|||
type: "daterange", |
|||
}, |
|||
} |
|||
]; |
|||
|
|||
export const testDeviceData = { |
|||
"msg": "操作成功", |
|||
"code": 200, |
|||
"data": { |
|||
@ -0,0 +1,422 @@ |
|||
<template> |
|||
<div class="statisticAnalysisQuery"> |
|||
<div class="topdiv"> |
|||
<div class="left-div"> |
|||
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" @click="onRefreshData">刷新</el-button> |
|||
<el-button size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport">导出Excel</el-button> |
|||
</div> |
|||
<div class="right-div"> |
|||
<InputSearch :formList="searchFormList" @handleSearch="handleSearch" :placeholder="searchText" /> |
|||
</div> |
|||
</div> |
|||
<div class="anacontent"> |
|||
<div class="cleft"> |
|||
<el-checkbox-group class="device keep-ratio" origin="top" v-model="devices" @change="onDeviceChange"> |
|||
<el-checkbox v-for="(item,index) in deviceTypeList" :label="item.value" >{{ item.label }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
<div class="cright"> |
|||
<div class="queryChart"> |
|||
<Empty |
|||
v-if="isEmpty01" |
|||
class="floatEmpty" |
|||
:text="emptyText01" |
|||
></Empty> |
|||
<div ref="queryChart" class="keep-ratio"></div> |
|||
</div> |
|||
<div class="bodyTable"> |
|||
<Table :data="tableData" @sort-change="onSort" v-loading="loading"> |
|||
<el-table-column label="序号" type="index" :index="indexMethod" width="100" align="center" |
|||
header-align="center" /> |
|||
<ElTableColumn prop="deviceName" label="设备名称"></ElTableColumn> |
|||
<ElTableColumn prop="deviceNo" label="设备桩号"> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="direction" label="方向" class-name="showClass"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.direction == "1" ? "菏泽" : scope.row.direction == "2" ? "双向": "济南"}}</span> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="deviceIp" label="设备IP"> </ElTableColumn> |
|||
<ElTableColumn prop="production" label="厂家"> </ElTableColumn> |
|||
<ElTableColumn prop="time" label="监测时间"> </ElTableColumn> |
|||
<ElTableColumn prop="deviceStatus" label="设备状态" sortable> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.deviceStatus == '1'">在线</div> |
|||
<div v-if="scope.row.deviceStatus == '0'" style="color: #bbb"> |
|||
离线 |
|||
</div> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
</div> |
|||
<div class="footer"> |
|||
<Pagination @current-change="initQueryTable" @size-change="onSizeChange" width="'100%'" |
|||
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" |
|||
layout="total, sizes, prev, pager, next" :total="total"> |
|||
</Pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { searchFormList,deviceType } from "./data"; |
|||
import { Loading } from "element-ui"; |
|||
import Table from '@screen/components/Table.vue'; |
|||
import Pagination from "@screen/components/Pagination.vue"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import chartsOption from "./charts"; |
|||
import { |
|||
getSystemStatusList, |
|||
getSystemStatusTabList, |
|||
getSystemStatusExport, |
|||
} from "@/api/MonthlyEquipment"; |
|||
import { takeRightWhile } from "lodash"; |
|||
export default { |
|||
name: "StatisticQuy", |
|||
components: { |
|||
Table, |
|||
Pagination, |
|||
InputSearch, |
|||
searchFormList |
|||
}, |
|||
data() { |
|||
return { |
|||
loading:false, |
|||
searchText: "请设置查询条件", |
|||
isEmpty01: true, |
|||
emptyText01: "请输入参数查询...", |
|||
isEmpty02: true, |
|||
emptyText02: "请输入参数查询...", |
|||
devices:['1-1'], |
|||
devicesSource:['1-1'], |
|||
deviceTypeList: deviceType, |
|||
tableData: [], |
|||
interval: null, |
|||
sectionData: [], |
|||
searchFormList, |
|||
startTime: "", |
|||
time: "", |
|||
total:0, |
|||
searchData: { |
|||
pageSize: 10, |
|||
pageNum: 1 |
|||
}, |
|||
order:'asc', |
|||
}; |
|||
}, |
|||
destroyed() { |
|||
|
|||
}, |
|||
methods: { |
|||
indexMethod(index) { |
|||
return this.searchData.pageSize*(this.searchData.pageNum-1) + index + 1; |
|||
}, |
|||
onSizeChange(pageSize) { |
|||
this.tableData = []; |
|||
this.searchData.pageSize = pageSize; |
|||
this.searchData.pageNum = 1; |
|||
this.initQueryTable(); |
|||
}, |
|||
setStatus(id, status) { |
|||
if (status == "doing") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "数据查询中..."; |
|||
} else if (status == "empty") { |
|||
this["isEmpty" + id] = true; |
|||
this["emptyText" + id] = "暂无数据..."; |
|||
} else if (status == "finish") { |
|||
this["isEmpty" + id] = false; |
|||
this["emptyText" + id] = ""; |
|||
} |
|||
}, |
|||
onSort(e){ |
|||
if(e.order === 'ascending'){ |
|||
this.order = 'asc' |
|||
} else { |
|||
this.order = 'desc' |
|||
} |
|||
this.initQueryTable(); |
|||
}, |
|||
initQueryChart() { |
|||
if(this.devices.length === 0){ |
|||
return; |
|||
} |
|||
this.setStatus("01", "doing"); |
|||
getSystemStatusList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.devices.join(','), |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
this.setStatus("01", "finish"); |
|||
let x = []; |
|||
let serie = []; |
|||
for(let i in res.data){ |
|||
const s = _.cloneDeep(chartsOption.series[0]); |
|||
if(x.length === 0){ |
|||
for(let j in res.data[i]){ |
|||
x.push(j) |
|||
} |
|||
} |
|||
const _deviceType = _.find(deviceType,{value:i}) |
|||
s.name = _deviceType.label |
|||
s.itemStyle.color = _deviceType.color |
|||
s.data = []; |
|||
for(let j in res.data[i]){ |
|||
const p = res.data[i][j]; |
|||
s.data.push(parseFloat(p.substr(0,p.length-1))); |
|||
} |
|||
serie.push(s); |
|||
} |
|||
|
|||
chartsOption.xAxis.data = x; |
|||
chartsOption.series= serie; |
|||
|
|||
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|||
this.queryChart.setOption(chartsOption); |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//查询列表 |
|||
initQueryTable() { |
|||
this.loading = true; |
|||
getSystemStatusTabList({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.devices.join(','), |
|||
pageNum: this.searchData.pageNum, |
|||
pageSize: this.searchData.pageSize, |
|||
orderByField:'device_status', |
|||
orderDirection:this.order |
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
this.loading = false; |
|||
this.total = res.total; |
|||
this.tableData = res.rows; |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
onDeviceChange(){ |
|||
//判断全选 |
|||
if(this.devices.indexOf('all') !== -1 && this.devicesSource.indexOf('all') === -1){ |
|||
this.devices = deviceType.map(x=>x.value); |
|||
} else if(this.devices.indexOf('all') === -1 && this.devicesSource.indexOf('all') !== -1){ |
|||
this.devices = []; |
|||
} else if(this.devicesSource.indexOf('all') !== -1 && this.devices.length !== deviceType.length){ |
|||
this.devices.splice(this.devices.indexOf('all'),1) |
|||
} |
|||
this.devicesSource = this.devices |
|||
this.initQueryChart(); |
|||
this.initQueryTable(); |
|||
}, |
|||
|
|||
onRefreshData() { |
|||
this.initQueryChart(); |
|||
this.searchData.pageNum = 1; |
|||
this.initQueryTable(); |
|||
}, |
|||
handleSearch(data) { |
|||
this.startTime = moment(data.time[0]).format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment(data.time[1]).format("YYYY-MM-DD HH:mm:ss"); |
|||
this.searchText = `${moment(this.startTime).format( |
|||
"YYYY年MM月DD日" |
|||
)}-${moment(this.time).format("YYYY年MM月DD日")}`; |
|||
this.initQueryChart(); |
|||
this.initQueryTable(); |
|||
}, |
|||
//导出 |
|||
SystemStatusExport() { |
|||
let loadingInstance = Loading.service({ |
|||
fullscreen: true, |
|||
background: "#00000052", |
|||
text: "文件正在下载...", |
|||
}); |
|||
getSystemStatusExport({ |
|||
startTime: this.startTime, |
|||
time: this.time, |
|||
type: this.devices.join(','), |
|||
}) |
|||
.then((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(); |
|||
}); |
|||
}, |
|||
}, |
|||
async mounted() { |
|||
this.startTime = moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"); |
|||
this.time = moment().format("YYYY-MM-DD HH:mm:ss"); |
|||
this.initQueryChart(); |
|||
this.initQueryTable(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.statisticAnalysisQuery { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.topdiv { |
|||
display: inline-flex; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 40px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 10px; |
|||
|
|||
.right-div { |
|||
display: inline; |
|||
width: 450px; |
|||
} |
|||
} |
|||
|
|||
.anacontent { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
.cleft{ |
|||
background-color: #101e25; |
|||
width: 300px; |
|||
height: 100%; |
|||
.device{ |
|||
padding: 10px 15px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
line-height: 45px; |
|||
} |
|||
} |
|||
.cright{ |
|||
flex: 1; |
|||
height: 100%; |
|||
margin-left: 15px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
} |
|||
.bodyTable{ |
|||
width: 100%; |
|||
height: 450px; |
|||
overflow-y: auto; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.queryChart { |
|||
|
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 343px; |
|||
padding: 0 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #101e25 100%); |
|||
// background-color: #101e25; |
|||
margin-bottom: 20px; |
|||
--keep-ratio: scaleX(1); |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.floatEmpty { |
|||
position: absolute; |
|||
z-index: 100; |
|||
// background: rgba($color: #000000, $alpha: 0.2); |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
|
|||
|
|||
.btnSearch { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color: #00d1ff; |
|||
border-color: #064258 !important; |
|||
border: 0px !important; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border: 0px !important; |
|||
background-color: transparent; |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__cell { |
|||
height: 47px; |
|||
padding-left: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color: #00d1ff; |
|||
height: 47px; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td { |
|||
background-color: #13272f; |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(even) td { |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse: 0; |
|||
border: 0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<div class="EventDetectionAnalysis"> |
|||
<section class="row_01"> |
|||
<Railway class="content-l" /> |
|||
<div class="content_r_g"> |
|||
<RailWayDay class="content_r_unit" /> |
|||
<DayTotal class="content_r_unit" /> |
|||
</div> |
|||
<div class="content_r_g"> |
|||
<EventSource class="content_r_unit" /> |
|||
<DailyDisposal class="content_r_unit" /> |
|||
</div> |
|||
<div class="content_r_g" style="margin-right: 0"> |
|||
<MonthStatistice class="content_r_unit" /> |
|||
<TypeAnalysis class="content_r_unit" /> |
|||
</div> |
|||
</section> |
|||
<EventQuery class="row_02" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Railway from "./components/railway/index.vue"; |
|||
import RailWayDay from "./components/railwayDay/index.vue"; |
|||
import DayTotal from "./components/dayTotal/index.vue"; |
|||
import EventSource from "./components/eventSource/index.vue"; |
|||
import DailyDisposal from "./components/dailyDisposal/index.vue"; |
|||
import TypeAnalysis from "./components/typeAnalysis/index.vue"; |
|||
import MonthStatistice from "./components/monthStatistics/index.vue"; |
|||
import EventQuery from "./components/eventQuery/index.vue"; |
|||
|
|||
export default { |
|||
name: "EventDetectionAnalysis", |
|||
components: { |
|||
Railway, |
|||
RailWayDay, |
|||
DayTotal, |
|||
EventSource, |
|||
DailyDisposal, |
|||
TypeAnalysis, |
|||
MonthStatistice, |
|||
EventQuery, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetectionAnalysis { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
|
|||
.row_01 { |
|||
flex-basis: 55%; |
|||
margin-bottom: 15px; |
|||
display: flex; |
|||
align-items: stretch; |
|||
pointer-events: none; |
|||
|
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
flex-basis: 25%; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.content_r_g { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-basis: 25%; |
|||
margin-right: 15px; |
|||
|
|||
.content_r_unit { |
|||
width: 100%; |
|||
flex-basis: 50%; |
|||
margin-bottom: 15px; |
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.row_02 { |
|||
flex: 1; |
|||
height: 0; |
|||
// pointer-events: none; |
|||
} |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 624 B |
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 385 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in new issue