数据日志模块字段修改

数据服务接口模块制作
地图瓦片接口模块制作
二次开发中手动落图工具，图形绘制工具，测量工具制作
用户管理列表修改
角色管理模块制作

public/static/config/tileservice.json

@@ -0,0 +1,116 @@
+[
+    {
+        "title": "影像底图服务",
+        "children": [
+            {
+                "label": "服务类型",
+                "text": "瓦片服务"
+            },
+            {
+                "label": "瓦片类型",
+                "text": "栅格"
+            },
+            {
+                "label": "瓦片描述",
+                "text": "河北影像底图，地图缩放级别范围1-19"
+            },
+            {
+                "label": "瓦片规范",
+                "text": "OGC WMTS标准"
+            },
+            {
+                "label": "URL地址",
+                "text": [
+                    "地图1-19级：http://10.254.48.10:8081/geoesb/proxy/90381215ce35412d9b620340d45c8f4d/e4ea5d8bfcf54c8eb33b548547afdc0b"
+                ]
+            }
+        ],
+        "image": "raster.png"
+    },
+    {
+        "title": "影像注记服务",
+        "children": [
+            {
+                "label": "服务类型",
+                "text": "瓦片服务"
+            },
+            {
+                "label": "瓦片类型",
+                "text": "栅格"
+            },
+            {
+                "label": "瓦片描述",
+                "text": "河北影像注记"
+            },
+            {
+                "label": "瓦片规范",
+                "text": "OGC WMTS标准"
+            },
+            {
+                "label": "URL地址",
+                "text": [
+                    "http://10.254.48.10:8081/geoesb/proxy/b63f3631552c45e9be9a79fd0fc80890/e4ea5d8bfcf54c8eb33b548547afdc0b"
+                ]
+            }
+        ],
+        "image": "raster_zj.png"
+    },
+    {
+        "title": "矢量底图服务",
+        "children": [
+            {
+                "label": "服务类型",
+                "text": "瓦片服务"
+            },
+            {
+                "label": "瓦片类型",
+                "text": "栅格"
+            },
+            {
+                "label": "瓦片描述",
+                "text": "河北矢量底图，分为两个服务，地图缩放级别范围为1-20"
+            },
+            {
+                "label": "瓦片规范",
+                "text": "OGC WMTS标准"
+            },
+            {
+                "label": "URL地址",
+                "text": [
+                    "地图1-19级：http://10.254.48.10:8081/geoesb/proxy/bd595d43c0e54d0d85b8ec85fc83208f/e4ea5d8bfcf54c8eb33b548547afdc0b",
+                    "地图20级：http://10.254.48.10:8081/geoesb/proxy/7f6eb605db1b46099175db176e38b99d/e4ea5d8bfcf54c8eb33b548547afdc0b"
+                ]
+            }
+        ],
+        "image": "vecter.png"
+    },
+    {
+        "title": "矢量注记服务",
+        "children": [
+            {
+                "label": "服务类型",
+                "text": "瓦片服务"
+            },
+            {
+                "label": "瓦片类型",
+                "text": "栅格"
+            },
+            {
+                "label": "瓦片描述",
+                "text": "河北矢量注记，分为两个服务，地图缩放级别范围为1-19"
+            },
+            {
+                "label": "瓦片规范",
+                "text": "OGC WMTS标准"
+            },
+            {
+                "label": "URL地址",
+                "text": [
+                    "地图1-13级：http://10.254.48.10:8081/geoesb/proxy/ca3980d4f53b4df395d342c85e73aed1/e4ea5d8bfcf54c8eb33b548547afdc0b",
+                    "地图14-19级：http://10.254.48.10:8081/geoesb/proxy/4abc6ac59a5a41338fc168c4bd33b07d/e4ea5d8bfcf54c8eb33b548547afdc0b"
+                ]
+            }
+        ],
+        "image": "vecter_zj.png"
+    }
+]

src/api/roleManagement.js

@@ -0,0 +1,32 @@
+import {
+    splicingParam,
+    postform,
+    post,
+} from '../utils/request'
+
+// 获取所有权限
+const getAllPermission = () => {
+    return post(systemConfig.oauthServiceUrl + '/permission/selectPermission');
+}
+// 获取所有角色
+const getAllRole = () => {
+    return post(systemConfig.oauthServiceUrl + '/role/selectRole');
+}
+// 获取所选角色的权限
+const getAllPermissionOnRole = (param) => {
+    let str = splicingParam(param)
+    return post(systemConfig.oauthServiceUrl + '/permission/getPermissionByRoleId?' + str);
+}
+// 修改角色权限
+const updateRoleAuth = (param) => {
+    let str = splicingParam(param)
+    return post(systemConfig.oauthServiceUrl + '/role/updateRolePermission?' + str);
+}
+
+
+export default {
+    getAllPermission,
+    getAllRole,
+    getAllPermissionOnRole,
+    updateRoleAuth
+}

src/components/DataAccess/DataLog.vue

@@ -99,24 +99,29 @@ export default {
       logList: [],
       listField: [
         {
-          name: "code",
-          alias: "响应值",
-          span: 3,
+          name: "userName",
+          alias: "用户",
+          span: 5,
         },
         {
-          name: "message",
-          alias: "响应值描述",
-          span: 3,
+          name: "loginIp",
+          alias: "访问IP/所属城市",
+          span: 5,
         },
         {
-          name: "content",
-          alias: "日志数据",
-          span: 15,
+          name: "createTime",
+          alias: "操作时间",
+          span: 5,
         },
         {
-          name: "Count",
-          alias: "数据条数",
-          span: 3,
+          name: "dataAmount",
+          alias: "数据量",
+          span: 4,
+        },
+        {
+          name: "modelName",
+          alias: "数据图层",
+          span: 5,
         },
       ],
     };

src/components/DataServices/DataService.vue

@@ -104,7 +104,7 @@
             </el-table>
           </el-col>
         </el-row>
-        <el-row>
+        <!-- <el-row>
           <el-col :span="3">输入示例：</el-col>
           <el-col :span="21">
             <span
@@ -125,7 +125,7 @@
             >
             </json-viewer>
           </el-col>
-        </el-row>
+        </el-row> -->
         <el-row>
           <el-col :span="3">输出参数：</el-col>
           <el-col :span="21">
@@ -142,7 +142,7 @@
                 </el-table-column>
               </el-table>
             </el-row>
-            <el-row>其中，content响应数据返回字段详情如下：</el-row>
+            <el-row>其中，content中响应数据的关键字段详情如下：</el-row>
             <el-row>
               <el-table
                 :data="interfaceDetailItem.outputParam.content"
