|
@@ -91,9 +91,9 @@
|
|
|
</section>
|
|
|
</section>
|
|
|
<section class="ratio-list">
|
|
|
- <section class="block" v-for="(item , index) in maintainList" :key="index">
|
|
|
+ <section class="block" :style="panelStyle(item)" v-for="(item , index) in maintainList" :key="index">
|
|
|
<h4 class="section-title" @click="toggerPanel(item)">{{item.title}}</h4>
|
|
|
- <div class="list" :style="panelStyle(item)">
|
|
|
+ <div class="list" >
|
|
|
<ul>
|
|
|
<li v-for="(option , index) in item.data" :key="index">
|
|
|
<div class="ratio">
|
|
@@ -117,7 +117,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-let maps = null
|
|
|
+let myMaps = null
|
|
|
import {login} from "@/api/login"
|
|
|
import {getPlazaInfoCount , querySystemCard , getCardList , queryEventStatus} from "@/api/homePage"
|
|
|
import { formatTime } from '@/utils/format.js'
|
|
@@ -142,20 +142,6 @@ export default {
|
|
|
"东南":"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},
|
|
@@ -189,39 +175,6 @@ export default {
|
|
|
"昆明区域": {"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
|
|
@@ -234,12 +187,12 @@ export default {
|
|
|
"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'},
|
|
|
+ {color: "#F54E45", num:'≥200'},
|
|
|
+ {color: "#F58300", num:'100-200'},
|
|
|
+ {color: "#FFBA6B", num:'50-99'},
|
|
|
+ {color: "#0091FF", num:'10-49'},
|
|
|
+ {color: "#82C7FC", num:'1-9'},
|
|
|
+ {color: "#EEEEEE", num:'0'},
|
|
|
],
|
|
|
plazaInfoCount:{},
|
|
|
systemList:[],
|
|
@@ -278,7 +231,7 @@ export default {
|
|
|
this.getFrameworkTreeData()
|
|
|
this.getSystemList()
|
|
|
this.queryPlazaInfoCount(1002347,0)
|
|
|
- this.getEventStatusData()
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
@@ -324,6 +277,7 @@ export default {
|
|
|
// 获取 区域/中心/项目
|
|
|
selectProjectItem (ids, data) {
|
|
|
this.currentLevel = data.level
|
|
|
+ this.getEventStatusData(this.currentLevel)
|
|
|
this.createNavpathByData(data)
|
|
|
this.currentZoneData = data
|
|
|
let JSONName = data.cname
|
|
@@ -390,6 +344,7 @@ export default {
|
|
|
this.currentZoneData = data
|
|
|
this.currentLevel = data.level // 初始化的时候判断是哪一级 //1集团 2中心 3区域 0广场
|
|
|
this.regulateDistrictData = [data]
|
|
|
+ this.getEventStatusData(this.currentLevel)
|
|
|
this.initMap()
|
|
|
}
|
|
|
function recursionData (data, parent) {
|
|
@@ -427,11 +382,11 @@ export default {
|
|
|
panelStyle (item) {
|
|
|
// expand 0 初始状态 1 展开状态 2 隐藏状态
|
|
|
if (item.expand === 0) {
|
|
|
- return {height:'22rem'}
|
|
|
+ return {height: `calc((100% - 2rem) / 3)`}
|
|
|
} else if (item.expand === 1) {
|
|
|
- return {height:'63rem'}
|
|
|
+ return {height:'calc(100% - 11.2rem)'}
|
|
|
} else {
|
|
|
- return {height:'0', margin:0}
|
|
|
+ return {height:'4.6rem'}
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
@@ -494,7 +449,6 @@ export default {
|
|
|
/**根据选择的系统重新渲染地图
|
|
|
* param sysId:系统Id
|
|
|
*/
|
|
|
-
|
|
|
formatter(str, arrv) {
|
|
|
if (str && arrv) {
|
|
|
const Objs = arrv.find(e => e && e.plazaid == str)
|
|
@@ -533,23 +487,21 @@ export default {
|
|
|
/**
|
|
|
* 获取事项状态统计数据
|
|
|
*/
|
|
|
- getEventStatusData () {
|
|
|
+ getEventStatusData (level) {
|
|
|
let params = {
|
|
|
getParams: {
|
|
|
- "level":1,
|
|
|
+ "level": level,
|
|
|
"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") {
|
|
@@ -581,21 +533,37 @@ export default {
|
|
|
//初始化地图
|
|
|
initMap() {
|
|
|
let that = this;
|
|
|
- maps = L.map("map", {
|
|
|
+ myMaps = L.map("map", {
|
|
|
center: new L.LatLng(38, 103),
|
|
|
zoom: 4,
|
|
|
+ // maxZoom:4,
|
|
|
+ // minZoom:4,
|
|
|
crs: L.CRS.EPSG3857,
|
|
|
- minZoom: 3,
|
|
|
- maxZoom: 14,
|
|
|
- zoomControl: false,
|
|
|
+ zoomControl:false,
|
|
|
+ boxZoom: false,
|
|
|
attributionControl: false,
|
|
|
contextmenu: true,
|
|
|
contextmenuWidth: 140,
|
|
|
+ dragging:false,
|
|
|
})
|
|
|
- maps.on('click', (ev)=>{
|
|
|
- })
|
|
|
- maps.on('zoomend', (ev)=>{
|
|
|
- })
|
|
|
+ let el = myMaps.getContainer()
|
|
|
+
|
|
|
+
|
|
|
+ el.addEventListener('DOMMouseScroll', scrollFunc)
|
|
|
+ el.addEventListener('wheel', scrollFunc)
|
|
|
+
|
|
|
+ function scrollFunc(evt) {
|
|
|
+ evt = evt || window.event;
|
|
|
+ if(evt.preventDefault) {
|
|
|
+ evt.preventDefault();
|
|
|
+ evt.stopPropagation();
|
|
|
+ } else{
|
|
|
+ evt.cancelBubble=true;
|
|
|
+ evt.returnValue = false;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
let JsonData = require("../../assets/geoData/china.json")
|
|
|
let layer = L.geoJSON(JsonData.features, {
|
|
|
style:function(){
|
|
@@ -605,7 +573,7 @@ export default {
|
|
|
'fillColor':'#DEECFF'
|
|
|
}
|
|
|
}
|
|
|
- }).addTo(maps);
|
|
|
+ }).addTo(myMaps);
|
|
|
if(this.currentLevel === 1) { //1集团 3区域 0广场
|
|
|
this.pantGroupMap(this.currentDistrictData[0], this.currentSysId)
|
|
|
} else if (this.currentLevel === 2) { // 2中心
|
|
@@ -616,8 +584,8 @@ export default {
|
|
|
},
|
|
|
//**清空地图 并添加全国底图*/
|
|
|
clearAllLayers(){
|
|
|
- maps.eachLayer(function(layer){
|
|
|
- maps.removeLayer(layer)
|
|
|
+ myMaps.eachLayer(function(layer){
|
|
|
+ myMaps.removeLayer(layer)
|
|
|
})
|
|
|
let JsonData = require("../../assets/geoData/china.json")
|
|
|
let layer = L.geoJSON(JsonData.features, {
|
|
@@ -628,20 +596,19 @@ export default {
|
|
|
'fillColor':'#DEECFF'
|
|
|
}
|
|
|
}
|
|
|
- }).addTo(maps);
|
|
|
+ }).addTo(myMaps);
|
|
|
},
|
|
|
/**
|
|
|
* 移动地图到指定中心
|
|
|
*/
|
|
|
panTo(center, zoom){
|
|
|
- maps.setView(center, zoom)
|
|
|
+ myMaps.setView(center, zoom)
|
|
|
},
|
|
|
/**
|
|
|
* 切换系统时 地图响应
|
|
|
* @params system:当前选择的系统
|
|
|
*/
|
|
|
getInfoOfProject (system) {
|
|
|
- console.log(this.currentLevel)
|
|
|
this.systemList.forEach(item=>{ item.selected = false})
|
|
|
system.selected = true
|
|
|
this.currentSelectedSys = system
|
|
@@ -657,7 +624,7 @@ export default {
|
|
|
},
|
|
|
// 用于绘制集团地图
|
|
|
pantGroupMap (data, sysId) {
|
|
|
- maps.setView([38,103],4)
|
|
|
+ myMaps.setView([38,103],4)
|
|
|
this.clearAllLayers()
|
|
|
let that = this
|
|
|
let groupLayer = new L.layerGroup()
|
|
@@ -720,7 +687,7 @@ export default {
|
|
|
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)
|
|
|
+ groupLayer.addTo(myMaps)
|
|
|
|
|
|
item.marker.on('click', (ev)=>{
|
|
|
groupLayer.clearLayers()
|
|
@@ -729,7 +696,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
- groupLayer.addTo(maps)
|
|
|
+ groupLayer.addTo(myMaps)
|
|
|
},200)
|
|
|
})
|
|
|
},
|
|
@@ -741,7 +708,21 @@ export default {
|
|
|
this.clearAllLayers()
|
|
|
let name = data.cname.substr(0,2)
|
|
|
let zone = this.zoneNames[name]
|
|
|
- this.panTo(this.zoneCenter[zone], 6)
|
|
|
+ let zoom , inner, outer, offset
|
|
|
+ if (['xibei'].includes(zone)) {
|
|
|
+ zoom = 5
|
|
|
+ inner = 20000
|
|
|
+ outer = 40000
|
|
|
+ offset = 1
|
|
|
+ } else {
|
|
|
+ zoom = 6
|
|
|
+ inner = 10000
|
|
|
+ outer = 20000
|
|
|
+ offset = 0.5
|
|
|
+ }
|
|
|
+ this.panTo(this.zoneCenter[zone], zoom)
|
|
|
+ // myMaps.setMaxZoom(zoom)
|
|
|
+ // myMaps.setMinZoom(zoom)
|
|
|
let that = this
|
|
|
let groupLayer = new L.layerGroup()
|
|
|
data.children.forEach(item=>{
|
|
@@ -783,11 +764,11 @@ export default {
|
|
|
}
|
|
|
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);
|
|
|
+ marker = L.marker([center[0] -offset, center[1]], { icon: myIcon }).addTo(groupLayer)
|
|
|
+ L.circle(center, outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
|
|
|
+ L.circle(center, inner, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
|
|
|
}
|
|
|
- groupLayer.addTo(maps)
|
|
|
+ groupLayer.addTo(myMaps)
|
|
|
marker.on('click', (ev)=>{
|
|
|
groupLayer.clearLayers()
|
|
|
this.pantProjectsMap(item,sysId)
|
|
@@ -802,7 +783,7 @@ export default {
|
|
|
* 用于绘制项目的点
|
|
|
*/
|
|
|
pantProjectsMap (data,sysId) {
|
|
|
- console.log(data,sysId)
|
|
|
+
|
|
|
this.clearAllLayers()
|
|
|
let geo = this.provinceCities[data.cname]
|
|
|
this.panTo(geo.center, geo.zoom)
|
|
@@ -857,11 +838,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
color = that.paintColorByData(num)
|
|
|
- let zoom = maps.getZoom()
|
|
|
+ let zoom = myMaps.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 = L.marker([center[0]-size.offset, center[1]], { icon: myIcon }).addTo(myMaps)
|
|
|
+ L.circle(center, size.outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(myMaps);
|
|
|
+ L.circle(center, size.innder, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(myMaps);
|
|
|
marker.on("click", (ev) => {
|
|
|
// that.$router.push({path:'./'})
|
|
|
})
|
|
@@ -1078,6 +1059,7 @@ export default {
|
|
|
font-size: 1.6rem;
|
|
|
font-weight: bolder;
|
|
|
line-height: 2rem;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.system-general{
|
|
|
width: 25.4%;
|
|
@@ -1227,6 +1209,7 @@ export default {
|
|
|
#map{
|
|
|
height: 70rem;
|
|
|
overflow: hidden;
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
.legend{
|
|
|
position: absolute;
|
|
@@ -1243,9 +1226,6 @@ export default {
|
|
|
width: 20px;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
- em{
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1255,20 +1235,20 @@ export default {
|
|
|
.block{
|
|
|
position: relative;
|
|
|
padding:1.2rem 1.6rem;
|
|
|
+ height: calc( (100% - 2rem) / 3);
|
|
|
border-radius: 4px;
|
|
|
- margin-bottom: 1.2rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
background: white;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: height 0.3s ease-in-out;
|
|
|
.section-title{
|
|
|
font-size: 1.6rem;
|
|
|
-
|
|
|
}
|
|
|
.list{
|
|
|
margin-top: 1.4rem;
|
|
|
- height: 21rem;
|
|
|
overflow: hidden;
|
|
|
- transition: height 0.3s ease-in-out;
|
|
|
+ height: calc(100% - 3rem);
|
|
|
ul{
|
|
|
- overflow: hidden;
|
|
|
li{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
@@ -1301,7 +1281,7 @@ export default {
|
|
|
}
|
|
|
.arrow{
|
|
|
position: absolute;
|
|
|
- bottom: 0.5rem;
|
|
|
+ bottom: 0;
|
|
|
left:50%;
|
|
|
cursor: pointer;
|
|
|
transform-origin: center center;
|