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.

56
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) => {
window["goPage"] = (b) => {
// alert("goPage:"+b);
console.log("b")
console.log("b");
};
// window['goIndex'] = (a) => {
// console.log(a)
@ -169,49 +163,48 @@ export default {
},
methods: {
goPage: function (name) {
goPage(name)
goPage(name);
},
// goIndex:function(){
// goIndex(e)
// },
//菜单选中
menuChange(index, name) {
this.menuBtn.forEach((item, index) => {
if (index == 0) {
this.menuBtn.forEach((item, i) => {
if (index != i) {
if (i == 0) {
item.icon = require("./assets/images/shouYe.png");
} else if (index == 1) {
} else if (i == 1) {
item.icon = require("./assets/images/faTing.png");
} else if (index == 2) {
} else if (i == 2) {
item.icon = require("./assets/images/jieNeng.png");
} else if (index == 3) {
} else if (i == 3) {
item.icon = require("./assets/images/anFang.png");
} else if (index == 4) {
} else if (i == 4) {
item.icon = require("./assets/images/yunWei.png");
} else if (index == 5) {
} 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.$router.push("operationMaintenance");
} else if (index == 5) {
this.$router.push("alarm");
this.menuBtn[index].icon = require("./assets/images/gaoJingAc.png");
this.$router.push("alarm");
}
this.goPage(name);
// if (name!="首页"){
@ -221,7 +214,6 @@ export default {
// }
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%;

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

278
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"
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"
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"
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: [],
//报警数组 二级
@ -138,9 +131,10 @@ export default {
};
},
mounted() {
window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
// 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');
//一级告警
@ -150,39 +144,40 @@ export default {
//三级告警
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) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val)
//console.log("alarmFirstLevel",val)
if (val.length != 0) {
this.upmqttData(val)
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val)
this.upmqttData(val)
//console.log("alarmSecondLevel",val)
this.upmqttData(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) => {
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 = "一级";
@ -190,21 +185,23 @@ export default {
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"),
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 => {
});
})
.catch((err) => {});
},
//获取二级告警
getSecondAlarm() {
GetLevelAlarm({
AlarmLevel: "2",
DeviceTypes:''
}).then((res) => {
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 = "二级";
@ -212,21 +209,23 @@ export default {
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"),
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 => {
});
})
.catch((err) => {});
},
//获取三级告警
getThirdAlarm() {
GetLevelAlarm({
AlarmLevel: "3",
DeviceTypes:''
}).then((res) => {
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 = "三级";
@ -234,19 +233,20 @@ export default {
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"),
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 => {
});
})
.catch((err) => {});
},
//获取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 = "一级";
@ -266,17 +266,157 @@ export default {
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
//console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].risk=='三级'){
if (warnListMqtt[i].risk == "三级") {
this.warnList3.splice(0, 0, warnListMqtt[i]);
}else if(warnListMqtt[i].risk=='二级'){
} else if (warnListMqtt[i].risk == "二级") {
this.warnList2.splice(0, 0, warnListMqtt[i]);
} if(warnListMqtt[i].risk=='一级'){
}
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: {},
};

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

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

36
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]"
@ -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: "行政案件" },

309
src/views/energySaving.vue
View File

@ -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"
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: [
{
@ -421,9 +369,11 @@ export default {
alarmSecondLevel: [],
alarmThirdLevel: [],
equipmentList2: [],
interval: null, //定时器
};
},
mounted() {
// setTimeout(() => {
this.getAllDevicesInfo();
// setInterval(() => {
@ -433,40 +383,39 @@ export default {
setTimeout(() => {
this.getAllDevicesInfo();
}, 10000);
this.getMqttData()
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel= this.alarmAllLevel
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()
this.getQOQ();
this.getYOY();
// window.createMqtt = this.createMqtt();
this.autoScroll(67, 50, 0, document.getElementById('equipmentWarnList'))
this.autoScroll(67, 50, 0, document.getElementById("equipmentWarnList"));
// }, 1000);
},
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val)
// console.log("alarmFirstLevel",val)
if (val.length != 0) {
this.upmqttData(val)
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val)
this.upmqttData(val)
//console.log("alarmSecondLevel",val)
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val)
this.upmqttData(val)
//console.log("alarmThirdLevel",val)
this.upmqttData(val);
},
},
methods: {
@ -480,11 +429,11 @@ export default {
meterType: "1",
// pbuildingId: "-1",
};
getAreaList(dataList).then((res)=>{
getAreaList(dataList)
.then((res) => {
this.calculateEcharts(res.data.data.child);
}).catch(err => {
})
.catch((err) => {});
},
//获取能耗计量同比分析
getYOY() {
@ -497,11 +446,11 @@ export default {
pbuildingId: "-1",
};
//接口调用
getAreaList(dataList).then((res)=>{
getAreaList(dataList)
.then((res) => {
this.calculateEchartsTwo(res.data.data.values);
}).catch(err => {
})
.catch((err) => {});
},
// //mqtt订阅数据
// createMqtt() {
@ -512,7 +461,6 @@ export default {
// },
// /** 实时数据分类 */
// realInfo(topic, message) {
// let that = this;
// switch (topic) {
@ -553,10 +501,7 @@ export default {
// }
// },
getMqttData() {
this.getDataByMqtt(
"ws://138.227.111.141:8083/mqtt",
"device/publish/FB80",
);
this.getDataByMqtt("ws://138.227.111.141:8083/mqtt", "device/publish/FB80");
},
// mqtt订阅（独立）
getDataByMqtt(url, topic) {
@ -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,7 +557,6 @@ export default {
that.sunList[4].count = msg.params.机器总运行时间;
that.sunList[5].count = msg.params.警告信息;
} else if (topic.indexOf("InConvoyor") != -1) {
}
});
}
@ -624,28 +565,27 @@ 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 = []
})
.then((response) => {
let resList = [];
// console.log(allDevicesCode,response.data.dataResults, "实时设备数据ssssssssssss");
for (const key in response.data.dataResults) {
resList = response.data.dataResults[1]
resList = response.data.dataResults[1];
}
for (let i = 0; i < this.equipmentList.length; i++) {
resList.forEach((is, k) => {
@ -662,13 +602,10 @@ export default {
for (let i = 0; i < this.equipmentList2.length; i += 8) {
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
}
}).catch(err => {
});;
}).catch(err => {
});
})
.catch((err) => {});
})
.catch((err) => {});
},
//预警点击
changeWarn(index) {
@ -678,58 +615,58 @@ export default {
AlarmLevel: "",
DeviceTypes: "热回收",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res);
}).catch(err => {
});;
})
.catch((err) => {});
}
if (index == 1) {
let params = {
AlarmLevel: "",
DeviceTypes: "电梯",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res);
}).catch(err => {
});
})
.catch((err) => {});
} else if (index == 2) {
let params = {
AlarmLevel: "",
DeviceTypes: "光伏",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res);
}).catch(err => {
});
})
.catch((err) => {});
} else if (index == 3) {
let params = {
AlarmLevel: "",
DeviceTypes: "VRV",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res);
}).catch(err => {
});
})
.catch((err) => {});
} else if (index == 4) {
let params = {
AlarmLevel: "",
DeviceTypes: "恒温恒湿",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res);
}).catch(err => {
});
})
.catch((err) => {});
}
},
//获取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,15 +678,13 @@ 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,
};
});
console.log("warnListMqtt",warnListMqtt)
//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]);
@ -782,8 +717,8 @@ export default {
let imgSrc = "/img/car.png";
let chartData = [];
chartData = Object.keys(val).map((item, index) => {
return {value:val[item].val,name:val[item].buildName}
})
return { value: val[item].val, name: val[item].buildName };
});
let colorList = ["red", "rgb(255,122,0)", "rgb(3, 255, 150)", "rgb(0,215,245)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100;
@ -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 = []
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)
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:'比率',
name: "比率",
textStyle: {
color:'#fff'
color: "#fff",
},
axisLine: { show: false },
axisTick: { show: false },
@ -1144,34 +1075,55 @@ export default {
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
console.log(element.scrollHeight);
let interval
let step = 1
element.scrollTop = 0
let that = this;
let step = 1;
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed)
element.scrollTop += step
that.interval = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
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: {},
};
</script>
@ -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;

