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

Compare commits

base: chengdandan:4ed697d5fa2c92e1504a0b875f996e92ea5823e7
Branches Tags
chengdandan:master
..
compare: chengdandan:57f57b451d81cceca3cfa7a4b4ad2ad170205e2d
Branches Tags
chengdandan:master

No commits in common. "4ed697d5fa2c92e1504a0b875f996e92ea5823e7" and "57f57b451d81cceca3cfa7a4b4ad2ad170205e2d" have entirely different histories.
4ed697d5fa ... 57f57b451d

25 changed files with 15439 additions and 37204 deletions
Show Stats Expand all files Collapse all files

3
package.json
View File

@ -7,7 +7,6 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"@videojs/http-streaming": "^2.16.2",
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^2.6.5", "core-js": "^2.6.5",
@ -23,8 +22,6 @@
"postcss-px2rem-exclude": "^0.0.6", "postcss-px2rem-exclude": "^0.0.6",
"semver": "^7.4.0", "semver": "^7.4.0",
"v-fit-columns": "^0.2.0", "v-fit-columns": "^0.2.0",
"video.js": "^8.0.4",
"videojs-contrib-hls": "^5.15.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-pdf": "4.2.0", "vue-pdf": "4.2.0",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",

1
public/camera/css/video-js.css
View File

File diff suppressed because one or more lines are too long

44
public/camera/demoVideo.html
View File

@ -1,44 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5 PC测试</title>
<link href="css/video-js.css" rel="stylesheet">
<script src="js/video.min.js"></script>
<script src="js/videojs-contrib-hls.js"></script>
<style>
body{background-color: #191919}
#example-video{
margin: 0 auto;
width: 80%;
height:600px;
}
</style>
</head>
<body>
<div>
<h1 style="color: white; text-align: center;">HLS测试</h1>
<video id="example-video" class="video-js" autoplay="autoplay" controls preload="auto"
width="600" height="800" >
<!-- <source src="http://193.112.101.157:8080/hls/test.m3u8" type="application/x-mpegURL" /> -->
<!-- <source src="http://60.190.97.190:83/openUrl/LpSobcI/live.m3u8" type="application/x-mpegURL"> -->
<source :src="url" type="application/x-mpegURL">
</video>
</div>
</body>
<script>
window.onload = function() {
var player = videojs('example-video');
player.play();
},
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
console.log();
</script>
</html>

1
public/camera/js/hls.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
public/camera/js/video.min.js vendored
View File

File diff suppressed because one or more lines are too long

21581
public/camera/js/videojs-contrib-hls.js
View File

File diff suppressed because it is too large Load Diff

8
public/camera/js/videojs-contrib-hls.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
public/camera/js/videojs-ie8.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
public/video/video.html
View File

