bug 标准化活动

src/App.vue

@@ -17,7 +17,6 @@ import '@/utils/warterMark'
 // 引入自定义icon
 import '@/assets/icon/iconfont.less'
 import Vue from 'vue'
-import { updatePageHeight } from './components/tools/setting.js'
 
 moment.locale('zh-cn')
 
@@ -102,8 +101,6 @@ export default {
       window.open(href, '_blank')
     }
 
-    updatePageHeight()
-
   }
 }
 </script>

src/api/businessSupport.js

@@ -9,9 +9,15 @@ const setOrCancelTop = (params) => getAction('/laws/library/lawsProblemLibrary/i
 // 回答库详情-删除回答
 const deleteAnswer = (params) => postAction('/laws/library/lawsProblemLibrary/deleteAnswer', params)
 
+// 标准化活动-树形图
+const queryTreeList = (params) => getAction('/laws/standardization/lawsStandardization/queryTreeList', params)
+
 export {
   getQuizById,
   answerQuiz,
   setOrCancelTop,
-  deleteAnswer
+  deleteAnswer,
+
+  // 标准化活动
+  queryTreeList
 }

src/components/MindMap.vue

@@ -91,22 +91,24 @@ export default {
     return {
       data: {},
       graph: null,
-      loadEnd: false
+      loadEnd: false,
+      selectedNodeId: null,
+      lastQueryId: null
     }
   },
   watch: {
     mapData: {
       handler () {
+        console.log(this.mapData)
         this.data = JSON.parse(JSON.stringify(this.mapData))
-        if (this.loadEnd) {
+        if (this.loadEnd && this.data.id) {
           this.initMindMap()
         }
       },
-      deep: true,
+      deep: true
-      immediate: true
     },
     loadEnd () {
-      if (this.loadEnd) {
+      if (this.loadEnd && this.data.id) {
         this.initMindMap()
       }
     }
@@ -118,8 +120,13 @@ export default {
   },
   methods: {
     initMindMap () {
+      if (this.graph) {
+        this.graph.destroy()
+        this.graph = null
+      }
       G6.registerNode('tree-node', {
         drawShape: (cfg, group) => {
+          console.log('自定义节点了',cfg)
           const nodeColorIndex = cfg.depth % NODE_COLOR.length
           const nodeStyle = NODE_COLOR[nodeColorIndex]
           // 节点整体的内容
@@ -186,13 +193,13 @@ export default {
           nodeContainer.attr({
             x: 0,
             y: 0,
-            width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN,
+            width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN + this.expendCollapseIconR,
             height: this.nodeHeight
           })
           return nodeContainer
         },
         setState (name, value, item) {
-          console.log(item)
+          console.log(name, value)
           const group = item.getContainer()
           const nodeDom = group.get('children')
           const nodeBox = nodeDom[1]
@@ -272,13 +279,27 @@ export default {
     },
     handleSelectedNode (event) {
       const { item } = event
+      if (this.selectedNodeId && this.selectedNodeId !== item._cfg.id) {
+        this.graph.findById(this.selectedNodeId).getModel().selected = false
+        this.graph.setItemState(this.selectedNodeId, 'selected', false)
+      }
       item.getModel().selected = !item.getModel().selected
-      this.graph.setItemState(item, 'selected', item.getModel().selected)
+      this.graph.setItemState(item._cfg.id, 'selected', item.getModel().selected)
-      this.graph.refreshItem(item)
+      this.selectedNodeId = item._cfg.id
+      this.graph.refreshItem(item._cfg.id)
       this.graph.layout()
     },
+    /**
+     * 查询，定位高亮
+     * @param nodeId
+     */
     searchNode (nodeId) {
       const item = this.graph.findById(nodeId)
+      this.graph.setItemState(nodeId, 'selected', true)
+      if (this.lastQueryId) {
+        this.graph.setItemState(this.lastQueryId, 'selected', false)
+      }
+      this.lastQueryId = nodeId
       const matrix = item.get('group').getMatrix()
       const point = {
         x: matrix[6],

src/components/layouts/TabLayout.vue

@@ -21,7 +21,7 @@
       <!--</a-tabs>-->
 
       <breadcrumb v-if="!isEmbedded"/>
-      <div style="margin: 12px 12px 0;">
+      <div :style="!isEmbedded ? 'margin: 12px 12px 0;' : ''">
         <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
         <keep-alive v-if="multipage">
           <router-view v-if="reloadFlag" />

src/components/tools/setting.js

@@ -104,7 +104,7 @@ const updatePageHeight = () => {
   const obj = {
     'primary-color': '#D52C26',
     'user-info-height': isEmbedded ? '0px' : '59px', // 用户信息的高度
-    'breadcrumb-height': isEmbedded ? '12px' : '45px' // 面包屑的高度
+    'breadcrumb-height': isEmbedded ? '0px' : '45px' // 面包屑的高度
   }
   // 计算表格竖向滚动条使用
   const storeObj = Object.assign(obj, {

src/permission.js

@@ -7,6 +7,7 @@ import { ACCESS_TOKEN, OAUTH2_LOGIN_PAGE_PATH, UI_CACHE_DB_DICT_DATA, USER_INFO,
 import { generateIndexRouter, isOAuth2AppEnv, findFirstRoute, welcome } from '@/utils/util'
 import { getSSOUserInfo } from './api/api'
 import { isCanLookDetail } from './api/enterpriseStandardLibraryApi'
+import { updatePageHeight } from './components/tools/setting'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -33,6 +34,8 @@ router.beforeEach(async (to, from, next) => {
   if (!isEmbedded && window.frames.length !== parent.frames.length) {
     store.commit('SET_IS_EMBEDDED', true)
   }
+  // 更新页面高度
+  updatePageHeight()
   NProgress.start() // start progress bar
   if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */

src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

@@ -1,174 +1,96 @@
 <template>
-  <a-card :bordered="false" class="page-box">
+  <internal-detail-page custom-icon
-    <div class="table-page-search-wrapper">
+                        :title="$t('businessSupport.standardizationActivity.currentNode')"
+                        :sub-title="currentNodeName"
+                        sub-title-tooltip
+                        :loading="loading"
+                        :content-padding="0">
+    <template v-slot:customIcon>
+      <i class="iconfont icon-nav_apartment page-icon" />
+    </template>
+    <div class="table-page-search-wrapper search-box" :class="{'search-box-shadow': showSearch}">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
+          <a-col :md="16" :sm="8">
             <!--            节点名称-->
-            <a-form-item :label="$t('businessSupport.standardizationActivity.nodeName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-form-item :label="$t('businessSupport.standardizationActivity.nodeName')">
-              <a-select
+              <a-input v-model="nodeName" @input="handleSearch" />
-                show-search
-                v-model="queryParam.nodeName"
-                :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.nodeName')"
-                style="width: 100%"
-                :default-active-first-option="false"
-                :show-arrow="false"
-                :filter-option="false"
-                :not-found-content="null"
-                @search="handleSearch"
-                @change="handleChange">
-                <a-select-option v-for="d in nodeNameList" :key="d.id">
-                  {{ d.name }}
-                </a-select-option>
-              </a-select>
             </a-form-item>
           </a-col>
-          <a-col :md="3" :sm="8">
+          <a-col :md="8" :sm="8">
             <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
               <a-button class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
-              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{
+                  $t('query')
+                }}
+              </a-button>
             </div>
           </a-col>
         </a-row>
       </a-form>
+
+      <template>
+        <!--点击查询后展示的列表-->
+        <div class="search-node-list" :class="{'hide-search': !showSearch}">
+          <div class="search-node-item" v-for="node in nodeNameList" @click="handleSearchNode(node)">
+            <span v-if="hasSearchVal(node.name)">{{
+                beforeSearchVal(node.name)
+              }}<span class="highlight-text">{{ searchValInText(node.name) }}</span>{{ afterSearchVal(node.name) }}</span>
+            <span v-else>{{ node.name }}</span>
+          </div>
+        </div>
+        <!--遮罩-->
+        <div class="search-overlay" v-show="showSearch" @click="hideSearch"></div>
+      </template>
     </div>
-    <mind-map ref="mindMap" dom-id="mountNode" :map-data="data" map-data-key-field="name" />
+    <!--思维导图部分-->
-  </a-card>
+    <mind-map ref="mindMap" dom-id="mountNode" :map-data="data" map-data-key-field="name"></mind-map>
+  </internal-detail-page>
 </template>
 
 <script>
-import '@assets/less/common.less'
 import MindMap from '../../../components/MindMap.vue'
+import InternalDetailPage from '../../../components/InternalDetailPage'
+import { queryTreeList } from '../../../api/businessSupport'
 
 export default {
   name: 'StandardizationActivityPage',
-  components: { MindMap },
+  components: { InternalDetailPage, MindMap },
   data () {
     return {
-      labelCol: {
+      nodeName: '',
-        span: 6
-      },
-      wrapperCol: {
-        span: 14
-      },
-      queryParam: {},
       nodeNameList: [], // 查询的下拉数据
       defaultNodeNameList: [], // 查询的下拉数据
-      data: {
+      data: {},
-        name: '五十个字啊五十个字啊五十个字啊五十个字啊五十个字啊',
+      currentNodeName: '',
-        children: [
+      showSearch: false,
-          {
+      loading: false
-            name: 'Classification',
-            children: [
-              {
-                name: 'Logistic regression'
-              },
-              {
-                name: 'Linear discriminant analysis'
-              },
-              {
-                name: 'Rules'
-              },
-              {
-                name: 'Decision trees'
-              },
-              {
-                name: 'Naive Bayes'
-              },
-              {
-                name: 'K nearest neighbor'
-              },
-              {
-                name: 'Probabilistic neural network'
-              },
-              {
-                name: 'Support vector machine'
-              }
-            ]
-          },
-          {
-            name: 'Consensus',
-            children: [
-              {
-                name: 'Models diversity',
-                children: [
-                  {
-                    name: 'Different initializations'
-                  },
-                  {
-                    name: 'Different parameter choices'
-                  },
-                  {
-                    name: 'Different architectures'
-                  },
-                  {
-                    name: 'Different modeling methods'
-                  },
-                  {
-                    name: 'Different training sets'
-                  },
-                  {
-                    name: 'Different feature sets'
-                  }
-                ]
-              },
-              {
-                name: 'Methods',
-                children: [
-                  {
-                    name: 'Classifier selection'
-                  },
-                  {
-                    name: 'Classifier fusion'
-                  }
-                ]
-              },
-              {
-                name: 'Common',
-                children: [
-                  {
-                    name: 'Bagging'
-                  },
-                  {
-                    name: 'Boosting'
-                  },
-                  {
-                    name: 'AdaBoost'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            name: 'Regression',
-            children: [
-              {
-                name: 'Multiple linear regression'
-              },
-              {
-                name: 'Partial least squares'
-              },
-              {
-                name: 'Multi-layer feedforward neural network'
-              },
-              {
-                name: 'General regression neural network'
-              },
-              {
-                name: 'Support vector regression'
-              }
-            ]
-          }
-        ]
-      }
     }
   },
   created () {
-    this.treeToArr([this.data], null, this.defaultNodeNameList)
+    this.loadData()
   },
   methods: {
-    handleSearch (value) {
+    /**
-      this.nodeNameList = this.defaultNodeNameList.filter(tt => tt.name.indexOf(value) !== -1)
+     * 获取数据
+     */
+    loadData () {
+      this.loading = true
+      queryTreeList().then(res => {
+        if (res.success) {
+          this.data = Object.assign({}, res.result)
+          this.treeToArr([this.data], null, this.defaultNodeNameList)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleSearch () {
+      if (!this.nodeName) {
+        this.nodeNameList = []
+        return
+      }
+      this.nodeNameList = this.defaultNodeNameList.filter(tt => tt.name.toLowerCase().indexOf(this.nodeName.toLowerCase()) !== -1)
     },
     handleChange () {
 
@@ -177,7 +99,10 @@ export default {
 
     },
     searchQuery () {
-      this.$refs.mindMap.searchNode(this.queryParam.nodeName)
+      this.showSearch = true
+    },
+    hideSearch () {
+      this.showSearch = false
     },
     treeToArr (data, pid = null, res) {
       data.forEach(item => {
@@ -187,25 +112,147 @@ export default {
         }
       })
       return res
+    },
+    /**
+     * 是否包含搜索的文本
+     * @param text
+     * @returns {boolean}
+     */
+    hasSearchVal (text) {
+      const filterText = text || ''
+      const searchVal = this.nodeName || ''
+      return text && filterText.toLowerCase().indexOf(searchVal.toLowerCase()) !== -1
+    },
+    /**
+     * 查询关键字之前的
+     * @param text
+     * @returns {string}
+     */
+    beforeSearchVal (text) {
+      const filterText = text || ''
+      const searchVal = this.nodeName || ''
+      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
+      return filterText.substring(0, index)
+    },
+    /**
+     * 为了保留大小写，需要吧查询的内容也特殊处理一下
+     * @param text
+     * @returns {string}
+     */
+    searchValInText (text) {
+      const filterText = text || ''
+      const searchVal = this.nodeName || ''
+      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
+      return filterText.substring(index, index + searchVal.length)
+    },
+    /**
+     * 输入内容后面的部分
+     * @param text
+     * @returns {string}
+     */
+    afterSearchVal (text) {
+      const filterText = text || ''
+      const searchVal = this.nodeName || ''
+      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
+      return filterText.substring(index + searchVal.length)
+    },
+    handleSearchNode (node) {
+      this.$refs.mindMap.searchNode(node.id)
     }
   }
 }
 </script>
 
 <style scoped lang="less">
-.page-box {
+@import '~@assets/less/common.less';
-  height: calc(100vh - 135px);
-
-  /deep/ .ant-card-body {
-    height: 100%;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
 
 #mountNode {
-  width: 100%;
+  width: calc(100% - 48px);
-  height: calc(100% - 56px);
+  height: calc(100% - 56px - 48px);
+  margin: 0 24px 24px 24px;
 }
 
+.search-box {
+  width: 564px;
+  padding: 24px 24px 0;
+  box-sizing: border-box;
+}
+
+.search-box-shadow {
+  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 0 3.2px;
+}
+
+.page-icon {
+  font-size: 21px;
+  color: @primary-color;
+  margin-right: 12px;
+}
+
+/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
+  min-width: unset;
+}
+
+/deep/ .title-current-node {
+  display: inline-block;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+  color: #4E5969;
+  margin-left: 12px;
+}
+
+/deep/ .page-title-sub-title {
+  max-width: 15rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.page-box {
+  position: relative;
+}
+
+.search-node-list {
+  position: absolute;
+  width: 564px;
+  transition: width .2s linear;
+  top: 136px;
+  left: 0;
+  bottom: 0;
+  background-color: #FFFFFF;
+  box-shadow: 2.4px 1px 3.2px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  border-top: 1px solid #E5E6EB;
+  padding: 8px;
+  overflow: auto;
+}
+
+.hide-search {
+  width: 0;
+  display: none;
+}
+
+.search-node-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+  color: #1D2129;
+}
+
+.search-node-item:hover {
+  background: rgba(29, 33, 41, 0.06);
+}
+
+.highlight-text {
+  color: @primary-color;
+}
+
+.search-overlay {
+  position: absolute;
+  top: 0;
+  left: 564px;
+  right: 0;
+  bottom: 0;
+}
 </style>