123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701 |
- <template>
- <div ref="homepage" :class="skinMode === 'light' ? 'light-overview' : 'dark-overview'">
- <!-- 顶部路由 -->
- <div class="menu">
- <div class="home" @click="$emit('update:modelNum', 0)">
- <!-- <div class="downright"></div> -->
- <div class="home-box">
- <img src="@/assets/imgs/logo.png" alt />
- <!-- <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
- <span>万达集团管理说明书</span>
- </div>
- </div>
- <div class="home-right">
- <span class="span3" :style="{color: skinMode === 'light' ? '#8e9298' : 'white'}">{{ times }}</span>
- <img @click="changeSkin" src="../../assets/images/icons/switch.png">
- <div class="tip" :style="{color: skinMode === 'light' ? '#8e9298' : '#69c4df'}" @click="changeSkin" >
- {{skinMode === 'light' ? '切换驾驶舱':'切换集团首页'}}
- </div>
- </div>
- </div>
- <!-- 面包屑 -->
- <nav class="navigation">
- <section class="crumbs">
- <span>{{ currentZoneData.cname }}</span>
- <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>
- </section>
- <section>
- <TreeSelect
- class="special-my-tree-select"
- ref="treeSelect"
- width="240"
- :hideClear="true"
- :isReadOnly="false"
- :caption="'管理分区:'"
- :data="regulateDistrictData"
- :placeholder="placeholder"
- :disabled="false"
- v-model="selectedZone"
- @change="selectProjectItem"
- />
- </section>
- </nav>
- <main class="container">
- <section class="system-general dot-background">
- <div class="system-main-title">
- <h4 class="section-title">系统概况</h4>
- </div>
- <div class="system-list">
- <ul>
- <li
- @click="getInfoOfProject(item)"
- :class="['system-item', item.selected ? 'selected' : '']"
- v-for="(item, index) in systemList"
- :key="index"
- >
- <div class="system-name">
- <img :src="imgSrc(item.smsxt)" />
- <span>{{ item.smsxtname.replace("系统", "") }}</span>
- </div>
- <section
- v-if="item.assetTypeList.length"
- class="system-equipments-container"
- >
- <div
- class="more"
- @click.stop.capture="expandRestItems(item, index)"
- v-if="item.hasArrow"
- :style="{
- transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
- }"
- >
- <img v-if="item.showColor" src="../../assets/images/icons/arrow.png" />
- <img v-else src="../../assets/images/icons/grey.png" />
- </div>
- <div class="system-equipments">
- <div
- class="number"
- v-for="(equip, index) in item.assetTypeList"
- :key="index"
- >
- <div class="title">
- <P
- :style="{
- width:
- equip.category_name.length > 6 ? '10rem' : 'auto',
- }"
- :title="equip.category_name"
- >{{ equip.category_name }}</P
- >
- <span
- @click.stop.capture="openMaskPanel(item)"
- :style="{
- right: equip.category_name.length > 6 ? '0' : '-1rem',
- }"
- v-if="equip.is_exception_num"
- >{{ equip.is_exception_num }}</span
- >
- </div>
- <p>
- <span class="amount">{{ equip.asset_num }}</span
- ><span>{{
- equip.category_name === "屋面logo"
- ? "个"
- : equip.category_name === "玻璃护栏"
- ? "段"
- : "台"
- }}</span>
- </p>
- </div>
- </div>
- <section
- class="system-equipments"
- v-show="item.expand && item.restAssetTypeList.length"
- style="margin-top: 0.4rem"
- >
- <div
- class="number"
- v-for="(equip, index) in item.restAssetTypeList"
- :key="index"
- >
- <div class="title">
- <P :title="equip.category_name">{{
- equip.category_name
- }}</P>
- <span
- @click.stop.capture="openMaskPanel(item)"
- :style="{
- right: equip.category_name.length > 6 ? '0' : '-1rem',
- }"
- v-if="equip.is_exception_num"
- >{{ equip.is_exception_num }}</span
- >
- </div>
- <p>
- <span class="amount">{{ equip.asset_num }}</span
- ><span>{{
- equip.category_name === "屋面logo"
- ? "个"
- : equip.category_name === "玻璃护栏"
- ? "段"
- : "台"
- }}</span>
- </p>
- </div>
- </section>
- </section>
- <div v-else style="width: 65%; text-align: center">暂无数据</div>
- </li>
- </ul>
- </div>
- </section>
- <section class="map-box">
- <section class="cards-list">
- <div class="card dot-background" @click="navToManageNumber">
- <div class="card-title">
- <p>上线管理说明书广场数量</p>
- </div>
- <div class="describe">
- <span style="margin-right: 20px"
- >上线数量 <strong>{{ plazaInfoCount.upwcCount }}</strong></span
- >
- </div>
- </div>
- <div class="card dot-background" @click="navToIntroduceUpdate">
- <div class="card-title">
- <p>当月说明书更新数量</p>
- </div>
- <div class="describe">
- <div style="margin-right: 20px">
- 更新广场数量
- <strong>{{ plazaInfoCount.rptChangeCount }}</strong>
- </div>
- <div>
- 更新事项数量<strong>{{
- plazaInfoCount.zhsxChangeCount
- }}</strong>
- </div>
- </div>
- </div>
- </section>
- <section class="map-container" id="map-container">
- <div id="map"></div>
- <div class="legend">
- <div
- class="legend-bar"
- v-for="(bar, index) in legendList"
- :key="index"
- >
- <span :style="{ background: bar.color }"></span>
- <em>{{ bar.num }}</em>
- </div>
- </div>
- </section>
- </section>
- <section class="ratio-list">
- <section
- class="block dot-background"
- :style="panelStyle(item)"
- v-for="(item, index) in maintainList"
- :key="index"
- >
- <h4 class="section-title" @click="toggerPanel(item)" @mouseover="showToolTip(index, item.title)" @mouseout="hideToolTip(index, item.title)" >
- {{ item.title}}
- <img v-show="skinMode==='light'" src="../../assets/images/icons/notice.png" />
- <img v-show="skinMode==='dark'" src="../../assets/images/icons/alert.png" />
- </h4>
- <transition name="selectDownUpExtendTop">
- <div class="tool-tip" v-if="item.showToolTip">
- <h5 style="font-weight: bold">{{ item.title + "比值" }}</h5>
- <p>
- {{
- item.title === "专维"
- ? "逾期未完成/即将逾期/本年总任务"
- : "即将逾期/当月总任务"
- }}
- </p>
- <div
- class="tip-triangle"
- :style="{
- left: item.title === '第三方检测' ? '12.5rem' : '7.8rem',
- }"
- ></div>
- </div>
- </transition>
- <div
- class="list"
- :style="{ overflow: item.expand == 1 ? 'auto' : 'hidden' }"
- >
- <ul>
- <li v-for="(option, index) in item.data" :key="index">
- <div class="ratio">
- <span>{{ option.cname }}</span>
- <span v-if="item.title === '专维'">
- <span
- >{{
- option.rptGlsmsStatistics.overdue_unfinished
- }}
- /</span
- >
- <span>{{ option.rptGlsmsStatistics.due_num }} /</span>
- <span>{{ option.rptGlsmsStatistics.total }}</span>
- </span>
- <span v-else>
- <span>{{ option.rptGlsmsStatistics.due_num }} /</span>
- <span>{{ option.rptGlsmsStatistics.total }}</span>
- </span>
- </div>
- <div class="bar">
- <div
- class="inner-bar"
- :style="barStyle(option.rptGlsmsStatistics, item.title)"
- ></div>
- </div>
- </li>
- </ul>
- <div class="arrow" v-show="item.expand !== 2" :style="{ transform: item.expand === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}" @click="toggerPanel(item)" >
- <img src="../../assets/images/icons/arrow_d_u.png" />
- </div>
- </div>
- </section>
- </section>
- </main>
- <el-dialog
- :visible.sync="dialogVisible"
- width="80%"
- :custom-class="'my-dialog'"
- >
- <div class="shut-download">
- <span class="download" @click="downloadExcel">下载</span>
- <span class="shut" @click="shutMaskPanel">x</span>
- </div>
- <div class="table-content">
- <div class="table-title">
- {{ currentSelectedSys.smsxtname }}
- </div>
- <div class="table-tabs">
- <Tabs
- type="card"
- :data="tabData"
- v-model="activeName"
- @change="tabChange"
- ></Tabs>
- </div>
- <div class="table-select">
- <!-- v-model="selectedZone" -->
- <TreeSelect
- v-if="testTree"
- class="special-my-tree-select"
- ref="treeSelect"
- width="240"
- :hideClear="true"
- :isReadOnly="false"
- :caption="'管理分区:'"
- v-model="selectedDialogZone"
- :data="dialogDistrictData"
- @change="selectDialogProject"
- />
- </div>
- <section>
- <table class="table-report">
- <thead>
- <tr>
- <th width="10%">序号</th>
- <th width="20%">中心</th>
- <th width="20%">区域</th>
- <th width="20%">广场名称</th>
- <th width="30%">异常原因</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>汇总:</td>
- <td>{{ centerTotal }}</td>
- <td>{{ zoneTotal }}</td>
- <td>{{ projectTotal }}</td>
- <td></td>
- </tr>
- <tr v-for="(td, index) in exceptionData" :key="index">
- <td>{{ (currentPage - 1) * pageSize + index + 1}}</td>
- <td>{{ td.center }}</td>
- <td>{{ td.zone }}</td>
- <td>{{ td.name }}</td>
- <td>{{ td.reason }}</td>
- </tr>
- </tbody>
- </table>
- <table id="tableReport" class="table-report" v-show="false">
- <thead>
- <tr>
- <th width="10%">序号</th>
- <th width="20%">中心</th>
- <th width="20%">区域</th>
- <th width="20%">广场名称</th>
- <th width="30%">异常原因</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(td, index) in storeExceptionData" :key="index">
- <td>{{ index + 1 }}</td>
- <td>{{ td.center }}</td>
- <td>{{ td.zone }}</td>
- <td>{{ td.name }}</td>
- <td>{{ td.reason }}</td>
- </tr>
- </tbody>
- </table>
- <!-- v-show="pageCount > 9" -->
- <Pagination
- :pageCount="pageCount"
- style="float: right; margin-top: 20px"
- :page="currentPage"
- :pageSize="pageSize"
- :pageCountShow="false"
- @change="currentChangeHandle"
- />
- </section>
- <div class="empty-text" v-show="!pageCount">暂无数据</div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- let myMaps = null;
- import { Loading, Dialog } from "element-ui";
- import { Tabs } from "meri-design";
- import { login } from "@/api/login";
- import {
- getPlazaInfoCount,
- querySystemCard,
- getCardList,
- queryEventStatus,
- getExceptionNum,
- } from "@/api/homePage";
- import { formatTime } from "@/utils/format.js";
- import { mapGetters } from "vuex";
- import { sortBy, cloneDeep } from "lodash";
- import moment from "moment";
- import L from "leaflet";
- import "leaflet-contextmenu";
- export default {
- data() {
- return {
- tipTimer:null,
- showSwitchTip:false,
- mapLayer:null,
- skinMode:'light',
- zoneTotal: 0,
- centerTotal: 0,
- projectTotal: 0,
- pageCount: 0,
- pageSize: 10,
- currentPage: 1,
- exceptionSum: 0,
- tabData: [],
- dialogBoxKey: 1,
- dialogVisible: false,
- testTree: true,
- exceptionData: [],
- storeExceptionData: [],
- activeName: "2",
- systemExceptionData: {},
- showMask: false, // 控制遮罩层的显示隐藏
- placeholder: "全部",
- crumbsHtml: [], // 导航数据
- zoneNames: {
- // 各个中心对应的拼音名称
- 东北: "dongbei",
- 西北: "xibei",
- 华北: "huabei",
- 华中: "huazhong",
- 华东: "huadong",
- 中南: "zhongnan",
- 西南: "xinan",
- 华南: "huanan",
- 东南: "dongnan",
- 其他: "Other",
- },
- provinceCities: {
- // 各个区域的的中心坐标 缩放级别
- 青岛: { center: [36.06667, 120.33333], zoom: 8 },
- 北京: { center: [39.604882122321174, 116.43660987308282], zoom: 8 },
- 天津: { center: [39.130593, 117.260892], zoom: 7 },
- 济南: { center: [36.4, 117.0], zoom: 7 },
- 上海: { center: [31.090574094954192, 121.46299249603001], zoom: 10 },
- 南京: { center: [32.05, 118.78333], zoom: 7 },
- 无锡: { center: [31.57, 120.3], zoom: 9 },
- 厦门: { center: [24.46667, 118.1], zoom: 9 },
- 宁波: { center: [29.52, 121.33], zoom: 8 },
- 杭州: { center: [30.323100460201648, 120.50270908851112], zoom: 9 },
- 福州: { center: [26.05, 119.18], zoom: 8 },
- 合肥: { center: [31.52, 117.17], zoom: 7 },
- 长沙: { center: [28.12, 112.59], zoom: 8 },
- 南昌: { center: [28.4, 115.55], zoom: 8 },
- 大连: { center: [39.98974718404572, 122.66034125625548], zoom: 8 },
- 沈阳: { center: [41.72213058512578, 122.93479223528372], zoom: 8 },
- 长春: { center: [42.88033923363183, 127.02188147691707], zoom: 8 },
- 东莞: { center: [23.644524198573688, 114.83844948916203], zoom: 8 },
- 南宁: { center: [22.48, 108.19], zoom: 7 },
- 广州: { center: [22.755920681486405, 112.01244459124548], zoom: 7 },
- 深圳: { center: [22.755920681486405, 112.01244459124548], zoom: 7 },
- 太原: { center: [37.54, 112.33], zoom: 7 },
- 武汉: { center: [31.147006308556566, 112.97898510653813], zoom: 7 },
- 郑州: { center: [34.46, 113.4], zoom: 7 },
- 哈尔滨: { center: [46.800059446787316, 128.40505022926592], zoom: 7 },
- 乌鲁木齐: { center: [43.45, 87.36], zoom: 8 },
- 呼和浩特: { center: [45.182036837015886, 116.82329020199336], zoom: 5 },
- 西安: { center: [36.08462129606931, 109.4527754086213], zoom: 7 },
- 兰州: { center: [36.08462129606931, 103.4527754086213], zoom: 7 },
- 银川: { center: [38.108627664321276, 102.36578196225639], zoom: 7 },
- 成都: { center: [30.24957724046765, 103.4647651330231], zoom: 7 },
- 昆明: { center: [25.903703303407667, 105.10972266685498], zoom: 8 },
- 重庆: { center: [29.35, 106.33], zoom: 8 },
- },
- zoneCenter: {
- // 各个区域的中心坐标
- dongbei: [43.161614, 124.396818], // 取自 东北运营中心 长春区域 四平万达广场
- xibei: [37.999781, 106.197518], // 西北 银川区域 吴忠万达广场 zoom 5
- huabei: [39.019075, 117.686953], // 华北中心 天津区域 天津塘沽万达广场
- huazhong: [33.999249, 113.872131], // 华中 郑州 许昌万达广场
- huadong: [31.477565, 119.923391], // 华东 南京 泰州
- zhongnan: [28.860875644389676, 114.55131767165491],
- huanan: [22.635788, 110.17923], // 华南 南宁 玉林万达广场
- dongnan: [26.657907, 119.545678], //东南 福州 宁德万达广场
- xinan: [28.749998, 104.648788], // 西南 成都 宜宾万达广场
- },
- legendList: [
- // 地图图例数据
- { color: "#F54E45", num: "≥200" },
- { color: "#F58300", num: "100-200" },
- { color: "#FFBA6B", num: "50-99" },
- { color: "#0091FF", num: "10-49" },
- { color: "#82C7FC", num: "1-9" },
- { color: "#EEEEEE", num: "0" },
- ],
- plazaInfoCount: {},
- systemList: [], // 系统列表数据
- currentZoneData: {}, // 当前分区
- currentDistrictData: [], //当前管理分区数据
- currentSelectedSys: {}, // 当前所选择的系统
- currentSysId: "", // 当前系统ID
- regulateDistrictData: [], // 分区数据
- dialogDistrictData: [], // 弹窗分区数据
- currentDialogCcode: "",
- currentDialogLevel: "",
- currentDialogTab: "",
- maintainList: [], // 专维 维保 第三方检测 数据
- barColors: {
- // // 专维 维保 第三方检测 颜色
- 0: "linear-gradient(to right, #369CF7 , #025BAA)", // 蓝色
- 1: "linear-gradient(to right, #F58300 , #F58300)", // 黄色
- 2: "linear-gradient(to right, rgba(32,100,96,0.6) , rgba(32,100,96))", // 红色
- },
- selectedZone: "",
- selectedDialogZone: "",
- loadingInstance: null,
- };
- },
- computed: {
- ...mapGetters(["plazas", "plazaId", "accessLevel", "userInfo"]),
- },
- watch: {
- /**
- * 监听皮肤模式
- * 皮肤模式切换后,存储用户名,皮肤模式
- */
- skinMode(newV){
- localStorage.setItem(`${this.userInfo.username}__skinMode`, newV)
- },
- },
- components: { Tabs, Dialog },
- created() {
- this.currentTime();
- /**
- * 使用localStorage中储存的, 当前用户的皮肤模式
- */
- let skinMode = localStorage.getItem(`${this.userInfo.username}__skinMode`)
- if(skinMode){
- this.skinMode = skinMode
- }
- },
- mounted() {
- this.getFrameworkTreeData();
- window.addEventListener("resize", this.reinitalMap, false);
- },
- methods: {
- delayToHideTip() {
- this.tipTimer = setTimeout(() => {
- this.showSwitchTip = false
- }, 500);
- },
- cancelHideTip(){
- clearTimeout(this.tipTimer);
- },
- /**
- *@description 切换皮肤
- */
- changeSkin() {
- const vm = this
- const mapDom = document.querySelector("#map .leaflet-marker-pane")
- const icons = mapDom.querySelectorAll(".leaflet-marker-icon")
- if (this.skinMode === 'light') {
- this.skinMode = 'dark'
- icons.forEach(dom => {
- dom.style.color = "#FFF"
- })
- } else {
- this.skinMode = 'light'
- icons.forEach(dom => {
- dom.style.color = "#333"
- })
- }
- if (this.mapLayer) {
- this.mapLayer.setStyle({
- weight: 1,
- color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
- fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
- fillOpacity: vm.skinMode === "light" ? 0.2 : 1
- })
- }
- },
- downloadExcel() {
- let tableContent = document.querySelector("#tableReport").outerHTML;
- let blob = new Blob([tableContent], {
- type: "text/plain; charset=utf-8",
- });
- blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
- let link = window.URL.createObjectURL(blob);
- let a = document.createElement("a");
- a.download = "异常数据表格.xls";
- a.href = link;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- },
- shutMaskPanel() {
- this.dialogVisible = false;
- },
- currentChangeHandle(page) {
- this.currentPage = page.newPage;
- this.exceptionData = this.storeExceptionData.slice(
- (page.newPage - 1) * this.pageSize,
- page.newPage * this.pageSize
- );
- },
- selectDialogProject(id, district) {
- let { ccode, level } = district;
- this.currentDialogCcode = ccode;
- this.currentDialogLevel = level;
- this.fetchExceptionNum(
- this.currentSysId,
- this.currentDialogTab,
- ccode,
- level
- );
- },
- tabChange(tab) {
- this.currentDialogTab = tab.id;
- this.fetchExceptionNum(
- this.currentSysId,
- tab.id,
- this.selectedDialogZone,
- this.currentDialogLevel
- );
- },
- fetchExceptionNum(smsxt, categoryCode, ccode, level) {
- let params = { getParams: { smsxt, categoryCode, ccode, level } };
- getExceptionNum(params).then((res) => {
- if (res.result === "success") {
- let vm = this;
- let flattenArr = [];
- this.centerTotal = 0;
- this.zoneTotal = 0;
- this.projectTotal = 0;
- recursionData(res.data);
- let finalHandledArr = [];
- flattenArr.forEach((item) => {
- let path = item.path.split("/");
- item.classExList.forEach((each) => {
- let obj = {};
- obj.center = path[0];
- obj.zone = path[1];
- obj.name = item.name;
- obj.reason = each.description;
- finalHandledArr.push(obj);
- });
- });
- this.storeExceptionData = cloneDeep(finalHandledArr);
- this.exceptionData = this.storeExceptionData.slice(0, this.pageSize);
- this.currentPage = 1;
- this.pageCount = finalHandledArr.length;
- function recursionData(data, parent) {
- data.forEach((item, index) => {
- let level = item.level;
- if (level === 2) {
- vm.centerTotal++;
- } else if (level === 3) {
- vm.zoneTotal++;
- } else if (level === 0) {
- vm.projectTotal++;
- }
- item.name = item.cname;
- item.id = item.ccode;
- if (level === 0) {
- flattenArr.push(item);
- }
- if (parent) {
- item.path = parent + "/" + item.cname;
- }
- let children = item.children;
- if (Array.isArray(children) && children.length) {
- recursionData(
- children,
- level == 1 ? "" : item.path ? item.path : item.cname
- );
- }
- });
- }
- }
- });
- },
- expandRestItems(item, index) {
- this.systemList.forEach((eq) => {
- if (eq.smsxt !== item.smsxt) {
- eq.expand = false;
- }
- eq.selected = false;
- });
- item.selected = true;
- item.expand = !item.expand;
- },
- showToolTip(index) {
- this.maintainList.forEach((item) => {
- item.showToolTip = false;
- });
- this.maintainList[index].showToolTip = true;
- },
- hideToolTip(index) {
- this.maintainList[index].showToolTip = false;
- },
- reinitalMap() {
- if (myMaps) {
- myMaps.invalidateSize(true);
- }
- },
- imgSrc(code) {
- return require("../../assets/images/icons/" + code + ".png");
- },
- /**
- * 跳转到 当月说明书更新项目数量
- */
- navToIntroduceUpdate() {
- // this.$router.push({path:''})
- },
- /**
- * 跳转到 上线管理说明书数量
- */
- navToManageNumber() {
- // this.$router.push({path:''})
- },
- /**
- * 跳转到 当月重点关注事项项目数量
- */
- navToFocusItems() {
- // this.$router.push({path:''})
- },
- /**
- * @Description 根据数据创建导航路径
- * @Param data 当前点击的项
- */
- createNavpathByData(data) {
- if (data.path) {
- let pathArr = data.path.split("/");
- let newArr = [];
- pathArr.forEach((item) => {
- newArr.push(item.split("&"));
- });
- this.crumbsHtml = newArr;
- if (data.level === 1) {
- this.currentZoneData = data;
- this.crumbsHtml = [];
- } else if (data.level === 0) {
- this.crumbsHtml.pop();
- this.currentZoneData = this.getDataByCityCcode(data.cparentcode);
- } else {
- this.currentZoneData = data;
- }
- } else {
- this.crumbsHtml = [];
- this.currentZoneData = this.regulateDistrictData[0];
- }
- },
- /**
- * @Description 通过导航进行导航
- * @Param id 所选区域的id
- * @Param index 点击项的序号
- */
- navgateFromCrumbs(id, index) {
- let data = this.getDataByCityCcode(id); // 根据
- if (!data) return;
- let level = data.level; //1集团 2中心 3区域 0广场
- if (level === this.regulateDistrictData[0].level) {
- this.selectedZone = "";
- }
- this.currentLevel = level;
- this.currentZoneData = data;
- this.getEventStatusData(level, data.ccode);
- this.queryPlazaInfoCount(data.ccode, data.level, data.cid);
- this.getSystemList(data.ccode, data.level);
- if (level === 1) {
- this.pantGroupMap(data, this.currentSysId);
- } else if (level === 2) {
- this.pantZonesMap(data, this.currentSysId);
- } else {
- this.pantProjectsMap(data, this.currentSysId);
- }
- if (level === 1) {
- this.crumbsHtml = "";
- } else {
- this.crumbsHtml = this.crumbsHtml.splice(0, index + 1);
- }
- },
- /**
- * @Description 分区树 点击选择分区
- * @Param ids 返回选中项的id
- * @Param data 返回选中项的数据
- */
- selectProjectItem(ids) {
- let data = this.getDataByCityCcode(ids);
- if (data.level !== 0) {
- // level=0时 plazaId必填
- this.currentLevel = data.level;
- this.queryPlazaInfoCount(data.ccode, data.level);
- this.getEventStatusData(this.currentLevel, data.ccode);
- this.getSystemList(data.ccode, data.level);
- } else {
- let parentNode = this.getDataByCityCcode(data.cparentcode);
- this.currentLevel = parentNode.level;
- this.selectedZone = parentNode.ccode;
- this.queryPlazaInfoCount(parentNode.ccode, parentNode.level);
- this.getEventStatusData(parentNode.level, parentNode.ccode);
- this.getSystemList(parentNode.ccode, parentNode.level);
- this.pantProjectsMap(parentNode, this.currentSysId);
- }
- this.createNavpathByData(data);
- let level = data.level; // //1集团 2中心 3区域 0广场
- if (level === 1) {
- this.pantGroupMap(data, this.currentSysId);
- } else if (level === 2) {
- this.pantZonesMap(data, this.currentSysId);
- } else if (level === 3) {
- this.pantProjectsMap(data, this.currentSysId);
- } else {
- // 点击项为广场时 直接跳转到详情页 地图不用响应
- let pathData = { fromGroup: "true" };
- let routeData = this.$router.resolve({
- name: "/home/homePage",
- });
- window.open(routeData.href, "_blank");
- window.__fromGroupPage = {
- level: 0,
- plazaName: data.cname,
- plazaId: data.ccode,
- };
- this.$store.commit("SETPLAZENAME", data.cname);
- localStorage.setItem("PLAZAID", data.ccode);
- }
- },
- /**
- * @Description 查询项目信息统计数量
- * @Param ccode 管理分区编码 必填
- * @Param level 1集团 2中心 3区域 0广场 必填
- * @Param plazaId level=0时 必填
- */
- queryPlazaInfoCount(ccode, level, plazaId) {
- let params = {};
- if (level === 0) {
- params = { getParams: { ccode, level } };
- } else {
- params = { getParams: { ccode, level, plazaId } };
- }
- getPlazaInfoCount(params).then((res) => {
- if (res.result === "success") {
- if (res.data) {
- this.plazaInfoCount = res.data;
- }
- }
- });
- },
- /**
- * @Description 根据指定id 查找数据
- * @Param id 要查找数据的id
- */
- getDataByCityCcode(id) {
- return recursionFindData(this.currentDistrictData, id);
- let target = null;
- function recursionFindData(data, id) {
- data.forEach((item) => {
- if (item.ccode === id) {
- target = item;
- } else {
- if (item.children && item.children.length) {
- recursionFindData(item.children, id);
- }
- }
- });
- if (target) {
- return target;
- }
- }
- },
- /**
- * @Description 获取分区树数据
- * @method param empty
- */
- getFrameworkTreeData() {
- login({
- returnTree: true,
- }).then((res) => {
- if (res.result === "success") {
- recursionData(res.treeData);
- let data = res.treeData[0];
- let level = data.level;
- this.currentZoneData = data;
- this.currentLevel = level; // 初始化的时候判断是哪一级 //1集团 2中心 3区域 0广场
- data.open = true; // 默认展开第一级
- this.regulateDistrictData = [data];
- this.dialogDistrictData = cloneDeep(this.regulateDistrictData);
- let firstNode = this.dialogDistrictData[0];
- this.selectedDialogZone = firstNode.ccode;
- this.selectedZone = firstNode.ccode;
- this.currentDialogCcode = firstNode.ccode;
- this.currentDialogLevel = firstNode.level;
- this.currentDistrictData = res.treeData;
- this.getSystemList(data.ccode, level).then((res) => {
- this.initMap();
- });
- this.getEventStatusData(level, data.ccode);
- if (level === 0) {
- // level=0时 plazaId必填
- this.queryPlazaInfoCount(data.ccode, level, data.ccode);
- } else {
- this.queryPlazaInfoCount(data.ccode, level);
- }
- }
- function recursionData(data, parent) {
- data.forEach((item) => {
- item.name = item.cname;
- item.id = item.ccode;
- if (parent) {
- item.path = parent + "/" + (item.cname + "&" + item.ccode);
- }
- let children = item.children;
- if (Array.isArray(children) && children.length) {
- recursionData(
- children,
- item.path ? item.path : item.cname + "&" + item.ccode
- );
- }
- });
- }
- });
- },
- /**
- * @Description 展开 维保 第三方检测 专维
- * @Param item 展开的某一项
- */
- toggerPanel(item) {
- // expand 0 初始状态 1 展开状态 2 隐藏状态
- if (item.expand === 0 || item.expand === 2) {
- item.expand = 1; // 展开
- this.maintainList.forEach((option) => {
- if (option.title !== item.title) {
- option.expand = 2; // 隐藏
- }
- });
- } else {
- this.maintainList.forEach((option) => {
- option.expand = 0; // 回到初始状态
- });
- }
- },
- /**
- * @Description 计算 维保/第三方检测/专维 三个模块的高度
- * @Param item 数据中的每一项
- */
- panelStyle(item) {
- // expand 0 初始状态 1 展开状态 2 隐藏状态
- if (item.expand === 0) {
- return { height: `calc((100% - 2rem) / 3)` };
- } else if (item.expand === 1) {
- return { height: "calc(100% - 14.2rem)" };
- } else {
- return { height: "6.6rem" };
- }
- },
- /**
- *@Description 根据数据计算维保/第三方检测/专维各自颜色条的长度 维保、第三方检测是用即将逾期数据判断;专维是如果有逾期未完成直接标红,如果没有,按照即将逾期的数量显示颜色
- *@Param item 某一项的数据
- *@Param title 标题
- */
- barStyle(item, title) {
- let bg = "";
- // let type = this.selectColorByNum(item.due_num, item.total)
- let ratio = 0;
- if (title === "专维") {
- item.overdue_unfinished = item.overdue_unfinished || 0;
- if (item.overdue_unfinished > 0 || item.due_num > 0) {
- bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
- }
- // else {
- // bg = this.barColors[type]
- // }
- ratio = ((item.overdue_unfinished + item.due_num) / item.total) * 100;
- } else {
- if (item.due_num > 0) {
- bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
- }
- // bg = this.barColors[type]
- ratio = (item.due_num / item.total) * 100;
- }
- return {
- width: ratio + "%",
- backgroundImage: bg,
- };
- },
- /**
- * @Description 根据数据来返 维保/第三方检测/专维 三个模块中显示条的颜色
- * @Param num 即将逾期数 / 逾期未完成数
- * @Param total 总数
- */
- selectColorByNum(num, total) {
- let devide = num / total;
- if ((num > 1 && num <= 24) || (devide > 0.1 && devide <= 0.2)) {
- return 0;
- } else if ((num > 24 && num <= 49) || (devide > 0.2 && devide <= 0.5)) {
- return 1;
- } else {
- return 2;
- }
- },
- /**
- * @Description 根据数据 判定地图上图标的显示显示颜色
- * @Param data 作为判断的数据
- */
- paintColorByData(data) {
- if (data >= 200) {
- return "level5";
- } else if (data >= 100 && data < 200) {
- return "level4";
- } else if (data >= 50 && data < 100) {
- return "level3";
- } else if (data >= 10 && data < 50) {
- return "level2";
- } else if (data >= 1 && data < 10) {
- return "level1";
- } else {
- return "level0";
- }
- },
- /**
- * @Description 显示当期时间
- */
- currentTime() {
- this.times = moment().format("YYYY.MM.DD HH:mm");
- setTimeout(this.currentTime, 1000);
- },
- /**
- * @Description 格式化时间
- * @method param empty
- */
- formatter(str, arrv) {
- if (str && arrv) {
- const Objs = arrv.find((e) => e && e.plazaid == str);
- return Objs ? Objs.plazaname : "--";
- } else {
- return "";
- }
- },
- /**
- * @Description 获取集团 中心 区域 项目 数据树数据
- * @method param ccode 管理分区编码 集团首页必填
- * @method param level 1集团 2中心 3区域 0广场 集团首页必填
- * @method param plazaId 广场id 如果是广场则此参数必填 其他情况下非必填
- */
- getSystemList(ccode, level) {
- let params = null;
- if (level === 0) {
- params = { getParams: { plazaId: ccode, level } };
- } else {
- params = { getParams: { ccode, level } };
- }
- return new Promise((resolve, reject) => {
- getCardList(params).then((res) => {
- if (res.result == "success") {
- let result = res.data;
- if (result && Array.isArray(result)) {
- result.forEach((item) => {
- let list = item.assetTypeList;
- if (list) {
- if (list.length > 3) {
- item.hasArrow = true;
- item.assetTypeList = list.splice(0, 3);
- item.restAssetTypeList = list;
- item.showColor = list.some((item) => {
- return item.is_exception_num > 0;
- });
- } else {
- item.hasArrow = false;
- item.restAssetTypeList = [];
- }
- }
- });
- res.data.forEach((item) => {
- item.selected = false;
- item.expand = false;
- });
- res.data[0].selected = true;
- this.currentSelectedSys = res.data[0];
- this.currentSysId = res.data[0].smsxt;
- this.systemList = res.data;
- resolve(res);
- }
- }
- });
- });
- },
- /**
- * @Description 获取事项状态统计数据
- * @Param ccode 管理分区编码 必填
- * @Param level 1集团 2中心 3区域 0广场 必填
- */
- getEventStatusData(level, ccode) {
- let params = {
- getParams: {
- level,
- ccode,
- },
- };
- queryEventStatus(params).then((res) => {
- if (res.result === "success") {
- let data = res.data;
- data[0].forEach((item) => {
- if (
- typeof item.rptGlsmsStatistics.overdue_unfinished === "undefined"
- ) {
- item.rptGlsmsStatistics.overdue_unfinished = 0;
- }
- });
- let orginalObj = {
- 1: { title: "维保", data: [], expand: 0, showToolTip: false },
- 2: { title: "第三方检测", data: [], expand: 0, showToolTip: false },
- 0: { title: "专维", data: [], expand: 0, showToolTip: false },
- };
- let arr = new Array(3);
- for (let key in data) {
- let obj = {};
- let sortData = data[key];
- if (data.hasOwnProperty(key)) {
- // 维保,第三方检测排名按照即将逾期任务数量从多到少排序,多的靠前。专维按照 逾期未完成 + 即将逾期任务数据排序,多的靠前
- // due_num 即将逾期 unfinished 逾期未完成
- if (key == "0") {
- sortData.forEach((item) => {
- item.sort =
- item.rptGlsmsStatistics.overdue_unfinished +
- item.rptGlsmsStatistics.unfinished;
- });
- } else {
- sortData.forEach((item) => {
- item.sort = item.rptGlsmsStatistics.due_num;
- });
- }
- orginalObj[key].data = sortBy(sortData, (option) => {
- return option.sort;
- }).reverse();
- }
- }
- arr[0] = orginalObj[1];
- arr[1] = orginalObj[2];
- arr[2] = orginalObj[0];
- this.maintainList = arr;
- }
- });
- },
- /**
- *@Description 初始化地图
- */
- initMap() {
- let that = this;
- myMaps = L.map("map", {
- center: new L.LatLng(38, 103),
- zoom: 4,
- crs: L.CRS.EPSG3857,
- zoomControl: false,
- boxZoom: false,
- attributionControl: false,
- contextmenu: true,
- contextmenuWidth: 140,
- minZoom: 4,
- maxZoom: 10,
- closePopupOnClick: true,
- doubleClickZoom: false,
- wheelPxPerZoomLevel: 20,
- // scrollWheelZoom:false,
- // dragging: false,
- });
- let JsonData = require("../../assets/geoData/china.json");
- this.mapLayer = L.geoJSON(JsonData.features, {
- style: function () {
- return {
- weight: 1,
- color: "#B3D2FF",
- fillColor: "#DEECFF",
- };
- },
- }).addTo(myMaps);
- if (this.currentLevel === 1) {
- //1集团
- this.pantGroupMap(this.currentZoneData, this.currentSysId);
- } else if (this.currentLevel === 2) {
- // 2中心
- this.pantZonesMap(this.currentZoneData, this.currentSysId);
- } else if (this.currentLevel === 3) {
- // 3区域
- this.pantProjectsMap(this.currentZoneData, this.currentSysId);
- }
- },
- /**
- * @Description 清空地图 并添加全国底图
- */
- clearAllLayers() {
- const vm = this
- myMaps.eachLayer(function (layer) {
- myMaps.removeLayer(layer);
- });
- let JsonData = require("../../assets/geoData/china.json");
- this.mapLayer = L.geoJSON(JsonData.features, {
- style: function () {
- return {
- weight: 1,
- color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
- fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
- fillOpacity: vm.skinMode === "light" ? 0.2 : 1
- };
- },
- }).addTo(myMaps);
- },
- /**
- * @Description 移动地图到指定中心
- */
- flyTo(center, zoom) {
- myMaps.setView(center, zoom);
- },
- /**
- *@description 打开弹窗
- */
- openMaskPanel(system) {
- let target = this.getDataByCityCcode(this.selectedZone)
- console.log('target',target)
- if (target) {
- this.currentDialogLevel = target.level
- this.currentLevel = target.level
- }
- this.currentSysId = system.smsxt;
- this.tabData = [];
- this.selectedDialogZone = this.selectedZone;
- system.restAssetTypeList.forEach((item) => {
- if (item.is_exception_num > 0) {
- this.tabData.push({
- name: item.category_name,
- id: item.category_code,
- });
- }
- });
- system.assetTypeList.forEach((item) => {
- if (item.is_exception_num > 0) {
- this.tabData.push({
- name: item.category_name,
- id: item.category_code,
- });
- }
- });
- if (this.tabData.length) {
- this.activeName = this.tabData[0].id;
- this.currentDialogTab = this.activeName;
- this.dialogVisible = true;
- }
- this.fetchExceptionNum(
- system.smsxt,
- this.activeName,
- this.selectedDialogZone,
- this.currentLevel
- );
- },
- /**
- * @Description 切换系统时 地图响应
- * @Params system:当前选择的系统
- */
- getInfoOfProject(system) {
- this.systemList.forEach((item) => {
- item.selected = false;
- });
- system.selected = true;
- this.currentSelectedSys = system;
- this.currentSysId = system.smsxt;
- //1集团 2中心 3区域 0广场
- this.clearAllLayers();
- if (this.currentLevel === 1) {
- this.pantGroupMap(this.currentZoneData, system.smsxt);
- } else if (this.currentLevel === 2) {
- this.pantZonesMap(this.currentZoneData, system.smsxt);
- } else if (this.currentLevel === 3) {
- this.pantProjectsMap(this.currentZoneData, system.smsxt);
- }
- },
- /**
- * @Description 用于绘制集团级别的地图
- * @Param data 数据
- */
- pantGroupMap(data) {
- this.clearAllLayers();
- myMaps.setView([38, 103], 4);
- let that = this;
- let groupLayer = new L.layerGroup();
- let promiseAll = [];
- let layerArr = [];
- this.loadingInstance = Loading.service({
- target: "#map",
- fullscreen: false,
- text: "数据正在加载...",
- background: "rgba(255,255,255,.5)",
- });
- data.children.forEach((item) => {
- let promise = new Promise((resolve, reject) => {
- let params = {
- getParams: {
- smsxt: this.currentSysId,
- level: 2, // 中心
- ccode: item.ccode,
- },
- };
- querySystemCard(params).then((res) => {
- if (res.result === "success") {
- let num = 0;
- let name = item.cname.substr(0, 2);
- if (res.data) {
- let equip = res.data[0];
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach((item) => {
- if (item.is_exception_num) {
- num += item.is_exception_num;
- }
- });
- layerArr.push({
- name,
- num,
- list: equip,
- data: item,
- fullName: item.cname,
- });
- }
- resolve(res);
- }
- }
- });
- });
- promiseAll.push(promise);
- });
- Promise.all(promiseAll).then((result) => {
- this.loadingInstance.close();
- if (this.currentLevel === 1) {
- layerArr.forEach((item) => {
- let zone = this.zoneNames[item.name];
- let center = this.zoneCenter[zone];
- let contentHtml = that.createPopupHtmlContent(
- item.list.assetTypeList,
- item.fullName
- );
- if (contentHtml) {
- this.createPointOnMap(
- item.num,
- groupLayer,
- contentHtml,
- center,
- item.data,
- item.name,
- "group",
- 4
- );
- }
- });
- }
- });
- groupLayer.addTo(myMaps);
- },
- /**
- * @Description 用于绘制中心地图
- * @Param data 数据
- */
- pantZonesMap(data) {
- let that = this;
- this.clearAllLayers();
- let name = data.cname.substr(0, 2);
- let zone = this.zoneNames[name];
- let zoom, inner, outer, offset;
- if (zone === "huadong") {
- zoom = 8;
- } else if (zone == "xibei") {
- zoom = 5;
- } else {
- zoom = 6;
- }
- this.flyTo(this.zoneCenter[zone], zoom);
- let groupLayer = new L.layerGroup();
- let promiseAll = [];
- let layerArr = [];
- this.loadingInstance = Loading.service({
- target: "#map",
- fullscreen: false,
- text: "数据正在返回...",
- background: "rgba(255,255,255,.5)",
- });
- data.children.forEach((item) => {
- let promise = new Promise((resolve, reject) => {
- let params = {
- getParams: {
- smsxt: this.currentSysId,
- level: 3, // 区域
- ccode: item.ccode,
- },
- };
- querySystemCard(params).then((res) => {
- if (res.result === "success") {
- let name = item.cname.split("区域")[0];
- let num = 0;
- if (res.data) {
- let equip = res.data[0];
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach((item) => {
- if (item.is_exception_num) {
- num += item.is_exception_num;
- }
- });
- layerArr.push({
- name,
- num,
- list: equip,
- data: item,
- fullName: item.cname,
- });
- }
- }
- resolve(res);
- }
- });
- });
- promiseAll.push(promise);
- });
- Promise.all(promiseAll).then((result) => {
- this.loadingInstance.close();
- if (this.currentLevel === 2) {
- layerArr.forEach((item) => {
- let city = that.provinceCities[item.name];
- let center = city.center;
- let contentHtml = that.createPopupHtmlContent(
- item.list.assetTypeList,
- item.fullName
- );
- if (contentHtml) {
- that.createPointOnMap(
- item.num,
- groupLayer,
- contentHtml,
- center,
- item.data,
- item.data.cname,
- "zone",
- zoom
- );
- }
- });
- }
- });
- groupLayer.addTo(myMaps);
- },
- /**
- * @Description 用于绘制项目的点
- * @Param data 数据
- */
- pantProjectsMap(data) {
- this.clearAllLayers();
- let name = data.cname.split("区域")[0];
- let geo = this.provinceCities[name];
- let that = this;
- let promiseAll = [];
- let layerArr = [];
- let groupLayer = new L.layerGroup();
- this.flyTo(geo.center, geo.zoom);
- this.loadingInstance = Loading.service({
- target: "#map",
- fullscreen: false,
- text: "数据正在返回...",
- background: "rgba(255,255,255,.5)",
- });
- data.children.forEach((item) => {
- let pormise = new Promise((resolve, reject) => {
- let params = {
- getParams: {
- plazaId: item.cid, // 所查对象是广场的时候plazaId必传
- smsxt: this.currentSysId,
- level: 0, // 广场
- ccode: item.ccode,
- },
- };
- querySystemCard(params).then((res) => {
- if (res.result === "success") {
- let num = 0;
- if (res.data && item.latitude && item.longitude) {
- let equip = res.data[0];
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach((item) => {
- if (item.is_exception_num) {
- num += item.is_exception_num;
- }
- });
- }
- layerArr.push({
- name,
- num,
- list: equip,
- data: item,
- fullName: item.cname,
- });
- }
- resolve(res);
- }
- groupLayer.addTo(myMaps);
- });
- });
- promiseAll.push(pormise);
- });
- Promise.all(promiseAll).then((result) => {
- this.loadingInstance.close();
- if (this.currentLevel === 3) {
- layerArr.forEach((item) => {
- let center = [item.data.latitude, item.data.longitude];
- let contentHtml = that.createPopupHtmlContent(
- item.list.assetTypeList,
- item.fullName
- );
- if (contentHtml) {
- that.createPointOnMap(
- item.num,
- groupLayer,
- contentHtml,
- center,
- item.data,
- item.data.cname,
- "project",
- geo.zoom
- );
- }
- });
- }
- });
- groupLayer.addTo(myMaps);
- },
- /**
- * @Description 用于绘制广场的点
- * @Param num 当前点的逾期设备数
- * @Param groupLayer 地图图层
- * @Param contentHtml 弹出框的Html内容
- * @Param center 该点坐标
- * @Param data 该点数据
- * @Param name 改点名称
- * @Param type 地图级别 group / zone / project 集团 / 中心 / 区域
- * @param zoom 缩放级别
- */
- createPointOnMap(
- num,
- groupLayer,
- contentHtml,
- center,
- data,
- name,
- type,
- zoom
- ) {
- let vm =this
- let color = this.paintColorByData(num);
- let textIcon = L.divIcon({
- html: type == "group" ? name : `<div>${name}</div>`,
- className: vm.skinMode==='light'? "my-leaflet-div-icon":"dark-my-leaflet-div-icon",
- iconSize: 30,
- });
- let circleIcon = L.icon({
- iconUrl: require(`../../assets/images/icons/${color}.png`),
- iconSize: [24, 24],
- iconAnchor: [16, 38],
- });
- if (color && center) {
- let popup = L.popup({ closeOnClick: true, offset: [-3, -20] })
- .setLatLng(center)
- .setContent(contentHtml);
- let marker = L.marker(center, { icon: textIcon }).addTo(groupLayer);
- let marker2 = L.marker(center, { icon: circleIcon }).addTo(groupLayer);
- let feaureGroup = L.featureGroup([marker, marker2]);
- popup.on('add' , (ev) => {
- let popupDom = document.querySelectorAll('.leaflet-mypopup-content')[0]
- let tipDom = document.querySelectorAll('.leaflet-popup-tip')[0]
- if (this.skinMode === 'light') {
- popupDom.setAttribute('class', 'leaflet-mypopup-content')
- tipDom.style.background="white"
- } else {
- popupDom.setAttribute('class', 'dark-leaflet-mypopup-content')
- tipDom.style.background="#09173E"
- }
- })
- marker2.on("mouseover", (ev) => {
- popup.openOn(myMaps);
- });
- marker2.on("mouseout", (ev) => {
- myMaps.closePopup(popup);
- });
- feaureGroup.on("click", (ev) => {
- this.currentZoneData = data;
- this.currentLevel = data.level;
- if (data.level !== 0) {
- this.getEventStatusData(data.level, data.ccode);
- this.queryPlazaInfoCount(data.ccode, data.level);
- this.getSystemList(data.ccode, data.level);
- }
- if (type !== "project") {
- groupLayer.clearLayers();
- }
- this.createNavpathByData(data);
- if (type === "group") {
- this.pantZonesMap(data, this.currentSysId);
- }
- if (type === "zone") {
- this.pantProjectsMap(data, this.currentSysId);
- }
- if (type === "project") {
- let routeData = this.$router.resolve({
- name: "/home/homePage",
- });
- window.open(routeData.href, "_blank");
- window.__fromGroupPage = {
- level: 0,
- plazaName: data.cname,
- plazaId: data.ccode,
- };
- this.$store.commit("SETPLAZENAME", data.cname);
- localStorage.setItem("PLAZAID", data.ccode);
- }
- });
- }
- },
- /**
- *@Description 生成弹出框HTML
- */
- createPopupHtmlContent(data, name) {
- if (Array.isArray(data) && data.length) {
- let that = this;
- let html = "";
- let len = data.length;
- for (let i = 0; i < len; i++) {
- let item = data[i];
- if (item.is_exception_num) {
- html += `<div class="line">
- <span>${item.category_name}</span>
- <span>${item.asset_num || "--"}${
- item.category_name === "屋面logo"
- ? "个"
- : item.category_name === "玻璃护栏"
- ? "段"
- : "台"
- }</span>
- <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>
- </div>`;
- } else {
- html += `<div class="line">
- <span>${item.category_name}</span>
- <span>${item.asset_num || "--"}${
- item.category_name === "屋面logo"
- ? "个"
- : item.category_name === "玻璃护栏"
- ? "段"
- : "台"
- }</span>
- </div>`;
- }
- }
- return `<div class="leaflet-mypopup-content" }"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`;
- } else {
- return "";
- }
- },
- },
- beforeDestroy() {
- window.removeEventListener("resize", this.reinitalMap);
- },
- };
- </script>
- <style scoped lang="less">
- @import "../../assets/css/dark.less";
- @import "../../assets/css/light.less";
- .dark-my-leaflet-div-icon{
- color: white;
- }
- @keyframes selectDownUpExtendTop {
- from {
- transform: translateY(8px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- .selectDownUpExtendTop-enter-active {
- animation: selectDownUpExtendTop 0.3s;
- }
- .selectDownUpExtendTop-leave-active {
- animation: selectDownUpExtendTop 0.3s reverse;
- }
- /deep/ .p-tree-single-panel {
- height: 400px !important;
- }
- /deep/ .el-dialog__header {
- display: none !important;
- }
- /deep/ .el-dialog__body {
- padding-top: 0;
- }
- </style>
|