Kaynağa Gözat

修改图里规则跳转错误

shaun-sheep 4 yıl önce
ebeveyn
işleme
f130fb117b
3 değiştirilmiş dosya ile 270 ekleme ve 560 silme
  1. 5 5
      public/systemConf.js
  2. 20 8
      src/store/index.js
  3. 245 547
      src/views/legendRules/index.vue

+ 5 - 5
public/systemConf.js

@@ -24,13 +24,13 @@ var __systemConf = {
     systemCode: 'wandaBmGuide',
     conf: {
         // 阿里云
-        editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
-        wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
+        // editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
+        // wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
         // http://glsms.wanda-dev.cn/ 测试服
-        // editerUrl: 'http://glsms.wanda-dev.cn/wandaEditer/', // 编辑器地址
-        // wandaBmGuideUrl: 'http://glsms.wanda-dev.cn/wandaBmGuide/', //管理书地址
+        editerUrl: 'http://glsms.wanda-dev.cn/wandaEditer/', // 编辑器地址
+        wandaBmGuideUrl: 'http://glsms.wanda-dev.cn/wandaBmGuide/', //管理书地址
         // editerUrl: 'http://localhost:8091/wandaEditer/', // 编辑器地址
         // wandaBmGuideUrl: 'http://localhost:8090/wandaBmGuide/', //管理书地址
     },
 }
-window.__systemConf = __systemConf
+window.__systemConf = __systemConf

+ 20 - 8
src/store/index.js

@@ -1,15 +1,21 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { login, queryFloor, queryfmapID } from '@/api/login.js'
-import { queryBrand } from '@/api/public.js'
+import {
+    login,
+    queryFloor,
+    queryfmapID
+} from '@/api/login.js'
+import {
+    queryBrand
+} from '@/api/public.js'
 import axios from 'axios'
 import router from '../router'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
-        ssoToken: 'admin:xuliping',
-        // ssoToken: null,
+        // ssoToken: 'admin:xuliping',
+        ssoToken: null,
         plazaName: '',
         isPreview: false,
         lastRoute: '',
