2021-11-29

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-25 14:38:41
- * @LastEditTime: 2021-11-28 17:26:20
+ * @LastEditTime: 2021-11-29 09:04:52
  * @LastEditors: Please set LastEditors
  * @Description: 也是网络接口的 api
  * @FilePath: \hyyfScreen\src\utils\chenApi.js
@@ -44,3 +44,12 @@ export function getYingFu(data) {
     params: data
   })
 }
+
+// 成本分析
+export function getCostData(params) {
+  return axios({
+    url: '/produce/prodCostStatistics/listCost',
+    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-28 17:58:59
+ * @LastEditTime: 2021-11-29 09:23:04
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -251,17 +251,20 @@
       <div class="production-column-item2">
         <pro-board :title="'成本分析'">
           <div style="height: 100%">
-            <el-select
-              size="mini"
-              style="float: right; margin: 10px 5px 0 0;z-index: 10"
-            >
-              <el-option></el-option>
-            </el-select>
             <div style="height: 90%;padding-top:30px;">
               <!-- 扇形图 -->
-              <chart-cost-pie :data="costPieData"></chart-cost-pie>
+              <chart-cost-pie
+                :data="costPieData"
+                :title="costTitles[costIndex]"
+              >
+              </chart-cost-pie>
               <!-- 柱状图 -->
-              <chart-cost-line :data="costLineData"></chart-cost-line>
+              <chart-cost-line
+                :data="costLineData"
+                :xAxisData="costTitles"
+                @changeCostIndex="changeCostIndex"
+              >
+              </chart-cost-line>
             </div>
           </div>
         </pro-board>
@@ -290,6 +293,7 @@ import {
   getInventoryLines,
   getProductionCondition,
   getYingFu,
+  getCostData,
 } from "../../utils/chenApi";
 
 export default {
@@ -450,34 +454,10 @@ export default {
       ],
       ifWorkInfos: false, // 工作看板点击后出现的工作任务
       importantData: [],
-      costPieData: [
-        {
-          name: "药品成本",
-          value: 8,
-        },
-        {
-          name: "出生成本",
-          value: 26,
-        },
-        {
-          name: "批次变动成本",
-          value: 12,
-        },
-        {
-          name: "初始化成本",
-          value: 12,
-        },
-        {
-          name: "公猪成本",
-          value: 10,
-        },
-        {
-          name: "饲料成本",
-          value: 52,
-        },
-      ],
-
-      costLineData: [32541, 82467, 54363, 64642, 34651, 95422],
+      costTitles: ["总成本", "基础猪群", "保育猪群", "育肥猪群", "后备猪群"], // 成本分析 - 被选中的名字
+      costIndex: 0, // 成本分析 - 名字数组的 index
+      costPieData: {},
+      costLineData: [],
       indicatorsVisible: false, // 是否显示股票图
       indicatorsData: [
         {
@@ -574,6 +554,7 @@ export default {
     this.initInventoryLines();
     this.initProductionCondition(); // 重要指标 - 百分率
     this.initYingFu(); // 应付排名
+    this.initCostData(); // 成本分析
   },
   methods: {
     getWorkInfo(value) {
@@ -667,6 +648,26 @@ export default {
         }
       });
     },
+    // 成本分析
+    initCostData() {
+      getCostData({}).then((res) => {
+        if (res.code === 10000) {
+          this.costLineData = [
+            res.data["total"],
+            res.data["baseGroup"],
+            res.data["pigletGroup"],
+            res.data["fattenPig"],
+            res.data["replaceGilt"],
+          ];
+          this.costPieData = this.costLineData[this.costIndex];
+        }
+      });
+    },
+    // 成本分析 - 数据改变
+    changeCostIndex(value) {
+      this.costIndex = value;
+      this.costPieData = this.costHisData[value];
+    },
   },
 };
 </script>

src/views/Production/board/ChartAmountLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 10:35:56
- * @LastEditTime: 2021-10-27 10:56:17
+ * @LastEditTime: 2021-11-29 09:31:00
  * @LastEditors: Please set LastEditors
  * @Description: 存栏变动
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountLine.vue
@@ -16,14 +16,14 @@
 export default {
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   props: {
     data: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     init() {
@@ -34,153 +34,153 @@ export default {
         //   y: 0
         // },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
         },
         // legend: {
         //   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',
-            name: '月份',
+            type: "category",
+            name: "月份",
             nameTextStyle: {
-              color: '#fff'
+              color: "#fff",
             },
             data: this.data.month,
             axisPointer: {
-              type: 'shadow'
+              type: "shadow",
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#6e7079',
-              }
+                color: "#fff",
+              },
             },
-            axisTick:{
-              show: true
-            },
-          }
-        ],
-        yAxis: //[
-          {
-            type: 'value',
-            name: '头',
-            // axisLabel: {
-            //   formatter: '{value} °C'
-            // },
-            nameTextStyle: {
-              color: '#fff'
-            },
-            axisLine: {
+            axisTick: {
               show: true,
-              lineStyle: {
-                color: '#6e7079',
-              }
             },
-            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: 'line',
+            name: "头",
+            type: "line",
             smooth: false,
             data: this.data.sowStock,
             itemStyle: {
               normal: {
-                color: '#3aa0ff',
+                color: "#3aa0ff",
                 lineStyle: {
-                  color: '#3aa0ff'
-                }
-              }
-            }
+                  color: "#3aa0ff",
+                },
+              },
+            },
           },
           {
-            name: '头',
-            type: 'line',
+            name: "头",
+            type: "line",
             smooth: false,
             data: this.data.boarStock,
             itemStyle: {
               normal: {
-                color: '#4dcb73',
+                color: "#4dcb73",
                 lineStyle: {
-                  color: '#4dcb73'
-                }
-              }
-            }
+                  color: "#4dcb73",
+                },
+              },
+            },
           },
           {
-            name: '头',
-            type: 'line',
+            name: "头",
+            type: "line",
             smooth: false,
             data: this.data.griceStock,
             itemStyle: {
               normal: {
-                color: '#fad337',
+                color: "#fad337",
                 lineStyle: {
-                  color: '#fad337'
-                }
-              }
-            }
+                  color: "#fad337",
+                },
+              },
+            },
           },
           {
-            name: '头',
-            type: 'line',
+            name: "头",
+            type: "line",
             smooth: false,
             data: this.data.pigletStock,
             itemStyle: {
               normal: {
-                color: '#f2637b',
+                color: "#f2637b",
                 lineStyle: {
-                  color: '#f2637b'
-                }
-              }
-            }
+                  color: "#f2637b",
+                },
+              },
+            },
           },
           {
-            name: '头',
-            type: 'line',
+            name: "头",
+            type: "line",
             smooth: false,
             data: this.data.fatpigStock,
             itemStyle: {
               normal: {
-                color: '#975fe4',
+                color: "#975fe4",
                 lineStyle: {
-                  color: '#975fe4'
-                }
-              }
-            }
+                  color: "#975fe4",
+                },
+              },
+            },
           },
           // {
           //   name: '湿度',
