能管模拟数据

src/views/bigScreen/index_enm.vue

@@ -170,8 +170,9 @@ export default {
       currentLightMesh: null,
       activeSection: 2,
       activeSectionName: '回转窑',
-      updateTime: '2023-08-17 16:00:00',
+      updateTime: '',
       basicOption: {
+        color: 'rgb(1,235,239)',
         backgroundColor: '',
         xAxis: {
           data: ['一月', '二月', '三月', '四月', '五月', '六月'],
@@ -225,6 +226,7 @@ export default {
       chart6Option: {},
       seriesData1: [0, 0, 0, 0, 0, 0],
       seriesData2: [0, 0, 0, 0, 0, 0],
+      seriesData2_2: [0, 0, 0, 0, 0, 0],
       seriesData3: [0, 0, 0, 0, 0, 0],
       seriesData3_2: [0, 0, 0, 0, 0, 0],
       seriesData4: [0, 0, 0, 0, 0, 0],
@@ -240,6 +242,62 @@ export default {
         水泥磨: { total: '0', elec: '0' },
         水泥包装: { total: '0', elec: '0' }
       },
+      sectionDatas: {
+        回转窑: {
+          elec_consume_unit: 29,
+          total_production: 2541,
+          coal_consume_unit: 105,
+          run_rate: 100,
+          charts_ele: [30, 29, 28, 31, 28, 16],
+          charts_prod: [2530, 2698, 2600, 2550, 2610, 2000],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        },
+        电石渣: {
+          elec_consume_unit: 4,
+          total_production: 1523,
+          coal_consume_unit: '',
+          run_rate: 100,
+          charts_ele: [3, 6, 4, 7, 5, 3],
+          charts_prod: [2015, 2698, 2904, 2550, 2610, 1200],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        },
+        原料磨: {
+          elec_consume_unit: 15,
+          total_production: 3230,
+          coal_consume_unit: '',
+          run_rate: 100,
+          charts_ele: [16, 15, 17, 15, 16, 10],
+          charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        },
+        煤磨: {
+          elec_consume_unit: 36,
+          total_production: 420,
+          coal_consume_unit: '',
+          run_rate: 100,
+          charts_ele: [35, 37, 36, 37, 36, 20],
+          charts_prod: [426, 445, 425, 449, 438, 265],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        },
+        水泥磨: {
+          elec_consume_unit: 35,
+          total_production: 3063,
+          coal_consume_unit: '',
+          run_rate: 100,
+          charts_ele: [35, 37, 36, 37, 36, 20],
+          charts_prod: [3204, 3500, 3385, 3461, 3359, 2000],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        },
+        水泥包装: {
+          elec_consume_unit: 2,
+          total_production: 1000,
+          coal_consume_unit: '',
+          run_rate: 100,
+          charts_ele: [1, 3, 2, 3, 2, 1],
+          charts_prod: [1052, 1462, 1268, 1389, 1156, 800],
+          charts_rate: [100, 100, 100, 100, 100, 100],
+        }
+      }
     }
   },
   mounted() {
@@ -253,6 +311,7 @@ export default {
     that.nowDay = day;
     that.query.year_s = year;
     that.query.month_s = month;
+    that.updateTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
     this.initDomStyle();
     this.$nextTick(() => {
       this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
@@ -305,6 +364,8 @@ export default {
       let item = arr[i] + '月'
       xAxisData.push(item);
     }
+    // 模拟数据
+    xAxisData = ['1.19', '1.20', '1.21', '1.22', '1.23', '1.24'];
     let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0];
     let start_time = year_s + '-' + month0 + '-01 10:00:00';
     that.arrMonth = arr;
@@ -316,6 +377,9 @@ export default {
     this.getSectionData();
     this.getDayData();
     this.init();
+    setTimeout(() => {
+      this.getMockData()
+    }, 1000);
   },
   beforeUnmount() {
     // 性能优化
@@ -366,10 +430,10 @@ export default {
         // 监听并处理error事件
         this.ws.onerror = function (error) {
           console.log('ws断开,尝试重连')
-          setTimeout(() => {
+          // setTimeout(() => {
-            this.ws = null;
+          //   this.ws = null;
-            this.init()
+          //   this.init()
-          }, 5000)
+          // }, 5000)
         }
       }
 
@@ -389,6 +453,37 @@ export default {
         return a[property] - b[property];
       }
     },
+    getMockData() {
+      let that = this;
+      this.factoryData = {
+        elec_consume: 10983267,
+        pcoal_consume: 9500,
+        water_consume: 12825,
+        cair_consume: 676534
+      }
+      this.mgroupValues = {
+        电石渣: { total: 1523, elec: 4 },
+        原料磨: { total: 3230, elec: 15 },
+        煤磨: { total: 420, elec: 36 },
+        回转窑: { total: 2541, elec: 29 },
+        水泥磨: { total: 3063, elec: 35 },
+        水泥包装: { total: 1000, elec: 2 }
+      }
+      this.sectionData = this.sectionDatas[this.activeSectionName]
+      setInterval(() => {
+        this.factoryData.elec_consume += Math.floor(Math.random() * 10);
+        this.factoryData.pcoal_consume += Math.floor(Math.random() * 10);
+        this.factoryData.water_consume += Math.floor(Math.random() * 10);
+        this.factoryData.cair_consume += Math.floor(Math.random() * 10);
+        this.sectionDatas[this.activeSectionName].total_production += Math.floor(Math.random() * 10);
+        this.sectionDatas[this.activeSectionName].elec_consume_unit += Math.floor(Math.random() * 1);
+        this.sectionDatas[this.activeSectionName].charts_ele[5] = this.sectionDatas[this.activeSectionName].elec_consume_unit;
+        this.sectionDatas[this.activeSectionName].charts_prod[5] = this.sectionDatas[this.activeSectionName].total_production;
+        let data = new Date();
+        that.updateTime = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate() + ' ' + data.getHours() + ':' + data.getMinutes() + ':' + data.getSeconds();
+      }, 10000)
+    },
+
     getFactoryData() {
       var that = this;
       that.$API.enm.enstat2.req(that.query).then((res) => {
@@ -420,6 +515,15 @@ export default {
         that.seriesData2 = seriesData2;
         that.seriesData3 = seriesData3;
         that.seriesData3_2 = seriesData3_2;
+        // 模拟数据
+        that.seriesData1 = [303468, 303524, 312095, 305684, 307468, 223420]
+        that.chart1Option.yAxis.min = 200000;
+        that.seriesData2 = [425, 430, 436, 430, 443, 340];
+        that.seriesData2_2 = [586, 560, 576, 555, 543, 205];
+        that.chart2Option.yAxis.min = 100;
+        that.seriesData3 = [20456, 24783, 21430, 22354, 25531, 15687];
+        // that.seriesData3 = [586, 560, 576, 555, 543, 205]
+        that.chart3Option.yAxis.min = 15000;
         that.initCharts();
       })
     },
@@ -446,6 +550,15 @@ export default {
         that.seriesData4 = seriesData4;
         that.seriesData5 = seriesData5;
         that.seriesData6 = seriesData6;
+        // 模拟数据
+        that.seriesData4 = this.sectionDatas.回转窑.charts_ele;
+        that.seriesData5 = this.sectionDatas.回转窑.charts_prod;
+        that.seriesData6 = this.sectionDatas.回转窑.charts_rate;
+        // that.chart4Option.yAxis.min = 200000;
+        // that.seriesData5 = [425, 430, 436, 430, 443, 340];
+        // that.chart5Option.yAxis.min = 300;
+        // that.seriesData6 = [586, 560, 576, 555, 543, 205]
+        // that.chart6Option.yAxis.min = 500;
         that.initCharts1();
       })
     },
@@ -487,23 +600,23 @@ export default {
       that.setChart('chart1', that.chart1Option);
       this.chart2Option = deepCopy(that.basicOption)
       this.chart2Option.series[0].type = 'line';
-      this.chart2Option.series[0].data = that.seriesData2;
+      this.chart2Option.series[1] = {
+        name: '工业水',
+        type: 'line',
+        barWidth: 15,
+        label: {
+          show: true,
+          position: 'top'
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: that.seriesData2_2
+      },
+        this.chart2Option.series[0].data = that.seriesData2;
       this.setChart('chart2', this.chart2Option);
       this.chart3Option = deepCopy(that.basicOption)
       this.chart3Option.series = [
-        {
-          name: '工业水',
-          type: 'bar',
-          barWidth: 15,
-          label: {
-            show: true,
-            position: 'top'
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: that.seriesData3
-        },
         {
           name: '压缩空气',
           type: 'bar',
@@ -511,7 +624,7 @@ export default {
           emphasis: {
             focus: 'series'
           },
-          data: that.seriesData3_2
+          data: that.seriesData3
         }]
       this.setChart('chart3', this.chart3Option);
     },
@@ -522,7 +635,8 @@ export default {
       }
       that.basicOption.xAxis.data = that.xAxisData;
       this.chart4Option = deepCopy(that.basicOption)
-      this.chart4Option.series[0].type = 'line';
+      this.chart4Option.series[0].type = 'bar';
+      this.chart4Option.series[0].barWidth = 20;
       this.chart4Option.series[0].data = that.seriesData4;
       this.setChart('chart4', this.chart4Option);
       this.chart5Option = deepCopy(that.basicOption)
@@ -530,7 +644,8 @@ export default {
       this.chart5Option.series[0].data = that.seriesData5;
       this.setChart('chart5', this.chart5Option);
       this.chart6Option = deepCopy(that.basicOption)
-      this.chart6Option.series[0].type = 'line';
+      this.chart6Option.series[0].type = 'bar';
+      this.chart6Option.series[0].barWidth = 20;
       this.chart6Option.series[0].data = that.seriesData6;
       this.setChart('chart6', this.chart6Option);
     },
@@ -833,10 +948,11 @@ export default {
                   BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
                   BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
                 }
-                let dataViewName = rect1.name.split('_')[0] + '_data_view';
+                // let dataViewName = rect1.name.split('_')[0] + '_data_view';
-                that.getMgroupChartData(dataViewName);
+                let dataViewName = rect1.name.split('_')[0];
                 that.activeSectionName = dataViewName;
                 that.activeSection = 2;
+                that.getMgroupChartData(dataViewName);
                 let dataView = advancedTexture.getControlByName(dataViewName);
                 if (dataView) {
                   // // 在这里进行矩形的操作
@@ -895,13 +1011,13 @@ export default {
                     rc.text = "单位产品电耗：";
                   } else if (j == 1 && i == 0) {
                     // rc.text = that.mgroupValues[value].total;
-                    rc.text = "123";
+                    rc.text = that.mgroupValues[value].total;
                     rc.width = "80px";
                     rc.fontSize = '18px';
                     rc.color = "rgb(44,237,255)";
                   } else if (j == 1 && i == 1) {
                     // rc.text = that.mgroupValues[value].total;
-                    rc.text = "456";
+                    rc.text = that.mgroupValues[value].elec;
                     rc.width = "80px";
                     rc.fontSize = '18px';
                     rc.color = "rgb(44,237,255)";
@@ -1071,6 +1187,10 @@ export default {
         that.seriesData4 = seriesData4;
         that.seriesData5 = seriesData5;
         that.seriesData6 = seriesData6;
+        //模拟数据
+        that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele;
+        that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod;
+        that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate;
         that.initCharts1();
         const element_main = document.querySelector('.right_main');
         element_main.classList.add('animate__animated', 'animate__fadeIn');
@@ -1091,30 +1211,39 @@ export default {
 
     },
     getMgroupChartData(name) {
-      var that = this;
+      let that = this;
-      let obj = {};
+      this.sectionData = this.sectionDatas[this.activeSectionName];
-      obj.type = 'month_s';
+      //模拟数据
-      obj.start_time = that.start_time;
+      that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele;
-      obj.end_time = that.end_time;
+      that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod;
-      obj.mgroup__name = name;
+      that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate;
-      obj.page = 0;
+      that.initCharts1();
-      this.$API.enm.enstat.req(obj).then((res) => {
+      console.log(this.sectionData, this.activeSectionName)
-        let list0 = res.sort(this.compare('month_s'));
+      // 模拟数据
-        let list = list0.sort(this.compare('year_s'));
+      // var that = this;
-        let seriesData4 = [0, 0, 0, 0, 0, 0],
+      // let obj = {};
-          seriesData5 = [0, 0, 0, 0, 0, 0],
+      // obj.type = 'month_s';
-          seriesData6 = [0, 0, 0, 0, 0, 0];
+      // obj.start_time = that.start_time;
-        list.forEach(item => {
+      // obj.end_time = that.end_time;
-          let index = that.arrMonth.indexOf(item.month_s);
+      // obj.mgroup__name = name;
-          seriesData4[index] = Number(item.elec_consume_unit)
+      // obj.page = 0;
-          seriesData5[index] = Number(item.total_production)
+      // this.$API.enm.enstat.req(obj).then((res) => {
-          seriesData6[index] = Number(item.run_rate)
+      //   let list0 = res.sort(this.compare('month_s'));
-        })
+      //   let list = list0.sort(this.compare('year_s'));
-        that.seriesData4 = seriesData4;
+      //   let seriesData4 = [0, 0, 0, 0, 0, 0],
-        that.seriesData5 = seriesData5;
+      //     seriesData5 = [0, 0, 0, 0, 0, 0],
-        that.seriesData6 = seriesData6;
+      //     seriesData6 = [0, 0, 0, 0, 0, 0];
-        that.initCharts1();
+      //   list.forEach(item => {
-      })
+      //     let index = that.arrMonth.indexOf(item.month_s);
+      //     seriesData4[index] = Number(item.elec_consume_unit)
+      //     seriesData5[index] = Number(item.total_production)
+      //     seriesData6[index] = Number(item.run_rate)
+      //   })
+      //   that.seriesData4 = seriesData4;
+      //   that.seriesData5 = seriesData5;
+      //   that.seriesData6 = seriesData6;
+      //   that.initCharts1();
+      // })
     },
   },
   unmounted() {
@@ -1245,7 +1374,7 @@ header {
 
 .panel_value {
   padding-left: 1em;
-  font-size: 22px;
+  font-size: 20px;
   font-weight: bold;
   text-align: right;
 }
@@ -1253,7 +1382,7 @@ header {
 .panel_unit {
   right: 5px;
   color: #aebfe9;
-  font-size: 16px;
+  font-size: 12px;
   text-align: right;
   position: absolute;
 }
@@ -1314,4 +1443,5 @@ header {
   text-align: center;
   background: url(./../../../public/img/menu_active.png) no-repeat;
   background-size: 100%;
-}</style>
+}
+</style>