feat:环境监测

src/main.js

@@ -62,6 +62,7 @@ import {
   scrollBoard,
   capsuleChart,
   borderBox8,
+  borderBox9,
   decoration12,
   decoration3,
   decoration9,
@@ -78,6 +79,7 @@ if (fileUrl) {
 Vue.use(loading);
 Vue.use(borderBox13);
 Vue.use(borderBox8);
+Vue.use(borderBox9);
 Vue.use(digitalFlop);
 Vue.use(capsuleChart);
 Vue.use(waterLevelPond);

src/views/dataV/pageFour/Environment.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="w100 h100">
+    <el-row :gutter="15" class="w100 h100">
+      <el-col :span="8" v-for="(item, index) in list" :key="item.label" :class="`h35 ${index + 1 <= 3 ? 'margin-tb-25' : ''}`">
+        <dv-border-box-9 class="w100 h100">
+          <div class="panel flex">
+            <div class="panel-left">
+              <span class="panel-icon">
+                <img :src="item.icon" />
+              </span>
+              <span class="panel-label">{{ item.label }}</span>
+            </div>
+            <b class="panel-value">{{ item.value }}</b>
+          </div>
+        </dv-border-box-9>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Environment',
+  mixins: [],
+  props: {
+    data: {
+      type: Object,
+      defalut: {},
+    },
+  },
+  data() {
+    return {
+      list: [
+        {
+          icon: require('../img/40.png'),
+          label: '温度',
+          value: '28℃',
+        },
+        {
+          icon: require('../img/41.png'),
+          label: '湿度',
+          value: '56.5℃',
+        },
+        {
+          icon: require('../img/42.png'),
+          label: '大气压',
+          value: '25kpa',
+        },
+        {
+          icon: require('../img/43.png'),
+          label: '风向',
+          value: '西南',
+        },
+        {
+          icon: require('../img/44.png'),
+          label: '风速',
+          value: '9.8m/s',
+        },
+        {
+          icon: require('../img/45.png'),
+          label: '降雨量',
+          value: '0mm',
+        },
+      ],
+    };
+  },
+  computed: {},
+  watch: {
+    data: {
+      handler: async function (row) {
+        // this.videoUrl = row.url;
+        // await this.sleep(500);
+        // this.playVideo();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  async created() {},
+  methods: {
+    sleep() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.panel {
+  align-items: center;
+  color: #fff;
+  height: 100%;
+  justify-content: center;
+
+  &-left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  &-icon {
+    width: 32px;
+    height: 32px;
+    img {
+      width: 100%;
+    }
+  }
+  &-label {
+    font-size: 14px;
+    margin: 0 16px 0 10px;
+  }
+  &-value {
+    font-size: 16px;
+    color: #fec171;
+  }
+}
+</style>

src/views/dataV/pageFour/Tree.vue

@@ -5,7 +5,7 @@
         <span>{{ currentDate }}</span>
         <span> <i class="el-icon-location"></i>凤庆县 </span>
       </div>
-      <div class="weather-container">
+      <!-- <div class="weather-container">
         <div class="temperature">
           <div class="temperature-left">
             <span class="temp-value">11</span>
@@ -38,7 +38,7 @@
             <span class="label">1201℃</span>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="tree-date"></div>
       <div
         v-for="(item, index) in productList"

src/views/dataV/pageFour/index-bak.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="monitor">
+    <LayOut :bg="bg" :title="title">
+      <!-- 左边 大树 -->
+      <template v-slot:seven>
+        <tree :baseId="baseId" @switch="onSwitch"></tree>
+      </template>
+      <!-- 右上 视频播放 -->
+      <template v-slot:two>
+        <video-mp4 :data="data" />
+      </template>
+      <!-- 右中 害虫监测 -->
+      <template v-slot:three>
+        <bug-chart :baseId="baseId"></bug-chart>
+      </template>
+      <!-- 下右 设备统计 -->
+      <template v-slot:six>
+        <!-- <device-chart :baseId="baseId"></device-chart> -->
+        <land :data="data" />
+      </template>
+    </LayOut>
+  </div>
+</template>
+
+<script>
+import LayOut from '../layOut.vue';
+import VideoMp4 from './Video.vue';
+import Land from './Land.vue';
+import BugChart from './BugChart.vue';
+import Tree from './Tree.vue';
+import SinglePlayer from '@/views/components/player/SinglePlayer';
+
+export default {
+  props: {
+    baseId: Number,
+  },
+  components: { LayOut, VideoMp4, BugChart, Land, Tree, SinglePlayer },
+  data() {
+    return {
+      bg: require('../img/bg.png'),
+      title: ['视频监控', '害虫监测数据', '气象站环境检测', '气象站图表统计', '土壤监测数据'],
+      data: {},
+    };
+  },
+  methods: {
+    onSwitch(val) {
+      this.data = val;
+    },
+  },
+};
+</script>

src/views/dataV/pageFour/index.vue

@@ -7,7 +7,7 @@
       </template>
       <!-- 右上 视频播放 -->
       <template v-slot:two>
-        <video-mp4 :data="data" />
+        <environment :data="data" />
       </template>
       <!-- 右中 害虫监测 -->
       <template v-slot:three>
@@ -15,8 +15,7 @@
       </template>
       <!-- 下右 设备统计 -->
       <template v-slot:six>
-        <!-- <device-chart :baseId="baseId"></device-chart> -->
+        <video-mp4 :data="data" />
-        <land :data="data" />
       </template>
     </LayOut>
   </div>
@@ -25,7 +24,7 @@
 <script>
 import LayOut from '../layOut.vue';
 import VideoMp4 from './Video.vue';
-import Land from './Land.vue';
+import Environment from './Environment.vue';
 import BugChart from './BugChart.vue';
 import Tree from './Tree.vue';
 import SinglePlayer from '@/views/components/player/SinglePlayer';
@@ -34,11 +33,11 @@ export default {
   props: {
     baseId: Number,
   },
-  components: { LayOut, VideoMp4, BugChart, Land, Tree, SinglePlayer },
+  components: { LayOut, VideoMp4, BugChart, Environment, Tree, SinglePlayer },
   data() {
     return {
       bg: require('../img/bg.png'),
-      title: ['视频监控', '害虫监测数据', '气象站环境检测', '气象站图表统计', '土壤监测数据'],
+      title: ['环境监测', '害虫监测数据', '气象站环境检测', '气象站图表统计', '视频监控'],
       data: {},
     };
   },