Compare commits
2 Commits
57f57b451d
...
4ed697d5fa
| Author | SHA1 | Date |
|---|---|---|
 lixiaobang
|
4ed697d5fa | |
|
lixiaobang
|
68585dd6b3 |
|
|
@ -7,6 +7,7 @@
|
||||||
"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",
|
||||||
|
|
@ -22,6 +23,8 @@
|
||||||
"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",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!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>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -87,10 +87,16 @@
|
||||||
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]){
|
||||||
|
|
@ -114,8 +120,10 @@
|
||||||
//点击事件
|
//点击事件
|
||||||
$('#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>
|
||||||
|
|
|
||||||
126
src/App.vue
126
src/App.vue
|
|
@ -28,23 +28,37 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="menuList">
|
<div class="menuList">
|
||||||
<div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index,item.name)" :class="{menuAc : menuAc == index}">
|
<div
|
||||||
|
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 :src="item.icon" :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'85%'}"/>
|
<img
|
||||||
<div style="font-size: 0.55rem;margin-top: 5%;">{{ item.name }}</div>
|
:src="item.icon"
|
||||||
|
: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 {
|
||||||
|
|
@ -52,31 +66,39 @@ import {getData} from './api/index.js'
|
||||||
window.innerWidth ||
|
window.innerWidth ||
|
||||||
document.documentElement.clientWidth ||
|
document.documentElement.clientWidth ||
|
||||||
document.body.clientWidth,
|
document.body.clientWidth,
|
||||||
time:'',
|
time: "",
|
||||||
weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
|
weekList: [
|
||||||
week:'',
|
"星期日",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六",
|
||||||
|
],
|
||||||
|
week: "",
|
||||||
floorAct: 0,
|
floorAct: 0,
|
||||||
floorList: [
|
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: [
|
||||||
|
|
@ -107,85 +129,85 @@ import {getData} from './api/index.js'
|
||||||
],
|
],
|
||||||
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) {
|
||||||
|
|
@ -201,15 +223,14 @@ import {getData} from './api/index.js'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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;
|
||||||
|
|
@ -217,7 +238,6 @@ import {getData} from './api/index.js'
|
||||||
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>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
//根据等级获取报警数据
|
||||||
|
export const getHikvision = (data) => {
|
||||||
|
return axios.post('/video/cameras/hikvision/',
|
||||||
|
data
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
@ -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,13 +45,14 @@ 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'}
|
||||||
|
)
|
||||||
};
|
};
|
||||||
|
|
@ -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://172.16.1.253:1884/mqtt';
|
const connectUrl = 'ws://138.227.208.100: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 () {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<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>
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
const { color } = require("echarts")
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="energy">
|
<div class="energy">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
|
@ -35,7 +37,7 @@
|
||||||
>
|
>
|
||||||
<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.count }}</span>
|
<span>{{ i.data }}</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
|
||||||
>
|
>
|
||||||
|
|
@ -350,19 +352,19 @@ export default {
|
||||||
{
|
{
|
||||||
name: "今日发电量",
|
name: "今日发电量",
|
||||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||||
count: "",
|
count: "0",
|
||||||
unit: "kWh",
|
unit: "kWh",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "总发电量",
|
name: "总发电量",
|
||||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||||
count: "",
|
count: "0",
|
||||||
unit: "kWh",
|
unit: "kWh",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "有功功率",
|
name: "有功功率",
|
||||||
icon: require("../assets/images/jieNengImg/power.png"),
|
icon: require("../assets/images/jieNengImg/power.png"),
|
||||||
count: "",
|
count: "0",
|
||||||
unit: "kWh",
|
unit: "kWh",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -374,7 +376,7 @@ export default {
|
||||||
{
|
{
|
||||||
name: "运行时间",
|
name: "运行时间",
|
||||||
icon: require("../assets/images/jieNengImg/runTime.png"),
|
icon: require("../assets/images/jieNengImg/runTime.png"),
|
||||||
count: "",
|
count: "0",
|
||||||
unit: "h",
|
unit: "h",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -389,25 +391,28 @@ 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) {
|
||||||
|
|
@ -434,62 +439,13 @@ export default {
|
||||||
//获取能耗计量环比分析
|
//获取能耗计量环比分析
|
||||||
getQOQ() {
|
getQOQ() {
|
||||||
let dataList = {
|
let dataList = {
|
||||||
buildingId: "79",
|
pbuildingId: "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);
|
||||||
})
|
})
|
||||||
|
|
@ -504,58 +460,9 @@ 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.calculateEcharts(res.data.data.values);
|
this.calculateEchartsTwo(res.data.data.values);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// //mqtt订阅数据
|
// //mqtt订阅数据
|
||||||
|
|
@ -615,33 +522,24 @@ export default {
|
||||||
},
|
},
|
||||||
// mqtt订阅（独立）
|
// mqtt订阅（独立）
|
||||||
getDataByMqtt(url, topic) {
|
getDataByMqtt(url, topic) {
|
||||||
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
|
const clientId = Number(new Date()).toString(); // 用户名
|
||||||
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",
|
||||||
// 测试：订阅本机IP
|
clean: true, // 保留会话
|
||||||
// host: host,
|
cleanSession: true,
|
||||||
// port: port,
|
connectTimeout: 7000, // 超时时间
|
||||||
|
reconnectPeriod: 7000, // 重连时间间隔
|
||||||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
host: '138.227.111.141',
|
||||||
username: 'test', // 用户名（可选）
|
port: '8083',
|
||||||
password: 1234, // 密码（可选）
|
// 认证信息
|
||||||
clientId: clientId, // 客户端ID，默认随机生成
|
clientId: Number(new Date()).toString(),
|
||||||
protocolId: "MQTT",
|
// clientId: 'JBFY',
|
||||||
protocolVersion: 4,
|
username: "admin",
|
||||||
clean: true, // false在离线时接收QoS1和2的消息
|
password: "123456",
|
||||||
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(host, options); // 连接
|
this.mqttClient = mqtt.connect(url, options); // 连接
|
||||||
// const client = mqtt.connect(host, options); // 连接
|
// const client = mqtt.connect(host, options); // 连接
|
||||||
// const client = mqtt.connect(host) // 连接
|
// const client = mqtt.connect(host) // 连接
|
||||||
// 错误回调
|
// 错误回调
|
||||||
|
|
@ -655,15 +553,9 @@ 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) {
|
||||||
|
|
@ -694,207 +586,6 @@ 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) => {
|
||||||
|
|
@ -908,28 +599,32 @@ export default {
|
||||||
);
|
);
|
||||||
res.data.dataResults.forEach((item, index) => {
|
res.data.dataResults.forEach((item, index) => {
|
||||||
allDevicesCode.push(item.metercode);
|
allDevicesCode.push(item.metercode);
|
||||||
|
});
|
||||||
getRealData({
|
getRealData({
|
||||||
metercodes: allDevicesCode,
|
metercodes: allDevicesCode,
|
||||||
}).then((response) => {
|
}).then((response) => {
|
||||||
console.log(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++) {
|
for (let i = 0; i < this.equipmentList.length; i++) {
|
||||||
response.data.dataResults.forEach((is, k) => {
|
resList.forEach((is, k) => {
|
||||||
if (this.equipmentList[i].code == is.id) {
|
if (this.equipmentList[i].code == is.id) {
|
||||||
this.equipmentList.push({
|
this.equipmentList2.push({
|
||||||
data: item.idata,
|
data: parseInt(is.idata),
|
||||||
name: this.equipmentList[i].name,
|
name: this.equipmentList[i].name,
|
||||||
value: "",
|
value: "",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
|
||||||
console.log(this.equipmentList, "设备用能统计");
|
|
||||||
//分页
|
//分页
|
||||||
for (let i = 0; i < this.equipmentList.length; i += 8) {
|
for (let i = 0; i < this.equipmentList2.length; i += 8) {
|
||||||
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
|
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//预警点击
|
//预警点击
|
||||||
|
|
@ -1030,22 +725,12 @@ 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)"];
|
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 sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||||
let gap = (1 * sum) / 100;
|
let gap = (1 * sum) / 100;
|
||||||
let pieData1 = [];
|
let pieData1 = [];
|
||||||
|
|
@ -1066,7 +751,6 @@ export default {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
pieData1.push(gapData);
|
pieData1.push(gapData);
|
||||||
|
|
||||||
// 第二圈数据
|
// 第二圈数据
|
||||||
pieData2.push({
|
pieData2.push({
|
||||||
...chartData[i],
|
...chartData[i],
|
||||||
|
|
@ -1243,8 +927,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.val)
|
bqData.push(item.hqVal)
|
||||||
tbData.push(item.tqVal)
|
tbData.push(item.val)
|
||||||
});
|
});
|
||||||
var myChart = this.$echarts.init(
|
var myChart = this.$echarts.init(
|
||||||
document.getElementById("calculateEchartsTwo")
|
document.getElementById("calculateEchartsTwo")
|
||||||
|
|
@ -1255,8 +939,9 @@ 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: ["同期", "本期", "同比"],
|
||||||
textStyle: { fontSize: "0.9rem", color: "#ffffff" },
|
data: ["同期", "环期", "用量数值"],
|
||||||
|
textStyle: { fontSize: "0.7rem", color: "#ffffff" },
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
|
|
@ -1273,7 +958,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",
|
||||||
|
|
@ -1282,6 +967,7 @@ export default {
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
|
name:'单位kWh',
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
|
@ -1289,11 +975,15 @@ 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: {
|
||||||
|
|
@ -1301,7 +991,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 },
|
||||||
},
|
},
|
||||||
|
|
@ -1326,7 +1016,7 @@ export default {
|
||||||
data: tqData,
|
data: tqData,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "本期",
|
name: "环期",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barWidth: "25%",
|
barWidth: "25%",
|
||||||
showBackground: true,
|
showBackground: true,
|
||||||
|
|
@ -1350,7 +1040,7 @@ export default {
|
||||||
data: bqData,
|
data: bqData,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "同比",
|
name: "用量数值",
|
||||||
type: "line",
|
type: "line",
|
||||||
yAxisIndex: 1,
|
yAxisIndex: 1,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|
@ -1676,7 +1366,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: 1.3rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -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,12 +88,11 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
width:100%
|
width: 100%;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span>报警原因:{{ item.cause }}</span>
|
<span style="text-align: left">报警原因:{{ 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>
|
||||||
|
|
@ -211,32 +210,56 @@
|
||||||
@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+'video.mp4'"
|
:src="item.video"
|
||||||
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-show="cameraBigShow">
|
<div class="camersBig" v-if="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 src="../assets/images/add.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
|
<img
|
||||||
<img src="../assets/images/reduce.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
|
src="../assets/images/add.png"
|
||||||
|
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 src="../assets/images/leftBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
|
<img
|
||||||
<img src="../assets/images/rightBtn.png" style="width:20%;height:24%;cursor: pointer;"/>
|
src="../assets/images/leftBtn.png"
|
||||||
|
style="width: 20%; height: 24%; cursor: pointer"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="../assets/images/rightBtn.png"
|
||||||
|
style="width: 20%; height: 24%; cursor: pointer"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -250,6 +273,9 @@ 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 {
|
||||||
|
|
@ -348,22 +374,39 @@ 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();
|
||||||
|
|
@ -371,36 +414,60 @@ 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 = [
|
// });
|
||||||
{
|
// 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=",
|
||||||
{
|
// },
|
||||||
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;
|
// setTimeout(() => {
|
||||||
}, 1000);
|
// this.cameraList = camera;
|
||||||
|
// }, 1000);
|
||||||
this.warnSelect(0);
|
this.warnSelect(0);
|
||||||
//获取建筑id
|
},
|
||||||
this.getBuildingData();
|
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: {
|
watch: {
|
||||||
alarmAllLevel(val) {
|
alarmAllLevel(val) {
|
||||||
|
|
@ -430,126 +497,131 @@ 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;
|
||||||
this.buildingList = [
|
let buildArr = [];
|
||||||
{
|
// this.options =
|
||||||
name: "江北新区法院",
|
Object.keys(this.buildingList).map((item, index) => {
|
||||||
id: "79",
|
if (this.buildingList[index].name.indexOf("水") == -1) {
|
||||||
parentId: "-1",
|
buildArr[buildArr.length] = this.buildingList[index];
|
||||||
},
|
}
|
||||||
{
|
// return {
|
||||||
name: "辅楼一层水表1",
|
// label: buildNameList,
|
||||||
id: "104",
|
// value: this.buildingList[index].id,
|
||||||
parentId: "79",
|
// parentId: this.buildingList[index].parentId,
|
||||||
},
|
// };
|
||||||
{
|
});
|
||||||
name: "辅楼一层水表2",
|
this.options = Object.keys(buildArr).map((item, index) => {
|
||||||
id: "105",
|
|
||||||
parentId: "79",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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 {
|
return {
|
||||||
label: this.buildingList[index].name,
|
label: buildArr[index].name,
|
||||||
value: this.buildingList[index].id,
|
value: this.buildingList[index].id,
|
||||||
parentId: this.buildingList[index].parentId,
|
parentId: this.buildingList[index].parentId,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
// });
|
});
|
||||||
},
|
},
|
||||||
//智慧节能选择时间
|
//智慧节能选择时间
|
||||||
selectDataList(val) {
|
selectDataList(val) {
|
||||||
|
|
@ -594,16 +666,18 @@ 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.cameraBig = path;
|
this.cameraBigUrl = path;
|
||||||
this.cameraBigShow = true;
|
this.cameraBigShow = true;
|
||||||
},
|
},
|
||||||
closeCamer() {
|
closeCamer() {
|
||||||
this.cameraBigShow = false;
|
this.cameraBigShow = false;
|
||||||
|
this.$refs.camersBig.closeVideo();
|
||||||
},
|
},
|
||||||
//报警选中
|
//报警选中
|
||||||
warnSelect(index) {
|
warnSelect(index) {
|
||||||
|
|
@ -663,7 +737,7 @@ export default {
|
||||||
//获取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 = "一级";
|
||||||
|
|
@ -686,7 +760,7 @@ 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]);
|
||||||
}
|
}
|
||||||
|
|
@ -1374,7 +1448,10 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {},
|
components: {
|
||||||
|
camera,
|
||||||
|
cameraBig,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1546,9 +1623,8 @@ 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: 25%;
|
height: 27%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px dashed #fff;
|
border: 1px dashed #fff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,6 @@
|
||||||
</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>
|
||||||
|
|
@ -160,8 +159,15 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
"
|
"
|
||||||
>设备内容:<span
|
><span style="white-space: nowrap">设备内容:</span
|
||||||
style="color: rgb(0, 255, 255); margin-left: 5%"
|
><span
|
||||||
|
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
|
||||||
>
|
>
|
||||||
|
|
@ -187,14 +193,16 @@
|
||||||
|
|
||||||
<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: "",
|
||||||
},
|
},
|
||||||
|
|
@ -218,11 +226,12 @@ export default {
|
||||||
name: "摄像头昨日报警数",
|
name: "摄像头昨日报警数",
|
||||||
count: "0",
|
count: "0",
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
tit:'门禁监管',
|
tit: "门禁监管",
|
||||||
security:[{
|
security: [
|
||||||
|
{
|
||||||
name: "",
|
name: "",
|
||||||
count: "",
|
count: "",
|
||||||
},
|
},
|
||||||
|
|
@ -246,8 +255,9 @@ export default {
|
||||||
name: "门禁昨日报警数",
|
name: "门禁昨日报警数",
|
||||||
count: "0",
|
count: "0",
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
warnCameraList: [
|
warnCameraList: [
|
||||||
|
|
@ -332,15 +342,37 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.getAnfang();
|
||||||
//获取消防告警
|
//获取消防告警
|
||||||
this.getFireWarnList()
|
this.getPoliceList();
|
||||||
|
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) {
|
||||||
|
|
@ -367,9 +399,90 @@ export default {
|
||||||
//获取昨天今天的报警数量
|
//获取昨天今天的报警数量
|
||||||
getAlarmCount() {
|
getAlarmCount() {
|
||||||
getSecurityAlarmCount().then((res) => {
|
getSecurityAlarmCount().then((res) => {
|
||||||
this.securityList[0].security[4].count = res.data.data.TodayCount
|
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
|
||||||
this.securityList[0].security[5].count = res.data.data.YesterdayCount
|
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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取设备离线在线数据
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
|
@ -379,30 +492,34 @@ 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("YYYY-MM-DD HH:mm:ss"),
|
time: this.$moment(res.data.data[index].AlarmTime).format(
|
||||||
|
"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,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -411,40 +528,43 @@ export default {
|
||||||
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("YYYY-MM-DD HH:mm:ss"),
|
time: this.$moment(res.data.data[index].AlarmTime).format(
|
||||||
|
"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 = "一级";
|
||||||
|
|
@ -455,19 +575,22 @@ export default {
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
icon: icon,
|
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,
|
position: val[index].AlarmName,
|
||||||
DeviceType: val[index].DeviceType,
|
DeviceType: val[index].DeviceType,
|
||||||
status: val[index].Status,
|
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=='消防'){
|
if (warnListMqtt[i].DeviceType == "消防") {
|
||||||
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
|
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -651,6 +774,7 @@ 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 {
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ 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:{
|
||||||
|
|
@ -31,7 +32,8 @@ 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:{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue