feat: save

packages/admin/package.json

@@ -50,7 +50,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "no-debugger": 0
+    }
   },
   "browserslist": [
     "> 1%",

packages/admin/src/apis/tab5.js

@@ -0,0 +1,45 @@
+import axios from '../utils/request'
+// 获取列表
+export const getTopList = () => {
+  return axios({
+    method: 'get',
+    url: '/cms/subject/getList'
+  })
+}
+
+export const getSecondList = (parentId) => {
+  return axios({
+    method: 'get',
+    url: `/cms/subject/getSon/${parentId}`
+  })
+}
+export const addEntity = (params) => {
+  return axios({
+    method: 'post',
+    data: params,
+    url: '/cms/subject/saveEntity'
+  })
+}
+export const deleteEntity = (id) => {
+  return axios({
+    method: 'post',
+    url: `/cms/subject/removes/${id}`
+  })
+}
+export const getEntity = (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/subject/detail/${id}`
+  })
+}
+
+export const fileUpload = ({ file, type }) => {
+  const data = new FormData()
+  data.append('file', file)
+  data.append('type', type)
+  return axios({
+    method: 'post',
+    data: data,
+    url: '/cms/subject/upload'
+  })
+}

packages/admin/src/views/tab5/index.vue

@@ -4,48 +4,352 @@
     <div class="obstruct"></div>
     <div class="content">
       <div class="search">
-        <span>村落名称：</span>
-        <el-input
-          type="text"
-          placeholder="请输入内容"
-          v-model="name"
-          maxlength="25"
-          show-word-limit
-        />
-        <el-button type="primary">查询</el-button>
-        <el-button>重置</el-button>
+        <div class="btns">
+          <div class="left">
+            <el-button v-for="tab in level1Data.filter(item => item.level===1)"
+                       :type="Number(activeTopId) ===tab.id?'primary':''" v-bind:key="tab.id"
+                       @click="handleLevelTopClick(tab.id)">{{ tab.name }}
+            </el-button>
+          </div>
+          <div class="right">
+            <el-button @click="level1Modal = true">一级专题管理</el-button>
+            <el-button
+              @click="(level2ModalFormVisible = true) && (handleAllReset() && (level2ModalForm.id = activeTopId))">
+              新增二级专题
+            </el-button>
+          </div>
+        </div>
+
       </div>
+
       <div class="table">
+        <el-table :data="tableData" style="width: 100%" height="529px">
+          <el-table-column prop="name" label="二级专题"></el-table-column>
+          <el-table-column prop="thumb" label="封面">
+            <template #default="{ row }">
+              <img class="thumb" :src="getImageURL(row.thumb)" alt=""/>
+            </template>
+
+          </el-table-column>
+          <el-table-column prop="sort" label="排序值"></el-table-column>
+          <el-table-column label="操作">
+            <!--            <template #default="{ row }">-->
+            <template #default="{ row }">
+              <el-button type="text">村落设置</el-button>
+              <el-button type="text" @click="handleLevel2Edit(row.id)">编辑</el-button>
+              <el-popconfirm
+                title="确定删除吗？"
+                @confirm="handleLevel1Delete(row.id)"
+              >
+                <el-button slot="reference" type="text" style="padding: 0 5px">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
+      <el-dialog
+        :visible.sync="level1Modal"
+        width="50%"
+        destroy-on-close
+        center>
+
+        <div class="table">
+          <el-table :data="level1Data" style="width: 100%" min-height="450px">
+            <el-table-column prop="name" label="专题名称"></el-table-column>
+            <el-table-column prop="name" label="排序值"></el-table-column>
+            <el-table-column label="操作">
+              <template #default="{ row }">
+                <el-button type="text" @click="handleLevel1Edit(row.id)">编辑</el-button>
+                <el-popconfirm
+                  title="确定删除吗？"
+                  @confirm="handleLevel1Delete(row.id)"
+                >
+                  <el-button slot="reference" type="text" style="padding: 0 5px">删除</el-button>
+                </el-popconfirm>
+
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div slot="title" class="lv1-modal-header">
+          <span>一级专题</span>
+          <el-button type="primary" @click="level1ModalFormVisible = true">新增</el-button>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="level1Modal = false">取 消</el-button>
+            <el-button type="primary" @click="level1Modal = false">确 定</el-button>
+        </span>
+      </el-dialog>
+
+      <el-dialog
+        :visible.sync="level1ModalFormVisible"
+        destroy-on-close
+        width="30%"
+        center>
+        <div slot="title" class="lv1-modal-header">
+          <span>新增</span>
+        </div>
+        <el-form ref="level1Form" label-position="right" label-width="80px" :model="level1ModalForm"
+                 :rules="level1ModalFormRules">
+          <el-form-item label="专题名称" prop="name" required>
+            <el-input v-model="level1ModalForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="排序值" prop="sort" required>
+            <el-input v-model="level1ModalForm.sort"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="level1ModalFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleLevel1Submit">确 定</el-button>
+        </span>
+      </el-dialog>
+
+      <!--    二级专题管理  -->
+      <el-dialog
+        destroy-on-close
+        :visible.sync="level2ModalFormVisible"
+        width="30%"
+        center>
+        <div slot="title" class="lv1-modal-header">
+          <span>{{ level2ModalForm.id ? "编辑" : "新增" }}二级专题</span>
+        </div>
+        <el-form ref="level2Form" label-position="right" label-width="80px" :model="level2ModalForm"
+                 :rules="level1ModalFormRules">
+          <el-form-item label="专题名称" prop="name" required>
+            <el-input v-model="level2ModalForm.name" placeholder="请输入内容，最多20字" :max-length="20"></el-input>
+          </el-form-item>
+          <el-form-item label="封面" prop="thumb" required>
+            <el-upload
+              action=""
+              :limit="1"
+              :http-request="handleFileUpload"
+              list-type="picture-card"
+              accept=".jpeg,.png,.png"
+              :file-list="level2ModalForm.filelist"
+              :on-remove="handleFileRemove">
+              <i class="el-icon-plus"></i>
+              <div slot="tip" class="el-upload__tip">格式要求：支持png、jpg图片格式；最大支持5M，最多1张</div>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="排序值" prop="sort">
+            <el-input-number controls-position="right" placeholder="请输入1~999的数字。数字越小，排序越靠前。"
+                             v-model="level2ModalForm.sort"></el-input-number>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="level2ModalFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleLevel2Submit">确 定</el-button>
+        </span>
+      </el-dialog>
+
     </div>
   </div>
 </template>
 
 <script>
-// import { villageList } from '@/apis/tab5'
+import { getTopList, getSecondList, addEntity, deleteEntity, getEntity, fileUpload } from '@/apis/tab5'
+
 export default {
   name: 'tab5',
   components: {},
   data () {
     // 这里存放数据
     return {
+      activeTopId: '1',
       name: '',
-      tableData: []
+      tableData: [],
+      level1Data: [],
+      level1Modal: false,
+      level1ModalFormVisible: false,
+      level1ModalForm: {},
+      level1ModalFormRules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: '请输入排序值', trigger: 'change' }
+        ],
+        thumb: [
+          { required: true, message: '请输入封面图' }
+        ]
+
+      },
+      level2ModalFormVisible: false,
+      level2ModalForm: {
+        filelist: []
+      }
+
     }
   },
   // 监听属性 类似于data概念
-  computed: {},
+  computed: {
+    getImageURL: (url) => {
+      return (url) => {
+        const domain = process.env.NODE_ENV === 'development' ? 'http://project.4dage.com:8016' : ''
+        return domain + url
+      }
+    }
+  },
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    handleClick () {
+    },
+    handleLevelTopClick (id) {
+      this.activeTopId = id
+      this.handleRefreshList()
+    },
+    async handleRefreshLevel1List () {
+      const list = await getTopList()
+      if (list.data.length > 0) {
+        this.activeTopId = list.data[0].id
+        await this.handleRefreshList()
+        this.level1Data = list.data
+      }
+    },
+    async handleRefreshList () {
+      const list = await getSecondList(this.activeTopId)
+      // console.log('handleRefreshList', list)
+      this.tableData = list.data
+    },
+    handleLevel1Submit () {
+      this.$refs.level1Form.validate(async (valid) => {
+        if (valid) {
+          const params = {
+            name: this.level1ModalForm.name,
+            sort: this.level1ModalForm.sort,
+            level: 1
+          }
+          if (this.level1ModalForm.id) {
+            params.id = this.level1ModalForm.id
+          }
+          const res = await addEntity(params)
+          await this.handleRefreshLevel1List()
+          this.level1ModalFormVisible = false
+          if (res.code === 0) {
+            this.$message({
+              message: res.msg,
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    async handleLevel1Delete (id) {
+      const res = await deleteEntity(id)
+      if (res.code === 0) {
+        this.$message({
+          message: '删除成功！',
+          type: 'success'
+        })
+      } else {
+        this.$message({
+          message: res.msg,
+          type: 'error'
+        })
+      }
+      await this.handleRefreshLevel1List()
+    },
+    async handleLevel1Edit (id) {
+      this.level1ModalFormVisible = true
+      const res = await getEntity(id)
+      this.level1ModalForm = {
+        id: id,
+        name: res.data.name,
+        sort: res.data.sort
+      }
+      console.log('res', res)
+    },
+    handleFileRemove () {
+    },
+    async handleFileUpload ({ file }) {
+      const res = await fileUpload({
+        file: file,
+        type: 'thumb'
+      })
+      console.log('res', res.data.filePath)
+      this.level2ModalForm.thumb = res.data.filePath
+    },
+    handleLevel2Submit () {
+      this.$refs.level2Form.validate(async (valid) => {
+        if (valid) {
+          const params = {
+            name: this.level2ModalForm.name,
+            sort: this.level2ModalForm.sort,
+            level: 2,
+            parentId: this.activeTopId,
+            thumb: this.level2ModalForm.thumb
+          }
+          if (this.level2ModalForm.id) {
+            params.id = this.level2ModalForm.id
+          }
+          const res = await addEntity(params)
+          await this.handleRefreshList()
+          this.level2ModalFormVisible = false
+          if (res.code === 0) {
+            this.$message({
+              message: res.msg,
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+          this.level1ModalForm = {}
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    async handleLevel2Edit (id) {
+      console.log(id)
+      this.level2ModalFormVisible = true
+      const res = await getEntity(id)
+      const domain = process.env.NODE_ENV === 'development' ? 'http://project.4dage.com:8016' : ''
+
+      this.level2ModalForm = {
+        id: id,
+        name: res.data.name,
+        sort: res.data.sort,
+        thumb: res.data.thumb,
+        filelist: [{ name: 'food.jpg', url: domain + res.data.thumb }]
+      }
+    },
+    handleAllReset () {
+      this.level1ModalForm = {
+        id: '',
+        name: '',
+        sort: ''
+      }
+      this.level2ModalForm = {
+        id: '',
+        name: '',
+        thumb: '',
+        sort: '',
+        filelist: []
+      }
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
   async created () {
     // const res = await villageList()
     // this.tableData = res.data
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
+    await this.handleRefreshLevel1List()
   },
   beforeCreate () {
   }, // 生命周期 - 创建之前
@@ -77,6 +381,13 @@ export default {
       align-items: center;
       border-bottom: 1px solid black;
 
+      .btns {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
       /deep/ .el-input {
         width: 300px;
         margin-right: 12px;
@@ -88,10 +399,38 @@ export default {
     }
 
     .table {
-      /deep/ .el-table__row .el-table__cell {
+      /deep/ .el-table .cell {
         padding: 3px 0;
       }
+
+      /deep/ .el-tabs__header {
+        min-height: 108px;
+
+        .el-tabs__nav-wrap {
+          height: 100%;
+        }
+      }
     }
   }
+
+  /deep/ .el-input-number {
+    width: 400px;
+    text-align: left;
+  }
+
+  .lv1-modal-header {
+    display: flex;
+    align-items: center;
+    gap: 0 30px;
+
+    span {
+      font-size: 24px;
+    }
+  }
+
+  .thumb {
+    max-height: 100px;
+    width: auto;
+  }
 }
 </style>

packages/pc/src/router/index.js

@@ -19,6 +19,11 @@ const routes = [
     name: 'info',
     component: () => import('../views/info/index.vue')
   },
+  {
+    path: '/topic',
+    name: 'topic',
+    component: () => import('../views/topic/index.vue')
+  },
   
 ]
 

packages/pc/src/utils/api.js

@@ -1,70 +1,74 @@
 import axios from './request'
 // 村庄保存点赞
 export const likeSaveApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addStar/${villageId}`,
-  })
+    return axios({
+        method: 'get',
+        url: `/web/village/addStar/${villageId}`,
+    })
 }
 // 村庄浏览量
 export const lookSaveApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addVisit/${villageId}`,
-  })
+    return axios({
+        method: 'get',
+        url: `/web/village/addVisit/${villageId}`,
+    })
 }
 // 获取浏览量和点赞量
 export const getCunNumApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/getDetail/${villageId}`,
