|  |  | 
 |  |  |       <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> | 
 |  |  | 
 |  |  |             <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> | 
 |  |  |             <div class="content_wrap"> | 
 |  |  |               <div class="num_wrap"> | 
 |  |  |                 <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 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> | 
 |  |  |                     <template v-if="StockOutData.currentNum && StockOutData.lastNum"> | 
 |  |  |                       <img v-if="StockOutData.currentNum >= StockOutData.lastNum" src="@/assets/images/ic_up.png" | 
 |  |  |                     <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.lastNum && StockOutData.currentNum">{{ Math.abs((((StockOutData.currentNum | 
 |  |  |                     <span v-if="StockOutData.sameOutNum">{{ Math.abs((((StockOutData.currentOutNum | 
 |  |  |                       - | 
 |  |  |                       StockOutData.lastNum) / | 
 |  |  |                       StockOutData.lastNum) | 
 |  |  |                       StockOutData.sameOutNum) / | 
 |  |  |                       StockOutData.sameOutNum) | 
 |  |  |                       * 100).toFixed(2)) }}%</span> | 
 |  |  |                     <span v-else style="margin-left: 6px;">-</span> | 
 |  |  |                     <span class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span> | 
 |  |  |                     <span v-if="StockOutData.totalCarNum" class="la" | 
 |  |  |                       style="margin-left: 30px;margin-right: 10px;">累计出库车次</span> | 
 |  |  |                     <span>{{ StockOutData.totalCarNum || '' }}</span> | 
 |  |  |                   </div> | 
 |  |  |  | 
 |  |  | 
 |  |  |                     <span class="item">{{ item.contractNumber }}</span> | 
 |  |  |                     <span class="item status">{{ item.statusDesc }}</span> | 
 |  |  |                     <span class="item">{{ item.receiveEnterprise }}</span> | 
 |  |  |                     <span class="item">{{ item.transportDate }}</span> | 
 |  |  |                     <span class="item">{{ item.createDate || '-' }}</span> | 
 |  |  |                   </div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  | 
 |  |  |               <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=""> | 
 |  |  | 
 |  |  |               <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">{{ cneterData.currentOrderNum }}</span>万支</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>{{ cneterData.currentPlanNum }}</span>万支</div> | 
 |  |  |                   <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> | 
 |  |  | 
 |  |  |                 <img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">今日出库量</div> | 
 |  |  |                   <div class="num"><span class="finish">{{ cneterData.crrentOutNum }}</span>万支</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"><span class="today">{{ cneterData.crrentRestNum }}</span>万支</div> | 
 |  |  |                   <div class="unit">车次:{{ cneterData.crrentRestCarNum }}</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> --> | 
 |  |  |                   <div :style="{ width: cneterData.level3 }" | 
 |  |  |                     :class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box"> | 
 |  |  |                     <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag"> | 
 |  |  |                       <div class="icon"></div> | 
 |  |  |                       <span>今日出库</span> | 
 |  |  |                     <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 v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1"> | 
 |  |  |                       <div class="icon"></div> | 
 |  |  |                       <span>当日计划</span> | 
 |  |  |                     <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="tag"> | 
 |  |  |                       <div class="icon"></div> | 
 |  |  |                       <span>今日出库</span> | 
 |  |  |                     <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="tag tag1"> | 
 |  |  |                       <div class="icon"></div> | 
 |  |  |                       <span>当日计划</span> | 
 |  |  |                     <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;">8h</div> | 
 |  |  |                   <div class="scale scale1">最大</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 class="side"> | 
 |  |  |                 全省: | 
 |  |  |                 <span>{{ data5.currentNum }}</span> | 
 |  |  |                 <span class="unit">万支 | </span> | 
 |  |  |                 <span class="unit">箱 | </span> | 
 |  |  |                 <span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |               <div class="side"> | 
 |  |  |                 全省: | 
 |  |  |                 <span>{{ data6.currentNum }}</span> | 
 |  |  |                 <span class="unit">万支 | </span> | 
 |  |  |                 <span class="unit">箱 | </span> | 
 |  |  |                 <span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |                 全省: | 
 |  |  |                 <span>{{ data7.currentNum }}</span> | 
 |  |  |                 <span class="unit">辆 | </span> | 
 |  |  |                 <span v-if="data7.totalNum">{{ ((data7.currentNum / data7.totalNum) * 100).toFixed(1) }}%</span> | 
 |  |  |                 <span v-if="data7.totalNum">{{ (data7.useRate * 100).toFixed(1) }}%</span> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="echart5_wrap"> | 
 |  |  | 
 |  |  |       <div class="modal_wrap" v-if="showModal"> | 
 |  |  |         <div class="title_head"> | 
 |  |  |           <div class="left"> | 
 |  |  |             <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> | 
 |  |  |             <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="item"> | 
 |  |  |             <div class="dian"></div> | 
 |  |  |             <div class="la">车辆位置:</div> | 
 |  |  |             <div class="val">{{ modalInfo.aa || '-' }}</div> | 
 |  |  |             <div class="val">{{ modalInfo.position || '-' }}</div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <div class="dian"></div> | 
 |  |  | 
 |  |  | 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 { | 
 |  |  |   getStoreOperationList, | 
 |  |  |   getStorecenterData, | 
 |  |  |   getStorecenterDataNew, | 
 |  |  |   getStoreenergyDataList, | 
 |  |  |   getStorelastMonthOil, | 
 |  |  |   getStoreTaskList, | 
 |  |  | 
 |  |  |     { 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 }, | 
 |  |  |     { 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 = ite.yearNum | 
 |  |  |         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) | 
 |  |  |  | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     }) | 
 |  |  |   }) | 
 |  |  | 
 |  |  |     visualMap: { | 
 |  |  |       type: 'piecewise', | 
 |  |  |       pieces: [ | 
 |  |  |         { 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' }, | 
 |  |  |         { 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, | 
 |  |  | 
 |  |  |                         <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 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.yearNum}万支</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>` | 
 |  |  | 
 |  |  |     mapList.value = temp.map(item => { | 
 |  |  |       item.value = item.monthNum | 
 |  |  |       item.name = item.provinceName | 
 |  |  |       item.code=item.provinceCode | 
 |  |  |       item.code = item.provinceCode | 
 |  |  |       return item | 
 |  |  |     }) | 
 |  |  |     initMap() | 
 |  |  | 
 |  |  |         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%', | 
 |  |  | 
 |  |  |   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(() => { | 
 |  |  | 
 |  |  |       image: fahuoImg, // 图标图片URL | 
 |  |  |       imageSize: new AMap.Size(28, 32), // 图标实际大小 | 
 |  |  |     }), | 
 |  |  |     title: '标记点1', // 鼠标悬停时显示的标题 | 
 |  |  |     title: obj.deliveryEnterprise, // 鼠标悬停时显示的标题 | 
 |  |  |   }) | 
 |  |  |   map.add(marker1) | 
 |  |  |   const marker2 = new AMap.Marker({ | 
 |  |  | 
 |  |  |       image: shouImg, // 图标图片URL | 
 |  |  |       imageSize: new AMap.Size(28, 32), // 图标实际大小 | 
 |  |  |     }), | 
 |  |  |     title: '标记点1', // 鼠标悬停时显示的标题 | 
 |  |  |     title: obj.receiveEnterprise, // 鼠标悬停时显示的标题 | 
 |  |  |   }) | 
 |  |  |   map.add(marker2) | 
 |  |  |   // 绘制轨迹 | 
 |  |  | 
 |  |  |     isLoadingTask.value = false | 
 |  |  |     let temp = res.data.rows || [] | 
 |  |  |     transportTask.value = temp.map(item => { | 
 |  |  |       if (item.transportDate) { | 
 |  |  |         item.transportDate = item.transportDate.slice(5, 16) | 
 |  |  |       if (item.createDate) { | 
 |  |  |         item.createDate = item.createDate.slice(5, 16) | 
 |  |  |       } | 
 |  |  |       return item | 
 |  |  |     }) | 
 |  |  | 
 |  |  |         label: { | 
 |  |  |           show: false, | 
 |  |  |           position: 'center' | 
 |  |  |         }, | 
 |  |  |         emphasis: { | 
 |  |  |           // 设置悬浮时样式为空 | 
 |  |  |           scale: false, // 关闭放大效果 | 
 |  |  |           itemStyle: { | 
 |  |  |             shadowBlur: 0, // 阴影模糊度为 0 | 
 |  |  |             shadowOffsetX: 0, | 
 |  |  |             shadowColor: 'rgba(0, 0, 0, 0)', | 
 |  |  |           }, | 
 |  |  |         }, | 
 |  |  |         color: colors, | 
 |  |  |         labelLine: { | 
 |  |  | 
 |  |  | } | 
 |  |  | //  footer | 
 |  |  | const getData3 = () => { | 
 |  |  |   getStorecenterData({ | 
 |  |  |   getStorecenterDataNew({ | 
 |  |  |     factoryCode: activeCity.value.code | 
 |  |  |   }).then(res => { | 
 |  |  |     const obj = res.data || {} | 
 |  |  | 
 |  |  |     // 8小时 计划 今日 | 
 |  |  |     // obj.hoursAbility = 6000 | 
 |  |  |     // obj.maxAbility = 8000 | 
 |  |  |     // obj.currentPlanNum = 5000 | 
 |  |  |     // obj.currentPlanNum = 22000 | 
 |  |  |     // obj.crrentOutNum = 7000 | 
 |  |  |  | 
 |  |  |     obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%' | 
 |  |  | 
 |  |  |       // icon: 'circle', | 
 |  |  |       right: '12%', | 
 |  |  |       top: '0%', | 
 |  |  |       data: ['总库存', '当前库存', '库存利用率'], | 
 |  |  |       data: ['总库容', '当前库存', '库存利用率'], | 
 |  |  |       itemWidth: 20, | 
 |  |  |       itemHeight: 10, | 
 |  |  |       textStyle: { | 
 |  |  | 
 |  |  |         // 遍历悬浮时的所有点,定制化显示内容 | 
 |  |  |         let result = `<div style="width: 160px">${params[0].name}</div>` | 
 |  |  |         params.forEach((item) => { | 
 |  |  |           if (item.seriesName === '总库存') { | 
 |  |  |           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> | 
 |  |  | 
 |  |  |           } 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: #5a6fc0;margin-right: 4px;"></div><div>${item.seriesName}</div></div> | 
 |  |  |               <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>` | 
 |  |  |           } | 
 |  |  | 
 |  |  |         nameTextStyle: { | 
 |  |  |           color: '#869CC9', | 
 |  |  |         }, | 
 |  |  |         name: '万支', | 
 |  |  |         name: '箱', | 
 |  |  |         nameGap: 16, | 
 |  |  |         type: 'value', | 
 |  |  |         axisLabel: { | 
 |  |  | 
 |  |  |     ], | 
 |  |  |     series: [ | 
 |  |  |       { | 
 |  |  |         name: '总库存', | 
 |  |  |         name: '总库容', | 
 |  |  |         type: 'bar', | 
 |  |  |         barWidth: 10, | 
 |  |  |         barGap: '60%', | 
 |  |  | 
 |  |  |     }], | 
 |  |  |     yAxis: [ | 
 |  |  |       { | 
 |  |  |         name: '万支', | 
 |  |  |         name: '箱', | 
 |  |  |         nameGap: 16, | 
 |  |  |         type: 'value', | 
 |  |  |         axisLabel: { | 
 |  |  | 
 |  |  |       // icon: 'circle', | 
 |  |  |       right: '10%', | 
 |  |  |       top: '0%', | 
 |  |  |       data: ['总运力资源', '当日提报运力', '车辆利用率'], | 
 |  |  |       data: ['当日可用运力', '当日提报运力', '车辆利用率'], | 
 |  |  |       itemWidth: 20, | 
 |  |  |       itemHeight: 10, | 
 |  |  |       textStyle: { | 
 |  |  | 
 |  |  |         // 遍历悬浮时的所有点,定制化显示内容 | 
 |  |  |         let result = `<div style="width: 160px">${params[0].name}</div>` | 
 |  |  |         params.forEach((item) => { | 
 |  |  |           if (item.seriesName === '总运力资源') { | 
 |  |  |           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> | 
 |  |  | 
 |  |  |     ], | 
 |  |  |     series: [ | 
 |  |  |       { | 
 |  |  |         name: '总运力资源', | 
 |  |  |         name: '当日可用运力', | 
 |  |  |         type: 'bar', | 
 |  |  |         barWidth: 10, | 
 |  |  |         barGap: '60%', | 
 |  |  | 
 |  |  |           }, | 
 |  |  |           barBorderRadius: [30, 30, 0, 0], | 
 |  |  |         }, | 
 |  |  |         data: data7.value.detailList.map(i => i.totalNum) | 
 |  |  |         data: data7.value.detailList.map(i => (i.totalNum - i.zaituNum)) | 
 |  |  |       }, | 
 |  |  |       { | 
 |  |  |         name: '当日提报运力', | 
 |  |  | 
 |  |  |     initialSlide: 0, | 
 |  |  |     direction: 'vertical', //竖直方向 | 
 |  |  |     slidesPerView: 5, | 
 |  |  |     autoplay: autoplayFlag(transportTask.value, 5, 4000), | 
 |  |  |     autoplay: autoplayFlag(transportTask.value, 5, 6000), | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | 
 |  |  |       margin-top: 20px; | 
 |  |  |       padding: 0px 10px 30px 20px; | 
 |  |  |       position: relative; | 
 |  |  |       height: 160px; | 
 |  |  |  | 
 |  |  |       .content_wrap { | 
 |  |  |         display: flex; | 
 |  |  | 
 |  |  |         .left { | 
 |  |  |           display: flex; | 
 |  |  |           align-items: center; | 
 |  |  |           position: relative; | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |           img { | 
 |  |  |             width: 16px; | 
 |  |  | 
 |  |  |       .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; | 
 |  |  | 
 |  |  |  | 
 |  |  |             .tag { | 
 |  |  |               position: absolute; | 
 |  |  |               z-index: 99999; | 
 |  |  |               bottom: -30px; | 
 |  |  |               right: 0; | 
 |  |  |               transform: translate(50%, 0); | 
 |  |  | 
 |  |  |               align-items: center; | 
 |  |  |               justify-content: center; | 
 |  |  |               min-width: 76px; | 
 |  |  |               border: 1px solid #fff; | 
 |  |  |               border: 1px solid #FECE01; | 
 |  |  |  | 
 |  |  |               .icon { | 
 |  |  |                 position: absolute; | 
 |  |  | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .tooltip_wrap { | 
 |  |  |               .tooltip { | 
 |  |  |                 z-index: 9999999999; | 
 |  |  |                 top: 34px; | 
 |  |  |                 transform: translate(70px, -42%); | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .tag1 { | 
 |  |  |               background-color: #28F0CC; | 
 |  |  |               border: 1px solid #28F0CC; | 
 |  |  |  | 
 |  |  |               .icon { | 
 |  |  |                 background-color: #28F0CC; | 
 |  |  | 
 |  |  |             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: 84%; | 
 |  |  |             left: 92%; | 
 |  |  |             min-width: 36px; | 
 |  |  |           } | 
 |  |  |  | 
 |  |  | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .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 { | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .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: 20px; | 
 |  |  |     margin-bottom: 8px; | 
 |  |  |  | 
 |  |  |     .left { | 
 |  |  |       display: flex; | 
 |  |  | 
 |  |  |     flex-wrap: wrap; | 
 |  |  |     background-color: #0d2845; | 
 |  |  |     border-radius: 4px; | 
 |  |  |     padding: 10px 20px 0; | 
 |  |  |     padding: 10px 20px 0px; | 
 |  |  |     margin-bottom: 16px; | 
 |  |  |  | 
 |  |  |     .item { | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  |       /* align-items: center; */ | 
 |  |  |       font-size: 13px; | 
 |  |  |       width: 55%; | 
 |  |  |       margin-bottom: 8px; | 
 |  |  | 
 |  |  |         background-color: #fff; | 
 |  |  |         border-radius: 50%; | 
 |  |  |         margin-right: 4px; | 
 |  |  |         margin-top: 7px; | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       .la { | 
 |  |  |         color: #01D9FE; | 
 |  |  |         width: 70px; | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       .val { | 
 |  |  |         flex: 1; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | 
 |  |  |     font-weight: 500; | 
 |  |  |     font-size: 16px; | 
 |  |  |     color: #FFFFFF; | 
 |  |  |     position: relative; | 
 |  |  |  | 
 |  |  |     .hover_wrap { | 
 |  |  |       left: 175px; | 
 |  |  |       height: 80px; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .icon { | 
 |  |  |       width: 16px; |