wanda-bm-guide/src/views/statistics/index.vue

<template>
    <div class='overview'>
        <!-- 顶部路由 -->
        <!-- <div class='menu'>
            <div class='home' @click='$emit("update:modelNum", 0)'>
                <div class='downright'></div>
                <div class='home-box'>
                    <img src='@/assets/imgs/logo.png' alt />
                    <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
                </div>
            </div>
            <div class='home-right'>
                <span style='color:#8D9399'>
                    <span class='span3'>{{times}}</span>
                </span>
            </div>
        </div> -->
        <!-- 面包屑 -->
        <nav class='navigation'>
            <section class='crumbs'>
                <span>{{currentZoneData.cname}}</span>
                <span v-for='(item , index) in crumbsHtml' :key='index' @click='navgateFromCrumbs(item[1], index)'>
                    {{item[0]}}
                    <em v-if='index !== crumbsHtml.length - 1'>></em>
                </span>
            </section>
            <section>
                <TreeSelect
                    width='280'
                    :hideClear='false'
                    :isReadOnly='false'
                    :caption='"选择管理分区"'
                    :data='regulateDistrictData'
                    placeholder="全部"
                    :disabled='false'
                    @change='selectProjectItem'
                />
            </section>
        </nav>
        <main class='container'>
            <section class='system-general'>
                <div class='system-main-title'>
                    <h4 class='section-title'>系统概况</h4>
                </div>
                <div class='system-list'>
                    <ul>
                        <li
                            @click='getInfoOfProject(item)'
                            :class='["system-item", item.selected ? "selected":""]'
                            v-for='(item , index) in systemList'
                            :key='index'
                        >
                            <div class='system-name'>
                                <div :class='["img", item.selected ? "selected":""]'>
                                    <img :src='imgSrc(item.smsxt)' />
                                </div>
                                <span>{{item.smsxtname}}</span>
                            </div>
                            <div class='system-equipments' v-if='item.assetTypeList'>
                                <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
                                    <div class="title">
                                        <P>{{equip.category_name}}</p>
                                        <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                    </div>
                                    <p>
                                        <span>{{equip.asset_num}}</span>
                                        <span>台</span>
                                    </p>
                                </div>
                            </div>
                            <div v-else style='width:65%;text-align:center;'>暂无数据</div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class='map-box'>
                <section class='cards-list'>
                    <div class='card' @click='navToManageNumber'>
                        <div class='img'>
                            <img src='../../assets/images/icons/ratio.png' />
                        </div>
                        <p>上线管理说明书数量</p>
                        <strong>{{plazaInfoCount.upwcCount}}</strong>
                    </div>
                    <div class='card' @click='navToIntroduceUpdate'>
                        <div class='img'>
                            <img src='../../assets/images/icons/audit.png' />
                        </div>
                        <p>当月说明书更新项目数量</p>
                        <strong>{{plazaInfoCount.rptChangeCount}}</strong>
                    </div>
                    <div class='card' @click='navToFocusItems'>
                        <div class='img'>
                            <img src='../../assets/images/icons/contract.png' />
                        </div>
                        <p>当月重点关注事项项目数量</p>
                        <strong>{{plazaInfoCount.zhsxChangeCount}}</strong>
                    </div>
                </section>
                <section class='map-container'>
                    <div id='map'></div>
                    <div class='legend'>
                        <div class='legend-bar' v-for='(bar , index) in legendList' :key='index'>
                            <span :style='{background:bar.color}'></span>
                            <em>{{bar.num}}</em>
                        </div>
                    </div>
                </section>
            </section>
            <section class='ratio-list'>
                <section class='block' :style='panelStyle(item)' v-for='(item , index) in maintainList' :key='index'>
                    <h4 class='section-title' @click='toggerPanel(item)'>{{item.title}}<img @mouseenter="showToolTip(index, item.title)" @mouseleave="hideToolTip(index, item.title)" src="../../assets/images/icons/notice.png" /></h4>
                    <transition name="selectDownUpExtendTop">
                        <div class="tool-tip" v-if="item.showToolTip">
                            <h5 style="font-weight:bold;">{{item.title + '比值'}}</h5>
                            <p>{{item.title === '专维' ? '逾期未完成/今年即将到期任务数/总任务' : '当月即将到期/总任务'}}</p>
                            <div class="tip-triangle" :style="{left: item.title === '第三方检测' ? '12.5rem': '7.8rem'}"> </div>
                        </div>
                    </transition>
                    <div class='list'>
                        <ul>
                            <li v-for='(option , index) in item.data' :key='index'>
                                <div class='ratio'>
                                    <span>{{option.cname}}</span>
                                    <span v-if='item.title === "专维"'>
                                        <span>{{option.rptGlsmsStatistics.unfinished}} /</span>
                                        <span>{{option.rptGlsmsStatistics.due_num}} /</span>
                                        <span>{{option.rptGlsmsStatistics.total}}</span>
                                    </span>
                                    <span v-else>
                                        <span>{{option.rptGlsmsStatistics.due_num}} /</span>
                                        <span>{{option.rptGlsmsStatistics.total}}</span>
                                    </span>
                                </div>
                                <div class='bar'>
                                    <div class='inner-bar' :style='barStyle(option.rptGlsmsStatistics, item.title)'></div>
                                </div>
                            </li>
                        </ul>
                        <div
                            class='arrow'
                            v-show='item.expand !== 2'
                            :style='{transform: item.expand === 1 ? "rotate(-90deg)" : "rotate(90deg)"}'
                            @click='toggerPanel(item)'
                        >
                            <img src='../../assets/images/icons/right.png' />
                        </div>
                    </div>
                </section>
            </section>
        </main>
    </div>
