Browse Source

优化

master
yx 2 years ago
parent
commit
bdaf9e1809
  1. 89
      src/views/data/photo/index.vue
  2. 4
      src/views/web/camera/index.vue

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

@ -2,12 +2,7 @@ @@ -2,12 +2,7 @@
<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-input
@ -18,21 +13,16 @@ @@ -18,21 +13,16 @@
/>
</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>
@ -44,12 +34,8 @@ @@ -44,12 +34,8 @@
<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"
@click="show(item.imgName)"
></el-image>
<el-image style="width: 300px;height: 168.75px;" :src="item.imgName" :preview-src-list="srcList"
@click="show(item.imgName)"></el-image>
<div class="info">
<div class="station">
@ -63,13 +49,8 @@ @@ -63,13 +49,8 @@
</div>
</div>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.limit"
@pagination="getList"
/>
<pagination 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>
@ -117,6 +98,34 @@ export default { @@ -117,6 +98,34 @@ export default {
open: false,
showImg: '',
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) {
//1514---
//1414*24*3600*1000=1209600000
return (time.getTime() > (choiceDateTime + 7*24*3600*1000)) || (time.getTime() < (choiceDateTime - 7*24*3600*1000));
}
},
}
}
},
@ -176,8 +185,17 @@ export default { @@ -176,8 +185,17 @@ export default {
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.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>
@ -188,17 +206,21 @@ export default { @@ -188,17 +206,21 @@ export default {
flex-wrap: wrap;
justify-content: space-around;
}
.card {
margin-bottom: 20px;
box-shadow: 2px 2px 8px #ccc;
}
img {
width: 300px;
}
.show-img {
width: 100%;
margin: 0 auto;
}
.info {
padding: 16px;
display: flex;
@ -206,14 +228,15 @@ export default { @@ -206,14 +228,15 @@ export default {
line-height: 24px;
color: #999;
}
.station {
}
.station {}
.nm {
color: #333;
margin-top: 10px;
font-size: 20px;
}
.value {
text-align: center;
}

4
src/views/web/camera/index.vue

@ -220,7 +220,7 @@ @@ -220,7 +220,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="handleQuery">查询</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleAutoQuery">查询</el-button>
</el-form-item>
<el-table :data="logInfoList" stripe style="width: 100%">
@ -615,7 +615,7 @@ export default { @@ -615,7 +615,7 @@ export default {
},
async handleQuery() {
async handleAutoQuery() {
let res = await this.$axiosGet('/web/camera/getloginfo', this.logform.queryForm);
if (res.code === 0) {

Loading…
Cancel
Save