123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- <template>
- <!-- 图例库首页 -->
- <div class='legend-rules'>
- <!-- <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>
- <Dropdown v-model='selVal' :data='dataSelect'>
- <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
- </Dropdown>
- </div>-->
- <div class='legend-rules-top'>
- <span
- class='el-icon-arrow-left'
- @click='goBack'
- style='float: left;
- cursor: pointer;
- font-size: 25px;
- display: inline-block;
- margin-top: 10px;
- padding-left: 20px;'
- ></span>图例绘制规则
- <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
- </div>
- <div class='legend-rules-bottom'>
- <div class='legend-rules-left'>
- <!-- <p>楼层功能</p> -->
- <!-- <el-tree :data='treeData' :default-checked-keys='`GDXT`' :props='defaultProps' default-expand-all @node-click='handleNodeClick'></el-tree> -->
- <a-tree
- :tree-data='treeData'
- v-if='treeData.length'
- defaultExpandAll
- :replaceFields='defaultProps'
- :default-selected-keys='["GDXT"]'
- @select='handleNodeClick'
- ></a-tree>
- </div>
- <div class='legend-rules-right'>
- <!-- <el-table :data='tableData' style='width: 100%'>
- <el-table-column prop='Name' label='图例名称'>
- <template slot-scope='{row}'>{{row.Name || '--'}}</template>
- </el-table-column>
- <el-table-column prop='Url' label='图例样式'>
- <template slot-scope='{row}'>
- <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
- <span v-else>{{'--'}}</span>
- </template>
- </el-table-column>
- <el-table-column prop label='单位'>
- <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
- </el-table-column>
- <el-table-column label='操作' width='100'>
- <template slot-scope='scope'>
- <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
- </template>
- </el-table-column>
- </el-table>-->
- <Table
- :head='headList2'
- :source='tableData'
- :toolButtons='toolBtns'
- :selectWidth='180'
- height='100%'
- @tool-button-click='buttonClickHandle'
- >
- <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
- </Table>
- </div>
- </div>
- <add-legend ref='addLegend' @mesg='mesg'></add-legend>
- </div>
- </template>
- <script>
- import addLegend from '../legendLibrary/addLegend'
- import { getLegendTree, queryRelation, deleteRelation, graphElementUpdate } from '@/api/legendLibrary.js'
- export default {
- components: { addLegend },
- data() {
- return {
- treeData: [],
- GraphCategoryId: ['GDXT'],
- tableData: [],
- defaultProps: {
- children: 'Category',
- title: 'Name',
- key: 'Id'
- }, //test
- // 可筛选表格表头列表
- headList2: [
- {
- title: '图例名称', // 列的名称
- key: 'Name', // 列的标识
- show: true // 是否显示该列
- },
- {
- title: '图例样式',
- key: 'Url',
- show: true
- },
- {
- title: '单位',
- key: 'Unit',
- show: true
- }
- ],
- // 操作按钮组 (非必填)
- toolBtns: [
- {
- icon: 'copy',
- name: '上移'
- },
- {
- icon: 'print',
- name: '下移'
- },
- {
- icon: 'pending',
- name: '删除'
- }
- ],
- selText: '图例绘制规则',
- selVal: '1',
- dataSelect: [
- { id: '0', name: '图例库管理' },
- { id: '1', name: '图例绘制规则' }
- ]
- }
- },
- 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: {
- goBack() {
- this.$router.push({ path: 'legendLibrary' })
- },
- 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() {
- 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)
- let ids = _this.tableData.map(({ Id }) => Id)
- _this.upDateGraphy(ids)
- }
- }
- function down() {
- if (index == _this.tableData.length - 1) {
- _this.$message.error('处于底端,不可再下移')
- } else {
- let downDate = _this.tableData[index + 1]
- _this.tableData.splice(index + 1, 1)
- _this.tableData.splice(index, 0, downDate)
- let ids = _this.tableData.map(({ Id }) => Id)
- _this.upDateGraphy(ids)
- }
- }
- },
- // 更新图例关系信息
- upDateGraphy(ids) {
- let posParams = {
- GraphCategoryId: this.GraphCategoryId[0],
- GraphElementIds: ids,
- Move: true
- }
- graphElementUpdate({ posParams }).then(res => {
- this.getData()
- })
- },
- handleNodeClick(data, e) {
- this.GraphCategoryId = [e.node.eventKey]
- this.getData()
- },
- deleteClick(row) {
- let postParams = [
- {
- GraphCategoryId: this.GraphCategoryId[0],
- GraphElementId: row.Id
- }
- ]
- deleteRelation({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message({
- type: 'success',
- message: '删除成功!'
- })
- this.getData()
- }
- })
- },
- mesg() {
- this.getData()
- },
- add() {
- this.$refs.addLegend.open('', '', this.GraphCategoryId)
- },
- init() {
- let getParams = {}
- getLegendTree({ getParams }).then(res => {
- this.treeData = res.Content
- this.getData()
- })
- },
- getData() {
- let postParams = this.GraphCategoryId
- let data = {}
- queryRelation({ data, postParams }).then(res => {
- this.tableData = res.data.Content
- })
- }
- },
- mounted() {
- this.init()
- }
- }
- </script>
- <style lang="less" scoped>
- .legend-rules {
- background: rgba(247, 249, 250, 1);
- height: 100%;
- display: flex;
- flex-direction: column;
- color: #1f2329;
- .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;
- }
- }
- /deep/ .p-drop .p-drop-title .p-drop-triangle {
- margin-top: -5px;
- }
- .legend-rules-top {
- text-align: center;
- height: 48px;
- line-height: 48px;
- font-size: 16px;
- .rules-button {
- float: right;
- margin-right: 16px;
- margin-top: 8px;
- }
- }
- .legend-rules-bottom {
- flex: 1;
- display: flex;
- .legend-rules-left {
- // width: 288px;
- // padding: 26px;
- }
- .legend-rules-right {
- padding: 16px;
- flex: 1;
- background: #fff;
- color: #1f2429;
- .img {
- width: 28px;
- height: 28px;
- }
- }
- }
- }
- </style>
- <style lang="less" >
- .legend-rules {
- .el-tree {
- background: rgba(247, 249, 250, 1);
- }
- .is-current {
- background: #e1f2ff !important;
- border-radius: 4px;
- font-size: 14px;
- color: rgba(0, 145, 255, 1);
- }
- th {
- font-size: 12px;
- font-family: MicrosoftYaHei;
- color: #646a73;
- height: 40px;
- background: rgba(248, 249, 250, 1);
- }
- td {
- color: #1f2429;
- }
- }
- </style>
|