2021-11-25

src/utils/chenApi.js

@@ -0,0 +1,28 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-25 14:38:41
+ * @LastEditTime: 2021-11-25 15:24:37
+ * @LastEditors: Please set LastEditors
+ * @Description: 也是网络接口的 api
+ * @FilePath: \hyyfScreen\src\utils\chenApi.js
+ */
+import axios from "./http"
+
+/** 生产经营 */
+/* 存栏结构 */
+export function getInventoryAndProduct(data) {
+  return axios({
+    url: '/produce/prodStock/listERP',
+    method: 'get',
+    params: data
+  })
+}
+
+// 存栏变动
+export function getInventoryLines(data) {
+  return axios({
+    url: '/produce/prodStock/listStorage',
+    method: 'get',
+    params: data
+  })
+}

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-22 17:24:48
+ * @LastEditTime: 2021-11-25 15:34:11
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -12,7 +12,7 @@
     <div class="production-column production-side-column">
       <div class="production-column-item">
         <pro-board :title="'存栏结构'">
-          <chart-amount-pie :data="amountPieData"></chart-amount-pie>
+          <chart-amount-pie :data="inventoryPieData"></chart-amount-pie>
         </pro-board>
       </div>
       <div class="production-column-item">
@@ -30,7 +30,11 @@
     <!-- 第二列 -->
     <div class="production-column production-mid-column">
       <div class="production-column-item">
-        <pro-board :title="'重要指标'" :click="true" @getClick="clickIndicators">
+        <pro-board
+          :title="'重要指标'"
+          :click="true"
+          @getClick="clickIndicators"
+        >
           <important-items :data="importantData"></important-items>
           <!-- 重要指标的图 -->
           <transition name="fade">
@@ -43,29 +47,59 @@
               </div>
               <div class="indicators-search">
                 <div class="indicators-search-icon"></div>
-                <input class="indicators-search-input" type="text" placeholder="搜索">
+                <input
+                  class="indicators-search-input"
+                  type="text"
+                  placeholder="搜索"
+                />
               </div>
               <div class="indicators-charts">
-                <indicator-item 
+                <indicator-item
                   v-for="(item, index) in indicatorsData"
                   :key="item.title"
                   v-bind="item"
                   :id="index"
-                  @clickItem="clickItem(index)">
+                  @clickItem="clickItem(index)"
+                >
                 </indicator-item>
               </div>
             </div>
           </transition>
           <transition name="fade">
-            <div v-if="indicatorsItemVisible" class="indicators indicator-one-item">
+            <div
+              v-if="indicatorsItemVisible"
+              class="indicators indicator-one-item"
+            >
               <div class="back-triangle" @click="clickBack"></div>
               <div class="indicator-item-title">
                 {{ indicatorsData[indicatorIndex].title }}
-                <span :class="indicatorsData[indicatorIndex].ifPositive? 'positive': 'negative'" class="num-common">{{ indicatorsData[indicatorIndex].titleNum }}</span>
-                <span :class="indicatorsData[indicatorIndex].ifPositive? 'positive': 'negative'" class="num-common">{{ indicatorsData[indicatorIndex].subtitleNum }}</span>
+                <span
+                  :class="
+                    indicatorsData[indicatorIndex].ifPositive
+                      ? 'positive'
+                      : 'negative'
+                  "
+                  class="num-common"
+                >
+                  {{ indicatorsData[indicatorIndex].titleNum }}
+                </span>
+                <span
+                  :class="
+                    indicatorsData[indicatorIndex].ifPositive
+                      ? 'positive'
+                      : 'negative'
+                  "
+                  class="num-common"
+                >
+                  {{ indicatorsData[indicatorIndex].subtitleNum }}
+                </span>
               </div>
-              <div class="indicator-item-subtitle">{{ indicatorsData[indicatorIndex].littleTitle }}</div>
-              <indicator-one-chart v-bind="indicatorsData[indicatorIndex]"></indicator-one-chart>
+              <div class="indicator-item-subtitle">
+                {{ indicatorsData[indicatorIndex].littleTitle }}
+              </div>
+              <indicator-one-chart
+                v-bind="indicatorsData[indicatorIndex]"
+              ></indicator-one-chart>
             </div>
           </transition>
         </pro-board>
@@ -93,10 +127,18 @@
                   <span>{{ weekSales }}元</span>
                   <div class="sales-change">
                     <div>
