2021-12-02

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-30 09:00:21
+ * @LastEditTime: 2021-12-02 17:37:33
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -251,7 +251,7 @@
       <div class="production-column-item2">
         <pro-board :title="'成本分析'">
           <div style="height: 100%">
-            <div style="height: 90%;padding-top:30px;">
+            <div style="height: 100%;padding-top:30px;">
               <!-- 扇形图 -->
               <chart-cost-pie
                 :data="costPieData"
@@ -303,74 +303,7 @@ export default {
   data() {
     return {
       inventoryPieData: [],
-      amountPieData: [
-        {
-          farmId: 1,
-          id: 1,
-          month: 10,
-          rate: 1,
-          stockName: "总存栏",
-          stockQuantity: 1000,
-          stockType: "total_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-        {
-          farmId: 1,
-          id: 2,
-          month: 10,
-          rate: 0.01,
-          stockName: "母猪存栏",
-          stockQuantity: 10,
-          stockType: "sow_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-        {
-          farmId: 1,
-          id: 3,
-          month: 10,
-          rate: 0.09,
-          stockName: "公猪存栏",
-          stockQuantity: 90,
-          stockType: "boar_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-        {
-          farmId: 1,
-          id: 4,
-          month: 10,
-          rate: 0.1,
-          stockName: "哺乳仔猪存栏",
-          stockQuantity: 100,
-          stockType: "grice_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-        {
-          farmId: 1,
-          id: 5,
-          month: 10,
-          rate: 0.1,
-          stockName: "保育猪存栏",
-          stockQuantity: 100,
-          stockType: "piglet_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-        {
-          farmId: 1,
-          id: 6,
-          month: 10,
-          rate: 0.1,
-          stockName: "育肥猪存栏",
-          stockQuantity: 100,
-          stockType: "fatpig_stock",
-          subareaId: 9,
-          year: 2021,
-        },
-      ],
+      amountPieData: [],
       amountLineData: {
         boarStock: [],
         fatpigStock: [],
@@ -596,6 +529,15 @@ export default {
             res.data["piglet_stock"],
             res.data["fatpig_stock"],
           ];
+          this.amountPieData = {
+            name: ["妊娠", "哺乳", "空怀", "后备"],
+            data: [
+              res.data["sow_stock_1"].stockQuantity,
+              res.data["sow_stock_2"].stockQuantity,
+              res.data["sow_stock_3"].stockQuantity,
+              res.data["sow_stock_5"].stockQuantity,
+            ],
+          };
         }
       });
     },
