feat: 电子围栏编辑

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 车联管理系统
+VUE_APP_TITLE = 智能车联管理系统
 
 # 开发环境配置
 ENV = 'development'

package.json

@@ -1,8 +1,8 @@
 {
   "name": "muyu",
   "version": "3.6.3",
-  "description": "车联网管理系统",
+  "description": "智能车联管理系统",
-  "author": "车联",
+  "author": "智能车联",
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",

src/api/couplet/fence.js

@@ -48,7 +48,7 @@ export function fenceDelete(data) {
  */
 export function changeFenceStatus(data) {
   return request({
-    url: '/couplet/fence/fenceState/',
+    url: '/couplet/fence/fenceState',
     method: 'post',
     data
   })

src/router/index.js

@@ -73,6 +73,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/couplet/fence',
+    component: Layout,
+    redirect: 'container',
+    children: [
+      {
+        path: '/couplet/fence/container',
+        component: () => import('@/views/couplet/fence/container.vue'),
+        name: 'fenMap',
+        meta: {title: '地图', icon: 'rate'}
+      }
+    ]
+  },
+
 
   {
     path: '/user',

src/views/couplet/fence/container.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-button class="btn" @click="drawGraph()" style="margin-bottom: 6px">绘制多边形</el-button>
+    <div id="container">
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {fenceUpdate} from "@/api/couplet/fence";
+
+export default {
+    //import引入的组件需要注入到对象中才能使用"
+    name:"map-view",
+    components: {AMap},
+    props: {},
+    data() {
+      //这里存放数据"
+      return {
+        map:null,
+        mouseTool: null, // 添加mouseTool作为组件数据属性
+        _AMap: null,
+        // drawGraph:{}
+        drawnPoints:{},
+        points:{}
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {
+
+    },
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      initAMap(){
+        AMapLoader.load({
+          key: "b5f283177b02e0bdd7f4981f4f219432", // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          plugins: ["AMap.Scale","AMap.MouseTool"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+        }).then((AMap) => {
+            this.map=new AMap.Map("container",{
+              viewMode:"3D",
+              zoom:11,
+              center:[116.39, 39.9],
+            })
+          // 解析传入的经纬度字符串
+
+          this.mouseTool = new AMap.MouseTool(this.map);
+          setTimeout(()=>{
+            if (this.drawnPoints.fenceLongitudeLatitude && typeof this.drawnPoints.fenceLongitudeLatitude === 'string') {
+              this.draw1()
+            }
+          },100)
+          this.mouseTool.on("draw", this.drawReady);
+
+        }).catch((e)=>{
+            console.log(e)
+        })
+      },
+
+
+      draw1(){
+         const pathArray = this.drawnPoints.fenceLongitudeLatitude.split(';').map(coordStr => {
+            const [lng, lat] = coordStr.split(',');
+            return { lng: parseFloat(lng), lat: parseFloat(lat) };
+          });
+          // 如果经纬度数据有效，则绘制多边形
+          //pathArray.every(coord => coord.lng && coord.lat)判断经纬度数据是否都有效
+          if (pathArray.length > 2 && pathArray.every(coord => coord.lng && coord.lat)) {
+            const polygon = this.mouseTool.Polygon({
+              path: pathArray,
+              strokeColor: "#FF33FF",
+              strokeOpacity: 1,
+              strokeWeight: 6,
+              fillColor: '#1791fc',
+              fillOpacity: 0.4,
+              strokeStyle: "solid",
+            });
+            polygon.setMap(this.map);
+          }
+        // } else {
+        //   // 如果没有传入经纬度，则保持原逻辑，等待用户点击按钮绘制
+        //   this.drawGraph()
+        // }
+      },
+      drawGraph(){
+          this.mouseTool.polygon({
+            strokeColor: "#FF33FF",
+            strokeOpacity: 1,
+            strokeWeight: 6,
+            fillColor: '#1791fc',
+            fillOpacity: 0.4,
+            // 线样式还支持 'dashed'
+            strokeStyle: "solid",
+            // strokeStyle是dashed时有效
+            // strokeDasharray: [30,10],
+          })
+      },
+      drawReady(event){
+        //获取绘制的点
+        let path = event.obj.getPath();
+        //遍历绘制的点，将经纬度转换成字符串拼接
+        const coordinatesString = path.map(point => `${point.lng},${point.lat}`).join('; ');
+        this.drawnPoints.fenceLongitudeLatitude=coordinatesString
+        this.$message("覆盖物对象绘制完成");
+        fenceUpdate(this.drawnPoints).then(res=>{
+          this.$message.success("编辑成功")
+          this.$router.push({path: '/couplet/fence/fence'})
+        })
+      }
+    },
+
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+      this.initAMap()
+      this.drawnPoints=this.$route.query.drawGraph
+
+    },
+    unmounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+    #container{
+      padding:0px;
+      margin: 0px;
+      width: 100%;
+      height: 800px;
+    }
+
+</style>

src/views/couplet/fence/index.html

@@ -1,16 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-  <meta charset="UTF-8">
+  <meta charset="utf-8" />
-  <title>Title</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta
+    name="viewport"
+    content="initial-scale=1.0, user-scalable=no, width=device-width"
+  />
+  <title>HELLO, AMAP!</title>
+  <style>
+    html,
+    body,
+    #container {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </head>
 <body>
-
+<div id="container"></div>
-<!-- 设置高德地图安全密钥 -->
-<script type="text/javascript">
-  window._AMapSecurityConfig = {
-    securityJsCode: 'd4afcbb16c37bab037fe756ffb063e51', // 你的密钥
-  }
-</script>
 </body>
 </html>

src/views/couplet/fence/index.vue

@@ -33,14 +33,11 @@
       <el-table-column label="围栏名称" prop="fenceName" width="120"/>
       <el-table-column label="围栏经纬度" prop="fenceLongitudeLatitude" width="150"/>
       <el-table-column label="围栏描述" prop="fenceDescription" width="150"/>
-      <el-table-column align="center" label="状态" width="100">
+      <el-table-column
+        label="围栏状态">
         <template slot-scope="scope">
-          <el-switch
+          <span style="margin-left: 10px" v-if="scope.row.fenceState == 0">已启用</span>
-            v-model="scope.row.fenceState"
+          <span style="margin-left: 10px" v-if="scope.row.fenceState == 1">已停用</span>
-            active-value="0"
-            inactive-value="1"
-            @change="handleFenceStateChange(scope.row)"
-          ></el-switch>
         </template>
       </el-table-column>
       <el-table-column align="center" label="创建时间" prop="createTime" width="180">
@@ -59,15 +56,41 @@
       <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
         <template slot-scope="scope">
           <el-button
-            v-hasPermi="['system:role:edit']"
+            v-hasPermi="['couplet:fence:fenceUpdate']"
             icon="el-icon-edit"
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleQueryFence(scope.row)"
-          >修改
+          >查询围栏
           </el-button>
           <el-button
-            v-hasPermi="['system:role:remove']"
+            v-hasPermi="['couplet:fence:fenceUpdate']"
+            icon="el-icon-edit"
+            size="mini"
+            type="text"
+            @click="handleFenceUpdate(scope.row)"
+          >编辑电子围栏
+          </el-button>
+          <el-button
+            v-hasPermi="['couplet:fence:fenceState']"
+            v-if="scope.row.fenceState==1"
+            icon="el-icon-check"
+            size="mini"
+            type="text"
+            @click="handleStateChange(scope.row)"
+          >启用
+          </el-button>
+          <el-button
+            v-hasPermi="['couplet:fence:fenceState']"
+            v-if="scope.row.fenceState==0"
+            icon="el-icon-close"
+            size="mini"
+            type="text"
+            @click="handleFenceStateChange(scope.row)"
+          >停用
+          </el-button>
+          <el-button
+            v-hasPermi="['couplet:fence:fenceDelete']"
             icon="el-icon-delete"
             size="mini"
             type="text"
@@ -89,7 +112,6 @@
       </el-pagination>
     </div>
     <!-- Form -->
-
     <el-dialog title="新增电子围栏" :visible.sync="dialogFormVisible">
       <el-form :model="fenceInsertRequest">
         <el-form-item label="围栏名称" :label-width="formLabelWidth">
@@ -105,8 +127,35 @@
         <template>
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
           <div style="margin: 15px 0;"></div>
-          <el-checkbox-group v-model="logoIds" @change="handleCheckedCitiesChange">
+
-            <el-checkbox v-for="logo in logo" :label="logo.logoName" :key="logo.logoId">{{logo.logoName}}</el-checkbox>
+          <el-checkbox-group v-model="fenceInsertRequest.logoIds" @change="handleChange">
+            <el-checkbox v-for="item in logo" :key="item.logoId"  :label="item.logoId"  >{{item.logoName}}</el-checkbox>
+          </el-checkbox-group>
+        </template>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addFence">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="修改电子围栏" :visible.sync="dialogFormVisible">
+      <el-form :model="fenceInsertRequest">
+        <el-form-item label="围栏名称" :label-width="formLabelWidth">
+          <el-input v-model="fenceInsertRequest.fenceName" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="电子围栏描述信息" :label-width="formLabelWidth">
+          <el-input v-model="fenceInsertRequest.fenceDescription" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="维护负责人" :label-width="formLabelWidth">
+          <el-input v-model="fenceInsertRequest.maintainerName" autocomplete="off"></el-input>
+        </el-form-item>
+        <template>
+          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+          <div style="margin: 15px 0;"></div>
+
+          <el-checkbox-group v-model="fenceInsertRequest.logoIds" @change="handleChange">
+            <el-checkbox v-for="item in logo" :key="item.logoId"  :label="item.logoId"  >{{item.logoName}}</el-checkbox>
           </el-checkbox-group>
         </template>
       </el-form>
@@ -116,71 +165,36 @@
       </div>
     </el-dialog>
 
-    <div class="mapBox">
-      <!--    使用高德地图的组件-->
-      <el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
-        <!--      el-amap-marker>: 通过v-for指令循环遍历markers数组，-->
-        <!--      并为每个标记创建一个el-amap-marker组件，将标记的位置(position)绑定到数组中的相应数据。-->
-        <el-amap-marker
-          v-for="marker in markers"
-          :position="marker.position"
-          :events="marker.events"
-          :key="marker.index"
-        ></el-amap-marker>
-        <el-amap-info-window
-          v-for="window in windows"
-          :offset="window.offset"
-          :position="window.position"
-          :content="window.content"
-          :open="window.open"
-          :key="window.index"
-        ></el-amap-info-window>
-      </el-amap>
-    </div>
-
   </div>
 
-
 </template>
 
 <script>
 import {fenceList, changeFenceStatus, queryByLogo, fenceDelete, fenceAdd} from "@/api/couplet/fence";
-import {changeRoleStatus} from "@/api/system/role";
+import path from "path";
-import log from "@/views/monitor/job/log.vue";
-
 export default {
   components: {},
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 单位信息
-      unit: "xxxxx政府司法局",
-      address: "xx省xx市xxxxx大道东433号",
-      // markers和windows数组用于存储地图标记和信息窗口的数据结构。
-      markers: [],
-      windows: [],
-      center: [116.39, 39.9],
-      zoom: 16,
-      // currentPosition: null, // 新增一个用于存储当前经纬度的变量
-      label: {
-        content: "自定义标题",
-        offset: [10, 12],
-      },
       // 查询参数
       queryParams: {},
       fence: [{}],
       fenceUpdateRequest:{},
-      fenceInsertRequest:{},
+      fenceInsertRequest:{
+        logoIds:[]
+      },
       dialogFormVisible: false,
       formLabelWidth: '120px',
       checkAll: false,
-      logo: [],
+      logo: [
-      logoIds:{},
+        {
-      // cities: cityOptions,
+          logoId:'',
+          logoName:'',
+        }
+      ],
+      checkedLogo: [],
       isIndeterminate: true,
       fenceChangeState:{}
-
     };
   },
   methods: {
@@ -222,10 +236,10 @@ export default {
       this.checkedCities = val ? this.logo : [];
       this.isIndeterminate = false;
     },
-    handleCheckedCitiesChange(value) {
+    handleChange(value) {
-      let checkedCount = value.length;
+      // let checkedCount = value.length;
-      this.checkAll = checkedCount === this.logo.length;
+      // this.checkAll = checkedCount === this.logo.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.logo.length;
+      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.logo.length;
     },
     /**
      * 分页
@@ -242,12 +256,12 @@ export default {
      * 新增数据
      */
     addFence(){
-      this.dialogFormVisible = false;
       fenceAdd(this.fenceInsertRequest).then(
         res=>{
           this.$message.success("新增成功")
         }
       )
+      this.dialogFormVisible = false;
     },
     /**
      * 查询多选框
@@ -257,30 +271,40 @@ export default {
       queryByLogo().then(
         res=>{
           this.logo=res.data
-          console.log(res)
         }
       )
-
     },
     // 围栏状态修改
     handleFenceStateChange(row) {
-      // let text = row.status === "0" ? "启用" : "停用";
+      debugger
-      // this.$modal.confirm('确认要"' + text + '"状态吗？').then(function () {
+      if (row.fenceState === 0){
-      this.$modal.confirm('确认要修改状态吗？').then(function () {
+        row.fenceState = 1
-        return changeFenceStatus(row);
+        this.$modal.confirm('确认要停用状态吗？').then(function () {
-      }).then(() => {
+          return changeFenceStatus(row);
-        this.$modal.msgSuccess( "成功");
+        }).then(() => {
-        // this.$modal.msgSuccess(text + "成功");
+          this.$modal.msgSuccess( "停用成功");
-      }).catch(function () {
+        })
-        row.status = row.status === "0" ? "1" : "0";
+      }
-      });
+    },
+    handleStateChange(row) {
+      /**
+       * 启用
+       */
+      if (row.fenceState === 1) {
+        row.fenceState = 0
+        this.$modal.confirm('确认要启用状态吗？').then(function () {
+          return changeFenceStatus(row);
+        }).then(() => {
+          this.$modal.msgSuccess("启用成功");
+        })
+
+      }
     },
     /**
      * 电子围栏删除
      * @param map
      */
     handleFenceDelete(row){
-      console.log(row)
       var fenceId = row.fenceId;
       this.$modal.confirm('确认要修改编号为'+fenceId+'的信息吗？').then(function () {
         return fenceDelete(fenceId)
@@ -291,39 +315,15 @@ export default {
         this.$modal.msgError("删除失败");
       })
     },
-
+    /**
-    // parseTime,
+     * 编辑电子围栏图形
-    // 初始化地图
+     */
-    initMap(map) {
+    handleFenceUpdate(row){
-      this.markers.push({
+      this.$router.push({path: '/couplet/fence/container', query: {drawGraph: row}})
-        position: [116.39, 39.9],
-      });
-      this.windows.push({
-        position: [116.39, 39.9],
-        // position: this.currentPosition,
-        content:
-          "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
-          this.unit +
-          "</h2>" +
-          "<div style='margin: 10px'>" +
-          "地址：" +
-          this.address +
-          "</div>",
-        offset: [0, -20],
-        open: true,
-      });
-
-      // var map = new AMap.Map("container", {
-      //   zoomEnable: true, //是否禁止缩放
-      //   zoom: 12, //缩放比例
-      //   dragEnable: false, //禁止拖动
-      //   cursor: "hand", // 鼠标在地图上的表现形式，小手
-      // });
-      // // 初始化工具条
-      // map.plugin(["AMap.ToolBar"], function () {
-      //   map.addControl(new AMap.ToolBar());
-      // });
     },
+    handleQueryFence(){
+
+    }
   },
   created() {
     this.queryByFenceList()
@@ -331,7 +331,7 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {
-    this.initMap();
+
   },
 };
 </script>

src/views/index.vue

@@ -44,7 +44,7 @@
     </el-row>
     <el-row :gutter="20">
       <el-col :lg="12" :sm="24" style="padding-left: 20px">
-        <h2>车联后台管理框架</h2>
+        <h2>智能车联后台管理框架</h2>
         <p>
           一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>

src/views/login.vue

@@ -91,7 +91,7 @@ export default {
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
-      register: false,
+      register: true,
       redirect: undefined
     };
   },

vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '车联管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '智能车联管理系统' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口