2022-01-05

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-25 14:38:41
- * @LastEditTime: 2021-11-29 18:23:39
+ * @LastEditTime: 2022-01-05 14:14:12
  * @LastEditors: Please set LastEditors
  * @Description: 也是网络接口的 api
  * @FilePath: \hyyfScreen\src\utils\chenApi.js
@@ -35,6 +35,14 @@ export function getProductionCondition(params) {
     params: params
   })
 }
+// 重要指标后面的东西
+export function getProductionDetail(params) {
+  return axios({
+    url: '/produce/importantDynamic/getDynamicData',
+    method: 'get',
+    params: params
+  })
+}
 
 // 应付
 export function getYingFu(data) {

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-12-02 17:37:33
+ * @LastEditTime: 2022-01-05 15:42:56
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -10,56 +10,100 @@
   <div class="production">
     <!-- 第一列 -->
     <div class="production-column production-side-column">
-      <div class="production-column-item" v-loading="chartLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="chartLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'存栏结构'">
-          <chart-amount-pie v-if="inventoryPieData.length > 0" :data="inventoryPieData"></chart-amount-pie>
-          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
+          <chart-amount-pie
+            v-if="inventoryPieData.length > 0"
+            :data="inventoryPieData"
+          ></chart-amount-pie>
+          <div
+            v-else
+            style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;"
+          >
+            暂无数据
+          </div>
         </pro-board>
       </div>
-      <div class="production-column-item" v-loading="amountLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="amountLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'存栏变动'">
-          <chart-amount-line v-if="amountLineData.boarStock.length > 0" :data="amountLineData"></chart-amount-line>
-          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
+          <chart-amount-line
+            v-if="amountLineData.boarStock.length > 0"
+            :data="amountLineData"
+          ></chart-amount-line>
+          <div
+            v-else
+            style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;"
+          >
+            暂无数据
+          </div>
         </pro-board>
       </div>
-      <div class="production-column-item" v-loading="chartLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="chartLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'母猪分布'">
-          <chart-sow-bar v-if="amountPieData.length > 0" :data="amountPieData"></chart-sow-bar>
-          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
+          <chart-sow-bar
+            v-if="amountPieData.length > 0"
+            :data="amountPieData"
+          ></chart-sow-bar>
+          <div
+            v-else
+            style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;"
+          >
+            暂无数据
+          </div>
         </pro-board>
       </div>
     </div>
 
     <!-- 第二列 -->
     <div class="production-column production-mid-column">
-      <div class="production-column-item" v-loading="dataLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="dataLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board
           :title="'重要指标'"
           :click="true"
           @getClick="clickIndicators"
         >
-          <important-items v-if="importantData.length > 0" :data="importantData"></important-items>
-          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
+          <important-items
+            v-if="importantData.length > 0"
+            :data="importantData"
+          ></important-items>
+          <div
+            v-else
+            style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;"
+          >
+            暂无数据
+          </div>
           <!-- 重要指标的图 -->
           <transition name="fade">
             <div v-if="indicatorsVisible" class="indicators">
               <div class="indicators-title">
-                <div class="target">指标数量：78</div>
-                <div class="target">上升指标：58</div>
-                <div class="target">下降指标：15</div>
-                <div class="target">持平指标：5</div>
+                <div class="target">指标数量：{{ impTar.total }}</div>
+                <div class="target">上升指标：{{ impTar.up }}</div>
+                <div class="target">下降指标：{{ impTar.down }}</div>
+                <div class="target">持平指标：{{ impTar.flat }}</div>
               </div>
               <div class="indicators-search">
                 <div class="indicators-search-icon"></div>
@@ -81,7 +125,7 @@
               </div>
             </div>
           </transition>
-          <transition name="fade">
+          <transition name="left">
             <div
               v-if="indicatorsItemVisible"
               class="indicators indicator-one-item"
@@ -115,16 +159,20 @@
               </div>
               <indicator-one-chart
                 v-bind="indicatorsData[indicatorIndex]"
+                :id="indicatorIndex"
               ></indicator-one-chart>
             </div>
           </transition>
         </pro-board>
       </div>
 
-      <div class="production-column-item" v-loading="weekLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="weekLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'销售分析'">
           <div class="sales">
             <!-- <div class="sales-condition">
@@ -193,8 +241,16 @@
                 </div>
               </div>
               <div class="sales-right">
-                <chart-sales v-if="salesChartData.moneyList.length > 0" :data="salesChartData"></chart-sales>
-                <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
+                <chart-sales
+                  v-if="salesChartData.moneyList.length > 0"
+                  :data="salesChartData"
+                ></chart-sales>
+                <div
+                  v-else
+                  style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;"
+                >
+                  暂无数据
+                </div>
               </div>
             </div>
           </div>
@@ -210,10 +266,13 @@
 
     <!-- 第三列 -->
     <div class="production-column production-side-column">
-      <div class="production-column-item" v-loading="workLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item"
+        v-loading="workLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'工作看板'">
           <work-items :workPlans="workPlans"></work-items>
         </pro-board>
@@ -249,7 +308,7 @@
                 <div class="work-info-content-condition">
                   <div class="history-title">发布任务</div>
                   <div class="condition-content">
-                    <div class="condition-content-item">
+                    <!-- <div class="condition-content-item">
                       <div>执行日期：</div>
                       <el-select
                         size="mini"
@@ -257,15 +316,15 @@
                       >
                         <el-option></el-option>
                       </el-select>
-                    </div>
+                    </div> -->
                     <div class="condition-content-item">
                       <div>负责人：</div>
-                      <el-select
+                      <!-- <el-select
                         size="mini"
                         style="width: 65%; position: relative; top: -5px"
                       >
                         <el-option></el-option>
-                      </el-select>
+                      </el-select> -->
                     </div>
                   </div>
                 </div>
@@ -279,10 +338,13 @@
         </div>
       </div>
 
-      <div class="production-column-item2" v-loading="costLoading"
-           element-loading-text="拼命加载中"
-           element-loading-spinner="el-icon-loading"
-           element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div
+        class="production-column-item2"
+        v-loading="costLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
         <pro-board :title="'成本分析'">
           <div style="height: 100%">
             <div style="height: 100%;padding-top:30px;">
@@ -330,6 +392,7 @@ import {
   getCostData,
   getTheSales,
   getWorkPlans,
+  getProductionDetail,
 } from "../../utils/chenApi";
 
 export default {
@@ -430,78 +493,13 @@ export default {
       costPieData: {},
       costLineData: [],
       indicatorsVisible: false, // 是否显示股票图
-      indicatorsData: [
-        {
-          id: 1,
-          title: "窝均产仔数",
-          subtitle: "母猪每一胎生产的仔猪数量",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "23",
-          subtitleNum: "+1",
-          ifPositive: true,
-        },
-        {
-          id: 2,
-          title: "产房存活率",
-          subtitle: "每一窝仔猪断奶前平均存活率",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "92.5%",
-          subtitleNum: "+0.75%",
-          ifPositive: true,
-        },
-        {
-          id: 3,
-          title: "保育存活率",
-          subtitle: "保育阶段的猪只存活率",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "97.3%",
-          subtitleNum: "-0.43%",
-          ifPositive: false,
-        },
-        {
-          id: 4,
-          title: "年提供出栏猪数",
-          subtitle: "每年可以提供出栏猪",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "214525",
-          subtitleNum: "+13.2%",
-          ifPositive: true,
-        },
-        {
-          id: 5,
-          title: "保育存活率",
-          subtitle: "保育阶段的猪只存活率",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "97.3%",
-          subtitleNum: "-0.43%",
-          ifPositive: false,
-        },
-        {
-          id: 6,
-          title: "窝均产仔数",
-          subtitle: "母猪每一胎生产的仔猪数量",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "23",
-          subtitleNum: "+1",
-          ifPositive: true,
-        },
-        {
-          id: 7,
-          title: "保育存活率",
-          subtitle: "保育阶段的猪只存活率",
-          littleTitle:
-            "年利用窝数 * 平均窝产正常仔数 * 仔猪成活率 * 查询期间的基础母猪平均存栏",
-          titleNum: "97.3%",
-          subtitleNum: "-0.43%",
-          ifPositive: false,
-        },
-      ],
+      impTar: {
+        total: 0,
+        up: 0,
+        down: 0,
+        flat: 0,
+      },
+      indicatorsData: [],
       indicatorsItemVisible: false, // 只要指标的一张图
       indicatorIndex: 0,
       workPlans: {}, // 工作看板
@@ -537,22 +535,32 @@ export default {
     this.initWorkPlans(); // 工作看板
   },
   methods: {
-    getWorkInfo(value) {
+    getWorkInfo() {
       // 工作看板的点击事件
-      console.log(value);
       this.ifWorkInfos = !this.ifWorkInfos;
     },
     clickIndicators() {
       this.indicatorsVisible = !this.indicatorsVisible;
-      console.log(this.indicatorsVisible);
+      if (this.indicatorsVisible) {
+        getProductionDetail({}).then((res) => {
+          if (res.code === 10000) {
+            this.impTar = { ...res.data.count[0] };
+            this.indicatorsData = res.data.list;
+          } else {
+            this.impTar = {
+              total: 0,
+              up: 0,
+              down: 0,
+              flat: 0,
+            };
+            this.indicatorsData = [];
+          }
+        });
+      }
     },
     clickItem(index) {
-      // setTimeout(() => {
-      //   this.indicatorsVisible = true
-      // })
       this.indicatorIndex = index;
       this.indicatorsItemVisible = true;
-      console.log(111111111);
     },
     clickBack() {
       this.indicatorsItemVisible = false;
@@ -561,7 +569,7 @@ export default {
     initInventoryAndProduct() {
       getInventoryAndProduct({}).then((res) => {
         if (res.code === 10000) {
-          if(Object.keys(res.data).length > 0) {
+          if (Object.keys(res.data).length > 0) {
             // this.inventoryLinesData = res.data
             // this.inventoryPieData = res.data.slice(0, 6)
             this.inventoryPieData = [
@@ -608,7 +616,7 @@ export default {
       getProductionCondition({}).then((res) => {
         this.importantData = [];
         if (res.code === 10000) {
-          if(Object.keys(res.data).length > 0) {
+          if (Object.keys(res.data).length > 0) {
             const items = [
               "grice_rate",
               "piglet_rate",
@@ -619,7 +627,8 @@ export default {
             ];
             items.forEach((item) => {
               let itemNum =
-                  (parseFloat(res.data[item].stockQuantity) * 100).toFixed(2) + "%";
+                (parseFloat(res.data[item].stockQuantity) * 100).toFixed(2) +
+                "%";
               if (item === "psy") {
                 itemNum = res.data[item].stockQuantity;
               }
@@ -637,7 +646,6 @@ export default {
     // 应付排名
     initYingFu() {
       getYingFu({}).then((res) => {
-        console.log("应付", res);
         if (res.code === 10000) {
           this.yingfuData = res.data;
         }
@@ -661,7 +669,6 @@ export default {
     },
     // 成本分析 - 数据改变
     changeCostIndex(value) {
-      console.log("成本分析变了");
       this.costIndex = value;
       this.costPieData = this.costLineData[value];
     },
@@ -777,18 +784,37 @@ export default {
   border: 0;
 }
 /** 重要指标图的过渡动画 */
+.fade-enter,
+.fade-leave-to {
+  height: 0;
+  /* transform: translateY(-100%); */
+}
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 1s;
+  transition: 1s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
+.fade-enter-to /* .fade-leave-active below version 2.1.8 */ {
+  /* height: 100%; */
+  transform: translateY(0);
 }
 /** 重要指标图 - 一张图 */
 .indicator-one-item {
   text-align: left;
   z-index: 11;
 }
+.left-enter,
+.left-leave-to {
+  /* transform: translateX(-100%); */
+  width: 0;
+}
+.left-enter-active,
+.left-leave-active {
+  transition: 1s;
+}
+.left-enter-to /* .fade-leave-active below version 2.1.8 */ {
+  /* width: 100%; */
+  transform: translateX(0);
+}
 /* 返回的三角形 */
 .back-triangle {
   width: 0px;

src/views/Production/board/IndicatorChart.vue

@@ -1,110 +1,117 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-22 15:10:07
- * @LastEditTime: 2021-11-22 15:55:38
+ * @LastEditTime: 2022-01-05 14:40:38
  * @LastEditors: Please set LastEditors
  * @Description: 指标图
  * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorChart.vue
 -->
 <template>
-  <div :id="id + 'indicator'" class="indicator-chart">
-  </div>
+  <div :id="id + 'indicator'" class="indicator-chart"></div>
 </template>
 <script>
 export default {
   props: {
     ifPositive: {
       type: Boolean,
-      required: true
+      required: true,
     },
     id: {
-      required: true
+      required: true,
     },
     data: {
-      default: () => []
-    }
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   methods: {
     init() {
-      let color1 = 'rgba(0, 255, 0, 0.7)'
-      let color2 = 'rgba(64, 218, 26, 0.5)'
-      let color3 = 'rgba(88, 165, 69, 0.3)'
+      let color1 = "rgba(0, 255, 0, 0.7)";
+      let color2 = "rgba(64, 218, 26, 0.5)";
+      let color3 = "rgba(88, 165, 69, 0.3)";
       if (this.ifPositive) {
-        color1 = 'rgba(255, 0, 0, 0.7)'
-        color2 = 'rgba(216, 52, 52, 0.5)'
-        color3 = 'rgba(201, 85, 85, 0.3)'
+        color1 = "rgba(255, 0, 0, 0.7)";
+        color2 = "rgba(216, 52, 52, 0.5)";
+        color3 = "rgba(201, 85, 85, 0.3)";
       }
       let options = {
         grid: {
-          top: '2%',
-          left: '0',
-          right: '0',
-          bottom: '-20%',
-          containLabel: true
+          top: "2%",
+          left: "0",
+          right: "0",
+          bottom: "-20%",
+          containLabel: true,
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          show: false
+          data: this.data.timeList,
+          show: false,
         },
         yAxis: {
-          type: 'value',
-          show: false
+          type: "value",
+          show: false,
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: 'line',
-            symbol: 'none', // 隐藏拐点
+            data: this.data.dataList,
+            type: "line",
+            symbol: "none", // 隐藏拐点
             color: color1,
             areaStyle: {
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [
                   {
-                    offset: 0,  color: color1  // 100% 处的颜色
-                  }, 
+                    offset: 0,
+                    color: color1, // 100% 处的颜色
+                  },
                   {
-                    offset: 0.5,  color: color2  // 100% 处的颜色
+                    offset: 0.5,
+                    color: color2, // 100% 处的颜色
                   },
                   {
-                    offset: 1, color: color3 //   0% 处的颜色
-                  }
+                    offset: 1,
+                    color: color3, //   0% 处的颜色
+                  },
                 ],
-                global: false // 缺省为 false
-              }
-            }
-          }
-        ]
-      }
-      this.myChart.setOption(options);
-    }
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
+      this.myChart.setOption(options, true);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById(this.id + 'indicator'));
+    this.myChart = this.$echarts.init(
+      document.getElementById(this.id + "indicator")
+    );
     this.init();
   },
   watch: {
-    data(newValue) {
-      console.log(newValue)
-      this.init()
-    }
-  }
-}
+    data: {
+      handler() {
+        this.init();
+      },
+      deep: true,
+    },
+  },
+};
 </script>
 <style scoped>
-  .indicator-chart{
-    width: 100%;
-    height: 100%;
-  }
+.indicator-chart {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/Production/board/IndicatorItem.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-22 14:25:49
- * @LastEditTime: 2021-11-22 16:50:35
+ * @LastEditTime: 2022-01-05 15:35:59
  * @LastEditors: Please set LastEditors
  * @Description: 重点指标的 item
  * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorItem.vue
@@ -13,87 +13,102 @@
       <span>{{ subtitle }}</span>
     </div>
     <div class="center">
-      <indicator-chart :id="id" :ifPositive="ifPositive"></indicator-chart>
+      <indicator-chart
+        :id="id"
+        :ifPositive="ifPositive"
+        :data="data"
+      ></indicator-chart>
     </div>
     <div class="right">
       <h3>{{ titleNum }}</h3>
-      <span>{{ subtitleNum }}</span>
+      <span class="num-common" :class="ifPositive ? 'positive' : 'negative'">
+        {{ subtitleNum }}
+      </span>
     </div>
   </div>
 </template>
 <script>
-import IndicatorChart from './IndicatorChart.vue'
+import IndicatorChart from "./IndicatorChart.vue";
 export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     subtitle: {
       type: String,
-      required: true
+      required: true,
     },
     titleNum: {
       type: String,
-      required: true
+      required: true,
     },
     subtitleNum: {
       type: String,
-      required: true
+      required: true,
     },
     ifPositive: {
       type: Boolean,
-      required: true
+      required: true,
     },
     id: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
   },
   components: {
-    IndicatorChart
+    IndicatorChart,
   },
   methods: {
     clickItem() {
-      this.$emit('clickItem')
-    }
+      this.$emit("clickItem");
+    },
   },
-}
+};
 </script>
 <style scoped>
-  .indicator-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    border-bottom: 2px solid rgb(56, 55, 55);
-    padding: 20px 0;
-  }
-  .left {
-    width: 27%;
-  }
-  .left>h2 {
-    font-size: 23px;
-  }
-  .left>span {
-    font-size: 15px;
-    color: #ccc;
-  }
-  .center {
-    width: 50%;
-  }
-  .right {
-    width: 20%;
-  }
-  .right>h3 {
-    font-size: 20px;
-  }
-  .right>span {
-    display: inline-block;
-    font-size: 20px;
-    width: 100px;
-    height: 28px;
-    line-height: 28px;
-    background-color: red;
-    border-radius: 8px;
-  }
+.indicator-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  border-bottom: 2px solid rgb(56, 55, 55);
+  padding: 20px 0;
+}
+.left {
+  width: 27%;
+}
+.left > h2 {
+  font-size: 23px;
+}
+.left > span {
+  font-size: 15px;
+  color: #ccc;
+}
+.center {
+  width: 50%;
+}
+.right {
+  width: 20%;
+}
+.right > h3 {
+  font-size: 20px;
+}
+.num-common {
+  display: inline-block;
+  font-size: 20px;
+  width: 100px;
+  height: 28px;
+  line-height: 28px;
+  border-radius: 8px;
+}
+.positive {
+  background-color: red;
+}
+.negative {
+  background-color: green;
+}
 </style>

src/views/Production/board/IndicatorOneChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-22 17:00:48
- * @LastEditTime: 2021-12-13 14:18:35
+ * @LastEditTime: 2022-01-05 15:39:43
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorOneChart.vue
@@ -20,7 +20,8 @@ export default {
       required: true,
     },
     data: {
-      default: () => [],
+      type: Object,
+      required: true,
     },
   },
   data() {
@@ -30,6 +31,7 @@ export default {
   },
   methods: {
     init() {
+      console.log(123);
       let color1 = "rgba(0, 255, 0, 0.7)";
       let color2 = "rgba(64, 218, 26, 0.5)";
       let color3 = "rgba(88, 165, 69, 0.3)";
@@ -42,14 +44,15 @@ export default {
         grid: {
           top: "2%",
           left: "2%",
-          right: "2%",
+          right: "4%",
           bottom: "2%",
           containLabel: true,
         },
         xAxis: {
+          name: "月",
           type: "category",
           boundaryGap: false,
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          data: this.data.timeList,
           splitLine: {
             // 除开坐标轴的线
             show: true,
@@ -85,7 +88,7 @@ export default {
         },
         series: [
           {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: this.data.dataList,
             type: "line",
             symbol: "none", // 隐藏拐点
             color: color1,
@@ -116,19 +119,23 @@ export default {
           },
         ],
       };
-      this.myChart.setOption(options);
+      this.myChart.setOption(options, true);
     },
   },
   mounted() {
-    this.myChart = this.$echarts.init(
-      document.getElementById("indicatorOneChart")
-    );
-    this.init();
+    setTimeout(() => {
+      this.myChart = this.$echarts.init(
+        document.getElementById("indicatorOneChart")
+      );
+      this.init();
+    }, 1000);
   },
   watch: {
-    data(newValue) {
-      console.log(newValue);
-      this.init();
+    data: {
+      handler() {
+        this.init();
+      },
+      deep: true,
     },
   },
 };