生物安防

src/store/index.js

@@ -7,7 +7,10 @@ export default new Vuex.Store({
   state: {
       color: '#31C3A6',
       mode: true,
-      ip: 'http://120.27.234.126:8010',
+      // 外网
+      // ip: 'http://120.27.234.126:8010',
+      //本地
+      ip: 'http://192.168.1.165:8010',
       // 所选择的farmId
       farmId: '',
       farmList: [],

src/utils/api.js

@@ -316,3 +316,12 @@ export function getDevice(data) {
   })
 }
 
+/** 生态监测拿到视频 **/
+export function getLastVideo(data) {
+  return axios({
+    url: 'video/camera/screenCamera',
+    method: 'get',
+    params: data
+  })
+}
+

src/utils/http.js

@@ -15,7 +15,10 @@ let removePending = (ever) => {
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://120.27.234.126:8010'
+  // 外网
+  // baseURL: 'http://120.27.234.126:8010'
+  // 本地
+  baseURL: 'http://192.168.1.165:8010'
 })
 
 // 请求拦截器

src/views/Alarm/Alarm.vue

@@ -86,7 +86,8 @@
             <div class="alarm-title-right"></div>
           </div>
           <div class="alarm-content">
-            <chart-pie :id="'1'" :data="pieData"></chart-pie>
+            <chart-pie v-if="pieData.length > 0" :id="'1'" :data="pieData"></chart-pie>
+            <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
           </div>
         </div>
         <div class="alarm-divide" v-loading="pieLoading"
@@ -99,7 +100,8 @@
             <div class="alarm-title-right"></div>
           </div>
           <div class="alarm-content">
-            <alarm-bar :bar-data="barData"></alarm-bar>
+            <alarm-bar v-if="barData.salvProValue.length > 0" :bar-data="barData"></alarm-bar>
+            <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
           </div>
         </div>
       </div>
