Explorar el Código

wanda-adm:feat > 完善数据维护模块筛选搜索列表展示

shaun-sheep hace 4 años
padre
commit
5b06c14280

+ 1 - 0
public/index.html

@@ -20,5 +20,6 @@
   html {
     height: 100%;
   }
+
 </style>
 </html>

+ 24 - 0
src/api/datacenter.ts

@@ -41,3 +41,27 @@ export function PartiInstancQuery(postParams: any): any {
 export function queryEquip(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/equip/query`, postParams)
 }
+
+// 查询系统信息
+export function querySystem(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/system/query`, postParams)
+}
+// 查询空间信息
+export function queryZone(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/zone/query`, postParams)
+}
+
+// 查询设备统计
+export function queryCount(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/equip/count`, postParams)
+}
+
+// 查询系统统计
+export function queryCountSystem(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/system/count`, postParams)
+}
+
+// 查询空间统计
+export function queryCountSpace(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/zone/count`, postParams)
+}

+ 9 - 0
src/api/equipComponent.ts

@@ -1,5 +1,6 @@
 import httputils from "@/api/httputils";
 const baseUrl = '/equip-component'
+const rwd = '/rwd'
 
 //类型下信息点
 export function dictInfo(params: any): any {
@@ -10,3 +11,11 @@ export function dictInfo(params: any): any {
 export function dictType(params: any): any {
     return httputils.getJson(`${ baseUrl }/dict/equip/type`, {})
 }
+
+
+//获取设定参数和动态参数
+export function BeatchQueryParam(param: any) {
+    let url = `${ rwd }/iot/data/current?projectId=${ param.projectId }&groupCode=${ param.groupCode }&appId=${ param.appId }`
+    let data = param.data
+    return httputils.postJson(url, data)
+}

+ 43 - 37
src/components/public/adm-multi-table.vue

@@ -1,55 +1,53 @@
 <template>
-    <el-table
-        :data="tableData"
-        style="width: 100%"
-        class="adm-multi-table"
-        :row-style="{ height: '10px' }"
-        border
-    >
-        <el-table-column
-            prop="date"
-            label="编辑"
-            width="80"
-            align="center"
-            fixed
-
+    <div>
+        <el-table
+            :data="tableData"
+            style="width: 100%"
+            max-height="550"
+            class="adm-multi-table"
+            :row-style="{ height: '10px' }"
+            border
+            v-if="tableData.length  > 0"
         >
-            <template slot-scope="scope">
+            <el-table-column
+                prop="date"
+                label="编辑"
+                width="80"
+                align="center"
+                fixed
+
+            >
+                <template slot-scope="scope">
                 <span
                     class="el-icon-edit el-input__icon"
                     style="cursor: pointer"
                     @click="handleEdit(scope.$index, scope.row)">
                 </span>
-            </template>
-        </el-table-column>
-        <el-table-column label="基础信息台账">
-            <el-table-column
-                v-for="item in headersStage.basicInfos"
-                show-overflow-tooltip
-                :prop="item.infos"
-                :label="item.name"
-                :key="item.name"
-                fixed
-            >
+                </template>
             </el-table-column>
-
-
-        </el-table-column>
-        <el-table-column :label="currentHeader">
             <el-table-column
-                v-for="item in headersStage.dictStages"
-                :prop="item.infos"
-                :label="item.name"
+                v-for="item in headersStage"
                 :key="item.name"
-                show-overflow-tooltip
+                :label="item.name"
+                align="center"
             >
+                <el-table-column
+                    v-for="(child,index) in item.data"
+                    :key="index"
+                    :label="child.name"
+                    :prop="child.path"
+                    align="center"
+                    show-overflow-tooltip
+                >
+                </el-table-column>
             </el-table-column>
-        </el-table-column>
-    </el-table>
+        </el-table>
+        <div v-else class="center"> 暂无数据</div>
+    </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 @Component({
     name: 'adm-multi-table'
 })
@@ -77,6 +75,14 @@ export default class extends Vue {
         }
     }
 
+
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    margin-top: 200px;
 }
 </style>
 

+ 1 - 0
src/components/public/adm-pagination.vue

@@ -33,6 +33,7 @@ export default class extends Vue {
     }
     @Emit('handleSizeChange')
     handleSizeChange(val:number) {
+        return val
         console.log(val)
     }
 }

+ 35 - 0
src/utils/maintain.ts