-  })
+    return axios({
+        method: 'get',
+        url: `/web/village/getDetail/${villageId}`,
+    })
 }
 
 // 获取菜单树
 export const getTreeMenuApi = () => {
-  return axios({
-    method: 'get',
-    url: '/web/getTreeMenu',
-  })
-} 
+    return axios({
+        method: 'get',
+        url: '/web/getTreeMenu',
+    })
+}
 
 // 获取内容列表
 export const getInfoApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/content/list/${villageId}`,
-  })
+    return axios({
+        method: 'get',
+        url: `/web/content/list/${villageId}`,
+    })
 }
 
 // 村庄-统计-5分钟更新一次
 export const getStatistics = (villageId) => {
-  return axios({
-    method: 'get',
-    url: '/web/village/getStatistics',
-  })
+    return axios({
+        method: 'get',
+        url: '/web/village/getStatistics',
+    })
 }
 
 // 村庄-保存分享量
 export const addShareApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addShare/${villageId}`,
-  })
+    return axios({
+        method: 'get',
+        url: `/web/village/addShare/${villageId}`,
+    })
 }
 
 // 获取访问量
 export const sceneGetList = () => {
-  return axios({
-    method: 'get',
-    url: '/web/scene/getList',
-  })
+    return axios({
+        method: 'get',
+        url: '/web/scene/getList',
+    })
 }
 
 // 添加访问量
 export const addVisit = (sceneCode) => {
-  return axios({
-    method: 'get',
-    url: `/web/scene/addVisit/${sceneCode}`,
-  })
-}
+    return axios({
+        method: 'get',
+        url: `/web/scene/addVisit/${sceneCode}`,
+    })
+}
+
+
+
+

