exhibitionEnergy.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div class="exhibition-energy">
  3. <div class="title">
  4. <section>
  5. <h4 class="base" v-show="exhibitionEnergy.firstName">{{exhibitionEnergy.firstName}}</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;margin-top: 200px">暂无数据</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 0;
  44. padding-left: 20px;
  45. box-sizing: border-box;
  46. }
  47. .table-title {
  48. float: left;
  49. max-width: 200px;
  50. width: 100px;
  51. height: 85px;
  52. }
  53. }
  54. </style>