chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-05-17 17:52:36 +08:00
parent e2950c6046 8da0a7aeb4
commit 01470cda34
13 changed files with 1604 additions and 1236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

92
src/App.vue
View File

@ -36,13 +36,15 @@
:class="{ menuAc: menuAc == index }" :class="{ menuAc: menuAc == index }"
> >
<!-- <img :src="item.icon" :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/> --> <!-- <img :src="item.icon" :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/> -->
<img <!-- <img
:src="item.icon" :src="item.icon"
:style="{ :style="{
wdith: menuAc == index ? '75%' : '55%', wdith: menuAc == index ? '75%' : '55%',
height: menuAc == index ? '85%' : '85%', height: menuAc == index ? '85%' : '85%',
}" }"
/> /> -->
<div :style="{'background-image':'url('+item.icon+')',wdith: menuAc == index ? '75%' : '55%',
height: menuAc == index ? '85%' : '85%',}" style="width:55%;height:85%;background-size: 100% 100%;"></div>
<div style="font-size: 0.55rem; margin-top: 5%">{{ item.name }}</div> <div style="font-size: 0.55rem; margin-top: 5%">{{ item.name }}</div>
</div> </div>
</div> </div>
@ -67,15 +69,7 @@ export default {
document.documentElement.clientWidth || document.documentElement.clientWidth ||
document.body.clientWidth, document.body.clientWidth,
time: "", time: "",
weekList: [ weekList: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
],
week: "", week: "",
floorAct: 0, floorAct: 0,
floorList: [ floorList: [
@ -138,9 +132,9 @@ export default {
// window.goPage = function(e) { // window.goPage = function(e) {
// console.log(e) // console.log(e)
// } // }
window['goPage'] = (b) => { window["goPage"] = (b) => {
// alert("goPage:"+b); // alert("goPage:"+b);
console.log("b") console.log("b");
}; };
// window['goIndex'] = (a) => { // window['goIndex'] = (a) => {
// console.log(a) // console.log(a)
@ -168,60 +162,58 @@ export default {
}; };
}, },
methods: { methods: {
goPage:function(name){ goPage: function (name) {
goPage(name) goPage(name);
}, },
// goIndex:function(){ // goIndex:function(){
// goIndex(e) // goIndex(e)
// }, // },
//菜单选中 //菜单选中
menuChange(index, name) { menuChange(index, name) {
this.menuBtn.forEach((item, index) => { this.menuBtn.forEach((item, i) => {
if (index == 0) { if (index != i) {
item.icon = require("./assets/images/shouYe.png"); if (i == 0) {
} else if (index == 1) { item.icon = require("./assets/images/shouYe.png");
item.icon = require("./assets/images/faTing.png"); } else if (i == 1) {
} else if (index == 2) { item.icon = require("./assets/images/faTing.png");
item.icon = require("./assets/images/jieNeng.png"); } else if (i == 2) {
} else if (index == 3) { item.icon = require("./assets/images/jieNeng.png");
item.icon = require("./assets/images/anFang.png"); } else if (i == 3) {
} else if (index == 4) { item.icon = require("./assets/images/anFang.png");
item.icon = require("./assets/images/yunWei.png"); } else if (i == 4) {
} else if (index == 5) { item.icon = require("./assets/images/yunWei.png");
item.icon = require("./assets/images/gaoJing.png"); } else if (i == 5) {
item.icon = require("./assets/images/gaoJing.png");
}
} }
}); });
if (index == 0) { if (index == 0) {
this.$router.push("/");
this.menuBtn[index].icon = require("./assets/images/shouYeAc.png"); this.menuBtn[index].icon = require("./assets/images/shouYeAc.png");
this.$router.push("/");
} else if (index == 1) { } else if (index == 1) {
this.$router.push("court");
this.menuBtn[index].icon = require("./assets/images/faTingAc.png"); this.menuBtn[index].icon = require("./assets/images/faTingAc.png");
this.$router.push("court");
} else if (index == 2) { } else if (index == 2) {
this.$router.push("energySaving");
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png"); this.menuBtn[index].icon = require("./assets/images/jieNengAc.png");
this.$router.push("energySaving");
} else if (index == 3) { } else if (index == 3) {
this.$router.push("security");
this.menuBtn[index].icon = require("./assets/images/anFangAc.png"); this.menuBtn[index].icon = require("./assets/images/anFangAc.png");
this.$router.push("security");
} else if (index == 4) { } else if (index == 4) {
this.$router.push("operationMaintenance");
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png"); this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png");
this.$router.push("operationMaintenance");
} else if (index == 5) { } else if (index == 5) {
this.$router.push("alarm");
this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png"); this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png");
this.$router.push("alarm");
} }
this.goPage(name); this.goPage(name);
// if (name!="首页"){ // if (name!="首页"){
// this.goPage(name); // this.goPage(name);
// }else{ // }else{
// this.goIndex('进入首页'); // this.goIndex('进入首页');
// } // }
this.menuAc = index; this.menuAc = index;
}, },
//选中楼层 //选中楼层
@ -270,7 +262,7 @@ export default {
#app { #app {
// width: 6144px; // width: 6144px;
// height: 1920px; // height: 1920px;
background: rgba(1, 1, 7, 1); background: rgba(1, 1, 7, 0);
// overflow: hidden; // overflow: hidden;
.header { .header {
height: 11%; height: 11%;

19
src/api/index.js
View File

@ -10,43 +10,48 @@ import axios from 'axios'
//根据等级获取报警数据 //根据等级获取报警数据
export const GetLevelAlarm = (params) => { export const GetLevelAlarm = (params) => {
return axios.get('api/GetLevelAlarm', { return axios.get('api/GetLevelAlarm', {
params params,
// timeout:5000
}) })
}; };
//获取昨天、今天报警数量 //获取昨天、今天报警数量
export const getSecurityAlarmCount = (params) => { export const getSecurityAlarmCount = (params) => {
return axios.get('api/GetSecurityAlarmCount', { return axios.get('api/GetSecurityAlarmCount', {
params params,
// timeout:5000
}) })
}; };
//获取报警统计接口 //获取报警统计接口
export const getAlarmStatistics = (params) => { export const getAlarmStatistics = (params) => {
return axios.get('api/GetAlarmStatistics', { return axios.get('api/GetAlarmStatistics', {
params params,
// timeout:5000
}) })
}; };
// 获取建筑信息接口 // 获取建筑信息接口
export const getBuildinginfos = (params) => { export const getBuildinginfos = (params) => {
return axios.get('ecs-server/services/getBuildinginfos', { return axios.get('ecs-server/services/getBuildinginfos', {
params params,
// timeout:5000
}) })
}; };
// 获取分项用能信息接口 // 获取分项用能信息接口
export const getSubitemList = (data) => { export const getSubitemList = (data) => {
return axios.post('ecs-server/services/ecm/subitemList', return axios.post('ecs-server/services/ecm/subitemList',
data data,
) )
}; };
// 获取所有设备信息 // 获取所有设备信息
export const getAllDevices = (params) => { export const getAllDevices = (params) => {
return axios.get('ecs-server/services/getAllDevices', { return axios.get('ecs-server/services/getAllDevices', {
params params,
// timeout:5000
}) })
}; };
// 获取设备实时数据信息 // 获取设备实时数据信息
export const getRealData = (data) => { export const getRealData = (data) => {
return axios.post('ecs-server/services/getRealData', return axios.post('ecs-server/services/getRealData',
data data,
) )
}; };
// 获取区域用能数据信息 // 获取区域用能数据信息

11
src/main.js
View File

@ -47,9 +47,9 @@ window.PubScribe = function (topic, _callback,) {
qos: 0 qos: 0
}, (err) => { }, (err) => {
if (!err) { if (!err) {
console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']); //console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
} else { } else {
console.log('订阅失败'); //console.log('订阅失败');
} }
}); });
@ -93,7 +93,6 @@ function realInfo(topic, message) {
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length); window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
@ -103,7 +102,6 @@ function realInfo(topic, message) {
// alarmAllLevel // alarmAllLevel
//消防，电梯、动环系统 //消防，电梯、动环系统
} catch (error) {} } catch (error) {}
console.log(error);
break; break;
case "SecondLevel": case "SecondLevel":
try { try {
@ -111,13 +109,11 @@ function realInfo(topic, message) {
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length); window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
window.alarmSecondLevel.push(msg[i]) window.alarmSecondLevel.push(msg[i])
} }
} catch (error) {} } catch (error) {}
console.log(error);
break; break;
case "ThirdLevel": case "ThirdLevel":
try { try {
@ -125,13 +121,12 @@ function realInfo(topic, message) {
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length); window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
window.alarmThirdLevel.push(msg[i]) window.alarmThirdLevel.push(msg[i])
} }
} catch (error) {} } catch (error) {}
console.log(error);
break; break;
} }
} }

