diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..4cee061 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -199,17 +199,25 @@ 数据滤网 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,8 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +459,8 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = true; } diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..4cee061 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -199,17 +199,25 @@ 数据滤网 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,8 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +459,8 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index 5c840f5..1b8e3cf 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -298,13 +298,6 @@ 设备总计

- @@ -316,10 +309,35 @@ alt class="previewOfSiteStatusTitleImg" /> - 项目设备省份地区统计 + 项目设备省份地区统计
-
+
+
+
+ +
+ {{ item.name }} + {{ item.count }} +
+
+
+
+
@@ -369,12 +387,6 @@
- @@ -599,6 +611,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -665,6 +678,8 @@ // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据,有就为false // 站点实时报警B map: "", @@ -872,23 +887,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -1077,106 +1087,22 @@ }; this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom,初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - console.log(this.myChart); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); - // console.log(box.scrollTop, con1.scrollHeight, box.offsetHeight); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1188,12 +1114,17 @@ if (this.timer) { clearInterval(this.timer); this.$refs.tooltip[index].handleShowPopper(); + } else if (this.timer2) { + this.$refs.tooltip2[index].handleShowPopper(); + clearInterval(this.timer2); } }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); }, //按照项目选择去联动地图 initPointToMap1(projectNo) { @@ -2748,12 +2679,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -3225,6 +3158,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3234,7 +3168,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3262,6 +3197,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..4cee061 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -199,17 +199,25 @@ 数据滤网 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,8 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +459,8 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index 5c840f5..1b8e3cf 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -298,13 +298,6 @@ 设备总计

- @@ -316,10 +309,35 @@ alt class="previewOfSiteStatusTitleImg" /> - 项目设备省份地区统计 + 项目设备省份地区统计
-
+
+
+
+ +
+ {{ item.name }} + {{ item.count }} +
+
+
+
+
@@ -369,12 +387,6 @@
- @@ -599,6 +611,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -665,6 +678,8 @@ // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据,有就为false // 站点实时报警B map: "", @@ -872,23 +887,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -1077,106 +1087,22 @@ }; this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom,初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - console.log(this.myChart); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); - // console.log(box.scrollTop, con1.scrollHeight, box.offsetHeight); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1188,12 +1114,17 @@ if (this.timer) { clearInterval(this.timer); this.$refs.tooltip[index].handleShowPopper(); + } else if (this.timer2) { + this.$refs.tooltip2[index].handleShowPopper(); + clearInterval(this.timer2); } }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); }, //按照项目选择去联动地图 initPointToMap1(projectNo) { @@ -2748,12 +2679,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -3225,6 +3158,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3234,7 +3168,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3262,6 +3197,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; diff --git a/src/util/projectSet.js b/src/util/projectSet.js index 1c4d729..9c61625 100644 --- a/src/util/projectSet.js +++ b/src/util/projectSet.js @@ -7,6 +7,7 @@ let nozzle = { getEquipStatistics: "/sys/equipinfo/getEquipStatistics", //项目设备总览 + getAreaStatistics: "/sys/stationbase/getAreaStatistics", //项目设备省份地区统计 statement: "/statistical/statement", //数据分析//数据总览 service: "/statistical/service", //数据分析//数据总览