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

Compare commits

base: chengdandan:8da0a7aeb44e10df7498dc4ad49632978f2b28a8
Branches Tags
chengdandan:master
...
compare: chengdandan:01470cda341e72298549e30612ef96680fd825b7
Branches Tags
chengdandan:master

2 Commits
8da0a7aeb4 ... 01470cda34

Author SHA1 Message Date
lixiaobang 01470cda34 代码提交 2023-05-17 17:52:36 +08:00
lixiaobang e2950c6046 代码提交 2023-05-16 12:31:26 +08:00
8 changed files with 1572 additions and 1216 deletions
Show Stats Expand all files Collapse all files

57
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)
@ -168,57 +162,49 @@ export default {
};
},
methods: {
goPage:function(name){
goPage(name)
goPage: function (name) {
goPage(name);
},
// goIndex:function(){
// goIndex(e)
// },
// 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.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");
} else if (index == 2) {
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png");
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");
} 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!="首页"){
@ -228,7 +214,6 @@ export default {
// }
this.menuAc = index;
},
//选中楼层

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,
)
};
// 获取区域用能数据信息

288
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: [],
//报警数组 二级
@ -132,15 +125,16 @@ 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
// 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,61 +144,64 @@ 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)
if(val.length!=0){
this.upmqttData(val)
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmSecondLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmThirdLevel",val)
this.upmqttData(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 = "一级";
}
return {
id: index+1,
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 = "一级";
@ -260,7 +260,7 @@ export default {
}
return {
id: index + 1,
icon:icon,
icon: icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
risk: val[index].AlarmLevel,
@ -268,15 +268,155 @@ export default {
});
//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]);
if (warnListMqtt[i].risk == "三级") {
this.warnList3.splice(0, 0, warnListMqtt[i]);
} else if (warnListMqtt[i].risk == "二级") {
this.warnList2.splice(0, 0, warnListMqtt[i]);
}
if (warnListMqtt[i].risk == "一级") {
this.warnList1.splice(0, 0, warnListMqtt[i]);
}
}
},
autoScroll(stepLength, speed, delay, element, name) {
let that = this;
if (name == "courtHouse2") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime1 = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
if (
element.scrollTop === 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
}
clearInterval(that.intervalTime1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
} else if (name == "courtHouse3") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime2 = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
if (
element.scrollTop === 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
}
clearInterval(that.intervalTime2);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
}
},
autoScroll2(stepLength, speed, delay, element) {
let that = this;
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
let scrollTop1 = element.scrollTop + 1;
if (
scrollTop1 % stepLength !== 0 &&
scrollTop1 === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
if (
element.scrollTop === 0 ||
scrollTop1 === element.scrollHeight - element.offsetHeight
) {
// 触顶或触底\
// step *= -1; // 转换方向
}
clearInterval(that.intervalTime);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
},
mouseLeave() {
this.autoScroll2(67, 50, 0, document.getElementById("courtHouse"));
},
//鼠标移入事件
mouseOver2() {
let that = this;
clearInterval(that.intervalTime1);
},
mouseLeave2() {
let name = 'courtHouse2'
this.autoScroll(67, 50, 0, document.getElementById("courtHouse2"),name);
},
//鼠标移入事件
mouseOver3() {
let that = this;
clearInterval(that.intervalTime2);
},
mouseLeave3() {
let name = 'courtHouse3'
this.autoScroll(67, 50, 0, document.getElementById("courtHouse3"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
clearInterval(that.intervalTime2);
},
components: {},
};

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

349
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">
<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,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,56 +365,57 @@ export default {
],
equipmentShow: false,
equipmentList1: [],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
alarmFirstLevel: [],
alarmSecondLevel: [],
alarmThirdLevel: [],
equipmentList2: [],
interval: null, //定时器
};
},
mounted() {
// setTimeout(() => {
this.getAllDevicesInfo();
// setInterval(() => {
// this.getAllDevicesInfo();
// }, 10000);
setTimeout(()=> {
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"));
// }, 1000);
},
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
// console.log("alarmFirstLevel",val)
if(val.length!=0){
this.upmqttData(val)
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmSecondLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmThirdLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
},
methods: {
@ -452,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() {
@ -469,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() {
@ -484,7 +461,6 @@ export default {
// },
// /** 实时数据分类 */
// realInfo(topic, message) {
// let that = this;
// switch (topic) {
@ -524,11 +500,8 @@ export default {
// 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订阅（独立）
getDataByMqtt(url, topic) {
@ -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',
@ -562,8 +535,7 @@ export default {
// console.log("[MQTT-TEST] 重连中……");
});
// 连接回调
this.mqttClient.on("connect", () => {
});
this.mqttClient.on("connect", () => {});
// 接收回调
this.mqttClient.on("message", (topic, message, packet) => {
// 解析后端数据
@ -585,7 +557,6 @@ export default {
that.sunList[4].count = msg.params.机器总运行时间;
that.sunList[5].count = msg.params.警告信息;
} else if (topic.indexOf("InConvoyor") != -1) {
}
});
}
@ -596,25 +567,25 @@ 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 = []
})
.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) => {
@ -631,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) {
@ -647,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 = "一级";
@ -710,18 +678,16 @@ 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]);
if (warnListMqtt[i].DeviceTypes == this.warnList[0].DeviceTypes) {
this.warnList.splice(0, 0, warnListMqtt[i]);
}
}
},
@ -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,56 @@ export default {
closeEquipmentShow() {
this.equipmentShow = false;
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
let that = this;
let step = 1;
element.scrollTop = 0;
function start() {
that.interval = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} 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);
},
mouseLeave() {
this.autoScroll(67, 50, 0, document.getElementById("equipmentWarnList"));
},
},
beforeDestroy() {
let that = this
// 离开当前路由前的操作
clearInterval(that.interval);
that.interval = null;
},
components: {},
};
@ -1167,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;

