2021-11-29 tooltip

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 13:40:39
- * @LastEditTime: 2021-11-28 15:05:32
+ * @LastEditTime: 2021-11-29 11:15:18
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\utils\chenApi.js
@@ -107,3 +107,12 @@ export function getCostData(params) {
     params: params
   })
 }
+
+// 销售情况
+export function getTheSales(params) {
+  return axios({
+    url: '/produce/prodSales/listSales',
+    method: 'post',
+    data: params
+  })
+}

src/views/PdcData/Analysis.vue

@@ -109,20 +109,20 @@
         <div class="sales-condition">
           <el-date-picker
             v-model="getSalesDates"
-            type="datetimerange"
-            :picker-options="pickerOptions"
+            type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             align="right"
             size="small"
+            value-format="yyyy-MM-dd"
           >
           </el-date-picker>
         </div>
         <div class="sales-content">
           <div class="sales-left">
             <div class="up">
-              <label>本周销售额</label>
+              <label>本月销售额</label>
               <span>{{ weekSales }}元</span>
               <div class="sales-change">
                 <div>
@@ -135,13 +135,13 @@
                   <span :class="weekSalesChange > 0 ? 'color-up' : 'color-down'"
                     >{{ weekSalesChange }}%</span
                   >
-                  &nbsp;&nbsp;&nbsp;同比上周
+                  &nbsp;&nbsp;&nbsp;环比上月
                 </div>
               </div>
             </div>
             <div class="down">
-              <label>本周销售量</label>
-              <span>{{ weekSalesVolume }}元</span>
+              <label>本月销售量</label>
+              <span>{{ weekSalesVolume }}头</span>
               <div class="sales-change">
                 <div>
                   <div
@@ -159,7 +159,7 @@
                   >
                     {{ weekSalesVolumeChange }}%
                   </span>
-                  &nbsp;&nbsp;&nbsp;同比上周
+                  &nbsp;&nbsp;&nbsp;同比上月
                 </div>
               </div>
             </div>
