index.vue 60 KB

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