站点 摄像头

src/views/basic/station/index.vue

@@ -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 @@
           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 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
+          v-hasPermi="['system:info:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -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 @@
           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="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">
-          <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>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -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 @@
       @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 label="经度" prop="longitude">
           <el-input v-model="form.longitude" placeholder="请输入经度" />
@@ -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-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-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 @@
     </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 {
       // 显示搜索条件
       showSearch: true,
       // 总条数
-      total: 100,
+      total: 0,
-      // 站点信息表格数据
+      // 水尺-测站信息表格数据
-      stationList: [],
+      infoList: [],
+      //摄像头列表
+      cameraList:[],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -163,33 +197,56 @@ export default {
         pageSize: 10,
         stnm: null,
       },
+      //站点状态
+      stationStatusList:[
+        {name: '正常',id: '0'},
+        {name: '信道故障',id: '2'},
+        {name: '站点关闭',id: '5'}
+      ],
       // 表单参数
-      form: {
+      form: {},
-      },
       // 表单校验
       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() {
-    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 {
     // 表单重置
     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 {
     },
     // 多选框选中数据
     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 {
     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) {
+    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("删除成功");
-      }).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>