图标交互修改

src/api/content.js

@@ -55,6 +55,12 @@ const uploadShapeFile = (params) => {
 }
 
 
+// 根据标题筛选获取模型
+const getContentForTitle = (params) => {
+  let str = splicingParam(params)
+  return post(systemConfig.dataUrl + '/content/selectByTitleAPage?' + str)
+}
+
 export default {
   getContentListById,
   getContentListByModelId,
@@ -64,5 +70,6 @@ export default {
   updateSingleData,
   uploadGeojsonFile,
   uploadExcelFile,
-  uploadShapeFile
+  uploadShapeFile,
+  getContentForTitle
 }

src/api/contentlist.js

@@ -1,15 +0,0 @@
-import {
-    splicingParam,
-    post,
-} from '../utils/request'
-
-
-// 根据标题筛选获取模型
-const getContentForTitle = (params) => {
-    let str = splicingParam(params)
-    return post(systemConfig.dataUrl + '/content/selectByTitleAPage?' + str)
-}
-
-export default {
-    getContentForTitle,
-}

src/api/icon.js

@@ -7,7 +7,22 @@ import {
 const getIcon = () => {
     return post(systemConfig.markUrl + '/getMarkIcon')
 }
+// 增加点标注图片
+const addNewIcon = () => {
+    return post(systemConfig.markUrl + '/getMarkIcon')
+}
+// 更新点标注图片
+const updateIcon = () => {
+    return post(systemConfig.markUrl + '/getMarkIcon')
+}
+// 删除点标注图片
+const delIcon = () => {
+    return post(systemConfig.markUrl + '/getMarkIcon')
+} 
 
 export default {
-    getIcon
+    getIcon,
+    addNewIcon,
+    updateIcon,
+    delIcon
 }

src/components/DataDisplay/LayerDisplay/ContentList.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import api from "@/api/contentlist";
+import api from "@/api/content";
 import api2 from "@/api/menu";
 
 import { transform } from "ol/proj";

src/components/DataLayer/IconLibraryManagement.vue

@@ -1,18 +1,24 @@
 <template>
   <el-container :class="'content'">
     <el-header>
+      <el-select v-model="value" placeholder="请选择">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
       <el-button type="primary" class="add-item" @click="openAddIconDialog">
         新增图标
       </el-button>
     </el-header>
     <el-main>
       <ul>
-        <li
-          v-for="(item, index) in iconList"
-          :key="index"
-          :style="{ backgroundImage: 'url(' + item.url + ')' }"
-          :title="item.key"
-        >
+        <li v-for="(item, index) in iconList" :key="index" :title="item.key">
+          <!-- :style="{ backgroundImage: 'url(' + item.url + ')' }" -->
+          <img :src="item.url" alt="" srcset="" />
           <div class="name">
             {{ item.key }}
           </div>
@@ -151,16 +157,21 @@ export default {
     li {
       width: 69px;
       height: 71px;
+      margin: 0px 10px;
       float: left;
-      margin: 5px 5px;
-      background-size: 100% 100%;
-      margin-bottom: 50px;
+      padding: 5px 5px;
+      padding-bottom: 50px;
       position: relative;
       cursor: pointer;
+      img {
+        width: 69px;
+        height: 71px;
+      }
       .name {
         position: absolute;
         width: 100%;
-        bottom: -24px;
+        bottom: 24px;
+        left: 0px;
         text-align: center;
         overflow: hidden;
         white-space: nowrap;
@@ -168,14 +179,20 @@ export default {
       }
       .func {
         position: absolute;
-        bottom: -44px;
-        left: 16px;
+        bottom: 3px;
+        left: 21px;
+        display: none;
         .el-button {
           border: 0px;
           padding: 0 0;
           background: transparent;
         }
       }
+      &:hover {
+        .func {
+          display: inline-block;
+        }
+      }
     }
   }
 }