瀏覽代碼

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

guoxiaohuan 4 年之前
父節點
當前提交
805e164582
共有 2 個文件被更改,包括 577 次插入248 次删除
  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'
                     prefix-icon='el-icon-search'
                     v-model='keyword'
                     v-model='keyword'
                     clearable
                     clearable
-                    style='width:180px;margin-right:12px;float:right;position: absolute;right:6px; top: 45px;'
+                    class='search-input'
                     @clear='keyword = ""'
                     @clear='keyword = ""'
                 ></el-input>
                 ></el-input>
             </div>
             </div>
@@ -159,6 +159,7 @@
                     layout='prev, pager, next'
                     layout='prev, pager, next'
                     :total='total'
                     :total='total'
                     :page-size='size'
                     :page-size='size'
+                    :current-page.sync='currentPage'
                     @prev-click='pageChanged'
                     @prev-click='pageChanged'
                     @next-click='pageChanged'
                     @next-click='pageChanged'
                     @current-change='pageChanged'
                     @current-change='pageChanged'
@@ -422,7 +423,7 @@ export default {
         },
         },
         pageChanged(page, size) {
         pageChanged(page, size) {
             this.currentPage = page
             this.currentPage = page
-            this.getTableList()
+            this.getTableTata()
         },
         },
         getTableListPosition(val) {
         getTableListPosition(val) {
             let postParams = val.map(({ id }) => id)
             let postParams = val.map(({ id }) => id)
@@ -452,7 +453,7 @@ export default {
             })
             })
             return arr
             return arr
         },
         },
-        getTableList() {
+        getTableTata() {
             let postParams = {
             let postParams = {
                 Deleted: this.state == 1 ? false : true,
                 Deleted: this.state == 1 ? false : true,
                 GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
                 GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
@@ -479,6 +480,10 @@ export default {
                 this.loading = false
                 this.loading = false
             })
             })
         },
         },