1
src/utils/mqttConfig.js
View File

@ -35,7 +35,6 @@ class mqttHandle {
//配置链接 //配置链接
// console.log("connectUrl",connectUrl) // console.log("connectUrl",connectUrl)
const { host, port, endpoint, ...options } = this.connect; const { host, port, endpoint, ...options } = this.connect;
console.log("this.connect.host", this.connect.host)
const connectUrl = 'ws://138.227.208.100:1884/mqtt'; const connectUrl = 'ws://138.227.208.100:1884/mqtt';
//const connectUrl = 'ws://172.16.1.253:1884/mqtt'; //const connectUrl = 'ws://172.16.1.253:1884/mqtt';
if (this.mqttClient == undefined) { if (this.mqttClient == undefined) {

101
src/utils/request.js Normal file
View File

@ -0,0 +1,101 @@
import axios from 'axios'
import {
Message
} from 'element-ui'
import qs from 'qs'
import { debounce } from 'throttle-debounce'
import Lockr from 'lockr'
const errorMessage = debounce(500, (message, type = 'error') => {
Message({
message: message,
duration: 1500,
type: type
})
})
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
withCredentials: true,
timeout: 600000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
config.headers['Admin-Token'] = Lockr.get('Admin-Token') ? Lockr.get('Admin-Token') : ''
const flag = config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('application/json') !== -1
if (!flag) {
const mult = config.headers['Content-Type'] && config.headers['Content-Type'].indexOf('multipart/form-data') !== -1
if (mult) {
config.data = config.data
} else {
config.data = qs.stringify(config.data)
}
} else {
if (config.data === undefined || config.data === null) {
// 不传参的情况下 json类型的提交数据，校准为 空对象
config.data = {}
}
}
return config
},
error => {
// Do something with request error
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (response.status === 200 && response.config.responseType === 'blob') { // 文件类型特殊处理
if (response.headers['content-disposition'] || (response.headers['content-type'] && response.headers['content-type'].indexOf('application/pdf') !== -1)) {
return response
} else if (response.data) {
const resultBlob = new Blob([response.data], { type: 'application/json' })
const fr = new FileReader()
fr.onload = function () {
const result = JSON.parse(this.result)
// 附件下载反馈的302 忽略
if (result.msg && result.code !== 302) {
errorMessage(result.msg, result.code === 1 ? 'success' : 'error')
}
}
fr.readAsText(resultBlob)
}
} else if (response.status === 400) {
      SingleMessage({
        message: '请输入正确的登录信息！！！',
        type: 'warning',
        duration: 3 * 1000
      })
}else if ((res.code && res.code !== 0) || res.error) {
if (res.msg) {
errorMessage(res.msg)
}
return Promise.reject(res)
} else {
return res
}
},
error => {
if (error.response) {
const response = error.response
if (response.status === 500) {
errorMessage('网络错误，请检查您的网络')
} else if (response.data && response.data.msg) {
errorMessage(response.data.msg)
}
}
return Promise.reject(error)
}
)
export default service

424
src/views/alarm.vue
View File

@ -3,12 +3,13 @@
<div class="left"> <div class="left">
<div class="leftOne"> <div class="leftOne">
<div class="title">预计统计列表 一级</div> <div class="title">预计统计列表 一级</div>
<div class="courtHouse"> <div
<div class="courtHouse"
class="warnListContent" id="courtHouse"
v-for="(item, index) in warnList1" @mouseenter="mouseOver"
:key="index" @mouseleave="mouseLeave"
> >
<div class="warnListContent" v-for="(item, index) in warnList1" :key="index">
<div class="warnArray"> <div class="warnArray">
<!-- <span>{{ item.id }}</span> --> <!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" /> <img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -17,15 +18,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span> 报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div> </div>
<div style="margin-top: 2%"> <div style="margin-top: 2%">
报警原因:<span class="spancolor">{{ 报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
"「" + item.cause + "」"
}}</span>
<!-- <span>{{ item.content }}</span> --> <!-- <span>{{ item.content }}</span> -->
</div> </div>
<div style="margin-top: 2%; float: left"> <div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{ 风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
"「" + item.risk + "」"
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -34,12 +31,13 @@
</div> </div>
<div class="leftTwo"> <div class="leftTwo">
<div class="title">预计统计列表 二级</div> <div class="title">预计统计列表 二级</div>
<div class="courtHouse"> <div
<div class="courtHouse"
class="warnListContent" id="courtHouse2"
v-for="(item, index) in warnList2" @mouseenter="mouseOver2"
:key="index" @mouseleave="mouseLeave2"
> >
<div class="warnListContent" v-for="(item, index) in warnList2" :key="index">
<div class="warnArray"> <div class="warnArray">
<!-- <span>{{ item.id }}</span> --> <!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" /> <img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -48,15 +46,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span> 报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div> </div>
<div style="margin-top: 2%"> <div style="margin-top: 2%">
报警原因:<span class="spancolor">{{ 报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
"「" + item.cause + "」"
}}</span>
<!-- <span>{{ item.content }}</span> --> <!-- <span>{{ item.content }}</span> -->
</div> </div>
<div style="margin-top: 2%; float: left"> <div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{ 风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
"「" + item.risk + "」"
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -67,12 +61,13 @@
</div> </div>
<div class="right"> <div class="right">
<div class="title">预计统计列表 三级</div> <div class="title">预计统计列表 三级</div>
<div class="courtHouse"> <div
<div class="courtHouse"
class="warnListContent" id="courtHouse3"
v-for="(item, index) in warnList3" @mouseenter="mouseOver3"
:key="index" @mouseleave="mouseLeave3"
> >
<div class="warnListContent" v-for="(item, index) in warnList3" :key="index">
<div class="warnArray"> <div class="warnArray">
<!-- <span>{{ item.id }}</span> --> <!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" /> <img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -81,16 +76,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span> 报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div> </div>
<div style="margin-top: 2%"> <div style="margin-top: 2%">
报警原因:<span class="spancolor">{{ 报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
"「" + item.cause + "」"
}}</span
>
<!-- <span>{{ item.content }}</span> --> <!-- <span>{{ item.content }}</span> -->
</div> </div>
<div style="margin-top: 2%; float: left"> <div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{ 风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
"「" + item.risk + "」"
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -107,6 +97,9 @@ export default {
name: "court", name: "court",
data() { data() {
return { return {
intervalTime: null, //定时器
intervalTime1: null, //定时器
intervalTime2: null, //定时器
//报警数组 一级 //报警数组 一级
warnList1: [], warnList1: [],
//报警数组 二级 //报警数组 二级
@ -132,123 +125,130 @@ export default {
}, },
], // 智慧法庭小房子 ], // 智慧法庭小房子
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"], houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
alarmFirstLevel:[], alarmFirstLevel: [],
alarmSecondLevel:[], alarmSecondLevel: [],
alarmThirdLevel:[], alarmThirdLevel: [],
}; };
}, },
mounted() { mounted() {
window.alarmFirstLevel = this.alarmFirstLevel // setTimeout(() => {
window.alarmSecondLevel= this.alarmSecondLevel window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmThirdLevel= this.alarmThirdLevel window.alarmSecondLevel = this.alarmSecondLevel;
// window.createMqtt = this.createMqtt(); window.alarmThirdLevel = this.alarmThirdLevel;
// console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222'); // window.createMqtt = this.createMqtt();
//一级告警 // console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
this.getFirstAlarm(); //一级告警
//二级告警 this.getFirstAlarm();
this.getSecondAlarm(); //二级告警
//三级告警 this.getSecondAlarm();
this.getThirdAlarm(); //三级告警
// this.getThirdAlarm();
//
let name = "courtHouse2";
let name1 = "courtHouse3";
this.autoScroll2(67, 50, 0, document.getElementById("courtHouse"));
this.autoScroll(67, 50, 0, document.getElementById("courtHouse2"), name);
this.autoScroll(67, 50, 0, document.getElementById("courtHouse3"), name1);
// }, 1000);
}, },
watch: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val) //console.log("alarmFirstLevel",val)
if(val.length!=0){ if (val.length != 0) {
this.upmqttData(val) this.upmqttData(val);
} }
}, },
alarmSecondLevel(val) { alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val) //console.log("alarmSecondLevel",val)
this.upmqttData(val) this.upmqttData(val);
}, },
alarmThirdLevel(val) { alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val) //console.log("alarmThirdLevel",val)
this.upmqttData(val) this.upmqttData(val);
}, },
}, },
methods: { methods: {
//获取一级告警 //获取一级告警
getFirstAlarm() { getFirstAlarm() {
GetLevelAlarm({ GetLevelAlarm({
AlarmLevel: "1", AlarmLevel: "1",
DeviceTypes:'' DeviceTypes: "",
}).then((res) => { })
this.warnList1 = Object.keys(res.data.data).map((item, index) => { .then((res) => {
if (res.data.data[index].AlarmLevel == 1) { this.warnList1 = Object.keys(res.data.data).map((item, index) => {
res.data.data[index].AlarmLevel = "一级"; if (res.data.data[index].AlarmLevel == 1) {
} res.data.data[index].AlarmLevel = "一级";
return { }
id: index+1, return {
icon: require("../assets/images/warnRed.png"), id: index + 1,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"), icon: require("../assets/images/warnRed.png"),
cause: res.data.data[index].AlarmName, time: this.$moment(res.data.data[index].AlarmTime).format(
risk: res.data.data[index].AlarmLevel, "YYYY-MM-DD HH:mm:ss"
}; ),
}); cause: res.data.data[index].AlarmName,
}).catch(err => { risk: res.data.data[index].AlarmLevel,
};
}); });
})
.catch((err) => {});
}, },
//获取二级告警 //获取二级告警
getSecondAlarm() { getSecondAlarm() {
GetLevelAlarm({ GetLevelAlarm({
AlarmLevel: "2", AlarmLevel: "2",
DeviceTypes:'' DeviceTypes: "",
}).then((res) => { })
this.warnList2 = Object.keys(res.data.data).map((item, index) => { .then((res) => {
if (res.data.data[index].AlarmLevel == 2) { this.warnList2 = Object.keys(res.data.data).map((item, index) => {
res.data.data[index].AlarmLevel = "二级"; if (res.data.data[index].AlarmLevel == 2) {
} res.data.data[index].AlarmLevel = "二级";
return { }
id: index + 1, return {
icon: require("../assets/images/warnOrange.png"), id: index + 1,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"), icon: require("../assets/images/warnOrange.png"),
cause: res.data.data[index].AlarmName, time: this.$moment(res.data.data[index].AlarmTime).format(
risk: res.data.data[index].AlarmLevel, "YYYY-MM-DD HH:mm:ss"
}; ),
}); cause: res.data.data[index].AlarmName,
}).catch(err => { risk: res.data.data[index].AlarmLevel,
};
}); });
})
.catch((err) => {});
}, },
//获取三级告警 //获取三级告警
getThirdAlarm() { getThirdAlarm() {
GetLevelAlarm({ GetLevelAlarm({
AlarmLevel: "3", AlarmLevel: "3",
DeviceTypes:'' DeviceTypes: "",
}).then((res) => { })
this.warnList3 = Object.keys(res.data.data).map((item, index) => { .then((res) => {
if (res.data.data[index].AlarmLevel == 3) { this.warnList3 = Object.keys(res.data.data).map((item, index) => {
res.data.data[index].AlarmLevel = "三级"; if (res.data.data[index].AlarmLevel == 3) {
} res.data.data[index].AlarmLevel = "三级";
return { }
id: index + 1, return {
icon: require("../assets/images/warnBlue.png"), id: index + 1,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"), icon: require("../assets/images/warnBlue.png"),
cause: res.data.data[index].AlarmName, time: this.$moment(res.data.data[index].AlarmTime).format(
risk: res.data.data[index].AlarmLevel, "YYYY-MM-DD HH:mm:ss"
}; ),
}); cause: res.data.data[index].AlarmName,
}).catch(err => { risk: res.data.data[index].AlarmLevel,
};
}); });
})
.catch((err) => {});
}, },
//获取mqtt数据 //获取mqtt数据
upmqttData(val) { upmqttData(val) {
let icon = null; let icon = null;
var warnListMqtt = [] var warnListMqtt = [];
warnListMqtt = Object.keys(val).map((item, index) => { warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) { if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级"; val[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png"); icon = require("../assets/images/warnRed.png");
} else if (val[index].AlarmLevel == 2) { } else if (val[index].AlarmLevel == 2) {
@ -258,25 +258,165 @@ export default {
val[index].AlarmLevel = "三级"; val[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png"); icon = require("../assets/images/warnBlue.png");
} }
return { return {
id: index + 1, id: index + 1,
icon:icon, icon: icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"), time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName, cause: val[index].AlarmName,
risk: val[index].AlarmLevel, risk: val[index].AlarmLevel,
}; };
}); });
console.log("warnListMqtt",warnListMqtt) //console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) { for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].risk=='三级'){ if (warnListMqtt[i].risk == "三级") {
this.warnList3.splice(0,0,warnListMqtt[i]); this.warnList3.splice(0, 0, warnListMqtt[i]);
}else if(warnListMqtt[i].risk=='二级'){ } else if (warnListMqtt[i].risk == "二级") {
this.warnList2.splice(0,0,warnListMqtt[i]); this.warnList2.splice(0, 0, warnListMqtt[i]);
} if(warnListMqtt[i].risk=='一级'){
this.warnList1.splice(0,0,warnListMqtt[i]);
}
} }
if (warnListMqtt[i].risk == "一级") {
this.warnList1.splice(0, 0, warnListMqtt[i]);
}
}
}, },
autoScroll(stepLength, speed, delay, element, name) {
let that = this;
if (name == "courtHouse2") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime1 = 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.intervalTime1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
} else if (name == "courtHouse3") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime2 = 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.intervalTime2);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
}
},
autoScroll2(stepLength, speed, delay, element) {
let that = this;
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
let scrollTop1 = element.scrollTop + 1;
if (
scrollTop1 % stepLength !== 0 &&
scrollTop1 === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
if (
element.scrollTop === 0 ||
scrollTop1 === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
}
clearInterval(that.intervalTime);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
},
mouseLeave() {
this.autoScroll2(67, 50, 0, document.getElementById("courtHouse"));
},
//鼠标移入事件
mouseOver2() {
let that = this;
clearInterval(that.intervalTime1);
},
mouseLeave2() {
let name = 'courtHouse2'
this.autoScroll(67, 50, 0, document.getElementById("courtHouse2"),name);
},
//鼠标移入事件
mouseOver3() {
let that = this;
clearInterval(that.intervalTime2);
},
mouseLeave3() {
let name = 'courtHouse3'
this.autoScroll(67, 50, 0, document.getElementById("courtHouse3"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
clearInterval(that.intervalTime2);
}, },
components: {}, components: {},
}; };

