Browse Source

Merge branch 'aly_dev' of git.sagacloud.cn:web/wanda-bm-guide into aly_dev

guoxiaohuan 4 years ago
parent
commit
805e164582
2 changed files with 577 additions and 248 deletions
  1. 30 3
      src/views/legendLibrary/index.vue
  2. 547 245
      src/views/legendRules/index.vue

+ 30 - 3
src/views/legendLibrary/index.vue

@@ -102,7 +102,7 @@
                     prefix-icon='el-icon-search'
                     v-model='keyword'
                     clearable
-                    style='width:180px;margin-right:12px;float:right;position: absolute;right:6px; top: 45px;'
+                    class='search-input'
                     @clear='keyword = ""'
                 ></el-input>
             </div>
@@ -159,6 +159,7 @@
                     layout='prev, pager, next'
                     :total='total'
                     :page-size='size'
+                    :current-page.sync='currentPage'
                     @prev-click='pageChanged'
                     @next-click='pageChanged'
                     @current-change='pageChanged'
@@ -422,7 +423,7 @@ export default {
         },
         pageChanged(page, size) {
             this.currentPage = page
-            this.getTableList()
+            this.getTableTata()
         },
         getTableListPosition(val) {
             let postParams = val.map(({ id }) => id)
@@ -452,7 +453,7 @@ export default {
             })
             return arr
         },
-        getTableList() {
+        getTableTata() {
             let postParams = {
                 Deleted: this.state == 1 ? false : true,
                 GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
@@ -479,6 +480,10 @@ export default {
                 this.loading = false
             })
         },
+        getTableList() {
+            this.currentPage = 1
+            this.getTableTata()
+        },
 
         updateSuccess() {
             this.getTableList()
@@ -536,6 +541,14 @@ export default {
     display: flex;
     flex-direction: column;
     height: 100%;
+    .search-input {
+        width: 180px;
+        margin-right: 12px;
+        float: right;
+        position: absolute;
+        right: 6px;
+        top: 45px;
+    }
     .nav {
         height: 48px;
         line-height: 48px;
@@ -639,6 +652,20 @@ export default {
 }
 </style>
 <style lang="less">
+@media screen and (max-height: 800px) {
+    .legend-library-bottom {
+        overflow-y: auto;
+        margin-bottom: 20px;
+        z-index: 333;
+    }
+    .search-input {
+        right: 10px !important;
+    }
+    .library-btn {
+        margin-right: 20px !important;
+    }
+}
+
 .legend-library {
     th {
         font-size: 12px;

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

@@ -1,132 +1,289 @@
 <template>
-    <!-- 图例库首页 -->
-    <div class='legend-rules'>
+    <div class='legend-library'>
         <!-- <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 style='color:#1F2329'>万达管理说明书</span>
+            <span class='nav-span1'>万达管理说明书</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-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 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>
-        <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 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>
-            <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='图例样式'>
+            <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'>
                         <template slot-scope='{row}'>
-                            <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 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>
+                            <span>{{row.InfoSystem.length ?row.InfoSystem.map(item => item.Name).join(' ,') :''}}</span>
                         </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>
+                </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>
             </div>
         </div>
-        <add-legend ref='addLegends' @mesg='mesg'></add-legend>
+        <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>
     </div>
 </template>
 <script>
-import addLegend from '../legendLibrary/addLegend'
-import { updateRelation, getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
+import addLegend from './addLegend'
+import transparency from './transparency.js'
+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 +
+        ')'
+    )
+}
 export default {
-    components: { addLegend },
+    components: { addLegend, Select },
     data() {
         return {
-            treeData: [],
-            GraphCategoryId: ['GDXT'],
+            loading: true,
+            deleteObject: {},
+            modalStatusTip: false,
             tableData: [],
-            defaultProps: {
-                children: 'Category',
-                title: 'Name',
-                key: 'Id'
-            }, //test
-            // 可筛选表格表头列表
-            headList2: [
-                {
-                    title: '图例名称', // 列的名称
-                    key: 'Name', // 列的标识
-                    show: true // 是否显示该列
-                },
+            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: [
                 {
-                    title: '图例样式',
-                    key: 'Url',
-                    show: true
+                    id: 'all',
+                    name: '全部'
                 },
                 {
-                    title: '单位',
-                    key: 'Unit',
-                    show: true
+                    id: 'None',
+                    name: '非图例'
                 },
                 {
-                    title: '操作',
-                    key: 'caozuo',
-                    show: true
-                }
-            ],
-            // 操作按钮组 (非必填)
-            toolBtns: [
-                {
-                    icon: 'ascendingOrder',
-                    name: '上移'
+                    id: 'Zone',
+                    name: '区域'
                 },
                 {
-                    icon: 'descendingOrder',
-                    name: '下移'
+                    id: 'Image',
+                    name: '图标'
                 },
                 {
-                    icon: 'close',
-                    name: '删除'
+                    id: 'Line',
+                    name: '线条'
                 }
             ],
-            selText: '图例绘制规则',
-            selVal: '1',
-            dataSelect: [
-                { id: '0', name: '图例库管理' },
-                { id: '1', 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
+            }
         }
     },
     watch: {
@@ -143,231 +300,376 @@ export default {
         }
     },
     methods: {
-        goBack() {
-            this.$router.push({ path: 'legendLibrary' })
+        //业下设备分类和位置分类树形结构
+        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
+            })
         },
-        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)
 
-                    _this.tableData.forEach((i, index) => {
-                        list.push({
-                            GraphElementId: i.Id,
-                            OrderId: index
-                        })
-                    })
-                    _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
-                        })
+        //说明书位置
+        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.upDateGraphy(list)
-                }
-            }
+            })
         },
