467010279
/
water-monitor-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
21 2 years ago
parent
7876ad5daa
commit
4a7b4b5746
3 changed files with 356 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 KiB

225
src/views/data/monitor/index.vue
Unescape View File

@ -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
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save