packages/pc/src/views/Home.vue

@@ -3,7 +3,7 @@
   <div class="home">
     <div id="mars3dContainer" class="mars3d-container"></div>
     <div id="zoneControl" @click="showZoneSelect">
-      <img src="data/layer.png" />
+      <img src="data/layer.png"/>
     </div>
     <div id="zoneSelect">
       <div @click="cityZone">市</div>
@@ -28,9 +28,9 @@
       <div class="search" @keyup.enter="mySearch">
         <div class="searchBtn" @click="mySearch"></div>
         <el-input
-          placeholder="搜索村落名称..."
-          suffix-icon="el-icon-search"
-          v-model="name"
+            placeholder="搜索村落名称..."
+            suffix-icon="el-icon-search"
+            v-model="name"
         >
         </el-input>
       </div>
@@ -65,10 +65,10 @@
             <h3>详情统计</h3>
             <div class="detailsNum">
               <div
-                class="row"
-                @click.stop="toCun(item.id)"
-                v-for="item in numData"
-                :key="item.id"
+                  class="row"
+                  @click.stop="toCun(item.id)"
+                  v-for="item in numData"
+                  :key="item.id"
               >
                 <div class="rowLeft">{{ item.name }}</div>
                 <div class="rowRight">
@@ -89,9 +89,9 @@
               <div class="bs">{{ item.son.length }}</div>
             </div>
             <div
