Compare commits

..

2 Commits

  1. 169
      src/views/data/photo/index.vue
  2. 4
      src/views/web/camera/index.vue

169
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,32 +34,23 @@ @@ -44,32 +34,23 @@
<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">
<div class="nm">{{item.stnm}}</div>
<div class="nm">{{ item.stnm }}</div>
<!-- <div class="ip">{{item.ip}}</div> -->
</div>
<div class="data">
<div class="value">{{item.value}}</div>
<div class="tm">{{item.tm}}</div>
<div class="value">{{ item.value }}</div>
<div class="tm">{{ item.tm }}</div>
</div>
</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>
@ -83,7 +64,7 @@ @@ -83,7 +64,7 @@
<script>
import errorImg from "@/assets/404_images/404test.jpg"
import {queryPhotoList} from "@/api/data/photo"
import { queryPhotoList } from "@/api/data/photo"
import { formatDate } from "../../../utils/common";
@ -95,7 +76,7 @@ export default { @@ -95,7 +76,7 @@ export default {
total: 100,
//
currdataList: [],
imgUrl:'',
imgUrl: '',
//
queryParams: {
@ -115,8 +96,36 @@ export default { @@ -115,8 +96,36 @@ export default {
},
open: false,
showImg : '',
srcList:[],
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));
}
},
}
}
},
@ -132,20 +141,20 @@ export default { @@ -132,20 +141,20 @@ export default {
/** 查询实时数据列表 */
getList() {
this.loading = true;
if(this.queryParams.endTime!=null)
this.queryParams.endTime=formatDate(this.queryParams.endTime,'yyyy-MM-dd hh:mm:ss')
if(this.queryParams.startTime!=null)
this.queryParams.startTime=formatDate(this.queryParams.startTime,'yyyy-MM-dd hh:mm:ss')
queryPhotoList(this.queryParams).then(response=>{
this.currdataList=response.data;
this.total=response.count;
this.currdataList.forEach(function(e,index){
if(e.imgName=='' ||e.imgName==null){
if (this.queryParams.endTime != null)
this.queryParams.endTime = formatDate(this.queryParams.endTime, 'yyyy-MM-dd hh:mm:ss')
if (this.queryParams.startTime != null)
this.queryParams.startTime = formatDate(this.queryParams.startTime, 'yyyy-MM-dd hh:mm:ss')
queryPhotoList(this.queryParams).then(response => {
this.currdataList = response.data;
this.total = response.count;
this.currdataList.forEach(function (e, index) {
if (e.imgName == '' || e.imgName == null) {
e.imgName=errorImg
}else{
e.imgName = errorImg
} else {
e.imgName='https://www.huastech.com.cn'+e.imgName
e.imgName = 'https://www.huastech.com.cn' + e.imgName
}
})
@ -161,60 +170,74 @@ export default { @@ -161,60 +170,74 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams={};
this.queryParams = {};
this.handleQuery();
},
show(url){
show(url) {
// this.open = true;
// this.showImg = url;
this.srcList =[]
this.srcList = []
this.srcList.push(url)
},
/** 设置初始时间*/
getTime(){
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.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>
<style scoped>
.monitor {
.monitor {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
}
.card {
margin-bottom: 20px;
box-shadow: 2px 2px 8px #ccc;
}
img {
}
img {
width: 300px;
}
.show-img{
}
.show-img {
width: 100%;
margin: 0 auto;
}
.info {
}
.info {
padding: 16px;
display: flex;
justify-content: space-between;
line-height: 24px;
color: #999;
}
.station {
}
}
.nm {
.station {}
.nm {
color: #333;
margin-top: 10px;
font-size: 20px;
}
.value{
}
.value {
text-align: center;
}
</style>
}
</style>

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

@ -222,7 +222,7 @@ @@ -222,7 +222,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%">
@ -750,7 +750,7 @@ export default { @@ -750,7 +750,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