viewLengend.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.29
  4. *@info:图例展示状态
  5. */
  6. <template>
  7. <div class='view'>
  8. <div v-if='systemName=="土建系统"'>
  9. <el-table
  10. ref='dataTable'
  11. :data='scpzTable'
  12. tooltip-effect='dark'
  13. style='width:100%;'
  14. :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
  15. >
  16. <el-table-column prop label='说明'>
  17. <template slot-scope='{row}'>
  18. <span>{{(row.Properties && row.Properties.ItemExplain)?row.Properties.ItemExplain:'--'}}</span>
  19. </template>
  20. </el-table-column>
  21. <el-table-column prop label='图例' width='60'>
  22. <template slot-scope='{row}'>
  23. <div class='scpz-img' :style='`background:${row.Properties.FillColor};border:1px solid ${row.Properties.StrokeColor}`'></div>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. </div>
  28. <div v-else>
  29. <el-table
  30. ref='dataTable'
  31. v-if='legendTable.length>=0'
  32. :data='legendTable'
  33. tooltip-effect='dark'
  34. style='width:100%;'
  35. @selection-change='handleSelectionChange'
  36. :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
  37. >
  38. <el-table-column type='selection' width='45'></el-table-column>
  39. <el-table-column prop='Name' :show-overflow-tooltip='true' label='项目' width='100'>
  40. <template slot-scope='{row}'>{{row.Name||'--'}}</template>
  41. </el-table-column>
  42. <el-table-column prop='Num' label='数量'>
  43. <template slot-scope='{row}'>
  44. <span v-if='row.Num || row.Num==0'>{{row.Num}}</span>
  45. <span v-else>--</span>
  46. </template>
  47. </el-table-column>
  48. <el-table-column prop='Unit' label='单位' width='70'>
  49. <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
  50. </el-table-column>
  51. <el-table-column prop='Url' label='图例' width='55'>
  52. <template slot-scope='{row}'>
  53. <div v-if='row.Url' class='Url-img'>
  54. <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
  55. </div>
  56. <div v-else>{{'--'}}</div>
  57. </template>
  58. </el-table-column>
  59. </el-table>
  60. <div class='swich'>
  61. <el-switch v-model='swich' @change='handleSwich(swich)'></el-switch>
  62. <span>隐藏数量为0的项目</span>
  63. </div>
  64. <div class='remark' v-if='remarksText'>
  65. <span class='remark-title'>注:</span>
  66. <div :key='key' v-html='remarksText' class='remark-text'></div>
  67. </div>
  68. </div>
  69. </div>
  70. </template>
  71. <script>
  72. import bus from '@/utils/bus.js'
  73. import { mapGetters } from 'vuex'
  74. export default {
  75. props: ['loading', 'systemName'],
  76. data() {
  77. return {
  78. swich: true,
  79. multipleSelection: [],
  80. key: 0
  81. }
  82. },
  83. methods: {
  84. handleSelectionChange(val) {
  85. this.multipleSelection = val
  86. const tempArr = val.map(t => {
  87. return t.GraphElementId
  88. })
  89. bus.$emit('changeShow', tempArr)
  90. },
  91. handleSwich(val) {
  92. this.$emit('changeSwitch', val)
  93. },
  94. setSelected() {
  95. this.legendTable.forEach(t => {
  96. this.$refs.dataTable.toggleRowSelection(t, true)
  97. })
  98. }
  99. },
  100. computed: {
  101. ...mapGetters(['scpzTable', 'legendTable', 'remarksText'])
  102. },
  103. mounted() {},
  104. watch: {
  105. '$store.state.remarksText': {
  106. handler(oVal, nVal) {
  107. if (oVal != nVal) {
  108. this.key++
  109. }
  110. },
  111. deep: true
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="less" scoped>
  117. .view {
  118. .swich {
  119. display: flex;
  120. justify-content: flex-end;
  121. align-items: center;
  122. margin-top: 8px;
  123. margin-right: 4px;
  124. margin-bottom: 12px;
  125. span {
  126. margin-left: 8px;
  127. }
  128. }
  129. .scpz-img {
  130. width: 32px;
  131. height: 16px;
  132. }
  133. .remark {
  134. font-size: 12px;
  135. font-family: MicrosoftYaHeiSemibold;
  136. color: rgba(31, 35, 41, 1);
  137. line-height: 16px;
  138. display: flex;
  139. .remark-title {
  140. font-weight: bold;
  141. }
  142. .remark-text {
  143. white-space: normal;
  144. word-break: break-all;
  145. p {
  146. padding: 0;
  147. }
  148. }
  149. }
  150. .Url-img {
  151. width: 20px;
  152. height: 22px;
  153. line-height: 20px;
  154. img {
  155. width: 100%;
  156. height: 100%;
  157. }
  158. }
  159. }
  160. </style>
  161. <style lang="less">
  162. .view {
  163. .el-input--mini .el-input__inner {
  164. width: 50px;
  165. }
  166. .el-input__inner {
  167. padding: 0 5px;
  168. }
  169. /deep/ .legend-container .el-table td,
  170. .legend-container .el-table th {
  171. padding: 3px 0 !important;
  172. }
  173. .nullData {
  174. .el-input__inner {
  175. color: #ccc !important;
  176. }
  177. }
  178. .redData {
  179. .el-input__inner {
  180. border: 1px solid rgba(255, 77, 79, 0.5) !important;
  181. }
  182. }
  183. }
  184. </style>