index.vue 68 KB

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