Browse Source

站点 摄像头

master
blankk 2 years ago
parent
commit
d8d5b76af8
  1. 18507
      package-lock.json
  2. 225
      src/views/basic/station/index.vue

18507
package-lock.json generated

File diff suppressed because it is too large Load Diff

225
src/views/basic/station/index.vue

@ -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>

Loading…
Cancel
Save