123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482 |
- <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 style='color:#1F2329'>万达管理说明书</span>
- <span class='circular'></span>
- <span style='color:#1F2329'>图例库管理</span>
- <i class='el-icon-caret-bottom'></i>
- </div>
- <div class='legend-library-top'>
- 图例库管理
- <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>
- <TreeSelect
- caption='说明书位置:'
- tipPlace='top'
- width='180'
- style='margin:0 12px'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='positionSelect'
- @change='treeConfirmPosition'
- :hideClear='true'
- />
- <span class='device-position'>
- <TreeSelect
- caption='专业/设备、位置类型:'
- tipPlace='top'
- width='280'
- style='margin:0 12px'
- :isShowAllChoice='true'
- :returnParentNode='false'
- :choseArea='true'
- :data='deviceList'
- :hideClear='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'
- />-->
- <TreeSelect
- caption='铺位可视化:'
- tipPlace='top'
- width='250'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='typeVisualization'
- @change='treeConfirm'
- @focusChange='focusChange'
- :hideClear='true'
- />
- <Select
- width='180'
- 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' style='width:192px;margin-right:12px;'></el-input>
- </div>
- <el-table :data='tableData' :border='true' style='width: 100%'>
- <el-table-column prop='Name' label='图例名称'>
- <template slot-scope='{row}'>{{row.Name || '--'}}</template>
- </el-table-column>
- <el-table-column prop='style' label='图例样式'>
- <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='Unit' label='单位'>
- <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
- </el-table-column>
- <el-table-column prop='position' label='对应广场说明书的位置'>
- <template slot-scope='{row}'>{{row.position || '--'}}</template>
- </el-table-column>
- <el-table-column label='对应工程信息化' align='center'>
- <el-table-column prop='type' label='位置/设备分类' width='240'>
- <template slot-scope='{row}'>{{row.InfoLocal || '--'}}</template>
- </el-table-column>
- <el-table-column prop='system' label='专业'>
- <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
- </el-table-column>
- </el-table-column>
- <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140'>
- <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</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' size='small'>修改</el-button>
- <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</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='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
- </div>
- </template>
- <script>
- import addLegend from './addLegend'
- import Select from '@/components/Select/Select.vue'
- import {
- queryDeviceAndPOsition,
- graphElementSearch,
- getLegendTree,
- queryLegend,
- deleteLegend,
- queryTypeId,
- getVisualization,
- queryRelation
- } from '@/api/legendLibrary.js'
- export default {
- components: { addLegend, Select },
- data() {
- return {
- tableData: [],
- dataSelect2: [
- { id: 'test1', name: '选择项' },
- { id: 'test2', name: '单平米' },
- { id: 'test3', name: '下级分项' },
- { id: 'test4', name: '滑动平均滑动平均' }
- ],
- stateSelect: [
- { id: '1', name: '正常' },
- { id: '0', name: '已作废' }
- ],
- Type: 'all', //所属分类
- 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: undefined, //说明书位置勾选集合
- InfoLocals: undefined, //工程信息化
- InfoSystems: undefined, //工程信息化专业/系统
- InfoTypeIds: undefined //铺位可视化typeid
- }
- },
- methods: {
- //业下设备分类和位置分类树形结构
- initQueryDeviceAndPOsition() {
- let postParams = {}
- queryDeviceAndPOsition({ postParams }).then(res => {
- this.deviceList = res.data
- })
- },
- //说明书位置
- instruction() {
- let getParams = {}
- getLegendTree({ getParams }).then(res => {
- this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
- })
- },
- 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, '修改图例库')
- },
- deleteClick(row) {
- this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
- confirmButtonText: '作废',
- cancelButtonText: '取消',
- type: 'warning',
- center: true
- })
- .then(() => {
- let postParams = [
- {
- Id: row.Id
- }
- ]
- deleteLegend({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message({
- type: 'success',
- message: '作废成功!'
- })
- this.getTableList()
- }
- })
- })
- .catch(() => {
- this.$message({
- type: 'info',
- message: '已取消删除'
- })
- })
- },
- pageChanged(page, size) {
- this.currentPage = page
- this.getTableList()
- },
- getTableListPosition(val) {
- let postParams = val.map(({ id }) => id)
- let data = {}
- queryRelation({ data, postParams }).then(res => {
- this.tableData = res.data.Content
- this.total = res.Total
- })
- },
- getTableList() {
- let postParams = {
- Deleted: this.state == 1 ? false : true,
- GraphCategoryIds: this.GraphCategoryIds, //说明书位置
- InfoLocals: this.InfoLocals, //工程信息化位置与设备分类
- InfoSystems: this.InfoSystems, //工程信息化专业/系统
- InfoTypeIds: this.InfoTypeIds, //铺位可视化typeid
- Name: this.keyword,
- PageNumber: this.currentPage,
- PageSize: this.size,
- Type: this.Type == 'all' ? undefined : this.Type
- }
- graphElementSearch({ postParams }).then(res => {
- this.tableData = res.Content
- this.total = res.Total
- })
- },
- 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) {
- // console.log(id, info)
- // var a = []
- // var d = []
- // for (let i = 0; i < info.length; i++) {
- // let type = info[i]
- // if (type.name.includes('/')) {
- // a.push(type)
- // } else {
- // d.push(type)
- // }
- // }
- // console.log('a:', a, 'd:', d)
- 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%;
- .nav {
- height: 48px;
- line-height: 48px;
- width: 100%;
- background: #fff;
- margin-left: 17px;
- .img-menu {
- margin-right: 9px;
- }
- .img-logo {
- margin: 0 9px;
- }
- .circular {
- display: inline-block;
- width: 4px;
- height: 4px;
- background: rgba(195, 198, 203, 1);
- border-radius: 50%;
- margin: 0 8px 3px 8px;
- }
- }
- .legend-library-top {
- height: 48px;
- background: rgba(247, 249, 250, 1);
- text-align: center;
- line-height: 48px;
- color: #1f2329;
- .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;
- }
- }
- .foot {
- height: 32px;
- display: flex;
- justify-content: flex-end;
- margin-top: 28px;
- }
- /deep/ .p-select-input-content {
- line-height: 32px;
- }
- .device-position {
- /deep/ .p-date-picker-caption {
- display: block;
- width: 200px !important;
- max-width: 200px !important;
- }
- }
- }
- </style>
- <style lang="less">
- .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;
- }
- </style>
|