.

src/views/Login/Login.vue

@@ -7,15 +7,25 @@
             </header>
             <article class="article">
                 <h1>登录界面</h1>
-                <el-form label-position="right" label-width="80px" :model="form">
+                <el-form
+                    label-position="right"
+                    ref="onSignIn"
+                    label-width="80px"
+                    :model="form"
+                >
                     <el-form-item label="账号：">
-                        <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
+                        <el-input v-model="form.userName" @keyup.enter.native="onSignIn('onSignIn')" placeholder="请输入账号"></el-input>
                     </el-form-item>
                     <el-form-item label="密码：">
-                        <el-input v-model="form.userPwd" placeholder="请输入密码" show-password></el-input>
+                        <el-input
+                            v-model="form.userPwd"
+                            @keyup.enter.native="onSignIn('onSignIn')"
+                            placeholder="请输入密码"
+                            show-password
+                        ></el-input>
                     </el-form-item>
                     <el-form-item>
-                        <el-button type="primary" @click="onSignIn">登录</el-button>
+                        <el-button type="primary" @click="onSignIn('onSignIn')">登录</el-button>
                     </el-form-item>
                 </el-form>
             </article>
@@ -37,7 +47,6 @@
     </div>
 </template>
 <script>
-
 import { reqLogin, reqOrgChoose, reqOrganizationId } from "@/api/login";
 
 export default {
@@ -53,23 +62,26 @@ export default {
             orgSelected: null
         };
     },
-    created() {
-        
-    },
+    created() {},
     methods: {
         /* 登录按钮 */
-        onSignIn() {
-            console.log(this.form);
-            reqLogin(this.form)
-                .then(res => {
-                    console.log(res);
-                    console.log(res)
-                    localStorage.setItem("token", res.token);
-                    this.doOrganizationChoose();
-                })
-                .catch(err => {
-                    console.log("登录失败", err);
-                });
+        onSignIn(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    reqLogin(this.form)
+                        .then(res => {
+                            localStorage.setItem("token", res.token);
+                            this.doOrganizationChoose();
+                        })
+                        .catch(err => {
+                            console.log("登录失败", err);
+                            this.$message.error("登录失败!")
+                        });
+                } else {
+                    console.log("error submit!!");
+                    return false;
+                }
+            });
         },
         handleSet: function() {
             if (!this.orgSelected) {
@@ -78,38 +90,42 @@ export default {
         },
         doOrganizationChoose() {
             this.loading = true;
-            reqOrgChoose().then(res => {
-                if (res == null || res.length == 0) {
-                    this.$message.info("您没有加入任何组织!");
-                } else if (res.length > 1) {
-                    this.isShowDialog = true;
-                    this.orgList = res;
-                } else {
-                    console.log("6666")
-                    // this.setOrganizationId(res[0].id);
-                }
-            }).catch(err => {
-                console.log(err)
-                this.loading = false;
-            })
+            reqOrgChoose()
+                .then(res => {
+                    if (res == null || res.length == 0) {
+                        this.$message.info("您没有加入任何组织!");
+                    } else if (res.length > 1) {
+                        this.isShowDialog = true;
+                        this.orgList = res;
+                    } else {
+                        // this.setOrganizationId(res[0].id);
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.loading = false;
+                });
         },
-        setOrganizationId(id){
+        setOrganizationId(id) {
             if (!id) {
                 this.$message.error("发生了一点不愉快的错误！");
                 return;
             }
             this.loading = true;
-            reqOrganizationId({orgId: id}).then(res => {
-                this.isShowDialog = false;
+            reqOrganizationId({ orgId: id })
+                .then(res => {
+                    this.isShowDialog = false;
                     //导航到 正式页面
                     this.$router.replace("/home/Index");
-            }).catch(err => {
-                if (err.errMsg) this.$message.error(err.errMsg);
+                })
+                .catch(err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");
-            }).finally( res => {
-                this.loading = false;
-            })
-        },
+                })
+                .finally(res => {
+                    this.loading = false;
+                });
+        }
     },
     mounted() {}
 };

src/views/deliveryRoomManagement/DeliveryRoom.vue

@@ -3,7 +3,7 @@
         <section class="section">
             <ul class="ul">
 
-                <li @click="toDetail(item.type)" class="li" v-for="(item, index) in list" :key="index">
+                <li @click="toDetail(item.type, '产房00'+(index+1))" class="li" v-for="(item, index) in list" :key="index">
                     <h5>产房00{{ index+1 }}</h5>
                     <img class="img" :src="typeImgUrl[item.type - 1]" />
                     <p v-if="item.type == 1" class="info fontC">空床时间{{ 4 }}天</p>