@@ -182,124 +182,15 @@ export default {
       isResponseCodeShow: false,
       isInterfaceDetailShow: false,
       interfaceDetailItem: null,
-      content: [
-        {
-          title: "通用接口",
-          children: [
-            {
-              name: "获取图层列表",
-              detail: {
-                url: "/metadata/general/getMenuData",
-                describe: "获取所有一级、二级图层数据",
-                requestMehod: "POST",
-                requestHeader: [],
-                inputParam: [],
-                inputParamExample: {},
-                outputParam: [],
-                outputParamExample: {},
-              },
-            },
-          ],
-        },
-        {
-          title: "图层数据接口",
-          children: [
-            {
-              name: "根据图层ID查询图层数据",
-              detail: {
-                url: "/metadata/model/selectById",
-                describe: "根据图层ID查询图层详细数据",
-                requestMehod: "POST",
-                requestHeader: [
-                  {
-                    name: "token",
-                    explain: "用户验证所需token",
-                    type: "string",
-                    must: "是",
-                  },
-                ],
-                inputParam: [
-                  {
-                    name: "id",
-                    explain: "图层ID",
-                    type: "string",
-                    must: "是",
-                  },
-                ],
-                inputParamExample: {
-                  id: 1,
-                },
-                outputParam: {
-                  response: [
-                    {
-                      name: "code",
-                      explain: "响应状态码",
-                      type: "number",
-                    },
-                    {
-                      name: "content",
-                      explain: "响应内容",
-                      type: "number",
-                    },
-                    {
-                      name: "message",
-                      explain: "响应状态描述",
-                      type: "number",
-                    },
-                    {
-                      name: "total",
-                      explain: "响应返回数据条数",
-                      type: "number",
-                    },
-                  ],
-                  content: [
-                    {
-                      name: "total",
-                      explain: "请求",
-                      type: "number",
-                    },
-                  ],
-                },
-                outputParamExample: {
-                  id: 2,
-                  name: "ddd",
-                },
-              },
-            },
-            {
-              name: "根据表名查询图层",
-            },
-            {
-              name: "根据标题查询图层",
-            },
-            {
-              name: "根据类型查询图层",
-            },
-          ],
-        },
-        {
-          title: "内容数据接口",
-          children: [
-            {
-              name: "根据id查询内容数据",
-            },
-            {
-              name: "根据modelID查询内容数据",
-            },
-            {
-              name: "上传geojson到指定图层下的内容数据",
-            },
-            {
-              name: "上传excel文件到指定图层下的内容数据",
-            },
-            {
-              name: "上传shape文件zip格式压缩包到指定图层下的内容数据",
-            },
-          ],
-        },
-      ],
+      content: [],
     };
   },
