Compare commits

..

2 Commits

  1. 10
      src/api/data/photo.js
  2. BIN
      src/assets/404_images/404test.jpg
  3. 78
      src/views/data/photo/index.vue

10
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
})
}

BIN
src/assets/404_images/404test.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

78
src/views/data/photo/index.vue

@ -11,7 +11,7 @@
</el-form-item> </el-form-item>
<el-form-item label="水位计" prop="ip"> <el-form-item label="水位计" prop="ip">
<el-input <el-input
v-model="queryParams.stnm" v-model="queryParams.name"
placeholder="请输入水位计名称" placeholder="请输入水位计名称"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
@ -44,11 +44,13 @@
<div class="monitor"> <div class="monitor">
<div class="card" v-for="item in currdataList" :key="item.stnmId"> <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')"> --> <!-- <img src="../../../assets/images/water.jpg" @click="show('http://localhost:81/control/static/img/water.8d19122d.jpg')"> -->
<el-image style="width: 300px;" <el-image style="width: 300px;height: 168.75px;"
src="https://www.huastech.com.cn/test.jpg" :src="'https://www.huastech.com.cn/'+item.imgName"
:preview-src-list="srcList" :preview-src-list="srcList"
@click="show('https://www.huastech.com.cn/test.jpg')" @click="show('https://www.huastech.com.cn/'+item.imgName)"
></el-image> ></el-image>
<div class="info"> <div class="info">
<div class="station"> <div class="station">
<div class="nm">{{item.stnm}}</div> <div class="nm">{{item.stnm}}</div>
@ -64,8 +66,8 @@
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.page"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.limit"
@pagination="getList" @pagination="getList"
/> />
@ -74,9 +76,17 @@
<!-- <img class="show-img" :src="showImg" /> --> <!-- <img class="show-img" :src="showImg" /> -->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import errorImg from "@/assets/404_images/404test.jpg"
import {queryPhotoList} from "@/api/data/photo"
import { formatDate } from "../../../utils/common";
export default { export default {
name: "Currdata", name: "Currdata",
data() { data() {
@ -84,49 +94,60 @@ export default {
// //
total: 100, total: 100,
// //
currdataList: [ currdataList: [],
{stnmId: 1,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 13:00:00'}, imgUrl:'',
{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'},
],
// //
queryParams: { queryParams: {
endTime: '2022-06-08 13:00:00', endTime: '2022-06-26 10:55:00',
startTime: '2022-06-08 12:00:00', startTime: '2022-06-26 10:00:00',
pageNum: 1, page: 1,
pageSize: 10, limit: 10,
stnmId: null, stnmId: null,
stnm: '鄞州公园', stnm: '鄞州公园',
name: '视频水位计-yzgy',
mainType: null, mainType: null,
type: null, type: null,
stcd: null, stcd: null,
deviceTypeId: null, deviceTypeId: null,
stcdTypeId: null, stcdTypeId: null,
latestTm: null, latestTm: null,
latestValue: null latestValue: null,
}, },
open: false, open: false,
showImg : '', showImg : '',
srcList:[] srcList:[],
//
defaultImg:errorImg,
} }
}, },
created() { created() {
this.getTime();
this.getList(); this.getList();
}, },
methods: { methods: {
/** 查询实时数据列表 */ /** 查询实时数据列表 */
getList() { 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; this.loading = false;
})
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@ -136,6 +157,7 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams={};
this.handleQuery(); this.handleQuery();
}, },
show(url){ show(url){
@ -143,6 +165,14 @@ export default {
// this.showImg = url; // this.showImg = url;
this.srcList =[] this.srcList =[]
this.srcList.push(url) 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'));
} }
} }
}; };

Loading…
Cancel
Save