bug 标准化活动

src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

@@ -1,174 +1,96 @@
 <template>
-  <a-card :bordered="false" class="page-box">
-    <div class="table-page-search-wrapper">
+  <internal-detail-page custom-icon
+                        :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-select
-                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 :label="$t('businessSupport.standardizationActivity.nodeName')">
+              <a-input v-model="nodeName" @input="handleSearch" />
             </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: {
-        span: 6
-      },
-      wrapperCol: {
-        span: 14
-      },
-      queryParam: {},
+      nodeName: '',
       nodeNameList: [], // 查询的下拉数据
       defaultNodeNameList: [], // 查询的下拉数据
-      data: {
-        name: '五十个字啊五十个字啊五十个字啊五十个字啊五十个字啊',
-        children: [
-          {
-            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'
-              }
-            ]
-          }
-        ]
-      }
+      data: {},
+      currentNodeName: '',
+      showSearch: false,
+      loading: false
     }
   },
   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 {
-  height: calc(100vh - 135px);
-
-  /deep/ .ant-card-body {
-    height: 100%;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
+@import '~@assets/less/common.less';
 
 #mountNode {
-  width: 100%;
-  height: calc(100% - 56px);
+  width: calc(100% - 48px);
+  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>