</template>

<script>
let myMaps = null
import { login } from '@/api/login'
import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus } from '@/api/homePage'
import { formatTime } from '@/utils/format.js'
import { mapGetters } from 'vuex'
import { sortBy } from 'lodash'
import moment from 'moment'
import L from 'leaflet'
import 'leaflet-contextmenu'
export default {
    data() {
        return {
            crumbsHtml: [], // 导航数据
            zoneNames: {   // 各个中心对应的拼音名称
                "东北": 'dongbei',
                "西北": 'xibei',
                "华北": 'huabei',
                "华中": 'huazhong',
                "华东": 'huadong',
                "中南": 'zhongnan',
                "西南": 'xinan',
                "华南": 'huanan',
                "东南": 'dongnan',
                "其他": 'Other'
            },
            provinceCities: {  // 各个区域的的省会城市  坐标 缩放级别
                "青岛": { province: 'shandong', center: [36.06667, 120.33333], zoom: 8 },
                "北京": { province: 'beijing', center: [39.604882122321174, 116.43660987308282], zoom: 8 },
                "天津": { province: 'tianjin', center: [39.130593, 117.260892], zoom: 7 },
                "济南": { province: 'shandong', center: [36.4, 117.0], zoom: 7 },
                "上海": { province: 'shanghai', center: [31.090574094954192, 121.46299249603001], zoom: 10 },
                "南京": { province: 'jiangsu', center: [32.05, 118.78333], zoom: 7 },
                "无锡": { province: 'jiangsu', center: [31.57, 120.3], zoom: 9 },
                "厦门": { province: 'fujian', center: [24.46667, 118.1], zoom: 9 },
                "宁波": { province: 'zhejiang', center: [29.52, 121.33], zoom: 8 },
                "杭州": { province: 'zhejiang', center: [30.323100460201648, 120.50270908851112], zoom: 9 },
                "福州": { province: 'fujian', center: [26.05, 119.18], zoom: 8 },
                "合肥": { province: 'anhui', center: [31.52, 117.17], zoom: 7 },
                "长沙": { province: 'hunan', center: [28.12, 112.59], zoom: 8 },
                "南昌": { province: 'jiangxi', center: [28.4, 115.55], zoom: 8 },
                "大连": { province: 'liaoning', center: [39.98974718404572, 122.66034125625548], zoom: 8 },
                "沈阳": { province: 'liaoning', center: [41.72213058512578, 122.93479223528372], zoom: 8 },
                "长春": { province: 'jilin', center: [42.88033923363183, 127.02188147691707], zoom: 8 },
                "东莞": { province: 'guangdong', center: [23.644524198573688, 114.83844948916203], zoom: 8 },
                "南宁": { province: 'guangxi', center: [22.48, 108.19], zoom: 7 },
                "广州": { province: 'guangdong', center: [22.755920681486405, 112.01244459124548], zoom: 7 },
                "太原": { province: 'shanxi1', center: [37.54, 112.33], zoom: 7 },
                "武汉": { province: 'hubei', center: [31.147006308556566, 112.97898510653813], zoom: 7 },
                "郑州": { province: 'henan', center: [34.46, 113.4], zoom: 7 },
                "哈尔滨": { province: 'heilongjiang', center: [46.800059446787316, 128.40505022926592], zoom: 7 },
                "乌鲁木齐": { province: 'xinjiang', center: [43.45, 87.36], zoom: 8 },
                "呼和浩特": { province: 'neimenggu', center: [45.182036837015886, 116.82329020199336], zoom: 5 },
                "西安": { province: 'shanxi2', center: [36.08462129606931, 109.4527754086213], zoom: 7 },
                "银川": { province: 'ningxia', center: [38.108627664321276, 102.36578196225639], zoom: 7 },
                "成都": { province: 'sichuan', center: [30.24957724046765, 103.4647651330231], zoom: 7 },
                "昆明": { province: 'yunnan', center: [25.903703303407667, 105.10972266685498], zoom: 8 },
                "重庆": { province: 'chongqing', center: [29.35, 106.33], zoom: 8 }
            },
            zoneCenter: {  // 各个区域的中心坐标
                dongbei: [43.161614, 124.396818], // 取自 东北运营中心 长春区域 四平万达广场
                xibei: [37.999781, 106.197518], // 西北  银川区域 吴忠万达广场     zoom 5
                huabei: [39.019075, 117.686953], // 华北中心  天津区域  天津塘沽万达广场
                huazhong: [33.999249, 113.872131], // 华中 郑州 许昌万达广场
                huadong: [32.477565, 119.923391], // 华东 南京 泰州
                zhongnan: [28.860875644389676, 114.55131767165491],
                huanan: [22.635788, 110.17923], // 华南 南宁 玉林万达广场
                dongnan: [26.657907, 119.545678], //东南 福州 宁德万达广场
                xinan: [28.749998, 104.648788] // 西南 成都 宜宾万达广场
            },
            legendList: [  // 地图图例数据
                { color: '#F54E45', num: '≥200' },
                { color: '#F58300', num: '100-200' },
                { color: '#FFBA6B', num: '50-99' },
                { color: '#0091FF', num: '10-49' },
                { color: '#82C7FC', num: '1-9' },
                { color: '#EEEEEE', num: '0' }
            ],
            plazaInfoCount: {},
            systemList: [],  // 系统列表数据
            currentZoneData: {}, // 当前分区
            currentDistrictData: [], //当前管理分区数据
            currentSelectedSys: {}, // 当前所选择的系统
            currentSysId: '', // 当前系统ID
            regulateDistrictData: [], // 分区数据
            maintainList: [],  // 专维  维保  第三方检测 数据
            circleSize: {  // 根据缩放级别 规定绘制点的尺寸  下标文字离点的距离
                4: { inner: 50000, outer: 100000, offset: 2 },
                5: { inner: 15000, outer: 30000, offset: 0.8 },
                6: { inner: 15000, outer: 30000, offset: 0.8 },
                7: { inner: 8000, outer: 16000, offset: 0.3 },
                8: { inner: 4000, outer: 8000, offset: 0.14 },
                9: { inner: 2000, outer: 4000, offset: 0.08 },
                10: { inner: 1000, outer: 2000, offset: 0.04 },
                11: { inner: 1000, outer: 2000, offset: 0.04 }
            },
            barColors :{  // // 专维  维保  第三方检测 颜色
                0: 'linear-gradient(to right, #369CF7 , #025BAA)',   // 蓝色
                1: 'linear-gradient(to right, #F58300 , #F58300)',   // 黄色
                2: 'linear-gradient(to right, #F54E45 , #F54E45)'    // 红色
            }
        }
    },
    computed: {
        ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
    },
    watch: {},
    created() {
        this.currentTime()
    },
    mounted() {

        window.vm = this
        this.getFrameworkTreeData()
        window.addEventListener('resize', this.reinitalMap, false)
    },
    methods: {
        showToolTip (index) {
            this.maintainList.forEach(item => {item.showToolTip = false})
            this.maintainList[index].showToolTip = true
        },
        hideToolTip (index) {
            this.maintainList[index].showToolTip = false
        },
        reinitalMap () {
            if (myMaps) {
                myMaps.invalidateSize(true);
            }
        },
        imgSrc(code) {
            return require('../../assets/images/icons/' + code + '.png')
        },
        /**
         * 跳转到 当月说明书更新项目数量
         */

        navToIntroduceUpdate() {
            // this.$router.push({path:''})
        },
        /**
         * 跳转到 上线管理说明书数量
         */
        navToManageNumber() {
            // this.$router.push({path:''})
        },
        /**
         * 跳转到 当月重点关注事项项目数量
         */
        navToFocusItems() {
            // this.$router.push({path:''})
        },
        /**
         * @Description 根据数据创建导航路径
         * @Param data 当前点击的项
         */
        createNavpathByData(data) {
            if (data.level === 1) {
                this.crumbsHtml = []
            } else {
                let pathArr = data.path.split('/')
                let newArr = []
                pathArr.forEach(item => {
                    newArr.push(item.split('&'))
                })
                this.crumbsHtml = newArr
            }
            this.currentZoneData = data
        },
        /**
         * @Description 通过导航进行导航
         * @Param id 所选区域的id
         * @Param index 点击项的序号
         */
        navgateFromCrumbs(id, index) {
            let data = this.getDataByCityCcode(id)  // 根据
            if (!data) return
            let level = data.level    //1集团 2中心 3区域 0广场
            this.currentZoneData = data
            this.currentLevel = level
            this.getEventStatusData(level, data.ccode)
            this.queryPlazaInfoCount(data.ccode, data.level, data.cid)
            this.getSystemList(data.ccode, data.level)
            if (level === 1) {
                this.pantGroupMap(data, this.currentSysId)
            } else if (level === 2) {
                this.pantZonesMap(data, this.currentSysId)
            } else {
                this.pantProjectsMap(data, this.currentSysId)
            }
            this.crumbsHtml = this.crumbsHtml.splice(0, index + 1)
        },
        /**
         * @Description 分区树 点击选择分区
         * @Param ids  返回选中项的id
         * @Param data 返回选中项的数据
         */
        selectProjectItem(ids) {
            let data = this.getDataByCityCcode(ids)
            this.currentLevel = data.level
            if (data.level === 0) {  //  level=0时 plazaId必填
                this.queryPlazaInfoCount(data.ccode, data.level, data.ccode)
            } else {
                this.queryPlazaInfoCount(data.ccode, data.level)
            }

            this.getSystemList(data.ccode, data.level)
            this.getEventStatusData(this.currentLevel, data.ccode)
            this.createNavpathByData(data)
            this.currentZoneData = data

            let level = data.level // //1集团 2中心 3区域 0广场
            if (level === 1) {
                this.pantGroupMap(data, this.currentSysId)
            } else if (level === 2) {
                this.pantZonesMap(data, '1001')
            } else if (level === 3) {
                this.pantProjectsMap(data, this.currentSysId)
            } else {   // 点击项为广场时 直接跳转到详情页  地图不用响应
                let pathData = {fromGroup: 'true'}
                let routeData = this.$router.resolve({
                    path:'/home/overview',query:{plazaId:data.ccode}
                     });
                window.open(routeData.href, true);
                window.__fromGroupPage = {
                    level: 0,
                    plazaName: data.cname,
                    plazaId: data.ccode
                }
                this.$store.commit('SETPLAZENAME', data.cname)
                // localStorage.setItem('PLAZAID', data.ccode)
                // this.$store.commit('STOREPLAZAID', data.ccode)
                this.$store.commit('SETISGETMAP',true)
            }
        },

        /**
         * @Description  查询项目信息统计数量
         * @Param  ccode  管理分区编码 必填
         * @Param  level 1集团 2中心 3区域 0广场 必填
         * @Param  plazaId level=0时 必填
         */
        queryPlazaInfoCount(ccode, level, plazaId) {
            let params = {}
            if (level === 0 ) {
                params = {getParams:{ccode, level}}
            } else {
                params = {getParams:{ccode, level, plazaId}}
            }
            getPlazaInfoCount(params).then(res => {
                if (res.result === 'success') {
                    if (res.data) {
                        this.plazaInfoCount = res.data
                    }
                }
            })
        },
        /**
         * @Description 根据指定id 查找数据
         * @Param id 要查找数据的id
         */
        getDataByCityCcode(id) {
            return recursionFindData(this.currentDistrictData, id)
            let target = null
            function recursionFindData(data, id) {
                data.forEach(item => {
                    if (item.ccode === id) {
                        target = item
                    } else {
                        if (item.children && item.children.length) {
                            recursionFindData(item.children, id)
                        }
                    }
                })
                if (target) {
                    return target
                }
            }
        },
        /**
        * @Description 获取分区树数据
        * @method param empty
        */
        getFrameworkTreeData() {
            login({
                returnTree: true
            }).then(res => {
                if (res.result === 'success') {
                    recursionData(res.treeData)
                    let data = res.treeData[0]
                    let level = data.level
                    this.currentZoneData = data
                    this.currentLevel = level // 初始化的时候判断是哪一级    //1集团 2中心 3区域 0广场
                    data.open = true  // 默认展开第一级
                    this.regulateDistrictData = [data]
                    this.currentDistrictData = res.treeData
                    this.getSystemList(data.ccode, level )
                    this.getEventStatusData(level, data.ccode)
                    if (level === 0) {  //  level=0时 plazaId必填
                        this.queryPlazaInfoCount(data.ccode, level, data.ccode)
                    } else {
                        this.queryPlazaInfoCount(data.ccode, level)
                    }
                }
                function recursionData(data, parent) {
                    data.forEach(item => {
                        item.name = item.cname
                        item.id = item.ccode
                        if (parent) {
                            item.path = parent + '/' + (item.cname + '&' + item.ccode)
                        }
                        let children = item.children
                        if (Array.isArray(children) && children.length) {
                            recursionData(children, item.path ? item.path : item.cname + '&' + item.ccode)
                        }
                    })
                }
            })
        },
         /**
        * @Description 展开 维保 第三方检测 专维
        * @Param  item 展开的某一项
        */
        toggerPanel(item) {
            // expand 0 初始状态  1 展开状态 2 隐藏状态
            if (item.expand === 0 || item.expand === 2) {
                item.expand = 1 // 展开
                this.maintainList.forEach(option => {
                    if (option.title !== item.title) {
                        option.expand = 2 // 隐藏
                    }
                })
            } else {
                this.maintainList.forEach(option => {
                    option.expand = 0 // 回到初始状态
                })
            }
        },
        /**
        * @Description  计算 维保/第三方检测/专维 三个模块的高度
        * @Param item 数据中的每一项
        */
        panelStyle(item) {
            // expand 0 初始状态  1 展开状态 2 隐藏状态
            if (item.expand === 0) {
                return { height: `calc((100% - 2rem) / 3)` }
            } else if (item.expand === 1) {
                return { height: 'calc(100% - 11.2rem)' }
            } else {
                return { height: '4.6rem' }
            }
        },
        /**
        *@Description 根据数据计算维保/第三方检测/专维各自颜色条的长度  维保、第三方检测是用即将逾期数据判断；专维是如果有逾期未完成直接标红，如果没有，按照即将逾期的数量显示颜色
        *@Param item 某一项的数据
        *@Param title 标题
        */
        barStyle(item, title) {
            let bg = ''
            let type = this.selectColorByNum(item.due_num, item.total)
            let ratio = 0
            if (title === '专维') {
                if (item.unfinished>0) {
                    bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
                } else {
                    bg = this.barColors[type]
                }
                ratio = ((item.unfinished + item.due_num) / item.total) * 100
            } else {
                bg = this.barColors[type]
                ratio = (item.due_num / item.total) * 100
            }
            return {
                width: ratio + '%',
                backgroundImage: bg
            }
        },
        /**
         * @Description 根据数据来返 维保/第三方检测/专维 三个模块中显示条的颜色
         * @Param num 即将逾期数 / 逾期未完成数
         * @Param total 总数
         */
        selectColorByNum (num, total) {
            let devide =  num / total
            if ( (num > 1 && num <=24  ) || (  devide > 0.1 && devide <=0.2 ) ) {
                return 0
            } else if ( (num > 24 && num <= 49  ) || (  devide > 0.2 && devide <=0.5 ) ) {
                return 1
            } else {
                return 2
            }
        },

        /**
        * @Description 根据数据 判定地图上图标的显示显示颜色
        * @Param data 作为判断的数据
        */
        paintColorByData(data) {
            let color = {
                area: '',
                border: ''
            }
            if (data >= 200) {
                color.area = '#F54E45'
                color.border = 'rgba(245,78,69,0.2)'
            } else if (data >= 100 && data < 200) {
                color.area = '#F58300'
                color.border = 'rgba(245,131,0,0.2)'
            } else if (data >= 50 && data < 100) {
                color.area = '#FFBA6B'
                color.border = 'rgba(255,186,107,0.2)'
            } else if (data >= 10 && data < 50) {
                color.area = '#0091FF'
                color.border = 'rgba(0,145,255,0.2)'
            } else if (data >= 1 && data < 10) {
                color.area = '#82C7FC'
                color.border = 'rgba(130,199,25,0.2)'
            } else {
                color.area = '#EEEEEE'
                color.border = '#CCC'
            }
            return color
        },
        /**
        * @Description 显示当期时间
        */
        currentTime() {
            this.times = moment().format('YYYY.MM.DD HH:mm')
            setTimeout(this.currentTime, 1000)
        },

         /**
        * @Description 格式化时间
        * @method param empty
        */
        formatter(str, arrv) {
            if (str && arrv) {
                const Objs = arrv.find(e => e && e.plazaid == str)
                return Objs ? Objs.plazaname : '--'
            } else {
                return ''
            }
        },
         /**
        * @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}}
            }
            getCardList(params).then(res => {
                if (res.result == 'success') {
                    let result = res.data
                    if (result && Array.isArray(result)) {
                        result.forEach(item => {
                            if (item.assetTypeList) {
                                item.assetTypeList = item.assetTypeList.splice(0, 3)
                            }
                        })
                        res.data.forEach(item => {
                            item.selected = false
                        })
                        res.data[0].selected = true
                        this.currentSelectedSys = res.data[0]
                        this.currentSysId = res.data[0].smsxt
                        this.systemList = res.data
                        this.initMap()
                    }
                }
            })
        },
        /**
         * @Description 获取事项状态统计数据
         * @Param ccode 管理分区编码 必填
         * @Param level 1集团 2中心 3区域 0广场 必填
         */
        getEventStatusData(level, ccode) {
            let params = {
                getParams: {
                    level,
                    ccode
                }
            }
            queryEventStatus(params).then(res => {
                if (res.result === 'success') {
                    let data = res.data
                    let orginalObj = {
                        1:{title:'维保',data:[], expand: 0, showToolTip:false},
                        2:{title:'第三方检测',data:[], expand: 0, showToolTip:false},
                        0:{title:'专维',data:[], expand: 0, showToolTip:false},
                    }
                    let arr = new Array(3)
                    for (let key in data) {
                        let obj = {}
                        let sortData = data[key]
                        if (data.hasOwnProperty(key)) {
                            // 维保，第三方检测排名按照即将到期任务数量从多到少排序，多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序，多的靠前
                            // due_num 即将到期    unfinished 逾期未完成
                            if (key == '0') {
                                sortData.forEach(item => {
                                    item.sort = item.rptGlsmsStatistics.due_num + item.rptGlsmsStatistics.unfinished
                                })
                            } else {
                                sortData.forEach(item => {
                                    item.sort = item.rptGlsmsStatistics.due_num
                                })
                            }
                            orginalObj[key].data =  sortBy(sortData, option => {return option.sort }).reverse()
                        }
                    }
                    arr[0] = orginalObj[1]
                    arr[1] = orginalObj[2]
                    arr[2] = orginalObj[0]
                    this.maintainList = arr
                }
            })
        },
        /**
         *@Description 初始化地图
         */
        initMap() {
            let that = this
            myMaps = L.map('map', {
                center: new L.LatLng(38, 103),
                zoom: 4,
                // maxZoom:4,
                // minZoom:4,
                crs: L.CRS.EPSG3857,
                zoomControl: false,
                boxZoom: false,
                attributionControl: false,
                contextmenu: true,
                contextmenuWidth: 140,
                dragging: false,
                closePopupOnClick:true,
                doubleClickZoom:false
            })
            let JsonData = require('../../assets/geoData/china.json')
            let layer = L.geoJSON(JsonData.features, {
                style: function() {
                    return {
                        weight: 1,
                        color: '#B3D2FF',
                        fillColor: '#DEECFF'
                    }
                }
            }).addTo(myMaps)
            if (this.currentLevel === 1) {//1集团
                this.pantGroupMap(this.currentZoneData, this.currentSysId)
            } else if (this.currentLevel === 2) {  // 2中心
                this.pantZonesMap(this.currentZoneData, this.currentSysId)
            } else if (this.currentLevel === 3) {  // 3区域
                this.pantProjectsMap(this.currentZoneData, this.currentSysId)
            }
        },
        /**
         * @Description 清空地图 并添加全国底图
        */
        clearAllLayers() {
            myMaps.eachLayer(function(layer) {
                myMaps.removeLayer(layer)
            })
            let JsonData = require('../../assets/geoData/china.json')
            let layer = L.geoJSON(JsonData.features, {
                style: function() {
                    return {
                        weight: 1,
                        color: '#B3D2FF',
                        fillColor: '#DEECFF'
                    }
                }
            }).addTo(myMaps)
        },
        /**
         * @Description 移动地图到指定中心
         */
        flyTo(center, zoom) {
            myMaps.setView(center, zoom)
        },
        /**
         * @Description 切换系统时 地图响应
         * @Params  system:当前选择的系统
         */
        getInfoOfProject(system) {
            this.systemList.forEach(item => {
                item.selected = false
            })
            system.selected = true
            this.currentSelectedSys = system
            this.currentSysId = system.smsxt
            //1集团 2中心 3区域 0广场
            this.clearAllLayers()
            if (this.currentLevel === 1) {
                this.pantGroupMap(this.currentZoneData, system.smsxt)
            } else if (this.currentLevel === 2) {
                this.pantZonesMap(this.currentZoneData, system.smsxt)
            } else if (this.currentLevel === 3) {
                this.pantProjectsMap(this.currentZoneData, system.smsxt)
            }
        },
        /**
         * @Description 用于绘制集团级别的地图
         * @Param data 数据
         */
        pantGroupMap(data) {
            this.clearAllLayers()
            myMaps.setView([38, 103], 4)
            let that = this
            let groupLayer = new L.layerGroup()
            let promiseAll = []
            let layerArr = []
            data.children.forEach(item => {
                let promise = new Promise((resolve, reject) => {
                    let params = {
                        getParams: {
                            smsxt: this.currentSysId,
                            level: 2,    // 中心
                            ccode: item.ccode
                        }
                    }
                    querySystemCard(params).then(res => {
                        if (res.result === 'success') {
                            let num = 0
                            let name = item.cname.substr(0, 2)
                            if (res.data) {
                                let equip = res.data[0]
                                if (equip.assetTypeList) {
                                    equip.assetTypeList.forEach(item => {
                                        if (item.is_exception_num) {
                                            num += item.is_exception_num
                                        }
                                    })
                                    layerArr.push({
                                        name,
                                        num,
                                        list: equip,
                                        data: item,
                                        fullName: item.cname
                                    })
                                }
                                resolve(item)
                            }
                        }
                    })
                })
                promiseAll.push(promise)
            })
            Promise.all(promiseAll).then(result => {
                layerArr.forEach(item => {
                    let zone = this.zoneNames[item.name]
                    let center = this.zoneCenter[zone]
                    let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
                    if (contentHtml) {
                        this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group', 4)
                    }
                })
            })
            groupLayer.addTo(myMaps)
        },
        /**
         * @Description  用于绘制中心地图
         * @Param data 数据
         */
        pantZonesMap(data) {
            let that = this
            this.clearAllLayers()
            let name = data.cname.substr(0, 2)
            let zone = this.zoneNames[name]
            let zoom, inner, outer, offset
            if (['xibei'].includes(zone)) {
                zoom = 5
            } else {
                zoom = 6
            }
            this.flyTo(this.zoneCenter[zone], zoom)
            let groupLayer = new L.layerGroup()
            data.children.forEach(item => {
                let params = {
                    getParams: {
                        smsxt: this.currentSysId,
                        level: 3,   // 区域
                        ccode: item.ccode
                    }
                }
                querySystemCard(params).then(res => {
                    if (res.result === 'success') {
                        let name = item.cname.split('区域')[0]
                        let city = that.provinceCities[name]
                        let num = 0
                        let center = city.center
                        if (res.data) {
                            let equip = res.data[0]
                            let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
                            if (equip.assetTypeList) {
                                equip.assetTypeList.forEach(item => {
                                    if (item.is_exception_num) {
                                        num += item.is_exception_num
                                    }
                                })
                            }
                            that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone', 6)
                        }
                    }
                })
            })
            groupLayer.addTo(myMaps)
        },

        /**
         * @Description 用于绘制项目的点
         * @Param data 数据
         */
        pantProjectsMap(data) {
            this.clearAllLayers()
            let name = data.cname.split('区域')[0]
            let geo = this.provinceCities[name]
            this.flyTo(geo.center, geo.zoom)
            data.children.forEach(item => {
                this.pantPlazaMap(item, geo.zoom)
            })
        },
        /**
         * @Description 用于绘制广场
         * @Param data 数据
         */
        pantPlazaMap(item, zoom) {
            let that = this
            let groupLayer = new L.layerGroup()
            let params = {
                getParams: {
                    plazaId: item.cid,   // 所查对象是广场的时候plazaId必传
                    smsxt: this.currentSysId,
                    level: 0,   // 广场
                    ccode: item.ccode
                }
            }
            querySystemCard(params).then(res => {
                if (res.result === 'success') {
                    let num = 0
                    if (item.latitude && item.longitude) {
                        let center = [item.latitude, item.longitude]
                        if (res.data) {
                            let equip = res.data[0]
                            let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
                            if (equip.assetTypeList) {
                                equip.assetTypeList.forEach(item => {
                                    if (item.is_exception_num) {
                                        num += item.is_exception_num
                                    }
                                })
                            }
                            that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project', zoom)
                        }
                    }
                }
                groupLayer.addTo(myMaps)
            })
        },
         /**
         * @Description 用于绘制广场的点
         * @Param num 当前点的逾期设备数
         * @Param groupLayer 地图图层
         * @Param contentHtml 弹出框的Html内容
         * @Param center 该点坐标
         * @Param data  该点数据
         * @Param name  改点名称
         * @Param type  地图级别  group / zone / project  集团 / 中心 / 区域
         * @param zoom 缩放级别
         */
        createPointOnMap (num, groupLayer, contentHtml, center, data,  name, type , zoom) {
            let popup = null
            let marker = null
            let outCircle = null
            let innerCircle = null
            let color = this.paintColorByData(num)
            let myIcon = L.divIcon({
                html: name,
                className: 'my-leaflet-div-icon',
                iconSize: 30
            })
            let sizes = this.circleSize[zoom]
            if (color  && center) {
                popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
                marker = L.marker([center[0] - sizes.offset,  center[1]], { icon: myIcon }).addTo(groupLayer)
                outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
                innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
                let feaureGroup = L.featureGroup([marker, outCircle, innerCircle, popup])
                feaureGroup.on('mouseover', ev => {
                    popup.openOn(myMaps)
                })
                feaureGroup.on('click', ev => {
                    this.currentZoneData = data
                    this.currentLevel = data.level
                    this.getEventStatusData(data.level, data.ccode)
                    this.queryPlazaInfoCount(data.ccode, data.level)
                    if (type !== 'project') {
                        groupLayer.clearLayers()
                    }
                    this.createNavpathByData(data)
                    this.getSystemList(data.ccode, data.level)
                    if (type === 'group') {
                        this.pantZonesMap(data, this.currentSysId)
                    }
                    if (type === 'zone') {
                        this.pantProjectsMap(data, this.currentSysId)
                    }
                    if (type === 'project') {

                            let routeData = this.$router.resolve({
                    path:'/home/overview',query:{plazaId:data.ccode}
                     });
                        window.open(routeData.href, '_blank');
                        window.__fromGroupPage = {
                            level: 0,
                            plazaName: data.cname,
                            plazaId: data.ccode
                        }
                        this.$store.commit('SETPLAZENAME', data.cname)
                        // localStorage.setItem('PLAZAID', data.ccode)
                        // this.$store.commit('STOREPLAZAID', data.ccode)
                        this.$store.commit('SETISGETMAP',true)
                    }
                })
            }

        },
        /**
         *@Description 生成弹出框HTML
         */
        createPopupHtmlContent(data, name) {
            if (Array.isArray(data) && data.length) {
                let that = this
                let html = ''
                let len = data.length
                for (let i = 0; i < len; i++) {
                    let item = data[i]
                    if (item.is_exception_num) {
                        html += `<div class="line">
                            <span>${item.category_name}</span>
                            <span>${item.asset_num || '--'}台</span>
                            <span><span style="display: inline-block;width: 16px;height: 16px;line-height: 16px;border-radius: 8px; color: white; background : #F54E45;text-align: center;cursor: default;">!</span><em>${
                                item.is_exception_num
                            }</em></span>
                        </div>`
                    } else {
                        html += `<div class="line">
                            <span>${item.category_name}</span>
                            <span>${item.asset_num || '--'}台</span>
                        </div>`
                    }
                }
                return `<div class="leaflet-mypopup-content"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`
            } else {
                return ''
            }
        },

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.reinitalMap)
    }
}
</script>

