新增围栏操作

src/views/car/fence.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <el-button type="success" @click="insert">添加围栏</el-button>
+    <el-button type="success" @click="upiInsertDialog">添加围栏</el-button>
 
-    <el-table :data="fenceData" style="width: 100%">
+    <el-table :data="fenceData" style="width: 70%">
 
 
 <!--      <el-table-column label="围栏编号" width="180">-->
@@ -12,35 +12,35 @@
 <!--      </el-table-column>-->
 
 
-      <el-table-column label="围栏名称" width="180">
+      <el-table-column label="围栏名称" width="200px">
         <template slot-scope="scope">
           <span>{{scope.row.fenceName}}</span>
         </template>
       </el-table-column>
 
 
-      <el-table-column label="行驶状态" width="180">
+      <el-table-column label="行驶状态" width="200px">
         <template slot-scope="scope">
           <span v-if="scope.row.driveStatus===1">驶入</span>
           <span v-if="scope.row.driveStatus===2">驶出</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="围栏状态" width="180">
+      <el-table-column label="围栏状态" width="200px">
         <template slot-scope="scope">
           <span v-if="scope.row.fenceStatus===0">停用</span>
           <span v-if="scope.row.fenceStatus===1">正常</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="围栏坐标" width="180">
+      <el-table-column label="围栏坐标" width="200px">
         <template slot-scope="scope">
           <span>{{scope.row.fenceLocation}}</span>
         </template>
       </el-table-column>
 
 
-      <el-table-column label="操作">
+      <el-table-column label="操作" width="200px">
         <template slot-scope="scope">
           <el-button type="text" @click="updialog(scope.row)">编辑围栏</el-button>
           <el-button type="text">编辑</el-button>
@@ -61,6 +61,36 @@
       </div>
     </el-dialog>
 
+    <el-dialog :visible.sync="dialogVisibleTwo" width="70%">
+
+      <el-form ref="form" :model="insertFences" label-width="80px">
+
+        <el-form-item label="围栏名称">
+          <el-input v-model="insertFences.fenceName"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="激活状态">
+          <el-select v-model="insertFences.fenceStatus" placeholder="请选择状态">
+            <el-option label="停用" value="0"></el-option>
+            <el-option label="正常" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="行驶状态">
+          <el-select v-model="insertFences.driveStatus" placeholder="请选择状态">
+            <el-option label="驶入" value="1"></el-option>
+            <el-option label="驶出" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">立即创建</el-button>
+          <el-button @click="dialogVisibleTwo = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+
+    </el-dialog>
 
   </div>
 
@@ -79,6 +109,7 @@ export default {
       mouseTool:null,
       mapAddr:'',
       dialogVisible:false,
+      dialogVisibleTwo:false,
       //围栏列表
       fenceData:[],
       total:0,
@@ -89,7 +120,9 @@ export default {
       },
       updateFences:{
         fenceLocation:""
-      }
+      },
+      insertFences:{
+      },
     };
   },
   // mounted() {
@@ -180,18 +213,26 @@ export default {
      this.updateFences.fenceLocation = this.mapAddr
       console.log(this.updateFences)
       updateFenceMapAddr(this.updateFences).then(res =>{
-        if (res.data.code === 200){
+        if (res.data.code == 500){
+          alert("围栏编辑失败!")
+        }
           alert("围栏编辑成功!")
           this.dialogVisible=false
           this.updateFences = {
-
           }
-        }
+
       })
     },
-    insert() {
-      insertFence(this.tableData).then(res =>{
-        console.log(res)
+    upiInsertDialog() {
+      this.dialogVisibleTwo = true
+    },
+    onSubmit() {
+      insertFence(this.updateFences).then(res =>{
+        if (res.data.code == 500){
+          alert("添加围栏失败!");
+        }
+        alert("添加围栏成功!")
+        this.dialogVisibleTwo = false
       })
     },
     getFenceList() {