-              @click="cutInd(item.id)"
-              class="rr"
-              :class="
+                @click="cutInd(item.id)"
+                class="rr"
+                :class="
                 item.id === mapDataInd
                   ? 'el-icon-arrow-up'
                   : 'el-icon-arrow-down'
@@ -99,10 +99,10 @@
             ></div>
             <div class="sonBox">
               <div
-                @click.stop="toCun(val.id)"
-                :class="{ active: item.id === mapDataInd }"
-                v-for="val in item.son"
-                :key="val.id"
+                  @click.stop="toCun(val.id)"
+                  :class="{ active: item.id === mapDataInd }"
+                  v-for="val in item.son"
+                  :key="val.id"
               >
                 · {{ val.name }}
               </div>
@@ -110,18 +110,23 @@
           </div>
         </div>
       </div>
+
+      <div class="special_topic">
+        <img src="../assets/img/icon_q&a.png" alt="" @click="$router.push('/topic')"/>
+        <img src="../assets/img/icon_special_topic.png" alt=""/>
+      </div>
     </div>
     <!-- 加载中 -->
     <div
-      class="homeLoding"
-      :class="{ homeLodingNone: isLoding }"
-      v-loading="true"
+        class="homeLoading"
+        :class="{ homeLoadingNone: isLoding }"
+        v-loading="true"
     ></div>
   </div>
 </template>
 
 <script>
