Compare commits
No commits in common. "4ed697d5fa2c92e1504a0b875f996e92ea5823e7" and "57f57b451d81cceca3cfa7a4b4ad2ad170205e2d" have entirely different histories.
4ed697d5fa
...
57f57b451d
|
|
@ -1,23 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
48
README.md
48
README.md
|
|
@ -1,24 +1,24 @@
|
|||
# nengyuan
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
# nengyuan
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,7 +7,6 @@
|
|||
"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",
|
||||
|
|
@ -23,8 +22,6 @@
|
|||
"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",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,44 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>H5 PC测试</title>
|
||||
<link href="css/video-js.css" rel="stylesheet">
|
||||
<script src="js/video.min.js"></script>
|
||||
<script src="js/videojs-contrib-hls.js"></script>
|
||||
<style>
|
||||
body{background-color: #191919}
|
||||
|
||||
#example-video{
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<h1 style="color: white; text-align: center;">HLS测试</h1>
|
||||
<video id="example-video" class="video-js" autoplay="autoplay" controls preload="auto"
|
||||
width="600" height="800" >
|
||||
<!-- <source src="http://193.112.101.157:8080/hls/test.m3u8" type="application/x-mpegURL" /> -->
|
||||
<!-- <source src="http://60.190.97.190:83/openUrl/LpSobcI/live.m3u8" type="application/x-mpegURL"> -->
|
||||
<source :src="url" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var player = videojs('example-video');
|
||||
player.play();
|
||||
},
|
||||
function getQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
|
||||
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
console.log();
|
||||
</script>
|
||||
</html>
|
||||
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
|
|
@ -1,17 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>南京江北新区人民法院智慧运营平台</title>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>南京江北新区人民法院智慧运营平台</title>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -87,16 +87,10 @@
|
|||
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',"http://138.227.200.2:83/openUrl/GNzyMUM/live.m3u8");
|
||||
// $('#player').attr('video-url',"video.mp4");
|
||||
// 截图
|
||||
// function snapshot(){
|
||||
// if(document.getElementsByClassName("easy-video-player-inner")[0]){
|
||||
|
|
@ -120,10 +114,8 @@
|
|||
//点击事件
|
||||
$('#appc').click(function(){
|
||||
let val = getQueryString('src')
|
||||
let code = getCameraList('code')
|
||||
window.parent.postMessage({
|
||||
val,
|
||||
code
|
||||
val
|
||||
}, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
706
src/App.vue
706
src/App.vue
|
|
@ -1,364 +1,344 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div>{{ time }} {{ week }}</div>
|
||||
</div>
|
||||
<div class="middle">南京江北新区人民法院智慧运营平台</div>
|
||||
<div class="right">
|
||||
<div class="quit">
|
||||
<!-- <img
|
||||
src="./assets/images/quit.png"
|
||||
style="width: 3%; height: 37%"
|
||||
@click="goPage"
|
||||
/> -->
|
||||
</div>
|
||||
<!-- <div class="storey">
|
||||
<div
|
||||
class="floor"
|
||||
v-for="(item, index) in floorList"
|
||||
:key="index"
|
||||
@click="floorChange(index)"
|
||||
:class="{ floorAct: floorAct == index }"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</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 }"
|
||||
>
|
||||
<!-- <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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<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:
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth,
|
||||
time: "",
|
||||
weekList: [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
],
|
||||
week: "",
|
||||
floorAct: 0,
|
||||
floorList: [
|
||||
{
|
||||
name: "楼顶",
|
||||
},
|
||||
{
|
||||
name: "F5",
|
||||
},
|
||||
{
|
||||
name: "F4",
|
||||
},
|
||||
{
|
||||
name: "F3",
|
||||
},
|
||||
{
|
||||
name: "F2",
|
||||
},
|
||||
{
|
||||
name: "F1",
|
||||
},
|
||||
{
|
||||
name: "B1",
|
||||
},
|
||||
],
|
||||
menuBtn: [
|
||||
{
|
||||
name: "首页",
|
||||
icon: require("./assets/images/shouYe.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧法庭",
|
||||
icon: require("./assets/images/faTing.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧节能",
|
||||
icon: require("./assets/images/jieNeng.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧安防",
|
||||
icon: require("./assets/images/anFang.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧运维",
|
||||
icon: require("./assets/images/yunWei.png"),
|
||||
},
|
||||
{
|
||||
name: "告警管理",
|
||||
icon: require("./assets/images/gaoJing.png"),
|
||||
},
|
||||
],
|
||||
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) => {
|
||||
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");
|
||||
}
|
||||
});
|
||||
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");
|
||||
}
|
||||
},
|
||||
goPage(name) {
|
||||
console.log(name);
|
||||
},
|
||||
|
||||
//选中楼层
|
||||
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: {
|
||||
screenWidth(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
if (!this.timer) {
|
||||
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
|
||||
this.screenWidth = val;
|
||||
this.timer = true;
|
||||
let that = this;
|
||||
setTimeout(function () {
|
||||
that.timer = false;
|
||||
}, 400);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family: "微软雅黑";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transition: all 0.2s linear;
|
||||
transform-origin: left top;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
#app {
|
||||
// width: 6144px;
|
||||
// height: 1920px;
|
||||
background: rgba(1, 1, 7, 1);
|
||||
// overflow: hidden;
|
||||
.header {
|
||||
height: 11%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px 0 5px;
|
||||
box-sizing: border-box;
|
||||
background: url("./assets/images/headerTop.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
.left {
|
||||
width: 25%;
|
||||
height: 38%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
.middle {
|
||||
width: 40%;
|
||||
height: 64%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5rem;
|
||||
}
|
||||
.right {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
.quit {
|
||||
height: 38%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.storey {
|
||||
height: calc(100% - 38%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.floor {
|
||||
height: 80%;
|
||||
width: 35%;
|
||||
font-size: 0.55rem;
|
||||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.floorAct {
|
||||
height: 80%;
|
||||
width: 35%;
|
||||
font-size: 0.55rem;
|
||||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: url("./assets/images/bottomKuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.menuList {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.menuBtn {
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: white;
|
||||
}
|
||||
.menuAc {
|
||||
color: rgb(0, 229, 189);
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 15%);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div>{{ time }} {{ week }}</div>
|
||||
</div>
|
||||
<div class="middle">南京江北新区人民法院智慧运营平台</div>
|
||||
<div class="right">
|
||||
<div class="quit">
|
||||
<!-- <img
|
||||
src="./assets/images/quit.png"
|
||||
style="width: 3%; height: 37%"
|
||||
@click="goPage"
|
||||
/> -->
|
||||
</div>
|
||||
<!-- <div class="storey">
|
||||
<div
|
||||
class="floor"
|
||||
v-for="(item, index) in floorList"
|
||||
:key="index"
|
||||
@click="floorChange(index)"
|
||||
:class="{ floorAct: floorAct == index }"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</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}">
|
||||
<!-- <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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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:[
|
||||
{
|
||||
name:'楼顶',
|
||||
},
|
||||
{
|
||||
name:'F5',
|
||||
},
|
||||
{
|
||||
name:'F4',
|
||||
},
|
||||
{
|
||||
name:'F3',
|
||||
},
|
||||
{
|
||||
name:'F2',
|
||||
},
|
||||
{
|
||||
name:'F1',
|
||||
},
|
||||
{
|
||||
name:'B1',
|
||||
},
|
||||
],
|
||||
menuBtn: [
|
||||
{
|
||||
name: "首页",
|
||||
icon: require("./assets/images/shouYe.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧法庭",
|
||||
icon: require("./assets/images/faTing.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧节能",
|
||||
icon: require("./assets/images/jieNeng.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧安防",
|
||||
icon: require("./assets/images/anFang.png"),
|
||||
},
|
||||
{
|
||||
name: "智慧运维",
|
||||
icon: require("./assets/images/yunWei.png"),
|
||||
},
|
||||
{
|
||||
name: "告警管理",
|
||||
icon: require("./assets/images/gaoJing.png"),
|
||||
},
|
||||
],
|
||||
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) => {
|
||||
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")
|
||||
}
|
||||
});
|
||||
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')
|
||||
}
|
||||
},
|
||||
goPage(name){
|
||||
console.log(name)
|
||||
},
|
||||
|
||||
//选中楼层
|
||||
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: {
|
||||
screenWidth(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
if (!this.timer) {
|
||||
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
|
||||
this.screenWidth = val;
|
||||
this.timer = true;
|
||||
let that = this;
|
||||
setTimeout(function () {
|
||||
that.timer = false;
|
||||
}, 400);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family:'微软雅黑' ;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transition: all 0.2s linear;
|
||||
transform-origin: left top;
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
#app {
|
||||
// width: 6144px;
|
||||
// height: 1920px;
|
||||
background: rgba(1, 1, 7, 1);
|
||||
// overflow: hidden;
|
||||
.header {
|
||||
height: 11%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px 0 5px;
|
||||
box-sizing: border-box;
|
||||
background: url("./assets/images/headerTop.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
.left {
|
||||
width: 25%;
|
||||
height: 38%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
.middle {
|
||||
width: 40%;
|
||||
height: 64%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5rem;
|
||||
}
|
||||
.right {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
.quit {
|
||||
height: 38%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.storey {
|
||||
height: calc(100% - 38%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.floor {
|
||||
height: 80%;
|
||||
width: 35%;
|
||||
font-size: 0.55rem;
|
||||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.floorAct {
|
||||
height: 80%;
|
||||
width: 35%;
|
||||
font-size: 0.55rem;
|
||||
background: url("./assets/images/floorBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: url("./assets/images/bottomKuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.menuList {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.menuBtn {
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
color: white;
|
||||
}
|
||||
.menuAc{
|
||||
color: rgb(0,229,189);
|
||||
// width: 15%;
|
||||
// height: 100%;
|
||||
width: 15%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 15%);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
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) => {
|
||||
return axios.post('ecs-server/services/ecm/subitemList',
|
||||
return axios.post('ecs-server/services/ecm/subitemList', {
|
||||
data
|
||||
)
|
||||
})
|
||||
};
|
||||
// 获取所有设备信息
|
||||
export const getAllDevices = (params) => {
|
||||
|
|
@ -45,14 +45,13 @@ 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'}
|
||||
)
|
||||
})
|
||||
};
|
||||
|
|
@ -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://138.227.208.100:1884/mqtt';
|
||||
const connectUrl = 'ws://172.16.1.253:1884/mqtt';
|
||||
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
|
||||
// if (!client.connected) {
|
||||
// client.on('connect', function () {
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
<template>
|
||||
<div class="Camera">
|
||||
<video
|
||||
:ref="'video' + videoId"
|
||||
:id="'video' + videoId"
|
||||
class="video-js vjs-default-skin"
|
||||
width="100%"
|
||||
height="100%"
|
||||
object-fit:cover
|
||||
preload="auto"
|
||||
style="overflow: hidden;"
|
||||
>
|
||||
<source :src="videoUrlList" type="application/x-mpegURL" />
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from "video.js";
|
||||
import "videojs-contrib-hls";
|
||||
import "@videojs/http-streaming";
|
||||
import "video.js/dist/video-js.min.css";
|
||||
export default {
|
||||
name:'camera',
|
||||
props: {
|
||||
videoUrl: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoUrlList:'',
|
||||
videoId : 0,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.videoId = this.id
|
||||
},
|
||||
watch: {
|
||||
videoUrl: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
this.$nextTick(()=>{
|
||||
this.clickSurveillance(newVal)
|
||||
})
|
||||
}
|
||||
},
|
||||
id: {
|
||||
deep: true,
|
||||
handler(newVal,oldVal) {
|
||||
this.videoId = newVal
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 点击摄像头
|
||||
clickSurveillance(newVal) {
|
||||
this.player = null
|
||||
let that = this
|
||||
// 注意这里需要加定时器或者在异步请求中才可以
|
||||
setTimeout(() => {
|
||||
this.player = videojs(
|
||||
'video'+this.videoId,
|
||||
{
|
||||
bigPlayButton: false,
|
||||
controlBar: false,
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试",
|
||||
},
|
||||
function () {
|
||||
this.play();
|
||||
}
|
||||
);
|
||||
|
||||
// 当前要播放的视频地址
|
||||
this.videoUrlList = newVal;
|
||||
this.player.src(this.videoUrlList);
|
||||
videojs('video' + this.videoId).ready(function () {
|
||||
this.player = this;
|
||||
this.player.play();
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
// 关闭摄像头
|
||||
closeVideo() {
|
||||
this.player.dispose();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.video-js{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<div class="Camera">
|
||||
<video
|
||||
ref="video"
|
||||
id="video"
|
||||
class="video-js vjs-default-skin"
|
||||
width="100%"
|
||||
height="100%"
|
||||
object-fit:cover
|
||||
preload="auto"
|
||||
style="overflow: hidden;"
|
||||
>
|
||||
<source :src="videoUrlList" type="application/x-mpegURL" />
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from "video.js";
|
||||
import "videojs-contrib-hls";
|
||||
import "@videojs/http-streaming";
|
||||
import "video.js/dist/video-js.min.css";
|
||||
export default {
|
||||
name:'cameraBig',
|
||||
props: {
|
||||
cameraBig:{
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoUrlList:'',
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.clickSurveillance(this.cameraBig)
|
||||
},
|
||||
watch: {
|
||||
// cameraBig: {
|
||||
// deep: true,
|
||||
// handler(newVal) {
|
||||
// console.log(newVal,'wwwwwwwwww');
|
||||
// this.clickSurveillance(newVal)
|
||||
// }
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
// 点击摄像头
|
||||
clickSurveillance(newVal) {
|
||||
let that = this
|
||||
// 注意这里需要加定时器或者在异步请求中才可以
|
||||
setTimeout(() => {
|
||||
this.player = videojs(
|
||||
'video',
|
||||
{
|
||||
bigPlayButton: false,
|
||||
controlBar: false,
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试",
|
||||
},
|
||||
function () {
|
||||
this.play();
|
||||
}
|
||||
);
|
||||
|
||||
// 当前要播放的视频地址
|
||||
this.videoUrlList = newVal;
|
||||
this.player.src(this.videoUrlList);
|
||||
videojs('video').ready(function () {
|
||||
this.player = this;
|
||||
this.player.play();
|
||||
});
|
||||
}, 400);
|
||||
},
|
||||
// 关闭摄像头
|
||||
closeVideo() {
|
||||
console.log('关闭');
|
||||
this.player.dispose();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.video-js{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
const { color } = require("echarts")
|
||||
|
||||
<template>
|
||||
<div class="energy">
|
||||
<div class="left">
|
||||
|
|
@ -37,7 +35,7 @@ const { color } = require("echarts")
|
|||
>
|
||||
<div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
|
||||
<div class="equipmentList">
|
||||
<span>{{ i.data }}</span>
|
||||
<span>{{ i.count }}</span>
|
||||
<span style="color: rgb(225, 177, 25); font-size: 0.4rem"
|
||||
>KWH</span
|
||||
>
|
||||
|
|
@ -352,19 +350,19 @@ export default {
|
|||
{
|
||||
name: "今日发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "0",
|
||||
count: "",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "总发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "0",
|
||||
count: "",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "有功功率",
|
||||
icon: require("../assets/images/jieNengImg/power.png"),
|
||||
count: "0",
|
||||
count: "",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
|
|
@ -376,7 +374,7 @@ export default {
|
|||
{
|
||||
name: "运行时间",
|
||||
icon: require("../assets/images/jieNengImg/runTime.png"),
|
||||
count: "0",
|
||||
count: "",
|
||||
unit: "h",
|
||||
},
|
||||
{
|
||||
|
|
@ -391,28 +389,25 @@ 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) {
|
||||
|
|
@ -439,13 +434,62 @@ export default {
|
|||
//获取能耗计量环比分析
|
||||
getQOQ() {
|
||||
let dataList = {
|
||||
pbuildingId: "79",
|
||||
buildingId: "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);
|
||||
})
|
||||
|
|
@ -460,9 +504,58 @@ 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.calculateEchartsTwo(res.data.data.values);
|
||||
this.calculateEcharts(res.data.data.values);
|
||||
})
|
||||
},
|
||||
// //mqtt订阅数据
|
||||
|
|
@ -522,24 +615,33 @@ export default {
|
|||
},
|
||||
// mqtt订阅（独立）
|
||||
getDataByMqtt(url, topic) {
|
||||
const clientId = Number(new Date()).toString(); // 用户名
|
||||
// const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||||
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
|
||||
const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||||
const options = {
|
||||
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",
|
||||
// 配置
|
||||
// 测试：订阅本机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, // 保留标志
|
||||
},
|
||||
};
|
||||
if (this.mqttClient == undefined) {
|
||||
this.mqttClient = mqtt.connect(url, options); // 连接
|
||||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host, options); // 连接
|
||||
// const client = mqtt.connect(host) // 连接
|
||||
// 错误回调
|
||||
|
|
@ -553,9 +655,15 @@ 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) {
|
||||
|
|
@ -586,6 +694,207 @@ 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) => {
|
||||
|
|
@ -599,32 +908,28 @@ 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: "",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
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: "",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
console.log(this.equipmentList, "设备用能统计");
|
||||
//分页
|
||||
for (let i = 0; i < this.equipmentList2.length; i += 8) {
|
||||
this.equipmentList1.push(this.equipmentList2.slice(i, i + 8));
|
||||
for (let i = 0; i < this.equipmentList.length; i += 8) {
|
||||
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
},
|
||||
//预警点击
|
||||
|
|
@ -725,12 +1030,22 @@ export default {
|
|||
});
|
||||
},
|
||||
calculateEcharts(val) {
|
||||
// console.log(val,'=================s');
|
||||
let imgSrc = "/img/car.png";
|
||||
let chartData = [];
|
||||
let chartData = [
|
||||
{
|
||||
value: 42,
|
||||
name: "主楼",
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
name: "辅楼",
|
||||
},
|
||||
];
|
||||
chartData = Object.keys(val).map((item,index)=>{
|
||||
return {value:val[item].val,name:val[item].buildName}
|
||||
})
|
||||
let colorList = ["red", "rgb(255,122,0)","rgb(3, 255, 150)","rgb(0,215,245)"];
|
||||
let colorList = ["red", "rgb(255,122,0)"];
|
||||
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
let gap = (1 * sum) / 100;
|
||||
let pieData1 = [];
|
||||
|
|
@ -751,6 +1066,7 @@ export default {
|
|||
},
|
||||
});
|
||||
pieData1.push(gapData);
|
||||
|
||||
// 第二圈数据
|
||||
pieData2.push({
|
||||
...chartData[i],
|
||||
|
|
@ -927,8 +1243,8 @@ export default {
|
|||
val.forEach((item,index) => {
|
||||
dataX.push(item.dateDetail)
|
||||
tqData.push(item.tqVal)
|
||||
bqData.push(item.hqVal)
|
||||
tbData.push(item.val)
|
||||
bqData.push(item.val)
|
||||
tbData.push(item.tqVal)
|
||||
});
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("calculateEchartsTwo")
|
||||
|
|
@ -939,9 +1255,8 @@ export default {
|
|||
grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 },
|
||||
legend: {
|
||||
show: true,
|
||||
// data: ["同期", "本期", "同比"],
|
||||
data: ["同期", "环期", "用量数值"],
|
||||
textStyle: { fontSize: "0.7rem", color: "#ffffff" },
|
||||
data: ["同期", "本期", "同比"],
|
||||
textStyle: { fontSize: "0.9rem", color: "#ffffff" },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -958,7 +1273,7 @@ export default {
|
|||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// interval: 0,
|
||||
interval: 0,
|
||||
show: true,
|
||||
fontSize: "0.9rem",
|
||||
color: "#ffffff",
|
||||
|
|
@ -967,7 +1282,6 @@ export default {
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
name:'单位kWh',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
|
@ -975,15 +1289,11 @@ 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: {
|
||||
|
|
@ -991,7 +1301,7 @@ export default {
|
|||
fontSize: "0.9rem",
|
||||
color: "#ffffff",
|
||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||
formatter: "{value}",
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
|
|
@ -1016,7 +1326,7 @@ export default {
|
|||
data: tqData,
|
||||
},
|
||||
{
|
||||
name: "环期",
|
||||
name: "本期",
|
||||
type: "bar",
|
||||
barWidth: "25%",
|
||||
showBackground: true,
|
||||
|
|
@ -1040,7 +1350,7 @@ export default {
|
|||
data: bqData,
|
||||
},
|
||||
{
|
||||
name: "用量数值",
|
||||
name: "同比",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
|
|
@ -1366,7 +1676,7 @@ export default {
|
|||
background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -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,11 +88,12 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2%;
|
||||
width: 100%;
|
||||
width:100%
|
||||
"
|
||||
>
|
||||
<span style="text-align: left">报警原因:{{ item.cause }}</span>
|
||||
<span style="margin-right: 5%">风险等级:{{ item.risk }}</span>
|
||||
<span>报警原因:{{ item.cause }}</span>
|
||||
<span style="margin-right:5%">风险等级:{{ item.risk }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -210,59 +211,35 @@
|
|||
@click="changeCamera(item.video)"
|
||||
>
|
||||
<!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
|
||||
<!-- <iframe
|
||||
:src="item.video"
|
||||
<iframe
|
||||
:src="item.video+'video.mp4'"
|
||||
ref="iframeRef"
|
||||
frameborder="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></iframe> -->
|
||||
<camera
|
||||
style="width: 100%; height: 100%"
|
||||
:videoUrl="item.video"
|
||||
:id="index"
|
||||
/>
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camersBig" v-if="cameraBigShow">
|
||||
<div class="camersBig" v-show="cameraBigShow">
|
||||
<!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
|
||||
<!-- <iframe
|
||||
<iframe
|
||||
:src="cameraBig"
|
||||
ref="iframeRef"
|
||||
frameborder="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></iframe> -->
|
||||
<cameraBig
|
||||
style="width: 100%; height: 100%"
|
||||
:cameraBig="cameraBigUrl"
|
||||
ref="camersBig"
|
||||
/>
|
||||
></iframe>
|
||||
<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"
|
||||
@click="addZoom"
|
||||
/>
|
||||
<img
|
||||
src="../assets/images/reduce.png"
|
||||
style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
|
||||
@click="reduceZoom"
|
||||
/>
|
||||
<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"/>
|
||||
</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"
|
||||
/>
|
||||
<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>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
|
|
@ -273,9 +250,6 @@ 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 {
|
||||
|
|
@ -374,39 +348,22 @@ export default {
|
|||
value: "1",
|
||||
},
|
||||
],
|
||||
cameraList: [
|
||||
{
|
||||
video: "",
|
||||
},
|
||||
{
|
||||
video: "",
|
||||
},
|
||||
{
|
||||
video: "",
|
||||
},
|
||||
{
|
||||
video: "",
|
||||
},
|
||||
], //摄像
|
||||
cameraBigUrl: "",
|
||||
cameraList: [], //摄像
|
||||
cameraBig: "",
|
||||
cameraBigShow: false,
|
||||
buildingList: [],
|
||||
alarmAllLevel: [],
|
||||
alarmFirstLevel: [],
|
||||
alarmSecondLevel: [],
|
||||
alarmThirdLevel: [],
|
||||
camersCode: "",
|
||||
alarmAllLevel:[],
|
||||
alarmFirstLevel:[],
|
||||
alarmSecondLevel:[],
|
||||
alarmThirdLevel:[],
|
||||
};
|
||||
},
|
||||
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();
|
||||
|
|
@ -414,60 +371,36 @@ 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);
|
||||
// that.camersCode = e.data.code
|
||||
// }
|
||||
// });
|
||||
// let camera = [
|
||||
// {
|
||||
// icon: require("../assets/images/camera.png"),
|
||||
// video: "video/video.html?src=",
|
||||
// },
|
||||
// {
|
||||
// icon: require("../assets/images/camera.png"),
|
||||
// video: "video/video.html?src=",
|
||||
// },
|
||||
// {
|
||||
// icon: require("../assets/images/camera.png"),
|
||||
// video: "video/video.html?src=",
|
||||
// },
|
||||
// {
|
||||
// icon: require("../assets/images/camera.png"),
|
||||
// video: "video/video.html?src=",
|
||||
// },
|
||||
// ];
|
||||
// setTimeout(() => {
|
||||
// this.cameraList = camera;
|
||||
// }, 1000);
|
||||
this.warnSelect(0);
|
||||
},
|
||||
watch: {
|
||||
alarmAllLevel(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
console.log("alarmAllLevel", val);
|
||||
this.upmqttData(val);
|
||||
},
|
||||
|
||||
alarmFirstLevel(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
console.log("alarmFirstLevel", val);
|
||||
if (val.length != 0) {
|
||||
this.upmqttData(val);
|
||||
window.addEventListener("message", function (e) {
|
||||
let val = e.data.val;
|
||||
if (val != null) {
|
||||
that.changeCamera("video/video.html?src=" + e.data.val);
|
||||
}
|
||||
},
|
||||
alarmSecondLevel(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
console.log("alarmSecondLevel", val);
|
||||
this.upmqttData(val);
|
||||
},
|
||||
alarmThirdLevel(val) {
|
||||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||
console.log("alarmThirdLevel", val);
|
||||
this.upmqttData(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);
|
||||
this.warnSelect(0);
|
||||
//获取建筑id
|
||||
this.getBuildingData();
|
||||
},
|
||||
watch: {
|
||||
alarmAllLevel(val) {
|
||||
|
|
@ -497,131 +430,126 @@ 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;
|
||||
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,
|
||||
};
|
||||
});
|
||||
// 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,
|
||||
};
|
||||
});
|
||||
// });
|
||||
},
|
||||
//智慧节能选择时间
|
||||
selectDataList(val) {
|
||||
|
|
@ -666,18 +594,16 @@ export default {
|
|||
};
|
||||
//接口获取区域
|
||||
getAreaList(data).then((res) => {
|
||||
console.log(res.data.data, "sssssssssssssss");
|
||||
this.energyEcharts(res.data.data);
|
||||
});
|
||||
},
|
||||
//选中图片
|
||||
changeCamera(path) {
|
||||
this.cameraBigUrl = path;
|
||||
this.cameraBig = path;
|
||||
this.cameraBigShow = true;
|
||||
},
|
||||
closeCamer() {
|
||||
this.cameraBigShow = false;
|
||||
this.$refs.camersBig.closeVideo();
|
||||
},
|
||||
//报警选中
|
||||
warnSelect(index) {
|
||||
|
|
@ -729,15 +655,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 = "一级";
|
||||
|
|
@ -760,10 +686,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() {
|
||||
|
|
@ -1448,10 +1374,7 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
camera,
|
||||
cameraBig,
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1589,10 +1512,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;
|
||||
|
|
@ -1603,10 +1526,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;
|
||||
|
|
@ -1623,8 +1546,9 @@ export default {
|
|||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: auto;
|
||||
|
||||
.warnListContent {
|
||||
height: 27%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
border: 1px dashed #fff;
|
||||
color: #fff;
|
||||
|
|
@ -1634,7 +1558,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;
|
||||
|
|
|
|||
|
|
@ -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,22 +40,23 @@
|
|||
: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>
|
||||
</div>
|
||||
<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>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- </div> -->
|
||||
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="title" style="height: 8%">预警视频监控联动</div>
|
||||
|
|
@ -159,15 +160,8 @@
|
|||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
><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;
|
||||
"
|
||||
>设备内容:<span
|
||||
style="color: rgb(0, 255, 255); margin-left: 5%"
|
||||
>{{ item.position }}</span
|
||||
></span
|
||||
>
|
||||
|
|
@ -192,72 +186,68 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { GetLevelAlarm, getSecurityAlarmCount } from "../api/index";
|
||||
import { getHikvision } from "../api/haikang";
|
||||
import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
|
||||
export default {
|
||||
name: "security",
|
||||
data() {
|
||||
return {
|
||||
securityList: [
|
||||
{
|
||||
tit: "摄像头监管",
|
||||
security: [
|
||||
{
|
||||
name: "",
|
||||
count: "",
|
||||
},
|
||||
{
|
||||
name: "摄像头总数",
|
||||
count: "609",
|
||||
},
|
||||
{
|
||||
name: "摄像头在线数量",
|
||||
count: "602",
|
||||
},
|
||||
{
|
||||
name: "摄像头离线数量",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "摄像头报警数",
|
||||
count: "0",
|
||||
},
|
||||
{
|
||||
name: "摄像头昨日报警数",
|
||||
count: "0",
|
||||
},
|
||||
],
|
||||
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",
|
||||
},
|
||||
|
||||
{
|
||||
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: [
|
||||
|
|
@ -336,43 +326,21 @@ export default {
|
|||
status: "已解除",
|
||||
},
|
||||
],
|
||||
alarmFirstLevel: [],
|
||||
alarmSecondLevel: [],
|
||||
alarmThirdLevel: [],
|
||||
alarmFirstLevel:[],
|
||||
alarmSecondLevel:[],
|
||||
alarmThirdLevel:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getAnfang();
|
||||
//获取消防告警
|
||||
this.getPoliceList();
|
||||
this.getFireWarnList();
|
||||
this.getFireWarnList()
|
||||
// 获取安防告警
|
||||
|
||||
this.getPoliceList()
|
||||
//获取安防统计今天昨天报警数量
|
||||
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);
|
||||
},
|
||||
this.getAlarmCount()
|
||||
window.alarmFirstLevel = this.alarmFirstLevel
|
||||
window.alarmSecondLevel= this.alarmSecondLevel
|
||||
window.alarmThirdLevel= this.alarmThirdLevel
|
||||
},
|
||||
watch: {
|
||||
alarmFirstLevel(val) {
|
||||
|
|
@ -397,92 +365,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
//获取昨天今天的报警数量
|
||||
getAlarmCount() {
|
||||
getSecurityAlarmCount().then((res) => {
|
||||
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
|
||||
this.securityList[0].security[5].count =
|
||||
res.data.data.VideoYesterdayCount;
|
||||
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
|
||||
this.securityList[1].security[5].count =
|
||||
res.data.data.DoorYesterdayCount;
|
||||
});
|
||||
},
|
||||
//获取设备离线在线数据
|
||||
|
||||
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, "门禁数量==========");
|
||||
});
|
||||
});
|
||||
getAlarmCount(){
|
||||
getSecurityAlarmCount().then((res)=>{
|
||||
this.securityList[0].security[4].count = res.data.data.TodayCount
|
||||
this.securityList[0].security[5].count = res.data.data.YesterdayCount
|
||||
})
|
||||
},
|
||||
videoChange(index) {
|
||||
this.warnCameraList.forEach((item, i) => {
|
||||
|
|
@ -492,80 +379,73 @@ 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) {
|
||||
|
|
@ -573,28 +453,25 @@ 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,
|
||||
AlarmLevel: 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,
|
||||
};
|
||||
});
|
||||
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();
|
||||
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]);
|
||||
}
|
||||
}
|
||||
if (warnListMqtt[i].DeviceType == "消防") {
|
||||
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
|
|
@ -638,16 +515,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%;
|
||||
|
|
@ -746,8 +623,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;
|
||||
|
|
@ -774,7 +651,6 @@ export default {
|
|||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ 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:{
|
||||
|
|
@ -32,8 +31,7 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
'/video': { //代理的名字
|
||||
// target:'http://172.16.1.253:12308/api/',
|
||||
target:'http://138.227.208.100:12307/',
|
||||
target:'http://172.16.1.253:12308/api/',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
|
|
|
|||
Loading…
Reference in New Issue