2021-11-30

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-29 18:27:13
+ * @LastEditTime: 2021-11-30 09:00:21
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -184,7 +184,7 @@
     <div class="production-column production-side-column">
       <div class="production-column-item">
         <pro-board :title="'工作看板'">
-          <work-items @workInfo="getWorkInfo(value)"></work-items>
+          <work-items :workPlans="workPlans"></work-items>
         </pro-board>
       </div>
 
@@ -535,7 +535,7 @@ export default {
       ],
       indicatorsItemVisible: false, // 只要指标的一张图
       indicatorIndex: 0,
-      workPlans: {} // 工作看板
+      workPlans: {}, // 工作看板
     };
   },
   components: {
@@ -693,9 +693,9 @@ export default {
     },
     // 工作看板
     initWorkPlans() {
-      getWorkPlans({}).then(({code, data}) => {
+      getWorkPlans({}).then(({ code, data }) => {
         if (code === 10000) {
-          this.workPlans = data
+          this.workPlans = data;
         }
       });
     },
@@ -735,13 +735,14 @@ export default {
 /** 重要指标的图 */
 .indicators {
   position: absolute;
-  background-color: rgb(0, 0, 0);
+  background-color: rgb(3, 16, 50);
   color: #fff;
   top: 26px;
   width: 100%;
   height: 290%;
   z-index: 10;
   overflow: auto;
+  text-align: center;
 }
 /* 标题栏 */
 .indicators-title {

src/views/Production/board/ImportantItems.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:34:46
- * @LastEditTime: 2021-10-26 17:50:35
+ * @LastEditTime: 2021-11-30 08:57:24
  * @LastEditors: Please set LastEditors
  * @Description: 重要指标
  * @FilePath: \hyyfScreen\src\views\Production\board\ImportantItems.vue
@@ -19,10 +19,10 @@ export default {
   props: {
     data: {
       type: Array,
-      default: () => []
-    }
-  }
-}
+      default: () => [],
+    },
+  },
+};
 </script>
 <style scoped>
 .important-items {
@@ -31,7 +31,7 @@ export default {
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between
+  justify-content: space-between;
 }
 .item {
   width: 30%;
@@ -42,11 +42,11 @@ export default {
   color: #fff;
 }
 .name {
-  text-align: left;
   margin: 10px 0 0 10px;
   font-size: 15px;
 }
 .num {
   font-size: 20px;
+  text-align: center;
 }
 </style>

src/views/Production/board/ProBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:03:16
- * @LastEditTime: 2021-11-22 13:43:59
+ * @LastEditTime: 2021-11-30 08:41:27
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营 - 面板
  * @FilePath: \hyyfScreen\src\views\Production\board\ProBoard.vue
@@ -23,21 +23,21 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     click: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     ifClick() {
       if (this.click) {
-        this.$emit('getClick')
+        this.$emit("getClick");
       }
-    }
+    },
   },
-}
+};
 </script>
 <style scoped>
 .pro-board {
@@ -61,9 +61,9 @@ export default {
   position: relative;
 }
 .title-left::before {
-  content: '';
+  content: "";
   height: 85%;
-  border: 2px solid #66FFFF;
+  border: 2px solid #66ffff;
   position: absolute;
   top: 0;
   left: 0;
@@ -85,10 +85,10 @@ export default {
   background-size: 100% 100%;
   position: relative;
 }
-.title-right::after{
-  content: '';
+.title-right::after {
+  content: "";
   height: 85%;
-  border: 2px solid #66FFFF;
+  border: 2px solid #66ffff;
   position: absolute;
   top: 0;
   right: 0;
@@ -96,5 +96,6 @@ export default {
 .content {
   width: 100%;
   height: 90%;
+  text-align: left;
 }
 </style>

src/views/Production/board/WorkItems.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 14:46:34
- * @LastEditTime: 2021-11-29 18:32:47
+ * @LastEditTime: 2021-11-30 08:56:34
  * @LastEditors: Please set LastEditors
  * @Description: 工作看板
  * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
@@ -9,61 +9,85 @@
 <template>
   <div class="work-items">
     <div class="content">
-      <div class="item" @click="getWorkInfo(1)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon1"></div>
+          <div class="span">
+            <span>{{ workPlans.warning }}</span>
+          </div>
         </div>
         <div class="name">预警信息</div>
       </div>
-      <div class="item" @click="getWorkInfo(5)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon2"></div>
+          <div class="span">
+            <span>{{ workPlans.hybridization }}</span>
+          </div>
         </div>
         <div class="name">待配种</div>
       </div>
-      <div class="item" @click="getWorkInfo(3)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon3"></div>
+          <div class="span">
+            <span>{{ workPlans.delivery }}</span>
+          </div>
         </div>
         <div class="name">待分娩</div>
       </div>
-      <div class="item" @click="getWorkInfo(4)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon4"></div>
+          <div class="span">
+            <span>{{ workPlans.weaning }}</span>
+          </div>
         </div>
         <div class="name">待断奶</div>
       </div>
     </div>
     <div class="content">
-      <div class="item" @click="getWorkInfo(5)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon5"></div>
+          <div class="span">
+            <span>{{ workPlans.dayPlan }}</span>
+          </div>
         </div>
-        <div class="name">普免计划</div>
+        <div class="name">日常计划</div>
       </div>
-      <div class="item" @click="getWorkInfo(6)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon6"></div>
+          <div class="span">
+            <span>{{ workPlans.turnPlan }}</span>
+          </div>
         </div>
         <div class="name">转舍记录</div>
       </div>
-      <div class="item" @click="getWorkInfo(7)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon7"></div>
+          <div class="span">
+            <span>{{ workPlans.healthPlan }}</span>
+          </div>
         </div>
-        <div class="name">保健计划</div>
+        <div class="name">普免计划</div>
       </div>
-      <div class="item" @click="getWorkInfo(8)">
+      <div class="item">
         <div class="icon">
           <work-item-bgc></work-item-bgc>
           <div class="real-icon real-icon8"></div>
+          <div class="span">
+            <span>{{ workPlans.immunePlan }}</span>
+          </div>
         </div>
         <div class="name">免疫计划</div>
       </div>
@@ -119,46 +143,64 @@ export default {
   position: relative;
 }
 .real-icon {
-  width: 80%;
-  height: 80%;
+  width: 40%;
+  height: 40%;
   position: absolute;
   top: calc(15%);
-  left: calc(15%);
-  background-size: contain;
+  left: calc(30%);
 }
 .real-icon1 {
   background: url("../../../assets/Production/u5380.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon2 {
   background: url("../../../assets/Production/u5364.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon3 {
   background: url("../../../assets/Production/u5396.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon4 {
   background: url("../../../assets/Production/u5412.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon5 {
   background: url("../../../assets/Production/u5444.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon6 {
   background: url("../../../assets/Production/u5428.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon7 {
   background: url("../../../assets/Production/u5460.svg") no-repeat;
+  background-size: contain;
 }
 .real-icon8 {
   background: url("../../../assets/Production/u5477.svg") no-repeat;
   background-size: contain;
   /* width: 40%;
   height: 40%; */
-  top: calc(10%);
-  left: calc(10%);
+  /* top: calc(10%);
+  left: calc(10%); */
 }
 
 .name {
   color: #fff;
   margin-top: 8px;
   font-size: 14px;
+  text-align: center;
+}
+
+/* 数值 */
+.span {
+  font-size: 18px;
+  position: absolute;
+  color: #fff;
+  top: calc(60%);
+  /* 水平居中 */
+  width: 100%;
+  text-align: center;
 }
 </style>