5 changed files with 217 additions and 18717 deletions
@ -0,0 +1,189 @@
@@ -0,0 +1,189 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px"> |
||||
<el-form-item label="选择站点" prop="stnmId"> |
||||
<el-select v-model="queryParams.stnm" placeholder="请选择站点" clearable> |
||||
<el-option |
||||
v-for="dict in stationList" |
||||
:key="dict.id" |
||||
:label="dict.stnm" |
||||
:value="dict.stnm" |
||||
/> |
||||
</el-select> |
||||
</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> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table :loading="loading" :data="currdataList" border> |
||||
<el-table-column label="序号" type="index" align="center"/> |
||||
<el-table-column label="站点名称" align="center" prop="stnm" /> |
||||
<el-table-column label="ip地址" align="center" prop="ip" /> |
||||
<el-table-column label="最新数值" align="center" prop="value" /> |
||||
<el-table-column label="最新上传时间" align="center" prop="tm"/> |
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-view" |
||||
@click="showImg(scope.row)" |
||||
>查看图片</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" |
||||
@pagination="getList" /> |
||||
|
||||
<el-dialog title="水尺图片" :visible.sync="open" height="770px" width="800px" append-to-body> |
||||
<el-image style="width: 100%;height: 100%;" :src="imgUrl" :preview-src-list="srcList"/> |
||||
</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: "photo2", |
||||
data() { |
||||
return { |
||||
// 总条数 |
||||
total: 100, |
||||
// 实时数据表格数据 |
||||
currdataList: [], |
||||
imgUrl: '', |
||||
searchInfo:'', |
||||
loading: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
endTime: null, |
||||
// endTime: '2022-06-26 10:55:00', |
||||
// startTime: '2022-06-26 10:00:00', |
||||
startTime: null, |
||||
page: 1, |
||||
limit: 10, |
||||
stnm: null, |
||||
}, |
||||
open: false, |
||||
srcList: [], |
||||
//时间参数 |
||||
timeStage: [], |
||||
stationList:[], |
||||
// 设置可选择的时间段，*** 必须在 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)); |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
this.getTime(); |
||||
this.getList(); |
||||
this.getStationList(); |
||||
}, |
||||
methods: { |
||||
/** 查询水尺-测站信息列表 */ |
||||
async getStationList() { |
||||
let res = await this.$axiosGet('/system/info/listAll'); |
||||
if(res.code === 0){ |
||||
this.stationList = res.data; |
||||
} |
||||
}, |
||||
/** 查询实时数据列表 */ |
||||
getList() { |
||||
if(this.timeStage == null || this.timeStage.length == 0 ){ |
||||
this.$modal.msg("请选择时间"); |
||||
return; |
||||
} |
||||
this.loading = true; |
||||
queryPhotoList(this.queryParams).then(response => { |
||||
this.currdataList = response.data; |
||||
this.total = response.count; |
||||
if(this.total==0){ |
||||
this.showSearch=true |
||||
this.searchInfo='暂无数据' |
||||
}else |
||||
this.showSearch=false |
||||
this.currdataList.forEach(function (e, index) { |
||||
if (e.imgName == '' || e.imgName == null) { |
||||
|
||||
e.imgName = errorImg |
||||
} |
||||
else { |
||||
e.imgName = process.env.VUE_APP_BASE_API + e.imgName |
||||
} |
||||
}) |
||||
this.loading = false; |
||||
|
||||
}) |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.page = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.queryParams = {}; |
||||
this.handleQuery(); |
||||
}, |
||||
showImg(item) { |
||||
this.open = true; |
||||
this.imgUrl = item.imgName |
||||
this.srcList = [] |
||||
this.srcList.push(item.imgName) |
||||
|
||||
}, |
||||
/** 设置初始时间*/ |
||||
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')); |
||||
this.timeStage[0]=this.queryParams.startTime |
||||
this.timeStage[1]=this.queryParams.endTime |
||||
}, |
||||
chooseTimeRange() { |
||||
if (this.timeStage != null && this.timeStage.length > 0) { |
||||
this.queryParams.startTime = formatDate(this.timeStage[0], 'yyyy-MM-dd hh:mm:ss'); |
||||
this.queryParams.endTime = formatDate(this.timeStage[1], 'yyyy-MM-dd hh:mm:ss'); |
||||
} |
||||
|
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue