src/views/data/photo/index.vue

@@ -2,9 +2,14 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
       <el-form-item label="站点" prop="stnm">
-        <el-input v-model="queryParams.stnm" placeholder="请输入站点名称" clearable @keyup.enter.native="handleQuery" />
+        <el-input
+          v-model="queryParams.stnm"
+          placeholder="请输入站点名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
-      <!--     <el-form-item label="水位计" prop="ip">
+ <!--     <el-form-item label="水位计" prop="ip">
         <el-input
           v-model="queryParams.stcd"
           placeholder="请输入水位计名称"
@@ -13,18 +18,23 @@
         />
       </el-form-item> -->
       <el-form-item label="开始时间">
-        <el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间" class="w200">
+        <el-date-picker
+          v-model="queryParams.startTime"
+          type="datetime"
+          placeholder="选择开始时间"
+          class="w200"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="结束时间">
-        <el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间" class="w200">
+        <el-date-picker
+          v-model="queryParams.endTime"
+          type="datetime"
+          placeholder="选择结束时间"
+          class="w200"
+        >
         </el-date-picker>
       </el-form-item>
-      <el-form-item>
-        <el-date-picker v-model="timeStage" type="datetimerange" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange">
-          </el-date-picker>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -34,23 +44,32 @@
     <div class="monitor">
       <div class="card" v-for="item in currdataList" :key="item.stnmId">
         <!-- <img src="../../../assets/images/water.jpg" @click="show('http://localhost:81/control/static/img/water.8d19122d.jpg')"> -->
-        <el-image style="width: 300px;height: 168.75px;" :src="item.imgName" :preview-src-list="srcList"
+        <el-image style="width: 300px;height: 168.75px;"
-          @click="show(item.imgName)"></el-image>
+        :src="item.imgName"
+        :preview-src-list="srcList"
+        @click="show(item.imgName)"
+
+        ></el-image>
 
         <div class="info">
           <div class="station">
-            <div class="nm">{{ item.stnm }}</div>
+            <div class="nm">{{item.stnm}}</div>
             <!-- <div class="ip">{{item.ip}}</div> -->
           </div>
           <div class="data">
-            <div class="value">{{ item.value }}</div>
+            <div class="value">{{item.value}}</div>
-            <div class="tm">{{ item.tm }}</div>
+            <div class="tm">{{item.tm}}</div>
           </div>
         </div>
       </div>
     </div>
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
+    <pagination
-      @pagination="getList" />
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.limit"
+      @pagination="getList"
+    />
 
     <el-dialog title="预览" :visible.sync="open" width="800px" append-to-body>
 
@@ -64,7 +83,7 @@
 
 <script>
 import errorImg from "@/assets/404_images/404test.jpg"
-import { queryPhotoList } from "@/api/data/photo"
+import {queryPhotoList} from "@/api/data/photo"
 import { formatDate } from "../../../utils/common";
 
 
@@ -76,7 +95,7 @@ export default {
       total: 100,
       // 实时数据表格数据
       currdataList: [],
-      imgUrl: '',
+      imgUrl:'',
 
       // 查询参数
       queryParams: {
@@ -96,36 +115,8 @@ export default {
 
       },
       open: false,
-      showImg: '',
+      showImg : '',
-      srcList: [],
+      srcList:[],
-      //时间参数
-      timeStage: [],
-      // 设置可选择的时间段，*** 必须在 data 返回数据 ***
-      setDateRange: {
-
-        // 设置不能选择的日期
-        onPick: ({
-          maxDate,
-          minDate
-        }) => {
-          if (minDate) { //如果默认有最小日期
-            this.choiceDate0 = minDate.getTime();
-          } else { //如果最小日期被清空，则最小日期为当天
-            this.choiceDate0 = new Date();
-          }
-          if (maxDate) {
-            this.choiceDate0 = '';
-          }
-        },
-        disabledDate: (time) => {
-          let choiceDateTime = new Date(this.choiceDate0).getTime(); //选中的第一个日期
-          if (this.choiceDate0) {
-            //间隔15天，则加减14天---“这主要看需求”
-            //14天的时间戳：14*24*3600*1000=1209600000
-            return (time.getTime() > (choiceDateTime + 7*24*3600*1000)) || (time.getTime() < (choiceDateTime - 7*24*3600*1000));
-          }
-        },
-      }
     }
   },
 
