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 @@
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="站点" prop="stnm"> <el-form-item label="站点" prop="stnm">
<el-input <el-input v-model="queryParams.stnm" placeholder="请输入站点名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.stnm"
placeholder="请输入站点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="水位计" prop="ip"> <!-- <el-form-item label="水位计" prop="ip">
<el-input <el-input
@ -18,21 +13,16 @@
/> />
</el-form-item> --> </el-form-item> -->
<el-form-item label="开始时间"> <el-form-item label="开始时间">
<el-date-picker <el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="选择开始时间" class="w200">
v-model="queryParams.startTime"
type="datetime"
placeholder="选择开始时间"
class="w200"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="结束时间"> <el-form-item label="结束时间">
<el-date-picker <el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="选择结束时间" class="w200">
v-model="queryParams.endTime" </el-date-picker>
type="datetime" </el-form-item>
placeholder="选择结束时间" <el-form-item>
class="w200" <el-date-picker v-model="timeStage" type="datetimerange" range-separator="" start-placeholder="开始日期"
> end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -44,32 +34,23 @@
<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;height: 168.75px;" <el-image style="width: 300px;height: 168.75px;" :src="item.imgName" :preview-src-list="srcList"
:src="item.imgName" @click="show(item.imgName)"></el-image>
:preview-src-list="srcList"
@click="show(item.imgName)"
></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>
<!-- <div class="ip">{{item.ip}}</div> --> <!-- <div class="ip">{{item.ip}}</div> -->
</div> </div>
<div class="data"> <div class="data">
<div class="value">{{item.value}}</div> <div class="value">{{ item.value }}</div>
<div class="tm">{{item.tm}}</div> <div class="tm">{{ item.tm }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
v-show="total>0" @pagination="getList" />
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.limit"
@pagination="getList"
/>
<el-dialog title="预览" :visible.sync="open" width="800px" append-to-body> <el-dialog title="预览" :visible.sync="open" width="800px" append-to-body>
@ -83,7 +64,7 @@
<script> <script>
import errorImg from "@/assets/404_images/404test.jpg" 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"; import { formatDate } from "../../../utils/common";
@ -95,7 +76,7 @@ export default {
total: 100, total: 100,
// //
currdataList: [], currdataList: [],
imgUrl:'', imgUrl: '',
// //
queryParams: { queryParams: {
@ -115,8 +96,36 @@ export default {
}, },
open: false, open: false,
showImg : '', showImg: '',
srcList:[], 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 {
/** 查询实时数据列表 */ /** 查询实时数据列表 */
getList() { getList() {
this.loading = true; this.loading = true;
if(this.queryParams.endTime!=null) if (this.queryParams.endTime != null)
this.queryParams.endTime=formatDate(this.queryParams.endTime,'yyyy-MM-dd hh:mm:ss') this.queryParams.endTime = formatDate(this.queryParams.endTime, 'yyyy-MM-dd hh:mm:ss')
if(this.queryParams.startTime!=null) if (this.queryParams.startTime != null)
this.queryParams.startTime=formatDate(this.queryParams.startTime,'yyyy-MM-dd hh:mm:ss') this.queryParams.startTime = formatDate(this.queryParams.startTime, 'yyyy-MM-dd hh:mm:ss')
queryPhotoList(this.queryParams).then(response=>{ queryPhotoList(this.queryParams).then(response => {
this.currdataList=response.data; this.currdataList = response.data;
this.total=response.count; this.total = response.count;
this.currdataList.forEach(function(e,index){ this.currdataList.forEach(function (e, index) {
if(e.imgName=='' ||e.imgName==null){ if (e.imgName == '' || e.imgName == null) {
e.imgName=errorImg e.imgName = errorImg
}else{ } 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 {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams={}; this.queryParams = {};
this.handleQuery(); this.handleQuery();
}, },
show(url){ show(url) {
// this.open = true; // this.open = true;
// this.showImg = url; // this.showImg = url;
this.srcList =[] this.srcList = []
this.srcList.push(url) this.srcList.push(url)
}, },
/** 设置初始时间*/ /** 设置初始时间*/
getTime(){ getTime() {
var timestamp = new Date(); var timestamp = new Date();
this.queryParams.endTime=formatDate(timestamp,'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.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> </script>
<style scoped> <style scoped>
.monitor { .monitor {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
} }
.card {
.card {
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 2px 2px 8px #ccc; box-shadow: 2px 2px 8px #ccc;
} }
img {
img {
width: 300px; width: 300px;
} }
.show-img{
.show-img {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.info {
.info {
padding: 16px; padding: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 24px; line-height: 24px;
color: #999; color: #999;
} }
.station {
} .station {}
.nm {
.nm {
color: #333; color: #333;
margin-top: 10px; margin-top: 10px;
font-size: 20px; font-size: 20px;
} }
.value{
.value {
text-align: center; text-align: center;
} }
</style> </style>

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

@ -222,7 +222,7 @@
end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange"> end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange">
</el-date-picker> </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 type="primary" icon="el-icon-search" size="mini" @click="handleAutoQuery">查询</el-button>
</el-form-item> </el-form-item>
<el-table :data="logInfoList" stripe style="width: 100%"> <el-table :data="logInfoList" stripe style="width: 100%">
@ -750,7 +750,7 @@ export default {
}, },
async handleQuery() { async handleAutoQuery() {
let res = await this.$axiosGet('/web/camera/getloginfo', this.logform.queryForm); let res = await this.$axiosGet('/web/camera/getloginfo', this.logform.queryForm);
if (res.code === 0) { if (res.code === 0) {

Loading…
Cancel
Save