wanda-bm-guide/src/views/legendLibrary/index.vue

<template>
    <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 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-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-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'
                    @keyup.enter.native='getTableList'
                    prefix-icon='el-icon-search'
                    v-model='keyword'
                    clearable
                    class='search-input'
                    @clear='keyword = ""'
                ></el-input>
            </div>
            <el-table :data='tableData' v-loading='loading' :key='key' :border='true' style='width: 100%'>
                <el-table-column prop='Name' label='图例编码' width='73'>
                    <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='83'>
                    <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='60'>
                    <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}'>
                            <span>{{row.InfoSystem.length ?row.InfoSystem.map(item => item.Name).join(' ，') :''}}</span>
                        </template>
                </el-table-column>-->

                <el-table-column prop='typeId' resizable label='铺位可视化typeid' 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'
                    :current-page.sync='currentPage'
                    @prev-click='pageChanged'
                    @next-click='pageChanged'
                    @current-change='pageChanged'
                ></el-pagination>
            </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>
    </div>
</template>
<script>
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, Select },
    data() {
        return {
            loading: true,
            deleteObject: {},
            modalStatusTip: false,
            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: [
                {
                    id: 'all',
                    name: '全部'
                },
                {
                    id: 'None',
                    name: '非图例'
                },
                {
                    id: 'Zone',
                    name: '区域'
                },
                {
                    id: 'Image',
                    name: '图标'
                },
                {
                    id: 'Line',
                    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: {
        selVal(n, o) {
            if (n === o) return
            this.selText = this.dataSelect.find(d => d.id === n).name
            console.log(n, o)
            if (n == 0) {
                this.$router.push({ path: 'legendLibrary' })
            }
            if (n == 1) {
                this.$router.push({ path: 'legendRules' })
            }
        }
    },
    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
            })
        },

        //说明书位置
        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
                                      }
                                  })
                                : []
                        }
                    })
            })
        },
        getTree(data) {
            let child = data.Children || data.Category
            return {
                id: data.Id,
                name: data.Name,
                children: child ? child.map(i => this.getTree(i)) : []
            }
        },
        add() {
            this.$refs.addLegend.open('', '添加图例库')
        },
        modifyClick(row) {
            this.$refs.addLegend.open(row, '修改图例库')
        },
        modalConfirm() {
            let postParams = [
                {
                    Id: this.deleteObject.Id
                }
            ]
            deleteLegend({ postParams })
                .then(res => {
                    if (res.Result == 'success') {
                        this.$message({
                            type: 'success',
                            message: '作废成功!'
                        })
                        this.modalStatusTip = false
                        this.getTableList()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        deleteClick(row) {
            this.deleteObject = row
            this.modalStatusTip = true
        },
        pageChanged(page, size) {
            this.currentPage = page
            this.getTableTata()
        },
        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
            })
        },
        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 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.currentPage = 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.getTypeId()
        this.instruction()
        this.visualization()
        this.getTableList()
        this.initQueryDeviceAndPOsition()
    }
}
</script>
<style lang="less" scoped>
.legend-library {
    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;
        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;
        }
    }
    /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);
        text-align: center;
        line-height: 48px;
        color: #1f2329;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        .library-btn {
            float: right;
            margin-right: 16px;
        }
    }
    .legend-library-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;
        }
        .img1 {
            width: 32px;
            height: 18px;
        }
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
    /deep/ .p-select-input-content {
        line-height: 32px;
    }
    .device-position {
        /deep/ .p-select-input-caption {
            display: block !important;
            width: 250px !important;
            max-width: 250px !important;
        }
    }
    .instructions {
        /deep/ .p-select-input-caption {
            display: block !important;
            width: 100px !important;
            max-width: 200px !important;
        }
    }
    .visualization {
        /deep/ .p-select-input-caption {
            display: block !important;
            width: 100px !important;
            max-width: 200px !important;
        }
    }
}
</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;
        color: #646a73 !important;
        padding: 6px 0 !important;
        background: rgba(248, 249, 250, 1);
    }
    td {
        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>