@@ -0,0 +1,35 @@
+export const tools = {
+    //根据key值去对象中取对应的值
+    dataForKey: function (data: any, key: any) {
+        let arr = key.split(".")
+        if (arr && arr[0]) {
+            for (let i = 0; i < arr.length; i++) {
+                if (arr[i] && data[arr[i]]) {
+                    data = data[arr[i]]
+                } else {
+                    return ''
+                }
+            }
+            return data
+        }
+    },
+    //根据key值去设置对象的值
+    setDataForKey: function (data: any, key: any, value: any) {
+        let arr = key.split(".")
+        if (arr && arr[0]) {
+            for (let i = 0; i < arr.length; i++) {
+                if (!(arr[i] && data[arr[i]])) {
+                    data[arr[i]] = {}
+                }
+                if (value !== undefined) {
+                    if (i == arr.length - 1) {
+                        data[arr[i]] = value
+                    }
+                }
+                data = data[arr[i]]
+            }
+        }
+    }
+}
+export default tools
+

+ 341 - 242
src/views/maintain/device/index.vue

@@ -26,10 +26,11 @@
             <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">
+            <div class="table" v-loading="loading">
                 <template v-if="deviceType">
                     <admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
-                    <Pagination :paginationList="paginationList" @currentPage="currentPage"
+                    <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
+                                @handleCurrentChange="handleCurrentChange"
                                 @handleSizeChange="handleSizeChange"/>
                 </template>
                 <div v-else class="void align">
@@ -79,80 +80,129 @@
     </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 { Component, Vue } from "vue-property-decorator";
+import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from '../components/index'
+import { BeatchQueryParam, dictInfo, dictType } from "@/api/equipComponent";
+import { queryCount, queryEquip } from "@/api/datacenter";
+import { UserModule } from "@/store/modules/user";
+import tools from "@/utils/maintain"
+
+
+@Component({
+    name: 'adm-device',
+    components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
+})
+export default class extends Vue {
+    // loading
+    loading = false
+    // 统计信息对象
+    private statisticsMsg = {
+        title: '全部设备',
+        total: 0
 
-        }
-        // 设备类值
-        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
-        }
+    }
+    // 设备类值
+    deviceType = ''
+    // 弹窗设备类值
+    deviceVal = ''
+    // 维护位置
+    displayLocation = false
+    // 表头信息集合
+    headerInformation = {}
+    // 表头阶段信息结合
+    headersStage = {}
+    // 当前阶段表头信息点集合
+    all = []
+    // 搜索内容
+    inputSearch = ''
+    // 下拉数据
+    list = []
+    // 弹窗开关
+    private dialogVisible = false
+    // tabs数据
+    private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
+    // 当前tabs值
+    private activeName = ""
+    // 分页
+    private paginationList = {
+        page: 1,
+        size: 50,
+        sizes: [10, 30, 50, 100, 150, 200],
+        total: 0
+    }
+    // 下一步
+    private next = true
+    // 弹窗 title
+    private deviceMsg = '添加设备'
+    // 默认当前阶段
+    private currentHeader = this.paneMsg[0]
+    // 主体数据
+    private tableData = []
+    codeToDataSource = {}
+
+    // 项目id
+    private get projectId(): string {
+        return UserModule.projectId
+    }
 
-        created() {
-            this.deviceList()
-        }
+    created() {
+        this.deviceList();
+        this.dataCount()
+    }
+
+//查询统计数量
+    dataCount() {
+        queryCount({}).then(res => {
+            this.statisticsMsg.total = res.count
+        })
+    }
 
 // 设备类数据
