代码提交
This commit is contained in:
parent
8c38a2c9da
commit
6ace912f97
|
|
@ -25,3 +25,33 @@ export const getAlarmStatistics = (params) => {
|
|||
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
|
||||
})
|
||||
};
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
<div class="leftOne">
|
||||
<div class="title">
|
||||
设备用能统计数据
|
||||
<img src="../assets/images/moreBg.png" @click="equipmentMore" />
|
||||
<!-- <img src="../assets/images/moreBg.png" @click="equipmentMore" /> -->
|
||||
<img src="../assets/images/moreBg.png" />
|
||||
</div>
|
||||
<!-- <div
|
||||
class="equipmentEnergy"
|
||||
|
|
@ -116,11 +117,11 @@
|
|||
</div>
|
||||
<div class="right">
|
||||
<div class="rightOne">
|
||||
<div class="title">能耗计量同比分析</div>
|
||||
<div class="title">能耗计量环比分析</div>
|
||||
<div id="calculateEcharts"></div>
|
||||
</div>
|
||||
<div class="rightThree">
|
||||
<div class="title" style="height: 16%">能耗计量环比分析</div>
|
||||
<div class="title" style="height: 16%">能耗计量同比分析</div>
|
||||
<!-- <div class="video">
|
||||
<img
|
||||
src="../assets/images/camera.png"
|
||||
|
|
@ -182,7 +183,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { GetLevelAlarm } from "../api/index";
|
||||
import {
|
||||
GetLevelAlarm,
|
||||
getAllDevices,
|
||||
getRealData,
|
||||
getAreaList,
|
||||
} from "../api/index";
|
||||
export default {
|
||||
name: "energySaving",
|
||||
data() {
|
||||
|
|
@ -382,15 +388,146 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
//轮播八个一页
|
||||
for (let i = 0; i < this.equipmentList.length; i += 8) {
|
||||
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
|
||||
}
|
||||
this.calculateEcharts();
|
||||
// this.calculateEcharts();
|
||||
this.getQOQ()
|
||||
this.getYOY()
|
||||
this.calculateEchartsTwo();
|
||||
window.createMqtt = this.createMqtt();
|
||||
this.changeWarn(0)
|
||||
this.changeWarn(0);
|
||||
this.getAllDevicesInfo();
|
||||
},
|
||||
methods: {
|
||||
//获取能耗计量环比分析
|
||||
getQOQ() {
|
||||
let dataList = {
|
||||
buildingId: "79",
|
||||
customerId: "12345678",
|
||||
date: this.$moment().format("YYYYMM"),
|
||||
dateType: "2",
|
||||
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.calculateEcharts(resData.child)
|
||||
getAreaList(dataList).then((res)=>{
|
||||
this.calculateEcharts(res.data.data.child);
|
||||
})
|
||||
},
|
||||
//获取能耗计量同比分析
|
||||
getYOY() {
|
||||
let dataList = {
|
||||
buildingId: "79",
|
||||
customerId: "12345678",
|
||||
date: this.$moment().format("YYYYMM"),
|
||||
dateType: "2",
|
||||
meterType: "1",
|
||||
pbuildingId: "-1",
|
||||
};
|
||||
//模拟数据
|
||||
// let resData = {
|
||||
// values: [
|
||||
// {
|
||||
// dateDetail: "13",
|
||||
// val: 380.29,
|
||||
// tqVal: 0,
|
||||
// hqVal: 0,
|
||||
// },
|
||||
// {
|
||||
// dateDetail: "14",
|
||||
// val: 0.18,
|
||||
// tqVal: 0,
|
||||
// hqVal: 380.29,
|
||||
// },
|
||||
// {
|
||||
// dateDetail: "26",
|
||||
// val: 70.31,
|
||||
// tqVal: 0,
|
||||
// hqVal: 0.18,
|
||||
// },
|
||||
// {
|
||||
// dateDetail: "27",
|
||||
// val: 12.02,
|
||||
// tqVal: 0,
|
||||
// hqVal: 70.31,
|
||||
// },
|
||||
// {
|
||||
// dateDetail: "28",
|
||||
// val: 18.3,
|
||||
// tqVal: 0,
|
||||
// hqVal: 12.02,
|
||||
// },
|
||||
// {
|
||||
// dateDetail: "29",
|
||||
// val: 7.88,
|
||||
// tqVal: 0,
|
||||
// hqVal: 18.3,
|
||||
// },
|
||||
// ],
|
||||
// child: [
|
||||
// {
|
||||
// val: 489.02,
|
||||
// buildName: "江北新区法院",
|
||||
// buildId: 79,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// this.calculateEchartsTwo(resData.values)
|
||||
//接口调用
|
||||
getAreaList(dataList).then((res)=>{
|
||||
this.calculateEcharts(res.data.data.values);
|
||||
})
|
||||
},
|
||||
//mqtt订阅数据
|
||||
createMqtt() {
|
||||
//创建链接，接收数据
|
||||
|
|
@ -425,6 +562,246 @@ export default {
|
|||
break;
|
||||
}
|
||||
},
|
||||
//获取所有设备信息
|
||||
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) => {
|
||||
this.equipmentList = Object.keys(res.data.dataResults).map(
|
||||
(item, index) => {
|
||||
return {
|
||||
name: res.data.dataResults[index].metername,
|
||||
code: res.data.dataResults[index].metercode,
|
||||
};
|
||||
}
|
||||
);
|
||||
res.data.dataResults.forEach((item, index) => {
|
||||
allDevicesCode.push(item.metercode);
|
||||
getRealData({
|
||||
metercodes: allDevicesCode,
|
||||
}).then((response) => {
|
||||
console.log(response, "实时设备数据");
|
||||
for (let i = 0; i < this.equipmentList.length; i++) {
|
||||
response.data.dataResults.forEach((is, k) => {
|
||||
if (this.equipmentList[i].code == is.id) {
|
||||
this.equipmentList.push({
|
||||
data: item.idata,
|
||||
name: this.equipmentList[i].name,
|
||||
value: "",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log(this.equipmentList, "设备用能统计");
|
||||
//分页
|
||||
for (let i = 0; i < this.equipmentList.length; i += 8) {
|
||||
this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
|
||||
}
|
||||
});
|
||||
},
|
||||
//预警点击
|
||||
changeWarn(index) {
|
||||
this.equipmentBtnAc = index;
|
||||
|
|
@ -491,7 +868,8 @@ export default {
|
|||
};
|
||||
});
|
||||
},
|
||||
calculateEcharts() {
|
||||
calculateEcharts(val) {
|
||||
// console.log(val,'=================s');
|
||||
let imgSrc = "/img/car.png";
|
||||
let chartData = [
|
||||
{
|
||||
|
|
@ -502,15 +880,10 @@ export default {
|
|||
value: 24,
|
||||
name: "辅楼",
|
||||
},
|
||||
// {
|
||||
// value: 13,
|
||||
// name: "插座",
|
||||
// },
|
||||
// {
|
||||
// value: 48,
|
||||
// name: "特种",
|
||||
// },
|
||||
];
|
||||
chartData = Object.keys(val).map((item,index)=>{
|
||||
return {value:val[item].val,name:val[item].buildName}
|
||||
})
|
||||
let colorList = ["red", "rgb(255,122,0)"];
|
||||
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
let gap = (1 * sum) / 100;
|
||||
|
|
@ -700,202 +1073,158 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
calculateEchartsTwo() {
|
||||
let imgSrc = "/img/car.png";
|
||||
let chartData = [
|
||||
{
|
||||
value: 42,
|
||||
name: "主楼",
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
name: "辅楼",
|
||||
},
|
||||
];
|
||||
let colorList = ["rgb(0,213,243)", "rgb(219,241,243)"];
|
||||
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
let gap = (1 * sum) / 100;
|
||||
let pieData1 = [];
|
||||
let pieData2 = [];
|
||||
let gapData = {
|
||||
name: "",
|
||||
value: gap,
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
};
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
// 第一圈数据
|
||||
pieData1.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
});
|
||||
pieData1.push(gapData);
|
||||
|
||||
// 第二圈数据
|
||||
pieData2.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
opacity: 0.1,
|
||||
},
|
||||
});
|
||||
pieData2.push(gapData);
|
||||
}
|
||||
calculateEchartsTwo(val) {
|
||||
// console.log(val,'----------------');
|
||||
let dataX = []
|
||||
let tqData = []
|
||||
let bqData = []
|
||||
let tbData = []
|
||||
val.forEach((item,index) => {
|
||||
dataX.push(item.dateDetail)
|
||||
tqData.push(item.tqVal)
|
||||
bqData.push(item.val)
|
||||
tbData.push(item.tqVal)
|
||||
});
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("calculateEchartsTwo")
|
||||
);
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: "rgba(17,95,234,0.5)",
|
||||
textStyle: {
|
||||
color: "#F0F0F0",
|
||||
},
|
||||
},
|
||||
//你的代码
|
||||
grid: { containLabel: true, top: 30, right: 15, bottom: 0, left: 15 },
|
||||
legend: {
|
||||
show: true,
|
||||
right: "10%",
|
||||
top: "center",
|
||||
icon: "rect",
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: "auto",
|
||||
rich: {
|
||||
name: {
|
||||
padding: [0, 10, 0, 8],
|
||||
color: "auto",
|
||||
fontSize: "0.7rem",
|
||||
},
|
||||
percent: {
|
||||
padding: [0, 0, 0, 8],
|
||||
color: "auto",
|
||||
fontSize: "0.7rem",
|
||||
},
|
||||
},
|
||||
data: ["同期", "本期", "同比"],
|
||||
textStyle: { fontSize: "0.7rem", color: "#ffffff" },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" },
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: dataX,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#ffffff", type: "solid" },
|
||||
},
|
||||
formatter: (name) => {
|
||||
let item = chartData.find((i) => {
|
||||
return i.name == name;
|
||||
});
|
||||
let p = ((item.value / sum) * 100).toFixed(0);
|
||||
return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
fontSize: "0.7rem",
|
||||
color: "#ffffff",
|
||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||
},
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: imgSrc,
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
top: "middle",
|
||||
left: "25%",
|
||||
scale: [1.5, 1.5],
|
||||
yAxis: [
|
||||
{
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: "0.7rem",
|
||||
color: "#ffffff",
|
||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||
formatter: "{value}%",
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
top: 35,
|
||||
right: 30,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
color: colorList,
|
||||
splitLine: { show: false },
|
||||
},
|
||||
{
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: "0.7rem",
|
||||
color: "#ffffff",
|
||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||
formatter: "{value} %",
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "消息来源",
|
||||
type: "pie",
|
||||
// roundCap: true,
|
||||
radius: ["70%", "80%"],
|
||||
center: ["30%", "50%"],
|
||||
// avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: pieData1,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "60%"],
|
||||
center: ["30%", "50%"],
|
||||
gap: 1.71,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
silent: true,
|
||||
data: pieData2,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
center: ["30%", "50%"],
|
||||
radius: [0, "45.6%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
name: "同期",
|
||||
type: "bar",
|
||||
barWidth: "25%",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(14,58,99, .5)",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(5,37,95,0.3)",
|
||||
color: "rgba(0,215,245,1)",
|
||||
},
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: "",
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: "rgba(0,215,245,1)",
|
||||
},
|
||||
],
|
||||
},
|
||||
data: tqData,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
detail: false,
|
||||
splitNumber: 10, //刻度数量
|
||||
radius: "65%", //图表尺寸
|
||||
center: ["30%", "50%"],
|
||||
startAngle: 0, //开始刻度的角度
|
||||
endAngle: -356, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
shadowBlur: 0,
|
||||
name: "本期",
|
||||
type: "bar",
|
||||
barWidth: "25%",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(14,58,99, .5)",
|
||||
},
|
||||
itemStyle: {
|
||||
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(3, 255, 150, 1)" },
|
||||
{ offset: 1, color: "rgba(0, 251, 255, 0)" },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(28,159,97,1)" },
|
||||
{ offset: 1, color: "rgba(28,214,108,0)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
width: 1,
|
||||
},
|
||||
length: 2,
|
||||
splitNumber: 3,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#194482",
|
||||
data: bqData,
|
||||
},
|
||||
{
|
||||
name: "同比",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: "#FFA600", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
// 渐变颜色
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255, 166, 0, 0.3)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 166, 0, 0.5)",
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 6,
|
||||
data: tbData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,12 +345,13 @@ export default {
|
|||
},
|
||||
{
|
||||
label: "日",
|
||||
value: "3",
|
||||
value: "1",
|
||||
},
|
||||
],
|
||||
cameraList: [], //摄像
|
||||
cameraBig: "",
|
||||
cameraBigShow: false,
|
||||
buildingList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -348,7 +360,8 @@ export default {
|
|||
this.warningTwo();
|
||||
this.maintenanceLeft();
|
||||
this.maintenanceRight();
|
||||
this.energyEcharts();
|
||||
// this.energyEcharts();
|
||||
this.selectDataList(this.selectDate);
|
||||
window.createMqtt = this.createMqtt();
|
||||
window.addEventListener("message", function (e) {
|
||||
let val = e.data.val;
|
||||
|
|
@ -378,8 +391,177 @@ export default {
|
|||
this.cameraList = camera;
|
||||
}, 1000);
|
||||
this.warnSelect(0);
|
||||
//获取建筑id
|
||||
this.getBuildingData();
|
||||
},
|
||||
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;
|
||||
|
|
@ -445,13 +627,13 @@ export default {
|
|||
//设备左
|
||||
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 = {
|
||||
|
|
@ -576,13 +758,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 = {
|
||||
|
|
@ -921,7 +1103,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 +1128,7 @@ export default {
|
|||
show: false,
|
||||
data: [
|
||||
{
|
||||
name: "线损",
|
||||
name: "用电",
|
||||
itemStyle: {
|
||||
color: "rgb(13,219,207)",
|
||||
},
|
||||
|
|
@ -994,7 +1183,7 @@ export default {
|
|||
},
|
||||
},
|
||||
// boundaryGap: false,
|
||||
data: ["x1", "x2", "x", "x4", "x5"],
|
||||
data: dataX,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -1031,7 +1220,7 @@ export default {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "线损",
|
||||
name: "用电",
|
||||
type: "line",
|
||||
smooth: 0.6,
|
||||
minInterval: 1,
|
||||
|
|
@ -1091,7 +1280,7 @@ export default {
|
|||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
data: [32, 31, 43, 52, 54],
|
||||
data: dataY,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1420,6 +1609,9 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/ .el-select-dropdown__wrap {
|
||||
max-height: 171px;
|
||||
}
|
||||
}
|
||||
.pickerChange {
|
||||
width: 23%;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,14 @@ module.exports = {
|
|||
'^/api':'',
|
||||
}
|
||||
},
|
||||
'/ecs-server': { //代理的名字
|
||||
target:'http://138.227.111.208:8002/ecs-server/',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/ecs-server':'',
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
// css: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue