exhibitionBaseInformation.vue 5.3 KB

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