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

0808

This commit is contained in:
chengdandan 2023-08-08 11:12:46 +08:00
parent 39b7e692b9 65baf9a488
commit ce10c2f5c0
13 changed files with 1957 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@ -1,11 +1,11 @@
<template>
<div id="app">
<div class="header">
<div class="left">
<div class="header" >
<div class="left" @mouseenter="mouseOver" @mouseleave="mouseLeave">
<div>{{ time }} &nbsp;&nbsp; &nbsp;&nbsp;{{ week }}</div>
</div>
<div class="middle">南京江北新区人民法院智慧运营平台</div>
<div class="right">
<div class="right" @mouseenter="mouseOver" @mouseleave="mouseLeave">
<div class="quit">
<!-- <img
src="./assets/images/quit.png"
@ -136,6 +136,25 @@ export default {
// alert("goPage:"+b);
console.log("b");
};
window["mouseOver"] = (c) => {
// alert("goPage:"+b);
// console.log("移入");
};
window["mouseLeave"] = (d) => {
// alert("goPage:"+b);
// console.log("移出");
};
window["getWarningData"] = (name) => {
// console.log("name", name);
};
window["getWarning"] = (name) => {
console.log("name", name);
};
window["getsecurity"] = (name) => {
console.log("name", name);
};
this.menuChange(0, this.menuBtn[0].name);
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay();
this.week = this.weekList[week];
@ -160,6 +179,13 @@ export default {
methods: {
goPage: function (name) {
goPage(name);
},
//鼠标移入事件
mouseOver: function () {
mouseOver();
},
mouseLeave: function () {
mouseLeave();
},
// goIndex:function(){
// goIndex(e)

53
src/api/index.js
View File

@ -9,21 +9,21 @@ import axios from 'axios'
//根据等级获取报警数据
export const GetLevelAlarm = (params) => {
return axios.get('api/GetLevelAlarm', {
return axios.get('aps/GetLevelAlarm', {
params,
// timeout:5000
})
};
//获取昨天、今天报警数量
export const getSecurityAlarmCount = (params) => {
return axios.get('api/GetSecurityAlarmCount', {
return axios.get('aps/GetSecurityAlarmCount', {
params,
// timeout:5000
})
};
//获取报警统计接口
export const getAlarmStatistics = (params) => {
return axios.get('api/GetAlarmStatistics', {
return axios.get('aps/GetAlarmStatistics', {
params,
// timeout:5000
})
@ -60,4 +60,49 @@ export const getAreaList = (data) => {
data
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};
};
//运维模块获取登录token账号
export const getToken = (data) => {
return axios.post('api/login/api-login',
data
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};
//获取运维列表数据
export const getRecordlist = (data) => {
let token = JSON.parse(sessionStorage.getItem("token"))
// axios.defaults.headers.common['Blade-Auth'] = token
return axios.post('api/order-record/list',
data, {headers:{'Content-Type':'appliction/json','Authorization':'Bearer '+token}}
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};
//获取运维左侧数据
//报警数量
export const getAlarmData = (data) => {
let token = JSON.parse(sessionStorage.getItem("token"))
// axios.defaults.headers.common['Blade-Auth'] = token
return axios.post('api/maps/alarm-count-by-date',
data, {headers:{'Content-Type':'appliction/json','Authorization':'Bearer '+token}}
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};
//巡检工单数量
export const getCheckData = (data) => {
let token = JSON.parse(sessionStorage.getItem("token"))
// axios.defaults.headers.common['Blade-Auth'] = token
return axios.post('api/maps/check-count-by-date',
data, {headers:{'Content-Type':'appliction/json','Authorization':'Bearer '+token}}
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};
//获取处理人数据
export const getUser = (data) => {
let token = JSON.parse(sessionStorage.getItem("token"))
// axios.defaults.headers.common['Blade-Auth'] = token
return axios.post('api/user/list',
data, {headers:{'Content-Type':'appliction/json','Authorization':'Bearer '+token}}
// headers:{'Content-Type':'application/json;charset=utf-8'}
)
};

208
src/main.js
View File

@ -83,6 +83,19 @@ window.alarmAllLevel = []
window.alarmFirstLevel = []
window.alarmSecondLevel = []
window.alarmThirdLevel = []
// window.mouseOver = function (c) {
// console.log("c",c);
// }
// window.mouseOver("移入");
// window["mouseOver"] = (c) => {
// // alert("goPage:"+b);
// console.log("移入");
// };
// window["mouseLeave"] = (d) => {
// // alert("goPage:"+b);
// console.log("移出");
// };
function realInfo(topic, message) {
switch (topic) {
// 接收托片
@ -93,10 +106,13 @@ function realInfo(topic, message) {
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg",msg)
for (let i = 0; i < msg.length; i++) {
window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
window.alarmFirstLevel.push(msg[i])
getWarning1(msg[i].DeviceName)
getWarningData1(msg[i].DeviceName,msg[i].DeviceId)
}
// window.alarmFirstLevel= msg
// alarmAllLevel
@ -112,6 +128,7 @@ function realInfo(topic, message) {
for (let i = 0; i < msg.length; i++) {
window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
window.alarmSecondLevel.push(msg[i])
}
} catch (error) {}
break;
@ -125,11 +142,200 @@ function realInfo(topic, message) {
for (let i = 0; i < msg.length; i++) {
window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
window.alarmThirdLevel.push(msg[i])
window.getsecurity(msg[i].Remark1)
// window.changeBtnSecurity(msg[i].DeviceSubtype)
}
} catch (error) {}
break;
}
}
//消防联动
function getWarning1 (name) {
var newName = ''
if (name.indexOf("法院一层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
name.indexOf("门厅") != -1 ||
name.indexOf("展厅") != -1
) {
newName = "消防联动,主楼一层,公共区"
window.getWarning(newName);
// console.log("消防联动,主楼一层,公共区");
} else {
// console.log("消防联动,主楼一层,办公区");
newName = "消防联动,主楼一层,办公区"
window.getWarning(newName);
}
} else if (name.indexOf("法院四层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,主楼四层,公共区"
window.getWarning(newName);
// console.log("消防联动,主楼四层,公共区");
} else {
// console.log("消防联动,主楼四层,办公区");
newName = "消防联动,主楼四层,办公区"
window.getWarning(newName);
}
} else if (name.indexOf("法院二层") != -1) {
//console.log("消防联动 主楼二层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,主楼二层,公共区"
window.getWarning(newName);
//console.log("消防联动,主楼二层,公共区");
} else {
// console.log("消防联动,主楼二层,办公区");
newName = "消防联动,主楼二层,办公区"
window.getWarning(newName);
}
} else if (name.indexOf("法院三层") != -1) {
// console.log("消防联动 主楼三层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,主楼三层,公共区"
window.getWarning(newName);
} else {
// console.log("消防联动,主楼三层,办公区");
newName = "消防联动,主楼三层,办公区"
window.getWarning(newName);
}
} else if (name.indexOf("辅楼1层") != -1) {
console.log("消防联动 辅楼一层",name);
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,辅楼一层,公共区"
window.getWarning(newName);
console.log("消防联动,辅楼一层,公共区");
//console.log("消防联动,辅楼一层,公共区");
} else {
newName = "消防联动,辅楼一层,办公区"
window.getWarning(newName);
// console.log("消防联动,辅楼一层,办公区");
}
} else if (name.indexOf("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1
) {
newName = "消防联动,辅楼二层,公共区"
window.getWarning(newName);
// console.log("消防联动,辅楼二层,公共区");
} else {
// console.log("消防联动,辅楼二层,办公区");
newName = "消防联动,辅楼二层,办公区"
window.getWarning(newName);
}
} else if (name.indexOf("辅楼3层") != -1) {
//console.log("消防联动 辅楼三层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
newName = "消防联动,辅楼三层,公共区"
window.getWarning(newName);
//console.log("消防联动,辅楼三层,公共区");
} else {
newName = "消防联动,辅楼三层,办公区"
window.getWarning(newName);
// console.log("消防联动,辅楼三层,办公区");
}
} else if (name.indexOf("辅楼4层") != -1) {
//console.log("消防联动 辅楼四层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
newName = "消防联动,辅楼四层,公共区"
window.getWarning(newName);
// console.log("消防联动,辅楼四层,公共区");
} else {
// console.log("消防联动,辅楼四层,办公区");
newName = "消防联动,辅楼四层,办公区"
window.getWarning(newName);
}
}
}
//消防报警模型变红
function getWarningData1(name,DeviceId) {
var newNameWarning = ''
if (name.indexOf("法院一层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院四层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院二层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院三层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼1层") != -1) {
console.log("name1111",name)
newNameWarning = "辅楼一层,"+"RTU1."+DeviceId+"/辅楼1层2层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼2层") != -1) {
newNameWarning = "辅楼二层,"+"RTU1."+DeviceId+"/辅楼1层2层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼3层") != -1) {
newNameWarning = "辅楼三层"+"RTU1."+DeviceId+"/辅楼3层4层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
} else if (name.indexOf("辅楼4层") != -1) {
newNameWarning = "辅楼四层"+"RTU1."+DeviceId+"/辅楼3层4层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
}
}
// function getWarning(name) {
// console.log("name",name)
// }
// function getWarningData(name) {
// console.log("name",name)
// }
// function changeBtnSecurity(name) {
// console.log("name",name)
// // window.changeBtnSecurity(name);
// }
// //安防报警
// function getsecurity (name) {
// console.log("name",name)
// }
new Vue({
router,
render: h => h(App)

5
src/utils/mqttConfig.js
View File

@ -14,6 +14,7 @@ class mqttHandle {
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
host: '138.227.111.141',
// host: '172.16.1.253',
port: '8083',
// 认证信息
clientId: Number(new Date()).toString(),
@ -35,8 +36,8 @@ class mqttHandle {
//配置链接
// console.log("connectUrl",connectUrl)
const { host, port, endpoint, ...options } = this.connect;
const connectUrl = 'ws://138.227.208.100:1884/mqtt';
//const connectUrl = 'ws://172.16.1.253:1884/mqtt';
const connectUrl = 'ws://138.227.208.100:1884/mqtt';
// const connectUrl = 'ws://172.16.1.253:1884/mqtt';
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => {

377
src/views/alarm.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="courtMain">
<div class="left">
<div class="left" @mouseenter="mouseOver"
@mouseleave="mouseLeave">
<div class="leftOne">
<div class="title">预计统计列表 一级</div>
<div
class="courtHouse"
id="courtHouse"
@mouseenter="mouseOver"
@mouseleave="mouseLeave"
>
>
<div class="warnListContent" v-for="(item, index) in warnList1" :key="index">
<div class="warnArray">
<!-- <span>{{ item.id }}</span> -->
@ -34,8 +33,6 @@
<div
class="courtHouse"
id="courtHouse2"
@mouseenter="mouseOver2"
@mouseleave="mouseLeave2"
>
<div class="warnListContent" v-for="(item, index) in warnList2" :key="index">
<div class="warnArray">
@ -59,13 +56,12 @@
</div>
<!-- <div class="leftThree"></div> -->
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver"
@mouseleave="mouseLeave">
<div class="title">预计统计列表 三级</div>
<div
class="courtHouse"
id="courtHouse3"
@mouseenter="mouseOver3"
@mouseleave="mouseLeave3"
>
<div class="warnListContent" v-for="(item, index) in warnList3" :key="index">
<div class="warnArray">
@ -102,124 +98,126 @@ export default {
intervalTime2: null, //定时器
//报警数组 一级
warnList1: [
{
id: "1",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "一级",
},
{
id: "2",
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "一级",
},
{
id: "3",
icon: require("../assets/images/jieNengImg/warnWhite.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "一级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "一级",
},
// {
// id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "一级",
// },
// {
// id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "一级",
// },
// {
// id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "一级",
// },
// {
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "一级",
// },
],
//报警数组 二级
warnList2: [ {
id: "1",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "二级",
},
{
id: "2",
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "二级",
},
{
id: "3",
icon: require("../assets/images/jieNengImg/warnWhite.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "二级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "二级",
},],
warnList2: [
// {
// id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "二级",
// },
// {
// id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "二级",
// },
// {
// id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "二级",
// },
// {
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "二级",
// },
],
//报警数组 三级
warnList3: [
{
id: "1",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},
{
id: "2",
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},
{
id: "3",
icon: require("../assets/images/jieNengImg/warnWhite.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},
{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},{
id: "4",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
cause: "设备故障",
risk: "三级",
},
// {
// id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },
// {
// id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },
// {
// id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },
// {
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },{
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },{
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },{
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },{
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },{
// id: "4",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// cause: "设备故障",
// risk: "三级",
// },
],
courtList: [
{
@ -250,6 +248,7 @@ export default {
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel;
// window.createMqtt = this.createMqtt();
// console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
//一级告警
@ -286,6 +285,13 @@ export default {
},
},
methods: {
//鼠标移入事件
mouseOver() {
window.mouseOver();
},
mouseLeave() {
window.mouseLeave();
},
//获取一级告警
getFirstAlarm() {
GetLevelAlarm({
@ -428,6 +434,24 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
element.onmouseenter = function () {
clearInterval(that.intervalTime1)
that.intervalTime1 = null
}
element.onmouseleave = function () {
if (element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight) {
step = 1;
element.scrollTop = 0;
if (that.intervalTime1 == null) {
start()
}
}else{
if (that.intervalTime1 == null) {
start()
}
}
}
} else if (name == "courtHouse3") {
let step = 1;
element.scrollTop = 0;
@ -461,6 +485,27 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
element.onmouseenter = function () {
clearInterval(that.intervalTime2)
that.intervalTime2 = null
}
element.onmouseleave = function () {
if (element.scrollTop % stepLength !== 0 &&
(element.scrollTop === element.scrollHeight - element.offsetHeight
|| (element.scrollTop+1) === element.scrollHeight - element.offsetHeight
)) {
step = 1;
element.scrollTop = 0;
if (that.intervalTime2 == null) {
start()
}
}else{
if (that.intervalTime2 == null) {
start()
}
}
}
}
},
autoScrollalarm2(stepLength, speed, delay, element) {
@ -498,42 +543,60 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
that.intervalTime = null;
},
mouseLeave() {
if (this.intervalTime == null) {
this.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
}
},
//鼠标移入事件
mouseOver2() {
let that = this;
clearInterval(that.intervalTime1);
that.intervalTime1 = null;
},
mouseLeave2() {
if (this.intervalTime1 == null) {
let name = "courtHouse2";
this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"), name);
}
},
//鼠标移入事件
mouseOver3() {
let that = this;
clearInterval(that.intervalTime2);
that.intervalTime2 = null;
},
mouseLeave3() {
if (this.intervalTime2 == null) {
let name = "courtHouse3";
this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse3"), name);
element.onmouseenter = function () {
clearInterval(that.intervalTime)
that.intervalTime = null
}
element.onmouseleave = function () {
if (element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight) {
step = 1;
element.scrollTop = 0;
if (that.intervalTime == null) {
start()
}
}else{
if (that.intervalTime == null) {
start()
}
}
}
},
// //鼠标移入事件
// mouseOver1() {
// let that = this;
// clearInterval(that.intervalTime);
// that.intervalTime = null;
// },
// mouseLeave1() {
// if (this.intervalTime == null) {
// this.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
// }
// },
// //鼠标移入事件
// mouseOver2() {
// let that = this;
// clearInterval(that.intervalTime1);
// that.intervalTime1 = null;
// },
// mouseLeave2() {
// if (this.intervalTime1 == null) {
// let name = "courtHouse2";
// this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"), name);
// }
// },
// //鼠标移入事件
// mouseOver3() {
// let that = this;
// clearInterval(that.intervalTime2);
// that.intervalTime2 = null;
// },
// mouseLeave3() {
// if (this.intervalTime2 == null) {
// let name = "courtHouse3";
// this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse3"), name);
// }
// },
},
beforeDestroy() {
let that = this;

8
src/views/camera/camera.vue
View File

@ -16,10 +16,10 @@
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
import "video.js/dist/video-js.min.css";
// import videojs from "video.js";
// import "videojs-contrib-hls";
// import "@videojs/http-streaming";
// import "video.js/dist/video-js.min.css";
export default {
name:'camera',
props: {

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

@ -16,10 +16,10 @@
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
import "video.js/dist/video-js.min.css";
// import videojs from "video.js";
// import "videojs-contrib-hls";
// import "@videojs/http-streaming";
// import "video.js/dist/video-js.min.css";
export default {
name:'cameraBig',
props: {

13
src/views/court.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="courtMain">
<div class="left">
<div class="left" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="leftOne">
<div class="title">智慧法庭</div>
<div class="courtHouse">
@ -58,7 +59,8 @@
</div>
</div>
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="title" style="height: 5%">案件列表</div>
<div class="caseList">
<div class="selectList">
@ -331,6 +333,13 @@ export default {
// }, 1000);
},
methods: {
//鼠标移入事件
mouseOver1() {
window.mouseOver();
},
mouseLeave1() {
window.mouseLeave();
},
caseEcharts() {
var myChart = this.$echarts.init(document.getElementById("caseEcharts"));
let option = {

56
src/views/energySaving.vue
View File

@ -2,7 +2,8 @@ const { color } = require("echarts")
<template>
<div class="energy">
<div class="left">
<div class="left" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="leftOne">
<div class="title">
设备用能统计数据
@ -59,8 +60,6 @@ const { color } = require("echarts")
<div
class="equipmentWarnList"
id="equipmentWarnList"
@mouseenter="mouseOver"
@mouseleave="mouseLeave"
>
<div class="warnList" v-for="(item, index) in warnList" :key="index">
<span>{{ item.id }}</span>
@ -104,7 +103,8 @@ const { color } = require("echarts")
</div>
</div>
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="rightOne">
<div class="title">能耗计量环比分析</div>
<div id="calculateEcharts"></div>
@ -419,6 +419,13 @@ export default {
},
},
methods: {
//鼠标移入事件
mouseOver1() {
window.mouseOver();
},
mouseLeave1() {
window.mouseLeave();
},
//获取能耗计量环比分析
getQOQ() {
let dataList = {
@ -502,6 +509,7 @@ export default {
// },
getMqttData() {
this.getDataByMqtt("ws://138.227.111.141:8083/mqtt", "device/publish/FB80");
// this.getDataByMqtt("ws://172.16.1.253:8084/mqtt", "device/publish/FB80");
},
// mqtt订阅（独立）
getDataByMqtt(url, topic) {
@ -515,6 +523,8 @@ export default {
reconnectPeriod: 7000, // 重连时间间隔
host: "138.227.111.141",
port: "8083",
// host: "172.16.1.253",
// port: "8084",
// 认证信息
clientId: Number(new Date()).toString(),
// clientId: 'JBFY',
@ -1108,18 +1118,36 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this
clearInterval(that.interval);
that.interval = null;
},
mouseLeave() {
if (this.interval == null) {
this.autoScrollenergySaving(67, 50, 0, document.getElementById("equipmentWarnList"));
element.onmouseenter = function () {
clearInterval(that.interval)
that.interval = null
}
element.onmouseleave = function () {
if (element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight) {
step = 1
element.scrollTop = 0
if (that.interval == null) {
start()
}
}else{
if (that.interval == null) {
start()
}
}
}
},
//鼠标移入事件
// mouseOver() {
// let that = this
// clearInterval(that.interval);
// that.interval = null;
// },
// mouseLeave() {
// if (this.interval == null) {
// this.autoScrollenergySaving(67, 50, 0, document.getElementById("equipmentWarnList"));
// }
// },
},
beforeDestroy() {
let that = this

397
src/views/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="main">
<div class="left">
<div class="left" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="leftOne">
<div class="title">智慧法庭</div>
<div class="wisdomContent">
@ -54,8 +55,7 @@
</div>
<div class="warnList"
id="warnList"
@mouseenter="mouseOver"
@mouseleave="mouseLeave">
>
<div class="warnListContent"
v-for="(item, index) in warnList"
:key="index"
@ -87,7 +87,8 @@
</div>
</div>
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="rightOne">
<div class="title"
style="height: 13%">运维管理</div>
@ -103,7 +104,7 @@
<span>当日</span>
<img src="../assets/images/blueDian.png"
style="width: 9%" />
<span style="margin-left: 2%">报警数：8</span>
<span style="margin-left: 2%">报警数：{{alarmCount}}</span>
</div>
<div style="
width: 30%;
@ -113,7 +114,7 @@
">
<img src="../assets/images/blueDian.png"
style="width: 9%" />
<span>已完成单数：8</span>
<span>故障数：{{alarmCount2}}</span>
</div>
</div>
<div class="quantity">
@ -126,7 +127,7 @@
<span>统计</span>
<img src="../assets/images/blueDian.png"
style="width: 9%" />
<span style="margin-left: 2%">派单数：8</span>
<span style="margin-left: 2%">工单数：{{checkCount}}</span>
</div>
<div style="
width: 30%;
@ -136,7 +137,7 @@
">
<img src="../assets/images/blueDian.png"
style="width: 9%" />
<span>未完成单数：8</span>
<span>巡检数：{{checkCount2}}</span>
</div>
</div>
</div>
@ -271,6 +272,7 @@ import {
getAlarmStatistics,
getBuildinginfos,
getAreaList,
getToken,getRecordlist,getAlarmData,getCheckData
} from '../api/index'
import { getHikvision } from '../api/haikang'
import camera from './camera/camera.vue'
@ -285,6 +287,14 @@ export default {
yearShow: true,
monthShow: false,
dateShow: false,
//报警数量
alarmCount:0,
//故障完成
alarmCount2:0,
//工单数量
checkCount:0,
//巡检数量
checkCount2:0,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
@ -496,12 +506,26 @@ export default {
alarmThirdLevel: [],
camersCode: '',
interval: null, //定时器
monthDang:[
{ value: '25', name: '报警' },
{ value: '25', name: '故障' },
{ value: '25', name: '工单' },
{ value: '25', name: '巡检' },
],
monthup:[
{ value: '25', name: '报警' },
{ value: '25', name: '故障' },
{ value: '25', name: '工单' },
{ value: '25', name: '巡检' },
]
}
},
mounted() {
let that = this
this.value3 = this.$moment().format('yyyyMMDD')
this.selectTimeDD(this.value3)
that.getTokenData()
// setTimeout(() => {
// this.getCamera();
//获取建筑id
@ -510,12 +534,14 @@ export default {
window.alarmSecondLevel = that.alarmSecondLevel
window.alarmThirdLevel = that.alarmThirdLevel
window.alarmAllLevel = that.alarmAllLevel
that.warningOne()
that.warningTwo()
that.maintenanceLeft()
that.maintenanceRight()
that.maintenanceLeft(this.monthDang)
that.maintenanceRight(this.monthup)
// this.energyEcharts();
that.selectDataList(that.selectDate)
// window.createMqtt = this.createMqtt();
// window.addEventListener("message", function (e) {
// let val = e.data.val;
@ -600,6 +626,203 @@ export default {
},
},
methods: {
//鼠标移入事件
mouseOver1() {
window.mouseOver();
},
mouseLeave1() {
window.mouseLeave();
},
//获取token
getTokenData(){
let data = {
username:'NH',
password:'025ab3b8f952d9d13280939a6d756a19'
}
getToken(data).then((res)=>{
console.log("error_description",res)
if (res.status == 200) {
sessionStorage.setItem(
"token",
JSON.stringify(res.data.token)
);
this.getAlarm()
this.getMonthOperation()
this.getOperaYMonth()
}else{
console.log("error_description")
}
})
},
//
//获取今日报警工单数量
getAlarm(){
const Mill = 24 * 60 * 60
var start = new Date(new Date().toLocaleDateString()).getTime()/1000; // 当天0点
var end = new Date(new Date().toLocaleDateString()).getTime()/1000 +24 * 60 * 60 -1;// 当天23:59
var yesterdayStart = start - Mill
var yesterdayEnd = end - Mill
//今日报警
getAlarmData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
if (res.status == 200) {
this.alarmlist = res.data.data
console.log("this.alarmlist",this.alarmlist)
for (let i = 0; i < this.alarmlist.length; i++) {
if (this.alarmlist[i].type == "告警") {
//获取离线的数组
this.alarmCount = this.alarmlist[i].count
}else{
this.alarmCount2 = this.alarmlist[i].count
}
}
};
})
//工单数量
getCheckData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
if (res.status == 200) {
this.checklist = res.data.data
console.log("this.checklist",this.checklist)
for (let i = 0; i < this.checklist.length; i++) {
if (this.checklist[i].type == "工单") {
//获取离线的数组
this.checkCount = this.checklist[i].count
}else{
this.checkCount2 = this.checklist[i].count
}
}
};
})
},
//获取当月运维数据
getMonthOperation(){
var data=new Date();
data.setDate(1);
data.setHours(0);
data.setSeconds(0);
data.setMinutes(0);
console.log(data)
console.log((new Date(data.toLocaleDateString())).getTime()/1000);
var start = (new Date(data.toLocaleDateString())).getTime()/1000; // 当月1号0点
var end = (Date.parse(new Date()))/1000;
this.monthDang= []
var dang =[]
var dang1 =[]
//本月
getAlarmData({
page_code:"gis",
 time:[start,end],
time_type:"month"
}).then((res)=>{
if (res.status == 200) {
console.log("month",res.data.data)
dang = res.data.data.map((item,index)=>{
return Object.assign({},{value:item.count.toString(),name:item.type})
})
for (let i = 0; i < dang.length; i++) {
this.monthDang.push(dang[i])
}
//工单数量
getCheckData({
page_code:"gis",
 time:[start,end],
time_type:"month"
}).then((res)=>{
if (res.status == 200) {
dang1 = res.data.data.map((item,index)=>{
return Object.assign({},{value:item.count.toString(),name:item.type})
})
for (let i = 0; i < dang1.length; i++) {
this.monthDang.push(dang1[i])
}
}else{
}
})
};
})
console.log("this.monthDang",this.monthDang)
this.maintenanceLeft(this.monthDang)
},
//获取上月运维数据
getOperaYMonth(){
var nowdays = new Date()
var year = nowdays.getFullYear()
var month = nowdays.getMonth()
if (month == 0) {
month = 12
year = year - 1
}
if (month < 10) {
month = '0' + month
}
var myDate = new Date(year, month, 0)
var startDate = year + '-' + month + '-01 00:00:00' //上个月第一天
var endDate = year + '-' + month + '-' + myDate.getDate() + ' 23:59:59' //上个月最后一天
var start = (Date.parse(startDate))/1000
var end = (Date.parse(endDate))/1000
console.log(start)
console.log(end)
this.monthup = []
var up =[]
var up1 =[]
//上月
getAlarmData({
page_code:"gis",
 time:[start,end],
time_type:"month"
}).then((res)=>{
if (res.status == 200) {
console.log("month",res.data.data)
up = res.data.data.map((item,index)=>{
return Object.assign({},{value:item.count.toString(),name:item.type})
})
for (let i = 0; i < up.length; i++) {
this.monthup.push(up[i])
}
//工单数量
getCheckData({
page_code:"gis",
 time:[start,end],
time_type:"month"
}).then((res)=>{
if (res.status == 200) {
up1 = res.data.data.map((item,index)=>{
return Object.assign({},{value:item.count.toString(),name:item.type})
})
for (let i = 0; i < up1.length; i++) {
this.monthup.push(up1[i])
}
}else{
}
})
};
})
console.log("this.monthup",this.monthup)
this.maintenanceRight(this.monthup)
},
//放大变焦
addZoom() {
//console.log(this.camersCode, "sssssssssssss");
@ -859,34 +1082,58 @@ export default {
},
//智慧节能选择类型
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 = {
if(this.selectDate==1){
let data = {
buildingId: event.value, //建筑id
customerId: '12345678',
date: nowTime,
date: this.value3,
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) => {})
}else if(this.selectDate==2){
let data = {
buildingId: event.value, //建筑id
customerId: '12345678',
date: this.value2,
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) => {})
}else{
let data = {
buildingId: event.value, //建筑id
customerId: '12345678',
date: this.value1,
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) {
@ -1274,16 +1521,13 @@ export default {
})
.catch((err) => {})
},
maintenanceLeft() {
maintenanceLeft(data) {
console.log("maintenanceLeft",data)
var myChart = this.$echarts.init(
document.getElementById('maintenanceLeft')
)
var data = [
{ value: '25', name: '报警' },
{ value: '25', name: '已完成' },
{ value: '25', name: '派单' },
{ value: '25', name: '未完成' },
]
// var data = data
//var data = [{ value: '25', name: '报警' },{ value: '25', name: '故障' },{ value: '25', name: '工单' },{ value: '25', name: '巡检' },]
var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8']
let option = {
color: color,
@ -1382,17 +1626,15 @@ export default {
],
}
myChart.setOption(option)
myChart.resize()
},
maintenanceRight() {
maintenanceRight(data) {
console.log("maintenanceLeft",data)
var myChart = this.$echarts.init(
document.getElementById('maintenanceRight')
)
var data = [
{ value: '25', name: '报警' },
{ value: '25', name: '已完成' },
{ value: '25', name: '派单' },
{ value: '25', name: '未完成' },
]
//var data = data
// var data = [{ value: '25', name: '报警' },{ value: '25', name: '故障' },{ value: '25', name: '工单' },{ value: '25', name: '巡检' },]
var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8']
let option = {
color: color,
@ -1490,6 +1732,7 @@ export default {
],
}
myChart.setOption(option)
myChart.resize()
},
energyEcharts(val) {
//console.log(val, "节能数据");
@ -1670,7 +1913,8 @@ export default {
},
],
}
myChart.setOption(option)
myChart.setOption(option);
myChart.resize()
},
createMqtt() {
//创建链接，接收数据
@ -1727,16 +1971,36 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay)
}
element.onmouseenter = function () {
clearInterval(that.interval)
that.interval = null
}
element.onmouseleave = function () {
if (element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight) {
step = 1
element.scrollTop = 0
if (that.interval == null) {
start()
}
}else{
if (that.interval == null) {
start()
}
}
}
},
//鼠标移入事件
mouseOver() {
let that = this
clearInterval(that.interval)
that.interval = null
},
mouseLeave() {
this.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
},
// mouseOver() {
// let that = this
// clearInterval(that.interval)
// that.interval = null
// },
// mouseLeave() {
// if (this.interval == null) {
// this.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
// }
// },
},
beforeDestroy() {
let that = this
@ -1798,38 +2062,7 @@ export default {
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;

781
src/views/operationMaintenance.vue
View File

@ -1,27 +1,38 @@
<template>
<div class="operationMaintenance">
<div class="left">
<div class="left" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="title">工单管理</div>
<div class="workOrder">
<div class="todayCount">
<div
style="width: 100%; display: flex; justify-content: space-evenly"
>
<span>今日报警:&nbsp;&nbsp;10</span>
<span>今日报警:&nbsp;&nbsp;{{alarmCount}}</span>
<span
>同比昨日:<img
src="../assets/images/gongDan/greenJian.png"
/>&nbsp;&nbsp;0.5</span
/>&nbsp;&nbsp;{{alarmBasis}}</span
>
</div>
<div
style="width: 100%; display: flex; justify-content: space-evenly"
>
<span>今日工单:&nbsp;&nbsp;10</span>
<span>今日工单:&nbsp;&nbsp;{{checkCount}}</span>
<span
>同比昨日:<img
src="../assets/images/gongDan/redJian.png"
/>&nbsp;&nbsp;0.5</span
/>&nbsp;&nbsp;{{checkBasis}}</span
>
</div>
<div
style="width: 100%; display: flex; justify-content: space-evenly"
>
<span>当月报警数:&nbsp;&nbsp;{{alarmMonth}}</span>
<span
>当月故障数:<img
src="../assets/images/gongDan/redJian.png"
/>&nbsp;&nbsp;{{guzhang}}</span
>
</div>
</div>
@ -31,19 +42,30 @@
<div id="workOrderEcharts"></div>
</div>
<div class="workList">
<div class="workContent" v-for="(item, index) in workList" :key="index">
<span>{{ item.name }}</span>
<span style="color: rgb(9, 196, 217); font-size: 1rem">{{
item.count
}}</span>
<span>今日总响应超时工单数：{{ item.toDayCount }}</span>
<span>今日总响应超时时长：{{ item.toDayTime }}</span>
</div>
<div style="font-size: 0.9rem">本月故障告警数</div>
<div id="warningOne"></div>
</div>
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver1"
@mouseleave="mouseLeave1">
<div class="title">工单管理</div>
<div class="selectList">
<div class="selectChange">
<el-date-picker v-model="value3"
size="small"
type="datetimerange"
range-separator = '至'
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="selectTimeDD"
popper-class="popperClass"
:default-time = "['00:00:00','24:00:00']"
>
</el-date-picker>
</div>
<div
class="selectChange"
v-for="(item, index) in selectList"
@ -55,12 +77,13 @@
clearable
:placeholder="item.name"
style="margin-left: 5%"
@change="selectChange(item)"
>
<el-option
v-for="(item, index) in item.list"
v-for="(it, index) in item.list"
:key="index"
:label="item.label"
:value="item.value"
:label="it.label"
:value="it.value"
>
</el-option>
</el-select>
@ -74,26 +97,36 @@
:key="index"
>
<div class="distributeLeaflets">
<span>{{ item.id }}&nbsp;&nbsp;派单时间:</span>
<span class="distributeLeafletsValue">{{ item.time }}</span>
<span>{{ item.id }}&nbsp;&nbsp;处理时间:</span>
<span class="distributeLeafletsValue">{{ item.deal_at }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>处理人:</span>
<span class="distributeLeafletsValue">{{ item.deal_by_name }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>设备名称:</span>
<span class="distributeLeafletsValue">{{ item.device_name }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>故障原因:</span>
<span class="distributeLeafletsValue">{{ item.value_name }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>派单人员:</span>
<span class="distributeLeafletsValue">{{ item.user }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>工单类型:</span>
<span class="distributeLeafletsValue">{{ item.type }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>接单时间:</span>
<span>告警时间:</span>
<span class="distributeLeafletsValue">{{
item.receiveTime
item.upload_at
}}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>订单状态:</span>
<span class="distributeLeafletsValue">{{ item.status }}</span>
<span>工单状态:</span>
<span class="distributeLeafletsValue">{{ item.deal_status_text }}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>处理描述:</span>
<span class="distributeLeafletsValue">{{ item.deal_remark }}</span>
</div>
</div>
</div>
@ -103,10 +136,52 @@
</template>
<script>
import { getToken,getRecordlist,getAlarmData,getCheckData,getUser} from "../api/index";
export default {
name: "operationMaintenance",
data() {
return {
value3: '',
dateData: '', //日期选择
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',
},
alarmlist:[],
//报警数量
alarmCount:0,
alarmCountY:0,
//报警同比
alarmBasis:0,
checklist:[],
//工单数量
checkCount:0,
checkCountY:0,
//工单同比
checkBasis:0,
checklistmonth:[],
//当月报警
alarmMonth:0,
//当月故障
guzhang:0,
workList: [
{
name: "超时响应工单数",
@ -134,28 +209,16 @@ export default {
},
],
selectList: [
{
name: "日期",
name: "处理人",
list: [
{
label: "日期",
label: "处理人1",
value: "1",
},
{
label: "日期2",
value: "2",
},
],
},
{
name: "派单人员",
list: [
{
label: "派单人员",
value: "1",
},
{
label: "派单人员2",
label: "处理人2",
value: "2",
},
],
@ -164,69 +227,541 @@ export default {
name: "工单状态",
list: [
{
label: "工单状态",
label: "待处理",
value: "1",
},
{
label: "工单状态2",
value: "2",
},
],
},
{
name: "工单类型",
list: [
{
label: "工单类型",
value: "1",
},
{
label: "工单类型2",
label: "已处理",
value: "2",
},
],
},
], //案件列表选择器
distributeLeafletsList: [
{
id: "1",
time: "2023.1.13",
user: "方强",
type: "设备维修",
receiveTime: "2023.1.13",
status: "已完成",
},
{
id: "2",
time: "2023.1.13",
user: "方强",
type: "设备维修",
receiveTime: "2023.1.13",
status: "已完成",
},
{
id: "3",
time: "2023.1.13",
user: "方强",
type: "设备维修",
receiveTime: "2023.1.13",
status: "已完成",
},
{
id: "4",
time: "2023.1.13",
user: "方强",
type: "设备维修",
receiveTime: "2023.1.13",
status: "已完成",
},
],
};
},
mounted() {
this.workOrderEcharts();
// this.workOrderEcharts();
this.getTokenData()
this.getUserData()
},
methods: {
//鼠标移入事件
mouseOver1() {
window.mouseOver();
},
mouseLeave1() {
window.mouseLeave();
},
//获取token
getTokenData(){
let data = {
username:'NH',
password:'025ab3b8f952d9d13280939a6d756a19'
}
getToken(data).then((res)=>{
console.log("error_description",res)
if (res.status == 200) {
sessionStorage.setItem(
"token",
JSON.stringify(res.data.token)
);
this.getAlarm()
this.warningOne()
this.getlist()
this.getMonthCheck()
this.getUserData()
}else{
console.log("error_description")
}
})
},
//获取处理人接口
getUserData(){
let data = {
page:1, // 必填,当前页
limit:100, // 必填,每页数量
//keyword:"", // 姓名查询
}
getUser(data).then((res)=>{
if (res.status == 200) {
console.log("res",res)
var listNew =[]
listNew = res.data.data.map((item,index)=>{
// return Object.assign({},{value:item.id.toString(),label:item.username})
return {value:item.id.toString(),label:item.username}
})
this.selectList[0].list = listNew
// this.selectList[0].list = res.data.data
}else{
console.log("error_description")
}
})
},
//
getlist(){
getRecordlist({
page:1,
limit:20,
}).then((res)=>{
if (res.status == 200) {
console.log("error_description",res)
this.distributeLeafletsList=res.data.data.reverse()
for (let i = 0; i < this.distributeLeafletsList.length; i++) {
this.distributeLeafletsList[i].upload_at = this.changeTime(this.distributeLeafletsList[i].upload_at)
}
};
})
},
//获取今日报警工单数量
getAlarm(){
const Mill = 24 * 60 * 60
var start = new Date(new Date().toLocaleDateString()).getTime()/1000; // 当天0点
var end = new Date(new Date().toLocaleDateString()).getTime()/1000 +24 * 60 * 60 -1;// 当天23:59
var yesterdayStart = start - Mill
var yesterdayEnd = end - Mill
//今日报警
getAlarmData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
if (res.status == 200) {
this.alarmlist = res.data.data
console.log("this.alarmlist",this.alarmlist)
for (let i = 0; i < this.alarmlist.length; i++) {
if (this.alarmlist[i].type == "告警") {
//获取离线的数组
this.alarmCount = this.alarmlist[i].count
}
}
};
})
// 昨日报警
getAlarmData({
page_code:"gis",
 time:[yesterdayStart,yesterdayEnd],
time_type:""
}).then((res)=>{
if (res.status == 200) {
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].type == "告警") {
console.log("res.data.data[i].count",res.data.data[i].count)
this.alarmCountY = res.data.data[i].count
}
}
this.alarmBasis = ((this.alarmCount- this.alarmCountY)/this.alarmCountY).toFixed(2)
console.log(" this.alarmBasis", this.alarmBasis)
};
})
//工单数量
getCheckData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
if (res.status == 200) {
this.checklist = res.data.data
console.log("this.checklist",this.checklist)
for (let i = 0; i < this.checklist.length; i++) {
if (this.checklist[i].type == "工单") {
//获取离线的数组
this.checkCount = this.checklist[i].count
}
}
};
})
getCheckData({
page_code:"gis",
 time:[yesterdayStart,yesterdayEnd],
time_type:""
}).then((res)=>{
if (res.status == 200) {
for (let i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].type == "工单") {
this.checkCountY = res.data.data[i].count
}
}
console.log("this.checkCount", this.checkCount)
console.log("this.checkCountY", this.checkCountY)
if(this.checkCountY!=0&&this.checkCount!=0){
this.checkBasis = ((this.checkCount- this.checkCountY)/this.checkCountY).toFixed(2)
}
};
})
},
//设备左
warningOne() {
var data=new Date();
data.setDate(1);
data.setHours(0);
data.setSeconds(0);
data.setMinutes(0);
console.log(data)
console.log((new Date(data.toLocaleDateString())).getTime()/1000);
var start = (new Date(data.toLocaleDateString())).getTime()/1000; // 当月1号0点
var end = (Date.parse(new Date()))/1000;
getAlarmData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
let dataN = []
let data1 = []
let dataX = []
this.alarmMonth= 0
this.guzhang = 0
res.data.data.forEach((item, index) => {
dataX.push(item.date)
if(item.type== "告警"){
dataN.push(item.count)
this.alarmMonth = item.count++
}else if(item.type== "故障"){
data1.push(item.count)
this.guzhang = item.count++
}
})
var myChart = this.$echarts.init(document.getElementById('warningOne'))
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top:'16%',
containLabel: true
},
legend: {
data: ['告警', '故障'],
right: 20,
top:12,
textStyle: {
color: "#fff"
},
itemWidth: 12,
itemHeight: 10,
itemGap: 0
},
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: 10,
barGap: "0%",
itemStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#fccb05'
}, {
offset: 1,
color: '#f5804d'
}]
),
},
},
label: {
normal: {
show: false,
fontSize: '0.6rem',
color: '#fff',
},
},
data: dataN,
},{
name: '故障',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}]
),
},
},
label: {
normal: {
show: false,
fontSize: '0.6rem',
color: '#fff',
},
},
data: data1,
},
],
}
myChart.setOption(option)
})
},
//获取本月工单数
getMonthCheck(){
var data=new Date();
data.setDate(1);
data.setHours(0);
data.setSeconds(0);
data.setMinutes(0);
console.log(data)
console.log((new Date(data.toLocaleDateString())).getTime()/1000);
var start = (new Date(data.toLocaleDateString())).getTime()/1000; // 当月1号0点
var end = (Date.parse(new Date()))/1000;
getCheckData({
page_code:"gis",
 time:[start,end],
time_type:""
}).then((res)=>{
if (res.status == 200) {
let data = []
let dataX = []
res.data.data.forEach((item, index) => {
if(item.type== "工单"){
data.push(item.count)
dataX.push(item.date)
}
})
var myChart = this.$echarts.init(
document.getElementById("workOrderEcharts")
);
let option = {
grid: {
top: "18%",
// // left: '15%',
// // right: '5%',
bottom: "10%",
},
tooltip: {
trigger: "axis",
showContent: false,
axisPointer: {
type: "line",
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, .5)",
},
label: {
show: true,
color: "#fff",
fontSize: "0.9rem",
fontWeight: 600,
backgroundColor: "rgba(0, 0, 0, 0)",
},
},
},
xAxis: [
{
type: "category",
name: "天数",
//x轴坐标点
axisTick: {
show: true,
lineStyle: {
color: "#fff",
},
},
//x轴坐标线样式
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
fontSize: "0.5rem",
},
//x轴线
splitLine: {
show: false,
lineStyle: {
type: [5, 10],
dashOffset: 10,
color: "#1282C8",
},
},
boundaryGap: false,
data: dataX,
},
],
yAxis: [
{
name: "工单",
//x轴坐标点
axisTick: {
show: true,
lineStyle: {
color: "#fff",
},
},
//x轴坐标线样式
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
fontSize: "0.5rem",
},
//x轴线
splitLine: {
show: true,
lineStyle: {
// type: [5, 10],
dashOffset: 10,
color: "#fff",
},
},
},
],
series: [
{
type: "line",
symbol: "circle",
showSymbol: false,
yAxisIndex: 0,
lineStyle: {
width: 4,
color: "rgb(0,170,194)",
},
label: {
show: true,
textStyle: {
color: "#FFFFFF",
fontSize: "0.9rem",
},
position: "top",
formatter: function (p) {
return p.value > 0 ? p.value : "";
},
},
itemStyle: {
color: "#FFFFFF",
borderColor: "#FFFFFF",
borderWidth: 6,
},
data: data,
},
],
};
myChart.setOption(option);
};
})
},
changeTime(time){
var date = new Date(time*1000)
const yy = date.getFullYear()
const mm = date.getMonth()+1<10? '0'+(date.getMonth()+1):date.getMonth()+1
const dd = date.getDate()
return yy+'-'+ mm +'-'+ dd
},
selectTimeDD(){
console.log("selectTimeDD",this.value3[0].getTime()/1000)
console.log("selectTimeDD",this.value3[1].getTime()/1000)
var startTime = this.value3[0].getTime()/1000
var endTime = this.value3[1].getTime()/1000
getRecordlist({
page:1,
limit:20,
upload_ats:[startTime,endTime]
}).then((res)=>{
if (res.status == 200) {
console.log("error_description",res)
this.distributeLeafletsList=res.data.data.reverse()
for (let i = 0; i < this.distributeLeafletsList.length; i++) {
this.distributeLeafletsList[i].upload_at = this.changeTime(this.distributeLeafletsList[i].upload_at)
}
};
})
},
selectChange(val){
console.log("val",val)
if(val.name=='1'){
}
},
workOrderEcharts() {
var myChart = this.$echarts.init(
document.getElementById("workOrderEcharts")
@ -414,11 +949,13 @@ export default {
}
.workList {
width: 100%;
height: 40%;
display: flex;
flex-wrap: wrap;
align-items: center;
height: 30%;
color: #fff;
justify-content: space-around;
#warningOne {
width: 100%;
height: 80%;
}
.workContent {
width: 45%;
height: 35%;
@ -466,6 +1003,52 @@ export default {
width: 23%;
height: 20%;
margin-left: 11%;
/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;
}
/deep/ .el-select {
width: 100%;
height: 100%;

595
src/views/security.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="securityMain">
<div class="left">
<div class="left" @mouseenter="mouseOver2"
@mouseleave="mouseLeave2">
<div class="leftOne">
<div class="title">安防统计数据</div>
<!-- <div class="security"> -->
@ -29,14 +30,29 @@
<span>{{ item.count }}</span>
</div>
</div> -->
<el-carousel class="security" :autoplay="true" trigger="click" :interval="7000">
<!-- <el-carousel class="security" :autoplay="true" trigger="click" :interval="7000">
<el-carousel-item
v-for="(item, index) in securityList"
:key="index"
class="equipmentEnergy"
>
<img src="../assets/images/anFangAc.png" class="securityImg" />
<div class="securitySupervision">{{ item.tit }}</div>
<div class="securityCount">
<div class="securityList" v-for="(i, k) in item.security" :key="k">
<span>{{ i.name }}</span>
<span>{{ i.count }}</span>
</div>
</div>
</el-carousel-item>
</el-carousel> -->
<el-carousel class="security" :autoplay="false" direction="vertical" indicator-position="none" ref="carousel" :initial-index="oIndex">
<el-carousel-item
v-for="(item, index) in securityList"
:key="index"
class="equipmentEnergy"
>
<img src="../assets/images/anFangAc.png" class="securityImg" />
<!-- <div class="securitySupervision">安防监管</div> -->
<div class="securitySupervision">{{ item.tit }}</div>
<div class="securityCount">
<div class="securityList" v-for="(i, k) in item.security" :key="k">
@ -67,10 +83,19 @@
</div>
</div>
</div>
<div class="right">
<div class="right" @mouseenter="mouseOver2"
@mouseleave="mouseLeave2">
<div class="rightOne">
<div class="title" style="height: 10%">火灾报警管理</div>
<div class="fire" id="fireId" @mouseenter="mouseOver" @mouseleave="mouseLeave">
<!-- <div class="block">
<span class="demonstration">自定义</span>
<el-image>
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</div> -->
<div class="fire" id="fireId">
<div class="warnList" v-for="(item, index) in fireWarnList" :key="index">
<img :src="item.icon" />
<div
@ -115,8 +140,6 @@
<div
class="police"
id="policeId"
@mouseenter="mouseOver1"
@mouseleave="mouseLeave1"
>
<div class="warnList" v-for="(item, index) in policeList" :key="index">
<span>{{ item.id }}</span>
@ -263,26 +286,34 @@ export default {
// {
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// position: "烟感",
// status: "已解除",
// position: "辅楼1层.北走道.烟感",
// DeviceName:"辅楼1层.北走道.烟感",
// status: "未处理",
// DeviceType:'消防'
// },
// {
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// position: "烟感",
// status: "已解除",
// position: "辅楼1层.南走道.烟感",
// DeviceName:"辅楼1层.南走道.烟感",
// status: "未处理",
// DeviceType:'消防'
// },
// {
// icon: require("../assets/images/jieNengImg/warnWhite.png"),
// time: "2023年03月12日 15:45:10",
// position: "烟感",
// status: "已解除",
// position: "辅楼1层.档案.温感",
// DeviceName:"辅楼1层.档案.温感",
// status: "未处理",
// DeviceType:'消防'
// },
// {
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// position: "烟感",
// status: "已解除",
// position: "辅楼1层.北走道.声光",
// DeviceName:"辅楼1层.北走道.声光",
// status: "未处理",
// DeviceType:'消防'
// },
], //故障数组
policeList: [
@ -318,119 +349,26 @@ export default {
alarmFirstLevel: [],
alarmSecondLevel: [],
alarmThirdLevel: [],
articleTitle:'',
oIndex:0
};
},
mounted() {
window["getsecurity"] = (name) => {
console.log("name", name);
};
// setTimeout(() => {
window["getWarning"] = (name) => {
// alert("goPage:"+b);
// console.log("name",name)
if (name.indexOf("法院一层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
name.indexOf("门厅") != -1 ||
name.indexOf("展厅") != -1
) {
// console.log("消防联动,主楼一层,公共区");
} else {
// console.log("消防联动,主楼一层,办公区");
window['changeBtnSecurity'] = (b) => {
if(b=="安防"){
this.clickChange(0)
}else if(b=="门禁"){
this.clickChange(1)
}
} else if (name.indexOf("法院四层") != -1) {
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("消防联动 主楼二层");
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("消防联动 主楼三层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼三层,公共区");
} else {
// console.log("消防联动,主楼三层,办公区");
}
} else if (name.indexOf("辅楼1层") != -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("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
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("消防联动,辅楼四层,办公区");
}
}
};
this.getAnfang();
//获取消防告警
this.getPoliceList();
this.getFireWarnList();
// 获取安防告警
this.clickChange(0)
//获取安防统计今天昨天报警数量
this.getAlarmCount();
window.alarmFirstLevel = this.alarmFirstLevel;
@ -441,49 +379,44 @@ export default {
this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name1);
// }, 1000);
},
watch: {
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);
},
// 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: {
// 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: {
clickChange(index) {
//参数index为图片索引
this.oIndex = index;
this.$refs.carousel.setActiveItem(index) //调动setActiveItem方法，动态切换图片
this.articleTitle = this.securityList[index]["articleTitle"];
},
//鼠标移入事件
mouseOver2() {
window.mouseOver();
},
mouseLeave2() {
window.mouseLeave();
},
//获取昨天今天的报警数量
getAlarmCount() {
getSecurityAlarmCount()
@ -501,31 +434,41 @@ export default {
//获取门禁状态
var indexcode = [
"13222435-8646-4006-982a-76febb4dd8a2",
"fd91efcf-9d11-4b3e-ad69-6e6c1069f4ec",
"e3043e94-c8d9-49b2-9627-7a10f15cf079",
"f5790df0-60e9-4a1f-be2f-e75d6331467d",
"05859fa6-6440-401e-950f-37ba61094c4d",
"21ff542a-ca97-4974-88e7-d52408b8a412",
"608d4d1d-a69a-4d07-82da-553914616b1d",
"5b5b43cd-a722-4eb4-b3f2-3b60fd1357ad",
"f524c8df-42f9-4f89-8594-cad8e3cdb37f",
"71ced52a-f04e-4d74-834c-8e329485106b",
"8763ebb7-4bc6-4022-80df-a38804f58d39",
"f349ab39-aa64-4e4f-ae85-585f30321325",
"8ca45d1f-5919-47df-be93-8c6c4efb81a4",
"1223f3b3-3fa3-4df2-b03a-058fcb62b4c9",
"1fc85a1e-1084-4cc2-91a4-ec2b5e74c5a2",
"b7bb3c6c-ceeb-4fc9-a37e-c7d075fd4ede",
"beac672d-7555-49fc-bc97-d873fcc8eb48",
"5a9e819d-af8d-45ea-9a77-bd36a2168e20",
"17e8a2a0-079b-4e70-bde6-24911980e1b2",
"d16fe1ce-4251-4cfb-8316-9380196942e1",
"266a956e-cb4f-47f4-8ab8-ecbbb6f4a3f7",
"a2038008-e1db-4666-8902-c69af1d7cc50",
"9273528b-9fa9-4877-8eb0-1595e3accf83",
"be26abf3-c2dd-41d3-ace1-b8a2006d663c",
"46ba67a9-e4d0-48ab-b837-255bb963860a",
"fe6e6dab-4ec7-47c1-a286-8ff661f8b8f6",
"fd91efcf-9d11-4b3e-ad69-6e6c1069f4ec",
"91d4d481-1814-4522-b136-0145b16682f3",
"e3043e94-c8d9-49b2-9627-7a10f15cf079",
"f5790df0-60e9-4a1f-be2f-e75d6331467d",
"8a0f5c72-2025-44ec-afbf-36033d4dd442",
"05859fa6-6440-401e-950f-37ba61094c4d",
"21ff542a-ca97-4974-88e7-d52408b8a412",
"608d4d1d-a69a-4d07-82da-553914616b1d",
"5b5b43cd-a722-4eb4-b3f2-3b60fd1357ad",
"7497f4fd-e374-4d98-8c2b-4576e15b8157",
"f524c8df-42f9-4f89-8594-cad8e3cdb37f",
"c5be376c-3677-42de-a351-d2251436f6f7",
"71ced52a-f04e-4d74-834c-8e329485106b",
"8763ebb7-4bc6-4022-80df-a38804f58d39",
"f349ab39-aa64-4e4f-ae85-585f30321325",
"4f2d095b-9713-4dad-a1de-9e16f34fe32f",
"8ca45d1f-5919-47df-be93-8c6c4efb81a4",
"1223f3b3-3fa3-4df2-b03a-058fcb62b4c9",
"1fc85a1e-1084-4cc2-91a4-ec2b5e74c5a2",
"e49c3855-718a-4e24-917e-74da483a0de8",
"b7bb3c6c-ceeb-4fc9-a37e-c7d075fd4ede",
"beac672d-7555-49fc-bc97-d873fcc8eb48",
"6bbf040b-586d-47a6-a104-eb78c50c7736",
"5a9e819d-af8d-45ea-9a77-bd36a2168e20",
"17e8a2a0-079b-4e70-bde6-24911980e1b2",
"92a9134d-e23c-4299-8c65-7e32f58a189d",
"d16fe1ce-4251-4cfb-8316-9380196942e1",
"266a956e-cb4f-47f4-8ab8-ecbbb6f4a3f7",
"a2038008-e1db-4666-8902-c69af1d7cc50",
"9273528b-9fa9-4877-8eb0-1595e3accf83",
"ef5010dd-5645-4c78-b8bd-38478f8f498c",
"8e4ae494-69b2-4899-9cac-666dba11483b",
"be26abf3-c2dd-41d3-ace1-b8a2006d663c",
"46ba67a9-e4d0-48ab-b837-255bb963860a",
"fe6e6dab-4ec7-47c1-a286-8ff661f8b8f6",
];
let dataList = {
path: "/artemis/api/resource/v2/door/search",
@ -538,6 +481,8 @@ export default {
let indexCodeList = [];
getHikvision(dataList)
.then((res) => {
// res.data.result.data.list.
res.data.result.data.list.forEach((item, index) => {
indexCodeList.push(item.indexCode);
});
@ -591,13 +536,15 @@ export default {
let cameraCodeList = [];
getHikvision(cameraList)
.then((res) => {
console.log("res.data",res.data)
res.data.result.data.list.forEach((item, index) => {
cameraCodeList.push(item.indexCode);
});
this.securityList[0].security[1].count = cameraCodeList.length;
let cameraStatusList = {
path: "/artemis/api/nms/v1/online/camera/get",
data: {
indexCodes: cameraCodeList,
//indexCodes:cameraCodeList,
pageNo: 1,
pageSize: 1000,
},
@ -606,17 +553,18 @@ export default {
let cameraOnLineList = [];
let cameraoffLineList = [];
getHikvision(cameraStatusList).then((res) => {
//console.log(res.data.result.data.list, "摄像头状态数量");
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);
cameraTotalList.push(res.data.result.data.list[i]);
if (res.data.result.data.list[i].online == 0) {
//获取离线的数组
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;
//门禁在线数数量
@ -636,6 +584,10 @@ export default {
//获取火灾报警、
getFireWarnList() {
// for (let i = 0; i < this.fireWarnList.length; i++) {
// this.getWarning(this.fireWarnList[i].position);
// this.getWarningData(this.fireWarnList[i].DeviceName);
// }
let params = {
AlarmLevel: "",
DeviceTypes: "消防",
@ -658,12 +610,23 @@ export default {
),
DeviceType: res.data.data[index].DeviceType,
// position: res.data.data[index].DeviceType,
DeviceName: res.data.data[index].DeviceName,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
DeviceId: res.data.data[index].DeviceId,
};
});
console.log("this.fireWarnList",this.fireWarnList)
for (let i = 0; i < this.fireWarnList.length; i++) {
if (this.fireWarnList[i].DeviceType == "消防") {
this.getWarning(this.fireWarnList[i].position);
this.getWarningData(this.fireWarnList[i].DeviceName,this.fireWarnList[i].DeviceId);
}
}
})
.catch((err) => {});
},
@ -691,11 +654,18 @@ export default {
),
DeviceType: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName,
Remark1: res.data.data[index].Remark1,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
for (let i = 0; i < this.policeList.length; i++) {
if (this.policeList[i].AlarmLevel == "三级") {
this.getsecurity(this.policeList[i].Remark1);
}
}
})
.catch((err) => {});
},
@ -722,6 +692,7 @@ export default {
icon: icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
position: val[index].AlarmName,
DeviceName: val[index].DeviceName,
DeviceType: val[index].DeviceType,
status: val[index].Status,
AlarmLevel: val[index].AlarmLevel,
@ -738,17 +709,174 @@ export default {
//console.log("warnListMqtt[i]",warnListMqtt[i])
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
this.getWarning(warnListMqtt[i].position);
this.getWarningData(warnListMqtt[i].DeviceName,warnListMqtt[i].DeviceId);
}
}
},
//消防联动
getWarning: function (name) {
getWarning(name);
var newName = ''
if (name.indexOf("法院一层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
name.indexOf("门厅") != -1 ||
name.indexOf("展厅") != -1
) {
newName = "消防联动,主楼一层,公共区"
window.getWarning(newName);
// console.log("消防联动,主楼一层,公共区");
} else {
// console.log("消防联动,主楼一层,办公区");
}
} else if (name.indexOf("法院四层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,主楼四层,公共区"
window.getWarning(newName);
// 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
) {
newName = "消防联动,主楼二层,公共区"
window.getWarning(newName);
//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
) {
newName = "消防联动,主楼三层,公共区"
window.getWarning(newName);
} else {
// console.log("消防联动,主楼三层,办公区");
}
} else if (name.indexOf("辅楼1层") != -1) {
// console.log("消防联动 辅楼一层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
newName = "消防联动,辅楼一层,公共区"
window.getWarning(newName);
console.log("消防联动,辅楼一层,公共区");
//console.log("消防联动,辅楼一层,公共区");
} else {
// console.log("消防联动,辅楼一层,办公区");
}
} else if (name.indexOf("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1
) {
newName = "消防联动,辅楼二层,公共区"
window.getWarning(newName);
// 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
) {
newName = "消防联动,辅楼三层,公共区"
window.getWarning(newName);
//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
) {
newName = "消防联动,辅楼四层,公共区"
getWarning(newName);
// console.log("消防联动,辅楼四层,公共区");
} else {
// console.log("消防联动,辅楼四层,办公区");
}
}
},
//消防报警模型变红
getWarningData: function (name,DeviceId) {
var newNameWarning = ''
if (name.indexOf("法院一层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院四层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院二层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("法院三层") != -1) {
newNameWarning = "RTU1."+DeviceId+"/"+name
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼1层") != -1) {
console.log("name1111",name)
newNameWarning = "辅楼一层,"+"RTU1."+DeviceId+"/辅楼1层2层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼2层") != -1) {
newNameWarning = "辅楼二层,"+"RTU1."+DeviceId+"/辅楼1层2层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
} else if (name.indexOf("辅楼3层") != -1) {
newNameWarning = "辅楼三层"+"RTU1."+DeviceId+"/辅楼3层4层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
} else if (name.indexOf("辅楼4层") != -1) {
newNameWarning = "辅楼四层"+"RTU1."+DeviceId+"/辅楼3层4层"+'.'+name.split(".")[1]+'.'+name.split(".")[2]
window.getWarningData(newNameWarning);
}
},
// changeBtnSecurity(name) {
// console.log("name",name)
// },
//安防报警
getsecurity: function (name) {
getsecurity(name);
window.getsecurity(name)
},
//自动滚动
autoScrollsecurity(stepLength, speed, delay, element, name) {
autoScrollsecurity(stepLength, speed, delay, element, name) {
let that = this;
if (name == "fire") {
@ -783,6 +911,26 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
element.onmouseenter = function () {
clearInterval(that.intervalTime);
that.intervalTime = null;
};
element.onmouseleave = function () {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
step = 1;
element.scrollTop = 0;
if (that.intervalTime == null) {
start();
}
} else {
if (that.intervalTime == null) {
start();
}
}
};
} else if (name == "police") {
let step = 1;
element.scrollTop = 0;
@ -790,11 +938,12 @@ export default {
that.intervalTime1 = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
(element.scrollTop === element.scrollHeight - element.offsetHeight ||
element.scrollTop - 1 === element.scrollHeight - element.offsetHeight ||
element.scrollTop + 1 === element.scrollHeight - element.offsetHeight)
) {
// element.scrollTop += step
step = 1;
@ -815,32 +964,52 @@ export default {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
element.onmouseenter = function () {
clearInterval(that.intervalTime1);
that.intervalTime1 = null;
};
element.onmouseleave = function () {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
step = 1;
element.scrollTop = 0;
if (that.intervalTime1 == null) {
start();
}
} else {
if (that.intervalTime1 == null) {
start();
}
}
};
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
that.intervalTime = null;
},
mouseLeave() {
if (this.intervalTime == null) {
let name = "fire";
this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
}
},
//鼠标移入事件
mouseOver1() {
let that = this;
clearInterval(that.intervalTime1);
that.intervalTime1 = null;
},
mouseLeave1() {
if (this.intervalTime1 == null) {
let name = "police";
this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name);
}
},
// //鼠标移入事件
// mouseOver() {
// let that = this;
// clearInterval(that.intervalTime);
// that.intervalTime = null;
// },
// mouseLeave() {
// if (this.intervalTime == null) {
// let name = "fire";
// this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
// }
// },
// //鼠标移入事件
// mouseOver1() {
// let that = this;
// clearInterval(that.intervalTime1);
// that.intervalTime1 = null;
// },
// mouseLeave1() {
// if (this.intervalTime1 == null) {
// let name = "police";
// this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name);
// }
// },
},
beforeDestroy() {
let that = this;

9
vue.config.js
View File

@ -23,6 +23,15 @@ module.exports = {
'^/api':'',
}
},
'/aps': { //代理的名字
// target:'http://172.16.1.253:12308/api/',
target:'http://138.227.208.100:12308/api/',
ws: true,
changeOrigin: true,
pathRewrite:{
'^/aps':'',
}
},
'/ecs-server': { //代理的名字
target:'http://138.227.111.208:8002/ecs-server/',
ws: true,