+  created() {
+    let that = this;
+    $.getJSON("./static/config/service.json", function (result) {
+      that.content = result;
+    });
+  },
   mounted() {
     let key = Object.keys(systemConfig.requestCode);
     this.responseCode = key.map(function (str) {

src/components/DataServices/TileService.vue

@@ -6,7 +6,12 @@
         <el-row v-for="(item_, index_) in item.children" :key="index_">
           <el-col class="label" :span="2"> {{ item_.label }}： </el-col>
           <el-col class="text" :span="22">
-            {{ item_.text }}
+            <span v-if="typeof item_.text == 'string'">{{ item_.text }}</span>
+            <span v-else>
+              <el-row v-for="(str, index2) in item_.text" :key="index2">
+                <span>{{ str }}</span>
+              </el-row>
+            </span>
           </el-col>
         </el-row>
       </div>
@@ -22,190 +27,15 @@ export default {
   data() {
     return {
       imagePath: "./static/images/tileservice/",
-      content: [
-        {
-          title: "影像底图服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "影像底图瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/img_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "raster.png",
-        },
-        {
-          title: "影像注记服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "影像注记瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/cia_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "raster_zj.png",
-        },
-        {
-          title: "矢量底图服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "矢量底图瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/vec_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "vecter.png",
-        },
-        {
-          title: "矢量注记服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "矢量注记瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/cva_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "vecter_zj.png",
-        },
-        {
-          title: "地形晕渲服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "地形晕渲底图瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/ter_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "topography.png",
-        },
-        {
-          title: "地形注记服务",
-          children: [
-            {
-              label: "服务类型",
-              text: "瓦片服务",
-            },
-            {
-              label: "瓦片类型",
-              text: "栅格",
-            },
-            {
-              label: "瓦片描述",
-              text: "地形注记瓦片",
-            },
-            {
-              label: "瓦片规范",
-              text: "OGC WMTS标准",
-            },
-            {
-              label: "URL地址",
-              text: "http://122.228.13.28:1100/sky0/cta_w/wmts?tk=密钥",
-            },
-            {
-              label: "示例",
-              text: "http://122.228.13.28:1100/sky0/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
-            },
-          ],
-          image: "topography_zj.png",
-        },
-      ],
+      content: [],
     };
   },
+  created() {
+    let that = this;
+    $.getJSON("./static/config/tileservice.json", function (result) {
+      that.content = result;
+    });
+  },
 };
 </script>
 

src/components/SecondaryDevelopment/GraphicsDrawingTool.vue

@@ -1,61 +1,155 @@
 <template>
-  <div class="box">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成方式</span>
+  <el-container>
+    <el-row class="first_level_title">集成方式和步骤</el-row>
+    <el-row
+      class="first_text"
+      v-for="(item, index) in content.way"
+      :key="index"
+    >
+      <el-col class="text"> {{ index + 1 }}. {{ item.text }} </el-col>
+      <div v-if="item.children">
+        <el-row
+          class="second_text"
+          v-for="(item_, index_) in item.children"
+          :key="index_"
+        >
+          <el-col class="text"> {{ index_ + 1 }}). {{ item_ }} </el-col>
+        </el-row>
       </div>
-      <div>
-        图形绘制工具通过iframe引入。
-      </div>
-    </el-card>
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成操作步骤</span>
-      </div>
-      <div>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="图形绘制工具" name="second"
-            >1、在页面创建一个iframe标签，src对应的是draw工具包的index.html页面。 例：
-            <p class="code">{{ code3 }}</p></el-tab-pane
-          >
-        </el-tabs>
-      </div>
-    </el-card>
-    
-  </div>
+    </el-row>
+
+    <el-row class="first_level_title">方法说明</el-row>
+    <el-row>
+      <el-col class="text"> {{ content.methods.text }} </el-col>
+    </el-row>
+    <div v-for="(item, index) in content.methods.methods" :key="index">
+      <el-row class="text">{{ index + 1 }}. {{ item.text }} </el-row>
+      <el-row v-if="item.param != undefined">
+        <el-row class="text">参数说明：</el-row>
+        <el-table :data="item.param" border style="width: 70%">
+          <el-table-column prop="name" label="字段名称"> </el-table-column>
+          <el-table-column prop="explain" label="说明"> </el-table-column>
+          <el-table-column prop="type" label="字段类型"> </el-table-column>
+          <el-table-column prop="must" label="是否必传"> </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row v-if="item.example != undefined">
+        <el-row class="text">{{ item.example.title }}</el-row>
+        <el-row
+          class="text second_text"
+          v-for="(str1, index1) in item.example.arr"
+          :key="index1"
+          >{{ index1 + 1 }}). {{ str1 }}</el-row
+        >
+      </el-row>
+      <el-row v-if="item.table != undefined">
+        <el-row class="text">参数说明：</el-row>
+        <el-table :data="item.table" border style="width: 70%">
+          <el-table-column prop="name" label="字段名称"> </el-table-column>
+          <el-table-column prop="explain" label="说明"> </el-table-column>
+          <el-table-column prop="type" label="字段类型"> </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row class="text" v-if="item.attention != undefined">
+        {{ item.attention }}
+      </el-row>
+    </div>
+    <el-row class="first_level_title">注意事项</el-row>
+    <el-row v-for="(str, index) in content.attention" :key="index">
+      <el-col class="text"> {{ index + 1 }}. {{ str }} </el-col>
+    </el-row>
+    <el-row class="first_level_title">效果展示</el-row>
+    <el-carousel height="550px">
+      <el-carousel-item v-for="(item, index) in imageArr" :key="index">
+        <el-image :src="item.image" :preview-src-list="item.srcList"></el-image>
+      </el-carousel-item>
+    </el-carousel>
+  </el-container>
 </template>
 <script>
-// 图形绘制工具集成说明
+import showImg1 from "@/assets/images/SecondaryDevelopment/graphic.jpg";
+// 测量工具集成说明
 export default {
   name: "",
   components: {},
   data() {
     return {
-      activeName: "second",
-      code1: `<iframe
-      src="./static/package/collectdata/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code2: `<iframe
-      src="./static/package/collectdata/dist/index.html?type=1"
-      frameborder="0"
-    ></iframe>
-    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
-      code3: `<iframe
-      src="./static/package/draw/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code4: `let map = new Map({ 
-        target: "map",
-        logo: false, 
-        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
-        view: view, 
-        }); 
-    globalVariable.map = map; `,
-      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
-    this.measure = new measureTool(globalVariable.map);`,
-      code6: `this.measure.start("line");
-    this.measure.start("area");`
+      imageArr: [
+        {
+          image: showImg1,
+          srcList: [showImg1],
+        },
+      ],
+      content: {
+        // 集成方式和步骤
+        way: [
+          { text: "在html页面中使用iframe标签加载插件" },
+          // {
+          //   text: "在填写iframe的src属性时，url不拼接参数时，不触发任何绘制事件；",
+          //   children: [
+          //     "当拼接参数type=1，开启绘制单点；",
+          //     "当拼接参数type=2，开启绘制线（注：绘制线段时，支持 鼠标左键双击 / 鼠标右键单击 结束当前线段绘制）",
+          //   ],
+          // },
+        ],
+        // 方法说明
+        methods: {
+          text: '插件对外暴露三个接口，分别为showCoordinates，clear，getCoordinates。 接口调用示例：document.querySelector("iframe").contentWindow.clear()',
+          methods: [
+            {
+              text: "通过showCoordinates接口，可以将需要展示的图形传入插件页面中",
+              param: [
+                {
+                  name: "type",
+                  explain:
+                    "传入的图形类型（点，多点，线，多线，面，多面分别对应1,2,3,4,5,6）",
+                  type: "Number",
+                  must: "是",
+                },
+                {
+                  name: "data",
+                  explain: "传入的数据",
+                  type: "Array",
+                  must: "是",
+                },
+              ],
+              example: {
+                title: "调用示例：",
+                arr: [
+                  "点: showCoordinates(1,[99.228515625,40.8802948055282])",
+                  "多点：showCoordinates(2,[[99.228515625,40.88029480552824], [103.4912109375,40.613952441166596]])",
+                  "线：showCoordinates(3, [[110.12695312499999,43.45291889355465],[107.841796875,37.75334401310656],[102.87597656249999,39.40224434029275]])",
+                  "多线：showCoordinates(4,[[[110.12695312499999,43.45291889355465],[107.841796875,37.75334401310656],[102.87597656249999,39.40224434029275]],[[108.80859375,37.125286284966805],[102.6123046875,34.30714385628804],[101.337890625,37.23032838760387]]])",
+                  "面：showCoordinates(5,[[[95.4052734375,45.767522962149876],[96.50390625,38.03078569382294],[101.953125,39.53793974517628],[ 95.4052734375,45.767522962149876]]])",
+                  "多面：showCoordinates(6,[[[[95.4052734375,45.767522962149876],[96.50390625,38.03078569382294],[101.953125,39.53793974517628],[ 95.4052734375,45.767522962149876]]],[[[103.5791015625,35.71083783530009],[103.974609375,33.394759218577995],[108.984375,33.687781758439364],[108.5888671875,35.92464453144099],[103.5791015625,35.71083783530009]]]])",
+                ],
+              },
+            },
+            {
+              text: "通过clear接口，可以将插件页面中当前展示的所有图形清空",
+            },
+            {
+              text: "通过getCoordinates，可以获取当前插件页面中所有图形坐标",
+              example: {
+                title: "返回值示例：",
+                arr: [
+                  '{"Polygon":[[[[111.94379253608167,40.71990869432818],[110.64740581733167,39.340371922695],[114.54755230170667,39.382842797308086],[114.36078472358167,40.2016580607922],[111.94379253608167,40.71990869432818]]],[[[116.36029644233166,39.71322862173966],[116.48114605170667,39.340371922695],[114.93207378608167,40.117695055586466],[116.36029644233166,39.71322862173966]]]],"LineString":[[[110.60346050483169,41.80174316976357],[115.42645855170667,41.54735592368354]],[[111.85590191108167,41.20109945851664],[117.66766948920667,41.18456509404331]]],"Point":[[111.02094097358169,42.78503973104256],[114.60248394233167,42.67205558513024]]}',
+                ],
+              },
+            },
+          ],
+        },
+        // 效果展示
+        effect: "",
+        // 注意事项
+        attention: [
+          "请当iframe加载后再调用各类方法",
+          "触发编辑功能时，绘制和选择功能会被强制退出",
+          "绘制时，无法选择和编辑",
+          "在绘制和编辑功能都退出时，可选择图形，点击图形单独选中，按住shift键后再点击图形可进行多选操作",
+          "删除功能规则：当前已有选择的图形时，仅删除已选择的图形；若当前没有选择图形，则删除地图中所有图形",
+        ],
+      },
     };
   },
   created() {},
@@ -63,43 +157,39 @@ export default {
   methods: {},
 
   computed: {},
-  watch: {}
+  watch: {},
 };
 </script>
 
 <style lang="less" scoped>
-.box {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  align-content: center;
-  flex-wrap: wrap;
-  .box-card {
-    width: calc(50% - 15px);
-    height: calc(100vh - 400px);
-    font-size: 18px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #4c4c4c;
-    line-height: 24px;
-    div:nth-child(1) {
-      font-weight: bold;
-    }
-    .clearfix span {
-      font-size: 20px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #258df5;
-      line-height: 40px;
-    }
-    .code {
-      text-indent: 36px;
-      font-size: 18px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #808080;
-      line-height: 32px;
+.el-container {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  background: #ffffff;
+  overflow: hidden;
+  overflow-y: auto;
+  .el-row {
+    line-height: 40px;
+    &::before {
+      display: unset;
     }
   }
+
+  .first_level_title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 16px;
+  }
+  .second_text {
+    text-indent: 20px;
+  }
+  .el-table {
+    line-height: 23px;
+  }
 }
 </style>

src/components/SecondaryDevelopment/IntegratedDescription.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="box">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成方式</span>
-      </div>
-      <div>
-        手动落图工具和图形绘制工具都是通过iframe引入。 <br/>
-        测量工具引入js包并操作方法实现。
-      </div>
-    </el-card>
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成操作步骤</span>
-      </div>
-      <div>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="手动落图工具" name="collectdata">
-            1、首先在页面创建一个iframe标签，src对应的是collectdata工具包的index.html页面。 例：
-            <p class="code">{{ code1 }}</p>
-            2、其次在页面中创建两个按钮【绘点、绘线】并创建点击事件，点击事件分别修改src参数type，type分别对应【1、2】。 例：
-            <p class="code">{{ code2 }}</p>
-          </el-tab-pane>
-          <el-tab-pane label="图形绘制工具" name="second"
-            >1、在页面创建一个iframe标签，src对应的是draw工具包的index.html页面。 例：
-            <p class="code">{{ code3 }}</p></el-tab-pane
-          >
-          <el-tab-pane label="测量工具" name="measure">
-            1、首先在页面中新建map对象,并初始化globalVariable.map对象。 例：
-            <p class="code">{{ code4 }}</p>
-            2、其次引用measure工具包，并实例化对象。 例：
-            <p class="code">{{ code5 }}</p>
-            3、最后在页面中创建两个按钮【测距、测面】并创建点击事件，点击事件分别触发测距测面事件。 例：
-            <p class="code">{{ code6 }}</p>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </el-card>
-    
-  </div>
-</template>
-<script>
-// 集成说明
-export default {
-  name: "",
-  components: {},
-  data() {
-    return {
-      activeName: "collectdata",
-      code1: `<iframe
-      src="./static/package/collectdata/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code2: `<iframe
-      src="./static/package/collectdata/dist/index.html?type=1"
-      frameborder="0"
-    ></iframe>
-    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
-      code3: `<iframe
-      src="./static/package/draw/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code4: `let map = new Map({ 
-        target: "map",
-        logo: false, 
-        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
-        view: view, 
-        }); 
-    globalVariable.map = map; `,
-      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
-    this.measure = new measureTool(globalVariable.map);`,
-      code6: `this.measure.start("line");
-    this.measure.start("area");`
-    };
-  },
-  created() {},
-
-  methods: {},
-
-  computed: {},
-  watch: {}
-};
-</script>
-
-<style lang="less" scoped>
-.box {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  align-content: center;
-  flex-wrap: wrap;
-  .box-card {
-    width: calc(50% - 15px);
-    height: calc(100vh - 400px);
-    font-size: 18px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #4c4c4c;
-    line-height: 24px;
-    div:nth-child(1) {
-      font-weight: bold;
-    }
-    .clearfix span {
-      font-size: 20px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #258df5;
-      line-height: 40px;
-    }
-    .code {
-      text-indent: 36px;
-      font-size: 18px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #808080;
-      line-height: 32px;
-    }
-  }
-}
-</style>

src/components/SecondaryDevelopment/ManualDrawingTool.vue

@@ -1,63 +1,172 @@
 <template>
-  <div class="box">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成方式</span>
+  <el-container>
+    <el-row class="first_level_title">集成方式和步骤</el-row>
+    <el-row
+      class="first_text"
+      v-for="(item, index) in content.way"
+      :key="index"
+    >
+      <el-col class="text"> {{ index + 1 }}. {{ item.text }} </el-col>
+      <div v-if="item.children">
+        <el-row
+          class="second_text"
+          v-for="(item_, index_) in item.children"
+          :key="index_"
+        >
+          <el-col class="text"> {{ index_ + 1 }}). {{ item_ }} </el-col>
+        </el-row>
       </div>
-      <div>
-        手动落图工具通过iframe引入。
-      </div>
-    </el-card>
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成操作步骤</span>
-      </div>
-      <div>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="手动落图工具" name="collectdata">
-            1、首先在页面创建一个iframe标签，src对应的是collectdata工具包的index.html页面。 例：
-            <p class="code">{{ code1 }}</p>
-            2、其次在页面中创建两个按钮【绘点、绘线】并创建点击事件，点击事件分别修改src参数type，type分别对应【1、2】。 例：
-            <p class="code">{{ code2 }}</p>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </el-card>
-    
-  </div>
+    </el-row>
+
+    <el-row class="first_level_title">方法说明</el-row>
+    <el-row>
+      <el-col class="text"> {{ content.methods.text }} </el-col>
+    </el-row>
+    <div v-for="(item, index) in content.methods.methods" :key="index">
+      <el-row class="text">{{ index + 1 }}. {{ item.text }} </el-row>
+      <el-row v-if="item.param != undefined">
+        <el-row class="text">参数说明：</el-row>
+        <el-table :data="item.param" border style="width: 70%">
+          <el-table-column prop="name" label="字段名称"> </el-table-column>
+          <el-table-column prop="explain" label="说明"> </el-table-column>
+          <el-table-column prop="type" label="字段类型"> </el-table-column>
+          <el-table-column prop="must" label="是否必传"> </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row v-if="item.example != undefined">
+        <el-row class="text">{{item.example.title}}</el-row>
+        <el-row
+          class="text second_text"
+          v-for="(str1, index1) in item.example.arr"
+          :key="index1"
+          >{{ index1 + 1 }}). {{ str1 }}</el-row
+        >
+      </el-row>
+      <el-row v-if="item.table != undefined">
+        <el-row class="text">参数说明：</el-row>
+        <el-table :data="item.table" border style="width: 70%">
+          <el-table-column prop="name" label="字段名称"> </el-table-column>
+          <el-table-column prop="explain" label="说明"> </el-table-column>
+          <el-table-column prop="type" label="字段类型"> </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row class="text" v-if="item.attention != undefined">
+        {{ item.attention }}
+      </el-row>
+    </div>
+
+    <el-row class="first_level_title">效果展示</el-row>
+    <el-carousel height="550px">
+      <el-carousel-item v-for="(item, index) in imageArr" :key="index">
+        <el-image :src="item.image" :preview-src-list="item.srcList"></el-image>
+      </el-carousel-item>
+    </el-carousel>
+  </el-container>
 </template>
 <script>
-// 手动落图集成说明
+import showImg1 from "@/assets/images/SecondaryDevelopment/manual1.jpg";
+import showImg2 from "@/assets/images/SecondaryDevelopment/manual2.jpg";
+// 测量工具集成说明
 export default {
   name: "",
   components: {},
   data() {
     return {
-      activeName: "collectdata",
-      code1: `<iframe
-      src="./static/package/collectdata/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code2: `<iframe
-      src="./static/package/collectdata/dist/index.html?type=1"
-      frameborder="0"
-    ></iframe>
-    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
-      code3: `<iframe
-      src="./static/package/draw/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code4: `let map = new Map({ 
-        target: "map",
-        logo: false, 
-        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
-        view: view, 
-        }); 
-    globalVariable.map = map; `,
-      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
-    this.measure = new measureTool(globalVariable.map);`,
-      code6: `this.measure.start("line");
-    this.measure.start("area");`
+      imageArr: [
+        {
+          image: showImg1,
+          srcList: [showImg1],
+        },
+        {
+          image: showImg2,
+          srcList: [showImg2],
+        },
+      ],
+      content: {
+        // 集成方式和步骤
+        way: [
+          { text: "在html页面中使用iframe标签加载插件" },
+          {
+            text: "在填写iframe的src属性时，url不拼接参数时，不触发任何绘制事件；",
+            children: [
+              "当拼接参数type=1，开启绘制单点；",
+              "当拼接参数type=2，开启绘制线（注：绘制线段时，支持 鼠标左键双击 / 鼠标右键单击 结束当前线段绘制）",
+            ],
+          },
+        ],
+        // 方法说明
+        methods: {
+          text: '插件对外暴露三个接口，分别为showCoordinates，clear，getCoordinates。 接口调用示例：document.querySelector("iframe").contentWindow.clear()',
+          methods: [
+            {
+              text: "通过showCoordinates接口，可以将需要展示的图形传入插件页面中",
+              param: [
+                {
+                  name: "type",
+                  explain: "传入的图形类型（点，线，多线分别对应1,3,4）",
+                  type: "Number",
+                  must: "是",
+                },
+                {
+                  name: "data",
+                  explain: "传入的数据",
+                  type: "Array",
+                  must: "是",
+                },
+              ],
+              example: {
+                title: "调用示例：",
+                arr: [
+                  "点: showCoordinates(1,[99.228515625,40.8802948055282])",
+                  "线：showCoordinates(3, [[110.12695312499999,43.45291889355465],[107.841796875,37.75334401310656],[102.87597656249999,39.40224434029275]])",
+                  "多线：showCoordinates(4,[[[110.12695312499999,43.45291889355465],[107.841796875,37.75334401310656],[102.87597656249999,39.40224434029275]],[[108.80859375,37.125286284966805],[102.6123046875,34.30714385628804],[101.337890625,37.23032838760387]]])",
+                ],
+              },
+            },
+            {
+              text: "通过clear接口，可以将插件页面中当前展示的所有图形清空",
+            },
+            {
+              text: "通过getCoordinates，可以获取当前插件页面中所有图形坐标",
+              example: {
+                title: "返回值示例：",
+                arr: [
+                  '{"Point":[[111.02094097358169,42.78503973104256]],"LineString":[]}',
+                  '{"Point":[],"LineString":[[[110.60346050483169,41.80174316976357],[115.42645855170667,41.54735592368354]],[[111.85590191108167,41.20109945851664],[117.66766948920667,41.18456509404331]]]}',
+                ],
+              },
+            },
+            {
+              text: "url可额外增加参数lon，lat，zoom",
+              table: [
+                {
+                  name: "lon",
+                  explain: "地图中心经度",
+                  type: "Number",
+                },
+                {
+                  name: "lat",
+                  explain: "地图中心纬度",
+                  type: "Number",
+                },
+                {
+                  name: "zoom",
+                  explain: "地图缩放级别（1-19）",
+                  type: "Number",
+                },
+              ],
+              attention:
+                "注：lon，lat需要同时填写，否则插件则使用默认经纬度定位；​zoom不填写是使用默认缩放级别定位，填写是按照填写的缩放级别定位；",
+            },
+          ],
+        },
+        // 效果展示
+        effect: "",
+        // // 注意事项
+        // attention: [
+        //   "本测量工具基于二维Web地理引擎OpenLayer制作，使用时请确保开发环境无误。",
+        // ],
+      },
     };
   },
   created() {},
@@ -65,43 +174,39 @@ export default {
   methods: {},
 
   computed: {},
-  watch: {}
+  watch: {},
 };
 </script>
 
 <style lang="less" scoped>
-.box {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  align-content: center;
-  flex-wrap: wrap;
-  .box-card {
-    width: calc(50% - 15px);
-    height: calc(100vh - 400px);
-    font-size: 18px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #4c4c4c;
-    line-height: 24px;
-    div:nth-child(1) {
-      font-weight: bold;
-    }
-    .clearfix span {
-      font-size: 20px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #258df5;
-      line-height: 40px;
-    }
-    .code {
-      text-indent: 36px;
-      font-size: 18px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #808080;
-      line-height: 32px;
+ .el-container {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  background: #ffffff;
+  overflow: hidden;
+  overflow-y: auto;
+  .el-row {
+    line-height: 40px;
+    &::before {
+      display: unset;
     }
   }
+
+  .first_level_title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 16px;
+  }
+  .second_text {
+    text-indent: 20px;
+  }
+  .el-table {
+    line-height: 23px;
+  }
 }
 </style>

src/components/SecondaryDevelopment/MeasureTool.vue

@@ -1,65 +1,61 @@
 <template>
-  <div class="box">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成方式</span>
-      </div>
-      <div>
-        测量工具引入js包并操作方法实现。
-      </div>
-    </el-card>
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>集成操作步骤</span>
-      </div>
-      <div>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="测量工具" name="measure">
-            1、首先在页面中新建map对象,并初始化globalVariable.map对象。 例：
-            <p class="code">{{ code4 }}</p>
-            2、其次引用measure工具包，并实例化对象。 例：
-            <p class="code">{{ code5 }}</p>
-            3、最后在页面中创建两个按钮【测距、测面】并创建点击事件，点击事件分别触发测距测面事件。 例：
-            <p class="code">{{ code6 }}</p>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </el-card>
-    
-  </div>
+  <el-container>
+    <el-row class="first_level_title">集成方式和步骤</el-row>
+    <el-row v-for="(str, index) in content.way" :key="index">
+      <el-col class="text"> {{ index + 1 }}. {{ str }} </el-col>
+    </el-row>
+    <el-row class="first_level_title">方法说明</el-row>
+    <el-row v-for="(str, index) in content.methods" :key="index">
+      <el-col class="text"> {{ index + 1 }}. {{ str }} </el-col>
+    </el-row>
+    <el-row class="first_level_title">注意事项</el-row>
+    <el-row v-for="(str, index) in content.attention" :key="index">
+      <el-col class="text"> {{ index + 1 }}. {{ str }} </el-col>
+    </el-row>
+    <el-row class="first_level_title">效果展示</el-row>
+    <el-carousel height="550px">
+      <el-carousel-item v-for="(item, index) in imageArr" :key="index">
+        <el-image :src="item.image" :preview-src-list="item.srcList"></el-image>
+      </el-carousel-item>
+    </el-carousel>
+  </el-container>
 </template>
 <script>
+import showImg1 from "@/assets/images/SecondaryDevelopment/measure1.jpg";
+import showImg2 from "@/assets/images/SecondaryDevelopment/measure2.jpg";
 // 测量工具集成说明
 export default {
   name: "",
   components: {},
   data() {
     return {
-      activeName: "measure",
-      code1: `<iframe
-      src="./static/package/collectdata/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code2: `<iframe
-      src="./static/package/collectdata/dist/index.html?type=1"
-      frameborder="0"
-    ></iframe>
-    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
-      code3: `<iframe
-      src="./static/package/draw/dist/index.html"
-      frameborder="0"
-    ></iframe>`,
-      code4: `let map = new Map({ 
-        target: "map",
-        logo: false, 
-        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
-        view: view, 
-        }); 
-    globalVariable.map = map; `,
-      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
-    this.measure = new measureTool(globalVariable.map);`,
-      code6: `this.measure.start("line");
-    this.measure.start("area");`
+      imageArr: [
+        {
+          image: showImg1,
+          srcList: [showImg1],
+        },
+        {
+          image: showImg2,
+          srcList: [showImg2],
+        },
+      ],
+      content: {
+        // 集成方式和步骤
+        way: [
+          "在html页中引入测量工具的js文件, 全局会增加一个measureTool类；",
+          "通过measureTool类实例化一个测量对象，并通过其内部方法实现测量功能。",
+        ],
+        // 方法说明
+        methods: [
+          "实例化一个测量对象 let measureToolObj = new measureTool(map)，其中map为openlayer地图引擎创建的地图对象；",
+          'measureToolObj.start(type)，通过调用实例化的测量对象当中的start方法，启动测量功能。其中参数type有两个值，当type="lineString"时，开启的是测距功能；当type="area"时，开启的是测面功能。',
+          "measureToolObj.stop()，通过调用实例化的测量对象当中的stop方法，关闭测量功能。",
+        ],
+        // 注意事项
+        attention: [
+          "本测量工具基于二维Web地理引擎OpenLayer制作，使用时请确保开发环境无误。",
+        ],
+      },
     };
   },
   created() {},
@@ -67,7 +63,7 @@ export default {
   methods: {},
 
   computed: {},
-  watch: {}
+  watch: {},
 };
 </script>
 
@@ -106,4 +102,29 @@ export default {
     }
   }
 }
+
+.el-container {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  background: #ffffff;
+  overflow: hidden;
+  overflow-y: auto;
+  .el-row {
+    line-height: 40px;
+    &::before {
+      display: unset;
+    }
+  }
+
+  .first_level_title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 16px;
+  }
+}
 </style>

src/components/SystemManagement/AuthorityManagement.vue

@@ -1,324 +0,0 @@
-<template>
-  <div class="authContainer">
-    <div class="content">
-      <div class="list_container userList">
-        <el-breadcrumb separator-class="el-icon-arrow-right" :class="'title'">
-          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
-        </el-breadcrumb>
-        <el-row v-for="(item, index) in userList" :key="index">
-          <div @click="changeUser(item)">{{ item.username }}</div>
-        </el-row>
-      </div>
-      <div class="list_container authList" v-show="isShowAuthList">
-        <el-breadcrumb separator-class="el-icon-arrow-right" :class="'title'">
-          <el-breadcrumb-item
-            v-for="(str, index) in breadcrumbAuthArr"
-            :key="index"
-            :title="str"
-            >{{ str }}
-          </el-breadcrumb-item>
-        </el-breadcrumb>
-        <el-tree
-          ref="layerTree"
-          :data="layerList"
-          show-checkbox
-          node-key="id"
-          :default-expanded-keys="[0, 1, 2, 3, 4, 5, 6]"
-          @check="layerCheck"
-          :props="defaultLayerListProps"
-          :expand-on-click-node="false"
-        >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span>{{ node.label }}</span>
-            <span v-if="node.level != 1">
-              <el-button
-                type="text"
-                size="mini"
-                @click="() => openSetRegion(data, node)"
-                >设置行政区划权限
-              </el-button>
-            </span>
-          </span>
-        </el-tree>
-      </div>
-    </div>
-    <div class="footer">
-      <div>
-        <el-button @click="save">保存设置</el-button>
-        <el-button @click="cancal">取消设置</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import api from "@/api/authManage";
-export default {
-  props: {},
-  data() {
-    return {
-      breadcrumbAuthArr: [""],
-      userList: [],
-      isShowAuthList: false,
-      authList: [],
-      defaultAuthListProps: {
-        children: "children",
-        label: "label",
-      },
-      nowLayerId: null,
-      nowUserId: null,
-      haveChange: false, // 是否做了修改
-    };
-  },
-  created() {
-    this.getAllUserList();
-    this.authList = JSON.parse(
-      JSON.stringify(this.$store.getters.getMenuListDeafaultTotal)
-    );
-  },
-  mounted() {},
-  methods: {
-    // 切换用户
-    changeUser(item) {
-      let that = this;
-      if (this.haveChange) {
-        // 是否保存当前用户的权限设置？
-        this.$confirm("是否保存对当前用户权限的设置或改动？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        })
-          .then(() => {
-            // 转入保存逻辑
-            that
-              .saveNowUserAuth()
-              .then(() => {
-                that.getAuthAndShowLayer(item);
-              })
-              .catch((err) => {
-                that
-                  .$confirm(err + "，是否继续切换用户？", "提示", {
-                    confirmButtonText: "确定",
-                    cancelButtonText: "取消",
-                    type: "warning",
-                  })
-                  .then(() => {
-                    that.getAuthAndShowLayer(item);
-                  })
-                  .catch(() => {});
-              });
-          })
-          .catch(() => {
-            that.getAuthAndShowLayer(item);
-          });
-      } else {
-        this.getAuthAndShowLayer(item);
-      }
-    },
-
-    // 获取当前用户权限，并 打开图层列表，关闭区划列表
-    getAuthAndShowLayer(item) {
-      let that = this;
-      this.nowLayerId = null;
-      this.nowUserId = null;
-      this.haveChange = false;
-      return new Promise((resolve, reject) => {
-        this.getSingleUserAuthInfo(item.id)
-          .then((content) => {
-            that.authInfo = content == -1 ? {} : JSON.parse(content);
-            that.$refs.layerTree.setCheckedKeys(Object.keys(that.authInfo)); // 设置选中图层
-            that.isShowLayerList = true;
-            that.isShowRegionList = false;
-            that.isShowBatchRegionList = false;
-            that.breadcrumbLayerArr = [item.username, "图层权限"];
-            that.nowUserId = item.id;
-            resolve();
-          })
-          .catch((err) => {
-            reject();
-          });
-      });
-    },
-
-    // 获取所有用户
-    getAllUserList() {
-      let that = this;
-      let obj = Object.assign({}, systemConfig.defaultUser);
-      obj.active = false;
-      this.userList.push(obj);
-      api
-        .getAllUser()
-        .then((result) => {
-          if (result.code == 200) {
-            let arr = result.content;
-            arr.unshift();
-            that.userList.concat(
-              arr.map(function (item) {
-                item.active = false;
-                return item;
-              })
-            );
-          } else {
-            this.$checkRequestCode(result);
-          }
-        })
-        .catch((err) => {
-          that.$message({
-            type: "error",
-            message: err,
-          });
-        });
-    },
-
-    // 保存设置
-    save() {
-      let that = this;
-      return;
-      this.saveNowUserAuth()
-        .then((result) => {
-          that.haveChange = false;
-          that.isShowLayerList = false;
-          that.isShowRegionList = false;
-          that.isShowBatchRegionList = false;
-        })
-        .catch((err) => {});
-    },
-
-    // 取消设置
-    cancal() {
-      return;
-      this.authInfo = {};
-
-      this.breadcrumbAuthArr = [""];
-      this.breadcrumRegionbArr = [""];
-
-      this.nowLayerId = null;
-      this.nowUserId = null;
-
-      this.haveChange = false;
-
-      this.isShowLayerList = false;
-      this.isShowRegionList = false;
-      this.isShowBatchRegionList = false;
-    },
-  },
-  computed: {},
-  watch: {},
-};
-</script>
-
-<style lang="less" scoped>
-.authContainer {
-  width: 100%;
-  height: 100%;
-  background: #ffffff;
-  font-family: "Arial Normal", "Arial";
-  font-weight: 400;
-  font-style: normal;
-  color: #aaaaaa;
-  position: relative;
-  .content {
-    height: calc(100% - 60px);
-
-    .list_container {
-      height: calc(100% - 40px);
-      float: left;
-      overflow: hidden;
-      overflow-y: auto;
-      margin: 20px 20px;
-      border: 1px solid #eeeeee;
-      border-radius: 10px;
-      box-sizing: border-box;
-      position: relative;
-
-      &.userList {
-        width: calc(35% - 40px);
-        .el-row {
-          height: 40px;
-          line-height: 40px;
-          color: #000000;
-          margin: 0 10px;
-          padding-left: 10px;
-          border-bottom: 1px solid #eeeeee;
-          font-size: 16px;
-
-          &:hover {
-            background-color: #eeeeee;
-            cursor: pointer;
-          }
-
-          &.active {
-            background-color: #eeeeee;
-          }
-        }
-      }
-
-      &.authList {
-        width: calc(65% - 40px);
-      }
-
-      .custom-tree-node {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 14px;
-        padding-right: 8px;
-      }
-
-      .title {
-        height: 40px;
-        line-height: 40px;
-        margin: 0 10px;
-        border-bottom: 1px solid #eeeeee;
-        box-sizing: border-box;
-        font-size: 18px;
-        color: #000000;
-
-        /deep/ .el-breadcrumb__inner {
-          font-weight: bold !important;
-        }
-
-        /deep/ .el-breadcrumb__item {
-          float: unset;
-
-          &:nth-child(1) > .el-breadcrumb__inner {
-            max-width: 120px;
-          }
-
-          &:nth-child(2) > .el-breadcrumb__inner {
-            max-width: 180px;
-          }
-
-          > .el-breadcrumb__inner {
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            cursor: pointer;
-          }
-
-          > i {
-            display: inline-block;
-            vertical-align: top;
-            margin-top: 11px;
-          }
-
-          &:last-child .el-breadcrumb__separator {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
-  .footer {
-    box-sizing: border-box;
-    padding: 0 20px;
-
-    > div {
-      float: right;
-    }
-  }
-}
-</style>

src/components/SystemManagement/RoleManagement.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="authContainer">
+    <div class="content">
+      <div class="list_container roleList">
+        <el-breadcrumb separator-class="el-icon-arrow-right" :class="'title'">
+          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
+        </el-breadcrumb>
+        <el-row v-for="(item, index) in roleList" :key="index">
+          <div @click="changeRole(item)">{{ item.roleName }}</div>
+        </el-row>
+      </div>
+      <div class="list_container authList" v-show="nowRole != null">
+        <el-row v-for="(item, index) in authList" :key="index">
+          <div
+            :class="{
+              first_level: Number(item.noteStr) % 10 == 0,
+              second_level: Number(item.noteStr) % 10 != 0,
+            }"
+          >
+            <el-checkbox
+              v-model="item.active"
+              @change="changeAuth($event, item)"
+            >
+              {{ item.permissionName }}
+            </el-checkbox>
+          </div>
+        </el-row>
+      </div>
+    </div>
+    <div class="footer">
+      <div>
+        <el-button @click="save">保存设置</el-button>
+        <!-- <el-button @click="cancal">取消设置</el-button> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "@/api/roleManagement";
+export default {
+  props: {},
+  data() {
+    return {
+      roleList: [],
+      authList: [],
+      authDefaultList: [],
+
+      defaultProps: {
+        children: "children",
+        label: "permissionName",
+      },
+
+      defaultExpandedKeys: [],
+      defaultCheckedKeys: [],
+
+      nowRole: null,
+    };
+  },
+  created() {
+    let that = this;
+    this.getAllRoleList()
+      .then((result) => {
+        that
+          .getAllAuthList()
+          .then((result) => {})
+          .catch((err) => {});
+      })
+      .catch((err) => {});
+  },
+  mounted() {},
+  methods: {
+    // 获取所选角色的权限 并 更新UI
+    changeRole(item) {
+      let that = this;
+      this.nowRole = Object.assign({}, item);
+      this.authList = [].concat(this.authDefaultList);
+      api
+        .getAllPermissionOnRole({
+          roleId: item.id,
+        })
+        .then((result) => {
+          if (result.code) {
+            if (result.code == 200) {
+              let arr = result.content.map(function (item) {
+                return item.id;
+              });
+              that.authList = that.authList.map(function (item) {
+                item.active = arr.indexOf(item.id) > -1;
+                return item;
+              });
+            } else {
+              that.$checkRequestCode(result);
+            }
+          } else {
+            that.roleList = result;
+          }
+        })
+        .catch((err) => {
+          that.$message({
+            type: "error",
+            message: err,
+          });
+        });
+    },
+    // 改变权限从而改变UI
+    changeAuth(status, item) {
+      if (!status) {
+        if (Number(item.noteStr) % 10 == 0) {
+          let t = Math.floor(Number(item.noteStr) / 10);
+          this.authList = this.authList.map(function (item_) {
+            let d = Math.floor(Number(item_.noteStr) / 10);
+            if (t == d) item_.active = false;
+            return item_;
+          });
+        }
+      }
+    },
+
+    // 获取所有权限
+    getAllAuthList() {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        api
+          .getAllPermission()
+          .then((result) => {
+            if (result.code == 200) {
+              that.authArrange(result.content);
+              resolve();
+            } else {
+              that.$checkRequestCode(result);
+              reject();
+            }
+          })
+          .catch((err) => {
+            that.$message({
+              type: "error",
+              message: err,
+            });
+            reject();
+          });
+      });
+    },
+    // 获取所有角色
+    getAllRoleList() {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        api
+          .getAllRole()
+          .then((result) => {
+            if (result.code) {
+              if (result.code == 200) {
+                that.roleArrange(result.content);
+                resolve();
+              } else {
+                that.$checkRequestCode(result);
+                reject();
+              }
+            } else {
+              that.roleArrange(result);
+              resolve();
+            }
+          })
+          .catch((err) => {
+            that.$message({
+              type: "error",
+              message: err,
+            });
+            reject();
+          });
+      });
+    },
+
+    // 权限整理
+    authArrange(list) {
+      this.authDefaultList = list.map(function (item) {
+        item.active = false;
+        return item;
+      });
+    },
+    // 角色整理
+    roleArrange(list) {
+      this.roleList = list.filter(function (item) {
+        return item.id != 5;
+      });
+    },
+
+    // 保存设置
+    save() {
+      let that = this;
+      if (this.nowRole == null) {
+        return;
+      }
+      let arr = this.authList
+        .filter(function (item) {
+          return item.active;
+        })
+        .map(function (item) {
+          return item.id;
+        });
+      api
+        .updateRoleAuth({
+          roleId: this.nowRole.id,
+          permissionId: arr.join(","),
+        })
+        .then((result) => {
+          if (result.code) {
+            if (result.code == 200) {
+              that.$message({
+                type: "success",
+                message: "权限更新成功！",
+              });
+            } else {
+              that.$checkRequestCode(result);
+            }
+          } else {
+            that.roleList = result;
+          }
+        })
+        .catch((err) => {
+          that.$message({
+            type: "error",
+            message: err,
+          });
+        });
+    },
+  },
+  computed: {},
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.authContainer {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  font-family: "Arial Normal", "Arial";
+  font-weight: 400;
+  font-style: normal;
+  color: #aaaaaa;
+  position: relative;
+  .content {
+    height: calc(100% - 60px);
+
+    .list_container {
+      height: calc(100% - 40px);
+      float: left;
+      overflow: hidden;
+      overflow-y: auto;
+      margin: 20px 20px;
+      border: 1px solid #eeeeee;
+      border-radius: 10px;
+      box-sizing: border-box;
+      position: relative;
+
+      &.roleList {
+        width: calc(35% - 40px);
+        .el-row {
+          height: 40px;
+          line-height: 40px;
+          color: #000000;
+          margin: 0 10px;
+          padding-left: 10px;
+          border-bottom: 1px solid #eeeeee;
+          font-size: 16px;
+
+          &:hover {
+            background-color: #eeeeee;
+            cursor: pointer;
+          }
+
+          &.active {
+            background-color: #eeeeee;
+          }
+        }
+      }
+
+      &.authList {
+        width: calc(65% - 40px);
+        padding-left: 20px;
+        .el-row {
+          font-size: 16px;
+          line-height: 40px;
+          color: #000000;
+        }
+        .first_level {
+        }
+        .second_level {
+          padding-left: 40px;
+        }
+      }
+
+      .custom-tree-node {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        padding-right: 8px;
+      }
+
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin: 0 10px;
+        border-bottom: 1px solid #eeeeee;
+        box-sizing: border-box;
+        font-size: 18px;
+        color: #000000;
+
+        /deep/ .el-breadcrumb__inner {
+          font-weight: bold !important;
+        }
+
+        /deep/ .el-breadcrumb__item {
+          float: unset;
+
+          &:nth-child(1) > .el-breadcrumb__inner {
+            max-width: 120px;
+          }
+
+          &:nth-child(2) > .el-breadcrumb__inner {
+            max-width: 180px;
+          }
+
+          > .el-breadcrumb__inner {
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+          }
+
+          > i {
+            display: inline-block;
+            vertical-align: top;
+            margin-top: 11px;
+          }
+
+          &:last-child .el-breadcrumb__separator {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    box-sizing: border-box;
+    padding: 0 20px;
+
+    > div {
+      float: right;
+    }
+  }
+}
+</style>

src/components/SystemManagement/UserManagement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="authContainer">
+  <div class="userManagement">
     <div class="content">
       <div class="list_container userList">
         <el-breadcrumb separator-class="el-icon-arrow-right" :class="'title'">
@@ -95,7 +95,7 @@
 </template>
 
 <script>
-import api from "@/api/authManage";
+import api from "@/api/userManagement";
 export default {
   props: {},
   data() {
@@ -159,13 +159,12 @@ export default {
         .then((result) => {
           if (result.code == 200) {
             let arr = result.content;
-            arr.unshift();
-            that.userList.concat(
-              arr.map(function (item) {
-                item.active = false;
-                return item;
-              })
-            );
+            that.userList.shift();
+            let d = arr.map(function (item) {
+              item.active = false;
+              return item;
+            });
+            that.userList = [].concat(that.userList, d);
           } else {
             this.$checkRequestCode(result);
           }
@@ -517,7 +516,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.authContainer {
+.userManagement {
   width: 100%;
   height: 100%;
   background: #ffffff;

src/store/index.js

@@ -269,8 +269,8 @@ export default new Vuex.Store({
               permission: 91,
             },
             {
-              label: "权限管理",
-              name: "AuthorityManagement",
+              label: "角色管理",
+              name: "RoleManagement",
               index: "2",
               permission: 92,
             },

src/views/SystemManagement.vue

@@ -10,7 +10,7 @@
       ></Aside>
       <el-main>
         <UserManagement v-if="showIndex == '1'"></UserManagement>
-        <AuthorityManagement v-if="showIndex == '2'"></AuthorityManagement>
+        <RoleManagement v-if="showIndex == '2'"></RoleManagement>
       </el-main>
     </el-container>
   </div>
@@ -34,8 +34,8 @@ export default {
     Aside: () => import("@/components/Currency/Aside.vue"),
     UserManagement: () =>
       import("@/components/SystemManagement/UserManagement.vue"),
-    AuthorityManagement: () =>
-      import("@/components/SystemManagement/AuthorityManagement.vue"),
+    RoleManagement: () =>
+      import("@/components/SystemManagement/RoleManagement.vue"),
   },
   created() {
     let that = this;