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

20230422

This commit is contained in:
chengdandan 2023-04-22 17:26:41 +08:00
parent 5da48a181e 6ace912f97
commit 77a1bcd20b
9 changed files with 1383 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/index.js
View File

@ -24,4 +24,34 @@ export const getAlarmStatistics = (params) => {
return axios.get('api/GetAlarmStatistics', {
params
})
};
// 获取建筑信息接口
export const getBuildinginfos = (params) => {
return axios.get('ecs-server/services/getBuildinginfos', {
params
})
};
// 获取分项用能信息接口
export const getSubitemList = (data) => {
return axios.post('ecs-server/services/ecm/subitemList', {
data
})
};
// 获取所有设备信息
export const getAllDevices = (params) => {
return axios.get('ecs-server/services/getAllDevices', {
params
})
};
// 获取设备实时数据信息
export const getRealData = (data) => {
return axios.post('ecs-server/services/getRealData', {
data
})
};
// 获取区域用能数据信息
export const getAreaList = (data) => {
return axios.post('ecs-server/services/ecm/areaList', {
data
})
};

87
src/main.js
View File

@ -43,11 +43,11 @@ window.PubScribe = function (topic, _callback,) {
if (client == null) {
client = mqtt.createConnect(() => {
//客户端订阅主题
client.subscribe(['/SC/pub/uwb', '/SC/pub/env'], {
client.subscribe(['FirstLevel','SecondLevel','ThirdLevel'], {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功0", ['/SC/pub/uwb', '/SC/pub/env']);
console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
} else {
console.log('订阅失败');
}
@ -63,21 +63,78 @@ window.PubScribe = function (topic, _callback,) {
});
});
} else {
if (topic != null) {
console.log("topic", topic)
currentTopics = topic;
client.subscribe(currentTopics, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功1");
} else {
console.log('消息订阅失败！')
}
});
}
// if (topic != null) {
// console.log("topic", topic)
// currentTopics = topic;
// client.subscribe(currentTopics, {
// qos: 0
// }, (err) => {
// if (!err) {
// console.log("订阅成功1");
// } else {
// console.log('消息订阅失败！')
// }
// });
// }
}
}
window.PubScribe(null,realInfo);
window.alarmAllLevel = []
window.alarmFirstLevel = []
window.alarmSecondLevel = []
window.alarmThirdLevel = []
function realInfo(topic, message) {
switch (topic) {
// 接收托片
case "FirstLevel":
try {
// window.alarmFirstLevel= []
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) {
window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
window.alarmFirstLevel.push(msg[i])
}
// window.alarmFirstLevel= msg
// alarmAllLevel
//消防，电梯、动环系统
} catch (error) {}
console.log(error);
break;
case "SecondLevel":
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) {
window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
window.alarmSecondLevel.push(msg[i])
}
} catch (error) {}
console.log(error);
break;
case "ThirdLevel":
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
for (let i = 0; i < msg.length; i++) {
window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
window.alarmThirdLevel.push(msg[i])
}
} catch (error) {}
console.log(error);
break;
}
}
new Vue({
router,
render: h => h(App)

3
src/utils/mqttConfig.js
View File

@ -36,7 +36,8 @@ class mqttHandle {
// console.log("connectUrl",connectUrl)
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.111.141:8083/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 () {

160
src/views/alarm.vue
View File

@ -10,7 +10,7 @@
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
@ -41,7 +41,7 @@
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
@ -74,7 +74,7 @@
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<!-- <span>{{ item.id }}</span> -->
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
@ -102,7 +102,7 @@
<script>
import { GetLevelAlarm } from "../api/index";
import mqtt from "mqtt"; // mqtt协议
export default {
name: "court",
data() {
@ -132,10 +132,16 @@ export default {
},
], // 智慧法庭小房子
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
};
},
mounted() {
window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
// window.createMqtt = this.createMqtt();
// console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
//一级告警
this.getFirstAlarm();
@ -143,85 +149,34 @@ export default {
this.getSecondAlarm();
//三级告警
this.getThirdAlarm();
this.getMqttData()
//
},
methods: {
getMqttData(){
this.getDataByMqtt(
// "ws:ht.mqtt.umayle.com:2022/mqtt",
"ws:172.16.1.253:1883/mqtt",
"FirstLevel",
);
},
// mqtt订阅（独立）
getDataByMqtt(url, topic) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
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: "WillMsg", // 要发布的主题
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
retain: false, // 保留标志
},
};
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host, options); // 连接
// const client = mqtt.connect(host) // 连接
// 错误回调
this.mqttClient.on("error", (err) => {
// console.log("[MQTT-TEST] 连接错误：", this.models[cIdNum].cName);
this.mqttClient.end();
});
// 重连回调
this.mqttClient.on("reconnect", () => {
console.log("[MQTT-TEST] 重连中……");
});
// 连接回调
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(),
new Date().getMilliseconds()
);
// 解析后端数据
let that = this;
if (topic.indexOf("FirstLevel") != -1) {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
} else if (topic.indexOf("InConvoyor") != -1) {
}
});
watch: {
alarmFirstLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmFirstLevel",val)
if(val.length!=0){
this.upmqttData(val)
}
// 订阅
this.mqttClient.subscribe(topic, { qos: 1 });
},
alarmSecondLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmSecondLevel",val)
this.upmqttData(val)
},
alarmThirdLevel(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
console.log("alarmThirdLevel",val)
this.upmqttData(val)
},
},
methods: {
//获取一级告警
getFirstAlarm() {
GetLevelAlarm({
@ -282,8 +237,41 @@ export default {
});
});
},
//获取mqtt数据
upmqttData(val) {
let icon = null;
var warnListMqtt = []
warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png");
} else if (val[index].AlarmLevel == 2) {
val[index].AlarmLevel = "二级";
icon = require("../assets/images/warnOrange.png");
} else if (val[index].AlarmLevel == 3) {
val[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png");
}
return {
id: index + 1,
icon:icon,
time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
cause: val[index].AlarmName,
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
if(warnListMqtt[i].risk=='三级'){
this.warnList3.splice(0,0,warnListMqtt[i]);
}else if(warnListMqtt[i].risk=='二级'){
this.warnList2.splice(0,0,warnListMqtt[i]);
} if(warnListMqtt[i].risk=='一级'){
this.warnList1.splice(0,0,warnListMqtt[i]);
}
}
},
},
watch: {},
components: {},
};
</script>
@ -320,7 +308,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;
@ -395,7 +383,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;
@ -480,7 +468,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;
@ -554,7 +542,7 @@ export default {
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 5%;

904
src/views/energySaving.vue
View File

File diff suppressed because it is too large Load Diff

367
src/views/index.vue
View File

@ -10,14 +10,14 @@
v-for="(item, index) in wisdomList"
:key="index"
>
<div style="color: #fff; font-size: 0.6rem">{{ item.name }}</div>
<div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
<div
:class="houseList[index]"
style="
width: 100%;
height: 100%;
color: #fff;
font-size: 0.6rem;
font-size: 0.7rem;
"
>
{{ item.count }}
@ -30,7 +30,7 @@
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div style="width: 100%">
<div style="width: 100%;font-size: 0.6rem;">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
item.count
@ -172,6 +172,7 @@
:popper-append-to-body="false"
clearable
placeholder="请选择"
@change="selectDataList(selectDate)"
>
<el-option
v-for="(item, index) in dateOptions"
@ -188,12 +189,13 @@
:popper-append-to-body="false"
clearable
placeholder="请选择"
@change="selectMeterType(selectValue)"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
:value="item"
>
</el-option>
</el-select>
@ -242,7 +244,12 @@
</template>
<script>
import { GetLevelAlarm, getAlarmStatistics } from "../api/index";
import {
GetLevelAlarm,
getAlarmStatistics,
getBuildinginfos,
getAreaList,
} from "../api/index";
export default {
data() {
return {
@ -311,7 +318,11 @@ export default {
risk: "三级",
},
], //报警数组
selectValue: "",
selectValue: {
value: "79",
parentId: "-1",
label: "江北新区法院",
},
options: [
{
label: "A-VZCP1-1",
@ -322,11 +333,11 @@ export default {
value: "2",
},
],
selectDate: "",
selectDate: "3",
dateOptions: [
{
label: "年",
value: "1",
value: "3",
},
{
label: "月",
@ -334,22 +345,32 @@ export default {
},
{
label: "日",
value: "3",
value: "1",
},
],
cameraList: [], //摄像
cameraBig: "",
cameraBigShow: false,
buildingList: [],
alarmAllLevel:[],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
};
},
mounted() {
let that = this;
window.alarmFirstLevel = this.alarmFirstLevel
window.alarmSecondLevel= this.alarmSecondLevel
window.alarmThirdLevel= this.alarmThirdLevel
window.alarmAllLevel= this.alarmAllLevel
this.warningOne();
this.warningTwo();
this.maintenanceLeft();
this.maintenanceRight();
this.energyEcharts();
window.createMqtt = this.createMqtt();
// this.energyEcharts();
this.selectDataList(this.selectDate);
// window.createMqtt = this.createMqtt();
window.addEventListener("message", function (e) {
let val = e.data.val;
if (val != null) {
@ -378,8 +399,204 @@ export default {
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)
},
},
methods: {
//获取建筑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,
};
});
// });
},
//智慧节能选择时间
selectDataList(val) {
let nowTime = "";
if (val == 1) {
nowTime = this.$moment().format("YYYYMMDD");
} else if (val == 2) {
nowTime = this.$moment().format("YYYYMM");
} else {
nowTime = this.$moment().format("YYYY");
}
let data = {
buildingId: this.selectValue.value, //建筑id
customerId: "12345678",
date: nowTime,
dateType: val,
meterType: "1", //1.电,2.水
pbuildingId: this.selectValue.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
this.energyEcharts(res.data.data);
});
},
//智慧节能选择类型
selectMeterType(event) {
let nowTime = "";
if (this.selectDate == 1) {
nowTime = this.$moment().format("YYYYMMDD");
} else if (this.selectDate == 2) {
nowTime = this.$moment().format("YYYYMM");
} else {
nowTime = this.$moment().format("YYYY");
}
let data = {
buildingId: event.value, //建筑id
customerId: "12345678",
date: nowTime,
dateType: this.selectDate,
meterType: "1", //1.电,2.水
pbuildingId: event.parentId, //建组父id
};
//接口获取区域
getAreaList(data).then((res) => {
this.energyEcharts(res.data.data);
});
},
//选中图片
changeCamera(path) {
this.cameraBig = path;
@ -397,7 +614,7 @@ export default {
DeviceTypes: "",
};
GetLevelAlarm(params).then((res) => {
this.upWainData(res);
this.upWainData(res.data.data);
});
} else if (index == 1) {
let params = {
@ -405,7 +622,7 @@ export default {
DeviceTypes: "门禁,视频监控",
};
GetLevelAlarm(params).then((res) => {
this.upWainData(res);
this.upWainData(res.data.data);
});
} else {
let params = {
@ -413,45 +630,77 @@ export default {
DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
};
GetLevelAlarm(params).then((res) => {
this.upWainData(res);
this.upWainData(res.data.data);
});
}
},
//更新报警信息
upWainData(res) {
upWainData(val) {
let icon = null;
this.warnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].AlarmLevel == 1) {
res.data.data[index].AlarmLevel = "一级";
this.warnList = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png");
} else if (res.data.data[index].AlarmLevel == 2) {
res.data.data[index].AlarmLevel = "二级";
} else if (val[index].AlarmLevel == 2) {
val[index].AlarmLevel = "二级";
icon = require("../assets/images/warnOrange.png");
} else if (res.data.data[index].AlarmLevel == 3) {
res.data.data[index].AlarmLevel = "三级";
} else if (val[index].AlarmLevel == 3) {
val[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png");
}
return {
id: index + 1,
icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format(
time: this.$moment(val[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
cause: res.data.data[index].AlarmName,
risk: res.data.data[index].AlarmLevel,
cause: val[index].AlarmName,
DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel,
};
});
},
//获取mqtt数据
upmqttData(val) {
let icon = null;
var warnListMqtt = []
warnListMqtt = Object.keys(val).map((item, index) => {
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
icon = require("../assets/images/warnRed.png");
} else if (val[index].AlarmLevel == 2) {
val[index].AlarmLevel = "二级";
icon = require("../assets/images/warnOrange.png");
} else if (val[index].AlarmLevel == 3) {
val[index].AlarmLevel = "三级";
icon = require("../assets/images/warnBlue.png");
}
return {
id: index + 1,
icon: icon,
time: this.$moment(val[index].AlarmTime).format(
"YYYY-MM-DD HH:mm:ss"
),
cause: val[index].AlarmName,
DeviceType: val[index].DeviceType,
risk: val[index].AlarmLevel,
};
});
console.log("warnListMqtt",warnListMqtt)
for (let i = 0; i < warnListMqtt.length; i++) {
this.warnList.splice(0,0,warnListMqtt[i]);
}
},
//设备左
warningOne() {
let data = [];
let dataX = []
let dataX = [];
getAlarmStatistics({
Type: "消防",
}).then((res) => {
res.data.data.forEach((item, index) => {
data.push(item.Count);
dataX.push(item.Name)
dataX.push(item.Name);
});
var myChart = this.$echarts.init(document.getElementById("warningOne"));
let option = {
@ -462,7 +711,7 @@ export default {
orient: "vertical",
textStyle: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
data: [
// {
@ -496,7 +745,7 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
// rotate: "45"
},
},
@ -507,7 +756,7 @@ export default {
minInterval: 1,
nameTextStyle: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
// scale: true,
axisLine: {
@ -521,7 +770,7 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
splitLine: {
show: true,
@ -561,7 +810,7 @@ export default {
label: {
normal: {
show: true,
fontSize: "0.4rem",
fontSize: "0.6rem",
color: "#fff",
position: "inside",
},
@ -576,13 +825,13 @@ export default {
//设备右
warningTwo() {
let data = [];
let dataX = []
let dataX = [];
getAlarmStatistics({
Type: "设备",
}).then((res) => {
res.data.data.forEach((item, index) => {
data.push(item.Count);
dataX.push(item.Name)
dataX.push(item.Name);
});
var myChart = this.$echarts.init(document.getElementById("warningTwo"));
let option = {
@ -593,7 +842,7 @@ export default {
orient: "vertical",
textStyle: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
data: [
// {
@ -627,7 +876,7 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
// rotate: "45"
},
},
@ -638,7 +887,7 @@ export default {
minInterval: 1,
nameTextStyle: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
// scale: true,
axisLine: {
@ -652,7 +901,7 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.4rem",
fontSize: "0.6rem",
},
splitLine: {
show: true,
@ -692,7 +941,7 @@ export default {
label: {
normal: {
show: true,
fontSize: "0.4rem",
fontSize: "0.6rem",
color: "#fff",
position: "inside",
},
@ -759,7 +1008,7 @@ export default {
rich: {
a: {
color: "#fff",
fontSize: "0.5rem",
fontSize: "0.6rem",
padding: [0, 10, 0, 0],
},
b: {
@ -795,7 +1044,7 @@ export default {
textStyle: {
align: "center",
baseline: "middle",
fontSize: "0.5rem",
fontSize: "0.6rem",
fontWeight: "100",
color: "#fff",
},
@ -867,7 +1116,7 @@ export default {
rich: {
a: {
color: "#fff",
fontSize: "0.5rem",
fontSize: "0.6rem",
padding: [0, 10, 0, 0],
},
b: {
@ -903,7 +1152,7 @@ export default {
textStyle: {
align: "center",
baseline: "middle",
fontSize: "0.5rem",
fontSize: "0.6rem",
fontWeight: "100",
color: "#fff",
},
@ -921,7 +1170,14 @@ export default {
};
myChart.setOption(option);
},
energyEcharts() {
energyEcharts(val) {
console.log(val, "节能数据");
let dataX = [];
let dataY = [];
val.values.forEach((item, index) => {
dataX.push(item.dateDetail);
dataY.push(item.val);
});
var myChart = this.$echarts.init(
document.getElementById("energyEcharts")
);
@ -939,7 +1195,7 @@ export default {
show: false,
data: [
{
name: "线损",
name: "用电",
itemStyle: {
color: "rgb(13,219,207)",
},
@ -951,7 +1207,7 @@ export default {
textStyle: {
//文字样式
color: "#b4c9d1",
fontSize: "0.5rem",
fontSize: "0.6rem",
},
top: "4%",
// left: "13%",
@ -982,7 +1238,7 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.5rem",
fontSize: "0.6rem",
},
//x轴线
splitLine: {
@ -994,7 +1250,7 @@ export default {
},
},
// boundaryGap: false,
data: ["x1", "x2", "x", "x4", "x5"],
data: dataX,
},
],
yAxis: [
@ -1003,7 +1259,7 @@ export default {
nameTextStyle: {
//y轴上方单位的颜色
color: "#fff",
fontSize: "0.5rem",
fontSize: "0.6rem",
},
type: "value",
axisTick: {
@ -1025,13 +1281,13 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: "0.5rem",
fontSize: "0.6rem",
},
},
],
series: [
{
name: "线损",
name: "用电",
type: "line",
smooth: 0.6,
minInterval: 1,
@ -1091,7 +1347,7 @@ export default {
// global: false, // 缺省为 false
// },
// },
data: [32, 31, 43, 52, 54],
data: dataY,
},
],
};
@ -1212,7 +1468,7 @@ export default {
}
}
.leftTwo {
height: 25%;
height: 30%;
width: 100%;
.warning {
height: calc(100% - 25%);
@ -1420,6 +1676,9 @@ export default {
display: flex;
align-items: center;
}
/deep/ .el-select-dropdown__wrap {
max-height: 171px;
}
}
.pickerChange {
width: 23%;
@ -1498,7 +1757,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;

11
src/views/operationMaintenance.vue
View File

@ -27,7 +27,7 @@
</div>
</div>
<div class="workCount">
<div style="font-size: 0.8rem">本月工单数</div>
<div style="font-size: 0.9rem">本月工单数</div>
<div id="workOrderEcharts"></div>
</div>
<div class="workList">
@ -250,7 +250,7 @@ export default {
label: {
show: true,
color: "#fff",
fontSize: "0.8rem",
fontSize: "0.9rem",
fontWeight: 600,
backgroundColor: "rgba(0, 0, 0, 0)",
},
@ -337,7 +337,7 @@ export default {
show: true,
textStyle: {
color: "#FFFFFF",
fontSize: "0.8rem",
fontSize: "0.9rem",
},
position: "top",
formatter: function (p) {
@ -389,10 +389,11 @@ export default {
display: flex;
justify-content: center;
align-items: center;
font-size: 0.7rem;
.todayCount {
background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
background-size: 100% 100%;
width: 62%;
width: 75%;
height: 82%;
color: #fff;
display: flex;
@ -556,7 +557,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;

200
src/views/security.vue
View File

@ -3,8 +3,8 @@
<div class="left">
<div class="leftOne">
<div class="title">安防统计数据</div>
<div class="security">
<img src="../assets/images/anFangAc.png" class="securityImg"/>
<!-- <div class="security"> -->
<!-- <img src="../assets/images/anFangAc.png" class="securityImg"/>
<div class="securitySupervision">安防监管</div>
<div class="securityCount">
<div
@ -15,9 +15,48 @@
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</div>
<!-- <img src="../"/> -->
</div>
</div>
<img src="../assets/images/anFangAc.png" class="securityImg"/>
<div class="securitySupervision">安防监管</div>
<div class="securityCount">
<div
class="securityList"
v-for="(item, index) in securityList"
:key="index"
>
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</div>
</div> -->
<el-carousel
class="security"
:autoplay="true"
trigger="click"
:interval="7000"
>
<el-carousel-item
v-for="(item, index) in securityList"
: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>
</div>
</el-carousel-item>
</el-carousel>
<!-- </div> -->
</div>
<div class="leftTwo">
<div class="title" style="height: 8%">预警视频监控联动</div>
@ -123,7 +162,7 @@
"
>设备内容:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.content }}</span
>{{ item.position }}</span
></span
>
<span
@ -154,6 +193,8 @@ export default {
return {
securityList: [
{
tit:'摄像头监管',
security:[{
name: "",
count: "",
},
@ -162,21 +203,52 @@ export default {
count: "609",
},
{
name: "在线数量",
name: "摄像头在线数量",
count: "602",
},
{
name: "离线数量",
name: "摄像头离线数量",
count: "7",
},
{
name: "报警数",
name: "摄像头报警数",
count: "0",
},
{
name: "昨日报警数",
name: "摄像头昨日报警数",
count: "0",
},
]
},
{
tit:'门禁监管',
security:[{
name: "",
count: "",
},
{
name: "门禁总数",
count: "609",
},
{
name: "门禁在线数量",
count: "602",
},
{
name: "门禁离线数量",
count: "7",
},
{
name: "门禁今日报警数",
count: "0",
},
{
name: "门禁昨日报警数",
count: "0",
},
]
}
],
warnCameraList: [
{
@ -229,31 +301,34 @@ export default {
id: "1",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "306门禁故障",
position: "306门禁故障",
status: "已解除",
},
{
id: "2",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "201门禁故障",
position: "201门禁故障",
status: "已解除",
},
{
id: "3",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "206门禁故障",
position: "206门禁故障",
status: "已解除",
},
{
id: "4",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "106门禁故障",
position: "106门禁故障",
status: "已解除",
},
],
alarmFirstLevel:[],
alarmSecondLevel:[],
alarmThirdLevel:[],
};
},
mounted() {
@ -263,13 +338,37 @@ export default {
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)
},
},
methods: {
//获取昨天今天的报警数量
getAlarmCount(){
getSecurityAlarmCount().then((res)=>{
this.securityList[4].count = res.data.data.TodayCount
this.securityList[5].count = res.data.data.YesterdayCount
this.securityList[0].security[4].count = res.data.data.TodayCount
this.securityList[0].security[5].count = res.data.data.YesterdayCount
})
},
videoChange(index) {
@ -289,7 +388,7 @@ export default {
GetLevelAlarm(params).then((res) => {
let icon = null
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 1) {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png")
}else{
@ -299,8 +398,11 @@ export default {
return {
icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
position: res.data.data[index].DeviceType,
status: res.data.data[index].AlarmLevel,
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,
};
});
});
@ -314,7 +416,7 @@ export default {
GetLevelAlarm(params).then((res) => {
let icon = null
this.policeList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[index].Status == 1) {
if (res.data.data[index].Status == 0) {
res.data.data[index].Status = "未处理";
icon = require("../assets/images/jieNengImg/warnWhite.png")
}else{
@ -324,21 +426,59 @@ export default {
return {
icon: icon,
time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
content: res.data.data[index].DeviceType,
status: res.data.data[index].AlarmLevel,
DeviceType: res.data.data[index].DeviceType,
position: res.data.data[index].AlarmName,
// status: res.data.data[index].AlarmLevel,
status: res.data.data[index].Status,
};
});
});
},
//获取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")
}
if (val[index].AlarmLevel == 1) {
val[index].AlarmLevel = "一级";
} else if (val[index].AlarmLevel == 2) {
val[index].AlarmLevel = "二级";
} 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,
};
});
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]);
}
}
},
},
watch: {},
components: {},
};
</script>
<style lang="less" scoped>
@fontsize: 0.7rem;
@fontsize: 0.9rem;
.securityMain {
width: 100%;
height: 100%;
@ -375,6 +515,13 @@ export default {
justify-content: flex-end;
flex-wrap: wrap;
position: relative;
/deep/ .el-carousel__container {
height: 100%;
width: 100%;
}
/deep/ .el-carousel__indicators--horizontal {
display: none;
}
.securityImg{
position: absolute;
left:10%;
@ -386,6 +533,7 @@ export default {
background-size: 100% 100%;
color: #fff;
font-size: @fontsize;
margin-left: 50%;
}
.securityCount {
width: 100%;
@ -526,7 +674,7 @@ export default {
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 12%;
@ -538,7 +686,7 @@ export default {
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.8rem;
font-size: 0.9rem;
display: flex;
align-items: center;
padding-left: 5%;

16
vue.config.js
View File

@ -22,6 +22,22 @@ module.exports = {
'^/api':'',
}
},
'/ecs-server': { //代理的名字
target:'http://138.227.111.208:8002/ecs-server/',
ws: true,
changeOrigin: true,
pathRewrite:{
'^/ecs-server':'',
}
},
'/video': { //代理的名字
target:'http://172.16.1.253:12308/api/',
ws: true,
changeOrigin: true,
pathRewrite:{
'^/video':'',
}
},
}
},
// css: {