productDev/dmvisit.git

			@@ -4,7 +4,7 @@
			<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="title">安徽中烟数智成品管控</div>
			<div class="time_wrap">
			<span class="date">{{ date }}</span>
			<span class="week">{{ week }}</span>
			@@ -21,28 +21,65 @@
			<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>累计出库量(箱)</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="num_list" v-if="cneterData.yearOutTotal">
			<div class="num" v-for="i in cneterData.yearOutTotal + ''">
			{{ i }}
			<img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
			<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">
			<div class="content" v-if="false">
			<div class="unit_wrap">
			<span class="la">同比</span>
			<img src="@/assets/images/ic_up.png" class="icon" alt="">
			<span v-if="cneterData.yearOutTotalOnYear \|\| cneterData.yearOutTotalOnYear == 0">{{
			cneterData.yearOutTotalOnYear }} %</span>
			<span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
			<span>{{ cneterData.yearOutTimes \|\| '' }}</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>
			@@ -50,10 +87,10 @@
			<div class="echart_wrap">
			<div class="echart1" id="echart1"></div>
			<div class="list">
			<div class="item" v-for="item, i in StockOutData" :key="i">
			<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.value }}</div>
			<div class="num">{{ item.rate }}</div>
			</div>
			</div>
			</div>
			@@ -74,7 +111,7 @@
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>当前运输任务</div>
			<div>当前订单任务</div>
			</div>
			<div class="search_wrap">
			<img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
			@@ -85,23 +122,29 @@
			</div>
			<div class="list_wrap">
			<div class="header line">
			<span class="item">运输车辆</span>
			<span class="item">状态</span>
			<span class="item">位置</span>
			<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="line one-swiper-slide swiper-slide item" @click="taskClick(item)"
			<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.carNo }}</span>
			<span class="item">{{ item.statusStr }}</span>
			<span class="item">{{ item.address }}</span>
			<span class="item">{{ item.taskDate }}</span>
			<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>
			@@ -111,6 +154,17 @@
			<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="">
			@@ -125,38 +179,166 @@
			<div class="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
			<div class="content">
			<div class="name">今日计划量</div>
			<div class="num"><span>{{ cneterData.outPlanTotal }}</span>万支</div>
			<div class="unit">车次：{{ cneterData.outPlanTimes }}</div>
			<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 class="today">{{ cneterData.outTotal }}</span>万支</div>
			<div class="unit">车次：{{ cneterData.outTimes }}</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="item">
			<img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
			<div class="content">
			<div class="name">今日未出库量</div>
			<div class="num" v-if="cneterData.outPlanTotal && cneterData.outTotal"><span class="finish">{{
			cneterData.outPlanTotal - cneterData.outTotal }}</span>万支</div>
			<div class="unit" v-if="cneterData.outPlanTotal && cneterData.outTotal">车次：{{ cneterData.outPlanTimes
			-
			cneterData.outTimes }}</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">
			<span>占出库能力</span>
			<span class="num">80%</span>
			<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">
			@@ -167,70 +349,55 @@
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="right_box_one">
			<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>
			</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="content_wrap">
			<div class="num_wrap">
			<div class="num_list" v-if="cneterData.yearInTotal">
			<div class="num" v-for="i in cneterData.yearInTotal + ''">
			{{ i }}
			<img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
			</div>
			</div>
			<div class="content">
			<div class="unit_wrap">
			<span class="la">同比</span>
			<img src="@/assets/images/ic_up.png" class="icon" alt="">
			<span>{{ cneterData.yearInTotalOnYear }}%</span>
			<span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
			<span>{{ cneterData.yearInTimes }}</span>
			</div>

			</div>
			</div>
			<div class="static_wrap">
			<div class="echart_wrap">
			<div class="echart3" id="echart3"></div>
			<div class="pie_text">
			<div class="fs30">{{ cneterData.PlanTotal \|\| 30 }}%</div>
			</div>
			</div>
			<div class="text">计划完成量</div>
			</div>
			</div>
			</div>
			<div class="right_box_two">
			<div class="second_title">
			<div class="title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
			<div>进销存运营</div>
			</div>
			<div class="tabs">
			<div :class="{ active: activeTabs == 0 }" class="tab" @click="tabsClick4(0)">7天</div>
			<div class="separate"></div>
			<div :class="{ active: activeTabs == 1 }" class="tab" @click="tabsClick4(1)">30天</div>
			<div class="separate"></div>
			<div :class="{ active: activeTabs == 2 }" class="tab" @click="tabsClick4(2)">1年</div>
			</div>
			</div>
			<div class="echart4_wrap">
			<div class="echart4" id="echart4"></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>
			</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="echart5"></div>
			<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>
			@@ -238,72 +405,103 @@
			<!-- -->
			<div class="modal_wrap" v-if="showModal">
			<div class="title_head">
			<img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt="">
			<span>皖a222</span>
			<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">471342</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">司机信息：</div>
			<div class="val">孙文武 17493932936</div>
			<div class="val">{{ modalInfo.driverName }} {{ modalInfo.driverTel }}</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">总运输量：</div>
			<div class="val">22万支</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">安徽省合肥市包河区繁华大道123米处</div>
			</div>
			</div>
			<div class="tabs">
			<div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">合同1:1231231</div>
			<div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">合同2:1231231</div>
			</div>
			<div class="ht_info">
			<div class="item">
			<div class="la">发货仓库：</div>
			<div class="val">芜湖成品</div>
			<div class="la">发货地点：</div>
			<div class="val">{{ modalInfo.deliveryEnterprise }}</div>
			</div>
			<div class="item">
			<div class="la">预计到达：</div>
			<div class="val">2024-12-04 14:00</div>
			</div>
			<div class="item">
			<div class="dian"></div>
			<div class="la">到货地点：</div>
			<div class="val">江门烟草物流配送中心</div>
			<div class="val">{{ modalInfo.receiveEnterprise }}</div>
			</div>
			<div class="item">
			<div class="la">运输量：</div>
			<div class="val">300万支</div>
			<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="tab1">
			<div class="title">
			<div class="logistics_wrap">
			<div class="m_title">
			<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt="">
			<span>物流信息</span>
			</div>
			<div class="item" v-for="item, i in 3">
			<div class="icon_wrap">
			<img v-if="i !== 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt="">
			<img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt="">
			<div class="line"></div>
			</div>
			<div class="content">
			<div class="status">车辆启运-电子锁气运</div>
			<div class="time">2024-04-02 12:00</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" @click="showModal = false"></div>
			<div class="modal_mask" v-if="showModal \|\| showModal1" @click="closeModal"></div>
			</div>
			</v-scale-screen>
			</template>
			@@ -313,17 +511,34 @@
			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,
			getStorearriveGoodsList,
			getStorecenterData,
			getStorecenterDataNew,
			getStoreenergyDataList,
			getStorelastMonthOil,
			getStoreTaskList,

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

			const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
			@@ -336,214 +551,182 @@
			time.value = dayjs().format('HH:mm:ss')

			}, 1000)

			const initEchart2 = () => {
			const myChart = echarts.init(document.getElementById('echart1'))
			const option = {
			series: [
			{
			type: 'pie',
			radius: ['86%', '100%'],
			label: {
			show: false,
			position: 'center'
			},
			padAngle: 5,
			itemStyle: {
			borderRadius: 10
			},
			color: colors,
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: 'Search Engine' },
			{ value: 735, name: 'Direct' },
			{ value: 580, name: 'Email' }
			]
			}
			]
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () { // 执行
			myChart.resize()
			})
			}
			const initEchart3 = () => {
			const myChart = echarts.init(document.getElementById('echart3'))
			const option = {
			tooltip: {
			trigger: 'item'
			},
			series: [
			{
			type: 'pie',
			radius: ['80%', '96%'],
			label: {
			show: false,
			position: 'center'
			},
			color: ['#72ecc5', '#19373a'],
			labelLine: {
			show: false
			},
			data: [3, 7]
			}
			]
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () { // 执行
			myChart.resize()
			})
			}

			//
			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], itemStyle: { color: '#6ae5e0' }, name: '山东', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
			{ value: [117.29, 32.0581], itemStyle: { color: '#6ae5e0' }, name: '安徽', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
			{ value: [114.3896, 30.6628], itemStyle: { color: '#6ae5e0' }, name: '湖北', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 },
			{ value: [119.5313, 29.8773], itemStyle: { color: '#6ae5e0' }, name: '浙江', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 },
			{ value: [113.12244, 23.009505], itemStyle: { color: '#6ae5e0' }, name: '广东', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 },
			{ value: [103.9526, 30.7617], itemStyle: { color: '#6ae5e0' }, name: '四川', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 }
			{ 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 }
			]
			var lineToLf = [
			{ name: '11', coords: [[110.81, 33.40], [116.55, 40.01]], lineStyle: { color: '#c1bb1f' } },
			{ name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } },
			{ name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } },
			{ name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } },
			{ name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }
			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 = {
			backgroundColor: 'transparent', // 设置背景色透明
			// 必须设置
			tooltip: {
			show: false
			//数据分段
			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',
			// 这里必须定义，不然后面series里面不生效
			tooltip: {
			show: false
			},
			// 这个是重点 —— 这里设置为地图的阴影
			map: 'china', // 表示中国地图
			roam: false, // 禁止拖拽
			label: {
			show: false
			// 标志信息
			show: false, // 是否显示对应地名
			},
			zoom: 1.6,
			silent: true, // 不响应鼠标时间
			show: true,
			roam: false, // 地图缩放和平移
			aspectScale: 0.75, // scale 地图的长宽比
			silent: true, // 禁止hover效果
			zoom: 1.4, // 地图比例
			aspectScale: 0.9, // 比例
			center: [105.194115019531, 36.582111640625], // 地图中心位置，此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
			itemStyle: {
			borderColor: '#2d5f9c',
			borderWidth: 1,
			areaColor: '#2d5f9c',
			shadowColor: 'rgba(1,34,73,0.48)',
			shadowBlur: 10,
			shadowOffsetX: -10, //
			shadowOffsetY: 10
			},
			select: {
			disabled: true
			areaColor: '#152e4a', //地图阴影的颜色
			borderColor: '#779dc8', // 省份边框颜色
			borderWidth: 0.5, // 省份边框宽度
			// shadowBlur: 5, // 省份边框聚焦
			},
			emphasis: {
			disabled: true,
			areaColor: '#00F1FF'
			show: false,
			},
			// 地图区域的多边形图形样式阴影效果
			// z值小的图形会被z值大的图形覆盖
			top: '30.2%',
			left: 'center',
			// 去除南海诸岛阴影 series map里面没有此属性
			regions: [{
			name: '南海诸岛',
			selected: false,
			emphasis: {
			disabled: true
			//地图的阴影不显示南沙诸岛
			regions: [
			{
			name: '南海诸岛',
			itemStyle: {
			// 隐藏地图
			normal: {
			opacity: 0, // 为 0 时不绘制该图形
			},
			emphasis: {
			opacity: 0,
			},
			},
			label: {
			show: false, // 隐藏文字
			},
			},
			itemStyle: {
			areaColor: '#00000000',
			borderColor: '#00000000'
			}
			}],
			z: 1
			],
			},
			//配置属性
			series: [
			// 地图配置
			{
			type: 'map',
			map: 'china',
			zoom: 1.6,
			tooltip: {
			show: false
			},
			label: {
			show: true, // 显示省份名称
			color: '#fff',
			fontSize: 13,
			shadowColor: '#fff',
			shadowBlur: 10,
			shadowOffsetX: 2,
			shadowOffsetY: 2,
			textBorderColor: '#fff',
			// rotate: 90,
			align: 'center'
			},
			top: '28%',
			left: 'center',
			aspectScale: 0.75,
			roam: false, // 地图缩放和平移
			itemStyle: {
			borderColor: '#4278a3', // 省分界线颜色阴影效果的
			borderWidth: 1,
			areaColor: '#1d3f71',
			opacity: 1
			},
			// 去除选中状态
			select: {
			disabled: true
			},
			emphasis: { // 聚焦后颜色
			disabled: false, // 开启高亮
			zoom: 1.4,
			aspectScale: 0.9, // 比例
			zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
			emphasis: {
			// 鼠标hover是否显示内容，可自己调节
			label: {
			align: 'center',
			color: '#04CFF5'
			show: true,
			color: '#fff',
			},
			itemStyle: {
			color: '#ffffff',
			areaColor: '#3c87b2'// 阴影效果鼠标移动上去的颜色
			}
			show: true,
			color: '#fff', // 高亮文字颜色
			borderColor: '#a4d0ec', // 高亮边框颜色
			areaColor: '#0056FF', //高亮区域颜色
			},
			},
			z: 2
			},
			// 点
			{
			name: 'companyPoint',
			type: 'effectScatter',
			coordinateSystem: 'geo',
			showEffectOn: 'render',
			// zlevel: 2, // zlevel用于 Canvas 分层相同的绘制在同一个canvas上
			rippleEffect: {
			number: 3, // 波纹数量
			period: 10, // 动画周期数值越大，波动越慢
			scale: 3.5, // 动画中波纹的最大缩放比例
			brushType: 'stroke' // 波纹的绘制方式 stroke fill
			},
			selectedMode: false,
			label: {
			// 地图标注
			show: false,
			triggerOn: 'click',
			position: 'right',
			formatter: '{b}',
			color: '#97e9e1',
			fontSize: 14
			},
			symbol: 'circle',
			symbolSize: 8,
			data: points,
			tooltip: {
			show: true,
			triggerOn: 'click',
			@@ -555,56 +738,63 @@
			return `<div class="map-tip-box">
			<div class="item-state-con title">
			<div class="icon"></div>
			<span>${params.data.name}</span>
			<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.total}万支</span>
			<span class="text">本月调拨量：</span>
			<span class="num">${params.data.monthNum}箱</span>
			</span>
			</div>
			<div class="item-state-con">
			<div class="item-state-con">
			<span class="dot yj"></span>
			<span class="item-state-num">
			<span class="text">本年出库量</span>
			<span class="num">${params.data.yx}万支</span>
			<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>`
			}
			},
			z: 4
			itemStyle: {
			borderColor: '#a4d0ec', // 省份边框颜色
			borderWidth: 1, // 省份边框宽度
			// shadowBlur: 5, // 省份边框聚焦
			areaColor: '#3c5997',
			},
			center: [105.194115019531, 35.582111640625], // 设置地图中心
			data: mapData,
			},
			// 地图线的动画效果
			// {
			// name: 'arrowline',
			// type: 'lines',
			// // zlevel: 1,
			// effect: {
			// show: true,
			// period: 3, // 箭头指向速度，值越小速度越快
			// trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
			// symbol: 'arrow', // 箭头图标
			// symbolSize: 6 // 图标大小
			// },
			// lineStyle: {
			// color: '#1DE9B6',
			// width: 2, // 线条宽度
			// opacity: 0.1, // 尾迹线条透明度
			// curveness: 0.2 // 尾迹线条曲直度
			// },
			// data: lineToLf,
			// z: 3
			// }
			]
			],
			}
			myChart.setOption(option)
			window.addEventListener('resize', function () {//执行
			myChart.resize()
			})
			}
			const initEnergy = (list) => {
			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({
			@@ -627,15 +817,51 @@
			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: '15%',
			top: '16%',
			containLabel: true
			},
			xAxis: {
			type: 'value',
			axisLabel: {
			color: '#D2E0FF'
			},
			splitLine: {
			show: true,
			lineStyle: {
			@@ -649,25 +875,32 @@
			axisTick: {
			show: false,
			},
			axisLabel: {
			color: '#D2E0FF'
			},
			type: 'category',
			axisLine: {
			show: false
			},
			data: list.map(i => i.dateStr)
			data: dataList1.value.map(i => i.dateStr)
			},
			series: [
			{
			name: '在途',
			name: '未启运',
			type: 'bar',
			stack: 'total',
			barWidth: 14,
			label: {
			show: true
			show: true,
			textStyle: {
			color: '#000000',
			fontSize: 12
			}
			},
			emphasis: {
			focus: 'series'
			},
			data: list.map(i => i.inTransitNum),
			data: dataList1.value.map(i => i.waitNum),
			itemStyle: {
			normal: {
			color: {
			@@ -678,10 +911,53 @@
			y2: 0,
			colorStops: [{
			offset: 0,
			color: '#204d75'
			color: '#fadf74'
			},
			{
			offset: 0.3,
			color: '#f7cd5e'
			}, {
			offset: 1,
			color: '#2f6eae'
			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'
			}]
			}
			}
			@@ -693,7 +969,15 @@
			barWidth: 14,
			stack: 'total',
			label: {
			show: true
			show: true,
			textStyle: {
			color: '#000000',
			fontSize: 12
			}
			},
			textStyle: {
			color: '#000000',
			fontSize: 10
			},
			itemStyle: {
			normal: {
			@@ -705,81 +989,214 @@
			y2: 0,
			colorStops: [{
			offset: 0,
			color: '#3e8593'
			color: '#73f7d1'
			}, {
			offset: 1,
			color: '#5cc2d2'
			color: '#58beaa'
			}]
			}
			}
			},
			},
			emphasis: {
			focus: 'series'
			},
			data: list.map(i => i.arriveNum)
			data: dataList1.value.map(i => i.doneNum)
			}
			]
			})
			myChart.on('click', function (params) {
			console.log(params.name)

			// 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 = () => {
			getStorearriveGoodsList().then(res => {
			initEnergy(res.data \|\| [])
			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 modalTabClick = (val) => {
			modalTab.value = val
			}
			const pager = ref({
			page: 0,
			rows: 50
			})
			const taskClick = (item) => {
			modalInfo.value = 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 = () => {
			getStoreTaskList({ code: taskCode.value }).then(res => {
			let temp = res.data \|\| []
			// temp = temp.splice(0, 5)
			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 => {
			item.taskDate = item.taskDate.slice(5, 16)
			if (item.createDate) {
			item.createDate = item.createDate.slice(5, 16)
			}
			return item
			})
			loopFn1()
			console.log('isLoadingTask', isLoadingTask.value)

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

			const cneterData = ref({})
			const showPro = ref(false)
			const cityList = ref([
			{ name: '全省', id: 0 },
			{ name: '合肥仓', id: 1 },
			{ name: '芜湖仓', id: 2 },
			{ name: '滁州仓', id: 3 },
			{ name: '蚌埠仓', id: 4 },
			])
			const activeCity = ref({ name: '全省', id: 0 })
			const cityList = ref()
			const getCity = () => {
			kzfactoryList().then(res => {
			cityList.value = [{ name: '全省', code: '' }, ...res.data]
			})
			}
			const activeCity = ref({ name: '全省', code: '' })
			const colors = ['#0193FE', '#FFB642']
			const StockOutData = ref([])
			const cityClick = (item) => {
			activeCity.value = item
			showPro.value = false
			cneterData.value = {}
			setTimeout(() => {
			getData3()
			}, 400)
			changeCity()
			}
			const initEchart1 = () => {
			const myChart = echarts.init(document.getElementById('echart1'))

			const option = {
			tooltip: {
			trigger: 'item'
			@@ -792,11 +1209,20 @@
			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
			data: StockOutData.value.arr
			}
			]
			}
			@@ -805,270 +1231,82 @@
			myChart.resize()
			})
			}

			const activeTab1 = ref(0)
			const loading1 = ref(false)
			const StockOutData = ref({})
			const getStockOut = () => {
			let arr = []
			arr.push({ name: '省内', value: (cneterData.value.yearProvinceRata * 100).toFixed(0) + '%' })
			arr.push({ name: '省外', value: ((1 - cneterData.value.yearProvinceRata) * 100).toFixed(0) + '%' })
			arr.sort((a, b) => b.value - a.value)
			StockOutData.value = arr
			initEchart1()
			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().then(res => {
			cneterData.value = res.data \|\| {}
			getStockOut()
			getStorecenterDataNew({
			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 activeTabs = ref(0)
			const dataList4 = ref([])
			const initEchart4 = () => {
			// 基于准备好的dom，初始化echarts实例
			const myChart = echarts.init(document.getElementById('echart4'))
			// 绘制图表
			myChart.setOption({
			tooltip: {
			trigger: 'axis',
			backgroundColor: '#091123',
			axisPointer: {
			type: 'line'
			},
			// formatter: function (params) {
			// setTimeout(() => {
			// })
			// return `
			// <div style="background-color: #091123;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;">
			// <div>${params[0].name}总销售额(万元)</div>
			// <div style="display: flex;align-items: center;">
			// <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #ebbf40;"></div>
			// <div style="margin: 0 4px 0 6px;">总销售</div>
			// <span style="color: #ebbf40;">${params[0].value}</span>
			// </div>
			// </div>
			// `
			// }
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: dataList4.value.map(i => i.dateStr)
			},
			yAxis: {
			type: 'value',
			name: '万支',
			nameTextStyle: {
			padding: [0, 0, 0, -16] // 四个数字分别为上右下左与原位置距离
			},
			splitLine: {
			show: true,
			lineStyle: {
			//这里输入线条的样式
			color: 'rgba(255,255,255,0.14)',
			type: 'dashed',
			},
			splitNumber: 4
			}
			},
			legend: {
			itemGap: 24,
			icon: 'rect',
			right: '12px',
			top: '0',
			itemWidth: 16,
			itemHeight: 2,
			textStyle: {
			color: '#fff',
			borderColor: '#fff'
			},
			data: ['总入库量', '总出库量', '库存量']
			},
			grid: {
			top: '18%',
			left: '0%',
			right: '2%',
			bottom: '2%',
			containLabel: true
			},
			series: [
			{
			name: '总入库量',
			data: dataList4.value.map(item => {
			return {
			name: item.dateStr,
			value: item.totalInNum,
			}
			}),
			type: 'line',
			areaStyle: {
			normal: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [
			{
			offset: 0,
			color: "#4191f6" // 0% 处的颜色
			},
			{
			offset: .4,
			color: "#203d79" // 0% 处的颜色
			},
			{
			offset: 1,
			color: "#1b1b12" // 100% 处的颜色
			}],
			globalCoord: false // 缺省为 false
			}
			}
			},
			lineStyle: { // 线条样式
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0, color: '#4191f6' // 0% 处的颜色
			}, {
			offset: 1, color: '#4191f6' // 100% 处的颜色
			}],
			},
			width: 1.5, // 线条粗细
			},
			symbol: 'circle',
			symbolSize: 4,
			itemStyle: {
			color: "#4190f4",
			borderColor: "rgba(255,255,255,.3)",
			borderWidth: 4,
			},
			smooth: true
			},
			{
			name: '总出库量',
			data: dataList4.value.map(item => {
			return {
			name: item.dateStr,
			value: item.totalOutNum,
			}
			}),
			type: 'line',
			areaStyle: {
			normal: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0,
			color: "rgba(192, 156, 53,.7)" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#1b1b12" // 100% 处的颜色
			}],
			globalCoord: false // 缺省为 false
			}
			}
			},
			lineStyle: { // 线条样式
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0, color: '#F3BD00' // 0% 处的颜色
			}, {
			offset: 1, color: '#F3BD00' // 100% 处的颜色
			}],
			},
			width: 2, // 线条粗细
			},
			symbol: 'circle',
			symbolSize: 4,
			itemStyle: {
			color: "#F3BD00",
			borderColor: "rgba(255,255,255,.3)",
			borderWidth: 4,
			},
			smooth: true
			},
			{
			name: '库存量',
			data: dataList4.value.map(item => {
			return {
			name: item.dateStr,
			value: item.stockNum,
			}
			}),
			type: 'line',
			areaStyle: {
			normal: {
			color: {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0,
			color: "rgba(218, 233, 250)" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#1b1b12" // 100% 处的颜色
			}],
			globalCoord: false // 缺省为 false
			}
			}
			},
			lineStyle: { // 线条样式
			color: {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			offset: 0, color: '#fff' // 0% 处的颜色
			}, {
			offset: 1, color: '#fff' // 100% 处的颜色
			}],
			},
			width: 2, // 线条粗细
			},
			symbol: 'circle',
			symbolSize: 4,
			itemStyle: {
			color: "#fff",
			borderColor: "rgba(255,255,255,.3)",
			borderWidth: 4,
			},
			smooth: true
			},
			]
			})

			window.addEventListener('resize', function () {//执行
			myChart.resize()
			})
			}
			const tabsClick4 = (tab) => {
			activeTabs.value = tab
			getData4()
			}
			const getData4 = () => { // 进销存运营
			getStoreOperationList({ queryType: activeTabs.value }).then(res => {
			console.log('res', res)
			dataList4.value = res.data \|\| []
			initEchart4()
			})
			}

			const dataList5 = ref([])
			const data5 = ref({})
			const data6 = ref({})
			const data7 = ref({})
			const initEchart5 = () => {
			// 基于准备好的dom，初始化echarts实例
			const myChart = echarts.init(document.getElementById('echart5'))
			@@ -1077,9 +1315,9 @@
			legend: {
			itemGap: 12,
			// icon: 'circle',
			right: '12px',
			top: '0',
			data: ['总库存', '当前库存', '库存利用率'],
			right: '12%',
			top: '0%',
			data: ['总库容', '当前库存', '库存利用率'],
			itemWidth: 20,
			itemHeight: 10,
			textStyle: {
			@@ -1091,11 +1329,37 @@
			left: '3%',
			right: '0%',
			bottom: '3%',
			top: '24%',
			top: '18%',
			containLabel: true
			},
			tooltip: {
			trigger: 'axis'
			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,
			@@ -1108,20 +1372,429 @@
			},
			axisLabel: {
			color: '#869CC9'
			// fontSize: 24,
			},
			axisTick: {
			show: false,
			},
			data: dataList5.value.map(i => i.placeName),
			data: data5.value.detailList.map(i => i.factoryName),
			}],
			yAxis: [
			{
			nameTextStyle: {
			color: '#869CC9',
			},
			offset: 0,
			name: '万支',
			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,
			@@ -1142,35 +1815,39 @@
			{
			type: 'value',
			name: '%',
			nameGap: 16,
			min: 0,
			max: 100,
			// interval: 5,
			axisLabel: {
			formatter: '{value}'
			color: "#869CC9",
			},
			nameTextStyle: {
			color: '#869CC9',
			padding: [0, 0, 0, 12]
			},
			splitLine: false
			}
			],
			series: [
			{
			name: '总库存',
			name: '当日可用运力',
			type: 'bar',
			barWidth: 8,
			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: '#5bc7d5'
			color: '#73f0c6'
			},
			{
			offset: 1,
			color: '#1a3f55'
			color: '#3f8ca6'
			}
			], false),
			lineStyle: {
			@@ -1179,26 +1856,31 @@
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: dataList5.value.map(i => i.totalStockNum)
			data: data7.value.detailList.map(i => (i.totalNum - i.zaituNum))
			},
			{
			name: '当前库存',
			name: '当日提报运力',
			type: 'bar',
			barWidth: 8,
			barWidth: 10,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			yAxisIndex: 0,
			itemStyle: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			{
			offset: 0,
			color: '#edaf3d'
			color: '#ed7e32'
			},
			{
			offset: 0.6,
			color: '#e99b5c'
			},
			{
			offset: 1,
			color: '#323522'
			color: '#e7a774'
			}
			], false),
			lineStyle: {
			@@ -1207,23 +1889,24 @@
			},
			barBorderRadius: [30, 30, 0, 0],
			},
			data: dataList5.value.map(i => i.nowStockNum)
			data: data7.value.detailList.map(i => i.currentNum)
			},
			{
			name: '库存利用率',
			name: '车辆利用率',
			type: 'line',
			smooth: true,
			smooth: false,
			showAllSymbol: true,
			symbol: 'none',
			lineStyle: {
			color: "#3d87e5"
			color: "#9eabc2"
			},
			yAxisIndex: 1,
			label: {
			show: false,
			position: 'top',
			color: '#fff',
			},
			data: dataList5.value.map(i => i.stockRataNum)
			data: data7.value.detailList.map(i => i.useRate)
			}
			]
			})
			@@ -1233,12 +1916,41 @@
			})
			}
			const getData5 = () => {
			getStoreenergyDataList({ queryType: activeTabs.value }).then(res => {
			console.log('res', res)
			dataList5.value = res.data \|\| []
			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) {
			@@ -1252,30 +1964,31 @@
			initialSlide: 0,
			direction: 'vertical', //竖直方向
			slidesPerView: 5,
			autoplay: autoplayFlag(transportTask.value, 5, 4000),
			autoplay: autoplayFlag(transportTask.value, 5, 6000),
			observer: true, //修改swiper自己或子元素时，自动初始化swiper
			})
			}

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

			onMounted(() => {
			initData()

			initMap()
			// initEchart2()
			initEchart3()
			// initEchart4()
			// initEchart5()
			window.addEventListener('click', () => {

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


			@@ -1333,6 +2046,8 @@
			.left_box_one {
			margin-top: 20px;
			padding: 0px 10px 30px 20px;
			position: relative;
			height: 160px;

			.content_wrap {
			display: flex;
			@@ -1445,12 +2160,29 @@

			.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 {
			@@ -1472,6 +2204,15 @@
			text-overflow: ellipsis;
			}

			.status {
			flex: 3.2;
			}
			}

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

			.header {
			@@ -1514,6 +2255,9 @@
			.left {
			display: flex;
			align-items: center;
			position: relative;



			img {
			width: 16px;
			@@ -1562,8 +2306,37 @@
			.static_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			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;
			@@ -1594,17 +2367,24 @@
			-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 50%,
			#20FFC5 30%,
			#20FFC5 100%);
			}

			.finish {
			background-image: -webkit-linear-gradient(top,
			#fff 0%,
			#FFB120 50%,
			#FFB120 30%,
			#FFB120 100%);
			}
			}
			@@ -1619,16 +2399,154 @@
			}

			.footer {
			font-weight: 500;
			font-size: 16px;
			display: flex;
			align-items: center;
			.wrap {
			display: flex;
			align-items: center;
			height: 76px;

			.num {
			font-weight: bold;
			font-size: 24px;
			color: #01D9FE;
			margin-left: 8px;
			.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;
			}
			}
			}
			}
			@@ -1636,11 +2554,62 @@
			.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;
			}
			}

			}
			}
			}
			@@ -1648,131 +2617,132 @@
			.right_box {
			width: 440px;

			.right_box_one {
			margin-top: 20px;
			padding: 0px 10px 30px 20px;

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

			.num_wrap {
			width: 280px;

			.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;
			}
			}
			}

			.static_wrap {
			flex: 1;

			.echart_wrap {
			width: 54px;
			height: 54px;
			position: relative;
			margin-bottom: 12px;

			.echart3 {
			width: 54px;
			height: 54px;
			}

			.pie_text {
			width: 38px;
			height: 38px;
			border: 1px dashed rgba(210, 224, 255, 0.48);
			border-radius: 50%;
			position: absolute;

			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 999;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;

			.fs30 {
			font-weight: 600;
			font-size: 14px;
			color: #28F0C4;
			}
			}

			}

			.text {
			font-size: 13px;
			color: #869CC9;
			}
			}
			}
			}

			.right_box_two {
			padding: 10px 15px;

			.echart4_wrap {
			width: 410px;
			height: 216px;

			.echart4 {
			width: 410px;
			height: 216px;
			}
			}
			}

			.right_box_three {
			margin-top: 20px;

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

			.echart5 {
			height: 240px;
			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 {
			@@ -1882,21 +2852,58 @@
			width: 600px;
			height: 556px;
			background: rgba(0, 30, 63, 0.5);
			border: 1px solid #c6eef7;
			/* border: 1px solid #c6eef7; */
			backdrop-filter: blur(5px);
			position: fixed;
			top: 20%;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 999;
			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;
			font-weight: bold;
			font-size: 17px;
			margin-bottom: 20px;
			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;
			@@ -1907,10 +2914,14 @@
			.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;
			/* align-items: center; */
			font-size: 13px;
			width: 55%;
			margin-bottom: 8px;
			@@ -1925,67 +2936,22 @@
			background-color: #fff;
			border-radius: 50%;
			margin-right: 4px;
			margin-top: 7px;
			}

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

			.val {
			flex: 1;
			}
			}
			}

			.tabs {
			display: flex;
			border-bottom: 1px solid rgba(255, 255, 255, 0.16);
			margin: 0 -24px;
			margin-bottom: 20px;
			padding-left: 12px;

			.tab {
			color: #869CC9;
			font-size: 14px;
			margin-left: 12px;
			height: 42px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2px solid #06182e;
			cursor: pointer;
			}

			.active {
			font-weight: 500;
			font-size: 15px;
			color: #00F2F3;
			border-bottom: 2px solid #00F2F3;
			}
			}

			.ht_info {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 10px 0;
			background-color: #0d2845;
			margin-bottom: 20px;

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

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

			.la {
			color: #01D9FE;
			}
			}
			}

			.tab1 {
			.title {
			.logistics_wrap {
			.m_title {
			display: flex;
			align-items: center;
			font-style: 16px;
			@@ -1998,64 +2964,118 @@
			}
			}

			.item {
			display: flex;
			margin-left: 6px;
			.fu_list {
			height: 310px;
			width: 290px;
			margin-top: 20px;
			overflow: auto;

			&:nth-last-child(1) {
			.content {
			.time {
			padding-bottom: 0;
			.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: 10px;
			margin-right: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.dian {
			width: 12px;
			height: 12px;
			}

			.dian_ac {
			.icon {
			width: 24px;
			height: 24px;
			}

			.line {
			width: 1px;
			height: 100%;
			border: 1px dashed #8a9bc5;
			position: relative;
			z-index: 2;
			}
			}

			.content {
			font-size: 13px;
			color: #D2E0FF;

			.status {
			font-weight: 500;
			font-size: 14px;
			margin-bottom: 5px;
			color: #fff;
			}
			.item {
			position: relative;
			color: #b1bfdc;
			margin-bottom: 15px;

			.text {
			margin-bottom: 4px;
			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;
			padding-bottom: 12px;
			}
			}
			}
			}


			}

			@@ -2065,8 +3085,8 @@
			height: 100%;
			top: 0;
			left: 0;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.1);
			z-index: 9999;
			/* background-color: rgba(0, 0, 0, 0.0); */
			/* background-color: red; */
			}

			@@ -2085,6 +3105,12 @@
			font-weight: 500;
			font-size: 16px;
			color: #FFFFFF;
			position: relative;

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

			.icon {
			width: 16px;
			@@ -2113,7 +3139,7 @@
			align-items: center;
			font-size: 14px;
			color: #869CC9;
			width: 96px;
			width: 110px;
			height: 28px;
			border-radius: 14px;
			border: 1px solid #869CC9;
			@@ -2128,6 +3154,28 @@

			.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;
			}
			}
			}

			@@ -2185,4 +3233,4 @@
			object-fit: cover;
			z-index: -1;
			}
			</style>
			</style>