viewLengend.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.29
  4. *@info:图例展示状态
  5. */
  6. <template>
  7. <div class='views'>
  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}' v-if='row.Properties && row.Properties.ItemExplain'>
  18. <span>{{row.Properties.ItemExplain}}</span>
  19. </template>
  20. </el-table-column>
  21. <el-table-column prop label='图例' width='60' align='center'>
  22. <template slot-scope='{row}' v-if='row.Properties && row.Properties.ItemExplain'>
  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' :selectable='checkSelectable' width='45' align='center'></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-if='row.Num==null'></span>
  46. <span v-else>{{'--'}}</span>
  47. </template>
  48. </el-table-column>
  49. <el-table-column prop='Unit' label='单位' width='70'>
  50. <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
  51. </el-table-column>
  52. <el-table-column prop='Url' label='图例' width='55' align='center'>
  53. <template slot-scope='{row}'>
  54. <div v-if='row.Url' class='Url-img'>
  55. <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
  56. </div>
  57. <div v-else>{{'--'}}</div>
  58. </template>
  59. </el-table-column>
  60. </el-table>
  61. <div class='swich'>
  62. <el-switch v-model='swich' @change='handleSwich(swich)'></el-switch>
  63. <span>隐藏数量为0的项目</span>
  64. </div>
  65. <div class='remark' v-if='remarksText'>
  66. <span class='remark-title'>注:</span>
  67. <div :key='key' v-html='remarksText' class='remark-text'></div>
  68. </div>
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import bus from '@/utils/bus.js'
  74. import { mapGetters } from 'vuex'
  75. export default {
  76. props: ['loading', 'systemName'],
  77. data() {
  78. return {
  79. swich: true,
  80. multipleSelection: [],
  81. key: 0
  82. }
  83. },
  84. methods: {
  85. // 所属分类 非图例 默认不能勾选
  86. checkSelectable(row, index) {
  87. let flag = false
  88. if (row.Type != 'None') {
  89. flag = true
  90. }
  91. return flag
  92. },
  93. handleSelectionChange(val) {
  94. this.multipleSelection = val
  95. const tempArr = val.map(t => {
  96. return t.GraphElementId
  97. })
  98. bus.$emit('changeShow', tempArr)
  99. },
  100. handleSwich(val) {
  101. this.$emit('changeSwitch', val)
  102. },
  103. setSelected() {
  104. this.legendTable.forEach(t => {
  105. this.$refs.dataTable.toggleRowSelection(t, t.Type != 'None')
  106. })
  107. }
  108. },
  109. computed: {
  110. ...mapGetters(['scpzTable', 'legendTable', 'remarksText'])
  111. },
  112. mounted() {},
  113. watch: {
  114. '$store.state.remarksText': {
  115. handler(oVal, nVal) {
  116. if (oVal != nVal) {
  117. this.key++
  118. }
  119. },
  120. deep: true
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="less" scoped>
  126. .views {
  127. .swich {
  128. display: flex;
  129. justify-content: flex-end;
  130. align-items: center;
  131. margin-top: 8px;
  132. margin-right: 4px;
  133. margin-bottom: 12px;
  134. span {
  135. margin-left: 8px;
  136. }
  137. }
  138. .scpz-img {
  139. width: 32px;
  140. height: 16px;
  141. }
  142. .remark {
  143. font-size: 12px;
  144. font-family: MicrosoftYaHeiSemibold;
  145. color: rgba(31, 35, 41, 1);
  146. line-height: 16px;
  147. display: flex;
  148. .remark-title {
  149. font-weight: bold;
  150. }
  151. .remark-text {
  152. white-space: normal;
  153. word-break: break-all;
  154. p {
  155. padding: 0;
  156. }
  157. }
  158. }
  159. .Url-img {
  160. width: 20px;
  161. height: 22px;
  162. line-height: 20px;
  163. margin: 0 auto;
  164. img {
  165. display: block;
  166. max-width: 100%;
  167. max-height: 100%;
  168. margin: 0 auto;
  169. }
  170. }
  171. }
  172. </style>
  173. <style lang="less">
  174. .views {
  175. .el-input--mini .el-input__inner {
  176. width: 50px;
  177. }
  178. .el-input__inner {
  179. padding: 0 5px;
  180. }
  181. /deep/ .legend-container .el-table td,
  182. .legend-container .el-table th {
  183. padding: 3px 0 !important;
  184. }
  185. .nullData {
  186. .el-input__inner {
  187. color: #ccc !important;
  188. }
  189. }
  190. .redData {
  191. .el-input__inner {
  192. border: 1px solid rgba(255, 77, 79, 0.5) !important;
  193. }
  194. }
  195. }
  196. </style>