2021-10-26 生产经营模块完成

src/assets/Production/u5360.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="46px" height="46px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="46" y1="46" x2="0" y2="92" id="LinearGradient625">
+      <stop id="Stop626" stop-color="#061a31" offset="0" />
+      <stop id="Stop627" stop-color="#061a31" offset="0.44" />
+      <stop id="Stop628" stop-color="#05366c" offset="0.86" />
+      <stop id="Stop629" stop-color="#05366c" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 0 -46 )">
+    <path d="M 1 46  L 44 46  A 2 2 0 0 1 46 48 L 46 91  L 2 91  A 1 1 0 0 1 1 90 L 1 46  Z " fill-rule="nonzero" fill="url(#LinearGradient625)" stroke="none" />
+  </g>
+</svg>

src/assets/Production/u5361.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="47px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="-1.77635683940025E-15" y1="1.77635683940025E-15" x2="46" y2="46" id="LinearGradient630">
+      <stop id="Stop631" stop-color="#061a31" offset="0" />
+      <stop id="Stop632" stop-color="#061a31" offset="0.44" />
+      <stop id="Stop633" stop-color="#03386b" offset="0.88" />
+      <stop id="Stop634" stop-color="#03386b" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -46 -46 )">
+    <path d="M 45.5 43  L 45.5 0  L 0 0  L 0 45.5  L 43 45.5  C 44.4 45.5  45.5 44.4  45.5 43  Z " fill-rule="nonzero" fill="url(#LinearGradient630)" stroke="none" transform="matrix(1 0 0 1 46 46 )" />
+  </g>
+</svg>

src/assets/Production/u5362.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="47px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="7.105427357601E-15" y1="46" x2="46" y2="0" id="LinearGradient635">
+      <stop id="Stop636" stop-color="#061a31" offset="0" />
+      <stop id="Stop637" stop-color="#061a31" offset="0.44" />
+      <stop id="Stop638" stop-color="#053264" offset="0.86" />
+      <stop id="Stop639" stop-color="#053264" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -46 0 )">
+    <path d="M 45.5 3  L 45.5 46  L 0 46  L 0 0.500000000000002  L 43 0.500000000000002  C 44.4 0.500000000000002  45.5 1.6  45.5 3  Z " fill-rule="nonzero" fill="url(#LinearGradient635)" stroke="none" transform="matrix(1 0 0 1 46 0 )" />
+  </g>
+</svg>

src/assets/Production/u5363.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="47px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="46" y1="46" x2="-3.5527136788005E-15" y2="3.5527136788005E-15" id="LinearGradient640">
+      <stop id="Stop641" stop-color="#061a31" offset="0" />
+      <stop id="Stop642" stop-color="#061a31" offset="0.44" />
+      <stop id="Stop643" stop-color="#03396c" offset="0.86" />
+      <stop id="Stop644" stop-color="#03396c" offset="1" />
+    </linearGradient>
+  </defs>
+  <g>
+    <path d="M 0.500000000000002 3  L 0.500000000000002 46  L 46 46  L 46 0.500000000000002  L 3 0.500000000000002  C 1.6 0.500000000000002  0.500000000000002 1.6  0.500000000000002 3  Z " fill-rule="nonzero" fill="url(#LinearGradient640)" stroke="none" />
+  </g>
+</svg>

src/main.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2021-10-25 08:38:02
- * @LastEditTime: 2021-10-25 15:47:44
- * @LastEditors: your name
+ * @LastEditTime: 2021-10-26 17:19:24
+ * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfScreen\src\main.js
  */
@@ -13,13 +13,15 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
-import { DatePicker, Row, Col } from 'element-ui';
+import { DatePicker, Row, Col, Select, Option } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
 Vue.use(DatePicker)
 Vue.use(Row)
 Vue.use(Col)
