李扬

ui/src/views/front/acrylicTank.vue

@@ -70,13 +70,6 @@ export default {
   props: ['dashboarddata'],
   data () {
     return {
-      dashboarddata: {
-        acrOne: null,
-        acrTwo: null,
-        acrThree: null,
-        acrFour: null,
-        acrZero: null,
-      },
       // 查询参数
       queryParams: {},
     }

ui/src/views/front/productProportion.vue

@@ -13,7 +13,9 @@
         </div>
       </div>
       <div>
-        <product-proportion />
+        <div>
+          <div id="productProportion" style="width:420px; height: 160px;"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -21,11 +23,122 @@
 
 <script>
 import productProportion from "../dashboard/productProportion";
-
+import resize from "@/views/dashboard/mixins/resize";
 export default {
+  props: ['dashboarddata'],
   components: {
     productProportion
   },
+  data() {
+    return {
+      chart: null,
+      // 查询参数
+      queryParams: {
+      },
+    };
+  },
+  mixins: [resize],
+  mounted() {
+    this.getList()
+    // 每隔30秒请求一次数据
+    window.setInterval(() => {undefined
+      setTimeout(() => {undefined
+        ///调取接口获取数据
+        this.getList();
+      }, 0)
+    }, 20000)
+  },
+  methods: {
+    /** 查询dashboard抓取数据列表 */
+    getList()
+    {
+        this.initChart();
+    },
+    initChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("productProportion"));
+
+      this.chart.setOption({
+        color: [
+          "#37a2da",
+          "#32c5e9",
+          "#9fe6b8",
+          "#ffdb5c",
+          "#ff9f7f",
+          "#fb7293",
+          "#e7bcf3",
+          "#8378ea"
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c} ({d}%)"
+        },
+        toolbox: {
+          show: true
+        },
+        calculable: true,
+        legend: [{
+          icon: "circle",
+          orient: 'vertical',
+          right: 62,
+          top: 40,
+          bottom: 20,
+          data: ["H2", "C2H4", "CH4", "C3H6"],
+          textStyle: {
+            color: "#fff"
+          }
+        }, {
+          icon: "circle",
+          orient: 'vertical',
+          right: -6,
+          top: 40,
+          bottom: 20,
+          data: ["Offgas", "LPG", "C4", "RPG"],
+          textStyle: {
+            color: "#fff"
+          }
+        }],
+        label: {
+          alignTo: 'edge',
+          formatter: '{name|{b}}\n{weight|{c} 吨({d}%)}',
+          minMargin: 5,
+          edgeDistance: 10,
+          lineHeight: 15,
+          rich: {
+            name: {
+              fontSize: 12,
+              color: '#ffffff'
+            },
+            weight: {
+              fontSize: 8,
+              color: '#ffffff'
+            }
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            radius: [10, 55],
+            roseType: "area",
+            center: ["36%", "50%"],
+            data: [
+              { value: this.dashboarddata.energyQingqi, name: "H2" },
+              { value: this.dashboarddata.energyYixi, name: "C2H4" },
+              { value: this.dashboarddata.energyJiawan, name: "CH4" },
+              { value: this.dashboarddata.energyBingxi, name: "C3H6" },
+              { value: this.dashboarddata.energyOffgas, name: "Offgas" },
+              { value: this.dashboarddata.energyLpg, name: "LPG" },
+              { value: this.dashboarddata.energyCsi, name: "C4" },
+              { value: this.dashboarddata.energyRpg, name: "RPG" }
+            ],
+          }
+        ]
+      });
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
 }
 </script>
 

ui/src/views/monitor/elec/index.vue

@@ -67,7 +67,21 @@
                   <material-balance :dashboarddata = 'dashboarddata'/>
                 </div>
                 <div>
-                  <chart-right/>
+                  <div id="app-container-Right">
+                    <div class="up">
+                      <annual-output :dashboarddata = 'dashboarddata'/>
+                    </div>
+                    <div class="middle">
+                      <dv-border-box-13>
+                        <energy-consumption :dashboarddata = 'dashboarddata'/>
+                      </dv-border-box-13>
+                    </div>
+                    <div class="down">
+                      <dv-border-box-13>
+                        <product-proportion :dashboarddata = 'dashboarddata'/>
+                      </dv-border-box-13>
+                    </div>
+                  </div>
                 </div>
             </div>
             <div class="right" style="width: 1270px">
@@ -162,6 +176,9 @@
   import ethyleneTank from "@/views/front/ethyleneTank";
   import acrylicTank from "@/views/front/acrylicTank";
   import productTank from "@/views/front/productTank";
+  import annualOutput from "@/views/front/annualOutput";
+  import energyConsumption from "@/views/front/energyConsumption";
+  import productProportion from "@/views/front/productProportion";
   import dayjs from "dayjs";
   import '@/common/flexible.js';
   import dataV from '@jiaminghi/data-view';
@@ -196,7 +213,10 @@
       napTank,
       ethyleneTank,
       acrylicTank,
-      productTank
+      productTank,
+      annualOutput,
+      energyConsumption,
+      productProportion
     },
     mounted() {
       this.cancelLoading();
@@ -215,7 +235,7 @@
           ///调取接口获取数据
           this.getList();
         }, 0)
-      }, 10000)
+      }, 20000)
     },
     beforeDestroy(){
       if(this.timer){