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

站点 摄像头

master
blankk 2 years ago
parent
86fd6bfc68
commit
d8d5b76af8
2 changed files with 188 additions and 18548 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. 18507
      package-lock.json
  2. 225
      src/views/basic/station/index.vue

18507
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

225
src/views/basic/station/index.vue
Unescape View File

@ -1,10 +1,10 @@ @@ -1,10 +1,10 @@
<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-form-item label="测站名称" prop="stnm">
<el-input
v-model="queryParams.stnm"
placeholder="请输入站点名称"
placeholder="请输入测站名称"
clearable
@keyup.enter.native="handleQuery"
/>
@ -23,6 +23,7 @@ @@ -23,6 +23,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:info:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -33,6 +34,7 @@ @@ -33,6 +34,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:info:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -43,6 +45,7 @@ @@ -43,6 +45,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:info:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -52,22 +55,25 @@ @@ -52,22 +55,25 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:info:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table border v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="站点名称" align="center" prop="stnm" />
<el-table-column label="测站id" align="center" prop="id" />
<el-table-column label="测站名称" align="center" prop="stnm" />
<el-table-column label="经度" align="center" prop="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" />
<el-table-column label="测站编码" align="center" prop="staid" />
<el-table-column label="站址" align="center" prop="stlc" />
<el-table-column label="状态" align="center" prop="status">
<el-table-column label="测站编码" align="center" prop="isState" />
<el-table-column label="保证水位" align="center" prop="bzsw" />
<el-table-column label="测站状态" align="center" prop="status">
<template slot-scope="scope">
<span v-if="scope.row.status==0">正常</span>
<span v-if="scope.row.status==1">异常</span>
<dict-tag :options="stationStatusList" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -77,12 +83,14 @@ @@ -77,12 +83,14 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:info:remove']"
>删除</el-button>
</template>
</el-table-column>
@ -96,11 +104,11 @@ @@ -96,11 +104,11 @@
@pagination="getList"
/>
<!-- 添加或修改站点信息对话框 -->
<el-dialog class="edit-dialog" :title="title" :visible.sync="open" width="900px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="站点名称" prop="stnm">
<el-input v-model="form.stnm" placeholder="请输入站点名称" />
<!-- 添加或修改水尺-测站信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="测站名称" prop="stnm">
<el-input v-model="form.stnm" placeholder="请输入测站名称" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" />
@ -108,15 +116,47 @@ @@ -108,15 +116,47 @@
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择状态">
<el-option value="0">正常</el-option>
<el-option value="1">异常</el-option>
<el-form-item label="测站状态">
<el-select v-model="form.status" placeholder="请选择测站状态">
<el-option
v-for="dict in stationStatusList"
:key="dict.id"
:label="dict.name"
:value="dict.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="测站编码" prop="staid">
<el-input v-model="form.staid" placeholder="请输入测站编码" />
</el-form-item>
<el-form-item label="河流" prop="rvnm">
<el-input v-model="form.rvnm" placeholder="请输入河流" />
</el-form-item>
<el-form-item label="水系" prop="hnnm">
<el-input v-model="form.hnnm" placeholder="请输入水系" />
</el-form-item>
<el-form-item label="流域" prop="bsnm">
<el-input v-model="form.bsnm" placeholder="请输入流域" />
</el-form-item>
<el-form-item label="站址" prop="stlc">
<el-input v-model="form.stlc" placeholder="请输入站址" />
</el-form-item>
<el-form-item label="测站编码" prop="isState">
<el-input v-model="form.isState" placeholder="请输入测站编码" />
</el-form-item>
<el-form-item label="保证水位" prop="bzsw">
<el-input v-model="form.bzsw" placeholder="请输入保证水位" />
</el-form-item>
<el-form-item label="摄像头">
<el-select v-model="form.cameraSn" placeholder="请选择摄像头">
<el-option
v-for="dict in cameraList"
:key="dict.id"
:label="dict.name"
:value="dict.devsn"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -125,18 +165,10 @@ @@ -125,18 +165,10 @@
</el-dialog>
</div>
</template>
<style>
.stcd-item .el-form-item__content{
margin-left: 0 !important;
}
.edit-dialog .el-dialog{
height: 800px;
overflow: auto;
}
</style>
<script>
export default {
name: "Station",
name: "Info",
data() {
return {
// 遮罩层
@ -150,9 +182,11 @@ export default { @@ -150,9 +182,11 @@ export default {
// 显示搜索条件
showSearch: true,
// 总条数
total: 100,
// 站点信息表格数据
stationList: [],
total: 0,
// 水尺-测站信息表格数据
infoList: [],
//摄像头列表
cameraList:[],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -163,33 +197,56 @@ export default { @@ -163,33 +197,56 @@ export default {
pageSize: 10,
stnm: null,
},
//站点状态
stationStatusList:[
{name: '正常',id: '0'},
{name: '信道故障',id: '2'},
{name: '站点关闭',id: '5'}
],
// 表单参数
form: {
},
form: {},
// 表单校验
rules: {
},
// 站点信息
infoList: [
{stnmId: 1,stnm:'姜山',longitude:121.66613,latitude:29.848543,stlc:'宁波鄞州姜山镇仪门村',status: 0},
{stnmId: 2,stnm:'画龙',longitude:121.76419,latitude:29.7645,stlc:'宁波鄞州东吴镇画龙村',status: 0},
{stnmId: 3,stnm:'大盘山',longitude:121.80467,latitude:29.781157,stlc:'宁波鄞州东吴镇大盘山水库',status: 0},
{stnmId: 4,stnm:'大石门',longitude:121.84172,latitude:29.735273,stlc:'宁波鄞州瞻岐镇大石门水库',status: 0},
{stnmId: 5,stnm:'云龙',longitude:121.60029,latitude:29.77453,stlc:'宁波鄞州云龙镇荻江村',status: 0},
{stnmId: 6,stnm:'华家山',longitude:121.66076,latitude:29.68349,stlc:'宁波鄞州咸祥镇华家山水库',status: 0},
{stnmId: 7,stnm:'东钱湖',longitude:121.66983,latitude:29.783585,stlc:'宁波鄞州东钱湖',status: 0},
{stnmId: 8,stnm:'横溪水库',longitude:121.59165,latitude:29.707834,stlc:'宁波鄞州横溪镇上街村',status: 0},
{stnmId: 9,stnm:'咸祥',longitude:121.76529,latitude:29.698639,stlc:'宁波鄞州咸祥镇咸三村',status: 0},
{stnmId: 10,stnm:'白鹤',longitude:121.55989,latitude:29.854578,stlc:'宁波鄞州白鹤街道白鹤街道',status: 0}
stnm: [
{ required: true, message: "测站名称不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "测站状态不能为空", trigger: "change" }
],
longitude: [
{ required: true, message: "经度不能为空", trigger: "blur" }
],
latitude: [
{ required: true, message: "纬度不能为空", trigger: "blur" }
],
staid: [
{ required: true, message: "测站编码不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList()
this.getList();
this.getCameraList();
},
methods: {
/** 查询测站区域信息列表 */
getList() {
/**
* 查询未绑定的摄像头
*/
async getCameraList(){
let res = await this.$axiosGet('/web/camera/cameraNoList');
if(res.code === 0){
this.cameraList = res.data;
}
},
/** 查询水尺-测站信息列表 */
async getList() {
this.loading = true;
let res = await this.$axiosGet('/system/info/list',this.queryParams);
if(res.code === 0){
this.infoList = res.data;
this.total = res.count;
}
this.loading = false;
},
// 取消按钮
@ -200,18 +257,29 @@ export default { @@ -200,18 +257,29 @@ export default {
// 表单重置
reset() {
this.form = {
id: null,
stnm: null,
stnmId: null,
longitude: null,
latitude: null,
status: null,
staid: null,
rvnm: null,
hnnm: null,
bsnm: null,
stlc: null,
isState: null,
bzsw: null,
cameraSn: null,
delFlag: null,
createTime: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getInfoList();
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
@ -220,7 +288,7 @@ export default { @@ -220,7 +288,7 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.stnmId)
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
@ -228,33 +296,62 @@ export default { @@ -228,33 +296,62 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加站点信息";
this.title = "添加水尺-测站信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
async handleUpdate(row) {
this.reset();
const id = row.id || this.ids
let res = await this.$axiosGet('/system/info/info/'+id);
if(res.code === 0){
this.form = res.data;
this.open = true;
this.title = "修改站点信息";
this.title = "修改";
}
},
async addMethod(){
let res = await this.$axiosPost('/system/info/add',this.form);
if(res.code === 0){
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}
},
async editMethod(){
let res = await this.$axiosPost('/system/info/edit',this.form);
if(res.code === 0){
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
this.editMethod();
} else {
this.addMethod();
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const stnmIds = row.stnmId || this.ids;
this.$modal.confirm('是否确认删除站点信息编号为"' + stnmIds + '"的数据项？').then(function() {
}).then(() => {
this.getList();
async handleDelete(row) {
const ids = row.id || this.ids;
let res = await this.$axiosDelete('/system/info/delete/'+ids);
if(res.code === 0){
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
this.getList();
}
},
/** 导出按钮操作 */
handleExport() {
this.download('basic/station/export', {
this.download('system/info/export', {
...this.queryParams
}, `station_${new Date().getTime()}.xlsx`)
},
}, `info_${new Date().getTime()}.xlsx`)
}
}
};
</script>

Write Preview
Loading…
Cancel
Save