+Vue.use(Select)
+Vue.use(Option)
 
 new Vue({
   router,

src/views/Production/Production.vue

@@ -1,35 +1,160 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-10-26 09:42:11
+ * @LastEditTime: 2021-10-26 18:02:41
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
 -->
 <template>
   <div class="production">
-    <div class="production-row">
-      <div class="production-row-side">
+    <!-- 第一列 -->
+    <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="amountPieData"></chart-amount-pie>
         </pro-board>
       </div>
-      <div class="production-row-middle">
-        <pro-board :title="'重要指标'"></pro-board>
+      <div class="production-column-item">
+        <pro-board :title="'存栏变动'">
+          <chart-amount-line :data="amountLineData"></chart-amount-line>
+        </pro-board>
       </div>
-      <div class="production-row-side">
-        <pro-board :title="'工作看板'"></pro-board>
+      <div class="production-column-item">
+        <pro-board :title="'母猪分布'">
+          <chart-sow-bar :data="amountPieData"></chart-sow-bar>
+        </pro-board>
       </div>
     </div>
-    <div class="production-row">
-      <div>中左</div>
-      <div>中中</div>
-      <div>中右</div>
+
+    <!-- 第二列 -->
+    <div class="production-column production-mid-column">
+      <div class="production-column-item">
+        <pro-board :title="'重要指标'">
+          <important-items :data="importantData"></important-items>
+        </pro-board>
+      </div>
+
+      <div class="production-column-item">
+        <pro-board :title="'销售分析'">
+          <div class="sales">
+            <div class="sales-condition">
+              <el-date-picker
+                v-model="getSalesDates"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right"
+                size="mini">
+              </el-date-picker>
+            </div>
+            <div class="sales-content">
+              <div class="sales-left">
+                <div class="up">
+                  <label>本周销售额</label>
+                  <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>
+                      &nbsp;&nbsp;&nbsp;同比上周
+                      </div>
+                  </div>
+                </div>
+                <div class="down">
+                  <label>本周销售量</label>
+                  <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>
+                      &nbsp;&nbsp;&nbsp;同比上周
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="sales-right">
+                <chart-sales :data="salesChartData"></chart-sales>
+              </div>
+            </div>
+          </div>
+        </pro-board>
+      </div>
+
+      <div class="production-column-item">
+        <pro-board :title="'应收排名'">
+          <ying-shou :data="yingshouData"></ying-shou>
+        </pro-board>
+      </div>
     </div>
-    <div class="production-row">
-      <div>下左</div>
-      <div>下中</div>
-      <div>下右</div>
+
+    <!-- 第三列 -->
+    <div class="production-column production-side-column">
+      <div class="production-column-item">
+        <pro-board :title="'工作看板'">
+          <work-items @workInfo="getWorkInfo(value)"></work-items>
+        </pro-board>
+      </div>
+
+      <!-- 工作看板点击后出现的东西 -->
+      <div class="work-infos" v-show="ifWorkInfos">
+        <div class="kuang">
+          <div class="work-info-title">工作任务</div>
+          <div class="work-info-wrap">
+            <div class="work-info-content">
+              <div class="work-info-content-top">
+                <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>
+                  </div>
+                </div>
+                <div class="work-info-content-condition">
+                  <div class="history-title">发布任务</div>
+                  <div class="condition-content">
+                    <div class="condition-content-item">
+                      <div>执行日期：</div>
+                      <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-option></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="work-info-content-main">
+                <div class="history-title">内容</div>
+                <div class="main-content">发为敬哦i感觉二我i过呢我i蜂窝i返回</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="production-column-item2">
+        <pro-board :title="'成本分析'">
+          <div>
+            <el-select size="mini" style="float: right; margin: 10px 5px 0 0;">
+              <el-option></el-option>
+            </el-select>
+            <!-- 扇形图 -->
+            <chart-cost-pie :data="costPieData"></chart-cost-pie>
+            <!-- 柱状图 -->
+            <chart-cost-line :data="costLineData"></chart-cost-line>
+          </div>
+        </pro-board>
+      </div>
     </div>
   </div>
 </template>
@@ -37,12 +162,20 @@
 <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'
 
 export default {
   name: "Production",
   data() {
     return {
-      AmountPieData: [
+      amountPieData: [
         {
           farmId: 1,
           id: 1,
@@ -109,39 +242,420 @@ export default {
           subareaId: 9,
           year: 2021
         }
-      ]
+      ],
+      amountLineData: {
+        boarStock: [],
+        fatpigStock: [],
+        griceStock: [],
+        month: [],
+        pigletStock: [],
+        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]);
+          }
+        }]
+      },
+      getSalesDates: [], // 获取销售分析的时间
+      weekSales: 1545252,
+      weekSalesChange: 10,
+      weekSalesVolume: 1000,
+      weekSalesVolumeChange: -10,
+      salesChartData: { // 销售图的数据
+        quantitys: [46, 45, 100],
+        sellDates: ["10-20周三", "10-21周四", "10-22周五"]
+      },
+      yingshouData: [
+        { 
+          rate: 1,
+          name: 'XX屠宰有限公司',
+          money: 23515,
+          person: '大概',
+          phone: '1654564654'
+        },
+        { 
+          rate: 2,
+          name: 'XX屠宰有限公司',
+          money: 23515,
+          person: '大概',
+          phone: '1654564654'
+        },
+        { 
+          rate: 3,
+          name: 'XX屠宰有限公司',
+          money: 23515,
+          person: '大概',
+          phone: '1654564654'
+        },
+        { 
+          rate: 4,
+          name: 'XX屠宰有限公司',
+          money: 23515,
+          person: '大概',
+          phone: '1654564654'
+        },
+        { 
+          rate: 5,
+          name: 'XX屠宰有限公司',
+          money: 23515,
+          person: '大概',
+          phone: '1654564654'
+        }
+      ],
+      historyData: [
+        {
+          id: 1,
+          date: '7日12日下午',
+          content: '1000头仔猪进入厂区',
+          person: '李海涛'
+        },
+        {
+          id: 2,
+          date: '7日12日下午',
+          content: '1000头仔猪进入厂区',
+          person: '李海涛'
+        },
+        {
+          id: 3,
+          date: '7日12日下午',
+          content: '1000头仔猪进入厂区',
+          person: '李海涛'
+        },
+        {
+          id: 4,
+          date: '7日12日下午',
+          content: '1000头仔猪进入厂区',
+          person: '李海涛'
+        },
+        {
+          id: 5,
+          date: '7日12日下午',
+          content: '1000头仔猪进入厂区',
+          person: '李海涛'
+        }
+      ],
+      ifWorkInfos: false, // 工作看板点击后出现的工作任务
+      importantData: [
+        {
+          id: 1,
+          name: '产房存活率',
+          num: '99.4%'
+        },
+        {
+          id: 2,
+          name: '保育成活率',
+          num: '99.4%'
+        },
+        {
+          id: 3,
+          name: '育肥成活率',
+          num: '99.4%'
+        },
+        {
+          id: 4,
+          name: '七日内断配率',
+          num: '99.4%'
+        },
+        {
+          id: 5,
+          name: '配种分娩率',
+          num: '99.4%'
+        },
+        {
+          id: 6,
+          name: 'PSY',
+          num: '99.4%'
+        }
+      ],
+      costPieData: [
+        {
+          name: "药品成本",
+          value: 8
+        }, 
+        {
+          name: "出生成本",
+          value: 26
+        },
+        {
+          name: "批次变动成本",
+          value: 12
+        },
+        {
+          name: "初始化成本",
+          value: 12
+        },
+        {
+          name: "公猪成本",
+          value: 10
+        },
+        {
+          name: "饲料成本",
+          value: 52
+        }
+      ],
+
+      costLineData: [32541, 82467, 54363, 64642, 34651, 95422,]
     }
   },
   components: {
     ProBoard,
-    ChartAmountPie
-  }
+    ChartAmountPie,
+    ChartAmountLine,
+    ChartSowBar,
+    ChartSales,
+    YingShou,
+    WorkItems,
+    ImportantItems,
+    ChartCostPie,
+    ChartCostLine
+  },
+  methods: {
+    getWorkInfo(value) { // 工作看板的点击事件
+      console.log(value)
+      this.ifWorkInfos = !this.ifWorkInfos
+    }
+  },
 }
 </script>
 
 <style scoped>
