2021-10-11

src/assets/images/erpAnalysis/u3840.svg

@@ -0,0 +1 @@
+<svg t="1623397302584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3116" width="128" height="128"><path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m31.744 691.712L481.28 754.176l-62.464-62.464-148.48-148.48L332.8 480.768l148.48 148.48 294.912-294.912 62.464 62.464-294.912 294.912z" fill="#1AFA29" p-id="3117"></path></svg>

src/components/erp/InventoryItem.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-11 09:55:34
+ * @LastEditTime: 2021-10-11 11:07:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\components\erp\InventoryItem.vue
+-->
+<template>
+  <div class="inventory-item">
+    <div class="picture">
+      <slot name="picture"></slot>
+    </div>
+    <div class="data">
+      <div class="center">
+        <div class="title">
+          <slot name="dataName"></slot>
+        </div>
+        <div class="num">
+          <slot name="dataNum"></slot>
+        </div>
+      </div>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style scoped>
+.inventory-item {
+  width: 30%;
+  height: 100px;
+  border: 1px solid rgba(235, 238, 245, 1);
+  margin: 5px;
+  display: flex;
+}
+.picture {
+  width: 150px;
+  height: 100px;
+}
+.data {
+  width: 60%;
+  height: 100px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.title {
+  color: #bbb;
+  font-size: 16px;
+}
+.num {
+  font-size: 18px;
+}
+</style>

src/components/erp/ProductionDonut.vue

@@ -0,0 +1,146 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-11 14:54:18
+ * @LastEditTime: 2021-10-11 15:37:24
+ * @LastEditors: Please set LastEditors
+ * @Description: 生产情况的环形图
+ * @FilePath: \hyyfClient\src\components\erp\ProductionDonut.vue
+-->
+<template>
+  <div class="production-donut">
+    <div :id="id" class="chartPie"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: Number,
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      rest: 0
+    }
+  },
+  methods: {
+    init() {
+      this.rest = 100 - this.number
+      const useColor = this.color
+      let options = {
+        title: {
+          text: this.title,
+          x: 47,
+          y: 170
+        },
+        grid: {
+          x: 100,
+          y: 200
+        },
+        // tooltip: {
+        //   trigger: 'item',
+        //   formatter: function ({name, value, percent}) {
+        //     return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
+        //   }
+        // },
+        // legend: {
+        //   top: '15%',
+        //   left: '55%',
+        //   orient: 'vertical',
+        //   icon: "circle",
+        //   selectedMode: false, // 取消右侧项选中
+        //   itemGap: 20, // 各项间隔
+        //   textStyle: {
+        //     fontSize: 15,
+        //     color: '#666'
+        //   },
+        // },
+        graphic: [
+          {
+            type: 'text',
+            left: '18%',
+            top: '33%',
+            style: {
+              text: this.number + '%',
+              fontSize: 40,
+              fill: useColor
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['65%', '80%'], // 半径
+            center: ['30%', '40%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              // position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = [useColor, '#000000']
+                  return colorList[colors.dataIndex]
+                },
+                // borderWidth: 5, // 设置各项空隙
+                // borderColor: '#fff'
+              }
+            },
+            data: [
+              { value: this.number },
+              { value: this.rest }
+              // { value: 2032, name: '哺乳仔猪存栏' },
+              // { value: 1644, name: '保育猪存栏' },
+              // { value: 1546, name: '育肥猪存栏' }
+            ]
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById(this.id));
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.production-donut {
+  display: inline-block;
+  margin-top: 20px;
+  width: 20%;
+  height: 200px;
+}
+.chartPie {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-28 08:57:08
+ * @LastEditTime: 2021-10-11 16:25:13
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue

src/views/PdcData/Analysis.vue

@@ -26,24 +26,57 @@
         </div>
         <div>
           <!-- 存栏计数 -->
+          <inventory-items></inventory-items>
         </div>
       </div>
     </board>
 
     <!-- 生产情况 -->
-    <board :title="title[2]"></board>
+    <board :title="title[2]">
+      <!-- 环形图 -->
+      <production-donuts></production-donuts>
+      <!-- 8个格子 -->
+      <production-items></production-items>
+    </board>
 
     <!-- 经营分析 -->
     <board :title="title[3]"></board>
 
     <!-- 应收排名 -->
-    <board :title="title[4]"></board>
+    <board :title="title[4]">
+      <table-content 
+        :tableItems="yingshouTableItems" 
+        :height="height" 
+        :shows="yingshouTableShows"
+        :listData="yingshouTableData">
+      </table-content>
+    </board>
 
     <!-- 应付排名 -->
-    <board :title="title[5]"></board>
+    <board :title="title[5]">
+      <table-content 
+        :tableItems="yingshouTableItems" 
+        :height="height" 
+        :shows="yingshouTableShows"
+        :listData="yingfuTableData">
+      </table-content>
+    </board>
 
     <!-- 安全库存报警 -->
-    <board :title="title[6]"></board>
+    <board :title="title[6]">
+      <table-content 
+        :tableItems="safetyTableItems" 
+        :height="height" 
+        :shows="safetyTableShows"
+        :listData="safetyTableData">
+      </table-content>
+      <table-footer
+        :totals="total"
+        :size="size"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange">
+      </table-footer>
+    </board>
   </div>
 </template>
 
@@ -53,8 +86,14 @@ import WorkInfos from './analysis/WorkInfos.vue'
 import TableContent from 'components/newTable/TableContent.vue'
 import ChartInventoryPie from './analysis/ChartInventoryPie.vue'
 import ChartInventoryLines from './analysis/ChartInventoryLines.vue'
+import InventoryItems from './analysis/InventoryItems.vue'
+import ProductionDonuts from './analysis/ProductionDonuts.vue'
+import ProductionItems from './analysis/ProductionItems.vue'
+import TableFooter from "../../components/TableFooter"
 
 import { tableItems, tableShows } from './analysis/table.config'
+import { yingshouTableItems, yingshouTableShows } from './analysis/yingshouTable.config'
+import { safetyTableItems, safetyTableShows } from './analysis/safetyTable.config'
 
 export default {
   name: "Analysis",
@@ -63,7 +102,11 @@ export default {
     WorkInfos,
     TableContent,
     ChartInventoryPie,
-    ChartInventoryLines
+    ChartInventoryLines,
+    InventoryItems,
+    ProductionDonuts,
+    ProductionItems,
+    TableFooter
   },
   data() {
     return {
@@ -105,16 +148,52 @@ export default {
       tableItems: [], 
       tableShows: {},
       height: 300,
-      tableData: []
+      tableData: [],
+      // 应收排名
+      yingshouTableItems: [],
+      yingshouTableShows: {},
+      yingshouTableData: [],
+      // 应付排名
+      yingfuTableData: [],
+      // 安全库存报警
+      safetyTableItems: [],
+      safetyTableShows: {},
+      safetyTableData: [],
+      total: 0,
+      size: 20,
+      pageNum: 1,
     }
   },
   mounted() {
     this.tableItems = tableItems
     this.tableShows = tableShows
+    this.yingshouTableItems = yingshouTableItems
+    this.yingshouTableShows = yingshouTableShows
+    this.safetyTableItems = safetyTableItems
+    this.safetyTableShows = safetyTableShows
   },
   methods: {
     handleWorkInfoClick(item) {
       console.log(item)
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword
+      }
+      console.log(params)
+      // 获取后端数据
     }
   },
 }

src/views/PdcData/analysis/ChartInventoryLines.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 17:24:29
- * @LastEditTime: 2021-10-08 17:28:21
+ * @LastEditTime: 2021-10-11 09:37:46
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryLines.vue
@@ -23,15 +23,20 @@ export default {
   methods: {
     init() {
       let options = {
+        title: {
+          text: '存栏变动',
+          x: 10,
+          y: 0
+        },
         tooltip: {
           trigger: 'axis',
         },
-        legend: {
-          data: ['温度', '湿度']
-        },
-        color: ['#5599FE', '#31C3A6'],
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
         grid: {
-          top: '15%',
+          top: '20%',
           left: '10%',
           bottom: '10%',
           right: '10%'
@@ -44,25 +49,25 @@ export default {
               type: 'shadow'
             },
             axisLine: {
-              show: false,
+              show: true,
               lineStyle: {
                 color: '#6e7079',
               }
             },
             axisTick:{
-              show:false
+              show: true
             },
           }
         ],
-        yAxis: [
+        yAxis: //[
           {
             type: 'value',
-            name: '温度',
-            axisLabel: {
-              formatter: '{value} °C'
-            },
+            name: '头',
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // },
             axisLine: {
-              show: false,
+              show: true,
               lineStyle: {
                 color: '#6e7079',
               }
@@ -74,40 +79,104 @@ export default {
               show:false
             }
           },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        series: [
           {
-            type: 'value',
-            name: '湿度',
-            axisLabel: {
-              formatter: '{value} RH'
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#6e7079',
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: [300, 1000, 1600, 1300, 2300, 2450, 2400, 2000, 2200, 1700, 1800, 1500],
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
               }
-            },
-            axisTick:{
-              show:false
-            },
-            // splitLine:{
-            //   show:false
-            // }
-          }
-        ],
-        series: [
+            }
+          },
           {
-            name: '温度',
+            name: '头',
             type: 'line',
             smooth: false,
-            data: [20, 19, 18, 23.2, 25.6, 28.7, 35.6, 36.2, 32.6, 20.0, 16.4, 23.3]
+            data: [100, 500, 1000, 1100, 1700, 2100, 1900, 900, 800, 850, 900, 600],
+            itemStyle: {
+              normal: {
+                color: '#4dcb73',
+                lineStyle: {
+                  color: '#4dcb73'
+                }
+              }
+            }
           },
           {
-            name: '湿度',
+            name: '头',
             type: 'line',
             smooth: false,
-            yAxisIndex: 1,
-            data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
-          }
+            data: [600, 1300, 1900, 1600, 2500, 2750, 2600, 2300, 2400, 2000, 2100, 1900],
+            itemStyle: {
+              normal: {
+                color: '#fad337',
+                lineStyle: {
+                  color: '#fad337'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: [1600, 2300, 2900, 2600, 3500, 3450, 3600, 3500, 3400, 3000, 3100, 2800],
+            itemStyle: {
+              normal: {
+                color: '#f2637b',
+                lineStyle: {
+                  color: '#f2637b'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: [900, 1700, 2300, 2000, 2800, 2950, 3000, 2800, 2900, 2700, 2800, 2400],
+            itemStyle: {
+              normal: {
+                color: '#975fe4',
+                lineStyle: {
+                  color: '#975fe4'
+                }
+              }
+            }
+          },
+          // {
+          //   name: '湿度',
+          //   type: 'line',
+          //   smooth: false,
+          //   yAxisIndex: 1,
+          //   data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
+          // }
         ]
       }
       this.myChart.setOption(options);
@@ -124,7 +193,7 @@ export default {
 .chart-inventory-lines {
   display: inline-block;
   width: 50%;
-  height: 300px;
+  height: 280px;
 }
 #chartLines {
   width: 100%;

src/views/PdcData/analysis/ChartInventoryPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-30 15:46:57
- * @LastEditTime: 2021-10-08 17:21:17
+ * @LastEditTime: 2021-10-11 15:13:02
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue
@@ -112,8 +112,8 @@ export default {
                   var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
                   return colorList[colors.dataIndex]
                 },
-              borderWidth: 5, // 设置各项空隙
-              borderColor: '#fff'
+                borderWidth: 5, // 设置各项空隙
+                borderColor: '#fff'
               }
             },
             data: [
@@ -139,7 +139,7 @@ export default {
 <style scoped>
 .chart-inventory-pie {
   display: inline-block;
-  width: 50%;
+  width: 45%;
   height: 300px;
 }
 #chartPie {

src/views/PdcData/analysis/InventoryItems.vue

@@ -0,0 +1,174 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-11 10:10:26
+ * @LastEditTime: 2021-10-11 14:49:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\InventoryItems.vue
+-->
+<template>
+  <div class="inventory-items">
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="picture01 picture"></div>
+      </template>
+      <template v-slot:dataName>
+        <span>母猪存栏</span>
+      </template>
+      <template v-slot:dataNum>
+        <span>15</span>
+      </template>
+    </inventory-item>
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="picture02 picture"></div>
+      </template>
+      <template v-slot:dataName>
+        <div>
+          妊娠猪存栏
+        </div>
+      </template>
+      <template v-slot:dataNum>
+        <div>
+          5000
+        </div>
+      </template>
+    </inventory-item>
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="picture03 picture"></div>
+      </template>
+      <template v-slot:dataName>
+        <div>
+          哺乳母猪存栏
+        </div>
+      </template>
+      <template v-slot:dataNum>
+        <div>
+          5000
+        </div>
+      </template>
+    </inventory-item>
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="parent">
+          <div class="picture04 picture"></div>
+          <div class="blank"></div>
+        </div>
+      </template>
+      <template v-slot:dataName>
+        <div>
+          空怀猪存栏
+        </div>
+      </template>
+      <template v-slot:dataNum>
+        <div>
+          15240
+        </div>
+      </template>
+    </inventory-item>
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="picture05 picture"></div>
+      </template>
+      <template v-slot:dataName>
+        <div>
+          公猪存栏
+        </div>
+      </template>
+      <template v-slot:dataNum>
+        <div>
+          15240
+        </div>
+      </template>
+    </inventory-item>
+    <inventory-item>
+      <template v-slot:picture>
+        <div class="parent">
+          <div class="picture06 picture"></div>
+          <div class="sale"></div>
+        </div>
+      </template>
+      <template v-slot:dataName>
+        <div>
+          商品猪存栏
+        </div>
+      </template>
+      <template v-slot:dataNum>
+        <div>
+          15240
+        </div>
+      </template>
+    </inventory-item>
+  </div>
+</template>
+<script>
+import InventoryItem from 'components/erp/InventoryItem.vue'
+
+export default {
+  components: {
+    InventoryItem
+  }
+}
+</script>
+<style scoped>
+.inventory-items {
+  margin: 10px 5px 0px;
+  display: flex;
+}
+/* 图片统一格式 */
+.picture {
+  width: 150px;
+  height: 100px;
+}
+/* 母猪存栏图片 */
+.picture01 {
+  background: url('~assets/images/erpAnalysis/u3827.svg') no-repeat 50%;
+  background-size: 50%;
+}
+/* 妊娠 */
+.picture02 {
+  background: url('~assets/images/erpAnalysis/u3828.svg') no-repeat 50%;
+  background-size: 50%;
+}
+/* 哺乳 */
+.picture03 {
+  background: url('~assets/images/erpAnalysis/u3829.svg') no-repeat 50%;
+  background-size: 50%;
+}
+/* 空怀 */
+.picture04 {
+  background: url('~assets/images/erpAnalysis/u3831.svg') no-repeat 50%;
+  background-size: 50%;
+}
+.parent {
+  position: relative;
+}
+.blank {
+  background: url('~assets/images/erpAnalysis/u3832.svg') no-repeat 50%;
+  position: absolute;
+  top: 0;
+  left: 5px;
+  width: 150px;
+  height: 100px;
+}
+/* 公猪 */
+.picture05 {
+  background: url('~assets/images/erpAnalysis/u3686.svg') no-repeat 50%;
+  background-size: 50%;
+}
+/* 商品 */
+.picture06 {
+  background: url('~assets/images/erpAnalysis/u3834.svg') no-repeat 50%;
+  background-size: 50%;
+}
+.sale {
+  background: url('~assets/images/erpAnalysis/u3835.svg') no-repeat 50%;
+  position: absolute;
+  top: 30px;
+  right: 53px;
+  width: 30px;
+  height: 30px;
+  background-size: 80%;
+}
+</style>

src/views/PdcData/analysis/ProductionDonuts.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-11 14:56:37
+ * @LastEditTime: 2021-10-11 15:39:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ProductionDonuts.vue
+-->
+<template>
+  <div class="production-donuts">
+    <template v-for="item in data">
+      <production-donut :key="item.title" v-bind="item"></production-donut>
+    </template>
+  </div>
+</template>
+<script>
+import ProductionDonut from 'components/erp/ProductionDonut'
+
+export default {
+  data() {
+    return {
+      data: [
+        {
+          id: 'chart01',
+          title: '产房成活率',
+          number: 95,
+          color: 'rgb(112,249,250)'
+        },
+        {
+          id: 'chart02',
+          title: '保育成活率',
+          number: 15,
+          color: 'rgb(51, 211, 137)'
+        },
+        {
+          id: 'chart03',
+          title: '育肥成活率',
+          number: 45,
+          color: 'rgb(255, 125, 0)'
+        },
+        {
+          id: 'chart04',
+          title: '7日内断配率',
+          number: 45,
+          color: 'rgb(2, 167, 240)'
+        },
+        {
+          id: 'chart05',
+          title: '配种分娩率',
+          number: 79,
+          color: 'rgb(112, 0, 217)'
+        }
+      ]
+    }
+  },
+  components: {
+    ProductionDonut
+  }
+}
+</script>
+<style scoped>
+.production-donuts {
+  padding-left: 70px;
+}
+</style>

src/views/PdcData/analysis/ProductionItems.vue

@@ -0,0 +1,207 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-11 15:40:26
+ * @LastEditTime: 2021-10-11 16:09:54
+ * @LastEditors: Please set LastEditors
+ * @Description: 生产情况下面的8个
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ProductionItems.vue
+-->
+<template>
+  <div>
+    <div class="inventory-items">
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="picture01 picture"></div>
+        </template>
+        <template v-slot:dataName>
+          <span>平均窝产仔数</span>
+        </template>
+        <template v-slot:dataNum>
+          <span>15</span>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="parent">
+            <div class="picture02 picture"></div>
+            <div class="live"></div>
+          </div>
+        </template>
+        <template v-slot:dataName>
+          <div>平均窝产活仔数</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>5000</div>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="parent">
+            <div class="picture03 picture"></div>
+            <div class="letter03"></div>
+          </div>
+        </template>
+        <template v-slot:dataName>
+          <div>平均窝产正常仔数</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>5000</div>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="picture04 picture"></div>
+        </template>
+        <template v-slot:dataName>
+          <div>窝断奶仔猪数</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>15240</div>
+        </template>
+      </inventory-item>
+    </div>
+    <div class="inventory-items">
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="picture05 picture"></div>
+        </template>
+        <template v-slot:dataName>
+          <div>平均窝断奶重</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>15240</div>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="picture06 picture"></div>
+        </template>
+        <template v-slot:dataName>
+          <div>非生产天数</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>24天</div>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="parent">
+            <div class="picture07 picture"></div>
+            <div class="sale"></div>
+          </div>
+        </template>
+        <template v-slot:dataName>
+          <div>年产窝数</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>2.36</div>
+        </template>
+      </inventory-item>
+      <inventory-item>
+        <template v-slot:picture>
+          <div class="border">
+            <span>PSY</span>
+          </div>
+        </template>
+        <template v-slot:dataName>
+          <div>PSY</div>
+        </template>
+        <template v-slot:dataNum>
+          <div>25.5</div>
+        </template>
+      </inventory-item>
+    </div>
+  </div>
+</template>
+<script>
+import InventoryItem from "components/erp/InventoryItem.vue";
+
+export default {
+  components: {
+    InventoryItem,
+  },
+};
+</script>
+<style scoped>
+.inventory-items {
+  margin: 10px 5px 0px;
+  display: flex;
+  flex-direction: row;
+}
+/* 图片统一格式 */
+.picture {
+  width: 150px;
+  height: 100px;
+}
+.parent {
+  position: relative;
+}
+/* 平均窝产仔图片 */
+.picture01 {
+  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
+  background-size: 50%;
+}
+/* 平均窝产活仔 */
+.picture02 {
+  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
+  background-size: 50%;
+}
+.live {
+  background: url("~assets/images/erpAnalysis/u3838.svg") no-repeat 50%;
+  position: absolute;
+  top: 36px;
+  right: 56px;
+  width: 30px;
+  height: 30px;
+  background-size: 70%;
+}
+/* 正常仔 */
+.picture03 {
+  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
+  background-size: 50%;
+}
+.letter03 {
+  background: url("~assets/images/erpAnalysis/u3840.svg") no-repeat 50%;
+  position: absolute;
+  top: 36px;
+  right: 56px;
+  width: 30px;
+  height: 30px;
+  background-size: 50%;
+}
+/* 断奶 */
+.picture04 {
+  background: url("~assets/images/erpAnalysis/u3841.svg") no-repeat 50%;
+  background-size: 50%;
+}
+/* 平均断奶重 */
+.picture05 {
+  background: url("~assets/images/erpAnalysis/u3843.svg") no-repeat 50%;
+  background-size: 50%;
+}
+/* 非生产天数 */
+.picture06 {
+  background: url("~assets/images/erpAnalysis/u3844.svg") no-repeat 50%;
+  background-size: 40%;
+}
+/* 年产窝数 */
+.picture07 {
+  background: url("~assets/images/erpAnalysis/u3842.svg") no-repeat 50%;
+  background-size: 50%;
+}
+/* PSY */
+.border {
+  margin: 15px 18px;
+  border: 1px solid rgba(228, 228, 228, 1);
+  border-radius: 10px;
+  height: 70px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.border > span {
+  font-weight: bold;
+  font-size: 22px;
+}
+</style>

src/views/PdcData/analysis/safetyTable.config.js

@@ -0,0 +1,43 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-11 16:19:57
+ * @LastEditTime: 2021-10-11 16:23:05
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\safetyTable.config.js
+ */
+export const safetyTableItems = [
+  {
+    prop: 'time',
+    label: '报警时间',
+    minWidth: '200',
+    slotName: 'time'
+  },
+  {
+    prop: 'content',
+    label: '报警物品',
+    minWidth: '400',
+    slotName: 'content'
+  },
+  {
+    prop: 'now',
+    label: '目前数量',
+    minWidth: '200',
+    slotName: 'now'
+  },
+  {
+    prop: 'safe',
+    label: '安全存储数量',
+    minWidth: '200',
+    slotName: 'safe'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+export const safetyShows = {
+  showIndex: false, showSelect: true
+}

src/views/PdcData/analysis/yingshouTable.config.js

@@ -0,0 +1,44 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-11 16:12:07
+ * @LastEditTime: 2021-10-11 16:18:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\yingshouTable.config.js
+ */
+export const yingshouTableItems = [
+  {
+    prop: 'rank',
+    label: '排名',
+    minWidth: '200',
+    slotName: 'rank'
+  },
+  {
+    prop: 'name',
+    label: '名称',
+    minWidth: '300',
+    slotName: 'name'
+  },
+  {
+    prop: 'number',
+    label: '金额',
+    minWidth: '150',
+    slotName: 'number'
+  },
+  {
+    prop: 'person',
+    label: '联系人',
+    minWidth: '200',
+    slotName: 'person'
+  },
+  {
+    prop: 'phone',
+    label: '联系电话',
+    minWidth: '300',
+    slotName: 'phone'
+  }
+]
+
+export const yingshouTableShows = {
+  showIndex: false, showSelect: false
+}

vue.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-28 11:02:09
+ * @LastEditTime: 2021-10-11 10:17:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\vue.config.js
@@ -37,7 +37,8 @@ module.exports = {
     config.resolve.alias = {
       '@': path.resolve(__dirname, 'src'),
       'components': '@/components',
-      'views': '@/views'
+      'views': '@/views',
+      'assets': '@/assets'
     }
   },
   css: {