|  |  | 
 |  |  |       <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> | 
 |  |  |  | 
 |  |  |                 </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> | 
 |  |  |  | 
 |  |  | 
 |  |  |           <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' | 
 |  |  | 
 |  |  |   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(() => { | 
 |  |  | 
 |  |  |       padding: 0px 10px 30px 20px; | 
 |  |  |       position: relative; | 
 |  |  |       height: 160px; | 
 |  |  |  | 
 |  |  |       .content_wrap { | 
 |  |  |         display: flex; | 
 |  |  |         justify-content: space-between; | 
 |  |  | 
 |  |  |                 z-index: -1; | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |             .tooltip_wrap{ | 
 |  |  |               .tooltip{ | 
 |  |  |  | 
 |  |  |             .tooltip_wrap { | 
 |  |  |               .tooltip { | 
 |  |  |                 z-index: 9999999999; | 
 |  |  |                 top: 34px; | 
 |  |  |                 transform: translate(70px, -42%); | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .tag1 { | 
 |  |  |               background-color: #28F0CC; | 
 |  |  |               border: 1px solid #28F0CC; | 
 |  |  | 
 |  |  |     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; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } |