exhibitionCrux.vue 3.5 KB

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