|
@@ -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>
|