blankk
2 years ago
5 changed files with 217 additions and 18717 deletions
@ -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