1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471 |
- <template>
- <div class='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>
- </div>
- </div>
- <div class='home-right'>
- <span style='color:#8D9399'>
- <span class='span3'>{{times}}</span>
- </span>
- </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
- width='280'
- :hideClear='false'
- :isReadOnly='false'
- :caption='"选择管理分区"'
- :data='regulateDistrictData'
- placeholder="全部"
- :disabled='false'
- @change='selectProjectItem'
- />
- </section>
- </nav>
- <main class='container'>
- <section class='system-general'>
- <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'>
- <div :class='["img", item.selected ? "selected":""]'>
- <img :src='imgSrc(item.smsxt)' />
- </div>
- <span>{{item.smsxtname}}</span>
- </div>
- <div class='system-equipments' v-if='item.assetTypeList'>
- <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
- <div class="title">
- <P>{{equip.category_name}}</p>
- <span :style="{right: equip.is_exception_num > 99 ? '-2rem' : equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
- </div>
- <p>
- <span>{{equip.asset_num}}</span>
- <span>台</span>
- </p>
- </div>
- </div>
- <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' @click='navToManageNumber'>
- <div class='img'>
- <img src='../../assets/images/icons/ratio.png' />
- </div>
- <p>上线管理说明书数量</p>
- <strong>{{plazaInfoCount.upwcCount}}</strong>
- </div>
- <div class='card' @click='navToIntroduceUpdate'>
- <div class='img'>
- <img src='../../assets/images/icons/audit.png' />
- </div>
- <p>当月说明书更新项目数量</p>
- <strong>{{plazaInfoCount.rptChangeCount}}</strong>
- </div>
- <div class='card' @click='navToFocusItems'>
- <div class='img'>
- <img src='../../assets/images/icons/contract.png' />
- </div>
- <p>当月重点关注事项项目数量</p>
- <strong>{{plazaInfoCount.zhsxChangeCount}}</strong>
- </div>
- </section>
- <section class='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' :style='panelStyle(item)' v-for='(item , index) in maintainList' :key='index'>
- <h4 class='section-title' @click='toggerPanel(item)'>{{item.title}}<img @mouseenter="showToolTip(index, item.title)" @mouseleave="hideToolTip(index, item.title)" src="../../assets/images/icons/notice.png" /></h4>
- <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'>
- <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.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(-90deg)" : "rotate(90deg)"}'
- @click='toggerPanel(item)'
- >
- <img src='../../assets/images/icons/right.png' />
- </div>
- </div>
- </section>
- </section>
- </main>
- </div>
- </template>
- <script>
- let myMaps = null
- import { login } from '@/api/login'
- import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus } from '@/api/homePage'
- import { formatTime } from '@/utils/format.js'
- import { mapGetters } from 'vuex'
- import { sortBy } from 'lodash'
- import moment from 'moment'
- import L from 'leaflet'
- import 'leaflet-contextmenu'
- export default {
- data() {
- return {
- crumbsHtml: [], // 导航数据
- zoneNames: { // 各个中心对应的拼音名称
- "东北": 'dongbei',
- "西北": 'xibei',
- "华北": 'huabei',
- "华中": 'huazhong',
- "华东": 'huadong',
- "中南": 'zhongnan',
- "西南": 'xinan',
- "华南": 'huanan',
- "东南": 'dongnan',
- "其他": 'Other'
- },
- provinceCities: { // 各个区域的的省会城市 坐标 缩放级别
- "青岛": { province: 'shandong', center: [36.06667, 120.33333], zoom: 8 },
- "北京": { province: 'beijing', center: [39.604882122321174, 116.43660987308282], zoom: 8 },
- "天津": { province: 'tianjin', center: [39.130593, 117.260892], zoom: 7 },
- "济南": { province: 'shandong', center: [36.4, 117.0], zoom: 7 },
- "上海": { province: 'shanghai', center: [31.090574094954192, 121.46299249603001], zoom: 10 },
- "南京": { province: 'jiangsu', center: [32.05, 118.78333], zoom: 7 },
- "无锡": { province: 'jiangsu', center: [31.57, 120.3], zoom: 9 },
- "厦门": { province: 'fujian', center: [24.46667, 118.1], zoom: 9 },
- "宁波": { province: 'zhejiang', center: [29.52, 121.33], zoom: 8 },
- "杭州": { province: 'zhejiang', center: [30.323100460201648, 120.50270908851112], zoom: 9 },
- "福州": { province: 'fujian', center: [26.05, 119.18], zoom: 8 },
- "合肥": { province: 'anhui', center: [31.52, 117.17], zoom: 7 },
- "长沙": { province: 'hunan', center: [28.12, 112.59], zoom: 8 },
- "南昌": { province: 'jiangxi', center: [28.4, 115.55], zoom: 8 },
- "大连": { province: 'liaoning', center: [39.98974718404572, 122.66034125625548], zoom: 8 },
- "沈阳": { province: 'liaoning', center: [41.72213058512578, 122.93479223528372], zoom: 8 },
- "长春": { province: 'jilin', center: [42.88033923363183, 127.02188147691707], zoom: 8 },
- "东莞": { province: 'guangdong', center: [23.644524198573688, 114.83844948916203], zoom: 8 },
- "南宁": { province: 'guangxi', center: [22.48, 108.19], zoom: 7 },
- "广州": { province: 'guangdong', center: [22.755920681486405, 112.01244459124548], zoom: 7 },
- "太原": { province: 'shanxi1', center: [37.54, 112.33], zoom: 7 },
- "武汉": { province: 'hubei', center: [31.147006308556566, 112.97898510653813], zoom: 7 },
- "郑州": { province: 'henan', center: [34.46, 113.4], zoom: 7 },
- "哈尔滨": { province: 'heilongjiang', center: [46.800059446787316, 128.40505022926592], zoom: 7 },
- "乌鲁木齐": { province: 'xinjiang', center: [43.45, 87.36], zoom: 8 },
- "呼和浩特": { province: 'neimenggu', center: [45.182036837015886, 116.82329020199336], zoom: 5 },
- "西安": { province: 'shanxi2', center: [36.08462129606931, 109.4527754086213], zoom: 7 },
- "银川": { province: 'ningxia', center: [38.108627664321276, 102.36578196225639], zoom: 7 },
- "成都": { province: 'sichuan', center: [30.24957724046765, 103.4647651330231], zoom: 7 },
- "昆明": { province: 'yunnan', center: [25.903703303407667, 105.10972266685498], zoom: 8 },
- "重庆": { province: 'chongqing', 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: [32.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: [], // 分区数据
- maintainList: [], // 专维 维保 第三方检测 数据
- circleSize: { // 根据缩放级别 规定绘制点的尺寸 下标文字离点的距离
- 4: { inner: 50000, outer: 100000, offset: 2 },
- 5: { inner: 15000, outer: 30000, offset: 0.8 },
- 6: { inner: 15000, outer: 30000, offset: 0.8 },
- 7: { inner: 8000, outer: 16000, offset: 0.3 },
- 8: { inner: 4000, outer: 8000, offset: 0.14 },
- 9: { inner: 2000, outer: 4000, offset: 0.08 },
- 10: { inner: 1000, outer: 2000, offset: 0.04 },
- 11: { inner: 1000, outer: 2000, offset: 0.04 }
- },
- barColors :{ // // 专维 维保 第三方检测 颜色
- 0: 'linear-gradient(to right, #369CF7 , #025BAA)', // 蓝色
- 1: 'linear-gradient(to right, #F58300 , #F58300)', // 黄色
- 2: 'linear-gradient(to right, #F54E45 , #F54E45)' // 红色
- }
- }
- },
- computed: {
- ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
- },
- watch: {},
- created() {
- this.currentTime()
- },
- mounted() {
-
- window.vm = this
- this.getFrameworkTreeData()
- window.addEventListener('resize', this.reinitalMap, false)
- },
- methods: {
- 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.level === 1) {
- this.crumbsHtml = []
- } else {
- let pathArr = data.path.split('/')
- let newArr = []
- pathArr.forEach(item => {
- newArr.push(item.split('&'))
- })
- this.crumbsHtml = newArr
- }
- this.currentZoneData = data
- },
- /**
- * @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广场
- this.currentZoneData = data
- this.currentLevel = level
- 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)
- }
- this.crumbsHtml = this.crumbsHtml.splice(0, index + 1)
- },
- /**
- * @Description 分区树 点击选择分区
- * @Param ids 返回选中项的id
- * @Param data 返回选中项的数据
- */
- selectProjectItem(ids) {
- let data = this.getDataByCityCcode(ids)
- this.currentLevel = data.level
- if (data.level === 0) { // level=0时 plazaId必填
- this.queryPlazaInfoCount(data.ccode, data.level, data.ccode)
- } else {
- this.queryPlazaInfoCount(data.ccode, data.level)
- }
-
- this.getSystemList(data.ccode, data.level)
- this.getEventStatusData(this.currentLevel, data.ccode)
- this.createNavpathByData(data)
- this.currentZoneData = data
-
- let level = data.level // //1集团 2中心 3区域 0广场
- if (level === 1) {
- this.pantGroupMap(data, this.currentSysId)
- } else if (level === 2) {
- this.pantZonesMap(data, '1001')
- } 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.currentDistrictData = res.treeData
- this.getSystemList(data.ccode, level )
- 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% - 11.2rem)' }
- } else {
- return { height: '4.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 === '专维') {
- if (item.unfinished>0) {
- bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
- } else {
- bg = this.barColors[type]
- }
- ratio = ((item.unfinished + item.due_num) / item.total) * 100
- } else {
- 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) {
- let color = {
- area: '',
- border: ''
- }
- if (data >= 200) {
- color.area = '#F54E45'
- color.border = 'rgba(245,78,69,0.2)'
- } else if (data >= 100 && data < 200) {
- color.area = '#F58300'
- color.border = 'rgba(245,131,0,0.2)'
- } else if (data >= 50 && data < 100) {
- color.area = '#FFBA6B'
- color.border = 'rgba(255,186,107,0.2)'
- } else if (data >= 10 && data < 50) {
- color.area = '#0091FF'
- color.border = 'rgba(0,145,255,0.2)'
- } else if (data >= 1 && data < 10) {
- color.area = '#82C7FC'
- color.border = 'rgba(130,199,25,0.2)'
- } else {
- color.area = '#EEEEEE'
- color.border = '#CCC'
- }
- return color
- },
- /**
- * @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}}
- }
- getCardList(params).then(res => {
- if (res.result == 'success') {
- let result = res.data
- if (result && Array.isArray(result)) {
- result.forEach(item => {
- if (item.assetTypeList) {
- item.assetTypeList = item.assetTypeList.splice(0, 3)
- }
- })
- res.data.forEach(item => {
- item.selected = false
- })
- res.data[0].selected = true
- this.currentSelectedSys = res.data[0]
- this.currentSysId = res.data[0].smsxt
- this.systemList = res.data
- this.initMap()
- }
- }
- })
- },
- /**
- * @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
- 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.due_num + 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,
- // maxZoom:4,
- // minZoom:4,
- crs: L.CRS.EPSG3857,
- zoomControl: false,
- boxZoom: false,
- attributionControl: false,
- contextmenu: true,
- contextmenuWidth: 140,
- dragging: false,
- closePopupOnClick:true,
- doubleClickZoom:false
- })
- let JsonData = require('../../assets/geoData/china.json')
- let layer = 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() {
- myMaps.eachLayer(function(layer) {
- myMaps.removeLayer(layer)
- })
- let JsonData = require('../../assets/geoData/china.json')
- let layer = L.geoJSON(JsonData.features, {
- style: function() {
- return {
- weight: 1,
- color: '#B3D2FF',
- fillColor: '#DEECFF'
- }
- }
- }).addTo(myMaps)
- },
- /**
- * @Description 移动地图到指定中心
- */
- flyTo(center, zoom) {
- myMaps.setView(center, zoom)
- },
- /**
- * @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 = []
- 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(item)
- }
- }
- })
- })
- promiseAll.push(promise)
- })
- Promise.all(promiseAll).then(result => {
- 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 (['xibei'].includes(zone)) {
- zoom = 5
- } else {
- zoom = 6
- }
- this.flyTo(this.zoneCenter[zone], zoom)
- let groupLayer = new L.layerGroup()
- data.children.forEach(item => {
- 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 city = that.provinceCities[name]
- let num = 0
- let center = city.center
- if (res.data) {
- let equip = res.data[0]
- let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach(item => {
- if (item.is_exception_num) {
- num += item.is_exception_num
- }
- })
- }
- that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone', 6)
- }
- }
- })
- })
- groupLayer.addTo(myMaps)
- },
-
- /**
- * @Description 用于绘制项目的点
- * @Param data 数据
- */
- pantProjectsMap(data) {
- this.clearAllLayers()
- let name = data.cname.split('区域')[0]
- let geo = this.provinceCities[name]
- this.flyTo(geo.center, geo.zoom)
- data.children.forEach(item => {
- this.pantPlazaMap(item, geo.zoom)
- })
- },
- /**
- * @Description 用于绘制广场
- * @Param data 数据
- */
- pantPlazaMap(item, zoom) {
- let that = this
- let groupLayer = new L.layerGroup()
- 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 (item.latitude && item.longitude) {
- let center = [item.latitude, item.longitude]
- if (res.data) {
- let equip = res.data[0]
- let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach(item => {
- if (item.is_exception_num) {
- num += item.is_exception_num
- }
- })
- }
- that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project', 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 popup = null
- let marker = null
- let outCircle = null
- let innerCircle = null
- let color = this.paintColorByData(num)
- let myIcon = L.divIcon({
- html: name,
- className: 'my-leaflet-div-icon',
- iconSize: 30
- })
- let sizes = this.circleSize[zoom]
- if (color && center) {
- popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
- marker = L.marker([center[0] - sizes.offset, center[1]], { icon: myIcon }).addTo(groupLayer)
- outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
- innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
- let feaureGroup = L.featureGroup([marker, outCircle, innerCircle, popup])
- feaureGroup.on('mouseover', ev => {
- popup.openOn(myMaps)
- })
- feaureGroup.on('click', ev => {
- this.currentZoneData = data
- this.currentLevel = data.level
- this.getEventStatusData(data.level, data.ccode)
- this.queryPlazaInfoCount(data.ccode, data.level)
- if (type !== 'project') {
- groupLayer.clearLayers()
- }
- this.createNavpathByData(data)
- this.getSystemList(data.ccode, data.level)
- 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 || '--'}台</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 || '--'}台</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">
- @keyframes selectDownUpExtendTop {
- from {
- transform: translateY(8px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- .selectDownUpExtendTop-enter-active {
- animation: selectDownUpExtendTop .3s
- }
- .selectDownUpExtendTop-leave-active {
- animation: selectDownUpExtendTop .3s reverse
- }
- .overview {
- height: 100vh;
- background: rgba(247, 249, 250, 1);
- .menu {
- height: 48px;
- min-width: 1366px;
- color: #1f2429;
- font-size: 1.6rem;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
- overflow: hidden;
- .home {
- width: 265px;
- height: 48px;
- // line-height: 48px;
- text-align: center;
- cursor: pointer;
- color: #ffffff;
- float: left;
- margin-right: 83px;
- // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- position: relative;
- .downright {
- position: absolute;
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-bottom: 48px solid #fff;
- right: 0px;
- top: 0;
- }
- .home-box {
- height: 100%;
- display: flex;
- align-items: center;
- img {
- width: 28px;
- height: 28px;
- margin-left: 20px;
- margin-right: 24px;
- margin-top: -3px;
- }
- span {
- font-size: 2rem;
- font-family: MicrosoftYaHei;
- height: 27px;
- line-height: 27px;
- margin-top: -4px;
- &:after {
- content: '|';
- position: absolute;
- left: 60px;
- }
- }
- }
- }
- & > div:nth-of-type(2) {
- & > div {
- line-height: 48px;
- text-align: center;
- //background: url('../assets/images/topbar1.png') no-repeat;
- float: left;
- width: 80px;
- height: 48px;
- cursor: pointer;
- transition: all 0.2s;
- }
- .is-active {
- color: #025baa;
- font-weight: bolder;
- border-bottom: 2px solid #025baa;
- background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
- }
- }
- .home-right {
- float: right;
- margin-right: 20px;
- line-height: 48px;
- color: #646c73;
- font-size: 1.4rem;
- cursor: pointer;
- display: flex;
- align-content: center;
- img {
- margin-top: -2px;
- }
- .span-out {
- position: relative;
- margin: 0 16px;
- .span2-num {
- position: absolute;
- right: -5px;
- top: 5px;
- display: inline-block;
- width: 18px;
- height: 18px;
- background: red;
- border-radius: 90px;
- font-size: 1.2rem;
- text-align: center;
- line-height: 18px;
- color: #ffffff;
- }
- }
- }
- .span1,
- .span2 {
- padding: 0 6px 0 3px;
- }
- .span3 {
- padding-left: 3px;
- }
- }
- .navigation {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 50px;
- padding: 0 16px;
- background: white;
- .crumbs {
- span {
- cursor: pointer;
- }
- span:first-child {
- display: inline-block;
- width: 14.4rem;
- height: 2.8rem;
- margin-right: 1.2rem;
- border: 1px solid rgba(195, 199, 203, 1);
- border-radius: 1.4rem;
- text-align: center;
- line-height: 2.8rem;
- font-size: 14px;
- cursor: default;
- }
- span:last-child {
- font-weight: bold;
- }
- }
- }
- .container {
- display: flex;
- justify-content: space-between;
- height: calc(100vh - 98px);
- padding: 1.2rem 1.6rem;
- .section-title {
- display: flex;
- align-items: center;
- padding-left: 10px;
- border-left: 4px solid #025baa;
- color: #1f2429;
- font-size: 1.6rem;
- font-weight: bolder;
- line-height: 2rem;
- cursor: pointer;
- img{
- width: 2rem;
- margin-left: 1.2rem;
- }
- }
-
- .system-general {
- width: 25.4%;
- box-sizing: border-box;
- background: white;
- .system-main-title {
- padding: 2rem 0 2.4rem 1.6rem;
- }
- .system-list {
- ul {
- height: 80vh;
- li.system-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: calc(100% - 3.2rem);
- height: calc(100% / 8);
- margin-left: 1.6rem;
- // padding: 1rem 0;
- box-sizing: border-box;
- border: 1px solid white;
- border-radius: 4px;
- border-bottom: 1px solid #eff0f1;
- transition: 0.5s;
- cursor: pointer;
- .system-name {
- display: flex;
- align-items: center;
- width: 28%;
- padding: 1.2rem 0 1.2rem 1rem ;
- border-right: 1px solid #EFF0F1;
- .img {
- height: 2.8rem;
- width: 2.8rem;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- background: #dce7f0;
- filter: saturate(0%);
- img {
- width: 3.2rem;
- height: 3.2rem;
- }
- }
- .selected {
- filter: saturate(100%);
- }
- span {
- display: inline-block;
- margin-left: 0.8rem;
- color: #1f2429;
- font-size: 1.4rem;
- font-weight: bolder;
- }
- }
- .system-equipments {
- width: 72%;
- display: flex;
- align-items: center;
- padding-left: 1.4rem;
- .number {
- width: 33.3%;
- margin-right: 1.2rem;
- .title{
- display: inline-block;
- position: relative;
- p{
- display: inline-block;
- position: relative;
- width: 100%;
- color: #1f2429;
- font-size: 1.4rem;
- line-height: 1.6rem;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- span {
- position: absolute;
- top: -1.6rem;
- right: -2rem;
- padding: 2px 4px;
- border-radius: 0.9rem;
- font-size: 1.2rem;
- color: #f54e45;
- background: #fde3e2;
- }
- }
- p:nth-of-type(2) {
- span:first-child {
- color: #1f2429;
- font-size: 1.8rem;
- font-weight: bold;
- }
- }
- }
- }
- }
- li.selected {
- border-color: rgba(0, 118, 197, 0.6);
- box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
- }
- li:last-child {
- border-bottom: none;
- }
- li:hover {
- border-color: #66addd;
- box-shadow: 0 2px 10px 0px rgba(204, 100, 77, 0.4);
- }
- }
- }
- }
- .map-box {
- width: calc(56.6% - 2.4rem);
- margin: 0 12px;
- .cards-list {
- display: flex;
- justify-content: space-between;
- .card {
- width: calc((100% - 24px) / 3);
- box-sizing: border-box;
- padding: 12px 16px;
- border-radius: 4px;
- background: white;
- .img {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 4.4rem;
- height: 4.4rem;
- border-radius: 50%;
- img {
- width: 2rem;
- height: 2rem;
- }
- }
- }
- div:nth-of-type(1) .img {
- background: rgba(130, 199, 252, 0.14);
- }
- div:nth-of-type(2) .img {
- background: rgba(0, 214, 185, 0.14);
- }
- div:nth-of-type(3) .img {
- background: rgba(255, 186, 107, 0.14);
- }
- p {
- color: #646c73;
- margin: 12px 0 8px 0;
- }
- strong {
- color: #1f2429;
- font-size: 2.4rem;
- }
- }
- .map-container {
- position: relative;
- height: 70vh;
- #map {
- height: 70vh;
- overflow: hidden;
- pointer-events: none;
- }
- .legend {
- position: absolute;
- left: 1.4rem;
- bottom: 2.7rem;
- padding: 0.6rem;
- background: white;
- .legend-bar {
- display: flex;
- align-items: center;
- span {
- display: inline-block;
- height: 4px;
- width: 20px;
- margin-right: 12px;
- }
- }
- }
- }
- }
- .ratio-list {
- width: 18%;
- .block {
- position: relative;
- padding: 1.2rem 1.6rem;
- height: calc((100% - 2rem) / 3);
- border-radius: 4px;
- margin-bottom: 1rem;
- background: white;
- // overflow: auto;
- transition: height 0.3s ease-in-out;
- .section-title {
- font-size: 1.6rem;
- }
- .tool-tip{
- position: absolute;
- left: 0;
- top: -6.6rem;
- width: 100%;
- border-radius: 4px;
- padding: 0.8rem 1.6rem 1.6rem;
- font-size: 1.4rem;
- line-height: 2.2rem;
- background: white;
- border:1px solid rgba(151,151,151, 0.2);
- filter: drop-shadow(0 2px 4px rgba(31, 35, 41, .1)) ;
- .tip-triangle{
- position: absolute;
- position: absolute;
- left: 7.8rem;
- border-style: solid;
- width: 0;
- height: 0;
- bottom: -6px;
- border-width: 6px 6px 0 6px;
- border-color: rgba(247, 249, 250, 1) transparent transparent transparent;
- }
- }
- .list {
- margin-top: 1.4rem;
- overflow: hidden;
- height: calc(100% - 3rem);
- ul {
- li {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-bottom: 1.2rem;
- .ratio {
- display: flex;
- justify-content: space-between;
- margin-bottom: 0.5rem;
- span:first-child {
- color: #646c73;
- font-size: 1.4rem;
- }
- }
- .bar {
- position: relative;
- height: 6px;
- border-radius: 3px;
- background: #c3c7cb;
- .inner-bar {
- position: absolute;
- height: 6px;
- left: 0;
- top: 0;
- border-radius: 3px;
- }
- }
- }
- }
- }
- .arrow {
- position: absolute;
- bottom: 0;
- left: 50%;
- cursor: pointer;
- transform-origin: center center;
- transform: translateX(-50%) rotate(90deg);
- }
- }
- section:last-child.block {
- margin-bottom: 0;
- }
- }
- }
- }
- </style>
-
|