2328 lines
66 KiB
Vue
2328 lines
66 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"
|
||
id="warnList"
|
||
@mouseenter="mouseOver"
|
||
@mouseleave="mouseLeave">
|
||
<div class="warnListContent"
|
||
v-for="(item, index) in warnList"
|
||
:key="index"
|
||
id="warnListContent">
|
||
<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="selectChange1">
|
||
<el-date-picker v-model="value1"
|
||
v-if="yearShow"
|
||
align="right"
|
||
type="year"
|
||
value-format="yyyy"
|
||
placeholder="选择年"
|
||
@change="selectTime"
|
||
popper-class="popperClass"
|
||
size="small">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="value2"
|
||
v-if="monthShow"
|
||
type="month"
|
||
value-format="yyyyMM"
|
||
placeholder="选择月"
|
||
@change="selectTimeMM"
|
||
popper-class="popperClass"
|
||
size="small">
|
||
</el-date-picker>
|
||
<el-date-picker v-model="value3"
|
||
size="small"
|
||
v-if="dateShow"
|
||
type="date"
|
||
placeholder="选择日"
|
||
value-format="yyyyMMdd"
|
||
@change="selectTimeDD"
|
||
popper-class="popperClass">
|
||
</el-date-picker>
|
||
</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: '', //日期选择
|
||
value1: '',
|
||
value2: '',
|
||
value3: '',
|
||
yearShow: true,
|
||
monthShow: false,
|
||
dateShow: false,
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now()
|
||
},
|
||
shortcuts: [
|
||
{
|
||
text: '今天',
|
||
onClick(picker) {
|
||
picker.$emit('pick', new Date())
|
||
},
|
||
},
|
||
{
|
||
text: '昨天',
|
||
onClick(picker) {
|
||
const date = new Date()
|
||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||
picker.$emit('pick', date)
|
||
},
|
||
},
|
||
],
|
||
size: 'min',
|
||
},
|
||
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, //报警选中按钮
|
||
warnListMqtt: [
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnBlue.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调>发生事故',
|
||
risk: 1,
|
||
},
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnRed.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: 2,
|
||
},
|
||
{
|
||
id: '3',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: 3,
|
||
},
|
||
{
|
||
id: '4',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: 1,
|
||
},
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: 2,
|
||
},
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: 3,
|
||
},
|
||
],
|
||
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: '三级',
|
||
},
|
||
{
|
||
id: '4',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: '三级',
|
||
},
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: '三级',
|
||
},
|
||
{
|
||
id: '5',
|
||
icon: require('../assets/images/warnOrange.png'),
|
||
time: '2023年03月18日 15:26:08',
|
||
cause: '<空调设备>发生事故',
|
||
risk: '三级',
|
||
},
|
||
{
|
||
id: '5',
|
||
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: 1,
|
||
dateOptions: [
|
||
{
|
||
label: '年',
|
||
value: 3,
|
||
},
|
||
{
|
||
label: '月',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '日',
|
||
value: 1,
|
||
},
|
||
],
|
||
cameraList: [
|
||
{
|
||
video: '',
|
||
},
|
||
{
|
||
video: '',
|
||
},
|
||
{
|
||
video: '',
|
||
},
|
||
{
|
||
video: '',
|
||
},
|
||
], //摄像
|
||
cameraBigUrl: '',
|
||
cameraBigShow: false,
|
||
buildingList: [],
|
||
alarmAllLevel: [],
|
||
alarmFirstLevel: [],
|
||
alarmSecondLevel: [],
|
||
alarmThirdLevel: [],
|
||
camersCode: '',
|
||
interval: null, //定时器
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this
|
||
this.value3 = this.$moment().format('yyyyMMDD')
|
||
this.selectTimeDD(this.value3)
|
||
// setTimeout(() => {
|
||
// this.getCamera();
|
||
//获取建筑id
|
||
that.getBuildingData()
|
||
window.alarmFirstLevel = that.alarmFirstLevel
|
||
window.alarmSecondLevel = that.alarmSecondLevel
|
||
window.alarmThirdLevel = that.alarmThirdLevel
|
||
window.alarmAllLevel = that.alarmAllLevel
|
||
that.warningOne()
|
||
that.warningTwo()
|
||
that.maintenanceLeft()
|
||
that.maintenanceRight()
|
||
// this.energyEcharts();
|
||
that.selectDataList(that.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);
|
||
that.warnSelect(0)
|
||
that.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
|
||
// }, 1000);
|
||
},
|
||
// 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, "=============");
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
selectTime(val) {
|
||
if (val) {
|
||
//console.log("val",val)
|
||
this.value1 = val
|
||
let data = {
|
||
buildingId: this.selectValue.value, //建筑id
|
||
customerId: '12345678',
|
||
date: this.value1,
|
||
dateType: 3,
|
||
meterType: '1', //1.电,2.水
|
||
pbuildingId: this.selectValue.parentId, //建组父id
|
||
}
|
||
//接口获取区域
|
||
getAreaList(data)
|
||
.then((res) => {
|
||
this.energyEcharts(res.data.data)
|
||
})
|
||
.catch((err) => {})
|
||
} else {
|
||
// this.filters.year = ""
|
||
// this.filters.month = ""
|
||
}
|
||
},
|
||
selectTimeMM(val) {
|
||
if (val) {
|
||
//console.log("val",val)
|
||
this.value2 = val
|
||
let data = {
|
||
buildingId: this.selectValue.value, //建筑id
|
||
customerId: '12345678',
|
||
date: this.value2,
|
||
dateType: 2,
|
||
meterType: '1', //1.电,2.水
|
||
pbuildingId: this.selectValue.parentId, //建组父id
|
||
}
|
||
//接口获取区域
|
||
getAreaList(data)
|
||
.then((res) => {
|
||
this.energyEcharts(res.data.data)
|
||
})
|
||
.catch((err) => {})
|
||
} else {
|
||
// this.filters.year = ""
|
||
// this.filters.month = ""
|
||
}
|
||
},
|
||
selectTimeDD(val) {
|
||
if (val) {
|
||
console.log('val', val)
|
||
this.value3 = val
|
||
let data = {
|
||
buildingId: this.selectValue.value, //建筑id
|
||
customerId: '12345678',
|
||
date: this.value3,
|
||
dateType: 1,
|
||
meterType: '1', //1.电,2.水
|
||
pbuildingId: this.selectValue.parentId, //建组父id
|
||
}
|
||
//接口获取区域
|
||
getAreaList(data)
|
||
.then((res) => {
|
||
this.energyEcharts(res.data.data)
|
||
})
|
||
.catch((err) => {})
|
||
} else {
|
||
// this.filters.year = ""
|
||
// this.filters.month = ""
|
||
}
|
||
},
|
||
//缩小变焦
|
||
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, "=============");
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
//获取视频流
|
||
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;
|
||
this.cameraList[0].video = res.data.result.data.url
|
||
// console.log(this.cameraList[0].video,'视频地址');
|
||
})
|
||
.catch((err) => {})
|
||
|
||
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;
|
||
this.cameraList[1].video = res.data.result.data.url
|
||
})
|
||
.catch((err) => {})
|
||
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;
|
||
this.cameraList[2].video = res.data.result.data.url
|
||
})
|
||
.catch((err) => {})
|
||
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;
|
||
this.cameraList[3].video = res.data.result.data.url
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
//获取建筑Id
|
||
getBuildingData() {
|
||
getBuildinginfos()
|
||
.then((res) => {
|
||
// console.log("res",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,
|
||
}
|
||
})
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
//智慧节能选择时间
|
||
// 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);
|
||
// }).catch(err => {
|
||
|
||
// });
|
||
// },
|
||
selectDataList(val) {
|
||
this.selectDate = val
|
||
if (val == 1) {
|
||
this.dateShow = true
|
||
this.monthShow = false
|
||
this.yearShow = false
|
||
} else if (val == 2) {
|
||
this.monthShow = true
|
||
this.yearShow = false
|
||
this.dateShow = false
|
||
} else {
|
||
this.yearShow = true
|
||
this.monthShow = false
|
||
this.dateShow = false
|
||
}
|
||
},
|
||
//智慧节能选择类型
|
||
selectMeterType(event) {
|
||
let nowTime = ''
|
||
//console.log("selectDate",this.selectDate)
|
||
if (this.selectDate == 1) {
|
||
// nowTime = this.$moment().format("YYYYMMDD");
|
||
nowTime = this.value1
|
||
} else if (this.selectDate == 2) {
|
||
// nowTime = this.$moment().format("YYYYMM");
|
||
nowTime = this.value2
|
||
} else if (this.selectDate == 3) {
|
||
// nowTime = this.$moment().format("YYYY");
|
||
nowTime = this.value3
|
||
}
|
||
//
|
||
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)
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
//选中图片
|
||
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)
|
||
})
|
||
.catch((err) => {})
|
||
} else {
|
||
let params = {
|
||
AlarmLevel: '',
|
||
DeviceTypes: 'VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗',
|
||
}
|
||
GetLevelAlarm(params)
|
||
.then((res) => {
|
||
this.upWainData(res.data.data)
|
||
})
|
||
.catch((err) => {})
|
||
}
|
||
},
|
||
//更新报警信息
|
||
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,
|
||
}
|
||
})
|
||
for (let i = 0; i < warnListMqtt.length; i++) {
|
||
this.warnList.splice(0, 0, warnListMqtt[i])
|
||
}
|
||
this.warnList = Object.keys(this.warnList).map((item, index) => {
|
||
if (this.warnList[index].AlarmLevel == 1) {
|
||
this.warnList[index].AlarmLevel = '一级'
|
||
icon = require('../assets/images/warnRed.png')
|
||
} else if (this.warnList[index].AlarmLevel == 2) {
|
||
this.warnList[index].AlarmLevel = '二级'
|
||
icon = require('../assets/images/warnOrange.png')
|
||
} else if (this.warnList[index].AlarmLevel == 3) {
|
||
this.warnList[index].AlarmLevel = '三级'
|
||
icon = require('../assets/images/warnBlue.png')
|
||
}
|
||
return {
|
||
id: index + 1,
|
||
icon: icon,
|
||
time: this.$moment(this.warnList[index].AlarmTime).format(
|
||
'YYYY-MM-DD HH:mm:ss'
|
||
),
|
||
cause: this.warnList[index].AlarmName,
|
||
DeviceType: this.warnList[index].DeviceType,
|
||
risk: this.warnList[index].AlarmLevel,
|
||
}
|
||
})
|
||
},
|
||
//设备左
|
||
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',
|
||
interval: 0,
|
||
},
|
||
},
|
||
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)
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
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
|
||
}
|
||
},
|
||
//自动滚动
|
||
autoScrollindex(stepLength, speed, delay, element) {
|
||
let that = this
|
||
let step = 1
|
||
element.scrollTop = 0
|
||
function start() {
|
||
that.interval = setInterval(scrolling, speed)
|
||
element.scrollTop += step
|
||
}
|
||
|
||
function scrolling() {
|
||
|
||
if (
|
||
element.scrollTop % stepLength !== 0 &&
|
||
element.scrollTop === element.scrollHeight - element.offsetHeight
|
||
) {
|
||
// element.scrollTop += step
|
||
step = 1
|
||
element.scrollTop = 0
|
||
} else {
|
||
|
||
// if (
|
||
// element.scrollTop === 0 ||
|
||
// element.scrollTop === element.scrollHeight - element.offsetHeight
|
||
// ) {
|
||
// // 触顶或触底\
|
||
// // step *= -1; // 转换方向
|
||
// }
|
||
clearInterval(that.interval)
|
||
setTimeout(start, delay)
|
||
}
|
||
}
|
||
if (element.offsetHeight !== element.scrollHeight) {
|
||
// 元素内容没有溢出时，不触发
|
||
setTimeout(start, delay)
|
||
}
|
||
},
|
||
//鼠标移入事件
|
||
mouseOver() {
|
||
let that = this
|
||
clearInterval(that.interval)
|
||
that.interval = null
|
||
},
|
||
mouseLeave() {
|
||
this.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
let that = this
|
||
// 离开当前路由前的操作
|
||
clearInterval(that.interval)
|
||
that.interval = null
|
||
},
|
||
components: {
|
||
camera,
|
||
cameraBig,
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.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: 25px;
|
||
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 {
|
||
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;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.el-month-table td div {
|
||
height: 20px !important;
|
||
padding: 6px 0 !important;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
.el-year-table td {
|
||
text-align: center;
|
||
padding: 4px 3px !important;
|
||
cursor: pointer;
|
||
}
|
||
.selectChange1 .popperClass .el-date-picker {
|
||
width: 180px !important;
|
||
height: 150px;
|
||
&__header-label {
|
||
font-size: 14px;
|
||
}
|
||
.el-picker-panel__content {
|
||
width: 180px;
|
||
height: 150px;
|
||
margin-left: 0;
|
||
}
|
||
.el-year-tabel td {
|
||
padding: 5px 0;
|
||
.cell {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<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%;
|
||
height: 52%;
|
||
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%);
|
||
// height:480px;
|
||
width: 100%;
|
||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: auto;
|
||
.warnListContent {
|
||
// height: 27%;
|
||
height: 25%;
|
||
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: 60%;
|
||
/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;
|
||
}
|
||
}
|
||
.selectChange1 {
|
||
width: 23%;
|
||
height: 10%;
|
||
position: absolute;
|
||
top: 22%;
|
||
right: 35%;
|
||
/deep/ .el-date-editor.el-input,
|
||
.el-date-editor.el-input__inner {
|
||
width: 134px;
|
||
}
|
||
/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-input__icon {
|
||
height: 100%;
|
||
width: 25px;
|
||
text-align: center;
|
||
-webkit-transition: all 0.3s;
|
||
transition: all 0.3s;
|
||
line-height: 22px;
|
||
}
|
||
/deep/ .el-input--suffix .el-input__inner {
|
||
padding-right: 18px;
|
||
}
|
||
}
|
||
}
|
||
.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>
|
||
|