exhibitionBaseInformation.vue 4.5 KB

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