|
|
|
@ -11,7 +11,7 @@
@@ -11,7 +11,7 @@
|
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="水位计" prop="ip"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="queryParams.stnm" |
|
|
|
|
v-model="queryParams.name" |
|
|
|
|
placeholder="请输入水位计名称" |
|
|
|
|
clearable |
|
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
@ -44,11 +44,13 @@
@@ -44,11 +44,13 @@
|
|
|
|
|
<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;" |
|
|
|
|
src="https://www.huastech.com.cn/test.jpg" |
|
|
|
|
<el-image style="width: 300px;height: 168.75px;" |
|
|
|
|
:src="'https://www.huastech.com.cn/'+item.imgName" |
|
|
|
|
:preview-src-list="srcList" |
|
|
|
|
@click="show('https://www.huastech.com.cn/test.jpg')" |
|
|
|
|
@click="show('https://www.huastech.com.cn/'+item.imgName)" |
|
|
|
|
|
|
|
|
|
></el-image> |
|
|
|
|
|
|
|
|
|
<div class="info"> |
|
|
|
|
<div class="station"> |
|
|
|
|
<div class="nm">{{item.stnm}}</div> |
|
|
|
@ -64,8 +66,8 @@
@@ -64,8 +66,8 @@
|
|
|
|
|
<pagination |
|
|
|
|
v-show="total>0" |
|
|
|
|
:total="total" |
|
|
|
|
:page.sync="queryParams.pageNum" |
|
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
|
:page.sync="queryParams.page" |
|
|
|
|
:limit.sync="queryParams.limit" |
|
|
|
|
@pagination="getList" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
@ -74,9 +76,17 @@
@@ -74,9 +76,17 @@
|
|
|
|
|
<!-- <img class="show-img" :src="showImg" /> --> |
|
|
|
|
</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: "Currdata", |
|
|
|
|
data() { |
|
|
|
@ -84,49 +94,60 @@ export default {
@@ -84,49 +94,60 @@ export default {
|
|
|
|
|
// 总条数 |
|
|
|
|
total: 100, |
|
|
|
|
// 实时数据表格数据 |
|
|
|
|
currdataList: [ |
|
|
|
|
{stnmId: 1,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 13:00:00'}, |
|
|
|
|
{stnmId: 2,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:55:00'}, |
|
|
|
|
{stnmId: 3,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:50:00'}, |
|
|
|
|
{stnmId: 4,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:45:00'}, |
|
|
|
|
{stnmId: 5,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:40:00'}, |
|
|
|
|
{stnmId: 6,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:35:00'}, |
|
|
|
|
{stnmId: 7,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:30:00'}, |
|
|
|
|
{stnmId: 8,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:25:00'}, |
|
|
|
|
{stnmId: 9,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:20:00'}, |
|
|
|
|
{stnmId: 10,stnm:'鄞州公园',ip:'123.2.4.1',value:'1.37',tm: '2022-06-08 12:15:00'}, |
|
|
|
|
], |
|
|
|
|
currdataList: [], |
|
|
|
|
imgUrl:'', |
|
|
|
|
|
|
|
|
|
// 查询参数 |
|
|
|
|
queryParams: { |
|
|
|
|
endTime: '2022-06-08 13:00:00', |
|
|
|
|
startTime: '2022-06-08 12:00:00', |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
endTime: '2022-06-26 10:55:00', |
|
|
|
|
startTime: '2022-06-26 10:00:00', |
|
|
|
|
page: 1, |
|
|
|
|
limit: 10, |
|
|
|
|
stnmId: null, |
|
|
|
|
stnm: '鄞州公园', |
|
|
|
|
name: '视频水位计-yzgy', |
|
|
|
|
mainType: null, |
|
|
|
|
type: null, |
|
|
|
|
stcd: null, |
|
|
|
|
deviceTypeId: null, |
|
|
|
|
stcdTypeId: null, |
|
|
|
|
latestTm: null, |
|
|
|
|
latestValue: null |
|
|
|
|
latestValue: null, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
open: false, |
|
|
|
|
showImg : '', |
|
|
|
|
srcList:[] |
|
|
|
|
srcList:[], |
|
|
|
|
//默认图片 |
|
|
|
|
defaultImg:errorImg, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
created() { |
|
|
|
|
this.getTime(); |
|
|
|
|
this.getList(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
/** 查询实时数据列表 */ |
|
|
|
|
getList() { |
|
|
|
|
this.loading = true; |
|
|
|
|
queryPhotoList(this.queryParams).then(response=>{ |
|
|
|
|
this.currdataList=response.data; |
|
|
|
|
this.total=response.count; |
|
|
|
|
this.currdataList.foreach((e,index)=>{ |
|
|
|
|
if(e.imgUrl==''&& e.imgUrl==null){ |
|
|
|
|
e.imgUrl=this.defaultImg |
|
|
|
|
}else{ |
|
|
|
|
e.imgUrl='https://www.huastech.com.cn/'+e.imgUrl |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.loading = false; |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
/** 搜索按钮操作 */ |
|
|
|
|
handleQuery() { |
|
|
|
@ -136,6 +157,7 @@ export default {
@@ -136,6 +157,7 @@ export default {
|
|
|
|
|
/** 重置按钮操作 */ |
|
|
|
|
resetQuery() { |
|
|
|
|
this.resetForm("queryForm"); |
|
|
|
|
this.queryParams={}; |
|
|
|
|
this.handleQuery(); |
|
|
|
|
}, |
|
|
|
|
show(url){ |
|
|
|
@ -143,6 +165,14 @@ export default {
@@ -143,6 +165,14 @@ export default {
|
|
|
|
|
// this.showImg = url; |
|
|
|
|
this.srcList =[] |
|
|
|
|
this.srcList.push(url) |
|
|
|
|
}, |
|
|
|
|
/** 设置初始时间*/ |
|
|
|
|
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')); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|