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 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <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 <el-input
v-model="queryParams.stnm" v-model="queryParams.stnm"
placeholder="请输入站名称" placeholder="请输入站名称"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
@ -23,6 +23,7 @@
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['system:info:add']"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -33,6 +34,7 @@
size="mini" size="mini"
:disabled="single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
v-hasPermi="['system:info:edit']"
>修改</el-button> >修改</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -43,6 +45,7 @@
size="mini" size="mini"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['system:info:remove']"
>删除</el-button> >删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -52,22 +55,25 @@
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['system:info:export']"
>导出</el-button> >导出</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </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 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="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" /> <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="stlc" />
<el-table-column label="测站编码" align="center" prop="isState" />
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="保证水位" align="center" prop="bzsw" />
<el-table-column label="测站状态" align="center" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.status==0">正常</span> <dict-tag :options="stationStatusList" :value="scope.row.status"/>
<span v-if="scope.row.status==1">异常</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -77,12 +83,14 @@
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:info:edit']"
>修改</el-button> >修改</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:info:remove']"
>删除</el-button> >删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -96,11 +104,11 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改站信息对话框 --> <!-- 添加或修改水尺-站信息对话框 -->
<el-dialog class="edit-dialog" :title="title" :visible.sync="open" width="900px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="站名称" prop="stnm"> <el-form-item label="站名称" prop="stnm">
<el-input v-model="form.stnm" placeholder="请输入站名称" /> <el-input v-model="form.stnm" placeholder="请输入站名称" />
</el-form-item> </el-form-item>
<el-form-item label="经度" prop="longitude"> <el-form-item label="经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请输入经度" /> <el-input v-model="form.longitude" placeholder="请输入经度" />
@ -108,15 +116,47 @@
<el-form-item label="纬度" prop="latitude"> <el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" /> <el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="测站状态">
<el-select v-model="form.status" placeholder="请选择状态"> <el-select v-model="form.status" placeholder="请选择测站状态">
<el-option value="0">正常</el-option> <el-option
<el-option value="1">异常</el-option> v-for="dict in stationStatusList"
:key="dict.id"
:label="dict.name"
:value="dict.id"
></el-option>
</el-select> </el-select>
</el-form-item> </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-form-item label="站址" prop="stlc">
<el-input v-model="form.stlc" placeholder="请输入站址" /> <el-input v-model="form.stlc" placeholder="请输入站址" />
</el-form-item> </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> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
@ -125,18 +165,10 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<style>
.stcd-item .el-form-item__content{
margin-left: 0 !important;
}
.edit-dialog .el-dialog{
height: 800px;
overflow: auto;
}
</style>
<script> <script>
export default { export default {
name: "Station", name: "Info",
data() { data() {
return { return {
// //
@ -150,9 +182,11 @@ export default {
// //
showSearch: true, showSearch: true,
// //
total: 100, total: 0,
// // -
stationList: [], infoList: [],
//
cameraList:[],
// //
title: "", title: "",
// //
@ -163,33 +197,56 @@ export default {
pageSize: 10, pageSize: 10,
stnm: null, stnm: null,
}, },
//
stationStatusList:[
{name: '正常',id: '0'},
{name: '信道故障',id: '2'},
{name: '站点关闭',id: '5'}
],
// //
form: { form: {},
},
// //
rules: { rules: {
}, stnm: [
// { required: true, message: "测站名称不能为空", trigger: "blur" }
infoList: [ ],
{stnmId: 1,stnm:'姜山',longitude:121.66613,latitude:29.848543,stlc:'宁波鄞州姜山镇仪门村',status: 0}, status: [
{stnmId: 2,stnm:'画龙',longitude:121.76419,latitude:29.7645,stlc:'宁波鄞州东吴镇画龙村',status: 0}, { required: true, message: "测站状态不能为空", trigger: "change" }
{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}
], ],
longitude: [
{ required: true, message: "经度不能为空", trigger: "blur" }
],
latitude: [
{ required: true, message: "纬度不能为空", trigger: "blur" }
],
staid: [
{ required: true, message: "测站编码不能为空", trigger: "blur" }
],
}
}; };
}, },
created() { created() {
this.getList() this.getList();
this.getCameraList();
}, },
methods: { 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; this.loading = false;
}, },
// //
@ -200,18 +257,29 @@ export default {
// //
reset() { reset() {
this.form = { this.form = {
id: null,
stnm: null, stnm: null,
stnmId: null,
longitude: null, longitude: null,
latitude: null, latitude: null,
status: 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"); this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.getInfoList(); this.getList();
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
@ -220,7 +288,7 @@ export default {
}, },
// //
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.stnmId) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length!==1
this.multiple = !selection.length this.multiple = !selection.length
}, },
@ -228,33 +296,62 @@ export default {
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加站信息"; this.title = "添加水尺-测站信息";
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { async handleUpdate(row) {
this.reset(); 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.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() { submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
this.editMethod();
} else {
this.addMethod();
}
}
});
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { async handleDelete(row) {
const stnmIds = row.stnmId || this.ids; const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除站点信息编号为"' + stnmIds + '"的数据项?').then(function() { let res = await this.$axiosDelete('/system/info/delete/'+ids);
if(res.code === 0){
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); this.getList();
}
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download('basic/station/export', { this.download('system/info/export', {
...this.queryParams ...this.queryParams
}, `station_${new Date().getTime()}.xlsx`) }, `info_${new Date().getTime()}.xlsx`)
}, }
} }
}; };
</script> </script>

Loading…
Cancel
Save