1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378 |
- <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" >
- <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>
- </li>
- </ul>
- </div>
- </section>
- <section class="map-box">
- <section class="cards-list">
- <div class="card">
- <div class="img">
- <img src="../../assets/images/icons/ratio.png">
- </div>
- <p>上线管理说明书数量</p>
- <strong>{{plazaInfoCount.upwcCount}}</strong>
- </div>
- <div class="card">
- <div class="img">
- <img src="../../assets/images/icons/audit.png">
- </div>
- <p>当月说明书更新项目数量</p>
- <strong>{{plazaInfoCount.rptChangeCount}}</strong>
- </div>
- <div class="card">
- <div class="img">
- <img src="../../assets/images/icons/contract.png">
- </div>
- <p>当月重点关注事项项目数量ff</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>
- <span>{{option.rptGlsmsStatistics.due_num}} / </span>
- <span>{{option.rptGlsmsStatistics.total}}</span>
- </span>
- </div>
- <div class="bar">
- <div class="inner-bar" :style="barStyle(option.rptGlsmsStatistics)"></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]},
- "北京区域": {"province":"beijing", center: [39.91667 ,114.41667]},
- "天津区域": {"province":"tianjin", center:[39.13333, 117.20000]},
- "济南区域": {"province":"shandong", center: [36.40, 117.00]},
- "上海区域": {"province":"shanghai", center: [34.50000 , 119.43333]},
- "南京区域": {"province":"jiangsu", center:[ 32.05000, 118.78333 ]},
- "无锡区域": {"province":"jiangsu", center: [31.34, 120.18]},
- "厦门区域": {"province":"fujian", center: [24.46667, 118.10000]},
- "宁波区域": {"province":"zhejiang", center: [29.52, 121.33]},
- "杭州区域": {"province":"zhejiang", center: [30.16, 120.10]},
- "福州区域": {"province":"fujian", center: [26.05, 119.18]},
- "合肥区域": {"province":"anhui", center: [31.52, 117.17]},
- "长沙区域": {"province":"hunan", center: [28.12, 112.59]},
- "南昌区域": {"province":"jiangxi", center: [28.40, 115.55]},
- "哈尔滨区域": {"province":"heilongjiang", center: [45.44, 126.36]},
- "大连区域": {"province":"liaoning", center: [38.55,121.36]},
- "沈阳区域": {"province":"liaoning", center: [41.48, 123.25]},
- "长春区域": {"province":"jilin", center: [43.54, 125.19]},
- "东莞区域": {"province":"guangdong", center: [23.02,113.45]},
- "南宁区域": {"province":"guangxi", center: [22.48, 108.19]},
- "广州区域": {"province":"guangdong", center: [23.08, 113.14]},
- "太原区域": {"province":"shanxi1", center: [37.54, 112.33]},
- "武汉区域": {"province":"hubei", center: [30.35, 114.17]},
- "郑州区域": {"province":"henan", center: [34.46, 113.40]},
- "乌鲁木齐区域": {"province":"xinjiang", center: [43.45, 87.36]},
- "呼和浩特区域": {"province":"neimenggu", center:[40.48, 111.41]},
- "西安区域": {"province":"shanxi2", center: [34.26667, 108.95]},
- "银川区域": {"province":"ningxia", center: [38.27, 106.16]},
- "成都区域": {"province":"sichuan", center: [30.40, 104.04]},
- "昆明区域": {"province":"yunnan", center: [25.04, 102.42]},
- "重庆区域": {"province":"chongqing", center: [29.35, 106.33]},
- },
- 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":[46.05917927005029, 126.53664921197083],
- "xibei":[43.2417396142428,113.41468998579546],
- "huabei":[38.348983721228436, 117.02472809706543],
- "huazhong":[34.20577123689604 , 112.71908762827616],
- "huadong":[ 32.865884180878325 , 119.61413071750152],
- "zhongnan":[28.860875644389676, 114.55131767165491],
- "huanan":[23.618261575763043,110.79063366644355 ],
- "dongnan":[27.555323121883916, 119.00243042111592],
- "xinan":[ 28.255078828220462, 103.33429493217788]
- },
- 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:[
- // {
- // title:'维保',
- // expand:0,
- // subList:[
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:31,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:11,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:41,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // ]
- // },
- // {
- // title:'第三方检测33',
- // expand:0,
- // subList:[
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // ]
- // },
- // {
- // title:'专维',
- // expand:0,
- // subList:[
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // {
- // name:'华南运营中心',
- // num1:81,
- // num2:128
- // },
- // ]
- // },
- ],
- }
- },
- 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')
- },
- /**
- * 通过导航进行导航
- *
- */
- 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)
- },
- /**
- * 获取事项状态统计数据
- */
- 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 layer = L.geoJSON(JsonData.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': color.border,
- 'fillColor':color.area
- }
- }
- }).addTo(maps);
- 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
- },
- // 获取 区域/中心/项目
- 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,"1001")
- } else if (level === 2) {
- this.pantZonesMap(data, '1001')
- } else if (level === 3) {
- let res = this.provinceCities[JSONName]
- this.clearAllLayers()
- let data = require(`../../assets/provinceData/${res.province}.json`)
- let layer = L.geoJSON(data.features,{
- style:function(){
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor':'red'
- }
- }
- }).addTo(maps);
- this.panTo(res.center, 7)
- } else { // 点击广场时 直接跳转到详情页 地图不用响应
- // this.$router.push({path:"/"})
- }
- },
- //查询项目信息统计数量
- 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
- }
- }
- })
- },
- //** */
- 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))
- }
- })
- }
- })
- },
- //初始化地图
- 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,
- })
- 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/ChinaBorder.json`)
- L.geoJSON(data.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor':'#f1f1f1'
- }
- }
- }).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
- }
- },
- 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) {
- let type = item.type
- let 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 = "#FDE3E2"
- color.border = "#FBBFBC"
- } else if (data >= 100 && data < 200) {
- color.area = "#FEE9D2"
- color.border = "#FFBA6B"
- } else if (data>=50 && data<100) {
- color.area = "#FFF6EB"
- color.border = "#F7DC82"
- } else if (data >= 10 && data< 50) {
- color.area = "#CCE9FF"
- color.border = "#4EB1FD"
- } else if (data>= 1 && data <10) {
- color.area = "#E1F2FF"
- color.border = "#82C7FC"
- } 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 => {
- item.assetTypeList = item.assetTypeList.splice(0,3)
- })
- res.data.forEach(item => {
- item.selected = false
- })
- this.currentSelectedSys = res.data[0]
- this.currentSysId = res.data[0].smsxt
- this.systemList = res.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: space-around;
- 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: 1.6rem;
- height: 1.6rem;
- }
- }
- .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>
-
|