123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674 |
- <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>{{currentZone.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"
- :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">
- <p>{{equip.category_name}}<span v-if="equip.is_exception_num">{{equip.is_exception_num}}</span></p>
- <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" v-for="(item , index) in maintainList" :key="index">
- <h4 class="section-title" @click="toggerPanel(item)">{{item.title}}</h4>
- <div class="list" :style="panelStyle(item)">
- <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.unfinished}} / </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 maps = 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 ChinaGeoJson from "../../assets/CHN.geo2.json";
- import {sortBy} from "lodash"
- import OtherJson from "../../assets/regionData/other.json"
- 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"
- },
- zoneGroup:{
- "dongbei":["heilongjiang","liaoning","jilin"],
- "xibei":["neimenggu","ningxia","shanxi1","xinjiang"],
- "huabei":["shandong","hebei","beijing","tianjin"],
- "huazhong":["shanxi2","henan","hubei"],
- "huadong":["jiangsu","shanghai"],
- "zhongnan":["hunan","anhui","jiangxi"],
- "huanan":["guangdong","guangxi"],
- "dongnan":["fujian","zhejiang"],
- "xinan":["guizhou","sichuan","yunnan","chongqing"]
- },
- zoneCity:{
- "shandong":["青岛区域","济南区域"]
- },
- 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.40, 117.00] , zoom: 7},
- "上海区域": {"province":"shanghai", center: [31.090574094954192, 121.46299249603001], zoom:10},
- "南京区域": {"province":"jiangsu", center:[ 32.05000, 118.78333 ], zoom:7},
- "无锡区域": {"province":"jiangsu", center: [31.57, 120.30], zoom:9},
- "厦门区域": {"province":"fujian", center: [24.46667, 118.10000] , 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.40, 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.40], 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},
- },
- provincesCenter:{
- "anhui":[31.852559691577845, 117.2253589137454],
- "beijing": [40.186106951230485,116.42285651967009],
- "chongqing": [30.060254204354784, 107.89013862196842],
- "fujian": [26.071368377569776, 118.00455426638014],
- "gansu":[38.00325279557638, 100.5012462408473],
- "guangdong":[23.334243521962527, 113.43297176882082],
- "guangxi":[23.83265626692407, 108.79223788629494],
- "guizhou":[26.824014276407205, 106.87707047290361],
- "hebei": [39.60459587653637, 116.15817616286789],
- "heilongjiang":[48.03564457240887, 127.69009579234847],
- "henan": [33.902894471142176, 113.61599693888945],
- "hubei": [30.988423598416457, 112.27635740895998],
- "hunan":[27.633668515110255, 111.70882955621366],
- "jiangsu": [32.981911362532585, 119.48201035757698],
- "jiangxi":[27.637831291898365, 115.73252266448846],
- "jilin":[43.703126756480735, 126.15512329582789],
- "liaoning":[41.30041310409345, 122.6094238905765],
- "neimenggu":[44.47324785058833, 114.30352505865382],
- "ningxia":[37.29635258864683, 106.17634546083286],
- "qinghai":[35.7281048004562, 96.0459309719495],
- "shandong":[36.374647201891335, 118.18901718013844],
- "shanghai":[31.07710542026598, 121.44651073619633],
- "shanxi1":[35.263055624551846, 108.88970748546511],
- "shanxi2":"",
- "sichuan":[30.67066959682666, 102.69531108397375],
- "tianjin":[39.29260116656163, 117.35013172238374],
- "xinjiang":[41.37183707717329, 85.29450850581013],
- "xizang":[31.56242864291341, 88.39191208626079],
- "yunnan":[25.004865694004916, 101.4821386658875],
- "zhejiang": [29.180481383933902, 120.11087647324501],
- },
- 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: "#FDE3E2", num:'≥200'},
- {color: "#FEE9D2", num:'100-200'},
- {color: "#FFF6EB", num:'50-99'},
- {color: "#CCE9FF", num:'10-49'},
- {color: "#E1F2FF", num:'1-9'},
- {color: "#E1F2FF", num:'0'},
- ],
- plazaInfoCount:{},
- systemList:[],
- currentZone:{}, //
- currentDistrictData:[], //当前管理分区数据
- currentSelectedSys:{},
- currentSysId:"",
- state: '',
- value: 190,
- currentPanel:'',
- regulateDistrictData: [],
- projectsCode:[],
- maintainList:[],
- circleSize:{
- 5:{innder:15000,outer:30000, offset:0.8},
- 7:{innder:8000,outer:16000, offset:0.3},
- 8:{innder:4000,outer:8000, offset:0.14},
- 9:{innder:2000,outer:4000, offset:0.08},
- 10:{innder:1000,outer:2000, offset:0.04},
- 11:{innder:1000,outer:2000, offset:0.04},
- }
- }
- },
- computed: {
- ...mapGetters(['plazas', 'plazaId']),
-
- },
- watch: {
-
- },
- created() {
- this.currentTime()
- },
- mounted() {
- window.vm = this
- this.getFrameworkTreeData()
- this.getSystemList()
- this.queryPlazaInfoCount(1002347,0)
- this.getEventStatusData()
- },
- methods: {
-
- imgSrc(code) {
- return require('../../assets/images/icons/' + code + '.png')
- },
- /**
- * 跳转到 当月说明书更新项目数量
- */
- navToIntroduceUpdate () {
- // this.$router.push({path:''})
- },
- /**
- * 跳转到 上线管理说明书数量
- */
- navToManageNumber () {
- // this.$router.push({path:''})
- },
- /**
- * 跳转到 当月重点关注事项项目数量
- */
- navToFocusItems () {
- // this.$router.push({path:''})
- },
- /**
- * 通过导航进行导航
- *
- */
- navgateFromCrumbs (id, index) {
- let data = this.getDataByCityCcode(id)
- if (!data) return ;
- this.currentZone = 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 {
- this.pantProjectsMap(data, this.currentSysId)
- }
- this.crumbsHtml = this.crumbsHtml.splice(0, index + 1)
- },
- <<<<<<< HEAD
- /**
- * 获取事项状态统计数据
- */
- getEventStatusData () {
- let params = {
- getParams: {
- "level":1,
- "ccode":"0000000000",
- }
- }
- queryEventStatus(params).then(res => {
- if (res.result === "success") {
- let arr =[]
- let data = res.data
- for(let key in data) {
- let obj = {}
- if (data.hasOwnProperty(key)) {
- if (key == "0") {
- obj.title = "专维" // due_num 即将到期 unfinished 逾期未完成
- sortBy(data[key], function(item){
- return item.due_num + item.unfinished
- }) // 维保,第三方检测排名按照即将到期任务数量从多到少排序,多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序,多的靠前
- } else if (key == "1") {
- obj.title = "维保"
- sortBy(data[key], function(item) {
- return item.due_num
- })
- } else {
- obj.title = "第三方检测"
- sortBy(data[key], function(item){
- return item.due_num
- })
- }
- obj.data = data[key]
- obj.expand = 0
- }
- arr.push(obj)
- }
- this.maintainList = arr
- }
- })
- },
- /**
- * 切换系统时 地图响应
- * @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广场
- if(this.currentLevel === 1) { //1集团 3区域 0广场
- this.pantGroupMap(this.currentDistrictData[0], system.smsxt)
- } else if (this.currentLevel === 2) { // 2中心
- this.pantZonesMap(this.currentDistrictData[0])
- } else if (this.currentLevel === 0) {
- this.pantProjectsMap(this.currentDistrictData[0])
- }
- },
- // 处理集团地图
- pantGroupMap (data, sysId) {
- this.clearAllLayers()
- let that = this
- data.children.forEach(item=>{
- let params = {
- getParams: {
- // "plazaId":1000423,
- "smsxt": sysId, //TODO that.systemList[0].smsxt
- "level":1,
- "ccode":item.ccode
- }
- }
- querySystemCard(params).then(res => {
- if (res.result === "success") {
- let name = item.cname.substr(0,2)
- let zone = this.zoneNames[name]
- let JsonData = require(`../../assets/regionData/${zone}.json`)
- let num = 0
- let contentHtml = ''
- let popup = null
- if (res.data) {
- let equip = res.data[0]
- if (equip.assetTypeList.length > 3) {
- equip.assetTypeList = equip.assetTypeList.splice(0,3)
- }
- contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
- equip.assetTypeList.forEach(item => {
- num += item.is_exception_num
- })
- }
- let color = that.paintColorByData(num)
-
- let center = JsonData.features[0].properties.center
- let marker = L.divIcon({
- html: JsonData.features[0].properties.name,
- iconSize:30
- })
- // let marker = L.circle(center, {radius: 2000}).addTo(maps).bindPopup(contentHtml);
- if (res.data) {
- popup = L.popup().setLatLng(center).setContent(contentHtml)
- layer.on("click", (ev)=>{
- let property = ev.layer.feature.properties
- let layerName = this.zoneNames[property.name]
-
- let target = that.getDataByCityCcode(item.ccode)
- if (target) {
- this.currentZone = target
- that.createNavpathByData(target)
- }
- if (layerName !== "其他") {
- this.pantZonesMap(item, sysId)
-
- }
- })
- layer.on("mousemove" , (ev)=> {
- maps.openPopup(popup)
- })
- }
- }
- })
- })
- let otherRegion = require("../../assets/regionData/other.json")
- let layer = L.geoJSON( otherRegion.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': '#e3ecf3',
- 'fillColor': "#fff"
- }
- }
- }).addTo(maps);
-
- maps.setView([38,103], 4)
- },
- /**
- * 生成弹框HTML
- */
- createPopupHtmlContent (data) {
- let that = this
- let html = ""
- for (let i =0 ; i < data.length; 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><i></i><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>${that.currentSelectedSys.smsxtname}</span>-<span>${that.currentZone.cname}</span></div>
- ${html}</div>`
- },
- /**
- * 用于绘制中心下的地图
- */
- pantZonesMap (data, sysId) {
- let vm = this
- let obj = []
- let htmlContent = []
- let pArr = []
- let zonenames = new Set()
- let zone = data.cname.substr(0,2)
- let zonename = this.zoneNames[zone]
- this.clearAllLayers()
- data.children.forEach(item => {
- let name = this.provinceCities[item.cname].province
- zonenames.add(name)
- let data = require(`../../assets/provinceData/${name}.json`)
- let layer = L.geoJSON(data.features,{
- style:function(){
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor': "#f1f1f1"
- }
- }
- }).addTo(maps);
- layer.on("click", (ev)=>{
- let target = vm.getDataByCityCcode(item.ccode)
- if (target) {
- vm.currentZone = target
- vm.createNavpathByData(target)
- }
- vm.clearAllLayers()
- let data = require(`../../assets/provinceData/${name}.json`)
- let layer = L.geoJSON(data.features,{
- style:() => {
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor': "#f1f1f1"
- }
- }
- }).addTo(maps);
- this.panTo(this.provincesCenter[name], 6)
- })
- })
- this.panTo(this.zoneCenter[zonename], this.setZoomSize(zonename))
- },
- /***
- * 用于绘制项目的点
- */
- pantProjectsMap (data) {
- let zone = this.provinceCities[data.cname]
- let province = zone.province
- let center = zone.center
- let Json = require(`../../assets/provinceData/${province}.json`)
- this.clearAllLayers()
- let markerArr = []
- let pArr = []
- data.children.forEach(item => {
- let p = new Promise((resolve,reject) => {
- let params = {
- getParams: {
- "plazaId":1000423,
- "smsxt": "1007", //TODO that.systemList[0].smsxt
- "level":0,
- "ccode": item.ccode
- }
- }
- querySystemCard(params).then(res => {
- if (res.result === 'success') {
- if (res.data) {
- markerArr.push({
- name: item.name,
- center: item.center,
- data: res.data
- })
- resolve(res.data)
- } else {
- markerArr.push({
- name: item.name,
- center: item.center,
- data: 0
- })
- resolve(0)
- }
- }
- })
- })
- pArr.push(p)
- })
- Promise.all(pArr).then(result => {
- markerArr.forEach(item => {
- let popupContent = '<p>Hello world!<br />This is a nice popup.</p>'
- L.circle(item.center, {radius: 20000}).bindPopup(popupContent).addTo(maps);
- })
- L.geoJSON(Json.features,{
- style:function(){
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor': "red"
- }
- }
- }).addTo(maps)
- this.panTo(center, 7)
- })
- },
- /**
- * 根据数据创建导航路径
- */
- 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.currentZone = data
- },
- =======
- >>>>>>> develop-map
- // 获取 区域/中心/项目
- selectProjectItem (ids, data) {
- this.createNavpathByData(data)
- this.currentZone = data
- let JSONName = data.cname
- 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) {
- let res = this.provinceCities[JSONName]
- this.pantProjectsMap(data, this.currentSysId)
- } else { // 点击广场时 直接跳转到详情页 地图不用响应
- this.pantPlazaMap(data, this.currentSysId, true)
- }
- },
- //查询项目信息统计数量
- queryPlazaInfoCount (ccode, level) {
- let params = {
- getParams: {
- "ccode":ccode,
- "level":level,
- }
- }
- getPlazaInfoCount(params).then(res => {
- if (res.result === 'success') {
- if (res.data) {
- this.plazaInfoCount = res.data
- }
- }
- })
- },
- /**
- * 根据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
- }
- }
-
- },
- // 获取 中心 区域 项目 数据树数据
- getFrameworkTreeData () {
- login({
- "username":"xiejialin1",
- "returnTree":true
- }).then(res => {
- if (res.result === 'success') {
- recursionData(res.treeData)
- let data = res.treeData[0]
- this.currentDistrictData = res.treeData
- this.currentZone = data
- this.currentLevel = res.treeData[0].level // 初始化的时候判断是哪一级 //1集团 2中心 3区域 0广场
- this.regulateDistrictData = [data]
- this.initMap()
- }
- function recursionData (data, parent) {
- data.forEach(item => {
- item.name= item.cname
- item.id = item.cid
- 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))
- }
- })
- }
- })
- },
- <<<<<<< HEAD
- //初始化地图
- initMap() {
- let that = this;
- maps = L.map("map", {
- center: new L.LatLng(38, 103),
- zoom: 4,
- crs: L.CRS.EPSG3857,
- minZoom: 3,
- maxZoom: 14,
- zoomControl: false,
- attributionControl: false,
- contextmenu: true,
- contextmenuWidth: 140,
- })
- let JsonData = require("../../assets/geoData/china.json")
- let layer = L.geoJSON(JsonData.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': '#B3D2FF',
- 'fillColor':'#DEECFF'
- }
- }
- }).addTo(maps);
- return
- if(this.currentLevel === 1) { //1集团 3区域 0广场
- this.pantGroupMap(this.currentDistrictData[0],"1001")
- } else if (this.currentLevel === 2) { // 2中心
- this.pantZonesMap(this.currentDistrictData[0])
- } else if (this.currentLevel === 0) {
- this.pantProjectsMap(this.currentDistrictData[0])
- }
- },
- //**清空地图 并添加全国底图*/
- clearAllLayers(){
- maps.eachLayer(function(layer){
- maps.removeLayer(layer)
- })
- let data = require(`../../assets/geoData/china.json`)
- L.geoJSON(data.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': 'black',
- 'fillColor':'#e0ebff'
- }
- }
- }).addTo(maps);
- },
- panTo(center, zoom){
- maps.panTo(center)
- maps.setView(center, zoom)
- },
- setZoomSize (zone) {
- if (["habei","dongbei"].includes(zone)) {
- return 5
- } else if (["huadong","dongnan","huanan"].includes(zone)) {
- return 7
- } else if (["zhongnan","huabei","xinan","huazhong"].includes(zone)) {
- return 6
- } else if (["xibei"].includes(zone)) {
- return 4
- }
- },
- =======
- >>>>>>> develop-map
- toggerPanel (item) {
- this.currentPanel = item.title
- // 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 // 回到初始状态
- })
- }
- },
- panelStyle (item) {
- // expand 0 初始状态 1 展开状态 2 隐藏状态
- if (item.expand === 0) {
- return {height:'22rem'}
- } else if (item.expand === 1) {
- return {height:'63rem'}
- } else {
- return {height:'0', margin:0}
- }
- },
- /**
- * 计算长度
- */
- barStyle(item, title) {
- let type = item.type
- let ratio = 0
- if (title === '专维') {
- ratio = ( (item.unfinished + item.due_num) / item.total ) * 100
- } else {
- ratio = (item.unfinished/ item.total ) * 100
- }
- let bg = ''
- if ( type === 0) {
- bg = "linear-gradient(to right, #F54E45 , #F54E45)"
- }
- if ( type === 1) {
- bg = "linear-gradient(to right, #F58300 , #F58300)"
- }
- if ( type === 2) {
- bg = "linear-gradient(to right, #369CF7 , #025BAA)"
- }
- return {
- width: ratio + '%',
- backgroundImage: bg
- }
- },
- // 根据数据渲染颜色
- 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
- },
- currentTime() {
- this.times = moment().format('YYYY.MM.DD HH:mm')
- setTimeout(this.currentTime, 1000)
- },
- /**根据选择的系统重新渲染地图
- * param sysId:系统Id
- */
-
- formatter(str, arrv) {
- if (str && arrv) {
- const Objs = arrv.find(e => e && e.plazaid == str)
- return Objs ? Objs.plazaname : '--'
- } else {
- return ''
- }
- },
- //TODO plazaId目前是写死的 后期需要更换成用户对应的ID
- getSystemList () {
- let params = {
- getParams: {
- "plazaId":1000423,
- }
- }
- 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
- }
- }
- })
- },
- /**
- * 获取事项状态统计数据
- */
- getEventStatusData () {
- let params = {
- getParams: {
- "level":1,
- "ccode":"0000000000",
- }
- }
- queryEventStatus(params).then(res => {
- if (res.result === "success") {
- let arr =[]
-
- let data = res.data
- for(let key in data) {
- let obj = {}
- let sortData = data[key]
- if (data.hasOwnProperty(key)) {
-
- // 维保,第三方检测排名按照即将到期任务数量从多到少排序,多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序,多的靠前
- // due_num 即将到期 unfinished 逾期未完成
- if (key == "0") {
- obj.title = "专维"
- sortData.forEach(item=>{
- item.sort = item.rptGlsmsStatistics.due_num + item.rptGlsmsStatistics.unfinished
- })
- } else if (key == "1") {
- obj.title = "维保"
- sortData.forEach(item=>{
- item.sort = item.rptGlsmsStatistics.due_num
- })
- } else {
- obj.title = "第三方检测"
- sortData.forEach(item=>{
- item.sort = item.rptGlsmsStatistics.due_num
- })
- }
- let final = sortBy(sortData, (option) => {return option.sort})
- obj.data = final.reverse()
- obj.expand = 0
- }
- arr.push(obj)
- }
- this.maintainList = arr
- }
- })
- },
- //初始化地图
- initMap() {
- let that = this;
- maps = L.map("map", {
- center: new L.LatLng(38, 103),
- zoom: 4,
- crs: L.CRS.EPSG3857,
- minZoom: 3,
- maxZoom: 14,
- zoomControl: false,
- attributionControl: false,
- contextmenu: true,
- contextmenuWidth: 140,
- })
- maps.on('click', (ev)=>{
- })
- maps.on('zoomend', (ev)=>{
- })
- let JsonData = require("../../assets/geoData/china.json")
- let layer = L.geoJSON(JsonData.features, {
- style:function(){
- return {
- 'weight': 1,
- 'color': '#B3D2FF',
- 'fillColor':'#DEECFF'
- }
- }
- }).addTo(maps);
- if(this.currentLevel === 1) { //1集团 3区域 0广场
- this.pantGroupMap(this.currentDistrictData[0], this.currentSysId)
- } else if (this.currentLevel === 2) { // 2中心
- this.pantZonesMap(this.currentDistrictData[0], this.currentSysId)
- } else if (this.currentLevel === 0) {
- this.pantProjectsMap(this.currentDistrictData[0], this.currentSysId)
- }
- },
- //**清空地图 并添加全国底图*/
- clearAllLayers(){
- maps.eachLayer(function(layer){
- maps.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(maps);
- },
- /**
- * 移动地图到指定中心
- */
- panTo(center, zoom){
- maps.setView(center, zoom)
- },
- /**
- * 切换系统时 地图响应
- * @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广场
- if(this.currentLevel === 1) { //1集团 3区域 0广场
- this.pantGroupMap(this.currentDistrictData[0], system.smsxt)
- } else if (this.currentLevel === 2) { // 2中心
- this.pantZonesMap(this.currentDistrictData[0], system.smsxt)
- } else if (this.currentLevel === 0) {
- this.pantProjectsMap(this.currentDistrictData[0], system.smsxt)
- }
- },
- // 用于绘制集团地图
- pantGroupMap (data, sysId) {
- maps.setView([38,103],4)
- this.clearAllLayers()
- 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: {
- // "plazaId":1000423,
- "smsxt": sysId, //TODO that.systemList[0].smsxt
- "level":1,
- "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,
- marker:null
- })
- }
- resolve(item)
- }
- }
- })
- })
- promiseAll.push(promise)
- })
- Promise.all(promiseAll).then(result=>{
- setTimeout(()=>{
- layerArr.forEach(item => {
- let color = that.paintColorByData(item.num)
- let contentHtml = ''
- let popup = null
- let zone = this.zoneNames[item.name]
- let center = this.zoneCenter[zone]
-
- if (color && zone && center) {
- let myIcon = L.divIcon({
- html: item.name,
- className: 'my-leaflet-div-icon',
- iconSize:30
- })
- contentHtml= that.createPopupHtmlContent(item.list.assetTypeList)
-
- item.marker = L.marker([center[0]-2, center[1]], { icon: myIcon }).addTo(groupLayer)
- L.circle(center, 100000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
- L.circle(center, 50000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
- groupLayer.addTo(maps)
-
- item.marker.on('click', (ev)=>{
- groupLayer.clearLayers()
- this.createNavpathByData(item.data)
- this.pantZonesMap(item.data,sysId)
- })
- }
- })
- groupLayer.addTo(maps)
- },200)
- })
- },
-
- /**
- * 用于绘制中心下的地图
- */
- pantZonesMap (data, sysId) {
- this.clearAllLayers()
- let name = data.cname.substr(0,2)
- let zone = this.zoneNames[name]
- this.panTo(this.zoneCenter[zone], 6)
- let that = this
- let groupLayer = new L.layerGroup()
- data.children.forEach(item=>{
- let params = {
- getParams: {
- // "plazaId":1000423,
- "smsxt": sysId, //TODO that.systemList[0].smsxt
- "level": 2,
- "ccode":item.ccode
- }
- }
- querySystemCard(params).then(res => {
- if (res.result === "success") {
- let city = that.provinceCities[item.cname]
- let num = 0
- let contentHtml = ''
- let marker = null
- let popup = null
- let color = ""
- let center = city.center
- let myIcon = L.divIcon({
- html: item.cname,
- className: 'my-leaflet-div-icon',
- iconSize:30
- })
- if (res.data) {
- let equip = res.data[0]
- if (equip.assetTypeList.length > 3) {
- equip.assetTypeList = equip.assetTypeList.splice(0,3)
- }
- contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach(item => {
- if (item.is_exception_num) {
- num += item.is_exception_num
- }
- })
- }
- }
- color = that.paintColorByData(num)
- if (color && color.border && color.area && center) {
- marker = L.marker([center[0] -0.5, center[1]], { icon: myIcon }).addTo(groupLayer)
- L.circle(center, 20000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
- L.circle(center, 10000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
- }
- groupLayer.addTo(maps)
- marker.on('click', (ev)=>{
- groupLayer.clearLayers()
- this.pantProjectsMap(item,sysId)
- this.createNavpathByData(item)
-
- })
- }
- })
- })
- },
- /***
- * 用于绘制项目的点
- */
- pantProjectsMap (data,sysId) {
- this.clearAllLayers()
- let geo = this.provinceCities[data.cname]
- this.panTo(geo.center, geo.zoom)
- data.children.forEach(item=>{
- this.pantPlazaMap(item, sysId)
- })
- },
- /**
- * 用于绘制广场的点
- */
- pantPlazaMap (item, sysId , flag) {
- let that = this
- let center = [item.latitude , item.longitude]
- if (flag) {
- this.clearAllLayers()
- this.panTo(center,11)
- }
- let params = {
- getParams: {
- // "plazaId":1000423,
- "smsxt": sysId, //TODO that.systemList[0].smsxt
- "level": 0,
- "ccode":item.ccode
- }
- }
- querySystemCard(params).then(res => {
- if (res.result === "success") {
- let num = 0
- let contentHtml = ''
- let marker = null
- let popup = null
- let color = ""
- if (item.latitude && item.longitude) {
- let myIcon = L.divIcon({
- html: item.cname,
- className: 'my-leaflet-div-icon',
- iconSize:30
- })
- if (res.data) {
- let equip = res.data[0]
- if (equip.assetTypeList.length > 3) {
- equip.assetTypeList = equip.assetTypeList.splice(0,3)
- }
- contentHtml= that.createPopupHtmlContent(equip.assetTypeList)
- if (equip.assetTypeList) {
- equip.assetTypeList.forEach(item => {
- if (item.is_exception_num) {
- num += item.is_exception_num
- }
- })
- }
- }
-
- color = that.paintColorByData(num)
- let zoom = maps.getZoom()
- let size = this.circleSize[zoom]
- marker = L.marker([center[0]-size.offset, center[1]], { icon: myIcon }).addTo(maps)
- L.circle(center, size.outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(maps);
- L.circle(center, size.innder, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(maps);
- marker.on("click", (ev) => {
- // that.$router.push({path:'./'})
- })
- }
- }
- })
-
- },
- /**
- * 生成弹框HTML
- */
- createPopupHtmlContent (data) {
- if (Array.isArray(data) && data.length) {
- let that = this
- let html = ""
- for (let i =0 ; i < data.length; 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>${that.currentSelectedSys.smsxtname}</span>-<span>${that.currentZone.cname}</span></div>
- ${html}</div>`
- } else {
- return ""
- }
- },
- /**
- * 根据数据创建导航路径
- */
- 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.currentZone = data
- },
-
- },
- components: {}
- }
- </script>
- <style scoped lang="less">
- .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{
- padding-left: 10px;
- border-left: 4px solid #025BAA;
- color: #1F2429;
- font-size: 1.6rem;
- font-weight: bolder;
- line-height: 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{
- li.system-item{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: calc(100% - 3.2rem);
- margin-left: 1.6rem;
- padding: 2.7rem 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: 30%;
- padding-right: 2rem;
- padding-left:1.6rem;
- .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;
- border-right: 1px solid #EFF0F1;
- }
- }
- .system-equipments{
- width: 70%;
- display: flex;
- align-items: center;
- .number{
- width: 33.3%;
- p:nth-of-type(1) {
- position: relative;
- color: #1F2429;
- font-size: 1.4rem;
- line-height: 1.6rem;
- span{
- position: absolute;
- top:-10px;
- 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: 70rem;
- #map{
- height: 70rem;
- overflow: hidden;
- }
- .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;
- }
- em{
- }
- }
- }
- }
- }
- .ratio-list{
- width: 18%;
- .block{
- position: relative;
- padding:1.2rem 1.6rem;
- border-radius: 4px;
- margin-bottom: 1.2rem;
- background: white;
- .section-title{
- font-size: 1.6rem;
-
- }
- .list{
- margin-top: 1.4rem;
- height: 21rem;
- overflow: hidden;
- transition: height 0.3s ease-in-out;
- ul{
- overflow: hidden;
- 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.5rem;
- left:50%;
- cursor: pointer;
- transform-origin: center center;
- transform: translateX(-50%) rotate(90deg);
- }
- }
- section:last-child.block{
- margin-bottom: 0;
- }
- }
- }
- }
- </style>
-
|