2021-12-17 生态监测的布局

src/views/Zoology/Zoology.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-11-22 10:25:05
+ * @LastEditTime: 2021-12-17 08:48:08
  * @LastEditors: Please set LastEditors
  * @Description: 生态监测页面
  * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue
@@ -31,33 +31,51 @@
           <div class="left-top-title-right"></div>
         </div>
         <!-- 左上循环滑动 -->
-        <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">
+        <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>
+              <swiper-content
+                @getRoomId="getRoomId"
+                :list="item"
+                @onLeave="onLeave"
+                @onEnter="onEnter"
+              ></swiper-content>
             </swiper-slide>
           </swiper>
         </div>
       </div>
-      <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)">
+      <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 + '用水量'"
+          :title="roomName + '用水量'"
           :ifDate="true"
-          @emitDates="getWaterDates">
+          @emitDates="getWaterDates"
+        >
           <chart-line :data="waterData" :id="1"></chart-line>
         </chart-board>
       </div>
       <div class="left-bottom">
         <chart-board
-          :title=" roomName + '整栋用电量'"
+          :title="roomName + '整栋用电量'"
           :ifDate="true"
-          @emitDates="getElecDates">
+          @emitDates="getElecDates"
+        >
           <chart-line-and :data="waterData" :id="2"></chart-line-and>
         </chart-board>
       </div>
@@ -66,27 +84,45 @@
     <div class="right">
       <div class="right-top">
         <div class="kuang">
-          <iframe  :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" 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">
+        <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" 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">
+        <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">
             <chart-line :data="rhData" :id="5"></chart-line>
           </chart-board>
         </div>
@@ -96,15 +132,15 @@
 </template>
 
 <script>
