Browse Source

集团首页修改弹窗字段

fujunwen 4 years ago
parent
commit
068f4ffb0d

+ 3 - 3
package.json

@@ -6,7 +6,7 @@
         "host": "60.205.177.43",
         "path": "/root/apps/web/wandaBmGuide",
         "user": "root",
-        "password": "WWW.sagacloud.mail@2020",
+        "password": "cGVyc2FneV8yMDIwbGFic2wlIyQ=",
         "local": "wandaBmGuide"
     },
     "scripts": {
@@ -21,9 +21,9 @@
     "dependencies": {
         "@mapbox/geojson-merge": "^1.1.1",
         "@saga-web/base": "2.1.27",
-        "@saga-web/big": "1.0.118",
+        "@saga-web/big": "1.0.119",
         "@saga-web/draw": "2.1.110",
-        "@saga-web/feng-map": "1.0.50",
+        "@saga-web/feng-map": "1.0.51",
         "@saga-web/graph": "2.1.133",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",

+ 10 - 1
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)
+}

BIN
src/assets/images/icons/switch-1.png


+ 823 - 0
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>

File diff suppressed because it is too large
+ 1061 - 924
src/components/floorMap/darkColorIndex.vue


+ 73 - 49
src/components/floorMap/index.vue

@@ -97,6 +97,8 @@
             <a>查看</a>
           </li>
         </ul>
+        <!-- 提示文本 -->
+        <div class="wellTooltip" v-show="isclickShopName">该电井为{{isclickShopName}}商铺提供供电</div>
         <div style="text-align: right; margin-top: 10px">
           <el-button
             v-show="showBtnWell"
@@ -208,7 +210,7 @@ import { queryShops, queryAssetAll } from "@/api/equipmentList.js";
 import { STopologyParser } from "@/lib/parsers/STopologyParser";
 import { mapGetters, mapActions } from "vuex";
 import { SImageItem, SImageShowType, SGraphItem } from "@saga-web/graph/lib";
-import { SColor,SPoint } from "@saga-web/draw/lib";
+import { SColor, SPoint } from "@saga-web/draw/lib";
 import bus from "@/utils/bus.js";
 import { TipelineItem } from "../../lib/items/TipelineItem";
 import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
@@ -255,7 +257,8 @@ export default {
       equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
       statusDisabled: ["已拆除"], //禁止跳转的设备状态
       roomKey: 1,
-      shopsList:[],//所有强电井对应的店铺
+      shopsList: [], //所有强电井对应的店铺
+      isclickShopName:'', //是否是点击商铺后电井高亮
     };
   },
   props: {
@@ -287,7 +290,7 @@ export default {
      * events 鼠标事件
      * isShopToWell 是否是点击商铺促发电井高亮
      */
-    handleClickLegendItem(item, events,isShopToWell=false) {
+    handleClickLegendItem(item, events, isShopToWell = false) {
       this.tabData = { tableData: [], pointData: [] };
       this.equipIds = [];
       this.showBtnWell = false;
@@ -322,12 +325,12 @@ export default {
             this.eqLoading = false;
           });
         }
-        if(isShopToWell){
-            this.popoverPosition.top = `${e.clientY+70}px`;
-            this.popoverPosition.left = `${e.clientX}px`;
-        }else{
+        if (isShopToWell) {
+          this.popoverPosition.top = `${e.clientY + 70}px`;
+          this.popoverPosition.left = `${e.clientX + 20}px`;
+        } else {
           this.popoverPosition.top = `${e.clientY}px`;
-          this.popoverPosition.left = `${e.clientX}px`;
+          this.popoverPosition.left = `${e.clientX + 30}px`;
         }
 
         this.$nextTick(() => {
@@ -339,15 +342,18 @@ export default {
           ) {
             //判断是否为电井
             this.showBtnWell = true;
+            setTimeout(()=>{
+              item.selected = true
+            },300)
           }
-          setTimeout(()=>{
+          setTimeout(() => {
             this.visible = true;
-          })
+          });
         });
       }
     },
     // 点击底图商铺高亮对应的电井
-    shopLisghtWell(itemList) {
+    shopLisghtWell() {
       const getParams = {
         plazaId: this.plazaId,
         floor: this.floorid,
@@ -357,11 +363,11 @@ export default {
         if (res.data && res.data.length) {
           for (let floor in res.data[0]) {
             shopsnumList = res.data[0][floor].map((obj) => {
-                const shoplist = obj.shopsnumList.split(",");
-                return Object.assign(obj, {
-                  shopList: shoplist,
-                });
+              const shoplist = obj.shopsnumList.split(",");
+              return Object.assign(obj, {
+                shopList: shoplist,
               });
+            });
           }
         }
         this.shopsList = shopsnumList;
@@ -582,7 +588,7 @@ export default {
               // t.name = t.data.Name
               t.name = "";
             }
-            t.connect('onMouseDown',this,this.clickMapPlace)
+            t.connect("onMouseDown", this, this.clickMapPlace);
           });
           this.fParser.wallList.forEach((t) => this.scene.addItem(t));
           this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t));
@@ -596,43 +602,46 @@ export default {
       );
     },
     // 点击底图空间
