|  |  |  | 
|---|
|  |  |  | <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="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' | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|