index.vue 56 KB

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