|  |  |  | 
|---|
|  |  |  | <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" v-if="cneterData.currentOrderNum">{{ cneterData.currentOrderNum.toFixed(0) }}</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 v-if="cneterData.currentPlanNum">{{ cneterData.currentPlanNum.toFixed(0) }}</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 v-if="cneterData.crrentOutNum" class="finish">{{ cneterData.crrentOutNum.toFixed(0) }}</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 v-if="cneterData.crrentRestNum" class="today">{{ cneterData.crrentRestNum.toFixed(0) }}</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> | 
|---|
|  |  |  | 
|---|
|  |  |  | 全省: | 
|---|
|  |  |  | <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' | 
|---|
|  |  |  | 
|---|
|  |  |  | { 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 => { | 
|---|
|  |  |  | 
|---|
|  |  |  | item.value = 0 | 
|---|
|  |  |  | item.monthNum = ite.monthNum | 
|---|
|  |  |  | item.yearNum = ite.yearNum | 
|---|
|  |  |  | if(totalNum > 0){ | 
|---|
|  |  |  | if (totalNum > 0) { | 
|---|
|  |  |  | item.rate = ((ite.yearNum / totalNum) * 100).toFixed(2) | 
|---|
|  |  |  | item.value = (ite.yearNum / totalNum).toFixed(4) | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | 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: { | 
|---|
|  |  |  | 
|---|
|  |  |  | // 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) + '%' | 
|---|
|  |  |  | 
|---|
|  |  |  | } 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>` | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | // 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | margin: 30px 0 14px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tooltip_wrap { | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &:hover { | 
|---|
|  |  |  | .tooltip { | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tooltip { | 
|---|
|  |  |  | display: none; | 
|---|
|  |  |  | background: rgba(0, 30, 63, 0.6); | 
|---|
|  |  |  | border: 1px solid #003F82; | 
|---|
|  |  |  | backdrop-filter: blur(3px); | 
|---|
|  |  |  | padding: 10px; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | line-height: 19px; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | border-radius: 6px; | 
|---|
|  |  |  | width: 230px; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | line-height: 24px; | 
|---|
|  |  |  | left: 100%; | 
|---|
|  |  |  | top: 50%; | 
|---|
|  |  |  | transform: translate(20px, -42%); | 
|---|
|  |  |  | z-index: 999999999999999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tag { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | z-index: 99999; | 
|---|
|  |  |  | bottom: -30px; | 
|---|
|  |  |  | right: 0; | 
|---|
|  |  |  | transform: translate(50%, 0); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .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; | 
|---|