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