viewLengend.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.29
  4. *@info:图例展示状态
  5. */
  6. <template>
  7. <div class='view'>
  8. <el-table
  9. v-loading='loading'
  10. ref='dataTable'
  11. :data='viewTable'
  12. tooltip-effect='dark'
  13. style='width:100%'
  14. @selection-change='handleSelectionChange'
  15. height='400px'
  16. :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
  17. >
  18. <el-table-column type='selection' width='45'></el-table-column>
  19. <el-table-column prop='Name' :show-overflow-tooltip='true' label='项目' width='100'>
  20. <template slot-scope='{row}'>{{row.Name||'--'}}</template>
  21. </el-table-column>
  22. <el-table-column prop='Num' label='数量'>
  23. <template slot-scope='{row}'>
  24. <span v-if='row.Num || row.Num==0'>{{row.Num}}</span>
  25. <span v-else>--</span>
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop='Unit' label='单位' width='70'>
  29. <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
  30. </el-table-column>
  31. <el-table-column prop='Url' label='图例'>
  32. <template slot-scope='{row}'>
  33. <div v-if='row.Url' class='Url-img'>
  34. <img :src='`/serve/Picture/query/${row.Url}`' alt />
  35. </div>
  36. <div v-else>{{'--'}}</div>
  37. </template>
  38. </el-table-column>
  39. </el-table>
  40. <div class='swich'>
  41. <el-switch v-model='swich' @change='handleSwich'></el-switch>
  42. <span>隐藏数量为0的项目</span>
  43. </div>
  44. <div class='remark'>
  45. <span style='font-weight:bold'>注:</span>
  46. <!-- <div>
  47. 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
  48. <br />2.图例后 的数字,代表此位置的数量
  49. <br />3.图例后 的数字,代表此位置的数量
  50. </div>-->
  51. <div v-html='editText'></div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. export default {
  57. props: ['viewTable', 'loading', 'editText'],
  58. data() {
  59. return {
  60. swich: true,
  61. multipleSelection: []
  62. }
  63. },
  64. methods: {
  65. handleSelectionChange(val) {
  66. this.multipleSelection = val
  67. },
  68. handleSwich() {
  69. this.$emit('changeSwitch', this.swich)
  70. }
  71. },
  72. mounted() {}
  73. }
  74. </script>
  75. <style lang="less" scoped>
  76. .view {
  77. .swich {
  78. display: flex;
  79. justify-content: flex-end;
  80. align-items: center;
  81. margin-top: 8px;
  82. margin-right: 0;
  83. margin-bottom: 12px;
  84. span {
  85. margin-left: 8px;
  86. }
  87. }
  88. .remark {
  89. font-size: 12px;
  90. font-family: MicrosoftYaHeiSemibold;
  91. color: rgba(31, 35, 41, 1);
  92. line-height: 16px;
  93. margin: 0px 0 16px 0;
  94. display: flex;
  95. }
  96. .Url-img {
  97. width: 20px;
  98. height: 22px;
  99. line-height: 20px;
  100. img {
  101. width: 100%;
  102. height: 100%;
  103. }
  104. }
  105. }
  106. </style>