地区

src/main.js

@@ -15,6 +15,15 @@ Vue.use(Modal);
 Vue.prototype.hasPerm = hasBtnPermission
 Vue.prototype.$echarts = echart
 
+router.beforeEach((to, from, next) => {
+  next();
+  document.body.scrollTop = 0;
+  document.getElementById('operant').scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+  // 兼容ie
+  window.scrollTo(0 ,0);
+})
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -28,4 +28,5 @@ const router = new VueRouter({
   routes
 })
 
+
 export default router

src/views/Env/PigHouseEnv.vue

@@ -249,7 +249,6 @@ export default {
             }
           })
         } else {
-          console.log(222)
           this.$message.error('请选择栋舍楼层单元查询');
         }
       }

src/views/MainLayout.vue

@@ -15,7 +15,7 @@
             <el-button size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
           </div>
         </div>
-        <div class="operant">
+        <div class="operant" id="operant">
           <!--  没有绑定不让其进去  -->
           <template v-if="hasPerm(routerSite + ':look')">
             <router-view></router-view>

src/views/dashboard/chart/ChartWater.vue

@@ -49,10 +49,12 @@ export default {
     init() {
       let dataAxis = [];
       let data = [];
-      this.dataValue.forEach(item => {
-        dataAxis.push(item.createTime)
-        data.push(item.value)
-      })
+      if(this.dataValue.length > 0) {
+        this.dataValue.forEach(item => {
+          dataAxis.push(item.createTime)
+          data.push(item.value)
+        })
+      }
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
       let options = {

src/views/dashboard/chart/ChartWsd.vue

@@ -10,18 +10,53 @@ export default {
       myChart: null
     }
   },
+  props: {
+    data: {
+      type: Object,
+      default: function (){
+        return {}
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        if(newVal) {
+          this.myChart.clear();
+          this.init()
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     init() {
+      let name = this.data.roomName;
+      let hum = this.data.humidities;
+      let temp = this.data.semperatures;
+      let time = [];
+      let humList = [];
+      let tempList = [];
+      temp.forEach((item, i) => {
+        time.push(item.createTime.split(' ')[0]);
+        tempList.push(item.value);
+        humList.push(hum[i].value)
+      })
       let options = {
+        title: {
+          text: `${name}温度曲线`,
+          left: 'center'
+        },
         tooltip: {
           trigger: 'axis',
         },
         legend: {
-          data: ['温度', '湿度']
+          data: ['温度', '湿度'],
+          top: '8%'
         },
         color: ['#5599FE', '#31C3A6'],
         grid: {
-          top: '15%',
+          top: '20%',
           left: '10%',
           bottom: '10%',
           right: '10%'
@@ -29,7 +64,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            data: time,
             axisPointer: {
               type: 'shadow'
             },
@@ -89,14 +124,14 @@ export default {
             name: '温度',
             type: 'line',
             smooth: true,
-            data: [20, 19, 18, 23.2, 25.6, 28.7, 35.6, 36.2, 32.6, 20.0, 16.4, 23.3]
+            data: tempList
           },
           {
             name: '湿度',
             type: 'line',
             smooth: true,
             yAxisIndex: 1,
-            data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
+            data: humList
           }
         ]
       }

src/views/dashboard/dashboard.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="box">
-    <el-button @click="dialogVisible = true">测试</el-button>
     <div class="header">
       <el-row :gutter="20">
         <el-col v-for="item in 4" :key="item" :span="6">
@@ -36,102 +35,20 @@
     <div class="pending">
       <div class="title" :style="{color: color}">
         <span>猪舍温湿度</span>
-        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
-      </div>
-      <div style="padding: 20px; border-bottom: 1px solid #ddd">
-        <el-form :inline="true" size="mini">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="栋舍">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="单元">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">今日</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本周</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本月</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item>
-                <el-date-picker
-                    v-model="dateRange"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(1)">详情</el-button>
       </div>
+      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
       <div style="width: 100%; height: 400px">
-        <chart-wsd></chart-wsd>
+        <chart-wsd :data="TempAndHumList"></chart-wsd>
       </div>
     </div>
     <br/>
     <div class="pending">
       <div class="title" :style="{color: color}">
         <span>水量消耗</span>
-        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
-      </div>
-      <div style="padding: 20px; border-bottom: 1px solid #ddd">
-        <el-form :inline="true" size="mini">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="栋舍">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="单元">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">今日</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本周</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本月</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item>
-                <el-date-picker
-                    v-model="dateRange"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+        <el-button type="text" style="float: right; margin-right: 25px" @click="jump(2)">详情</el-button>
       </div>
+      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
       <div class="pen-flex">
         <div class="pen-left">
           <div class="water">
@@ -156,7 +73,7 @@
           </div>
         </div>
         <div style="width: 85%; height: 400px">
-          <chart-water></chart-water>
+          <chart-water :dataValue="waterList" :room="waterRoom"></chart-water>
         </div>
       </div>
     </div>
@@ -166,48 +83,7 @@
         <span>电量消耗</span>
         <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
       </div>
-      <div style="padding: 20px; border-bottom: 1px solid #ddd">
-        <el-form :inline="true" size="mini">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="栋舍">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="单元">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">今日</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本周</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本月</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item>
-                <el-date-picker
-                    v-model="dateRange"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
+      <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
       <div class="pen-flex">
         <div class="pen-left">
           <div class="water">
@@ -242,48 +118,6 @@
         <span>卖猪统计</span>
         <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
       </div>
-      <div style="padding: 20px; border-bottom: 1px solid #ddd">
-        <el-form :inline="true" size="mini">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="栋舍">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="单元">
-                <el-select></el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">今日</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本周</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <el-form-item>
-                <span class="text-size">本月</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item>
-                <el-date-picker
-                    v-model="dateRange"
-                    type="daterange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
       <div class="pen-flex">
         <div class="pen-left">
           <div class="water">
@@ -312,23 +146,18 @@
         </div>
       </div>
     </div>
-    <el-dialog
-        title="提示"
-        :visible.sync="dialogVisible"
-        width="50%">
-      <div style="width: 100%; height: 600px">
-        <iframe v-if="dialogVisible" :src="'static/dahua/index.html?'+ rtsp" frameborder="0" style="width: 100%; height: 100%"></iframe>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
+import XForm from "../../components/XForm";
 import { mapState } from 'vuex';
 import ChartWsd from "./chart/ChartWsd";
 import ChartDl from'./chart/ChartDl';
 import ChartWater from "./chart/ChartWater";
 import ChartPig from "./chart/ChartPig";
+import { getByFloor, getByRoom, getListWater, getSchool, getUid} from "../../utils/api";
+import {timeDate} from "../../utils";
 export default {
   name: "dashboard",
   components: {
@@ -336,6 +165,7 @@ export default {
     ChartDl,
     ChartWater,
     ChartPig,
+    XForm
   },
   data() {
     return {
@@ -373,11 +203,188 @@ export default {
         },
       ],
       dateRange: [],
-      rtsp: 'rtsp://36.26.62.70:9320/playback/pu/152?token=152'
+      formItems: [
+        {
+          id: 1,
+          type: 'select',
+          label: '栋舍：',
+          placeholder: '请选择栋舍',
+          field: 'floorId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 2,
+          type: 'select',
+          label: '楼层：',
+          placeholder: '请选择楼层',
+          field: 'uid',
+          options: [],
+          col: 4
+        },
+        {
+          id: 10,
+          type: 'select',
+          label: '单元：',
+          placeholder: '请选择单元',
+          field: 'unitId',
+          options: [],
+          col: 4
+        },
+        {
+          id: 4,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 5,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 6,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 8,
+          type: 'button',
+          text: '查询',
+          col: 1,
+          click: 'search'
+        },
+        // {
+        //   id: 7,
+        //   type: 'button',
+        //   text: '导出数据',
+        //   col: 2,
+        //   click: 'derive'
+        // }
+      ],
+      day: 2,
+      TempAndHumList: {},
+      waterList: [],
+      waterRoom: '',
+      rtsp: 'rtsp://36.26.62.70:9320/playback/pu/184?token=184'
     }
   },
   computed: {
     ...mapState(['color'])
+  },
+  methods: {
+    setDay(data) {
+      this.day = data;
+    },
+    getSchool() {
+      getSchool({}).then(res => {
+        if(res.code === 10000) {
+          res.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.floorName;
+          })
+          this.formItems[0].options = res.data;
+        }
+      })
+    },
+    setChange(item) {
+      if(item.type === 'floorId') {
+        let params = {
+          floorId: item.data
+        }
+        getByFloor(params).then(res => {
+          res.data.forEach(item => {
+            item.value = item.uid;
+            item.label = item.alias
+          })
+          this.formItems[1].options = res.data;
+        })
+      } else if(item.type === 'uid') {
+        let params = {
+          uid: item.data
+        }
+        getUid(params).then(res => {
+          res.data.forEach(item => {
+            item.value = item.id;
+            item.label = item.roomName
+          })
+          this.formItems[2].options = res.data
+        })
+      }
+    },
+    onClickType(data) {
+      if(data.type === 'search') {
+        let data1 = data.data;
+        if(data1.unitId) {
+          let params;
+          if(data1.value1) {
+            params = {
+              roomId: data1.unitId,
+              startDate: data1.value1[0],
+              endDate: data1.value1[1],
+              type: 4,
+            }
+          } else {
+            let end = timeDate(new Date().getTime())
+            params = {
+              roomId: data1.unitId,
+              endDate: end,
+              type: this.day
+            }
+          }
+          getByRoom(params).then(res => {
+            if(res.code === 10000) {
+              this.tempList = {
+                name: res.data.roomName,
+                list: res.data.semperatures
+              }
+              this.humList = {
+                name: res.data.roomName,
+                list: res.data.humidities
+              }
+            }
+            getListWater(params).then(res => {
+              if(res.code === 10000) {
+                this.waterList = res.data.data;
+                this.waterRoom = res.data.room;
+              }
+            })
+          })
+        } else {
+          this.$message.error('请选择栋舍楼层单元查询');
+        }
+      }
+    },
+    getTempAndHum() {
+      getByRoom({type: 2}).then(res => {
+        if(res.code === 10000) {
+          this.TempAndHumList = res.data;
+        }
+      })
+      getListWater({type: 2}).then(res => {
+        if(res.code === 10000) {
+          this.waterList = res.data.data;
+          console.log(this.waterList)
+          this.waterRoom = res.data.room;
+        }
+      })
+    },
+    jump(num) {
+      if(num === 1) {
+        this.$router.push('/pigHouseEnv');
+      } else if(num === 2) {
+        this.$router.push('/drinkWater');
+      }
+    }
+  },
+  mounted() {
+    this.getSchool()
+    this.getTempAndHum()
   }
 }
 </script>