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

20230519

This commit is contained in:
chengdandan 2023-05-19 09:15:15 +08:00
parent c69ebdc05b 01470cda34
commit 41b6b661e5
11 changed files with 3532 additions and 19513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

19417
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -19,6 +19,7 @@
"less-loader": "^5.0.0",
"moment": "^2.29.4",
"mqtt": "^4.3.7",
"node-sass": "^8.0.0",
"pdfjs-dist": "2.5.207",
"postcss-px2rem-exclude": "^0.0.6",
"semver": "^7.4.0",
@ -35,6 +36,7 @@
"@vue/cli-plugin-babel": "^3.0.4",
"@vue/cli-service": "^3.0.4",
"mini-css-extract-plugin": "^2.7.2",
"sass-loader": "^7.0.3",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.0.0"
},

104
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");
};
this.menuChange(0, this.menuBtn[0].name);
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay();
@ -164,64 +158,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.menuBtn[index].icon = require("./assets/images/shouYeAc.png");
this.$router.push("/");
this.menuBtn[index].icon = require("./assets/images/shouYeAc.png");
this.$router.push("/");
} else if (index == 1) {
this.menuBtn[index].icon = require("./assets/images/faTingAc.png");
this.$router.push("court");
this.menuBtn[index].icon = require("./assets/images/faTingAc.png");
this.$router.push("court");
} else if (index == 2) {
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png");
this.$router.push("energySaving");
this.$router.push("energySaving");
} else if (index == 3) {
this.menuBtn[index].icon = require("./assets/images/anFangAc.png");
this.$router.push("security");
} else if (index == 4) {
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png");
this.$router.push("operationMaintenance");
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.menuBtn[index].icon = require("./assets/images/gaoJingAc.png");
this.$router.push("alarm");
}
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;
},
//选中楼层
@ -387,4 +375,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,
)
};
// 获取区域用能数据信息

15
src/assets/home.scss Normal file
View File

@ -0,0 +1,15 @@
.elDatePicker.el-picker-panel {
color: #fff;//设置当前面板的月份的字体为白色，记为1
background: #002450;//定义整体面板的颜色
border: 1px solid #1384b4;//定义整体面板的轮廓
.el-picker-panel__icon-btn {//设置年份月份调节按钮颜色，记为2
color: #ffffff;
}
.el-date-picker__header-label{//设置年月显示颜色，记为3
color: #ffffff;
}
.el-date-table th {//设置星期颜色，记为4
color:#ffffff;
}
}

427
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,124 +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.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"), name);
this.autoScrollalarm(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)
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmSecondLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
alarmThirdLevel(val) {
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmThirdLevel",val)
this.upmqttData(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) {
@ -259,25 +258,171 @@ 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]);
}
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]);
}
}
},
autoScrollalarm(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);
}
}
},
autoScrollalarm2(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);
that.intervalTime = null
},
mouseLeave() {
this.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
},
//鼠标移入事件
mouseOver2() {
let that = this;
clearInterval(that.intervalTime1);
that.intervalTime1 = null
},
mouseLeave2() {
let name = 'courtHouse2'
this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"),name);
},
//鼠标移入事件
mouseOver3() {
let that = this;
clearInterval(that.intervalTime2);
that.intervalTime2 = null
},
mouseLeave3() {
let name = 'courtHouse3'
this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse3"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
clearInterval(that.intervalTime2);
that.intervalTime = null
that.intervalTime1 = null
that.intervalTime2 = null
},
components: {},
};
@ -558,4 +703,4 @@ export default {
box-sizing: border-box;
margin-top: 2%;
}
</style>
</style>