-import { getStatistics, lookSaveApi } from "../utils/api";
+import {getStatistics, lookSaveApi} from "../utils/api";
 // mapIns存储初始化的地图map实例，如果map实例放在vue的data中会导致帧率下降严重
 var mapIns = null;
 var zoneLayer = null;
@@ -155,41 +160,41 @@ export default {
           id: 1000,
           name: "蓬江区",
           son: [
-            { id: 3, name: "卢边村" },
-            { id: 2, name: "良溪村" },
+            {id: 3, name: "卢边村"},
+            {id: 2, name: "良溪村"},
           ],
         },
         {
           id: 5000,
           name: "开平市",
           son: [
-            { id: 5, name: "仓前村" },
-            { id: 9, name: "马降龙村" },
-            { id: 8, name: "自力村" },
+            {id: 5, name: "仓前村"},
+            {id: 9, name: "马降龙村"},
+            {id: 8, name: "自力村"},
           ],
         },
         {
           id: 6000,
           name: "台山市",
           son: [
-            { id: 1, name: "东宁村" },
-            { id: 10, name: "浮石村" },
-            { id: 11, name: "浮月村" },
-            { id: 12, name: "横江村" },
+            {id: 1, name: "东宁村"},
+            {id: 10, name: "浮石村"},
+            {id: 11, name: "浮月村"},
+            {id: 12, name: "横江村"},
           ],
         },
         {
           id: 4000,
           name: "鹤山市",
           son: [
-            { id: 4, name: "田心村" },
-            { id: 6, name: "霄南村" },
+            {id: 4, name: "田心村"},
+            {id: 6, name: "霄南村"},
           ],
         },
         {
           id: 7000,
           name: "恩平市",
-          son: [{ id: 7, name: "歇马村" }],
+          son: [{id: 7, name: "歇马村"}],
         },
       ],
       // 地图实例