-        deviceList() {
+    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;
+            let deviceInformation = res[1].content
+            allData.filter(item => (deviceInformation.indexOf(item.code) > -1))
+            this.list = allData
+        })
+    }
+
+    private handleFilter(val) {
+        console.log(this.deviceType)
+        if (this.deviceType) {
+            this.loading = true
+            let param = {
+                category: this.deviceType
+            }
             let param2 = {
-                distinct: true,
-                pageNumber: 1,
-                pageSize: 1000,
-                // projection: ["classCode"],
+                filters: this.deviceType ? `classCode='${ this.deviceType }'` : undefined,
+                pageNumber: this.paginationList.page,
+                pageSize: this.paginationList.size,
+                orders: "createTime desc, id asc",
                 projectId: this.projectId
             }
+            if (this.inputSearch != '') {
+                param2.filters += `;codeName contain '${ this.inputSearch }' or systemCategory contain '${ this.inputSearch }' or bimTypeId contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
+            }
             let promise = new Promise(resolve => {
-                dictType({}).then(res => {
+                dictInfo(param).then(res => {
                     resolve(res)
                 })
             })
@@ -161,234 +211,283 @@
                     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
+            Promise.all([promise, promise2]).then(res => {
+                this.loading = false
+                // 类型下信息点,默认设计阶段
+                this.headerInformation = res[0] // 获取表头
+                this.tableData = res[1].content // 主体数据
+                this.headerStage()
+                this.paginationList.total = res[1].total
             })
+        } else {
+            this.headerInformation = {}
         }
+    }
+
+    headerStage() {
+        let header = []
+        if (Object.keys(this.headerInformation).length > 0) {
+            this.headerInformation.dictStages.forEach(item => {
+                if (this.currentHeader == item.name) {
+                    item.infos && item.infos.forEach(val => header.push(val))
 
-        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 = {}
+            })
+        }
+        this.headersStage = {
+            basicInfos: {
+                name: '基础信息台账',
+                data: this.headerInformation.basicInfos
+            },
+            dictStages: {
+                name: this.currentHeader,
+                data: header
             }
         }
+        // 信息点集合
+        this.all = [...this.headerInformation.basicInfos, ...header]
+        this.codeToDataSource = {}
+        this.all.forEach(item => {
+            if (item.dataSource) {
+                try {
+                    this.codeToDataSource[item.code] = {}
+                    item.dataSource.forEach(dic => {
+                        this.codeToDataSource[item.code][dic.code] = dic.name;
+                    })
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        });
+        this.getBatch(this.tableData)
+    }
 
-        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))
+    // 查询动态数据
+    getBatch(data) {
+        let param = {
+            groupCode: 'WD',
+            appId: 'datacenter',
+            projectId: this.projectId,
+            data: []
+        }
+        this.all.forEach(head => {
+            if (head.category != 'STATIC') {
+                data.forEach(item => {
+                    let cur = tools.dataForKey(item, head.path)
+                    if (cur) {
+                        param.data.push({
+                            objectId: item.id,
+                            infoCode: head.code
+                        })
                     }
                 })
             }
-            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()
+        })
+        if (param.data.length > 0) {
+            BeatchQueryParam(param).then(res => {
+                this.tableData = data.map(item => {
+                    res.data.map(child => {
+                        if (item.id == child.objectId) {
+                            if (!!child.data || child.data == 0) {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        let contentVal = child.data
+                                        if (this.codeToDataSource[child.infoCode]) {
+                                            contentVal = this.codeToDataSource[child.infoCode][child.data]
+                                        }
+                                        tools.setDataForKey(item, head.path, contentVal);
+                                    }
+                                })
+                            } else {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        tools.setDataForKey(
+                                            item,
+                                            head.path,
+                                            child.error
+                                        );
+                                    }
+                                });
+                            }
+                        }
+                    })
+                    return item
+                })
+            })
         }
 
-        //设备类筛选
-        selectValue(val: string) {
-            console.log(val, 3)
+    }
 
-        }
+    // 维护阶段 tabs
+    async handleClick(val: any) {
+        this.currentHeader = val.label
+        await this.headerStage()
 
-        // 搜索
-        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
-            }
-        }
+    //设备类筛选
+    selectValue(val: string) {
+        console.log(val, 3)
 
-        // 维护位置
-        handlePosition() {
-            this.displayLocation = true
-        }
+    }
 
-        // close
-        close() {
-            this.next = true
-            this.displayLocation = false
-        }
+    // 搜索
+    SearchValue(val: string) {
+        this.inputSearch = val
+        this.handleFilter(this.deviceType)
     }
-</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;
+
+    // 当前分页
+    handleCurrentChange(val: number) {
+        console.log(val)
+        this.paginationList.page = val
+        this.handleFilter(this.deviceType)
     }
 
-    .adm-device {
-        background: #fff;
-        padding: 12px;
-        height: 100%;
+    handleSizeChange(val: number) {
+        this.paginationList.size = val
+        this.handleFilter(this.deviceType)
+    }
 
-        .operation {
-            margin: 12px 0;
+    // 添加设备
+    addDevice() {
+        this.dialogVisible = true
+    }
 
-            .adm-select {
-                margin-right: $margin;
+    //下一步事件
+    handleNext() {
+        if (this.deviceVal) {
+            this.next = false
+        }
+    }
 
-            }
+    // 维护位置
+    handlePosition() {
+        this.displayLocation = true
+    }
 
-            .adm-btn {
-                float: right;
-            }
+    // 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;
 
         }
 
-        .hr {
-            background: #E1E7EA;
-            color: #E1E7EA;
-            width: 100%;
-            height: 1px;
-            margin-bottom: 16px;
+        .adm-btn {
+            float: right;
         }
 
-        .content {
-            height: 100%;
+    }
 
-            .table {
-                border-left: $border;
-                border-right: $border;
-                border-bottom: $border;
-                height: calc(100% - 180px);
-                padding: 12px;
+    .hr {
+        background: #E1E7EA;
+        color: #E1E7EA;
+        width: 100%;
+        height: 1px;
+        margin-bottom: 16px;
+    }
 
-                .void {
+    .content {
+        height: 100%;
 
-                    margin-top: 200px;
-                }
+        .table {
+            border-left: $border;
+            border-right: $border;
+            border-bottom: $border;
+            height: calc(100% - 180px);
+            padding: 12px;
 
-                .void-title {
-                    color: #333333;
-                    line-height: 21px;
-                    font-size: 16px;
-                }
+            .void {
 
-                .void-tips {
-                    color: #9CA1A9;
-                    line-height: 22px;
-                    font-size: 14px;
-                }
+                margin-top: 200px;
             }
 
-            .adm-multi-table {
+            .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;
-        }
+
     }
 
+    .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>

+ 358 - 39
src/views/maintain/space/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="space-index">
-        <statistics :statistics-msg="statisticsMsg" />
+        <statistics :statistics-msg="statisticsMsg"/>
         <el-divider class="small-divider"></el-divider>
         <div class="tabs">
             <el-tabs v-model="activeName" type="card">
@@ -9,16 +9,31 @@
             </el-tabs>
             <div class="tab-content">
                 <div class="search">
-                    <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层" class="item"></el-cascader>
-                    <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区" class="item"
-                        v-if="activeName==='picture'"></el-cascader>
-                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
+                    <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
+                                 v-model="building"
+                                 filterable size="small" @change="changeCascader"
+                                 style="margin-right: 12px"></el-cascader>
+                    <el-cascader v-model="value2" :options="options2" @change="handleChange" placeholder="请选择分区"
+                                 class="item"
+                                 v-if="activeName==='picture'"></el-cascader>
+                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
                 </div>
-                <div v-if="activeName==='table'">
-                    <admMultiTable />
+                <div v-if="activeName==='table'" v-loading="loading">
+                    <template v-if="building.length > 0">
+                        <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage"
+                                       :tableData="tableData"/>
+                        <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
+                                    @handleCurrentChange="handleCurrentChange"
+                                    @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 class="graph" v-if="activeName==='picture'">
-                    <spaceGraph />
+                    <spaceGraph/>
                 </div>
             </div>
         </div>
@@ -26,83 +41,387 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch } from "vue-property-decorator";
-import Bus from "@/utils/bus";
-import { Statistics, AdmSearch, AdmMultiTable } from "../components/index";
+import { Component, Vue } from "vue-property-decorator";
+import { AdmMultiTable, AdmSearch, Pagination, Statistics } from "../components/index";
 import spaceGraph from "./components/spaceGraph.vue";
+import { buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone } from "@/api/datacenter";
+import tools from "@/utils/maintain";
+import { BeatchQueryParam } from "@/api/equipComponent";
+import { UserModule } from "@/store/modules/user";
+
 @Component({
     name: "space-index",
-    components: { Statistics, AdmSearch, AdmMultiTable, spaceGraph },
+    components: { Statistics, AdmSearch, AdmMultiTable, spaceGraph, Pagination },
 })
 
 export default class spaceIndex extends Vue {
+    // loading
+    loading = false
     private statisticsMsg = {
         title: "全部空间",
         total: 93640,
     };
+    currentHeader = '租赁系统'
     activeName = "table";
-    value1 = ["zhinan", "shejiyuanze"];
+    building = [];
+    buildingLabel = []
     value2 = [];
-    options = [
-        {
-            value: "zhinan",
-            label: "指南",
-            children: [
-                {
-                    value: "shejiyuanze",
-                    label: "设计原则",
-                },
-                {
-                    value: "yizhi",
-                    label: "一致",
-                },
-                {
-                    value: "fankui",
-                    label: "反馈",
-                },
-            ],
-        },
-    ];
-    // 建筑楼层更改
-    handleChange(v: string) {
-        console.log(v);
+    // 分页
+    private paginationList = {
+        page: 1,
+        size: 50,
+        sizes: [10, 30, 50, 100, 150, 200],
+        total: 0
+    }
+    options = [];
+    options2 = []
+    // 信息点集合(表头)
+    all = []
+    codeToDataSource = {}
+    tableData = []
+    // 表头阶段信息结合
+    headersStage = {}
+    // 搜索框字段
+    inputSearch = ''
+
+    // 项目id
+    private get projectId(): string {
+        return UserModule.projectId
+    }
+
+    created() {
+        this.getData()
+        this.dataCount()
+    }
+
+//查询统计数量
+    dataCount() {
+        queryCountSpace({}).then(res => {
+            this.statisticsMsg.total = res.count
+        })
+    }
+
+    //获取楼层数据
+    getData() {
+        let data, buildParams = {
+            pageNumber: 1,
+            pageSize: 1000,
+            orders: "localName asc",
+            projection: [
+                "id",
+                "localName"
+            ]
+        }, floorParams = {
+            orders: "floorSequenceId desc",
+            pageNumber: 1,
+            pageSize: 1000
+        }
+        let promise1 = new Promise((resolve) => {
+            buildingQuery(buildParams).then(res => {
+                resolve(res)
+            })
+        })
+        let promise2 = new Promise((resolve) => {
+            floorQuery(floorParams).then(res => {
+                resolve(res)
+            })
+        })
+        Promise.all([promise1, promise2]).then(values => {
+            let buildData = values[0].content, floorData = values[1].content
+            data = buildData.map(build => {
+                return {
+                    value: build.id,
+                    label: build.localName
+                }
+            })
+            // data.unshift({
+            //     value: "all",
+            //     label: "全部"
+            // }, {
+            //     value: "noKnow",
+            //     label: "未明确建筑"
+            // })
+            data.forEach(build => {
+                floorData.forEach(floor => {
+                    if (build.value == floor.buildingId && floor.id && floor.localName) {
+                        if (build.children) {
+                            build.children.push({
+                                value: floor.id,
+                                label: floor.localName,
+                                FloorSequenceID: floor.floorSequenceId,
+                                infos: floor.infos || {},
+                                outline: floor.outline || null,
+                            })
+                        } else {
+                            build.children = []
+                            build.children.push(
+                                //     {
+                                //     value: "all",
+                                //     label: "全部"
+                                // }, {
+                                //     value: 'noKnow',
+                                //     label: "未明确楼层"
+                                // },
+                                {
+                                    value: floor.id,
+                                    label: floor.localName,
+                                    FloorSequenceID: floor.floorSequenceId,
+                                    infos: floor.infos || {},
+                                    outline: floor.outline || null,
+                                })
+                        }
+                    }
+                })
+            })
+            this.options = data
+        })
+    }
+
+    //改变楼层
+    changeCascader(value) {
+        if (value.length > 0) {
+            this.buildingLabel = this.$refs['floorCascader'].getCheckedNodes()[0].pathLabels
+        }
+        if (this.building.length > 0) {
+            this.loading = true
+            let param = {
+                "type": "FunctionZone",
+                "orders": "sort asc, name desc",
+                pageNumber: 1,
+                pageSize: 1000
+            }
+            let param2 = {
+                // 级联查建筑楼层信息
+                // cascade: [{ name: 'building' }, { name: 'floor', orders: 'floorSequenceId desc' }],
+                zoneType: 'FunctionZone',
+                pageNumber: this.paginationList.page,
+                pageSize: this.paginationList.size,
+                orders: "createTime desc, localName desc, localId desc, id asc"
+            }
+
+            param2.filters = ''
+            if (this.building[0]) {
+                param2.filters += `buildingId='${ this.building[0] }'`
+            }
+            if (this.building[1] == "") {
+                param2.filters += `;floorId isNull`
+            } else if (this.building[1]) {
+                param2.filters += `;floorId='${ this.building[1] }'`
+            }
+            if (this.inputSearch != '') {
+                param2.filters += `;localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
+            }
+
+            let promise = new Promise(resolve => {
+                dictQuery(param).then(res => {
+                    resolve(res)
+                })
+            })
+            let promise2 = new Promise(resolve => {
+                queryZone(param2).then(res => {
+                    resolve(res)
+                })
+            })
+            Promise.all([promise, promise2]).then(res => {
+                let tableData = []
+                this.loading = false
+                // 类型下信息点,重组数据
+                let basicInfos = [], dictStages = []
+                this.all = res[0].content
+                res[0].content.forEach(item => {
+                    // todo 基础信息点分类
+                    let i = ["localName", "localId", "building", "floor"]
+                    if (i.includes(item.path)) {
+                        basicInfos.push(item)
+                    } else {
+                        dictStages.push(item)
+                    }
+                })
+
+                this.headersStage = {
+                    basicInfos: {
+                        name: '模型解析',
+                        data: basicInfos
+                    },
+                    dictStages: {
+                        name: '租赁系统',
+                        data: dictStages
+                    }
+                }
+                this.paginationList.total = res[1].total
+                tableData = res[1].content // 主体数据
+                // 处理 outline BIM模型中轮廓坐标 展示
+                // 添加建筑,楼层展示(从下拉框获取)
+                this.tableData = tableData.map(item => {
+                    if (this.buildingLabel[0]) {
+                        item.building = this.buildingLabel[0]
+                    }
+                    if (this.buildingLabel[1]) {
+                        item.floor = this.buildingLabel[1]
+                    }
+                    item = {
+                        ...item,
+                        outline: JSON.stringify(item.outline)
+                    }
+                    return item
+                })
+                //  列表信息展示,获取动态数据
+                this.codeToDataSource = {}
+                this.all.forEach(item => {
+                    if (item.dataSource) {
+                        try {
+                            this.codeToDataSource[item.code] = {}
+                            item.dataSource.forEach(dic => {
+                                this.codeToDataSource[item.code][dic.code] = dic.name;
+                            })
+                        } catch (e) {
+                            console.log(e);
+                        }
+                    }
+                });
+                this.getBatch(this.tableData)
+            })
+        } else {
+            console.log('void')
+        }
     }
