exhibitionEnergy.vue 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div class="exhibition-energy">
  3. <div class="title">
  4. <section v-for="(val,key,i) in exhibitionEnergy.list">
  5. <h4 class="base">{{key}}</h4>
  6. <div class="table-dynamic" v-for="(value,keys,index) in val.paths">
  7. <div class="table-title"> {{ value.InfoPointName }}:</div>
  8. <p class="iot_data" :style="{'color':value.value? '' :'#F56C6C'}" :title="value.value ? `${value.value}` : '未维护'">{{ value.value ? `${value.value}` : '未维护' }}</p>
  9. <p v-if="value.data == '0'">{{ value.data }}{{ value.Unit }}</p>
  10. <p v-else-if="value.data">{{ value.data }}{{ value.Unit }}</p>
  11. <!-- <p v-else-if="value.error">{{value.error}}</p>-->
  12. <el-popover
  13. v-else-if="value.error"
  14. placement="right"
  15. width="160"
  16. trigger="hover">
  17. <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">错误原因</p>
  18. <p>{{ '表号功能号不存在' }}</p>
  19. <div style="text-align: center; margin: 0">
  20. <el-button type="text" size="mini" @click="handleCopy(value.error)">复制错误信息</el-button>
  21. </div>
  22. <el-button slot="reference" type="text" style="color:#F56C6C">error</el-button>
  23. </el-popover>
  24. <p v-else>--</p>
  25. <p>{{value.receivetime ? formatDate(value.receivetime):'--'}}</p>
  26. </div>
  27. </section>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. name: "exhibitionEnergy",
  34. props: ['exhibitionEnergy'],
  35. methods:{
  36. formatDate(str) {
  37. if (str) {
  38. if (str.includes('-')) {
  39. return str
  40. } else {
  41. if (str.length > 8) {
  42. return str.substr(0, 4) + "-" + str.substr(4, 2) + "-" + str.substr(6, 2) + " " + str.substr(8, 2) + ":" + str.substr(10, 2) + ":" + str.substr(12, 2)
  43. } else if (str === 'null') {
  44. return '--'
  45. }else {
  46. return str.substr(0, 4) + "-" + str.substr(4, 2) + "-" + str.substr(6, 2) + " " + str.substr(8, 2)
  47. }
  48. }
  49. } else {
  50. return '--'
  51. }
  52. },
  53. handleCopy(data) {
  54. let oInput = document.createElement('input')
  55. oInput.value = data
  56. document.body.appendChild(oInput)
  57. oInput.select()
  58. document.execCommand('Copy')
  59. this.$message.success('复制成功')
  60. oInput.remove()
  61. },
  62. }
  63. }
  64. </script>
  65. <style scoped lang="less">
  66. .exhibition-energy {
  67. .base {
  68. margin: 10px;
  69. font-weight: 600;
  70. text-indent: 10px;
  71. border-bottom: 1px dashed #eee;
  72. }
  73. .table-dynamic {
  74. /*height: 85px;*/
  75. width: 100%;
  76. margin: 5px 0;
  77. padding-left: 20px;
  78. box-sizing: border-box;
  79. }
  80. .iot_data {
  81. white-space: nowrap;
  82. overflow: hidden;
  83. text-overflow: ellipsis;
  84. }
  85. .table-title {
  86. float: left;
  87. max-width: 200px;
  88. width: 100px;
  89. height: 85px;
  90. }
  91. }
  92. </style>