exhibitionCrux.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <section class="exhibition-crux">
  3. <p class="title">
  4. <span class="iconfont icon-juxing"></span>
  5. {{exhibitionCrux.title}}
  6. <span class="icon-shezhi iconfont setting" @click="setting"></span></p>
  7. <div>
  8. <div v-if="exhibitionCrux.cruxArray.length">
  9. <div class="crux-list" v-for="(item,index) in exhibitionCrux.cruxArray" :key="index">{{item.name}}:
  10. <el-popover
  11. v-if="item.Path == 'equipQRCode' || item.Path == 'roomQRCode' || item.Path == 'shaftQRCode'"
  12. placement="top"
  13. width="360"
  14. trigger="hover">
  15. <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
  16. <div style="overflow:hidden;">
  17. <div style="float:left;width: 60%">
  18. <img
  19. style="width:200px;height:200px;"
  20. :src="'/image-service/common/file_get/'+ item.value +'?systemId=dataPlatform'"
  21. alt="二维码"
  22. >
  23. </div>
  24. <div style="float:right;width: 40%;margin-top: 30px">
  25. <span>{{item.value}}</span>
  26. </div>
  27. </div>
  28. <div style="text-align: center; margin: 0">
  29. <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
  30. </div>
  31. <el-button slot="reference" type="text">{{item.value ? '有' :'-'}}</el-button>
  32. </el-popover>
  33. <el-popover
  34. v-else-if="Array.isArray(item.value) && item.dataType== 'ATTACHMENT'"
  35. placement="right"
  36. width="250"
  37. trigger="hover">
  38. <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
  39. <div v-for="(pic,index) in item.value">
  40. <div>图纸名称:{{ pic.name }}
  41. <el-button size="mini" style="" type="text" @click="downloadFile(pic.key)">下载</el-button>
  42. </div>
  43. </div>
  44. <el-button slot="reference" type="text">{{item.value? '有':'-'}}</el-button>
  45. </el-popover>
  46. <el-popover
  47. v-else-if="item.value && item.value.length && `${item.InfoPointName}:${item.value}`.length>21"
  48. placement="top"
  49. width="160"
  50. trigger="hover">
  51. <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
  52. <p>{{item.value}}</p>
  53. <div style="text-align: center; margin: 0">
  54. <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
  55. </div>
  56. <el-button slot="reference" type="text">{{handleName(item.InfoPointName, item.value)}}</el-button>
  57. </el-popover>
  58. <span v-else>{{item.value}}</span>
  59. </div>
  60. </div>
  61. </div>
  62. <cruxDialog
  63. ref="setting"
  64. :crux="exhibitionCrux.allMessage"
  65. :type="type"
  66. @cruxSuccess="cruxSuccess"
  67. />
  68. </section>
  69. </template>
  70. <script>
  71. import cruxDialog from "./cruxDialog";
  72. export default {
  73. name: "exhibition-crux",
  74. props: ['exhibitionCrux','type'],
  75. components: {cruxDialog},
  76. data() {
  77. return {
  78. list: []
  79. }
  80. },
  81. methods: {
  82. downloadFile(key) {
  83. window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
  84. },
  85. setting() {
  86. this.$refs.setting.dialogOpen()
  87. },
  88. cruxSuccess() {
  89. this.$emit('cruxSuccess')
  90. },
  91. handleCopy(data) {
  92. let oInput = document.createElement('input')
  93. oInput.value = data
  94. document.body.appendChild(oInput)
  95. oInput.select()
  96. document.execCommand('Copy')
  97. this.$message.success('复制成功')
  98. oInput.remove()
  99. },
  100. handleName(infoPoint, val) {
  101. let value = val;
  102. if (Array.isArray(value)) {
  103. value = JSON.stringify(val)
  104. }
  105. let text = `${infoPoint}:${value}`;
  106. return text.length > 21 ? value.substring(0, 21-`${infoPoint}:`.length) + '...' : value;
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="less" scoped>
  112. .exhibition-crux {
  113. padding: 10px 0;
  114. /deep/ .el-button--text {
  115. color: #555 !important;
  116. font-size: 14px;
  117. }
  118. .title {
  119. /*border-left: 8px solid black;*/
  120. margin: 0 20px 0 10px;
  121. font-weight: 600;
  122. /*text-indent: 10px;*/
  123. display: block;
  124. overflow: hidden;
  125. .setting {
  126. float: right;
  127. }
  128. }
  129. .crux-list {
  130. display: inline-block;
  131. width: 315px;
  132. margin-left: 20px;
  133. vertical-align: text-top;
  134. }
  135. }
  136. </style>