@@ -137,12 +137,12 @@ export default {
     },
     methods: {
         
-        toDetail(type) {
-            if(type == 1) {
-                this.$message.warning("产床为空！")
-                return
-            }
-            this.$router.push({path: "Detail",query: {type}})
+        toDetail(type, roomNum) {
+            // if(type == 1) {
+            //     this.$message.warning("产床为空！")
+            //     return
+            // }
+            this.$router.push({path: "Detail",query: {type,roomNum}})
         },
         pageChange(p) {
             console.log(p);

src/views/deliveryRoomManagement/detail/Detail.vue

@@ -4,7 +4,7 @@
             <el-page-header @back="goBack" content="产床信息" />
             <div class="title">
                 <h4></h4>
-                <span class="title">产床002</span>
+                <span class="title">{{ $route.query.roomNum }}</span>
                 <el-date-picker
                     v-model="date"
                     @change="pickerChange"
@@ -19,14 +19,18 @@
         <section class="section">
             <article class="left">
 
-                <div v-if="roomType == 3" class="contianer">
+                <div v-if="roomType==1||roomType==2" class="contianer">
+                    <el-carousel height="300px" indicator-position="none" :interval="300000">
+                        <el-carousel-item v-for="(item, index) in empty.a" :key="item + index">
+                            <img :src="item" />
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
+
+                <div v-else-if="$route.query.type==3||$route.query.type==4" class="contianer">
                     <el-carousel height="300px" indicator-position="none" :interval="300000">
                         <el-carousel-item v-for="(item, index) in number.a" :key="item + index">
-                            <img
-                                class="img001"
-                                @click="toSowDetail(index)"
-                                :src="item"
-                            />
+                            <img @click="toSowDetail(index)" :src="item" />
                         </el-carousel-item>
                     </el-carousel>
                 </div>
@@ -34,18 +38,46 @@
                 <div v-else class="contianer">
                     <el-carousel height="300px" indicator-position="none" :interval="300000">
                         <el-carousel-item v-for="(item, index) in number.a" :key="item + index">
-                            <img
-                                class="img001"
-                                @click="toSowDetail(index)"
-                                :src="item"
-                            />
+                            <img @click="toSowDetail(index)" :src="item" />
                         </el-carousel-item>
                     </el-carousel>
                 </div>
             </article>
 
             <article class="right">
-                <ul class="ul">
+                <ul class="ul" v-if="roomType==1||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>
                     <li class="li">
                         <span class="title">产仔数：</span>
                         <span class="content" style="font-size: 26px">{{12}}只</span>
@@ -88,12 +120,15 @@
                 <chart-b :dataArr="daysD" :timeArr="daysT"></chart-b>
             </div>
         </footer>
-<!-- :title="'共有 '+number.count[index] + ' 头小猪'" -->
+        <!-- :title="'共有 '+number.count[index] + ' 头小猪'" -->
         <el-dialog :visible.sync="show" center>
-            <template slot="title">
-                <span style="color: #444">共有 <span style="font-size: 25px; font-weight:600">{{number.count[index]}}</span> 头小猪</span>
+            <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="">
+            <img style="width: 100%" :src="number.a1[index]" alt />
         </el-dialog>
     </div>
 </template>
@@ -114,7 +149,6 @@ 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";
@@ -127,6 +161,12 @@ import ba3 from "../../../assets/img/a3.jpg";
 import ba4 from "../../../assets/img/a4.jpg";
 import ba5 from "../../../assets/img/a5.jpg";
 
+import empty1 from "../../../assets/img/empty1.jpg";
+import empty2 from "../../../assets/img/empty2.jpg";
+import empty3 from "../../../assets/img/empty3.jpg";
+import empty4 from "../../../assets/img/empty4.jpg";
+import empty5 from "../../../assets/img/empty5.jpg";
+
 import {
     reqDeliveryRoomInfo,
     reqUpload
@@ -190,14 +230,17 @@ export default {
                 a1: [ba1, ba2, ba3, ba4, ba5],
                 count: [13, 10, 13, 14, 13]
             },
+            empty: {
+                a: [empty1, empty2, empty3, empty4, empty5]
+            },
             index: 0,
             show: false,
             roomType: -1
         };
     },
     created() {
-        console.log(this.$route.query.type)
-        this.roomType = this.$route.query.type
+        console.log(this.$route.query.type);
+        this.roomType = this.$route.query.type;
         this.getDeliveryRoomInfo({ bedNo: "10086-1" });
     },
     methods: {
@@ -231,9 +274,9 @@ export default {
             // this.getReportList()
         },
         toSowDetail(index) {
-            console.log(index)
-            this.index = index
-            this.show = true
+            console.log(index);
+            this.index = index;
+            this.show = true;
             // console.log(data.path[0].currentSrc);
             // console.log(data.path[0]);
             // console.log(data.path);