@@ -439,13 +441,15 @@ export default {
         openResult: 0
       }
       getPersonList(params).then(async res => {
-        let result = JSON.parse(res.result);
-        this.personList = result.data.pageData;
-        const { token } = await getFaceToken();
-        this.personList.forEach((item) => {
-          item.channelName = item.channelName.split("人脸门禁")[0];
-          item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
-        });
+        if(res.code == 0) {
+          let result = JSON.parse(res.result);
+          this.personList = result.data.pageData;
+          const { token } = await getFaceToken();
+          this.personList.forEach((item) => {
+            item.channelName = item.channelName.split("人脸门禁")[0];
+            item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
+          });
+        }
         this.personLoading = false;
       })
       getAlarmRate({}).then(res => {
@@ -458,13 +462,15 @@ export default {
       })
       getCountByDay({}).then(res => {
         if(res.code === 0) {
-          this.barData.salvProName = [];
-          this.barData.salvProValue = [];
-          res.data.forEach(item => {
-            this.barData.salvProName.push(item.name);
-            this.barData.salvProValue.push(item.value);
-          })
-          this.pieData = res.data;
+          if(res.data !== null) {
+            this.barData.salvProName = [];
+            this.barData.salvProValue = [];
+            res.data.forEach(item => {
+              this.barData.salvProName.push(item.name);
+              this.barData.salvProValue.push(item.value);
+            })
+            this.pieData = res.data;
+          }
           this.pieLoading = false;
         } else {
           this.pieLoading = false;

src/views/BioSafety/BioSafety.vue

@@ -59,7 +59,7 @@
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
-            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+            <swiper v-if="carListContent.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in carListContent" :key="i">
                 <div class="case" @click="open(item, 1)">
                   <div class="case-left1">
@@ -90,6 +90,7 @@
                 </div>
               </swiper-slide>
             </swiper>
+            <div v-else style="line-height: 250px; color: white; font-size: 18px"> 暂无数据</div>
           </div>
         </div>
         <div class="bio-content"
@@ -97,7 +98,8 @@
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)">
-          <chart-bar :data="carList"></chart-bar>
+          <chart-bar v-if="carList.data.length > 0" :data="carList"></chart-bar>
+          <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
         </div>
       </div>
       <div class="bio-flex-center">
@@ -129,7 +131,7 @@
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
-            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+            <swiper v-if="personList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in personList" :key="i">
                 <div class="case" @click="open(item, 2)">
                   <div class="case-left1">
@@ -152,13 +154,15 @@
                 </div>
               </swiper-slide>
             </swiper>
+            <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
           </div>
         </div>
         <div class="bio-content" v-loading="personChartLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)">
-          <chart-bar :data="data1"></chart-bar>
+          <chart-bar v-if="data1.data.length > 0" :data="data1" ></chart-bar>
+          <div v-else style="line-height: 250px; color: white; font-size: 18px">暂无数据</div>
         </div>
       </div>
     </div>
@@ -209,7 +213,8 @@
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)">
-          <chart-bar :data="data3"></chart-bar>
+          <chart-bar v-if="data3.data.length > 0" :data="data3"></chart-bar>
+          <div v-else style="line-height: 250px; width: 100%; color: white; font-size: 18px">暂无数据</div>
         </div>
       </div>
       <div class="bio-flex-1-left">
@@ -247,7 +252,7 @@
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
-            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+            <swiper v-if="sizhuList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
               <swiper-slide v-for="(item, i) in sizhuList" :key="i">
                 <div class="case case1" @click="open(item, 3)">
                   <div class="case-left">
@@ -264,6 +269,7 @@
                 </div>
               </swiper-slide>
             </swiper>
+            <div v-else style="line-height: 250px; color: white; font-size: 18px"> 暂无数据</div>
           </div>
         </div>
       </div>
@@ -372,8 +378,8 @@ export default {
         name: '',
         unit: '次'
       },
-      value1: '',
-      value2: '',
+      value1: '0',
+      value2: '0',
       value3: '',
       carListContent: [],
       dialog: false,
@@ -388,21 +394,21 @@ export default {
       personChartLoading: true,
       sizhuLoading: true,
       hgLoading: true,
-      enterPerson: '',
-      outPerson: '',
+      enterPerson: '0',
+      outPerson: '0',
       rtsp: '',
       selectItems: {},
       pig: {
-        SevenDaySiZhu: "",
-        SevenDayXIxiao: "",
-        carPassIn: "",
-        carPassOut: "",
-        personPassFail: "",
-        personPassSuccess: "",
-        tadaySiZhu: "",
-        tadayXiXiao: "",
-        SevenDayGate: '',
-        tadayGate: '',
+        SevenDaySiZhu: "0",
+        SevenDayXIxiao: "0",
+        carPassIn: "0",
+        carPassOut: "0",
+        personPassFail: "0",
+        personPassSuccess: "0",
+        tadaySiZhu: "0",
+        tadayXiXiao: "0",
+        SevenDayGate: '0',
+        tadayGate: '0',
       },
       cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.180',
       cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.180/cam/realmonitor?channel=1&subtype=0',
@@ -419,30 +425,35 @@ export default {
           getRecord({})
       ]).then(axios.spread(function (res1, res2){
         if(res1.code === 0) {
-
-          that.carList.time = [];
-          that.carList.data = [];
-          res1.data.forEach(item => {
-            that.carList.time.push(item.time);
-            that.carList.data.push(item.value);
-          })
-          that.carsLoading = false
+          if(res1.data !== null) {
+            that.carList.time = [];
+            that.carList.data = [];
+            res1.data.forEach(item => {
+              that.carList.time.push(item.time);
+              that.carList.data.push(item.value);
+            })
+          }
+          that.carsLoading = false;
         }
         if(res2.code === 0) {
-          that.data1.time = [];
-          that.data1.data = [];
-          res2.data.forEach(item => {
-            that.data1.time.push(item.time);
-            that.data1.data.push(item.value);
-          })
+          if(res2.data !== null) {
+            that.data1.time = [];
+            that.data1.data = [];
+            res2.data.forEach(item => {
+              that.data1.time.push(item.time);
+              that.data1.data.push(item.value);
+            })
+          }
           that.personChartLoading = false;
         }
       }))
       getSizhu({}).then(res => {
         if(res.code=== 0) {
-          this.value1 = res.data.value2;
-          this.value2 = res.data.value1;
-          this.value3 = res.data.value3;
+          if(res.data !== null ) {
+            this.value1 = res.data.value2;
+            this.value2 = res.data.value1;
+            this.value3 = res.data.value3;
+          }
         }
       })
       // 车辆管理列表
@@ -456,6 +467,8 @@ export default {
             item.devChnName = item.devChnName.split("_")[0];
           });
           // this.carListContent = res.data;
+        } else {
+          that.carLoading = false;
         }
       })
       // 门禁管理列表
@@ -466,7 +479,8 @@ export default {
         startSwingTime: timeDate(new Date().getTime()) + ' 00:00:00',
         endSwingTime: timeDate(new Date().getTime()) + ' 23:59:59',
       }