@@ -127,7 +133,9 @@ export default new Vuex.Store({
     },
     actions: {
         // 获取项目列表、userId
-        async getUserInfo({ commit }, palyload) {
+        async getUserInfo({
+            commit
+        }, palyload) {
             await login({}).then((res) => {
                 // 获取用户当前权限
                 console.log(res)
@@ -136,9 +144,13 @@ export default new Vuex.Store({
                     console.log('res.level', res.level)
                     let level = res.level
                     if (level === 0) {
-                        router.push({ path: './home/homepage' })
+                        router.push({
+                            path: './home/homepage'
+                        })
                     } else {
-                        router.push({ path: './group' })
+                        router.push({
+                            path: './group'
+                        })
                     }
                     // commit('SETISREQUESTtAUTH', false)
                 }
@@ -189,4 +201,4 @@ export default new Vuex.Store({
         },
     },
     modules: {},
-})
+})

+ 245 - 547
src/views/legendRules/index.vue

@@ -1,289 +1,132 @@
 <template>
-    <div class='legend-library'>
+    <!-- 图例库首页 -->
+    <div class='legend-rules'>
         <!-- <div class='nav'>
             <img class='img-menu' src='@/assets/imgs/menu.png' alt />
             <el-divider direction='vertical'></el-divider>
             <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
-            <span class='nav-span1'>万达管理说明书</span>
+            <span style='color:#1F2329'>万达管理说明书</span>
             <span class='circular'></span>
             <Dropdown v-model='selVal' :data='dataSelect'>
                 <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
             </Dropdown>
         </div>-->
-        <div class='legend-library-top'>
-            <span style='display:inline-block;font-size:16px'>图例库管理</span>
-            <span class='library-btn'>
-                <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
-                <el-button size='small' type='primary' @click='add'>添加图例</el-button>
-            </span>
+        <div class='legend-rules-top'>
+            <div style='float: left;  padding-left: 20px;  padding-right:7px; display: inline-block;'>
+                <img src='@/assets/imgs/go-back.png' @click='goBack' alt style='cursor: pointer;' />
+            </div>
+            <span style='float: left;display: inline-block;font-size:14px;padding-top: 2px;color:#1F2429;cursor: pointer;' @click='goBack'>返回</span>
+            图例绘制规则
+            <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
         </div>
-        <div class='legend-library-bottom'>
-            <div class='select-box'>
-                <Select
-                    width='180'
-                    tipPlace='top'
-                    caption='所属分类:'
-                    v-model='Type'
-                    :selectdata='typeOptions'
-                    :placeholder='"请选择"'
-                    @change='getTableList'
-                    :hideClear='true'
-                ></Select>
-                <span class='instructions'>
-                    <TreeSelect
-                        title='已选项'
-                        caption='说明书位置:'
-                        tipPlace='top'
-                        width='220'
-                        style='margin:0 0 0 12px'
-                        :returnParentNode='false'
-                        :isShowAllChoice='true'
-                        :choseArea='true'
-                        :lastStage='true'
-                        :data='positionSelect'
-                        @change='treeConfirmPosition'
-                    />
-                </span>
-                <span class='device-position'>
-                    <TreeSelect
-                        caption='专业/设备、位置类型:'
-                        tipPlace='top'
-                        width='280'
-                        style='margin:0 12px'
-                        :isShowAllChoice='true'
-                        :returnParentNode='false'
-                        :choseArea='true'
-                        :data='deviceList'
-                        :lastStage='true'
-                        @change='treeConfirmDevice'
-                    />
-                </span>
-
-                <!-- <TreeSelect
-                    caption='专业:'
-                    tipPlace='top'
-                    height='180'
-                    style='margin:0 12px'
-                    :returnParentNode='false'
-                    :isShowAllChoice='true'
-                    :choseArea='true'
-                    :data='majorList'
-                    @change='treeConfirmMajor'
-                    :hideClear='true'
-                />-->
-                <span class='visualization'>
-                    <TreeSelect
-                        caption='铺位可视化:'
-                        tipPlace='top'
-                        width='250'
-                        :returnParentNode='false'
-                        :isShowAllChoice='true'
-                        :choseArea='true'
-                        :data='typeVisualization'
-                        @change='treeConfirm'
-                        :lastStage='true'
-                        @focusChange='focusChange'
-                    />
-                </span>
-                <Select
-                    width='150'
-                    tipPlace='top'
-                    caption='状态:'
-                    v-model='state'
-                    :selectdata='stateSelect'
-                    @change='getTableList'
-                    :placeholder='"请选择"'
-                    style='margin:0 12px'
-                    :hideClear='true'
-                ></Select>
-                <el-input
-                    size='small'
-                    @change='getTableList'
-                    prefix-icon='el-icon-search'
-                    v-model='keyword'
-                    clearable
-                    style='width:180px;margin-right:12px;float:right;position: absolute;right:6px; top: 45px;'
-                    @clear='keyword = ""'
-                ></el-input>
+        <div class='legend-rules-bottom'>
+            <div class='legend-rules-left'>
+                <!-- <p>楼层功能</p> -->
+                <!-- <el-tree :data='treeData' :default-checked-keys='`GDXT`' :props='defaultProps' default-expand-all @node-click='handleNodeClick'></el-tree> -->
+                <a-tree
+                    :tree-data='treeData'
+                    v-if='treeData.length'
+                    defaultExpandAll
+                    :replaceFields='defaultProps'
+                    :default-selected-keys='["GDXT"]'
+                    @select='handleNodeClick'
+                ></a-tree>
             </div>
-            <el-table :data='tableData' v-loading='loading' :key='key' :border='true' style='width: 100%'>
-                <el-table-column prop='Name' label='图例编码' width='180'>
-                    <template slot-scope='{row}'>{{row.Id }}</template>
-                </el-table-column>
-                <el-table-column prop='Name' label='图例名称' width='180'>
-                    <template slot-scope='{row}'>{{row.Name }}</template>
-                </el-table-column>
-                <el-table-column prop='style' label='图例样式' width='150'>
-                    <template slot-scope='{row}'>
-                        <img :class='`${row.Type=="Zone"?"img1":"img"}`' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
-                    </template>
-                </el-table-column>
-                <el-table-column prop='Unit' label='单位' width='120'>
-                    <template slot-scope='{row}'>{{row.Unit}}</template>
-                </el-table-column>
-                <el-table-column prop='position' label='对应广场说明书的位置' show-overflow-tooltip>
-                    <template slot-scope='{row}'>
-                        <span>{{ row.GraphCategorys.length?row.GraphCategorys.map(item => item.Name).join(' ,'):'' }}</span>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label='对应工程信息化中的专业/位置、设备分类' show-overflow-tooltip>
-                    <template slot-scope='{row}'>
-                        <span>{{row.InfoLocal.length?row.InfoLocal.map(item => item.name).join(' ,') :''}}</span>
-                    </template>
-                </el-table-column>
-                <!-- <el-table-column prop='system' label='专业' show-overflow-tooltip width='120'>
+            <div class='legend-rules-right'>
+                <!-- <el-table :data='tableData' style='width: 100%'>
+                    <el-table-column prop='Name' label='图例名称'>
+                        <template slot-scope='{row}'>{{row.Name || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column prop='Url' label='图例样式'>
                         <template slot-scope='{row}'>
-                            <span>{{row.InfoSystem.length ?row.InfoSystem.map(item => item.Name).join(' ,') :''}}</span>
+                            <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
+                            <span v-else>{{'--'}}</span>
                         </template>
-                </el-table-column>-->
-
-                <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140' show-overflow-tooltip>
-                    <template slot-scope='{row}'>
-                        <span>{{row.InfoTypes.length ?row.InfoTypes.map(item => `${item.Id }-${item.Name}`).join(' ,'):'' }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label='操作' width='100' v-if='state==1'>
-                    <template slot-scope='scope' v-if='state==1'>
-                        <el-button @click='modifyClick(scope.row)' type='text'>修改</el-button>
-                        <el-button @click='deleteClick(scope.row)' type='text'>作废</el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
-                    <template v-if='state==0' slot-scope='{row}'>{{row.DeleteTime}}</template>
-                </el-table-column>
-            </el-table>
-            <div class='foot'>
-                <el-pagination
-                    background
-                    layout='prev, pager, next'
-                    :total='total'
-                    :page-size='size'
-                    @prev-click='pageChanged'
-                    @next-click='pageChanged'
-                    @current-change='pageChanged'
-                ></el-pagination>
+                    </el-table-column>
+                    <el-table-column prop label='单位'>
+                        <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
+                    </el-table-column>
+                    <el-table-column label='操作' width='100'>
+                        <template slot-scope='scope'>
+                            <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>-->
+                <Table
+                    :head='headList2'
+                    :source='tableData'
+                    :toolButtons='toolBtns'
+                    :selectWidth='200'
+                    height='100%'
+                    @tool-button-click='buttonClickHandle'
+                >
+                    <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
+                    <span slot-scope='{col}' v-else-if='col.key==="caozuo"' style='color:#0091FF'>删除</span>
+                </Table>
             </div>
         </div>
-        <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess' @cancal='cancal'></add-legend>
-        <Modal :show='modalStatusTip' title='确定要作废图例吗?' mode='tip' type='error' @close='modalStatusTip=false'>
-            <template #content>作废后则不可更改</template>
-            <template #handle>
-                <Button @click='modalStatusTip=false' type='default'>取消</Button>
-                <Button @click='modalConfirm' type='error'>作废</Button>
-            </template>
-        </Modal>
+        <add-legend ref='addLegends' @mesg='mesg'></add-legend>
     </div>
 </template>
 <script>
-import addLegend from './../legendLibrary/addLegend'
-import transparency from './../legendLibrary/transparency'
-import Select from '@/components/Select/Select.vue'
-import {
-    queryDeviceAndPOsition,
-    graphElementSearch,
-    getLegendTree,
-    queryLegend,
-    deleteLegend,
-    queryTypeId,
-    getVisualization,
-    queryRelation
-} from '@/api/legendLibrary.js'
-
-function hexToRgba(hex) {
-    let opacity = '',
-        a = hex.slice(7, 9)
-    transparency.forEach((i, index) => {
-        if (i == a) {
-            opacity = index / 100
-        }
-    })
-    return (
-        'rgba(' +
-        parseInt('0x' + hex.slice(1, 3)) +
-        ',' +
-        parseInt('0x' + hex.slice(3, 5)) +
-        ',' +
-        parseInt('0x' + hex.slice(5, 7)) +
-        ',' +
-        opacity +
-        ')'
-    )
-}
+import addLegend from '../legendLibrary/addLegend'
+import { updateRelation, getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
 export default {
-    components: { addLegend, Select },
+    components: { addLegend },
     data() {
         return {
-            loading: true,
-            deleteObject: {},
-            modalStatusTip: false,
+            treeData: [],
+            GraphCategoryId: ['GDXT'],
             tableData: [],
-            key: 1,
-            dataSelect2: [
-                { id: 'test1', name: '选择项' },
-                { id: 'test2', name: '单平米' },
-                { id: 'test3', name: '下级分项' },
-                { id: 'test4', name: '滑动平均滑动平均' }
-            ],
-            stateSelect: [
-                { id: '1', name: '正常' },
-                { id: '0', name: '已作废' }
-            ],
-            Type: 'all', //所属分类
-            selText: '图例库管理',
-            selVal: '0',
-            dataSelect: [
-                { id: '0', name: '图例库管理' },
-                { id: '1', name: '图例绘制规则' }
-            ],
-            typeOptions: [
+            defaultProps: {
+                children: 'Category',
+                title: 'Name',
+                key: 'Id'
+            }, //test
+            // 可筛选表格表头列表
+            headList2: [
                 {
-                    id: 'all',
-                    name: '全部'
+                    title: '图例名称', // 列的名称
+                    key: 'Name', // 列的标识
+                    show: true // 是否显示该列
                 },
                 {
-                    id: 'None',
-                    name: '非图例'
+                    title: '图例样式',
+                    key: 'Url',
+                    show: true
                 },
                 {
-                    id: 'Zone',
-                    name: '区域'
+                    title: '单位',
+                    key: 'Unit',
+                    show: true
                 },
                 {
-                    id: 'Image',
-                    name: '图标'
+                    title: '操作',
+                    key: 'caozuo',
+                    show: true
+                }
+            ],
+            // 操作按钮组 (非必填)
+            toolBtns: [
+                {
+                    icon: 'ascendingOrder',
+                    name: '上移'
+                },
+                {
+                    icon: 'descendingOrder',
+                    name: '下移'
                 },
                 {
-                    id: 'Line',
-                    name: '线条'
+                    icon: 'close',
+                    name: '删除'
                 }
             ],
-            TypeId: '',
-            typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
-            size: 10,
-            total: 0,
-            currentPage: 1,
-            state: '1',
-            position: [],
-            positionSelect: [],
-            keyword: undefined,
-            typeVisualization: [],
-            visualizationList: [], //已选铺位可视化
-            // majorList: [], //专业
-            deviceList: [],
-            GraphCategoryIds: [], //说明书位置勾选集合
-            InfoLocals: [], //工程信息化
-            InfoSystems: [], //工程信息化专业/系统
-            InfoTypeIds: [] //铺位可视化typeid
-        }
-    },
-    filters: {
-        filterName(val, index, arr) {
-            if (arr.length != 1) {
-                return val + ','
-            } else {
-                return val
-            }
+            selText: '图例绘制规则',
+            selVal: '1',
+            dataSelect: [
+                { id: '0', name: '图例库管理' },
+                { id: '1', name: '图例绘制规则' }
+            ]
         }
     },
     watch: {
@@ -300,376 +143,231 @@ export default {
         }
     },
     methods: {
-        //业下设备分类和位置分类树形结构
-        initQueryDeviceAndPOsition() {
-            let postParams = {}
-            queryDeviceAndPOsition({ postParams }).then(res => {
-                // let data = res.data
-                // data.forEach(data => {
-                //     const map = {
-                //         1: [],
-                //         2: []
-                //     }
-                //     data.children.forEach(child => map[child.type].push(child))
-                //     data.children = [
-                //         {
-                //             id: `1--${data.id}`,
-                //             name: '位置类型',
-                //             children: map[1]
-                //         },
-                //         {
-                //             id: `2--${data.id}`,
-                //             name: '设备类型',
-                //             children: map[2]
-                //         }
-                //     ]
-                // })
-                // data.map(i => {
-                //     i.children.map(i => {
-                //         console.log(i)
-                //         if (!i.children.length) {
-                //             i.disabled = true
-                //         }
-                //     })
-                // })
-                this.deviceList = res.data
-            })
+        goBack() {
+            this.$router.push({ path: 'legendLibrary' })
         },
+        buttonClickHandle(obj) {
+            let index = Number(obj.item.index.split('-')[1])
+            let _this = this
+            switch (obj.tool.name) {
+                case '删除':
+                    this.deleteClick(obj.item)
+                    break
+                case '上移':
+                    up()
+                    break
+                case '下移':
+                    down()
+                    break
+            }
+            function up() {
+                let list = []
+                if (index == 0) {
+                    _this.$message.error('处于顶端,不可再上移')
+                } else {
+                    let upDate = _this.tableData[index - 1]
+                    _this.tableData.splice(index - 1, 1)
+                    _this.tableData.splice(index, 0, upDate)
 
-        //说明书位置
-        instruction() {
-            let getParams = {}
-            getLegendTree({ getParams }).then(res => {
-                this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
-            })
-        },
-        //监听取消 修改的时候取消会导致表格不刷新
-        cancal(info) {
-            console.log(info)
-            this.key++
-            this.getTableList()
-        },
-        dumpRules() {
-            this.$router.push('/home/legendRules')
-        },
-        getTypeId() {
-            let postParams = {}
-            queryTypeId({ postParams }).then(res => {
-                this.typeIdSelect = res.Content
-            })
-        },
-        visualization() {
-            getVisualization({}).then(res => {
-                this.typeVisualization =
-                    res.Data &&
-                    res.Data.map(i => {
-                        return {
-                            id: i.Id,
-                            name: i.Name,
-                            children: i.Children
-                                ? i.Children.map(j => {
-                                      return {
-                                          id: j.Id,
-                                          name: j.Id + '-' + j.Name
-                                      }
-                                  })
-                                : []
-                        }
+                    _this.tableData.forEach((i, index) => {
+                        list.push({
+                            GraphElementId: i.Id,
+                            OrderId: index
+                        })
                     })
-            })
-        },
-        getTree(data) {
-            let child = data.Children || data.Category
-            return {
-                id: data.Id,
-                name: data.Name,
-                children: child ? child.map(i => this.getTree(i)) : []
+                    _this.upDateGraphy(list)
+                }
+            }
+
+            function down() {
+                let list = []
+                if (index == _this.tableData.length - 1) {
+                    _this.$message.error('处于底端,不可再下移')
+                } else {
+                    let downDate = _this.tableData[index + 1]
+                    _this.tableData.splice(index + 1, 1)
+                    _this.tableData.splice(index, 0, downDate)
+                    _this.tableData.forEach((i, index) => {
+                        list.push({
+                            GraphElementId: i.Id,
+                            OrderId: index
+                        })
+                    })
+                    _this.upDateGraphy(list)
+                }
             }
         },
-        add() {
-            this.$refs.addLegend.open('', '添加图例库')
+        // 更新图例关系信息
+        upDateGraphy(list) {
+            let postParams = {
+                GraphCategoryId: this.GraphCategoryId[0],
+                GraphRelations: list
+            }
+
+            updateRelation({ postParams }).then(res => {
+                this.getData()
+            })
         },
-        modifyClick(row) {
-            this.$refs.addLegend.open(row, '修改图例库')
+
+        handleNodeClick(data, e) {
+            this.GraphCategoryId = [e.node.eventKey]
+            this.getData()
         },
-        modalConfirm() {
+        deleteClick(row) {
             let postParams = [
                 {
-                    Id: this.deleteObject.Id
+                    GraphCategoryId: this.GraphCategoryId[0],
+                    GraphElementId: row.Id
                 }
             ]
-            deleteLegend({ postParams })
-                .then(res => {
-                    if (res.Result == 'success') {
-                        this.$message({
-                            type: 'success',
-                            message: '作废成功!'
-                        })
-                        this.modalStatusTip = false
-                        this.getTableList()
-                    }
-                })
-                .catch(() => {
+            deleteRelation({ postParams }).then(res => {
+                if (res.Result == 'success') {
                     this.$message({
-                        type: 'info',
-                        message: '已取消删除'
+                        type: 'success',
+                        message: '删除成功!'
                     })
-                })
+                    this.getData()
+                }
+            })
         },
-        deleteClick(row) {
-            this.deleteObject = row
-            this.modalStatusTip = true
+        mesg() {
+            this.getData()
         },
-        pageChanged(page, size) {
-            this.currentPage = page
-            this.getTableTata()
+        add() {
+            this.$refs.addLegends.open('', '', this.GraphCategoryId)
         },
-        getTableListPosition(val) {
-            let postParams = val.map(({ id }) => id)
-            let data = {}
-            queryRelation({ data, postParams }).then(res => {
-                this.tableData = res.data.Content
-                this.loading = false
-                this.total = res.Total
+        init() {
+            let getParams = {}
+            getLegendTree({ getParams }).then(res => {
+                // this.treeData = res.Content
+                this.treeData = this.recursion(res.Content)
+                this.getData()
             })
         },
-        transformDate(arr) {
-            arr.map(({ GraphCategorys, InfoLocal, InfoSystems, InfoTypes }) => {
-                if (GraphCategorys.length) {
-                    GraphCategorys.map(i => i)
-                }
-                if (InfoLocal.length) {
-                    GraphCategorys.map(i => {
-                        i.name
-                    })
-                }
-                if (InfoSystems.length) {
-                    GraphCategorys.map()
-                }
-                if (InfoTypes.length) {
-                    GraphCategorys.map()
+        recursion(arr) {
+            arr.map(i => {
+                i.selectable = true
+                if (i.Category && i.Category.length > 0) {
+                    i.selectable = false
+                    this.recursion(i.Category)
                 }
+                return i
             })
             return arr
         },
-        getTableTata() {
-            let postParams = {
-                Deleted: this.state == 1 ? false : true,
-                GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
-                InfoLocals: this.InfoLocals.length ? this.InfoLocals : undefined, //工程信息化位置与设备分类
-                InfoSystems: this.InfoSystems.length ? this.InfoSystems : undefined, //工程信息化专业/系统
-                InfoTypeIds: this.InfoTypeIds.length ? this.InfoTypeIds : undefined, //铺位可视化typeid
-                Name: this.keyword,
-                PageNumber: this.currentPage,
-                PageSize: this.size,
-                Type: this.Type == 'all' ? undefined : this.Type
-            }
-            graphElementSearch({ postParams }).then(res => {
-                this.key++
-                // this.tableData = res.Content
-                this.total = res.Total
-                this.tableData =
-                    res.Content &&
-                    res.Content.map(i => {
-                        if (i.FillColor.length == '9') {
-                            i.FillColor = hexToRgba(i.FillColor)
-                        }
-                        return i
-                    })
-                this.loading = false
-            })
-        },
-        getTableList() {
-            this.size = 1
-            this.getTableTata()
-        },
-
-        updateSuccess() {
-            this.getTableList()
-        },
-        addSuccess() {
-            this.getTableList()
-        },
-        // 铺位可视化
-        treeConfirm(id, info) {
-            this.InfoTypeIds = id
-            this.getTableList()
-        },
-        //专业
-        // treeConfirmMajor(id, info) {
-        //     this.InfoSystems = id
-        //     this.getTableList()
-        // },
-        //位置/设备
-        treeConfirmDevice(id, info) {
-            let InfoSystem = []
-            this.InfoSystems = []
-            this.InfoLocals = []
-            this.deviceList.forEach(i => {
-                i.children.length > 0 &&
-                    i.children.forEach(j => {
-                        if (id.includes(j.id)) {
-                            InfoSystem.push(i.id)
-                        }
-                    })
+        getData() {
+            let postParams = this.GraphCategoryId
+            let data = {}
+            queryRelation({ data, postParams }).then(res => {
+                this.tableData = res.data.Content
             })
-            this.InfoSystems = [...new Set(JSON.parse(JSON.stringify(InfoSystem)))]
-            this.InfoLocals = id
-            this.getTableList()
-        },
-        //说明书位置
-        treeConfirmPosition(id, info) {
-            this.GraphCategoryIds = id
-            this.getTableList()
-        },
-        focusChange(status) {
-            // console.log('focusChange', status)
         }
     },
     mounted() {
-        this.getTypeId()
-        this.instruction()
-        this.visualization()
-        this.getTableList()
-        this.initQueryDeviceAndPOsition()
+        this.init()
     }
 }
 </script>
 <style lang="less" scoped>
-.legend-library {
+.legend-rules {
+    background: rgba(247, 249, 250, 1);
+    height: 100%;
     display: flex;
     flex-direction: column;
-    height: 100%;
+    color: #1f2329;
+
     .nav {
         height: 48px;
         line-height: 48px;
         width: 100%;
         background: #fff;
         margin-left: 17px;
-        display: flex;
-        align-items: center;
         .img-menu {
             margin-right: 9px;
         }
         .img-logo {
             margin: 0 9px;
         }
-        .nav-span1 {
-            height: 26px;
-            font-size: 14px;
-            font-family: MicrosoftYaHei;
-            color: rgba(31, 35, 41, 1);
-            line-height: 26px;
-        }
         .circular {
             display: inline-block;
             width: 4px;
             height: 4px;
             background: rgba(195, 198, 203, 1);
             border-radius: 50%;
-            margin: 0 8px 0px 8px;
+            margin: 0 8px 3px 8px;
         }
     }
-    /deep/ .p-drop {
-        height: 48px;
-    }
     /deep/ .p-drop .p-drop-title .p-drop-triangle {
         margin-top: -5px;
     }
-    .legend-library-top {
-        height: 45px;
-        background: rgba(247, 249, 250, 1);
+    .legend-rules-top {
         text-align: center;
+        height: 48px;
         line-height: 48px;
-        color: #1f2329;
-        font-size: 14px;
-        font-family: MicrosoftYaHei;
-        color: rgba(31, 36, 41, 1);
-        .library-btn {
+        font-size: 16px;
+        .rules-button {
             float: right;
             margin-right: 16px;
+            margin-top: 8px;
         }
     }
-    .legend-library-bottom {
+    .legend-rules-bottom {
         flex: 1;
-        background: #fff;
-        padding: 0 16px;
-        .select-box {
-            height: 56px;
-            line-height: 56px;
-            min-width: 1344px;
-            display: flex;
-            align-items: center;
-        }
-        .img {
-            width: 28px;
-            height: 28px;
+        display: flex;
+        .legend-rules-left {
+            // width: 288px;
+            // padding: 26px;
         }
-        .img1 {
-            width: 32px;
-            height: 18px;
+        .legend-rules-right {
+            padding: 16px;
+            background: #fff;
+            color: #1f2429;
+            width: calc(100% - 290px);
+            .img {
+                width: 28px;
+                height: 28px;
+            }
         }
     }
-    .foot {
-        height: 32px;
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 28px;
+}
+</style>
+<style lang="less" >
+.legend-rules {
+    .el-tree {
+        background: rgba(247, 249, 250, 1);
     }
-    /deep/ .p-select-input-content {
-        line-height: 32px;
+    // /deep/.ant-tree li .ant-tree-node-content-wrapper {
+    //     width: 90%;
+    // }
+    .ant-tree-treenode-selected {
+        background: #e1f2ff !important;
+        color: #0091ff !important;
     }
-    .device-position {
-        /deep/ .p-select-input-caption {
-            display: block !important;
-            width: 250px !important;
-            max-width: 250px !important;
-        }
+    /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+        background: transparent !important;
+        color: #0091ff !important;
     }
-    .instructions {
-        /deep/ .p-select-input-caption {
-            display: block !important;
-            width: 100px !important;
-            max-width: 200px !important;
-        }
+    /deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
+        background: transparent !important;
     }
-    .visualization {
-        /deep/ .p-select-input-caption {
-            display: block !important;
-            width: 100px !important;
-            max-width: 200px !important;
-        }
+    /deep/ .p-inner-container {
+        overflow-x: hidden;
+    }
+    .is-current {
+        background: #e1f2ff !important;
+        border-radius: 4px;
+        font-size: 14px;
+        color: rgba(0, 145, 255, 1);
     }
-}
-</style>
-<style lang="less">
-.legend-library {
     th {
         font-size: 12px;
-        color: #646a73 !important;
-        padding: 6px 0 !important;
+        font-family: MicrosoftYaHei;
+        color: #646a73;
+        height: 40px;
         background: rgba(248, 249, 250, 1);
     }
     td {
-        color: #1f2429 !important;
-        padding: 6px 0 !important;
+        color: #1f2429;
     }
-    .ant-select {
-        margin-right: 12px;
-    }
-}
-.p-select-option-box {
-    background: #fff;
-    border: 1px solid #ccc;
-}
-.p-transfer-select {
-    height: 44px !important;
-}
-.p-tree-node-check,
-.p-tree-node-check .p-tree-node-title {
-    vertical-align: top !important;
-}
-.p-checkbox .p-checkbox-box {
-    top: 4px !important;
 }
 </style>