2
src/views/camera/cameraBig.vue
View File

@ -74,7 +74,7 @@ export default {
}, },
// 关闭摄像头 // 关闭摄像头
closeVideo() { closeVideo() {
console.log('关闭'); //console.log('关闭');
this.player.dispose(); this.player.dispose();
}, },
}, },

38
src/views/court.vue
View File

@ -4,11 +4,7 @@
<div class="leftOne"> <div class="leftOne">
<div class="title">智慧法庭</div> <div class="title">智慧法庭</div>
<div class="courtHouse"> <div class="courtHouse">
<div <div class="courtData" v-for="(item, index) in courtList" :key="index">
class="courtData"
v-for="(item, index) in courtList"
:key="index"
>
<div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div> <div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
<div <div
:class="houseList[index]" :class="houseList[index]"
@ -22,7 +18,7 @@
<div class="leftTwo"> <div class="leftTwo">
<div class="caseTitle">案件统计</div> <div class="caseTitle">案件统计</div>
<div class="select"> <div class="select">
<el-select <el-select
v-model="departmentValue" v-model="departmentValue"
:popper-append-to-body="false" :popper-append-to-body="false"
clearable clearable
@ -51,14 +47,11 @@
> >
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div id="caseEcharts"></div> <div id="caseEcharts"></div>
</div> </div>
<div class="leftThree"> <div class="leftThree">
<div class="caseTitle" style="width: 32%; padding-left: 6%"> <div class="caseTitle" style="width: 32%; padding-left: 6%">案件类型统计</div>
案件类型统计
</div>
<div class="caseType"> <div class="caseType">
<div id="caseTypeLeft"></div> <div id="caseTypeLeft"></div>
<div id="caseTypeRight"></div> <div id="caseTypeRight"></div>
@ -69,11 +62,7 @@
<div class="title" style="height: 5%">案件列表</div> <div class="title" style="height: 5%">案件列表</div>
<div class="caseList"> <div class="caseList">
<div class="selectList"> <div class="selectList">
<div <div class="selectChange" v-for="(item, index) in selectList" :key="index">
class="selectChange"
v-for="(item, index) in selectList"
:key="index"
>
<el-select <el-select
v-model="item.name" v-model="item.name"
:popper-append-to-body="false" :popper-append-to-body="false"
@ -93,11 +82,7 @@
</div> </div>
<div class="caseDetail"> <div class="caseDetail">
<div class="caseDetailList"> <div class="caseDetailList">
<div <div class="detail" v-for="(item, index) in caseDetailList" :key="index">
class="detail"
v-for="(item, index) in caseDetailList"
:key="index"
>
<div class="rowDetail"> <div class="rowDetail">
<span>{{ item.id }}&nbsp;&nbsp;案件案号:</span> <span>{{ item.id }}&nbsp;&nbsp;案件案号:</span>
<span>{{ item.caseCode }}</span> <span>{{ item.caseCode }}</span>
@ -338,9 +323,12 @@ export default {
}; };
}, },
mounted() { mounted() {
this.caseEcharts(); let that = this
this.caseTypeLeft(); // setTimeout(() => {
this.caseTypeRight(); that.caseEcharts();
that.caseTypeLeft();
that.caseTypeRight();
// }, 1000);
}, },
methods: { methods: {
caseEcharts() { caseEcharts() {
@ -666,9 +654,7 @@ export default {
myChart.setOption(option); myChart.setOption(option);
}, },
caseTypeRight() { caseTypeRight() {
var myChart = this.$echarts.init( var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
document.getElementById("caseTypeRight")
);
var data = [ var data = [
{ value: "25", name: "民事案件" }, { value: "25", name: "民事案件" },
{ value: "25", name: "行政案件" }, { value: "25", name: "行政案件" },

463
src/views/energySaving.vue
View File

@ -7,7 +7,7 @@ const { color } = require("echarts")
<div class="title"> <div class="title">
设备用能统计数据 设备用能统计数据
<!-- <img src="../assets/images/moreBg.png" @click="equipmentMore" /> --> <!-- <img src="../assets/images/moreBg.png" @click="equipmentMore" /> -->
<img src="../assets/images/moreBg.png" /> <img src="../assets/images/moreBg.png" />
</div> </div>
<!-- <div <!-- <div
class="equipmentEnergy" class="equipmentEnergy"
@ -24,12 +24,7 @@ const { color } = require("echarts")
{{ item.name }} {{ item.name }}
</div> </div>
</div> --> </div> -->
<el-carousel <el-carousel class="equipment" :autoplay="true" trigger="click" :interval="7000">
class="equipment"
:autoplay="true"
trigger="click"
:interval="7000"
>
<el-carousel-item <el-carousel-item
v-for="(item, index) in equipmentList1" v-for="(item, index) in equipmentList1"
:key="index" :key="index"
@ -38,9 +33,7 @@ const { color } = require("echarts")
<div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild"> <div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
<div class="equipmentList"> <div class="equipmentList">
<span>{{ i.data }}</span> <span>{{ i.data }}</span>
<span style="color: rgb(225, 177, 25); font-size: 0.4rem" <span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span>
>KWH</span
>
</div> </div>
<div class="equipmentName"> <div class="equipmentName">
{{ i.name }} {{ i.name }}
@ -63,12 +56,13 @@ const { color } = require("echarts")
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div class="equipmentWarnList" id="equipmentWarnList"> <div
<div class="equipmentWarnList"
class="warnList" id="equipmentWarnList"
v-for="(item, index) in warnList" @mouseenter="mouseOver"
:key="index" @mouseleave="mouseLeave"
> >
<div class="warnList" v-for="(item, index) in warnList" :key="index">
<span>{{ item.id }}</span> <span>{{ item.id }}</span>
<img :src="item.icon" /> <img :src="item.icon" />
<div <div
@ -79,15 +73,8 @@ const { color } = require("echarts")
width: 65%; width: 65%;
" "
> >
<span <span style="display: flex; width: 100%; justify-content: flex-start"
style=" >报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
> >
<span <span
style=" style="
@ -147,10 +134,9 @@ const { color } = require("echarts")
> >
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span style="margin-top: 5%" <span style="margin-top: 5%"
>{{ item.count }}&nbsp;&nbsp;<span >{{ item.count }}&nbsp;&nbsp;<span style="color: rgb(225, 177, 25)">{{
style="color: rgb(225, 177, 25)" item.unit
>{{ item.unit }}</span }}</span></span
></span
> >
</div> </div>
</div> </div>
@ -159,11 +145,7 @@ const { color } = require("echarts")
</div> </div>
<div class="equipmentShow" v-show="equipmentShow"> <div class="equipmentShow" v-show="equipmentShow">
<div class="equipContent"> <div class="equipContent">
<div <div class="equipmentEnergy" v-for="(item, index) in equipmentList" :key="index">
class="equipmentEnergy"
v-for="(item, index) in equipmentList"
:key="index"
>
<div class="equipmentList"> <div class="equipmentList">
<span>{{ item.count }}</span> <span>{{ item.count }}</span>
<span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span> <span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span>
@ -185,12 +167,7 @@ const { color } = require("echarts")
</template> </template>
<script> <script>
import { import { GetLevelAlarm, getAllDevices, getRealData, getAreaList } from "../api/index";
GetLevelAlarm,
getAllDevices,
getRealData,
getAreaList,
} from "../api/index";
import mqtt from "mqtt"; // mqtt协议 import mqtt from "mqtt"; // mqtt协议
export default { export default {
name: "energySaving", name: "energySaving",
@ -316,7 +293,6 @@ export default {
{ {
name: "恒温恒湿空调", name: "恒温恒湿空调",
}, },
], ],
equipmentBtnAc: "", //点击预警 equipmentBtnAc: "", //点击预警
warnList: [ warnList: [
@ -348,34 +324,6 @@ export default {
case: "设备故障", case: "设备故障",
grade: "三级", grade: "三级",
}, },
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
], //故障数组 ], //故障数组
sunList: [ sunList: [
{ {
@ -417,58 +365,59 @@ export default {
], ],
equipmentShow: false, equipmentShow: false,
equipmentList1: [], equipmentList1: [],
alarmFirstLevel:[], alarmFirstLevel: [],
alarmSecondLevel:[], alarmSecondLevel: [],
alarmThirdLevel:[], alarmThirdLevel: [],
equipmentList2: [], equipmentList2: [],
interval: null, //定时器
}; };
}, },
mounted() { mounted() {
this.getAllDevicesInfo(); // setTimeout(() => {
this.getAllDevicesInfo();
// setInterval(() => { // setInterval(() => {
// this.getAllDevicesInfo(); // this.getAllDevicesInfo();
// }, 10000); // }, 10000);
setTimeout(()=> { setTimeout(() => {
this.getAllDevicesInfo(); this.getAllDevicesInfo();
}, 10000); }, 10000);
this.getMqttData() this.getMqttData();
window.alarmSecondLevel= this.alarmSecondLevel window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel= this.alarmThirdLevel window.alarmThirdLevel = this.alarmThirdLevel;
window.alarmAllLevel= this.alarmAllLevel window.alarmAllLevel = this.alarmAllLevel;
this.changeWarn(0); this.changeWarn(0);
//轮播八个一页 //轮播八个一页
// for (let i = 0; i < this.equipmentList.length; i += 8) { // for (let i = 0; i < this.equipmentList.length; i += 8) {
// this.equipmentList1.push(this.equipmentList.slice(i, i + 8)); // this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
// } // }
// this.calculateEcharts(); // this.calculateEcharts();
this.getQOQ() this.getQOQ();
this.getYOY() this.getYOY();
// window.createMqtt = this.createMqtt(); // window.createMqtt = this.createMqtt();
this.autoScroll(67, 50, 0, document.getElementById('equipmentWarnList')) this.autoScroll(67, 50, 0, document.getElementById("equipmentWarnList"));
// }, 1000);
}, },
watch: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val) // console.log("alarmFirstLevel",val)
if(val.length!=0){ if (val.length != 0) {
this.upmqttData(val) this.upmqttData(val);
} }
}, },
alarmSecondLevel(val) { alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val) //console.log("alarmSecondLevel",val)
this.upmqttData(val) this.upmqttData(val);
}, },
alarmThirdLevel(val) { alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val) //console.log("alarmThirdLevel",val)
this.upmqttData(val) this.upmqttData(val);
}, },
}, },
methods: { methods: {
//获取能耗计量环比分析 //获取能耗计量环比分析
getQOQ() { getQOQ() {
@ -480,11 +429,11 @@ export default {
meterType: "1", meterType: "1",
// pbuildingId: "-1", // pbuildingId: "-1",
}; };
getAreaList(dataList).then((res)=>{ getAreaList(dataList)
this.calculateEcharts(res.data.data.child); .then((res) => {
}).catch(err => { this.calculateEcharts(res.data.data.child);
})
}) .catch((err) => {});
}, },
//获取能耗计量同比分析 //获取能耗计量同比分析
getYOY() { getYOY() {
@ -497,11 +446,11 @@ export default {
pbuildingId: "-1", pbuildingId: "-1",
}; };
//接口调用 //接口调用
getAreaList(dataList).then((res)=>{ getAreaList(dataList)
this.calculateEchartsTwo(res.data.data.values); .then((res) => {
}).catch(err => { this.calculateEchartsTwo(res.data.data.values);
})
}) .catch((err) => {});
}, },
// //mqtt订阅数据 // //mqtt订阅数据
// createMqtt() { // createMqtt() {
@ -512,7 +461,6 @@ export default {
// }, // },
// /** 实时数据分类 */ // /** 实时数据分类 */
// realInfo(topic, message) { // realInfo(topic, message) {
// let that = this; // let that = this;
// switch (topic) { // switch (topic) {
@ -552,15 +500,12 @@ export default {
// break; // break;
// } // }
// }, // },
getMqttData(){ getMqttData() {
this.getDataByMqtt( this.getDataByMqtt("ws://138.227.111.141:8083/mqtt", "device/publish/FB80");
"ws://138.227.111.141:8083/mqtt",
"device/publish/FB80",
);
}, },
// mqtt订阅（独立） // mqtt订阅（独立）
getDataByMqtt(url, topic) { getDataByMqtt(url, topic) {
const clientId = Number(new Date()).toString(); // 用户名 const clientId = Number(new Date()).toString(); // 用户名
// const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const options = { const options = {
endpoint: "/mqtt", endpoint: "/mqtt",
@ -568,8 +513,8 @@ export default {
cleanSession: true, cleanSession: true,
connectTimeout: 7000, // 超时时间 connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔 reconnectPeriod: 7000, // 重连时间间隔
host: '138.227.111.141', host: "138.227.111.141",
port: '8083', port: "8083",
// 认证信息 // 认证信息
clientId: Number(new Date()).toString(), clientId: Number(new Date()).toString(),
// clientId: 'JBFY', // clientId: 'JBFY',
@ -587,11 +532,10 @@ export default {
}); });
// 重连回调 // 重连回调
this.mqttClient.on("reconnect", () => { this.mqttClient.on("reconnect", () => {
console.log("[MQTT-TEST] 重连中……"); // console.log("[MQTT-TEST] 重连中……");
}); });
// 连接回调 // 连接回调
this.mqttClient.on("connect", () => { this.mqttClient.on("connect", () => {});
});
// 接收回调 // 接收回调
this.mqttClient.on("message", (topic, message, packet) => { this.mqttClient.on("message", (topic, message, packet) => {
// 解析后端数据 // 解析后端数据
@ -601,8 +545,6 @@ export default {
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
console.log("msg", msg);
if (msg.params.设备运行状态 == 1) { if (msg.params.设备运行状态 == 1) {
msg.params.设备运行状态 = "正常"; msg.params.设备运行状态 = "正常";
} else { } else {
@ -615,7 +557,6 @@ export default {
that.sunList[4].count = msg.params.机器总运行时间; that.sunList[4].count = msg.params.机器总运行时间;
that.sunList[5].count = msg.params.警告信息; that.sunList[5].count = msg.params.警告信息;
} else if (topic.indexOf("InConvoyor") != -1) { } else if (topic.indexOf("InConvoyor") != -1) {
} }
}); });
} }
@ -624,112 +565,108 @@ export default {
}, },
//获取所有设备信息 //获取所有设备信息
getAllDevicesInfo() { getAllDevicesInfo() {
console.log("getAllDevices")
//调用接口数据 //调用接口数据
let allDevicesCode = []; let allDevicesCode = [];
getAllDevices().then((res) => { getAllDevices()
this.equipmentList = Object.keys(res.data.dataResults).map( .then((res) => {
(item, index) => { this.equipmentList = Object.keys(res.data.dataResults).map((item, index) => {
return { return {
name: res.data.dataResults[index].metername, name: res.data.dataResults[index].metername,
code: res.data.dataResults[index].metercode, code: res.data.dataResults[index].metercode,
}; };
} });
); res.data.dataResults.forEach((item, index) => {
res.data.dataResults.forEach((item, index) => { allDevicesCode.push(item.metercode);
allDevicesCode.push(item.metercode); });
}) getRealData({
getRealData({ metercodes: allDevicesCode,
metercodes: allDevicesCode, })
}).then((response) => { .then((response) => {
let resList = [] let resList = [];
// console.log(allDevicesCode,response.data.dataResults, "实时设备数据ssssssssssss"); // console.log(allDevicesCode,response.data.dataResults, "实时设备数据ssssssssssss");
for (const key in response.data.dataResults) { for (const key in response.data.dataResults) {
resList = response.data.dataResults[1] resList = response.data.dataResults[1];
} }
for (let i = 0; i < this.equipmentList.length; i++) { for (let i = 0; i < this.equipmentList.length; i++) {
resList.forEach((is, k) => { resList.forEach((is, k) => {
if (this.equipmentList[i].code == is.id) { if (this.equipmentList[i].code == is.id) {
this.equipmentList2.push({ this.equipmentList2.push({
data: parseInt(is.idata), data: parseInt(is.idata),
name: this.equipmentList[i].name, name: this.equipmentList[i].name,
value: "", value: "",
});
}
}); });
} }
}); //分页
} for (let i = 0; i < this.equipmentList2.length; i += 8) {
//分页 this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
for (let i = 0; i < this.equipmentList2.length; i += 8) { }
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8)); })
} .catch((err) => {});
})
}).catch(err => { .catch((err) => {});
});;
}).catch(err => {
});
}, },
//预警点击 //预警点击
changeWarn(index) { changeWarn(index) {
this.equipmentBtnAc = index; this.equipmentBtnAc = index;
if (index == 0) { if (index == 0) {
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "热回收", DeviceTypes: "热回收",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
this.upWainData(res); .then((res) => {
}).catch(err => { this.upWainData(res);
})
});; .catch((err) => {});
} }
if (index == 1) { if (index == 1) {
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "电梯", DeviceTypes: "电梯",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
this.upWainData(res); .then((res) => {
}).catch(err => { this.upWainData(res);
})
}); .catch((err) => {});
} else if (index == 2) { } else if (index == 2) {
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "光伏", DeviceTypes: "光伏",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
this.upWainData(res); .then((res) => {
}).catch(err => { this.upWainData(res);
})
}); .catch((err) => {});
} else if (index == 3) { } else if (index == 3) {
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "VRV", DeviceTypes: "VRV",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
this.upWainData(res); .then((res) => {
}).catch(err => { this.upWainData(res);
})
}); .catch((err) => {});
} else if (index == 4) { } else if (index == 4) {
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "恒温恒湿", DeviceTypes: "恒温恒湿",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
this.upWainData(res); .then((res) => {
}).catch(err => { this.upWainData(res);
})
}); .catch((err) => {});
} }
}, },
//获取mqtt数据 //获取mqtt数据
upmqttData(val) { upmqttData(val) {
let icon = null; let icon = null;
var warnListMqtt = [] var warnListMqtt = [];
warnListMqtt = Object.keys(val).map((item, index) => { warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) { if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级"; val[index].AlarmLevel = "一级";
@ -741,20 +678,18 @@ export default {
return { return {
id: index + 1, id: index + 1,
icon: require("../assets/images/jieNengImg/warnRed.png"), icon: require("../assets/images/jieNengImg/warnRed.png"),
time: this.$moment(val[index].AlarmTime).format( time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
"YYYY-MM-DD HH:mm:ss"
),
case: val[index].AlarmName, case: val[index].AlarmName,
grade: val[index].AlarmLevel, grade: val[index].AlarmLevel,
DeviceTypes:val[index].DeviceTypes, DeviceTypes: val[index].DeviceTypes,
}; };
}); });
console.log("warnListMqtt",warnListMqtt) //console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) { for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].DeviceTypes==this.warnList[0].DeviceTypes){ if (warnListMqtt[i].DeviceTypes == this.warnList[0].DeviceTypes) {
this.warnList.splice(0,0,warnListMqtt[i]); this.warnList.splice(0, 0, warnListMqtt[i]);
}
} }
}
}, },
//更新预警数据 //更新预警数据
upWainData(res) { upWainData(res) {
@ -774,17 +709,17 @@ export default {
), ),
case: res.data.data[index].AlarmName, case: res.data.data[index].AlarmName,
grade: res.data.data[index].AlarmLevel, grade: res.data.data[index].AlarmLevel,
DeviceTypes:res.data.data[index].DeviceTypes, DeviceTypes: res.data.data[index].DeviceTypes,
}; };
}); });
}, },
calculateEcharts(val) { calculateEcharts(val) {
let imgSrc = "/img/car.png"; let imgSrc = "/img/car.png";
let chartData = []; let chartData = [];
chartData = Object.keys(val).map((item,index)=>{ chartData = Object.keys(val).map((item, index) => {
return {value:val[item].val,name:val[item].buildName} return { value: val[item].val, name: val[item].buildName };
}) });
let colorList = ["red", "rgb(255,122,0)","rgb(3, 255, 150)","rgb(0,215,245)"]; let colorList = ["red", "rgb(255,122,0)", "rgb(3, 255, 150)", "rgb(0,215,245)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0); let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100; let gap = (1 * sum) / 100;
let pieData1 = []; let pieData1 = [];
@ -815,9 +750,7 @@ export default {
}); });
pieData2.push(gapData); pieData2.push(gapData);
} }
var myChart = this.$echarts.init( var myChart = this.$echarts.init(document.getElementById("calculateEcharts"));
document.getElementById("calculateEcharts")
);
let option = { let option = {
tooltip: { tooltip: {
@ -974,19 +907,17 @@ export default {
}, },
calculateEchartsTwo(val) { calculateEchartsTwo(val) {
// console.log(val,'----------------'); // console.log(val,'----------------');
let dataX = [] let dataX = [];
let tqData = [] let tqData = [];
let bqData = [] let bqData = [];
let tbData = [] let tbData = [];
val.forEach((item,index) => { val.forEach((item, index) => {
dataX.push(item.dateDetail) dataX.push(item.dateDetail);
tqData.push(item.tqVal) tqData.push(item.tqVal);
bqData.push(item.hqVal) bqData.push(item.hqVal);
tbData.push(item.val) tbData.push(item.val);
}); });
var myChart = this.$echarts.init( var myChart = this.$echarts.init(document.getElementById("calculateEchartsTwo"));
document.getElementById("calculateEchartsTwo")
);
let option = { let option = {
//你的代码 //你的代码
@ -1021,7 +952,7 @@ export default {
}, },
yAxis: [ yAxis: [
{ {
name:'单位kWh', name: "单位kWh",
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
@ -1034,9 +965,9 @@ export default {
splitLine: { show: false }, splitLine: { show: false },
}, },
{ {
name:'比率', name: "比率",
textStyle:{ textStyle: {
color:'#fff' color: "#fff",
}, },
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
@ -1142,35 +1073,56 @@ export default {
closeEquipmentShow() { closeEquipmentShow() {
this.equipmentShow = false; this.equipmentShow = false;
}, },
//自动滚动 //自动滚动
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
console.log(element.scrollHeight); let that = this;
let interval let step = 1;
let step = 1 element.scrollTop = 0;
element.scrollTop = 0 function start() {
function start() { that.interval = setInterval(scrolling, speed);
interval = setInterval(scrolling, speed) element.scrollTop += step;
element.scrollTop += step }
}
function scrolling() { function scrolling() {
if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) { if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step // element.scrollTop += step
step = 1 step = 1;
element.scrollTop = 0 element.scrollTop = 0;
} else { } else {
if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\ if (
step *= -1 // 转换方向 element.scrollTop === 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
} }
clearInterval(interval) clearInterval(that.interval);
setTimeout(start, delay) setTimeout(start, delay);
} }
} }
if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发 if (element.offsetHeight !== element.scrollHeight) {
setTimeout(start, delay) // 元素内容没有溢出时，不触发
} setTimeout(start, delay);
} }
},
//鼠标移入事件
mouseOver() {
let that = this
clearInterval(that.interval);
},
mouseLeave() {
this.autoScroll(67, 50, 0, document.getElementById("equipmentWarnList"));
},
},
beforeDestroy() {
let that = this
// 离开当前路由前的操作
clearInterval(that.interval);
that.interval = null;
}, },
components: {}, components: {},
}; };
@ -1227,8 +1179,7 @@ export default {
.equipmentList { .equipmentList {
width: 100%; width: 100%;
height: 80%; height: 80%;
background: url("../assets/images/jieNengImg/energyBack.png") background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
font-size: 1.3rem; font-size: 1.3rem;

962
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/operationMaintenance.vue
View File

@ -224,7 +224,9 @@ export default {
}; };
}, },
mounted() { mounted() {
// setTimeout(() => {
this.workOrderEcharts(); this.workOrderEcharts();
// }, 1000);
}, },
methods: { methods: {
workOrderEcharts() { workOrderEcharts() {

689
src/views/security.vue
View File

@ -29,12 +29,7 @@
<span>{{ item.count }}</span> <span>{{ item.count }}</span>
</div> </div>
</div> --> </div> -->
<el-carousel <el-carousel class="security" :autoplay="true" trigger="click" :interval="7000">
class="security"
:autoplay="true"
trigger="click"
:interval="7000"
>
<el-carousel-item <el-carousel-item
v-for="(item, index) in securityList" v-for="(item, index) in securityList"
:key="index" :key="index"
@ -44,11 +39,7 @@
<!-- <div class="securitySupervision">安防监管</div> --> <!-- <div class="securitySupervision">安防监管</div> -->
<div class="securitySupervision">{{ item.tit }}</div> <div class="securitySupervision">{{ item.tit }}</div>
<div class="securityCount"> <div class="securityCount">
<div <div class="securityList" v-for="(i, k) in item.security" :key="k">
class="securityList"
v-for="(i, k) in item.security"
:key="k"
>
<span>{{ i.name }}</span> <span>{{ i.name }}</span>
<span>{{ i.count }}</span> <span>{{ i.count }}</span>
</div> </div>
@ -79,12 +70,8 @@
<div class="right"> <div class="right">
<div class="rightOne"> <div class="rightOne">
<div class="title" style="height: 10%">火灾报警管理</div> <div class="title" style="height: 10%">火灾报警管理</div>
<div class="fire"> <div class="fire" id="fire" @mouseenter="mouseOver" @mouseleave="mouseLeave">
<div <div class="warnList" v-for="(item, index) in fireWarnList" :key="index">
class="warnList"
v-for="(item, index) in fireWarnList"
:key="index"
>
<img :src="item.icon" /> <img :src="item.icon" />
<div <div
style=" style="
@ -94,10 +81,18 @@
width: 65%; width: 65%;
" "
> >
<span style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
>
<span <span
style="display: flex; width: 100%; justify-content: flex-start" style="
>报警时间:<span style="margin-left: 5%">{{ margin-top: 3%;
item.time display: flex;
width: 100%;
justify-content: flex-start;
"
>设备定位:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
item.position
}}</span></span }}</span></span
> >
<span <span
@ -107,22 +102,9 @@
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
" "
>设备定位:<span >报警状态:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
style="color: rgb(0, 255, 255); margin-left: 5%" item.status
>{{ item.position }}</span }}</span></span
></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警状态:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.status }}</span
></span
> >
</div> </div>
</div> </div>
@ -130,12 +112,8 @@
</div> </div>
<div class="rightTwo"> <div class="rightTwo">
<div class="title" style="height: 10%">安防报警管理</div> <div class="title" style="height: 10%">安防报警管理</div>
<div class="police"> <div class="police" id="police" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
<div <div class="warnList" v-for="(item, index) in policeList" :key="index">
class="warnList"
v-for="(item, index) in policeList"
:key="index"
>
<span>{{ item.id }}</span> <span>{{ item.id }}</span>
<img :src="item.icon" /> <img :src="item.icon" />
<div <div
@ -146,11 +124,8 @@
width: 65%; width: 65%;
" "
> >
<span <span style="display: flex; width: 100%; justify-content: flex-start"
style="display: flex; width: 100%; justify-content: flex-start" >报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
> >
<span <span
style=" style="
@ -178,10 +153,9 @@
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
" "
>报警状态:<span >报警状态:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
style="color: rgb(0, 255, 255); margin-left: 5%" item.status
>{{ item.status }}</span }}</span></span
></span
> >
</div> </div>
</div> </div>
@ -198,6 +172,8 @@ export default {
name: "security", name: "security",
data() { data() {
return { return {
intervalTime: null, //定时器
intervalTime1: null, //定时器
securityList: [ securityList: [
{ {
tit: "摄像头监管", tit: "摄像头监管",
@ -257,8 +233,6 @@ export default {
}, },
], ],
}, },
], ],
warnCameraList: [ warnCameraList: [
{ {
@ -342,133 +316,176 @@ export default {
}; };
}, },
mounted() { mounted() {
window['getWarning'] = (name) => { // setTimeout(() => {
// alert("goPage:"+b); window["getWarning"] = (name) => {
// console.log("name",name) // alert("goPage:"+b);
if (name.indexOf("法院一层") != -1 ) { // console.log("name",name)
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1|| name.indexOf("门厅") != -1|| name.indexOf("展厅") != -1) { if (name.indexOf("法院一层") != -1) {
console.log("消防联动,主楼一层,公共区"); if (
}else{ name.indexOf("走道") != -1 ||
console.log("消防联动,主楼一层,办公区"); name.indexOf("大厅") != -1 ||
} name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
} else if(name.indexOf("法院四层") != -1) { name.indexOf("门厅") != -1 ||
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) { name.indexOf("展厅") != -1
console.log("消防联动,主楼四层,公共区"); ) {
}else{ // console.log("消防联动,主楼一层,公共区");
console.log("消防联动,主楼四层,办公区"); } else {
} // console.log("消防联动,主楼一层,办公区");
}else if(name.indexOf("法院二层") != -1) { }
//console.log("消防联动 主楼二层"); } else if (name.indexOf("法院四层") != -1) {
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) { if (
console.log("消防联动,主楼二层,公共区"); name.indexOf("走道") != -1 ||
}else{ name.indexOf("大厅") != -1 ||
console.log("消防联动,主楼二层,办公区"); name.indexOf("楼梯") != -1 ||
} name.indexOf("自助立案") != -1
}else if(name.indexOf("法院三层") != -1) { ) {
// console.log("消防联动,主楼四层,公共区");
} else {
// console.log("消防联动,主楼四层,办公区");
}
} else if (name.indexOf("法院二层") != -1) {
//console.log("消防联动 主楼二层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼二层,公共区");
} else {
// console.log("消防联动,主楼二层,办公区");
}
} else if (name.indexOf("法院三层") != -1) {
// console.log("消防联动 主楼三层"); // console.log("消防联动 主楼三层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) { if (
console.log("消防联动,主楼三层,公共区"); name.indexOf("走道") != -1 ||
}else{ name.indexOf("大厅") != -1 ||
console.log("消防联动,主楼三层,办公区"); name.indexOf("楼梯") != -1 ||
} name.indexOf("自助立案") != -1
}else if(name.indexOf("辅楼1层") != -1) { ) {
//console.log("消防联动,主楼三层,公共区");
} else {
// console.log("消防联动,主楼三层,办公区");
}
} else if (name.indexOf("辅楼1层") != -1) {
// console.log("消防联动 辅楼一层"); // console.log("消防联动 辅楼一层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) { if (
console.log("消防联动,辅楼一层,公共区"); name.indexOf("走道") != -1 ||
}else{ name.indexOf("大厅") != -1 ||
console.log("消防联动,辅楼一层,办公区"); name.indexOf("楼梯") != -1 ||
} name.indexOf("自助立案") != -1
}else if(name.indexOf("辅楼2层") != -1) { ) {
//console.log("消防联动,辅楼一层,公共区");
} else {
// console.log("消防联动,辅楼一层,办公区");
}
} else if (name.indexOf("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层"); // console.log("消防联动 辅楼二层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1) { if (
console.log("消防联动,辅楼二层,公共区"); name.indexOf("走道") != -1 ||
}else{ name.indexOf("大厅") != -1 ||
console.log("消防联动,辅楼二层,办公区"); name.indexOf("楼梯") != -1
) {
// console.log("消防联动,辅楼二层,公共区");
} else {
// console.log("消防联动,辅楼二层,办公区");
}
} else if (name.indexOf("辅楼3层") != -1) {
//console.log("消防联动 辅楼三层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
//console.log("消防联动,辅楼三层,公共区");
} else {
// console.log("消防联动,辅楼三层,办公区");
}
} else if (name.indexOf("辅楼4层") != -1) {
//console.log("消防联动 辅楼四层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
// console.log("消防联动,辅楼四层,公共区");
} else {
// console.log("消防联动,辅楼四层,办公区");
}
} }
}else if(name.indexOf("辅楼3层") != -1) { };
//console.log("消防联动 辅楼三层"); this.getAnfang();
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("电梯") != -1) { //获取消防告警
console.log("消防联动,辅楼三层,公共区"); this.getPoliceList();
}else{ this.getFireWarnList();
console.log("消防联动,辅楼三层,办公区"); // 获取安防告警
}
}else if(name.indexOf("辅楼4层") != -1) {
//console.log("消防联动 辅楼四层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("电梯") != -1) {
console.log("消防联动,辅楼四层,公共区");
}else{
console.log("消防联动,辅楼四层,办公区");
}
}
};
this.getAnfang();
//获取消防告警
this.getPoliceList();
this.getFireWarnList();
// 获取安防告警
//获取安防统计今天昨天报警数量 //获取安防统计今天昨天报警数量
this.getAlarmCount(); this.getAlarmCount();
window.alarmFirstLevel = this.alarmFirstLevel; window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel; window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel; window.alarmThirdLevel = this.alarmThirdLevel;
let name = "fire";
let name1 = "police";
this.autoScroll(67, 50, 0, document.getElementById("fire"), name);
this.autoScroll(67, 50, 0, document.getElementById("police"), name1);
// }, 1000);
}, },
watch: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel", val); //console.log("alarmFirstLevel", val);
if (val.length != 0) { if (val.length != 0) {
this.upmqttData(val); this.upmqttData(val);
} }
}, },
alarmSecondLevel(val) { alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel", val); //console.log("alarmSecondLevel", val);
this.upmqttData(val); this.upmqttData(val);
}, },
alarmThirdLevel(val) { alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel", val); //console.log("alarmThirdLevel", val);
this.upmqttData(val); this.upmqttData(val);
}, },
}, },
// watch: { // watch: {
// alarmFirstLevel(val) { // alarmFirstLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// console.log("alarmFirstLevel",val) // console.log("alarmFirstLevel",val)
// if(val.length!=0){ // if(val.length!=0){
// this.upmqttData(val) // this.upmqttData(val)
// } // }
// }, // },
// alarmSecondLevel(val) { // alarmSecondLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// console.log("alarmSecondLevel",val) // console.log("alarmSecondLevel",val)
// this.upmqttData(val) // this.upmqttData(val)
// }, // },
// alarmThirdLevel(val) { // alarmThirdLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// console.log("alarmThirdLevel",val) // console.log("alarmThirdLevel",val)
// this.upmqttData(val) // this.upmqttData(val)
// }, // },
// }, // },
methods: { methods: {
//获取昨天今天的报警数量 //获取昨天今天的报警数量
getAlarmCount() { getAlarmCount() {
getSecurityAlarmCount().then((res) => { getSecurityAlarmCount()
this.securityList[0].security[4].count = res.data.data.VideoTodayCount; .then((res) => {
this.securityList[0].security[5].count = this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
res.data.data.VideoYesterdayCount; this.securityList[0].security[5].count = res.data.data.VideoYesterdayCount;
this.securityList[1].security[4].count = res.data.data.DoorTodayCount; this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
this.securityList[1].security[5].count = this.securityList[1].security[5].count = res.data.data.DoorYesterdayCount;
res.data.data.DoorYesterdayCount; })
}).catch(err => { .catch((err) => {});
});
}, },
//获取设备离线在线数据 //获取设备离线在线数据
@ -511,46 +528,48 @@ export default {
}, },
}; };
let indexCodeList = []; let indexCodeList = [];
getHikvision(dataList).then((res) => { getHikvision(dataList)
res.data.result.data.list.forEach((item, index) => { .then((res) => {
indexCodeList.push(item.indexCode); res.data.result.data.list.forEach((item, index) => {
}); indexCodeList.push(item.indexCode);
let doorStatusList = { });
path: "/artemis/api/acs/v1/door/states", let doorStatusList = {
data: { path: "/artemis/api/acs/v1/door/states",
doorIndexCodes: indexCodeList, data: {
pageNo:1, doorIndexCodes: indexCodeList,
pageSize:1000 pageNo: 1,
}, pageSize: 1000,
}; },
let doorTotal = 0; };
let doorOnLine = 0; let doorTotal = 0;
let offLine = 0; let doorOnLine = 0;
let doorTotalList = []; let offLine = 0;
let doorOnLineList = []; let doorTotalList = [];
let offLineList = []; let doorOnLineList = [];
getHikvision(doorStatusList).then((res) => { let offLineList = [];
console.log(res.data.result.data.authDoorList, "门禁状态数量"); getHikvision(doorStatusList)
for (let i = 0; i < res.data.result.data.authDoorList.length; i++) { .then((res) => {
//获取总数的数组 //console.log(res.data.result.data.authDoorList, "门禁状态数量");
doorTotalList.push(res.data.result.data.authDoorList); for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
if (res.data.result.data.authDoorList[i].doorState == 3) { //获取总数的数组
//获取离线的数组 doorTotalList.push(res.data.result.data.authDoorList);
offLineList.push(res.data.result.data.authDoorList[i].doorState); if (res.data.result.data.authDoorList[i].doorState == 3) {
} //获取离线的数组
} offLineList.push(res.data.result.data.authDoorList[i].doorState);
//门禁总数数量 }
this.securityList[1].security[1].count = doorTotalList.length; }
//门禁离线数数量 //门禁总数数量
this.securityList[1].security[3].count = offLineList.length; this.securityList[1].security[1].count = doorTotalList.length;
//门禁在线数数量 //门禁离线数数量
this.securityList[1].security[2].count = this.securityList[1].security[1].count - this.securityList[1].security[3].count; this.securityList[1].security[3].count = offLineList.length;
}).catch(err => { //门禁在线数数量
this.securityList[1].security[2].count =
}); this.securityList[1].security[1].count -
}).catch(err => { this.securityList[1].security[3].count;
})
}); .catch((err) => {});
})
.catch((err) => {});
//获取视频状态 //获取视频状态
let cameraList = { let cameraList = {
@ -561,50 +580,50 @@ export default {
pageSize: 1000, pageSize: 1000,
}, },
}; };
let cameraCodeList = [] let cameraCodeList = [];
getHikvision(cameraList).then((res) => { getHikvision(cameraList)
res.data.result.data.list.forEach((item, index) => { .then((res) => {
cameraCodeList.push(item.indexCode); res.data.result.data.list.forEach((item, index) => {
}); cameraCodeList.push(item.indexCode);
let cameraStatusList = { });
path: "/artemis/api/nms/v1/online/camera/get", let cameraStatusList = {
data: { path: "/artemis/api/nms/v1/online/camera/get",
indexCodes: cameraCodeList, data: {
pageNo:1, indexCodes: cameraCodeList,
pageSize:1000 pageNo: 1,
}, pageSize: 1000,
}; },
let cameraTotalList = []; };
let cameraOnLineList = []; let cameraTotalList = [];
let cameraoffLineList = []; let cameraOnLineList = [];
getHikvision(cameraStatusList).then((res) => { let cameraoffLineList = [];
console.log(res.data.result.data.list, "摄像头状态数量"); getHikvision(cameraStatusList).then((res) => {
for (let i = 0; i < res.data.result.data.list.length; i++) { //console.log(res.data.result.data.list, "摄像头状态数量");
//获取总数的数组 for (let i = 0; i < res.data.result.data.list.length; i++) {
cameraTotalList.push(res.data.result.data.list); //获取总数的数组
if (res.data.result.data.list[i].online == 0) { cameraTotalList.push(res.data.result.data.list);
//获取离线的数组 if (res.data.result.data.list[i].online == 0) {
cameraoffLineList.push(res.data.result.data.list[i].online); //获取离线的数组
cameraoffLineList.push(res.data.result.data.list[i].online);
}
} }
} //门禁总数数量
//门禁总数数量 this.securityList[0].security[1].count = cameraTotalList.length;
this.securityList[0].security[1].count = cameraTotalList.length; //门禁离线数数量
//门禁离线数数量 this.securityList[0].security[3].count = cameraoffLineList.length;
this.securityList[0].security[3].count = cameraoffLineList.length; //门禁在线数数量
//门禁在线数数量 this.securityList[0].security[2].count =
this.securityList[0].security[2].count = this.securityList[0].security[1].count - this.securityList[0].security[3].count; this.securityList[0].security[1].count -
}); this.securityList[0].security[3].count;
}).catch(err => { });
})
}); .catch((err) => {});
}, },
videoChange(index) { videoChange(index) {
this.warnCameraList.forEach((item, i) => { this.warnCameraList.forEach((item, i) => {
item.icon = require("../assets/images/anFang/video.png"); item.icon = require("../assets/images/anFang/video.png");
}); });
this.warnCameraList[ this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png");
index
].icon = require("../assets/images/anFang/videoAc.png");
}, },
//获取火灾报警、 //获取火灾报警、
@ -613,32 +632,32 @@ export default {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "消防", DeviceTypes: "消防",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
let icon = null; .then((res) => {
this.fireWarnList = Object.keys(res.data.data).map((item, index) => { let icon = null;
if (res.data.data[index].Status == 0) { this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
res.data.data[index].Status = "未处理"; if (res.data.data[index].Status == 0) {
icon = require("../assets/images/jieNengImg/warnWhite.png"); res.data.data[index].Status = "未处理";
} else { icon = require("../assets/images/jieNengImg/warnWhite.png");
res.data.data[index].Status = "已处理"; } else {
icon = require("../assets/images/jieNengImg/warnBlue.png"); res.data.data[index].Status = "已处理";
} icon = require("../assets/images/jieNengImg/warnBlue.png");
return { }
icon: icon, return {
time: this.$moment(res.data.data[index].AlarmTime).format( icon: icon,
"YYYY-MM-DD HH:mm:ss" time: this.$moment(res.data.data[index].AlarmTime).format(
), "YYYY-MM-DD HH:mm:ss"
DeviceType: res.data.data[index].DeviceType, ),
// position: res.data.data[index].DeviceType, DeviceType: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName, // position: res.data.data[index].DeviceType,
// status: res.data.data[index].AlarmLevel, position: res.data.data[index].AlarmName,
status: res.data.data[index].Status, // status: res.data.data[index].AlarmLevel,
AlarmLevel: res.data.data[index].AlarmLevel, status: res.data.data[index].Status,
}; AlarmLevel: res.data.data[index].AlarmLevel,
}); };
}).catch(err => { });
})
}); .catch((err) => {});
}, },
//获取安防报警、 //获取安防报警、
getPoliceList() { getPoliceList() {
@ -646,31 +665,31 @@ export default {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "门禁,视频监控", DeviceTypes: "门禁,视频监控",
}; };
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params)
let icon = null; .then((res) => {
this.policeList = Object.keys(res.data.data).map((item, index) => { let icon = null;
if (res.data.data[index].Status == 0) { this.policeList = Object.keys(res.data.data).map((item, index) => {
res.data.data[index].Status = "未处理"; if (res.data.data[index].Status == 0) {
icon = require("../assets/images/jieNengImg/warnWhite.png"); res.data.data[index].Status = "未处理";
} else { icon = require("../assets/images/jieNengImg/warnWhite.png");
res.data.data[index].Status = "已处理"; } else {
icon = require("../assets/images/jieNengImg/warnBlue.png"); res.data.data[index].Status = "已处理";
} icon = require("../assets/images/jieNengImg/warnBlue.png");
return { }
icon: icon, return {
time: this.$moment(res.data.data[index].AlarmTime).format( icon: icon,
"YYYY-MM-DD HH:mm:ss" time: this.$moment(res.data.data[index].AlarmTime).format(
), "YYYY-MM-DD HH:mm:ss"
DeviceType: res.data.data[index].DeviceType, ),
position: res.data.data[index].AlarmName, DeviceType: res.data.data[index].DeviceType,
// status: res.data.data[index].AlarmLevel, position: res.data.data[index].AlarmName,
status: res.data.data[index].Status, // status: res.data.data[index].AlarmLevel,
AlarmLevel: res.data.data[index].AlarmLevel, status: res.data.data[index].Status,
}; AlarmLevel: res.data.data[index].AlarmLevel,
}); };
}).catch(err => { });
})
}); .catch((err) => {});
}, },
//获取mqtt数据 //获取mqtt数据
upmqttData(val) { upmqttData(val) {
@ -693,31 +712,123 @@ export default {
} }
return { return {
icon: icon, icon: icon,
time: this.$moment(val[index].AlarmTime).format( time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
"YYYY-MM-DD HH:mm:ss"
),
position: val[index].AlarmName, position: val[index].AlarmName,
DeviceType: val[index].DeviceType, DeviceType: val[index].DeviceType,
status: val[index].Status, status: val[index].Status,
AlarmLevel: val[index].AlarmLevel, AlarmLevel: val[index].AlarmLevel,
}; };
}); });
console.log("warnListMqtt", warnListMqtt); //console.log("warnListMqtt", warnListMqtt);
for (let i = 0; i < warnListMqtt.length; i++) { for (let i = 0; i < warnListMqtt.length; i++) {
if (warnListMqtt[i].AlarmLevel == "三级") { if (warnListMqtt[i].AlarmLevel == "三级") {
this.policeList.splice(0, 0, warnListMqtt[i]); this.policeList.splice(0, 0, warnListMqtt[i]);
this.getAlarmCount(); this.getAlarmCount();
} }
if (warnListMqtt[i].DeviceType == "消防") { if (warnListMqtt[i].DeviceType == "消防") {
console.log("warnListMqtt[i]",warnListMqtt[i]) //console.log("warnListMqtt[i]",warnListMqtt[i])
this.fireWarnList.splice(0, 0, warnListMqtt[i]); this.fireWarnList.splice(0, 0, warnListMqtt[i]);
this.getWarning(warnListMqtt[i].position) this.getWarning(warnListMqtt[i].position);
} }
} }
}, },
getWarning:function(name){ getWarning: function (name) {
getWarning(name) getWarning(name);
}, },
//自动滚动
autoScroll(stepLength, speed, delay, element, name) {
let that = this;
if (name == "fire") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime = 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.intervalTime);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
} else if (name == "police") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime1 = 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.intervalTime1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
},
mouseLeave() {
let name = 'fire'
this.autoScroll(67, 50, 0, document.getElementById("fire"),name);
},
//鼠标移入事件
mouseOver1() {
let that = this;
clearInterval(that.intervalTime1);
},
mouseLeave1() {
let name = 'police'
this.autoScroll(67, 50, 0, document.getElementById("police"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
}, },
components: {}, components: {},
}; };