水尺图片

src/api/data/photo.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询水尺图片
+export function queryPhotoList(query) {
+  return request({
+    url: '/system/photoinfo/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/data/photo/index.vue

@@ -11,7 +11,7 @@
       </el-form-item>
       <el-form-item label="水位计" prop="ip">
         <el-input
-          v-model="queryParams.stnm"
+          v-model="queryParams.name"
           placeholder="请输入水位计名称"
           clearable
           @keyup.enter.native="handleQuery"
@@ -44,11 +44,13 @@
     <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;"
-        src="https://www.huastech.com.cn/test.jpg"
+        <el-image style="width: 300px;height: 168.75px;"
+        :src="'https://www.huastech.com.cn/'+item.imgName"
         :preview-src-list="srcList"
-        @click="show('https://www.huastech.com.cn/test.jpg')"
+        @click="show('https://www.huastech.com.cn/'+item.imgName)"
+        
         ></el-image>
+       
         <div class="info">
           <div class="station">
             <div class="nm">{{item.stnm}}</div>
@@ -64,8 +66,8 @@
     <pagination
       v-show="total>0"
       :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.limit"
       @pagination="getList"
     />
 
@@ -74,9 +76,17 @@
       <!-- <img  class="show-img" :src="showImg" /> -->
     </el-dialog>
   </div>
+  
+    
+  
 </template>
 
 <script>
+import errorImg from "@/assets/404_images/404test.jpg"
+import {queryPhotoList} from "@/api/data/photo"
+import { formatDate } from "../../../utils/common";
+
+
 export default {
   name: "Currdata",
   data() {
@@ -84,49 +94,60 @@ export default {
       // 总条数
       total: 100,
       // 实时数据表格数据
-      currdataList: [
-        {stnmId: 1,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 13:00:00'},
-        {stnmId: 2,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:55:00'},
-        {stnmId: 3,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:50:00'},
-        {stnmId: 4,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:45:00'},
-        {stnmId: 5,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:40:00'},
-        {stnmId: 6,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:35:00'},
-        {stnmId: 7,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:30:00'},
-        {stnmId: 8,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:25:00'},
-        {stnmId: 9,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:20:00'},
-        {stnmId: 10,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:15:00'},
-      ],
+      currdataList: [],
+      imgUrl:'',
+     
       // 查询参数
       queryParams: {
-        endTime: '2022-06-08 13:00:00',
-        startTime: '2022-06-08 12:00:00',
-        pageNum: 1,
-        pageSize: 10,
+        endTime: '2022-06-26 10:55:00',
+        startTime: '2022-06-26 10:00:00',
+        page: 1,
+        limit: 10,
         stnmId: null,
         stnm: '鄞州公园',
+        name: '视频水位计-yzgy',
         mainType: null,
         type: null,
         stcd: null,
         deviceTypeId: null,
         stcdTypeId: null,
         latestTm: null,
-        latestValue: null
+        latestValue: null,
+        
       },
       open: false,
       showImg : '',
-      srcList:[]
+      srcList:[],
+       //默认图片
+      defaultImg:errorImg,
     }
   },
-
+  
   created() {
+    this.getTime();
     this.getList();
+    
   },
 
 
   methods: {
+   
     /** 查询实时数据列表 */
     getList() {
+      this.loading = true;
+      queryPhotoList(this.queryParams).then(response=>{
+      this.currdataList=response.data;
+      this.total=response.count;
+      this.currdataList.foreach((e,index)=>{
+        if(e.imgUrl==''&& e.imgUrl==null){
+          e.imgUrl=this.defaultImg
+        }else{
+          e.imgUrl='https://www.huastech.com.cn/'+e.imgUrl
+        }
+      })
       this.loading = false;
+      
+    })
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -136,6 +157,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.queryParams={};
       this.handleQuery();
     },
     show(url){
@@ -143,6 +165,14 @@ export default {
       // this.showImg = url;
       this.srcList =[]
       this.srcList.push(url)
+    },
+    /** 设置初始时间*/
+    getTime(){
+      var timestamp = new Date();
+      
+      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'));
+     
     }
   }
 };