-    clickMapPlace(item,e){
+    clickMapPlace(item, e) {
       let wellId = null;
-      let wellItem = null //;对应的强电井
-      if(item.data.Name){
-        this.shopsList.forEach(equip=>{
-          equip.shopList.forEach(shop=>{
-            if(item.data.Name == shop){
+      let wellItem = null; //;对应的强电井
+      if (item.data.Name) {
+        this.shopsList.forEach((equip) => {
+          equip.shopList.forEach((shop) => {
+            if (item.data.Name == shop) {
               wellId = equip.wellnum;
             }
-          })
-        })
+          });
+        });
       }
-      this.topologyParser.imageLegendList.forEach(eqItem=>{
-        eqItem.data.AttachObjectIds.forEach((objId)=>{
-            if(objId.id == wellId){
-              // 点击空间高亮
-                wellItem = eqItem
-            }
-        })
-      })
-     if(wellItem){
-        setTimeout(()=>{
-        this.clearHightLight();
-        item.highLightFlag = true;
-        // item.zOrder = 30;
-        wellItem.selected = true;
+      this.topologyParser.imageLegendList.forEach((eqItem) => {
+        eqItem.data.AttachObjectIds.forEach((objId) => {
+          if (objId.id == wellId) {
+            // 点击空间高亮
+            wellItem = eqItem;
+          }
+        });
+      });
+      if (wellItem) {
+        setTimeout(() => {
+          this.clearHightLight();
+          item.highLightFlag = true;
+          // item.zOrder = 30;
+          wellItem.selected = true;
 
-        const point =  this.view.mapFromScene(wellItem.x,wellItem.y)
-        const event = [{
-         clientX: point.x,
-         clientY :point.y,
-        }];
-        this.handleClickLegendItem(wellItem,event,true)
-        })
-     }else{
-         this.clearHightLight();
-     }
+          const point = this.view.mapFromScene(wellItem.x, wellItem.y);
+          const event = [
+            {
+              clientX: point.x,
+              clientY: point.y,
+            },
+          ];
+          this.isclickShopName = item.name ? item.name + '—'+ item.data.Name :'xxx —'+ item.data.Name ;
+          this.handleClickLegendItem(wellItem, event, true);
+        });
+      } else {
+        this.clearHightLight();
+      }
     },
     readGraph() {
       this.readGroup(this.floorid)
@@ -731,7 +740,7 @@ export default {
             t.connect("legendItemClick", t, this.handleClickLegendItem);
           });
           // 获取本层楼所有电井对应的商铺 id
-          this.shopLisghtWell(this.topologyParser.imageLegendList);
+          this.shopLisghtWell();
 
           // 增加管线类
           // 增加图标类图例
@@ -851,6 +860,7 @@ export default {
                     -1
                   ) {
                     item.highLightFlag = true;
+
                     // item.zOrder = 30;
                     shopsnumItemList.push(item);
                   }
@@ -864,6 +874,11 @@ export default {
     },
     // 清除电井关联商铺的高亮状态
     clearHightLight() {
+      this.isclickShopName = '';
+           // 所有电井置为 select = false
+      this.topologyParser.imageLegendList.forEach((eqItem) => {
+        eqItem.selected = false;
+      });
       ItemColor.spaceHighColor = new SColor("#FBF2CC");
       // for (let key in this.wellMap) {
       //     this.wellMap[key].forEach((item) => {
@@ -1183,4 +1198,13 @@ a:hover {
     opacity: 0.5;
   }
 }
+.wellTooltip{
+  background: #FEEAD2;
+  margin-left: 12px;
+  height: 22px;
+  line-height: 22px;
+  display: inline-block;
+  padding: 0px 12px 0 12px;
+  color: #B26206;
+}
 </style>

+ 89 - 18
src/components/menuList.vue

@@ -36,23 +36,19 @@
     <div class="home-right">
       <span
         @click="dumpLegend"
-        v-show="
-          permissions ? permissions.includes('GLSMS_SYMBOL_MANAGE') : false
-        "
+        v-show="permissions ? permissions.includes('GLSMS_SYMBOL_MANAGE') : false"
       >
         <img class="img1" src="../assets/imgs/scj.png" alt />
-        <span class="span1">图例库</span>
+        <span class="span1" :style="showStyle ? 'color:#fff' : ''">图例库</span>
       </span>
 
       <span
         @click="toDrafts"
         class="span-out"
-        v-show="
-          permissions ? permissions.includes('GLSMS_PLANARGRAPH_MANAGE') : false
-        "
+        v-show="permissions ? permissions.includes('GLSMS_PLANARGRAPH_MANAGE') : false"
       >
         <img class="img2" src="../assets/imgs/cgx.png" alt />
-        <span class="span2">草稿箱</span>
+        <span class="span2" :style="showStyle ? 'color:#fff' : ''">草稿箱</span>
         <span class="span2-num" v-if="draftNum && draftNum <= 99">{{
           draftNum
         }}</span>
@@ -65,12 +61,29 @@
       </span>
       <span>
         <img class="img3" src="../assets/imgs/clock.png" alt />
-        <span class="span3">{{ times }}</span>
+        <span class="span3" :style="showStyle ? 'color:#fff' : ''">{{
+          times
+        }}</span>
       </span>
-      <!-- <span v-show="showStyleBtn" @click="checkColor">
-        切换
-        <img class='img3' src='../assets/images/change.png' alt />
-      </span> -->
+      <div class="checkkout" v-show="showStyleBtn">
+        <img
+          v-show="showStyle"
+          @click="checkColor"
+          src="../assets/images/icons/switch.png"
+        />
+        <img
+          v-show="!showStyle"
+          @click="checkColor"
+          src="../assets/images/icons/switch-1.png"
+        />
+        <div
+          class="tip"
+          :style="{ color: !showStyle ? '#8e9298' : '#69c4df','white-space':'nowrap' }"
+          @click="checkColor"
+        >
+          {{ !showStyle ? "切换驾驶舱" : "切换项目首页" }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -118,7 +131,14 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["plazas", "plazaId", "fmapID", "plazaName", "permissions"]),
+    ...mapGetters([
+      "plazas",
+      "plazaId",
+      "fmapID",
+      "plazaName",
+      "permissions",
+      "userInfo",
+    ]),
   },
   watch: {
     $route: "handleRoute",
@@ -132,7 +152,6 @@ export default {
   },
   mounted() {
     this.handleRoute(this.$route);
-    // console.log(this.fmapID)
     // 定时查询草稿箱数量
     this.getDraftNum(); //首次查询
     this.timer = setInterval(() => {
@@ -142,7 +161,6 @@ export default {
     this.$once("hook:beforeDestroy", () => {
       clearInterval(this.timer);
     });
-    console.log("permissions", this.permissions);
   },
   methods: {
     /**
@@ -194,6 +212,33 @@ export default {
       const { path } = newRouter;
       let router = path.split("home/")[1];
       this.modelNum(this.dict[router]);
+
+      // 当样式切换时样式设置为初始化
+      if (router == "homepage") {
+        this.showStyleBtn = true;
+        /**
+         * 使用localStorage中储存的, 当前用户的皮肤模式
+         */
+        let skinMode = localStorage.getItem(
+          `${this.userInfo.username}__skinMode`
+        );
+        if (skinMode) {
+          if (skinMode === "light") {
+            this.showStyle = false;
+            //   改变颜色风格
+            bus.$emit("changeStyleColor", false);
+          } else {
+            this.showStyle = true;
+            //   改变颜色风格
+            setTimeout(() => {
+              bus.$emit("changeStyleColor", true);
+            });
+          }
+        }
+      } else {
+        this.showStyleBtn = false;
+        this.showStyle = false;
+      }
     },
     formatter(str, arrv) {
       if (str && arrv) {
@@ -249,6 +294,12 @@ export default {
       this.showStyle = !this.showStyle;
       //   改变颜色风格
       bus.$emit("changeStyleColor", this.showStyle);
+
+      /**
+       * 皮肤模式切换后,存储用户名,皮肤模式
+       */
+      const newV = this.showStyle ? "dark" : "light";
+      localStorage.setItem(`${this.userInfo.username}__skinMode`, newV);
     },
   },
 };
@@ -315,7 +366,10 @@ export default {
     }
   }
   .home-style {
+    display: flex;
+    justify-content: space-between;
     background: linear-gradient(180deg, #103979 0%, #162653 100%);
+    margin-right: 0px;
     .downright {
       position: absolute;
       width: 0;
@@ -338,6 +392,7 @@ export default {
       margin: 0 8px;
       cursor: pointer;
       transition: all 0.2s;
+      flex: 1;
     }
     .is-active {
       color: #025baa;
@@ -351,12 +406,15 @@ export default {
     }
   }
   .btnlist-style {
+    display: flex;
+    align-content: center;
     & > div {
       line-height: 48px;
       text-align: center;
       background: url("../assets/imgs/btn-rect.png") no-repeat;
       float: left;
-      width: 142px;
+      max-width: 142px;
+      min-width: 100px;
       height: 48px;
       margin: 0 8px;
       cursor: pointer;
@@ -371,7 +429,7 @@ export default {
   }
   .home-right {
     float: right;
-    margin-right: 20px;
+    margin-right: 40px;
     line-height: 48px;
     color: #646c73;
     font-size: 14px;
@@ -411,6 +469,19 @@ export default {
 }
 .menu-style {
   background: #0c102c;
+  display: flex;
+  justify-content: space-between;
+}
+.checkkout {
+  display: flex;
+  align-items: center;
+  line-height: 48px;
+  color: #646c73;
+  margin-left: 16px;
+  img {
+    width: 24px;
+    height: 24px;
+  }
 }
 </style>
 <style lang="less">

+ 19 - 8
src/views/homepage/Circle.js

@@ -10,15 +10,16 @@ export class SCircle {
      *
      * @param {canvasid} id
      */
-    constructor(id) {
+    constructor(id,radius =60) {
         const canvas = document.getElementById(id);
         this.ctx = canvas.getContext("2d");
         this.percent = 100;  //最终百分比
         this.circleX = canvas.width / 2;  //中心x坐标
         this.circleY = canvas.height / 2;  //中心y坐标
-        this.radius = 60; //圆环半径
+        this.radius = radius; //圆环半径
         this.lineWidth = 5;  //圆形线条的宽度
-        this.fontSize = 40; //字体大小
+        this.fontSize = radius *3/4; //字体大小
+        this.baseName = '本月总任务'
     }
 
     /**
@@ -55,7 +56,7 @@ export class SCircle {
         this.ctx.textAlign = 'center';
         this.ctx.textBaseline = 'middle';
         this.ctx.fillStyle = '#ffffff';
-        this.ctx.fillText("本月总任务", this.circleX, this.circleY + this.fontSize * 3 / 4);
+        this.ctx.fillText(this.baseName, this.circleX, this.circleY + this.fontSize * 3 / 4);
         this.ctx.stroke();
     }
 
@@ -66,12 +67,16 @@ export class SCircle {
      * @param {y} cy
      * @param {半径} r
      */
-    sector(cx, cy, r,endAngle) {
+    sector(cx, cy, r, endAngle, strokeStyle = "#c81d39") {
         this.ctx.beginPath();
         this.ctx.lineWidth = this.lineWidth;
-        this.ctx.strokeStyle = '#c81d39';
+        this.ctx.strokeStyle = strokeStyle ? strokeStyle : '#c81d39';
         //圆弧两端的样式
         this.ctx.lineCap = 'round';
+        if(endAngle == 0){
+           this.ctx.lineCap = 'butt'
+
+        }
         this.ctx.arc(
             cx, cy, r,
             (Math.PI * -1 / 2),
@@ -105,6 +110,12 @@ export class SCircle {
         this.init(this.circleX, this.circleY, this.radius);
         //圆弧
         this.sector(this.circleX, this.circleY, this.radius, p1);
-        this.sector(this.circleX, this.circleY, this.radius * 1.2,p2);
+        this.sector(this.circleX, this.circleY, this.radius * 1.2, p2, '#FFA34A');
+    }
+    // 内外环百分比换算
+    persentTransform(total, p1, p2) {
+        const r1 = Math.floor(p1 / total * 100)
+        const r2 = Math.floor(p2 / total * 100)
+        this.setPersent(r1, r2)
     }
-    }
+}

+ 361 - 157
src/views/homepage/darkColor.vue

@@ -41,6 +41,7 @@
                     class="number"
                     v-for="(equip, index) in item.assetTypeList"
                     :key="index"
+                    @click="navToInnerPage(item, equip)"
                   >
                     <div class="title">
                       <P
@@ -120,45 +121,39 @@
           <!-- 进度调 -->
           <div class="progress">
             <div class="number">
-              <div class="nu">19</div>
+              <div class="nu">{{ recordTotal }}</div>
               <span>当月更新</span>
             </div>
             <div class="progress-box">
               <div class="progress-list" ref="plist">
-                <div class="progress-item"></div>
-                <div class="progress-item"></div>
-                <div class="progress-item"></div>
-                <div class="progress-item progress-box-bottom"></div>
+                <div
+                  :class="[
+                    'progress-item',
+                    index + 1 >= backrecordLength ? 'progress-box-bottom' : '',
+                  ]"
+                  :style="'width:' + item.persent"
+                  v-for="(item, index) in recordList"
+                  :key="index"
+                ></div>
               </div>
               <div class="progress-legend">
-                <div class="legend-item">
-                  <span class="legend-color"></span>
-                  <span class="title">重要维修</span>
-                  <span class="num">1条</span>
-                </div>
-                <div class="legend-item">
-                  <span class="legend-color"></span>
-                  <span class="title">重要维修</span>
-                  <span class="num">5条</span>
-                </div>
-                <div class="legend-item">
-                  <span class="legend-color"></span>
-                  <span class="title">重要维修</span>
-                  <span class="num">3条</span>
-                </div>
-                <div class="legend-item">
+                <div
+                  class="legend-item"
+                  v-for="(item, index) in recordList"
+                  :key="index"
+                >
                   <span class="legend-color"></span>
-                  <span class="title">重要维修</span>
-                  <span class="num">5条</span>
+                  <span class="title">{{ item.typeName }}</span>
+                  <span class="num">{{ item.cnt }}条</span>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div class="feng-map" ref="fengmap">
-          <div class="lcgn-title">
+          <!-- <div class="lcgn-title">
             <span class="span1">{{ floorInfo.code }}</span>
-          </div>
+          </div> -->
           <floorMap
             ref="floorMap"
             :loadName="loadName"
@@ -167,11 +162,11 @@
           ></floorMap>
           <!-- 图例 -->
           <div class="legend-boxs">
-            <Legend
+            <!-- <Legend
               :floors="floorsArr"
               type="1"
               :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
-            ></Legend>
+            ></Legend> -->
             <floor-list
               v-if="floorsArr.length > 0"
               :floorsArr="floorsArr"
@@ -183,80 +178,38 @@
         </div>
       </div>
       <div class="right">
-        <div class="box">
-          <div class="box-center">
-            <div class="system-main-title">
-              <h4 class="section-title">维保</h4>
-              <div class="downright"></div>
-            </div>
-            <div class="select">全部</div>
-          </div>
-          <div class="box-bottom">
-            <div class="circle">
-              <canvas id="canvas22" width="150" height="150"></canvas>
-            </div>
-            <div class="msg">
-              <div class="msg-item item-1">
-                <span class="msg-color"></span>
-                <span class="type">未完成得任务</span>
-                <span class="num">8</span>
-              </div>
-              <div class="msg-item item-1">
-                <span class="msg-color"></span>
-                <span class="type">即将逾期</span>
-                <span class="num">8</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="box">
+        <div class="box" v-for="(item, index) in statisticsList" :key="index">
           <div class="box-center">
             <div class="system-main-title">
-              <h4 class="section-title">第三方检测</h4>
+              <h4 class="section-title">{{ item.name }}</h4>
               <div class="downright"></div>
             </div>
-            <div class="select">全部</div>
-          </div>
-          <div class="box-bottom">
-            <div class="circle">
-               <canvas id="canvas2" width="150" height="150"></canvas>
-            </div>
-            <div class="msg">
-              <div class="msg-item item-1">
-                <span class="msg-color"></span>
-                <span class="type">未完成得任务</span>
-                <span class="num">8</span>
-              </div>
-              <div class="msg-item item-1">
-                <span class="msg-color"></span>
-                <span class="type">即将逾期</span>
-                <span class="num">8</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="box">
-          <div class="box-center">
-            <div class="system-main-title">
-              <h4 class="section-title">专维</h4>
-              <div class="downright"></div>
+            <div class="select">
+              <Select
+                width="110"
+                v-model="item.smsxt"
+                :isReadOnly="true"
+                @change="changeClick(item)"
+                :hideClear="true"
+                :selectdata="dataSelect"
+                :placeholder="'请选择'"
+              />
             </div>
-            <div class="select">全部</div>
           </div>
           <div class="box-bottom">
-            <div class="circle">
-               <canvas id="canvas3" width="150" height="150"></canvas>
+            <div class="circle canvas-circle">
+              <canvas :id="'canvas_' + item.type"></canvas>
             </div>
             <div class="msg">
-              <div class="msg-item item-1">
+              <div class="msg-item">
                 <span class="msg-color"></span>
                 <span class="type">未完成得任务</span>
-                <span class="num">8</span>
+                <span class="num">{{ item.unfinished }}</span>
               </div>
-              <div class="msg-item item-1">
+              <div class="msg-item">
                 <span class="msg-color"></span>
                 <span class="type">即将逾期</span>
-                <span class="num">8</span>
+                <span class="num">{{ item.due_num }}</span>
               </div>
             </div>
           </div>
@@ -266,26 +219,125 @@
   </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: "",
+      // 右侧统计
+      statisticsList: [
+        {
+          name: "维保",
+          type: 1,
+          smsxt: "000",
+          total: 0, //总任务
+          due_num: 0, //即将逾期数量
+          unfinished: 0, //未完成数量
+        },
+        {
+          name: "第三方检测",
+          type: 2,
+          smsxt: "000",
+          total: 0, //总任务
+          due_num: 0, //即将逾期数量
+          unfinished: 0, //未完成数量
+        },
+        {
+          name: "专维",
+          type: 0,
+          smsxt: "000",
+          total: 0, //总任务
+          due_num: 0, //即将逾期数量
+          unfinished: 0, //未完成数量
+        },
+      ],
+      recordList: [
+        // 更新记录数组
+        { cnt: 0, objtype: 4, typeName: "重要维修", persent: "0" },
+        { cnt: 0, objtype: 1, typeName: "重要维保", persent: "0" },
+        { cnt: 0, objtype: 5, typeName: "其他事项", persent: "0" },
+        { cnt: 0, objtype: 3, typeName: "综合事项", persent: "0" },
+      ],
+      recordTotal: 0, //更新总数
+      backrecordLength: 0, // 更新数据对应得得数量
+      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: "土建装饰" },
+      ],
+      canvasCircle: 0, //圆的半径
     };
   },
   computed: {
     ...mapGetters(["floorsArr", "floorObj"]),
   },
   methods: {
+    // 点击下拉框选择
+    changeClick(statisticItem, data) {
+      this.projectStatistics(
+        statisticItem.type,
+        statisticItem.smsxt,
+        statisticItem.type == 1
+          ? moment().format("YYYYMM")
+          : moment().format("YYYY")
+      ).then((res) => {
+        const TYPE = statisticItem.type; // 类型
+        const circle = new SCircle(`canvas_${TYPE}`, this.canvasCircle * 0.7);
+        let circle_basename = null;
+        statisticItem.type == 1
+          ? (circle_basename = "本月总任务")
+          : (circle_basename = "本年总任务");
+        circle.baseName = circle_basename;
+        // 总数
+        let total = 0;
+        // 即将预期
+        let due_num = 0;
+        //  未完成任务
+        let unfinished = 0;
+        // 累计统计
+        res.data.forEach((item) => {
+          total = total + item.total;
+          due_num = due_num + item.due_num;
+          unfinished = unfinished + item.unfinished;
+        });
+        // 赋值
+        Object.assign(statisticItem, {
+          total,
+          due_num,
+          unfinished,
+        });
+        circle.persentTransform(total, due_num, unfinished);
+        circle.setText(total);
+      });
+    },
+    expandRestItems(item, index) {
+      this.systemList.forEach((eq) => {
+        if (eq.smsxt !== item.smsxt) {
+          eq.expand = false;
+        }
+        eq.selected = false;
+      });
+      item.selected = true;
+      item.expand = !item.expand;
+    },
     imgSrc(code) {
       return require("../../assets/images/icons/" + code + ".png");
     },
@@ -315,30 +367,18 @@ export default {
         };
       }
     },
-    expandRestItems(item, index) {
-      this.cardsList.forEach((each) => {
-        each.forEach((eq) => {
-          if (eq.smsxt !== item.smsxt) {
-            eq.expand = false;
-          }
-          eq.selected = false;
-        });
-      });
-      item.expand = !item.expand;
-    },
     /**
      * @Description 获取集团 中心 区域 项目 数据树数据
      * @method param ccode  管理分区编码 集团首页必填
      * @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") {
@@ -375,7 +415,6 @@ export default {
         });
       });
     },
-
     emitFloor(item) {
       this.floorInfo = item;
       this.$refs.floorMap.init(this.floorInfo.gname);
@@ -386,8 +425,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;
@@ -395,35 +432,148 @@ export default {
       } else {
       }
     },
-    // 模拟横条数据
-    getPercent() {
-      let domList = this.$refs.plist.childNodes;
-      let width = this.$refs.plist.offsetWidth - 18;
-      setTimeout(() => {
-        domList[0].style.width = width * 0.2 + "px";
-        domList[1].style.width = width * 0.4 + "px";
-        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')
-      }, 3000);
+    // 点击跳转
+    navToInnerPage(item, equip) {
+      this.$router.push({
+        path: "./analysis",
+        query: {
+          smsxt: item.smsxt,
+          equipId: equip.category_code,
+          module: "core",
+        },
+      });
+    },
 
+    /**
+     * 项目首页右侧统计
+     *
+     * type 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
+     * system=1001//所属专业 (选填) //不填则默认全部专业(系统)
+     * time 时间
+     */
+    projectStatistics(type, smsxt, time) {
+      let params = null;
+      if (smsxt == "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 //必填
+            smsxt: smsxt, //所属专业 (选填) //不填则默认全部专业(系统)
+          },
+        };
+      }
+      return projectStatistics(params);
+    },
+    // 广场统计说明书更新记录数量
+    rptstatistic(startTime, endTime) {
+      const params = {
+        getParams: {
+          plazaId: this.plazaId,
+          changeDateStartDate: startTime, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
+          changeDateEndDate: endTime, //统计时间 type=0或type=2时:格式:yyyy  /  type=1时:格式:yyyyMM //必填
+        },
+      };
+      rptstatistic(params).then((res) => {
+        if (res.data.total && res.data.objcnt) {
+          res.data.objcnt.forEach((obj) => {
+            this.recordList.forEach((recorditem) => {
+              if (obj.objtype == recorditem.objtype) {
+                recorditem.cnt = obj.cnt;
+                recorditem.persent =
+                  Math.ceil((obj.cnt / res.data.total) * 100) + "%";
+              }
+            });
+          });
+          this.backrecordLength = res.data.objcnt.length;
+          this.recordTotal = res.data.total;
+        } else {
+          this.backrecordLength = 0;
+          this.recordTotal = 0;
+        }
+      });
+    },
+    // 获取右侧统计数据
+    getRightstatic() {
+      // 设置圆环半径
+        const BoxDom = document.getElementsByClassName("canvas-circle")[0];
+        this.canvasCircle = 0;
+        if (BoxDom.offsetHeight > BoxDom.offsetWidth) {
+          this.canvasCircle = BoxDom.offsetWidth / 2;
+        } else {
+          this.canvasCircle = BoxDom.offsetHeight / 2;
+        }
+        // 对右侧数据做遍历
+        this.statisticsList.forEach((statisticItem) => {
+          const TYPE = statisticItem.type; // 类型
+          const Dom = document.getElementById(`canvas_${TYPE}`);
+          // 设置Dom得width\height
+          Dom.height = this.canvasCircle * 2;
+          Dom.width = this.canvasCircle * 2;
+          this.projectStatistics(
+            statisticItem.type,
+            statisticItem.system,
+            statisticItem.type == 1
+              ? moment().format("YYYYMM")
+              : moment().format("YYYY")
+          ).then((res) => {
+            let circle_basename = null;
+            statisticItem.type == 1
+              ? (circle_basename = "本月总任务")
+              : (circle_basename = "本年总任务");
+            const circle = new SCircle(
+              `canvas_${TYPE}`,
+              this.canvasCircle * 0.7
+            );
+            circle.baseName = circle_basename;
+            // 总数
+            let total = 0;
+            // 即将预期
+            let due_num = 0;
+            //  未完成任务
+            let unfinished = 0;
+            // 累计统计
+            res.data.forEach((item) => {
+              total = total + item.total;
+              due_num = due_num + item.due_num;
+              unfinished = unfinished + item.unfinished;
+            });
+            // 赋值
+            Object.assign(statisticItem, {
+              total,
+              due_num,
+              unfinished,
+            });
+            circle.persentTransform(total, due_num, unfinished);
+            circle.setText(total);
+          });
+        });
     },
   },
   created() {
-    this.getSystemList(103000, 1);
+    let plazaId = localStorage.getItem("PLAZAID");
+    if (plazaId) {
+      this.plazaId = plazaId;
+    }
+    this.getSystemList();
   },
   mounted() {
     this.init();
-    this.getPercent();
+    // 获取右侧数据
+    this.getRightstatic();
+    // 获取说明书更新记录
+    // 获取说明书更新记录
+    const endTime = moment().add(1, "days").format("YYYYMMDD000000");
+    const startTime = moment().subtract(29, "days").format("YYYYMMDD000000");
+    this.rptstatistic(startTime, endTime);
     this.$refs.floorMap.init(this.floorInfo.gname);
   },
 };
@@ -441,11 +591,14 @@ export default {
     box-sizing: border-box;
     display: flex;
     .system-main-title {
-      width: 152px;
+      min-width: 130px;
+      max-width: 200px;
       height: 40px;
       background: rgba(22, 73, 206, 0.36);
       line-height: 40px;
       margin-bottom: 12px;
+      font-size: 18px;
+      color: #95bfff;
       position: relative;
       h4 {
         color: #fff;
@@ -464,12 +617,24 @@ 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;
+        &::-webkit-scrollbar-track {
+          background: rgba(22, 73, 206, 0.3);
+          border-radius: 2px;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: rgba(22, 73, 206, 0.8);
+          border-radius: 10px;
+          border: none;
+        }
         ul {
           li.system-item {
             position: relative;
@@ -482,7 +647,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 +747,15 @@ export default {
             }
           }
           li.selected {
-            border-color: #6883ff;
-            box-shadow: 0 2px 10px 0px #6883ff;
+            /deep/ .p-select-header {
+              background: #cccccc !important;
+            }
+            /deep/ .p-select-cursor-input {
+              color: #ffffff !important;
+              &::-webkit-input-placeholder {
+                color: #ffffff !important;
+              }
+            }
           }
           li:hover {
             border-color: #e4e5e7;
@@ -604,10 +776,9 @@ export default {
           li:nth-of-type(6) {
             .system-name {
               background: linear-gradient(
-                133deg,
-                rgba(57, 152, 219, 0.3) 0%,
-                rgba(112, 187, 239, 0.3),
-                100%
+                to left,
+                rgba(57, 152, 219, 0.3),
+                rgba(112, 187, 239, 0.3)
               );
               border-radius: 6px 0px 0px 6px;
             }
@@ -645,8 +816,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;
@@ -655,14 +829,13 @@ export default {
             height: 100%;
             .progress-list {
               height: 12px;
-              background: #ccc;
+              background: rgba(56, 94, 204, 0.48);
               border-radius: 6px 6px;
               display: flex;
               margin-right: 30px;
               overflow: hidden;
               .progress-item {
                 height: 12px;
-                width: 30%;
                 border-right: 6px #0c102c solid;
                 overflow: hidden;
               }
@@ -687,7 +860,7 @@ export default {
               display: flex;
               margin-top: 28px;
               .legend-item {
-                margin-right: 30px;
+                margin-right: 25px;
                 display: flex;
                 align-items: center;
                 .legend-color {
@@ -796,10 +969,13 @@ export default {
       box-sizing: border-box;
       .box {
         width: 100%;
-        height: ~"calc(33% - 16px)";
-        border: 1px solid #ccc;
+        height: ~"calc((100% - 30px) / 3)";
+        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,21 +983,49 @@ 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 {
           // padding-top: 36px;
           box-sizing: border-box;
           display: flex;
+          position: relative;
+          align-items: center;
+          height: calc(100% - 52px);
           .circle {
-            width: 150px;
-            height: 150px;
+            max-width: 150px;
+            min-width: 120px;
+            height: 100%;
+            display: flex;
+            margin-left: 20px;
+            align-items: center;
           }
           .msg {
             flex: 1;
-            margin-top: 10px;
-            .msg-item {
+            padding: 0 0 0 20px;
+            white-space:nowrap;
+            box-sizing: border-box;
+            .msg-item:nth-of-type(1) {
+              display: flex;
+              align-items: center;
+              margin-top: 16px;
+              .msg-color {
+                display: block;
+                width: 10px;
+                height: 10px;
+                border-radius: 10px 10px;
+                background: #fd933c;
+                margin-right: 10px;
+              }
+              .type {
+                margin: 0 6px 0 4px;
+              }
+            }
+            .msg-item:nth-of-type(2) {
               display: flex;
               align-items: center;
               margin-top: 16px;
@@ -830,7 +1034,7 @@ export default {
                 width: 10px;
                 height: 10px;
                 border-radius: 10px 10px;
-                background: #ffffff;
+                background: #cf233d;
                 margin-right: 10px;
               }
               .type {

+ 4 - 6
src/views/homepage/index.vue

@@ -112,6 +112,7 @@ import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
 import {sortBy} from 'lodash'
 import moment from 'moment'
 import darkColor from "./darkColor"
+import { mapGetters } from "vuex";
 import bus from '@/utils/bus.js'
 export default {
     components:{darkColor},
@@ -123,7 +124,7 @@ export default {
             ],
             itemsList: [],
             changeList: [],
-            plazaId:'',
+            // plazaId:'',
             srcList: {
                 0: require('../../assets/images/icons/maintain.png'),
                 1: require('../../assets/images/icons/protect.png'),
@@ -133,11 +134,8 @@ export default {
             showDark:false,
         }
     },
-    created () {
-        let plazaId = localStorage.getItem('PLAZAID')
-        if (plazaId) {
-            this.plazaId = plazaId
-        }
+    computed: {
+        ...mapGetters(['plazaId']),
     },
     mounted() {
         this.testAjax()

+ 9 - 9
src/views/statistics/index.vue

@@ -1162,7 +1162,7 @@ export default {
           };
         },
       }).addTo(myMaps);
- 
+
       if (this.currentLevel === 1) {
         //1集团
         this.pantGroupMap(this.currentZoneData, this.currentSysId);
@@ -1205,6 +1205,7 @@ export default {
      */
     openMaskPanel(system) {
       let target = this.getDataByCityCcode(this.selectedZone)
+      console.log('target',target)
       if (target) {
         this.currentDialogLevel = target.level
         this.currentLevel = target.level
@@ -1228,7 +1229,7 @@ export default {
           });
         }
       });
- 
+
       if (this.tabData.length) {
         this.activeName = this.tabData[0].id;
         this.currentDialogTab = this.activeName;
@@ -1551,7 +1552,7 @@ export default {
         let marker = L.marker(center, { icon: textIcon }).addTo(groupLayer);
         let marker2 = L.marker(center, { icon: circleIcon }).addTo(groupLayer);
         let feaureGroup = L.featureGroup([marker, marker2]);
-       
+
         popup.on('add' , (ev) => {
            let popupDom = document.querySelectorAll('.leaflet-mypopup-content')[0]
            let tipDom = document.querySelectorAll('.leaflet-popup-tip')[0]
@@ -1563,7 +1564,7 @@ export default {
              tipDom.style.background="#09173E"
            }
         })
-      
+
         marker2.on("mouseover", (ev) => {
             popup.openOn(myMaps);
         });
@@ -1619,7 +1620,7 @@ export default {
           let item = data[i];
           if (item.is_exception_num) {
             html += `<div class="line">
-                            <span>${item.category_name}</span> 
+                            <span>${item.category_name}</span>
                             <span>${item.asset_num || "--"}${
               item.category_name === "屋面logo"
                 ? "个"
@@ -1633,7 +1634,7 @@ export default {
                 </div>`;
           } else {
             html += `<div class="line">
-                            <span>${item.category_name}</span> 
+                            <span>${item.category_name}</span>
                             <span>${item.asset_num || "--"}${
               item.category_name === "屋面logo"
                 ? "个"
@@ -1656,7 +1657,7 @@ export default {
 };
 </script>
 
-<style scoped lang="less">  
+<style scoped lang="less">
 @import "../../assets/css/dark.less";
 @import "../../assets/css/light.less";
 .dark-my-leaflet-div-icon{
@@ -1688,5 +1689,4 @@ export default {
   padding-top: 0;
 }
 
-</style> 
- 
+</style>

+ 1 - 1
vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
             // 图例库服务
             "/serve": {
                 // target: 'http://192.168.200.87:8088',
-                target: 'http://60.205.177.43:8080', //阿里云
+                target: 'http://60.205.177.43:28888', //阿里云
                 // target: 'http://10.199.143.129:8080',    //生产环境
                 changeOrigin: true,
                 pathRewrite: {