-                      <div class="triangle-change" :class="weekSalesChange>0? 'triangle-up': 'triangle-down'"></div>
-                      <span :class="weekSalesChange>0? 'color-up': 'color-down'">{{ weekSalesChange }}%</span>
+                      <div
+                        class="triangle-change"
+                        :class="
+                          weekSalesChange > 0 ? 'triangle-up' : 'triangle-down'
+                        "
+                      ></div>
+                      <span
+                        :class="weekSalesChange > 0 ? 'color-up' : 'color-down'"
+                        >{{ weekSalesChange }}%</span
+                      >
                       &nbsp;&nbsp;&nbsp;同比上周
-                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="down">
@@ -104,8 +146,20 @@
                   <span>{{ weekSalesVolume }}元</span>
                   <div class="sales-change">
                     <div>
-                      <div class="triangle-change" :class="weekSalesVolumeChange>0? 'triangle-up': 'triangle-down'"></div>
-                      <span :class="weekSalesVolumeChange>0? 'color-up': 'color-down'">{{ weekSalesVolumeChange }}%</span>
+                      <div
+                        class="triangle-change"
+                        :class="
+                          weekSalesVolumeChange > 0
+                            ? 'triangle-up'
+                            : 'triangle-down'
+                        "
+                      ></div>
+                      <span
+                        :class="
+                          weekSalesVolumeChange > 0 ? 'color-up' : 'color-down'
+                        "
+                        >{{ weekSalesVolumeChange }}%</span
+                      >
                       &nbsp;&nbsp;&nbsp;同比上周
                     </div>
                   </div>
@@ -144,10 +198,20 @@
                 <div class="work-info-content-history">
                   <div class="history-title">历史工作任务</div>
                   <div class="history-content">
-                    <div class="history-content-item" v-for="item in historyData" :key="item.id">
-                      <span class="history-content-item-data">{{ item.date }}</span>
-                      <span class="history-content-item-data">{{ item.content }}</span>
-                      <span class="history-content-item-data">{{ item.person }}</span>
+                    <div
+                      class="history-content-item"
+                      v-for="item in historyData"
+                      :key="item.id"
+                    >
+                      <span class="history-content-item-data">{{
+                        item.date
+                      }}</span>
+                      <span class="history-content-item-data">{{
+                        item.content
+                      }}</span>
+                      <span class="history-content-item-data">{{
+                        item.person
+                      }}</span>
                     </div>
                   </div>
                 </div>
@@ -156,13 +220,19 @@
                   <div class="condition-content">
                     <div class="condition-content-item">
                       <div>执行日期：</div>
-                      <el-select size="mini" style="width: 65%; position: relative; top: -5px">
+                      <el-select
+                        size="mini"
+                        style="width: 65%; position: relative; top: -5px"
+                      >
                         <el-option></el-option>
                       </el-select>
                     </div>
                     <div class="condition-content-item">
                       <div>负责人：</div>
-                      <el-select size="mini" style="width: 65%; position: relative; top: -5px">
+                      <el-select
+                        size="mini"
+                        style="width: 65%; position: relative; top: -5px"
+                      >
                         <el-option></el-option>
                       </el-select>
                     </div>
@@ -181,7 +251,10 @@
       <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-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;">
@@ -198,23 +271,27 @@
 </template>
 
 <script>
