|
@@ -29,7 +29,8 @@
|
|
|
<div class="table">
|
|
|
<template v-if="deviceType">
|
|
|
<admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
|
|
|
- <Pagination :paginationList="paginationList" @currentPage="currentPage"/>
|
|
|
+ <Pagination :paginationList="paginationList" @currentPage="currentPage"
|
|
|
+ @handleSizeChange="handleSizeChange"/>
|
|
|
</template>
|
|
|
<div v-else class="void align">
|
|
|
<svg-icon name="void" :width="String(120)" :height="String(123)"/>
|
|
@@ -78,108 +79,80 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { Vue, Component } from "vue-property-decorator";
|
|
|
-import { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm } from '../components/index'
|
|
|
-import { dictType, dictInfo } from "@/api/equipComponent";
|
|
|
-import { queryEquip } from "@/api/datacenter";
|
|
|
-import { UserModule } from "@/store/modules/user";
|
|
|
-import it from "element-ui/src/locale/lang/it";
|
|
|
-import th from "element-ui/src/locale/lang/th";
|
|
|
-@Component({
|
|
|
- name: 'adm-device',
|
|
|
- components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
|
|
|
-})
|
|
|
-export default class extends Vue {
|
|
|
- private statisticsMsg = {
|
|
|
- title: '全部设备',
|
|
|
- total: 234
|
|
|
+ import {Vue, Component} from "vue-property-decorator";
|
|
|
+ import {Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm} from '../components/index'
|
|
|
+ import {dictType, dictInfo} from "@/api/equipComponent";
|
|
|
+ import {queryEquip} from "@/api/datacenter";
|
|
|
+ import {UserModule} from "@/store/modules/user";
|
|
|
+ import it from "element-ui/src/locale/lang/it";
|
|
|
+ import th from "element-ui/src/locale/lang/th";
|
|
|
+
|
|
|
+ @Component({
|
|
|
+ name: 'adm-device',
|
|
|
+ components: {Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm}
|
|
|
+ })
|
|
|
+ export default class extends Vue {
|
|
|
+ private statisticsMsg = {
|
|
|
+ title: '全部设备',
|
|
|
+ total: 234
|
|
|
|
|
|
- }
|
|
|
- // 设备类值
|
|
|
- deviceType = ''
|
|
|
- deviceVal = ''
|
|
|
- // 维护位置
|
|
|
- displayLocation = false
|
|
|
- // 表头信息集合
|
|
|
- headerInformation = {}
|
|
|
- // 表头阶段信息结合
|
|
|
- headersStage = {}
|
|
|
- all = []
|
|
|
- // 设备信息
|
|
|
- private deviceInformation = []
|
|
|
- // 下拉数据
|
|
|
- list = []
|
|
|
- private dialogVisible = false
|
|
|
- private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
|
|
|
- private activeName = ""
|
|
|
- private paginationList = {
|
|
|
- page:1,
|
|
|
- size: 10,
|
|
|
- sizes: [10, 20, 50, 100],
|
|
|
- total: 200
|
|
|
- }
|
|
|
- // 下一步
|
|
|
- private next = true
|
|
|
- private deviceMsg = '添加设备'
|
|
|
- private currentHeader = this.paneMsg[0]
|
|
|
- private tableData = [
|
|
|
- {
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }]
|
|
|
-
|
|
|
- private get projectId(): string {
|
|
|
- return UserModule.projectId
|
|
|
- }
|
|
|
-
|
|
|
- created() {
|
|
|
- this.deviceList()
|
|
|
- }
|
|
|
+ }
|
|
|
+ // 设备类值
|
|
|
+ deviceType = ''
|
|
|
+ deviceVal = ''
|
|
|
+ // 维护位置
|
|
|
+ displayLocation = false
|
|
|
+ // 表头信息集合
|
|
|
+ headerInformation = {}
|
|
|
+ // 表头阶段信息结合
|
|
|
+ headersStage = {}
|
|
|
+ all = []
|
|
|
+ // 设备信息
|
|
|
+ private deviceInformation = []
|
|
|
+ // 下拉数据
|
|
|
+ list = []
|
|
|
+ private dialogVisible = false
|
|
|
+ private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
|
|
|
+ private activeName = ""
|
|
|
+ private paginationList = {
|
|
|
+ page: 1,
|
|
|
+ size: 50,
|
|
|
+ sizes: [10, 30, 50, 100, 150, 200],
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ // 下一步
|
|
|
+ private next = true
|
|
|
+ private deviceMsg = '添加设备'
|
|
|
+ private currentHeader = this.paneMsg[0]
|
|
|
+ private tableData = [
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ province: '上海',
|
|
|
+ city: '普陀区',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄',
|
|
|
+ zip: 200333
|
|
|
+ }]
|
|
|
+
|
|
|
+ private get projectId(): string {
|
|
|
+ return UserModule.projectId
|
|
|
+ }
|
|
|
|
|
|
-// 设备类数据
|
|
|
- deviceList() {
|
|
|
- let param2 = {
|
|
|
- distinct: true,
|
|
|
- pageNumber: 1,
|
|
|
- pageSize: 1000,
|
|
|
- // projection: ["classCode"],
|
|
|
- projectId: this.projectId
|
|
|
+ created() {
|
|
|
+ this.deviceList()
|
|
|
}
|
|
|
- let promise = new Promise(resolve => {
|
|
|
- dictType({}).then(res => {
|
|
|
- resolve(res)
|
|
|
- })
|
|
|
- })
|
|
|
- let promise2 = new Promise(resolve => {
|
|
|
- queryEquip(param2).then(res => {
|
|
|
- resolve(res)
|
|
|
- })
|
|
|
- })
|
|
|
- Promise.all([promise, promise2]).then((res) => {
|
|
|
- let allData = res[0].content;
|
|
|
- this.deviceInformation = res[1].content
|
|
|
- allData.filter(item => (this.deviceInformation.indexOf(item.code) > -1))
|
|
|
- this.list = allData
|
|
|
- })
|
|
|
- }
|
|
|
|
|
|
- private handleFilter(val) {
|
|
|
- if (val) {
|
|
|
- let param = {
|
|
|
- category: val
|
|
|
- }
|
|
|
+// 设备类数据
|
|
|
+ deviceList() {
|
|
|
let param2 = {
|
|
|
- filters: val ? `classCode='${ val }'` : undefined,
|
|
|
- pageNumber: this.paginationList.size,
|
|
|
- pageSize: 10,
|
|
|
- orders: "createTime desc, id asc",
|
|
|
+ distinct: true,
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ // projection: ["classCode"],
|
|
|
+ projectId: this.projectId
|
|
|
}
|
|
|
let promise = new Promise(resolve => {
|
|
|
- dictInfo(param).then(res => {
|
|
|
+ dictType({}).then(res => {
|
|
|
resolve(res)
|
|
|
})
|
|
|
})
|
|
@@ -188,202 +161,234 @@ export default class extends Vue {
|
|
|
resolve(res)
|
|
|
})
|
|
|
})
|
|
|
- Promise.all([promise, promise2]).then(res => {
|
|
|
- // 类型下信息点,默认设计阶段
|
|
|
- this.headerInformation = res[0] // 获取表头
|
|
|
- this.headerStage()
|
|
|
-
|
|
|
- this.tableData = res[1].content.map(item => {
|
|
|
+ Promise.all([promise, promise2]).then((res) => {
|
|
|
+ let allData = res[0].content;
|
|
|
+ this.deviceInformation = res[1].content
|
|
|
+ allData.filter(item => (this.deviceInformation.indexOf(item.code) > -1))
|
|
|
+ this.list = allData
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
+ private handleFilter(val) {
|
|
|
+ if (val) {
|
|
|
+ let param = {
|
|
|
+ category: val
|
|
|
+ }
|
|
|
+ let param2 = {
|
|
|
+ filters: val ? `classCode='${val}'` : undefined,
|
|
|
+ pageNumber: this.paginationList.page,
|
|
|
+ pageSize: this.paginationList.size,
|
|
|
+ orders: "createTime desc, id asc",
|
|
|
+ }
|
|
|
+ let promise = new Promise(resolve => {
|
|
|
+ dictInfo(param).then(res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let promise2 = new Promise(resolve => {
|
|
|
+ queryEquip(param2).then(res => {
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ Promise.all([promise, promise2]).then(res => {
|
|
|
+ // 类型下信息点,默认设计阶段
|
|
|
+ this.headerInformation = res[0] // 获取表头
|
|
|
+ this.headerStage()
|
|
|
+ this.paginationList.total = res[1].total
|
|
|
+ this.tableData = res[1].content.map(item => {
|
|
|
+ // todo 列表信息展示
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.headerInformation = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ headerStage() {
|
|
|
+ let header = []
|
|
|
+ if (Object.keys(this.headerInformation).length > 1) {
|
|
|
+ this.headerInformation.dictStages.forEach(item => {
|
|
|
+ if (this.currentHeader == item.name) {
|
|
|
+ item.infos && item.infos.forEach(val => header.push(val))
|
|
|
+ }
|
|
|
})
|
|
|
+ }
|
|
|
+ this.headersStage = {
|
|
|
+ basicInfos: this.headerInformation.basicInfos,
|
|
|
+ dictStages: header
|
|
|
+ }
|
|
|
+ this.all = [...this.headersStage.basicInfos, ...this.headersStage.dictStages]
|
|
|
|
|
|
- })
|
|
|
+ }
|
|
|
|
|
|
+ // 维护阶段 tabs
|
|
|
+ handleClick(val: any) {
|
|
|
+ console.log(val)
|
|
|
+ this.currentHeader = val.label
|
|
|
+ this.headerStage()
|
|
|
+ }
|
|
|
+
|
|
|
+ //设备类筛选
|
|
|
+ selectValue(val: string) {
|
|
|
+ console.log(val, 3)
|
|
|
|
|
|
- } else {
|
|
|
- this.headerInformation = {}
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ // 搜索
|
|
|
+ SearchValue(val: string) {
|
|
|
+ console.log(val)
|
|
|
+ }
|
|
|
|
|
|
- headerStage() {
|
|
|
- let header = []
|
|
|
- if (Object.keys(this.headerInformation).length > 1) {
|
|
|
- this.headerInformation.dictStages.forEach(item => {
|
|
|
- if (this.currentHeader == item.name) {
|
|
|
- item.infos && item.infos.forEach(val => header.push(val))
|
|
|
- }
|
|
|
- })
|
|
|
+ // 当前分页
|
|
|
+ currentPage(val: number) {
|
|
|
+ console.log(val)
|
|
|
+ this.paginationList.page = val
|
|
|
+ this.handleFilter(this.deviceType)
|
|
|
}
|
|
|
- this.headersStage = {
|
|
|
- basicInfos: this.headerInformation.basicInfos,
|
|
|
- dictStages: header
|
|
|
+
|
|
|
+ handleSizeChange(val: number) {
|
|
|
+ this.paginationList.size = val
|
|
|
+ console.log(val)
|
|
|
+ this.handleFilter(this.deviceType)
|
|
|
}
|
|
|
- this.all = [...this.headersStage.basicInfos, ...this.headersStage.dictStages]
|
|
|
|
|
|
- }
|
|
|
+ // 添加设备
|
|
|
+ addDevice() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ }
|
|
|
|
|
|
-// 维护阶段 tabs
|
|
|
- handleClick(val: any) {
|
|
|
- console.log(val)
|
|
|
- this.currentHeader = val.label
|
|
|
- this.headerStage()
|
|
|
- }
|
|
|
+ //下一步事件
|
|
|
+ handleNext() {
|
|
|
+ if (this.deviceVal) {
|
|
|
+ this.next = false
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- //设备类筛选
|
|
|
- selectValue(val: string) {
|
|
|
- console.log(val, 3)
|
|
|
+ // 维护位置
|
|
|
+ handlePosition() {
|
|
|
+ this.displayLocation = true
|
|
|
+ }
|
|
|
|
|
|
+ // close
|
|
|
+ close() {
|
|
|
+ this.next = true
|
|
|
+ this.displayLocation = false
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-// 搜索
|
|
|
- SearchValue(val: string) {
|
|
|
- console.log(val)
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $margin: 12px;
|
|
|
+ $border: 1px solid #E1E7EA;
|
|
|
+ .align {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
- // 当前分页
|
|
|
- currentPage(val: number) {
|
|
|
- console.log(val)
|
|
|
- }
|
|
|
+ .adm-device {
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- // 添加设备
|
|
|
- addDevice() {
|
|
|
- this.dialogVisible = true
|
|
|
- }
|
|
|
+ .operation {
|
|
|
+ margin: 12px 0;
|
|
|
|
|
|
- //下一步事件
|
|
|
- handleNext() {
|
|
|
- if (this.deviceVal) {
|
|
|
- this.next = false
|
|
|
- }
|
|
|
- }
|
|
|
+ .adm-select {
|
|
|
+ margin-right: $margin;
|
|
|
|
|
|
-// 维护位置
|
|
|
- handlePosition() {
|
|
|
- this.displayLocation = true
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
-// close
|
|
|
- close() {
|
|
|
- this.next = true
|
|
|
- this.displayLocation = false
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-$margin: 12px;
|
|
|
-$border: 1px solid #E1E7EA;
|
|
|
-.align {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-
|
|
|
-.adm-device {
|
|
|
- background: #fff;
|
|
|
- padding: 12px;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .operation {
|
|
|
- margin: 12px 0;
|
|
|
-
|
|
|
- .adm-select {
|
|
|
- margin-right: $margin;
|
|
|
+ .adm-btn {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- .adm-btn {
|
|
|
- float: right;
|
|
|
+ .hr {
|
|
|
+ background: #E1E7EA;
|
|
|
+ color: #E1E7EA;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .hr {
|
|
|
- background: #E1E7EA;
|
|
|
- color: #E1E7EA;
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
+ .table {
|
|
|
+ border-left: $border;
|
|
|
+ border-right: $border;
|
|
|
+ border-bottom: $border;
|
|
|
+ height: calc(100% - 180px);
|
|
|
+ padding: 12px;
|
|
|
|
|
|
- .content {
|
|
|
- height: 100%;
|
|
|
+ .void {
|
|
|
|
|
|
- .table {
|
|
|
- border-left: $border;
|
|
|
- border-right: $border;
|
|
|
- border-bottom: $border;
|
|
|
- height: calc(100% - 180px);
|
|
|
- padding: 12px;
|
|
|
+ margin-top: 200px;
|
|
|
+ }
|
|
|
|
|
|
- .void {
|
|
|
+ .void-title {
|
|
|
+ color: #333333;
|
|
|
+ line-height: 21px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
|
|
|
- margin-top: 200px;
|
|
|
+ .void-tips {
|
|
|
+ color: #9CA1A9;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .void-title {
|
|
|
- color: #333333;
|
|
|
- line-height: 21px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ .adm-multi-table {
|
|
|
|
|
|
- .void-tips {
|
|
|
- color: #9CA1A9;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 14px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .adm-multi-table {
|
|
|
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .adm-pagination {
|
|
|
- right: 40px;
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
+ .adm-pagination {
|
|
|
+ right: 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
</style>
|
|
|
<style>
|
|
|
-.data-form {
|
|
|
- height: 430px;
|
|
|
-}
|
|
|
+ .data-form {
|
|
|
+ height: 430px;
|
|
|
+ }
|
|
|
|
|
|
-.text {
|
|
|
- color: #000000;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .text {
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.el-tabs__header {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
|
|
|
-.el-dialog__header {
|
|
|
- border-bottom: 1px solid #D8D8D8;
|
|
|
-}
|
|
|
+ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #D8D8D8;
|
|
|
+ }
|
|
|
|
|
|
-.fl {
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ .fl {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
|
|
|
-.fr {
|
|
|
- float: right;
|
|
|
-}
|
|
|
+ .fr {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
|
|
|
-.el-dialog__body {
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
+ .el-dialog__body {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
-.ml-10 {
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
+ .ml-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
</style>
|