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

Compare commits

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

2 Commits
57f57b451d ... 4ed697d5fa

Author SHA1 Message Date
lixiaobang 4ed697d5fa 代码提交 2023-04-24 15:07:30 +08:00
lixiaobang 68585dd6b3 代码提交 2023-04-24 14:59:34 +08:00
25 changed files with 37204 additions and 15439 deletions
Show Stats Expand all files Collapse all files

3
package.json
View File

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

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

File diff suppressed because one or more lines are too long

44
public/camera/demoVideo.html Normal file
View File

@ -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>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

12
public/video/video.html
View File

@ -87,10 +87,16 @@
var r = window.location.search.substr(1).match(reg);
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'
// $('#player').attr('video-url',videoBack);
$('#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(){
// if(document.getElementsByClassName("easy-video-player-inner")[0]){
@ -114,8 +120,10 @@
//点击事件
$('#appc').click(function(){
let val = getQueryString('src')
let code = getCameraList('code')
window.parent.postMessage({
val
val,
code
}, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
})
</script>

224
src/App.vue
View File

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

7
src/api/haikang.js Normal file
View File

@ -0,0 +1,7 @@
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) => {
return axios.post('ecs-server/services/ecm/subitemList', {
return axios.post('ecs-server/services/ecm/subitemList',
data
})
)
};
// 获取所有设备信息
export const getAllDevices = (params) => {
@ -45,13 +45,14 @@ export const getAllDevices = (params) => {
};
// 获取设备实时数据信息
export const getRealData = (data) => {
return axios.post('ecs-server/services/getRealData', {
return axios.post('ecs-server/services/getRealData',
data
})
)
};
// 获取区域用能数据信息
export const getAreaList = (data) => {
return axios.post('ecs-server/services/ecm/areaList', {
return axios.post('ecs-server/services/ecm/areaList',
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;
console.log("this.connect.host", this.connect.host)
// 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}`;
// if (!client.connected) {
// client.on('connect', function () {

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

@ -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>

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

@ -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>

458
src/views/energySaving.vue
View File

@ -1,3 +1,5 @@
const { color } = require("echarts")
<template>
<div class="energy">
<div class="left">
@ -35,7 +37,7 @@
>
<div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
<div class="equipmentList">
<span>{{ i.count }}</span>
<span>{{ i.data }}</span>
<span style="color: rgb(225, 177, 25); font-size: 0.4rem"
>KWH</span
>
@ -350,19 +352,19 @@ export default {
{
name: "今日发电量",
icon: require("../assets/images/jieNengImg/energy.png"),
count: "",
count: "0",
unit: "kWh",
},
{
name: "总发电量",
icon: require("../assets/images/jieNengImg/energy.png"),
count: "",
count: "0",
unit: "kWh",
},
{
name: "有功功率",
icon: require("../assets/images/jieNengImg/power.png"),
count: "",
count: "0",
unit: "kWh",
},
{
@ -374,7 +376,7 @@ export default {
{
name: "运行时间",
icon: require("../assets/images/jieNengImg/runTime.png"),
count: "",
count: "0",
unit: "h",
},
{
@ -389,25 +391,28 @@ export default {
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
equipmentList2: [],
};
},
mounted() {
this.getAllDevicesInfo();
window.setInterval(() => {
this.getAllDevicesInfo();
}, 10000);
this.getMqttData()
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel= this.alarmAllLevel
this.changeWarn(0);
//轮播八个一页
for (let i = 0; i < this.equipmentList.length; i += 8) {
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
}
// for (let i = 0; i < this.equipmentList.length; i += 8) {
// this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
// }
// this.calculateEcharts();
this.getQOQ()
this.getYOY()
this.calculateEchartsTwo();
// window.createMqtt = this.createMqtt();
this.getAllDevicesInfo();
},
watch: {
alarmFirstLevel(val) {
@ -434,62 +439,13 @@ export default {
//获取能耗计量环比分析
getQOQ() {
let dataList = {
buildingId: "79",
pbuildingId: "79",
customerId: "12345678",
date: this.$moment().format("YYYYMM"),
dateType: "2",
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)=>{
this.calculateEcharts(res.data.data.child);
})
@ -504,58 +460,9 @@ export default {
meterType: "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)=>{
this.calculateEcharts(res.data.data.values);
this.calculateEchartsTwo(res.data.data.values);
})
},
// //mqtt订阅数据
@ -615,33 +522,24 @@ export default {
},
// mqtt订阅（独立）
getDataByMqtt(url, topic) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const clientId = Number(new Date()).toString(); // 用户名
// const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const options = {
// 配置
// 测试：订阅本机IP
// host: host,
// port: port,
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
username: 'test', // 用户名（可选）
password: 1234, // 密码（可选）
clientId: clientId, // 客户端ID，默认随机生成
protocolId: "MQTT",
protocolVersion: 4,
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, // 保留标志
},
endpoint: "/mqtt",
clean: true, // 保留会话
cleanSession: true,
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
host: '138.227.111.141',
port: '8083',
// 认证信息
clientId: Number(new Date()).toString(),
// clientId: 'JBFY',
username: "admin",
password: "123456",
};
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) // 连接
// 错误回调
@ -655,15 +553,9 @@ export default {
});
// 连接回调
this.mqttClient.on("connect", () => {
// console.log(
// "[MQTT-TEST] 已连接的客户端ID: " + this.models[cIdNum].cName
// );
});
// 接收回调
this.mqttClient.on("message", (topic, message, packet) => {
console.log(
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
new Date());
// 解析后端数据
let that = this;
if (topic.indexOf("device/publish/FB80") != -1) {
@ -694,207 +586,6 @@ export default {
},
//获取所有设备信息
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 = [];
getAllDevices().then((res) => {
@ -908,28 +599,32 @@ export default {
);
res.data.dataResults.forEach((item, index) => {
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: "",
});
}
});
}
});
});
console.log(this.equipmentList, "设备用能统计");
getRealData({
metercodes: allDevicesCode,
}).then((response) => {
let resList = []
// console.log(allDevicesCode,response.data.dataResults, "实时设备数据ssssssssssss");
for (const key in response.data.dataResults) {
resList = response.data.dataResults[1]
}
for (let i = 0; i < this.equipmentList.length; i++) {
resList.forEach((is, k) => {
if (this.equipmentList[i].code == is.id) {
this.equipmentList2.push({
data: parseInt(is.idata),
name: this.equipmentList[i].name,
value: "",
});
}
});
}
//分页
for (let i = 0; i < this.equipmentList.length; i += 8) {
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
for (let i = 0; i < this.equipmentList2.length; i += 8) {
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
}
});
});
},
//预警点击
@ -1030,22 +725,12 @@ export default {
});
},
calculateEcharts(val) {
// console.log(val,'=================s');
let imgSrc = "/img/car.png";
let chartData = [
{
value: 42,
name: "主楼",
},
{
value: 24,
name: "辅楼",
},
];
let chartData = [];
chartData = Object.keys(val).map((item,index)=>{
return {value:val[item].val,name:val[item].buildName}
})
let colorList = ["red", "rgb(255,122,0)"];
let colorList = ["red", "rgb(255,122,0)","rgb(3, 255, 150)","rgb(0,215,245)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100;
let pieData1 = [];
@ -1066,7 +751,6 @@ export default {
},
});
pieData1.push(gapData);
// 第二圈数据
pieData2.push({
...chartData[i],
@ -1243,8 +927,8 @@ export default {
val.forEach((item,index) => {
dataX.push(item.dateDetail)
tqData.push(item.tqVal)
bqData.push(item.val)
tbData.push(item.tqVal)
bqData.push(item.hqVal)
tbData.push(item.val)
});
var myChart = this.$echarts.init(
document.getElementById("calculateEchartsTwo")
@ -1255,8 +939,9 @@ export default {
grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 },
legend: {
show: true,
data: ["同期", "本期", "同比"],
textStyle: { fontSize: "0.9rem", color: "#ffffff" },
// data: ["同期", "本期", "同比"],
data: ["同期", "环期", "用量数值"],
textStyle: { fontSize: "0.7rem", color: "#ffffff" },
},
tooltip: {
trigger: "axis",
@ -1273,7 +958,7 @@ export default {
show: false,
},
axisLabel: {
interval: 0,
// interval: 0,
show: true,
fontSize: "0.9rem",
color: "#ffffff",
@ -1282,6 +967,7 @@ export default {
},
yAxis: [
{
name:'单位kWh',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
@ -1289,11 +975,15 @@ export default {
fontSize: "0.9rem",
color: "#ffffff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value}%",
formatter: "{value}",
},
splitLine: { show: false },
},
{
name:'比率',
textStyle:{
color:'#fff'
},
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
@ -1301,7 +991,7 @@ export default {
fontSize: "0.9rem",
color: "#ffffff",
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
formatter: "{value} %",
formatter: "{value}",
},
splitLine: { show: false },
},
@ -1326,7 +1016,7 @@ export default {
data: tqData,
},
{
name: "本期",
name: "环期",
type: "bar",
barWidth: "25%",
showBackground: true,
@ -1350,7 +1040,7 @@ export default {
data: bqData,
},
{
name: "同比",
name: "用量数值",
type: "line",
yAxisIndex: 1,
itemStyle: {
@ -1676,7 +1366,7 @@ export default {
background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 1.3rem;
font-size: 1rem;
font-weight: 500;
display: flex;
flex-direction: column;

460
src/views/index.vue
View File

@ -30,7 +30,7 @@
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div style="width: 100%;font-size: 0.6rem;">
<div style="width: 100%; font-size: 0.6rem">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
item.count
@ -79,7 +79,7 @@
flex-direction: column;
align-items: flex-start;
margin-left: 3%;
width:100%
width: 100%;
"
>
<span>报警时间:{{ item.time }}</span>
@ -88,12 +88,11 @@
display: flex;
justify-content: space-between;
margin-top: 2%;
width:100%
width: 100%;
"
>
<span>报警原因:{{ item.cause }}</span>
<span style="margin-right:5%">风险等级:{{ item.risk }}</span
>
<span style="text-align: left">报警原因:{{ item.cause }}</span>
<span style="margin-right: 5%">风险等级:{{ item.risk }}</span>
</div>
</div>
</div>
@ -211,35 +210,59 @@
@click="changeCamera(item.video)"
>
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
<iframe
:src="item.video+'video.mp4'"
<!-- <iframe
:src="item.video"
ref="iframeRef"
frameborder="0"
style="width: 100%; height: 100%"
></iframe>
></iframe> -->
<camera
style="width: 100%; height: 100%"
:videoUrl="item.video"
:id="index"
/>
</div>
</div>
</div>
</div>
<div class="camersBig" v-show="cameraBigShow">
<div class="camersBig" v-if="cameraBigShow">
<!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
<iframe
<!-- <iframe
:src="cameraBig"
ref="iframeRef"
frameborder="0"
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="remoteControl">
<img src="../assets/images/add.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
<img src="../assets/images/reduce.png" style="width:20%;height:24%;cursor: pointer;z-index: 99"/>
<img
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 class="remoteControl1">
<img 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>
<img
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> -->
</template>
@ -250,6 +273,9 @@ import {
getBuildinginfos,
getAreaList,
} from "../api/index";
import { getHikvision } from "../api/haikang";
import camera from "./camera/camera.vue";
import cameraBig from "./camera/cameraBig.vue";
export default {
data() {
return {
@ -348,22 +374,39 @@ export default {
value: "1",
},
],
cameraList: [], //摄像
cameraBig: "",
cameraList: [
{
video: "",
},
{
video: "",
},
{
video: "",
},
{
video: "",
},
], //摄像
cameraBigUrl: "",
cameraBigShow: false,
buildingList: [],
alarmAllLevel:[],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
alarmAllLevel: [],
alarmFirstLevel: [],
alarmSecondLevel: [],
alarmThirdLevel: [],
camersCode: "",
};
},
mounted() {
this.getCamera();
//获取建筑id
this.getBuildingData();
let that = this;
window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel= this.alarmAllLevel
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel;
window.alarmAllLevel = this.alarmAllLevel;
this.warningOne();
this.warningTwo();
this.maintenanceLeft();
@ -371,36 +414,60 @@ export default {
// this.energyEcharts();
this.selectDataList(this.selectDate);
// window.createMqtt = this.createMqtt();
window.addEventListener("message", function (e) {
let val = e.data.val;
if (val != null) {
that.changeCamera("video/video.html?src=" + e.data.val);
}
});
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);
// window.addEventListener("message", function (e) {
// let val = e.data.val;
// if (val != null) {
// 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);
//获取建筑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: {
alarmAllLevel(val) {
@ -430,126 +497,131 @@ export default {
},
},
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
getBuildingData() {
// getBuildinginfos().then((res) => {
//接口取值
// this.buildingList = res.data.dataResults
this.buildingList = [
{
name: "江北新区法院",
id: "79",
parentId: "-1",
},
{
name: "辅楼一层水表1",
id: "104",
parentId: "79",
},
{
name: "辅楼一层水表2",
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 {
label: this.buildingList[index].name,
value: this.buildingList[index].id,
parentId: this.buildingList[index].parentId,
};
getBuildinginfos().then((res) => {
// 接口取值
this.buildingList = res.data.dataResults;
let buildArr = [];
// this.options =
Object.keys(this.buildingList).map((item, index) => {
if (this.buildingList[index].name.indexOf("水") == -1) {
buildArr[buildArr.length] = this.buildingList[index];
}
// return {
// label: buildNameList,
// value: this.buildingList[index].id,
// parentId: this.buildingList[index].parentId,
// };
});
this.options = Object.keys(buildArr).map((item, index) => {
return {
label: buildArr[index].name,
value: this.buildingList[index].id,
parentId: this.buildingList[index].parentId,
};
});
});
// });
},
//智慧节能选择时间
selectDataList(val) {
@ -594,16 +666,18 @@ export default {
};
//接口获取区域
getAreaList(data).then((res) => {
console.log(res.data.data, "sssssssssssssss");
this.energyEcharts(res.data.data);
});
},
//选中图片
changeCamera(path) {
this.cameraBig = path;
this.cameraBigUrl = path;
this.cameraBigShow = true;
},
closeCamer() {
this.cameraBigShow = false;
this.$refs.camersBig.closeVideo();
},
//报警选中
warnSelect(index) {
@ -655,15 +729,15 @@ export default {
"YYYY-MM-DD HH:mm:ss"
),
cause: val[index].AlarmName,
DeviceType: val[index].DeviceType,
DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel,
};
});
},
//获取mqtt数据
upmqttData(val) {
upmqttData(val) {
let icon = null;
var warnListMqtt = []
var warnListMqtt = [];
warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
@ -686,10 +760,10 @@ export default {
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
this.warnList.splice(0,0,warnListMqtt[i]);
}
console.log("warnListMqtt", warnListMqtt);
for (let i = 0; i < warnListMqtt.length; i++) {
this.warnList.splice(0, 0, warnListMqtt[i]);
}
},
//设备左
warningOne() {
@ -1374,7 +1448,10 @@ export default {
}
},
},
components: {},
components: {
camera,
cameraBig,
},
};
</script>
@ -1512,10 +1589,10 @@ export default {
justify-content: space-around;
align-items: center;
.btnList {
// width: 13%;
// height: 38%;
// width: 13%;
// height: 38%;
width: 17%;
height: 41%;
height: 41%;
background: url(../assets/images/warnBtn.png) no-repeat;
background-size: 100% 100%;
color: #fff;
@ -1526,10 +1603,10 @@ export default {
font-size: 0.7rem;
}
.btnListAc {
// width: 13%;
// height: 38%;
width: 17%;
height: 41%;
// width: 13%;
// height: 38%;
width: 17%;
height: 41%;
background: url(../assets/images/warnBtnAc.png) no-repeat;
background-size: 100% 100%;
color: #fff;
@ -1546,9 +1623,8 @@ export default {
background: url(../assets/images/warnDottedLine.png) no-repeat;
background-size: 100% 100%;
overflow: auto;
.warnListContent {
height: 25%;
height: 27%;
width: 100%;
border: 1px dashed #fff;
color: #fff;
@ -1558,7 +1634,7 @@ export default {
align-items: center;
padding-left: 3%;
box-sizing: border-box;
font-size: 0.7rem;
font-size: 0.7rem;
.warnArray {
width: 100%;
display: flex;

388
src/views/security.vue
View File

@ -4,7 +4,7 @@
<div class="leftOne">
<div class="title">安防统计数据</div>
<!-- <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="securityCount">
<div
@ -29,7 +29,7 @@
<span>{{ item.count }}</span>
</div>
</div> -->
<el-carousel
<el-carousel
class="security"
:autoplay="true"
trigger="click"
@ -40,23 +40,22 @@
:key="index"
class="equipmentEnergy"
>
<img src="../assets/images/anFangAc.png" class="securityImg"/>
<!-- <div class="securitySupervision">安防监管</div> -->
<div class="securitySupervision">{{item.tit}}</div>
<div class="securityCount">
<div
class="securityList"
v-for="(i, k) in item.security"
:key="k"
>
<span>{{ i.name }}</span>
<span>{{ i.count }}</span>
<img src="../assets/images/anFangAc.png" class="securityImg" />
<!-- <div class="securitySupervision">安防监管</div> -->
<div class="securitySupervision">{{ item.tit }}</div>
<div class="securityCount">
<div
class="securityList"
v-for="(i, k) in item.security"
:key="k"
>
<span>{{ i.name }}</span>
<span>{{ i.count }}</span>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- </div> -->
</div>
<div class="leftTwo">
<div class="title" style="height: 8%">预警视频监控联动</div>
@ -160,8 +159,15 @@
width: 100%;
justify-content: flex-start;
"
>设备内容:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
><span style="white-space: nowrap">设备内容:</span
><span
style="
color: rgb(0, 255, 255);
margin-left: 5%;
display: flex;
justify-content: flex-end;
text-align: left;
"
>{{ item.position }}</span
></span
>
@ -186,68 +192,72 @@
</template>
<script>
import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
import { GetLevelAlarm, getSecurityAlarmCount } from "../api/index";
import { getHikvision } from "../api/haikang";
export default {
name: "security",
data() {
return {
securityList: [
{
tit:'摄像头监管',
security:[{
name: "",
count: "",
tit: "摄像头监管",
security: [
{
name: "",
count: "",
},
{
name: "摄像头总数",
count: "609",
},
{
name: "摄像头在线数量",
count: "602",
},
{
name: "摄像头离线数量",
count: "7",
},
{
name: "摄像头报警数",
count: "0",
},
{
name: "摄像头昨日报警数",
count: "0",
},
],
},
{
name: "摄像头总数",
count: "609",
tit: "门禁监管",
security: [
{
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: [
@ -326,21 +336,43 @@ export default {
status: "已解除",
},
],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
alarmFirstLevel: [],
alarmSecondLevel: [],
alarmThirdLevel: [],
};
},
mounted() {
this.getAnfang();
//获取消防告警
this.getFireWarnList()
this.getPoliceList();
this.getFireWarnList();
// 获取安防告警
this.getPoliceList()
//获取安防统计今天昨天报警数量
this.getAlarmCount()
window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
this.getAlarmCount();
window.alarmFirstLevel = this.alarmFirstLevel;
window.alarmSecondLevel = this.alarmSecondLevel;
window.alarmThirdLevel = this.alarmThirdLevel;
},
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel", val);
if (val.length != 0) {
this.upmqttData(val);
}
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel", val);
this.upmqttData(val);
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel", val);
this.upmqttData(val);
},
},
watch: {
alarmFirstLevel(val) {
@ -365,11 +397,92 @@ export default {
},
methods: {
//获取昨天今天的报警数量
getAlarmCount(){
getSecurityAlarmCount().then((res)=>{
this.securityList[0].security[4].count = res.data.data.TodayCount
this.securityList[0].security[5].count = res.data.data.YesterdayCount
})
getAlarmCount() {
getSecurityAlarmCount().then((res) => {
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
this.securityList[0].security[5].count =
res.data.data.VideoYesterdayCount;
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
this.securityList[1].security[5].count =
res.data.data.DoorYesterdayCount;
});
},
//获取设备离线在线数据
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) {
this.warnCameraList.forEach((item, i) => {
@ -379,73 +492,80 @@ export default {
index
].icon = require("../assets/images/anFang/videoAc.png");
},
//获取火灾报警、
getFireWarnList(){
getFireWarnList() {
let params = {
AlarmLevel: "",
DeviceTypes:'消防'
}
DeviceTypes: "消防",
};
GetLevelAlarm(params).then((res) => {
let icon = null
let icon = null;
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png")
}else{
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png")
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
time: this.$moment(res.data.data[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
DeviceType: res.data.data[index].DeviceType,
// position: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
});
},
//获取安防报警、
getPoliceList(){
getPoliceList() {
let params = {
AlarmLevel: "",
DeviceTypes:'门禁,视频监控'
}
DeviceTypes: "门禁,视频监控",
};
GetLevelAlarm(params).then((res) => {
let icon = null
let icon = null;
this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png")
}else{
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
res.data.data[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png")
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
return {
icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
time: this.$moment(res.data.data[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
DeviceType: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
AlarmLevel: res.data.data[index].AlarmLevel,
};
});
});
},
//获取mqtt数据
upmqttData(val) {
let icon = null
var warnListMqtt = []
//获取mqtt数据
upmqttData(val) {
let icon = null;
var warnListMqtt = [];
warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].Status == 0) {
val[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png")
}else{
val[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png")
}
val[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png");
} else {
val[index].Status = "已处理";
icon = require("../assets/images/jieNengImg/warnBlue.png");
}
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
} else if (val[index].AlarmLevel == 2) {
@ -453,24 +573,27 @@ export default {
} else if (val[index].AlarmLevel == 3) {
val[index].AlarmLevel = "三级";
}
return {
icon: icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
position: val[index].AlarmName,
DeviceType: val[index].DeviceType,
status: val[index].Status,
};
return {
icon: icon,
time: this.$moment(val[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
position: val[index].AlarmName,
DeviceType: val[index].DeviceType,
status: val[index].Status,
AlarmLevel: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].AlarmLevel=='三级'){
this.policeList.splice(0,0,warnListMqtt[i]);
this.getAlarmCount()
}
if(warnListMqtt[i].DeviceType=='消防'){
this.fireWarnList.splice(0,0,warnListMqtt[i]);
}
console.log("warnListMqtt", warnListMqtt);
for (let i = 0; i < warnListMqtt.length; i++) {
if (warnListMqtt[i].AlarmLevel == "三级") {
this.policeList.splice(0, 0, warnListMqtt[i]);
this.getAlarmCount();
}
if (warnListMqtt[i].DeviceType == "消防") {
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
}
}
},
},
components: {},
@ -515,16 +638,16 @@ export default {
justify-content: flex-end;
flex-wrap: wrap;
position: relative;
/deep/ .el-carousel__container {
/deep/ .el-carousel__container {
height: 100%;
width: 100%;
}
/deep/ .el-carousel__indicators--horizontal {
display: none;
}
.securityImg{
.securityImg {
position: absolute;
left:10%;
left: 10%;
}
.securitySupervision {
width: 50%;
@ -623,8 +746,8 @@ export default {
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
// padding-right: 20%;
padding-right: 5%;
// padding-right: 20%;
padding-right: 5%;
box-sizing: border-box;
color: #fff;
font-size: 0.7rem;
@ -651,6 +774,7 @@ export default {
padding-right: 20%;
box-sizing: border-box;
color: #fff;
font-size: 0.7rem;
}
}
::-webkit-scrollbar {

4
vue.config.js
View File

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