446
src/views/index.vue
View File

@ -51,8 +51,18 @@
<span>{{ item.name }}</span>
</div>
</div>
<div class="warnList" id="warnList">
<div class="warnListContent" v-for="(item, index) in warnList" :key="index" id="warnListContent">
<div
class="warnList"
id="warnList"
@mouseenter="mouseOver"
@mouseleave="mouseLeave"
>
<div
class="warnListContent"
v-for="(item, index) in warnList"
:key="index"
id="warnListContent"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
@ -294,9 +304,9 @@ export default {
data() {
return {
dateData: "", //日期选择
value1: '',
value2: '',
value3: '',
value1: "",
value2: "",
value3: "",
yearShow: true,
monthShow: false,
dateShow: false,
@ -304,19 +314,22 @@ export default {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
shortcuts: [
{
text: "今天",
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
picker.$emit("pick", new Date());
},
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}]
picker.$emit("pick", date);
},
},
],
},
wisdomList: [
{
@ -359,6 +372,50 @@ export default {
},
], //报警按钮
warnBtnAc: 0, //报警选中按钮
warnListMqtt:[
{
id: "5",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调>发生事故",
risk: 1,
},
{
id: "5",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: 2,
},
{
id: "3",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: 3,
},
{
id: "4",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: 1,
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk:2,
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk:3,
},
],
warnList: [
{
id: "1",
@ -462,23 +519,27 @@ export default {
alarmSecondLevel: [],
alarmThirdLevel: [],
camersCode: "",
interval: null, //定时器
};
},
mounted() {
let that = this
this.value3 = this.$moment().format("yyyyMMDD")
this.selectTimeDD(this.value3)
// setTimeout(() => {
// this.getCamera();
//获取建筑id
this.getBuildingData();
let that = this;
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel;
window.alarmAllLevel = this.alarmAllLevel;
this.warningOne();
this.warningTwo();
this.maintenanceLeft();
this.maintenanceRight();
that.getBuildingData();
window.alarmFirstLevel = that.alarmFirstLevel;
window.alarmSecondLevel = that.alarmSecondLevel;
window.alarmThirdLevel = that.alarmThirdLevel;
window.alarmAllLevel = that.alarmAllLevel;
that.warningOne();
that.warningTwo();
that.maintenanceLeft();
that.maintenanceRight();
// this.energyEcharts();
this.selectDataList(this.selectDate);
that.selectDataList(that.selectDate);
// window.createMqtt = this.createMqtt();
// window.addEventListener("message", function (e) {
// let val = e.data.val;
@ -508,65 +569,64 @@ export default {
// setTimeout(() => {
// this.cameraList = camera;
// }, 1000);
this.warnSelect(0);
this.autoScroll(67, 50, 0, document.getElementById('warnList'))
that.warnSelect(0);
that.autoScroll(67, 50, 0, document.getElementById("warnList"));
// }, 1000);
},
// watch: {
// alarmAllLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// //console.log("alarmAllLevel", val);
// this.upmqttData(val);
// },
// alarmFirstLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// //console.log("alarmFirstLevel", val);
// if (val.length != 0) {
// this.upmqttData(val);
// }
// },
// alarmSecondLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// //console.log("alarmSecondLevel", val);
// this.upmqttData(val);
// },
// alarmThirdLevel(val) {
// // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// //console.log("alarmThirdLevel", val);
// this.upmqttData(val);
// },
// },
watch: {
alarmAllLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmAllLevel", val);
//console.log("alarmAllLevel",val)
this.upmqttData(val);
},
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: {
alarmAllLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmAllLevel",val)
this.upmqttData(val)
},
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val)
if(val.length!=0){
this.upmqttData(val)
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val)
this.upmqttData(val)
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val)
this.upmqttData(val)
},
},
methods: {
//放大变焦
addZoom() {
console.log(this.camersCode, "sssssssssssss");
//console.log(this.camersCode, "sssssssssssss");
let dataList = {
path: "/artemis/api/video/v1/ptzs/controlling",
data: {
@ -576,16 +636,16 @@ export default {
speed: "50",
},
};
getHikvision(dataList).then((res) => {
console.log(res, "=============");
}).catch(err => {
});
getHikvision(dataList)
.then((res) => {
//console.log(res, "=============");
})
.catch((err) => {});
},
selectTime(val) {
if (val) {
console.log("val",val)
this.value1 = val
//console.log("val",val)
this.value1 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -595,11 +655,11 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
@ -607,8 +667,8 @@ export default {
},
selectTimeMM(val) {
if (val) {
console.log("val",val)
this.value2 = val
//console.log("val",val)
this.value2 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -618,11 +678,11 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
@ -631,7 +691,7 @@ export default {
selectTimeDD(val) {
if (val) {
console.log("val",val)
this.value3 = val
this.value3 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -641,11 +701,11 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
@ -653,7 +713,7 @@ export default {
},
//缩小变焦
reduceZoom() {
console.log(this.camersCode, "sssssssssssss");
//console.log(this.camersCode, "sssssssssssss");
let dataList = {
path: "/artemis/api/video/v1/ptzs/controlling",
data: {
@ -663,11 +723,11 @@ export default {
speed: "50",
},
};
getHikvision(dataList).then((res) => {
console.log(res, "=============");
}).catch(err => {
});
getHikvision(dataList)
.then((res) => {
//console.log(res, "=============");
})
.catch((err) => {});
},
//获取视频流
getCamera() {
@ -687,17 +747,17 @@ export default {
cameraIndexCode: "620804559ecf4ade8f13b17337ea8bfa",
},
};
getHikvision(dataList).then((res) => {
getHikvision(dataList)
.then((res) => {
// this.cameraList[0].video =
// "video/video.html?src=" +
// res.data.result.data.url +
// "&code=" +
// dataList.data.cameraIndexCode;
this.cameraList[0].video = res.data.result.data.url;
console.log(this.cameraList[0].video,'视频地址');
}).catch(err => {
});
// console.log(this.cameraList[0].video,'视频地址');
})
.catch((err) => {});
let dataList1 = {
path: pathUrl,
@ -706,16 +766,16 @@ export default {
cameraIndexCode: "3efe8f887f164548a5db4266590a05ca",
},
};
getHikvision(dataList1).then((res) => {
getHikvision(dataList1)
.then((res) => {
// this.cameraList[1].video =
// "video/video.html?src=" +
// res.data.result.data.url +
// "&code=" +
// dataList1.data.cameraIndexCode;
this.cameraList[1].video = res.data.result.data.url;
}).catch(err => {
});
})
.catch((err) => {});
let dataList2 = {
path: pathUrl,
data: {
@ -723,16 +783,16 @@ export default {
cameraIndexCode: "f103ede0eb2b470f84e26ceec42486bc",
},
};
getHikvision(dataList2).then((res) => {
getHikvision(dataList2)
.then((res) => {
// this.cameraList[2].video =
// "video/video.html?src=" +
// res.data.result.data.url +
// "&code=" +
// dataList2.data.cameraIndexCode;
this.cameraList[2].video = res.data.result.data.url;
}).catch(err => {
});
})
.catch((err) => {});
let dataList3 = {
path: pathUrl,
data: {
@ -740,21 +800,22 @@ export default {
cameraIndexCode: "bf16be84f6f8410c8dca2dfc5369a532",
},
};
getHikvision(dataList3).then((res) => {
getHikvision(dataList3)
.then((res) => {
// this.cameraList[3].video =
// "video/video.html?src=" +
// res.data.result.data.url +
// "&code=" +
// dataList3.data.cameraIndexCode;
this.cameraList[3].video = res.data.result.data.url;
}).catch(err => {
});
})
.catch((err) => {});
},
//获取建筑Id
getBuildingData() {
getBuildinginfos().then((res) => {
console.log("res",res)
getBuildinginfos()
.then((res) => {
// console.log("res",res)
// 接口取值
this.buildingList = res.data.dataResults;
let buildArr = [];
@ -776,9 +837,8 @@ export default {
parentId: this.buildingList[index].parentId,
};
});
}).catch(err => {
});
})
.catch((err) => {});
},
//智慧节能选择时间
// selectDataList(val) {
@ -806,39 +866,36 @@ export default {
// });
// },
selectDataList(val) {
this.selectDate = val
this.selectDate = val;
if (val == 1) {
this.dateShow = true
this.monthShow = false
this.yearShow = false
this.dateShow = true;
this.monthShow = false;
this.yearShow = false;
} else if (val == 2) {
this.monthShow = true
this.yearShow = false
this.dateShow = false
this.monthShow = true;
this.yearShow = false;
this.dateShow = false;
} else {
this.yearShow = true
this.monthShow = false
this.dateShow = false
this.yearShow = true;
this.monthShow = false;
this.dateShow = false;
}
},
//智慧节能选择类型
selectMeterType(event) {
let nowTime = "";
console.log("selectDate",this.selectDate)
//console.log("selectDate",this.selectDate)
if (this.selectDate == 1) {
// nowTime = this.$moment().format("YYYYMMDD");
nowTime = this.value1
nowTime = this.value1;
} else if (this.selectDate == 2) {
// nowTime = this.$moment().format("YYYYMM");
nowTime = this.value2
nowTime = this.value2;
} else if (this.selectDate == 3) {
// nowTime = this.$moment().format("YYYY");
nowTime = this.value3
nowTime = this.value3;
}
console.log("this.value1",this.value1)
console.log("this.value2",this.value2)
console.log("this.value3",this.value3)
console.log("nowTime",nowTime)
//
let data = {
buildingId: event.value, //建筑id
customerId: "12345678",
@ -848,12 +905,12 @@ export default {
pbuildingId: event.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
console.log(res.data.data, "sssssssssssssss");
getAreaList(data)
.then((res) => {
//console.log(res.data.data, "sssssssssssssss");
this.energyEcharts(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
},
//选中图片
changeCamera(path) {
@ -880,21 +937,21 @@ export default {
AlarmLevel: "",
DeviceTypes: "门禁,视频监控",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
} else {
let params = {
AlarmLevel: "",
DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
this.upWainData(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
}
},
//更新报警信息
@ -914,9 +971,7 @@ export default {
return {
id: index + 1,
icon: icon,
time: this.$moment(val[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel,
@ -941,18 +996,35 @@ export default {
return {
id: index + 1,
icon: icon,
time: this.$moment(val[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt", warnListMqtt);
for (let i = 0; i < warnListMqtt.length; i++) {
this.warnList.splice(0, 0, warnListMqtt[i]);
}
this.warnList = Object.keys(this.warnList).map((item, index) => {
if (this.warnList[index].AlarmLevel == 1) {
this.warnList[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png");
} else if (this.warnList[index].AlarmLevel == 2) {
this.warnList[index].AlarmLevel = "二级";
icon = require("../assets/images/warnOrange.png");
} else if (this.warnList[index].AlarmLevel == 3) {
this.warnList[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png");
}
return {
id: index + 1,
icon: icon,
time: this.$moment(this.warnList[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: this.warnList[index].AlarmName,
DeviceType: this.warnList[index].DeviceType,
risk: this.warnList[index].AlarmLevel,
};
});
},
//设备左
warningOne() {
@ -1091,7 +1163,8 @@ export default {
let dataX = [];
getAlarmStatistics({
Type: "设备",
}).then((res) => {
})
.then((res) => {
res.data.data.forEach((item, index) => {
data.push(item.Count);
dataX.push(item.Name);
@ -1214,14 +1287,11 @@ export default {
],
};
myChart.setOption(option);
}).catch(err => {
});
})
.catch((err) => {});
},
maintenanceLeft() {
var myChart = this.$echarts.init(
document.getElementById("maintenanceLeft")
);
var myChart = this.$echarts.init(document.getElementById("maintenanceLeft"));
var data = [
{ value: "25", name: "报警" },
{ value: "25", name: "已完成" },
@ -1328,9 +1398,7 @@ export default {
myChart.setOption(option);
},
maintenanceRight() {
var myChart = this.$echarts.init(
document.getElementById("maintenanceRight")
);
var myChart = this.$echarts.init(document.getElementById("maintenanceRight"));
var data = [
{ value: "25", name: "报警" },
{ value: "25", name: "已完成" },
@ -1436,16 +1504,14 @@ export default {
myChart.setOption(option);
},
energyEcharts(val) {
console.log(val, "节能数据");
//console.log(val, "节能数据");
let dataX = [];
let dataY = [];
val.values.forEach((item, index) => {
dataX.push(item.dateDetail);
dataY.push(item.val);
});
var myChart = this.$echarts.init(
document.getElementById("energyEcharts")
);
var myChart = this.$echarts.init(document.getElementById("energyEcharts"));
let option = {
tooltip: {
trigger: "axis",
@ -1633,41 +1699,61 @@ 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);
} catch (error) {}
break;
}
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
console.log(element.scrollHeight);
let interval
let step = 1
element.scrollTop = 0
let that = this
let step = 1;
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed)
element.scrollTop += step
that.interval = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1
element.scrollTop = 0
step = 1;
element.scrollTop = 0;
} else {
if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\
step *= -1 // 转换方向
}
clearInterval(interval)
setTimeout(start, delay)
// if (
// element.scrollTop === 0 ||
// element.scrollTop === element.scrollHeight - element.offsetHeight
// ) {
// // 触顶或触底\
// // step *= -1; // 转换方向
// }
clearInterval(that.interval);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
setTimeout(start, delay)
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this
clearInterval(that.interval);
},
mouseLeave() {
this.autoScroll(67, 50, 0, document.getElementById("warnList"));
},
},
beforeDestroy() {
let that = this
// 离开当前路由前的操作
clearInterval(that.interval);
that.interval = null;
},
components: {
camera,
cameraBig,

2
src/views/operationMaintenance.vue
View File

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

367
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="
@ -93,11 +80,19 @@
align-items: flex-start;
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,63 +316,104 @@ export default {
};
},
mounted() {
window['getWarning'] = (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("消防联动,主楼一层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
name.indexOf("门厅") != -1 ||
name.indexOf("展厅") != -1
) {
// console.log("消防联动,主楼一层,公共区");
} else {
console.log("消防联动,主楼一层,办公区");
// console.log("消防联动,主楼一层,办公区");
}
} else if (name.indexOf("法院四层") != -1) {
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
console.log("消防联动,主楼四层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
// console.log("消防联动,主楼四层,公共区");
} else {
console.log("消防联动,主楼四层,办公区");
// console.log("消防联动,主楼四层,办公区");
}
} else if (name.indexOf("法院二层") != -1) {
//console.log("消防联动 主楼二层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
console.log("消防联动,主楼二层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼二层,公共区");
} else {
console.log("消防联动,主楼二层,办公区");
// console.log("消防联动,主楼二层,办公区");
}
} else if (name.indexOf("法院三层") != -1) {
// console.log("消防联动 主楼三层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
console.log("消防联动,主楼三层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼三层,公共区");
} else {
console.log("消防联动,主楼三层,办公区");
// 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("消防联动,辅楼一层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,辅楼一层,公共区");
} else {
console.log("消防联动,辅楼一层,办公区");
// console.log("消防联动,辅楼一层,办公区");
}
} else if (name.indexOf("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1) {
console.log("消防联动,辅楼二层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1
) {
// console.log("消防联动,辅楼二层,公共区");
} else {
console.log("消防联动,辅楼二层,办公区");
// 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("消防联动,辅楼三层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
//console.log("消防联动,辅楼三层,公共区");
} else {
console.log("消防联动,辅楼三层,办公区");
// 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("消防联动,辅楼四层,公共区");
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
// console.log("消防联动,辅楼四层,公共区");
} else {
console.log("消防联动,辅楼四层,办公区");
// console.log("消防联动,辅楼四层,办公区");
}
}
};
@ -413,25 +428,29 @@ export default {
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);
},
},
@ -459,16 +478,14 @@ export default {
methods: {
//获取昨天今天的报警数量
getAlarmCount() {
getSecurityAlarmCount().then((res) => {
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[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 => {
});
this.securityList[1].security[5].count = res.data.data.DoorYesterdayCount;
})
.catch((err) => {});
},
//获取设备离线在线数据
@ -511,7 +528,8 @@ export default {
},
};
let indexCodeList = [];
getHikvision(dataList).then((res) => {
getHikvision(dataList)
.then((res) => {
res.data.result.data.list.forEach((item, index) => {
indexCodeList.push(item.indexCode);
});
@ -520,7 +538,7 @@ export default {
data: {
doorIndexCodes: indexCodeList,
pageNo: 1,
pageSize:1000
pageSize: 1000,
},
};
let doorTotal = 0;
@ -529,8 +547,9 @@ export default {
let doorTotalList = [];
let doorOnLineList = [];
let offLineList = [];
getHikvision(doorStatusList).then((res) => {
console.log(res.data.result.data.authDoorList, "门禁状态数量");
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);
@ -544,13 +563,13 @@ export default {
//门禁离线数数量
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 => {
});
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,8 +580,9 @@ export default {
pageSize: 1000,
},
};
let cameraCodeList = []
getHikvision(cameraList).then((res) => {
let cameraCodeList = [];
getHikvision(cameraList)
.then((res) => {
res.data.result.data.list.forEach((item, index) => {
cameraCodeList.push(item.indexCode);
});
@ -571,14 +591,14 @@ export default {
data: {
indexCodes: cameraCodeList,
pageNo: 1,
pageSize:1000
pageSize: 1000,
},
};
let cameraTotalList = [];
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);
@ -592,19 +612,18 @@ export default {
//门禁离线数数量
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[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,7 +632,8 @@ export default {
AlarmLevel: "",
DeviceTypes: "消防",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
let icon = null;
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
@ -636,9 +656,8 @@ export default {
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
})
.catch((err) => {});
},
//获取安防报警、
getPoliceList() {
@ -646,7 +665,8 @@ export default {
AlarmLevel: "",
DeviceTypes: "门禁,视频监控",
};
GetLevelAlarm(params).then((res) => {
GetLevelAlarm(params)
.then((res) => {
let icon = null;
this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
@ -668,9 +688,8 @@ export default {
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
}).catch(err => {
});
})
.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(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: {},
};