@@ -141,26 +132,26 @@ export default {
     /** 查询实时数据列表 */
     getList() {
       this.loading = true;
-      if (this.queryParams.endTime != null)
+      if(this.queryParams.endTime!=null)
-        this.queryParams.endTime = formatDate(this.queryParams.endTime, 'yyyy-MM-dd hh:mm:ss')
+      this.queryParams.endTime=formatDate(this.queryParams.endTime,'yyyy-MM-dd hh:mm:ss')
-      if (this.queryParams.startTime != null)
+      if(this.queryParams.startTime!=null)
-        this.queryParams.startTime = formatDate(this.queryParams.startTime, 'yyyy-MM-dd hh:mm:ss')
+      this.queryParams.startTime=formatDate(this.queryParams.startTime,'yyyy-MM-dd hh:mm:ss')
-      queryPhotoList(this.queryParams).then(response => {
+      queryPhotoList(this.queryParams).then(response=>{
-        this.currdataList = response.data;
+      this.currdataList=response.data;
-        this.total = response.count;
+      this.total=response.count;
-        this.currdataList.forEach(function (e, index) {
+      this.currdataList.forEach(function(e,index){
-          if (e.imgName == '' || e.imgName == null) {
+        if(e.imgName=='' ||e.imgName==null){
-
+
-            e.imgName = errorImg
+          e.imgName=errorImg
-          } else {
+        }else{
-
+
-            e.imgName = 'https://www.huastech.com.cn' + e.imgName
+          e.imgName='https://www.huastech.com.cn'+e.imgName
-
+
-          }
+        }
-        })
-        this.loading = false;
-
       })
+      this.loading = false;
+
+    })
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -170,74 +161,60 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.queryParams = {};
+      this.queryParams={};
       this.handleQuery();
     },
-    show(url) {
+    show(url){
       // this.open = true;
       // this.showImg = url;
-      this.srcList = []
+      this.srcList =[]
       this.srcList.push(url)
     },
     /** 设置初始时间*/
-    getTime() {
+    getTime(){
       var timestamp = new Date();
 
-      this.queryParams.endTime = formatDate(timestamp, 'yyyy-MM-dd hh:mm:ss')
+      this.queryParams.endTime=formatDate(timestamp,'yyyy-MM-dd hh:mm:ss')
-      this.queryParams.startTime = formatDate(new Date(timestamp.getTime() - 86400 * 2000), ('yyyy-MM-dd hh:mm:ss'));
+      this.queryParams.startTime=formatDate(new Date(timestamp.getTime()-86400*2000),('yyyy-MM-dd hh:mm:ss'));
-      this.timeStage[0]=this.queryParams.startTime
-      this.timeStage[1]=this.queryParams.endTime
-    },
-    chooseTimeRange() {
 
-      if (this.timeStage != null) {
+    }
-        this.logform.queryForm.startTime = formatDate(this.timeStage[0], 'yyyy-MM-dd hh:mm:ss');
-        this.logform.queryForm.endTime = formatDate(this.timeStage[1], 'yyyy-MM-dd hh:mm:ss');
-      }
-
-    },
   }
 };
 </script>
 
 <style scoped>
-.monitor {
+  .monitor {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  justify-content: space-around;
+    justify-content: space-around;
-}
+  }
-
+  .card {
-.card {
+    margin-bottom: 20px;
-  margin-bottom: 20px;
+    box-shadow: 2px 2px 8px #ccc;
-  box-shadow: 2px 2px 8px #ccc;
+  }
-}
+  img {
-
+    width: 300px;
-img {
+  }
-  width: 300px;
+  .show-img{
-}
+    width: 100%;
-
+    margin: 0 auto;
-.show-img {
+  }
-  width: 100%;
+  .info {
-  margin: 0 auto;
+    padding: 16px;
-}
+    display: flex;
-
+    justify-content: space-between;
-.info {
+    line-height: 24px;
-  padding: 16px;
+    color: #999;
-  display: flex;
+  }
-  justify-content: space-between;
+  .station {
-  line-height: 24px;
+
-  color: #999;
+  }
-}
+  .nm {
-
+    color: #333;
-.station {}
+    margin-top: 10px;
-
+    font-size: 20px;
-.nm {
+  }
-  color: #333;
+  .value{
-  margin-top: 10px;
+    text-align: center;
-  font-size: 20px;
+  }
-}
+  </style>
-
-.value {
-  text-align: center;
-}
-</style>

src/views/web/camera/index.vue

@@ -222,7 +222,7 @@
             end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange">
           </el-date-picker>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAutoQuery">查询</el-button>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
           </el-form-item>
           <el-table :data="logInfoList" stripe style="width: 100%">
 
@@ -750,7 +750,7 @@ export default {
 
 
     },
-    async handleAutoQuery() {
+    async handleQuery() {
       let res = await this.$axiosGet('/web/camera/getloginfo', this.logform.queryForm);
 
       if (res.code === 0) {