~admin/dmvisit.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,3235 @@
			<template>
			<v-scale-screen width="1920" height="960">
			<div class="main_app">
			<img src="@/assets/images/LogisticsCenter/bg@2x.png" class="main_bg" alt="" />
			<div class="main_header">
			<img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
			<div class="title">å®å¾½ä¸çæ°æºæåç®¡æ§</div>
			<div class="time_wrap">
			<span class="date">{{ date }}</span>
			<span class="week">{{ week }}</span>
			<span class="time">{{ time }}</span>
			</div>
			</div>
			<div class="main_content">
			<div class="left_box">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>è®¢åå¨éè·è¸ª</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="left_box_one">
			<Loading v-if="loading1" />
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>ç´¯è®¡åºåºé(ç®±)</div>
			<div class="question">
			<img src="@/assets/images/ic_question@2x.png" style="margin-left: 6px;" class="icon" alt="">
			<div class="hover_wrap">
			<div class="triangle"></div>
			<div class="title">ç´¯è®¡åºåºéç»è®¡è¯´æï¼</div>
			<div>ç´¯è®¡åºåºéï¼ææç©æµåºåºä½ä¸æ°æ®ï¼åå«èè¥å å·¥ï¼åè¿ãè½å°éå®ï¼ãåç½®åºç§»åº(æé½/ä¸´æ²)çææåºåºä½ä¸æ°æ®ï¼</div>
			</div>
			</div>
			</div>
			<div class="tabs">
			<div class="tab" :class="{ active: activeTab1 == 1 }" @click="tab1Click(1)">æ¬å¨</div>
			<div class="separate"></div>
			<div class="tab" :class="{ active: activeTab1 == 0 }" @click="tab1Click(0)">æ¬æ</div>
			<div class="separate"></div>
			<div class="tab" :class="{ active: activeTab1 == 2 }" @click="tab1Click(2)">æ¬å¹´</div>
			</div>
			</div>
			<div class="content_wrap">
			<div class="num_wrap">
			<div class="question1">
			<div class="hover_con">
			<div class="num_list" v-if="StockOutData.currentNum \|\| StockOutData.currentNum == 0">
			<div class="num" v-for="i in StockOutData.currentNum + ''">
			{{ i }}
			<img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
			</div>
			</div>
			<div class="hover_wrap">
			<div class="triangle"></div>
			<div class="title" v-if="StockOutData.currentProvinceNum \|\| StockOutData.currentProvinceNum == 0">
			è°æ¨åºåºéï¼{{ StockOutData.currentProvinceNum.toFixed(0) }}ç®±</div>
			<div class="title" v-if="StockOutData.currentOtherNum \|\| StockOutData.currentOtherNum == 0">
			å¶ä»åºåºéï¼{{ StockOutData.currentOtherNum.toFixed(0) }}ç®±</div>
			</div>
			</div>

			</div>
			<div class="content" v-if="false">
			<div class="unit_wrap">
			<span class="la">åæ¯</span>
			<template v-if="StockOutData.sameOutNum">
			<img v-if="StockOutData.currentOutNum >= StockOutData.sameOutNum" src="@/assets/images/ic_up.png"
			class="icon" alt="">
			<img v-else src="@/assets/images/ic_down.webp" class="icon" alt="">
			</template>
			<span v-if="StockOutData.sameOutNum">{{ Math.abs((((StockOutData.currentOutNum
			-
			StockOutData.sameOutNum) /
			StockOutData.sameOutNum)
			* 100).toFixed(2)) }}%</span>
			<span v-else style="margin-left: 6px;">-</span>
			<span v-if="StockOutData.totalCarNum" class="la"
			style="margin-left: 30px;margin-right: 10px;">ç´¯è®¡åºåºè½¦æ¬¡</span>
			<span>{{ StockOutData.totalCarNum \|\| '' }}</span>
			</div>

			</div>
			</div>
			<div class="echart_wrap">
			<div class="echart1" id="echart1"></div>
			<div class="list">
			<div class="item" v-for="item, i in StockOutData.arr" :key="i">
			<div :style="{ background: colors[i] }" class="icon"></div>
			<div class="text">{{ item.name }}</div>
			<div class="num">{{ item.rate }}</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="left_box_two">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>è¿7æ¥å°è´§æåµ</div>
			</div>
			</div>
			<div class="energy_wrap">
			<div class="energyRef"></div>
			</div>
			</div>
			<div class="left_box_three">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>å½åè®¢åä»»å¡</div>
			</div>
			<div class="search_wrap">
			<img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
			<input class="input" type="text" placeholder="è®¢åæ¥è¯¢" @keyup.enter="getData2" @blur="getData2"
			v-model="taskCode">
			<!-- <span>è®¢åæ¥è¯¢</span> -->
			</div>
			</div>
			<div class="list_wrap">
			<div class="header line">
			<span class="item">ååå·</span>
			<span class="item status">è®¢åç¶æ</span>
			<span class="item">ç®çå°</span>
			<span class="item">ä»»å¡ä¸è¾¾æ¶é´</span>
			</div>
			<div class="one-swiper list">
			<div class="swiper-wrapper">
			<div :class="{ avtive: modalInfo.contractNumber == item.contractNumber }"
			class="line one-swiper-slide swiper-slide item" @click="taskClick(item)"
			v-for="(item, i) in transportTask" :key="i">
			<span class="item">{{ item.contractNumber }}</span>
			<span class="item status">{{ item.statusDesc }}</span>
			<span class="item">{{ item.receiveEnterprise }}</span>
			<span class="item">{{ item.createDate \|\| '-' }}</span>
			</div>
			</div>
			</div>
			<template v-if="isLoadingTask \|\| transportTask.length == 0">
			<Loading v-if="isLoadingTask" />
			<div class="empty" v-else>
			<img src="@/assets/images/default_nodata.png" alt="">
			</div>
			</template>
			</div>
			</div>
			</div>
			<div class="center_box">
			<div class="center_box_one">
			<div class="header_wrap">
			<div class="left">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<span>åºåºè½å</span>
			<div class="question">
			<img src="@/assets/images/ic_question@2x.png" style="margin-left: 4px;" class="icon" alt="">
			<div class="hover_wrap">
			<div class="triangle"></div>
			<div class="title">åºåºè½åç»è®¡è¯´æï¼</div>
			<div>1ãå½åè®¢åéï¼æªè³ç®åæªéè½½çè®¢åé</div>
			<div>2ãå½åä»»å¡éï¼ææå·²ä¸è¾¾è¿è¾ä¸æªåºåºçä»»å¡éï¼æªæ¢ç®åå·²éè½½æªåºåº+æ ééè½½çä»»å¡(ååä»»å¡é)</div>
			<div>3ãä»æ¥åºåºéï¼ä»æ¥å®éåºåºéï¼ä»¥çµåéä¸éä¸ºå</div>
			<div>4ãå©ä½ä»»å¡éï¼æ°æ®åå½åä»»å¡éï¼å¼¹çªåå«å±ç¤ºååºåè¿è¾ä»»å¡é</div>
			</div>
			</div>
			</div>
			<div class="right">
			<img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/position.png" class="posi" alt="">
			<span @click="showPro = !showPro">{{ activeCity.name }}</span>
			<img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt="">
			<div v-if="showPro" class="select_op">
			<div class="line" @click="cityClick(item)" v-for="item in cityList">{{ item.name }}</div>
			</div>
			</div>
			</div>
			<div class="static_wrap">
			<div class="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
			<div class="content">
			<div class="name">å½åè®¢åé</div>
			<div class="num"><span class="blue"
			v-if="cneterData.currentOrderNum \|\| cneterData.currentOrderNum == 0">{{
			cneterData.currentOrderNum }}</span>ç®±</div>
			</div>
			</div>
			<div class="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2.png" alt="">
			<div class="content">
			<div class="name">å½åä»»å¡é</div>
			<div class="num"><span v-if="cneterData.currentPlanNum \|\| cneterData.currentPlanNum == 0">{{
			cneterData.currentPlanNum }}</span>ç®±</div>
			<div class="unit">è½¦æ¬¡ï¼{{ cneterData.currentPlanCarNum }}</div>
			</div>
			</div>
			<div class="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt="">
			<div class="content">
			<div class="name">ä»æ¥åºåºé</div>
			<div class="num"><span v-if="cneterData.crrentOutNum \|\| cneterData.crrentOutNum == 0"
			class="finish">{{
			cneterData.crrentOutNum }}</span>ç®±</div>
			<div class="unit">è½¦æ¬¡ï¼{{ cneterData.crrentOutCarNum }}</div>
			</div>
			</div>
			<div class="tooltip_wrap">
			<div class="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
			<div class="content">
			<div class="name">å©ä½ä»»å¡é</div>
			<div class="num"><span v-if="cneterData.crrentRestNum \|\| cneterData.crrentRestNum == 0"
			class="today">{{
			cneterData.crrentRestNum }}</span>ç®±</div>
			<div class="unit">è½¦æ¬¡ï¼{{ cneterData.crrentRestCarNum }}</div>
			</div>
			</div>
			<div class="tooltip">
			<div class="triangle"></div>
			<div>è¿è¾ä»»å¡éï¼{{ cneterData.needTransportOrderNum }}ç®±</div>
			<div>ååå±åºä»»å¡éï¼{{ cneterData.noNeedTransportOrderNum }}ç®±</div>
			</div>
			</div>
			</div>
			<div class="footer">
			<div class="wrap">
			<div class="content" :style='{ width: cneterData.level1 }'>
			<div class="scale">0</div>
			<!-- <div class="node">
			<div>8h</div>
			<div class="node_icon">
			<div class="icon icon1"></div>
			<div class="icon icon2"></div>
			</div>
			</div> -->
			<div :style="{ width: cneterData.level3 }"
			:class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box">
			<div class="tooltip_wrap">
			<div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
			<div class="icon"></div>
			<span>ä»æ¥åºåº</span>
			</div>
			<div class="tooltip">
			<div class="triangle"></div>ä»æ¥åºåºéï¼{{ cneterData.crrentOutNum }}ç®±
			</div>
			</div>
			</div>
			<div :style="{ width: cneterData.level2 }" class="box box1">
			<div class="tooltip_wrap">
			<div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
			<div class="icon"></div>
			<span>å½åä»»å¡</span>
			</div>
			<div class="tooltip">
			<div class="triangle"></div>å½åä»»å¡éï¼{{ cneterData.currentPlanNum }}ç®±
			</div>
			</div>
			</div>
			</div>
			<div class="side">
			<div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{ width: cneterData.level33 }"
			class="box box22">
			<div class="tooltip_wrap">
			<div class="tag">
			<div class="icon"></div>
			<span>ä»æ¥åºåº</span>
			</div>
			<div class="tooltip">
			<div class="triangle"></div>ä»æ¥åºåºéï¼{{ cneterData.crrentOutNum }}ç®±
			</div>
			</div>
			</div>
			<div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
			:style="{ width: cneterData.level22 }" class="box box1 box11">
			<div class="tooltip_wrap">
			<div class="tag tag1">
			<div class="icon"></div>
			<span>å½åä»»å¡</span>
			</div>
			<div class="tooltip">
			<div class="triangle"></div>å½åä»»å¡éï¼{{ cneterData.currentPlanNum }}ç®±
			</div>
			</div>
			</div>
			<!-- <div class="box"></div> -->
			<div class="scale" style="left: -12px;">
			<div class="tooltip_wrap">
			<span>8h</span>
			<div class="tooltip">
			<div class="triangle"></div>8å°æ¶åºåºè½åï¼{{ cneterData.hoursAbility }}ç®±
			</div>
			</div>
			</div>
			<div class="scale scale1">
			<div class="tooltip_wrap">
			<span>æå¤§</span>
			<div class="tooltip">
			<div class="triangle"></div>æå¤§åºåºè½åï¼{{ cneterData.maxAbility }}ç®±
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="center_box_two">
			<div class="echart_map" ref="mapEchart" id="echart_map"></div>
			<div v-if="showModal1" class="modal1">
			<div class="content">
			<div class="head line">
			<div class="item">è½¦çå·</div>
			<div class="item">ååå·</div>
			<div class="item addr">ç®çå°</div>
			</div>
			<div class="list">
			<div class="line" v-for="item in active1List">
			<div class="item">{{ item.platNumber }}</div>
			<div class="item">{{ item.contractNumber }}</div>
			<div class="item addr">{{ item.repertotyName }}</div>
			</div>
			</div>
			</div>
			</div>
			<!-- <div class="list">
			<div class="item">
			<div class="icon"></div>
			<div class="text">åºåºé10wä»¥ä¸</div>
			</div>
			<div class="item">
			<div class="icon icon2"></div>
			<div class="text">åºåºé5-10w</div>
			</div>
			<div class="item">
			<div class="icon icon3"></div>
			<div class="text">åºåºé2-5w</div>
			</div>
			<div class="item">
			<div class="icon icon4"></div>
			<div class="text">åºåºé2wä»¥ä¸</div>
			</div>
			</div> -->
			</div>
			</div>
			<div class="right_box">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>ä»å¨ä¸åºå¶</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="right_box_three">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>ä»åºèµæºå©ç¨ç</div>
			</div>
			<div class="side">
			å¨çï¼
			<span>{{ data5.currentNum }}</span>
			<span class="unit">ç®± \| </span>
			<span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span>
			</div>
			</div>
			<div class="echart5_wrap">
			<div class="echart5" id="echart5"></div>
			</div>
			</div>
			<div class="right_box_three">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>åºåºè½åå©ç¨ç</div>
			</div>
			<div class="side">
			å¨çï¼
			<span>{{ data6.currentNum }}</span>
			<span class="unit">ç®± \| </span>
			<span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span>
			</div>
			</div>
			<div class="echart5_wrap">
			<div class="echart5" id="echart6"></div>
			</div>
			</div>
			<div class="right_box_three">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>è¿åèµæºå©ç¨ç</div>
			</div>
			<div class="side">
			å¨çï¼
			<span>{{ data7.currentNum }}</span>
			<span class="unit">è¾ \| </span>
			<span v-if="data7.totalNum">{{ (data7.useRate * 100).toFixed(1) }}%</span>
			</div>
			</div>
			<div class="echart5_wrap">
			<div class="echart5" id="echart7"></div>
			</div>
			</div>
			</div>
			</div>
			<!-- -->
			<div class="modal_wrap" v-if="showModal">
			<div class="title_head">
			<div class="left">
			<img src="@/assets/images/LogisticsCenter/ic_hetong.png" alt="">
			<span>ååå·ï¼{{ modalInfo.contractNumber }}</span>
			</div>
			<div class="tit_status">{{ modalInfo.orderStatusDesc }}</div>
			</div>
			<div v-if="modalInfo.overStock && modalInfo.overStock == 1" class="stock">
			<img src="@/assets/images/LogisticsCenter/ic_tips@2x.png" alt="">
			<span>å åºåä¸è¶³ï¼è®¢åææ¶æ æ³éè½½</span>
			</div>
			<div class="info">
			<div class="item">
			<div class="dian"></div>
			<div class="la">å¸æºä¿¡æ¯ï¼</div>
			<div class="val">{{ modalInfo.driverName }} {{ modalInfo.driverTel }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">è½¦çå·ï¼</div>
			<div class="val">{{ modalInfo.plateName }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">åè´§å°ç¹ï¼</div>
			<div class="val">{{ modalInfo.deliveryEnterprise }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">å°è´§å°ç¹ï¼</div>
			<div class="val">{{ modalInfo.receiveEnterprise }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">è½¦è¾ä½ç½®ï¼</div>
			<div class="val">{{ modalInfo.position \|\| '-' }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">é¢è®¡å°è¾¾ï¼</div>
			<div class="val" v-if="modalInfo.plannedArrivedDate">{{ modalInfo.plannedArrivedDate.slice(0, 11) }}</div>
			</div>
			</div>
			<div class="logistics_wrap">
			<div class="m_title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt="">
			<span>ç©æµä¿¡æ¯</span>
			</div>
			<div id="map-container" ref="mapContainer"></div>
			<div class="fu_list">
			<div class="fu_item" v-for="item, k in modalInfo.cicleStatusList">
			<view v-if="k != modalInfo.cicleStatusList.length - 1" class="separate"></view>
			<div class="item_title">
			<div class="icon">
			<img v-if="item.key == 0 && k != 0" src="@/assets/images/LogisticsCenter/ic_dingdan@2x.png"
			class="icon"></img>
			<img v-if="item.key == 0 && k == 0" src="@/assets/images/LogisticsCenter/ic_dingdan_sel@2x.png"
			class="icon"></img>
			<img v-if="item.key == 1 && k != 0" src="@/assets/images/LogisticsCenter/ic_peizai@2x.png"
			class="icon"></img>
			<img v-if="item.key == 1 && k == 0" src="@/assets/images/LogisticsCenter/ic_peizai_sel@2x.png"
			class="icon"></img>
			<img v-if="item.key == 2 && k != 0" src="@/assets/images/LogisticsCenter/ic_cangku@2x.png"
			class="icon"></img>
			<img v-if="item.key == 2 && k == 0" src="@/assets/images/LogisticsCenter/ic_cangku_sel@2x.png"
			class="icon"></img>
			<img v-if="item.key == 3 && k != 0" src="@/assets/images/LogisticsCenter/ic_yunshu@2x.png"
			class="icon"></img>
			<img v-if="item.key == 3 && k == 0" src="@/assets/images/LogisticsCenter/ic_yunshu_sel@2x.png"
			class="icon"></img>
			<img v-if="item.key == 4 && k != 0" src="@/assets/images/LogisticsCenter/ic_daohuo@2x.png"
			class="icon"></img>
			<img v-if="item.key == 4 && k == 0" src="@/assets/images/LogisticsCenter/ic_daohuo_sel@2x.png"
			class="icon"></img>
			<img v-if="item.key == 5" src="@/assets/images/LogisticsCenter/ic_dangqian@2x.png" class="icon"></img>
			</div>
			<div>{{ item.name }}</div>
			</div>
			<div class="item" v-for="ite, i in item.secondList">
			<div class="h2" v-if="ite.orderStatusDes">
			<div class="icon_wrap" v-if="i != 0">
			<image src="@/static/driver/ic_mostarted.png" class="icon"></image>
			</div>
			<div v-else class="icon_wrap"></div>
			<div class="text" :class="{ placeholder3: k == 0 && i == 0 }">
			{{ ite.orderStatusDes }}
			<text v-if="ite.tel">,åè´§ä»åºçµè¯ï¼</text>
			<text v-if="ite.tel" class="primaryColor">{{ ite.tel }}</text>
			</div>
			</div>
			<div class="time">{{ ite.recordDate }}</div>
			</div>
			</div>
			</div>
			</div>
			<Loading v-if="modalLoading" />
			</div>
			<div class="modal_mask" v-if="showModal \|\| showModal1" @click="closeModal"></div>
			</div>
			</v-scale-screen>
			</template>

			<script setup>
			import { ref, onMounted, nextTick } from 'vue'
			import VScaleScreen from 'v-scale-screen'
			import Percent from '@/components/percent.vue'
			import dayjs from 'dayjs'
			import axios from "axios"
			import * as echarts from 'echarts'
			import 'swiper/css/swiper.min.css'
			import Swiper from 'swiper'
			import Map from '@/components/Map.vue'
			import chinaJSON from '@/assets/china.json'
			import fahuoImg from '@/assets/images/LogisticsCenter/ic_fahuodi@2x.png'
			import shouImg from '@/assets/images/LogisticsCenter/ic_huowu@2x.png'
			// import Loading from 'vue-loading-overlay'
			// import 'vue-loading-overlay/dist/css/index.css'
			import Loading from '@/components/Loading.vue'

			import {
			getStoreOperationList,
			getStorecenterData,
			getStoreenergyDataList,
			getStorelastMonthOil,
			getStoreTaskList,

			kztotalOutQtyNum,
			kzorderInfo,
			mapYearAndMonthOutList,
			kzinventoryUseRate,
			outAbilityUseRate,
			tranportAbilityUseRate,
			kzfactoryList,
			arriveGoodsList
			} from '@/api'

			const weekMap = ['æææ¥', 'ææä¸', 'ææäº', 'ææä¸', 'ææå', 'ææäº', 'ææå',]
			const date = ref(dayjs().format('YYYY.MM.DD'))
			const week = ref(weekMap[new Date().getDay()])
			const time = ref(dayjs().format('HH:mm:ss'))
			setInterval(() => {
			date.value = dayjs().format('YYYY-MM-DD')
			week.value = weekMap[new Date().getDay()]
			time.value = dayjs().format('HH:mm:ss')

			}, 1000)
			//
			const mapList = ref([])
			const mapEchart = ref()
			const initMap = () => {
			var myChart = echarts.init(mapEchart.value)
			echarts.registerMap('china', chinaJSON)
			var points = [
			// ç¹åæ
			{ value: [117.1582, 36.8701, 100], itemStyle: { color: '#6ae5e0' }, name: 'å±±ä¸', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
			{ value: [117.29, 32.0581, 90], itemStyle: { color: '#6ae5e0' }, name: 'å®å¾½', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
			{ value: [114.3896, 30.6628, 1999], itemStyle: { color: '#6ae5e0' }, name: 'æ¹å', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 },
			{ value: [119.5313, 29.8773, 2], itemStyle: { color: '#6ae5e0' }, name: 'æµæ±', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 },
			{ value: [113.12244, 23.009505, 12], itemStyle: { color: '#6ae5e0' }, name: 'å¹¿ä¸', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 },
			{ value: [103.9526, 30.7617, 1901], itemStyle: { color: '#fff' }, name: 'åå·', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 }
			]
			const mapData = [
			{ name: 'åäº¬å¸', code: '110000', value: 0 },
			{ name: 'å¤©æ´¥å¸', code: '120000', value: 0 },
			{ name: 'ä¸æµ·å¸', code: '310000', value: 0 },
			{ name: 'éåºå¸', code: '500000', value: 0 },
			{ name: 'æ²³åç', code: '130000', value: 0 },
			{ name: 'æ²³åç', code: '410000', value: 0 },
			{ name: 'äºåç', code: '530000', value: 0 },
			{ name: 'è¾½å®ç', code: '210000', value: 0 },
			{ name: 'é»é¾æ±ç', code: '230000', value: 0 },
			{ name: 'æ¹åç', code: '430000', value: 0 },
			{ name: 'å®å¾½ç', code: '340000', value: 0 },
			{ name: 'å±±ä¸ç', code: '370000', value: 0 },
			{ name: 'æ°çç»´å¾å°èªæ²»åº', code: '650000', value: 0 },
			{ name: 'æ±èç', code: '320000', value: 0 },
			{ name: 'æµæ±ç', code: '330000', value: 0 },
			{ name: 'æ±è¥¿ç', code: '360000', value: 0 },
			{ name: 'æ¹åç', code: '420000', value: 0 },
			{ name: 'å¹¿è¥¿å£®æèªæ²»åº', code: '450000', value: 0 },
			{ name: 'çèç', code: '620000', value: 0 },
			{ name: 'å±±è¥¿ç', code: '140000', value: 0 },
			{ name: 'åèå¤èªæ²»åº', code: '150000', value: 0 },
			{ name: 'éè¥¿ç', code: '610000', value: 0 },
			{ name: 'åæç', code: '220000', value: 0 },
			{ name: 'ç¦å»ºç', code: '350000', value: 0 },
			{ name: 'è´µå·ç', code: '520000', value: 0 },
			{ name: 'å¹¿ä¸ç', code: '440000', value: 0 },
			{ name: 'éæµ·ç', code: '630000', value: 0 },
			{ name: 'è¥¿èèªæ²»åº', code: '540000', value: 0 },
			{ name: 'å®å¤åæèªæ²»åº', code: '640000', value: 0 },
			{ name: 'åå·ç', code: '510000', value: 0 },
			{ name: 'å®å¤ç', code: '640000', value: 0 },
			{ name: 'æµ·åç', code: '460000', value: 0 },
			{ name: 'å°æ¹¾ç', code: '710000', value: 0 },
			{ name: 'é¦æ¸¯ç¹å«è¡æ¿åº', code: '810000', value: 0 },
			{ name: 'æ¾³é¨ç¹å«è¡æ¿åº', code: '820003', value: 0 },
			{ name: 'åæµ·è¯¸å²', code: '', value: 0 },
			]
			let totalNum = 0
			mapList.value.forEach(i => {
			totalNum += i.yearNum
			})
			mapData.forEach(item => {
			item.monthNum = 0
			item.yearNum = 0
			mapList.value.forEach(ite => {
			if (item.code == ite.code) {
			item.value = 0
			item.monthNum = ite.monthNum
			item.yearNum = ite.yearNum
			if (totalNum > 0) {
			item.rate = ((ite.yearNum / totalNum) * 100).toFixed(2)
			item.value = (ite.yearNum / totalNum).toFixed(4)

			}
			}
			})
			})

			const option = {
			//æ°æ®åæ®µ
			visualMap: {
			type: 'piecewise',
			pieces: [
			{ min: 0.05, max: 99999999999, label: 'è°æ¨éå æ¯5%ä»¥ä¸', color: '#be6f2b' },
			{ min: 0.02, max: 0.05, label: 'è°æ¨éå æ¯2%~5%', color: '#c39332' },
			{ min: 0.01, max: 0.02, label: 'è°æ¨éå æ¯1%~2%', color: '#5ecbaf' },
			{ min: -1, max: 0.01, label: 'è°æ¨éå æ¯1%ä»¥ä¸', color: '#3561a4' },
			// { min: 100000, max: 99999999999, label: 'åºåºé10wä»¥ä¸', color: '#be6f2b' },
			// { min: 50000, max: 100000, label: 'åºåºé5-10w', color: '#c39332' },
			// { min: 20000, max: 50000, label: 'åºåºé2-5w', color: '#5ecbaf' },
			// { min: -1, max: 20000, label: 'åºåºé2wä»¥ä¸', color: '#3561a4' },
			],
			itemWidth: 22,
			itemHeight: 22,
			textStyle: {
			color: '#fff', // ææ¬é¢è²
			fontSize: 14, // åä½å¤§å°
			},
			},
			// æ¬æµ®çª
			tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(0,0,0,0.8)', //è®¾ç½®èæ¯å¾ç rgbaæ ¼å¼
			color: '#fff',
			borderWidth: '1', //è¾¹æ¡å®½åº¦è®¾ç½®1
			borderColor: 'gray', //è®¾ç½®è¾¹æ¡é¢è²
			textStyle: {
			color: '#fff', //è®¾ç½®æåé¢è²
			},
			extraCssText: 'width:120px;height:40px', // è®¾ç½®æç¤ºæ¡å®½é«çcssæ ·å¼
			formatter: function (params) {
			return `${params.name}: <br /> ${params.value \|\| 0}è¾`
			},
			},
			geo: {
			// è¿ä¸ªæ¯éç¹ ââ è¿éè®¾ç½®ä¸ºå°å¾çé´å½±
			map: 'china', // è¡¨ç¤ºä¸å½å°å¾
			roam: false, // ç¦æ¢ææ½
			label: {
			// æ å¿ä¿¡æ¯
			show: false, // æ¯å¦æ¾ç¤ºå¯¹åºå°å
			},
			silent: true, // ç¦æ¢hoverææ
			zoom: 1.4, // å°å¾æ¯ä¾
			aspectScale: 0.9, // æ¯ä¾
			center: [105.194115019531, 36.582111640625], // å°å¾ä¸å¿ä½ç½®ï¼ æ¤å¤ççº¬åº¦ä¸ä¸é¢çcenterç¸å·®1åº¦æ¯å½¢æé´å½±çè·ç¦»ï¼å¯èªå·±éæè°æ´
			itemStyle: {
			areaColor: '#152e4a', //å°å¾é´å½±çé¢è²
			borderColor: '#779dc8', // çä»½è¾¹æ¡é¢è²
			borderWidth: 0.5, // çä»½è¾¹æ¡å®½åº¦
			// shadowBlur: 5, // çä»½è¾¹æ¡èç¦
			},
			emphasis: {
			show: false,
			},
			//å°å¾çé´å½±ä¸æ¾ç¤ºåæ²è¯¸å²
			regions: [
			{
			name: 'åæµ·è¯¸å²',
			itemStyle: {
			// éèå°å¾
			normal: {
			opacity: 0, // ä¸º 0 æ¶ä¸ç»å¶è¯¥å¾å½¢
			},
			emphasis: {
			opacity: 0,
			},
			},
			label: {
			show: false, // éèæå
			},
			},
			],
			},
			//éç½®å±æ§
			series: [
			{
			type: 'map',
			map: 'china',
			zoom: 1.4,
			aspectScale: 0.9, // æ¯ä¾
			zlevel: 1, // è®¾ç½®å°å¾çå±çº§ï¼å°è¯¥å°å¾ä¸ç§»ï¼ç±»ä¼¼z-indexï¼
			emphasis: {
			// é¼ æ hoveræ¯å¦æ¾ç¤ºåå®¹ï¼å¯èªå·±è°è
			label: {
			show: true,
			color: '#fff',
			},
			itemStyle: {
			show: true,
			color: '#fff', // é«äº®æåé¢è²
			borderColor: '#a4d0ec', // é«äº®è¾¹æ¡é¢è²
			areaColor: '#0056FF', //é«äº®åºåé¢è²
			},
			},
			selectedMode: false,
			label: {
			// å°å¾æ æ³¨
			show: false,
			},
			tooltip: {
			show: true,
			triggerOn: 'click',
			backgroundColor: 'rgba(0,0,0,0)',
			padding: 0,
			borderWidth: 0,
			extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', // å»é¤box-shadowé´å½±
			formatter: (params) => {
			return `<div class="map-tip-box">
			<div class="item-state-con title">
			<div class="icon"></div>
			<span>${params.data.name}</span>
			</div>
			<div class="item-state-con">
			<span class="dot bj"></span>
			<span class="item-state-num">
			<span class="text">æ¬æè°æ¨éï¼</span>
			<span class="num">${params.data.monthNum}ç®±</span>
			</span>
			</div>
			<div class="item-state-con">
			<span class="dot yj"></span>
			<span class="item-state-num">
			<span class="text">æ¬å¹´è°æ¨éï¼</span>
			<span class="num">${params.data.yearNum}ç®±</span>
			</span>
			</div>
			<div class="item-state-con">
			<span class="dot yj"></span>
			<span class="item-state-num">
			<span class="text">è°æ¨éå æ¯ï¼</span>
			<span class="num">${params.data.rate \|\| 0}%</span>
			</span>
			</div>
			</div>`
			}
			},
			itemStyle: {
			borderColor: '#a4d0ec', // çä»½è¾¹æ¡é¢è²
			borderWidth: 1, // çä»½è¾¹æ¡å®½åº¦
			// shadowBlur: 5, // çä»½è¾¹æ¡èç¦
			areaColor: '#3c5997',
			},
			center: [105.194115019531, 35.582111640625], // è®¾ç½®å°å¾ä¸å¿
			data: mapData,
			},
			],
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () {//æ§è¡
			myChart.resize()
			})
			}
			const getMap = () => {
			mapYearAndMonthOutList({
			factoryCode: activeCity.value.code
			}).then(res => {
			const temp = res.data \|\| []
			mapList.value = temp.map(item => {
			item.value = item.monthNum
			item.name = item.provinceName
			item.code = item.provinceCode
			return item
			})
			initMap()
			})
			}
			const initEnergy = () => {
			var myChart = echarts.init(document.querySelector('.energyRef'))
			// ç»å¶å¾è¡¨
			myChart.setOption({
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			// Use axis to trigger tooltip
			type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
			},
			legend: {
			itemGap: 24,
			// icon: 'circle',
			right: '12px',
			top: '16px',
			itemWidth: 28,
			itemHeight: 14,
			textStyle: {
			color: '#fff',
			borderColor: '#fff'
			},
			},
			dataZoom: [
			{
			type: 'slider', // æ»å¨æ¡ç±»å
			orient: 'vertical',
			left: 'left',
			start: 0, // èµ·å§ä½ç½®ï¼ç¾åæ¯ï¼
			end: 40, // ç»æä½ç½®ï¼ç¾åæ¯ï¼ï¼æ§å¶åå§æ¾ç¤ºèå´
			width: 1,
			backgroundColor: '#04141d', // æ»å¨æ¡èæ¯è²
			// dataBackground: 'none',
			dataBackground: {
			areaStyle: { opacity: 0 }, // è®¾ç½®èæ¯éæ
			lineStyle: { opacity: 0 } // è®¾ç½®èæ¯éæ
			},
			borderColor: '#04141e', // è¾¹æ¡é¢è²
			moveOnMouseWheel: true,
			// showDetail: false, // éèéä¸èå´çæå
			},
			{
			type: 'inside', // ç¨äºçå¬æ»è½®äºä»¶
			orient: 'vertical',
			start: 0,
			end: 40,
			minSpan: 40,
			dataBackground: {
			areaStyle: { opacity: 0 } // è®¾ç½®èæ¯éæ
			},
			maxSpan: 40,
			zoomLock: true, // éå®ç¼©æ¾ï¼ä»åè®¸å¹³ç§»ï¼
			moveOnMouseWheel: true, // å¯ç¨æ»è½®å¹³ç§»
			// zoomOnMouseWheel: false // ç¦ç¨æ»è½®ç¼©æ¾
			}
			],
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			top: '16%',
			containLabel: true
			},
			xAxis: {
			type: 'value',
			axisLabel: {
			color: '#D2E0FF'
			},
			splitLine: {
			show: true,
			lineStyle: {
			//è¿éè¾å¥çº¿æ¡çæ ·å¼
			color: 'rgba(255,255,255,0.14)'
			},
			splitNumber: 4
			}
			},
			yAxis: {
			axisTick: {
			show: false,
			},
			axisLabel: {
			color: '#D2E0FF'
			},
			type: 'category',
			axisLine: {
			show: false
			},
			data: dataList1.value.map(i => i.dateStr)
			},
			series: [
			{
			name: 'æªå¯è¿',
			type: 'bar',
			stack: 'total',
			barWidth: 14,
			label: {
			show: true,
			textStyle: {
			color: '#000000',
			fontSize: 12
			}
			},
			emphasis: {
			focus: 'series'
			},
			data: dataList1.value.map(i => i.waitNum),
			itemStyle: {
			normal: {
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: '#fadf74'
			},
			{
			offset: 0.3,
			color: '#f7cd5e'
			}, {
			offset: 1,
			color: '#eea33b'
			}]
			}
			}
			},
			},
			{
			name: 'å¨é',
			type: 'bar',
			stack: 'total',
			barWidth: 14,
			label: {
			show: true,
			textStyle: {
			color: '#000000',
			fontSize: 12
			}
			},
			emphasis: {
			focus: 'series'
			},
			textStyle: {
			color: '#000000',
			fontSize: 10
			},
			data: dataList1.value.map(i => i.ingNum),
			itemStyle: {
			normal: {
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: '#60d1f9'
			}, {
			offset: 1,
			color: '#4eacf7'
			}]
			}
			}
			},
			},
			{
			name: 'å°è´§',
			type: 'bar',
			barWidth: 14,
			stack: 'total',
			label: {
			show: true,
			textStyle: {
			color: '#000000',
			fontSize: 12
			}
			},
			textStyle: {
			color: '#000000',
			fontSize: 10
			},
			itemStyle: {
			normal: {
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: '#73f7d1'
			}, {
			offset: 1,
			color: '#58beaa'
			}]
			}
			},
			},
			emphasis: {
			focus: 'series'
			},
			data: dataList1.value.map(i => i.doneNum)
			}
			]
			})
			myChart.on('click', function (params) {
			// console.log(params.seriesName)
			// console.log(params.name)
			const item = dataList1.value.find(i => i.dateStr == params.name)
			// console.log(params);
			active1List.value = params.seriesName == 'å¨é' ? item.ingList : params.seriesName == 'å°è´§' ? item.doneList : item.waitList
			showModal1.value = true
			})
			window.addEventListener('resize', function () {//æ§è¡
			myChart.resize()
			})
			}
			const showModal1 = ref(false)
			const active1List = ref([])

			const dataList1 = ref([])
			const getData1 = () => {
			arriveGoodsList({
			factoryCode: activeCity.value.code
			}).then(res => {
			dataList1.value = res.data \|\| []
			initEnergy()
			})
			}

			const transportTask = ref([])
			const taskCode = ref('')
			const showModal = ref(false)
			const modalLoading = ref(false)
			const modalInfo = ref({})
			const modalTab = ref(0)
			const pager = ref({
			page: 0,
			rows: 50
			})
			const taskClick = (item) => {
			modalLoading.value = true
			showModal.value = true
			kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
			modalInfo.value = res.data
			// const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0'
			const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3'
			if (modalInfo.value.gisList && modalInfo.value.gisList.length > 0) {
			const gisInfo = modalInfo.value.gisList[0]
			if (gisInfo && gisInfo.gisList && gisInfo.gisList.length > 0) {
			const adsInfo = gisInfo.gisList[gisInfo.gisList.length - 1]
			const location = adsInfo.lon1 + ',' + adsInfo.lat1
			axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`).then(res => {
			console.log('res', res.data)
			if (res.data.status == 1) {
			modalInfo.value.position = res.data.regeocode.formatted_address
			}
			})
			}
			}

			modalLoading.value = false
			nextTick(() => {
			initGdMap()
			})
			}, () => {
			modalLoading.value = false
			})
			}
			const closeModal = () => {
			showModal.value = false
			showModal1.value = false
			modalInfo.value = {}
			}


			const mapContainer = ref(null)
			function distance(obj) {
			const lat1 = obj.deliveryLat
			const lng1 = obj.deliveryLon
			const lat2 = obj.receiveLat
			const lng2 = obj.receiveLon
			const radLat1 = rad(lat1)
			const radLat2 = rad(lat2)
			const a = radLat1 - radLat2
			const b = rad(lng1) - rad(lng2)
			const Haversin = Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2),
			2)
			const radius = 6378137 // å°çåå¾
			return 2 * radius * Math.asin(Math.sqrt(Haversin))
			}
			function rad(d) {
			return d * Math.PI / 180.0
			}
			const initGdMap = () => {
			const obj = modalInfo.value
			let scale = 5
			console.log((obj.deliveryLon + obj.receiveLon))
			const distancet = distance(obj)
			if (distancet > 1200000) {
			scale = 3
			} else if (distancet < 1200000 && distancet > 500000) {
			scale = 4
			} else if (distancet < 500000) {
			scale = 5
			} else {
			scale = 5
			}
			console.log('distancet', distancet)

			const map = new AMap.Map(mapContainer.value, {
			zoom: scale, // åå§ç¼©æ¾çº§å«
			center: [(Number(obj.deliveryLon) + Number(obj.receiveLon)) / 2, (Number(obj.deliveryLat) + Number(obj.receiveLat)) / 2], // åå§ä¸å¿ç¹ï¼åäº¬åæ ï¼
			})
			AMap.plugin(['AMap.ToolBar'], () => {
			const toolbar = new AMap.ToolBar()
			map.addControl(toolbar)
			})
			const marker1 = new AMap.Marker({
			position: [obj.deliveryLon, obj.deliveryLat], // æ è®°ç¹1åæ
			icon: new AMap.Icon({
			size: new AMap.Size(28, 32), // å¾æ å¤§å°
			image: fahuoImg, // å¾æ å¾çURL
			imageSize: new AMap.Size(28, 32), // å¾æ å®éå¤§å°
			}),
			title: obj.deliveryEnterprise, // é¼ æ æ¬åæ¶æ¾ç¤ºçæ é¢
			})
			map.add(marker1)
			const marker2 = new AMap.Marker({
			position: [obj.receiveLon, obj.receiveLat], // æ è®°ç¹1åæ
			icon: new AMap.Icon({
			size: new AMap.Size(28, 32), // å¾æ å¤§å°
			image: shouImg, // å¾æ å¾çURL
			imageSize: new AMap.Size(28, 32), // å¾æ å®éå¤§å°
			}),
			title: obj.receiveEnterprise, // é¼ æ æ¬åæ¶æ¾ç¤ºçæ é¢
			})
			map.add(marker2)
			// ç»å¶è½¨è¿¹
			const polylineList = obj.gisList[0].gisList \|\| []

			const polyline = new AMap.Polyline({
			path: [
			polylineList.map(i => {
			return [i.lon, i.lat]
			})
			],
			strokeColor: 'red', // çº¿çé¢è²
			strokeWeight: 3, // çº¿çå®½åº¦
			strokeOpacity: 0.8, // çº¿çéæåº¦
			strokeStyle: 'solid', // çº¿çæ ·å¼
			lineJoin: 'round', // æçº¿æç¹çæ ·å¼
			})
			map.add(polyline)
			}
			const isLoadingTask = ref(false)
			const getData2 = () => {
			isLoadingTask.value = true
			getStoreTaskList({
			pager: pager.value,
			parameters: {
			contractNumber: taskCode.value,
			facrotyCodeList: activeCity.value.code ? [activeCity.value.code] : []
			}
			}).then(res => {
			isLoadingTask.value = false
			let temp = res.data.rows \|\| []
			transportTask.value = temp.map(item => {
			if (item.createDate) {
			item.createDate = item.createDate.slice(5, 16)
			}
			return item
			})
			console.log('isLoadingTask', isLoadingTask.value)

			}, () => {
			isLoadingTask.value = false
			})
			}

			const cneterData = ref({})
			const showPro = ref(false)
			const cityList = ref()
			const getCity = () => {
			kzfactoryList().then(res => {
			cityList.value = [{ name: 'å¨ç', code: '' }, ...res.data]
			})
			}
			const activeCity = ref({ name: 'å¨ç', code: '' })
			const colors = ['#0193FE', '#FFB642']
			const cityClick = (item) => {
			activeCity.value = item
			showPro.value = false
			changeCity()
			}
			const initEchart1 = () => {
			const myChart = echarts.init(document.getElementById('echart1'))

			const option = {
			tooltip: {
			trigger: 'item'
			},
			series: [
			{
			type: 'pie',
			radius: ['72%', '96%'],
			label: {
			show: false,
			position: 'center'
			},
			emphasis: {
			// è®¾ç½®æ¬æµ®æ¶æ ·å¼ä¸ºç©º
			scale: false, // å³éæ¾å¤§ææ
			itemStyle: {
			shadowBlur: 0, // é´å½±æ¨¡ç³åº¦ä¸º 0
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0)',
			},
			},
			color: colors,
			labelLine: {
			show: false
			},
			data: StockOutData.value.arr
			}
			]
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () { // æ§è¡
			myChart.resize()
			})
			}

			const activeTab1 = ref(0)
			const loading1 = ref(false)
			const StockOutData = ref({})
			const getStockOut = () => {
			loading1.value = true
			kztotalOutQtyNum({ type: activeTab1.value, factoryCode: activeCity.value.code }).then(res => {
			loading1.value = false
			if (res.code == 200) {
			let obj = res.data
			obj.currentNum = (obj.currentOutNum + obj.currentInNum).toFixed(0) * 1
			obj.lastNum = (obj.lastOutNum + obj.lastInNum).toFixed(0) * 1
			// obj.sameNum = (obj.sameOutNum + obj.sameInNum).toFixed(0)
			let arr = []
			arr.push({ name: 'çå', value: obj.currentInNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentInNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' })
			arr.push({ name: 'çå¤', value: obj.currentOutNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentOutNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' })
			obj.arr = arr

			StockOutData.value = obj
			initEchart1()
			}

			}, () => {
			loading1.value = false
			})
			}
			const tab1Click = (val) => {
			activeTab1.value = val
			getStockOut()
			}
			// footer
			const getData3 = () => {
			getStorecenterData({
			factoryCode: activeCity.value.code
			}).then(res => {
			const obj = res.data \|\| {}
			console.log('obj', obj)

			// 8å°æ¶ è®¡å ä»æ¥
			// obj.hoursAbility = 6000
			// obj.maxAbility = 8000
			// obj.currentPlanNum = 22000
			// obj.crrentOutNum = 7000

			obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%'
			if (obj.currentPlanNum >= obj.hoursAbility) {
			obj.level2 = '100%'
			obj.level22 = (((obj.currentPlanNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
			obj.level22 = obj.level22 > 100 ? '100%' : obj.level22 + '%'
			} else {
			obj.level2 = ((obj.currentPlanNum / obj.hoursAbility) * 100).toFixed(2) + '%'
			obj.level22 = 0
			}
			if (obj.crrentOutNum >= obj.hoursAbility) {
			obj.level3 = '100%'
			obj.level33 = (((obj.crrentOutNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
			obj.level33 = obj.level33 > 100 ? '100%' : obj.level33 + '%'
			} else {
			obj.level3 = ((obj.crrentOutNum / obj.hoursAbility) * 100).toFixed(2) + '%'
			obj.level33 = 0
			}

			// console.log('obj1', obj.level1);
			// console.log('obj2', obj.level2);
			// console.log('obj22', obj.level22);
			// console.log('obj3', obj.level3);
			// console.log('obj33', obj.level33);

			cneterData.value = obj

			})
			}

			const data5 = ref({})
			const data6 = ref({})
			const data7 = ref({})
			const initEchart5 = () => {
			// åºäºåå¤å¥½çdomï¼åå§åechartså®ä¾
			const myChart = echarts.init(document.getElementById('echart5'))
			// ç»å¶å¾è¡¨
			myChart.setOption({
			legend: {
			itemGap: 12,
			// icon: 'circle',
			right: '12%',
			top: '0%',
			data: ['æ»åºå®¹', 'å½ååºå', 'åºåå©ç¨ç'],
			itemWidth: 20,
			itemHeight: 10,
			textStyle: {
			color: '#fff',
			borderColor: '#fff'
			},
			},
			grid: {
			left: '3%',
			right: '0%',
			bottom: '3%',
			top: '18%',
			containLabel: true
			},
			tooltip: {
			trigger: 'axis',
			formatter: function (params) {
			// éåæ¬æµ®æ¶çææç¹ï¼å®å¶åæ¾ç¤ºåå®¹
			let result = `<div style="width: 160px">${params[0].name}</div>`
			params.forEach((item) => {
			if (item.seriesName === 'æ»åºå®¹') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #5e9bca;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'å½ååºå') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'åºåå©ç¨ç') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b2bcd1;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}%</strong></div>
			</div>`
			}
			})
			return result
			}
			},
			xAxis: [{
			nameGap: 5,
			type: 'category',
			axisLine: {
			show: true,
			lineStyle: {
			color: '#999'
			},
			},
			axisLabel: {
			color: '#869CC9'
			},
			axisTick: {
			show: false,
			},
			data: data5.value.detailList.map(i => i.factoryName),
			}],
			yAxis: [
			{
			nameTextStyle: {
			color: '#869CC9',
			},
			name: 'ç®±',
			nameGap: 16,
			type: 'value',
			axisLabel: {
			color: "#869CC9",
			},
			axisLine: {
			show: true,
			},
			splitLine: {
			show: true,
			lineStyle: {
			width: 1,
			color: "rgba(49,105,129,0.4)",
			type: 'dashed'
			}
			},
			},
			{
			type: 'value',
			name: '%',
			nameGap: 16,
			min: 0,
			// max: 100,
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			splitLine: false
			}
			],
			series: [
			{
			name: 'æ»åºå®¹',
			type: 'bar',
			barWidth: 10,
			barGap: '60%',
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#2e6bf3'
			},
			{
			offset: 1,
			color: '#5fcbab'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data5.value.detailList.map(i => i.totalNum)
			},
			{
			name: 'å½ååºå',
			type: 'bar',
			barWidth: 10,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#eda13a'
			},
			{
			offset: 0.6,
			color: '#dfb44e'
			},
			{
			offset: 1,
			color: '#ccc16c'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data5.value.detailList.map(i => i.currentNum)
			},
			{
			name: 'åºåå©ç¨ç',
			type: 'line',
			smooth: false,
			showAllSymbol: true,
			symbol: 'none',
			lineStyle: {
			color: "#9eabc2"
			},
			yAxisIndex: 1,
			tooltip: {
			show: true,
			formatter: '{c}' + '%',
			},
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			data: data5.value.detailList.map(i => i.useRate)
			}
			]
			})

			window.addEventListener('resize', function () {//æ§è¡
			myChart.resize()
			})
			}
			const initEchart6 = () => {
			// åºäºåå¤å¥½çdomï¼åå§åechartså®ä¾
			const myChart = echarts.init(document.getElementById('echart6'))
			// ç»å¶å¾è¡¨
			myChart.setOption({
			legend: {
			itemGap: 12,
			// icon: 'circle',
			right: '10%',
			top: '0',
			data: ['åºåºè½å', 'å½æ¥åºåºé', 'åºåºå©ç¨ç'],
			itemWidth: 20,
			itemHeight: 10,
			textStyle: {
			color: '#fff',
			borderColor: '#fff'
			},
			},
			tooltip: {
			trigger: 'axis',
			formatter: function (params) {
			// éåæ¬æµ®æ¶çææç¹ï¼å®å¶åæ¾ç¤ºåå®¹
			let result = `<div style="width: 160px">${params[0].name}</div>`
			params.forEach((item) => {
			if (item.seriesName === 'åºåºè½å') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #487af3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'å½æ¥åºåºé') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'åºåºå©ç¨ç') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b0bcd3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}%</strong></div>
			</div>`
			}
			})
			return result
			}
			},
			grid: {
			left: '3%',
			right: '0%',
			bottom: '3%',
			top: '18%',
			containLabel: true
			},
			xAxis: [{
			nameGap: 5,
			type: 'category',
			axisLine: {
			show: true,
			lineStyle: {
			color: '#999'
			},
			},
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			},
			axisTick: {
			show: false,
			},
			data: data6.value.detailList.map(i => i.factoryName),
			}],
			yAxis: [
			{
			name: 'ç®±',
			nameGap: 16,
			type: 'value',
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			axisLine: {
			show: true,
			},
			splitLine: {
			show: true,
			lineStyle: {
			width: 1,
			color: "rgba(49,105,129,0.4)",
			type: 'dashed'
			}
			},
			},
			{
			type: 'value',
			name: '%',
			nameGap: 16,
			min: 0,
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			splitLine: false
			}
			],
			series: [
			{
			name: 'åºåºè½å',
			type: 'bar',
			barWidth: 14,
			barGap: '60%',
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#2e6bf3'
			},
			{
			offset: 1,
			color: '#5fcbab'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data6.value.detailList.map(i => i.totalNum),
			barGap: '-100%' // è®¾ç½®æ±åå®å¨éå

			},
			{
			name: 'å½æ¥åºåºé',
			type: 'bar',
			barWidth: 14,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#eda13a'
			},
			{
			offset: 0.6,
			color: '#dfb44e'
			},
			{
			offset: 1,
			color: '#ccc16c'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data6.value.detailList.map(i => i.currentNum),
			barGap: '-100%' // è®¾ç½®æ±åå®å¨éå
			},
			{
			name: 'åºåºå©ç¨ç',
			type: 'line',
			smooth: false,
			showAllSymbol: true,
			symbol: 'none',
			lineStyle: {
			color: "#9eabc2"
			},
			yAxisIndex: 1,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			data: data6.value.detailList.map(i => i.useRate)
			}
			]
			})

			window.addEventListener('resize', function () {//æ§è¡
			myChart.resize()
			})
			}
			const initEchart7 = () => {
			// åºäºåå¤å¥½çdomï¼åå§åechartså®ä¾
			const myChart = echarts.init(document.getElementById('echart7'))
			// ç»å¶å¾è¡¨
			myChart.setOption({
			legend: {
			itemGap: 12,
			// icon: 'circle',
			right: '10%',
			top: '0%',
			data: ['å½æ¥å¯ç¨è¿å', 'å½æ¥ææ¥è¿å', 'è½¦è¾å©ç¨ç'],
			itemWidth: 20,
			itemHeight: 10,
			textStyle: {
			color: '#fff',
			borderColor: '#fff'
			},
			},
			tooltip: {
			trigger: 'axis',
			formatter: function (params) {
			// éåæ¬æµ®æ¶çææç¹ï¼å®å¶åæ¾ç¤ºåå®¹
			let result = `<div style="width: 160px">${params[0].name}</div>`
			params.forEach((item) => {
			if (item.seriesName === 'å½æ¥å¯ç¨è¿å') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #88d9cc;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'å½æ¥ææ¥è¿å') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}</strong></div>
			</div>`
			} else if (item.seriesName === 'è½¦è¾å©ç¨ç') {
			result += `
			<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
			<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b0bcd3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
			<div><strong>${item.value}%</strong></div>
			</div>`
			}
			})
			return result
			}
			},
			grid: {
			left: '3%',
			right: '0%',
			bottom: '3%',
			top: '18%',
			containLabel: true
			},
			xAxis: [{
			nameGap: 5,
			type: 'category',
			axisLine: {
			show: true,
			lineStyle: {
			color: '#999'
			},
			},
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			axisTick: {
			show: false,
			},
			data: data7.value.detailList.map(i => i.factoryName),
			}],
			yAxis: [
			{
			nameTextStyle: {
			color: '#869CC9',
			},
			name: 'è¾',
			nameGap: 16,
			type: 'value',
			axisLabel: {
			show: true,
			color: "#869CC9",
			},
			axisLine: {
			show: true,
			},
			splitLine: {
			show: true,
			lineStyle: {
			width: 1,
			color: "rgba(49,105,129,0.4)",
			type: 'dashed'
			}
			},
			},
			{
			type: 'value',
			name: '%',
			nameGap: 16,
			min: 0,
			axisLabel: {
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			splitLine: false
			}
			],
			series: [
			{
			name: 'å½æ¥å¯ç¨è¿å',
			type: 'bar',
			barWidth: 10,
			barGap: '60%',
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#73f0c6'
			},
			{
			offset: 1,
			color: '#3f8ca6'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data7.value.detailList.map(i => (i.totalNum - i.zaituNum))
			},
			{
			name: 'å½æ¥ææ¥è¿å',
			type: 'bar',
			barWidth: 10,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#ed7e32'
			},
			{
			offset: 0.6,
			color: '#e99b5c'
			},
			{
			offset: 1,
			color: '#e7a774'
			}
			], false),
			lineStyle: {
			width: 1,
			type: 'solid'
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: data7.value.detailList.map(i => i.currentNum)
			},
			{
			name: 'è½¦è¾å©ç¨ç',
			type: 'line',
			smooth: false,
			showAllSymbol: true,
			symbol: 'none',
			lineStyle: {
			color: "#9eabc2"
			},
			yAxisIndex: 1,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			data: data7.value.detailList.map(i => i.useRate)
			}
			]
			})

			window.addEventListener('resize', function () {//æ§è¡
			myChart.resize()
			})
			}
			const getData5 = () => {
			kzinventoryUseRate().then(res => {
			data5.value = res.data
			data5.value.detailList.forEach(item => {
			if (item.useRate) {
			item.useRate = (item.useRate * 100).toFixed(1)
			}

			})
			initEchart5()
			})
			outAbilityUseRate().then(res => {
			data6.value = res.data
			data6.value.detailList.forEach(item => {
			if (item.useRate) {
			item.useRate = (item.useRate * 100).toFixed(1)
			}
			})
			initEchart6()
			})
			tranportAbilityUseRate().then(res => {
			data7.value = res.data
			data7.value.detailList.forEach(item => {
			// item.useRate = item.useRate * 100
			if (item.useRate) {
			item.useRate = (item.useRate * 100).toFixed(1)
			}
			})
			initEchart7()
			})

			// initEchart6()
			// initEchart7()

			}


			const autoplayFlag = (list = [], leng = 4, time = 2000) => {
			if (list.length > leng) {
			return { delay: time, disableOnInteraction: false }
			} else {
			return false
			}
			}
			const loopFn1 = () => {
			var newSwiper1 = new Swiper('.one-swiper', {
			initialSlide: 0,
			direction: 'vertical', //ç«ç´æ¹å
			slidesPerView: 5,
			autoplay: autoplayFlag(transportTask.value, 5, 6000),
			observer: true, //ä¿®æ¹swiperèªå·±æååç´ æ¶ï¼èªå¨åå§åswiper
			})
			}

			const changeCity = () => {
			getData1()
			getStockOut()
			getMap()
			getData2()
			getData3()
			}

			onMounted(() => {
			getCity()
			changeCity()
			getData5()
			setInterval(() => {
			getCity()
			changeCity()
			getData5()
			}, 1000 * 60 * 10)
			setTimeout(() => {
			loopFn1()
			}, 12000)
			})


			</script>

			<style lang="scss">
			.map-tip-box {
			background-color: rgba(6, 25, 48, .8);
			padding: 10px 30px;
			padding-left: 20px;
			border-radius: 4px;
			backdrop-filter: blur(10px);
			color: #D2E0FF;
			font-size: 12px;
			border: 1px solid #D2E0FF;

			.icon {
			width: 12px;
			height: 14px;
			background-image: url('@/assets/images/FireFighting/ic_location@2x.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			margin-right: 6px;
			}

			.title {
			font-size: 14px;
			font-weight: 600;
			display: flex;
			align-items: center
			}

			.item-state-con {
			margin-bottom: 6px;
			}
			}
			</style>
			<style lang="scss" scoped>
			div {
			box-sizing: border-box;
			}

			.swiper-wrapper {
			display: block !important;
			}

			.main_content {
			display: flex;
			padding: 20px 25px 0;

			.left_box {
			width: 440px;

			.left_box_one {
			margin-top: 20px;
			padding: 0px 10px 30px 20px;
			position: relative;
			height: 160px;

			.content_wrap {
			display: flex;
			justify-content: space-between;

			.num_wrap {
			width: 272px;

			.num_list {
			display: flex;
			margin-bottom: 20px;

			.num {
			width: 30px;
			height: 46px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-weight: 600;
			font-size: 32px;
			margin-right: 5px;
			}
			}

			.content {
			display: flex;
			color: #D2E0FF;

			.la {
			color: #869CC9;
			}

			.unit_wrap {
			display: flex;
			align-items: center;
			}

			.icon {
			width: 10px;
			height: 12px;
			margin-right: 6px;
			margin-left: 4px;
			}
			}
			}

			.echart_wrap {
			flex: 1;
			display: flex;
			align-items: center;
			height: 48px;

			.echart1 {
			width: 46px;
			height: 46px;
			margin-right: 8px;
			}

			.list {
			flex: 1;
			font-size: 13px;

			.item {
			display: flex;
			align-items: center;
			margin: 8px 0;

			.icon {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			margin-right: 4px;
			background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
			}

			.text {
			margin-right: 6px;
			}
			}
			}
			}
			}
			}

			.left_box_two {
			margin-bottom: 20px;
			position: relative;

			.second_title {
			position: absolute;
			top: 14px;
			left: 20px;
			}

			.energy_wrap {
			width: 100%;
			height: 300px;

			.energyRef {
			width: 100%;
			height: 100%;
			}
			}
			}

			.left_box_three {
			width: 440px;
			padding: 0 15px;

			.second_title {
			margin-bottom: 10px;

			input {
			font-size: 12px;
			}
			}

			.list_wrap {
			position: relative;

			.list {
			height: 200px;
			overflow: hidden;
			}

			.empty {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200px;

			img {
			width: 144px;
			}
			}

			.line {
			display: flex;
			height: 40px;
			align-items: center;
			font-size: 14px;
			color: #D2E0FF;
			cursor: pointer;

			&:nth-of-type(2n) {
			background: rgba(134, 156, 201, 0.05);
			}

			.item {
			flex: 4;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			}

			.status {
			flex: 3.2;
			}
			}

			.avtive {
			background: rgba(1, 171, 254, 0.2);
			color: #01D9FE;
			font-weight: 600;
			}

			.header {
			font-weight: 500;
			color: #01D9FE;
			}
			}
			}
			}

			.center_box {
			flex: 1;
			padding: 0 20px;
			margin: 0 20px;
			display: flex;
			flex-direction: column;

			.center_box_one {
			background: rgba(255, 255, 255, 0.02);
			height: 230px;
			border-top: 2px solid #306ba1;
			padding: 20px 20px 0;

			.header_wrap {
			display: flex;
			justify-content: space-between;
			margin-bottom: 28px;
			font-weight: bold;
			font-size: 18px;
			position: relative;

			/* background-image: -webkit-linear-gradient(top,
			#ffffff 0%,
			#c8ddff 66%,
			#85b4ff 72%,
			#74a9ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent; */

			.left {
			display: flex;
			align-items: center;
			position: relative;



			img {
			width: 16px;
			margin-right: 6px;
			}
			}

			.right {
			display: flex;
			align-items: center;
			cursor: pointer;
			position: relative;

			.posi {
			width: 16px;
			margin-right: 8px;
			}

			.icon {
			width: 14px;
			margin-left: 2px;
			}
			}

			.select_op {
			position: absolute;
			top: 26px;
			right: -10px;
			width: 90px;
			z-index: 1199999;
			background: radial-gradient(64% 83% at 50% 50%, rgba(19, 88, 173, 0.8) 0%, rgba(5, 18, 32, 0.86) 100%);
			color: #fff;

			.line {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 36px;
			font-size: 18px;
			cursor: pointer;
			color: #fff;
			}
			}
			}

			.static_wrap {
			display: flex;
			justify-content: space-between;
			margin: 30px 0 14px;

			.tooltip_wrap {
			position: relative;

			&:hover {
			.tooltip {
			display: block;
			}
			}

			.tooltip {
			display: none;
			background: rgba(0, 30, 63, 0.6);
			border: 1px solid #003F82;
			backdrop-filter: blur(3px);
			padding: 10px;
			font-size: 15px;
			color: #fff;
			line-height: 19px;
			font-weight: 400;
			border-radius: 6px;
			width: 230px;
			position: absolute;
			line-height: 24px;
			left: 100%;
			top: 50%;
			transform: translate(20px, -42%);
			z-index: 999999999999999;
			}
			}

			.item {
			display: flex;

			img {
			width: 68px;
			height: 71px;
			margin-right: 15px;
			}

			.content {
			font-size: 15px;

			.num {
			font-size: 12px;
			color: #D2E0FF;

			span {
			font-weight: bold;
			font-size: 30px;
			margin-right: 5px;
			font-weight: 600;
			background-image: -webkit-linear-gradient(top,
			#01D9FE 0%,
			#01D9FE 60%,
			#fff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}

			.blue {
			background-image: -webkit-linear-gradient(top,
			#fff 0%,
			#65a1fa 30%,
			#3a84f6 100%);
			}

			.today {
			background-image: -webkit-linear-gradient(top,
			#fff 0%,
			#20FFC5 30%,
			#20FFC5 100%);
			}

			.finish {
			background-image: -webkit-linear-gradient(top,
			#fff 0%,
			#FFB120 30%,
			#FFB120 100%);
			}
			}

			.unit {
			font-size: 13px;
			color: #D2E0FF;
			margin-top: 2px;
			}
			}
			}
			}

			.footer {
			.wrap {
			display: flex;
			align-items: center;
			height: 76px;

			.content {
			width: 80%;
			height: 16px;
			background: rgba(255, 255, 255, 0.13);
			border-radius: 8px;
			margin-right: 6px;
			display: flex;
			position: relative;

			}

			.box {
			width: 80%;
			height: 16px;
			background: linear-gradient(270deg, #FF9F02 0%, #FFEA70 100%);
			border-radius: 8px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;

			.tag {
			position: absolute;
			z-index: 99999;
			bottom: -30px;
			right: 0;
			transform: translate(50%, 0);
			height: 20px;
			background: #FECE01;
			color: #000000;
			padding: 0 6px;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 76px;
			border: 1px solid #FECE01;

			.icon {
			position: absolute;
			top: 1px;
			left: 50%;
			/* transform: translate(-50%,0); */
			width: 10px;
			height: 10px;
			transform: rotate(45deg) translate(-50%, 0);
			background: #FECE01;
			z-index: -1;
			}
			}

			.tooltip_wrap {
			.tooltip {
			z-index: 9999999999;
			top: 34px;
			transform: translate(70px, -42%);
			}
			}

			.tag1 {
			background-color: #28F0CC;
			border: 1px solid #28F0CC;

			.icon {
			background-color: #28F0CC;
			}
			}
			}

			.box1 {
			width: 10%;
			z-index: 9;
			background: linear-gradient(270deg, #68dfd3 0%, #006BFF 100%);
			}

			.box11 {
			background: linear-gradient(270deg, #75f8cc 0%, #68dfd3 100%);
			}

			.box22 {
			background: linear-gradient(270deg, #f2a43b 0%, #ecbb61 100%);
			}

			.box23 {
			background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
			}

			.tooltip_wrap {
			/* position: relative; */

			&:hover {
			.tooltip {
			display: block;
			}
			}

			.tooltip {
			display: none;
			background: #071b32;
			border: 1px solid #003F82;
			/* backdrop-filter: blur(3px); */
			padding: 10px;
			font-size: 15px;
			color: #fff;
			line-height: 19px;
			font-weight: 400;
			border-radius: 6px;
			width: 200px;
			position: absolute;
			z-index: 99999999;
			left: 100%;
			top: 50%;
			transform: translate(30px, -42%);
			}
			}

			.scale {
			position: absolute;
			top: -24px;
			left: 0;
			font-size: 16px;
			color: #D2E0FF;

			.tooltip_wrap {
			.tooltip {
			width: 240px;
			transform: translate(20px, -50%);
			}
			}
			}

			.scale1 {
			left: 92%;
			min-width: 36px;
			}

			.side {
			flex: 1;
			height: 16px;
			background: rgba(255, 255, 255, 0.13);
			border-radius: 8px;
			position: relative;
			}
			}
			}
			}

			.center_box_two {
			width: 100%;
			flex: 1;
			position: relative;

			.echart_map {
			width: 100%;
			height: 100%;
			/* transform: scale(.2); */
			}

			.modal1 {
			width: 500px;
			height: 192px;
			background: rgba(0, 86, 255, 0.1);
			backdrop-filter: blur(5px);
			padding: 12px 30px;
			position: absolute;
			top: 36px;
			left: 12px;
			border: 1px solid #4ba7f7;
			z-index: 999999;

			.content {
			.list {
			height: 128px;
			overflow: auto;
			}

			.line {
			display: flex;
			align-items: center;
			height: 32px;
			color: #fff;
			font-size: 12px;

			&:nth-of-type(2n) {
			background: rgba(134, 156, 201, 0.05);
			}

			.item {
			flex: 3;
			}

			.addr {
			flex: 5;
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
			}
			}

			.head {
			font-weight: 500;
			font-size: 13px;
			color: #01D9FE;
			}
			}

			}
			}
			}

			.right_box {
			width: 440px;

			.right_box_three {
			margin-top: 20px;

			.echart5_wrap {
			height: 192px;
			width: 410px;

			.echart5 {
			height: 192px;
			width: 410px;
			}
			}
			}
			}

			.question {
			display: flex;
			align-items: center;

			&:hover {
			.hover_wrap {
			display: block;
			}
			}

			.hover_wrap {
			display: none;
			position: absolute;
			left: 130px;
			z-index: 999;
			top: -5px;
			width: 420px;
			height: 148px;
			background: rgba(0, 30, 63, 0.6);
			border: 1px solid #003F82;
			backdrop-filter: blur(3px);
			padding: 10px;
			font-size: 13px;
			color: #ebf1fb;
			line-height: 19px;
			font-weight: 400;
			border-radius: 6px;

			div {
			margin-bottom: 3px;
			}

			.triangle {
			width: 12px;
			height: 12px;
			position: absolute;
			top: 10px;
			left: -6px;
			transform: rotate(45deg);
			border-left: 1px solid #003F82;
			border-bottom: 1px solid #003F82;
			background: rgba(0, 30, 63, 0.6);
			backdrop-filter: blur(3px);
			}

			.title {
			font-weight: bold;
			font-size: 14px;
			color: #e2ebfd;
			}
			}
			}
			}

			.question1 {
			display: flex;
			align-items: center;

			.hover_con {
			position: relative;

			&:hover {
			.hover_wrap {
			display: block;
			}
			}
			}


			.hover_wrap {
			display: none;

			position: absolute;
			left: 108%;
			z-index: 999;
			top: -5px;
			width: 212px;
			height: 62px;
			background: rgba(0, 30, 63, 0.6);
			border: 1px solid #003F82;
			backdrop-filter: blur(3px);
			padding: 10px;
			font-size: 15px;
			color: #e9f0ff;
			line-height: 19px;
			font-weight: 400;
			border-radius: 6px;

			div {
			margin-bottom: 3px;
			}


			.title {
			color: #e2ebfd;
			}
			}
			}

			.triangle {
			width: 12px;
			height: 12px;
			position: absolute;
			top: 36%;
			transform: translate(-50%, -50%);
			left: -6px;
			transform: rotate(45deg);
			border-left: 1px solid #003F82;
			border-bottom: 1px solid #003F82;
			background: rgba(0, 30, 63, 0.6);
			/* backdrop-filter: blur(3px); */
			}

			.main_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90px;
			position: relative;
			padding: 0px 40px 16px;
			font-weight: 600;
			font-size: 36px;

			.title {
			background-image: -webkit-linear-gradient(top,
			#ffffff 0%,
			#c8ddff 70%,
			#85b4ff 80%,
			#74a9ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}

			.time_wrap {
			font-size: 26px;
			font-weight: 600;
			background-image: -webkit-linear-gradient(top,
			#ffffff 0%,
			#c8ddff 50%,
			#85b4ff 80%,
			#74a9ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			display: flex;
			align-items: center;

			.time {
			width: 130px;
			display: flex;
			justify-content: flex-end;
			font-size: 30px;
			}

			.week {
			margin-left: 20px;
			}
			}

			.main_header_bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
			}
			}

			.com_header {
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px 0 13px;
			position: relative;

			.title {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 18px;
			background-image: -webkit-linear-gradient(top,
			#ffffff 0%,
			#c8ddff 66%,
			#85b4ff 72%,
			#74a9ff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

			.icon {
			width: 16px;
			height: 16px;
			margin-right: 14px;
			}
			}

			.tabs {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #d2e0ff;

			.separate {
			width: 1px;
			height: 14px;
			background-color: #d2e0ff;
			margin: 0 6px;
			}

			.active {
			color: #0094eb;
			}
			}
			}

			.modal_wrap {
			width: 600px;
			height: 556px;
			background: rgba(0, 30, 63, 0.5);
			/* border: 1px solid #c6eef7; */
			backdrop-filter: blur(5px);
			position: fixed;
			top: 20%;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 99999;
			padding: 24px;

			#map-container {
			width: 260px;
			height: 320px;
			position: absolute;
			top: 190px;
			right: 20px;
			z-index: 999999;
			border-radius: 2px;

			:deep(.amap-markers) {
			left: -12px !important;
			top: -32px !important;
			}
			}

			.stock {
			display: flex;
			align-items: center;
			color: #dd5d2a;
			margin-bottom: 8px;

			img {
			margin-right: 6px;
			width: 14px;
			}
			}

			.title_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;

			.left {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 17px;
			}

			.tit_status {
			color: #af8832;
			}

			img {
			width: 20px;
			margin-right: 4px;
			}
			}

			.info {
			display: flex;
			flex-wrap: wrap;
			background-color: #0d2845;
			border-radius: 4px;
			padding: 10px 20px 0px;
			margin-bottom: 16px;

			.item {
			display: flex;
			/* align-items: center; */
			font-size: 13px;
			width: 55%;
			margin-bottom: 8px;

			&:nth-of-type(2n+1) {
			width: 45%;
			}

			.dian {
			width: 4px;
			height: 4px;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 4px;
			margin-top: 7px;
			}

			.la {
			color: #01D9FE;
			width: 70px;
			}

			.val {
			flex: 1;
			}
			}
			}

			.logistics_wrap {
			.m_title {
			display: flex;
			align-items: center;
			font-style: 16px;
			font-weight: 600;
			margin-bottom: 20px;

			img {
			width: 24px;
			margin-right: 4px;
			}
			}

			.fu_list {
			height: 310px;
			width: 290px;
			margin-top: 20px;
			overflow: auto;

			.fu_item {
			position: relative;

			.item_title {
			margin-bottom: 6px;

			.icon {
			width: 36px;
			display: flex;

			img {
			width: 20px;
			height: 20px;
			}
			}
			}
			}

			.separate {
			height: calc(100% - 8px);
			/* width: 1px; */
			border: 1px dashed #576783;
			/* border: 1px dashed red; */
			position: absolute;
			left: 10px;
			top: 20px;
			z-index: -1;
			}

			.title {
			font-weight: 500;
			font-size: 16px;
			color: #222222;
			margin-bottom: 10px;
			}

			.line {
			display: flex;
			margin-bottom: 12px;

			.label {
			color: #becbe9;
			margin-right: 20px;
			}

			.val {}
			}

			.item_title {
			font-weight: 600;
			font-size: 16px;
			display: flex;
			align-items: center;
			display: flex;

			.icon {}
			}

			.icon_wrap {
			width: 24px;
			margin-right: 15px;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
			width: 24px;
			height: 24px;
			position: relative;
			z-index: 2;
			}
			}

			.item {
			position: relative;
			color: #b1bfdc;
			margin-bottom: 15px;

			.text {
			color: #b1bfdc;
			margin-bottom: 6px;
			width: 100%;
			}

			.icon {
			width: 10px;
			height: 10px;
			position: relative;
			z-index: 2;
			}

			.h2 {
			display: flex;
			align-items: center;
			}

			.h1 {}

			.time {
			padding-left: 39px;
			font-size: 12px;
			}
			}
			}
			}


			}

			.modal_mask {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 9999;
			/* background-color: rgba(0, 0, 0, 0.0); */
			/* background-color: red; */
			}

			.second_title {
			height: 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			font-size: 16px;
			margin-bottom: 20px;

			.title {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 16px;
			color: #FFFFFF;
			position: relative;

			.hover_wrap {
			left: 175px;
			height: 80px;
			}

			.icon {
			width: 16px;
			height: 16px;
			margin-right: 10px;
			}
			}

			.num_wrap {
			font-weight: 400;
			font-size: 14px;
			color: #D2E0FF;
			display: flex;
			align-items: center;

			.val {
			font-weight: bold;
			font-size: 16px;
			color: #FFFFFF;
			}
			}

			.search_wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			color: #869CC9;
			width: 110px;
			height: 28px;
			border-radius: 14px;
			border: 1px solid #869CC9;
			padding-left: 8px;
			margin-right: 12px;

			img {
			width: 14px;
			height: 14px;
			margin-right: 3px;
			}

			.input {
			flex: 1;
			}
			}

			.side {
			font-size: 14px;
			color: #D2E0FF;

			span {
			font-size: 16px;
			font-weight: 600;
			color: #3981ea;
			background-image: -webkit-linear-gradient(top,
			#fff 0%,
			#65a5ff 30%,
			#2c66b9 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

			.unit {
			font-weight: 400;
			font-size: 12px;
			}
			}
			}

			.tabs {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #d2e0ff;

			.tab {
			cursor: pointer;
			}

			.separate {
			width: 1px;
			height: 14px;
			background-color: #d2e0ff;
			margin: 0 6px;
			}

			.active {
			color: #0094eb;
			}
			}
			}

			.main_app {
			width: 1920px;
			height: 960px;
			/* width: 100%;
			height: 100vh; */
			background: #0b2539;
			color: #FFFFFF;
			position: relative;
			z-index: -2;
			font-size: 14px;

			.main_bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
			}
			}

			.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
			}
			</style>