1896 lines
52 KiB
Vue
1896 lines
52 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="left">
|
||
<div class="leftOne">
|
||
<div class="title">智慧法庭</div>
|
||
<div class="wisdomContent">
|
||
<div class="wisdomTop">
|
||
<div
|
||
class="wisdomData"
|
||
v-for="(item, index) in wisdomList"
|
||
:key="index"
|
||
>
|
||
<div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
|
||
<div
|
||
:class="houseList[index]"
|
||
style="
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-size: 0.7rem;
|
||
"
|
||
>
|
||
{{ item.count }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wisdomBottom">
|
||
<div
|
||
class="wisdomCount"
|
||
v-for="(item, index) in wisdomMonArr"
|
||
:key="index"
|
||
>
|
||
<div style="width: 100%; font-size: 0.6rem">
|
||
<span>{{ item.name }}:</span>
|
||
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
|
||
item.count
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftTwo">
|
||
<div class="title" style="height: 18%">设备告警</div>
|
||
<div class="warning">
|
||
<div id="warningOne"></div>
|
||
<div id="warningTwo"></div>
|
||
</div>
|
||
</div>
|
||
<div class="leftThree">
|
||
<div class="warnListTitle">
|
||
<div class="titleTwo">
|
||
<span style="margin-left: 5%; font-size: 0.6rem">报警信息列表</span>
|
||
</div>
|
||
</div>
|
||
<div class="warnBtn">
|
||
<div
|
||
class="btnList"
|
||
v-for="(item, index) in warnBtnList"
|
||
:key="index"
|
||
:class="{ btnListAc: warnBtnAc == index }"
|
||
@click="warnSelect(index)"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="warnList">
|
||
<div
|
||
class="warnListContent"
|
||
v-for="(item, index) in warnList"
|
||
:key="index"
|
||
>
|
||
<div class="warnArray">
|
||
<span>{{ item.id }}</span>
|
||
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-left: 3%;
|
||
width: 100%;
|
||
"
|
||
>
|
||
<span>报警时间:{{ item.time }}</span>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 2%;
|
||
width: 100%;
|
||
"
|
||
>
|
||
<span style="text-align: left">报警原因:{{ item.cause }}</span>
|
||
<span style="margin-right: 5%">风险等级:{{ item.risk }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="rightOne">
|
||
<div class="title" style="height: 13%">运维管理</div>
|
||
<div class="maintenance">
|
||
<div class="maintenanceCount">
|
||
<div class="quantity">
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
"
|
||
>
|
||
<span>当日</span>
|
||
<img src="../assets/images/blueDian.png" style="width: 9%" />
|
||
<span style="margin-left: 2%">报警数：8</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
"
|
||
>
|
||
<img src="../assets/images/blueDian.png" style="width: 9%" />
|
||
<span>已完成单数：8</span>
|
||
</div>
|
||
</div>
|
||
<div class="quantity">
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
"
|
||
>
|
||
<span>统计</span>
|
||
<img src="../assets/images/blueDian.png" style="width: 9%" />
|
||
<span style="margin-left: 2%">派单数：8</span>
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
"
|
||
>
|
||
<img src="../assets/images/blueDian.png" style="width: 9%" />
|
||
<span>未完成单数：8</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="maintenanceEcharts">
|
||
<div id="maintenanceLeft"></div>
|
||
<div id="maintenanceRight"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightTwo">
|
||
<div class="title">智慧节能</div>
|
||
<div id="energyEcharts"></div>
|
||
<div class="pickerChange">
|
||
<el-select
|
||
v-model="selectDate"
|
||
:popper-append-to-body="false"
|
||
clearable
|
||
placeholder="请选择"
|
||
@change="selectDataList(selectDate)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in dateOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="selectChange">
|
||
<el-select
|
||
v-model="selectValue"
|
||
:popper-append-to-body="false"
|
||
clearable
|
||
placeholder="请选择"
|
||
@change="selectMeterType(selectValue)"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in options"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="rightThree">
|
||
<div class="title" style="height: 15%">摄像监控</div>
|
||
<div class="camera">
|
||
<div
|
||
class="cameraList"
|
||
v-for="(item, index) in cameraList"
|
||
:key="index"
|
||
@click="changeCamera(item.video)"
|
||
>
|
||
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
|
||
<!-- <iframe
|
||
:src="item.video"
|
||
ref="iframeRef"
|
||
frameborder="0"
|
||
style="width: 100%; height: 100%"
|
||
></iframe> -->
|
||
<camera
|
||
style="width: 100%; height: 100%"
|
||
:videoUrl="item.video"
|
||
:id="index"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="camersBig" v-if="cameraBigShow">
|
||
<!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
|
||
<!-- <iframe
|
||
:src="cameraBig"
|
||
ref="iframeRef"
|
||
frameborder="0"
|
||
style="width: 100%; height: 100%"
|
||
></iframe> -->
|
||
<cameraBig
|
||
style="width: 100%; height: 100%"
|
||
:cameraBig="cameraBigUrl"
|
||
ref="camersBig"
|
||
/>
|
||
<div class="close" @click="closeCamer"></div>
|
||
<div class="remoteControl">
|
||
<img
|
||
src="../assets/images/add.png"
|
||
style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
|
||
@click="addZoom"
|
||
/>
|
||
<img
|
||
src="../assets/images/reduce.png"
|
||
style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
|
||
@click="reduceZoom"
|
||
/>
|
||
</div>
|
||
<div class="remoteControl1">
|
||
<img
|
||
src="../assets/images/leftBtn.png"
|
||
style="width: 20%; height: 24%; cursor: pointer"
|
||
/>
|
||
<img
|
||
src="../assets/images/rightBtn.png"
|
||
style="width: 20%; height: 24%; cursor: pointer"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
GetLevelAlarm,
|
||
getAlarmStatistics,
|
||
getBuildinginfos,
|
||
getAreaList,
|
||
} from "../api/index";
|
||
import { getHikvision } from "../api/haikang";
|
||
import camera from "./camera/camera.vue";
|
||
import cameraBig from "./camera/cameraBig.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
dateData: "", //日期选择
|
||
wisdomList: [
|
||
{
|
||
name: "空闲中",
|
||
count: "7",
|
||
},
|
||
{
|
||
name: "已开庭",
|
||
count: "15",
|
||
},
|
||
{
|
||
name: "已预约",
|
||
count: "17",
|
||
},
|
||
], // 智慧法庭小房子
|
||
wisdomMonArr: [
|
||
{
|
||
name: "当月收案",
|
||
count: "28",
|
||
},
|
||
{
|
||
name: "当月结案",
|
||
count: "16",
|
||
},
|
||
{
|
||
name: "当月存案",
|
||
count: "12",
|
||
},
|
||
], //智慧法庭当月
|
||
houseList: ["blueHouse", "redHouse", "yellowHouse"],
|
||
warnBtnList: [
|
||
{
|
||
name: "全部",
|
||
},
|
||
{
|
||
name: "安防设备",
|
||
},
|
||
{
|
||
name: "建筑设备",
|
||
},
|
||
], //报警按钮
|
||
warnBtnAc: 0, //报警选中按钮
|
||
warnList: [
|
||
{
|
||
id: "1",
|
||
icon: require("../assets/images/warnBlue.png"),
|
||
time: "2023年03月18日 15:26:08",
|
||
cause: "<空调设备>发生事故",
|
||
risk: "三级",
|
||
},
|
||
{
|
||
id: "2",
|
||
icon: require("../assets/images/warnRed.png"),
|
||
time: "2023年03月18日 15:26:08",
|
||
cause: "<空调设备>发生事故",
|
||
risk: "三级",
|
||
},
|
||
{
|
||
id: "3",
|
||
icon: require("../assets/images/warnOrange.png"),
|
||
time: "2023年03月18日 15:26:08",
|
||
cause: "<空调设备>发生事故",
|
||
risk: "三级",
|
||
},
|
||
], //报警数组
|
||
selectValue: {
|
||
value: "79",
|
||
parentId: "-1",
|
||
label: "江北新区法院",
|
||
},
|
||
options: [
|
||
{
|
||
label: "A-VZCP1-1",
|
||
value: "1",
|
||
},
|
||
{
|
||
label: "A-VZCP1-2",
|
||
value: "2",
|
||
},
|
||
],
|
||
selectDate: "3",
|
||
dateOptions: [
|
||
{
|
||
label: "年",
|
||
value: "3",
|
||
},
|
||
{
|
||
label: "月",
|
||
value: "2",
|
||
},
|
||
{
|
||
label: "日",
|
||
value: "1",
|
||
},
|
||
],
|
||
cameraList: [
|
||
{
|
||
video: "",
|
||
},
|
||
{
|
||
video: "",
|
||
},
|
||
{
|
||
video: "",
|
||
},
|
||
{
|
||
video: "",
|
||
},
|
||
], //摄像
|
||
cameraBigUrl: "",
|
||
cameraBigShow: false,
|
||
buildingList: [],
|
||
alarmAllLevel: [],
|
||
alarmFirstLevel: [],
|
||
alarmSecondLevel: [],
|
||
alarmThirdLevel: [],
|
||
camersCode: "",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCamera();
|
||
//获取建筑id
|
||
this.getBuildingData();
|
||
let that = this;
|
||
window.alarmFirstLevel = this.alarmFirstLevel;
|
||
window.alarmSecondLevel = this.alarmSecondLevel;
|
||
window.alarmThirdLevel = this.alarmThirdLevel;
|
||
window.alarmAllLevel = this.alarmAllLevel;
|
||
this.warningOne();
|
||
this.warningTwo();
|
||
this.maintenanceLeft();
|
||
this.maintenanceRight();
|
||
// this.energyEcharts();
|
||
this.selectDataList(this.selectDate);
|
||
// window.createMqtt = this.createMqtt();
|
||
// window.addEventListener("message", function (e) {
|
||
// let val = e.data.val;
|
||
// if (val != null) {
|
||
// that.changeCamera("video/video.html?src=" + e.data.val);
|
||
// that.camersCode = e.data.code
|
||
// }
|
||
// });
|
||
// let camera = [
|
||
// {
|
||
// icon: require("../assets/images/camera.png"),
|
||
// video: "video/video.html?src=",
|
||
// },
|
||
// {
|
||
// icon: require("../assets/images/camera.png"),
|
||
// video: "video/video.html?src=",
|
||
// },
|
||
// {
|
||
// icon: require("../assets/images/camera.png"),
|
||
// video: "video/video.html?src=",
|
||
// },
|
||
// {
|
||
// icon: require("../assets/images/camera.png"),
|
||
// video: "video/video.html?src=",
|
||
// },
|
||
// ];
|
||
// setTimeout(() => {
|
||
// this.cameraList = camera;
|
||
// }, 1000);
|
||
this.warnSelect(0);
|
||
},
|
||
watch: {
|
||
alarmAllLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmAllLevel", val);
|
||
this.upmqttData(val);
|
||
},
|
||
|
||
alarmFirstLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmFirstLevel", val);
|
||
if (val.length != 0) {
|
||
this.upmqttData(val);
|
||
}
|
||
},
|
||
alarmSecondLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmSecondLevel", val);
|
||
this.upmqttData(val);
|
||
},
|
||
alarmThirdLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmThirdLevel", val);
|
||
this.upmqttData(val);
|
||
},
|
||
},
|
||
watch: {
|
||
alarmAllLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmAllLevel",val)
|
||
this.upmqttData(val)
|
||
},
|
||
|
||
alarmFirstLevel(val) {
|
||
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmFirstLevel",val)
|
||
if(val.length!=0){
|
||
this.upmqttData(val)
|
||
}
|
||
|
||
},
|
||
alarmSecondLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmSecondLevel",val)
|
||
this.upmqttData(val)
|
||
},
|
||
alarmThirdLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmThirdLevel",val)
|
||
this.upmqttData(val)
|
||
},
|
||
},
|
||
methods: {
|
||
//放大变焦
|
||
addZoom() {
|
||
console.log(this.camersCode, "sssssssssssss");
|
||
let dataList = {
|
||
path: "/artemis/api/video/v1/ptzs/controlling",
|
||
data: {
|
||
cameraIndexCode: this.camersCode,
|
||
action: "0",
|
||
command: "ZOOM_IN",
|
||
speed: "50",
|
||
},
|
||
};
|
||
getHikvision(dataList).then((res) => {
|
||
console.log(res, "=============");
|
||
});
|
||
},
|
||
//缩小变焦
|
||
reduceZoom() {
|
||
console.log(this.camersCode, "sssssssssssss");
|
||
let dataList = {
|
||
path: "/artemis/api/video/v1/ptzs/controlling",
|
||
data: {
|
||
cameraIndexCode: this.camersCode,
|
||
action: "0",
|
||
command: "ZOOM_OUT",
|
||
speed: "50",
|
||
},
|
||
};
|
||
getHikvision(dataList).then((res) => {
|
||
console.log(res, "=============");
|
||
});
|
||
},
|
||
//获取视频流
|
||
getCamera() {
|
||
this.cameraList[0].video =
|
||
"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
|
||
this.cameraList[1].video =
|
||
"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
|
||
this.cameraList[2].video =
|
||
"http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
|
||
this.cameraList[3].video =
|
||
"http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
|
||
let pathUrl = "/artemis/api/video/v2/cameras/previewURLs";
|
||
let dataList = {
|
||
path: pathUrl,
|
||
data: {
|
||
protocol: "hls",
|
||
cameraIndexCode: "620804559ecf4ade8f13b17337ea8bfa",
|
||
},
|
||
};
|
||
getHikvision(dataList).then((res) => {
|
||
this.cameraList[0].video =
|
||
"video/video.html?src=" +
|
||
res.data.result.data.url +
|
||
"&code=" +
|
||
dataList.data.cameraIndexCode;
|
||
});
|
||
let dataList1 = {
|
||
path: pathUrl,
|
||
data: {
|
||
protocol: "hls",
|
||
cameraIndexCode: "3efe8f887f164548a5db4266590a05ca",
|
||
},
|
||
};
|
||
getHikvision(dataList1).then((res) => {
|
||
this.cameraList[1].video =
|
||
"video/video.html?src=" +
|
||
res.data.result.data.url +
|
||
"&code=" +
|
||
dataList1.data.cameraIndexCode;
|
||
});
|
||
let dataList2 = {
|
||
path: pathUrl,
|
||
data: {
|
||
protocol: "hls",
|
||
cameraIndexCode: "f103ede0eb2b470f84e26ceec42486bc",
|
||
},
|
||
};
|
||
getHikvision(dataList2).then((res) => {
|
||
this.cameraList[2].video =
|
||
"video/video.html?src=" +
|
||
res.data.result.data.url +
|
||
"&code=" +
|
||
dataList2.data.cameraIndexCode;
|
||
});
|
||
let dataList3 = {
|
||
path: pathUrl,
|
||
data: {
|
||
protocol: "hls",
|
||
cameraIndexCode: "bf16be84f6f8410c8dca2dfc5369a532",
|
||
},
|
||
};
|
||
getHikvision(dataList3).then((res) => {
|
||
this.cameraList[3].video =
|
||
"video/video.html?src=" +
|
||
res.data.result.data.url +
|
||
"&code=" +
|
||
dataList3.data.cameraIndexCode;
|
||
});
|
||
},
|
||
//获取建筑Id
|
||
getBuildingData() {
|
||
getBuildinginfos().then((res) => {
|
||
// 接口取值
|
||
this.buildingList = res.data.dataResults;
|
||
let buildArr = [];
|
||
// this.options =
|
||
Object.keys(this.buildingList).map((item, index) => {
|
||
if (this.buildingList[index].name.indexOf("水") == -1) {
|
||
buildArr[buildArr.length] = this.buildingList[index];
|
||
}
|
||
// return {
|
||
// label: buildNameList,
|
||
// value: this.buildingList[index].id,
|
||
// parentId: this.buildingList[index].parentId,
|
||
// };
|
||
});
|
||
this.options = Object.keys(buildArr).map((item, index) => {
|
||
return {
|
||
label: buildArr[index].name,
|
||
value: this.buildingList[index].id,
|
||
parentId: this.buildingList[index].parentId,
|
||
};
|
||
});
|
||
});
|
||
},
|
||
//智慧节能选择时间
|
||
selectDataList(val) {
|
||
let nowTime = "";
|
||
if (val == 1) {
|
||
nowTime = this.$moment().format("YYYYMMDD");
|
||
} else if (val == 2) {
|
||
nowTime = this.$moment().format("YYYYMM");
|
||
} else {
|
||
nowTime = this.$moment().format("YYYY");
|
||
}
|
||
let data = {
|
||
buildingId: this.selectValue.value, //建筑id
|
||
customerId: "12345678",
|
||
date: nowTime,
|
||
dateType: val,
|
||
meterType: "1", //1.电,2.水
|
||
pbuildingId: this.selectValue.parentId, //建组父id
|
||
};
|
||
//接口获取区域
|
||
getAreaList(data).then((res) => {
|
||
this.energyEcharts(res.data.data);
|
||
});
|
||
},
|
||
//智慧节能选择类型
|
||
selectMeterType(event) {
|
||
let nowTime = "";
|
||
if (this.selectDate == 1) {
|
||
nowTime = this.$moment().format("YYYYMMDD");
|
||
} else if (this.selectDate == 2) {
|
||
nowTime = this.$moment().format("YYYYMM");
|
||
} else {
|
||
nowTime = this.$moment().format("YYYY");
|
||
}
|
||
let data = {
|
||
buildingId: event.value, //建筑id
|
||
customerId: "12345678",
|
||
date: nowTime,
|
||
dateType: this.selectDate,
|
||
meterType: "1", //1.电,2.水
|
||
pbuildingId: event.parentId, //建组父id
|
||
};
|
||
//接口获取区域
|
||
getAreaList(data).then((res) => {
|
||
console.log(res.data.data, "sssssssssssssss");
|
||
this.energyEcharts(res.data.data);
|
||
});
|
||
},
|
||
//选中图片
|
||
changeCamera(path) {
|
||
this.cameraBigUrl = path;
|
||
this.cameraBigShow = true;
|
||
},
|
||
closeCamer() {
|
||
this.cameraBigShow = false;
|
||
this.$refs.camersBig.closeVideo();
|
||
},
|
||
//报警选中
|
||
warnSelect(index) {
|
||
this.warnBtnAc = index;
|
||
if (index == 0) {
|
||
let params = {
|
||
AlarmLevel: "",
|
||
DeviceTypes: "",
|
||
};
|
||
GetLevelAlarm(params).then((res) => {
|
||
this.upWainData(res.data.data);
|
||
});
|
||
} else if (index == 1) {
|
||
let params = {
|
||
AlarmLevel: "",
|
||
DeviceTypes: "门禁,视频监控",
|
||
};
|
||
GetLevelAlarm(params).then((res) => {
|
||
this.upWainData(res.data.data);
|
||
});
|
||
} else {
|
||
let params = {
|
||
AlarmLevel: "",
|
||
DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
|
||
};
|
||
GetLevelAlarm(params).then((res) => {
|
||
this.upWainData(res.data.data);
|
||
});
|
||
}
|
||
},
|
||
//更新报警信息
|
||
upWainData(val) {
|
||
let icon = null;
|
||
this.warnList = Object.keys(val).map((item, index) => {
|
||
if (val[index].AlarmLevel == 1) {
|
||
val[index].AlarmLevel = "一级";
|
||
icon = require("../assets/images/warnRed.png");
|
||
} else if (val[index].AlarmLevel == 2) {
|
||
val[index].AlarmLevel = "二级";
|
||
icon = require("../assets/images/warnOrange.png");
|
||
} else if (val[index].AlarmLevel == 3) {
|
||
val[index].AlarmLevel = "三级";
|
||
icon = require("../assets/images/warnBlue.png");
|
||
}
|
||
return {
|
||
id: index + 1,
|
||
icon: icon,
|
||
time: this.$moment(val[index].AlarmTime).format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
),
|
||
cause: val[index].AlarmName,
|
||
DeviceType: val[index].DeviceType,
|
||
risk: val[index].AlarmLevel,
|
||
};
|
||
});
|
||
},
|
||
//获取mqtt数据
|
||
upmqttData(val) {
|
||
let icon = null;
|
||
var warnListMqtt = [];
|
||
warnListMqtt = Object.keys(val).map((item, index) => {
|
||
if (val[index].AlarmLevel == 1) {
|
||
val[index].AlarmLevel = "一级";
|
||
icon = require("../assets/images/warnRed.png");
|
||
} else if (val[index].AlarmLevel == 2) {
|
||
val[index].AlarmLevel = "二级";
|
||
icon = require("../assets/images/warnOrange.png");
|
||
} else if (val[index].AlarmLevel == 3) {
|
||
val[index].AlarmLevel = "三级";
|
||
icon = require("../assets/images/warnBlue.png");
|
||
}
|
||
return {
|
||
id: index + 1,
|
||
icon: icon,
|
||
time: this.$moment(val[index].AlarmTime).format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
),
|
||
cause: val[index].AlarmName,
|
||
DeviceType: val[index].DeviceType,
|
||
risk: val[index].AlarmLevel,
|
||
};
|
||
});
|
||
console.log("warnListMqtt", warnListMqtt);
|
||
for (let i = 0; i < warnListMqtt.length; i++) {
|
||
this.warnList.splice(0, 0, warnListMqtt[i]);
|
||
}
|
||
},
|
||
//设备左
|
||
warningOne() {
|
||
let data = [];
|
||
let dataX = [];
|
||
getAlarmStatistics({
|
||
Type: "消防",
|
||
}).then((res) => {
|
||
res.data.data.forEach((item, index) => {
|
||
data.push(item.Count);
|
||
dataX.push(item.Name);
|
||
});
|
||
var myChart = this.$echarts.init(document.getElementById("warningOne"));
|
||
let option = {
|
||
legend: {
|
||
show: true,
|
||
align: "left",
|
||
x: "45%",
|
||
orient: "vertical",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
data: [
|
||
// {
|
||
// name: "",
|
||
// icon: "",
|
||
// },
|
||
{
|
||
name: "消防报警",
|
||
},
|
||
],
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
grid: {
|
||
left: "13%",
|
||
right: "4%",
|
||
bottom: "15%",
|
||
top: "17%",
|
||
},
|
||
xAxis: {
|
||
data: dataX,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.3)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
// rotate: "45"
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "/次",
|
||
minInterval: 1,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
// scale: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.4)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.5)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "消防报警",
|
||
type: "bar",
|
||
barWidth: 20,
|
||
zlevel: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: this.$echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#01B1FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#033BFF",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize: "0.6rem",
|
||
color: "#fff",
|
||
position: "inside",
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
});
|
||
},
|
||
//设备右
|
||
warningTwo() {
|
||
let data = [];
|
||
let dataX = [];
|
||
getAlarmStatistics({
|
||
Type: "设备",
|
||
}).then((res) => {
|
||
res.data.data.forEach((item, index) => {
|
||
data.push(item.Count);
|
||
dataX.push(item.Name);
|
||
});
|
||
var myChart = this.$echarts.init(document.getElementById("warningTwo"));
|
||
let option = {
|
||
legend: {
|
||
show: true,
|
||
align: "left",
|
||
x: "45%",
|
||
orient: "vertical",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
data: [
|
||
// {
|
||
// name: "",
|
||
// icon: "",
|
||
// },
|
||
{
|
||
name: "设备报警",
|
||
},
|
||
],
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
grid: {
|
||
left: "13%",
|
||
right: "4%",
|
||
bottom: "15%",
|
||
top: "17%",
|
||
},
|
||
xAxis: {
|
||
data: dataX,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.3)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
// rotate: "45"
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "/次",
|
||
minInterval: 1,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
// scale: true,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.4)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgba(66, 164, 255,0.5)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "设备报警",
|
||
type: "bar",
|
||
barWidth: 20,
|
||
zlevel: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: this.$echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#01B1FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#033BFF",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize: "0.6rem",
|
||
color: "#fff",
|
||
position: "inside",
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
});
|
||
},
|
||
maintenanceLeft() {
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById("maintenanceLeft")
|
||
);
|
||
var data = [
|
||
{ value: "25", name: "报警" },
|
||
{ value: "25", name: "已完成" },
|
||
{ value: "25", name: "派单" },
|
||
{ value: "25", name: "未完成" },
|
||
];
|
||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||
let option = {
|
||
color: color,
|
||
title: {
|
||
left: "45%",
|
||
top: "35%",
|
||
textAlign: "center",
|
||
text: "当月次数统计",
|
||
textStyle: {
|
||
fontSize: "0.60rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
backgroundColor: "rgba(0,0,0,0.5)",
|
||
color: "#ffffff",
|
||
formatter: function (params) {
|
||
return (
|
||
// params.name +
|
||
// "<br/>" +
|
||
params.marker +
|
||
'<span style="color:' +
|
||
params.color +
|
||
'">' +
|
||
params.data["name"] +
|
||
"\n" +
|
||
params.data["value"] +
|
||
"%" +
|
||
"</span>"
|
||
);
|
||
},
|
||
},
|
||
legend: {
|
||
// orient: "vertical",
|
||
icon: "rect",
|
||
// left: "5%",
|
||
// top: "20%",
|
||
bottom: "0",
|
||
itemWidth: 14,
|
||
itemGap: 10,
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
padding: [0, 10, 0, 0],
|
||
},
|
||
b: {
|
||
color: "rgba(255,255,255,0)",
|
||
fontSize: "0rem",
|
||
padding: [0, 10, 0, 15],
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
var target, unit;
|
||
for (var i = 0, l = data.length; i < l; i++) {
|
||
if (data[i].name == name) {
|
||
target = data[i].value;
|
||
unit = data[i].unit;
|
||
}
|
||
}
|
||
return `{a| ${name}}{b|}`;
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["45%", "60%"],
|
||
center: ["48%", "40%"],
|
||
avoidLabelOverlap: true,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "outside",
|
||
formatter: "{d}%",
|
||
textStyle: {
|
||
align: "center",
|
||
baseline: "middle",
|
||
fontSize: "0.6rem",
|
||
fontWeight: "100",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 20,
|
||
length2: 10,
|
||
},
|
||
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
maintenanceRight() {
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById("maintenanceRight")
|
||
);
|
||
var data = [
|
||
{ value: "25", name: "报警" },
|
||
{ value: "25", name: "已完成" },
|
||
{ value: "25", name: "派单" },
|
||
{ value: "25", name: "未完成" },
|
||
];
|
||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||
let option = {
|
||
color: color,
|
||
title: {
|
||
left: "45%",
|
||
top: "35%",
|
||
textAlign: "center",
|
||
text: "上月次数统计",
|
||
textStyle: {
|
||
fontSize: "0.6rem",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
backgroundColor: "rgba(0,0,0,0.5)",
|
||
color: "#ffffff",
|
||
formatter: function (params) {
|
||
return (
|
||
// params.name +
|
||
// "<br/>" +
|
||
params.marker +
|
||
'<span style="color:' +
|
||
params.color +
|
||
'">' +
|
||
params.data["name"] +
|
||
"\n" +
|
||
params.data["value"] +
|
||
"%" +
|
||
"</span>"
|
||
);
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
// left: "5%",
|
||
// top: "20%",
|
||
bottom: "0",
|
||
itemWidth: 14,
|
||
itemGap: 10,
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
padding: [0, 10, 0, 0],
|
||
},
|
||
b: {
|
||
color: "rgba(255,255,255,0)",
|
||
fontSize: "0.1rem",
|
||
padding: [0, 10, 0, 10],
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
var target, unit;
|
||
for (var i = 0, l = data.length; i < l; i++) {
|
||
if (data[i].name == name) {
|
||
target = data[i].value;
|
||
unit = data[i].unit;
|
||
}
|
||
}
|
||
return `{a| ${name}}{b|${target}}`;
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["45%", "60%"],
|
||
center: ["48%", "40%"],
|
||
avoidLabelOverlap: true,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "outside",
|
||
formatter: "{d}%",
|
||
textStyle: {
|
||
align: "center",
|
||
baseline: "middle",
|
||
fontSize: "0.6rem",
|
||
fontWeight: "100",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 20,
|
||
length2: 10,
|
||
},
|
||
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
energyEcharts(val) {
|
||
console.log(val, "节能数据");
|
||
let dataX = [];
|
||
let dataY = [];
|
||
val.values.forEach((item, index) => {
|
||
dataX.push(item.dateDetail);
|
||
dataY.push(item.val);
|
||
});
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById("energyEcharts")
|
||
);
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: [
|
||
{
|
||
name: "用电",
|
||
itemStyle: {
|
||
color: "rgb(13,219,207)",
|
||
},
|
||
lineStyle: {
|
||
color: "rgb(13,219,207)",
|
||
},
|
||
},
|
||
],
|
||
textStyle: {
|
||
//文字样式
|
||
color: "#b4c9d1",
|
||
fontSize: "0.6rem",
|
||
},
|
||
top: "4%",
|
||
// left: "13%",
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "0%",
|
||
top: "25%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
//x轴坐标点
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
//x轴坐标线样式
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
//x轴线
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: [5, 10],
|
||
dashOffset: 10,
|
||
color: "#1282C8",
|
||
},
|
||
},
|
||
// boundaryGap: false,
|
||
data: dataX,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "kWH",
|
||
nameTextStyle: {
|
||
//y轴上方单位的颜色
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
type: "value",
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "rgb(104,106,108)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#1282C8",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: "0.6rem",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "用电",
|
||
type: "line",
|
||
smooth: 0.6,
|
||
minInterval: 1,
|
||
min: 0,
|
||
symbol: "circle",
|
||
symbolSize: 0,
|
||
lineStyle: {
|
||
normal: {
|
||
// 颜色渐变函数 前四个参数分别表示四个位置依次为
|
||
// 右下左上
|
||
color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(55,60,192)",
|
||
},
|
||
{
|
||
offset: 0.3,
|
||
color: "rgb(33,151,145)",
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "rgb(22,223,107)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(194,72,132)",
|
||
},
|
||
]), //线条渐变色
|
||
width: 4,
|
||
// shadowColor: "rgba(70, 55, 88, 0.35)",
|
||
// shadowBlur: 10,
|
||
// shadowOffsetX: 0,
|
||
// shadowOffsetY: 10,
|
||
},
|
||
},
|
||
// areaStyle: {
|
||
// color: {
|
||
// type: "linear",
|
||
// x: 0,
|
||
// y: 0,
|
||
// x2: 0,
|
||
// y2: 1,
|
||
// colorStops: [
|
||
// {
|
||
// offset: 0,
|
||
// color: "rgba(58, 46, 73, 0.9)", // 0% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: "rgba(56, 44, 71, 0.5)", // 100% 处的颜色
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "transparent", //0% 处的颜色
|
||
// },
|
||
// ],
|
||
// global: false, // 缺省为 false
|
||
// },
|
||
// },
|
||
data: dataY,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
createMqtt() {
|
||
//创建链接，接收数据
|
||
let topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
|
||
window.PubScribe(topicSends, this.realInfo);
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
switch (topic) {
|
||
// 接收托片
|
||
case "/SC/pub/uwb":
|
||
try {
|
||
const utf8decoder = new TextDecoder();
|
||
const u8arr = new Uint8Array(message);
|
||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg);
|
||
} catch (error) {}
|
||
break;
|
||
}
|
||
},
|
||
},
|
||
components: {
|
||
camera,
|
||
cameraBig,
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@fontSize: 0.55rem;
|
||
.main {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 0.3% 0 0.3%;
|
||
box-sizing: border-box;
|
||
.left {
|
||
width: 24.7%;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 1% 0.3%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
-webkit-animation-name: leftAnimation;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
-webkit-animation-iteration-count: 1;
|
||
-webkit-animation-duration: 1s;
|
||
.leftOne {
|
||
height: 22%;
|
||
width: 100%;
|
||
.wisdomContent {
|
||
height: calc(100% - 25%);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.wisdomTop {
|
||
width: 100%;
|
||
height: 75%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.wisdomData {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 70%;
|
||
width: 11%;
|
||
.blueHouse {
|
||
background: url(../assets/images/blueHouse.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10%;
|
||
}
|
||
.redHouse {
|
||
background: url(../assets/images/redHouse.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10%;
|
||
}
|
||
.yellowHouse {
|
||
background: url(../assets/images/yellowHouse.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10%;
|
||
}
|
||
}
|
||
}
|
||
.wisdomBottom {
|
||
height: calc(100% - 75%);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.wisdomCount {
|
||
height: 100%;
|
||
width: 15%;
|
||
color: #fff;
|
||
font-size: @fontSize;
|
||
background: url(../assets/images/flootLine.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.leftTwo {
|
||
height: 30%;
|
||
width: 100%;
|
||
.warning {
|
||
height: calc(100% - 25%);
|
||
width: 100%;
|
||
margin-top: 3%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
#warningOne {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
#warningTwo {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.leftThree {
|
||
height: 48%;
|
||
width: 100%;
|
||
.warnListTitle {
|
||
height: 6%;
|
||
width: 100%;
|
||
position: relative;
|
||
.titleTwo {
|
||
width: 20%;
|
||
height: 100%;
|
||
margin-left: 2%;
|
||
background: url(../assets/images/flootLine.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: 0.55rem;
|
||
position: absolute;
|
||
}
|
||
}
|
||
.warnBtn {
|
||
width: 100%;
|
||
height: 20%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.btnList {
|
||
// width: 13%;
|
||
// height: 38%;
|
||
width: 17%;
|
||
height: 41%;
|
||
background: url(../assets/images/warnBtn.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: @fontSize;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7rem;
|
||
}
|
||
.btnListAc {
|
||
// width: 13%;
|
||
// height: 38%;
|
||
width: 17%;
|
||
height: 41%;
|
||
background: url(../assets/images/warnBtnAc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: @fontSize;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
.warnList {
|
||
height: calc(100% - 31%);
|
||
width: 100%;
|
||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: auto;
|
||
.warnListContent {
|
||
height: 27%;
|
||
width: 100%;
|
||
border: 1px dashed #fff;
|
||
color: #fff;
|
||
font-size: @fontSize;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
padding-left: 3%;
|
||
box-sizing: border-box;
|
||
font-size: 0.7rem;
|
||
.warnArray {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
}
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
@keyframes leftAnimation {
|
||
0% {
|
||
position: relative;
|
||
left: 38%;
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
position: relative;
|
||
left: 0%;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.right {
|
||
width: 24.7%;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 0.3% 0.3%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
-webkit-animation-name: rightAnimation;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
-webkit-animation-iteration-count: 1;
|
||
-webkit-animation-duration: 1s;
|
||
.rightOne {
|
||
height: 38%;
|
||
width: 100%;
|
||
.maintenance {
|
||
height: calc(100% - 13%);
|
||
width: 100%;
|
||
padding: 0 2% 0 2%;
|
||
box-sizing: border-box;
|
||
.maintenanceCount {
|
||
width: 100%;
|
||
height: 30%;
|
||
background: url(../assets/images/maintenance.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 2%;
|
||
.quantity {
|
||
color: #fff;
|
||
font-size: @fontSize;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 50%;
|
||
}
|
||
}
|
||
.maintenanceEcharts {
|
||
width: 100%;
|
||
height: calc(100% - 30%);
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
#maintenanceLeft {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
#maintenanceRight {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rightTwo {
|
||
height: 25%;
|
||
width: 100%;
|
||
position: relative;
|
||
#energyEcharts {
|
||
width: 100%;
|
||
height: calc(100% - 25%);
|
||
}
|
||
.selectChange {
|
||
width: 23%;
|
||
height: 10%;
|
||
position: absolute;
|
||
top: 22%;
|
||
right: 5%;
|
||
/deep/ .el-select {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15px;
|
||
}
|
||
/deep/ .el-input__inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: transparent;
|
||
border: 1px solid rgb(1, 176, 202);
|
||
border-radius: 15px;
|
||
color: #fff;
|
||
}
|
||
/deep/ .el-select-dropdown {
|
||
background: transparent;
|
||
border: 1px solid rgb(1, 176, 202);
|
||
border-radius: 5px;
|
||
left: -30px !important;
|
||
}
|
||
/deep/ .el-select-dropdown__item {
|
||
color: turquoise;
|
||
}
|
||
/deep/ .el-select .el-input .el-select__caret {
|
||
color: rgb(1, 176, 202);
|
||
font-size: 0.3rem;
|
||
font-weight: 500;
|
||
}
|
||
/deep/ .el-input__suffix {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/deep/ .el-select-dropdown__wrap {
|
||
max-height: 171px;
|
||
}
|
||
}
|
||
.pickerChange {
|
||
width: 23%;
|
||
height: 10%;
|
||
position: absolute;
|
||
top: 22%;
|
||
right: 35%;
|
||
/deep/ .el-select {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15px;
|
||
}
|
||
/deep/ .el-input__inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: transparent;
|
||
border: 1px solid rgb(1, 176, 202);
|
||
border-radius: 15px;
|
||
color: #fff;
|
||
}
|
||
/deep/ .el-select-dropdown {
|
||
background: transparent;
|
||
border: 1px solid rgb(1, 176, 202);
|
||
border-radius: 5px;
|
||
// left: -30px !important;
|
||
}
|
||
/deep/ .el-select-dropdown__item {
|
||
color: turquoise;
|
||
}
|
||
/deep/ .el-select .el-input .el-select__caret {
|
||
color: rgb(1, 176, 202);
|
||
font-size: 0.3rem;
|
||
font-weight: 500;
|
||
}
|
||
/deep/ .el-input__suffix {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.rightThree {
|
||
height: 34%;
|
||
width: 100%;
|
||
.camera {
|
||
height: calc(100% - 15%);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
align-content: stretch;
|
||
.cameraList {
|
||
width: 47%;
|
||
height: 44%;
|
||
border: 3px solid rgb(1, 176, 202);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
@keyframes rightAnimation {
|
||
0% {
|
||
position: relative;
|
||
right: 38%;
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
position: relative;
|
||
right: 0%;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
height: 20%;
|
||
background: url("../assets/images/title.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 12%;
|
||
box-sizing: border-box;
|
||
}
|
||
.camersBig {
|
||
position: fixed;
|
||
top: 21%;
|
||
left: 26%;
|
||
width: 47.4%;
|
||
height: 50%;
|
||
border: 5px solid #01b0ca;
|
||
.close {
|
||
width: 4%;
|
||
height: 8%;
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: 1%;
|
||
right: 1%;
|
||
background: url("../assets/images/close.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.remoteControl {
|
||
width: 15%;
|
||
height: 27%;
|
||
position: absolute;
|
||
bottom: 2%;
|
||
right: 2%;
|
||
background: url("../assets/images/control.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.remoteControl1 {
|
||
width: 15%;
|
||
height: 27%;
|
||
position: absolute;
|
||
bottom: 2%;
|
||
right: 2%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|