|
@@ -1,85 +1,115 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- demo 组件引用,接口调用
|
|
|
- <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
|
|
|
- <el-table-column align="center" label="ID" width="95">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.$index }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="Title">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.title }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="Author" width="180" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.author }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="Pageviews" width="110" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.pageviews }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column class-name="status-col" label="Status" width="110" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag :type="scope.row.status | statusFilter">
|
|
|
- {{ scope.row.status }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="created_at" label="Created at" width="250">
|
|
|
- <template slot-scope="scope">
|
|
|
- <i class="el-icon-time" />
|
|
|
- <span>{{ scope.row.timestamp | parseTime }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div class="adm-device">
|
|
|
+ <statistics :statistics-msg="statisticsMsg"/>
|
|
|
+ <div class="operation">
|
|
|
+ <admSelect @selectValue="selectValue"/>
|
|
|
+ <admSearch @SearchValue="SearchValue"/>
|
|
|
+ <admBtn :btnMsg="btnMsg"/>
|
|
|
+ </div>
|
|
|
+ <div class="hr"></div>
|
|
|
+ <div class="content">
|
|
|
+ <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
|
|
|
+ <div class="table">
|
|
|
+ <admMultiTable/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script lang="ts">
|
|
|
-import { Component, Vue } from "vue-property-decorator";
|
|
|
-import { getArticles } from "@/api/articles";
|
|
|
-import { IArticleData } from "@/api/types";
|
|
|
+import { Vue, Component } from "vue-property-decorator";
|
|
|
+import { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable } from '../components/index'
|
|
|
|
|
|
@Component({
|
|
|
- name: "Table",
|
|
|
- filters: {
|
|
|
- statusFilter: (status: string) => {
|
|
|
- const statusMap: { [key: string]: string } = {
|
|
|
- published: "success",
|
|
|
- draft: "gray",
|
|
|
- deleted: "danger",
|
|
|
- };
|
|
|
- return statusMap[status];
|
|
|
- },
|
|
|
- parseTime: (timestamp: string) => {
|
|
|
- return new Date(timestamp).toISOString();
|
|
|
- },
|
|
|
- },
|
|
|
+ name: 'adm-device',
|
|
|
+ components: { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable }
|
|
|
})
|
|
|
export default class extends Vue {
|
|
|
- private list: IArticleData[] = [];
|
|
|
- private listLoading = true;
|
|
|
- private listQuery = {
|
|
|
- page: 1,
|
|
|
- limit: 20,
|
|
|
- };
|
|
|
-
|
|
|
- created() {
|
|
|
- this.getList();
|
|
|
+ private statisticsMsg = {
|
|
|
+ title: '全部设备',
|
|
|
+ total: 234
|
|
|
+
|
|
|
+ }
|
|
|
+ private btnMsg = {
|
|
|
+ type: 'default',
|
|
|
+ title: '添加设备'
|
|
|
+ }
|
|
|
+ private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
|
|
|
+
|
|
|
+// 维护阶段 tabs
|
|
|
+ paneValue(val: number) {
|
|
|
+ console.log(val)
|
|
|
+ switch (val) {
|
|
|
+ case 0:
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //设备类筛选
|
|
|
+ selectValue(val: string) {
|
|
|
+ console.log(val)
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- private async getList() {
|
|
|
- this.listLoading = true;
|
|
|
- const { data } = await getArticles(this.listQuery);
|
|
|
- this.list = data.items;
|
|
|
- // Just to simulate the time of the request
|
|
|
- setTimeout(() => {
|
|
|
- this.listLoading = false;
|
|
|
- }, 0.5 * 1000);
|
|
|
+// 搜索
|
|
|
+ SearchValue(val: string) {
|
|
|
+ console.log(val)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+$margin: 12px;
|
|
|
+.adm-device {
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .operation {
|
|
|
+ margin: 12px 0;
|
|
|
+
|
|
|
+ .adm-select {
|
|
|
+ margin-right: $margin;
|
|
|
+ }
|
|
|
+
|
|
|
+ .adm-btn {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .hr {
|
|
|
+ background: #E1E7EA;
|
|
|
+ color: #E1E7EA;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .table {
|
|
|
+ border-left: 1px solid #E1E7EA;
|
|
|
+ border-right: 1px solid #E1E7EA;
|
|
|
+ border-bottom: 1px solid #E1E7EA;
|
|
|
+ height: calc(100% - 180px);
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .adm-multi-table {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|