|  |  |  | 
|---|
|  |  |  | <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ? | 
|---|
|  |  |  | data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div> | 
|---|
|  |  |  | <div class="unit_wrap"> | 
|---|
|  |  |  | <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> | 
|---|
|  |  |  | <!-- <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> --> | 
|---|
|  |  |  | <span style="color: #869CC9;">环比</span> | 
|---|
|  |  |  | <template v-if="activeTab1 == 0 && data1.monthLastOutTotal"> | 
|---|
|  |  |  | <img v-if="data1.monthOutTotal > data1.monthLastOutTotal" src="@/assets/images/ic_up.png" | 
|---|
|  |  |  | class="icon" alt=""> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div @click="openCloudAddr" class="monitoring"> | 
|---|
|  |  |  | <img src="@/assets/images/ic_jiankong@2x.png" class="icon" alt=""> | 
|---|
|  |  |  | <div>车辆监控平台</div> | 
|---|
|  |  |  | <img class="top" src="@/assets/images/SecurityControl/ar_open@2x.png" alt=""> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="right_box"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="item" v-for="item in activeCar.contractList"> | 
|---|
|  |  |  | <div class="head"> | 
|---|
|  |  |  | <div class="code">合同号:{{ item.ioCode }}</div> | 
|---|
|  |  |  | <div class="code">合同号:<span v-if="item.detailList && item.detailList.length > 0">{{ | 
|---|
|  |  |  | item.detailList[0].contractNum }}</span></div> | 
|---|
|  |  |  | <div class="addr">收货地:{{ item.address }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="line" v-for="i in item.detailList"> | 
|---|
|  |  |  | 
|---|
|  |  |  | wltransportMeasure, | 
|---|
|  |  |  | carsListPost, | 
|---|
|  |  |  | getCarsJobDetails, | 
|---|
|  |  |  | getJobDetailsById, | 
|---|
|  |  |  | carsEventListP | 
|---|
|  |  |  | } from '@/api' | 
|---|
|  |  |  | import 'swiper/css/swiper.min.css' | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const echartMap = ref() | 
|---|
|  |  |  | const initMap = () => { | 
|---|
|  |  |  | console.log('----') | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var myChart = echarts.init(echartMap.value) | 
|---|
|  |  |  | echarts.registerMap('js', ahJSON) | 
|---|
|  |  |  | const scatterData = data7.value.carsList.map(item => { | 
|---|
|  |  |  | 
|---|
|  |  |  | myChart.on('click', function (params) { | 
|---|
|  |  |  | const item = params.data | 
|---|
|  |  |  | getCarsJobDetails({ carCode: item.code }).then(res => { | 
|---|
|  |  |  | // getCarsJobDetails({ id: item.id }).then(res => { | 
|---|
|  |  |  | // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => { | 
|---|
|  |  |  | showModal.value = true | 
|---|
|  |  |  | activeCar.value = { ...res.data, carCode: item.code } | 
|---|
|  |  |  | 
|---|
|  |  |  | activeCar.value = {} | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const taskClick = (item) => { | 
|---|
|  |  |  | getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { | 
|---|
|  |  |  | // getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { | 
|---|
|  |  |  | getJobDetailsById({ id: item.id }).then(res => { | 
|---|
|  |  |  | // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => { | 
|---|
|  |  |  | showModal.value = true | 
|---|
|  |  |  | activeCar.value = { ...res.data, carCode: item.carCodeFront } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const openCloudAddr = () => { | 
|---|
|  |  |  | window.open('https://vms.hikvisionauto.com:8040/', '_blank') | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | carsListPost().then(res => { | 
|---|
|  |  |  | const result = res.data || {} | 
|---|
|  |  |  | data7.value = result | 
|---|
|  |  |  | initMap() | 
|---|
|  |  |  | }, () => { | 
|---|
|  |  |  | data7.value = { | 
|---|
|  |  |  | carsList: [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | initMap() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | carsEventListP().then(res => { | 
|---|
|  |  |  | 
|---|
|  |  |  | overflow: auto; | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | padding-bottom: 12px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | color: #D2E0FF; | 
|---|
|  |  |  | 
|---|
|  |  |  | flex: 4; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .monitoring { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | bottom: 10px; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | width: 156px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%); | 
|---|
|  |  |  | border-radius: 2px; | 
|---|
|  |  |  | border: 1px solid; | 
|---|
|  |  |  | border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .icon { | 
|---|
|  |  |  | width: 16px; | 
|---|
|  |  |  | height: 16px; | 
|---|
|  |  |  | margin-right: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .top { | 
|---|
|  |  |  | width: 7px; | 
|---|
|  |  |  | margin-left: 6px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | line-height: 36px; | 
|---|
|  |  |  | border-bottom: 1px solid rgba(255, 255, 255, 0.16); | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | padding-right: 10px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .code { | 
|---|
|  |  |  | font-weight: 500; | 
|---|