From 29b20ce55b3147cc7f7044ef2a2813b9299bedc9 Mon Sep 17 00:00:00 2001
From: wuhongjian <wuhongjian@hisense.com>
Date: Thu, 14 Jul 2022 17:02:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=B0=E5=9B=BE=E5=88=86?=
 =?UTF-8?q?=E5=8C=BA=E6=91=84=E5=83=8F=E5=A4=B4=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/supermap/config/coordinateConfig.js |  22 +-
 .../components/abilityDocTree.vue             | 168 ++++----
 front/src/views/instructionManual/index.vue   | 363 ++++++++++--------
 3 files changed, 300 insertions(+), 253 deletions(-)

diff --git a/front/src/supermap/config/coordinateConfig.js b/front/src/supermap/config/coordinateConfig.js
index 0538b55b..dcde84a1 100644
--- a/front/src/supermap/config/coordinateConfig.js
+++ b/front/src/supermap/config/coordinateConfig.js
@@ -2,14 +2,14 @@
  * @Author: hisense.wuhongjian
  * @Date: 2021-10-13 09:30:54
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2021-10-13 15:04:58
+ * @LastEditTime: 2022-07-14 16:28:27
  * @Description: 点位-位置匹配
  */
 const DIVISION = {
   qingdao: [
     {
       districtName: '城阳区',
-      name: '城阳区',
+      name: '城阳区(约1.5万)',
       districtCOde: '',
       latLng: {
         lat: 36.31,
@@ -18,7 +18,7 @@ const DIVISION = {
     },
     {
       districtName: '李沧区',
-      name: '李沧区',
+      name: '李沧区(约0.6万)',
       districtCOde: '',
       latLng: {
         lat: 36.17,
@@ -27,7 +27,7 @@ const DIVISION = {
     },
     {
       districtName: '市北区',
-      name: '市北区',
+      name: '市北区(约0.7万)',
       districtCOde: '',
       latLng: {
         lat: 36.1,
@@ -36,7 +36,7 @@ const DIVISION = {
     },
     {
       districtName: '市南区',
-      name: '市南区',
+      name: '市南区(约0.4万)',
       districtCOde: '',
       latLng: {
         lat: 36.06,
@@ -45,7 +45,7 @@ const DIVISION = {
     },
     {
       districtName: '崂山区',
-      name: '崂山区',
+      name: '崂山区(约2.0万)',
       districtCOde: '',
       latLng: {
         lat: 36.11,
@@ -54,7 +54,7 @@ const DIVISION = {
     },
     {
       districtName: '即墨区',
-      name: '即墨区',
+      name: '即墨区(约1.4万)',
       districtCOde: '',
       latLng: {
         lat: 36.39,
@@ -63,7 +63,7 @@ const DIVISION = {
     },
     {
       districtName: '胶州市',
-      name: '胶州市',
+      name: '胶州市(约1.5万)',
       districtCOde: '',
       latLng: {
         lat: 36.27,
@@ -72,7 +72,7 @@ const DIVISION = {
     },
     {
       districtName: '平度市',
-      name: '平度市',
+      name: '平度市(约1.6万)',
       districtCOde: '',
       latLng: {
         lat: 36.78,
@@ -81,7 +81,7 @@ const DIVISION = {
     },
     {
       districtName: '莱西市',
-      name: '莱西市',
+      name: '莱西市(约1.0万)',
       districtCOde: '',
       latLng: {
         lat: 36.89,
@@ -90,7 +90,7 @@ const DIVISION = {
     },
     {
       districtName: '西海岸新区',
-      name: '西海岸新区',
+      name: '西海岸新区(约4.1万)',
       districtCOde: '',
       latLng: {
         lat: 35.99,
diff --git a/front/src/views/instructionManual/components/abilityDocTree.vue b/front/src/views/instructionManual/components/abilityDocTree.vue
index 9bd66da0..b1874596 100644
--- a/front/src/views/instructionManual/components/abilityDocTree.vue
+++ b/front/src/views/instructionManual/components/abilityDocTree.vue
@@ -1,98 +1,120 @@
 <template>
-    <div class="list-box">
-        <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
-            <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
-                <div :class="[newClickData.title === item.title ? 'select' : '', level === 1 ? 'parent' : '', judgeLeaf(item) ? 'leaf' : '']"
-                    class="list-text">
-                    {{ item.title }}
-                    <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
-                    <UpOutlined v-show="item.show && !judgeLeaf(item)" />
-                </div>
-            </a-tooltip>
-            <div style="margin-left:10px" v-if="!judgeLeaf(item) && item.show">
-                <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
-                    :level="newLevel + 1">
-                </abilityDocTree>
-            </div>
+  <div class="list-box">
+    <div
+      class="list-item"
+      v-for="(item, i) in newDataList"
+      :key="i"
+      @click.stop="showChildren(item)"
+    >
+      <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
+        <div
+          :class="[
+            newClickData.title === item.title ? 'select' : '',
+            level === 1 ? 'parent' : '',
+            judgeLeaf(item) ? 'leaf' : '',
+          ]"
+          class="list-text"
+        >
+          {{ item.title }}
+          <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
+          <UpOutlined v-show="item.show && !judgeLeaf(item)" />
         </div>
+      </a-tooltip>
+      <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
+        <abilityDocTree
+          :dataList="item.children"
+          @tree-click="handleTreeItem"
+          :clickData="newClickData"
+          :level="newLevel + 1"
+        ></abilityDocTree>
+      </div>
     </div>
+  </div>
 </template>
 <script setup>
-import { defineComponent, onMounted, ref, watch, defineProps, nextTick } from 'vue';
-import { getDevelopDocTree } from '@/api/home'
-import { message } from 'ant-design-vue'
-import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import {
+    defineComponent,
+    onMounted,
+    ref,
+    watch,
+    defineProps,
+    nextTick,
+  } from 'vue'
+  import { getDevelopDocTree } from '@/api/home'
+  import { message } from 'ant-design-vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
 
-const props = defineProps({
+  const props = defineProps({
     dataList: {
-        type: Array,
-        default: () => []
+      type: Array,
+      default: () => [],
     },
     level: {
-        type: Number,
-        default: 1
+      type: Number,
+      default: 1,
     },
     clickData: {
-        type: Object,
-        default: () => { title: '' }
+      type: Object,
+      default: () => {
+        title: ''
+      },
     },
-})
+  })
 
-// 数组
-const newDataList = ref(props.dataList)
-// 级别
-const newLevel = ref(props.level)
+  // 数组
+  const newDataList = ref(props.dataList)
+  // 级别
+  const newLevel = ref(props.level)
 
-const newClickData = ref(props.clickData)
+  const newClickData = ref(props.clickData)
 
-// 判断是不是叶子节点
-const judgeLeaf = (item) => {
+  // 判断是不是叶子节点
+  const judgeLeaf = (item) => {
     if (item.children && item.children.length > 0) {
-        return false
+      return false
     } else {
-        return true
+      return true
     }
-}
+  }
 
-const showChildren = (item) => {
+  const showChildren = (item) => {
     if (!(item.children && item.children.length > 0)) {
-        if (newClickData.value.title !== '') {
-            handleTreeItem(item)
-        } else {
-            handleTreeItem({ title: '' })
-        }
+      if (newClickData.value.title !== '') {
+        handleTreeItem(item)
+      } else {
+        handleTreeItem({ title: '' })
+      }
     }
     if (item.children && item.children.length > 0) {
-        item.show = !item.show;
+      item.show = !item.show
     }
-}
+  }
 
-watch(
+  watch(
     () => props.dataList,
     (val) => {
-        if (val) {
-            newDataList.value = val
-        }
+      if (val) {
+        newDataList.value = val
+      }
     }
-)
+  )
 
-watch(
+  watch(
     () => props.clickData,
     (val) => {
-        if (val) {
-            newClickData.value = val
-        }
+      if (val) {
+        newClickData.value = val
+      }
     }
-)
-
-const emit = defineEmits(['treeClick'])
-const handleTreeItem = (item) => {
-    emit('tree-click', item);
-}
+  )
 
+  const emit = defineEmits(['treeClick'])
+  const handleTreeItem = (item) => {
+    emit('tree-click', item)
+  }
 </script>
 <style lang="less" scoped>
-.list-text {
+  .list-text {
     font-size: 16px;
     color: #333;
     padding: 10px 0;
@@ -106,32 +128,32 @@ const handleTreeItem = (item) => {
     text-overflow: ellipsis;
 
     &:hover {
-        color: #0058e1;
-        cursor: pointer;
+      color: #0058e1;
+      cursor: pointer;
     }
-}
+  }
 
-.parent {
+  .parent {
     margin-bottom: 10px;
     background: rgba(0, 135, 225, 0.1);
     color: #333;
 
     &:hover {
-        color: #fff;
-        background: #0058e1;
-        cursor: pointer;
+      color: #fff;
+      background: #0058e1;
+      cursor: pointer;
     }
-}
+  }
 
-.leaf {
+  .leaf {
     font-size: 14px;
     color: #555;
     cursor: pointer;
-}
+  }
 
-.select {
+  .select {
     color: #0058e1;
     font-weight: 600;
     cursor: pointer;
-}
+  }
 </style>
diff --git a/front/src/views/instructionManual/index.vue b/front/src/views/instructionManual/index.vue
index 51c099b2..4135a0a0 100644
--- a/front/src/views/instructionManual/index.vue
+++ b/front/src/views/instructionManual/index.vue
@@ -4,214 +4,239 @@
     <div id="container" class="content-menu">
       <div class="rela">
         <div class="left">
-          <div class="first-title-text" v-for="(data, i) in titleList" :key="i" @click="changeName(data)"
-            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }">
+          <div
+            class="first-title-text"
+            v-for="(data, i) in titleList"
+            :key="i"
+            @click="changeName(data)"
+            :style="{ color: data.name === titleData.name ? '#0058e1' : '' }"
+          >
             <div class="img" :class="data.className"></div>
             {{ data.name }}
           </div>
-          <abilityDocTree :dataList="treeArray" @treeClick="treeClick" :clickData="clickData"></abilityDocTree>
+          <abilityDocTree
+            :dataList="treeArray"
+            @treeClick="treeClick"
+            :clickData="clickData"
+          ></abilityDocTree>
         </div>
         <div class="right">
-          <div class="new-menu-box" style="height:100%" v-if="titleData.name === '新手指引'">
+          <div
+            class="new-menu-box"
+            style="height: 100%"
+            v-if="titleData.name === '新手指引'"
+          >
             <!-- 新手指引 -->
             <a-empty description="新手指引" />
           </div>
-          <div v-else style="height:100%">
-            <iframe name="iframeName" width="1000" height="100%" id="iframeId" :frameborder="0"
-              :src="clickData.doc"></iframe>
+          <div v-else style="height: 100%">
+            <iframe
+              name="iframeName"
+              width="1000"
+              height="100%"
+              id="iframeId"
+              :frameborder="0"
+              :src="clickData.doc"
+            ></iframe>
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
 <script setup>
-import HomeHeader from '@/views/home/components/header'
-import abilityDocTree from './components/abilityDocTree'
-import { ref, reactive, onMounted, nextTick, watch } from 'vue'
-import { Empty, message } from 'ant-design-vue'
-import { getDevelopDocTree } from '@/api/home'
-import flatten from '@turf/flatten'
+  import HomeHeader from '@/views/home/components/header'
+  import abilityDocTree from './components/abilityDocTree'
+  import { ref, reactive, onMounted, nextTick, watch } from 'vue'
+  import { Empty, message } from 'ant-design-vue'
+  import { getDevelopDocTree } from '@/api/home'
+  import flatten from '@turf/flatten'
 
-const titleList = ref([
-  {
-    name: '新手指引',
-    className: 'newGuide'
-  },
-  {
-    name: '技术文档',
-    className: 'doc'
+  const titleList = ref([
+    {
+      name: '新手指引',
+      className: 'newGuide',
+    },
+    {
+      name: '技术文档',
+      className: 'doc',
+    },
+  ])
+  const titleData = ref(titleList.value[0])
+  const clickData = ref({})
+  const treeArray = ref([])
+  const treeArrayCopy = ref([])
+  let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+
+  const treeClick = (item) => {
+    clickData.value = item
+    console.log('clickData------------>', item)
+    titleData.value = titleList.value[1]
   }
-])
-const titleData = ref(titleList.value[0])
-const clickData = ref({})
-const treeArray = ref([])
-const treeArrayCopy = ref([])
-let typeList = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'];
 
-const treeClick = (item) => {
-  clickData.value = item;
-  console.log('clickData------------>', item);
-  titleData.value = titleList.value[1]
-}
-
-const getTreeData = () => {
-  getDevelopDocTree({}).then((res) => {
-    console.log('res------文档树------>', res);
-    if (res.data.code !== 0) {
-      return message.error(res.data.msg)
-    }
-    treeArray.value = res.data.data || [];
-    treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
-  }).catch((err) => {
-    message.error(err)
-  });
-}
-
-const changeName = (item) => {
-  titleData.value = item;
-  if (item.name == '新手指引') {
-    clickData.value = {}
-  }
-  if (item.name == '技术文档') {
-    if (!clickData.value.title) {
-      clickData.value = {}
-      treeArray.value = [];
-      treeArrayCopy.value.map((val, i) => {
-        let obj = Object.assign({}, val, {
-          title: val.title,
-          show: (i === 0 && val.children && val.children.length > 0) || typeList.includes(val.title) ? true : false,
-          children: []
-        })
-        formData(val.children, obj)
-        treeArray.value.push(obj)
+  const getTreeData = () => {
+    getDevelopDocTree({})
+      .then((res) => {
+        console.log('res------文档树------>', res)
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+        treeArray.value = res.data.data || []
+        treeArrayCopy.value = JSON.parse(JSON.stringify(treeArray.value))
       })
-      getFirstData(treeArrayCopy.value[0] || {})
+      .catch((err) => {
+        message.error(err)
+      })
+  }
+
+  const changeName = (item) => {
+    titleData.value = item
+    if (item.name == '新手指引') {
+      clickData.value = {}
+    }
+    if (item.name == '技术文档') {
+      if (!clickData.value.title) {
+        clickData.value = {}
+        treeArray.value = []
+        treeArrayCopy.value.map((val, i) => {
+          let obj = Object.assign({}, val, {
+            title: val.title,
+            show:
+              (i === 0 && val.children && val.children.length > 0) ||
+              typeList.includes(val.title)
+                ? true
+                : false,
+            children: [],
+          })
+          formData(val.children, obj)
+          treeArray.value.push(obj)
+        })
+        getFirstData(treeArrayCopy.value[0] || {})
+      }
     }
   }
-}
 
-
-const formData = (children = [], dataItem) => {
-  children.map((item, index) => {
-    let _obj = Object.assign({}, item, {
-      title: item.title,
-      show: (index === 0 && item.children && item.children.length > 0) || typeList.includes(item.title) ? true : false,
-      children: []
+  const formData = (children = [], dataItem) => {
+    children.map((item, index) => {
+      let _obj = Object.assign({}, item, {
+        title: item.title,
+        show:
+          (index === 0 && item.children && item.children.length > 0) ||
+          typeList.includes(item.title)
+            ? true
+            : false,
+        children: [],
+      })
+      if (item.children && item.children.length > 0) {
+        formData(item.children, _obj)
+      }
+      dataItem.children.push(_obj)
     })
-    if (item.children && item.children.length > 0) {
-      formData(item.children, _obj)
-    }
-    dataItem.children.push(_obj)
-  })
-}
-
-const getFirstData = (firstObj = {}) => {
-  if (firstObj && firstObj.children && firstObj.children.length > 0) {
-    getFirstData(firstObj.children[0])
-  } else {
-    clickData.value = firstObj
   }
-}
-
-onMounted(() => {
-  getTreeData()
-})
 
+  const getFirstData = (firstObj = {}) => {
+    if (firstObj && firstObj.children && firstObj.children.length > 0) {
+      getFirstData(firstObj.children[0])
+    } else {
+      clickData.value = firstObj
+    }
+  }
 
+  onMounted(() => {
+    getTreeData()
+  })
 </script>
 
 <style scoped lang="less">
-.menu-box {
-  // overflow: hidden;
-  height: 100%;
-}
-
-.first-title-text {
-  cursor: pointer;
-  font-size: 18px;
-  color: #333;
-  padding-bottom: 10px;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    color: #0058e1;
+  .menu-box {
+    // overflow: hidden;
+    height: 100%;
   }
-}
 
-.content-menu {
-  width: 1240px;
-  display: flex;
-  justify-content: flex-start;
-  margin: 0 auto;
-  margin-top: 74px;
-  box-sizing: border-box;
-  position: fixed;
-  left: 50%;
-  bottom: 0;
-  transform: translateX(-50%);
-  top: 0.6rem;
-  top: 0;
-}
+  .first-title-text {
+    cursor: pointer;
+    font-size: 18px;
+    color: #333;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
 
-.left {
-  width: 240px;
-  padding: 20px;
-  height: 600px;
-  margin-right: 20px;
-  background: rgba(244, 245, 248, 0.8);
-  overflow-y: scroll;
-  position: absolute;
-  top: 10px;
-  left: 0;
-}
+    &:hover {
+      color: #0058e1;
+    }
+  }
 
-.right {
-  width: 870px;
-  height: calc(100% - 20px);
+  .content-menu {
+    width: 1240px;
+    display: flex;
+    justify-content: flex-start;
+    margin: 0 auto;
+    margin-top: 74px;
+    box-sizing: border-box;
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    top: 0.6rem;
+    top: 0;
+  }
 
-  position: absolute;
-  top: 10px;
-  left: 260px;
-}
+  .left {
+    width: 240px;
+    padding: 20px;
+    height: 600px;
+    margin-right: 20px;
+    background: rgba(244, 245, 248, 0.8);
+    overflow-y: scroll;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 
-.sidebar {
-  right: 0 !important;
-}
+  .right {
+    width: 870px;
+    height: calc(100% - 20px);
 
-.content {
-  right: 16rem !important;
-  left: 0 !important;
-}
+    position: absolute;
+    top: 10px;
+    left: 260px;
+  }
 
-.img {
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-}
+  .sidebar {
+    right: 0 !important;
+  }
 
-.doc {
-  background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
-  background-size: 100%;
-}
+  .content {
+    right: 16rem !important;
+    left: 0 !important;
+  }
 
-.newGuide {
-  background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
-  background-size: 100%;
-}
+  .img {
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+  }
 
-.new-menu-box {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .doc {
+    background: url('~@/assets/capabilityCloud/doc.png') no-repeat;
+    background-size: 100%;
+  }
 
-.rela {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  .newGuide {
+    background: url('~@/assets/capabilityCloud/newGuide.png') no-repeat;
+    background-size: 100%;
+  }
+
+  .new-menu-box {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rela {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 </style>