-
+
装置总数
{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}
-
+
在线数量
{{
termDataNum.onlineNum ? termDataNum.onlineNum : 0
}}
-
+
离线率
{{
@@ -29,7 +29,7 @@
>
- 在线率
+ 在线率
{{
termDataNum.onlinePercent
@@ -46,39 +46,7 @@
-
+
- 导出
+
+
@@ -145,6 +118,7 @@ export default {
dialogTableVisible: false,
onLineData: [],
exportLoading: false,
+ paramsLineVal: "",
};
},
created() {
@@ -153,8 +127,6 @@ export default {
mounted() {
this.getDateTime(); //获取当前时间
this.getTermData();
- this.getWeekAlarmStatistics();
- this.getTodayAlarmStatistics();
},
watch: {
"$store.state.collapse"(val) {
@@ -163,17 +135,19 @@ export default {
//echarts得重绘方法
this.myChart1.resize();
this.myChart2.resize();
- this.myChart3.resize();
- this.myChart4.resize();
}, 300);
},
},
methods: {
//查看在线列表
- handleLook() {
+ handleLook(val) {
+ console.log(val);
+ this.paramsLineVal = val;
this.dialogTableVisible = true;
this.exportLoading = true;
- getOnlineTerminalList()
+ getOnlineTerminalList({
+ type: val,
+ })
.then((res) => {
console.log(res);
this.onLineData = res.data;
@@ -183,14 +157,14 @@ export default {
.catch((err) => {});
},
//导出
- handleExport() {
- window.location.href = "/api/api/getOnlineTerminalListExcel";
+ handleExport(val) {
+ console.log(val);
+ window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
},
// 隐患数量统计
changedate() {
console.log(this.dateValue.getTime());
this.dateValue = this.dateValue.getTime();
- this.getWeekAlarmStatistics();
},
// 隐患分类统计
changedate2() {
@@ -220,36 +194,14 @@ export default {
})
.catch((err) => {});
},
- //获取7天告警统计
- getWeekAlarmStatistics() {
- this.barloading = true;
- getWeekAlarmStatistics({ starttime: this.dateValue })
- .then((res) => {
- console.log(res);
- this.weekData = res.data.list;
- this.barloading = false;
- this.getEchart3();
- })
- .catch((err) => {});
- },
- //获取当天告警分类统计
- getTodayAlarmStatistics() {
- this.pie2loading = true;
- getTodayAlarmStatistics({ starttime: this.dateValue2 })
- .then((res) => {
- console.log(res);
- this.todayAlarm = res.data.list;
- this.pie2loading = false;
- this.getEchart4();
- })
- .catch((err) => {});
- },
+
//装置数量统计
getEchart2() {
this.$nextTick(() => {
console.log(this.termDataNum);
- this.$echarts.init(document.getElementById("echart2")).dispose();
- this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
+ let that = this;
+ that.$echarts.init(document.getElementById("echart2")).dispose();
+ that.myChart2 = this.$echarts.init(document.getElementById("echart2"));
let option = {
// title: {
// text: "装置在线统计",
@@ -265,14 +217,12 @@ export default {
top: 20,
bottom: 20,
},
-
series: [
{
type: "pie",
- // minAngle: 45, //最小角度
- // startAngle: 180, //起始角度
radius: ["40%", "70%"],
avoidLabelOverlap: false,
+
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
@@ -280,14 +230,14 @@ export default {
},
label: {
show: true,
- fontSize: 12,
- fontWeight: "normal",
+ fontSize: 16,
+ fontWeight: "bold",
formatter: "{b}\n{d}%",
},
emphasis: {
label: {
show: true,
- fontSize: 12,
+ fontSize: 26,
fontWeight: "bold",
formatter: "{b}\n{d}%",
},
@@ -296,161 +246,23 @@ export default {
show: true,
},
data: [
- { value: this.termDataNum.onlineNum, name: "在线" },
- { value: this.termDataNum.offlineNum, name: "离线" },
+ { value: that.termDataNum.onlineNum, name: "在线" },
+ { value: that.termDataNum.offlineNum, name: "离线" },
],
},
],
};
- this.myChart2.setOption(option);
+ that.myChart2.setOption(option);
window.addEventListener("resize", () => {
- this.myChart2.resize();
+ that.myChart2.resize();
});
- });
- },
- //获取7天告警统计
- getEchart3() {
- this.$nextTick(() => {
- this.$echarts.init(document.getElementById("echart3")).dispose();
- this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
- let option = {
- // title: {
- // text: "隐患分类统计",
- // },
- color: ["#169e8c"],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- grid: {
- //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
- top: "10%",
- left: "10%",
- right: "10%",
- bottom: "13%",
- },
- xAxis: {
- type: "category",
- data: this.weekData.map((x) => {
- return this.$moment(x.date).format("MM-DD");
- }),
- axisTick: {
- alignWithLabel: true,
- },
- },
- yAxis: { type: "value" },
- series: [
- {
- name: "告警数量",
- data: this.weekData.map((x) => {
- return x.num;
- }),
- type: "bar",
- showBackground: true,
- backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
- },
- ],
- };
- this.myChart3.setOption(option);
- window.addEventListener("resize", () => {
- this.myChart3.resize();
- });
- });
- },
- //获取当天告警分类统计
- getEchart4() {
- this.$nextTick(() => {
- this.$echarts.init(document.getElementById("echart4")).dispose();
- this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
- let arr = [];
- this.todayAlarm.forEach((element) => {
- arr.push({
- value: element.num, //将数组的num值赋给value
- name: element.enname, //将数组的name值赋给name
- });
- });
- let option = {
- // title: {
- // text: "隐患分类统计",
- // },
- // tooltip: {
- // trigger: "axis",
- // axisPointer: {
- // type: "shadow",
- // },
- // },
- // xAxis: {
- // type: "category",
- // data: this.todayAlarm.map((item) => {
- // return item.enname;
- // }),
- // axisTick: {
- // alignWithLabel: true,
- // },
- // },
- // yAxis: { type: "value" },
- // series: [
- // {
- // name: "告警数量",
- // data: this.todayAlarm.map((item) => {
- // return item.num;
- // }),
- // type: "bar",
- // showBackground: true,
- // backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
- // },
- // ],
-
- // title: {
- // text: "装置在线统计",
- // },
- tooltip: {
- trigger: "item",
- },
- legend: {
- type: "scroll",
- orient: "vertical",
- right: 10,
- top: 20,
- bottom: 20,
- },
- series: [
- {
- type: "pie",
- radius: ["40%", "70%"],
- avoidLabelOverlap: false,
-
- itemStyle: {
- borderRadius: 10,
- borderColor: "#fff",
- borderWidth: 2,
- },
- label: {
- show: true,
- fontSize: 14,
- fontWeight: "normal",
- formatter: "{b}\n{d}%",
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 14,
- fontWeight: "normal",
- formatter: "{b}\n{d}%",
- },
- },
- labelLine: {
- show: true,
- },
- data: arr,
- },
- ],
- };
- this.myChart4.setOption(option);
- window.addEventListener("resize", () => {
- this.myChart4.resize();
+ that.myChart2.on("click", function (params) {
+ console.log(params);
+ if (params.name == "在线") {
+ that.handleLook(1);
+ } else {
+ that.handleLook(0);
+ }
});
});
},
@@ -507,6 +319,9 @@ export default {
flex-direction: column;
justify-content: space-around;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ &:hover {
+ cursor: pointer;
+ }
&:first-child {
&:hover {
cursor: pointer;
diff --git a/vue.config.js b/vue.config.js
index 040028d..0c32024 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -29,11 +29,11 @@ module.exports = defineConfig({
proxy: {
"/api": {
//表示拦截以/api开头的请求路径
- target: "http://47.96.238.157:8093", //阿里云服务器环境
- //target: "http://180.166.218.222:40080", //dell
+ // target: "http://47.96.238.157:8093", //阿里云服务器环境
+ target: "http://180.166.218.222:40080", //dell
changOrigin: true, //是否开启跨域
pathRewrite: {
- "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+ "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
},
},
},
-
+