@@ -670,8 +612,9 @@ export default {
     },
     // 成本分析 - 数据改变
     changeCostIndex(value) {
+      console.log("成本分析变了");
       this.costIndex = value;
-      this.costPieData = this.costHisData[value];
+      this.costPieData = this.costLineData[value];
     },
     // 销售分析
     initTheSales() {
@@ -685,6 +628,7 @@ export default {
           this.weekSalesVolumeChange = res.data.quantityPercent;
           this.salesChartData = {
             moneyList: res.data.moneyList,
+            moneyList1: res.data.moneyList1,
             quantityList: res.data.quantityList,
             timeList: res.data.timeList,
           };

src/views/Production/board/ChartAmountLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 10:35:56
- * @LastEditTime: 2021-11-29 09:31:00
+ * @LastEditTime: 2021-12-02 15:25:07
  * @LastEditors: Please set LastEditors
  * @Description: 存栏变动
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountLine.vue
@@ -113,7 +113,7 @@ export default {
         //],
         series: [
           {
-            name: "头",
+            name: "母猪存栏",
             type: "line",
             smooth: false,
             data: this.data.sowStock,
@@ -127,7 +127,7 @@ export default {
             },
           },
           {
-            name: "头",
+            name: "公猪存栏",
             type: "line",
             smooth: false,
             data: this.data.boarStock,
@@ -141,7 +141,7 @@ export default {
             },
           },
           {
-            name: "头",
+            name: "哺乳猪存栏",
             type: "line",
             smooth: false,
             data: this.data.griceStock,
@@ -155,7 +155,7 @@ export default {
             },
           },
           {
-            name: "头",
+            name: "保育猪存栏",
             type: "line",
             smooth: false,
             data: this.data.pigletStock,
@@ -169,7 +169,7 @@ export default {
             },
           },
           {
-            name: "头",
+            name: "育肥猪存栏",
             type: "line",
             smooth: false,
             data: this.data.fatpigStock,
@@ -201,9 +201,12 @@ export default {
     this.init();
   },
   watch: {
-    data(newValue) {
-      console.log(newValue);
-      this.init();
+    data: {
+      handler(newValue) {
+        console.log(newValue);
+        this.init();
+      },
+      deep: true,
     },
   },
 };

src/views/Production/board/ChartAmountPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:15:22
- * @LastEditTime: 2021-11-29 09:24:15
+ * @LastEditTime: 2021-12-02 15:43:29
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue

src/views/Production/board/ChartCostLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:37
- * @LastEditTime: 2021-11-29 09:29:48
+ * @LastEditTime: 2021-12-02 16:30:14
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析柱状图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostLine.vue
@@ -93,12 +93,6 @@ export default {
           //   axisPointer: {
           //     type: "shadow",
           //   },
-          //   axisLine: {
-          //     show: true,
-          //     lineStyle: {
-          //       color: "#6e7079",
-          //     },
-          //   },
           //   axisTick: {
           //     show: false,
           //   },
@@ -117,29 +111,19 @@ export default {
                 color: "#fff",
               },
             },
+            axisLabel: {
+              textStyle: {
+                fontSize: 10,
+              },
+            },
             data: this.xAxisData,
           },
         ],
         //[
         yAxis: {
-          // type: "category",
-          // inverse: true,
-          // axisLabel: {
-          //   // formatter: '{value} °C'
-          //   show: true
-          // },
-          // axisLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     color: '#6e7079',
-          //   }
-          // },
           axisTick: {
             show: false,
           },
-          // splitLine:{
-          //   show:false
-          // }
           axisLine: {
             show: true,
             lineStyle: {
@@ -149,48 +133,6 @@ export default {
           type: "value",
           name: "元",
         },
-        // {
-        //   type: 'value',
-        //   name: '湿度',
-        //   axisLabel: {
-        //     formatter: '{value} RH'
-        //   },
-        //   axisLine: {
-        //     show: false,
-        //     lineStyle: {
-        //       color: '#6e7079',
-        //     }
-        //   },
-        //   axisTick:{
-        //     show:false
-        //   },
-        //   // splitLine:{
-        //   //   show:false
-        //   // }
-        // }
-        //],
-        // dataset: [
-        //   {
-        //     dimensions: ['num'],
-        //     source: [
-        //       [32541],
-        //       [82467],
-        //       [54363],
-        //       [64642],
-        //       [40257],
-        //       [95422]
-        //     ]
-        //   },
-        //   {
-        //     transeform: {
-        //       type: 'sort',
-        //       config: {
-        //         dimension: 'num',
-        //         order: 'desc'
-        //       }
-        //     }
-        //   }
-        // ],
         series: seriesData,
       };
       const _this = this;
@@ -202,7 +144,7 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById("costHistogram"));
-    // this.init();
+    this.init();
   },
   watch: {
     data(value) {

src/views/Production/board/ChartCostPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:30
- * @LastEditTime: 2021-11-29 09:42:18
+ * @LastEditTime: 2021-12-02 19:21:46
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析扇形图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostPie.vue
@@ -49,9 +49,10 @@ export default {
           x: 100,
         },
         legend: {
-          top: "38%",
-          left: "75%",
-          orient: "vertical",
+          // top: "38%",
+          // left: "75%",
+          y: "bottom",
+          orient: "horizontal",
           icon: "circle",
           selectedMode: false, // 取消右侧项选中
           itemGap: 20, // 各项间隔
@@ -64,12 +65,13 @@ export default {
           {
             // name: 'Access From',
             type: "pie",
-            radius: "70%", // 半径
-            center: ["45%", "55%"],
+            radius: "55%", // 半径
+            center: ["45%", "40%"],
             avoidLabelOverlap: false,
             labelLine: {
               show: true,
             },
+            hoverAnimation: false,
             itemStyle: {
               normal: {
                 color: function(colors) {
@@ -85,32 +87,47 @@ export default {
                   return colorList[colors.dataIndex];
                 },
                 label: {
-                  // formatter: (params) => {
-                  //   let percent = ((params.value / total) * 100).toFixed(2);
-                  //   return `${params.name}: ${params.value.toFixed(
-                  //     2
-                  //   )} ${percent}%`;
-                  // },
-                  formatter: "{b}: {c} {d}%",
+                  formatter: (params) => {
+                    // 这里简直完美好吗，解决了文字样式也解决了千分位
+                    let value = params.value.toLocaleString();
+                    let percent = ((params.value / total) * 100).toFixed(2);
+                    return `{b|${params.name}:}\n{c|${value}}元\n{d|${percent}%}`;
+                  },
+                  rich: {
+                    b: {
+                      align: "center",
+                      fontSize: 12,
+                      // lineHeight: 23,
+                    },
+                    c: {
+                      align: "center",
+                      lineHeight: 25,
+                      fontSize: 12,
+                    },
+                    d: {
+                      align: "center",
+                      fontSize: 12,
+                    },
+                  },
                 },
               },
               label: {
                 show: false,
               },
-              emphasis: {
-                label: {
-                  show: true,
-                  formatter: "{b}: {c}%",
-                  textStyle: {
-                    fontSize: "15",
-                  },
-                },
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 5,
-                  shadowColor: "rgba(0, 0, 0, 0.5)",
-                },
-              },
+              // emphasis: {
+              //   label: {
+              //     show: true,
+              //     formatter: "{b}: {c}%",
+              //     textStyle: {
+              //       fontSize: "15",
+              //     },
+              //   },
+              //   itemStyle: {
+              //     shadowBlur: 10,
+              //     shadowOffsetX: 5,
+              //     shadowColor: "rgba(0, 0, 0, 0.5)",
+              //   },
+              // },
             },
             data: [
               { value: gtValue, name: "公摊成本" },
@@ -129,9 +146,11 @@ export default {
     this.init();
   },
   watch: {
-    data(value) {
-      console.log("成本分析环形图数据", value);
-      this.init();
+    data: {
+      handler(value) {
+        console.log("成本分析环形图数据", value);
+        this.init();
+      },
     },
     title(value) {
       console.log("成本分析环形图标题改了", value);

src/views/Production/board/ChartSales.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 13:37:46
- * @LastEditTime: 2021-11-29 14:46:57
+ * @LastEditTime: 2021-12-02 17:41:53
  * @LastEditors: Please set LastEditors
  * @Description: 销售分析图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartSales.vue
@@ -43,6 +43,7 @@ export default {
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
       let quantityList = this.data.quantityList;
+      let moneyListTooltip = this.data.moneyList1;
       let options = {
         tooltip: {
           trigger: "axis",
@@ -55,7 +56,7 @@ export default {
                   <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
                     params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                   ]};"></span>
-                  ${params[i].data}元
+                  ${moneyListTooltip[i]}元
                 </div>` +
                 `<div><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
                   params[i].color,
@@ -76,7 +77,8 @@ export default {
           },
         ],
         grid: {
-          left: 40,
+          x: 65,
+          // left: 50,
           right: "10%",
           top: "20%",
           bottom: "15%",
@@ -172,7 +174,7 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById("salesChart"));
-    // this.init();
+    this.init();
   },
   watch: {
     data: {

src/views/Production/board/ChartSowBar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 11:02:38
- * @LastEditTime: 2021-11-22 15:35:11
+ * @LastEditTime: 2021-12-02 15:58:08
  * @LastEditors: Please set LastEditors
  * @Description: 母猪分布
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartSowBar.vue
@@ -16,17 +16,35 @@
 export default {
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   props: {
     data: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     init() {
+      // const seriesData = [];
+      // const commonData = {
+      //   type: "bar",
+      //   itemStyle: {
+      //     normal: {
+      //       color: "#3aa0ff",
+      //       lineStyle: {
+      //         color: "#3aa0ff",
+      //       },
+      //     },
+      //   },
+      // };
+      // this.data.forEach((item) => {
+      //   seriesData.push({
+      //     ...commonData,
+      //     ...item,
+      //   });
+      // });
       let options = {
         // title: {
         //   text: '存栏变动',
@@ -34,113 +52,111 @@ export default {
         //   y: 0
         // },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
         },
         // legend: {
-        //   data: ['头']
+        //   data: ["妊娠", "哺乳", "空怀", "后备"],
         // },
-        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        color: ["#3aa0ff", "#4dcb73", "#fad337", "#f2637b", "#975fe4"],
         grid: {
-          top: '22%',
-          left: '10%',
-          bottom: '10%',
-          right: '15%'
+          top: "22%",
+          left: "10%",
+          bottom: "10%",
+          right: "15%",
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             // name: '月份',
             // nameTextStyle: {
             //   color: '#fff'
             // },
-            data: this.data.month,
+            data: this.data.name,
             axisPointer: {
-              type: 'shadow'
+              type: "shadow",
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#fff',
-              }
+                color: "#fff",
+              },
             },
-            axisTick:{
-              show: true
-            },
-          }
-        ],
-        yAxis: //[
-          {
-            type: 'value',
-            name: '头',
-            // axisLabel: {
-            //   formatter: '{value} °C'
-            // },
-            nameTextStyle: {
-              color: '#fff'
-            },
-            axisLine: {
+            axisTick: {
               show: true,
-              lineStyle: {
-                color: '#fff',
-              }
             },
-            axisTick:{
-              show:false
+          },
+        ],
+        //[
+        yAxis: {
+          type: "value",
+          name: "头",
+          // axisLabel: {
+          //   formatter: '{value} °C'
+          // },
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
             },
-            splitLine:{
-              show:false
-            }
           },
-          // {
-          //   type: 'value',
-          //   name: '湿度',
-          //   axisLabel: {
-          //     formatter: '{value} RH'
-          //   },
-          //   axisLine: {
-          //     show: false,
-          //     lineStyle: {
-          //       color: '#6e7079',
-          //     }
-          //   },
-          //   axisTick:{
-          //     show:false
-          //   },
-          //   // splitLine:{
-          //   //   show:false
-          //   // }
-          // }
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        // {
+        //   type: 'value',
+        //   name: '湿度',
+        //   axisLabel: {
+        //     formatter: '{value} RH'
+        //   },
+        //   axisLine: {
+        //     show: false,
+        //     lineStyle: {
+        //       color: '#6e7079',
+        //     }
+        //   },
+        //   axisTick:{
+        //     show:false
+        //   },
+        //   // splitLine:{
+        //   //   show:false
+        //   // }
+        // }
         //],
         series: [
           {
-            name: '头',
-            type: 'bar',
-            data: this.data,
+            type: "bar",
+            barWidth: 20,
             itemStyle: {
-              normal: {
-                color: '#3aa0ff',
-                lineStyle: {
-                  color: '#3aa0ff'
-                }
-              }
-            }
-          }
-        ]
-      }
+              barBorderRadius: [7, 7, 0, 0],
+            },
+            data: this.data.data,
+          },
+        ],
+      };
       this.myChart.setOption(options);
-    }
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartSowBar'));
-    this.init();
+    this.myChart = this.$echarts.init(document.getElementById("chartSowBar"));
+    // this.init();
   },
   watch: {
-    data(newValue) {
-      console.log(newValue)
-      this.init()
-    }
-  }
-}
+    data: {
+      handler(newValue) {
+        console.log(newValue);
+        this.init();
+      },
+      deep: true,
+    },
+  },
+};
 </script>
 
 <style scoped>