+        getTableList() {
+            this.currentPage = 1
+            this.getTableTata()
+        },
 
 
         updateSuccess() {
         updateSuccess() {
             this.getTableList()
             this.getTableList()
@@ -536,6 +541,14 @@ export default {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     height: 100%;
     height: 100%;
+    .search-input {
+        width: 180px;
+        margin-right: 12px;
+        float: right;
+        position: absolute;
+        right: 6px;
+        top: 45px;
+    }
     .nav {
     .nav {
         height: 48px;
         height: 48px;
         line-height: 48px;
         line-height: 48px;
@@ -639,6 +652,20 @@ export default {
 }
 }
 </style>
 </style>
 <style lang="less">
 <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 {
 .legend-library {
     th {
     th {
         font-size: 12px;
         font-size: 12px;

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

@@ -1,132 +1,289 @@
 <template>
 <template>
-    <!-- 图例库首页 -->
+    <div class='legend-library'>
-    <div class='legend-rules'>
         <!-- <div class='nav'>
         <!-- <div class='nav'>
             <img class='img-menu' src='@/assets/imgs/menu.png' alt />
             <img class='img-menu' src='@/assets/imgs/menu.png' alt />
             <el-divider direction='vertical'></el-divider>
             <el-divider direction='vertical'></el-divider>
             <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
             <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>
             <span class='circular'></span>
             <Dropdown v-model='selVal' :data='dataSelect'>
             <Dropdown v-model='selVal' :data='dataSelect'>
                 <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
                 <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
             </Dropdown>
             </Dropdown>
         </div>-->
         </div>-->
-        <div class='legend-rules-top'>
+        <div class='legend-library-top'>
-            <div style='float: left;  padding-left: 20px;  padding-right:7px; display: inline-block;'>
+            <span style='display:inline-block;font-size:16px'>图例库管理</span>
-                <img src='@/assets/imgs/go-back.png' @click='goBack' alt style='cursor: pointer;' />
+            <span class='library-btn'>
-            </div>
+                <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
-            <span style='float: left;display: inline-block;font-size:14px;padding-top: 2px;color:#1F2429;cursor: pointer;' @click='goBack'>返回</span>
+                <el-button size='small' type='primary' @click='add'>添加图例</el-button>
-            图例绘制规则
+            </span>
-            <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
         </div>
         </div>
-        <div class='legend-rules-bottom'>
+        <div class='legend-library-bottom'>
-            <div class='legend-rules-left'>
+            <div class='select-box'>
-                <!-- <p>楼层功能</p> -->
+                <Select
-                <!-- <el-tree :data='treeData' :default-checked-keys='`GDXT`' :props='defaultProps' default-expand-all @node-click='handleNodeClick'></el-tree> -->
+                    width='180'
-                <a-tree
+                    tipPlace='top'
-                    :tree-data='treeData'
+                    caption='所属分类:'
-                    v-if='treeData.length'
+                    v-model='Type'
-                    defaultExpandAll
+                    :selectdata='typeOptions'
-                    :replaceFields='defaultProps'
+                    :placeholder='"请选择"'
-                    :default-selected-keys='["GDXT"]'
+                    @change='getTableList'
-                    @select='handleNodeClick'
+                    :hideClear='true'
-                ></a-tree>
+                ></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>
-            <div class='legend-rules-right'>
+            <el-table :data='tableData' v-loading='loading' :key='key' :border='true' style='width: 100%'>
-                <!-- <el-table :data='tableData' style='width: 100%'>
+                <el-table-column prop='Name' label='图例编码' width='180'>
-                    <el-table-column prop='Name' label='图例名称'>
+                    <template slot-scope='{row}'>{{row.Id }}</template>
-                        <template slot-scope='{row}'>{{row.Name || '--'}}</template>
+                </el-table-column>
-                    </el-table-column>
+                <el-table-column prop='Name' label='图例名称' width='180'>
-                    <el-table-column prop='Url' label='图例样式'>
+                    <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}'>
                         <template slot-scope='{row}'>
-                            <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
+                            <span>{{row.InfoSystem.length ?row.InfoSystem.map(item => item.Name).join(' ,') :''}}</span>
-                            <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>
                         </template>
                         </template>
-                    </el-table-column>
+                </el-table-column>-->
-                </el-table>-->
+
-                <Table
+                <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140' show-overflow-tooltip>
-                    :head='headList2'
+                    <template slot-scope='{row}'>
-                    :source='tableData'
+                        <span>{{row.InfoTypes.length ?row.InfoTypes.map(item => `${item.Id }-${item.Name}`).join(' ,'):'' }}</span>
-                    :toolButtons='toolBtns'
+                    </template>
-                    :selectWidth='200'
+                </el-table-column>
-                    height='100%'
+                <el-table-column label='操作' width='100' v-if='state==1'>
-                    @tool-button-click='buttonClickHandle'
+                    <template slot-scope='scope' v-if='state==1'>
-                >
+                        <el-button @click='modifyClick(scope.row)' type='text'>修改</el-button>
-                    <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
+                        <el-button @click='deleteClick(scope.row)' type='text'>作废</el-button>
-                    <span slot-scope='{col}' v-else-if='col.key==="caozuo"' style='color:#0091FF'>删除</span>
+                    </template>
-                </Table>
+                </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>
         </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>
     </div>
 </template>
 </template>
 <script>
 <script>
-import addLegend from '../legendLibrary/addLegend'
+import addLegend from './addLegend'
-import { updateRelation, getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
+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 {
 export default {
-    components: { addLegend },
+    components: { addLegend, Select },
     data() {
     data() {
         return {
         return {
-            treeData: [],
+            loading: true,
-            GraphCategoryId: ['GDXT'],
+            deleteObject: {},
+            modalStatusTip: false,
             tableData: [],
             tableData: [],
-            defaultProps: {
+            key: 1,
-                children: 'Category',
+            dataSelect2: [
-                title: 'Name',
+                { id: 'test1', name: '选择项' },
-                key: 'Id'
+                { id: 'test2', name: '单平米' },
-            }, //test
+                { id: 'test3', name: '下级分项' },
-            // 可筛选表格表头列表
+                { id: 'test4', name: '滑动平均滑动平均' }
-            headList2: [
+            ],
-                {
+            stateSelect: [
-                    title: '图例名称', // 列的名称
+                { id: '1', name: '正常' },
-                    key: 'Name', // 列的标识
+                { id: '0', name: '已作废' }
-                    show: true // 是否显示该列
+            ],
-                },
+            Type: 'all', //所属分类
+            selText: '图例库管理',
+            selVal: '0',
+            dataSelect: [
+                { id: '0', name: '图例库管理' },
+                { id: '1', name: '图例绘制规则' }
+            ],
+            typeOptions: [
                 {
                 {
-                    title: '图例样式',
+                    id: 'all',
-                    key: 'Url',
+                    name: '全部'
-                    show: true
                 },
                 },
                 {
                 {
-                    title: '单位',
+                    id: 'None',
-                    key: 'Unit',
+                    name: '非图例'
-                    show: true
                 },
                 },
                 {
                 {
-                    title: '操作',
+                    id: 'Zone',
-                    key: 'caozuo',
+                    name: '区域'
-                    show: true
-                }
-            ],
-            // 操作按钮组 (非必填)
-            toolBtns: [
-                {
-                    icon: 'ascendingOrder',
-                    name: '上移'
                 },
                 },
                 {
                 {
-                    icon: 'descendingOrder',
+                    id: 'Image',
-                    name: '下移'
+                    name: '图标'
                 },
                 },
                 {
                 {
-                    icon: 'close',
+                    id: 'Line',
-                    name: '删除'
+                    name: '线条'
                 }
                 }
             ],
             ],
-            selText: '图例绘制规则',
+            TypeId: '',
-            selVal: '1',
+            typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
-            dataSelect: [
+            size: 10,
-                { id: '0', name: '图例库管理' },
+            total: 0,
-                { id: '1', name: '图例绘制规则' }
+            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: {
     watch: {
@@ -143,231 +300,376 @@ export default {
         }
         }
     },
     },
     methods: {
     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({
+        instruction() {
-                            GraphElementId: i.Id,
+            let getParams = {}
-                            OrderId: index
+            getLegendTree({ getParams }).then(res => {
-                        })
+                this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
-                    })
+            })
-                    _this.upDateGraphy(list)
+        },
-                }
+        //监听取消 修改的时候取消会导致表格不刷新
-            }
+        cancal(info) {
-
+            console.log(info)
-            function down() {
+            this.key++
-                let list = []
+            this.getTableList()
-                if (index == _this.tableData.length - 1) {
+        },
-                    _this.$message.error('处于底端,不可再下移')
+        dumpRules() {
-                } else {
+            this.$router.push('/home/legendRules')
-                    let downDate = _this.tableData[index + 1]
+        },
-                    _this.tableData.splice(index + 1, 1)
+        getTypeId() {
-                    _this.tableData.splice(index, 0, downDate)
+            let postParams = {}
-                    _this.tableData.forEach((i, index) => {
+            queryTypeId({ postParams }).then(res => {
-                        list.push({
+                this.typeIdSelect = res.Content
-                            GraphElementId: i.Id,
+            })
-                            OrderId: index
+        },
-                        })
+        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)
+            })
-                }
-            }
         },
         },
-        // 更新图例关系信息
+        getTree(data) {
-        upDateGraphy(list) {
+            let child = data.Children || data.Category
-            let postParams = {
+            return {
-                GraphCategoryId: this.GraphCategoryId[0],
+                id: data.Id,
-                GraphRelations: list
+                name: data.Name,
+                children: child ? child.map(i => this.getTree(i)) : []
             }
             }
-
-            updateRelation({ postParams }).then(res => {
-                this.getData()
-            })
         },
         },
-
+        add() {
-        handleNodeClick(data, e) {
+            this.$refs.addLegend.open('', '添加图例库')
-            this.GraphCategoryId = [e.node.eventKey]
-            this.getData()
         },
         },
-        deleteClick(row) {
+        modifyClick(row) {
+            this.$refs.addLegend.open(row, '修改图例库')
+        },
+        modalConfirm() {
             let postParams = [
             let postParams = [
                 {
                 {
-                    GraphCategoryId: this.GraphCategoryId[0],
+                    Id: this.deleteObject.Id
-                    GraphElementId: row.Id
                 }
                 }
             ]
             ]
-            deleteRelation({ postParams }).then(res => {
+            deleteLegend({ postParams })
-                if (res.Result == 'success') {
+                .then(res => {
+                    if (res.Result == 'success') {
+                        this.$message({
+                            type: 'success',
+                            message: '作废成功!'
+                        })
+                        this.modalStatusTip = false
+                        this.getTableList()
+                    }
+                })
+                .catch(() => {
                     this.$message({
                     this.$message({
-                        type: 'success',
+                        type: 'info',
-                        message: '删除成功!'
+                        message: '已取消删除'
                     })
                     })
-                    this.getData()
+                })
-                }
-            })
         },
         },
-        mesg() {
+        deleteClick(row) {
-            this.getData()
+            this.deleteObject = row
+            this.modalStatusTip = true
         },
         },
-        add() {
+        pageChanged(page, size) {
-            this.$refs.addLegends.open('', '', this.GraphCategoryId)
+            this.currentPage = page
+            this.getTableTata()
         },
         },
-        init() {
+        getTableListPosition(val) {
-            let getParams = {}
+            let postParams = val.map(({ id }) => id)
-            getLegendTree({ getParams }).then(res => {
+            let data = {}
-                // this.treeData = res.Content
+            queryRelation({ data, postParams }).then(res => {
-                this.treeData = this.recursion(res.Content)
+                this.tableData = res.data.Content
-                this.getData()
+                this.loading = false
+                this.total = res.Total
             })
             })
         },
         },
-        recursion(arr) {
+        transformDate(arr) {
-            arr.map(i => {
+            arr.map(({ GraphCategorys, InfoLocal, InfoSystems, InfoTypes }) => {
-                i.selectable = true
+                if (GraphCategorys.length) {
-                if (i.Category && i.Category.length > 0) {
+                    GraphCategorys.map(i => i)
-                    i.selectable = false
+                }
-                    this.recursion(i.Category)
+                if (InfoLocal.length) {
+                    GraphCategorys.map(i => {
+                        i.name
+                    })
+                }
+                if (InfoSystems.length) {
+                    GraphCategorys.map()
+                }
+                if (InfoTypes.length) {
+                    GraphCategorys.map()
                 }
                 }
-                return i
             })
             })
             return arr
             return arr
         },
         },
-        getData() {
+        getTableTata() {
-            let postParams = this.GraphCategoryId
+            let postParams = {
-            let data = {}
+                Deleted: this.state == 1 ? false : true,
-            queryRelation({ data, postParams }).then(res => {
+                GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
-                this.tableData = res.data.Content
+                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() {
     mounted() {
-        this.init()
+        this.getTypeId()
+        this.instruction()
+        this.visualization()
+        this.getTableList()
+        this.initQueryDeviceAndPOsition()
     }
     }
 }
 }
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
-.legend-rules {
+.legend-library {
-    background: rgba(247, 249, 250, 1);
-    height: 100%;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
-    color: #1f2329;
+    height: 100%;
-
     .nav {
     .nav {
         height: 48px;
         height: 48px;
         line-height: 48px;
         line-height: 48px;
         width: 100%;
         width: 100%;
         background: #fff;
         background: #fff;
         margin-left: 17px;
         margin-left: 17px;
+        display: flex;
+        align-items: center;
         .img-menu {
         .img-menu {
             margin-right: 9px;
             margin-right: 9px;
         }
         }
         .img-logo {
         .img-logo {
             margin: 0 9px;
             margin: 0 9px;
         }
         }
+        .nav-span1 {
+            height: 26px;
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(31, 35, 41, 1);
+            line-height: 26px;
+        }
         .circular {
         .circular {
             display: inline-block;
             display: inline-block;
             width: 4px;
             width: 4px;
             height: 4px;
             height: 4px;
             background: rgba(195, 198, 203, 1);
             background: rgba(195, 198, 203, 1);
             border-radius: 50%;
             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 {
     /deep/ .p-drop .p-drop-title .p-drop-triangle {
         margin-top: -5px;
         margin-top: -5px;
     }
     }
-    .legend-rules-top {
+    .legend-library-top {
+        height: 45px;
+        background: rgba(247, 249, 250, 1);
         text-align: center;
         text-align: center;
-        height: 48px;
         line-height: 48px;
         line-height: 48px;
-        font-size: 16px;
+        color: #1f2329;
-        .rules-button {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        .library-btn {
             float: right;
             float: right;
             margin-right: 16px;
             margin-right: 16px;
-            margin-top: 8px;
         }
         }
     }
     }
-    .legend-rules-bottom {
+    .legend-library-bottom {
         flex: 1;
         flex: 1;
-        display: flex;
+        background: #fff;
-        .legend-rules-left {
+        padding: 0 16px;
-            // width: 288px;
+        .select-box {
-            // padding: 26px;
+            height: 56px;
+            line-height: 56px;
+            min-width: 1344px;
+            display: flex;
+            align-items: center;
         }
         }
-        .legend-rules-right {
+        .img {
-            padding: 16px;
+            width: 28px;
-            background: #fff;
+            height: 28px;
-            color: #1f2429;
+        }
-            width: calc(100% - 290px);
+        .img1 {
-            .img {
+            width: 32px;
-                width: 28px;
+            height: 18px;
-                height: 28px;
-            }
         }
         }
     }
     }
-}
+    .foot {
-</style>
+        height: 32px;
-<style lang="less" >
+        display: flex;
-.legend-rules {
+        justify-content: flex-end;
-    .el-tree {
+        margin-top: 28px;
-        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;
     }
     }
-    /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    /deep/ .p-select-input-content {
-        background: transparent !important;
+        line-height: 32px;
-        color: #0091ff !important;
     }
     }
-    /deep/ .ant-tree li .ant-tree-node-content-wrapper:hover {
+    .device-position {
-        background: transparent !important;
+        /deep/ .p-select-input-caption {
+            display: block !important;
+            width: 250px !important;
+            max-width: 250px !important;
+        }
     }
     }
-    /deep/ .p-inner-container {
+    .instructions {
-        overflow-x: hidden;
+        /deep/ .p-select-input-caption {
+            display: block !important;
+            width: 100px !important;
+            max-width: 200px !important;
+        }
     }
     }
-    .is-current {
+    .visualization {
-        background: #e1f2ff !important;
+        /deep/ .p-select-input-caption {
-        border-radius: 4px;
+            display: block !important;
-        font-size: 14px;
+            width: 100px !important;
-        color: rgba(0, 145, 255, 1);
+            max-width: 200px !important;
+        }
     }
     }
+}
+</style>
+<style lang="less">
+.legend-library {
     th {
     th {
         font-size: 12px;
         font-size: 12px;
-        font-family: MicrosoftYaHei;
+        color: #646a73 !important;
-        color: #646a73;
+        padding: 6px 0 !important;
-        height: 40px;
         background: rgba(248, 249, 250, 1);
         background: rgba(248, 249, 250, 1);
     }
     }
     td {
     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>
 </style>