-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 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 { timeDate, Debounce } from "@/utils";
 
 export default {
@@ -117,111 +153,119 @@ export default {
     SwiperContent,
     ChartBoard,
     ChartLine,
-    ChartLineAnd
+    ChartLineAnd,
   },
   data() {
     return {
       leftTopSelected: false, // 左上是否点击了要选择
-      simulatedData: [ // 左上 —— 模拟的数据
-        { id: 1, name: '1' },
-        { id: 2, name: '11' },
-        { id: 3, name: '111' },
-        { id: 4, name: '1111' },
-        { id: 5, name: '1111' },
-        { id: 6, name: '11111' },
-        { id: 7, name: '111111' },
-        { id: 8, name: '1111111' },
+      simulatedData: [
+        // 左上 —— 模拟的数据
+        { id: 1, name: "1" },
+        { id: 2, name: "11" },
+        { id: 3, name: "111" },
+        { id: 4, name: "1111" },
+        { id: 5, name: "1111" },
+        { id: 6, name: "11111" },
+        { id: 7, name: "111111" },
+        { id: 8, name: "1111111" },
       ],
-      swiperOption: { // 左上 —— 循环滑动
+      swiperOption: {
+        // 左上 —— 循环滑动
         slidesPerView: 4,
         autoplay: {
           delay: 3000,
           stopOnLastSlide: true,
-          disableOnInteraction: true
+          disableOnInteraction: true,
         },
         loop: true,
       },
       swiperData: [],
       waterDates: [], // 用水量模拟
-      waterData: { // 左中 —— 模拟数据
-        xAxisName: '水量',
-        xAxisData: ['07-01', '07-02', '07-03', '07-04', '07-05'],
-        yAxisName: '吨',
-        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2]
+      waterData: {
+        // 左中 —— 模拟数据
+        xAxisName: "水量",
+        xAxisData: ["07-01", "07-02", "07-03", "07-04", "07-05"],
+        yAxisName: "吨",
+        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2],
       },
       tempData: {
-        xAxisName: '温度',
+        xAxisName: "温度",
         xAxisData: [],
-        yAxisName: '℃',
+        yAxisName: "℃",
         yAxisData: [],
       },
       rhData: {
-        xAxisName: '湿度',
+        xAxisName: "湿度",
         xAxisData: [],
-        yAxisName: 'RH',
+        yAxisName: "RH",
         yAxisData: [],
       },
-      roomName: '',
+      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:
+        "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
-    }
+      chartLoading: true,
+    };
   },
   computed: {
     swipers() {
       return this.$refs.mySwiper.swiper;
-    }
+    },
   },
   methods: {
     init() {
-      getEnv({}).then(res => {
-        if(res.code === 10000) {
+      getEnv({}).then((res) => {
+        if (res.code === 10000) {
           this.swiperData = res.data;
           this.loading = false;
         }
-      })
+      });
     },
-    leftTopSelect() { // 左上角的选择是否显示
-      this.leftTopSelected = !this.leftTopSelected
+    leftTopSelect() {
+      // 左上角的选择是否显示
+      this.leftTopSelected = !this.leftTopSelected;
     },
-    getWaterDates(value) { // 左中 获取时间
-      this.waterDates = value
+    getWaterDates(value) {
+      // 左中 获取时间
+      this.waterDates = value;
     },
-    getElecDates(value) { // 左下 获取时间
-      this.elecDates = value
+    getElecDates(value) {
+      // 左下 获取时间
+      this.elecDates = value;
     },
     getRoomId: Debounce(function(id) {
       let params = {
         roomId: id,
         endDate: timeDate(new Date().getTime()),
-        type: 1
-      }
-      getByRoom(params).then(res => {
-        if(res.code === 10000) {
+        type: 1,
+      };
+      getByRoom(params).then((res) => {
+        if (res.code === 10000) {
           this.setTempAndRh(res.data);
         }
-      })
+      });
       let params1 = {
         roomId: id,
         endDate: timeDate(new Date().getTime()),
-        type: 2
-      }
-      getListWater(params1).then(res => {
-        if(res.code === 10000) {
+        type: 2,
+      };
+      getListWater(params1).then((res) => {
+        if (res.code === 10000) {
           this.setWeather(res.data);
         }
-      })
-      getRoomVideo({roomId: id}).then(res => {
-        if(res.code === 10000) {
+      });
+      getRoomVideo({ roomId: id }).then((res) => {
+        if (res.code === 10000) {
           this.isVideo = true;
           this.cameraOne = res.data.wsUrl;
           this.cameraTwo = res.data.rtspUrl;
         }
-      })
+      });
     }),
 
     setTempAndRh(data) {
@@ -230,40 +274,40 @@ export default {
       this.rhData.xAxisData = [];
       this.rhData.yAxisData = [];
       this.roomName = data.roomName;
-      data.semperatures.forEach(item => {
+      data.semperatures.forEach((item) => {
         this.tempData.xAxisData.push(item.createTime);
         this.tempData.yAxisData.push(item.value);
-      })
-      data.humidities.forEach(item => {
+      });
+      data.humidities.forEach((item) => {
         this.rhData.xAxisData.push(item.createTime);
         this.rhData.yAxisData.push(item.value);
-      })
+      });
       this.chartLoading = false;
     },
     setWeather(data) {
       this.waterData.xAxisData = [];
       this.waterData.yAxisData = [];
-      data.data.forEach(item => {
+      data.data.forEach((item) => {
         this.waterData.xAxisData.push(item.createTime);
-        this.waterData.yAxisData.push(item.value)
-      })
+        this.waterData.yAxisData.push(item.value);
+      });
       this.weatherLoading = false;
     },
     initData() {
-      getByRoom({}).then(res => {
-        if(res.code === 10000) {
+      getByRoom({}).then((res) => {
+        if (res.code === 10000) {
           this.setTempAndRh(res.data);
         }
-      })
+      });
       let params1 = {
         endDate: timeDate(new Date().getTime()),
-        type: 2
-      }
-      getListWater(params1).then(res => {
-        if(res.code === 10000) {
+        type: 2,
+      };
+      getListWater(params1).then((res) => {
+        if (res.code === 10000) {
           this.setWeather(res.data);
         }
-      })
+      });
     },
     onEnter() {
       this.swipers.autoplay.stop();
@@ -273,10 +317,10 @@ export default {
     },
   },
   mounted() {
-    this.init()
+    this.init();
     this.initData();
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
@@ -292,16 +336,20 @@ export default {
 .left {
   /* background-color: #fff; */
   width: 40%;
-  height: 100%;
+  height: 95%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 /* 左上 */
 .left-top {
   width: 100%;
   height: 30%;
-  background: linear-gradient(156deg, rgba(15, 21, 43, 1) 0%, rgba(0, 0, 0, 1) 100%);
+  background: linear-gradient(
+    156deg,
+    rgba(15, 21, 43, 1) 0%,
+    rgba(0, 0, 0, 1) 100%
+  );
 }
 /* 左上 - title */
 .left-top-title {
@@ -317,9 +365,9 @@ export default {
   position: relative;
 }
 .left-top-title-left::before {
-  content: '';
+  content: "";
   height: 85%;
-  border: 2px solid #66FFFF;
+  border: 2px solid #66ffff;
   position: absolute;
   top: 0;
   left: 0;
@@ -352,10 +400,10 @@ export default {
   background-size: 100% 100%;
   position: relative;
 }
-.left-top-title-right::after{
-  content: '';
+.left-top-title-right::after {
+  content: "";
   height: 85%;
-  border: 2px solid #66FFFF;
+  border: 2px solid #66ffff;
   position: absolute;
   top: 0;
   right: 0;
@@ -365,12 +413,12 @@ export default {
   position: absolute;
   top: 35px;
   left: -340px;
-  border: 2px solid #66FFFF;
+  border: 2px solid #66ffff;
   border-radius: 5px;
   padding: 15px 10px;
   display: flex;
   z-index: 100;
-  background-color: rgba(15,21,43, 0.6);
+  background-color: rgba(15, 21, 43, 0.6);
 }
 /* 左上 - 滑动 */
 .left-top-content {
@@ -387,7 +435,7 @@ export default {
 .left-bottom {
   background-color: rgb(228, 32, 32);
   width: 100%;
-  height: 30%;
+  height: 26.3%;
 }
 
 /** 右边 */
@@ -414,11 +462,12 @@ export default {
 /* 右下 */
 .right-bottom {
   display: flex;
-  background: rgb(3,16,50);
+  background: rgb(3, 16, 50);
+  height: 25%;
 }
 .right-bottom-left {
   width: 50%;
-  border-right: 2px solid #66FFFF;
+  border-right: 2px solid #66ffff;
 }
 .right-bottom-right {
   margin-left: 10px;

src/views/Zoology/charts/ChartLine.vue

@@ -1,31 +1,29 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-25 16:13:34
- * @LastEditTime: 2021-10-25 16:55:38
+ * @LastEditTime: 2021-12-17 08:46:16
  * @LastEditors: Please set LastEditors
  * @Description: 折线图
  * @FilePath: \hyyfScreen\src\views\Zoology\charts\ChartLine.vue
 -->
 <template>
-  <div :id="'chartLine' + id" class="chart-line">
-
-  </div>
+  <div :id="'chartLine' + id" class="chart-line"></div>
 </template>
 <script>
 export default {
   props: {
     id: {
-      type: Number
+      type: Number,
     },
     data: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   methods: {
     init() {
@@ -36,109 +34,111 @@ export default {
         //   y: 0
         // },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
         },
         // legend: {
         //   data: ['头']
         // },
         // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
         grid: {
-          top: '10%',
-          left: '10%',
-          bottom: '20%',
-          right: '10%'
+          top: "10%",
+          left: "10%",
+          bottom: "20%",
+          right: "10%",
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
             // name: this.data.xAxisName,
             data: this.data.xAxisData,
             axisPointer: {
-              type: 'shadow'
+              type: "shadow",
             },
             axisLabel: {
               textStyle: {
-                color: '#fff'
-              }
+                color: "#fff",
+              },
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: 'rgb(0, 255, 255)',
-              }
+                color: "rgb(0, 255, 255)",
+              },
             },
-            axisTick:{
-              show: false
+            axisTick: {
+              show: false,
             },
-          }
+          },
         ],
-        yAxis: //[
-          {
-            type: 'value',
-            name: this.data.yAxisName,
-            nameTextStyle: {
-              color: 'red'
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#fff'
-              },
-              formatter: '{value}' + this.data.yAxisName
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgb(0, 255, 255)',
-              }
+        //[
+        yAxis: {
+          type: "value",
+          name: this.data.yAxisName,
+          nameTextStyle: {
+            color: "red",
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
             },
-            axisTick:{
-              show:false
+            formatter: "{value}" + this.data.yAxisName,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgb(0, 255, 255)",
             },
-            splitLine:{
-              show:false
-            }
           },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
         //],
         series: [
           {
             name: this.data.xAxisName,
-            type: 'line',
+            type: "line",
             smooth: false,
             data: this.data.yAxisData,
             itemStyle: {
               normal: {
-                color: '#3aa0ff',
+                color: "#3aa0ff",
                 lineStyle: {
-                  color: '#3aa0ff'
-                }
-              }
-            }
-          }
-        ]
-      }
+                  color: "#3aa0ff",
+                },
+              },
+            },
+          },
+        ],
+      };
       this.myChart.setOption(options);
-    }
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chartLine' + this.id));
+    this.myChart = this.$echarts.init(
+      document.getElementById("chartLine" + this.id)
+    );
     this.init();
   },
   watch: {
     data: {
       handler(newVal) {
-        if(newVal) {
+        if (newVal) {
           this.myChart.clear();
           this.init();
         }
       },
       deep: true,
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
 .chart-line {
   width: 100%;
-  height: 160px;
+  height: 100%;
 }
 </style>