@@ -293,7 +298,7 @@ export default {
     // 初始化地图
     async initMap() {
       // 读取 config.json 配置文件
-      const json = await mars3d.Util.fetchJson({ url: "config/config.json" });
+      const json = await mars3d.Util.fetchJson({url: "config/config.json"});
       console.log("读取 config.json 配置文件完成", json); // 打印测试信息
       // 创建三维地球场景
       const mapOptions = json.map3d;
@@ -346,9 +351,9 @@ export default {
 
       const graphic = new mars3d.graphic.DivGraphic({
         position: new mars3d.LngLatPoint(
-          acInfo.position[0],
-          acInfo.position[1],
-          100
+            acInfo.position[0],
+            acInfo.position[1],
+            100
         ),
         style: {
           html: `
@@ -364,10 +369,10 @@ export default {
           verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,
           // distanceDisplayCondition: new mars3d.Cesium.DistanceDisplayCondition(0, 30000), // 按视距距离显示
           scaleByDistance: new mars3d.Cesium.NearFarScalar(
-            1000,
-            1.5,
-            12000,
-            0.8
+              1000,
+              1.5,
+              12000,
+              0.8
           ),
           clampToGround: true,
         },
@@ -395,7 +400,7 @@ export default {
     },
     mySearch() {
       console.log("点击了搜索", this.name);
-      mapIns.flyToPoint(this.getFlyPos(this.name), { radius: 3000 });
+      mapIns.flyToPoint(this.getFlyPos(this.name), {radius: 3000});
     },
     // 跳转
     async toCun(id) {
@@ -530,9 +535,9 @@ export default {
   async created() {
     // 移动端和pc端的切换
     if (
-      window.navigator.userAgent.match(
-        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-      )
+        window.navigator.userAgent.match(
+            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+        )
     ) {
       // 移动端
       if (window.location.href.includes("web")) {
@@ -552,43 +557,50 @@ export default {
   mounted() {
     // 初始化地图实例
     this.initMap().then(
-      (map) => {
-        // 加载模型
-        // this.loadModel();
-        // 村名lable图层
-        let graphicLayer = new mars3d.layer.GraphicLayer();
-        // 行政边界图层
-        zoneLayer = new mars3d.layer.GeoJsonLayer();
-        // 绑定标注的点击事件
-        graphicLayer.on("click", (e) => {
-          const attr = e.graphic.attr || {};
-          // console.log("name", attr.name);
-          // console.log("id", attr.id);
-          this.toCun(attr.id);
-        });
-        map.addLayer(graphicLayer);
-
-        // 添加村名label
-
-        this.villagePos.forEach((v) => {
-          this.drawVillageLabel(graphicLayer, v.id);
-        });
-
-        // 加载区边界线
-        this.loadZoneLayer(mapIns, "jmq", "#00ffff", 8);
-      },
-      (error) => {
-        console.log("地图初始化失败", error);
-      }
+        (map) => {
+          // 加载模型
+          // this.loadModel();
+          // 村名lable图层
+          let graphicLayer = new mars3d.layer.GraphicLayer();
+          // 行政边界图层
+          zoneLayer = new mars3d.layer.GeoJsonLayer();
+          // 绑定标注的点击事件
+          graphicLayer.on("click", (e) => {
+            const attr = e.graphic.attr || {};
+            // console.log("name", attr.name);
+            // console.log("id", attr.id);
+            this.toCun(attr.id);
+          });
+          map.addLayer(graphicLayer);
+
+          // 添加村名label
+
+          this.villagePos.forEach((v) => {
+            this.drawVillageLabel(graphicLayer, v.id);
+          });
+
+          // 加载区边界线
+          this.loadZoneLayer(mapIns, "jmq", "#00ffff", 8);
+        },
+        (error) => {
+          console.log("地图初始化失败", error);
+        }
     );
   },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() {
+  }, //生命周期 - 创建之前
+  beforeMount() {
+  }, //生命周期 - 挂载之前
+  beforeUpdate() {
+  }, //生命周期 - 更新之前
+  updated() {
+  }, //生命周期 - 更新之后
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前
+  destroyed() {
+  }, //生命周期 - 销毁完成
+  activated() {
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="less" scoped>
@@ -599,7 +611,7 @@ export default {
   background-size: cover;
   overflow: hidden;
 
-  .homeLoding {
+  .homeLoading {
     position: absolute;
     top: 0;
     left: 0;
@@ -608,14 +620,17 @@ export default {
     z-index: 9999;
     background-color: #c2b697;
     transition: all 0.5s;
-    /deep/.el-loading-mask {
+
+    /deep/ .el-loading-mask {
       background-color: transparent;
     }
-    /deep/.path {
+
+    /deep/ .path {
       stroke: #412c0c !important;
     }
   }
-  .homeLodingNone {
+
+  .homeLoadingNone {
     opacity: 0;
     pointer-events: none;
   }
@@ -720,37 +735,38 @@ export default {
       }
 
       /*修改提示文字的颜色*/
-      /deep/input::-webkit-input-placeholder {
+
+      /deep/ input::-webkit-input-placeholder {
         /* WebKit browsers */
         color: #c9a774;
       }
 
-      /deep/input:-moz-placeholder {
+      /deep/ input:-moz-placeholder {
         /* Mozilla Firefox 4 to 18 */
         color: #c9a774;
       }
 
-      /deep/input::-moz-placeholder {
+      /deep/ input::-moz-placeholder {
         /* Mozilla Firefox 19+ */
         color: #c9a774;
       }
 
-      /deep/input:-ms-input-placeholder {
+      /deep/ input:-ms-input-placeholder {
         /* Internet Explorer 10+ */
         color: #c9a774;
       }
 
-      /deep/.el-input__inner {
+      /deep/ .el-input__inner {
         border-radius: 20px;
         background-color: #efeee8;
         color: #c9a774;
       }
 
-      /deep/.el-input__inner:focus {
+      /deep/ .el-input__inner:focus {
         border-color: #c9a774;
       }
 
-      /deep/.el-input__suffix {
+      /deep/ .el-input__suffix {
         color: #c9a774;
         font-size: 20px;
       }
@@ -947,6 +963,19 @@ export default {
         }
       }
     }
+
+    .special_topic {
+      position: absolute;
+      bottom: 40px;
+      left: -120px;
+      display: flex;
+      flex-direction: column;
+
+      img {
+        cursor: pointer;
+      }
+
+    }
   }
 
   .meanShow {
@@ -962,7 +991,7 @@ export default {
   left: 0px;
 }
 
-/deep/.lableContent {
+/deep/ .lableContent {
   width: 170px;
   height: 40px;
   background: url(../assets/img/lable.png) no-repeat;
@@ -974,25 +1003,25 @@ export default {
   cursor: pointer;
 }
 
-/deep/.lableContent:hover {
+/deep/ .lableContent:hover {
   background: url(../assets/img/lableA.png) no-repeat;
 }
 
-/deep/.lableContent:hover + .lableLine {
+/deep/ .lableContent:hover + .lableLine {
   border: 1px solid rgb(192, 48, 55);
 }
 
-/deep/.lableContent:hover .lableIconArea img {
+/deep/ .lableContent:hover .lableIconArea img {
   content: url(../assets/img/lableIconA.png);
 }
 
-/deep/.lableIconArea {
+/deep/ .lableIconArea {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/deep/.lableLine {
+/deep/ .lableLine {
   width: 0px;
   height: 80px;
   margin-top: -10px;

packages/pc/src/views/stair/index.vue

@@ -87,8 +87,8 @@ export default {
     //这里存放数据
     return {
       // 测试url
-      // textUrl: "http://192.168.20.48:8081", //本地
-      textUrl: "http://project.4dage.com:8016/SWKK", //打包
+      textUrl: "http://project.4dage.com:8016/SWKK", //本地
+      // textUrl: "/SWKK", //打包
       lookNum: 0,
       btnData: [
         { id: 1, name: "简介", inco: "introduction" },

packages/pc/src/views/topic/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="topic">
+    xxx
+    xxx
+
+
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {}
+  },
+
+}
+</script>
+
+<style scoped lang="less">
+.topic {
+  width: 100%;
+  height: 100%;
+  background: rgba(33, 27, 18, 0.5);
+}
+</style>