-import ProBoard from './board/ProBoard.vue'
-import ChartAmountPie from './board/ChartAmountPie.vue'
-import ChartAmountLine from './board/ChartAmountLine.vue'
-import ChartSowBar from './board/ChartSowBar.vue'
-import ChartSales from './board/ChartSales.vue'
-import YingShou from './board/YingShou.vue'
-import WorkItems from './board/WorkItems.vue'
-import ImportantItems from './board/ImportantItems.vue'
-import ChartCostPie from './board/ChartCostPie.vue'
-import ChartCostLine from './board/ChartCostLine.vue'
-import IndicatorItem from './board/IndicatorItem.vue'
-import IndicatorOneChart from './board/IndicatorOneChart.vue'
+import ProBoard from "./board/ProBoard.vue";
+import ChartAmountPie from "./board/ChartAmountPie.vue";
+import ChartAmountLine from "./board/ChartAmountLine.vue";
+import ChartSowBar from "./board/ChartSowBar.vue";
+import ChartSales from "./board/ChartSales.vue";
+import YingShou from "./board/YingShou.vue";
+import WorkItems from "./board/WorkItems.vue";
+import ImportantItems from "./board/ImportantItems.vue";
+import ChartCostPie from "./board/ChartCostPie.vue";
+import ChartCostLine from "./board/ChartCostLine.vue";
+import IndicatorItem from "./board/IndicatorItem.vue";
+import IndicatorOneChart from "./board/IndicatorOneChart.vue";
+
+// 网络请求
+import { getInventoryAndProduct, getInventoryLines } from "../../utils/chenApi";
 
 export default {
   name: "Production",
   data() {
     return {
+      inventoryPieData: [],
       amountPieData: [
         {
           farmId: 1,
@@ -280,8 +357,8 @@ export default {
           stockQuantity: 100,
           stockType: "fatpig_stock",
           subareaId: 9,
-          year: 2021
-        }
+          year: 2021,
+        },
       ],
       amountLineData: {
         boarStock: [],
@@ -289,243 +366,256 @@ export default {
         griceStock: [],
         month: [],
         pigletStock: [],
-        sowStock: []
+        sowStock: [],
       },
-      pickerOptions: { // 快捷选项
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
+      pickerOptions: {
+        // 快捷选项
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
       getSalesDates: [], // 获取销售分析的时间
       weekSales: 1545252,
       weekSalesChange: 10,
       weekSalesVolume: 1000,
       weekSalesVolumeChange: -10,
-      salesChartData: { // 销售图的数据
+      salesChartData: {
+        // 销售图的数据
         quantitys: [46, 45, 100],
-        sellDates: ["10-20周三", "10-21周四", "10-22周五"]
+        sellDates: ["10-20周三", "10-21周四", "10-22周五"],
       },
       yingshouData: [
-        { 
+        {
           rate: 1,
-          name: 'XX屠宰有限公司',
+          name: "XX屠宰有限公司",
           money: 23515,
-          person: '大概',
-          phone: '1654564654'
+          person: "大概",
+          phone: "1654564654",
         },
-        { 
+        {
           rate: 2,
-          name: 'XX屠宰有限公司',
+          name: "XX屠宰有限公司",
           money: 23515,
-          person: '大概',
-          phone: '1654564654'
+          person: "大概",
+          phone: "1654564654",
         },
-        { 
+        {
           rate: 3,
-          name: 'XX屠宰有限公司',
+          name: "XX屠宰有限公司",
           money: 23515,
-          person: '大概',
-          phone: '1654564654'
+          person: "大概",
+          phone: "1654564654",
         },
-        { 
+        {
           rate: 4,
-          name: 'XX屠宰有限公司',
+          name: "XX屠宰有限公司",
           money: 23515,
-          person: '大概',
-          phone: '1654564654'
+          person: "大概",
+          phone: "1654564654",
         },
-        { 
+        {
           rate: 5,
-          name: 'XX屠宰有限公司',
+          name: "XX屠宰有限公司",
           money: 23515,
-          person: '大概',
-          phone: '1654564654'
-        }
+          person: "大概",
+          phone: "1654564654",
+        },
       ],
       historyData: [
         {
           id: 1,
-          date: '7日12日下午',
-          content: '1000头仔猪进入厂区',
-          person: '李海涛'
+          date: "7日12日下午",
+          content: "1000头仔猪进入厂区",
+          person: "李海涛",
         },
         {
           id: 2,
-          date: '7日12日下午',
-          content: '1000头仔猪进入厂区',
-          person: '李海涛'
+          date: "7日12日下午",
+          content: "1000头仔猪进入厂区",
+          person: "李海涛",
         },
         {
           id: 3,
-          date: '7日12日下午',
-          content: '1000头仔猪进入厂区',
-          person: '李海涛'
+          date: "7日12日下午",
+          content: "1000头仔猪进入厂区",
+          person: "李海涛",
         },
         {
           id: 4,
-          date: '7日12日下午',
-          content: '1000头仔猪进入厂区',
-          person: '李海涛'
+          date: "7日12日下午",
+          content: "1000头仔猪进入厂区",
+          person: "李海涛",
         },
         {
           id: 5,
-          date: '7日12日下午',
-          content: '1000头仔猪进入厂区',
-          person: '李海涛'
-        }
+          date: "7日12日下午",
+          content: "1000头仔猪进入厂区",
+          person: "李海涛",
+        },
       ],
       ifWorkInfos: false, // 工作看板点击后出现的工作任务
       importantData: [
         {
           id: 1,
-          name: '产房存活率',
-          num: '99.4%'
+          name: "产房存活率",
+          num: "99.4%",
         },
         {
           id: 2,
-          name: '保育成活率',
-          num: '99.4%'
+          name: "保育成活率",
+          num: "99.4%",
         },
         {
           id: 3,
-          name: '育肥成活率',
-          num: '99.4%'
+          name: "育肥成活率",
+          num: "99.4%",
         },
         {
           id: 4,
-          name: '七日内断配率',
-          num: '99.4%'
+          name: "七日内断配率",
+          num: "99.4%",
         },
         {
           id: 5,
-          name: '配种分娩率',
-          num: '99.4%'
+          name: "配种分娩率",
+          num: "99.4%",
         },
         {
           id: 6,
-          name: 'PSY',
-          num: '99.4%'
-        }
+          name: "PSY",
+          num: "99.4%",
+        },
       ],
       costPieData: [
         {
           name: "药品成本",
-          value: 8
-        }, 
+          value: 8,
+        },
         {
           name: "出生成本",
-          value: 26
+          value: 26,
         },
         {
           name: "批次变动成本",
-          value: 12
+          value: 12,
         },
         {
           name: "初始化成本",
-          value: 12
+          value: 12,
         },
         {
           name: "公猪成本",
-          value: 10
+          value: 10,
         },
         {
           name: "饲料成本",
-          value: 52
-        }
+          value: 52,
+        },
       ],
 
-      costLineData: [32541, 82467, 54363, 64642, 34651, 95422,],
+      costLineData: [32541, 82467, 54363, 64642, 34651, 95422],
       indicatorsVisible: false, // 是否显示股票图
       indicatorsData: [
         {
           id: 1,
-          title: '窝均产仔数',
-          subtitle: '母猪每一胎生产的仔猪数量',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '23',
-          subtitleNum: '+1',
-          ifPositive: true
+          title: "窝均产仔数",
+          subtitle: "母猪每一胎生产的仔猪数量",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "23",
+          subtitleNum: "+1",
+          ifPositive: true,
         },
         {
           id: 2,
-          title: '产房存活率',
-          subtitle: '每一窝仔猪断奶前平均存活率',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '92.5%',
-          subtitleNum: '+0.75%',
-          ifPositive: true
+          title: "产房存活率",
+          subtitle: "每一窝仔猪断奶前平均存活率",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "92.5%",
+          subtitleNum: "+0.75%",
+          ifPositive: true,
         },
         {
           id: 3,
-          title: '保育存活率',
-          subtitle: '保育阶段的猪只存活率',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '97.3%',
-          subtitleNum: '-0.43%',
-          ifPositive: false
+          title: "保育存活率",
+          subtitle: "保育阶段的猪只存活率",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "97.3%",
+          subtitleNum: "-0.43%",
+          ifPositive: false,
         },
         {
           id: 4,
-          title: '年提供出栏猪数',
-          subtitle: '每年可以提供出栏猪',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '214525',
-          subtitleNum: '+13.2%',
-          ifPositive: true
+          title: "年提供出栏猪数",
+          subtitle: "每年可以提供出栏猪",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "214525",
+          subtitleNum: "+13.2%",
+          ifPositive: true,
         },
         {
           id: 5,
-          title: '保育存活率',
-          subtitle: '保育阶段的猪只存活率',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '97.3%',
-          subtitleNum: '-0.43%',
-          ifPositive: false
+          title: "保育存活率",
+          subtitle: "保育阶段的猪只存活率",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "97.3%",
+          subtitleNum: "-0.43%",
+          ifPositive: false,
         },
         {
           id: 6,
-          title: '窝均产仔数',
-          subtitle: '母猪每一胎生产的仔猪数量',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '23',
-          subtitleNum: '+1',
-          ifPositive: true
+          title: "窝均产仔数",
+          subtitle: "母猪每一胎生产的仔猪数量",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "23",
+          subtitleNum: "+1",
+          ifPositive: true,
         },
         {
           id: 7,
-          title: '保育存活率',
-          subtitle: '保育阶段的猪只存活率',
-          littleTitle: '年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏',
-          titleNum: '97.3%',
-          subtitleNum: '-0.43%',
-          ifPositive: false
-        }
+          title: "保育存活率",
+          subtitle: "保育阶段的猪只存活率",
+          littleTitle:
+            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
+          titleNum: "97.3%",
+          subtitleNum: "-0.43%",
+          ifPositive: false,
+        },
       ],
       indicatorsItemVisible: false, // 只要指标的一张图
-      indicatorIndex: 0
-    }
+      indicatorIndex: 0,
+    };
   },
   components: {
     ProBoard,
@@ -539,30 +629,92 @@ export default {
     ChartCostPie,
     ChartCostLine,
     IndicatorItem,
-    IndicatorOneChart
+    IndicatorOneChart,
+  },
+  mounted() {
+    this.initInventoryAndProduct();
+    this.initInventoryLines();
   },
   methods: {
-    getWorkInfo(value) { // 工作看板的点击事件
-      console.log(value)
-      this.ifWorkInfos = !this.ifWorkInfos
+    getWorkInfo(value) {
+      // 工作看板的点击事件
+      console.log(value);
+      this.ifWorkInfos = !this.ifWorkInfos;
     },
     clickIndicators() {
-      this.indicatorsVisible = !this.indicatorsVisible
-      console.log(this.indicatorsVisible)
+      this.indicatorsVisible = !this.indicatorsVisible;
+      console.log(this.indicatorsVisible);
     },
     clickItem(index) {
       // setTimeout(() => {
       //   this.indicatorsVisible = true
       // })
-      this.indicatorIndex = index
-      this.indicatorsItemVisible = true
-      console.log(111111111)
+      this.indicatorIndex = index;
+      this.indicatorsItemVisible = true;
+      console.log(111111111);
     },
     clickBack() {
-      this.indicatorsItemVisible = false
-    }
+      this.indicatorsItemVisible = false;
+    },
+    // 第一列：存栏结构 + 存栏变动
+    initInventoryAndProduct() {
+      getInventoryAndProduct({}).then((res) => {
+        if (res.code === 10000) {
+          // this.inventoryLinesData = res.data
+          console.log(res.data);
+          // this.inventoryPieData = res.data.slice(0, 6)
+          this.inventoryPieData = [
+            res.data["sow_stock"],
+            res.data["boar_stock"],
+            res.data["grice_stock"],
+            res.data["piglet_stock"],
+            res.data["fatpig_stock"],
+          ];
+          // this.inventoryItemsData = [
+          //   res.data["sow_stock"].stockQuantity,
+          //   res.data["sow_stock_1"].stockQuantity,
+          //   res.data["sow_stock_2"].stockQuantity,
+          //   res.data["sow_stock_3"].stockQuantity,
+          //   res.data["boar_stock"].stockQuantity,
+          // ];
+          // this.productionPercents = [
+          //   res.data[12].rate * 100,
+          //   res.data[13].rate * 100,
+          //   res.data[14].rate * 100,
+          //   res.data[15].rate * 100,
+          //   res.data[16].rate * 100,
+          // ];
+        } else {
+          // this.inventoryLinesData = {
+          //   boarStock: [],
+          //   fatpigStock: [],
+          //   griceStock: [],
+          //   month: [],
+          //   pigletStock: [],
+          //   sowStock: []
+          // }
+        }
+      });
+    },
+    // 存栏情况 - 存栏变动折线图数据请求
+    initInventoryLines() {
+      getInventoryLines({}).then((res) => {
+        if (res.code === 10000) {
+          this.amountLineData = res.data;
+        } else {
+          this.amountLineData = {
+            boarStock: [],
+            fatpigStock: [],
+            griceStock: [],
+            month: [],
+            pigletStock: [],
+            sowStock: [],
+          };
+        }
+      });
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -641,7 +793,8 @@ export default {
   border: 0;
 }
 /** 重要指标图的过渡动画 */
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity 1s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
@@ -657,7 +810,7 @@ export default {
   width: 0px;
   height: 0px;
   border: 30px solid;
-  border-color:  transparent rgba(124, 121, 121, 0.5) transparent;
+  border-color: transparent rgba(124, 121, 121, 0.5) transparent;
   border-left: 120px;
   float: right;
   margin-top: 20px;
@@ -714,23 +867,23 @@ export default {
   line-height: 25px;
   padding-top: 30px;
 }
-.sales-left>.up {
+.sales-left > .up {
   margin-bottom: 10px;
 }
-.sales-left>.up>label,
-.sales-left>.down>label {
+.sales-left > .up > label,
+.sales-left > .down > label {
   display: block;
   text-align: center;
   font-size: 13px;
 }
-.sales-left>.up>span,
-.sales-left>.down>span {
+.sales-left > .up > span,
+.sales-left > .down > span {
   display: block;
   text-align: center;
   font-size: 16px;
 }
-.sales-left>.up>.sales-change,
-.sales-left>.down>.sales-change {
+.sales-left > .up > .sales-change,
+.sales-left > .down > .sales-change {
   display: flex;
   justify-content: space-around;
   font-size: 13px;
@@ -776,7 +929,7 @@ export default {
   top: 0;
   bottom: 0;
   margin: auto;
-  background-color: rgb(3,16,50);
+  background-color: rgb(3, 16, 50);
 }
 .kuang {
   width: 100%;
@@ -793,12 +946,12 @@ export default {
 .work-info-wrap {
   width: 86%;
   height: 77%;
-  background-color: rgb(4,5,26);
+  background-color: rgb(4, 5, 26);
   margin: 20px auto;
   padding-top: 2.5%;
 }
 .work-info-content {
-  border: 2px solid rgb(51,153,153);
+  border: 2px solid rgb(51, 153, 153);
   width: 95%;
   height: 95%;
   margin: auto;
@@ -818,7 +971,7 @@ export default {
   font-size: 14px;
 }
 .history-content {
-  background-color: rgb(33,41,58);
+  background-color: rgb(33, 41, 58);
   margin: 5px 10px;
   height: 100px;
   overflow-y: scroll;
@@ -833,7 +986,7 @@ export default {
   color: rgb(87, 221, 255);
 }
 .history-content-item:hover {
-  background-color: rgb(25,91,104);
+  background-color: rgb(25, 91, 104);
   cursor: pointer;
 }
 .history-content-item-data {
@@ -864,10 +1017,11 @@ export default {
 }
 
 /* 工作任务 —— 内容 */
-.work-info-content-main {}
+.work-info-content-main {
+}
 
 .main-content {
-  background-color: rgb(15,18,38);
+  background-color: rgb(15, 18, 38);
   margin: 10px;
   height: 130px;
   color: #fff;

src/views/Production/board/ChartAmountPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:15:22
- * @LastEditTime: 2021-10-27 10:55:49
+ * @LastEditTime: 2021-11-25 15:00:14
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
@@ -15,19 +15,22 @@
 export default {
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   props: {
     data: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     init() {
-      const _this = this
-      let total = this.data[1].stockQuantity + this.data[2].stockQuantity + this.data[3].stockQuantity + this.data[4].stockQuantity + this.data[5].stockQuantity
+      const _this = this;
+      let total = this.data.reduce(
+        (prev, item) => prev + item.stockQuantity,
+        0
+      );
       let options = {
         // title: {
         //   text: '存栏结构',
@@ -39,69 +42,83 @@ export default {
           // y: 10
         },
         tooltip: {
-          trigger: 'item',
-          formatter: function ({name, value, percent}) {
-            return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
-          }
+          trigger: "item",
+          formatter: function({ name, value, percent }) {
+            return (
+              name + "：" + value + "头&nbsp;&nbsp;&nbsp;&nbsp;" + percent + "%"
+            );
+          },
         },
         legend: {
-          top: '11%',
-          left: '55%',
-          orient: 'vertical',
+          top: "11%",
+          left: "55%",
+          orient: "vertical",
           icon: "circle",
           selectedMode: false, // 取消右侧项选中
           itemGap: 20, // 各项间隔
           textStyle: {
             fontSize: 12,
-            color: '#eff'
+            color: "#eff",
           },
-          formatter: function (name) {
+          formatter: function(name) {
             var legendIndex = 0;
-            var clientLabels = [
-              { name: '母猪存栏', percent: parseFloat(_this.data[1].stockQuantity / total)*100 + '%', number: _this.data[1].stockQuantity },
-              { name: '公猪存栏', percent:  parseFloat(_this.data[2].stockQuantity / total)*100 + '%', number: _this.data[2].stockQuantity },
-              { name: '哺乳仔猪存栏', percent:  parseFloat(_this.data[3].stockQuantity / total)*100 + '%', number: _this.data[3].stockQuantity },
-              { name: '保育猪存栏', percent:  parseFloat(_this.data[4].stockQuantity / total)*100 + '%', number: _this.data[4].stockQuantity },
-              { name: '育肥猪存栏', percent:  parseFloat(_this.data[5].stockQuantity / total)*100 + '%', number: _this.data[5].stockQuantity },
-            ]
-            clientLabels.forEach(function (value, i) {
-                if (value.name == name) {
-                    legendIndex = i;
-                }
+            const clientLabels = [];
+            // 将右侧文字备注放上去
+            _this.data.forEach((item) => {
+              clientLabels.push({
+                name: item.stockName,
+                percent:
+                  (parseFloat(item.stockQuantity / total) * 100).toFixed(2) +
+                  "%",
+                number: item.stockQuantity,
+              });
+            });
+            clientLabels.forEach(function(value, i) {
+              if (value.name == name) {
+                legendIndex = i;
+              }
             });
-            return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '头' + ") ";
-          }
+            return (
+              name +
+              " (" +
+              clientLabels[legendIndex].percent +
+              ", " +
+              clientLabels[legendIndex].number +
+              "头" +
+              ") "
+            );
+          },
         },
         graphic: [
           {
-            type: 'text',
-            left: '23%',
-            top: '30%',
+            type: "text",
+            left: "23%",
+            top: "30%",
             style: {
-              text: '总存栏',
+              text: "总存栏",
               fontSize: 15,
               fontWeight: 700,
-              fill: '#fff'
-            }
+              fill: "#fff",
+            },
           },
           {
-            type: 'text',
-            left: '23%',
-            top: '40%',
+            type: "text",
+            left: "23%",
+            top: "40%",
             style: {
               text: total,
               fontSize: 24,
               fontWeight: 700,
-              fill: '#fff'
-            }
-          }
+              fill: "#fff",
+            },
+          },
         ],
         series: [
           {
-            name: 'Access From',
-            type: 'pie',
-            radius: ['58%', '73%'], // 半径
-            center: ['28%', '46%'],
+            name: "Access From",
+            type: "pie",
+            radius: ["58%", "73%"], // 半径
+            center: ["28%", "46%"],
             avoidLabelOverlap: false,
             label: {
               show: false,
@@ -110,49 +127,58 @@ export default {
             emphasis: {
               label: {
                 show: false,
-                fontSize: '40',
-                fontWeight: 'bold'
-              }
+                fontSize: "40",
+                fontWeight: "bold",
+              },
             },
             labelLine: {
-              show: false
+              show: false,
             },
             itemStyle: {
               normal: {
-                color: function (colors) { // 颜色设置
-                  var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
-                  return colorList[colors.dataIndex]
+                color: function(colors) {
+                  // 颜色设置
+                  var colorList = [
+                    "#3aa0ff",
+                    "#4dcb73",
+                    "#fad337",
+                    "#f2637b",
+                    "#975fe4",
+                  ];
+                  return colorList[colors.dataIndex];
                 },
                 borderWidth: 3, // 设置各项空隙，白边
-                borderColor: '#fff'
-              }
+                borderColor: "#fff",
+              },
             },
             data: [
-              { value: this.data[1].stockQuantity, name: '母猪存栏' },
-              { value: this.data[2].stockQuantity, name: '公猪存栏' },
-              { value: this.data[3].stockQuantity, name: '哺乳仔猪存栏' },
-              { value: this.data[4].stockQuantity, name: '保育猪存栏' },
-              { value: this.data[5].stockQuantity, name: '育肥猪存栏' }
-            ]
-          }
-        ]
+              { value: this.data[0].stockQuantity, name: "母猪存栏" },
+              { value: this.data[1].stockQuantity, name: "公猪存栏" },
+              { value: this.data[2].stockQuantity, name: "哺乳仔猪存栏" },
+              { value: this.data[3].stockQuantity, name: "保育猪存栏" },
+              { value: this.data[4].stockQuantity, name: "育肥猪存栏" },
+            ],
+          },
+        ],
       };
 
-      this.myChart.setOption(options)
-    }
+      this.myChart.setOption(options);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartAmountPie'));
-    this.init()
-    console.log(this.data)
+    this.myChart = this.$echarts.init(
+      document.getElementById("chartAmountPie")
+    );
+    this.init();
+    console.log(this.data);
   },
   watch: {
     data(newValue) {
-      console.log(newValue)
-      this.init()
-    }
-  }
-}
+      console.log(newValue);
+      this.init();
+    },
+  },
+};
 </script>
 <style scoped>
 .chart-inventory-pie {