index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <!-- 图例库首页 -->
  3. <div class='legend-rules'>
  4. <div class='legend-rules-top'>
  5. 图例绘制规则
  6. <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
  7. </div>
  8. <div class='legend-rules-bottom'>
  9. <div class='legend-rules-left'>
  10. <p>楼层功能</p>
  11. <el-tree :data='treeData' default-expand-all @node-click='handleNodeClick'></el-tree>
  12. </div>
  13. <div class='legend-rules-right'>
  14. <el-table :data='tableData' style='width: 100%'>
  15. <el-table-column prop='Name' label='图例名称'>
  16. <template slot-scope='{row}'>{{row.Name || '--'}}</template>
  17. </el-table-column>
  18. <el-table-column prop='Url' label='图例样式'>
  19. <template slot-scope='{row}'>
  20. <img v-if='row.Url' class='img' :src='`/serve/Picture/query/${row.Url}`' alt />
  21. <span v-else>{{'--'}}</span>
  22. </template>
  23. </el-table-column>
  24. <el-table-column prop label='单位'>
  25. <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
  26. </el-table-column>
  27. <el-table-column label='操作' width='100'>
  28. <template slot-scope='scope'>
  29. <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
  30. </template>
  31. </el-table-column>
  32. </el-table>
  33. </div>
  34. </div>
  35. <add-legend ref='addLegend' @mesg='mesg'></add-legend>
  36. </div>
  37. </template>
  38. <script>
  39. import addLegend from '../legendLibrary/addLegend'
  40. import { getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
  41. export default {
  42. components: { addLegend },
  43. data() {
  44. return {
  45. treeData: [],
  46. GraphCategoryId: 'JPSXT',
  47. tableData: []
  48. }
  49. },
  50. methods: {
  51. handleNodeClick(data) {
  52. this.GraphCategoryId = data.Id
  53. this.getData()
  54. },
  55. deleteClick(row) {
  56. console.log(row)
  57. let postParams = [
  58. {
  59. GraphCategoryId: this.GraphCategoryId,
  60. GraphElementId: row.Id
  61. }
  62. ]
  63. deleteRelation({ postParams }).then(res => {
  64. if (res.Result == 'success') {
  65. this.$message({
  66. type: 'success',
  67. message: '删除成功!'
  68. })
  69. this.getData()
  70. }
  71. })
  72. },
  73. mesg() {
  74. this.getData()
  75. },
  76. add() {
  77. this.$refs.addLegend.open('', '', this.GraphCategoryId)
  78. },
  79. init() {
  80. let getParams = {}
  81. getLegendTree({ getParams }).then(res => {
  82. console.log(res)
  83. let content = res.Content
  84. content.forEach(el => {
  85. el.label = el.Name
  86. el.children = el.Category || []
  87. el.Category.forEach(ele => {
  88. ele.label = ele.Name
  89. })
  90. })
  91. this.treeData = content
  92. this.getData()
  93. })
  94. },
  95. getData() {
  96. let postParams = {
  97. GraphCategoryId: this.GraphCategoryId
  98. }
  99. queryRelation({ postParams }).then(res => {
  100. this.tableData = res.Content
  101. })
  102. }
  103. },
  104. mounted() {
  105. this.init()
  106. }
  107. }
  108. </script>
  109. <style lang="less" scoped>
  110. .legend-rules {
  111. background: rgba(247, 249, 250, 1);
  112. height: 100%;
  113. display: flex;
  114. flex-direction: column;
  115. color: #1f2329;
  116. .legend-rules-top {
  117. text-align: center;
  118. height: 48px;
  119. line-height: 48px;
  120. font-size: 16px;
  121. .rules-button {
  122. float: right;
  123. margin-right: 16px;
  124. margin-top: 8px;
  125. }
  126. }
  127. .legend-rules-bottom {
  128. flex: 1;
  129. display: flex;
  130. .legend-rules-left {
  131. width: 288px;
  132. padding: 26px;
  133. }
  134. .legend-rules-right {
  135. padding: 16px;
  136. flex: 1;
  137. background: #fff;
  138. color: #1f2429;
  139. .img {
  140. width: 28px;
  141. height: 28px;
  142. }
  143. }
  144. }
  145. }
  146. </style>
  147. <style lang="less" >
  148. .legend-rules {
  149. .el-tree {
  150. background: rgba(247, 249, 250, 1);
  151. }
  152. .is-current {
  153. background: #e1f2ff !important;
  154. border-radius: 4px;
  155. font-size: 14px;
  156. color: rgba(0, 145, 255, 1);
  157. }
  158. th {
  159. font-size: 12px;
  160. font-family: MicrosoftYaHei;
  161. color: #646a73;
  162. height: 40px;
  163. background: rgba(248, 249, 250, 1);
  164. }
  165. td {
  166. color: #1f2429;
  167. }
  168. }
  169. </style>