+/* 要删除的东西 */
+.board-bgc {
+  background-color: rgb(226, 144, 144);
+}
+
+
 .production {
   height: 100%;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: relative;
+}
+/* 每一列 */
+.production-column {
+  display: flex;
   flex-direction: column;
+  justify-content: space-between;
+}
+.production-side-column {
+  width: 25%;
+}
+.production-mid-column {
+  width: 45%;
+}
+/* 每一列的每一个面板 */
+.production-column-item {
+  height: 32%;
+}
+.production-column-item2 {
+  height: 66%;
+}
+
+
+/* 销售分析 */
+.sales {
+  position: relative;
+}
+.sales-condition {
+  margin-top: 15px;
+  position: absolute;
+  right: 4px;
+}
+.sales-content {
+  padding-top: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
   justify-content: space-around;
+  color: #fff;
+}
+.sales-left {
+  width: 23%;
+  line-height: 25px;
+  padding-top: 30px;
+}
+.sales-left>.up {
+  margin-bottom: 10px;
+}
+.sales-left>.up>label,
+.sales-left>.down>label {
+  display: block;
+  text-align: center;
+  font-size: 13px;
+}
+.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 {
+  display: flex;
+  justify-content: space-around;
+  font-size: 13px;
+}
+/* 三角形 */
+.triangle-change {
+  display: inline-block;
+  /* width: 4px; */
+  height: 4px;
+  border-style: solid;
+  border-width: 4px;
+  margin-right: 10px;
+}
+.triangle-up {
+  border-color: transparent transparent rgb(238, 16, 16) transparent;
 }
