index.vue 66 KB

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