|
@@ -2,114 +2,393 @@
|
|
|
<div class="adm-device">
|
|
|
<statistics :statistics-msg="statisticsMsg"/>
|
|
|
<div class="operation">
|
|
|
- <admSelect @selectValue="selectValue"/>
|
|
|
+ <el-select
|
|
|
+ v-model="deviceType"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="handleFilter"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ class="adm-select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in list"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.code"
|
|
|
+
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
<admSearch @SearchValue="SearchValue"/>
|
|
|
- <admBtn :btnMsg="btnMsg"/>
|
|
|
+ <el-button type="default" @click="addDevice" class="adm-btn">添加设备</el-button>
|
|
|
</div>
|
|
|
<div class="hr"></div>
|
|
|
<div class="content">
|
|
|
- <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
|
|
|
+ <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
|
|
|
+ </el-tabs>
|
|
|
<div class="table">
|
|
|
- <admMultiTable/>
|
|
|
+ <template v-if="deviceType">
|
|
|
+ <admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
|
|
|
+ <Pagination :paginationList="paginationList" @currentPage="currentPage"
|
|
|
+ @handleSizeChange="handleSizeChange"/>
|
|
|
+ </template>
|
|
|
+ <div v-else class="void align">
|
|
|
+ <svg-icon name="void" :width="String(120)" :height="String(123)"/>
|
|
|
+ <p class="void-title">暂无内容</p>
|
|
|
+ <p class="void-tips">可点击左上角选择设备类型</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 添加/编辑 设备-->
|
|
|
+ <el-dialog
|
|
|
+ :title="deviceMsg"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
+ <template v-if="next">
|
|
|
+ <div class="align" style="height: 400px">
|
|
|
+ <span class="text ">设备类别</span>
|
|
|
+ <el-select
|
|
|
+ v-model="deviceVal"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in list"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" class="fr" @click="handleNext">下一步</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="displayLocation && deviceVal">
|
|
|
+ <el-button type="primary" class="fr ml-10">保存</el-button>
|
|
|
+ <el-button type="default" class="fr ml-10">取消</el-button>
|
|
|
+ <el-button type="default" class="fr ml-10">重置</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <dataForm/>
|
|
|
+ <el-button type="primary" class="fr ml-10">确定</el-button>
|
|
|
+ <el-button type="default" class="fr" @click="handlePosition">维护位置</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { Vue, Component } from "vue-property-decorator";
|
|
|
-import { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable } from '../components/index'
|
|
|
-
|
|
|
-@Component({
|
|
|
- name: 'adm-device',
|
|
|
- components: { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable }
|
|
|
-})
|
|
|
-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
|
|
|
|
|
|
- }
|
|
|
- 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:
|
|
|
}
|
|
|
- }
|
|
|
+ // 设备类值
|
|
|
+ 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
|
|
|
+ }]
|
|
|
|
|
|
- //设备类筛选
|
|
|
- selectValue(val: string) {
|
|
|
- console.log(val)
|
|
|
+ private get projectId(): string {
|
|
|
+ return UserModule.projectId
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ created() {
|
|
|
+ this.deviceList()
|
|
|
+ }
|
|
|
|
|
|
-// 搜索
|
|
|
- SearchValue(val: string) {
|
|
|
- console.log(val)
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-$margin: 12px;
|
|
|
-.adm-device {
|
|
|
- background: #fff;
|
|
|
- padding: 12px;
|
|
|
- height: 100%;
|
|
|
+// 设备类数据
|
|
|
+ deviceList() {
|
|
|
+ let param2 = {
|
|
|
+ distinct: true,
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ // projection: ["classCode"],
|
|
|
+ projectId: this.projectId
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ 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 = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .operation {
|
|
|
- margin: 12px 0;
|
|
|
+ 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]
|
|
|
|
|
|
- .adm-select {
|
|
|
- margin-right: $margin;
|
|
|
}
|
|
|
|
|
|
- .adm-btn {
|
|
|
- float: right;
|
|
|
+ // 维护阶段 tabs
|
|
|
+ handleClick(val: any) {
|
|
|
+ console.log(val)
|
|
|
+ this.currentHeader = val.label
|
|
|
+ this.headerStage()
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ //设备类筛选
|
|
|
+ selectValue(val: string) {
|
|
|
+ console.log(val, 3)
|
|
|
|
|
|
- .hr {
|
|
|
- background: #E1E7EA;
|
|
|
- color: #E1E7EA;
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ SearchValue(val: string) {
|
|
|
+ console.log(val)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当前分页
|
|
|
+ currentPage(val: number) {
|
|
|
+ console.log(val)
|
|
|
+ this.paginationList.page = val
|
|
|
+ this.handleFilter(this.deviceType)
|
|
|
+ }
|
|
|
+
|
|
|
+ handleSizeChange(val: number) {
|
|
|
+ this.paginationList.size = val
|
|
|
+ console.log(val)
|
|
|
+ this.handleFilter(this.deviceType)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加设备
|
|
|
+ addDevice() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ }
|
|
|
+
|
|
|
+ //下一步事件
|
|
|
+ handleNext() {
|
|
|
+ if (this.deviceVal) {
|
|
|
+ this.next = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 维护位置
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
+ .adm-device {
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px;
|
|
|
height: 100%;
|
|
|
|
|
|
- .table {
|
|
|
- border-left: 1px solid #E1E7EA;
|
|
|
- border-right: 1px solid #E1E7EA;
|
|
|
- border-bottom: 1px solid #E1E7EA;
|
|
|
- height: calc(100% - 180px);
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
+ .operation {
|
|
|
+ margin: 12px 0;
|
|
|
+
|
|
|
+ .adm-select {
|
|
|
+ margin-right: $margin;
|
|
|
|
|
|
- .adm-multi-table {
|
|
|
+ }
|
|
|
+
|
|
|
+ .adm-btn {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
+ .hr {
|
|
|
+ background: #E1E7EA;
|
|
|
+ color: #E1E7EA;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .table {
|
|
|
+ border-left: $border;
|
|
|
+ border-right: $border;
|
|
|
+ border-bottom: $border;
|
|
|
+ height: calc(100% - 180px);
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .void {
|
|
|
+
|
|
|
+ margin-top: 200px;
|
|
|
+ }
|
|
|
|
|
|
+ .void-title {
|
|
|
+ color: #333333;
|
|
|
+ line-height: 21px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .void-tips {
|
|
|
+ color: #9CA1A9;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .adm-multi-table {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .adm-pagination {
|
|
|
+ right: 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
</style>
|
|
|
<style>
|
|
|
-.el-tabs__header {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
+ .data-form {
|
|
|
+ height: 430px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #D8D8D8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fl {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fr {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ml-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
</style>
|