+
+    // 动态信息点
+    getBatch(data) {
+        let param = {
+            groupCode: 'WD',
+            appId: 'datacenter',
+            projectId: this.projectId,
+            data: []
+        }
+        this.all.forEach(head => {
+            if (head.category != 'STATIC') {
+                data.forEach(item => {
+                    let cur = tools.dataForKey(item, head.path)
+                    if (cur) {
+                        param.data.push({
+                            objectId: item.id,
+                            infoCode: head.code
+                        })
+                    }
+                })
+            }
+
+        })
+        if (param.data.length) {
+            BeatchQueryParam(param).then(res => {
+                this.tableData = data.map(item => {
+                    res.data.map(child => {
+                        if (item.id == child.objectId) {
+                            if (!!child.data || child.data == 0) {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        let contentVal = child.data
+                                        if (this.codeToDataSource[child.infoCode]) {
+                                            contentVal = this.codeToDataSource[child.infoCode][child.data]
+                                        }
+                                        tools.setDataForKey(item, head.path, contentVal);
+                                    }
+                                })
+                            } else {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        tools.setDataForKey(
+                                            item,
+                                            head.path,
+                                            child.error
+                                        );
+                                    }
+                                });
+                            }
+                        }
+                    })
+                    return item
+                })
+            })
+        }
+
+    }
+
+    handleChange(val) {
+        console.log(val)
+    }
+
+    // 当前分页
+    handleCurrentChange(val: number) {
+        console.log(val)
+        this.paginationList.page = val
+        this.handleFilter(this.deviceType)
+    }
+
+    handleSizeChange(val: number) {
+        this.paginationList.size = val
+        this.handleFilter(this.deviceType)
+    }
+
     // 搜索
     searchValue(val: string) {
-        console.log(val);
+        this.inputSearch = val
+        this.changeCascader()
     }
 }
 </script>
 
 <style lang="scss" scoped>
