index.vue 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432
  1. <template>
  2. <div class='overview'>
  3. <!-- 顶部路由 -->
  4. <div class='menu'>
  5. <div class='home' @click='$emit("update:modelNum", 0)'>
  6. <div class='downright'></div>
  7. <div class='home-box'>
  8. <img src='@/assets/imgs/logo.png' alt />
  9. <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
  10. </div>
  11. </div>
  12. <div class='home-right'>
  13. <span style='color:#8D9399'>
  14. <span class='span3'>{{times}}</span>
  15. </span>
  16. </div>
  17. </div>
  18. <!-- 面包屑 -->
  19. <nav class='navigation'>
  20. <section class='crumbs'>
  21. <span>{{currentZoneData.cname}}</span>
  22. <span v-for='(item , index) in crumbsHtml' :key='index' @click='navgateFromCrumbs(item[1], index)'>
  23. {{item[0]}}
  24. <em v-if='index !== crumbsHtml.length - 1'>></em>
  25. </span>
  26. </section>
  27. <section>
  28. <TreeSelect
  29. width='280'
  30. :hideClear='false'
  31. :isReadOnly='false'
  32. :caption='"选择管理分区"'
  33. :data='regulateDistrictData'
  34. placeholder="全部"
  35. :disabled='false'
  36. @change='selectProjectItem'
  37. />
  38. </section>
  39. </nav>
  40. <main class='container'>
  41. <section class='system-general'>
  42. <div class='system-main-title'>
  43. <h4 class='section-title'>系统概况</h4>
  44. </div>
  45. <div class='system-list'>
  46. <ul>
  47. <li
  48. @click='getInfoOfProject(item)'
  49. :class='["system-item", item.selected ? "selected":""]'
  50. v-for='(item , index) in systemList'
  51. :key='index'
  52. >
  53. <div class='system-name'>
  54. <div :class='["img", item.selected ? "selected":""]'>
  55. <img :src='imgSrc(item.smsxt)' />
  56. </div>
  57. <span>{{item.smsxtname}}</span>
  58. </div>
  59. <div class='system-equipments' v-if='item.assetTypeList'>
  60. <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
  61. <div class="title">
  62. <P>{{equip.category_name}}</p>
  63. <span v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
  64. </div>
  65. <p>
  66. <span>{{equip.asset_num}}</span>
  67. <span>台</span>
  68. </p>
  69. </div>
  70. </div>
  71. <div v-else style='width:65%;text-align:center;'>暂无数据</div>
  72. </li>
  73. </ul>
  74. </div>
  75. </section>
  76. <section class='map-box'>
  77. <section class='cards-list'>
  78. <div class='card' @click='navToManageNumber'>
  79. <div class='img'>
  80. <img src='../../assets/images/icons/ratio.png' />
  81. </div>
  82. <p>上线管理说明书数量</p>
  83. <strong>{{plazaInfoCount.upwcCount}}</strong>
  84. </div>
  85. <div class='card' @click='navToIntroduceUpdate'>
  86. <div class='img'>
  87. <img src='../../assets/images/icons/audit.png' />
  88. </div>
  89. <p>当月说明书更新项目数量</p>
  90. <strong>{{plazaInfoCount.rptChangeCount}}</strong>
  91. </div>
  92. <div class='card' @click='navToFocusItems'>
  93. <div class='img'>
  94. <img src='../../assets/images/icons/contract.png' />
  95. </div>
  96. <p>当月重点关注事项项目数量</p>
  97. <strong>{{plazaInfoCount.zhsxChangeCount}}</strong>
  98. </div>
  99. </section>
  100. <section class='map-container'>
  101. <div id='map'></div>
  102. <div class='legend'>
  103. <div class='legend-bar' v-for='(bar , index) in legendList' :key='index'>
  104. <span :style='{background:bar.color}'></span>
  105. <em>{{bar.num}}</em>
  106. </div>
  107. </div>
  108. </section>
  109. </section>
  110. <section class='ratio-list'>
  111. <section class='block' :style='panelStyle(item)' v-for='(item , index) in maintainList' :key='index'>
  112. <h4 class='section-title' @click='toggerPanel(item)'>{{item.title}}<img @mouseenter="showToolTip(index, item.title)" @mouseleave="hideToolTip(index, item.title)" src="../../assets/images/icons/notice.png" /></h4>
  113. <transition name="selectDownUpExtendTop">
  114. <div class="tool-tip" v-if="item.showToolTip">
  115. <h5 style="font-weight:bold;">{{item.title + '比值'}}</h5>
  116. <p>{{item.title === '专维' ? '逾期未完成/即将到期任务数/任务总数' : '逾期未完成/任务总数'}}</p>
  117. <div class="tip-triangle" :style="{left: item.title === '第三方检测' ? '12.5rem': '7.8rem'}"> </div>
  118. </div>
  119. </transition>
  120. <div class='list'>
  121. <ul>
  122. <li v-for='(option , index) in item.data' :key='index'>
  123. <div class='ratio'>
  124. <span>{{option.cname}}</span>
  125. <span v-if='item.title === "专维"'>
  126. <span>{{option.rptGlsmsStatistics.unfinished}} /</span>
  127. <span>{{option.rptGlsmsStatistics.due_num}} /</span>
  128. <span>{{option.rptGlsmsStatistics.total}}</span>
  129. </span>
  130. <span v-else>
  131. <span>{{option.rptGlsmsStatistics.unfinished}} /</span>
  132. <span>{{option.rptGlsmsStatistics.total}}</span>
  133. </span>
  134. </div>
  135. <div class='bar'>
  136. <div class='inner-bar' :style='barStyle(option.rptGlsmsStatistics, item.title)'></div>
  137. </div>
  138. </li>
  139. </ul>
  140. <div
  141. class='arrow'
  142. v-show='item.expand !== 2'
  143. :style='{transform: item.expand === 1 ? "rotate(-90deg)" : "rotate(90deg)"}'
  144. @click='toggerPanel(item)'
  145. >
  146. <img src='../../assets/images/icons/right.png' />
  147. </div>
  148. </div>
  149. </section>
  150. </section>
  151. </main>
  152. </div>
  153. </template>
  154. <script>
  155. let myMaps = null
  156. import { login } from '@/api/login'
  157. import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus } from '@/api/homePage'
  158. import { formatTime } from '@/utils/format.js'
  159. import { mapGetters } from 'vuex'
  160. import { sortBy } from 'lodash'
  161. import moment from 'moment'
  162. import L from 'leaflet'
  163. import 'leaflet-contextmenu'
  164. export default {
  165. data() {
  166. return {
  167. toolTipHtml:'',
  168. crumbsHtml: [],
  169. zoneNames: {
  170. 东北: 'dongbei',
  171. 西北: 'xibei',
  172. 华北: 'huabei',
  173. 华中: 'huazhong',
  174. 华东: 'huadong',
  175. 中南: 'zhongnan',
  176. 西南: 'xinan',
  177. 华南: 'huanan',
  178. 东南: 'dongnan',
  179. 其他: 'Other'
  180. },
  181. provinceCities: {
  182. "青岛区域": { province: 'shandong', center: [36.06667, 120.33333], zoom: 8 },
  183. "北京区域": { province: 'beijing', center: [39.604882122321174, 116.43660987308282], zoom: 8 },
  184. "天津区域": { province: 'tianjin', center: [39.130593, 117.260892], zoom: 7 },
  185. "济南区域": { province: 'shandong', center: [36.4, 117.0], zoom: 7 },
  186. "上海区域": { province: 'shanghai', center: [31.090574094954192, 121.46299249603001], zoom: 10 },
  187. "南京区域": { province: 'jiangsu', center: [32.05, 118.78333], zoom: 7 },
  188. "无锡区域": { province: 'jiangsu', center: [31.57, 120.3], zoom: 9 },
  189. "厦门区域": { province: 'fujian', center: [24.46667, 118.1], zoom: 9 },
  190. "宁波区域": { province: 'zhejiang', center: [29.52, 121.33], zoom: 8 },
  191. "杭州区域": { province: 'zhejiang', center: [30.323100460201648, 120.50270908851112], zoom: 9 },
  192. "福州区域": { province: 'fujian', center: [26.05, 119.18], zoom: 8 },
  193. "合肥区域": { province: 'anhui', center: [31.52, 117.17], zoom: 7 },
  194. "长沙区域": { province: 'hunan', center: [28.12, 112.59], zoom: 8 },
  195. "南昌区域": { province: 'jiangxi', center: [28.4, 115.55], zoom: 8 },
  196. "大连区域": { province: 'liaoning', center: [39.98974718404572, 122.66034125625548], zoom: 8 },
  197. "沈阳区域": { province: 'liaoning', center: [41.72213058512578, 122.93479223528372], zoom: 8 },
  198. "长春区域": { province: 'jilin', center: [42.88033923363183, 127.02188147691707], zoom: 8 },
  199. "东莞区域": { province: 'guangdong', center: [23.644524198573688, 114.83844948916203], zoom: 8 },
  200. "南宁区域": { province: 'guangxi', center: [22.48, 108.19], zoom: 7 },
  201. "广州区域": { province: 'guangdong', center: [22.755920681486405, 112.01244459124548], zoom: 7 },
  202. "太原区域": { province: 'shanxi1', center: [37.54, 112.33], zoom: 7 },
  203. "武汉区域": { province: 'hubei', center: [31.147006308556566, 112.97898510653813], zoom: 7 },
  204. "郑州区域": { province: 'henan', center: [34.46, 113.4], zoom: 7 },
  205. "哈尔滨区域": { province: 'heilongjiang', center: [46.800059446787316, 128.40505022926592], zoom: 7 },
  206. "乌鲁木齐区域": { province: 'xinjiang', center: [43.45, 87.36], zoom: 8 },
  207. "呼和浩特区域": { province: 'neimenggu', center: [45.182036837015886, 116.82329020199336], zoom: 5 },
  208. "西安区域": { province: 'shanxi2', center: [36.08462129606931, 109.4527754086213], zoom: 7 },
  209. "银川区域": { province: 'ningxia', center: [38.108627664321276, 102.36578196225639], zoom: 7 },
  210. "成都区域": { province: 'sichuan', center: [30.24957724046765, 103.4647651330231], zoom: 7 },
  211. "昆明区域": { province: 'yunnan', center: [25.903703303407667, 105.10972266685498], zoom: 8 },
  212. "重庆区域": { province: 'chongqing', center: [29.35, 106.33], zoom: 8 }
  213. },
  214. zoneCenter: {
  215. dongbei: [43.161614, 124.396818], // 取自 东北运营中心 长春区域 四平万达广场
  216. xibei: [37.999781, 106.197518], // 西北 银川区域 吴忠万达广场 zoom 5
  217. huabei: [39.019075, 117.686953], // 华北中心 天津区域 天津塘沽万达广场
  218. huazhong: [33.999249, 113.872131], // 华中 郑州 许昌万达广场
  219. huadong: [32.477565, 119.923391], // 华东 南京 泰州
  220. zhongnan: [28.860875644389676, 114.55131767165491],
  221. huanan: [22.635788, 110.17923], // 华南 南宁 玉林万达广场
  222. dongnan: [26.657907, 119.545678], //东南 福州 宁德万达广场
  223. xinan: [28.749998, 104.648788] // 西南 成都 宜宾万达广场
  224. },
  225. legendList: [
  226. { color: '#F54E45', num: '≥200' },
  227. { color: '#F58300', num: '100-200' },
  228. { color: '#FFBA6B', num: '50-99' },
  229. { color: '#0091FF', num: '10-49' },
  230. { color: '#82C7FC', num: '1-9' },
  231. { color: '#EEEEEE', num: '0' }
  232. ],
  233. plazaInfoCount: {},
  234. systemList: [],
  235. currentZoneData: {}, //
  236. currentDistrictData: [], //当前管理分区数据
  237. currentSelectedSys: {},
  238. currentSysId: '',
  239. state: '',
  240. value: 190,
  241. currentPanel: '',
  242. regulateDistrictData: [],
  243. projectsCode: [],
  244. maintainList: [],
  245. circleSize: {
  246. 4: { inner: 50000, outer: 100000, offset: 2 },
  247. 5: { inner: 15000, outer: 30000, offset: 0.8 },
  248. 6: { inner: 15000, outer: 30000, offset: 0.8 },
  249. 7: { inner: 8000, outer: 16000, offset: 0.3 },
  250. 8: { inner: 4000, outer: 8000, offset: 0.14 },
  251. 9: { inner: 2000, outer: 4000, offset: 0.08 },
  252. 10: { inner: 1000, outer: 2000, offset: 0.04 },
  253. 11: { inner: 1000, outer: 2000, offset: 0.04 }
  254. }
  255. }
  256. },
  257. computed: {
  258. ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
  259. },
  260. watch: {},
  261. created() {
  262. this.currentTime()
  263. },
  264. mounted() {
  265. window.vm = this
  266. this.getFrameworkTreeData()
  267. window.addEventListener('resize', this.reinitalMap, false)
  268. },
  269. methods: {
  270. showToolTip (index, title) {
  271. this.maintainList.forEach(item => {item.showToolTip = false})
  272. this.maintainList[index].showToolTip = true
  273. },
  274. hideToolTip (index, title) {
  275. this.maintainList[index].showToolTip = false
  276. },
  277. reinitalMap () {
  278. if (myMaps) {
  279. myMaps.invalidateSize(true);
  280. }
  281. },
  282. imgSrc(code) {
  283. return require('../../assets/images/icons/' + code + '.png')
  284. },
  285. /**
  286. * 跳转到 当月说明书更新项目数量
  287. */
  288. navToIntroduceUpdate() {
  289. // this.$router.push({path:''})
  290. },
  291. /**
  292. * 跳转到 上线管理说明书数量
  293. */
  294. navToManageNumber() {
  295. // this.$router.push({path:''})
  296. },
  297. /**
  298. * 跳转到 当月重点关注事项项目数量
  299. */
  300. navToFocusItems() {
  301. // this.$router.push({path:''})
  302. },
  303. /**
  304. * 通过导航进行导航
  305. *
  306. */
  307. navgateFromCrumbs(id, index) {
  308. let data = this.getDataByCityCcode(id)
  309. if (!data) return
  310. this.currentZoneData = data
  311. let level = data.level //1集团 2中心 3区域 0广场
  312. if (level === 1) {
  313. this.pantGroupMap(data, this.currentSysId)
  314. } else if (level === 2) {
  315. this.pantZonesMap(data, this.currentSysId)
  316. } else {
  317. this.pantProjectsMap(data, this.currentSysId)
  318. }
  319. this.crumbsHtml = this.crumbsHtml.splice(0, index + 1)
  320. },
  321. // 获取 区域/中心/项目
  322. selectProjectItem(ids, data) {
  323. localStorage.setItem('PLAZAID', '')
  324. this.$store.commit('STOREPLAZAID', '')
  325. this.currentLevel = data.level
  326. if (data.level === 0) { // level=0时 plazaId必填
  327. this.queryPlazaInfoCount(data.ccode, data.level, data.cid)
  328. } else {
  329. this.queryPlazaInfoCount(data.ccode, data.level)
  330. }
  331. this.getEventStatusData(this.currentLevel, data.ccode)
  332. this.createNavpathByData(data)
  333. this.currentZoneData = data
  334. let JSONName = data.cname
  335. let level = data.level // //1集团 2中心 3区域 0广场
  336. if (level === 1) {
  337. this.pantGroupMap(data, this.currentSysId)
  338. } else if (level === 2) {
  339. this.pantZonesMap(data, '1001')
  340. } else if (level === 3) {
  341. let res = this.provinceCities[JSONName]
  342. this.pantProjectsMap(data, this.currentSysId)
  343. } else {
  344. this.$router.push({path:'/home/homePage'}) // 点击广场时 直接跳转到详情页 地图不用响应
  345. this.$store.commit('SETPLAZENAME', data.cname)
  346. localStorage.setItem('PLAZAID', data.ccode)
  347. this.$store.commit('STOREPLAZAID', data.ccode)
  348. this.$store.commit('SETISGETMAP',true)
  349. }
  350. },
  351. /**
  352. * @description 查询项目信息统计数量
  353. * @param plazaId level=0时 必填
  354. * @param ccode 管理分区编码 必填
  355. * @param level 1集团 2中心 3区域 0广场 必填
  356. */
  357. queryPlazaInfoCount(ccode, level, plazaId) {
  358. let params = {}
  359. if (plazaId) {
  360. params = {getParams:{ccode, level}}
  361. } else {
  362. params = {getParams:{ccode, level, plazaId}}
  363. }
  364. getPlazaInfoCount(params).then(res => {
  365. if (res.result === 'success') {
  366. if (res.data) {
  367. this.plazaInfoCount = res.data
  368. }
  369. }
  370. })
  371. },
  372. /**
  373. * 根据id 查找数据
  374. */
  375. getDataByCityCcode(id) {
  376. return recursionFindData(this.currentDistrictData, id)
  377. let target = null
  378. function recursionFindData(data, id) {
  379. data.forEach(item => {
  380. if (item.ccode === id) {
  381. target = item
  382. } else {
  383. if (item.children && item.children.length) {
  384. recursionFindData(item.children, id)
  385. }
  386. }
  387. })
  388. if (target) {
  389. return target
  390. }
  391. }
  392. },
  393. /**
  394. * @description 获取集团 中心 区域 项目 数据树数据
  395. * fetch the data of specific group / center / zone / project
  396. * @method param empty
  397. */
  398. getFrameworkTreeData() {
  399. login({
  400. returnTree: true
  401. }).then(res => {
  402. if (res.result === 'success') {
  403. recursionData(res.treeData)
  404. let data = res.treeData[0]
  405. let level = data.level
  406. this.currentZoneData = data
  407. this.currentLevel = level // 初始化的时候判断是哪一级 //1集团 2中心 3区域 0广场
  408. data.open = true // 默认展开第一级
  409. this.regulateDistrictData = [data]
  410. this.getSystemList(data.ccode,level )
  411. this.getEventStatusData(level, data.ccode)
  412. if (level === 0) { // level=0时 plazaId必填
  413. this.queryPlazaInfoCount(data.ccode, level, data.cid)
  414. } else {
  415. this.queryPlazaInfoCount(data.ccode, level)
  416. }
  417. }
  418. function recursionData(data, parent) {
  419. data.forEach(item => {
  420. item.name = item.cname
  421. item.id = item.cid
  422. if (parent) {
  423. item.path = parent + '/' + (item.cname + '&' + item.ccode)
  424. }
  425. let children = item.children
  426. if (Array.isArray(children) && children.length) {
  427. recursionData(children, item.path ? item.path : item.cname + '&' + item.ccode)
  428. }
  429. })
  430. }
  431. })
  432. },
  433. /**
  434. * @description 获取集团 中心 区域 项目 数据树数据
  435. * fetch the data of specific group / center / zone / project
  436. * @method param empty
  437. */
  438. toggerPanel(item) {
  439. this.currentPanel = item.title
  440. // expand 0 初始状态 1 展开状态 2 隐藏状态
  441. if (item.expand === 0 || item.expand === 2) {
  442. item.expand = 1 // 展开
  443. this.maintainList.forEach(option => {
  444. if (option.title !== item.title) {
  445. option.expand = 2 // 隐藏
  446. }
  447. })
  448. } else {
  449. this.maintainList.forEach(option => {
  450. option.expand = 0 // 回到初始状态
  451. })
  452. }
  453. },
  454. /**
  455. * @description 获取集团 中心 区域 项目 数据树数据
  456. * fetch the data of specific group / center / zone / project
  457. * @method param empty
  458. */
  459. panelStyle(item) {
  460. // expand 0 初始状态 1 展开状态 2 隐藏状态
  461. if (item.expand === 0) {
  462. return { height: `calc((100% - 2rem) / 3)` }
  463. } else if (item.expand === 1) {
  464. return { height: 'calc(100% - 11.2rem)' }
  465. } else {
  466. return { height: '4.6rem' }
  467. }
  468. },
  469. /**
  470. * 计算长度
  471. */
  472. barStyle(item) {
  473. let type = item.type
  474. let ratio = 0
  475. if (item.title === '专维') {
  476. ratio = ((item.unfinished + item.due_num) / item.total) * 100
  477. } else {
  478. ratio = (item.unfinished / item.total) * 100
  479. }
  480. let bg = ''
  481. if (type === 0) {
  482. bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
  483. }
  484. if (type === 1) {
  485. bg = 'linear-gradient(to right, #F58300 , #F58300)'
  486. }
  487. if (type === 2) {
  488. bg = 'linear-gradient(to right, #369CF7 , #025BAA)'
  489. }
  490. return {
  491. width: ratio + '%',
  492. backgroundImage: bg
  493. }
  494. },
  495. // 根据数据渲染颜色
  496. /**
  497. * @description 获取集团 中心 区域 项目 数据树数据
  498. * fetch the data of specific group / center / zone / project
  499. * @method param empty
  500. */
  501. paintColorByData(data) {
  502. let color = {
  503. area: '',
  504. border: ''
  505. }
  506. if (data >= 200) {
  507. color.area = '#F54E45'
  508. color.border = 'rgba(245,78,69,0.2)'
  509. } else if (data >= 100 && data < 200) {
  510. color.area = '#F58300'
  511. color.border = 'rgba(245,131,0,0.2)'
  512. } else if (data >= 50 && data < 100) {
  513. color.area = '#FFBA6B'
  514. color.border = 'rgba(255,186,107,0.2)'
  515. } else if (data >= 10 && data < 50) {
  516. color.area = '#0091FF'
  517. color.border = 'rgba(0,145,255,0.2)'
  518. } else if (data >= 1 && data < 10) {
  519. color.area = '#82C7FC'
  520. color.border = 'rgba(130,199,25,0.2)'
  521. } else {
  522. color.area = '#EEEEEE'
  523. color.border = '#CCC'
  524. }
  525. return color
  526. },
  527. /**
  528. * @description 获取集团 中心 区域 项目 数据树数据
  529. * fetch the data of specific group / center / zone / project
  530. * @method param empty
  531. */
  532. currentTime() {
  533. this.times = moment().format('YYYY.MM.DD HH:mm')
  534. setTimeout(this.currentTime, 1000)
  535. },
  536. /**根据选择的系统重新渲染地图
  537. * param sysId:系统Id
  538. */
  539. /**
  540. * @description 获取集团 中心 区域 项目 数据树数据
  541. * fetch the data of specific group / center / zone / project
  542. * @method param empty
  543. */
  544. formatter(str, arrv) {
  545. if (str && arrv) {
  546. const Objs = arrv.find(e => e && e.plazaid == str)
  547. return Objs ? Objs.plazaname : '--'
  548. } else {
  549. return ''
  550. }
  551. },
  552. /**
  553. * @description 获取集团 中心 区域 项目 数据树数据
  554. * fetch the data of specific group / center / zone / project
  555. * @method param ccode 管理分区编码 集团首页必填
  556. * @method param level 1集团 2中心 3区域 0广场 集团首页必填
  557. * @method param plazaId 广场id 必填
  558. */
  559. getSystemList(ccode, level, plazaId) {
  560. let params = {}
  561. if (plazaId) {
  562. params = {getParams:{ccode, level}}
  563. } else {
  564. params = {getParams:{ccode, level, plazaId}}
  565. }
  566. getCardList(params).then(res => {
  567. if (res.result == 'success') {
  568. let result = res.data
  569. if (result && Array.isArray(result)) {
  570. result.forEach(item => {
  571. if (item.assetTypeList) {
  572. item.assetTypeList = item.assetTypeList.splice(0, 3)
  573. }
  574. })
  575. res.data.forEach(item => {
  576. item.selected = false
  577. })
  578. res.data[0].selected = true
  579. this.currentSelectedSys = res.data[0]
  580. this.currentSysId = res.data[0].smsxt
  581. this.systemList = res.data
  582. this.initMap()
  583. }
  584. }
  585. })
  586. },
  587. /**
  588. * @description 获取事项状态统计数据
  589. * @param ccode 管理分区编码 必填
  590. * @param level 1集团 2中心 3区域 0广场 必填
  591. */
  592. getEventStatusData(level, ccode) {
  593. let params = {
  594. getParams: {
  595. level,
  596. ccode
  597. }
  598. }
  599. queryEventStatus(params).then(res => {
  600. if (res.result === 'success') {
  601. let data = res.data
  602. let orginalObj = {
  603. 0:{title:'专维',data:[], expand: 0, showToolTip:false},
  604. 1:{title:'维保',data:[], expand: 0, showToolTip:false},
  605. 2:{title:'第三方检测',data:[], expand: 0, showToolTip:false}
  606. }
  607. let arr = []
  608. for (let key in data) {
  609. let obj = {}
  610. let sortData = data[key]
  611. if (data.hasOwnProperty(key)) {
  612. // 维保,第三方检测排名按照即将到期任务数量从多到少排序,多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序,多的靠前
  613. // due_num 即将到期 unfinished 逾期未完成
  614. if (key == '0') {
  615. sortData.forEach(item => {
  616. item.sort = item.rptGlsmsStatistics.due_num + item.rptGlsmsStatistics.unfinished
  617. })
  618. } else {
  619. sortData.forEach(item => {
  620. item.sort = item.rptGlsmsStatistics.due_num
  621. })
  622. }
  623. orginalObj[key].data = sortBy(sortData, option => {return option.sort }).reverse()
  624. }
  625. }
  626. for ( let key in orginalObj) {
  627. arr.push(orginalObj[key])
  628. }
  629. this.maintainList = arr
  630. }
  631. })
  632. },
  633. //初始化地图
  634. initMap() {
  635. let that = this
  636. myMaps = L.map('map', {
  637. center: new L.LatLng(38, 103),
  638. zoom: 4,
  639. // maxZoom:4,
  640. // minZoom:4,
  641. crs: L.CRS.EPSG3857,
  642. zoomControl: false,
  643. boxZoom: false,
  644. attributionControl: false,
  645. contextmenu: true,
  646. contextmenuWidth: 140,
  647. dragging: false
  648. })
  649. let JsonData = require('../../assets/geoData/china.json')
  650. let layer = L.geoJSON(JsonData.features, {
  651. style: function() {
  652. return {
  653. weight: 1,
  654. color: '#B3D2FF',
  655. fillColor: '#DEECFF'
  656. }
  657. }
  658. }).addTo(myMaps)
  659. if (this.currentLevel === 1) {//1集团
  660. this.pantGroupMap(this.currentZoneData, this.currentSysId)
  661. } else if (this.currentLevel === 2) { // 2中心
  662. this.pantZonesMap(this.currentZoneData, this.currentSysId)
  663. } else if (this.currentLevel === 3) { // 3区域
  664. this.pantProjectsMap(this.currentZoneData, this.currentSysId)
  665. }
  666. },
  667. //**清空地图 并添加全国底图*/
  668. clearAllLayers() {
  669. myMaps.eachLayer(function(layer) {
  670. myMaps.removeLayer(layer)
  671. })
  672. let JsonData = require('../../assets/geoData/china.json')
  673. let layer = L.geoJSON(JsonData.features, {
  674. style: function() {
  675. return {
  676. weight: 1,
  677. color: '#B3D2FF',
  678. fillColor: '#DEECFF'
  679. }
  680. }
  681. }).addTo(myMaps)
  682. },
  683. /**
  684. * 移动地图到指定中心
  685. */
  686. panTo(center, zoom) {
  687. myMaps.setView(center, zoom)
  688. },
  689. /**
  690. * 切换系统时 地图响应
  691. * @params system:当前选择的系统
  692. */
  693. getInfoOfProject(system) {
  694. this.systemList.forEach(item => {
  695. item.selected = false
  696. })
  697. system.selected = true
  698. this.currentSelectedSys = system
  699. this.currentSysId = system.smsxt
  700. //1集团 2中心 3区域 0广场
  701. if (this.currentLevel === 1) {
  702. this.pantGroupMap(this.currentZoneData, system.smsxt)
  703. } else if (this.currentLevel === 2) {
  704. this.pantZonesMap(this.currentZoneData, system.smsxt)
  705. } else if (this.currentLevel === 3) {
  706. this.pantProjectsMap(this.currentZoneData, system.smsxt)
  707. }
  708. },
  709. // 用于绘制集团地图
  710. pantGroupMap(data) {
  711. this.clearAllLayers()
  712. myMaps.setView([38, 103], 4)
  713. let that = this
  714. let groupLayer = new L.layerGroup()
  715. let promiseAll = []
  716. let layerArr = []
  717. data.children.forEach(item => {
  718. let promise = new Promise((resolve, reject) => {
  719. let params = {
  720. getParams: {
  721. smsxt: this.currentSysId,
  722. level: 2, // 中心
  723. ccode: item.ccode
  724. }
  725. }
  726. querySystemCard(params).then(res => {
  727. if (res.result === 'success') {
  728. let num = 0
  729. let name = item.cname.substr(0, 2)
  730. if (res.data) {
  731. let equip = res.data[0]
  732. if (equip.assetTypeList) {
  733. equip.assetTypeList.forEach(item => {
  734. if (item.is_exception_num) {
  735. num += item.is_exception_num
  736. }
  737. })
  738. layerArr.push({
  739. name,
  740. num,
  741. list: equip,
  742. data: item,
  743. fullName: item.cname
  744. })
  745. }
  746. resolve(item)
  747. }
  748. }
  749. })
  750. })
  751. promiseAll.push(promise)
  752. })
  753. Promise.all(promiseAll).then(result => {
  754. layerArr.forEach(item => {
  755. let zone = this.zoneNames[item.name]
  756. let center = this.zoneCenter[zone]
  757. let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
  758. if (contentHtml) {
  759. this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group')
  760. }
  761. })
  762. })
  763. groupLayer.addTo(myMaps)
  764. },
  765. /**
  766. * 用于绘制中心下的地图
  767. */
  768. pantZonesMap(data) {
  769. this.clearAllLayers()
  770. let name = data.cname.substr(0, 2)
  771. let zone = this.zoneNames[name]
  772. let zoom, inner, outer, offset
  773. if (['xibei'].includes(zone)) {
  774. zoom = 5
  775. inner = 20000
  776. outer = 40000
  777. offset = 1
  778. } else {
  779. zoom = 6
  780. inner = 10000
  781. outer = 20000
  782. offset = 0.5
  783. }
  784. this.panTo(this.zoneCenter[zone], zoom)
  785. let that = this
  786. let groupLayer = new L.layerGroup()
  787. data.children.forEach(item => {
  788. let params = {
  789. getParams: {
  790. smsxt: this.currentSysId,
  791. level: 3, // 区域
  792. ccode: item.ccode
  793. }
  794. }
  795. querySystemCard(params).then(res => {
  796. if (res.result === 'success') {
  797. let city = that.provinceCities[item.cname]
  798. let num = 0
  799. let center = city.center
  800. if (res.data) {
  801. let equip = res.data[0]
  802. let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
  803. if (equip.assetTypeList) {
  804. equip.assetTypeList.forEach(item => {
  805. if (item.is_exception_num) {
  806. num += item.is_exception_num
  807. }
  808. })
  809. }
  810. this.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone')
  811. }
  812. }
  813. })
  814. })
  815. groupLayer.addTo(myMaps)
  816. },
  817. /***
  818. * 用于绘制项目的点
  819. */
  820. pantProjectsMap(data) {
  821. this.clearAllLayers()
  822. let geo = this.provinceCities[data.cname]
  823. this.panTo(geo.center, geo.zoom)
  824. data.children.forEach(item => {
  825. this.pantPlazaMap(item)
  826. })
  827. },
  828. /**
  829. * 用于绘制广场的点
  830. */
  831. pantPlazaMap(item, flag) {
  832. let that = this
  833. let groupLayer = new L.layerGroup()
  834. if (flag) {
  835. this.clearAllLayers()
  836. this.panTo(center, 11)
  837. }
  838. let params = {
  839. getParams: {
  840. plazaId: item.cid, // 所查对象是广场的时候plazaId必传
  841. smsxt: this.currentSysId,
  842. level: 0, // 广场
  843. ccode: item.ccode
  844. }
  845. }
  846. querySystemCard(params).then(res => {
  847. if (res.result === 'success') {
  848. let num = 0
  849. if (item.latitude && item.longitude) {
  850. let center = [item.latitude, item.longitude]
  851. if (res.data) {
  852. let equip = res.data[0]
  853. let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
  854. if (equip.assetTypeList) {
  855. equip.assetTypeList.forEach(item => {
  856. if (item.is_exception_num) {
  857. num += item.is_exception_num
  858. }
  859. })
  860. }
  861. this.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project')
  862. }
  863. }
  864. }
  865. groupLayer.addTo(myMaps)
  866. })
  867. },
  868. /**
  869. *
  870. */
  871. createPointOnMap (num, groupLayer, contentHtml, center, data, name, type) {
  872. let popup = null
  873. let marker = null
  874. let outCircle = null
  875. let innerCircle = null
  876. let color = this.paintColorByData(num)
  877. let myIcon = L.divIcon({
  878. html: name,
  879. className: 'my-leaflet-div-icon',
  880. iconSize: 30
  881. })
  882. localStorage.setItem('PLAZAID', '')
  883. this.$store.commit('STOREPLAZAID', '')
  884. setTimeout(()=>{
  885. let zoom = myMaps.getZoom()
  886. let sizes = this.circleSize[zoom]
  887. if (color && center) {
  888. popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
  889. marker = L.marker([center[0] - sizes.offset, center[1]], { icon: myIcon }).addTo(groupLayer)
  890. outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
  891. innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
  892. let feaureGroup = L.featureGroup([marker, outCircle, innerCircle])
  893. feaureGroup.on('mouseover', ev => {
  894. popup.openOn(myMaps)
  895. })
  896. feaureGroup.on('click', ev => {
  897. groupLayer.clearLayers()
  898. this.createNavpathByData(data)
  899. if (type === 'group') {
  900. this.pantZonesMap(data, this.currentSysId)
  901. }
  902. if (type === 'zone') {
  903. this.pantProjectsMap(data, this.currentSysId)
  904. }
  905. if (type === 'project') {
  906. this.$router.push({path:'/home/homePage' })
  907. this.$store.commit('SETPLAZENAME', data.cname)
  908. localStorage.setItem('PLAZAID', data.ccode)
  909. this.$store.commit('STOREPLAZAID', data.ccode) ;
  910. this.$store.commit('SETISGETMAP',true)
  911. }
  912. })
  913. }
  914. }, 200)
  915. },
  916. /**
  917. * 生成弹框HTML
  918. */
  919. createPopupHtmlContent(data, name) {
  920. if (Array.isArray(data) && data.length) {
  921. let that = this
  922. let html = ''
  923. let len = data.length
  924. for (let i = 0; i < len; i++) {
  925. let item = data[i]
  926. if (item.is_exception_num) {
  927. html += `<div class="line">
  928. <span>${item.category_name}</span>
  929. <span>${item.asset_num || '--'}台</span>
  930. <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>${
  931. item.is_exception_num
  932. }</em></span>
  933. </div>`
  934. } else {
  935. html += `<div class="line">
  936. <span>${item.category_name}</span>
  937. <span>${item.asset_num || '--'}台</span>
  938. </div>`
  939. }
  940. }
  941. return `<div class="leaflet-mypopup-content"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`
  942. } else {
  943. return ''
  944. }
  945. },
  946. /**
  947. * 根据数据创建导航路径
  948. */
  949. createNavpathByData(data) {
  950. if (data.level === 1) {
  951. this.crumbsHtml = []
  952. } else {
  953. let pathArr = data.path.split('/')
  954. let newArr = []
  955. pathArr.forEach(item => {
  956. newArr.push(item.split('&'))
  957. })
  958. this.crumbsHtml = newArr
  959. }
  960. this.currentZoneData = data
  961. }
  962. },
  963. beforeDestroy() {
  964. window.removeEventListener('resize', this.reinitalMap)
  965. }
  966. }
  967. </script>
  968. <style scoped lang="less">
  969. @keyframes selectDownUpExtendTop {
  970. from {
  971. transform: translateY(8px);
  972. opacity: 0;
  973. }
  974. to {
  975. transform: translateY(0);
  976. opacity: 1;
  977. }
  978. }
  979. .selectDownUpExtendTop-enter-active {
  980. animation: selectDownUpExtendTop .3s
  981. }
  982. .selectDownUpExtendTop-leave-active {
  983. animation: selectDownUpExtendTop .3s reverse
  984. }
  985. .overview {
  986. height: 100vh;
  987. background: rgba(247, 249, 250, 1);
  988. .menu {
  989. height: 48px;
  990. min-width: 1366px;
  991. color: #1f2429;
  992. font-size: 1.6rem;
  993. background: rgba(255, 255, 255, 1);
  994. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  995. overflow: hidden;
  996. .home {
  997. width: 265px;
  998. height: 48px;
  999. // line-height: 48px;
  1000. text-align: center;
  1001. cursor: pointer;
  1002. color: #ffffff;
  1003. float: left;
  1004. margin-right: 83px;
  1005. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  1006. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  1007. position: relative;
  1008. .downright {
  1009. position: absolute;
  1010. width: 0;
  1011. height: 0;
  1012. border-left: 20px solid transparent;
  1013. border-bottom: 48px solid #fff;
  1014. right: 0px;
  1015. top: 0;
  1016. }
  1017. .home-box {
  1018. height: 100%;
  1019. display: flex;
  1020. align-items: center;
  1021. img {
  1022. width: 28px;
  1023. height: 28px;
  1024. margin-left: 20px;
  1025. margin-right: 24px;
  1026. margin-top: -3px;
  1027. }
  1028. span {
  1029. font-size: 2rem;
  1030. font-family: MicrosoftYaHei;
  1031. height: 27px;
  1032. line-height: 27px;
  1033. margin-top: -4px;
  1034. &:after {
  1035. content: '|';
  1036. position: absolute;
  1037. left: 60px;
  1038. }
  1039. }
  1040. }
  1041. }
  1042. & > div:nth-of-type(2) {
  1043. & > div {
  1044. line-height: 48px;
  1045. text-align: center;
  1046. //background: url('../assets/images/topbar1.png') no-repeat;
  1047. float: left;
  1048. width: 80px;
  1049. height: 48px;
  1050. cursor: pointer;
  1051. transition: all 0.2s;
  1052. }
  1053. .is-active {
  1054. color: #025baa;
  1055. font-weight: bolder;
  1056. border-bottom: 2px solid #025baa;
  1057. background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  1058. }
  1059. }
  1060. .home-right {
  1061. float: right;
  1062. margin-right: 20px;
  1063. line-height: 48px;
  1064. color: #646c73;
  1065. font-size: 1.4rem;
  1066. cursor: pointer;
  1067. display: flex;
  1068. align-content: center;
  1069. img {
  1070. margin-top: -2px;
  1071. }
  1072. .span-out {
  1073. position: relative;
  1074. margin: 0 16px;
  1075. .span2-num {
  1076. position: absolute;
  1077. right: -5px;
  1078. top: 5px;
  1079. display: inline-block;
  1080. width: 18px;
  1081. height: 18px;
  1082. background: red;
  1083. border-radius: 90px;
  1084. font-size: 1.2rem;
  1085. text-align: center;
  1086. line-height: 18px;
  1087. color: #ffffff;
  1088. }
  1089. }
  1090. }
  1091. .span1,
  1092. .span2 {
  1093. padding: 0 6px 0 3px;
  1094. }
  1095. .span3 {
  1096. padding-left: 3px;
  1097. }
  1098. }
  1099. .navigation {
  1100. display: flex;
  1101. justify-content: space-between;
  1102. align-items: center;
  1103. height: 50px;
  1104. padding: 0 16px;
  1105. background: white;
  1106. .crumbs {
  1107. span {
  1108. cursor: pointer;
  1109. }
  1110. span:first-child {
  1111. display: inline-block;
  1112. width: 14.4rem;
  1113. height: 2.8rem;
  1114. margin-right: 1.2rem;
  1115. border: 1px solid rgba(195, 199, 203, 1);
  1116. border-radius: 1.4rem;
  1117. text-align: center;
  1118. line-height: 2.8rem;
  1119. font-size: 14px;
  1120. cursor: default;
  1121. }
  1122. span:last-child {
  1123. font-weight: bold;
  1124. }
  1125. }
  1126. }
  1127. .container {
  1128. display: flex;
  1129. justify-content: space-between;
  1130. height: calc(100vh - 98px);
  1131. padding: 1.2rem 1.6rem;
  1132. .section-title {
  1133. display: flex;
  1134. align-items: center;
  1135. padding-left: 10px;
  1136. border-left: 4px solid #025baa;
  1137. color: #1f2429;
  1138. font-size: 1.6rem;
  1139. font-weight: bolder;
  1140. line-height: 2rem;
  1141. cursor: pointer;
  1142. img{
  1143. width: 2rem;
  1144. margin-left: 1.2rem;
  1145. }
  1146. }
  1147. .system-general {
  1148. width: 25.4%;
  1149. box-sizing: border-box;
  1150. background: white;
  1151. .system-main-title {
  1152. padding: 2rem 0 2.4rem 1.6rem;
  1153. }
  1154. .system-list {
  1155. ul {
  1156. height: 80vh;
  1157. li.system-item {
  1158. display: flex;
  1159. justify-content: flex-start;
  1160. align-items: center;
  1161. width: calc(100% - 3.2rem);
  1162. height: calc(100% / 8);
  1163. margin-left: 1.6rem;
  1164. // padding: 1rem 0;
  1165. box-sizing: border-box;
  1166. border: 1px solid white;
  1167. border-radius: 4px;
  1168. border-bottom: 1px solid #eff0f1;
  1169. transition: 0.5s;
  1170. cursor: pointer;
  1171. .system-name {
  1172. display: flex;
  1173. align-items: center;
  1174. width: 28%;
  1175. padding: 1.2rem 0 1.2rem 1rem ;
  1176. border-right: 1px solid #EFF0F1;
  1177. .img {
  1178. height: 2.8rem;
  1179. width: 2.8rem;
  1180. display: flex;
  1181. align-items: center;
  1182. justify-content: center;
  1183. border-radius: 50%;
  1184. background: #dce7f0;
  1185. filter: saturate(0%);
  1186. img {
  1187. width: 3.2rem;
  1188. height: 3.2rem;
  1189. }
  1190. }
  1191. .selected {
  1192. filter: saturate(100%);
  1193. }
  1194. span {
  1195. display: inline-block;
  1196. margin-left: 0.8rem;
  1197. color: #1f2429;
  1198. font-size: 1.4rem;
  1199. font-weight: bolder;
  1200. }
  1201. }
  1202. .system-equipments {
  1203. width: 72%;
  1204. display: flex;
  1205. align-items: center;
  1206. padding-left: 1.4rem;
  1207. .number {
  1208. width: 33.3%;
  1209. margin-right: 1.2rem;
  1210. .title{
  1211. display: inline-block;
  1212. position: relative;
  1213. p{
  1214. display: inline-block;
  1215. position: relative;
  1216. width: 100%;
  1217. color: #1f2429;
  1218. font-size: 1.4rem;
  1219. line-height: 1.6rem;
  1220. white-space: nowrap;
  1221. text-overflow: ellipsis;
  1222. overflow: hidden;
  1223. }
  1224. span {
  1225. position: absolute;
  1226. top: -1.6rem;
  1227. right: -1rem;
  1228. padding: 2px 4px;
  1229. border-radius: 0.9rem;
  1230. font-size: 1.2rem;
  1231. color: #f54e45;
  1232. background: #fde3e2;
  1233. }
  1234. }
  1235. p:nth-of-type(2) {
  1236. span:first-child {
  1237. color: #1f2429;
  1238. font-size: 1.8rem;
  1239. font-weight: bold;
  1240. }
  1241. }
  1242. }
  1243. }
  1244. }
  1245. li.selected {
  1246. border-color: rgba(0, 118, 197, 0.6);
  1247. box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
  1248. }
  1249. li:last-child {
  1250. border-bottom: none;
  1251. }
  1252. li:hover {
  1253. border-color: #66addd;
  1254. box-shadow: 0 2px 10px 0px rgba(204, 100, 77, 0.4);
  1255. }
  1256. }
  1257. }
  1258. }
  1259. .map-box {
  1260. width: calc(56.6% - 2.4rem);
  1261. margin: 0 12px;
  1262. .cards-list {
  1263. display: flex;
  1264. justify-content: space-between;
  1265. .card {
  1266. width: calc((100% - 24px) / 3);
  1267. box-sizing: border-box;
  1268. padding: 12px 16px;
  1269. border-radius: 4px;
  1270. background: white;
  1271. .img {
  1272. display: flex;
  1273. justify-content: center;
  1274. align-items: center;
  1275. width: 4.4rem;
  1276. height: 4.4rem;
  1277. border-radius: 50%;
  1278. img {
  1279. width: 2rem;
  1280. height: 2rem;
  1281. }
  1282. }
  1283. }
  1284. div:nth-of-type(1) .img {
  1285. background: rgba(130, 199, 252, 0.14);
  1286. }
  1287. div:nth-of-type(2) .img {
  1288. background: rgba(0, 214, 185, 0.14);
  1289. }
  1290. div:nth-of-type(3) .img {
  1291. background: rgba(255, 186, 107, 0.14);
  1292. }
  1293. p {
  1294. color: #646c73;
  1295. margin: 12px 0 8px 0;
  1296. }
  1297. strong {
  1298. color: #1f2429;
  1299. font-size: 2.4rem;
  1300. }
  1301. }
  1302. .map-container {
  1303. position: relative;
  1304. height: 70vh;
  1305. #map {
  1306. height: 70vh;
  1307. overflow: hidden;
  1308. pointer-events: none;
  1309. }
  1310. .legend {
  1311. position: absolute;
  1312. left: 1.4rem;
  1313. bottom: 2.7rem;
  1314. padding: 0.6rem;
  1315. background: white;
  1316. .legend-bar {
  1317. display: flex;
  1318. align-items: center;
  1319. span {
  1320. display: inline-block;
  1321. height: 4px;
  1322. width: 20px;
  1323. margin-right: 12px;
  1324. }
  1325. em{
  1326. }
  1327. }
  1328. }
  1329. }
  1330. }
  1331. .ratio-list {
  1332. width: 18%;
  1333. .block {
  1334. position: relative;
  1335. padding: 1.2rem 1.6rem;
  1336. height: calc((100% - 2rem) / 3);
  1337. border-radius: 4px;
  1338. margin-bottom: 1rem;
  1339. background: white;
  1340. // overflow: auto;
  1341. transition: height 0.3s ease-in-out;
  1342. .section-title {
  1343. font-size: 1.6rem;
  1344. }
  1345. .tool-tip{
  1346. position: absolute;
  1347. left: 0;
  1348. top: -6.6rem;
  1349. width: 100%;
  1350. border-radius: 4px;
  1351. padding: 0.8rem 1.6rem 1.6rem;
  1352. font-size: 1.4rem;
  1353. line-height: 2.2rem;
  1354. background: rgba(247, 249, 250, 1);
  1355. border:1px solid rgba(151,151,151, 0.2);
  1356. filter: drop-shadow(0 2px 4px rgba(31, 35, 41, .1)) ;
  1357. .tip-triangle{
  1358. position: absolute;
  1359. position: absolute;
  1360. left: 7.8rem;
  1361. border-style: solid;
  1362. width: 0;
  1363. height: 0;
  1364. bottom: -6px;
  1365. border-width: 6px 6px 0 6px;
  1366. border-color: rgba(247, 249, 250, 1) transparent transparent transparent;
  1367. }
  1368. }
  1369. .list {
  1370. margin-top: 1.4rem;
  1371. overflow: hidden;
  1372. height: calc(100% - 3rem);
  1373. ul {
  1374. li {
  1375. display: flex;
  1376. flex-direction: column;
  1377. justify-content: center;
  1378. margin-bottom: 1.2rem;
  1379. .ratio {
  1380. display: flex;
  1381. justify-content: space-between;
  1382. margin-bottom: 0.5rem;
  1383. span:first-child {
  1384. color: #646c73;
  1385. font-size: 1.4rem;
  1386. }
  1387. }
  1388. .bar {
  1389. position: relative;
  1390. height: 6px;
  1391. border-radius: 3px;
  1392. background: #c3c7cb;
  1393. .inner-bar {
  1394. position: absolute;
  1395. height: 6px;
  1396. left: 0;
  1397. top: 0;
  1398. border-radius: 3px;
  1399. }
  1400. }
  1401. }
  1402. }
  1403. }
  1404. .arrow {
  1405. position: absolute;
  1406. bottom: 0;
  1407. left: 50%;
  1408. cursor: pointer;
  1409. transform-origin: center center;
  1410. transform: translateX(-50%) rotate(90deg);
  1411. }
  1412. }
  1413. section:last-child.block {
  1414. margin-bottom: 0;
  1415. }
  1416. }
  1417. }
  1418. }
  1419. </style>