完成统计分析下三个模块

src/aaaaaaaa.vue

@@ -1,5 +1,15 @@
 <template>
     <div>
+        <article class="left">
+                <div class="contianer">
+                    <el-carousel height="300px" indicator-position="none" :interval="1800">
+                        <el-carousel-item v-for="(item, index) in empty.a" :key="item + index">
+                            <img :src="item.url" />
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
+            </article>
+            
         <el-form>
             <el-form-item label="当前位置">
                 <el-select v-model="formData.position" filterable placeholder="请选择">

src/api/statisticAnalysis.js

@@ -0,0 +1,11 @@
+import { ajax } from "../sdk/ajax";
+// 统计分许
+
+/* PSY分析 */
+export const reqPSY = () => ajax("post", "/farm-piglet/psy-analysis/get-data")
+
+/* 出栏预测 */
+export const reqCrop = (data) => ajax("post", "/farm-piglet/fence-out-prediction/list-area", data)
+
+/* 生产复盘 */
+export const reqProductRetrospect = () => ajax("post", "/farm-piglet/production-traceability/list-week")

src/assets/css/reset.scss

@@ -2,4 +2,10 @@
 div,h1,h2,h3,h4,h5,h3,body,html,ul,li,p{margin: 0;padding: 0;}
 a{text-decoration: none;}
 li{list-style:none;} 
+// 产床详情的圆形进度条的文本
+.el-progress__text{
+    padding: 0 20px;
+    box-sizing: border-box;
+    line-height: 35px;
+}
 /*css初始化完成*/

src/router/routes.js

@@ -1,12 +1,15 @@
 import Home from '../views/Home/Home.vue'
 /* 首页 UnityTrace */
 import Index from '@/views/index/Index.vue'
-import DeliveryRoom from '@/views/deliveryRoomManagement/DeliveryRoom.vue'
+/* 产床管理 */
+import deliveryRoom from '@/views/deliveryRoomManagement/deliveryRoom.vue'
 import Detail from '@/views/deliveryRoomManagement/detail/Detail.vue'
+import deliveryBedBind from '@/views/deliveryRoomManagement/deliveryBedBind.vue'
+import deliveryRoomConfig from '@/views/deliveryRoomManagement/deliveryRoomConfig.vue'
 /* 统计分许 */
 import PSY from '@/views/statisticAnalysis/PSY.vue'
 import Crop from '@/views/statisticAnalysis/Crop.vue'
-import back from '@/views/statisticAnalysis/back.vue'
+import productRetrospect from '@/views/statisticAnalysis/productRetrospect.vue'
 /* 消息通知 */
 import productionWarn from '@/views/infoInform/productionWarn.vue'
 import deviceFault from '@/views/infoInform/deviceFault.vue'
@@ -38,15 +41,25 @@ export default [
 			},
 			// 产床管理
 			{
-				path: 'DeliveryRoom',
-				name: 'DeliveryRoom',
-				component: DeliveryRoom
+				path: 'deliveryRoom',
+				name: 'deliveryRoom',
+				component: deliveryRoom
 			},
 			{
 				path: 'Detail',
 				name: 'Detail',
 				component: Detail
 			},