488
src/views/index.vue
View File

@ -5,31 +5,18 @@
<div class="title">智慧法庭</div>
<div class="wisdomContent">
<div class="wisdomTop">
<div
class="wisdomData"
v-for="(item, index) in wisdomList"
:key="index"
>
<div class="wisdomData" v-for="(item, index) in wisdomList" :key="index">
<div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
<div
:class="houseList[index]"
style="
width: 100%;
height: 100%;
color: #fff;
font-size: 0.7rem;
"
style="width: 100%; height: 100%; color: #fff; font-size: 0.7rem"
>
{{ item.count }}
</div>
</div>
</div>
<div class="wisdomBottom">
<div
class="wisdomCount"
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div class="wisdomCount" v-for="(item, index) in wisdomMonArr" :key="index">
<div style="width: 100%; font-size: 0.6rem">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
@ -64,11 +51,17 @@
<span>{{ item.name }}</span>
</div>
</div>
<div class="warnList">
<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>
@ -185,7 +178,7 @@
<div class="selectChange1">
<el-date-picker
v-model="value1"
v-if= "yearShow"
v-if="yearShow"
align="right"
type="year"
value-format="yyyy"
@ -195,7 +188,7 @@
</el-date-picker>
<el-date-picker
v-model="value2"
v-if= "monthShow"
v-if="monthShow"
type="month"
value-format="yyyyMM"
placeholder="选择月"
@ -204,7 +197,7 @@
</el-date-picker>
<el-date-picker
v-model="value3"
v-if= "dateShow"
v-if="dateShow"
type="date"
placeholder="选择日"
value-format="yyyyMMdd"
@ -311,29 +304,32 @@ export default {
data() {
return {
dateData: "", //日期选择
value1: '',
value2: '',
value3: '',
yearShow:true,
monthShow:false,
dateShow:false,
value1: "",
value2: "",
value3: "",
yearShow: true,
monthShow: false,
dateShow: false,
pickerOptions: {
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: [
{
@ -376,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",
@ -412,6 +452,20 @@ export default {
cause: "<空调设备>发生事故",
risk: "三级",
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: "三级",
},
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "<空调设备>发生事故",
risk: "三级",
},
], //报警数组
selectValue: {
value: "79",
@ -465,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;
@ -511,58 +569,58 @@ export default {
// setTimeout(() => {
// this.cameraList = camera;
// }, 1000);
this.warnSelect(0);
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);
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//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)
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
//console.log("alarmThirdLevel",val)
this.upmqttData(val)
this.upmqttData(val);
},
},
methods: {
@ -578,16 +636,16 @@ export default {
speed: "50",
},
};
getHikvision(dataList).then((res) => {
getHikvision(dataList)
.then((res) => {
//console.log(res, "=============");
}).catch(err => {
});
})
.catch((err) => {});
},
selectTime(val){
if(val){
selectTime(val) {
if (val) {
//console.log("val",val)
this.value1 = val
this.value1 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -597,20 +655,20 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
}else{
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
}
},
selectTimeMM(val){
if(val){
selectTimeMM(val) {
if (val) {
//console.log("val",val)
this.value2 = val
this.value2 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -620,20 +678,20 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
}else{
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
}
},
selectTimeDD(val){
if(val){
//console.log("val",val)
this.value3 = val
selectTimeDD(val) {
if (val) {
console.log("val",val)
this.value3 = val;
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
@ -643,12 +701,12 @@ export default {
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
this.energyEcharts(res.data.data);
}).catch(err => {
});
}else{
})
.catch((err) => {});
} else {
// this.filters.year = ""
// this.filters.month = ""
}
@ -665,11 +723,11 @@ export default {
speed: "50",
},
};
getHikvision(dataList).then((res) => {
getHikvision(dataList)
.then((res) => {
//console.log(res, "=============");
}).catch(err => {
});
})
.catch((err) => {});
},
//获取视频流
getCamera() {
@ -689,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;
this.cameraList[0].video = res.data.result.data.url;
// console.log(this.cameraList[0].video,'视频地址');
}).catch(err => {
});
})
.catch((err) => {});
let dataList1 = {
path: pathUrl,
@ -708,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 => {
});
this.cameraList[1].video = res.data.result.data.url;
})
.catch((err) => {});
let dataList2 = {
path: pathUrl,
data: {
@ -725,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 => {
});
this.cameraList[2].video = res.data.result.data.url;
})
.catch((err) => {});
let dataList3 = {
path: pathUrl,
data: {
@ -742,20 +800,21 @@ 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 => {
});
this.cameraList[3].video = res.data.result.data.url;
})
.catch((err) => {});
},
//获取建筑Id
getBuildingData() {
getBuildinginfos().then((res) => {
getBuildinginfos()
.then((res) => {
// console.log("res",res)
// 接口取值
this.buildingList = res.data.dataResults;
@ -778,9 +837,8 @@ export default {
parentId: this.buildingList[index].parentId,
};
});
}).catch(err => {
});
})
.catch((err) => {});
},
//智慧节能选择时间
// selectDataList(val) {
@ -808,19 +866,19 @@ 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;
}
},
//智慧节能选择类型
@ -829,13 +887,13 @@ export default {
//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
} else if (this.selectDate == 3){
nowTime = this.value2;
} else if (this.selectDate == 3) {
// nowTime = this.$moment().format("YYYY");
nowTime = this.value3
nowTime = this.value3;
}
//
let data = {
@ -847,12 +905,12 @@ export default {
pbuildingId: event.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
getAreaList(data)
.then((res) => {
//console.log(res.data.data, "sssssssssssssss");
this.energyEcharts(res.data.data);
}).catch(err => {
});
})
.catch((err) => {});
},
//选中图片
changeCamera(path) {
@ -879,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) => {});
}
},
//更新报警信息
@ -913,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,
@ -940,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() {
@ -1090,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);
@ -1213,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: "已完成" },
@ -1327,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: "已完成" },
@ -1442,9 +1511,7 @@ export default {
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",
@ -1637,6 +1704,55 @@ export default {
break;
}
},
//自动滚动
autoScroll(stepLength, speed, delay, element) {
let that = this
let step = 1;
element.scrollTop = 0;
function start() {
that.interval = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} 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);
},
mouseLeave() {
this.autoScroll(67, 50, 0, document.getElementById("warnList"));
},
},
beforeDestroy() {
let that = this
// 离开当前路由前的操作
clearInterval(that.interval);
that.interval = null;
},
components: {
camera,
@ -1810,6 +1926,7 @@ export default {
}
.warnList {
height: calc(100% - 31%);
// height:480px;
width: 100%;
background: url(../assets/images/warnDottedLine.png) no-repeat;
background-size: 100% 100%;
@ -2000,7 +2117,8 @@ export default {
position: absolute;
top: 22%;
right: 35%;
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 134px;
}
/deep/ .el-select {
@ -2038,8 +2156,8 @@ export default {
height: 100%;
width: 25px;
text-align: center;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
line-height: 22px;
}
/deep/ .el-input--suffix .el-input__inner {
@ -2135,5 +2253,3 @@ export default {
}
}
</style>

2
src/views/operationMaintenance.vue
View File

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

359
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,62 +316,103 @@ 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) {
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{
} else {
// console.log("消防联动,主楼一层,办公区");
}
} else if(name.indexOf("法院四层") != -1) {
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("自助立案") != -1) {
} else if (name.indexOf("法院四层") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
// console.log("消防联动,主楼四层,公共区");
}else{
} 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) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼二层,公共区");
}else{
} 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) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,主楼三层,公共区");
}else{
} 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) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("自助立案") != -1
) {
//console.log("消防联动,辅楼一层,公共区");
}else{
} 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) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1
) {
// console.log("消防联动,辅楼二层,公共区");
}else{
} else {
// console.log("消防联动,辅楼二层,办公区");
}
}else if(name.indexOf("辅楼3层") != -1) {
} else if (name.indexOf("辅楼3层") != -1) {
//console.log("消防联动 辅楼三层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("电梯") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
//console.log("消防联动,辅楼三层,公共区");
}else{
} else {
// console.log("消防联动,辅楼三层,办公区");
}
}else if(name.indexOf("辅楼4层") != -1) {
} else if (name.indexOf("辅楼4层") != -1) {
//console.log("消防联动 辅楼四层");
if (name.indexOf("走道") != -1 || name.indexOf("大厅") != -1|| name.indexOf("楼梯") != -1|| name.indexOf("电梯") != -1) {
if (
name.indexOf("走道") != -1 ||
name.indexOf("大厅") != -1 ||
name.indexOf("楼梯") != -1 ||
name.indexOf("电梯") != -1
) {
// console.log("消防联动,辅楼四层,公共区");
}else{
} else {
// console.log("消防联动,辅楼四层,办公区");
}
}
@ -413,10 +428,14 @@ 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);
@ -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);
});
@ -519,8 +537,8 @@ export default {
path: "/artemis/api/acs/v1/door/states",
data: {
doorIndexCodes: indexCodeList,
pageNo:1,
pageSize:1000
pageNo: 1,
pageSize: 1000,
},
};
let doorTotal = 0;
@ -529,7 +547,8 @@ export default {
let doorTotalList = [];
let doorOnLineList = [];
let offLineList = [];
getHikvision(doorStatusList).then((res) => {
getHikvision(doorStatusList)
.then((res) => {
//console.log(res.data.result.data.authDoorList, "门禁状态数量");
for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
//获取总数的数组
@ -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);
});
@ -570,8 +590,8 @@ export default {
path: "/artemis/api/nms/v1/online/camera/get",
data: {
indexCodes: cameraCodeList,
pageNo:1,
pageSize:1000
pageNo: 1,
pageSize: 1000,
},
};
let cameraTotalList = [];
@ -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,9 +712,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,
@ -711,13 +728,107 @@ export default {
if (warnListMqtt[i].DeviceType == "消防") {
//console.log("warnListMqtt[i]",warnListMqtt[i])
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
this.getWarning(warnListMqtt[i].position)
this.getWarning(warnListMqtt[i].position);
}
}
},
getWarning:function(name){
getWarning(name)
getWarning: function (name) {
getWarning(name);
},
//自动滚动
autoScroll(stepLength, speed, delay, element, name) {
let that = this;
if (name == "fire") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
// if (
// element.scrollTop === 0 ||
// element.scrollTop === element.scrollHeight - element.offsetHeight
// ) {
// // 触顶或触底\
// // step *= -1; // 转换方向
// }
clearInterval(that.intervalTime);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
} else if (name == "police") {
let step = 1;
element.scrollTop = 0;
function start() {
that.intervalTime1 = setInterval(scrolling, speed);
element.scrollTop += step;
}
function scrolling() {
if (
element.scrollTop % stepLength !== 0 &&
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
// element.scrollTop += step
step = 1;
element.scrollTop = 0;
} else {
// if (
// element.scrollTop === 0 ||
// element.scrollTop === element.scrollHeight - element.offsetHeight
// ) {
// // 触顶或触底\
// // step *= -1; // 转换方向
// }
clearInterval(that.intervalTime1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
}
},
//鼠标移入事件
mouseOver() {
let that = this;
clearInterval(that.intervalTime);
},
mouseLeave() {
let name = 'fire'
this.autoScroll(67, 50, 0, document.getElementById("fire"),name);
},
//鼠标移入事件
mouseOver1() {
let that = this;
clearInterval(that.intervalTime1);
},
mouseLeave1() {
let name = 'police'
this.autoScroll(67, 50, 0, document.getElementById("police"),name);
},
},
beforeDestroy() {
let that = this;
// 离开当前路由前的操作
clearInterval(that.intervalTime);
clearInterval(that.intervalTime1);
},
components: {},
};