41
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,10 +323,12 @@ export default {
};
},
mounted() {
this.getcourt()
this.caseEcharts();
this.caseTypeLeft();
this.caseTypeRight();
let that = this
// setTimeout(() => {
that.caseEcharts();
that.caseTypeLeft();
that.caseTypeRight();
// }, 1000);
},
methods: {
caseEcharts() {
@ -667,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: "行政案件" },
@ -1073,4 +1058,4 @@ export default {
padding-left: 5%;
box-sizing: border-box;
}
</style>
</style>

478
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">
<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,38 +293,37 @@ export default {
{
name: "恒温恒湿空调",
},
],
equipmentBtnAc: "", //点击预警
warnList: [
// {
// id: "1",
// icon: require("../assets/images/jieNengImg/warnRed.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
// {
// id: "2",
// icon: require("../assets/images/jieNengImg/warnBlue.png"),
// time: "2023年03月12日 15:45:10",
// case: "设备故障",
// grade: "三级",
// },
// {
// id: "3",
// icon: require("../assets/images/jieNengImg/warnWhite.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: "1",
icon: require("../assets/images/jieNengImg/warnRed.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "2",
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
case: "设备故障",
grade: "三级",
},
{
id: "3",
icon: require("../assets/images/jieNengImg/warnWhite.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: [
{
@ -389,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();
//轮播八个一页
// 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.autoScrollenergySaving(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)
this.upmqttData(val);
},
alarmThirdLevel(val) {
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmThirdLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
},
},
methods: {
//获取能耗计量环比分析
getQOQ() {
@ -452,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() {
@ -469,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() {
@ -483,7 +460,6 @@ export default {
// window.PubScribe(topicSends, this.realInfo);
// },
// /** 实时数据分类 */
// realInfo(topic, message) {
// let that = this;
@ -518,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",
@ -540,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',
@ -559,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) => {
// 解析后端数据
@ -585,8 +557,7 @@ export default {
that.sunList[4].count = msg.params.机器总运行时间;
that.sunList[5].count = msg.params.警告信息;
} else if (topic.indexOf("InConvoyor") != -1) {
}
}
});
}
// 订阅
@ -596,109 +567,106 @@ export default {
getAllDevicesInfo() {
//调用接口数据
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 = "一级";
@ -710,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]);
}
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) {
@ -743,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 = [];
@ -784,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: {
@ -943,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 = {
//你的代码
@ -990,7 +952,7 @@ export default {
},
yAxis: [
{
name:'单位kWh',
name: "单位kWh",
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
@ -1003,9 +965,9 @@ export default {
splitLine: { show: false },
},
{
name:'比率',
textStyle:{
color:'#fff'
name: "比率",
textStyle: {
color: "#fff",
},
axisLine: { show: false },
axisTick: { show: false },
@ -1111,6 +1073,57 @@ export default {
closeEquipmentShow() {
this.equipmentShow = false;
},
//自动滚动
autoScrollenergySaving(stepLength, speed, delay, element) {
let that = this;
let step = 1;
element.scrollTop = 0;
function start() {
that.interval = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
if (
element.scrollTop === 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
}
clearInterval(that.interval);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this
clearInterval(that.interval);
that.interval = null;
},
mouseLeave() {
this.autoScrollenergySaving(67, 50, 0, document.getElementById("equipmentWarnList"));
},
},
beforeDestroy() {
let that = this
// 离开当前路由前的操作
clearInterval(that.interval);
that.interval = null;
},
components: {},
};
@ -1167,8 +1180,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;
@ -1430,4 +1442,4 @@ export default {
cursor: pointer;
}
}
</style>
</style>

1858
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

684
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="fireId" @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="policeId" @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,81 +316,129 @@ 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{
window['getsecurity']= (name) => {
console.log("name",name)
}
// setTimeout(() => {
window["getWarning"] = (name) => {
// alert("goPage:"+b);
// console.log("name",name)
if (name.indexOf("法院一层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1 ||
name.indexOf("门厅") != -1 ||
name.indexOf("展厅") != -1
) {
// console.log("消防联动,主楼一层,公共区");
} else {
// console.log("消防联动,主楼一层,办公区");
}
} 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{
}
} 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) {
}
} else if (name.indexOf("法院三层") != -1) {
// console.log("消防联动 主楼三层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
//console.log("消防联动,主楼三层,公共区");
}else{
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼三层,公共区");
} else {
// console.log("消防联动,主楼三层,办公区");
}
}else if(name.indexOf("辅楼1层") != -1) {
}
} else if (name.indexOf("辅楼1层") != -1) {
// console.log("消防联动 辅楼一层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
//console.log("消防联动,辅楼一层,公共区");
}else{
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,辅楼一层,公共区");
} else {
// console.log("消防联动,辅楼一层,办公区");
}
}else if(name.indexOf("辅楼2层") != -1) {
}
} else if (name.indexOf("辅楼2层") != -1) {
// console.log("消防联动 辅楼二层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1) {
// console.log("消防联动,辅楼二层,公共区");
}else{
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{
}
} 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{
}
} 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.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"), name);
this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"), name1);
// }, 1000);
},
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmFirstLevel", val);
@ -435,40 +457,38 @@ export default {
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 +531,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 +583,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 +635,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 +668,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,9 +715,7 @@ 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,
@ -707,17 +727,119 @@ export default {
if (warnListMqtt[i].AlarmLevel == "三级") {
this.policeList.splice(0, 0, warnListMqtt[i]);
this.getAlarmCount();
this.getsecurity(warnListMqtt[i].position);
}
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);
},
getsecurity: function (name) {
getsecurity(name);
},
//自动滚动
autoScrollsecurity(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);
that.intervalTime = null
},
mouseLeave() {
let name = 'fire'
this.autoScrollsecurity(67, 50, 0, document.getElementById("fireId"),name);
},
//鼠标移入事件
mouseOver1() {
let that = this;
clearInterval(that.intervalTime1);
that.intervalTime1 = null
},
mouseLeave1() {
let name = 'police'
this.autoScrollsecurity(67, 50, 0, document.getElementById("policeId"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
that.intervalTime = null
that.intervalTime1 = null
},
components: {},
};
@ -943,4 +1065,4 @@ export default {
box-sizing: border-box;
margin-top: 2%;
}
</style>
</style>