equipmentDeatilDialog.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /**
  2. * 设备详情弹窗页面
  3. */
  4. <template>
  5. <div class="equipment-detail">
  6. <el-dialog custom-class="equipment-detail-dialog" title="设备详情" :visible.sync="dialogTableVisible">
  7. <el-table :data="gridData">
  8. <el-table-column property="date" label="日期" width="150"></el-table-column>
  9. <el-table-column property="name" label="姓名" width="200"></el-table-column>
  10. <el-table-column property="address" label="地址"></el-table-column>
  11. </el-table>
  12. <el-container>
  13. <el-aside>
  14. <ul class="outer" v-for="(item, index) in asideData" :key="index">
  15. {{
  16. item.name
  17. }}
  18. <li class="inner" v-for="(detail, dIndex) in item.children" :key="dIndex">
  19. {{ detail.name }}
  20. </li>
  21. </ul>
  22. </el-aside>
  23. <el-main> 222 </el-main>
  24. </el-container>
  25. </el-dialog>
  26. </div>
  27. </template>
  28. <script>
  29. /**
  30. * 设备详情弹窗页面
  31. */
  32. export default {
  33. name: "equipmentDetail",
  34. props: {},
  35. components: {},
  36. data() {
  37. return {
  38. asideData: [
  39. {
  40. name: "静态信息点",
  41. id: "staticInfoPoint",
  42. children: [
  43. {
  44. name: "基本信息",
  45. id: "baseInfo",
  46. focus: true,
  47. },
  48. {
  49. name: "设备厂家",
  50. id: "equipmentManufacturer",
  51. focus: false,
  52. },
  53. {
  54. name: "供应购买",
  55. id: "supplyPurchase",
  56. focus: false,
  57. },
  58. ],
  59. },
  60. {
  61. name: "动态信息点",
  62. id: "dynamicInfoPpoint",
  63. children: [
  64. {
  65. name: "能源信息",
  66. id: "energyInfo",
  67. focus: false,
  68. },
  69. ],
  70. },
  71. ],
  72. gridData: [
  73. {
  74. date: "2016-05-02",
  75. name: "王小虎",
  76. address: "上海市普陀区金沙江路 1518 弄",
  77. },
  78. {
  79. date: "2016-05-04",
  80. name: "王小虎",
  81. address: "上海市普陀区金沙江路 1518 弄",
  82. },
  83. {
  84. date: "2016-05-01",
  85. name: "王小虎",
  86. address: "上海市普陀区金沙江路 1518 弄",
  87. },
  88. {
  89. date: "2016-05-03",
  90. name: "王小虎",
  91. address: "上海市普陀区金沙江路 1518 弄",
  92. },
  93. ],
  94. dialogTableVisible: true,
  95. };
  96. },
  97. created() {},
  98. mounted() {},
  99. methods: {},
  100. };
  101. </script>
  102. <style lang='less' scoped>
  103. .equipment-detail {
  104. /deep/ .equipment-detail-dialog {
  105. width: 1200px;
  106. height: 648px;
  107. // background-color: blueviolet;
  108. }
  109. }
  110. </style>