803 lines
18 KiB
Vue
803 lines
18 KiB
Vue
<template>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<div class="left" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
|
||
<div class="leftBox1" :class="{ collapsed: isLeftCollapsed }">
|
||
<div class="leftOne">
|
||
<div class="title4">
|
||
<span>管廊概况</span>
|
||
<span class="remark" @click="showRemark">管廊介绍 ></span>
|
||
</div>
|
||
<div class="gl-info">
|
||
<dl>
|
||
<dt>管廊名称</dt>
|
||
<dd>礼和路(友谊大道-欢乐大道)综合管廊</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>舱室类型</dt>
|
||
<dd>高压舱、综合舱、热力舱</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>管廊长度</dt>
|
||
<dd>
|
||
<span style="font-size: 18px; color: #ff6100">2370</span>米
|
||
</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>分区总数</dt>
|
||
<dd style="font-size: 18px; color: #ff6100">14</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>起点</dt>
|
||
<dd>欢乐大道</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt>终点</dt>
|
||
<dd>友谊大道</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<div class="leftTwo">
|
||
<div class="title4">
|
||
<span class="calendar">设备情况统计</span>
|
||
</div>
|
||
<div class="warning">
|
||
<div class="PieChart1">
|
||
<PieChartdevice style="width: 100%; height: 100%" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftThree">
|
||
<div class="title4">
|
||
<span>能耗统计</span>
|
||
<el-select
|
||
v-model="nhValue"
|
||
size="small"
|
||
style="width: 100px"
|
||
class="custom-select"
|
||
>
|
||
<el-option :value="1" label="用电量">用电量</el-option>
|
||
<el-option :value="2" label="用水量">用水量</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="warning">
|
||
<div class="lineChart">
|
||
<line-charttpf
|
||
ref="linecharttpf"
|
||
:chartData="lineChartDataCO2"
|
||
style="width: 100%; height: 100%; margin-top: 5%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middleTop">
|
||
<plan></plan>
|
||
</div>
|
||
|
||
<div class="right" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
|
||
<div class="rightBox1" :class="{ collapsedR: isRightCollapsed }">
|
||
<div class="rightTwo">
|
||
<div class="title4">报警信息</div>
|
||
<div
|
||
class="warnList"
|
||
id="warnList"
|
||
:style="
|
||
!warnList.length
|
||
? 'display:flex;align-items: center;justify-content: center;'
|
||
: ''
|
||
"
|
||
>
|
||
<div
|
||
class="warnListContent"
|
||
v-for="(item, index) in warnList"
|
||
@click="selectWarningItem(index, item)"
|
||
:class="{ selected: warningIndex === index }"
|
||
:key="index"
|
||
id="warnListContent"
|
||
>
|
||
<div class="warnTitle">
|
||
<span>{{ item.details }}</span>
|
||
</div>
|
||
<div class="warnArray">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-left: 3%;
|
||
width: 100%;
|
||
"
|
||
>
|
||
<span>报警时间： {{ item.startTime }}</span>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 2%;
|
||
width: 100%;
|
||
"
|
||
>
|
||
<span style="text-align: left"
|
||
>报警地点： {{ item.regionName }}</span
|
||
>
|
||
<span style="margin-right: 5%" @click="chuli(item)"
|
||
><img src="../../assets/beij/ljcl.png" alt=""
|
||
/></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="noData" v-if="!warnList.length"></div>
|
||
</div>
|
||
</div>
|
||
<div class="leftThree">
|
||
<div class="title4">
|
||
<span>环境监测</span>
|
||
<el-select
|
||
v-model="nhValue"
|
||
size="small"
|
||
style="width: 80px"
|
||
class="custom-select"
|
||
>
|
||
<el-option :value="1" label="液位">液位</el-option>
|
||
<el-option :value="2" label="氧气">氧气</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="warning">
|
||
<div class="lineChart">
|
||
<line-charttpf
|
||
ref="linecharttpf2"
|
||
color="#FF8000"
|
||
unit="cm"
|
||
:chartData="lineChartDataCO2"
|
||
style="width: 100%; height: 100%; margin-top: 5%"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightThree">
|
||
<div class="title4">视频监控</div>
|
||
<div class="spjk">
|
||
<img src="../../assets//beij/videoimg.png" alt="" />
|
||
<img src="../../assets//beij/videoimg.png" alt="" />
|
||
<img src="../../assets//beij/videoimg.png" alt="" />
|
||
<img src="../../assets//beij/videoimg.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="componentShowC" v-if="modelOthersAlarm">
|
||
<keep-alive>
|
||
<component
|
||
:is="componentShow"
|
||
@closeStatus="getCloseStatus"
|
||
:waringData="waringData"
|
||
@getWarning="getWarning"
|
||
@statusC="statusN"
|
||
></component>
|
||
</keep-alive>
|
||
</div>
|
||
|
||
<el-dialog
|
||
v-model="showRemarkPanel"
|
||
title="管廊介绍"
|
||
:zIndex="9999"
|
||
width="500"
|
||
>
|
||
<span class="remark-content">
|
||
礼和路(友谊大道-欢乐大道)综合管廊设计范围北起友谊大道，南至欢乐大道，综合管廊工程约2.37公里综合管廊布置在道路机非隔离带下方，为三舱管廊，其中综合舱断面净尺寸BXH=2.6mx3.0m，高压电力舱断面净尺寸BXH=2.5mx3.0m，热力舱断面净尺寸BxH=2.5mX3.0m，管廊标准段覆土均为3.0m。
|
||
</span>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button class="close-btn" type="primary" @click="showRemarkPanel = false">
|
||
关闭
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LineCharttpf from "./LineChartTpf";
|
||
import LineChartduoneng from "./LineChartduoneng";
|
||
import PieChartdevice from "./PieChartdevice";
|
||
import plan from "../plan.vue";
|
||
export default {
|
||
name: "cockpit",
|
||
components: {
|
||
LineChartduoneng,
|
||
PieChartdevice,
|
||
LineCharttpf,
|
||
plan,
|
||
},
|
||
data() {
|
||
return {
|
||
modelOthersAlarm: false,
|
||
options: [],
|
||
nhValue: 1,
|
||
isLeftCollapsed: false,
|
||
isRightCollapsed: false,
|
||
warningIndex: -1,
|
||
lineChartData: {},
|
||
lineChartDataCO2: {},
|
||
warnList: [
|
||
{
|
||
id: "1",
|
||
startTime: "2024-03-18 15:26:08",
|
||
regionName: "南一门左例",
|
||
details: "甲醛浓度超标",
|
||
status: "已处理",
|
||
},
|
||
{
|
||
id: "1",
|
||
startTime: "2024-03-18 15:26:08",
|
||
regionName: "南一门左例",
|
||
details: "甲醛浓度超标",
|
||
status: "已处理",
|
||
},
|
||
], //报警数组
|
||
closeStatus: null,
|
||
waringData: {},
|
||
pickerVal: new Date(),
|
||
barList: {
|
||
xdata: [],
|
||
result: [],
|
||
},
|
||
showRemarkPanel: false
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.initlineChartDataCO2();
|
||
this.initlineChartDatayw();
|
||
},
|
||
|
||
methods: {
|
||
showRemark() {
|
||
this.showRemarkPanel = true;
|
||
},
|
||
getHoursFromZeroToTarget(endHour) {
|
||
const targetHour =
|
||
typeof endHour === "number"
|
||
? Math.max(0, Math.min(23, endHour))
|
||
: new Date().getHours();
|
||
const hourArr = [];
|
||
for (let hour = 0; hour <= targetHour; hour += 2) {
|
||
const formattedHour = hour.toString().padStart(2, "0");
|
||
hourArr.push(`${formattedHour}:00`);
|
||
}
|
||
return hourArr;
|
||
},
|
||
initlineChartDatayw() {
|
||
let time = this.getHoursFromZeroToTarget();
|
||
let expectedData = [];
|
||
let actualData = [];
|
||
let type = 1;
|
||
|
||
for (let i = 0; i < time.length; i++) {
|
||
expectedData.push(40 + Math.random() * 10);
|
||
actualData.push(40 + Math.random() * 10);
|
||
}
|
||
let lineChartDataCO2 = {
|
||
expectedData,
|
||
actualData,
|
||
time,
|
||
type,
|
||
};
|
||
this.$nextTick(() => {
|
||
this.$refs.linecharttpf2.initChart(lineChartDataCO2);
|
||
});
|
||
},
|
||
initlineChartDataCO2() {
|
||
let expectedData = [];
|
||
let actualData = [];
|
||
let time = [];
|
||
let type = 1;
|
||
|
||
for (let i = 0; i < 11; i++) {
|
||
expectedData.push(Math.random() * 100);
|
||
actualData.push(Math.random() * 100);
|
||
time.push(`2025-0${i + 1}`);
|
||
}
|
||
let lineChartDataCO2 = {
|
||
expectedData,
|
||
actualData,
|
||
time,
|
||
type,
|
||
};
|
||
this.$nextTick(() => {
|
||
this.$refs.linecharttpf.initChart(lineChartDataCO2);
|
||
});
|
||
},
|
||
getAssetUrl(imgName) {
|
||
let url = `../../assets/beij${imgName}`;
|
||
return new URL(url, import.meta.url).href;
|
||
},
|
||
},
|
||
beforeDestroy() {},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.picker {
|
||
width: 35%;
|
||
margin-right: 3%;
|
||
height: 100%;
|
||
|
||
::v-deep .el-date-editor {
|
||
height: 100%;
|
||
}
|
||
|
||
::v-deep .el-input--medium .el-input__inner {
|
||
height: 100%;
|
||
}
|
||
|
||
::v-deep .el-date-editor {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.el-year-table td {
|
||
text-align: center;
|
||
padding: 4px 3px !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-month-table td div {
|
||
height: 20px !important;
|
||
padding: 6px 0 !important;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.el-date-table td {
|
||
width: 32px;
|
||
height: 21px !important;
|
||
padding: 4px 0;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.el-date-table td div {
|
||
height: 12px !important;
|
||
padding: 3px 0;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.el-picker-panel__content {
|
||
position: relative;
|
||
margin: 15px;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.el-date-picker__header {
|
||
margin: 0px;
|
||
text-align: center;
|
||
}
|
||
|
||
.el-table--border .el-table__cell {
|
||
border-right: 0px solid #dfe6ec;
|
||
}
|
||
|
||
.el-table::before,
|
||
.el-table--group::after,
|
||
.el-table--border::after {
|
||
background: transparent !important;
|
||
}
|
||
|
||
::v-deep .el-dialog {
|
||
background: url("/src/assets/beij/nrk.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
box-shadow: 0 0 15px 3px rgba(212, 234, 255, 0.2),
|
||
0 0 30px 10px rgba(212, 234, 255, 0.1),
|
||
0 0 50px 15px rgba(212, 234, 255, 0.2);
|
||
}
|
||
|
||
.el-dialog__wrapper {
|
||
height: 90%;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
height: 86%;
|
||
overflow-y: auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.el-table--scrollable-y .el-table__body-wrapper {
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.el-table__empty-block {
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.miniTable .el-table__body-wrapper {
|
||
scrollbar-width: none !important;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
scrollbar-width: none !important;
|
||
}
|
||
|
||
.el-table .el-table__body tr.el-table__row:nth-child(odd) {
|
||
background: url("../../assets/beij/titletable2.png") !important;
|
||
background-size: 100% 100% !important;
|
||
}
|
||
</style>
|
||
|
||
<style rel="stylesheet/scss" lang="scss">
|
||
.noData {
|
||
background-image: url(../../assets/images/noData.png);
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.left {
|
||
width: 25%;
|
||
min-width: 475px;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 0% 0%;
|
||
background: url(../../assets/beij/left.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
top: 5%;
|
||
|
||
.leftBox1 {
|
||
height: 99%;
|
||
margin-left: 6px;
|
||
margin-top: 0%;
|
||
padding: 3%;
|
||
background: url(../../assets/beij/nrk.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
.leftOne {
|
||
height: 33%;
|
||
width: 100%;
|
||
.warnList {
|
||
height: 100%;
|
||
width: 30%;
|
||
margin-bottom: 1%;
|
||
margin-left: 2%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
color: #d4eaff;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.leftTwo {
|
||
height: 33%;
|
||
width: 100%;
|
||
.warning {
|
||
background-size: 100% 100%;
|
||
height: calc(100% - 20%);
|
||
margin-top: 1%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
.lineChart {
|
||
margin-left: 1%;
|
||
width: 96%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.middleTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 666;
|
||
top: 50%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate3d(-50%, -50%, 0);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.componentShowC {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 888;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.right {
|
||
width: 25%;
|
||
min-width: 475px;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 0% 0%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: url(../../assets/beij/right.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: 5%;
|
||
right: 0%;
|
||
.rightBox1 {
|
||
width: 99%;
|
||
height: 99%;
|
||
margin-right: 0;
|
||
margin-top: 0%;
|
||
background: url(../../assets/beij/nrk.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 3%;
|
||
margin-left: 5%;
|
||
.rightTwo {
|
||
height: 33%;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title4 {
|
||
width: 100%;
|
||
height: 12%;
|
||
justify-content: space-between;
|
||
background: url("../../assets/beij/tit.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #d4eaff;
|
||
font-size: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 17%;
|
||
box-sizing: border-box;
|
||
font-family: "PangmenZhengDao", sans-serif;
|
||
display: flex;
|
||
text-shadow: 0px 1px 3px #d4eaff;
|
||
.remark {
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 蓝色发光层 */
|
||
/* 白色发光层 */
|
||
.calendar {
|
||
display: inline-block;
|
||
// width: 50%;
|
||
|
||
.selectSmall .el-input__inner .el-input--medium .el-input__inner {
|
||
line-height: 22px !important;
|
||
}
|
||
}
|
||
|
||
.el-calendar__button-group {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
float: right;
|
||
margin-right: 3%;
|
||
}
|
||
}
|
||
|
||
.leftBox1 {
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
.leftBox1.collapsed {
|
||
width: 0px;
|
||
/* 缩起后的宽度 */
|
||
display: none;
|
||
}
|
||
|
||
.rightBox1 {
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
.rightBox1.collapsedR {
|
||
width: 0px;
|
||
display: none;
|
||
}
|
||
.PieChart1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
margin-left: 1%;
|
||
padding: 4px 4px 8px 4px;
|
||
border-radius: 3%;
|
||
}
|
||
.gl-info {
|
||
padding-left: 16px;
|
||
dl {
|
||
display: flex;
|
||
color: #d4eaff;
|
||
font-size: 16px;
|
||
margin: 0;
|
||
padding: 5px 0;
|
||
dt {
|
||
font-weight: bold;
|
||
width: 100px;
|
||
text-align: start;
|
||
}
|
||
dd {
|
||
color: #d4eaff90;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightTwo {
|
||
height: 34%;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.warning {
|
||
background-size: 100% 100%;
|
||
height: calc(100% - 20%);
|
||
margin-top: 1%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
.lineChart {
|
||
margin-left: 1%;
|
||
width: 96%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
|
||
.warnList {
|
||
background-size: 100% 100%;
|
||
height: calc(100% - 18%);
|
||
width: 100%;
|
||
margin-top: 1%;
|
||
overflow: auto;
|
||
padding: 3%;
|
||
|
||
.warnListContent {
|
||
height: 47%;
|
||
width: 100%;
|
||
background: url(../../assets/beij/baoj.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
margin-bottom: 3%;
|
||
color: #d4eaff;
|
||
font-size: 16px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
padding-left: 3%;
|
||
box-sizing: border-box;
|
||
font-size: 12px;
|
||
|
||
.warnTitle {
|
||
width: 100%;
|
||
height: 25%;
|
||
background: url("../../assets/beij/bjTit1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: left;
|
||
padding-top: 0.5%;
|
||
padding-left: 4%;
|
||
}
|
||
|
||
.warnArray {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #d4eaff;
|
||
// line-height: 20px;
|
||
line-height: 17px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.warnListContent.selected {
|
||
background: url(../../assets/beij/baojh1.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.warnListContent:hover {
|
||
background: url(../../assets/beij/baojh1.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.leftThree {
|
||
height: 33%;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.warning {
|
||
background-size: 100% 100%;
|
||
height: calc(100% - 20%);
|
||
margin-top: 1%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
.lineChart {
|
||
margin-left: 1%;
|
||
width: 96%;
|
||
// width: 96%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
::v-deep .custom-select {
|
||
height: 26px;
|
||
}
|
||
::v-deep .custom-select .el-select__wrapper {
|
||
background: transparent !important;
|
||
height: 26px;
|
||
min-height: 26px;
|
||
}
|
||
::v-deep .el-select__selected-item {
|
||
color: #fff;
|
||
}
|
||
|
||
.spjk {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 12px;
|
||
height: calc(100% - 32px);
|
||
img {
|
||
width: calc(50% - 6px);
|
||
height: calc(50%);
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.rightThree {
|
||
height: 33%;
|
||
}
|
||
.remark-content {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
text-align: start;
|
||
line-height: 28px;
|
||
}
|
||
.close-btn {
|
||
background: #d4eaff50;
|
||
border: 0;
|
||
}
|
||
</style>>
|
||
|