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.

98
src/App.vue
View File

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

19
src/api/index.js
View File

@ -10,43 +10,48 @@ import axios from 'axios'
//根据等级获取报警数据
export const GetLevelAlarm = (params) => {
return axios.get('api/GetLevelAlarm', {
params
params,
// timeout:5000
})
};
//获取昨天、今天报警数量
export const getSecurityAlarmCount = (params) => {
return axios.get('api/GetSecurityAlarmCount', {
params
params,
// timeout:5000
})
};
//获取报警统计接口
export const getAlarmStatistics = (params) => {
return axios.get('api/GetAlarmStatistics', {
params
params,
// timeout:5000
})
};
// 获取建筑信息接口
export const getBuildinginfos = (params) => {
return axios.get('ecs-server/services/getBuildinginfos', {
params
params,
// timeout:5000
})
};
// 获取分项用能信息接口
export const getSubitemList = (data) => {
return axios.post('ecs-server/services/ecm/subitemList',
data
data,
)
};
// 获取所有设备信息
export const getAllDevices = (params) => {
return axios.get('ecs-server/services/getAllDevices', {
params
params,
// timeout:5000
})
};
// 获取设备实时数据信息
export const getRealData = (data) => {
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
}, (err) => {
if (!err) {
console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
//console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
} else {
console.log('订阅失败');
//console.log('订阅失败');
}
});
@ -93,7 +93,6 @@ 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);
@ -103,7 +102,6 @@ function realInfo(topic, message) {
// alarmAllLevel
//消防，电梯、动环系统
} catch (error) {}
console.log(error);
break;
case "SecondLevel":
try {
@ -111,13 +109,11 @@ 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.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
window.alarmSecondLevel.push(msg[i])
}
} catch (error) {}
console.log(error);
break;
case "ThirdLevel":
try {
@ -125,13 +121,12 @@ 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.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
window.alarmThirdLevel.push(msg[i])
}
} catch (error) {}
console.log(error);
break;
}
}

1
src/utils/mqttConfig.js
View File