@@ -189,22 +189,24 @@ export default {
           //   yAxisIndex: 1,
           //   data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
           // }
-        ]
-      }
+        ],
+      };
       this.myChart.setOption(options);
-    }
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartAmountLines'));
+    this.myChart = this.$echarts.init(
+      document.getElementById("chartAmountLines")
+    );
     this.init();
   },
   watch: {
     data(newValue) {
-      console.log(newValue)
-      this.init()
-    }
-  }
-}
+      console.log(newValue);
+      this.init();
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -218,4 +220,3 @@ export default {
   height: 100%;
 }
 </style>
-

src/views/Production/board/ChartAmountPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:15:22
- * @LastEditTime: 2021-11-25 15:00:14
+ * @LastEditTime: 2021-11-29 09:24:15
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
@@ -169,8 +169,8 @@ export default {
     this.myChart = this.$echarts.init(
       document.getElementById("chartAmountPie")
     );
-    this.init();
-    console.log(this.data);
+    // this.init();
+    // console.log(this.data);
   },
   watch: {
     data(newValue) {

src/views/Production/board/ChartCostLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:37
- * @LastEditTime: 2021-10-27 11:05:10
+ * @LastEditTime: 2021-11-29 09:29:48
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析柱状图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostLine.vue
@@ -16,16 +16,53 @@ export default {
   props: {
     data: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
+    xAxisData: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   methods: {
     init() {
+      const commonSeriesItem = {
+        name: "Forest",
+        type: "bar",
+        barGap: 0,
+        emphasis: {
+          focus: "series",
+        },
+      };
+      let seriesData = [
+        {
+          ...commonSeriesItem,
+          name: "公摊成本",
+          color: "rgb(112,182,3)",
+          data: [],
+        },
+        {
+          ...commonSeriesItem,
+          name: "兽药成本",
+          color: "rgb(0,215,233)",
+          data: [],
+        },
+        {
+          ...commonSeriesItem,
+          name: "饲料成本",
+          color: "rgb(255,255,160)",
+          data: [],
+        },
+      ];
+      this.data.forEach((item) => {
+        seriesData[0].data.push(item.gtValue);
+        seriesData[1].data.push(item.syValue);
+        seriesData[2].data.push(item.slValue);
+      });
       let options = {
         // title: {
         //   text: '存栏变动',
@@ -33,77 +70,104 @@ export default {
         //   y: 0
         // },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
+          // formatter: (value) => {
+          //   return value + "元";
+          // },
         },
         // legend: {
         //   data: ['头']
         // },
-        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
         xAxis: [
+          // {
+          //   type: "value",
+          //   name: "元",
+          //   boundaryGap: [0, 0.01],
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+          //   axisLine: {
+          //     show: true,
+          //     lineStyle: {
+          //       color: "#6e7079",
+          //     },
+          //   },
+          //   axisTick: {
+          //     show: false,
+          //   },
+          // },
           {
-            type: 'value',
-            name: '元',
-            boundaryGap: [0, 0.01],
+            type: "category",
+            axisTick: {
+              show: false,
+            },
             axisPointer: {
-              type: 'shadow'
+              type: "none",
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#fff',
-              }
-            },
-            axisTick:{
-              show: false
+                color: "#fff",
+              },
             },
-          }
+            data: this.xAxisData,
+          },
         ],
-        yAxis: //[
-          {
-            type: 'category',
-            inverse: true,
-            // axisLabel: {
-            //   // formatter: '{value} °C'
-            //   show: true
-            // },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff',
-              }
-            },
-            // axisTick:{
-            //   show:false
-            // },
-            // splitLine:{
-            //   show:false
-            // }
+        //[
+        yAxis: {
+          // type: "category",
+          // inverse: true,
+          // axisLabel: {
+          //   // formatter: '{value} °C'
+          //   show: true
+          // },
+          // axisLine: {
+          //   show: true,
+          //   lineStyle: {
+          //     color: '#6e7079',
+          //   }
+          // },
+          axisTick: {
+            show: false,
           },
-          // {
-          //   type: 'value',
-          //   name: '湿度',
-          //   axisLabel: {
-          //     formatter: '{value} RH'
-          //   },
-          //   axisLine: {
-          //     show: false,
-          //     lineStyle: {
-          //       color: '#6e7079',
-          //     }
-          //   },
-          //   axisTick:{
-          //     show:false
-          //   },
-          //   // splitLine:{
-          //   //   show:false
-          //   // }
+          // splitLine:{
+          //   show:false
           // }
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          type: "value",
+          name: "元",
+        },
+        // {
+        //   type: 'value',
+        //   name: '湿度',
+        //   axisLabel: {
+        //     formatter: '{value} RH'
+        //   },
+        //   axisLine: {
+        //     show: false,
+        //     lineStyle: {
+        //       color: '#6e7079',
+        //     }
+        //   },
+        //   axisTick:{
+        //     show:false
+        //   },
+        //   // splitLine:{
+        //   //   show:false
+        //   // }
+        // }
         //],
         // dataset: [
         //   {
@@ -112,8 +176,8 @@ export default {
         //       [32541],
         //       [82467],
         //       [54363],
-        //       [64642], 
-        //       [40257], 
+        //       [64642],
+        //       [40257],
         //       [95422]
         //     ]
         //   },
@@ -127,43 +191,26 @@ export default {
         //     }
         //   }
         // ],
-        series: [
-          {
-            // name: '头',
-            type: 'bar',
-            data: this.data,
-            itemStyle: {
-              normal: {
-                color: function (colors) { // 颜色设置
-                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
-                  return colorList[colors.dataIndex]
-                },
-                label: {
-                  show: true,
-                  position: 'right'
-                }
-              },
-              textStyle: {
-                show: true
-              },
-            }
-          }
-        ]
-      }
+        series: seriesData,
+      };
+      const _this = this;
       this.myChart.setOption(options);
-    }
+      this.myChart.on("click", function(param) {
+        _this.$emit("changeCostIndex", param.dataIndex);
+      });
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('costHistogram'));
-    this.init();
+    this.myChart = this.$echarts.init(document.getElementById("costHistogram"));
+    // this.init();
   },
   watch: {
     data(value) {
-      console.log('成本分析柱状图数据', value)
-      this.init()
-    }
-  }
-}
+      console.log("成本分析柱状图数据", value);
+      this.init();
+    },
+  },
+};
 </script>
 <style scoped>
 .cost-histogram {

src/views/Production/board/ChartCostPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:30
- * @LastEditTime: 2021-10-27 11:05:22
+ * @LastEditTime: 2021-11-29 09:42:18
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析扇形图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostPie.vue
@@ -15,90 +15,130 @@
 export default {
   props: {
     data: {
-      type: Array,
-      default: () => []
-    }
+      type: Object,
+      default: () => {},
+    },
+    title: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   methods: {
     init() {
+      let gtValue = parseFloat(this.data.gtValue);
+      let syValue = parseFloat(this.data.syValue);
+      let slValue = parseFloat(this.data.slValue);
+      let total = gtValue + syValue + slValue;
+      console.log("total", total);
       let options = {
+        title: {
+          text: this.title,
+          x: "center",
+          textAlign: "center",
+          textStyle: {
+            fontSize: 14,
+            color: "#fff",
+          },
+        },
         grid: {
-          x: 100
+          x: 100,
+        },
+        legend: {
+          top: "38%",
+          left: "75%",
+          orient: "vertical",
+          icon: "circle",
+          selectedMode: false, // 取消右侧项选中
+          itemGap: 20, // 各项间隔
+          textStyle: {
+            fontSize: 14,
+            color: "#fff",
+          },
         },
-        // legend: {
-        //   top: '25%',
-        //   left: '75%',
-        //   orient: 'vertical',
-        //   icon: "circle",
-        //   selectedMode: false, // 取消右侧项选中
-        //   itemGap: 20, // 各项间隔
-        //   textStyle: {
-        //     fontSize: 15,
-        //     color: '#666'
-        //   },
-        // },
         series: [
           {
             // name: 'Access From',
-            type: 'pie',
-            radius: '70%', // 半径
-            center: ['48%', '55%'],
+            type: "pie",
+            radius: "70%", // 半径
+            center: ["45%", "55%"],
             avoidLabelOverlap: false,
             labelLine: {
-              show: true
+              show: true,
             },
             itemStyle: {
               normal: {
-                color: function (colors) { // 颜色设置
-                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
-                  return colorList[colors.dataIndex]
+                color: function(colors) {
+                  // 颜色设置
+                  var colorList = [
+                    "rgb(112,182,3)",
+                    // "rgb(232,56,92)",
+                    // "rgb(123,0,255)",
+                    "rgb(0,215,233)",
+                    "rgb(255,255,160)",
+                    // "rgb(0,0,255)",
+                  ];
+                  return colorList[colors.dataIndex];
                 },
                 label: {
-                  formatter: '{b}: {c}%'
-                }
+                  // formatter: (params) => {
+                  //   let percent = ((params.value / total) * 100).toFixed(2);
+                  //   return `${params.name}: ${params.value.toFixed(
+                  //     2
+                  //   )} ${percent}%`;
+                  // },
+                  formatter: "{b}: {c} {d}%",
+                },
               },
               label: {
-                show: false
+                show: false,
               },
               emphasis: {
                 label: {
                   show: true,
-                  formatter: '{b}: {c}%',
+                  formatter: "{b}: {c}%",
                   textStyle: {
-                    fontSize: '15',
-                  }
+                    fontSize: "15",
+                  },
                 },
                 itemStyle: {
                   shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
+                  shadowOffsetX: 5,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
               },
             },
-            data: this.data
-          }
-        ]
+            data: [
+              { value: gtValue, name: "公摊成本" },
+              { value: syValue, name: "兽药成本" },
+              { value: slValue, name: "饲料成本" },
+            ],
+          },
+        ],
       };
 
-      this.myChart.setOption(options)
-    }
+      this.myChart.setOption(options, true);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartCostPie'));
-    this.init()
+    this.myChart = this.$echarts.init(document.getElementById("chartCostPie"));
+    this.init();
   },
   watch: {
     data(value) {
-      console.log('成本分析环形图数据', value)
-      this.init()
-    }
-  }
-}
+      console.log("成本分析环形图数据", value);
+      this.init();
+    },
+    title(value) {
+      console.log("成本分析环形图标题改了", value);
+      this.init;
+    },
+  },
+};
 </script>
 <style scoped>
 .cost-pie {