@ -87,16 +87,10 @@
var r = window.location.search.substr(1).match(reg); var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null; if (r != null) return unescape(r[2]); return null;
} }
function getCameraList(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// var videoBack = 'ws://192.168.105.213:9999/play?stream=rtsp://10.16.56.21:554/openUrl/EKndeuY?beginTime=20220709T141558&endTime=20220710T141558' // var videoBack = 'ws://192.168.105.213:9999/play?stream=rtsp://10.16.56.21:554/openUrl/EKndeuY?beginTime=20220709T141558&endTime=20220710T141558'
// $('#player').attr('video-url',videoBack); // $('#player').attr('video-url',videoBack);
$('#player').attr('video-url',getQueryString('src')); $('#player').attr('video-url',getQueryString('src'));
// $('#player').attr('video-url',"video.mp4");
// $('#player').attr('video-url',"http://138.227.200.2:83/openUrl/GNzyMUM/live.m3u8");
// 截图 // 截图
// function snapshot(){ // function snapshot(){
// if(document.getElementsByClassName("easy-video-player-inner")[0]){ // if(document.getElementsByClassName("easy-video-player-inner")[0]){
@ -120,10 +114,8 @@
//点击事件 //点击事件
$('#appc').click(function(){ $('#appc').click(function(){
let val = getQueryString('src') let val = getQueryString('src')
let code = getCameraList('code')
window.parent.postMessage({ window.parent.postMessage({
val, val
code
}, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据 }, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
}) })
</script> </script>

224
src/App.vue
View File

@ -28,80 +28,58 @@
</div> </div>
<div class="menu"> <div class="menu">
<div class="menuList"> <div class="menuList">
<div <div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index,item.name)" :class="{menuAc : menuAc == index}">
class="menuBtn"
v-for="(item, index) in menuBtn"
:key="index"
@click="menuChange(index, item.name)"
:class="{ menuAc: menuAc == index }"
>
<!-- <img :src="item.icon" :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/> --> <!-- <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%'}"/>
:src="item.icon" <div style="font-size: 0.55rem;margin-top: 5%;">{{ item.name }}</div>
:style="{
wdith: menuAc == index ? '75%' : '55%',
height: menuAc == index ? '85%' : '85%',
}"
/>
<div style="font-size: 0.55rem; margin-top: 5%">{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<keep-alive> <router-view />
<router-view />
</keep-alive>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import pdf from "vue-pdf"; import pdf from 'vue-pdf'
import axios from "axios"; import axios from "axios"
import { getData } from "./api/index.js"; import {getData} from './api/index.js'
export default { export default {
data() { data(){
return { return{
screenWidth: screenWidth:
window.innerWidth || window.innerWidth ||
document.documentElement.clientWidth || document.documentElement.clientWidth ||
document.body.clientWidth, document.body.clientWidth,
time: "", time:'',
weekList: [ weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
"星期日", week:'',
"星期一", floorAct:0,
"星期二", floorList:[
"星期三",
"星期四",
"星期五",
"星期六",
],
week: "",
floorAct: 0,
floorList: [
{ {
name: "楼顶", name:'楼顶',
}, },
{ {
name: "F5", name:'F5',
}, },
{ {
name: "F4", name:'F4',
}, },
{ {
name: "F3", name:'F3',
}, },
{ {
name: "F2", name:'F2',
}, },
{ {
name: "F1", name:'F1',
}, },
{ {
name: "B1", name:'B1',
}, },
], ],
menuBtn: [ menuBtn: [
{ {
name: "首页", name: "首页",
icon: require("./assets/images/shouYe.png"), icon: require("./assets/images/shouYe.png"),
@ -127,89 +105,89 @@ export default {
icon: require("./assets/images/gaoJing.png"), icon: require("./assets/images/gaoJing.png"),
}, },
], ],
menuAc: 0, //菜单点击 menuAc:0, //菜单点击
timer: null, timer:null,
}; }
}, },
created() { created() {
this.fun(); this.fun();
}, },
mounted() { mounted() {
window.goPage = this.goPage(); window.goPage = this.goPage()
this.menuChange(0, this.menuBtn[0].name); this.menuChange(0,this.menuBtn[0].name)
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay(); let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
this.week = this.weekList[week]; this.week = this.weekList[week]
window.setInterval(() => { window.setInterval(()=>{
this.time = this.$moment().format("YYYY-MM-DD HH:mm:ss"); this.time = this.$moment().format("YYYY-MM-DD HH:mm:ss")
}, 100); },100)
const that = this; const that = this;
window.onresize = () => { window.onresize = () => {
return () => { return (() => {
(window.screenWidth = (window.screenWidth =
window.innerWidth || window.innerWidth ||
document.documentElement.clientWidth || document.documentElement.clientWidth ||
document.body.clientWidth), document.body.clientWidth),
(that.screenWidth = window.screenWidth); (that.screenWidth = window.screenWidth);
that.fun(); that.fun();
}; });
}; };
}, },
methods: { methods:{
//菜单选中 //菜单选中
menuChange(index, name) { menuChange(index,name){
this.goPage(name); this.goPage(name)
this.menuAc = index; this.menuAc = index
this.menuBtn.forEach((item, index) => { this.menuBtn.forEach((item,index) => {
if (index == 0) { if (index == 0) {
item.icon = require("./assets/images/shouYe.png"); item.icon = require("./assets/images/shouYe.png")
} else if (index == 1) { }else if (index == 1) {
item.icon = require("./assets/images/faTing.png"); item.icon = require("./assets/images/faTing.png")
} else if (index == 2) { }else if (index == 2) {
item.icon = require("./assets/images/jieNeng.png"); item.icon = require("./assets/images/jieNeng.png")
} else if (index == 3) { }else if (index == 3) {
item.icon = require("./assets/images/anFang.png"); item.icon = require("./assets/images/anFang.png")
} else if (index == 4) { }else if (index == 4) {
item.icon = require("./assets/images/yunWei.png"); item.icon = require("./assets/images/yunWei.png")
} else if (index == 5) { }else if (index == 5) {
item.icon = require("./assets/images/gaoJing.png"); item.icon = require("./assets/images/gaoJing.png")
} }
}); });
if (index == 0) { if (index == 0) {
this.menuBtn[index].icon = require("./assets/images/shouYeAc.png"); this.menuBtn[index].icon = require("./assets/images/shouYeAc.png")
this.$router.push("/"); this.$router.push('/')
} else if (index == 1) { }else if (index == 1) {
this.menuBtn[index].icon = require("./assets/images/faTingAc.png"); this.menuBtn[index].icon = require("./assets/images/faTingAc.png")
this.$router.push("court"); this.$router.push('court')
} else if (index == 2) { }else if (index == 2) {
this.menuBtn[index].icon = require("./assets/images/jieNengAc.png"); this.menuBtn[index].icon = require("./assets/images/jieNengAc.png")
this.$router.push("energySaving"); this.$router.push('energySaving')
} else if (index == 3) { }else if (index == 3) {
this.menuBtn[index].icon = require("./assets/images/anFangAc.png"); this.menuBtn[index].icon = require("./assets/images/anFangAc.png")
this.$router.push("security"); this.$router.push('security')
} else if (index == 4) { }else if (index == 4) {
this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png"); this.menuBtn[index].icon = require("./assets/images/yunWeiAc.png")
this.$router.push("operationMaintenance"); this.$router.push('operationMaintenance')
} else if (index == 5) { }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.$router.push('alarm')
} }
}, },
goPage(name) { goPage(name){
console.log(name); console.log(name)
}, },
//选中楼层 //选中楼层
floorChange(index) { floorChange(index){
this.floorAct = index; this.floorAct = index
}, },
// 设置html标签的字体大小自适应 为了使得rem单位自适应 // 设置html标签的字体大小自适应 为了使得rem单位自适应
fun() { fun() {
const that = this; const that = this;
var htmlobj = document.getElementsByTagName("html")[0]; var htmlobj = document.getElementsByTagName("html")[0];
htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px"; htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px";
}
}, },
}, watch: {
watch: {
screenWidth(val) { screenWidth(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if (!this.timer) { if (!this.timer) {
@ -222,15 +200,16 @@ export default {
}, 400); }, 400);
} }
}, },
},
components: {
}, },
components: {}, }
};
</script> </script>
<style lang="less"> <style lang="less">
/*将大屏设置为1920*1080,设置缩放的方向*/ /*将大屏设置为1920*1080,设置缩放的方向*/
#app { #app {
font-family: "微软雅黑"; font-family:'微软雅黑' ;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
@ -238,6 +217,7 @@ export default {
height: 1080px; height: 1080px;
transition: all 0.2s linear; transition: all 0.2s linear;
transform-origin: left top; transform-origin: left top;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
@ -336,19 +316,19 @@ export default {
// width: 15%; // width: 15%;
// height: 100%; // height: 100%;
width: 15%; width: 15%;
height: 61%; height: 61%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
color: white; color: white;
} }
.menuAc { .menuAc{
color: rgb(0, 229, 189); color: rgb(0,229,189);
// width: 15%; // width: 15%;
// height: 100%; // height: 100%;
width: 15%; width: 15%;
height: 61%; height: 61%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

7
src/api/haikang.js
View File

@ -1,7 +0,0 @@
import axios from 'axios'
//根据等级获取报警数据
export const getHikvision = (data) => {
return axios.post('/video/cameras/hikvision/',
data
)
};

13
src/api/index.js
View File

@ -33,9 +33,9 @@ export const getBuildinginfos = (params) => {
}; };
// 获取分项用能信息接口 // 获取分项用能信息接口
export const getSubitemList = (data) => { export const getSubitemList = (data) => {
return axios.post('ecs-server/services/ecm/subitemList', return axios.post('ecs-server/services/ecm/subitemList', {
data data
) })
}; };
// 获取所有设备信息 // 获取所有设备信息
export const getAllDevices = (params) => { export const getAllDevices = (params) => {
@ -45,14 +45,13 @@ export const getAllDevices = (params) => {
}; };
// 获取设备实时数据信息 // 获取设备实时数据信息
export const getRealData = (data) => { export const getRealData = (data) => {
return axios.post('ecs-server/services/getRealData', return axios.post('ecs-server/services/getRealData', {
data data
) })
}; };
// 获取区域用能数据信息 // 获取区域用能数据信息
export const getAreaList = (data) => { export const getAreaList = (data) => {
return axios.post('ecs-server/services/ecm/areaList', return axios.post('ecs-server/services/ecm/areaList', {
data data
// headers:{'Content-Type':'application/json;charset=utf-8'} })
)
}; };

2
src/utils/mqttConfig.js
View File

@ -37,7 +37,7 @@ class mqttHandle {
const { host, port, endpoint, ...options } = this.connect; const { host, port, endpoint, ...options } = this.connect;
console.log("this.connect.host", this.connect.host) console.log("this.connect.host", this.connect.host)
// const connectUrl = 'ws://138.227.111.141:8083/mqtt'; // const connectUrl = 'ws://138.227.111.141:8083/mqtt';
const connectUrl = 'ws://138.227.208.100:1884/mqtt'; const connectUrl = 'ws://172.16.1.253:1884/mqtt';
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`; // const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
// if (!client.connected) { // if (!client.connected) {
// client.on('connect', function () { // client.on('connect', function () {

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

@ -1,101 +0,0 @@
<template>
<div class="Camera">
<video
:ref="'video' + videoId"
:id="'video' + videoId"
class="video-js vjs-default-skin"
width="100%"
height="100%"
object-fit:cover
preload="auto"
style="overflow: hidden;"
>
<source :src="videoUrlList" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
import "video.js/dist/video-js.min.css";
export default {
name:'camera',
props: {
videoUrl: {
type: String,
default: "",
},
id: {
type: Number,
default: 0,
},
},
data() {
return {
videoUrlList:'',
videoId : 0,
};
},
mounted(){
this.videoId = this.id
},
watch: {
videoUrl: {
deep: true,
handler(newVal) {
this.$nextTick(()=>{
this.clickSurveillance(newVal)
})
}
},
id: {
deep: true,
handler(newVal,oldVal) {
this.videoId = newVal
}
},
},
methods: {
// 点击摄像头
clickSurveillance(newVal) {
this.player = null
let that = this
// 注意这里需要加定时器或者在异步请求中才可以
setTimeout(() => {
this.player = videojs(
'video'+this.videoId,
{
bigPlayButton: false,
controlBar: false,
notSupportedMessage: "此视频暂无法播放，请稍后再试",
},
function () {
this.play();
}
);
// 当前要播放的视频地址
this.videoUrlList = newVal;
this.player.src(this.videoUrlList);
videojs('video' + this.videoId).ready(function () {
this.player = this;
this.player.play();
});
}, 500);
},
// 关闭摄像头
closeVideo() {
this.player.dispose();
},
},
};
</script>
<style lang="less" scoped>
.video-js{
width: 100%;
height: 100%;
}
</style>

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

@ -1,89 +0,0 @@
<template>
<div class="Camera">
<video
ref="video"
id="video"
class="video-js vjs-default-skin"
width="100%"
height="100%"
object-fit:cover
preload="auto"
style="overflow: hidden;"
>
<source :src="videoUrlList" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
import "video.js/dist/video-js.min.css";
export default {
name:'cameraBig',
props: {
cameraBig:{
type: String,
default: "",
},
},
data() {
return {
videoUrlList:'',
};
},
mounted(){
this.clickSurveillance(this.cameraBig)
},
watch: {
// cameraBig: {
// deep: true,
// handler(newVal) {
// console.log(newVal,'wwwwwwwwww');
// this.clickSurveillance(newVal)
// }
// },
},
methods: {
// 点击摄像头
clickSurveillance(newVal) {
let that = this
// 注意这里需要加定时器或者在异步请求中才可以
setTimeout(() => {
this.player = videojs(
'video',
{
bigPlayButton: false,
controlBar: false,
notSupportedMessage: "此视频暂无法播放，请稍后再试",
},
function () {
this.play();
}
);
// 当前要播放的视频地址
this.videoUrlList = newVal;
this.player.src(this.videoUrlList);
videojs('video').ready(function () {
this.player = this;
this.player.play();
});
}, 400);
},
// 关闭摄像头
closeVideo() {
console.log('关闭');
this.player.dispose();
},
},
};
</script>
<style lang="less" scoped>
.video-js{
width: 100%;
height: 100%;
}
</style>

458
src/views/energySaving.vue
View File

@ -1,5 +1,3 @@
const { color } = require("echarts")
<template> <template>
<div class="energy"> <div class="energy">
<div class="left"> <div class="left">
@ -37,7 +35,7 @@ const { color } = require("echarts")
> >
<div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild"> <div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
<div class="equipmentList"> <div class="equipmentList">
<span>{{ i.data }}</span> <span>{{ i.count }}</span>
<span style="color: rgb(225, 177, 25); font-size: 0.4rem" <span style="color: rgb(225, 177, 25); font-size: 0.4rem"
>KWH</span >KWH</span
> >
@ -352,19 +350,19 @@ export default {
{ {
name: "今日发电量", name: "今日发电量",
icon: require("../assets/images/jieNengImg/energy.png"), icon: require("../assets/images/jieNengImg/energy.png"),
count: "0", count: "",
unit: "kWh", unit: "kWh",
}, },
{ {
name: "总发电量", name: "总发电量",
icon: require("../assets/images/jieNengImg/energy.png"), icon: require("../assets/images/jieNengImg/energy.png"),
count: "0", count: "",
unit: "kWh", unit: "kWh",
}, },
{ {
name: "有功功率", name: "有功功率",
icon: require("../assets/images/jieNengImg/power.png"), icon: require("../assets/images/jieNengImg/power.png"),
count: "0", count: "",
unit: "kWh", unit: "kWh",
}, },
{ {
@ -376,7 +374,7 @@ export default {
{ {
name: "运行时间", name: "运行时间",
icon: require("../assets/images/jieNengImg/runTime.png"), icon: require("../assets/images/jieNengImg/runTime.png"),
count: "0", count: "",
unit: "h", unit: "h",
}, },
{ {
@ -391,28 +389,25 @@ export default {
alarmFirstLevel:[], alarmFirstLevel:[],
alarmSecondLevel:[], alarmSecondLevel:[],
alarmThirdLevel:[], alarmThirdLevel:[],
equipmentList2: [],
}; };
}, },
mounted() { mounted() {
this.getAllDevicesInfo();
window.setInterval(() => {
this.getAllDevicesInfo();
}, 10000);
this.getMqttData() this.getMqttData()
window.alarmSecondLevel= this.alarmSecondLevel window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel= this.alarmAllLevel window.alarmAllLevel= this.alarmAllLevel
this.changeWarn(0); this.changeWarn(0);
//轮播八个一页 //轮播八个一页
// for (let i = 0; i < this.equipmentList.length; i += 8) { for (let i = 0; i < this.equipmentList.length; i += 8) {
// this.equipmentList1.push(this.equipmentList.slice(i, i + 8)); this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
// } }
// this.calculateEcharts(); // this.calculateEcharts();
this.getQOQ() this.getQOQ()
this.getYOY() this.getYOY()
this.calculateEchartsTwo();
// window.createMqtt = this.createMqtt(); // window.createMqtt = this.createMqtt();
this.getAllDevicesInfo();
}, },
watch: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
@ -439,13 +434,62 @@ export default {
//获取能耗计量环比分析 //获取能耗计量环比分析
getQOQ() { getQOQ() {
let dataList = { let dataList = {
pbuildingId: "79", buildingId: "79",
customerId: "12345678", customerId: "12345678",
date: this.$moment().format("YYYYMM"), date: this.$moment().format("YYYYMM"),
dateType: "2", dateType: "2",
meterType: "1", meterType: "1",
// pbuildingId: "-1", pbuildingId: "-1",
}; };
//模拟数据
// let resData = {
// values: [
// {
// dateDetail: "13",
// val: 380.29,
// tqVal: 0,
// hqVal: 0,
// },
// {
// dateDetail: "14",
// val: 0.18,
// tqVal: 0,
// hqVal: 380.29,
// },
// {
// dateDetail: "26",
// val: 70.31,
// tqVal: 0,
// hqVal: 0.18,
// },
// {
// dateDetail: "27",
// val: 12.02,
// tqVal: 0,
// hqVal: 70.31,
// },
// {
// dateDetail: "28",
// val: 18.3,
// tqVal: 0,
// hqVal: 12.02,
// },
// {
// dateDetail: "29",
// val: 7.88,
// tqVal: 0,
// hqVal: 18.3,
// },
// ],
// child: [
// {
// val: 489.02,
// buildName: "江北新区法院",
// buildId: 79,
// },
// ],
// };
// this.calculateEcharts(resData.child)
getAreaList(dataList).then((res)=>{ getAreaList(dataList).then((res)=>{
this.calculateEcharts(res.data.data.child); this.calculateEcharts(res.data.data.child);
}) })
@ -460,9 +504,58 @@ export default {
meterType: "1", meterType: "1",
pbuildingId: "-1", pbuildingId: "-1",
}; };
//模拟数据
// let resData = {
// values: [
// {
// dateDetail: "13",
// val: 380.29,
// tqVal: 0,
// hqVal: 0,
// },
// {
// dateDetail: "14",
// val: 0.18,
// tqVal: 0,
// hqVal: 380.29,
// },
// {
// dateDetail: "26",
// val: 70.31,
// tqVal: 0,
// hqVal: 0.18,
// },
// {
// dateDetail: "27",
// val: 12.02,
// tqVal: 0,
// hqVal: 70.31,
// },
// {
// dateDetail: "28",
// val: 18.3,
// tqVal: 0,
// hqVal: 12.02,
// },
// {
// dateDetail: "29",
// val: 7.88,
// tqVal: 0,
// hqVal: 18.3,
// },
// ],
// child: [
// {
// val: 489.02,
// buildName: "江北新区法院",
// buildId: 79,
// },
// ],
// };
// this.calculateEchartsTwo(resData.values)
//接口调用 //接口调用
getAreaList(dataList).then((res)=>{ getAreaList(dataList).then((res)=>{
this.calculateEchartsTwo(res.data.data.values); this.calculateEcharts(res.data.data.values);
}) })
}, },
// //mqtt订阅数据 // //mqtt订阅数据
@ -522,24 +615,33 @@ export default {
}, },
// mqtt订阅（独立） // mqtt订阅（独立）
getDataByMqtt(url, topic) { getDataByMqtt(url, topic) {
const clientId = Number(new Date()).toString(); // 用户名 const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const options = { const options = {
endpoint: "/mqtt", // 配置
clean: true, // 保留会话 // 测试：订阅本机IP
cleanSession: true, // host: host,
connectTimeout: 7000, // 超时时间 // port: port,
reconnectPeriod: 7000, // 重连时间间隔
host: '138.227.111.141', keepalive: 60, // 心跳时间，默认60s，设置为0禁用
port: '8083', username: 'test', // 用户名（可选）
// 认证信息 password: 1234, // 密码（可选）
clientId: Number(new Date()).toString(), clientId: clientId, // 客户端ID，默认随机生成
// clientId: 'JBFY', protocolId: "MQTT",
username: "admin", protocolVersion: 4,
password: "123456", clean: true, // false在离线时接收QoS1和2的消息
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
will: {
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
topic: topic, // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志
},
}; };
if (this.mqttClient == undefined) { if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(url, options); // 连接 this.mqttClient = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host, options); // 连接 // const client = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host) // 连接 // const client = mqtt.connect(host) // 连接
// 错误回调 // 错误回调
@ -553,9 +655,15 @@ export default {
}); });
// 连接回调 // 连接回调
this.mqttClient.on("connect", () => { this.mqttClient.on("connect", () => {
// console.log(
// "[MQTT-TEST] 已连接的客户端ID: " + this.models[cIdNum].cName
// );
}); });
// 接收回调 // 接收回调
this.mqttClient.on("message", (topic, message, packet) => { this.mqttClient.on("message", (topic, message, packet) => {
console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date());
// 解析后端数据 // 解析后端数据
let that = this; let that = this;
if (topic.indexOf("device/publish/FB80") != -1) { if (topic.indexOf("device/publish/FB80") != -1) {
@ -586,6 +694,207 @@ export default {
}, },
//获取所有设备信息 //获取所有设备信息
getAllDevicesInfo() { getAllDevicesInfo() {
//模拟数据测试
// let allDevicesInfo = [
// {
// gatwayId: "1",
// metername: "A-VZCP2-2",
// meteraddress: "7",
// installtime: 1681363621,
// metercode: "320100A208001002",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP2-3",
// meteraddress: "8",
// installtime: 1681363633,
// metercode: "320100A208001003",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP2-4",
// meteraddress: "9",
// installtime: 1681363646,
// metercode: "320100A208001004",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP2-5",
// meteraddress: "10",
// installtime: 1681363658,
// metercode: "320100A208001005",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP1-1",
// meteraddress: "1",
// installtime: 1681363536,
// metercode: "320100A208001101",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP1-2",
// meteraddress: "2",
// installtime: 1681363554,
// metercode: "320100A208001102",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP1-3",
// meteraddress: "3",
// installtime: 1681363569,
// metercode: "320100A208001103",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP1-4",
// meteraddress: "4",
// installtime: 1681363584,
// metercode: "320100A208001104",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-FACP1-5",
// meteraddress: "5",
// installtime: 1681363597,
// metercode: "320100A208001105",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-FACP2-6",
// meteraddress: "11",
// installtime: 1681363670,
// metercode: "320100A208001006",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "C1-04ACP1-1",
// meteraddress: "1",
// installtime: 1681363682,
// metercode: "320100A208003001",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "C1-04ACP1-2",
// meteraddress: "1",
// installtime: 1681363692,
// metercode: "320100A208003002",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "C1-04ACP1-3",
// meteraddress: "1",
// installtime: 1681363704,
// metercode: "320100A208003003",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "C1-04ACP1-4",
// meteraddress: "1",
// installtime: 1681363714,
// metercode: "320100A208003004",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "C1-04ACP1-5",
// meteraddress: "1",
// installtime: 1681363725,
// metercode: "320100A208003005",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "1",
// metername: "A-VZCP2-1",
// meteraddress: "6",
// installtime: 1681363608,
// metercode: "320100A208001001",
// meterstatus: "1",
// metermodel: "MODBUS_ZFY",
// },
// {
// gatwayId: "2",
// metername: "辅楼一层水表1",
// meteraddress: "1",
// installtime: 1681279847,
// metercode: "320100A208003006",
// meterstatus: "1",
// metermodel: "188_ZFY",
// },
// {
// gatwayId: "2",
// metername: "辅楼一层水表2",
// meteraddress: "1",
// installtime: 1681279855,
// metercode: "320100A208003007",
// meterstatus: "1",
// metermodel: "188_ZFY",
// },
// ];
// this.equipmentList = Object.keys(allDevicesInfo).map((item, index) => {
// return {
// name: allDevicesInfo[index].metername,
// code: allDevicesInfo[index].metercode,
// };
// });
// let realInfo = [
// {
// collectType: "1",
// idata: "1579.53",
// id: "320100A208001002",
// },
// {
// collectType: "1",
// idata: "669.48",
// id: "320100A208001003",
// },
// {
// collectType: "1",
// idata: "341.37",
// id: "320100A208001004",
// },
// ];
// let realData = [];
// for (let i = 0; i < this.equipmentList.length; i++) {
// realInfo.forEach((item, index) => {
// if (this.equipmentList[i].code == item.id) {
// realData.push({
// data: item.idata,
// name: this.equipmentList[i].name,
// value: "",
// });
// }
// });
// }
// console.log(this.equipmentList, "=================", realData);
//调用接口数据 //调用接口数据
let allDevicesCode = []; let allDevicesCode = [];
getAllDevices().then((res) => { getAllDevices().then((res) => {
@ -599,32 +908,28 @@ export default {
); );
res.data.dataResults.forEach((item, index) => { res.data.dataResults.forEach((item, index) => {
allDevicesCode.push(item.metercode); allDevicesCode.push(item.metercode);
getRealData({
metercodes: allDevicesCode,
}).then((response) => {
console.log(response, "实时设备数据");
for (let i = 0; i < this.equipmentList.length; i++) {
response.data.dataResults.forEach((is, k) => {
if (this.equipmentList[i].code == is.id) {
this.equipmentList.push({
data: item.idata,
name: this.equipmentList[i].name,
value: "",
});
}
});
}
});
}); });
getRealData({ console.log(this.equipmentList, "设备用能统计");
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) { for (let i = 0; i < this.equipmentList.length; i += 8) {
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8)); this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
} }
});
}); });
}, },
//预警点击 //预警点击
@ -725,12 +1030,22 @@ export default {
}); });
}, },
calculateEcharts(val) { calculateEcharts(val) {
// console.log(val,'=================s');
let imgSrc = "/img/car.png"; let imgSrc = "/img/car.png";
let chartData = []; let chartData = [
{
value: 42,
name: "主楼",
},
{
value: 24,
name: "辅楼",
},
];
chartData = Object.keys(val).map((item,index)=>{ chartData = Object.keys(val).map((item,index)=>{
return {value:val[item].val,name:val[item].buildName} return {value:val[item].val,name:val[item].buildName}
}) })
let colorList = ["red", "rgb(255,122,0)","rgb(3, 255, 150)","rgb(0,215,245)"]; let colorList = ["red", "rgb(255,122,0)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0); let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100; let gap = (1 * sum) / 100;
let pieData1 = []; let pieData1 = [];
@ -751,6 +1066,7 @@ export default {
}, },
}); });
pieData1.push(gapData); pieData1.push(gapData);
// 第二圈数据 // 第二圈数据
pieData2.push({ pieData2.push({
...chartData[i], ...chartData[i],
@ -927,8 +1243,8 @@ export default {
val.forEach((item,index) => { val.forEach((item,index) => {
dataX.push(item.dateDetail) dataX.push(item.dateDetail)
tqData.push(item.tqVal) tqData.push(item.tqVal)
bqData.push(item.hqVal) bqData.push(item.val)
tbData.push(item.val) tbData.push(item.tqVal)
}); });
var myChart = this.$echarts.init( var myChart = this.$echarts.init(
document.getElementById("calculateEchartsTwo") document.getElementById("calculateEchartsTwo")
@ -939,9 +1255,8 @@ export default {
grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 }, grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 },
legend: { legend: {
show: true, show: true,
// data: ["同期", "本期", "同比"], data: ["同期", "本期", "同比"],
data: ["同期", "环期", "用量数值"], textStyle: { fontSize: "0.9rem", color: "#ffffff" },
textStyle: { fontSize: "0.7rem", color: "#ffffff" },
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -958,7 +1273,7 @@ export default {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
show: true, show: true,
fontSize: "0.9rem", fontSize: "0.9rem",
color: "#ffffff", color: "#ffffff",
@ -967,7 +1282,6 @@ export default {
}, },
yAxis: [ yAxis: [
{ {
name:'单位kWh',
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
@ -975,15 +1289,11 @@ export default {
fontSize: "0.9rem", fontSize: "0.9rem",
color: "#ffffff", color: "#ffffff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN", fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value}", formatter: "{value}%",
}, },
splitLine: { show: false }, splitLine: { show: false },
}, },
{ {
name:'比率',
textStyle:{
color:'#fff'
},
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
@ -991,7 +1301,7 @@ export default {
fontSize: "0.9rem", fontSize: "0.9rem",
color: "#ffffff", color: "#ffffff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN", fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value}", formatter: "{value} %",
}, },
splitLine: { show: false }, splitLine: { show: false },
}, },
@ -1016,7 +1326,7 @@ export default {
data: tqData, data: tqData,
}, },
{ {
name: "环期", name: "本期",
type: "bar", type: "bar",
barWidth: "25%", barWidth: "25%",
showBackground: true, showBackground: true,
@ -1040,7 +1350,7 @@ export default {
data: bqData, data: bqData,
}, },
{ {
name: "用量数值", name: "同比",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
@ -1366,7 +1676,7 @@ export default {
background: url("../assets/images/jieNengImg/energyBack.png") no-repeat; background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
font-size: 1rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

460
src/views/index.vue
View File

@ -30,7 +30,7 @@
v-for="(item, index) in wisdomMonArr" v-for="(item, index) in wisdomMonArr"
:key="index" :key="index"
> >
<div style="width: 100%; font-size: 0.6rem"> <div style="width: 100%;font-size: 0.6rem;">
<span>{{ item.name }}:</span> <span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{ <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
item.count item.count
@ -79,7 +79,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-left: 3%; margin-left: 3%;
width: 100%; width:100%
" "
> >
<span>报警时间:{{ item.time }}</span> <span>报警时间:{{ item.time }}</span>
@ -88,11 +88,12 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 2%; margin-top: 2%;
width: 100%; width:100%
" "
> >
<span style="text-align: left">报警原因:{{ item.cause }}</span> <span>报警原因:{{ item.cause }}</span>
<span style="margin-right: 5%">风险等级:{{ item.risk }}</span> <span style="margin-right:5%">风险等级:{{ item.risk }}</span
>
</div> </div>
</div> </div>
</div> </div>
@ -210,59 +211,35 @@
@click="changeCamera(item.video)" @click="changeCamera(item.video)"
> >
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> --> <!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
<!-- <iframe <iframe
:src="item.video" :src="item.video+'video.mp4'"
ref="iframeRef" ref="iframeRef"
frameborder="0" frameborder="0"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
></iframe> --> ></iframe>
<camera
style="width: 100%; height: 100%"
:videoUrl="item.video"
:id="index"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="camersBig" v-if="cameraBigShow"> <div class="camersBig" v-show="cameraBigShow">
<!-- <img :src="cameraBig" style="width:100%;height:100%"/> --> <!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
<!-- <iframe <iframe
:src="cameraBig" :src="cameraBig"
ref="iframeRef" ref="iframeRef"
frameborder="0" frameborder="0"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
></iframe> --> ></iframe>
<cameraBig
style="width: 100%; height: 100%"
:cameraBig="cameraBigUrl"
ref="camersBig"
/>
<div class="close" @click="closeCamer"></div> <div class="close" @click="closeCamer"></div>
<div class="remoteControl"> <div class="remoteControl">
<img <img src="../assets/images/add.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
src="../assets/images/add.png" <img src="../assets/images/reduce.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
@click="addZoom"
/>
<img
src="../assets/images/reduce.png"
style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
@click="reduceZoom"
/>
</div> </div>
<div class="remoteControl1"> <div class="remoteControl1">
<img <img src="../assets/images/leftBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
src="../assets/images/leftBtn.png" <img src="../assets/images/rightBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
style="width: 20%; height: 24%; cursor: pointer" </div>
/>
<img
src="../assets/images/rightBtn.png"
style="width: 20%; height: 24%; cursor: pointer"
/>
</div> </div>
</div> </div>
</div>
<!-- </div> --> <!-- </div> -->
</template> </template>
@ -273,9 +250,6 @@ import {
getBuildinginfos, getBuildinginfos,
getAreaList, getAreaList,
} from "../api/index"; } from "../api/index";
import { getHikvision } from "../api/haikang";
import camera from "./camera/camera.vue";
import cameraBig from "./camera/cameraBig.vue";
export default { export default {
data() { data() {
return { return {
@ -374,39 +348,22 @@ export default {
value: "1", value: "1",
}, },
], ],
cameraList: [ cameraList: [], //摄像
{ cameraBig: "",
video: "",
},
{
video: "",
},
{
video: "",
},
{
video: "",
},
], //摄像
cameraBigUrl: "",
cameraBigShow: false, cameraBigShow: false,
buildingList: [], buildingList: [],
alarmAllLevel: [], alarmAllLevel:[],
alarmFirstLevel: [], alarmFirstLevel:[],
alarmSecondLevel: [], alarmSecondLevel:[],
alarmThirdLevel: [], alarmThirdLevel:[],
camersCode: "",
}; };
}, },
mounted() { mounted() {
this.getCamera();
//获取建筑id
this.getBuildingData();
let that = this; let that = this;
window.alarmFirstLevel = this.alarmFirstLevel; window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel = this.alarmSecondLevel; window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel = this.alarmThirdLevel; window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel = this.alarmAllLevel; window.alarmAllLevel= this.alarmAllLevel
this.warningOne(); this.warningOne();
this.warningTwo(); this.warningTwo();
this.maintenanceLeft(); this.maintenanceLeft();
@ -414,60 +371,36 @@ export default {
// this.energyEcharts(); // this.energyEcharts();
this.selectDataList(this.selectDate); this.selectDataList(this.selectDate);
// window.createMqtt = this.createMqtt(); // window.createMqtt = this.createMqtt();
// window.addEventListener("message", function (e) { window.addEventListener("message", function (e) {
// let val = e.data.val; let val = e.data.val;
// if (val != null) { if (val != null) {
// that.changeCamera("video/video.html?src=" + e.data.val); that.changeCamera("video/video.html?src=" + e.data.val);
// that.camersCode = e.data.code
// }
// });
// let camera = [
// {
// icon: require("../assets/images/camera.png"),
// video: "video/video.html?src=",
// },
// {
// icon: require("../assets/images/camera.png"),
// video: "video/video.html?src=",
// },
// {
// icon: require("../assets/images/camera.png"),
// video: "video/video.html?src=",
// },
// {
// icon: require("../assets/images/camera.png"),
// video: "video/video.html?src=",
// },
// ];
// setTimeout(() => {
// this.cameraList = camera;
// }, 1000);
this.warnSelect(0);
},
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) { let camera = [
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 {
console.log("alarmSecondLevel", val); icon: require("../assets/images/camera.png"),
this.upmqttData(val); video: "video/video.html?src=",
}, },
alarmThirdLevel(val) { {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器 icon: require("../assets/images/camera.png"),
console.log("alarmThirdLevel", val); video: "video/video.html?src=",
this.upmqttData(val); },
}, {
icon: require("../assets/images/camera.png"),
video: "video/video.html?src=",
},
{
icon: require("../assets/images/camera.png"),
video: "video/video.html?src=",
},
];
setTimeout(() => {
this.cameraList = camera;
}, 1000);
this.warnSelect(0);
//获取建筑id
this.getBuildingData();
}, },
watch: { watch: {
alarmAllLevel(val) { alarmAllLevel(val) {
@ -497,131 +430,126 @@ export default {
}, },
}, },
methods: { methods: {
//放大变焦
addZoom() {
console.log(this.camersCode, "sssssssssssss");
let dataList = {
path: "/artemis/api/video/v1/ptzs/controlling",
data: {
cameraIndexCode: this.camersCode,
action: "0",
command: "ZOOM_IN",
speed: "50",
},
};
getHikvision(dataList).then((res) => {
console.log(res, "=============");
});
},
//缩小变焦
reduceZoom() {
console.log(this.camersCode, "sssssssssssss");
let dataList = {
path: "/artemis/api/video/v1/ptzs/controlling",
data: {
cameraIndexCode: this.camersCode,
action: "0",
command: "ZOOM_OUT",
speed: "50",
},
};
getHikvision(dataList).then((res) => {
console.log(res, "=============");
});
},
//获取视频流
getCamera() {
this.cameraList[0].video =
"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
this.cameraList[1].video =
"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
this.cameraList[2].video =
"http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
this.cameraList[3].video =
"http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
let pathUrl = "/artemis/api/video/v2/cameras/previewURLs";
let dataList = {
path: pathUrl,
data: {
protocol: "hls",
cameraIndexCode: "620804559ecf4ade8f13b17337ea8bfa",
},
};
getHikvision(dataList).then((res) => {
this.cameraList[0].video =
"video/video.html?src=" +
res.data.result.data.url +
"&code=" +
dataList.data.cameraIndexCode;
});
let dataList1 = {
path: pathUrl,
data: {
protocol: "hls",
cameraIndexCode: "3efe8f887f164548a5db4266590a05ca",
},
};
getHikvision(dataList1).then((res) => {
this.cameraList[1].video =
"video/video.html?src=" +
res.data.result.data.url +
"&code=" +
dataList1.data.cameraIndexCode;
});
let dataList2 = {
path: pathUrl,
data: {
protocol: "hls",
cameraIndexCode: "f103ede0eb2b470f84e26ceec42486bc",
},
};
getHikvision(dataList2).then((res) => {
this.cameraList[2].video =
"video/video.html?src=" +
res.data.result.data.url +
"&code=" +
dataList2.data.cameraIndexCode;
});
let dataList3 = {
path: pathUrl,
data: {
protocol: "hls",
cameraIndexCode: "bf16be84f6f8410c8dca2dfc5369a532",
},
};
getHikvision(dataList3).then((res) => {
this.cameraList[3].video =
"video/video.html?src=" +
res.data.result.data.url +
"&code=" +
dataList3.data.cameraIndexCode;
});
},
//获取建筑Id //获取建筑Id
getBuildingData() { getBuildingData() {
getBuildinginfos().then((res) => { // getBuildinginfos().then((res) => {
// 接口取值 //接口取值
this.buildingList = res.data.dataResults; // this.buildingList = res.data.dataResults
let buildArr = []; this.buildingList = [
// this.options = {
Object.keys(this.buildingList).map((item, index) => { name: "江北新区法院",
if (this.buildingList[index].name.indexOf("水") == -1) { id: "79",
buildArr[buildArr.length] = this.buildingList[index]; parentId: "-1",
} },
// return { {
// label: buildNameList, name: "辅楼一层水表1",
// value: this.buildingList[index].id, id: "104",
// parentId: this.buildingList[index].parentId, parentId: "79",
// }; },
}); {
this.options = Object.keys(buildArr).map((item, index) => { name: "辅楼一层水表2",
return { id: "105",
label: buildArr[index].name, parentId: "79",
value: this.buildingList[index].id, },
parentId: this.buildingList[index].parentId, {
}; name: "主楼用电",
}); id: "106",
parentId: "79",
},
{
name: "辅楼用电",
id: "107",
parentId: "79",
},
{
name: "A-FACP1-1",
id: "108",
parentId: "106",
},
{
name: "A-FACP1-2",
id: "109",
parentId: "106",
},
{
name: "A-FACP1-3",
id: "110",
parentId: "106",
},
{
name: "A-FACP1-4",
id: "111",
parentId: "106",
},
{
name: "A-FACP1-5",
id: "112",
parentId: "106",
},
{
name: "A-FACP2-1",
id: "113",
parentId: "106",
},
{
name: "A-FACP2-2",
id: "114",
parentId: "106",
},
{
name: "A-FACP2-3",
id: "116",
parentId: "106",
},
{
name: "A-FACP2-4",
id: "117",
parentId: "106",
},
{
name: "A-FACP2-5",
id: "118",
parentId: "106",
},
{
name: "A-FACP2-6",
id: "119",
parentId: "106",
},
{
name: "C1-04ACP1-1",
id: "120",
parentId: "107",
},
{
name: "C1-04ACP1-2",
id: "121",
parentId: "107",
},
{
name: "C1-04ACP1-3",
id: "122",
parentId: "107",
},
{
name: "C1-04ACP1-4",
id: "123",
parentId: "107",
},
{
name: "C1-04ACP1-5",
id: "124",
parentId: "107",
},
];
this.options = Object.keys(this.buildingList).map((item, index) => {
return {
label: this.buildingList[index].name,
value: this.buildingList[index].id,
parentId: this.buildingList[index].parentId,
};
}); });
// });
}, },
//智慧节能选择时间 //智慧节能选择时间
selectDataList(val) { selectDataList(val) {
@ -666,18 +594,16 @@ export default {
}; };
//接口获取区域 //接口获取区域
getAreaList(data).then((res) => { getAreaList(data).then((res) => {
console.log(res.data.data, "sssssssssssssss");
this.energyEcharts(res.data.data); this.energyEcharts(res.data.data);
}); });
}, },
//选中图片 //选中图片
changeCamera(path) { changeCamera(path) {
this.cameraBigUrl = path; this.cameraBig = path;
this.cameraBigShow = true; this.cameraBigShow = true;
}, },
closeCamer() { closeCamer() {
this.cameraBigShow = false; this.cameraBigShow = false;
this.$refs.camersBig.closeVideo();
}, },
//报警选中 //报警选中
warnSelect(index) { warnSelect(index) {
@ -729,15 +655,15 @@ export default {
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
), ),
cause: val[index].AlarmName, cause: val[index].AlarmName,
DeviceType: val[index].DeviceType, DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel, risk: val[index].AlarmLevel,
}; };
}); });
}, },
//获取mqtt数据 //获取mqtt数据
upmqttData(val) { upmqttData(val) {
let icon = null; let icon = null;
var warnListMqtt = []; var warnListMqtt = []
warnListMqtt = Object.keys(val).map((item, index) => { warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) { if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级"; val[index].AlarmLevel = "一级";
@ -760,10 +686,10 @@ export default {
risk: val[index].AlarmLevel, risk: val[index].AlarmLevel,
}; };
}); });
console.log("warnListMqtt", warnListMqtt); console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) { for (let i = 0; i < warnListMqtt.length; i++) {
this.warnList.splice(0, 0, warnListMqtt[i]); this.warnList.splice(0,0,warnListMqtt[i]);
} }
}, },
//设备左 //设备左
warningOne() { warningOne() {
@ -1448,10 +1374,7 @@ export default {
} }
}, },
}, },
components: { components: {},
camera,
cameraBig,
},
}; };
</script> </script>
@ -1589,10 +1512,10 @@ export default {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
.btnList { .btnList {
// width: 13%; // width: 13%;
// height: 38%; // height: 38%;
width: 17%; width: 17%;
height: 41%; height: 41%;
background: url(../assets/images/warnBtn.png) no-repeat; background: url(../assets/images/warnBtn.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
@ -1603,10 +1526,10 @@ export default {
font-size: 0.7rem; font-size: 0.7rem;
} }
.btnListAc { .btnListAc {
// width: 13%; // width: 13%;
// height: 38%; // height: 38%;
width: 17%; width: 17%;
height: 41%; height: 41%;
background: url(../assets/images/warnBtnAc.png) no-repeat; background: url(../assets/images/warnBtnAc.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
@ -1623,8 +1546,9 @@ export default {
background: url(../assets/images/warnDottedLine.png) no-repeat; background: url(../assets/images/warnDottedLine.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: auto; overflow: auto;
.warnListContent { .warnListContent {
height: 27%; height: 25%;
width: 100%; width: 100%;
border: 1px dashed #fff; border: 1px dashed #fff;
color: #fff; color: #fff;
@ -1634,7 +1558,7 @@ export default {
align-items: center; align-items: center;
padding-left: 3%; padding-left: 3%;
box-sizing: border-box; box-sizing: border-box;
font-size: 0.7rem; font-size: 0.7rem;
.warnArray { .warnArray {
width: 100%; width: 100%;
display: flex; display: flex;

388
src/views/security.vue
View File

@ -4,7 +4,7 @@
<div class="leftOne"> <div class="leftOne">
<div class="title">安防统计数据</div> <div class="title">安防统计数据</div>
<!-- <div class="security"> --> <!-- <div class="security"> -->
<!-- <img src="../assets/images/anFangAc.png" class="securityImg"/> <!-- <img src="../assets/images/anFangAc.png" class="securityImg"/>
<div class="securitySupervision">安防监管</div> <div class="securitySupervision">安防监管</div>
<div class="securityCount"> <div class="securityCount">
<div <div
@ -29,7 +29,7 @@
<span>{{ item.count }}</span> <span>{{ item.count }}</span>
</div> </div>
</div> --> </div> -->
<el-carousel <el-carousel
class="security" class="security"
:autoplay="true" :autoplay="true"
trigger="click" trigger="click"
@ -40,22 +40,23 @@
:key="index" :key="index"
class="equipmentEnergy" class="equipmentEnergy"
> >
<img src="../assets/images/anFangAc.png" class="securityImg" /> <img src="../assets/images/anFangAc.png" class="securityImg"/>
<!-- <div class="securitySupervision">安防监管</div> --> <!-- <div class="securitySupervision">安防监管</div> -->
<div class="securitySupervision">{{ item.tit }}</div> <div class="securitySupervision">{{item.tit}}</div>
<div class="securityCount"> <div class="securityCount">
<div <div
class="securityList" class="securityList"
v-for="(i, k) in item.security" v-for="(i, k) in item.security"
:key="k" :key="k"
> >
<span>{{ i.name }}</span> <span>{{ i.name }}</span>
<span>{{ i.count }}</span> <span>{{ i.count }}</span>
</div>
</div> </div>
</div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<!-- </div> --> <!-- </div> -->
</div> </div>
<div class="leftTwo"> <div class="leftTwo">
<div class="title" style="height: 8%">预警视频监控联动</div> <div class="title" style="height: 8%">预警视频监控联动</div>
@ -159,15 +160,8 @@
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
" "
><span style="white-space: nowrap">设备内容:</span >设备内容:<span
><span style="color: rgb(0, 255, 255); margin-left: 5%"
style="
color: rgb(0, 255, 255);
margin-left: 5%;
display: flex;
justify-content: flex-end;
text-align: left;
"
>{{ item.position }}</span >{{ item.position }}</span
></span ></span
> >
@ -192,72 +186,68 @@
</template> </template>
<script> <script>
import { GetLevelAlarm, getSecurityAlarmCount } from "../api/index"; import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
import { getHikvision } from "../api/haikang";
export default { export default {
name: "security", name: "security",
data() { data() {
return { return {
securityList: [ securityList: [
{ {
tit: "摄像头监管", tit:'摄像头监管',
security: [ security:[{
{ name: "",
name: "", count: "",
count: "",
},
{
name: "摄像头总数",
count: "609",
},
{
name: "摄像头在线数量",
count: "602",
},
{
name: "摄像头离线数量",
count: "7",
},
{
name: "摄像头报警数",
count: "0",
},
{
name: "摄像头昨日报警数",
count: "0",
},
],
}, },
{ {
tit: "门禁监管", name: "摄像头总数",
security: [ count: "609",
{
name: "",
count: "",
},
{
name: "门禁总数",
count: "609",
},
{
name: "门禁在线数量",
count: "602",
},
{
name: "门禁离线数量",
count: "7",
},
{
name: "门禁今日报警数",
count: "0",
},
{
name: "门禁昨日报警数",
count: "0",
},
],
}, },
{
name: "摄像头在线数量",
count: "602",
},
{
name: "摄像头离线数量",
count: "7",
},
{
name: "摄像头报警数",
count: "0",
},
{
name: "摄像头昨日报警数",
count: "0",
},
]
},
{
tit:'门禁监管',
security:[{
name: "",
count: "",
},
{
name: "门禁总数",
count: "609",
},
{
name: "门禁在线数量",
count: "602",
},
{
name: "门禁离线数量",
count: "7",
},
{
name: "门禁今日报警数",
count: "0",
},
{
name: "门禁昨日报警数",
count: "0",
},
]
}
], ],
warnCameraList: [ warnCameraList: [
@ -336,43 +326,21 @@ export default {
status: "已解除", status: "已解除",
}, },
], ],
alarmFirstLevel: [], alarmFirstLevel:[],
alarmSecondLevel: [], alarmSecondLevel:[],
alarmThirdLevel: [], alarmThirdLevel:[],
}; };
}, },
mounted() { mounted() {
this.getAnfang();
//获取消防告警 //获取消防告警
this.getPoliceList(); this.getFireWarnList()
this.getFireWarnList();
// 获取安防告警 // 获取安防告警
this.getPoliceList()
//获取安防统计今天昨天报警数量 //获取安防统计今天昨天报警数量
this.getAlarmCount(); this.getAlarmCount()
window.alarmFirstLevel = this.alarmFirstLevel; window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel = this.alarmSecondLevel; window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel = this.alarmThirdLevel; window.alarmThirdLevel= this.alarmThirdLevel
},
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: { watch: {
alarmFirstLevel(val) { alarmFirstLevel(val) {
@ -397,92 +365,11 @@ export default {
}, },
methods: { methods: {
//获取昨天今天的报警数量 //获取昨天今天的报警数量
getAlarmCount() { getAlarmCount(){
getSecurityAlarmCount().then((res) => { getSecurityAlarmCount().then((res)=>{
this.securityList[0].security[4].count = res.data.data.VideoTodayCount; this.securityList[0].security[4].count = res.data.data.TodayCount
this.securityList[0].security[5].count = this.securityList[0].security[5].count = res.data.data.YesterdayCount
res.data.data.VideoYesterdayCount; })
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
this.securityList[1].security[5].count =
res.data.data.DoorYesterdayCount;
});
},
//获取设备离线在线数据
getAnfang() {
var indexcode = [
"13222435-8646-4006-982a-76febb4dd8a2",
"fd91efcf-9d11-4b3e-ad69-6e6c1069f4ec",
"e3043e94-c8d9-49b2-9627-7a10f15cf079",
"f5790df0-60e9-4a1f-be2f-e75d6331467d",
"05859fa6-6440-401e-950f-37ba61094c4d",
"21ff542a-ca97-4974-88e7-d52408b8a412",
"608d4d1d-a69a-4d07-82da-553914616b1d",
"5b5b43cd-a722-4eb4-b3f2-3b60fd1357ad",
"f524c8df-42f9-4f89-8594-cad8e3cdb37f",
"71ced52a-f04e-4d74-834c-8e329485106b",
"8763ebb7-4bc6-4022-80df-a38804f58d39",
"f349ab39-aa64-4e4f-ae85-585f30321325",
"8ca45d1f-5919-47df-be93-8c6c4efb81a4",
"1223f3b3-3fa3-4df2-b03a-058fcb62b4c9",
"1fc85a1e-1084-4cc2-91a4-ec2b5e74c5a2",
"b7bb3c6c-ceeb-4fc9-a37e-c7d075fd4ede",
"beac672d-7555-49fc-bc97-d873fcc8eb48",
"5a9e819d-af8d-45ea-9a77-bd36a2168e20",
"17e8a2a0-079b-4e70-bde6-24911980e1b2",
"d16fe1ce-4251-4cfb-8316-9380196942e1",
"266a956e-cb4f-47f4-8ab8-ecbbb6f4a3f7",
"a2038008-e1db-4666-8902-c69af1d7cc50",
"9273528b-9fa9-4877-8eb0-1595e3accf83",
"be26abf3-c2dd-41d3-ace1-b8a2006d663c",
"46ba67a9-e4d0-48ab-b837-255bb963860a",
"fe6e6dab-4ec7-47c1-a286-8ff661f8b8f6",
];
let dataList = {
path: "/artemis/api/resource/v2/door/search",
data: {
regionIndexCodes: indexcode,
pageNo: 1,
pageSize: 1000,
},
};
let indexCodeList = [];
getHikvision(dataList).then((res) => {
console.log("getHikvision", res.data.result.data.list);
res.data.result.data.list.forEach((item, index) => {
indexCodeList.push(item.indexCode);
});
let doorStatusList = {
path: "/artemis/api/acs/v1/door/states",
data: {
doorIndexCodes: indexCodeList,
},
};
let doorTotal = 0;
let doorOnLine = 0;
let offLine = 0;
let doorTotalList = [];
let doorOnLineList = [];
let offLineList = [];
getHikvision(doorStatusList).then((res) => {
console.log(res.data.authDoorList, "门禁状态数量");
for (let i = 0; i < res.data.authDoorList.length; i++) {
//获取总数的数组
doorTotalList.push(res.data.authDoorList);
if (res.data.authDoorList[i].doorState == 3) {
//获取离线的数组
offLineList.push(res.data.authDoorList[i].doorState);
}
}
//门禁总数数量
doorTotal = doorTotalList.length;
//门禁离线数数量
offLine = offLineList.length;
//门禁在线数数量
doorOnLine = doorTotal - offLine;
console.log(doorTotal, offLine, doorOnLine, "门禁数量==========");
});
});
}, },
videoChange(index) { videoChange(index) {
this.warnCameraList.forEach((item, i) => { this.warnCameraList.forEach((item, i) => {
@ -492,80 +379,73 @@ export default {
index index
].icon = require("../assets/images/anFang/videoAc.png"); ].icon = require("../assets/images/anFang/videoAc.png");
}, },
//获取火灾报警、 //获取火灾报警、
getFireWarnList() { getFireWarnList(){
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "消防", DeviceTypes:'消防'
}; }
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params).then((res) => {
let icon = null; let icon = null
this.fireWarnList = Object.keys(res.data.data).map((item, index) => { this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) { if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理"; res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png"); icon = require("../assets/images/jieNengImg/warnWhite.png")
} else { }else{
res.data.data[index].Status = "已处理"; res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png"); icon = require("../assets/images/jieNengImg/warnBlue.png")
} }
return { return {
icon: icon, icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format( time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
"YYYY-MM-DD HH:mm:ss"
),
DeviceType: res.data.data[index].DeviceType, DeviceType: res.data.data[index].DeviceType,
// position: res.data.data[index].DeviceType, // position: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName, position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel, // status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status, status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
}; };
}); });
}); });
}, },
//获取安防报警、 //获取安防报警、
getPoliceList() { getPoliceList(){
let params = { let params = {
AlarmLevel: "", AlarmLevel: "",
DeviceTypes: "门禁,视频监控", DeviceTypes:'门禁,视频监控'
}; }
GetLevelAlarm(params).then((res) => { GetLevelAlarm(params).then((res) => {
let icon = null; let icon = null
this.policeList = Object.keys(res.data.data).map((item, index) => { this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) { if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理"; res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png"); icon = require("../assets/images/jieNengImg/warnWhite.png")
} else { }else{
res.data.data[index].Status = "已处理"; res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png"); icon = require("../assets/images/jieNengImg/warnBlue.png")
} }
return { return {
icon: icon, icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format( time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
"YYYY-MM-DD HH:mm:ss"
),
DeviceType: res.data.data[index].DeviceType, DeviceType: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName, position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel, // status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status, status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
}; };
}); });
}); });
}, },
//获取mqtt数据 //获取mqtt数据
upmqttData(val) { upmqttData(val) {
let icon = null; let icon = null
var warnListMqtt = []; var warnListMqtt = []
warnListMqtt = Object.keys(val).map((item, index) => { warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].Status == 0) { if (val[index].Status == 0) {
val[index].Status = "未处理"; val[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png"); icon = require("../assets/images/jieNengImg/warnWhite.png")
} else { }else{
val[index].Status = "已处理"; val[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png"); icon = require("../assets/images/jieNengImg/warnBlue.png")
} }
if (val[index].AlarmLevel == 1) { if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级"; val[index].AlarmLevel = "一级";
} else if (val[index].AlarmLevel == 2) { } else if (val[index].AlarmLevel == 2) {
@ -573,27 +453,24 @@ export default {
} else if (val[index].AlarmLevel == 3) { } else if (val[index].AlarmLevel == 3) {
val[index].AlarmLevel = "三级"; val[index].AlarmLevel = "三级";
} }
return { return {
icon: icon, icon: icon,
time: this.$moment(val[index].AlarmTime).format( time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
"YYYY-MM-DD HH:mm:ss" position: val[index].AlarmName,
), DeviceType: val[index].DeviceType,
position: val[index].AlarmName, status: val[index].Status,
DeviceType: val[index].DeviceType, };
status: val[index].Status,
AlarmLevel: val[index].AlarmLevel,
};
}); });
console.log("warnListMqtt", warnListMqtt); console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) { for (let i = 0; i < warnListMqtt.length; i++) {
if (warnListMqtt[i].AlarmLevel == "三级") { if(warnListMqtt[i].AlarmLevel=='三级'){
this.policeList.splice(0, 0, warnListMqtt[i]); this.policeList.splice(0,0,warnListMqtt[i]);
this.getAlarmCount(); this.getAlarmCount()
}
if(warnListMqtt[i].DeviceType=='消防'){
this.fireWarnList.splice(0,0,warnListMqtt[i]);
}
} }
if (warnListMqtt[i].DeviceType == "消防") {
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
}
}
}, },
}, },
components: {}, components: {},
@ -638,16 +515,16 @@ export default {
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
/deep/ .el-carousel__container { /deep/ .el-carousel__container {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/deep/ .el-carousel__indicators--horizontal { /deep/ .el-carousel__indicators--horizontal {
display: none; display: none;
} }
.securityImg { .securityImg{
position: absolute; position: absolute;
left: 10%; left:10%;
} }
.securitySupervision { .securitySupervision {
width: 50%; width: 50%;
@ -746,8 +623,8 @@ export default {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
// padding-right: 20%; // padding-right: 20%;
padding-right: 5%; padding-right: 5%;
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
font-size: 0.7rem; font-size: 0.7rem;
@ -774,7 +651,6 @@ export default {
padding-right: 20%; padding-right: 20%;
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
font-size: 0.7rem;
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

4
vue.config.js
View File

@ -16,7 +16,6 @@ module.exports = {
proxy: { proxy: {
'/api': { //代理的名字 '/api': { //代理的名字
target:'http://172.16.1.253:12308/api/', target:'http://172.16.1.253:12308/api/',
// target:'http://138.227.208.100:12308/api/',
ws: true, ws: true,
changeOrigin: true, changeOrigin: true,
pathRewrite:{ pathRewrite:{
@ -32,8 +31,7 @@ module.exports = {
} }
}, },
'/video': { //代理的名字 '/video': { //代理的名字
// target:'http://172.16.1.253:12308/api/', target:'http://172.16.1.253:12308/api/',
target:'http://138.227.208.100:12307/',
ws: true, ws: true,
changeOrigin: true, changeOrigin: true,
pathRewrite:{ pathRewrite:{