feat: 企微数据 - 首页 - 新增"总消耗&总回收"折线图模块

project/src/components/HomeData.vue

@@ -32,7 +32,7 @@
     </div>
     <div class="trendBox" v-loading="trends_loading">
       <div class="legendBox">
-        <div class="legendItem" v-for="(item,index) in legendList" :key="index" @click="changeLegend(item,index)">{{item.name}}
+        <div class="legendItem" v-for="(item,index) in legendList" :key="index" @click="changeLegend('legendList',item,index)">{{item.name}}
           <div :class="['checkbox',item.selectFlag?'checkbox_active':'']" :style="item.selectFlag?`background: ${item.color};
     border-color: ${item.color};`:''"><i class="el-icon-check"></i></div>
         </div>
@@ -47,6 +47,18 @@
       <div id="trend" style="width:100%;height:250px"></div>
       <noData class="noData" v-if="custTrends&&custTrends.length<=0&&!trends_loading"></noData>
     </div>
+    <!-- S 新增"总消耗"、"总回收"图表 -->
+    <div class="trendBox mt-10" v-loading="trends_loading">
+      <div class="legendBox">
+        <div class="legendItem" v-for="(item,index) in legendListNew" :key="index" @click="changeLegend('legendListNew',item,index)">{{item.name}}
+          <div :class="['checkbox',item.selectFlag?'checkbox_active':'']" :style="item.selectFlag?`background: ${item.color};
+    border-color: ${item.color};`:''"><i class="el-icon-check"></i></div>
+        </div>
+      </div>
+      <div id="trendNew" style="width:100%;height:250px"></div>
+      <noData class="noData" v-if="custTrendsNew&&custTrendsNew.length<=0&&!trends_loading"></noData>
+    </div>
+    <!-- E 新增"总消耗"、"总回收"图表 -->
     <div class="listBox" v-loading="custDataListLoading">
       <h3>企微列表</h3>
       <ux-grid ref="plxTable" :border="false" @row-click="()=>{return}" :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important' }}" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
@@ -70,6 +82,7 @@
 <script>
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import noData from "@/components/assembly/noData";
+import _lodash from 'lodash'
 export default {
   components: { datePicker, noData },
   data () {
@@ -89,6 +102,10 @@ export default {
         { name: '付费金额', key: 'cust_pay_amount', color: '#F28544', selectFlag: true },
         { name: '付费用户客单价', key: 'charge_user_cost', color: '#E360C8', selectFlag: true },
       ],
+      legendListNew: [
+        { name: '总消耗', key: 'total_cost', color: '#2983DF', selectFlag: true },
+        { name: '总回收', key: 'total_cust_pay_amount', color: '#EB4315', selectFlag: true },
+      ],
       data_loading: false,
       custTotal: [
         {
@@ -184,7 +201,9 @@ export default {
       default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
       time: [],
       myChart: null,
+      myChartNew: null,
       custTrends: [],
+      custTrendsNew: [],
       trends_loading: false,
       lastName: '',
       enterpriseList: [],
@@ -328,13 +347,24 @@ export default {
           start: this.time[0],
           end: this.time[1],
         }
-      }).then((res) => {
-        var res = res.data
+      }).then((_res) => {
+        const res = _res.data
         this.trends_loading = false
         if (res && res.errno == 0) {
-          this.custTrends = res.rst;
+          // 处理后端返回的数据 => 分离&提取新图表数据
+          this.custTrends = _lodash.cloneDeep(res.rst)
+          this.custTrends.forEach(item => {
+            delete item['total_cost']
+            delete item['total_cust_pay_amount']
+          })
+          this.custTrendsNew = _lodash.cloneDeep(res.rst).map(item => ({
+            idate: item['idate'],
+            total_cost: item['total_cost'],
+            total_cust_pay_amount: item['total_cust_pay_amount']
+          }))
           this.$nextTick(() => {
-            this.trendEvent()
+            this.trendEvent('custTrends') // 绘制图表
+            this.trendEvent('custTrendsNew') // 绘制新图表
           })
         } else if (res.errno != 4002) {
           this.$message({
@@ -346,14 +376,21 @@ export default {
         this.trends_loading = false
       });
     },
-    trendEvent () {
-      this.myChart && this.myChart.clear()
-      var _this = this;
-      var series = [], yAxis = []
-      let xArr = this.custTrends.map((v) => {
+    /**
+     * chartDataName 图表数据名称
+     */
+    trendEvent (chartDataName) {
+      // 旧图表
+      chartDataName === 'custTrends' && this.myChart && this.myChart.clear()
+      // 新图表
+      chartDataName === 'custTrendsNew' && this.myChartNew && this.myChartNew.clear()
+
+      const _this = this;
+      let series = [], yAxis = []
+      let xArr = this[chartDataName].map((v) => {
         return v.idate
       });
-      this.legendList.forEach((item, index) => {
+      this[chartDataName === 'custTrends' ? 'legendList' : 'legendListNew'].forEach((item, index) => {
         if (item.selectFlag) {
           yAxis.push(
             {
@@ -385,8 +422,8 @@ export default {
                 fontSize: 12,
                 show: true,
                 formatter: function (params) {
-                  var result = params;
-                  var resultData;
+                  let result = params;
+                  let resultData;
                   resultData = _this.$NumberHandle(result)
                   return resultData;
                 }
@@ -394,7 +431,7 @@ export default {
             })
 
           // series
-          let data = this.custTrends.map((v) => {
+          let data = this[chartDataName].map((v) => {
             return v[item.key] || v[item.key] == 0 ? v[item.key] : '-'
           });
           series.push({
@@ -420,13 +457,13 @@ export default {
       series.forEach((item, index) => {
         item.yAxisIndex = index
       })
-      var option = {
+      let option = {
         title: '',
         tooltip: {
           trigger: 'axis',
           show: true,
           formatter: function (params) {
-            var result = params[0].name;
+            let result = params[0].name;
             result += '<br/>'
             params.forEach((item, index) => {
               result +=
@@ -484,11 +521,16 @@ export default {
         series: series
       };
       //初始化echarts实例
-      this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
-      this.myChart.setOption(option);
+      if (chartDataName === 'custTrends') {
+        this.myChart = this.myChart ? this.myChart : this.$echarts.init(document.getElementById('trend'));
+        this.myChart.setOption(option);
+      } else if (chartDataName === 'custTrendsNew') {
+        this.myChartNew = this.myChartNew ? this.myChartNew : this.$echarts.init(document.getElementById('trendNew'));
+        this.myChartNew.setOption(option);
+      }
     },
-    changeLegend (data, index) {
-      let arr = this.legendList.filter((v) => {
+    changeLegend (legendListName, data, index) {
+      let arr = this[legendListName].filter((v) => {
         return v.selectFlag
       })
       if (arr.length == 1 && arr[0].key == data.key) {
@@ -500,9 +542,10 @@ export default {
       }
       let item = data;
       item.selectFlag = !item.selectFlag;
-      this.$set(this.legendList, index, item)
+      this.$set(this[legendListName], index, item)
       this.$nextTick(() => {
-        this.trendEvent()
+        legendListName === 'legendList' && this.trendEvent('custTrends')
+        legendListName === 'legendListNew' && this.trendEvent('custTrendsNew')
       })
     },
     changeTime (time) {//筛选时间变化
@@ -516,6 +559,7 @@ export default {
   },
   beforeDestroy () {
     this.myChart && this.myChart.clear()
+    this.myChartNew && this.myChartNew.clear()
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {          //  这里的vm指的就是vue实例，可以用来当做this使用
@@ -525,6 +569,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.mt-10 {
+  margin-top: 10px;
+}
 .dataInfoBox {
   display: flex;
   flex-wrap: wrap;