123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587 |
- <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> -->
- <span>万达集团管理说明书</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
- class="special-my-tree-select"
- ref="treeSelect"
- width='300'
- :hideClear='false'
- :isReadOnly='false'
- :caption='"选择管理分区:"'
- :data='regulateDistrictData'
- :placeholder="placeholder"
- :disabled='false'
- v-model="selectedZone"
- @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>
- <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' style="padding-top:2rem; margin-bottom:2rem;">
- <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 :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>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
- </div>
- </div>
- <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="padding-bottom:2rem;">
- <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 :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>{{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' @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>
- <div class="describe">
- <span style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></span>
- <span>更新事项数量<strong>{{plazaInfoCount.zhsxChangeCount}}</strong></span>
- </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' :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.overdue_unfinished || 0}} /</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 { Loading } from 'element-ui';
- 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 {
- 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: [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: [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: [], // 分区数据
- maintainList: [], // 专维 维保 第三方检测 数据
- barColors :{ // // 专维 维保 第三方检测 颜色
- 0: 'linear-gradient(to right, #369CF7 , #025BAA)', // 蓝色
- 1: 'linear-gradient(to right, #F58300 , #F58300)', // 黄色
- 2: 'linear-gradient(to right, #F54E45 , #F54E45)' // 红色
- },
- selectedZone:'',
- loadingInstance:null
- }
- },
- computed: {
- ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
- },
- watch: {
-
- },
- created() {
- this.currentTime()
- },
- mounted() {
-
-
- window.vm = this
- this.getFrameworkTreeData()
- window.addEventListener('resize', this.reinitalMap, false)
- },
- methods: {
- 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.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广场
- if (level === this.regulateDistrictData[0].level) {
- this.selectedZone = ''
- }
- 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) {
- if (!ids && this.currentZoneData) {
- this.pantGroupMap(this.regulateDistrictData[0], this.systemList[0].smsxt)
- this.createNavpathByData(this.regulateDistrictData[0])
- }
- 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 ).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% - 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 === '专维') {
- item.overdue_unfinished = item.overdue_unfinished || 0
- if (item.overdue_unfinished >0 || item.unfinished > 0) {
- bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
- }
- // else {
- // bg = this.barColors[type]
- // }
- ratio = ((item.overdue_unfinished + item.unfinished) / item.total) * 100
- } else {
- if (item.due_num > 0) {
- bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
- }
- // 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,
- // minZoom:
- zoomControl: false,
- boxZoom: false,
- attributionControl: false,
- contextmenu: true,
- contextmenuWidth: 140,
- closePopupOnClick:true,
- doubleClickZoom:false,
- wheelPxPerZoomLevel:20
- // scrollWheelZoom:false,
- // dragging: 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 = []
- 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 color = this.paintColorByData(num)
- let textIcon = L.divIcon({
- html: type =='group' ? name :`<div>${name}</div>`,
- className: '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 ])
- 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
- 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) {
- console.log(data)
- 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">
- @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
- }
- /deep/ .p-tree-single-panel{
- height: 400px!important;
- }
- .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;
- 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: auto;
- height: 3rem;
- margin-right: 1.2rem;
- border: 1px solid rgba(195, 199, 203, 1);
- border-radius: 1.4rem;
- padding: 0 2rem;
- 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 {
- height: 80vh;
- overflow-y:auto;
- ul {
- li.system-item {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: calc(100% - 3.2rem);
- margin-left: 1.6rem;
- 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: 25%;
- 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-container{
- position: relative;
- width:75%;
- .more{
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 14px;
- height: 14px;
- right: 8px;
- top: 50%;
- border-radius: 7px;
- cursor: pointer;
- transform: rotate(0);
- transform-origin: center;
- z-index: 10000;
- transform: translateY(-7px);
- img{
- width:14px;
- height: 14px;
- }
- }
- .system-equipments {
- display: flex;
- align-items: center;
- padding-left: 1.4rem;
- .number {
- width: 33.3%;
- .title{
- display: inline-block;
- position: relative;
- p{
- display: inline-block;
- position: relative;
- color: #1f2429;
- font-size: 1.4rem;
- line-height: 2rem;
- 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: #E4E5E7;
- box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
- }
- }
- }
- }
- .map-box {
- width: calc(56.6% - 2.4rem);
- margin: 0 12px;
- .cards-list {
- display: flex;
- justify-content: space-between;
- .card {
- width: 50%;
- 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:first-child.card{
- margin-right: 12px;
- }
-
- 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);
- }
- 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;
-
- svg {
- 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% - 4rem);
- 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>
-
|