debug

src/api/homePage.js

@@ -34,4 +34,13 @@ export function queryEventStatus({ getParams }) {
 // 查询集团首页事项状态统计
 export function getExceptionNum({ getParams }) {
     return httputils.getJson(`/data/home/queryExceptionPlazaInfo`, getParams)
-}
+}
+
+// 查询项目首页右侧统计
+export function projectStatistics({ getParams }) {
+    return httputils.getJson(`/data/base/projectStatistics`, getParams)
+}
+//统计说明书更新记录数量
+export function rptstatistic({ getParams }) {
+    return httputils.getJson(`/data/rpt_change_record/statistic`, getParams)
+}

src/components/Legend/src/legendColor.vue

@@ -0,0 +1,823 @@
+/**
+*@author:han_yao_long
+*@date:2020.12.28
+*@info：图例
+*/
+<template>
+    <div>
+        <div class='legend-container'>
+            <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0'>图例</div>
+            <!-- 图里展示状态组件 -->
+            <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0'>
+                <div class='legend-tab' v-if='showView===1'>
+                    <div class='legend-table2' v-if='systemName=="土建装饰"'>
+                        <lengend-view @changeSwitch='handleSwich' ref='viewLengend' :systemName='systemName'></lengend-view>
+                    </div>
+                    <div class='legend-table' v-else>
+                        <div>
+                            <lengend-view @changeSwitch='handleSwich' ref='viewLengend' :systemName='systemName'></lengend-view>
+                        </div>
+                    </div>
+                </div>
+            </el-collapse-transition>
+            <!-- 图例编辑状态组件 -->
+            <el-collapse-transition>
+                <div v-if='showView===2'>
+                    <lengend-edit
+                        @changeSwitch='handleSwich'
+                        v-if='editTable.length>0'
+                        :loading='loading1'
+                        ref='editLen'
+                        :floorInfo='type=="0"?floorInfo:""'
+                        :editTable='editTable'
+                        @saveNum='saveNum'
+                        :tableHeigth='tableHeigth'
+                    ></lengend-edit>
+                </div>
+            </el-collapse-transition>
+        </div>
+
+        <!-- 单独展示新增分布图 -->
+        <el-tooltip
+            v-show='permissions ? permissions.includes("GLSMS_PLANARGRAPH_MANAGE"):false'
+            effect='dark'
+            v-if='floors.length==0'
+            content='新增分布图'
+            placement='left'
+        >
+            <div class='edit_map1' @click='addFloor'>
+                <!-- <p class='tltk' style='margin-left: -5px;'> -->
+                <img src='@/assets/imgs/bjj.png' alt />
+                <!-- </p> -->
+            </div>
+        </el-tooltip>
+        <div class='select-floor' v-if='isFloor'>
+            <p class='p1'>{{`请选择需要创建"${categoryId=='FZQZL'?'分水器支路分布图':'消防泵房引出管路分布图'}"的楼层`}}</p>
+            <p class='p2'>
+                <Select width='240' tipPlace='top' v-model='floor' caption='楼层：' size='mini' :selectdata='floorSelectAble' :placeholder='"请选择"'></Select>
+            </p>
+            <p class='p3'>
+                <span @click='cancel'>取消</span>
+                <span @click='determine'>确定</span>
+            </p>
+        </div>
+
+        <legend-remarks @queryView='queryView' @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
+    </div>
+</template>
+<script>
+import lengendView from '@/components/viewLengend'
+import legendRemarks from '@/components/legendremarks'
+import lengendEdit from '@/components/editLengend'
+import { mapGetters } from 'vuex'
+import bus from '@/utils/bus.js'
+import { queryStatis, updateStatis, queryRead, queryDraftNum } from '@/api/public.js'
+
+export default {
+    name: 'Legend',
+    data() {
+        return {
+            text1: '主要设备房包括：冷源机房，热源机房，开闭站，配变电所（室），发电机房，消防水泵房，消防高位水箱间，生活水泵房，慧云机房，垃圾房',
+            text2: '图例后×的数字，代表此位置的数量',
+            loading: true,
+            loading1: true,
+            viewTable: [],
+            editTable: [],
+            tbData1: [],
+            tbData2: [],
+            tbData3: [],
+            multipleSelection: [],
+            editText: '',
+            editSwitch: false,
+            isFloor: false,
+            floorSelectAble: [],
+            floor: '', //传的楼层
+            floorName: '',
+            draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
+            interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
+            timer: null, //保存定时器
+            timer1: null,
+            tableHeigth: 300, // 编辑图例框得高度
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'planNum',
+            'typeNum',
+            'remarksText',
+            'plazaId',
+            'fmapID',
+            'floorSelect2',
+            'isMessage',
+            'ssoToken',
+            'showView',
+            'legendTable',
+            'permissions',
+        ]),
+    },
+    props: {
+        floors: {
+            //原理图中有数据楼层
+            default: () => {
+                ;[]
+            },
+            type: Array,
+        },
+        type: {
+            // 原理图类型 == 0 ;
+            default: '1',
+            type: String,
+        },
+        systemName: {
+            default: '',
+            type: String,
+        },
+        categoryId: {
+            default: '',
+            type: String,
+        },
+        editTips: {
+            // 编辑器文案
+            type: String,
+            default: '',
+        },
+        // 区分lengend 在外边 0 还是弹窗内部 1
+        innerLeng: {
+            type: Number,
+            default: 0,
+        },
+        // 弹窗组件内部传入的楼层信息
+        floorInfo: {
+            type: Object,
+            default() {
+                return {}
+            },
+        },
+    },
+    components: { lengendView, legendRemarks, lengendEdit },
+    watch: {
+        // 监听 vuex 中currentFloor的变化,切换楼层后,调用接口查询,显示右下角小红点
+        '$store.state.currentFloor': {
+            handler(newV, oldV) {
+                if (newV.gname !== oldV.gname) {
+                    clearInterval(this.timer)
+                    this.getDraftNum()
+                    this.timer = setInterval(() => {
+                        this.getDraftNum()
+                    }, this.interval)
+                }
+            },
+            deep: true,
+        },
+        '$store.state.categoryId': {
+            handler(newV, oldV) {
+                if (newV !== oldV) {
+                    clearInterval(this.timer1)
+                    this.getDraftNum()
+                    this.timer1 = setInterval(() => {
+                        this.getDraftNum()
+                    }, this.interval)
+                }
+            },
+            deep: true,
+        },
+        // 弹窗组件内传入floorInfo,查询 getDraftNum
+        floorInfo: {
+            handler(newV, oldV) {
+                if (newV !== oldV) {
+                    clearInterval(this.timer)
+                    this.getDraftNum()
+                    this.timer = setInterval(() => {
+                        this.getDraftNum()
+                    }, this.interval)
+                }
+            },
+            deep: true,
+        },
+    },
+    '$refs.viewLengend': {
+        handler(newV, oldV) {
+            this.$refs.viewLengend.setSelected()
+        },
+    },
+    methods: {
+        /**
+         * @name getDraftNum
+         * @description 查询草稿箱数量
+         */
+        async getDraftNum() {
+            let res = null,
+                floorId = this.$store.state.currentFloor.gname || this.$cookie.get('floorMapId'),
+                categoryId = this.categoryId || this.$cookie.get('categoryId')
+            // 弹窗组件内传入floorInfo,使用其楼层id
+            this.floorInfo.gname && (floorId = this.floorInfo.gname)
+            // 增加校验 floorId,防止上传 undefined
+            if (!floorId) {
+                return true
+            }
+            let data = {
+                Distinct: true,
+                Filters: `projectId='${this.plazaId}';isPub=false;BuildingId='1';categoryId='${categoryId}';floorId='${floorId}'`,
+                PageNumber: 1,
+                PageSize: 500,
+                Projection: ['floorId'],
+            }
+            try {
+                // 调用接口
+                res = await queryDraftNum(data)
+            } catch (error) {
+                console.error(error)
+            }
+            if (!res) {
+                this.draftNum = null
+                return false
+            }
+            // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
+            this.draftNum = res.Total || null
+        },
+        formatFloor() {
+            this.floorSelectAble = []
+            this.floorSelectAble = this.floorSelect2.filter((item) => {
+                const hit = this.floors.find((i) => i.gname == item.id)
+                return !hit
+            })
+        },
+        testClick(data) {},
+        // 编辑备注
+        legendClik() {
+            this.$refs.EditdMarks.showModal()
+        },
+        // 查询备注
+        queryMarks() {
+            let postParams = {
+                categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
+                projectId: this.$store.state.plazaId,
+                BuildingID: '1',
+                Pub: true,
+                FloorID: this.$cookie.get('floorNow'),
+            }
+            let data = {}
+            queryRead({ data, postParams }).then((res) => {
+                // this.$store.commit('SETREMARKSTEXT', '')
+                if (res.data) {
+                    let Res = res.data.Data && res.data.Data[0] ? res.data.Data[0].Note : ''
+                    if (Res) {
+                        this.$store.commit('SETREMARKSTEXT', Res)
+                    } else {
+                        let marks = ''
+                        if (this.planNum && this.typeNum) {
+                            marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
+                        } else if (this.planNum) {
+                            marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
+                        } else if (this.typeNum) {
+                            marks = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
+                        } else {
+                            marks = ''
+                        }
+                        this.$store.commit('SETREMARKSTEXT', marks)
+                    }
+                }
+            })
+        },
+        // 点击展示图例框
+        showTl() {
+            if (this.showView != 1) {
+                this.$store.commit('SETSHOWVIEW', 1)
+                setTimeout(() => {
+                    this.setLengedHeight()
+                })
+            } else {
+                this.$store.commit('SETSHOWVIEW', 0)
+            }
+            this.queryView(false)
+        },
+        // 编辑图例
+        editTl() {
+            if (this.showView != 2) {
+                this.setLengedHeight()
+                this.$store.commit('SETSHOWVIEW', 2)
+            } else {
+                this.$store.commit('SETSHOWVIEW', 0)
+            }
+            this.queryEditNum(true)
+        },
+        /**
+         * @name goToEditer
+         * @description 跳转editer编辑器
+         */
+        goToEditer() {
+            // let FloorID = this.floor ? this.floor : this.$cookie.get('floorMapId') || 'f1'
+            // let categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
+            // let floorName = this.floorName ? this.floorName : this.$cookie.get('floorNow')
+            // let seq = this.$cookie.get('currentFloorId')
+
+            //主页面(楼层功能,设备设置中的)legend, 楼层参数参数处理
+            let FloorID = this.$cookie.get('floorMapId')
+            let floorName = this.$cookie.get('floorNow')
+            let seq = this.$cookie.get('currentFloorId')
+            let categoryId = this.$cookie.get('categoryId') //系统
+
+            // 弹窗组件内传入floorInfo, 楼层参数处理
+            if (this.floorInfo.gname && !this.floor) {
+                FloorID = this.floorInfo.gname
+                floorName = this.floorInfo.code
+                seq = this.floorInfo.seq
+                categoryId = this.categoryId
+            }
+            //弹窗组件点击新增楼层,确认的楼层 楼层字段处理
+            if (this.floor) {
+                // 从store中筛选出选中的楼层信息
+                let floorInfo = this.$store.state.floorsArr.filter((item) => item.gname === this.floor)[0]
+                FloorID = this.floor
+                floorName = floorInfo.code
+                seq = floorInfo.seq
+                categoryId = this.categoryId
+            }
+            const { conf } = window.__systemConf
+            const editerUrl = conf[process.env.NODE_ENV + '_editerUrl']
+            if (!this.plazaId) {
+                return
+            }
+            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${floorName}&fmapID=${this.fmapID}&seq=${seq}&token=${this.ssoToken}`
+            let url = editerUrl + 'editer?' + encodeURIComponent(data)
+            window.open(url, 'edit')
+        },
+        handleSwich(val) {
+            this.queryView(!val)
+        },
+        // 默认隐藏为0的项目
+        handleSwich2(val) {
+            this.editSwitch = val
+            this.queryEditNum(!this.editSwitch)
+        },
+        queryViewMethods() {},
+        // 查询图例
+        queryView(flag) {
+            let postParams = {}
+            let categoryId = this.categoryId || this.$cookie.get('categoryId')
+            let data = {
+                categoryId,
+                graphId: this.$cookie.get('graphId'),
+                projectId: this.$store.state.plazaId,
+                flag: flag,
+                buildingId: '1',
+                floorId: this.$store.state.currentFloor.gname,
+            }
+            // 弹窗组件内传入floorInfo,使用其楼层id
+            this.floorInfo.gname && (data.floorId = this.floorInfo.gname)
+            queryStatis({ data, postParams }).then((res) => {
+                // this.$store.commit('SETREMARKSTEXT', '')
+                this.$store.commit('SETPLANNUM', '')
+                this.loading = false
+                let viewTable = []
+                viewTable = res.data.Data ? res.data.Data : []
+                this.$store.commit('SETLEGENDTABLE', viewTable)
+                if (viewTable.length > 0) {
+                    viewTable.forEach((el) => {
+                        if (el.Name == '主要设备房') {
+                            this.$store.commit('SETPLANNUM', el.Num)
+                        }
+                    })
+                    if (this.remarksText) {
+                        this.$store.commit('SETREMARKSTEXT', this.remarksText)
+                    } else {
+                        let marks = ''
+                        if (this.planNum && this.typeNum) {
+                            marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
+                        } else if (this.planNum) {
+                            marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
+                        } else if (this.typeNum) {
+                            marks = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
+                        } else {
+                            marks = ''
+                        }
+                        this.$store.commit('SETREMARKSTEXT', marks)
+                    }
+                    setTimeout(() => {
+                        this.setLengedHeight()
+                    })
+                }
+                this.$nextTick(() => {
+                    if (this.$refs.viewLengend) {
+                        this.$refs.viewLengend.setSelected()
+                    }
+                })
+            })
+        },
+        // 查询编辑状态图例
+        queryEditNum(flag) {
+            let postParams = {}
+            let categoryId = this.categoryId || this.$cookie.get('categoryId')
+            let data = {
+                categoryId,
+                graphId: this.$cookie.get('graphId'),
+                projectId: this.$store.state.plazaId,
+                flag: flag,
+                buildingId: '1',
+                floorId: this.$store.state.currentFloor.gname,
+            }
+            // 弹窗组件内传入floorInfo,使用其楼层id
+            this.floorInfo.gname && (data.floorId = this.floorInfo.gname)
+            queryStatis({ data, postParams }).then((res) => {
+                this.loading1 = false
+                this.editTable = res.data.Data ? res.data.Data : []
+            })
+        },
+        // 编辑数量
+        queryEdit(val) {
+            let arr = []
+            if (val.length > 0) {
+                val.forEach((e) => {
+                    let obj = {
+                        BuildingId: '1',
+                        Num: Number(e.Num),
+                        GraphElementId: e.GraphElementId,
+                        FloorId: this.$cookie.get('floorMapId'),
+                        ProjectId: e.ProjectId,
+                        CategoryId: e.GraphCategoryId,
+                    }
+                    arr.push(obj)
+                })
+            }
+            let params = {
+                postParams: {
+                    Content: arr,
+                },
+            }
+            updateStatis(params)
+                .then((res) => {
+                    if (res.Result == 'success') {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                        })
+                        this.$store.commit('SETSHOWVIEW', 1)
+                    } else {
+                        this.$message({
+                            message: '操作失败',
+                            type: 'error',
+                        })
+                    }
+                })
+                .catch((err) => {
+                    this.$message({
+                        message: err,
+                        type: 'error',
+                    })
+                })
+        },
+        saveNum(val) {
+            if (val.length > 0) {
+                val.forEach((element) => {
+                    element.Modify = element.IsModify
+                })
+                this.queryEdit(val)
+                this.$store.commit('SETSHOWVIEW', 1)
+                this.handleSwich(true)
+            } else {
+                this.$store.commit('SETSHOWVIEW', 1)
+                this.handleSwich(true)
+            }
+        },
+        addFloor() {
+            this.isFloor = true
+            this.formatFloor()
+        },
+        // 新增楼层取消
+        cancel() {
+            this.isFloor = false
+        },
+        // 新增楼层确定
+        determine() {
+            this.isFloor = false
+            this.goToEditer()
+        },
+        queryRemarksMethods() {},
+        init() {
+            // 图例
+            bus.$off('queryViewMethods') //解决触发多次监听
+            bus.$on('queryViewMethods', () => {
+                this.queryView(false)
+            })
+            // 备注
+            bus.$off('queryRemarksMethods')
+            bus.$on('queryRemarksMethods', (res) => {
+                // this.$store.commit('SETREMARKSTEXT', '')
+                if (res) {
+                    this.$store.commit('SETREMARKSTEXT', res)
+                } else {
+                    let marks = ''
+                    if (this.planNum && this.typeNum) {
+                        marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
+                    } else if (this.planNum) {
+                        marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
+                    } else if (this.typeNum) {
+                        marks = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
+                    } else {
+                        marks = ''
+                    }
+                    this.$store.commit('SETREMARKSTEXT', marks)
+                }
+            })
+        },
+        // 设置图例整体高度
+        setLengedHeight() {
+            let dom = document.getElementsByClassName('legend-table')[0]
+            if (!dom) {
+                return
+            }
+            if (window.screen.height > 1000) {
+                dom.style.maxHeight = '768px'
+                this.tableHeigth = '500px'
+            } else {
+                dom.style.maxHeight = '434px'
+                this.tableHeigth = '334px'
+            }
+        },
+    },
+    mounted() {
+        this.init()
+        // 定时查询草稿箱数量
+        this.getDraftNum() //首次查询
+        this.timer = setInterval(() => {
+            this.getDraftNum()
+        }, this.interval)
+        // 页面销毁前,清除定时器
+        this.$once('hook:beforeDestroy', () => {
+            clearInterval(this.timer)
+        })
+        // 设置图例最大高度
+        this.setLengedHeight()
+    },
+}
+</script>
+<style lang="less" scoped>
+@red: rgb(255, 0, 0); //红色
+.legend-container {
+    position: relative;
+    // top: -23px;
+    .legend {
+        text-align: center;
+        line-height: 44px;
+        width: 44px;
+        height: 44px;
+        font-size: 14px;
+        margin-bottom: 8px;
+        font-family: MicrosoftYaHei;
+        color: rgba(2, 91, 170, 1);
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+        border-radius: 2px;
+        cursor: pointer;
+        line-height: 44px;
+    }
+    .legend2 {
+        text-align: center;
+        line-height: 44px;
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        margin-bottom: 8px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        border-radius: 2px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(255, 255, 255, 1);
+    }
+
+    .legend-tab {
+        position: absolute;
+        top: 0;
+        right: 47px;
+        .legend-table {
+            padding: 16px;
+            width: 385px;
+            max-height: 700px;
+            overflow: auto;
+            overflow-y: auto;
+            position: relative;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+            border-radius: 2px;
+            border: 1px solid rgba(228, 229, 231, 1);
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+        .legend-table2 {
+            padding: 16px;
+            // height: 356px;
+            max-height: 700px;
+            width: 385px;
+            // width: 420px;
+            overflow: auto;
+            overflow: hidden;
+            overflow-y: auto;
+            position: relative;
+            background: rgba(255, 255, 255, 1);
+            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+            border-radius: 2px;
+            border: 1px solid rgba(228, 229, 231, 1);
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+}
+.edit_map {
+    position: fixed;
+    bottom: 28px;
+    z-index: 1;
+    right: 28px;
+    .edit-icon,
+    .edit-icon2 {
+        width: 48px;
+        height: 48px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
+        border-radius: 50%;
+        text-align: center;
+        line-height: 48px;
+        display: inline-block;
+        img {
+            line-height: 48px;
+            width: 20px;
+            height: 20px;
+            margin-top: -4px;
+        }
+    }
+
+    .edit-icon {
+        cursor: pointer;
+    }
+    /** 右下角修改,角标样式 */
+    .corner-con {
+        position: relative;
+        .corner {
+            position: absolute;
+            right: 3px;
+            top: 3px;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: @red;
+            border-radius: 90px;
+            font-size: 12px;
+            text-align: center;
+            line-height: 18px;
+            color: #fff;
+        }
+    }
+
+    .bjtk {
+        width: 40px;
+        height: 40px;
+        display: inline-block;
+        text-align: center;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+        border-radius: 90px;
+        line-height: 40px;
+        font-size: 12px;
+        margin: 0 auto;
+        cursor: pointer;
+        border: 1px solid #ccc;
+        margin-left: 4px;
+        margin-bottom: 8px;
+        margin-top: 10px;
+        display: none;
+    }
+    .tltk {
+        margin-bottom: 10px;
+        display: none;
+        cursor: pointer;
+    }
+    .tltk-1 {
+        margin-bottom: 10px;
+        display: none;
+        cursor: pointer;
+        border: 1px solid #eee;
+    }
+    .tltk-1 {
+        margin-bottom: 10px;
+        display: none;
+        cursor: pointer;
+        border: 1px solid #eee;
+    }
+}
+.edit_map:hover .tltk {
+    margin-left: -10px;
+    right: 22px;
+    z-index: 1;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
+    border-radius: 90px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.edit_map:hover .tltk-1 {
+    display: block;
+}
+.edit_map:hover .bjtk {
+    display: block;
+}
+.edit_map1 {
+    position: fixed;
+    bottom: 28px;
+    right: 30px;
+    z-index: 1;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
+    border-radius: 90px;
+    text-align: center;
+    img {
+        display: block;
+        margin-top: 12px;
+        margin-left: 12px;
+    }
+    .select-floor {
+        width: 288px;
+        height: 220px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+        border-radius: 2px;
+        border: 1px solid rgba(228, 229, 231, 1);
+        position: relative;
+        right: 0;
+    }
+}
+.select-floor {
+    width: 288px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+    border-radius: 2px;
+    border: 1px solid rgba(228, 229, 231, 1);
+    position: fixed;
+    bottom: 26px;
+    right: 84px;
+    padding: 24px 24px 20px 24px;
+    .p1 {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        line-height: 19px;
+    }
+    .p2 {
+        margin-top: 8px;
+        margin-bottom: 68px;
+    }
+    .p3 {
+        display: flex;
+        justify-content: flex-end;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        line-height: 22px;
+        text-align: center;
+        span:nth-of-type(1) {
+            width: 58px;
+            height: 24px;
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(195, 199, 203, 1);
+            margin-right: 12px;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        span:nth-of-type(2) {
+            width: 58px;
+            height: 24px;
+            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+            border-radius: 2px;
+            color: rgba(255, 255, 255, 1);
+            border-radius: 2px;
+            cursor: pointer;
+        }
+    }
+}
+@media screen and (max-width: 1600px) {
+    .legend-container .legend-tab .legend-table {
+        max-height: 546px;
+    }
+}
+</style>
+<style lang="less">
+.legend-container {
+    .el-table thead {
+        background: rgba(2, 91, 170, 0.1);
+    }
+    .el-table td,
+    .el-table th {
+        padding: 3px 0;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        border-radius: 2px;
+    }
+}
+</style>

src/components/menuList.vue

@@ -67,10 +67,10 @@
         <img class="img3" src="../assets/imgs/clock.png" alt />
         <span class="span3">{{ times }}</span>
       </span>
-      <!-- <span v-show="showStyleBtn" @click="checkColor">
+      <span v-show="showStyleBtn" @click="checkColor">
         切换
         <img class='img3' src='../assets/images/change.png' alt />
-      </span> -->
+      </span>
     </div>
   </div>
 </template>

src/views/homepage/darkColor.vue

@@ -189,11 +189,21 @@
               <h4 class="section-title">维保</h4>
               <div class="downright"></div>
             </div>
-            <div class="select">全部</div>
+            <div class="select">
+              <Select
+                width="110"
+                v-model="weibaoData"
+                :isReadOnly="true"
+                @change="testClick"
+                :hideClear="true"
+                :selectdata="dataSelect"
+                :placeholder="'请选择'"
+              />
+            </div>
           </div>
           <div class="box-bottom">
             <div class="circle">
-              <canvas id="canvas22" width="150" height="150"></canvas>
+              <canvas id="canvas_1" width="150" height="150"></canvas>
             </div>
             <div class="msg">
               <div class="msg-item item-1">
@@ -215,11 +225,21 @@
               <h4 class="section-title">第三方检测</h4>
               <div class="downright"></div>
             </div>
-            <div class="select">全部</div>
+            <div class="select">
+              <Select
+                width="110"
+                v-model="disanfangData"
+                :isReadOnly="true"
+                @change="testClick"
+                :hideClear="true"
+                :selectdata="dataSelect"
+                :placeholder="'请选择'"
+              />
+            </div>
           </div>
           <div class="box-bottom">
             <div class="circle">
-               <canvas id="canvas2" width="150" height="150"></canvas>
+              <canvas id="canvas_2" width="150" height="150"></canvas>
             </div>
             <div class="msg">
               <div class="msg-item item-1">
@@ -241,11 +261,21 @@
               <h4 class="section-title">专维</h4>
               <div class="downright"></div>
             </div>
-            <div class="select">全部</div>
+            <div class="select">
+              <Select
+                width="110"
+                v-model="zhuanweiData"
+                :isReadOnly="true"
+                @change="testClick"
+                :hideClear="true"
+                :selectdata="dataSelect"
+                :placeholder="'请选择'"
+              />
+            </div>
           </div>
           <div class="box-bottom">
             <div class="circle">
-               <canvas id="canvas3" width="150" height="150"></canvas>
+              <canvas id="canvas_3" width="150" height="150"></canvas>
             </div>
             <div class="msg">
               <div class="msg-item item-1">
@@ -266,26 +296,46 @@
   </div>
 </template>
 <script>
-import { getCardList } from "@/api/homePage";
+import { getCardList, projectStatistics, rptstatistic } from "@/api/homePage";
 import floorMap from "@/components/floorMap/darkColorIndex.vue";
 import floorList from "@/components/floorListDark.vue";
 import { mapGetters } from "vuex";
+import { Legend } from "@/components/Legend/src/legendColor";
 import { SCircle } from "./Circle.js";
+import moment from "moment";
 export default {
-  components: { floorMap, floorList },
+  components: { floorMap, floorList, Legend },
   data() {
     return {
       systemList: [], //系统数据
+      plazaId: "",
       show: true,
       floorInfo: {},
       loadName: "",
       type: "",
+      weibaoData: "000", //维保
+      disanfangData: "000", //第三方检测
+      zhuanweiData: "000", //zhuanwei
+      dataSelect: [
+        { id: "000", name: "全部" },
+        { id: "1003", name: "消防系统" },
+        { id: "1001", name: "供电系统" },
+        { id: "1002", name: "暖通系统" },
+        { id: "1006", name: "电梯系统" },
+        { id: "1005", name: "给排水" },
+        { id: "1004", name: "弱电系统" },
+        { id: "1007", name: "燃气系统" },
+        { id: "1008", name: "土建装饰" },
+      ],
     };
   },
   computed: {
     ...mapGetters(["floorsArr", "floorObj"]),
   },
   methods: {
+    testClick(data) {
+      console.log(data);
+    },
     imgSrc(code) {
       return require("../../assets/images/icons/" + code + ".png");
     },
@@ -332,13 +382,12 @@ export default {
      * @method param level  1集团 2中心 3区域 0广场 集团首页必填
      * @method param plazaId 广场id  如果是广场则此参数必填 其他情况下非必填
      */
-    getSystemList(ccode, level) {
-      let params = null;
-      if (level === 0) {
-        params = { getParams: { plazaId: ccode, level } };
-      } else {
-        params = { getParams: { ccode, level } };
-      }
+    getSystemList() {
+      let params = {
+        getParams: {
+          plazaId: this.plazaId,
+        },
+      };
       return new Promise((resolve, reject) => {
         getCardList(params).then((res) => {
           if (res.result == "success") {
@@ -369,13 +418,13 @@ export default {
               this.currentSysId = res.data[0].smsxt;
 
               this.systemList = res.data;
+              console.log("this.systemList", this.systemList);
               resolve(res);
             }
           }
         });
       });
     },
-
     emitFloor(item) {
       this.floorInfo = item;
       this.$refs.floorMap.init(this.floorInfo.gname);
@@ -386,8 +435,6 @@ export default {
     },
     init() {
       this.loadName = `楼层功能-${this.floorInfo.code}`;
-      console.log(this.floorsArr.length);
-      console.log(this.$cookie.get("currentFloorId"));
       if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
         this.floorInfo = this.floorsArr.find((item) => {
           return this.$cookie.get("currentFloorId") == item.seq;
@@ -405,21 +452,80 @@ export default {
         domList[2].style.width = width * 0.2 + "px";
         domList[3].style.width = width * 0.2 + "px";
         // 设置圆
-        const circle = new  SCircle('canvas22');
-         circle.setPersent(37,50);
-         circle.setText('1');
-        //  const circle2 = new SCircle('canvas2',100);
-        //  circle2.setPersent(70,20);
-        //  circle2.setText('23')
-        //  const circle3 = new  SCircle('canvas3',100);
-        //  circle3.setPersent(40,80);
-        //  circle3.setText('39')
+
+        const circle1 = new SCircle("canvas_1");
+        const circle2 = new SCircle("canvas_2");
+        const circle3 = new SCircle("canvas_3");
+        circle1.setPersent(37, 50);
+        circle1.setText("1");
+        circle2.setPersent(37, 50);
+        circle2.setText("1");
+        circle3.setPersent(37, 50);
+        circle3.setText("1");
       }, 3000);
+    },
 
+    /**
+     * 项目首页右侧统计
+     *
+     * type 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
+     * system=1001//所属专业 (选填) //不填则默认全部专业（系统）
+     * time 时间
+     */
+    projectStatistics(type, system, time) {
+      let params = null;
+      if (system == "000") {
+        params = {
+          getParams: {
+            plazaId: this.plazaId,
+            type: type, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
+            statisticsDate: time, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
+          },
+        };
+      } else {
+        params = {
+          getParams: {
+            plazaId: this.plazaId,
+            type: type, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
+            statisticsDate: time, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
+            system: system, //所属专业 (选填) //不填则默认全部专业（系统）
+          },
+        };
+      }
+
+      projectStatistics(params).then((res) => {
+        console.log("resresrse", res);
+      });
+    },
+    // 广场统计说明书更新记录数量
+    rptstatistic(startTime, endTime) {
+      const params = {
+        getParams: {
+          plazaId: this.plazaId,
+          changeDateStartDate: startTime, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
+          changeDateStartDate: endTime, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
+        },
+      };
+      rptstatistic(params).then((res) => {});
     },
   },
   created() {
-    this.getSystemList(103000, 1);
+    let plazaId = localStorage.getItem("PLAZAID");
+    if (plazaId) {
+      this.plazaId = plazaId;
+    }
+    this.getSystemList();
+    // 获取右侧统计
+    // 专维
+    this.projectStatistics(0, this.zhuanweiData, moment().format("YYYY"));
+    // 维保
+    this.projectStatistics(1, this.weibaoData, moment().format("YYYYMM"));
+    // 第三方
+    this.projectStatistics(2, this.disanfangData, moment().format("YYYY"));
+    // 获取说明书更新记录
+    const startTime = moment().add(1, 'days').format('YYYYMMDD000000');
+    const endTime = moment().add(1, 'days').format('YYYYMMDD000000');
+    this.rptstatistic();
   },
   mounted() {
     this.init();
@@ -446,6 +552,8 @@ export default {
       background: rgba(22, 73, 206, 0.36);
       line-height: 40px;
       margin-bottom: 12px;
+      font-size: 18px;
+      color: #95bfff;
       position: relative;
       h4 {
         color: #fff;
@@ -464,11 +572,14 @@ export default {
     .left {
       width: 30.05%;
       height: 100%;
-      padding: 16px 0px 16px 10px;
       box-sizing: border-box;
-      border-radius: 1px solid #cccccc;
+      background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
+      background-color: transparent;
+      background-size: 8px 8px;
+      border: 10px solid;
+      border-image: url("../../assets/images/border.png") 14;
       .system-list {
-        height: 100%;
+        height: ~"calc(100% - 44px)";
         overflow-y: auto;
         ul {
           li.system-item {
@@ -482,7 +593,7 @@ export default {
             border: 1px solid#0C102C;
             border-radius: 4px;
             transition: 0.5s;
-            background: #0d1d42;
+            background: rgba(13, 29, 66, 0.6);
             cursor: pointer;
             .system-name {
               position: absolute;
@@ -582,8 +693,9 @@ export default {
             }
           }
           li.selected {
-            border-color: #6883ff;
-            box-shadow: 0 2px 10px 0px #6883ff;
+            /deep/ .p-select-header {
+              background: #cccccc !important;
+            }
           }
           li:hover {
             border-color: #e4e5e7;
@@ -645,8 +757,11 @@ export default {
       .update-record {
         width: 100%;
         height: 196px;
-        border: 1px solid #cccccc;
-        padding: 10px;
+        background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
+        background-color: transparent;
+        background-size: 8px 8px;
+        border: 10px solid;
+        border-image: url("../../assets/images/border.png") 14;
         .progress {
           display: flex;
           align-items: center;
@@ -797,9 +912,12 @@ export default {
       .box {
         width: 100%;
         height: ~"calc(33% - 16px)";
-        border: 1px solid #ccc;
+        background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
+        background-color: transparent;
+        background-size: 8px 8px;
+        border: 10px solid;
+        border-image: url("../../assets/images/border.png") 14;
         margin-bottom: 20px;
-        padding: 10px;
         box-sizing: border-box;
         .box-center {
           display: flex;
@@ -807,7 +925,10 @@ export default {
           .select {
             width: 110px;
             height: 36px;
-            background: #1649ce;
+            /deep/ .p-select-header {
+              background: rgba(22, 73, 206, 0.36) !important;
+              color: #fff !important;
+            }
           }
         }
         .box-bottom {
@@ -843,4 +964,10 @@ export default {
     }
   }
 }
+/deep/ .p-select-option-box {
+  background: rgba(22, 73, 206, 0.36) !important;
+  .p-select-option-menu {
+    background: rgba(22, 73, 206, 0.36) !important;
+  }
+}
 </style>

src/views/homepage/index.vue

@@ -133,11 +133,8 @@ export default {
             showDark:false,
         }
     },
-    created () {
-        let plazaId = localStorage.getItem('PLAZAID')
-        if (plazaId) {
-            this.plazaId = plazaId
-        }
+    computed: {
+        ...mapGetters(['plazaId']),
     },
     mounted() {
         this.testAjax()