<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>{{currentZone.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"
                :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">
                                <p>{{equip.category_name}}<span v-if="equip.is_exception_num">{{equip.is_exception_num}}</span></p>
                                <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" v-for="(item , index) in maintainList" :key="index">
                <h4 class="section-title" @click="toggerPanel(item)">{{item.title}}</h4>
                <div class="list" :style="panelStyle(item)">
                    <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.unfinished}} / </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 maps = 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 ChinaGeoJson from "../../assets/CHN.geo2.json";
import {sortBy} from "lodash"
import OtherJson from "../../assets/regionData/other.json"
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"
            },
            zoneGroup:{
                "dongbei":["heilongjiang","liaoning","jilin"],
                "xibei":["neimenggu","ningxia","shanxi1","xinjiang"],
                "huabei":["shandong","hebei","beijing","tianjin"],
                "huazhong":["shanxi2","henan","hubei"],
                "huadong":["jiangsu","shanghai"],
                "zhongnan":["hunan","anhui","jiangxi"],
                "huanan":["guangdong","guangxi"],
                "dongnan":["fujian","zhejiang"],
                "xinan":["guizhou","sichuan","yunnan","chongqing"]
            },
            zoneCity:{
                "shandong":["青岛区域","济南区域"]
            },
            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.40, 117.00] , zoom: 7},
                "上海区域": {"province":"shanghai", center: [31.090574094954192,  121.46299249603001], zoom:10},
                "南京区域": {"province":"jiangsu", center:[ 32.05000, 118.78333 ], zoom:7},
                "无锡区域": {"province":"jiangsu", center: [31.57, 120.30], zoom:9},
                "厦门区域": {"province":"fujian", center: [24.46667, 118.10000] , 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.40, 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.40], 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},
            },

            provincesCenter:{
                "anhui":[31.852559691577845, 117.2253589137454],
                "beijing": [40.186106951230485,116.42285651967009],
                "chongqing": [30.060254204354784, 107.89013862196842],
                "fujian": [26.071368377569776, 118.00455426638014],
                "gansu":[38.00325279557638, 100.5012462408473],
                "guangdong":[23.334243521962527, 113.43297176882082],
                "guangxi":[23.83265626692407, 108.79223788629494],
                "guizhou":[26.824014276407205, 106.87707047290361],
                "hebei":  [39.60459587653637, 116.15817616286789],
                "heilongjiang":[48.03564457240887, 127.69009579234847],
                "henan": [33.902894471142176, 113.61599693888945],
                "hubei": [30.988423598416457, 112.27635740895998],
                "hunan":[27.633668515110255, 111.70882955621366],
                "jiangsu": [32.981911362532585, 119.48201035757698],
                "jiangxi":[27.637831291898365, 115.73252266448846],
                "jilin":[43.703126756480735, 126.15512329582789],
                "liaoning":[41.30041310409345, 122.6094238905765],
                "neimenggu":[44.47324785058833, 114.30352505865382],
                "ningxia":[37.29635258864683, 106.17634546083286],
                "qinghai":[35.7281048004562, 96.0459309719495],
                "shandong":[36.374647201891335, 118.18901718013844],
                "shanghai":[31.07710542026598, 121.44651073619633],
                "shanxi1":[35.263055624551846, 108.88970748546511],
                "shanxi2":"",
                "sichuan":[30.67066959682666, 102.69531108397375],
                "tianjin":[39.29260116656163, 117.35013172238374],
                "xinjiang":[41.37183707717329, 85.29450850581013],
                "xizang":[31.56242864291341, 88.39191208626079],
                "yunnan":[25.004865694004916, 101.4821386658875],
                "zhejiang": [29.180481383933902, 120.11087647324501],
            },
            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: "#FDE3E2", num:'≥200'},
                {color: "#FEE9D2", num:'100-200'},
                {color: "#FFF6EB", num:'50-99'},
                {color: "#CCE9FF", num:'10-49'},
                {color: "#E1F2FF", num:'1-9'},
                {color: "#E1F2FF", num:'0'},
            ],
            plazaInfoCount:{},
            systemList:[],
            currentZone:{},   // 
            currentDistrictData:[], //当前管理分区数据
            currentSelectedSys:{},
            currentSysId:"",
            state: '',
            value: 190,
            currentPanel:'',
            regulateDistrictData: [],
            projectsCode:[],
            maintainList:[],
            circleSize:{
                5:{innder:15000,outer:30000, offset:0.8},
                7:{innder:8000,outer:16000, offset:0.3},
                8:{innder:4000,outer:8000, offset:0.14},
                9:{innder:2000,outer:4000, offset:0.08},
                10:{innder:1000,outer:2000, offset:0.04},
                11:{innder:1000,outer:2000, offset:0.04},
            }
        }
    },
    computed: {
        ...mapGetters(['plazas', 'plazaId']),
        
    },
    watch: {
       
    },
    created() {
        this.currentTime()
    },
    mounted() {
        window.vm = this
        this.getFrameworkTreeData()
        this.getSystemList()
        this.queryPlazaInfoCount(1002347,0)
        this.getEventStatusData()
    },
    methods: {
 
        imgSrc(code) {
            return require('../../assets/images/icons/' + code + '.png')
        },
        /**
         * 跳转到 当月说明书更新项目数量
         */ 
        navToIntroduceUpdate () {
            // this.$router.push({path:''})
        },
        /**
         * 跳转到 上线管理说明书数量
         */
        navToManageNumber () {
            // this.$router.push({path:''})
        },
        /**
         * 跳转到 当月重点关注事项项目数量
         */
        navToFocusItems () {
            // this.$router.push({path:''})
        },
        /**
         * 通过导航进行导航
         * 
         */
        navgateFromCrumbs (id, index) {
            let data = this.getDataByCityCcode(id)
            if (!data) return ;
            this.currentZone = data
            let level = data.level  //1集团 2中心 3区域 0广场
            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)
        },
<<<<<<< HEAD
        /**
         * 获取事项状态统计数据
         */
        getEventStatusData () {
            let params = {
                getParams: {
                    "level":1,
                    "ccode":"0000000000",
                }
            }
            queryEventStatus(params).then(res => {
                if (res.result === "success") {
                    let arr =[]
                    let data = res.data
                    for(let key in data) {
                        let obj = {}
                        if (data.hasOwnProperty(key)) {
                            if (key == "0") {
                                obj.title = "专维"          // due_num 即将到期    unfinished 逾期未完成
                                sortBy(data[key], function(item){
                                    return item.due_num + item.unfinished
                                })                           // 维保，第三方检测排名按照即将到期任务数量从多到少排序，多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序，多的靠前
                            } else if (key == "1") {
                                obj.title = "维保"
                                sortBy(data[key], function(item)  {
                                    return item.due_num 
                                }) 
                            } else {
                                obj.title = "第三方检测"
                                sortBy(data[key], function(item){
                                    return item.due_num
                                }) 
                            }
                            obj.data = data[key]
                            obj.expand = 0
                        }
                        arr.push(obj)
                    }
                    this.maintainList = arr
                }
            })
        },
        /**
         * 切换系统时 地图响应
         * @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广场
            if(this.currentLevel === 1) {   //1集团 3区域 0广场
                this.pantGroupMap(this.currentDistrictData[0], system.smsxt)
            } else if (this.currentLevel === 2) {  // 2中心 
                this.pantZonesMap(this.currentDistrictData[0])
            } else if (this.currentLevel === 0) {
                this.pantProjectsMap(this.currentDistrictData[0])
            }
        },
        // 处理集团地图
        pantGroupMap (data, sysId) {
            this.clearAllLayers() 
            let that = this
            data.children.forEach(item=>{
                let params = {
                    getParams: {
                        // "plazaId":1000423,
                        "smsxt":  sysId,   //TODO that.systemList[0].smsxt  
                        "level":1,
                        "ccode":item.ccode
                    }
                }
                querySystemCard(params).then(res => {
                    if (res.result === "success") {
                        let name = item.cname.substr(0,2)
                        let zone = this.zoneNames[name]
                        let JsonData = require(`../../assets/regionData/${zone}.json`)
                        let num = 0
                        let contentHtml = ''
                        let popup = null 
                        if (res.data) {
                            let equip = res.data[0]
                            if (equip.assetTypeList.length > 3) {
                                equip.assetTypeList = equip.assetTypeList.splice(0,3)
                            }
                            contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
                            equip.assetTypeList.forEach(item => {
                                num += item.is_exception_num
                            })
                        }
                        let color = that.paintColorByData(num)
            
                        let center = JsonData.features[0].properties.center

                        let marker = L.divIcon({
                            html: JsonData.features[0].properties.name,
                            iconSize:30
                        })
                        // let marker = L.circle(center, {radius: 2000}).addTo(maps).bindPopup(contentHtml);

                        if (res.data) {
                            popup = L.popup().setLatLng(center).setContent(contentHtml)
                            layer.on("click", (ev)=>{
                                let property = ev.layer.feature.properties
                                let layerName = this.zoneNames[property.name]
                                
                                let target = that.getDataByCityCcode(item.ccode)
                                if (target) {
                                    this.currentZone = target
                                    that.createNavpathByData(target)
                                }

                                if (layerName !== "其他") {
                                    this.pantZonesMap(item, sysId)
                                    
                                }
                            })
                            layer.on("mousemove" , (ev)=> {
                                maps.openPopup(popup)
                            })
                        }
                    }
                })
            })
            let otherRegion = require("../../assets/regionData/other.json")
            let layer = L.geoJSON( otherRegion.features, {
                style:function(){
                    return {
                        'weight': 1,
                        'color': '#e3ecf3',
                        'fillColor': "#fff"
                    }
                }
            }).addTo(maps);
    
            maps.setView([38,103], 4)
        },
        /**
         * 生成弹框HTML 
         */
        createPopupHtmlContent (data) {
            let that = this
            let html = ""
            for (let i =0 ; i < data.length; 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><i></i><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>${that.currentSelectedSys.smsxtname}</span>-<span>${that.currentZone.cname}</span></div>
               ${html}</div>`
        },
        /**
         * 用于绘制中心下的地图
         */
        pantZonesMap (data, sysId) {
            let vm = this
            let obj = []
            let htmlContent = []
            let pArr = []
            let zonenames = new Set()
            let zone = data.cname.substr(0,2)
            let zonename =  this.zoneNames[zone]
            this.clearAllLayers()
            data.children.forEach(item => {
                let name = this.provinceCities[item.cname].province   
                zonenames.add(name)
                let data = require(`../../assets/provinceData/${name}.json`)
                let layer = L.geoJSON(data.features,{
                    style:function(){
                        return {
                            'weight': 1,
                            'color': 'black',
                            'fillColor': "#f1f1f1"
                        }
                    }
                }).addTo(maps);
                layer.on("click", (ev)=>{
                    let target = vm.getDataByCityCcode(item.ccode)
                    if (target) {
                        vm.currentZone = target
                        vm.createNavpathByData(target)
                    }
                    vm.clearAllLayers()
                    let data = require(`../../assets/provinceData/${name}.json`)
                    let layer = L.geoJSON(data.features,{
                        style:() => {
                            return {
                                'weight': 1,
                                'color': 'black',
                                'fillColor': "#f1f1f1"
                            }
                        }
                    }).addTo(maps);
                    this.panTo(this.provincesCenter[name], 6)
                })
            })
            this.panTo(this.zoneCenter[zonename], this.setZoomSize(zonename))
        },
        /***
         * 用于绘制项目的点
         */
        pantProjectsMap (data) {
            let zone = this.provinceCities[data.cname]
            let province = zone.province
            let center = zone.center
            let Json = require(`../../assets/provinceData/${province}.json`)
            this.clearAllLayers()
            let markerArr = []
            let pArr = []
            data.children.forEach(item => {
                let p = new Promise((resolve,reject) => {
                    let params = {
                        getParams: {
                            "plazaId":1000423,
                            "smsxt":  "1007",   //TODO that.systemList[0].smsxt  
                            "level":0,
                            "ccode": item.ccode
                        }
                    }
                    querySystemCard(params).then(res => {
                        if (res.result === 'success') {
                            if (res.data) {
                                markerArr.push({
                                    name: item.name,
                                    center: item.center,
                                    data: res.data
                                })
                                resolve(res.data)
                            } else {
                                 markerArr.push({
                                    name: item.name,
                                    center: item.center,
                                    data: 0
                                })
                                resolve(0)
                            }
                        }
                    })
                })
                pArr.push(p)
            })
            Promise.all(pArr).then(result => {
                markerArr.forEach(item => {
                    let popupContent = '<p>Hello world!<br />This is a nice popup.</p>'
                    L.circle(item.center, {radius: 20000}).bindPopup(popupContent).addTo(maps);
                })
                L.geoJSON(Json.features,{
                    style:function(){
                        return {
                            'weight': 1,
                            'color': 'black',
                            'fillColor': "red"
                        }
                    }
                }).addTo(maps)
                this.panTo(center, 7)
            })
        },
        /**
         * 根据数据创建导航路径
         */
        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.currentZone = data
        },
=======
>>>>>>> develop-map
         // 获取 区域/中心/项目
        selectProjectItem (ids, data) {
            this.createNavpathByData(data)
            this.currentZone = data
            let JSONName  = data.cname
            let level = data.level   // //1集团 2中心 3区域 0广场
            if (level === 1) {
                this.pantGroupMap(data,this.currentSysId)
            } else if (level === 2) {
                this.pantZonesMap(data, this.currentSysId)
            } else if (level === 3) {
                let res = this.provinceCities[JSONName]
                this.pantProjectsMap(data, this.currentSysId)
            } else {   // 点击广场时 直接跳转到详情页  地图不用响应
                this.pantPlazaMap(data, this.currentSysId, true)
            }
        },
       //查询项目信息统计数量
        queryPlazaInfoCount (ccode, level) {
            let params = {
                getParams: {
                    "ccode":ccode,
                    "level":level,
                }
            }
            getPlazaInfoCount(params).then(res => {
                if (res.result === 'success') {
                    if (res.data) {
                        this.plazaInfoCount = res.data
                    }
                }
            })
        },
        /**
         * 根据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
                }
            }
            
        },
        // 获取 中心 区域 项目 数据树数据
        getFrameworkTreeData () {
            login({
                    "username":"xiejialin1",
                    "returnTree":true
                }).then(res => {
                if (res.result === 'success') {
                    recursionData(res.treeData)  
                    let data = res.treeData[0]
                    this.currentDistrictData = res.treeData
                    this.currentZone = data
                    this.currentLevel = res.treeData[0].level // 初始化的时候判断是哪一级    //1集团 2中心 3区域 0广场
                    this.regulateDistrictData =  [data]
                    this.initMap()
                }
                function recursionData (data, parent) {
                    data.forEach(item => {
                        item.name= item.cname
                        item.id = item.cid
                        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))
                        }
                    })
                }
            })
        },
<<<<<<< HEAD
          //初始化地图
        initMap() {
            let that = this;
            maps = L.map("map", {        
                center: new L.LatLng(38, 103),
                zoom: 4,
                crs: L.CRS.EPSG3857,
                minZoom: 3,
                maxZoom: 14,
                zoomControl: false,
                attributionControl: false,
                contextmenu: true,
                contextmenuWidth: 140,
            })
            let JsonData = require("../../assets/geoData/china.json")
             let layer = L.geoJSON(JsonData.features, {
                style:function(){
                    return {
                        'weight': 1,
                        'color': '#B3D2FF',
                        'fillColor':'#DEECFF' 
                    }
                }
            }).addTo(maps);
            return
            if(this.currentLevel === 1) {   //1集团 3区域 0广场
                this.pantGroupMap(this.currentDistrictData[0],"1001")
            } else if (this.currentLevel === 2) {  // 2中心 
                this.pantZonesMap(this.currentDistrictData[0])
            } else if (this.currentLevel === 0) {
                this.pantProjectsMap(this.currentDistrictData[0])
            }
        },
        //**清空地图 并添加全国底图*/
        clearAllLayers(){
            maps.eachLayer(function(layer){
                maps.removeLayer(layer)
            })
            let data = require(`../../assets/geoData/china.json`)
            L.geoJSON(data.features, {
                style:function(){
                    return {
                        'weight': 1,
                        'color': 'black',
                        'fillColor':'#e0ebff'
                    }
                }
            }).addTo(maps);
        },
        panTo(center, zoom){
            maps.panTo(center)
            maps.setView(center, zoom)
        },
        setZoomSize (zone) {
            if (["habei","dongbei"].includes(zone)) {
                return 5
            } else if (["huadong","dongnan","huanan"].includes(zone)) {
                return 7
            } else if (["zhongnan","huabei","xinan","huazhong"].includes(zone)) {
                return 6
            } else if (["xibei"].includes(zone)) {
                return 4
            }
        },
=======

>>>>>>> develop-map
        toggerPanel (item) {
            this.currentPanel = item.title
            // 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  // 回到初始状态
                })
            }
        },
        panelStyle (item) {
            // expand 0 初始状态  1 展开状态 2 隐藏状态
            if (item.expand === 0) {
                return {height:'22rem'}
            } else if (item.expand === 1) {
                return {height:'63rem'}
            } else {
                return {height:'0', margin:0}
            }
        },
        /**
         * 计算长度
         */
        barStyle(item, title) {
            let type = item.type
            let ratio = 0
            if (title === '专维') {
                ratio = ( (item.unfinished + item.due_num) / item.total ) * 100 
            } else {
                ratio = (item.unfinished/ item.total ) * 100 
            }
            let bg = ''
            if ( type === 0) {
                bg = "linear-gradient(to right, #F54E45 , #F54E45)"
            } 
            if ( type === 1) {
                bg =  "linear-gradient(to right, #F58300 , #F58300)"
            } 
            if ( type === 2) {
                bg = "linear-gradient(to right, #369CF7 , #025BAA)"
            } 
            return {
                width: ratio  + '%',
                backgroundImage: bg
            }
        },
        // 根据数据渲染颜色
        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
        },
        currentTime() {
            this.times = moment().format('YYYY.MM.DD HH:mm')
            setTimeout(this.currentTime, 1000)
        },
        /**根据选择的系统重新渲染地图
         * param sysId:系统Id 
        */
   
        formatter(str, arrv) {
            if (str && arrv) {
                const Objs = arrv.find(e => e && e.plazaid == str)
                return Objs ? Objs.plazaname : '--'
            } else {
                return ''
            }
        },
        //TODO plazaId目前是写死的 后期需要更换成用户对应的ID
        getSystemList () {
            let params = {
                getParams: {
                    "plazaId":1000423,
                }
            }
            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
                    }
                }
            })
        },
        /**
         * 获取事项状态统计数据
         */
        getEventStatusData () {
            let params = {
                getParams: {
                    "level":1,
                    "ccode":"0000000000",
                }
            }
            queryEventStatus(params).then(res => {
                if (res.result === "success") {
                    let arr =[]
                    
                    let data = res.data
                    for(let key in data) {
                        let obj = {}
                        let sortData = data[key]
                        if (data.hasOwnProperty(key)) {
                            
                            // 维保，第三方检测排名按照即将到期任务数量从多到少排序，多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序，多的靠前
                             // due_num 即将到期    unfinished 逾期未完成
                            if (key == "0") {
                                obj.title = "专维"    
                                sortData.forEach(item=>{
                                    item.sort = item.rptGlsmsStatistics.due_num + item.rptGlsmsStatistics.unfinished
                                })
                            } else if (key == "1") {
                                obj.title = "维保"
                                sortData.forEach(item=>{
                                    item.sort = item.rptGlsmsStatistics.due_num 
                                })
                            } else {
                                obj.title = "第三方检测"
                                sortData.forEach(item=>{
                                    item.sort = item.rptGlsmsStatistics.due_num 
                                })
                            }
                            let final = sortBy(sortData, (option) => {return option.sort})
                            obj.data =  final.reverse()
                            obj.expand = 0
                        }
                        arr.push(obj)
                    }
                    this.maintainList = arr
                }
            })
        },
          //初始化地图
        initMap() {
            let that = this;
            maps = L.map("map", {        
                center: new L.LatLng(38, 103),
                zoom: 4,
                crs: L.CRS.EPSG3857,
                minZoom: 3,
                maxZoom: 14,
                zoomControl: false,
                attributionControl: false,
                contextmenu: true,
                contextmenuWidth: 140,
            })
            maps.on('click', (ev)=>{
            })
            maps.on('zoomend', (ev)=>{
            })
            let JsonData = require("../../assets/geoData/china.json")
            let layer = L.geoJSON(JsonData.features, {
                style:function(){
                    return {
                        'weight': 1,
                        'color': '#B3D2FF',
                        'fillColor':'#DEECFF' 
                    }
                }
            }).addTo(maps);
            if(this.currentLevel === 1) {   //1集团 3区域 0广场
                this.pantGroupMap(this.currentDistrictData[0], this.currentSysId)
            } else if (this.currentLevel === 2) {  // 2中心 
                this.pantZonesMap(this.currentDistrictData[0], this.currentSysId)
            } else if (this.currentLevel === 0) {
                this.pantProjectsMap(this.currentDistrictData[0], this.currentSysId)
            }
        },
        //**清空地图 并添加全国底图*/
        clearAllLayers(){
            maps.eachLayer(function(layer){
                maps.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(maps);
        },
        /**
         * 移动地图到指定中心
         */
        panTo(center, zoom){
            maps.setView(center, zoom)
        },
        /**
         * 切换系统时 地图响应
         * @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广场
            if(this.currentLevel === 1) {   //1集团 3区域 0广场
                this.pantGroupMap(this.currentDistrictData[0], system.smsxt)
            } else if (this.currentLevel === 2) {  // 2中心 
                this.pantZonesMap(this.currentDistrictData[0], system.smsxt)
            } else if (this.currentLevel === 0) {
                this.pantProjectsMap(this.currentDistrictData[0], system.smsxt)
            }
        },
        // 用于绘制集团地图
        pantGroupMap (data, sysId) {
            maps.setView([38,103],4)
            this.clearAllLayers() 
            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: {
                            // "plazaId":1000423,
                            "smsxt":  sysId,   //TODO that.systemList[0].smsxt  
                            "level":1,
                            "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,
                                        marker:null
                                    })
                                }  
                                resolve(item)
                            }
                        }
                    })
                })
                promiseAll.push(promise)
            })
            Promise.all(promiseAll).then(result=>{
                setTimeout(()=>{
                    layerArr.forEach(item => {
                        let color = that.paintColorByData(item.num)
                        let contentHtml = ''
                        let popup = null
                        let zone = this.zoneNames[item.name]
                        let center = this.zoneCenter[zone]
                      
                        if (color && zone && center) {
                            let myIcon = L.divIcon({
                                html: item.name,
                                className: 'my-leaflet-div-icon',
                                iconSize:30
                            })
                            contentHtml= that.createPopupHtmlContent(item.list.assetTypeList)
                           
                            item.marker = L.marker([center[0]-2, center[1]], { icon: myIcon }).addTo(groupLayer)
                            L.circle(center, 100000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
                            L.circle(center, 50000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
                            groupLayer.addTo(maps)
                        
                            item.marker.on('click', (ev)=>{
                                groupLayer.clearLayers()
                                this.createNavpathByData(item.data)
                                this.pantZonesMap(item.data,sysId)
                            })
                        }
                    })
                    groupLayer.addTo(maps)
                },200)
            })
        },
       
        /**
         * 用于绘制中心下的地图
         */
        pantZonesMap (data, sysId) {
            this.clearAllLayers()
            let name = data.cname.substr(0,2)
            let zone = this.zoneNames[name]
            this.panTo(this.zoneCenter[zone], 6)
            let that = this
            let groupLayer = new L.layerGroup() 
            data.children.forEach(item=>{
                let params = {
                    getParams: {
                        // "plazaId":1000423,
                        "smsxt":  sysId,   //TODO that.systemList[0].smsxt  
                        "level": 2,
                        "ccode":item.ccode
                    }
                }
                querySystemCard(params).then(res => {
                    if (res.result === "success") {
                        let city = that.provinceCities[item.cname]
                        let num = 0
                        let contentHtml = ''
                        let marker = null
                        let popup = null
                        let color = ""
                        let center = city.center
                        let myIcon = L.divIcon({
                            html:  item.cname,
                            className: 'my-leaflet-div-icon',
                            iconSize:30
                        })
                        if (res.data) {
                            let equip = res.data[0]
                            if (equip.assetTypeList.length > 3) {
                                equip.assetTypeList = equip.assetTypeList.splice(0,3)
                            }
                            contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
                            if (equip.assetTypeList) {
                                equip.assetTypeList.forEach(item => {
                                    if (item.is_exception_num) {
                                        num += item.is_exception_num
                                    }
                                })
                            }
                        }
                        color = that.paintColorByData(num)
                        if (color && color.border && color.area &&　center) {
                            marker = L.marker([center[0] -0.5, center[1]], { icon: myIcon }).addTo(groupLayer)
                            L.circle(center, 20000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
                            L.circle(center, 10000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
                        }
                        groupLayer.addTo(maps)
                        marker.on('click', (ev)=>{
                            groupLayer.clearLayers()
                            this.pantProjectsMap(item,sysId)
                            this.createNavpathByData(item)
                            
                        })
                    }
                })
            })
        },
        /***
         * 用于绘制项目的点
         */
        pantProjectsMap (data,sysId) {
            this.clearAllLayers()
            let geo = this.provinceCities[data.cname]
            this.panTo(geo.center, geo.zoom)
            data.children.forEach(item=>{
                this.pantPlazaMap(item, sysId)
            })
        },
        /**
         * 用于绘制广场的点
         */
        pantPlazaMap (item, sysId , flag) {
            let that = this
            let center = [item.latitude , item.longitude]
            if (flag) {
                this.clearAllLayers()
                this.panTo(center,11)
            }
            let params = {
                    getParams: {
                    // "plazaId":1000423,
                    "smsxt":  sysId,   //TODO that.systemList[0].smsxt  
                    "level": 0,
                    "ccode":item.ccode
                }
            }
            querySystemCard(params).then(res => {
                if (res.result === "success") {
                    let num = 0
                    let contentHtml = ''
                    let marker = null
                    let popup = null
                    let color = ""
                    if (item.latitude && item.longitude) {
                        let myIcon = L.divIcon({
                            html:  item.cname,
                            className: 'my-leaflet-div-icon',
                            iconSize:30
                        })
                        if (res.data) {
                            let equip = res.data[0]
                            if (equip.assetTypeList.length > 3) {
                                equip.assetTypeList = equip.assetTypeList.splice(0,3)
                            }
                            contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
                            if (equip.assetTypeList) {
                                equip.assetTypeList.forEach(item => {
                                    if (item.is_exception_num) {
                                        num += item.is_exception_num
                                    }
                                })
                            }
                        }
                       
                        color = that.paintColorByData(num)
                        let zoom = maps.getZoom()
                        let size = this.circleSize[zoom]
                        marker = L.marker([center[0]-size.offset, center[1]], { icon: myIcon }).addTo(maps)
                        L.circle(center, size.outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(maps);
                        L.circle(center, size.innder, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(maps);
                        marker.on("click", (ev) => {
                            // that.$router.push({path:'./'})
                        })
                    }
                }
            })
            
        },
         /**
         * 生成弹框HTML 
         */
        createPopupHtmlContent (data) {
            if (Array.isArray(data) && data.length) {
                let that = this
                let html = ""
                for (let i =0 ; i < data.length; 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>${that.currentSelectedSys.smsxtname}</span>-<span>${that.currentZone.cname}</span></div>
                   ${html}</div>`
            } else {
                return ""
            }
        },
        /**
         * 根据数据创建导航路径
         */
        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.currentZone = data
        },
        
    },
    components: {}
}
</script>

