123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- <template>
- <!-- 图例库首页 -->
- <div class='legend-rules'>
- <div class='legend-rules-top'>
- 图例绘制规则
- <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-expand-all @node-click='handleNodeClick'></el-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/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>
- </div>
- </div>
- <add-legend ref='addLegend' @mesg='mesg'></add-legend>
- </div>
- </template>
- <script>
- import addLegend from '../legendLibrary/addLegend'
- import { getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
- export default {
- components: { addLegend },
- data() {
- return {
- treeData: [],
- GraphCategoryId: 'JPSXT',
- tableData: []
- }
- },
- methods: {
- handleNodeClick(data) {
- this.GraphCategoryId = data.Id
- this.getData()
- },
- deleteClick(row) {
- console.log(row)
- let postParams = [
- {
- GraphCategoryId: this.GraphCategoryId,
- 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 => {
- console.log(res)
- let content = res.Content
- content.forEach(el => {
- el.label = el.Name
- el.children = el.Category || []
- el.Category.forEach(ele => {
- ele.label = ele.Name
- })
- })
- this.treeData = content
- this.getData()
- })
- },
- getData() {
- let postParams = {
- GraphCategoryId: this.GraphCategoryId
- }
- queryRelation({ postParams }).then(res => {
- this.tableData = res.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;
- .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>
|