-      getPersonList(params1).then(async res => {
+      getPersonList(params1).then(res => {
+        if(res.code == 0) {
           let result = JSON.parse(res.result);
           this.personList = result.data.pageData;
 
@@ -475,115 +489,126 @@ export default {
             item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
           });
           that.personLoading = false;
-        let queryParams = {
-          pageNum: 1,
-          pageSize: 21,
-          alarmStartDateString: timeDate(new Date().getTime()) + " 00:00:00",
-          alarmEndDateString: timeDate(new Date().getTime()) + " 23:59:59",
-          nodeCodeList: [
-            "1002874$1$0$0",
-            "1002875$1$0$0",
-            "1002876$1$0$0",
-            "1002877$1$0$0",
-            "1002878$1$0$0",
-            "1002879$1$0$0",
-            "1002880$1$0$0",
-            "1002881$1$0$0",
-            "1002882$1$0$0",
-            "1002883$1$0$0",
-            "1002884$1$0$0",
-            "1002885$1$0$0",
-            "1002886$1$0$0",
-            "1002887$1$0$0",
-            "1002888$1$0$0",
-            "1002889$1$0$0",
-            "1002890$1$0$0",
-            "1002891$1$0$0",
-            "1002892$1$0$0",
-            "1002893$1$0$0",
-            "1002894$1$0$0",
-            "1002895$1$0$0",
-            "1002896$1$0$0",
-            "1002897$1$0$0",
-            "1002898$1$0$0",
-            "1002899$1$0$0",
-            "1002900$1$0$0",
-            "1002901$1$0$0",
-            "1002902$1$0$0",
-            "1002903$1$0$0",
-            "1002904$1$0$0",
-            "1002905$1$0$0",
-            "1002906$1$0$0",
-            "1002907$1$0$0",
-            "1002908$1$0$0",
-            "1002909$1$0$0",
-            "1002910$1$0$0",
-            "1002911$1$0$0",
-            "1002912$1$0$0",
-            "1002913$1$0$0",
-            "1002939$1$0$0",
-            "1002939$1$0$1",
-            "1002939$1$0$2",
-            "1002939$1$0$3",
-            "1002939$1$0$4",
-            "1002939$1$0$5",
-            "1002939$1$0$6",
-            "1002939$1$0$7",
-            "1002939$1$0$8",
-            "1002939$1$0$9",
-            "1002940$1$0$0",
-            "1002940$1$0$1",
-            "1002940$1$0$2",
-            "1002940$1$0$3",
-            "1002940$1$0$4",
-            "1002940$1$0$5",
-            "1002940$1$0$6",
-            "1002940$1$0$7",
-            "1002939$1$0$10",
-            "1002939$1$0$11",
-            "1002939$1$0$12",
-            "1002939$1$0$13",
-            "1002939$1$0$14",
-            "1002939$1$0$15",
-          ],
-          deviceCategory: 1,
-          alarmType: 303,
-          dbType: 0,
-        };
-        await getSizhuList(queryParams).then( res => {
-          that.sizhuLoading = false;
+        } else {
+          that.personLoading = false;
+        }
+      })
+      let queryParams = {
+        pageNum: 1,
+        pageSize: 21,
+        alarmStartDateString: timeDate(new Date().getTime()) + " 00:00:00",
+        alarmEndDateString: timeDate(new Date().getTime()) + " 23:59:59",
+        nodeCodeList: [
+          "1002874$1$0$0",
+          "1002875$1$0$0",
+          "1002876$1$0$0",
+          "1002877$1$0$0",
+          "1002878$1$0$0",
+          "1002879$1$0$0",
+          "1002880$1$0$0",
+          "1002881$1$0$0",
+          "1002882$1$0$0",
+          "1002883$1$0$0",
+          "1002884$1$0$0",
+          "1002885$1$0$0",
+          "1002886$1$0$0",
+          "1002887$1$0$0",
+          "1002888$1$0$0",
+          "1002889$1$0$0",
+          "1002890$1$0$0",
+          "1002891$1$0$0",
+          "1002892$1$0$0",
+          "1002893$1$0$0",
+          "1002894$1$0$0",
+          "1002895$1$0$0",
+          "1002896$1$0$0",
+          "1002897$1$0$0",
+          "1002898$1$0$0",
+          "1002899$1$0$0",
+          "1002900$1$0$0",
+          "1002901$1$0$0",
+          "1002902$1$0$0",
+          "1002903$1$0$0",
+          "1002904$1$0$0",
+          "1002905$1$0$0",
+          "1002906$1$0$0",
+          "1002907$1$0$0",
+          "1002908$1$0$0",
+          "1002909$1$0$0",
+          "1002910$1$0$0",
+          "1002911$1$0$0",
+          "1002912$1$0$0",
+          "1002913$1$0$0",
+          "1002939$1$0$0",
+          "1002939$1$0$1",
+          "1002939$1$0$2",
+          "1002939$1$0$3",
+          "1002939$1$0$4",
+          "1002939$1$0$5",
+          "1002939$1$0$6",
+          "1002939$1$0$7",
+          "1002939$1$0$8",
+          "1002939$1$0$9",
+          "1002940$1$0$0",
+          "1002940$1$0$1",
+          "1002940$1$0$2",
+          "1002940$1$0$3",
+          "1002940$1$0$4",
+          "1002940$1$0$5",
+          "1002940$1$0$6",
+          "1002940$1$0$7",
+          "1002939$1$0$10",
+          "1002939$1$0$11",
+          "1002939$1$0$12",
+          "1002939$1$0$13",
+          "1002939$1$0$14",
+          "1002939$1$0$15",
+        ],
+        deviceCategory: 1,
+        alarmType: 303,
+        dbType: 0,
+      };
+      getSizhuList(queryParams).then( res => {
+        if(res.code == 0) {
           const result = JSON.parse(res.result);
           this.sizhuList = result.data.pageData;
           this.sizhuList.forEach((item) => {
             item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
           });
-        })
-
-        getHoure({}).then(res => {
-          if(res.code === 10000) {
+          this.sizhuLoading = false;
+        } else {
+          this.sizhuLoading = false;
+        }
+      })
+      getHoure({}).then(res => {
+        if(res.code === 10000) {
+          if(res.data !== null) {
             this.data3.time = [];
             this.data3.data = [];
             res.data.forEach(item => {
               this.data3.time.push(item.time);
               this.data3.data.push(item.value);
             })
-            this.hgLoading = false;
           }
-        })
-
+          this.hgLoading = false;
+        }
       })
       // 门禁违规
       getDoor({}).then(res => {
         if(res.code === 0) {
-          this.enterPerson = res.data.value1;
-          this.outPerson = res.data.value2;
+          if(res.data !== null) {
+            this.enterPerson = res.data.value1;
+            this.outPerson = res.data.value2;
+          }
         }
       })
 
       // 今日车辆驶入
       getAlarmAndPig({}).then(res => {
         if(res.code === 0) {
-          this.pig = res.data;
+          if(res.data !== null) {
+            this.pig = res.data;
+          }
         }
       })
 

src/views/Environment/Environment.vue

@@ -173,8 +173,8 @@ export default {
           this.codData.data = res.data.hxxylPj;
           this.liuData.data = res.data.wsPj;
           this.nhData.data = res.data.adPj;
-          this.costLoading = false;
         }
+        this.costLoading = false;
       })
     }
   },

src/views/Home/Home.vue

@@ -100,11 +100,11 @@
           <div class="case-content">
             <div class="case-one">
               <span style=" padding-left: 20px;padding-right: 40px">最高</span>
-              <span><strong class="sign">{{env.maxTem}}</strong>℃</span>
+              <span><strong class="sign">{{env.maxTem ? env.maxTem + '℃': '0℃'}}</strong></span>
             </div>
             <div class="case-one">
               <span style=" padding-left: 20px; padding-right: 40px">最低</span>
-              <span><strong class="sign">{{env.minTem}}</strong>℃</span>
+              <span><strong class="sign">{{env.minTem ? env.minTem + '℃': '0℃'}}</strong></span>
             </div>
           </div>
         </div>
@@ -113,11 +113,11 @@
           <div class="case-content">
             <div class="case-one">
               <span style="padding-left: 40px; padding-right: 50px">最高</span>
-              <span><strong class="sign">{{env.maxHum}}</strong>RH</span>
+              <span><strong class="sign">{{env.maxHum ? env.maxHum : '0'}}</strong>RH</span>
             </div>
             <div class="case-one">
               <span style="padding-left: 40px; padding-right: 50px">最低</span>
-              <span><strong class="sign">{{env.minHum}}</strong>RH</span>
+              <span><strong class="sign">{{env.minHum ? env.minHum : '0'}}</strong>RH</span>
             </div>
           </div>
         </div>
@@ -139,11 +139,11 @@
           <div class="case-content">
             <div class="case-one">
               <span style="padding-right: 5px">今日累计</span>
-              <span><strong class="sign">{{env.dayWater}}</strong>吨</span>
+              <span><strong class="sign">{{env.dayWater ? env.dayWater : '0'}}</strong>吨</span>
             </div>
             <div class="case-one">
               <span style=" padding-right: 5px">本月累计</span>
-              <span><strong class="sign">{{env.monthWater}}</strong>吨</span>
+              <span><strong class="sign">{{env.monthWater ? env.monthWater : '0'}}</strong>吨</span>
             </div>
           </div>
         </div>
@@ -318,14 +318,14 @@ export default {
       pro: {},
       envList: {},
       pig: {
-        SevenDaySiZhu: "",
-        SevenDayXIxiao: "",
-        carPassIn: "",
-        carPassOut: "",
-        personPassFail: "",
-        personPassSuccess: "",
-        tadaySiZhu: "",
-        tadayXiXiao: "",
+        SevenDaySiZhu: "0",
+        SevenDayXIxiao: "0",
+        carPassIn: "0",
+        carPassOut: "0",
+        personPassFail: "0",
+        personPassSuccess: "0",
+        tadaySiZhu: "0",
+        tadayXiXiao: "0",
       },
       alarm: {}
     }
@@ -334,7 +334,9 @@ export default {
     init() {
       getScreen({}).then(res => {
         if(res.code === 10000) {
-          this.env = res.data;
+          if(res.data != null) {
+            this.env = res.data;
+          }
         }
       })
       getListLargeScreen({}).then(res => {
@@ -354,7 +356,9 @@ export default {
       })
       getAlarmAndPig({}).then(res => {
         if(res.code === 0) {
-          this.pig = res.data;
+          if(res.data != null) {
+            this.pig = res.data;
+          }
         }
       })
       alarmHome({}).then(res => {
@@ -421,7 +425,7 @@ export default {
     this.width = this.list.length * (220 + 180) - 90;
     this.initLine()
     this.initData();
-    this.initFalsh();
+    // this.initFalsh();
   },
   beforeDestroy() {
     clearInterval(this.timer);

src/views/MainLayout.vue

@@ -125,9 +125,7 @@ export default {
     },
     farmList: {
       handler(newVal) {
-        console.log(1111)
         if(newVal.length > 0) {
-          console.log(newVal)
           this.getFarmList = []
           newVal.forEach(item => {
             if(item.rowStatus) {
@@ -190,7 +188,6 @@ export default {
         if(res.code === 10000) {
           this.weather = res.data;
           this.weatherInfo = JSON.parse(res.data.alarm)
-          console.log(this.weatherInfo)
         }
       })
     },

src/views/Monit/Monit.vue

@@ -13,10 +13,15 @@
       <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
     </div>
     <div class="monit-right">
-      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">
         <swiper-slide v-for="(item, i) in videoList" :key="i">
           <div class="case">
-            <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+            <template v-if="index && (i ===0 || i === 1 || i === 2)">
+              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+            </template>
+            <template v-else-if="index === false && (i ===3 || i === 4 || i === 5)">
+              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+            </template>
           </div>
         </swiper-slide>
       </swiper>
@@ -29,6 +34,7 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'
 import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo} from "@/utils/api";
 import axios from "axios";
+const c_swiper = document.getElementsByClassName("swiper")
 
 export default {
   name: "Monit",
@@ -37,6 +43,7 @@ export default {
     swiperSlide,
   },
   data() {
+    let self = this;
     return {
       swiperOption: {
         direction: 'vertical',
@@ -45,9 +52,18 @@ export default {
         slidesPerGroup: 3,
         // spaceBetween: 30,
         autoplay: {
-          delay: 3000,
+          delay: 10000,
           disableOnInteraction: false
         },
+        on: {
+          slideChange() {
+            // console.log(c_swiper[0].swiper)
+            // this.num = c_swiper[0].swiper.activeIndex
+            self.returnNum(c_swiper[0].swiper.activeIndex)
+            // console.log(this.num);
+            // return this.num
+          }
+        }
       },
       videoId: '',
       isShow: false,
@@ -56,7 +72,31 @@ export default {
       cameraOne: '',
       cameraTwo: '',
       videoList: [],
-      timer: null
+      timer: null,
+      num: 0,
+      index: true,
+    }
+  },
+  watch: {
+    // num(newVal) {
+    //   console.log(newVal);
+    //   console.log('变了')
+    //   // if(newVal === 0) {
+    //   //   this.index = 2;
+    //   // } else {
+    //   //   this.index = 3;
+    //   // }
+    // },
+    num: {
+      handler(newVal) {
+        if(newVal === 0) {
+            this.index = true;
+        } else {
+            this.index = false;
+        }
+        console.log('变了' + newVal)
+      },
+      deep: true
     }
   },
   methods: {
@@ -101,6 +141,9 @@ export default {
          this.videoList = res.data;
        }
       })
+    },
+    returnNum(val) {
+      this.num = val;
     }
   },
   mounted() {

src/views/Production/Production.vue

@@ -15,7 +15,8 @@
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'存栏结构'">
-          <chart-amount-pie :data="inventoryPieData"></chart-amount-pie>
+          <chart-amount-pie v-if="inventoryPieData.length > 0" :data="inventoryPieData"></chart-amount-pie>
+          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
         </pro-board>
       </div>
       <div class="production-column-item" v-loading="amountLoading"
@@ -23,7 +24,8 @@
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'存栏变动'">
-          <chart-amount-line :data="amountLineData"></chart-amount-line>
+          <chart-amount-line v-if="amountLineData.boarStock.length > 0" :data="amountLineData"></chart-amount-line>
+          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
         </pro-board>
       </div>
       <div class="production-column-item" v-loading="chartLoading"
@@ -31,7 +33,8 @@
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'母猪分布'">
-          <chart-sow-bar :data="amountPieData"></chart-sow-bar>
+          <chart-sow-bar v-if="amountPieData.length > 0" :data="amountPieData"></chart-sow-bar>
+          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
         </pro-board>
       </div>
     </div>
@@ -47,7 +50,8 @@
           :click="true"
           @getClick="clickIndicators"
         >
-          <important-items :data="importantData"></important-items>
+          <important-items v-if="importantData.length > 0" :data="importantData"></important-items>
+          <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
           <!-- 重要指标的图 -->
           <transition name="fade">
             <div v-if="indicatorsVisible" class="indicators">
@@ -181,7 +185,8 @@
                 </div>
               </div>
               <div class="sales-right">
-                <chart-sales :data="salesChartData"></chart-sales>
+                <chart-sales v-if="salesChartData.moneyList.length > 0" :data="salesChartData"></chart-sales>
+                <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
               </div>
             </div>
           </div>
@@ -372,8 +377,8 @@ export default {
       weekSalesVolumeChange: -10,
       salesChartData: {
         // 销售图的数据
-        quantitys: [46, 45, 100],
-        sellDates: ["10-20周三", "10-21周四", "10-22周五"],
+        quantitys: [],
+        sellDates: [],
       },
       yingfuData: [],
       historyData: [
@@ -546,25 +551,27 @@ export default {
     initInventoryAndProduct() {
       getInventoryAndProduct({}).then((res) => {
         if (res.code === 10000) {
-          // this.inventoryLinesData = res.data
+          if(Object.keys(res.data).length > 0) {
+            // this.inventoryLinesData = res.data
+            // this.inventoryPieData = res.data.slice(0, 6)
+            this.inventoryPieData = [
+              res.data["sow_stock"],
+              res.data["boar_stock"],
+              res.data["grice_stock"],
+              res.data["piglet_stock"],
+              res.data["fatpig_stock"],
+            ];
+            this.amountPieData = {
+              name: ["妊娠", "哺乳", "空怀", "后备"],
+              data: [
+                res.data["sow_stock_1"].stockQuantity,
+                res.data["sow_stock_2"].stockQuantity,
+                res.data["sow_stock_3"].stockQuantity,
+                res.data["sow_stock_5"].stockQuantity,
+              ],
+            };
+          }
           this.chartLoading = false;
-          // this.inventoryPieData = res.data.slice(0, 6)
-          this.inventoryPieData = [
-            res.data["sow_stock"],
-            res.data["boar_stock"],
-            res.data["grice_stock"],
-            res.data["piglet_stock"],
-            res.data["fatpig_stock"],
-          ];
-          this.amountPieData = {
-            name: ["妊娠", "哺乳", "空怀", "后备"],
-            data: [
-              res.data["sow_stock_1"].stockQuantity,
-              res.data["sow_stock_2"].stockQuantity,
-              res.data["sow_stock_3"].stockQuantity,
-              res.data["sow_stock_5"].stockQuantity,
-            ],
-          };
         }
       });
     },
@@ -591,26 +598,28 @@ export default {
       getProductionCondition({}).then((res) => {
         this.importantData = [];
         if (res.code === 10000) {
-          const items = [
-            "grice_rate",
-            "piglet_rate",
-            "fatpig_rate",
-            "break_rate",
-            "breed_rate",
-            "psy",
-          ];
-          items.forEach((item) => {
-            let itemNum =
-              (parseFloat(res.data[item].stockQuantity) * 100).toFixed(2) + "%";
-            if (item === "psy") {
-              itemNum = res.data[item].stockQuantity;
-            }
-            this.importantData.push({
-              id: res.data[item].id,
-              name: res.data[item].stockName,
-              num: itemNum,
+          if(Object.keys(res.data).length > 0) {
+            const items = [
+              "grice_rate",
+              "piglet_rate",
+              "fatpig_rate",
+              "break_rate",
+              "breed_rate",
+              "psy",
+            ];
+            items.forEach((item) => {
+              let itemNum =
+                  (parseFloat(res.data[item].stockQuantity) * 100).toFixed(2) + "%";
+              if (item === "psy") {
+                itemNum = res.data[item].stockQuantity;
+              }
+              this.importantData.push({
+                id: res.data[item].id,
+                name: res.data[item].stockName,
+                num: itemNum,
+              });
             });
-          });
+          }
           this.dataLoading = false;
         }
       });

src/views/Zoology/Zoology.vue

@@ -14,19 +14,19 @@
         <div class="left-top-title">
           <div class="left-top-title-left"></div>
           <div class="left-top-title-center">
-            <span>育肥一栋</span>
-            <div class="left-top-title-icon" @click="leftTopSelect"></div>
+            <span>栋舍环境</span>
+<!--            <div class="left-top-title-icon" @click="leftTopSelect"></div>-->
             <!-- 可选择的栋 -->
-            <div class="left-top-select" v-show="leftTopSelected">
-              <select-block :title="'一栋'">
-                <template v-slot:left>
-                  <select-column :list="simulatedData"></select-column>
-                </template>
-                <template v-slot:right>
-                  <select-column :floor="false" :type="1"></select-column>
-                </template>
-              </select-block>
-            </div>
+<!--            <div class="left-top-select" v-show="leftTopSelected">-->
+<!--              <select-block :title="'一栋'">-->
+<!--                <template v-slot:left>-->
+<!--                  <select-column :list="simulatedData"></select-column>-->
+<!--                </template>-->
+<!--                <template v-slot:right>-->
+<!--                  <select-column :floor="false" :type="1"></select-column>-->
+<!--                </template>-->
+<!--              </select-block>-->
+<!--            </div>-->
           </div>
           <div class="left-top-title-right"></div>
         </div>
@@ -38,21 +38,26 @@
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)"
         >
-          <swiper
-            style="height: 600px;  margin-top: auto; margin-bottom: auto;"
-            ref="mySwiper"
-            class="swiper"
-            :options="swiperOption"
-          >
-            <swiper-slide v-for="item in swiperData" :key="item.roomId">
-              <swiper-content
-                @getRoomId="getRoomId"
-                :list="item"
-                @onLeave="onLeave"
-                @onEnter="onEnter"
-              ></swiper-content>
-            </swiper-slide>
-          </swiper>
+          <template v-if="swiperData.length > 0">
+            <swiper
+                style="height: 600px;  margin-top: auto; margin-bottom: auto;"
+                ref="mySwiper"
+                class="swiper"
+                :options="swiperOption"
+            >
+              <swiper-slide v-for="item in swiperData" :key="item.roomId">
+                <swiper-content
+                    @getRoomId="getRoomId"
+                    :list="item"
+                    @onLeave="onLeave"
+                    @onEnter="onEnter"
+                ></swiper-content>
+              </swiper-slide>
+            </swiper>
+          </template>
+          <template>
+            <div style="line-height: 200px;font-size: 18px; color: white">暂无数据</div>
+          </template>
         </div>
       </div>
       <div
@@ -67,16 +72,22 @@
           :ifDate="true"
           @emitDates="getWaterDates"
         >
-          <chart-line :data="waterData" :id="1"></chart-line>
+          <chart-line v-if="waterData.yAxisData.length > 0" :data="waterData" :id="1"></chart-line>
+          <div v-else style="font-size: 18px; line-height: 200px; color: white">暂无数据</div>
         </chart-board>
       </div>
       <div class="left-bottom">
         <chart-board
-          :title="roomName + '整栋用电量'"
+          :title="roomName + '整栋用电量' "
           :ifDate="true"
           @emitDates="getElecDates"
         >
-          <chart-line-and :data="waterData" :id="2"></chart-line-and>
+          <template v-if="elecData.yAxisData.length > 0">
+            <chart-line-and :data="elecData" :id="2"></chart-line-and>
+          </template>
+          <template v-else>
+            <div style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
+          </template>
         </chart-board>
       </div>
     </div>
@@ -85,6 +96,7 @@
       <div class="right-top">
         <div class="kuang">
           <iframe
+              v-if="cameraOne !== ''"
             :src="
               'static/jinm/index.html?' +
                 '1' +
@@ -112,7 +124,12 @@
           element-loading-background="rgba(0, 0, 0, 0.8)"
         >
           <chart-board :title="roomName + '温度'" @emitDates="getWaterDates">
-            <chart-line :data="tempData" :id="4"></chart-line>
+            <template v-if="tempData.yAxisData.length > 0">
+              <chart-line :data="tempData" :id="4"></chart-line>
+            </template>
+            <template v-else>
+              <div style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
+            </template>
           </chart-board>
         </div>
         <div
@@ -123,7 +140,8 @@
           element-loading-background="rgba(0, 0, 0, 0.8)"
         >
           <chart-board :title="roomName + '湿度'" @emitDates="getWaterDates">
-            <chart-line :data="rhData" :id="5"></chart-line>
+            <chart-line v-if="rhData.yAxisData.length > 0" :data="rhData" :id="5"></chart-line>
+            <div v-else style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
           </chart-board>
         </div>
       </div>
@@ -132,22 +150,22 @@
 </template>
 
 <script>
-import SelectBlock from "./leftTop/SelectBlock.vue";
-import SelectColumn from "./leftTop/SelectColumn.vue";
+// import SelectBlock from "./leftTop/SelectBlock.vue";
+// import SelectColumn from "./leftTop/SelectColumn.vue";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
 import SwiperContent from "./leftTop/SwiperContent.vue";
 import ChartBoard from "./charts/ChartBoard.vue";
 import ChartLine from "./charts/ChartLine.vue";
 import ChartLineAnd from "./charts/ChartLineAnd.vue";
-import { getEnv, getByRoom, getListWater, getRoomVideo } from "@/utils/api";
+import { getEnv, getByRoom, getListWater, getRoomVideo, getLastVideo } from "@/utils/api";
 import { timeDate, Debounce } from "@/utils";
 
 export default {
   name: "Zoology",
   components: {
-    SelectBlock,
-    SelectColumn,
+    // SelectBlock,
+    // SelectColumn,
     swiper,
     swiperSlide,
     SwiperContent,
@@ -184,9 +202,9 @@ export default {
       waterData: {
         // 左中 —— 模拟数据
         xAxisName: "水量",
-        xAxisData: ["07-01", "07-02", "07-03", "07-04", "07-05"],
+        xAxisData: [],
         yAxisName: "吨",
-        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2],
+        yAxisData: [],
       },
       tempData: {
         xAxisName: "温度",
@@ -200,13 +218,17 @@ export default {
         yAxisName: "RH",
         yAxisData: [],
       },
+      elecData: {
+        xAxisName: "电量",
+        xAxisData: [],
+        yAxisName: "KW/h",
+        yAxisData: [],
+      },
       roomName: "",
       elecDates: [], // 用电量时间
       isVideo: false,
-      cameraOne:
-        "ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.62",
-      cameraTwo:
-        "rtsp://admin:hmkj6688@172.16.3.62/cam/realmonitor?channel=1&subtype=0",
+      cameraOne: '',
+      cameraTwo: '',
       loading: true,
       weatherLoading: true,
       chartLoading: true,
@@ -221,7 +243,9 @@ export default {
     init() {
       getEnv({}).then((res) => {
         if (res.code === 10000) {
-          this.swiperData = res.data;
+          if(res.data.length > 0) {
+            this.swiperData = res.data;
+          }
           this.loading = false;
         }
       });
@@ -246,7 +270,9 @@ export default {
       };
       getByRoom(params).then((res) => {
         if (res.code === 10000) {
-          this.setTempAndRh(res.data);
+          if(res.data != null) {
+            this.setTempAndRh(res.data);
+          }
         }
       });
       let params1 = {
@@ -256,7 +282,10 @@ export default {
       };
       getListWater(params1).then((res) => {
         if (res.code === 10000) {
-          this.setWeather(res.data);
+          this.weatherLoading = false;
+          if(res.data != null) {
+            this.setWeather(res.data);
+          }
         }
       });
       getRoomVideo({ roomId: id }).then((res) => {
@@ -276,7 +305,7 @@ export default {
       this.roomName = data.roomName;
       data.semperatures.forEach((item) => {
         this.tempData.xAxisData.push(item.createTime);
-        this.tempData.yAxisData.push(item.value);
+        this.tempData.yAxisData.push(parseFloat(item.value));
       });
       data.humidities.forEach((item) => {
         this.rhData.xAxisData.push(item.createTime);
@@ -296,7 +325,10 @@ export default {
     initData() {
       getByRoom({}).then((res) => {
         if (res.code === 10000) {
-          this.setTempAndRh(res.data);
+          this.chartLoading = false;
+          if(res.data != null) {
+            this.setTempAndRh(res.data);
+          }
         }
       });
       let params1 = {
@@ -305,9 +337,20 @@ export default {
       };
       getListWater(params1).then((res) => {
         if (res.code === 10000) {
-          this.setWeather(res.data);
+          this.weatherLoading = false;
+          if(res.data != null) {
+            this.setWeather(res.data);
+          }
         }
       });
+      getLastVideo({}).then(res => {
+        if(res.code === 10000) {
+          if(res.data !== null) {
+            this.cameraOne = res.data.wsUrl;
+            this.cameraTwo = res.data.rtspUrl;
+          }
+        }
+      })
     },
     onEnter() {
       this.swipers.autoplay.stop();

src/views/Zoology/charts/ChartBoard.vue

@@ -68,4 +68,8 @@ export default {
   font-size: 14px;
   font-weight: 400;
 }
+.chart {
+  width: 100%;
+  height: calc(100% - 60px);
+}
 </style>

src/views/Zoology/charts/ChartLine.vue

@@ -17,7 +17,6 @@ export default {
     },
     data: {
       type: Object,
-      required: true,
     },
   },
   data() {
@@ -27,19 +26,12 @@ export default {
   },
   methods: {
     init() {
+      console.log('拿到数据了')
+      console.log(this.data)
       let options = {
-        // title: {
-        //   text: '存栏变动',
-        //   x: 10,
-        //   y: 0
-        // },
         tooltip: {
           trigger: "axis",
         },
-        // legend: {
-        //   data: ['头']
-        // },
-        // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
         grid: {
           top: "10%",
           left: "10%",