<style scoped lang="less">

.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{
            padding-left: 10px;
            border-left: 4px solid #025BAA;
            color: #1F2429;
            font-size: 1.6rem;
            font-weight: bolder;
            line-height: 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{
                    li.system-item{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: calc(100% - 3.2rem);
                        margin-left: 1.6rem;
                        padding: 2.7rem 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: 30%;
                            padding-right: 2rem;
                            padding-left:1.6rem;
                            .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;
                                border-right: 1px solid #EFF0F1;
                            }
                        }
                        .system-equipments{
                            width: 70%;
                            display: flex;
                            align-items: center;
                            .number{
                                width: 33.3%;
                                p:nth-of-type(1) {
                                    position: relative;
                                    color: #1F2429;
                                    font-size: 1.4rem; 
                                    line-height: 1.6rem;
                                    span{
                                        position: absolute;
                                        top:-10px;
                                        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: 70rem;
                #map{
                    height: 70rem;
                    overflow: hidden;
                }
                .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;
                        }
                        em{

                        }
                    }
                }
            }
        }
        .ratio-list{
            width: 18%;
            .block{
                position: relative;
                padding:1.2rem 1.6rem;
                border-radius: 4px;
                margin-bottom: 1.2rem;
                background: white;
                .section-title{
                    font-size: 1.6rem;
                    
                }
                .list{
                    margin-top: 1.4rem;
                    height: 21rem;
                    overflow: hidden;
                    transition: height 0.3s ease-in-out;
                    ul{
                        overflow: hidden;
                        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.5rem;
                    left:50%;
                    cursor: pointer;
                    transform-origin: center center;
                    transform: translateX(-50%) rotate(90deg);
                }
            }
            section:last-child.block{
                margin-bottom: 0;
            }
        }
    }
}
</style> 
 
