21 2 years ago
parent
commit
4a7b4b5746
  1. BIN
      src/assets/images/water.jpg
  2. 225
      src/views/data/monitor/index.vue
  3. 131
      src/views/data/photo/index.vue

BIN
src/assets/images/water.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

225
src/views/data/monitor/index.vue

@ -0,0 +1,225 @@ @@ -0,0 +1,225 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="站点" prop="stnm">
<el-input
v-model="queryParams.stnm"
placeholder="请输入站点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="摄像机" prop="ip">
<el-input
v-model="queryParams.stnm"
placeholder="请输入摄像机IP"
clearable
@keyup.enter.native="handleQuery"
/>
</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>
<div class="container">
<div class="list">
<div class="station" v-for="item in currdataList" :key="item.stnmId">
{{item.stnm + " (" + item.ip + ")"}}
</div>
</div>
<img src="../../../assets/images/water.jpg" class="video">
</div>
</div>
</template>
<script>
export default {
name: "Currdata",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 100,
//
currdataList: [
{stnmId: 1,stnm:'姜山',ip:'123.2.3.1',value:'35.1',tm: '2022-06-09 12:00:00'},
{stnmId: 2,stnm:'画龙',ip:'123.2.3.2',value:'39.2',tm: '2022-06-09 12:00:00'},
{stnmId: 3,stnm:'大盘山',ip:'123.2.3.3',value:'41.2',tm: '2022-06-09 12:00:00'},
{stnmId: 4,stnm:'大石门',ip:'123.2.3.4',value:'45.3',tm: '2022-06-09 12:00:00'},
{stnmId: 5,stnm:'云龙',ip:'123.2.3.5',value:'24.3',tm: '2022-06-09 12:00:00'},
{stnmId: 6,stnm:'华家山',ip:'123.2.3.6',value:'29.8',tm: '2022-06-09 12:00:00'},
{stnmId: 7,stnm:'东钱湖',ip:'123.2.3.7',value:'30.3',tm: '2022-06-09 12:00:00'},
{stnmId: 8,stnm:'横溪水库',ip:'123.2.3.8',value:'35.6',tm: '2022-06-09 12:00:00'},
{stnmId: 9,stnm:'咸祥',ip:'123.2.3.9',value:'33,1',tm: '2022-06-09 12:00:00'},
{stnmId: 10,stnm:'白鹤',ip:'123.2.3.10',value:'24.4',tm: '2022-06-09 12:00:00'},
],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
stnmId: null,
stnm: null,
mainType: null,
type: null,
stcd: null,
deviceTypeId: null,
stcdTypeId: null,
latestTm: null,
latestValue: null
},
dataType: '',
//
form: {},
//
rules: {
},
spanArr: [],
position: 0
};
},
created() {
this.getList();
},
methods: {
/** 查询实时数据列表 */
getList() {
this.loading = false;
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
stnmId: null,
stnm: null,
mainType: null,
type: null,
stcd: null,
deviceTypeId: null,
stcdTypeId: null,
latestTm: null,
latestValue: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加实时数据";
},
/** 修改按钮操作 */
async handleUpdate(row) {
this.reset();
const id = row.id || this.ids
let res = await this.$axiosGet('/data/currdata/info/'+id);
if(res.code === 0){
this.form = res.data;
this.open = true;
this.title = "修改";
}
},
async addMethod(){
let res = await this.$axiosPost('/data/currdata/add',this.form);
if(res.code === 0){
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}
},
async editMethod(){
let res = await this.$axiosPost('/data/currdata/edit',this.form);
if(res.code === 0){
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}
},
/** 提交按钮 */
submitForm() {
},
/** 删除按钮操作 */
handleDelete(row) {
const stnmIds = row.stnmId || this.ids;
this.$modal.confirm('是否确认删除站点信息编号为"' + stnmIds + '"的数据项?').then(function() {
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('data/currdata/export', {
...this.queryParams
}, `currdata_${new Date().getTime()}.xlsx`)
},
}
};
</script>
<style scoped>
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.station {
padding: 5px;
position: relative;
}
.station:hover {
background: #eee;
cursor: pointer;
}
.station::before {
content: "";
display: block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left: 5px solid #aaa;
position: absolute;
top: 12px;
left: -6px;
}
.video {
width: 600px;
}
</style>

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

@ -0,0 +1,131 @@ @@ -0,0 +1,131 @@
<template>
<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-form-item>
<el-form-item label="摄像机IP" prop="ip">
<el-input
v-model="queryParams.stnm"
placeholder="请输入摄像机IP"
clearable
@keyup.enter.native="handleQuery"
/>
</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>
<div class="monitor">
<div class="card" v-for="item in currdataList" :key="item.stnmId">
<img src="../../../assets/images/water.jpg">
<div class="info">
<div class="station">
<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>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Currdata",
data() {
return {
//
total: 100,
//
currdataList: [
{stnmId: 1,stnm:'姜山',ip:'123.2.3.1',value:'35.1',tm: '2022-06-09 12:00:00'},
{stnmId: 2,stnm:'画龙',ip:'123.2.3.2',value:'39.2',tm: '2022-06-09 12:00:00'},
{stnmId: 3,stnm:'大盘山',ip:'123.2.3.3',value:'41.2',tm: '2022-06-09 12:00:00'},
{stnmId: 4,stnm:'大石门',ip:'123.2.3.4',value:'45.3',tm: '2022-06-09 12:00:00'},
{stnmId: 5,stnm:'云龙',ip:'123.2.3.5',value:'24.3',tm: '2022-06-09 12:00:00'},
{stnmId: 6,stnm:'华家山',ip:'123.2.3.6',value:'29.8',tm: '2022-06-09 12:00:00'},
{stnmId: 7,stnm:'东钱湖',ip:'123.2.3.7',value:'30.3',tm: '2022-06-09 12:00:00'},
{stnmId: 8,stnm:'横溪水库',ip:'123.2.3.8',value:'35.6',tm: '2022-06-09 12:00:00'},
{stnmId: 9,stnm:'咸祥',ip:'123.2.3.9',value:'33,1',tm: '2022-06-09 12:00:00'},
{stnmId: 10,stnm:'白鹤',ip:'123.2.3.10',value:'24.4',tm: '2022-06-09 12:00:00'},
],
//
queryParams: {
pageNum: 1,
pageSize: 10,
stnmId: null,
stnm: null,
mainType: null,
type: null,
stcd: null,
deviceTypeId: null,
stcdTypeId: null,
latestTm: null,
latestValue: null
}
}
},
created() {
this.getList();
},
methods: {
/** 查询实时数据列表 */
getList() {
this.loading = false;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
}
}
};
</script>
<style scoped>
.monitor {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
margin-bottom: 20px;
box-shadow: 2px 2px 8px #ccc;
}
img {
width: 400px;
}
.info {
padding: 16px;
display: flex;
justify-content: space-between;
line-height: 24px;
color: #999;
}
.station {
}
.nm {
color: #333;
}
</style>
Loading…
Cancel
Save