+.void {
+
+    margin-top: 200px;
+}
+
+.align {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
 .space-index {
     background: #fff;
     padding: 12px;
     height: 100%;
+
     .small-divider {
         margin: 12px 0;
     }
+
     .tabs {
         position: relative;
         height: calc(100% - 92px);
+
         ::v-deep .el-tabs__header {
             margin: 0;
         }
+
         .tab-content {
             height: calc(100% - 41px);
             border: 1px solid #e1e7ea;
             border-top: none;
+            padding: 12px;
+
             .search {
                 padding: 16px;
-                border-bottom: 1px solid #e1e7ea;
+                //border-bottom: 1px solid #e1e7ea;
                 & > .item + .item {
                     margin-left: 16px;
                 }
             }
-            .graph{
+
+            .graph {
                 height: calc(100% - 64px)
             }
         }
     }
+
+    .adm-pagination {
+        right: 40px;
+        position: absolute;
+        bottom: 30px;
+    }
 }
 </style>

+ 400 - 5
src/views/maintain/system/index.vue

@@ -1,12 +1,407 @@
 <template>
-    <div>系统</div>
+    <div class="adm-system">
+        <statistics :statistics-msg="statisticsMsg"/>
+        <div class="hr"></div>
+        <div class="operation">
+            <el-select
+                v-model="systemType"
+                class="adm-select"
+                clearable
+                filterable
+                placeholder="请选择系统类别"
+                @change="handleFilter"
+            >
+                <el-option
+                    v-for="item in list"
+                    :key="item.code"
+                    :label="item.name"
+                    :value="{ value: item.code,label: item.name }"
+                />
+            </el-select>
+            <admSearch @SearchValue="SearchValue"/>
+            <el-button class="adm-btn" type="default" @click="addDevice">添加系统</el-button>
+        </div>
+
+        <div class="content">
+            <div v-loading="loading" class="table">
+                <template v-if="systemType">
+                    <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData"/>
+                    <Pagination :paginationList="paginationList" @handleCurrentChange="handleCurrentChange"
+                                v-if="tableData.length > 0"
+                                @handleSizeChange="handleSizeChange"/>
+                </template>
+                <div v-else class="void align">
+                    <svg-icon :height="String(123)" :width="String(120)" name="void"/>
+                    <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="systemVal"
+                        clearable
+                        filterable
+                        placeholder="请选择系统类别"
+                    >
+                        <el-option
+                            v-for="item in list"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </div>
+                <el-button class="fr" type="primary" @click="handleNext">下一步</el-button>
+            </template>
+            <template v-else>
+                <dataForm/>
+                <el-button class="fr ml-10" type="primary">确定</el-button>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
-<script>
-export default {
-    name: "index"
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from '../components/index'
+import { dictCategoryQuery, dictQuery, queryCountSystem, querySystem } from "@/api/datacenter";
+import tools from "@/utils/maintain"
+import { UserModule } from "@/store/modules/user";
+import { BeatchQueryParam } from "@/api/equipComponent";
+
+
+@Component({
+    name: 'adm-device',
+    components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
+})
+export default class extends Vue {
+    // loading
+    loading = false
+    // 下拉数据
+    list = []
+    // 信息点集合(表头)
+    all = []
+    codeToDataSource = {}
+    // 系统类值
+    systemType = ''
+    // 系统名称 label值
+    systemLabel = ''
+    systemVal = ''
+    currentHeader = '运维阶段'
+    tableData = []
+    // 表头阶段信息结合
+    headersStage = {}
+    // 统计信息对象
+    private statisticsMsg = {
+        title: '全部系统',
+        total: 0
+
+    }
+    // 分页
+    private paginationList = {
+        page: 1,
+        size: 50,
+        sizes: [10, 30, 50, 100, 150, 200],
+        total: 0
+    }
+    // 下一步
+    private next = true
+    // 弹窗 title
+    private deviceMsg = '添加系统'
+    // 弹窗开关
+    private dialogVisible = false
+    // 搜索内容
+    inputSearch = ''
+
+    // 项目id
+    private get projectId(): string {
+        return UserModule.projectId
+    }
+
+    created() {
+        this.systemList();
+        this.dataCount()
+    }
+
+//查询统计数量
+    dataCount() {
+        queryCountSystem({}).then(res => {
+            this.statisticsMsg.total = res.count
+        })
+    }
+
+    systemList() {
+        let param = {
+            type: 'system'
+        }
+        dictCategoryQuery(param).then(res => {
+            this.list = res.content
+        })
+    }
+
+    // 动态信息点
+    getBatch(data) {
+        let param = {
+            groupCode: 'WD',
+            appId: 'datacenter',
+            projectId: this.projectId,
+            data: []
+        }
+        this.all.forEach(head => {
+            if (head.category != 'STATIC') {
+                data.forEach(item => {
+                    let cur = tools.dataForKey(item, head.path)
+                    if (cur) {
+                        param.data.push({
+                            objectId: item.id,
+                            infoCode: head.code
+                        })
+                    }
+                })
+            }
+
+        })
+        if (param.data.length) {
+            BeatchQueryParam(param).then(res => {
+                this.tableData = data.map(item => {
+                    res.data.map(child => {
+                        if (item.id == child.objectId) {
+                            if (!!child.data || child.data == 0) {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        let contentVal = child.data
+                                        if (this.codeToDataSource[child.infoCode]) {
+                                            contentVal = this.codeToDataSource[child.infoCode][child.data]
+                                        }
+                                        tools.setDataForKey(item, head.path, contentVal);
+                                    }
+                                })
+                            } else {
+                                this.all.map(head => {
+                                    if (head.code == child.infoCode) {
+                                        tools.setDataForKey(
+                                            item,
+                                            head.path,
+                                            child.error
+                                        );
+                                    }
+                                });
+                            }
+                        }
+                    })
+                    return item
+                })
+            })
+        }
+
+    }
+
+    // 搜索
+    SearchValue(val: string) {
+        this.inputSearch = val
+        this.handleFilter(this.systemType)
+    }
+
+    // 当前分页
+    handleCurrentChange(val: number) {
+        this.paginationList.page = val
+        this.handleFilter(this.systemType)
+    }
+
+    handleSizeChange(val: number) {
+        this.paginationList.size = val
+        this.handleFilter(this.systemType)
+    }
+
+    // 添加设备
+    addDevice() {
+        this.dialogVisible = true
+    }
+
+    //下一步事件
+    handleNext() {
+        if (this.system) {
+            this.next = false
+        }
+    }
+
+    // close
+    close() {
+        this.next = true
+        this.displayLocation = false
+    }
+
+    private handleFilter(val) {
+        this.systemLabel = val.label
+        if (val) {
+            this.loading = true
+            let param = {
+                "type": val.value,
+                "orders": "sort asc, name desc"
+            }
+            let param2 = {
+                filters: val ? `classCode='${ val.value }'` : undefined,
+                pageNumber: this.paginationList.page,
+                pageSize: this.paginationList.size,
+                orders: "createTime desc, id asc",
+                projectId: this.projectId
+            }
+            if (this.inputSearch != '') {
+                param2.filters = `localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
+            }
+            let promise = new Promise(resolve => {
+                dictQuery(param).then(res => {
+                    resolve(res)
+                })
+            })
+            let promise2 = new Promise(resolve => {
+                querySystem(param2).then(res => {
+                    resolve(res)
+                })
+            })
+            Promise.all([promise, promise2]).then(res => {
+                let tableData = []
+                this.loading = false
+                // 类型下信息点,重组数据
+                let basicInfos = [{ path: 'classification', name: '系统分类' }], dictStages = []
+                this.all = res[0].content
+                res[0].content.forEach(item => {
+                    let i = ["localName", "localId"]
+                    if (i.includes(item.path)) {
+                        basicInfos.push(item)
+                    } else {
+                        dictStages.push(item)
+                    }
+                })
+
+                this.headersStage = {
+                    basicInfos: {
+                        name: '基础信息台账',
+                        data: basicInfos
+                    },
+                    dictStages: {
+                        name: '运维阶段',
+                        data: dictStages
+                    }
+                }
+                this.paginationList.total = res[1].total
+                tableData = res[1].content // 主体数据
+                // 添加系统分类
+                this.tableData = tableData.map(item => {
+                    item = { ...item, classification: this.systemLabel }
+                    return item
+                })
+            })
+            // 动态信息点
+            this.codeToDataSource = {}
+            this.all.forEach(item => {
+                if (item.dataSource) {
+                    try {
+                        this.codeToDataSource[item.code] = {}
+                        item.dataSource.forEach(dic => {
+                            this.codeToDataSource[item.code][dic.code] = dic.name;
+                        })
+                    } catch (e) {
+                        console.log(e);
+                    }
+                }
+            });
+            this.getBatch(this.tableData)
+        } else {
+            console.log('void')
+        }
+    }
 }
 </script>
 
-<style scoped>
+<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-system {
+    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: 15px 0;
+    }
+
+    .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>

+ 32 - 28
vue.config.js

@@ -1,11 +1,11 @@
-const path = require("path");
-const name = "wanda-adm";
-const devServerPort = 28888;
-const stageServerPort = 28889;
+const path = require('path')
+const name = 'wanda-adm'
+const devServerPort = 28888
+const stageServerPort = 28889
 module.exports = {
     // TODO: Remember to change publicPath to fit your need
-    publicPath: process.env.NODE_ENV === "production" ? "/wanda-adm/" : "/",
-    lintOnSave: process.env.NODE_ENV === "development",
+    publicPath: process.env.NODE_ENV === 'production' ? '/wanda-adm/' : '/',
+    lintOnSave: process.env.NODE_ENV === 'development',
     productionSourceMap: false,
     devServer: {
         port: devServerPort,
@@ -21,41 +21,45 @@ module.exports = {
                 changeOrigin: true, // needed for virtual hosted sites
                 ws: true, // proxy websockets
                 pathRewrite: {
-                    ["^" + process.env.VUE_APP_BASE_API]: ""
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
                 }
             },
-            "/datacenter": {
-                target: "http://192.168.64.17:28890",
+            '/datacenter': {
+                target: 'http://192.168.64.17:28890',
                 changeOrigin: true
             },
-            "/equip-component": {
-                target: "http://192.168.64.17:28890",
+            '/equip-component': {
+                target: 'http://192.168.64.17:28890',
                 changeOrigin: true
             },
-            "/modelapi": {
-                target: "http://39.102.40.239:8080",
+            '/modelapi': {
+                target: 'http://39.102.40.239:8080',
                 changeOrigin: true,
                 pathRewrite: {
-                    "^/modelapi": "/revit-algorithm"
+                    '^/modelapi': '/revit-algorithm'
                 }
             },
-            "/message-center": {
-                target: "http://39.102.40.239:8080",
+            '/message-center': {
+                target: 'http://39.102.40.239:8080',
                 changeOrigin: true
             },
-            "/image-service": {
-                target: "http://39.97.179.199:8891",
+            '/image-service': {
+                target: 'http://39.97.179.199:8891',
                 changeOrigin: true
-            }
+            },
+            '/rwd': {
+                target: 'http://39.102.40.239:9970/',
+                changeOrigin: false
+            },
         }
     },
 
     pluginOptions: {
-        "style-resources-loader": {
-            preProcessor: "scss",
+        'style-resources-loader': {
+            preProcessor: 'scss',
             patterns: [
-                path.resolve(__dirname, "src/styles/_variables.scss"),
-                path.resolve(__dirname, "src/styles/_mixins.scss")
+                path.resolve(__dirname, 'src/styles/_variables.scss'),
+                path.resolve(__dirname, 'src/styles/_mixins.scss')
             ]
         }
     },
@@ -63,9 +67,9 @@ module.exports = {
         //在html网页包插件的选项列表中提供应用程序的标题,以便
         //可以在中访问索引.html插入正确的标题。
         // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
-        config.plugin("html").tap(args => {
-            args[0].title = name;
-            return args;
-        });
+        config.plugin('html').tap(args => {
+            args[0].title = name
+            return args
+        })
     }
-};
+}