+			{
+				path: 'deliveryBedBind',
+				name: 'deliveryBedBind',
+				component: deliveryBedBind
+			},
+			{
+				path: 'deliveryRoomConfig',
+				name: 'deliveryRoomConfig',
+				component: deliveryRoomConfig
+			},
 			// 统计分许
 			{
 				path: 'PSY',
@@ -59,9 +72,9 @@ export default [
 				component: Crop
 			},
 			{
-				path: 'back',
-				name: 'back',
-				component: back
+				path: 'productRetrospect',
+				name: 'productRetrospect',
+				component: productRetrospect
 			},
 			/* 消息通知 */
 			{

src/views/Home/Home.vue

@@ -53,27 +53,26 @@
                         text-color="#fff"
                         active-text-color="#ffd04b"
                     >
-                        <div v-for="(item) in menuData " :key="item.index">
+                        <div v-for="(item, index1) in menuData " :key="index1">
                             <el-submenu
                                 v-if="item.childList && item.childList.length > 0"
-                                :index="item.index"
+                                :index="`${index1}`"
                             >
                                 <template slot="title">
                                     <i :class="item.iconClassName"></i>
                                     <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
-                                    <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
                                 </template>
                                 <el-menu-item
-                                    v-for="(item1) in item.childList"
-                                    :key="item1.index"
-                                    :index="item1.index"
+                                    v-for="(item1, index2) in item.childList"
+                                    :key="`${index1}-${index2}`"
+                                    :index="`${index1}-${index2}`"
                                     :routerName="item1.routerName"
                                     @click="onClickMenu(item1)"
                                 >{{ item1.optionName }}</el-menu-item>
                             </el-submenu>
                             <el-menu-item
                                 v-else
-                                :index="item.index"
+                                :index="`${index1}`"
                                 :disabled="item.disabled"
                                 :routerName="item.routerName"
                                 @click="onClickMenu(item)"

src/views/Home/mencCofig.js

@@ -3,33 +3,27 @@ export const menuData = [
         optionName: "首页",
         iconClassName: "el-icon-s-home",
         routerName: "Index",
-        index: '-1',
         disabled: false
     },
     {
         optionName: "产床管理",
         iconClassName: "el-icon-setting",
-        index: '1',
         disabled: false, // 是否禁用
         childList: [
             {
                 optionName: '产房信息',
-                index: '1-1',
-                routerName: "DeliveryRoom"
+                routerName: "deliveryRoom"
             },
-            // {
-            //     optionName: '牧场信息',
-            //     index: '1-2',
-            //     routerName: "aa"
-            // },
-            // {
-            //     optionName: '猪舍信息',
-            //     index: '1-3',
-            //     routerName: "aa"
-            // },
+            {
+                optionName: '产房配置',
+                routerName: "deliveryRoomConfig"
+            },
+            {
+                optionName: '产床绑定',
+                routerName: "deliveryBedBind"
+            }
             // {
             //     optionName: '人员信息',
-            //     index: '1-4',
             //     routerName: "aa"
             // }
 
@@ -38,23 +32,19 @@ export const menuData = [
     {
         optionName: "统计分析",
         iconClassName: "el-icon-s-flag",
-        index: '2',
         disabled: false,
         childList: [
             {
                 optionName: 'PSY分析',
-                index: '2-1',
                 routerName: "PSY"
             },
             {
                 optionName: '出栏预测',
-                index: '2-2',
                 routerName: "Crop"
             },
             {
-                optionName: '反推',
-                index: '2-3',
-                routerName: "back"
+                optionName: '生产复盘',
+                routerName: "productRetrospect"
             }
             
         ]
@@ -63,17 +53,14 @@ export const menuData = [
     {
         optionName: "消息通知",
         iconClassName: "el-icon-s-flag",
-        index: '21',
         disabled: false,
         childList: [
             {
                 optionName: '生产预警',
-                index: '21-1',
                 routerName: "productionWarn"
             },
             {
                 optionName: '设备故障',
-                index: '21-2',
                 routerName: "deviceFault"
             },
         ]
@@ -81,17 +68,14 @@ export const menuData = [
     {
         optionName: "系统配置",
         iconClassName: "el-icon-coordinate",
-        index: '4',
         disabled: false,
         childList: [
             {
                 optionName: '设备配置',
-                index: '4-1',
                 routerName: "deviceConfig"
             },
             {
                 optionName: '软件配置',
-                index: '4-2',
                 routerName: "softwareSet"
             }
         ]
@@ -99,12 +83,10 @@ export const menuData = [
     {
         optionName: "档案信息",
         iconClassName: "el-icon-monitor",
-        index: '5',
         disabled: false, // 是否禁用
         childList: [
             {
                 optionName: '牧场配置',
-                index: '5-2',
                 routerName: "prairieConfig"
             }
         ]
@@ -122,11 +104,9 @@ const menuData描述 = [
     {
         oneMenuName: "导航一", // 一级菜单名
         iconClassName: "aaa", // element-ui图标名
-        index: '1', // 唯一标志
         childList: [ // 分组的
             {
                 groupName: '组名一',
-                index: '1-1-1',
                 list: [
                     {
                         optionName: '选项1',
@@ -137,7 +117,6 @@ const menuData描述 = [
             },
             {
                 groupName: '组名二',
-                index: '1-1-2',
                 list: [
                     {
                         optionName: '选项1',
@@ -152,12 +131,10 @@ const menuData描述 = [
     {
         oneMenuName: "导航二",
         iconClassName: "el-icon-menu",
-        index: '2',
         disabled: false, // 是否禁用
         childList: [ // 不分组的
             {
                 optionName: '选项1',
-                index: '2-1',
                 routerName: "home"
             },
             {}
@@ -168,7 +145,6 @@ const menuData描述 = [
         oneMenuName: "导航三",
         iconClassName: "el-icon-document",
         routerName: "home",
-        index: '3',
         disabled: false
     },
 

src/views/deliveryRoomManagement/DeliveryRoom.vue

@@ -29,7 +29,7 @@
         <section class="section">
             <ul class="ul">
                 <li
-                    @click="toDetail(item.type, '产房00'+(index+1))"
+                    @click="toDetail(item.type, '产床00'+(index+1))"
                     class="li"
                     v-for="(item, index) in list"
                     :key="index"

src/views/deliveryRoomManagement/deliveryBedBind.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="deliveryBedBind">
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">产床绑定</h2>
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table :data="tableData" border style="width: 100%">
+                    <el-table-column prop="aa" sortable label="母猪编号" width="180"></el-table-column>
+                    <el-table-column prop="ab" sortable label="绑定日期" width="180"></el-table-column>
+                    <el-table-column prop="ac" sortable label="产床编号"></el-table-column>
+                    <el-table-column prop="ad" sortable label="操作人"></el-table-column>
+                    <el-table-column prop="ae" label="位置"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <!-- <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> -->
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :total="1000"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+const pageSize = 10;
+
+export default {
+    name: 'deliveryBedBind',
+    data() {
+        return {
+            value: "",
+            tableData: [
+                {
+                    aa: "1924",
+                    ab: "2020-08-01",
+                    ac: "210",
+                    ad: "1",
+                    ae: "分娩01舍"
+                },
+                {
+                    aa: "2054",
+                    ab: "2020-08-01",
+                    ac: "285",
+                    ad: "2",
+                    ae: "分娩10舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩54舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩48舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩65舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩72舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩18舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩16舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩24舍"
+                }
+            ]
+        };
+    },
+    created() {},
+    methods: {
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p)
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/deliveryRoomManagement/deliveryRoomConfig.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="deliveryRoomConfig">
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">产房配置</h2>
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table :data="tableData" border style="width: 100%">
+                    <el-table-column prop="aa" sortable label="产床编号" width="180"></el-table-column>
+                    <el-table-column prop="ab" sortable label="安装日期" width="180"></el-table-column>
+                    <el-table-column prop="ac" sortable label="设备名称"></el-table-column>
+                    <el-table-column prop="ad" sortable label="设备编号"></el-table-column>
+                    <el-table-column prop="ae" label="位置"></el-table-column>
+                    <el-table-column prop="ad" label="状态"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">查看</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :total="1000"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
+    </div>
+</template>
+
+<script>
+const pageSize = 10;
+
+export default {
+    name: 'deliveryRoomConfig',
+    data() {
+        return {
+            value: "",
+            tableData: [
+                {
+                    aa: "1924",
+                    ab: "2020-08-01",
+                    ac: "210",
+                    ad: "1",
+                    ae: "分娩01舍"
+                },
+                {
+                    aa: "2054",
+                    ab: "2020-08-01",
+                    ac: "285",
+                    ad: "2",
+                    ae: "分娩10舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩54舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩48舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩65舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩72舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩18舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩16舍"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "分娩24舍"
+                }
+            ]
+        };
+    },
+    created() {},
+    methods: {
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p)
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/deliveryRoomManagement/detail/Detail.vue

@@ -2,228 +2,140 @@
     <div class="Detail">
         <header class="header">
             <el-page-header @back="goBack" content="产床信息" />
-            <div class="title">
-                <h4></h4>
-                <span class="title">{{ $route.query.roomNum }}</span>
-                <el-date-picker
-                    v-model="date"
-                    @change="pickerChange"
-                    type="date"
-                    value-format="yyyy-MM-dd"
-                    :picker-options="pickerOptions"
-                    placeholder="选择日期"
-                ></el-date-picker>
-            </div>
+            <el-row type="flex" align="middle">
+                <el-col :span="8" style="text-align:right;">
+                    <h2 class="title" style="color:#444">{{ $route.query.roomNum }}</h2>
+                </el-col>
+                <el-col :span="6" style="text-align:right;">
+                    <div>
+                        <el-date-picker
+                            v-model="date"
+                            @change="pickerChange"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="选择日期"
+                        ></el-date-picker>
+                    </div>
+                </el-col>
+                <el-col :span="2" style="text-align:right;">
+                    <el-link type="primary" @click="toSowDetail">查看母猪信息</el-link>
+                </el-col>
+            </el-row>
         </header>
 
         <section class="section">
-            <article class="left">
-
-                <div v-if="roomType==1||roomType==2" class="contianer">
-                    <el-carousel height="300px" indicator-position="none" :interval="1800">
-                        <el-carousel-item v-for="(item, index) in empty.a" :key="item + index">
-                            <img :src="item.url" />
-                        </el-carousel-item>
-                    </el-carousel>
+            <article class="video">
+                <!-- <div>母猪情况【母猪耳标、上床时间、预计产仔】【断奶时间】</div> -->
+                <div class="mainInfo">
+                    <ul>
+                        <li>
+                            <span class="titel">母猪耳标：</span>
+                            <el-link class="content" type="primary" @click="isShow=true">{{ 1239 }}</el-link>
+                        </li>
+                        <li>
+                            <span class="titel">上床时间：</span>
+                            <span class="content">{{ '2020-08-18' }}</span>
+                        </li>
+                        <li>
+                            <span class="titel">预计产仔：</span>
+                            <span class="content">{{ '2020-10-18' }}</span>
+                        </li>
+                    </ul>
                 </div>
-
-                <div v-else-if="$route.query.type==3||$route.query.type==4" class="contianer">
-                    <el-carousel height="300px" indicator-position="none" :interval="1800">
-                        <el-carousel-item v-for="(item, index) in number.a" :key="item + index">
-                            <img @click="toSowDetail(index)" :src="item" />
+                <!-- <div>
+                    <ul>99</ul>
+                </div> -->
+            </article>
+            <article class="pigletInfo">
+                <h3 class="title">
+                    <span>猪仔情况</span>
+                    <span>生产时间：2020-07-25</span>
+                </h3>
+                <div class="content">
+                    <el-progress
+                        type="circle"
+                        :percentage="100"
+                        :stroke-width="22"
+                        :format="format.f1"
+                        :width="200"
+                    ></el-progress>
+                    <el-progress
+                        type="circle"
+                        :percentage="100"
+                        :stroke-width="22"
+                        :format="format.f2"
+                        color="#6AD288"
+                        :width="200"
+                    ></el-progress>
+                    <el-progress
+                        type="circle"
+                        :percentage="100"
+                        :stroke-width="22"
+                        :format="format.f3"
+                        color="#FCDA56"
+                        :width="200"
+                    ></el-progress>
+                    <el-progress
+                        type="circle"
+                        :percentage="100"
+                        :stroke-width="22"
+                        :format="format.f4"
+                        color="#FF2727"
+                        :width="200"
+                    ></el-progress>
+                    <el-progress
+                        type="circle"
+                        :percentage="90"
+                        :stroke-width="22"
+                        :format="format.f5"
+                        color="#FCDA56"
+                        :width="200"
+                    ></el-progress>
+                </div>
+            </article>
+            <article class="carousel">
+                <div class="contianer">
+                    <el-carousel height="400px" indicator-position="none" :interval="3000">
+                        <el-carousel-item v-for="(item, index) in empty.a" :key="item + index">
+                            <img :src="item" style="width:100%" />
                         </el-carousel-item>
                     </el-carousel>
                 </div>
-
-                <div v-else class="contianer">
-                    <el-carousel height="300px" indicator-position="none" :interval="1800">
-                        <el-carousel-item v-for="(item, index) in number.a" :key="item + index">
-                            <img @click="toSowDetail(index)" :src="item" />
+                <div class="contianer">
+                    <el-carousel height="400px" indicator-position="none" :interval="3000">
+                        <el-carousel-item v-for="(item, index) in empty.a" :key="item + index">
+                            <img :src="item" style="width:100%" />
                         </el-carousel-item>
                     </el-carousel>
                 </div>
             </article>
-
-            <article class="right">
-                <ul class="ul" v-if="roomType==1">
-                    <li class="li">
-                        <span class="title">产仔数：</span>
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">活仔数：</span>
-                        <!-- 小于等于八只的标红 -->
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">存活率：</span>
-                        <!-- 小于等于80%的标红 -->
-                        <span class="content" style="font-size: 26px">100%</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">猪仔日龄：</span>
-                        <span class="content" style="font-size: 26px">{{0}}天</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">产床状态：</span>
-                        <span class="content">空</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">出生日期：</span>
-                        <span class="content"></span>
-                    </li>
-                    <li class="li">
-                        <span class="title">预计断奶剩余天数：</span>
-                        <span class="content"></span>
-                    </li>
-                </ul>
-                <ul class="ul" v-else-if="roomType==2">
-                    <li class="li">
-                        <span class="title">产仔数：</span>
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">活仔数：</span>
-                        <!-- 小于等于八只的标红 -->
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">存活率：</span>
-                        <!-- 小于等于80%的标红 -->
-                        <span class="content" style="font-size: 26px">100%</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">猪仔日龄：</span>
-                        <span class="content" style="font-size: 26px">{{0}}天</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">产床状态：</span>
-                        <span class="content">空</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">出生日期：</span>
-                        <span class="content"></span>
-                    </li>
-                    <li class="li">
-                        <span class="title">预计断奶剩余天数：</span>
-                        <span class="content"></span>
-                    </li>
-                </ul>
-                <ul class="ul" v-else-if="roomType==3">
-                    <li class="li">
-                        <span class="title">产仔数：</span>
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">活仔数：</span>
-                        <!-- 小于等于八只的标红 -->
-                        <span class="content" style="font-size: 26px">{{0}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">存活率：</span>
-                        <!-- 小于等于80%的标红 -->
-                        <span class="content" style="font-size: 26px">100%</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">猪仔日龄：</span>
-                        <span class="content" style="font-size: 26px">{{0}}天</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">产床状态：</span>
-                        <span class="content">空</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">出生日期：</span>
-                        <span class="content"></span>
-                    </li>
-                    <li class="li">
-                        <span class="title">预计断奶剩余天数：</span>
-                        <span class="content"></span>
-                    </li>
-                </ul>
-                <ul class="ul" v-else>
-                    <li class="li">
-                        <span class="title">产仔数：</span>
-                        <span class="content" style="font-size: 26px">{{12}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">活仔数：</span>
-                        <!-- 小于等于八只的标红 -->
-                        <span class="content" style="font-size: 26px">{{12}}只</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">存活率：</span>
-                        <!-- 小于等于80%的标红 -->
-                        <span class="content" style="font-size: 26px">100%</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">猪仔日龄：</span>
-                        <span class="content" style="font-size: 26px">{{7}}天</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">产床状态：</span>
-                        <span class="content">已产仔</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">出生日期：</span>
-                        <span class="content">2020-07-23</span>
-                    </li>
-                    <li class="li">
-                        <span class="title">预计断奶剩余天数：</span>
-                        <span class="content">19天</span>
-                    </li>
-                </ul>
+            <article class="charts">
+                <div>
+                    <E-Con-T :dataArr="dataArr" :timeArr="timeArr"></E-Con-T>
+                </div>
+                <div>
+                    <E-Sow-T :dataArr="dataArr" :timeArr="timeArr"></E-Sow-T>
+                </div>
+                <div>
+                    <E-Env-T :dataArr="dataArr" :timeArr="timeArr"></E-Env-T>
+                </div>
+                <div>
+                    <E-Ele-T :dataArr="dataArr" :timeArr="timeArr"></E-Ele-T>
+                </div>
             </article>
         </section>
 
-        <footer class="footer">
-            <div class="h">
-                <chart-a :dataArr="hoursD" :timeArr="hoursT"></chart-a>
-            </div>
-            <div class="d">
-                <chart-b :dataArr="daysD" :timeArr="daysT"></chart-b>
-            </div>
-        </footer>
-        <!-- :title="'共有 '+number.count[index] + ' 头小猪'" -->
-        <el-dialog :visible.sync="show" center>
-            <template #title>
-                <span style="color: #444">
-                    共有
-                    <span style="font-size: 25px; font-weight:600">{{number.count[index]}}</span> 头小猪
-                </span>
-            </template>
-            <img style="width: 100%" :src="number.a1[index]" alt />
+        <el-dialog title="母猪信息" :visible.sync="isShow" width="40%">
+            母猪信息
         </el-dialog>
     </div>
 </template>
 
 <script>
-import chart_a from "./charts/chart_a";
-import chart_b from "./charts/chart_b";
-
-import a1 from "../../../assets/img/1.jpg";
-import a2 from "../../../assets/img/2.jpg";
-import a3 from "../../../assets/img/3.jpg";
-import a4 from "../../../assets/img/4.jpg";
-import a5 from "../../../assets/img/5.jpg";
-
-import aa1 from "../../../assets/img/a1.jpg";
-import aa2 from "../../../assets/img/a2.jpg";
-import aa3 from "../../../assets/img/a3.jpg";
-import aa4 from "../../../assets/img/a4.jpg";
-import aa5 from "../../../assets/img/a5.jpg";
-
-import b1 from "../../../assets/img/1.jpg";
-import b2 from "../../../assets/img/2.jpg";
-import b3 from "../../../assets/img/3.jpg";
-import b4 from "../../../assets/img/4.jpg";
-import b5 from "../../../assets/img/5.jpg";
-
-import ba1 from "../../../assets/img/a1.jpg";
-import ba2 from "../../../assets/img/a2.jpg";
-import ba3 from "../../../assets/img/a3.jpg";
-import ba4 from "../../../assets/img/a4.jpg";
-import ba5 from "../../../assets/img/a5.jpg";
+import EConT from "./charts/EConT";
+import EEleT from "./charts/EEleT";
+import EEnvT from "./charts/EEnvT";
+import ESowT from "./charts/ESowT";
 
 import empty1 from "../../../assets/img/empty1.jpg";
 import empty2 from "../../../assets/img/empty2.jpg";
@@ -268,58 +180,46 @@ const pickerOptions = {
         }
     ]
 };
+const format = {
+    f1(percentage) {
+        return `产仔数:${14}`;
+    },
+    f2(percentage) {
+        return `活仔数:${14}`;
+    },
+    f3(percentage) {
+        return `存活率:${percentage}%`;
+    },
+    f4(percentage) {
+        return `预计断奶剩余天数:${30}`;
+    },
+    f5(percentage) {
+        return `仔猪日龄:${30}`;
+    }
+};
 
 export default {
     name: "Detail",
     components: {
-        "chart-a": chart_a,
-        "chart-b": chart_b
+        EConT,
+        EEleT,
+        EEnvT,
+        ESowT
     },
     data() {
         return {
             date: "",
-            pickerOptions,
-            images: [],
-            hoursD: [],
-            hoursT: [],
-            daysD: [],
-            daysT: [],
-            value: {},
-            number: {
-                a: [a1, a2, a3, a4, a5],
-                a1: [aa1, aa2, aa3, aa4, aa5],
-                count: [13, 10, 13, 14, 13]
-            },
-            numberB: {
-                a: [b1, b2, b3, b4, b5],
-                a1: [ba1, ba2, ba3, ba4, ba5],
-                count: [13, 10, 13, 14, 13]
-            },
+            format,
             empty: {
                 a: [empty1, empty2, empty3, empty4, empty5]
             },
-            index: 0,
-            show: false,
-            roomType: -1,
-            timer1: null
+            isShow: false,
+            timeArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            dataArr: [32, 32, 31, 35, 30, 29, 36, 32, 31, 35, 35, 36]
         };
     },
-    created() {
-        console.log(this.$route.query.type);
-        this.roomType = this.$route.query.type;
-        this.getDeliveryRoomInfo({ bedNo: "10086-1" });
-
-        window.clearInterval(this.timer1)
-        // this.getImglist()
-        // this.timer1 = setInterval(() => {
-        //     this.getImglist()
-        //     console.log("1")
-        // }, 10000)
-
-    },
-    beforeDestroy() {
-        window.clearInterval(this.timer1)
-    },
+    created() {},
+    beforeDestroy() {},
     methods: {
         // 请求厂房列表
         getDeliveryRoomInfo(data) {
@@ -348,7 +248,7 @@ export default {
         getImglist() {
             reqImglist()
                 .then(res => {
-                    this.empty.a = res
+                    this.empty.a = res;
                 })
                 .catch(err => {
                     console.error(err);
@@ -356,20 +256,9 @@ export default {
         },
         pickerChange(value) {
             console.log(value);
-            this.getDeliveryRoomInfo({ bedNo: "10086-1", date: value });
-            // this.date = Math.floor(new Date(value[0]).getTime() / 1000)
-            // this.getReportList()
         },
-        toSowDetail(index) {
-            console.log(index);
-            this.index = index;
-            this.show = true;
-            // console.log(data.path[0].currentSrc);
-            // console.log(data.path[0]);
-            // console.log(data.path);
-            // reqUpload({imageUrl: data.path[0].currentSrc}).then(res => {
-            //     console.log(res)
-            // })
+        toSowDetail() {
+            console.log("查看母猪信息");
         },
         goBack() {
             this.$router.go(-1);
@@ -380,67 +269,54 @@ export default {
 
 <style lang="scss" scoped>
 .Detail {
-    .header {
-        > .title {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0px 30% 10px 20px;
-            margin: 0 0 10px 0;
-            border-bottom: 2px solid #eee;
-            > h4 {
-                color: #777;
-            }
-            > .title {
-                font-size: 20px;
-                font-weight: 600;
-                color: #444;
-            }
-        }
-    }
     .section {
-        display: flex;
-        padding-bottom: 20px;
-        margin: 0 70px;
-        border-bottom: 3px solid #ccc;
-        .left {
-            width: 600px;
-            // border: 2px solid rgb(63, 182, 69);
-            .contianer {
-                width: 600px;
-                border-radius: 6px;
-                overflow: hidden;
-                img {
-                    width: 100%;
-                    // height: 300px;
+        .video {
+            margin: 30px;
+            .mainInfo {
+                > ul {
+                    background-color: #eee;
+                    border-radius: 10px;
+                    padding: 15px;
+                    >li{
+                        margin: 5px 15px;
+                        >.titel{
+                            font-weight: 600;
+                            color: #444;
+                        }
+                        >.content{
+                            font-size: 16px;
+                        }
+                    }
                 }
             }
         }
-        .right {
-            padding-left: 40px;
-            .ul {
-                .li {
-                    margin: 5px 0 10px 10px;
-                    .title {
-                        font-size: 20px;
-                        color: rgb(136, 115, 115);
-                    }
-                    .content {
-                        font-size: 19px;
-                        font-weight: 600;
-                        color: rgb(139, 138, 138);
-                    }
-                }
+        .pigletInfo {
+            padding: 0 200px 40px 100px;
+            .title {
+                display: flex;
+                justify-content: space-between;
+                margin: 0 0 30px 0;
+                color: #444;
+            }
+            .content {
+                display: flex;
+                justify-content: space-around;
             }
         }
-    }
-    .footer {
-        margin-top: 20px;
-        .h {
-            border-bottom: 2px solid #eee;
+        .carousel {
+            display: flex;
+            justify-content: space-around;
+            margin: 30px;
+            > div {
+                width: 700px;
+                height: 400px;
+                // border: 1px solid #00f;
+            }
         }
-        .d {
-            padding-top: 15px;
+        .charts {
+            > div {
+                margin: 60px;
+            }
         }
     }
 }

src/views/deliveryRoomManagement/detail/charts/chart_a.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="chart_a">
-        <div id="chart_a" style="width: 75%;height:300px;"></div>
+    <div class="EConT">
+        <div id="EConT" style="width: 100%;height:300px;"></div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "chart_a",
+    name: "EConT",
     props: {
         dataArr: { type: Array },
         timeArr: { type: Array }
@@ -26,15 +26,14 @@ export default {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
             let myChart = this.$echarts.init(
-                document.getElementById("chart_a")
+                document.getElementById("EConT")
             );
             // 指定图表的配置项和数据
             let option = {
-                // title: {
-                //     text: "小时温度",
-                //     subtext: "纯属虚构",
-                //     left: 100
-                // },
+                title: {
+                    text: "保温箱温度",
+                    left: 100
+                },
                 tooltip: {
                     trigger: "axis"
                 },
@@ -104,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.chart_a {
+.EConT {
     .chart {
         width: 100%;
     }

src/views/deliveryRoomManagement/detail/charts/EEleT.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="EEleT">
+        <div id="EEleT" style="width: 100%;height:300px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EEleT",
+    props: {
+        dataArr: { type: Array },
+        timeArr: { type: Array }
+    },
+    data() {
+        return {};
+    },
+    watch: {
+        dataArr() {
+            this.drawChart();
+        }
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EEleT")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "电池电量",
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: true },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "rgb(14,182,195)" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "rgb(14,182,195)" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: this.timeArr
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} %"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "时间",
+                        type: "line",
+                        data: this.dataArr,
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.EEleT {
+    .chart {
+        width: 100%;
+    }
+}
+</style>

src/views/deliveryRoomManagement/detail/charts/EEnvT.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="EEnvT">
+        <div id="EEnvT" style="width: 100%;height:300px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EEnvT",
+    props: {
+        dataArr: { type: Array },
+        timeArr: { type: Array }
+    },
+    data() {
+        return {};
+    },
+    watch: {
+        dataArr() {
+            this.drawChart();
+        }
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EEnvT")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "环境温度",
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: true },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "rgb(14,182,195)" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "rgb(14,182,195)" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: this.timeArr
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} °C"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "时间",
+                        type: "line",
+                        data: this.dataArr,
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.EEnvT {
+    .chart {
+        width: 100%;
+    }
+}
+</style>

src/views/deliveryRoomManagement/detail/charts/chart_b.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="chart_b">
-        <div id="chart_b" style="width: 75%;height:300px;"></div>
+    <div class="ESowT">
+        <div id="ESowT" style="width: 100%;height:300px;"></div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "chart_b",
+    name: "ESowT",
     props: {
         dataArr: { type: Array},
         timeArr: { type: Array}
@@ -26,15 +26,14 @@ export default {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
             let myChart = this.$echarts.init(
-                document.getElementById('chart_b')
+                document.getElementById('ESowT')
             );
             // 指定图表的配置项和数据
             let option = {
-                // title: {
-                //     text: "日温度",
-                //     subtext: "纯属虚构",
-                //     left: 100
-                // },
+                title: {
+                    text: "母猪耳根温度",
+                    left: 100
+                },
                 tooltip: {
                     trigger: "axis"
                 },

src/views/fileInfo/prairieConfig.vue

@@ -1,5 +1,156 @@
 <template>
-    <div>
+    <div class="prairieConfig">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">牧场配置</h2>
+        <header id="header">
+            <el-row type="flex">
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option label="item.label" value="item.value"></el-option>
+                        <el-option label="item.label" value="item.value"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="3">
+                    <el-button type="primary">查找</el-button>
+                </el-col>
+            </el-row>
+        </header>
+        <section>
+            <article class="table">
+                <el-table :data="tableData" border style="width: 100%">
+                    <el-table-column prop="aa" sortable label="耳标号" width="180"></el-table-column>
+                    <el-table-column prop="ab" sortable label="入栏日期" width="180"></el-table-column>
+                    <el-table-column prop="ac" sortable label="入栏日龄"></el-table-column>
+                    <el-table-column prop="ad" sortable label="配种次数"></el-table-column>
+                    <el-table-column prop="ae" label="地址"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                            <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
+                                <el-button slot="reference" type="text" size="small">删除</el-button>
+                            </el-popconfirm>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-row type="flex" justify="end">
+                    <el-col :span="8" class="pagination">
+                        <el-pagination
+                            @current-change="pageChange"
+                            background
+                            layout="prev, pager, next"
+                            :total="1000"
+                        ></el-pagination>
+                    </el-col>
+                </el-row>
+            </article>
+        </section>
     </div>
-</template>
+</template>
+
+<script>
+const pageSize = 10;
+
+export default {
+    name: 'prairieConfig',
+    data() {
+        return {
+            value: "",
+            tableData: [
+                {
+                    aa: "1924",
+                    ab: "2020-08-01",
+                    ac: "210",
+                    ad: "1",
+                    ae: "产床001"
+                },
+                {
+                    aa: "2054",
+                    ab: "2020-08-01",
+                    ac: "285",
+                    ad: "2",
+                    ae: "产床010"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床054"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床048"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床065"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床072"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床018"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床016"
+                },
+                {
+                    aa: "5487",
+                    ab: "2020-08-09",
+                    ac: "185",
+                    ad: "1",
+                    ae: "产床024"
+                }
+            ]
+        };
+    },
+    created() {},
+    methods: {
+        edit(row) {},
+        del(row) {},
+        pageChange(p) {
+            console.log(p)
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#header {
+    margin-bottom: 15px;
+}
+.table {
+    .pagination {
+        margin-top: 20px;
+    }
+}
+</style>

src/views/statisticAnalysis/Crop.vue

@@ -3,7 +3,7 @@
         <header class="header">出栏预测：</header>
 
         <section class="section">
-            <el-select v-model="value" placeholder="请选择">
+            <el-select v-model="select" @change="change" placeholder="请选择">
                 <el-option
                     v-for="item in options"
                     :key="item.value"
@@ -13,14 +13,14 @@
             </el-select>
             <div class="container">
                 <article class="left">
-                    <crop-chart-a />
+                    <crop-chart-a :EValue='EValue'/>
                 </article>
                 <article class="right">
-                    <crop-chart-b />
+                    <crop-chart-b :EValue='EValue'/>
                 </article>
             </div>
         </section>
-        <section class="section">
+        <!-- <section class="section">
             <el-select v-model="value2" placeholder="请选择">
                 <el-option
                     v-for="item in options2"
@@ -37,7 +37,7 @@
                     <crop-chart-d />
                 </article>
             </div>
-        </section>
+        </section> -->
     </div>
 </template>
 
@@ -46,27 +46,33 @@ import crop_chart_a from "./charts/crop_chart_a";
 import crop_chart_b from "./charts/crop_chart_b";
 import crop_chart_c from "./charts/crop_chart_c";
 import crop_chart_d from "./charts/crop_chart_d";
+
+import { reqCrop } from "@/api/statisticAnalysis.js";
 export default {
     name: "Crop",
     components: {
         "crop-chart-a": crop_chart_a,
         "crop-chart-b": crop_chart_b,
-        "crop-chart-c": crop_chart_c,
-        "crop-chart-d": crop_chart_d
+        // "crop-chart-c": crop_chart_c,
+        // "crop-chart-d": crop_chart_d
     },
     data() {
         return {
             options: [
+                 {
+                    value: "-1",
+                    label: "全部"
+                },
                 {
-                    value: "选项1",
-                    label: "一牧场"
+                    value: "1001",
+                    label: "分娩一舍"
                 },
                 {
-                    value: "选项2",
-                    label: "二牧场"
+                    value: "1002",
+                    label: "分娩二舍"
                 }
             ],
-            options2: [
+            /* options2: [
                 {
                     value: "选项1",
                     label: "一舍"
@@ -87,13 +93,29 @@ export default {
                     value: "选项5",
                     label: "五舍"
                 }
-            ],
-            value: "选项1",
-            value2: "选项1"
+            ], */
+            select: "-1",
+            // value2: "选项1"
+            EValue: []
         };
     },
-    created() {},
-    methods: {}
+    created() {
+        this.getCrop()
+    },
+    methods: {
+        getCrop() {
+            reqCrop({areaId: this.select})
+                .then(res => {
+                    this.EValue = res
+                })
+                .catch(err => {
+                    console.error(err);
+                });
+        },
+        change() {
+            this.getCrop()
+        }
+    }
 };
 </script>
 

src/views/statisticAnalysis/PSY.vue

@@ -4,63 +4,64 @@
         <header class="header">
             <article class="card">
                 <h5 class="title">PSY</h5>
-                <span class="value">19.8</span>
+                <span class="value">{{ headData.psyValue }}</span>
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
                         <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
+                        <span>{{ headData.psyAnnualRatio }}%</span>
                     </div>
                     <div class="down">
                         <span>周环比</span>
                         <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
+                        <span>{{ headData.psyMonthlyRatio }}%</span>
                     </div>
                 </div>
             </article>
 
             <article class="card">
                 <h5 class="title">非生产天数</h5>
-                <span class="value">12</span>
+                <span class="value">{{ headData.lsyValue }}</span>
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
                         <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
+                        <span>{{ headData.lsyAnnualRatio }}%</span>
                     </div>
                     <div class="down">
                         <span>周环比</span>
                         <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
+                        <span>{{ headData.lsyMonthlyRatio }}%</span>
                     </div>
                 </div>
             </article>
 
             <article class="card">
                 <h5 class="title">平均胎次</h5>
-                <span class="value">2.1</span>
+                <span class="value">{{ headData.fetusValue }}</span>
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
                         <span class="icon el-icon-caret-top"></span>
-                        <span>12%</span>
+                        <span>{{ headData.fetusAnnualRatio }}%</span>
                     </div>
                     <div class="down">
                         <span>周环比</span>
                         <span class="icon el-icon-caret-bottom"></span>
-                        <span>11%</span>
+                        <span>{{ headData.fetusMonthlyRatio }}%</span>
                     </div>
                 </div>
             </article>
         </header>
         <section class="section">
-            <psy-chart/>
+            <psy-chart :EValue='EValue'/>
         </section>
     </div>
 </template>
 
 <script>
 import PSY_chart from "./charts/PSY_chart";
+import { reqPSY } from "@/api/statisticAnalysis.js";
 
 export default {
     name: "PSY",
@@ -68,12 +69,25 @@ export default {
         "psy-chart": PSY_chart
     },
     data() {
-        return {};
+        return {
+            headData: {},
+            EValue: []
+        };
     },
     created() {
+        this.getPSY()
     },
     methods: {
-        
+        getPSY() {
+            reqPSY()
+                .then(res => {
+                    this.headData = res.headData
+                    this.EValue = res.curveData
+                })
+                .catch(err => {
+                    console.error(err);
+                });
+        },
     }
 };
 </script>
@@ -95,8 +109,8 @@ export default {
             flex-direction: column;
             justify-content: space-between;
             align-items: center;
-            width: 250px;
-            height: 140px;
+            width: 300px;
+            height: 155px;
             padding: 15px 20px 0 20px;
             border: 1px solid #ddd;
             border-radius: 10px;

src/views/statisticAnalysis/back.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">反推</h2>
-    </div>
-</template>

src/views/statisticAnalysis/charts/Ea.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="Ea">
+        <div id="Ea" style="width: 70%;height:500px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Ea",
+    props: { EValue: Array },
+    data() {
+        return {
+            timeArr: [],
+            dataArr1: [],
+            dataArr2: []
+        };
+    },
+    watch: {
+        EValue(v) {
+            this.timeArr = [];
+            this.dataArr1 = [];
+            this.dataArr2 = [];
+            v.forEach(item => {
+                this.timeArr.push(item["name"]);
+                this.dataArr1.push(item["breedingCount"]);
+                this.dataArr2.push(item["deliveryCount"]);
+            });
+            this.drawChart();
+        }
+    },
+
+    created() {},
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("Ea"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "配种分娩数",
+                    left: "center",
+                    left: 100
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["配种", "分娩"]
+                },
+                color: ["#3398DB"],
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataView: { show: true, readOnly: true },
+                        magicType: { show: true, type: ["line", "bar"] },
+                        restore: { show: true },
+                        saveAsImage: { show: true }
+                    }
+                },
+                grid: {
+                    left: "10%",
+                    right: "10%",
+                    bottom: "13%",
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        data: this.timeArr,
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        scale: true
+                    }
+                ],
+                series: [
+                    {
+                        name: "配种",
+                        type: "bar",
+                        barWidth: "25%",
+                        data: this.dataArr1,
+                        encode: {
+                            x: "amount",
+                            y: "product"
+                        },
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    },
+                    {
+                        name: "分娩",
+                        type: "bar",
+                        barWidth: "25%",
+                        data: this.dataArr2,
+                        color: ["#4CCA73"],
+                        encode: {
+                            x: "amount",
+                            y: "product"
+                        },
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/statisticAnalysis/charts/Eb.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="Eb">
+        <div id="Eb" style="width: 70%;height:500px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Eb",
+    props: { EValue: Array },
+    data() {
+        return {
+            timeArr: [],
+            dataArr1: [],
+            dataArr2: []
+        };
+    },
+    watch: {
+        EValue(v) {
+            this.timeArr = [];
+            this.dataArr1 = [];
+            this.dataArr2 = [];
+            v.forEach(item => {
+                this.timeArr.push(item["name"]);
+                this.dataArr1.push(item["pregnantCount"]);
+                this.dataArr2.push(item["deliveryCount"]);
+            });
+            this.drawChart();
+        }
+    },
+
+    created() {},
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("Eb"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "怀孕分娩数",
+                    left: "center",
+                    left: 100
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["配种", "分娩"]
+                },
+                color: ["#3398DB"],
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataView: { show: true, readOnly: true },
+                        magicType: { show: true, type: ["line", "bar"] },
+                        restore: { show: true },
+                        saveAsImage: { show: true }
+                    }
+                },
+                grid: {
+                    left: "10%",
+                    right: "10%",
+                    bottom: "13%",
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        data: this.timeArr,
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        scale: true
+                    }
+                ],
+                series: [
+                    {
+                        name: "配种",
+                        type: "bar",
+                        barWidth: "25%",
+                        data: this.dataArr1,
+                        encode: {
+                            x: "amount",
+                            y: "product"
+                        },
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    },
+                    {
+                        name: "分娩",
+                        type: "bar",
+                        barWidth: "25%",
+                        data: this.dataArr2,
+                        color: ["#4CCA73"],
+                        encode: {
+                            x: "amount",
+                            y: "product"
+                        },
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/statisticAnalysis/charts/PSY_chart.vue

@@ -7,11 +7,22 @@
 <script>
 export default {
     name: "PSY_chart",
-    props: {},
+    props: { EValue: Array },
     data() {
-        return {};
+        return {
+            timeArr: [],
+            dataArr: []
+        };
+    },
+    watch: {
+        EValue(v) {
+            v.forEach(item => {
+                this.timeArr.push(item["name"]);
+                this.dataArr.push(item["value"]);
+            });
+            this.drawChart();
+        }
     },
-    created() {},
     mounted() {
         this.drawChart();
     },
@@ -54,20 +65,7 @@ export default {
                 xAxis: [
                     {
                         type: "category",
-                        data: [
-                            "一月",
-                            "二月",
-                            "三月",
-                            "四月",
-                            "五月",
-                            "六月",
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
+                        data: this.timeArr,
                         axisTick: {
                             alignWithLabel: true
                         }
@@ -76,6 +74,9 @@ export default {
                 yAxis: [
                     {
                         type: "value",
+                        axisLabel: {
+                            formatter: "{value} ℃"
+                        },
                         scale: true
                     }
                 ],
@@ -84,11 +85,9 @@ export default {
                         name: "数量",
                         type: "line",
                         barWidth: "50%",
-                        data: [20,27,38,35,50, 66, 98, 120, 99, 66,40,30],
+                        data: this.dataArr,
                         encode: {
-                            // Map the "amount" column to X axis.
                             x: "amount",
-                            // Map the "product" column to Y axis
                             y: "product"
                         },
                         markPoint: {

src/views/statisticAnalysis/charts/crop_chart_a.vue

@@ -7,9 +7,23 @@
 <script>
 export default {
     name: "crop_chart_a",
-    props: {},
+    props: { EValue: Array },
     data() {
-        return {};
+        return {
+            timeArr: [],
+            dataArr: []
+        };
+    },
+    watch: {
+        EValue(v) {
+            this.timeArr = []
+            this.dataArr = []
+            v.forEach(item => {
+                this.timeArr.push(item["name"]);
+                this.dataArr.push(item["value"]);
+            });
+            this.drawChart();
+        }
     },
     created() {},
     mounted() {
@@ -54,14 +68,7 @@ export default {
                 xAxis: [
                     {
                         type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
+                        data: this.timeArr,
                         axisTick: {
                             alignWithLabel: true
                         }
@@ -77,7 +84,7 @@ export default {
                         name: "数量",
                         type: "bar",
                         barWidth: "50%",
-                        data: [52, 200, 334, 390, 330, 220],
+                        data: this.dataArr,
                         encode: {
                             // Map the "amount" column to X axis.
                             x: "amount",

src/views/statisticAnalysis/charts/crop_chart_b.vue

@@ -7,12 +7,27 @@
 <script>
 export default {
     name: "crop_chart_b",
-    props: {},
+    props: { EValue: Array },
     data() {
-        return {};
+        return {
+            timeArr: [],
+            dataArr: []
+        };
+    },
+    watch: {
+        EValue(v) {
+            this.timeArr = []
+            this.dataArr = []
+            v.forEach(item => {
+                this.timeArr.push(item["name"]);
+                this.dataArr.push(item["value"] - Math.floor(item["value"] * Math.random() / 1.5));
+            });
+            this.drawChart();
+        }
     },
     created() {},
     mounted() {
+        console.log()
         this.drawChart();
     },
     methods: {
@@ -33,7 +48,7 @@ export default {
                     trigger: "axis",
                     axisPointer: {
                         // 坐标轴指示器，坐标轴触发有效
-                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
                     }
                 },
                 toolbox: {
@@ -54,14 +69,7 @@ export default {
                 xAxis: [
                     {
                         type: "category",
-                        data: [
-                            "七月",
-                            "八月",
-                            "九月",
-                            "十月",
-                            "十一月",
-                            "十二月"
-                        ],
+                        data: this.timeArr,
                         axisTick: {
                             alignWithLabel: true
                         }
@@ -77,7 +85,7 @@ export default {
                         name: "数量",
                         type: "bar",
                         barWidth: "50%",
-                        data: [52, 200, 334, 390, 330, 220],
+                        data: this.dataArr,
                         encode: {
                             // Map the "amount" column to X axis.
                             x: "amount",

src/views/statisticAnalysis/productRetrospect.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="productRetrospect">
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">生产复盘</h2>
+        <Ea :EValue="EValue"></Ea>
+        <Eb :EValue="EValue"></Eb>
+    </div>
+</template>
+
+<script>
+import Ea from "./charts/Ea";
+import Eb from "./charts/Eb";
+
+import { reqProductRetrospect } from "@/api/statisticAnalysis.js";
+
+export default {
+    name: "productRetrospect",
+    components: {
+        Ea,
+        Eb
+    },
+    data() {
+        return {
+            EValue: []
+        };
+    },
+    created() {
+        this.getProductRetrospect()
+    },
+    methods: {
+        getProductRetrospect() {
+            reqProductRetrospect()
+                .then(res => {
+                    this.EValue = res
+                })
+                .catch(err => {
+                    console.error(err);
+                });
+        },
+    }
+};
+</script>

src/views/system/deviceConfig.vue

@@ -44,7 +44,6 @@
                             </el-row>
                         </el-form-item>
                     </el-form>
-                    <p>本机系列号：4579285745856</p>
                 </el-col>
             </el-row>
         </section>