2021-11-29

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-25 14:38:41
- * @LastEditTime: 2021-11-29 09:04:52
+ * @LastEditTime: 2021-11-29 18:23:39
  * @LastEditors: Please set LastEditors
  * @Description: 也是网络接口的 api
  * @FilePath: \hyyfScreen\src\utils\chenApi.js
@@ -53,3 +53,21 @@ export function getCostData(params) {
     params: params
   })
 }
+
+// 销售分析
+export function getTheSales(params) {
+  return axios({
+    url: '/produce/prodSales/listSales',
+    method: 'post',
+    data: params
+  })
+}
+
+// 工作看板
+export function getWorkPlans(params) {
+  return axios({
+    url: '/produce/prodWorkPlan/listScreenWorkPlan',
+    method: 'get',
+    params: params
+  })
+}

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-29 09:23:04
+ * @LastEditTime: 2021-11-29 18:27:13
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -123,7 +123,7 @@
             <div class="sales-content">
               <div class="sales-left">
                 <div class="up">
-                  <label>本周销售额</label>
+                  <label>本月销售额</label>
                   <span>{{ weekSales }}元</span>
                   <div class="sales-change">
                     <div>
@@ -137,13 +137,13 @@
                         :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
@@ -160,7 +160,7 @@
                         "
                         >{{ weekSalesVolumeChange }}%</span
                       >
-                      &nbsp;&nbsp;&nbsp;同比上周
+                      &nbsp;&nbsp;&nbsp;环比上月
                     </div>
                   </div>
                 </div>
@@ -294,6 +294,8 @@ import {
   getProductionCondition,
   getYingFu,
   getCostData,
+  getTheSales,
+  getWorkPlans,
 } from "../../utils/chenApi";
 
 export default {
@@ -533,6 +535,7 @@ export default {
       ],
       indicatorsItemVisible: false, // 只要指标的一张图
       indicatorIndex: 0,
+      workPlans: {} // 工作看板
     };
   },
   components: {
@@ -555,6 +558,8 @@ export default {
     this.initProductionCondition(); // 重要指标 - 百分率
     this.initYingFu(); // 应付排名
     this.initCostData(); // 成本分析
+    this.initTheSales(); // 销售分析
+    this.initWorkPlans(); // 工作看板
   },
   methods: {
     getWorkInfo(value) {
@@ -668,6 +673,32 @@ export default {
       this.costIndex = value;
       this.costPieData = this.costHisData[value];
     },
+    // 销售分析
+    initTheSales() {
+      getTheSales({
+        type: 2,
+      }).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,
+          };
+        }
+      });
+    },
+    // 工作看板
+    initWorkPlans() {
+      getWorkPlans({}).then(({code, data}) => {
+        if (code === 10000) {
+          this.workPlans = data
+        }
+      });
+    },
   },
 };
 </script>

src/views/Production/board/ChartSales.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 13:37:46
- * @LastEditTime: 2021-10-26 14:15:40
+ * @LastEditTime: 2021-11-29 14:46:57
  * @LastEditors: Please set LastEditors
  * @Description: 销售分析图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartSales.vue
@@ -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'
+      default: () => "0",
     },
     data: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     // dataValue: {
     //   type: Array,
@@ -35,31 +35,51 @@ 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 = {
         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>
+                  <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><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: ['#289df5'],
-        dataZoom: [{
-          type: 'inside',
-          startValue: start,
-          endValue: end,
-          show: false
-          // zoomOnMouseWheel: false,
-          // zoomLock: true,
-        }],
+        color: ["#289df5"],
+        dataZoom: [
+          {
+            type: "inside",
+            startValue: start,
+            endValue: end,
+            show: false,
+            // zoomOnMouseWheel: false,
+            // zoomLock: true,
+          },
+        ],
         grid: {
-          left: 30,
-          right: '10%',
-          top: '20%',
-          bottom: '15%'
+          left: 40,
+          right: "10%",
+          top: "20%",
+          bottom: "15%",
           // bottom: '30%',
           // containLabel: true
         },
@@ -78,95 +98,98 @@ export default {
         // ],
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             data: dataAxis,
             boundaryGap: false,
             axisPointer: {
-              type: 'none'
+              type: "none",
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: 'rgb(102,255,255)',
-              }
+                color: "rgb(102,255,255)",
+              },
             },
             axisTick: {
-              show: false
+              show: false,
             },
-          }
+          },
         ],
         yAxis: [
           {
-            type: 'value',
-            // name: '近周销售情况',
+            type: "value",
+            name: "元",
             axisLabel: {
-              // formatter: '{value} 头'
-              show: true
+              // formatter: "{value} 元",
+              show: true,
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: 'rgb(102,255,255)',
-              }
+                color: "rgb(102,255,255)",
+              },
             },
-            axisTick:{
-              show: false
+            axisTick: {
+              show: false,
             },
             splitLine: {
-              show: false
-            }
-          }
+              show: false,
+            },
+          },
         ],
         series: [
           {
-            name: '销售',
-            type: 'line',
+            // name: "销售",
+            type: "line",
             // stack: 'Total',
             smooth: true,
             areaStyle: {},
             emphasis: {
-              focus: 'series'
+              focus: "series",
             },
-            itemStyle : {
-              color: '#289df5',
-              borderColor: '#289df5',
+            itemStyle: {
+              color: "#289df5",
+              borderColor: "#289df5",
               normal: {
-                label : {
+                label: {
                   show: false,
                   textStyle: {
-                    fontSize: 14
-                  }
+                    fontSize: 14,
+                  },
                 },
                 areaStyle: {
-                  type: 'default',
-                  opacity: 0.2
-                }
-              }
+                  type: "default",
+                  opacity: 0.2,
+                },
+              },
             },
-            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.init()
+    this.myChart = this.$echarts.init(document.getElementById("salesChart"));
+    // this.init();
   },
   watch: {
-    data(newValue) {
-      console.log(newValue)
-      this.init()
+    data: {
+      handler(newValue) {
+        console.log(newValue);
+        this.init();
+      },
+      deep: true,
     },
     color(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.myChart.clear();
-        this.init()
+        this.init();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
 .sales-chart {

src/views/Production/board/WorkItems.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 14:46:34
- * @LastEditTime: 2021-11-04 15:37:42
+ * @LastEditTime: 2021-11-29 18:32:47
  * @LastEditors: Please set LastEditors
  * @Description: 工作看板
  * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
@@ -44,7 +44,7 @@
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon5"></div>
         </div>
-        <div class="name">日常计划</div>
+        <div class="name">普免计划</div>
       </div>
       <div class="item" @click="getWorkInfo(6)">
         <div class="icon">
@@ -71,18 +71,24 @@
   </div>
 </template>
 <script>
-import WorkItemBgc from './WorkItemBgc.vue'
+import WorkItemBgc from "./WorkItemBgc.vue";
 
 export default {
+  props: {
+    workPlans: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   components: {
-    WorkItemBgc
+    WorkItemBgc,
   },
   methods: {
     getWorkInfo(value) {
-      this.$emit('workInfo', value)
-    }
+      this.$emit("workInfo", value);
+    },
   },
-}
+};
 </script>
 <style scoped>
 .work-items {
@@ -92,7 +98,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  background: rgb(3,16,50);
+  background: rgb(3, 16, 50);
 }
 .content {
   padding: 10px 0;