<style scoped lang="less">
@keyframes selectDownUpExtendTop {
    from {
        transform: translateY(8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.selectDownUpExtendTop-enter-active {
    animation: selectDownUpExtendTop .3s
}
.selectDownUpExtendTop-leave-active {
    animation: selectDownUpExtendTop .3s reverse
}
.overview {
    height: 100vh;
    background: rgba(247, 249, 250, 1);
    .menu {
        height: 48px;
        min-width: 1366px;
        color: #1f2429;
        font-size: 1.6rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
        overflow: hidden;
        .home {
            width: 265px;
            height: 48px;
            // line-height: 48px;
            text-align: center;
            cursor: pointer;
            color: #ffffff;
            float: left;
            margin-right: 83px;
            // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
            position: relative;
            .downright {
                position: absolute;
                width: 0;
                height: 0;
                border-left: 20px solid transparent;
                border-bottom: 48px solid #fff;
                right: 0px;
                top: 0;
            }
            .home-box {
                height: 100%;
                display: flex;
                align-items: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-left: 20px;
                    margin-right: 24px;
                    margin-top: -3px;
                }
                span {
                    font-size: 2rem;
                    font-family: MicrosoftYaHei;
                    height: 27px;
                    line-height: 27px;
                    margin-top: -4px;
                    &:after {
                        content: '|';
                        position: absolute;
                        left: 60px;
                    }
                }
            }
        }
        & > div:nth-of-type(2) {
            & > div {
                line-height: 48px;
                text-align: center;
                //background: url('../assets/images/topbar1.png') no-repeat;
                float: left;
                width: 80px;
                height: 48px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .is-active {
                color: #025baa;
                font-weight: bolder;
                border-bottom: 2px solid #025baa;
                background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
            }
        }
        .home-right {
            float: right;
            margin-right: 20px;
            line-height: 48px;
            color: #646c73;
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-content: center;
            img {
                margin-top: -2px;
            }
            .span-out {
                position: relative;
                margin: 0 16px;
                .span2-num {
                    position: absolute;
                    right: -5px;
                    top: 5px;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background: red;
                    border-radius: 90px;
                    font-size: 1.2rem;
                    text-align: center;
                    line-height: 18px;
                    color: #ffffff;
                }
            }
        }
        .span1,
        .span2 {
            padding: 0 6px 0 3px;
        }

        .span3 {
            padding-left: 3px;
        }
    }
    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 0 16px;
        background: white;
        .crumbs {
            span {
                cursor: pointer;
            }
            span:first-child {
                display: inline-block;
                width: 14.4rem;
                height: 2.8rem;
                margin-right: 1.2rem;
                border: 1px solid rgba(195, 199, 203, 1);
                border-radius: 1.4rem;
                text-align: center;
                line-height: 2.8rem;
                font-size: 14px;
                cursor: default;
            }
            span:last-child {
                font-weight: bold;
            }
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        height: calc(100vh - 98px);
        padding: 1.2rem 1.6rem;
        .section-title {
            display: flex;
            align-items: center;
            padding-left: 10px;
            border-left: 4px solid #025baa;
            color: #1f2429;
            font-size: 1.6rem;
            font-weight: bolder;
            line-height: 2rem;
            cursor: pointer;
            img{
                width: 2rem;
                margin-left: 1.2rem;
            }
        }

        .system-general {
            width: 25.4%;
            box-sizing: border-box;
            background: white;
            .system-main-title {
                padding: 2rem 0 2.4rem 1.6rem;
            }
            .system-list {
                ul {
                    height: 80vh;
                    li.system-item {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: calc(100% - 3.2rem);
                        height: calc(100% / 8);
                        margin-left: 1.6rem;
                        // padding: 1rem 0;
                        box-sizing: border-box;
                        border: 1px solid white;
                        border-radius: 4px;
                        border-bottom: 1px solid #eff0f1;
                        transition: 0.5s;
                        cursor: pointer;
                        .system-name {
                            display: flex;
                            align-items: center;
                            width: 28%;
                            padding: 1.2rem 0 1.2rem 1rem ;
                            border-right: 1px solid #EFF0F1;
                            .img {
                                height: 2.8rem;
                                width: 2.8rem;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 50%;
                                background: #dce7f0;
                                filter: saturate(0%);
                                img {
                                    width: 3.2rem;
                                    height: 3.2rem;
                                }
                            }
                            .selected {
                                filter: saturate(100%);
                            }
                            span {
                                display: inline-block;
                                margin-left: 0.8rem;
                                color: #1f2429;
                                font-size: 1.4rem;
                                font-weight: bolder;
                            }
                        }
                        .system-equipments {
                            width: 72%;
                            display: flex;
                            align-items: center;
                            padding-left: 1.4rem;
                            .number {
                                width: 33.3%;
                                margin-right: 1.2rem;
                                .title{
                                    display: inline-block;
                                    position: relative;
                                    p{
                                        display: inline-block;
                                        position: relative;
                                        width: 100%;
                                        color: #1f2429;
                                        font-size: 1.4rem;
                                        line-height: 1.6rem;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                    }
                                    span {
                                        position: absolute;
                                        top: -1.6rem;
                                        right: -2rem;
                                        padding: 2px 4px;
                                        border-radius: 0.9rem;
                                        font-size: 1.2rem;
                                        color: #f54e45;
                                        background: #fde3e2;
                                    }
                                }
                                p:nth-of-type(2) {
                                    span:first-child {
                                        color: #1f2429;
                                        font-size: 1.8rem;
                                        font-weight: bold;
                                    }
                                }
                            }
                        }
                    }
                    li.selected {
                        border-color: rgba(0, 118, 197, 0.6);
                        box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
                    }
                    li:last-child {
                        border-bottom: none;
                    }
                    li:hover {
                        border-color: #66addd;
                        box-shadow: 0 2px 10px 0px rgba(204, 100, 77, 0.4);
                    }
                }
            }
        }
        .map-box {
            width: calc(56.6% - 2.4rem);
            margin: 0 12px;
            .cards-list {
                display: flex;
                justify-content: space-between;
                .card {
                    width: calc((100% - 24px) / 3);
                    box-sizing: border-box;
                    padding: 12px 16px;
                    border-radius: 4px;
                    background: white;
                    .img {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 4.4rem;
                        height: 4.4rem;
                        border-radius: 50%;
                        img {
                            width: 2rem;
                            height: 2rem;
                        }
                    }
                }
                div:nth-of-type(1) .img {
                    background: rgba(130, 199, 252, 0.14);
                }
                div:nth-of-type(2) .img {
                    background: rgba(0, 214, 185, 0.14);
                }
                div:nth-of-type(3) .img {
                    background: rgba(255, 186, 107, 0.14);
                }
                p {
                    color: #646c73;
                    margin: 12px 0 8px 0;
                }
                strong {
                    color: #1f2429;
                    font-size: 2.4rem;
                }
            }
            .map-container {
                position: relative;
                height: 70vh;
                #map {
                    height: 70vh;
                    overflow: hidden;
                    pointer-events: none;
                }
                .legend {
                    position: absolute;
                    left: 1.4rem;
                    bottom: 2.7rem;
                    padding: 0.6rem;
                    background: white;
                    .legend-bar {
                        display: flex;
                        align-items: center;
                        span {
                            display: inline-block;
                            height: 4px;
                            width: 20px;
                            margin-right: 12px;
                        }
                    }
                }
            }
        }
        .ratio-list {
            width: 18%;
            .block {
                position: relative;
                padding: 1.2rem 1.6rem;
                height: calc((100% - 2rem) / 3);
                border-radius: 4px;
                margin-bottom: 1rem;
                background: white;
                // overflow: auto;
                transition: height 0.3s ease-in-out;
                .section-title {
                    font-size: 1.6rem;
                }
                .tool-tip{
                    position: absolute;
                    left: 0;
                    top: -6.6rem;
                    width: 100%;
                    border-radius: 4px;
                    padding: 0.8rem 1.6rem 1.6rem;
                    font-size: 1.4rem;
                    line-height: 2.2rem;
                    background: white;
                    border:1px solid rgba(151,151,151, 0.2);
                    filter: drop-shadow(0 2px 4px rgba(31, 35, 41, .1)) ;
                    .tip-triangle{
                        position: absolute;
                        position: absolute;
                        left: 7.8rem;
                        border-style: solid;
                        width: 0;
                        height: 0;
                        bottom: -6px;
                        border-width: 6px 6px 0 6px;
                        border-color: rgba(247, 249, 250, 1) transparent transparent transparent;
                    }
                }
                .list {
                    margin-top: 1.4rem;
                    overflow: hidden;
                    height: calc(100% - 3rem);
                    ul {
                        li {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            margin-bottom: 1.2rem;
                            .ratio {
                                display: flex;
                                justify-content: space-between;
                                margin-bottom: 0.5rem;
                                span:first-child {
                                    color: #646c73;
                                    font-size: 1.4rem;
                                }
                            }
                            .bar {
                                position: relative;
                                height: 6px;
                                border-radius: 3px;
                                background: #c3c7cb;
                                .inner-bar {
                                    position: absolute;
                                    height: 6px;
                                    left: 0;
                                    top: 0;
                                    border-radius: 3px;
                                }
                            }
                        }
                    }
                }
                .arrow {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    cursor: pointer;
                    transform-origin: center center;
                    transform: translateX(-50%) rotate(90deg);
                }
            }
            section:last-child.block {
                margin-bottom: 0;
            }
        }
    }
}
</style>