exhibitionEnergy.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div class="exhibition-energy">
  3. <div class="title">
  4. <section>
  5. <h4 class="base">{{exhibitionEnergy.title}}</h4>
  6. <div v-if="exhibitionEnergy.dynamic.length">
  7. <div v-for="(item,index) in exhibitionEnergy.dynamic" :key="index" class="table-dynamic">
  8. <div class="table-title">{{item.InfoPointName}}:</div>
  9. <div>
  10. <p>表号功能号 {{item.value}}</p>
  11. <p>{{item.data ? item.data :item.error}} {{item.Unit}}</p>
  12. <p>{{formatDate(item.receivetime)}}</p>
  13. </div>
  14. </div>
  15. </div>
  16. <div v-else style="text-align: center">暂无数据</div>
  17. </section>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: "exhibitionEnergy",
  24. props: ['exhibitionEnergy'],
  25. methods:{
  26. formatDate(str) {
  27. return str ? str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2) + ":" +str.substr(10,2) + ":"+str.substr(12,2) :'--'
  28. }
  29. }
  30. }
  31. </script>
  32. <style scoped lang="less">
  33. .exhibition-energy {
  34. .base {
  35. margin: 10px;
  36. font-weight: 600;
  37. text-indent: 10px;
  38. border-bottom: 1px dashed #eee;
  39. }
  40. .table-dynamic {
  41. height: 85px;
  42. width: 100%;
  43. margin: 5px 5px 5px 20px;
  44. }
  45. .table-title {
  46. float: left;
  47. max-width: 200px;
  48. width: 100px;
  49. height: 85px;
  50. }
  51. }
  52. </style>