exhibitionEnergyT.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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 :style="{'color':value.value? '' :'#F56C6C'}">{{value.value? `表号功能号:${value.value} `:'未维护'}}</p>
  9. <p>{{value.data ? value.data :value.error}} {{value.Unit}}</p>
  10. <p>{{value.receivetime ? formatDate(value.receivetime):'--'}}</p>
  11. </div>
  12. </section>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: "exhibitionEnergy",
  19. props: ['exhibitionEnergy'],
  20. methods:{
  21. formatDate(str) {
  22. 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) :'--'
  23. }
  24. }
  25. }
  26. </script>
  27. <style scoped lang="less">
  28. .exhibition-energy {
  29. .base {
  30. margin: 10px;
  31. font-weight: 600;
  32. text-indent: 10px;
  33. border-bottom: 1px dashed #eee;
  34. }
  35. .table-dynamic {
  36. height: 85px;
  37. width: 100%;
  38. margin: 5px 0;
  39. padding-left: 20px;
  40. box-sizing: border-box;
  41. }
  42. .table-title {
  43. float: left;
  44. max-width: 200px;
  45. width: 100px;
  46. height: 85px;
  47. }
  48. }
  49. </style>