-/* 每一行 */
-.production-row {
-  background-color: #fff;
-  height: 30%;
-  /* 行内布局 */
+.triangle-down {
+  border-color: rgb(12, 202, 12) transparent transparent transparent;
+  position: relative;
+  top: 4px;
+}
+.color-up {
+  color: rgb(238, 16, 16);
+}
+.color-down {
+  color: rgb(12, 202, 12);
+}
+/* 销售情况右侧 */
+.sales-right {
+  width: 77%;
+  /* border-left: 1px solid rgba(228, 228, 228, 1); */
+  /* height: 200px; */
+  /* background-color: #fff; */
+}
+
+/* 工作看板 */
+.work-infos {
+  width: 800px;
+  height: 470px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: rgb(3,16,50);
+}
+.kuang {
   width: 100%;
+  height: 100%;
+  background: url("../../assets/BioSafety/kuang.png") no-repeat;
+  background-size: contain;
+}
+.work-info-title {
+  color: rgb(87, 221, 255);
+  font-weight: bold;
+  font-size: 18px;
+  margin-top: 5px;
+}
+.work-info-wrap {
+  width: 86%;
+  height: 77%;
+  background-color: rgb(4,5,26);
+  margin: 20px auto;
+  padding-top: 2.5%;
+}
+.work-info-content {
+  border: 2px solid rgb(51,153,153);
+  width: 95%;
+  height: 95%;
+  margin: auto;
+}
+.work-info-content-top {
+  display: flex;
+  justify-content: space-around;
+}
+/* 工作任务 —— 历史工作任务 */
+.work-info-content-history {
+  display: inline-block;
+  margin-top: 10px;
+  width: 60%;
+}
+.history-title {
+  color: rgb(87, 221, 255);
+  font-size: 14px;
+}
+.history-content {
+  background-color: rgb(33,41,58);
+  margin: 5px 10px;
+  height: 100px;
+  overflow-y: scroll;
+}
+::-webkit-scrollbar {
+  /*隐藏滚轮*/
+  display: none;
+}
+.history-content-item {
   display: flex;
   justify-content: space-between;
+  color: rgb(87, 221, 255);
 }
-/* 行 —— 两边 */
-.production-row-side {
-  width: 25%;
+.history-content-item:hover {
+  background-color: rgb(25,91,104);
+  cursor: pointer;
 }
-/* 行 —— 中间 */
-.production-row-middle {
-  background-color: rgb(218, 116, 116);
-  width: 45%;
+.history-content-item-data {
+  margin: 5px 10px;
+}
+
+/* 工作任务 —— 发布任务 */
+.work-info-content-condition {
+  display: inline-block;
+  margin-top: 10px;
+  width: 40%;
+}
+.condition-content {
+  width: 100%;
+  height: 100px;
+  margin: 5px 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 10px;
+}
+.condition-content-item {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 30px;
+  color: rgb(87, 221, 255);
+}
+
+/* 工作任务 —— 内容 */
+.work-info-content-main {}
+
+.main-content {
+  background-color: rgb(15,18,38);
+  margin: 10px;
+  height: 130px;
+  color: #fff;
+  padding: 10px;
+  text-align: left;
+  text-indent: 2em;
 }
-</style>
+</style>

src/views/Production/board/ChartAmountLine.vue

@@ -0,0 +1,221 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 10:35:56
+ * @LastEditTime: 2021-10-26 11:09:18
+ * @LastEditors: Please set LastEditors
+ * @Description: 存栏变动
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountLine.vue
+-->
+<template>
+  <div class="chart-inventory-lines">
+    <div id="chartAmountLines"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          top: '22%',
+          left: '10%',
+          bottom: '10%',
+          right: '15%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '月份',
+            nameTextStyle: {
+              color: '#fff'
+            },
+            data: this.data.month,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show: true
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'value',
+            name: '头',
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // },
+            nameTextStyle: {
+              color: '#fff'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        series: [
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: this.data.sowStock,
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: this.data.boarStock,
+            itemStyle: {
+              normal: {
+                color: '#4dcb73',
+                lineStyle: {
+                  color: '#4dcb73'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: this.data.griceStock,
+            itemStyle: {
+              normal: {
+                color: '#fad337',
+                lineStyle: {
+                  color: '#fad337'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: this.data.pigletStock,
+            itemStyle: {
+              normal: {
+                color: '#f2637b',
+                lineStyle: {
+                  color: '#f2637b'
+                }
+              }
+            }
+          },
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: this.data.fatpigStock,
+            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);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartAmountLines'));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-inventory-lines {
+  display: inline-block;
+  width: 100%;
+  height: 220px;
+}
+#chartAmountLines {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/views/Production/board/ChartAmountPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:15:22
- * @LastEditTime: 2021-10-26 09:42:54
+ * @LastEditTime: 2021-10-26 10:54:54
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
@@ -29,13 +29,14 @@ export default {
       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
       let options = {
-        title: {
-          text: '存栏结构',
-          x: 20,
-          y: 20
-        },
+        // title: {
+        //   text: '存栏结构',
+        //   x: 20,
+        //   y: 20
+        // },
         grid: {
-          x: 100
+          // x: 10,
+          // y: 10
         },
         tooltip: {
           trigger: 'item',
@@ -44,15 +45,15 @@ export default {
           }
         },
         legend: {
-          top: '25%',
+          top: '11%',
           left: '55%',
           orient: 'vertical',
           icon: "circle",
           selectedMode: false, // 取消右侧项选中
           itemGap: 20, // 各项间隔
           textStyle: {
-            fontSize: 15,
-            color: '#666'
+            fontSize: 12,
+            color: '#eff'
           },
           formatter: function (name) {
             var legendIndex = 0;
@@ -74,22 +75,24 @@ export default {
         graphic: [
           {
             type: 'text',
-            left: '27%',
-            top: '43%',
+            left: '23%',
+            top: '30%',
             style: {
               text: '总存栏',
               fontSize: 15,
-              fill: 'rgb(192, 188, 189)'
+              fontWeight: 700,
+              fill: '#fff'
             }
           },
           {
             type: 'text',
-            left: '25%',
-            top: '53%',
+            left: '23%',
+            top: '40%',
             style: {
-              text: total + '头',
-              fontSize: 22,
-              fontWeight: 700
+              text: total,
+              fontSize: 24,
+              fontWeight: 700,
+              fill: '#fff'
             }
           }
         ],
@@ -97,8 +100,8 @@ export default {
           {
             name: 'Access From',
             type: 'pie',
-            radius: ['60%', '80%'], // 半径
-            center: ['30%', '55%'],
+            radius: ['45%', '60%'], // 半径
+            center: ['28%', '38%'],
             avoidLabelOverlap: false,
             label: {
               show: false,
@@ -120,7 +123,7 @@ export default {
                   var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
                   return colorList[colors.dataIndex]
                 },
-                borderWidth: 5, // 设置各项空隙
+                borderWidth: 3, // 设置各项空隙，白边
                 borderColor: '#fff'
               }
             },
@@ -153,8 +156,7 @@ export default {
 </script>
 <style scoped>
 .chart-inventory-pie {
-  display: inline-block;
-  width: 45%;
+  width: 100%;
   height: 300px;
 }
 #chartAmountPie {

src/views/Production/board/ChartCostLine.vue

@@ -0,0 +1,178 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 17:53:37
+ * @LastEditTime: 2021-10-26 18:05:33
+ * @LastEditors: Please set LastEditors
+ * @Description: 成本分析柱状图
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostLine.vue
+-->
+<template>
+  <div class="cost-histogram">
+    <div id="costHistogram"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value',
+            name: '元',
+            boundaryGap: [0, 0.01],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'category',
+            inverse: true,
+            // axisLabel: {
+            //   // formatter: '{value} °C'
+            //   show: true
+            // },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            // axisTick:{
+            //   show:false
+            // },
+            // splitLine:{
+            //   show:false
+            // }
+          },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        // dataset: [
+        //   {
+        //     dimensions: ['num'],
+        //     source: [
+        //       [32541],
+        //       [82467],
+        //       [54363],
+        //       [64642], 
+        //       [40257], 
+        //       [95422]
+        //     ]
+        //   },
+        //   {
+        //     transeform: {
+        //       type: 'sort',
+        //       config: {
+        //         dimension: 'num',
+        //         order: 'desc'
+        //       }
+        //     }
+        //   }
+        // ],
+        series: [
+          {
+            // name: '头',
+            type: 'bar',
+            data: this.data,
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
+                  return colorList[colors.dataIndex]
+                },
+                label: {
+                  show: true,
+                  position: 'right'
+                }
+              },
+              textStyle: {
+                show: true
+              },
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('costHistogram'));
+    this.init();
+  },
+  watch: {
+    data(value) {
+      console.log('成本分析柱状图数据', value)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+.cost-histogram {
+  display: inline-block;
+  width: 90%;
+  height: 200px;
+}
+#costHistogram {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Production/board/ChartCostPie.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 17:53:30
+ * @LastEditTime: 2021-10-26 18:04:09
+ * @LastEditors: Please set LastEditors
+ * @Description: 成本分析扇形图
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostPie.vue
+-->
+<template>
+  <div class="cost-pie">
+    <div id="chartCostPie"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          x: 100
+        },
+        // legend: {
+        //   top: '25%',
+        //   left: '75%',
+        //   orient: 'vertical',
+        //   icon: "circle",
+        //   selectedMode: false, // 取消右侧项选中
+        //   itemGap: 20, // 各项间隔
+        //   textStyle: {
+        //     fontSize: 15,
+        //     color: '#666'
+        //   },
+        // },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: '70%', // 半径
+            center: ['48%', '55%'],
+            avoidLabelOverlap: false,
+            labelLine: {
+              show: true
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
+                  return colorList[colors.dataIndex]
+                },
+                label: {
+                  formatter: '{b}: {c}%'
+                }
+              },
+              label: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  formatter: '{b}: {c}%',
+                  textStyle: {
+                    fontSize: '15',
+                  }
+                },
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+            },
+            data: this.data
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartCostPie'));
+    this.init()
+  },
+  watch: {
+    data(value) {
+      console.log('成本分析环形图数据', value)
+      this.init()
+    }
+  }
+}
+</script>
+<style scoped>
+.cost-pie {
+  display: inline-block;
+  width: 100%;
+  height: 200px;
+}
+#chartCostPie {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Production/board/ChartSales.vue

@@ -0,0 +1,180 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 13:37:46
+ * @LastEditTime: 2021-10-26 14:15:40
+ * @LastEditors: Please set LastEditors
+ * @Description: 销售分析图
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartSales.vue
+-->
+<template>
+  <div class="sales-chart">
+    <div id="salesChart"></div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: "ChartWater",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    // dataValue: {
+    //   type: Array,
+    //   default: () => [100, 75, 120, 200, 110, 40, 60]
+    // }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  methods: {
+    init() {
+      let dataAxis = this.data.sellDates
+      let start = dataAxis.length - 12;
+      let end = dataAxis.length - 1;
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: ['#289df5'],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+          // zoomOnMouseWheel: false,
+          // zoomLock: true,
+        }],
+        grid: {
+          left: 30,
+          right: '10%',
+          top: '20%',
+          bottom: '15%'
+          // bottom: '30%',
+          // containLabel: true
+        },
+        // dataZoom: [
+        //
+        //   {
+        //     type: 'slider',
+        //     startValue: start,
+        //     endValue:end,
+        //     zoomOnMouseWheel: false,
+        //     zoomLock: true,
+        //   },
+        //   {
+        //     type: 'inside'
+        //   },
+        // ],
+        xAxis: [
+          {
+            type: 'category',
+            data: dataAxis,
+            boundaryGap: false,
+            axisPointer: {
+              type: 'none'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(102,255,255)',
+              }
+            },
+            axisTick: {
+              show: false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // name: '近周销售情况',
+            axisLabel: {
+              // formatter: '{value} 头'
+              show: true
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgb(102,255,255)',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: '销售',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: '#289df5',
+              borderColor: '#289df5',
+              normal: {
+                label : {
+                  show: false,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                },
+                areaStyle: {
+                  type: 'default',
+                  opacity: 0.2
+                }
+              }
+            },
+            data: this.data.quantitys
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('salesChart'));
+    this.init()
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    },
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.sales-chart {
+  width: 100%;
+  height: 100%;
+}
+#salesChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Production/board/ChartSowBar.vue

@@ -0,0 +1,156 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 11:02:38
+ * @LastEditTime: 2021-10-26 11:09:54
+ * @LastEditors: Please set LastEditors
+ * @Description: 母猪分布
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartSowBar.vue
+-->
+<template>
+  <div class="chart-inventory-lines">
+    <div id="chartSowBar"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          top: '22%',
+          left: '10%',
+          bottom: '10%',
+          right: '15%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            // name: '月份',
+            // nameTextStyle: {
+            //   color: '#fff'
+            // },
+            data: this.data.month,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show: true
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'value',
+            name: '头',
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // },
+            nameTextStyle: {
+              color: '#fff'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        series: [
+          {
+            name: '头',
+            type: 'bar',
+            data: this.data,
+            itemStyle: {
+              normal: {
+                color: '#3aa0ff',
+                lineStyle: {
+                  color: '#3aa0ff'
+                }
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartSowBar'));
+    this.init();
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-inventory-lines {
+  display: inline-block;
+  width: 100%;
+  height: 220px;
+}
+#chartSowBar {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/Production/board/ImportantItems.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 17:34:46
+ * @LastEditTime: 2021-10-26 17:50:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 重要指标
+ * @FilePath: \hyyfScreen\src\views\Production\board\ImportantItems.vue
+-->
+<template>
+  <div class="important-items">
+    <div class="item" v-for="item in data" :key="item.id">
+      <div class="name">{{ item.name }}</div>
+      <div class="num">{{ item.num }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+<style scoped>
+.important-items {
+  margin: 0 auto;
+  width: 95%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between
+}
+.item {
+  width: 30%;
+  background: url("../../../assets/BioSafety/base.jpg") no-repeat;
+  height: 70px;
+  background-size: 100% 100%;
+  margin-top: 30px;
+  color: #fff;
+}
+.name {
+  text-align: left;
+  margin: 10px 0 0 10px;
+  font-size: 15px;
+}
+.num {
+  font-size: 20px;
+}
+</style>

src/views/Production/board/ProBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:03:16
- * @LastEditTime: 2021-10-26 09:43:39
+ * @LastEditTime: 2021-10-26 09:58:30
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营 - 面板
  * @FilePath: \hyyfScreen\src\views\Production\board\ProBoard.vue
@@ -32,7 +32,7 @@ export default {
 .pro-board {
   width: 100%;
   height: 100%;
-  background-color: rgb(8, 204, 8);
+  /* background-color: rgb(8, 204, 8); */
 }
 
 /* 标题 */

src/views/Production/board/WorkItemBgc.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 15:56:39
+ * @LastEditTime: 2021-10-26 16:03:59
+ * @LastEditors: Please set LastEditors
+ * @Description: 工作看板icon的底图
+ * @FilePath: \hyyfScreen\src\views\Production\board\WorkItemBgc.vue
+-->
+<template>
+  <div class="work-item-bgc">
+    <div class="icon1"></div>
+    <div class="icon2"></div>
+    <div class="icon3"></div>
+    <div class="icon4"></div>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style scoped>
+.work-item-bgc {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.icon1 {
+  width: 50%;
+  height: 50%;
+  float: left;
+  background: url("../../../assets/Production/u5363.svg") no-repeat;
+}
+.icon2 {
+  width: 50%;
+  height: 50%;
+  float: right;
+  background: url("../../../assets/Production/u5362.svg") no-repeat;
+}
+.icon3 {
+  width: 50%;
+  height: 50%;
+  float: left;
+  background: url("../../../assets/Production/u5360.svg") no-repeat;
+}
+.icon4 {
+  width: 50%;
+  height: 50%;
+  float: right;
+  background: url("../../../assets/Production/u5361.svg") no-repeat;
+}
+</style>

src/views/Production/board/WorkItems.vue

@@ -0,0 +1,152 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 14:46:34
+ * @LastEditTime: 2021-10-26 17:32:27
+ * @LastEditors: Please set LastEditors
+ * @Description: 工作看板
+ * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
+-->
+<template>
+  <div class="work-items">
+    <div class="content">
+      <div class="item" @click="getWorkInfo(1)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon1"></div>
+        </div>
+        <div class="name">预警信息</div>
+      </div>
+      <div class="item" @click="getWorkInfo(5)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon2"></div>
+        </div>
+        <div class="name">待配种</div>
+      </div>
+      <div class="item" @click="getWorkInfo(3)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon3"></div>
+        </div>
+        <div class="name">待分娩</div>
+      </div>
+      <div class="item" @click="getWorkInfo(4)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon4"></div>
+        </div>
+        <div class="name">待断奶</div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="item" @click="getWorkInfo(5)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon5"></div>
+        </div>
+        <div class="name">日常计划</div>
+      </div>
+      <div class="item" @click="getWorkInfo(6)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon6"></div>
+        </div>
+        <div class="name">转舍记录</div>
+      </div>
+      <div class="item" @click="getWorkInfo(7)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon7"></div>
+        </div>
+        <div class="name">保健计划</div>
+      </div>
+      <div class="item" @click="getWorkInfo(8)">
+        <div class="icon">
+          <work-item-bgc></work-item-bgc>
+          <div class="real-icon real-icon8"></div>
+        </div>
+        <div class="name">免疫计划</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import WorkItemBgc from './WorkItemBgc.vue'
+
+export default {
+  components: {
+    WorkItemBgc
+  },
+  methods: {
+    getWorkInfo(value) {
+      this.$emit('workInfo', value)
+    }
+  },
+}
+</script>
+<style scoped>
+.work-items {
+  width: 100%;
+  height: 100%;
+  /* color: #fff; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background: rgb(3,16,50);
+}
+.content {
+  padding: 10px 0;
+  height: 90px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.item {
+  width: 21%;
+  cursor: pointer;
+}
+/* 图案 */
+.icon {
+  width: 80%;
+  height: 80%;
+  margin-left: 10%;
+  position: relative;
+}
+.real-icon {
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  top: calc(15%);
+  left: calc(15%);
+}
+.real-icon1 {
+  background: url("../../../assets/Production/u5380.svg") no-repeat;
+}
+.real-icon2 {
+  background: url("../../../assets/Production/u5364.svg") no-repeat;
+}
+.real-icon3 {
+  background: url("../../../assets/Production/u5396.svg") no-repeat;
+}
+.real-icon4 {
+  background: url("../../../assets/Production/u5412.svg") no-repeat;
+}
+.real-icon5 {
+  background: url("../../../assets/Production/u5444.svg") no-repeat;
+}
+.real-icon6 {
+  background: url("../../../assets/Production/u5428.svg") no-repeat;
+}
+.real-icon7 {
+  background: url("../../../assets/Production/u5460.svg") no-repeat;
+}
+.real-icon8 {
+  background: url("../../../assets/Production/u5477.svg") no-repeat;
+}
+
+.name {
+  color: #fff;
+  margin-top: 8px;
+  font-size: 14px;
+}
+</style>

src/views/Production/board/YingShou.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-26 14:18:22
+ * @LastEditTime: 2021-10-26 14:43:50
+ * @LastEditors: Please set LastEditors
+ * @Description: 应收排名
+ * @FilePath: \hyyfScreen\src\views\Production\board\YingShou.vue
+-->
+<template>
+  <div class="ying-shou">
+    <div class="content">
+      <div class="title">
+        <div class="item">排名</div>
+        <div class="item">名称</div>
+        <div class="item">金额</div>
+        <div class="item">联系人</div>
+        <div class="item">联系电话</div>
+      </div>
+      <div v-for="item in data" :key="item.rate" class="data">
+        <div class="item">{{ item.rate }}</div>
+        <div class="item">{{ item.name }}</div>
+        <div class="item grey">{{ item.money }}</div>
+        <div class="item grey">{{ item.person }}</div>
+        <div class="item grey">{{ item.phone }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+<style scoped>
+.ying-shou {
+  color: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  margin-top: 20px;
+  height: 20%;
+  display: flex;
+  font-size: 15px;
+}
+.item {
+  width: 20%;
+}
+
+.data {
+  height: 15%;
+  display: flex;
+  font-size: 13px;
+}
+.grey {
+  color: #bbb;
+}
+</style>

src/views/Zoology/Zoology.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-10-26 09:48:57
+ * @LastEditTime: 2021-10-26 16:27:51
  * @LastEditors: Please set LastEditors
  * @Description: 生态监测页面
  * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue