生物安防

src/main.js

@@ -13,7 +13,7 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
-import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader } from 'element-ui';
+import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader, Loading } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
@@ -27,6 +27,7 @@ Vue.use(Input)
 Vue.use(Button)
 Vue.use(Message)
 Vue.use(Cascader)
+Vue.use(Loading)
 Vue.prototype.$message = Message;
 
 new Vue({

src/views/Alarm/Alarm.vue

@@ -2,7 +2,10 @@
   <div class="alarm">
     <div class="alarm-top">
       <div class="alarm-top-left">
-        <div class="alarm-divide line" style="z-index: 999;">
+        <div class="alarm-divide" v-loading="dayLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <div class="alarm-title">
             <div class="alarm-title-left"></div>
             <div class="alarm-title-center">今日报警</div>
@@ -12,7 +15,10 @@
             <chart-pie :data="alarmPie"></chart-pie>
           </div>
         </div>
-        <div class="alarm-divide">
+        <div class="alarm-divide" v-loading="listLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <div class="alarm-title">
             <div class="alarm-title-left"></div>
             <div class="alarm-title-center">报警分布</div>
@@ -69,17 +75,23 @@
         </div>
       </div>
       <div class="alarm-top-left">
-        <div class="alarm-divide">
+        <div class="alarm-divide" v-loading="pieLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <div class="alarm-title">
             <div class="alarm-title-left"></div>
             <div class="alarm-title-center">事件提醒</div>
             <div class="alarm-title-right"></div>
           </div>
           <div class="alarm-content">
-            <cost-pie :pieData="pieData"></cost-pie>
+            <cost-pie :data="pieData"></cost-pie>
           </div>
         </div>
-        <div class="alarm-divide">
+        <div class="alarm-divide" v-loading="pieLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <div class="alarm-title">
             <div class="alarm-title-left"></div>
             <div class="alarm-title-center">事件分布</div>
@@ -102,7 +114,10 @@
           <chart-bar :data="timeData"></chart-bar>
         </div>
       </div>
-      <div class="alarm-top-center">
+      <div class="alarm-top-center" v-loading="alarmLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <div class="alarm-title">
           <div class="alarm-title-left"></div>
           <div class="alarm-title-center">报警列表</div>
@@ -137,7 +152,10 @@
           </div>
         </div>
       </div>
-      <div class="alarm-top-left">
+      <div class="alarm-top-left" v-loading="personLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <div class="alarm-title">
           <div class="alarm-title-left"></div>
           <div class="alarm-title-center">异常人脸</div>
@@ -200,8 +218,7 @@ export default {
         salvProName: [],
         salvProValue: []
       },
-      pieData: [
-      ],
+      pieData: [],
       timeData: {
         id: 1,
         time: ['断电', '故障', '环境报警', '污水处理'],
@@ -240,6 +257,11 @@ export default {
       selectImg: '',
       dialog: false,
       alarmPie: [],
+      dayLoading: true,
+      listLoading: true,
+      pieLoading: true,
+      alarmLoading: true,
+      personLoading: true,
     }
   },
   methods: {
@@ -373,11 +395,13 @@ export default {
       getAlarmList({quantity: 9}).then(res => {
         if(res.code === 10000) {
           this.alarmList = res.data;
+          this.alarmLoading = false;
         }
       })
       getWeekInfo({}).then(res => {
         if(res.code === 10000) {
           this.list.salvProValue = [res.data.one, res.data.two, res.data.three];
+          this.listLoading = false;
         }
       })
       let params = {
@@ -396,10 +420,12 @@ export default {
           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 => {
         if(res.code === 10000) {
           this.alarmPie = res.data;
+          this.dayLoading = false;
         }
       })
       getCountByDay({}).then(res => {
@@ -411,6 +437,7 @@ export default {
             this.barData.salvProValue.push(item.value);
           })
           this.pieData = res.data;
+          this.pieLoading = false;
         }
       })
     },

src/views/Alarm/chart/CostPie.vue

@@ -4,7 +4,7 @@
 <script>
 export default {
   props: {
-    pieData: {
+    data: {
       type: Array,
       default: () => []
     }
@@ -14,6 +14,17 @@ export default {
       myChart: null
     }
   },
+  watch: {
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear()
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     init() {
       let options = {
@@ -58,7 +69,7 @@ export default {
                 }
               },
             },
-            data: this.pieData
+            data: this.data
           }
         ]
       };
@@ -70,17 +81,6 @@ export default {
     this.myChart = this.$echarts.init(document.getElementById('costPie'));
     this.init()
   },
-  watch: {
-    data: {
-      handler(newVal) {
-        if(newVal) {
-          this.myChart.clear()
-          this.init()
-        }
-      },
-      deep: true
-    }
-  }
 }
 </script>
 <style scoped>

src/views/BioSafety/BioSafety.vue

@@ -52,7 +52,11 @@
               <div class="text">平均熏蒸时长</div>
             </div>
           </div>
-          <div class="bio-content-right">
+          <div class="bio-content-right"
+               v-loading="carLoading"
+               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-slide v-for="(item, i) in carListContent" :key="i">
                 <div class="case" @click="open(item, 1)">
@@ -85,7 +89,11 @@
             </swiper>
           </div>
         </div>
-        <div class="bio-content">
+        <div class="bio-content"
+             v-loading="carsLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <chart-bar :data="carList"></chart-bar>
         </div>
       </div>
@@ -114,7 +122,10 @@
               <div class="text">今日违规次数</div>
             </div>
           </div>
-          <div class="bio-content-right">
+          <div class="bio-content-right"  v-loading="personLoading"
+               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-slide v-for="(item, i) in personList" :key="i">
                 <div class="case" @click="open(item, 2)">
@@ -149,7 +160,10 @@
             </swiper>
           </div>
         </div>
-        <div class="bio-content">
+        <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>
         </div>
       </div>
@@ -197,7 +211,10 @@
           <div class="bio-title-center">车辆烘干</div>
           <div class="bio-title-right"></div>
         </div>
-        <div class="bio-vertical">
+        <div class="bio-vertical"  v-loading="hgLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <chart-bar :data="data3"></chart-bar>
         </div>
       </div>
@@ -228,11 +245,14 @@
               <div class="content-img content-img-3"></div>
               <div style="color: white; font-size: 14px">
                 <p>最近抓取时间</p>
-                <span><strong style="font-size: 22px; font-weight: 600">{{value3}}</strong></span>
+                <span><strong style="font-size: 22px; font-weight: 600">{{(value3).slice(5,16)}}</strong></span>
               </div>
             </div>
           </div>
-          <div class="bio-vertical-right">
+          <div class="bio-vertical-right" v-loading="sizhuLoading"
+               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-slide v-for="(item, i) in sizhuList" :key="i">
                 <div class="case case1" @click="open(item, 3)">
@@ -333,7 +353,13 @@ export default {
       type: 1,
       personList: [],
       sizhuList: [],
-      token: ''
+      token: '',
+      carLoading: true,
+      carsLoading: true,
+      personLoading: true,
+      personChartLoading: true,
+      sizhuLoading: true,
+      hgLoading: true,
     }
   },
   methods: {
@@ -344,20 +370,23 @@ export default {
           getRecord({})
       ]).then(axios.spread(function (res1, res2){
         if(res1.code === 10000) {
+
           that.carList.time = [];
           that.carList.data = [];
-          that.data1.time = [];
-          that.data1.data = [];
           res1.data.forEach(item => {
             that.carList.time.push(item.time);
             that.carList.data.push(item.value);
           })
+          that.carsLoading = false
         }
         if(res2.code === 10000) {
+          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 => {
@@ -370,6 +399,7 @@ export default {
       // 车辆管理列表
       getCarList({pageNum:1,pageSize: 21}).then(res => {
         if(res.code == 200) {
+          that.carLoading = false;
           const result = JSON.parse(res.result);
           this.carListContent = result.data.pageData;
           this.carListContent.forEach((item) => {
@@ -395,7 +425,7 @@ export default {
             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`;
           });
-
+          that.personLoading = false;
         let queryParams = {
           pageNum: 1,
           pageSize: 21,
@@ -472,6 +502,7 @@ export default {
           dbType: 0,
         };
         await getSizhuList(queryParams).then( res => {
+          that.sizhuLoading = false;
           const result = JSON.parse(res.result);
           this.sizhuList = result.data.pageData;
           this.sizhuList.forEach((item) => {
@@ -487,6 +518,7 @@ export default {
               this.data3.time.push(item.time);
               this.data3.data.push(item.value);
             })
+            this.hgLoading = false;
           }
         })
 

src/views/Environment/Environment.vue

@@ -9,14 +9,20 @@
 <template>
   <div class="environment">
     <div class="env-side">
-      <div class="env-side-item">
+      <div class="env-side-item" v-loading="costLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'PH'">
           <div class="env-side-item-content">
             <chart-dashboard :id="1" :data="phData"></chart-dashboard>
           </div>
         </pro-board>
       </div>
-      <div class="env-side-item">
+      <div class="env-side-item" v-loading="costLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'COD'">
           <div class="env-side-item-content">
             <chart-dashboard :id="2" :data="codData"></chart-dashboard>
@@ -27,18 +33,26 @@
 
     <div class="env-certain">
       <div class="env-certain-top">
-        <div class="kuang"></div>
+        <div class="kuang">
+          <iframe  :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+        </div>
       </div>
 
       <div class="env-certain-bottom">
-        <div class="env-certain-bottom-item">
+        <div class="env-certain-bottom-item" v-loading="costLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <pro-board :title="'总磷'">
             <div class="certain-bottom-item-chart">
               <chart-dashboard :id="3" :data="totalPData"></chart-dashboard>
             </div>
           </pro-board>
         </div>
-        <div class="env-certain-bottom-item">
+        <div class="env-certain-bottom-item" v-loading="costLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <pro-board :title="'总氮'">
             <div class="certain-bottom-item-chart">
               <chart-dashboard :id="4" :data="totalNData"></chart-dashboard>
@@ -49,14 +63,20 @@
     </div>
 
     <div class="env-side">
-      <div class="env-side-item item-bgc">
+      <div class="env-side-item item-bgc" v-loading="costLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'污水'">
           <div class="env-side-item-content">
             <chart-dashboard :id="5" :data="liuData"></chart-dashboard>
           </div>
         </pro-board>
       </div>
-      <div class="env-side-item item-bgc">
+      <div class="env-side-item item-bgc" v-loading="costLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'氨氮'">
           <div class="env-side-item-content">
             <chart-dashboard :id="6" :data="nhData"></chart-dashboard>
@@ -115,7 +135,34 @@ export default {
         splitNumber: 12,
         max: 1.2,
         unit: 'mg/L'
-      }
+      },
+      costLoading: true,
+      cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.201',
+      cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.201/cam/realmonitor?channel=1&subtype=0',
+      list: [
+        {
+          id: 1,
+          cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.201',
+          cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.201/cam/realmonitor?channel=1&subtype=0',
+        },
+        {
+          id: 2,
+          cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.198',
+          cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.198/cam/realmonitor?channel=1&subtype=0',
+        },
+        {
+          id: 3,
+          cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.197',
+          cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.197/cam/realmonitor?channel=1&subtype=0',
+        },
+        {
+          id: 4,
+          cameraOne: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.203',
+          cameraTwo: 'rtsp://admin:hmkj6688@172.16.3.203/cam/realmonitor?channel=1&subtype=0',
+        },
+      ],
+      timer: null,
+      num: 1
     }
   },
   methods: {
@@ -126,12 +173,25 @@ export default {
           this.codData.data = res.data.hxxylPj;
           this.liuData.data = res.data.wsPj;
           this.nhData.data = res.data.adPj;
+          this.costLoading = false;
         }
       })
     }
   },
   mounted() {
-    this.init()
+    this.init();
+    var that = this;
+    this.timer = setInterval(() => {
+      if(that.num > 3) {
+        that.num = 0;
+      }
+      that.cameraOne = that.list[that.num].cameraOne;
+      that.cameraTwo = that.list[that.num].cameraTwo;
+      that.num++;
+    }, 60000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
   }
 }
 </script>
@@ -180,10 +240,12 @@ export default {
 }
 .kuang {
   margin: auto;
-  width: 90%;
+  width: 100%;
   height: 100%;
   background: url("../../assets/BioSafety/kuang.png") no-repeat;
   background-size: contain;
+  box-sizing: border-box;
+  padding: 20px;
 }
 
 /* 中间 —— 下面 */

src/views/Production/Production.vue

@@ -10,17 +10,26 @@
   <div class="production">
     <!-- 第一列 -->
     <div class="production-column production-side-column">
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="chartLoading"
+           element-loading-text="拼命加载中"
+           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>
         </pro-board>
       </div>
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="amountLoading"
+           element-loading-text="拼命加载中"
+           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>
         </pro-board>
       </div>
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="chartLoading"
+           element-loading-text="拼命加载中"
+           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>
         </pro-board>
@@ -29,7 +38,10 @@
 
     <!-- 第二列 -->
     <div class="production-column production-mid-column">
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="dataLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board
           :title="'重要指标'"
           :click="true"
@@ -105,7 +117,10 @@
         </pro-board>
       </div>
 
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="weekLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'销售分析'">
           <div class="sales">
             <!-- <div class="sales-condition">
@@ -182,7 +197,10 @@
 
     <!-- 第三列 -->
     <div class="production-column production-side-column">
-      <div class="production-column-item">
+      <div class="production-column-item" v-loading="workLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'工作看板'">
           <work-items :workPlans="workPlans"></work-items>
         </pro-board>
@@ -248,7 +266,10 @@
         </div>
       </div>
 
-      <div class="production-column-item2">
+      <div class="production-column-item2" v-loading="costLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <pro-board :title="'成本分析'">
           <div style="height: 100%">
             <div style="height: 100%;padding-top:30px;">
@@ -469,6 +490,12 @@ export default {
       indicatorsItemVisible: false, // 只要指标的一张图
       indicatorIndex: 0,
       workPlans: {}, // 工作看板
+      chartLoading: true,
+      amountLoading: true,
+      dataLoading: true,
+      weekLoading: true,
+      workLoading: true,
+      costLoading: true,
     };
   },
   components: {
@@ -520,7 +547,7 @@ export default {
       getInventoryAndProduct({}).then((res) => {
         if (res.code === 10000) {
           // this.inventoryLinesData = res.data
-          console.log(res.data);
+          this.chartLoading = false;
           // this.inventoryPieData = res.data.slice(0, 6)
           this.inventoryPieData = [
             res.data["sow_stock"],
@@ -546,6 +573,7 @@ export default {
       getInventoryLines({}).then((res) => {
         if (res.code === 10000) {
           this.amountLineData = res.data;
+          this.amountLoading = false;
         } else {
           this.amountLineData = {
             boarStock: [],
@@ -583,6 +611,7 @@ export default {
               num: itemNum,
             });
           });
+          this.dataLoading = false;
         }
       });
     },
@@ -607,6 +636,7 @@ export default {
             res.data["replaceGilt"],
           ];
           this.costPieData = this.costLineData[this.costIndex];
+          this.costLoading = false;
         }
       });
     },
@@ -632,6 +662,7 @@ export default {
             quantityList: res.data.quantityList,
             timeList: res.data.timeList,
           };
+          this.weekLoading = false;
         }
       });
     },
@@ -640,6 +671,7 @@ export default {
       getWorkPlans({}).then(({ code, data }) => {
         if (code === 10000) {
           this.workPlans = data;
+          this.workLoading = false;
         }
       });
     },

src/views/Zoology/Zoology.vue

@@ -31,7 +31,10 @@
           <div class="left-top-title-right"></div>
         </div>
         <!-- 左上循环滑动 -->
-        <div class="left-top-content">
+        <div class="left-top-content" v-loading="loading"
+             element-loading-text="拼命加载中"
+             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>
@@ -39,7 +42,10 @@
           </swiper>
         </div>
       </div>
-      <div class="left-middle">
+      <div class="left-middle" v-loading="weatherLoading"
+           element-loading-text="拼命加载中"
+           element-loading-spinner="el-icon-loading"
+           element-loading-background="rgba(0, 0, 0, 0.8)">
         <chart-board
           :title=" roomName + '用水量'"
           :ifDate="true"
@@ -60,18 +66,24 @@
     <div class="right">
       <div class="right-top">
         <div class="kuang">
-          <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
+          <iframe  :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
         </div>
       </div>
       <div class="right-bottom">
-        <div class="right-bottom-left">
+        <div class="right-bottom-left" v-loading="chartLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <chart-board
             :title=" roomName + '温度'"
             @emitDates="getWaterDates">
             <chart-line :data="tempData" :id="4"></chart-line>
           </chart-board>
         </div>
-        <div class="right-bottom-right">
+        <div class="right-bottom-right" v-loading="chartLoading"
+             element-loading-text="拼命加载中"
+             element-loading-spinner="el-icon-loading"
+             element-loading-background="rgba(0, 0, 0, 0.8)">
           <chart-board
             :title=" roomName +'湿度'"
             @emitDates="getWaterDates">
@@ -152,8 +164,11 @@ export default {
       roomName: '',
       elecDates: [], // 用电量时间
       isVideo: false,
-      cameraOne: '',
-      cameraTwo: '',
+      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',
+      loading: true,
+      weatherLoading: true,
+      chartLoading: true
     }
   },
   computed: {
@@ -166,6 +181,7 @@ export default {
       getEnv({}).then(res => {
         if(res.code === 10000) {
           this.swiperData = res.data;
+          this.loading = false;
         }
       })
     },
@@ -222,6 +238,7 @@ export default {
         this.rhData.xAxisData.push(item.createTime);
         this.rhData.yAxisData.push(item.value);
       })
+      this.chartLoading = false;
     },
     setWeather(data) {
       this.waterData.xAxisData = [];
@@ -230,6 +247,7 @@ export default {
         this.waterData.xAxisData.push(item.createTime);
         this.waterData.yAxisData.push(item.value)
       })
+      this.weatherLoading = false;
     },
     initData() {
       getByRoom({}).then(res => {