体系搜索-树状图接口对接

src/pages/regulatoryRepository/systemSearch/components/DialogTable.vue

@@ -0,0 +1,296 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" custom-class="customDialog" width="1005px">
+    <div class="search-area">
+      <el-form :modal="searchForm" :inline="true" class="label-input-form">
+        <el-form-item label="标准编号" class="search-item">
+          <el-input v-model="searchForm.standNo"
+                    placeholder="根据标准编号查找"
+                    clearable
+                    :maxlength="100"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="标准名称" class="search-item">
+          <el-input v-model="searchForm.standName"
+                    placeholder="根据标准名称查找"
+                    clearable
+                    :maxlength="100"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="标准状态" class="search-item">
+          <el-select v-model="searchForm.standState"
+                     placeholder="请选择标准状态">
+
+            <el-option v-for="item in dict.commonState" :value="item.value" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据来源" class="search-item">
+          <el-select v-model="searchForm.dataSource"
+                     placeholder="请选择数据来源">
+            <el-option value="INLAND" label="国内标准库"></el-option>
+            <el-option value="FOREIGN" label="海外标准库"></el-option>
+            <el-option value="ENTERPRISE" label="企业标准库"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发布日期" class="search-item">
+          <el-date-picker
+              :value="releaseDate"
+              :picker-options="pickerOptions"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              value-format="yyyy-MM-dd"
+              align="right"
+              @input="releaseDateChange">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="实施日期" class="search-item">
+          <el-date-picker
+              :value="implementDate"
+              :picker-options="pickerOptions"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              value-format="yyyy-MM-dd"
+              align="right"
+              @input="implementDateChange">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="代替标准" class="search-item">
+          <el-input v-model="searchForm.replaceStandardNo"
+                    placeholder="根据代替标准查找"
+                    clearable
+                    :maxlength="100"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="编制单位" class="search-item">
+          <el-input v-model="searchForm.dept"
+                    placeholder="根据编制单位查找"
+                    clearable
+                    :maxlength="100"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="起草人" class="search-item">
+          <el-input v-model="searchForm.draftUserName"
+                    placeholder="根据起草人查找"
+                    clearable
+                    :maxlength="100"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="search-item btn-box">
+          <el-button
+                     type="primary"
+                     class="common-button-primary"
+                     size="mini"
+                      @click="onSearch"
+          >查询</el-button>
+          <el-button class="common-button-default"
+                     size="mini"
+                      @click="resetSearchForm"
+          >清空</el-button>
+          <el-button class="common-button-default export-button"
+                     @click="exportList"
+                     size="mini"
+                     title="不勾选时默认导出所有筛选项；勾选时仅导出勾选项"
+          ><i class="iconfont">&#xe6e9;</i>列表导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+        ref="selections"
+        :data="data"
+        tooltip-effect="dark"
+        style="width: 100%;overflow-y: auto;overflow-x: hidden;"
+        border
+        :height="300"
+        :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',fontWeight: 'bold', height: '48px'}"
+        @selection-change="selectionChange">
+      <el-table-column
+          type="selection"
+          width="55"
+          align="center">
+      </el-table-column>
+      <el-table-column
+          prop="standSystem"
+          label="体系结构">
+      </el-table-column>
+      <el-table-column
+          prop="standNo"
+          label="标准编号">
+      </el-table-column>
+      <el-table-column
+          prop="standName"
+          label="标准名称">
+      </el-table-column>
+      <el-table-column
+          prop="standState"
+          label="标准状态">
+      </el-table-column>
+      <el-table-column
+          prop="releaseDate"
+          label="发布日期">
+      </el-table-column>
+      <el-table-column
+          prop="implementDate"
+          label="实施日期">
+      </el-table-column>
+      <el-table-column
+          prop="replaceStandardNo"
+          label="代替标准">
+      </el-table-column>
+      <el-table-column
+          prop="dept"
+          label="编制单位">
+      </el-table-column>
+      <el-table-column
+          prop="draftUserName"
+          label="起草人">
+      </el-table-column>
+      <el-table-column
+          prop="dataSource"
+          label="数据来源">
+      </el-table-column>
+    </el-table>
+    <pagination
+        style="position: relative;"
+        :page="searchForm.page"
+        :total="searchForm.total"
+        @pageChange="pageChange"
+        @pageSizeChange="pageSizeChange"></pagination>
+    <div slot="footer" class="demo-drawer-footer">
+      <el-button class="common-button-default" round icon="el-icon-close">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: "DialogTable",
+  data () {
+    const pickerOptions =  {
+      shortcuts: [{
+        text: '最近一周',
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+          picker.$emit('pick', [start, end]);
+        }
+      }, {
+        text: '最近一个月',
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+          picker.$emit('pick', [start, end]);
+        }
+      }, {
+        text: '最近三个月',
+        onClick(picker) {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+          picker.$emit('pick', [start, end]);
+        }
+      }]
+    }
+    const searchForm = {
+      menuId: '',
+      standNo: '',
+      standName: '',
+      standState: '',
+      startReleaseDate: '',
+      endReleaseDate: '',
+      startImplementDate: '',
+      endImplementDate: '',
+      replaceStandardNo: '',
+      dept: '',
+      draftUserName: '',
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+    return {
+      visible: false,
+      title: '技术标准',
+      searchForm,
+      initSearchForm: JSON.parse(JSON.stringify(searchForm)),
+      pickerOptions,
+      releaseDate: ['', ''],
+      implementDate: ['', ''],
+      dict: {},
+      data: [],
+      selected: []
+    }
+  },
+  created() {
+    this.getDicTypeListCode()
+  },
+  methods: {
+    open (cfg) {
+      this.visible = true
+      this.title = `${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`
+      this.searchForm.menuId = cfg.id
+      this.initSearchForm.menuId = cfg.id
+    },
+    onSearch () {
+      console.log(this.searchForm)
+      this.$http._getData('lawss/sarMenuStandardLimit/standardSystemTree').then(res => {
+        if (res.ok) {
+
+        }
+      })
+    },
+    resetSearchForm () {
+      this.searchForm = JSON.parse(JSON.stringify(this.initSearchForm))
+      this.releaseDate = ['', '']
+      this.implementDate = ['', '']
+      this.onSearch()
+    },
+    releaseDateChange (event) {
+      this.releaseDate = event
+      const startTime = event[0]
+      const endTime = event[1]
+      this.searchForm.startReleaseDate = startTime
+      this.searchForm.endReleaseDate = endTime
+    },
+    implementDateChange (event) {
+      this.implementDate = event
+      const startTime = event[0]
+      const endTime = event[1]
+      this.searchForm.startImplementDate = startTime
+      this.searchForm.endImplementDate = endTime
+    },
+    pageChange (page) {
+      this.searchForm.page = page
+      this.onSearch()
+    },
+    pageSizeChange (pageSize) {
+      this.searchForm.pageSize = pageSize
+      this.onSearch()
+    },
+    selectionChange (row) {
+      this.selected = row
+      console.log(row)
+    },
+    exportList () {
+
+    },
+    getDicTypeListCode () {
+      this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
+        this.dict = { ...res.data }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .customDialog {
+  .el-dialog__body {
+    padding-top: 0 !important;
+  }
+}
+</style>

src/pages/regulatoryRepository/systemSearch/index.vue

@@ -1,14 +1,25 @@
 <template>
+  <div class="root">
     <div id="mountNode" ref="mountNode"></div>
+    <DialogTable ref="DialogTableRef"></DialogTable>
+    <loading :loading="loading">加载中...</loading>
+  </div>
 </template>
 
 <script>
 import G6 from '@antv/g6';
+
+import DialogTable from "./components/DialogTable";
+
 export default {
   name: "systemSearch",
+  components: {
+    DialogTable
+  },
   data(){
     return {
-      data: {}
+      data: {},
+      loading: false,
       // data: {
       //   // 点集
       //   nodes: [
@@ -41,15 +52,14 @@ export default {
   },
   methods: {
     async getData () {
-      this.$http.get('wg_work_group/researchData', {
+      this.loading = true
-        type: '0'
+      this.$http._getData('lawss/sarMenuStandardLimit/standardSystemTree').then(res => {
-      }, {
+          if (res.ok) {
-        _this: this
+            this.data = res.data[0]
-      }, res => {
+            this.initGraph()
-        if (res.ok) {
+          }
-          this.data = res.data
+      }).finally(() => {
-          this.initGraph()
+        this.loading = false
-        }
       })
     },
     initGraph(){
@@ -69,7 +79,7 @@ export default {
           const outDiv = document.createElement('div');
           // outDiv.style.maxWidth = '200px';
           outDiv.innerHTML = `
-            <div>${cfg.name}( 100/100/100 )</div>`
+            <div>${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )</div>`
           return outDiv
         },
         itemTypes: ['node']
@@ -108,7 +118,9 @@ export default {
                y:  (h - 10) / 2,
                fontSize: 12,
                lineHeight: 20,
-               text: cfg.name.length > 5 ? `${cfg.name.slice(0,5)}...( 100/100/100 )` : `${cfg.name}( 100/100/100 )`,
+               text: cfg.menuName.length > 5
+                   ? `${cfg.menuName.slice(0,5)}...( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`
+                   : `${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`,
                fill: '#000',
                textAlign: 'center',
                cursor: 'pointer',
@@ -130,14 +142,14 @@ export default {
              },
              name: 'collapse-icon',
            });
-           if (cfg.level === '0') {
+           if (cfg.level === 0) {
              const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
              rect.attr('fill', mainColor)
              rect.attr('stroke', mainColor) // 边框颜色
 
              const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
              text.attr('fill','#fff')
-           } else if (cfg.level === '1') {
+           } else if (cfg.level === 1) {
              const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
              rect.attr('fill', '#eee')
              rect.attr('stroke', '#eee')
@@ -302,6 +314,7 @@ export default {
       graph.render(); // 渲染图
        // graph.fitView()
        graph.fitCenter()
+      // graph.focusItem(this.data.id)
       this.initGraphEvent(graph)
     },
     setCollapse () {
@@ -340,8 +353,10 @@ export default {
           e.item.getModel().collapsed = !e.item.getModel().collapsed;// 设置是否展开
           graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);// 设置当前节点的 click 状态
         } else {
-          console.log('打开窗口',e.item.getModel())
+          // console.log(e)
-          alert('node:click')
+          // console.log('打开窗口',e.item.getModel())
+          const cfg = e.item.getModel()
+          this.$refs.DialogTableRef.open(cfg)
         }
 
         graph.layout();
@@ -364,6 +379,10 @@ export default {
 </script>
 
 <style scoped>
+.root {
+  width: 100%;
+  height: 100%;
+}
 #mountNode{
   width: 100%;
   height: 100%;