123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- /**
- * 设备详情弹窗页面
- */
- <template>
- <div class="equipment-detail">
- <el-dialog custom-class="equipment-detail-dialog" title="设备详情" :visible.sync="dialogTableVisible">
- <el-table :data="gridData">
- <el-table-column property="date" label="日期" width="150"></el-table-column>
- <el-table-column property="name" label="姓名" width="200"></el-table-column>
- <el-table-column property="address" label="地址"></el-table-column>
- </el-table>
- <el-container>
- <el-aside>
- <ul class="outer" v-for="(item, index) in asideData" :key="index">
- {{
- item.name
- }}
- <li class="inner" v-for="(detail, dIndex) in item.children" :key="dIndex">
- {{ detail.name }}
- </li>
- </ul>
- </el-aside>
- <el-main> 222 </el-main>
- </el-container>
- </el-dialog>
- </div>
- </template>
- <script>
- /**
- * 设备详情弹窗页面
- */
- export default {
- name: "equipmentDetail",
- props: {},
- components: {},
- data() {
- return {
- asideData: [
- {
- name: "静态信息点",
- id: "staticInfoPoint",
- children: [
- {
- name: "基本信息",
- id: "baseInfo",
- focus: true,
- },
- {
- name: "设备厂家",
- id: "equipmentManufacturer",
- focus: false,
- },
- {
- name: "供应购买",
- id: "supplyPurchase",
- focus: false,
- },
- ],
- },
- {
- name: "动态信息点",
- id: "dynamicInfoPpoint",
- children: [
- {
- name: "能源信息",
- id: "energyInfo",
- focus: false,
- },
- ],
- },
- ],
- gridData: [
- {
- date: "2016-05-02",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1518 弄",
- },
- {
- date: "2016-05-04",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1518 弄",
- },
- {
- date: "2016-05-01",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1518 弄",
- },
- {
- date: "2016-05-03",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1518 弄",
- },
- ],
- dialogTableVisible: true,
- };
- },
- created() {},
- mounted() {},
- methods: {},
- };
- </script>
- <style lang='less' scoped>
- .equipment-detail {
- /deep/ .equipment-detail-dialog {
- width: 1200px;
- height: 648px;
- // background-color: blueviolet;
- }
- }
- </style>
|