生产动态图表优化

vue/src/components/basic/chart/chart-prod-dynamics.vue

@@ -49,6 +49,11 @@
         </a-col>
       </a-row>
     </a-form>
+    <div class="echarts-total">
+      <template v-for="(it) in getTotals()">
+        <span style="color: #2f54eb; font-weight: bold;">{{it.name}}</span>&nbsp;：&nbsp;{{it.total}}{{it.unit}} &nbsp;&nbsp;&nbsp;&nbsp;
+      </template>
+    </div>
     <div class="echart" :id="('chart-'+id)" :style="getChartStyle()"></div>
   </div>
 </template>
@@ -123,6 +128,7 @@
           endTime : this.formState.endTime
         });
         console.log("onFinish",this.datas);
+        this.getTotals();
         this.readerChart();
       },
       getChartStyle:function (){
@@ -134,12 +140,11 @@
           {label:'年', value:'year'}];
       },
       getTypeOptions:function (){
-        return [{label:'产油量', value:'oil'},
-          {label:'产水量', value:'water'},
-          {label:'产液量', value:'fluid'},
-          {label:'产气量', value:'gas'},
-          {label:'含水率', value:'watercut'},
-          //{label:'油井开井数', value:'5'}
+        return [{label:'产油量', value:'oil', unit:'万吨'},
+          {label:'产水量', value:'water', unit:'万吨'},
+          {label:'产液量', value:'fluid', unit:'万吨'},
+          {label:'产气量', value:'gas', unit:'立方米'},
+          {label:'含水率', value:'watercut', unit:'万吨'}
         ];
       },
       getTypes:function (){
@@ -147,6 +152,11 @@
           return this.formState.dataTypes.indexOf(item.value) >=0;
         });
       },
+      getTypeUnit:function ( label ){
+        return this.getTypeOptions().filter((item) => {
+          return item.label==label;
+        })[0].unit;
+      },
       getxDatas:function (){
         //根据后台数据生成需要显示的数据集
         let arys = (this.datas as any).map((item) => {
@@ -216,6 +226,22 @@
         console.log("getSeries",series);
         return series;
       },
+      getTotals:function (){
+        let totals = [] as any;
+        let showList = this.getTypes();
+        let yDatas = this.getyDatas();
+        for(let i=0;i< showList.length;i++){
+          let total = 0;
+          yDatas[i].forEach(it=>{ total+=it*1; });
+          totals.push({
+            name:showList[i].label,
+            total : total,
+            unit : this.getTypeUnit(showList[i].label)
+          });
+        }
+        console.log("getTotals",totals);
+        return totals;
+      },
       readerChart: function () {
         const option = {
           tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
@@ -234,4 +260,10 @@
   })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .echarts-total{
+    text-align: center;
+    line-height: 30px;
+    font-size: 14px;
+  }
+</style>