@ -35,7 +35,6 @@ class mqttHandle {
//配置链接
// console.log("connectUrl",connectUrl)
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://172.16.1.253:1884/mqtt';
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

428
src/views/alarm.vue
View File

@ -3,12 +3,13 @@
<div class="left">
<div class="leftOne">
<div class="title">预计统计列表 一级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList1"
:key="index"
>
<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> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -17,15 +18,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span>
报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
<!-- <span>{{ item.content }}</span> -->
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
</div>
</div>
</div>
@ -34,12 +31,13 @@
</div>
<div class="leftTwo">
<div class="title">预计统计列表 二级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList2"
:key="index"
>
<div
class="courtHouse"
id="courtHouse2"
@mouseenter="mouseOver2"
@mouseleave="mouseLeave2"
>
<div class="warnListContent" v-for="(item, index) in warnList2" :key="index">
<div class="warnArray">
<!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -48,15 +46,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span>
报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
<!-- <span>{{ item.content }}</span> -->
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
</div>
</div>
</div>
@ -67,12 +61,13 @@
</div>
<div class="right">
<div class="title">预计统计列表 三级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList3"
:key="index"
>
<div
class="courtHouse"
id="courtHouse3"
@mouseenter="mouseOver3"
@mouseleave="mouseLeave3"
>
<div class="warnListContent" v-for="(item, index) in warnList3" :key="index">
<div class="warnArray">
<!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -81,16 +76,11 @@
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span
>
报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
<!-- <span>{{ item.content }}</span> -->
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
</div>
</div>
</div>
@ -107,6 +97,9 @@ export default {
name: "court",
data() {
return {
intervalTime: null, //定时器
intervalTime1: null, //定时器
intervalTime2: null, //定时器
//报警数组 一级
warnList1: [],
//报警数组 二级
@ -132,123 +125,130 @@ export default {
},
], // 智慧法庭小房子
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
alarmFirstLevel: [],
alarmSecondLevel: [],
alarmThirdLevel: [],
};
},
mounted() {
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');
//一级告警
this.getFirstAlarm();
//二级告警
this.getSecondAlarm();
//三级告警
this.getThirdAlarm();
//
// setTimeout(() => {
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');
//一级告警
this.getFirstAlarm();
//二级告警
this.getSecondAlarm();
//三级告警
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: {
alarmFirstLevel(val) {
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val)
if(val.length!=0){
this.upmqttData(val)
//console.log("alarmFirstLevel",val)
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val)
this.upmqttData(val)
//console.log("alarmSecondLevel",val)
this.upmqttData(val);
},
alarmThirdLevel(val) {
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val)
this.upmqttData(val)
//console.log("alarmThirdLevel",val)
this.upmqttData(val);
},
},
},
methods: {
//获取一级告警
getFirstAlarm() {
GetLevelAlarm({
AlarmLevel: "1",
DeviceTypes:''
}).then((res) => {
this.warnList1 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 1) {
res.data.data[index].AlarmLevel = "一级";
}
return {
id: index+1,
icon: require("../assets/images/warnRed.png"),
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
DeviceTypes: "",
})
.then((res) => {
this.warnList1 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 1) {
res.data.data[index].AlarmLevel = "一级";
}
return {
id: index + 1,
icon: require("../assets/images/warnRed.png"),
time: this.$moment(res.data.data[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
})
.catch((err) => {});
},
//获取二级告警
getSecondAlarm() {
GetLevelAlarm({
AlarmLevel: "2",
DeviceTypes:''
}).then((res) => {
this.warnList2 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 2) {
res.data.data[index].AlarmLevel = "二级";
}
return {
id: index + 1,
icon: require("../assets/images/warnOrange.png"),
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
DeviceTypes: "",
})
.then((res) => {
this.warnList2 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 2) {
res.data.data[index].AlarmLevel = "二级";
}
return {
id: index + 1,
icon: require("../assets/images/warnOrange.png"),
time: this.$moment(res.data.data[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
})
.catch((err) => {});
},
//获取三级告警
getThirdAlarm() {
GetLevelAlarm({
AlarmLevel: "3",
DeviceTypes:''
}).then((res) => {
this.warnList3 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 3) {
res.data.data[index].AlarmLevel = "三级";
}
return {
id: index + 1,
icon: require("../assets/images/warnBlue.png"),
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
DeviceTypes: "",
})
.then((res) => {
this.warnList3 = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 3) {
res.data.data[index].AlarmLevel = "三级";
}
return {
id: index + 1,
icon: require("../assets/images/warnBlue.png"),
time: this.$moment(res.data.data[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
};
});
})
.catch((err) => {});
},
//获取mqtt数据
upmqttData(val) {
let icon = null;
var warnListMqtt = []
//获取mqtt数据
upmqttData(val) {
let icon = null;
var warnListMqtt = [];
warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) {
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png");
} else if (val[index].AlarmLevel == 2) {
@ -258,25 +258,165 @@ export default {
val[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png");
}
return {
id: index + 1,
icon:icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
risk: val[index].AlarmLevel,
};
return {
id: index + 1,
icon: icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].risk=='三级'){
this.warnList3.splice(0,0,warnListMqtt[i]);
}else if(warnListMqtt[i].risk=='二级'){
this.warnList2.splice(0,0,warnListMqtt[i]);
} if(warnListMqtt[i].risk=='一级'){
this.warnList1.splice(0,0,warnListMqtt[i]);
}
//console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
if (warnListMqtt[i].risk == "三级") {
this.warnList3.splice(0, 0, warnListMqtt[i]);
} else if (warnListMqtt[i].risk == "二级") {
this.warnList2.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: {},
};
@ -557,4 +697,4 @@ export default {
box-sizing: border-box;
margin-top: 2%;
}
</style>
</style>

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

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

40
src/views/court.vue
View File

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

479
src/views/energySaving.vue
View File

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

964
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() {
// setTimeout(() => {
this.workOrderEcharts();
// }, 1000);
},
methods: {
workOrderEcharts() {

695
src/views/security.vue
View File

@ -29,12 +29,7 @@
<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"
@ -44,11 +39,7 @@
<!-- <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"
>
<div class="securityList" v-for="(i, k) in item.security" :key="k">
<span>{{ i.name }}</span>
<span>{{ i.count }}</span>
</div>
@ -79,12 +70,8 @@
<div class="right">
<div class="rightOne">
<div class="title" style="height: 10%">火灾报警管理</div>
<div class="fire">
<div
class="warnList"
v-for="(item, index) in fireWarnList"
:key="index"
>
<div class="fire" id="fire" @mouseenter="mouseOver" @mouseleave="mouseLeave">
<div class="warnList" v-for="(item, index) in fireWarnList" :key="index">
<img :src="item.icon" />
<div
style="
@ -94,10 +81,18 @@
width: 65%;
"
>
<span style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
>
<span
style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{
item.time
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>设备定位:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
item.position
}}</span></span
>
<span
@ -107,22 +102,9 @@
width: 100%;
justify-content: flex-start;
"
>设备定位:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.position }}</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
>报警状态:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
item.status
}}</span></span
>
</div>
</div>
@ -130,12 +112,8 @@
</div>
<div class="rightTwo">
<div class="title" style="height: 10%">安防报警管理</div>
<div class="police">
<div
class="warnList"
v-for="(item, index) in policeList"
:key="index"
>
<div class="police" id="police" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
<div class="warnList" v-for="(item, index) in policeList" :key="index">
<span>{{ item.id }}</span>
<img :src="item.icon" />
<div
@ -146,11 +124,8 @@
width: 65%;
"
>
<span
style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
<span style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{ item.time }}</span></span
>
<span
style="
@ -178,10 +153,9 @@
width: 100%;
justify-content: flex-start;
"
>报警状态:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.status }}</span
></span
>报警状态:<span style="color: rgb(0, 255, 255); margin-left: 5%">{{
item.status
}}</span></span
>
</div>
</div>
@ -198,6 +172,8 @@ export default {
name: "security",
data() {
return {
intervalTime: null, //定时器
intervalTime1: null, //定时器
securityList: [
{
tit: "摄像头监管",
@ -257,8 +233,6 @@ export default {
},
],
},
],
warnCameraList: [
{
@ -342,133 +316,176 @@ export default {
};
},
mounted() {
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("消防联动,主楼一层,办公区");
}
} 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) {
// 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("消防联动,主楼一层,办公区");
}
} 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) {
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) {
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("消防联动,辅楼二层,办公区");
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("消防联动,辅楼四层,办公区");
}
}
}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.getAnfang();
//获取消防告警
this.getPoliceList();
this.getFireWarnList();
// 获取安防告警
//获取安防统计今天昨天报警数量
this.getAlarmCount();
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel;
//获取安防统计今天昨天报警数量
this.getAlarmCount();
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
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: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel", val);
//console.log("alarmFirstLevel", val);
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel", val);
//console.log("alarmSecondLevel", val);
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel", val);
//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)
// },
// },
// 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: {
//获取昨天今天的报警数量
getAlarmCount() {
getSecurityAlarmCount().then((res) => {
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
this.securityList[0].security[5].count =
res.data.data.VideoYesterdayCount;
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
this.securityList[1].security[5].count =
res.data.data.DoorYesterdayCount;
}).catch(err => {
});
getSecurityAlarmCount()
.then((res) => {
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
this.securityList[0].security[5].count = res.data.data.VideoYesterdayCount;
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
this.securityList[1].security[5].count = res.data.data.DoorYesterdayCount;
})
.catch((err) => {});
},
//获取设备离线在线数据
@ -511,46 +528,48 @@ export default {
},
};
let indexCodeList = [];
getHikvision(dataList).then((res) => {
res.data.result.data.list.forEach((item, index) => {
indexCodeList.push(item.indexCode);
});
let doorStatusList = {
path: "/artemis/api/acs/v1/door/states",
data: {
doorIndexCodes: indexCodeList,
pageNo:1,
pageSize:1000
},
};
let doorTotal = 0;
let doorOnLine = 0;
let offLine = 0;
let doorTotalList = [];
let doorOnLineList = [];
let offLineList = [];
getHikvision(doorStatusList).then((res) => {
console.log(res.data.result.data.authDoorList, "门禁状态数量");
for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
//获取总数的数组
doorTotalList.push(res.data.result.data.authDoorList);
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[2].count = this.securityList[1].security[1].count - this.securityList[1].security[3].count;
}).catch(err => {
});
}).catch(err => {
});
getHikvision(dataList)
.then((res) => {
res.data.result.data.list.forEach((item, index) => {
indexCodeList.push(item.indexCode);
});
let doorStatusList = {
path: "/artemis/api/acs/v1/door/states",
data: {
doorIndexCodes: indexCodeList,
pageNo: 1,
pageSize: 1000,
},
};
let doorTotal = 0;
let doorOnLine = 0;
let offLine = 0;
let doorTotalList = [];
let doorOnLineList = [];
let offLineList = [];
getHikvision(doorStatusList)
.then((res) => {
//console.log(res.data.result.data.authDoorList, "门禁状态数量");
for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
//获取总数的数组
doorTotalList.push(res.data.result.data.authDoorList);
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[2].count =
this.securityList[1].security[1].count -
this.securityList[1].security[3].count;
})
.catch((err) => {});
})
.catch((err) => {});
//获取视频状态
let cameraList = {
@ -561,50 +580,50 @@ export default {
pageSize: 1000,
},
};
let cameraCodeList = []
getHikvision(cameraList).then((res) => {
res.data.result.data.list.forEach((item, index) => {
cameraCodeList.push(item.indexCode);
});
let cameraStatusList = {
path: "/artemis/api/nms/v1/online/camera/get",
data: {
indexCodes: cameraCodeList,
pageNo:1,
pageSize:1000
},
};
let cameraTotalList = [];
let cameraOnLineList = [];
let cameraoffLineList = [];
getHikvision(cameraStatusList).then((res) => {
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) {
//获取离线的数组
cameraoffLineList.push(res.data.result.data.list[i].online);
let cameraCodeList = [];
getHikvision(cameraList)
.then((res) => {
res.data.result.data.list.forEach((item, index) => {
cameraCodeList.push(item.indexCode);
});
let cameraStatusList = {
path: "/artemis/api/nms/v1/online/camera/get",
data: {
indexCodes: cameraCodeList,
pageNo: 1,
pageSize: 1000,
},
};
let cameraTotalList = [];
let cameraOnLineList = [];
let cameraoffLineList = [];
getHikvision(cameraStatusList).then((res) => {
//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) {
//获取离线的数组
cameraoffLineList.push(res.data.result.data.list[i].online);
}
}
}
//门禁总数数量
this.securityList[0].security[1].count = cameraTotalList.length;
//门禁离线数数量
this.securityList[0].security[3].count = cameraoffLineList.length;
//门禁在线数数量
this.securityList[0].security[2].count = this.securityList[0].security[1].count - this.securityList[0].security[3].count;
});
}).catch(err => {
});
//门禁总数数量
this.securityList[0].security[1].count = cameraTotalList.length;
//门禁离线数数量
this.securityList[0].security[3].count = cameraoffLineList.length;
//门禁在线数数量
this.securityList[0].security[2].count =
this.securityList[0].security[1].count -
this.securityList[0].security[3].count;
});
})
.catch((err) => {});
},
videoChange(index) {
this.warnCameraList.forEach((item, i) => {
item.icon = require("../assets/images/anFang/video.png");
});
this.warnCameraList[
index
].icon = require("../assets/images/anFang/videoAc.png");
this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png");
},
//获取火灾报警、
@ -613,32 +632,32 @@ export default {
AlarmLevel: "",
DeviceTypes: "消防",
};
GetLevelAlarm(params).then((res) => {
let icon = null;
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
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,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
GetLevelAlarm(params)
.then((res) => {
let icon = null;
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
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,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
})
.catch((err) => {});
},
//获取安防报警、
getPoliceList() {
@ -646,31 +665,31 @@ export default {
AlarmLevel: "",
DeviceTypes: "门禁,视频监控",
};
GetLevelAlarm(params).then((res) => {
let icon = null;
this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
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,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
GetLevelAlarm(params)
.then((res) => {
let icon = null;
this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
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,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
})
.catch((err) => {});
},
//获取mqtt数据
upmqttData(val) {
@ -693,31 +712,123 @@ export default {
}
return {
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"),
position: val[index].AlarmName,
DeviceType: val[index].DeviceType,
status: val[index].Status,
AlarmLevel: val[index].AlarmLevel,
};
});
console.log("warnListMqtt", warnListMqtt);
//console.log("warnListMqtt", warnListMqtt);
for (let i = 0; i < warnListMqtt.length; i++) {
if (warnListMqtt[i].AlarmLevel == "三级") {
this.policeList.splice(0, 0, warnListMqtt[i]);
this.getAlarmCount();
}
if (warnListMqtt[i].DeviceType == "消防") {
console.log("warnListMqtt[i]",warnListMqtt[i])
//console.log("warnListMqtt[i]",warnListMqtt[i])
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
this.getWarning(warnListMqtt[i].position)
this.getWarning(warnListMqtt[i].position);
}
}
},
getWarning:function(name){
getWarning(name)
getWarning: function (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: {},
};
@ -943,4 +1054,4 @@ export default {
box-sizing: border-box;
margin-top: 2%;
}
</style>
</style>