@@ -242,8 +242,8 @@ import {
 import {
   getInventoryLines,
   getInventoryAndProduct,
-  getSalesChange,
-  getSalesChart,
+  // getSalesChange,
+  // getSalesChart,
   // getCosts,
   // getYingShou,
   getYingFu,
@@ -255,6 +255,7 @@ import {
   getProductionCondition,
   getImportantData,
   getCostData,
+  getTheSales,
 } from "utils/chenApi";
 
 export default {
@@ -426,8 +427,8 @@ export default {
     /** 获取网络请求数据 */
     this.initInventoryLines();
     this.initInventoryAndProduct();
-    this.initSalesChange();
-    this.initSalesChart();
+    // this.initSalesChange();
+    // this.initSalesChart();
     // this.initYingShou();
     this.initYingFu();
     this.initWorkBoard(); // 工作看板
@@ -435,6 +436,7 @@ export default {
     this.initProductionCondition(); // 生产情况
     this.initImportantData(); // 重要指标
     this.initCostData(); // 成本分析
+    this.initTheSales(); // 销售情况
   },
   methods: {
     handleWorkInfoClick(item) {
@@ -536,40 +538,40 @@ export default {
         }
       });
     },
-    // 经营分析 - 销售改变
-    initSalesChange() {
-      getSalesChange({}).then((res) => {
-        if (res.code === 10000) {
-          this.weekSales = res.data.quantityAll;
-          this.weekSalesChange = res.data.quantityType
-            ? res.data.quantityPercentage
-            : -res.data.quantityPercentage;
-          this.weekSalesVolume = res.data.saleAll;
-          this.weekSalesVolumeChange = res.data.saleType
-            ? res.data.salePercentage
-            : -res.data.salePercentage;
-        } else {
-          this.weekSales = 0;
-          this.weekSalesChange = 0;
-          this.weekSalesVolume = 0;
-          this.weekSalesVolumeChange = 0;
-        }
-      });
-    },
-    // 经营分析 - 销售情况图
-    initSalesChart() {
-      const params = {
-        beginDate: this.getSalesDates[0] || "",
-        endDate: this.getSalesDates[1] || "",
-      };
-      console.log("我要放参数了", params);
-      getSalesChart(params).then((res) => {
-        if (res.code === 10000) {
-          this.salesChartData = res.data;
-          console.log(this.salesChartData);
-        }
-      });
-    },
+    // // 经营分析 - 销售改变
+    // initSalesChange() {
+    //   getSalesChange({}).then((res) => {
+    //     if (res.code === 10000) {
+    //       this.weekSales = res.data.quantityAll;
+    //       this.weekSalesChange = res.data.quantityType
+    //         ? res.data.quantityPercentage
+    //         : -res.data.quantityPercentage;
+    //       this.weekSalesVolume = res.data.saleAll;
+    //       this.weekSalesVolumeChange = res.data.saleType
+    //         ? res.data.salePercentage
+    //         : -res.data.salePercentage;
+    //     } else {
+    //       this.weekSales = 0;
+    //       this.weekSalesChange = 0;
+    //       this.weekSalesVolume = 0;
+    //       this.weekSalesVolumeChange = 0;
+    //     }
+    //   });
+    // },
+    // // 经营分析 - 销售情况图
+    // initSalesChart() {
+    //   const params = {
+    //     beginDate: this.getSalesDates[0] || "",
+    //     endDate: this.getSalesDates[1] || "",
+    //   };
+    //   console.log("我要放参数了", params);
+    //   getSalesChart(params).then((res) => {
+    //     if (res.code === 10000) {
+    //       this.salesChartData = res.data;
+    //       console.log(this.salesChartData);
+    //     }
+    //   });
+    // },
     // 经营分析 - 成本分析
     initCostData() {
       getCostData({}).then((res) => {
@@ -676,11 +678,31 @@ export default {
       this.costIndex = value;
       this.costPieData = this.costHisData[value];
     },
+    // 销售情况
+    initTheSales() {
+      getTheSales({
+        type: this.getSalesDates[0] ? 3 : 2,
+        startDate: this.getSalesDates[0] || undefined,
+        endDate: this.getSalesDates[1] || undefined,
+      }).then((res) => {
+        if (res.code === 10000) {
+          this.weekSales = res.data.money;
+          this.weekSalesChange = res.data.moneyPercent;
+          this.weekSalesVolume = res.data.quantity;
+          this.weekSalesVolumeChange = res.data.quantityPercent;
+          this.salesChartData = {
+            moneyList: res.data.moneyList,
+            quantityList: res.data.quantityList,
+            timeList: res.data.timeList,
+          };
+        }
+      });
+    },
   },
   watch: {
     getSalesDates(newValue) {
       this.getSalesDates = newValue;
-      this.initSalesChart();
+      this.initTheSales();
     },
   },
 };

src/views/PdcData/analysis/SalesChart.vue

@@ -1,9 +1,9 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 13:45:04
- * @LastEditTime: 2021-10-22 15:45:34
+ * @LastEditTime: 2021-11-29 14:20:33
  * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
+ * @Description: 销售情况面积图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\SalesChart.vue
 -->
 <template>
@@ -12,22 +12,22 @@
   </div>
 </template>
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
   name: "ChartWater",
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   props: {
-    id: {
-      type: String,
-      default: () => '0'
-    },
+    // id: {
+    //   type: String,
+    //   default: () => "0",
+    // },
     data: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     // dataValue: {
     //   type: Array,
@@ -35,26 +35,55 @@ export default {
     // }
   },
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   methods: {
     init() {
-      let dataAxis = this.data.sellDates
+      let dataAxis = this.data.timeList;
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
+      let quantityList = this.data.quantityList;
       let options = {
+        title: {
+          x: 60,
+          y: 20,
+          text: "近期销售情况",
+          textStyle: {
+            fontSize: 14,
+            color: "#6e7079",
+          },
+        },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
+          formatter: (params) => {
+            var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
+            for (var i = 0; i < params.length; i++) {
+              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
+              res +=
+                `<div style="color: #fff;font-size: 14px; padding:0 12px;">
+                  <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
+                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
+                  ]};"></span>
+                  ${params[i].data}元
+                </div>` +
+                `<div style="color: #fff;font-size: 14px; padding:0 12px;"><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
+                  params[i].color,
+                ]};"></span>${quantityList[i]}头</div>`;
+            }
+            return res;
+          },
         },
         color: [this.color],
-        dataZoom: [{
-          type: 'inside',
-          startValue: start,
-          endValue: end,
-          show: false
-          // zoomOnMouseWheel: false,
-          // zoomLock: true,
-        }],
+        dataZoom: [
+          {
+            type: "inside",
+            startValue: start,
+            endValue: end,
+            show: false,
+            // zoomOnMouseWheel: false,
+            // zoomLock: true,
+          },
+        ],
         // dataZoom: [
         //
         //   {
@@ -70,87 +99,87 @@ export default {
         // ],
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             data: dataAxis,
             axisPointer: {
-              type: 'none'
+              type: "none",
             },
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#6e7079',
-              }
+                color: "#6e7079",
+              },
             },
-            axisTick:{
-              show:false
+            axisTick: {
+              show: false,
             },
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value',
-            name: '近周销售情况',
+            type: "value",
+            // name: "元",
             axisLabel: {
-              // formatter: '{value} 头'
-              show: true
+              formatter: "{value} 元",
+              show: true,
             },
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#6e7079',
-              }
+                color: "#6e7079",
+              },
             },
-            axisTick:{
-              show: false
+            axisTick: {
+              show: false,
             },
-          }
+          },
         ],
         series: [
           {
-            name: '销售',
-            type: 'line',
+            name: "元",
+            type: "line",
             // stack: 'Total',
             smooth: true,
             areaStyle: {},
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            itemStyle : {
+            itemStyle: {
               color: this.color,
               borderColor: this.color,
               normal: {
-                label : {
+                label: {
                   show: true,
                   textStyle: {
-                    fontSize: 14
-                  }
-                }
-              }
+                    fontSize: 14,
+                  },
+                },
+              },
             },
-            data: this.data.quantitys
-          }
-        ]
-      }
-      this.myChart.setOption(options)
-    }
+            data: this.data.moneyList,
+          },
+        ],
+      };
+      this.myChart.setOption(options, true);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('salesChart'));
+    this.myChart = this.$echarts.init(document.getElementById("salesChart"));
     // this.init()
   },
   watch: {
     data(newValue) {
-      console.log(newValue)
-      this.init()
+      console.log(newValue);
+      this.init();
     },
     color(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.myChart.clear();
-        this.init()
+        this.init();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
 .sales-chart {