-        // 更新图例关系信息
-        upDateGraphy(list) {
-            let postParams = {
-                GraphCategoryId: this.GraphCategoryId[0],
-                GraphRelations: list
+        getTree(data) {
+            let child = data.Children || data.Category
+            return {
+                id: data.Id,
+                name: data.Name,
+                children: child ? child.map(i => this.getTree(i)) : []
             }
-
-            updateRelation({ postParams }).then(res => {
-                this.getData()
-            })
         },
-
-        handleNodeClick(data, e) {
-            this.GraphCategoryId = [e.node.eventKey]
-            this.getData()
+        add() {
+            this.$refs.addLegend.open('', '添加图例库')
         },
-        deleteClick(row) {
+        modifyClick(row) {
+            this.$refs.addLegend.open(row, '修改图例库')
+        },
+        modalConfirm() {
             let postParams = [
                 {
-                    GraphCategoryId: this.GraphCategoryId[0],
-                    GraphElementId: row.Id
+                    Id: this.deleteObject.Id
                 }
             ]
-            deleteRelation({ postParams }).then(res => {
-                if (res.Result == 'success') {
+            deleteLegend({ postParams })
+                .then(res => {
+                    if (res.Result == 'success') {
+                        this.$message({
+                            type: 'success',
+                            message: '作废成功!'
+                        })
+                        this.modalStatusTip = false
+                        this.getTableList()
+                    }
+                })
+                .catch(() => {
                     this.$message({
-                        type: 'success',
-                        message: '删除成功!'
+                        type: 'info',
+                        message: '已取消删除'
                     })
-                    this.getData()
-                }
-            })
+                })
         },
-        mesg() {
-            this.getData()
+        deleteClick(row) {
+            this.deleteObject = row
+            this.modalStatusTip = true
         },
-        add() {
-            this.$refs.addLegends.open('', '', this.GraphCategoryId)
+        pageChanged(page, size) {
+            this.currentPage = page
+            this.getTableTata()
         },
-        init() {
-            let getParams = {}
-            getLegendTree({ getParams }).then(res => {
-                // this.treeData = res.Content
-                this.treeData = this.recursion(res.Content)
-                this.getData()
+        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
             })
         },
-        recursion(arr) {
-            arr.map(i => {
-                i.selectable = true
-                if (i.Category && i.Category.length > 0) {
-                    i.selectable = false
-                    this.recursion(i.Category)
+        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()
                 }
-                return i
             })
             return arr
         },
-        getData() {
-            let postParams = this.GraphCategoryId
-            let data = {}
-            queryRelation({ data, postParams }).then(res => {
-                this.tableData = res.data.Content
+        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)
+                        }
+                    })
+            })
+            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.init()
+        this.getTypeId()
+        this.instruction()
+        this.visualization()
+        this.getTableList()
+        this.initQueryDeviceAndPOsition()
     }
 }
 </script>
 <style lang="less" scoped>
-.legend-rules {
-    background: rgba(247, 249, 250, 1);
-    height: 100%;
+.legend-library {
     display: flex;
     flex-direction: column;
-    color: #1f2329;
-
+    height: 100%;
     .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 3px 8px;
+            margin: 0 8px 0px 8px;
         }
     }
+    /deep/ .p-drop {
+        height: 48px;
+    }
     /deep/ .p-drop .p-drop-title .p-drop-triangle {
         margin-top: -5px;
     }
-    .legend-rules-top {
+    .legend-library-top {
+        height: 45px;
+        background: rgba(247, 249, 250, 1);
         text-align: center;
-        height: 48px;
         line-height: 48px;
-        font-size: 16px;
-        .rules-button {
+        color: #1f2329;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        .library-btn {
             float: right;
             margin-right: 16px;
-            margin-top: 8px;
         }
     }
-    .legend-rules-bottom {
+    .legend-library-bottom {
         flex: 1;
-        display: flex;
-        .legend-rules-left {
-            // width: 288px;
-            // padding: 26px;
+        background: #fff;
+        padding: 0 16px;
+        .select-box {
+            height: 56px;
+            line-height: 56px;
+            min-width: 1344px;
+            display: flex;
+            align-items: center;
         }
-        .legend-rules-right {
-            padding: 16px;
-            background: #fff;
-            color: #1f2429;
-            width: calc(100% - 290px);
-            .img {
-                width: 28px;
-                height: 28px;
-            }
+        .img {
+            width: 28px;
+            height: 28px;
+        }
+        .img1 {
+            width: 32px;
+            height: 18px;
         }
     }
-}
-</style>
-<style lang="less" >
-.legend-rules {
-    .el-tree {
-        background: rgba(247, 249, 250, 1);
-    }
-    // /deep/.ant-tree li .ant-tree-node-content-wrapper {
-    //     width: 90%;
-    // }
-    .ant-tree-treenode-selected {
-        background: #e1f2ff !important;
-        color: #0091ff !important;
+    .foot {
+        height: 32px;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 28px;
     }
-    /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
-        background: transparent !important;
-        color: #0091ff !important;
+    /deep/ .p-select-input-content {
+        line-height: 32px;
     }
-    /deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
-        background: transparent !important;
+    .device-position {
+        /deep/ .p-select-input-caption {
+            display: block !important;
+            width: 250px !important;
+            max-width: 250px !important;
+        }
     }
-    /deep/ .p-inner-container {
-        overflow-x: hidden;
+    .instructions {
+        /deep/ .p-select-input-caption {
+            display: block !important;
+            width: 100px !important;
+            max-width: 200px !important;
+        }
     }
-    .is-current {
-        background: #e1f2ff !important;
-        border-radius: 4px;
-        font-size: 14px;
-        color: rgba(0, 145, 255, 1);
+    .visualization {
+        /deep/ .p-select-input-caption {
+            display: block !important;
+            width: 100px !important;
+            max-width: 200px !important;
+        }
     }
+}
+</style>
+<style lang="less">
+.legend-library {
     th {
         font-size: 12px;
-        font-family: MicrosoftYaHei;
-        color: #646a73;
-        height: 40px;
+        color: #646a73 !important;
+        padding: 6px 0 !important;
         background: rgba(248, 249, 250, 1);
     }
     td {
-        color: #1f2429;
+        color: #1f2429 !important;
+        padding: 6px 0 !important;
     }
+    .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>