|  |  | 
 |  |  |             <div class="com_header"> | 
 |  |  |               <div class="title"> | 
 |  |  |                 <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  |                 <div>累计出库量统计</div> | 
 |  |  |                 <div>累计出库量统计(万只)</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="tabs"> | 
 |  |  |                 <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tabClick1(0)">本月</div> | 
 |  |  | 
 |  |  |                 <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 class="center_box_two"> | 
 |  |  |             <div class="list"> | 
 |  |  |             <div class="list"  style="z-index: 10000"> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> | 
 |  |  |                 <span>在途:{{ data7.busyNum }}</span> | 
 |  |  | 
 |  |  |                 <span>离线:{{ data7.offlineNum }}</span> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="echart_wrap"> | 
 |  |  |             <div class="echart_wrap" style="width: 100%;height: 100%"> | 
 |  |  |               <div ref="echartMap" class="echart_map" id="echartMap"></div> | 
 |  |  |             </div> | 
 |  |  |             <div class="warnning_info"> | 
 |  |  |             <div class="warnning_info"  style="z-index: 10000"> | 
 |  |  |               <div class="head" @click="isShowCarW = !isShowCarW"> | 
 |  |  |                 <img src="../assets/images/FireFighting/fire_right.png" alt=""> | 
 |  |  |                 <span>车辆报警</span> | 
 |  |  | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             <div @click="openCloudAddr" class="monitoring"> | 
 |  |  |             <div @click="openCloudAddr" class="monitoring"  style="z-index: 10000"> | 
 |  |  |               <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 :class="{ orange: item.num < 200 }" class="item two-swiper-slide swiper-slide" | 
 |  |  |                     v-for="item in data6.stockList"> | 
 |  |  |                     <div class="la">{{ item.name }}</div> | 
 |  |  |                     <div class="val">{{ item.num }}万支</div> | 
 |  |  |                     <div class="val">{{ item.num }}{{item.name.indexOf('托盘') === -1 ? '万支' : '个'}}</div> | 
 |  |  |                   </div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  | 
 |  |  |           <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' | 
 |  |  | 
 |  |  |     ], | 
 |  |  |     yAxis: [ | 
 |  |  |       { | 
 |  |  |         type: 'value', | 
 |  |  |         name: '万支', | 
 |  |  |         offset: 0, | 
 |  |  |         type: 'value', | 
 |  |  | 
 |  |  |  | 
 |  |  | const echartMap = ref() | 
 |  |  | const initMap = () => { | 
 |  |  |   console.log('----') | 
 |  |  |  | 
 |  |  |   var myChart = echarts.init(echartMap.value) | 
 |  |  |   echarts.registerMap('js', ahJSON) | 
 |  |  |   const scatterData = data7.value.carsList.map(item => { | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     geo: [{ | 
 |  |  |       map: 'js', | 
 |  |  |       roam: false, //是否允许缩放 | 
 |  |  |       roam: true, //是否允许缩放 | 
 |  |  |       zoom: 1.2, //默认显示级别 | 
 |  |  |       scaleLimit: { | 
 |  |  |         min: 0, | 
 |  |  |         max: 3 | 
 |  |  |         max: 50 | 
 |  |  |       }, //缩放级别 | 
 |  |  |       label: { | 
 |  |  |         show: true, // 始终显示文字 | 
 |  |  |         color: '#fff' // 设置文字颜色 | 
 |  |  |       }, | 
 |  |  |       itemStyle: { | 
 |  |  |         normal: { | 
 |  |  |           areaColor: 'transparent', | 
 |  |  |           borderColor: '#3fdaff', | 
 |  |  |           borderWidth: 2, | 
 |  |  |           shadowColor: 'rgba(63, 218, 255, 0.5)', | 
 |  |  |           shadowBlur: 30 | 
 |  |  |           areaColor: '#1d3b60', | 
 |  |  |           borderColor: '#428598', | 
 |  |  |           borderWidth: 1, | 
 |  |  |           // shadowColor: 'rgba(63, 218, 255, 0.5)', | 
 |  |  |           // shadowBlur: 30 | 
 |  |  |         }, | 
 |  |  |         emphasis: { | 
 |  |  |           areaColor: '#2B91B7', | 
 |  |  |           areaColor: '#5bc7d5', | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |       tooltip: { | 
 |  |  | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |  | 
 |  |  |       //地图 | 
 |  |  |      /* //地图 | 
 |  |  |       { | 
 |  |  |         type: 'map', | 
 |  |  |         mapType: 'js', | 
 |  |  |         geoIndex: -1, | 
 |  |  |         zoom: 1.2, //默认显示级别 | 
 |  |  |         // roam: true, // 开启缩放和平移 | 
 |  |  |         label: { | 
 |  |  |           show: true, | 
 |  |  |           color: '#ffffff', | 
 |  |  | 
 |  |  |           } | 
 |  |  |         }, | 
 |  |  |         data: data | 
 |  |  |       }, | 
 |  |  |       },*/ | 
 |  |  |       ...serData, | 
 |  |  |     ] | 
 |  |  |   } | 
 |  |  | 
 |  |  |   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 } | 
 |  |  | 
 |  |  |   carsListPost().then(res => { | 
 |  |  |     const result = res.data || {} | 
 |  |  |     data7.value = result | 
 |  |  |     initMap() | 
 |  |  |   }, () => { | 
 |  |  |     data7.value = { | 
 |  |  |       carsList: [] | 
 |  |  |     } | 
 |  |  |     initMap() | 
 |  |  |   }) | 
 |  |  |   carsEventListP().then(res => { | 
 |  |  | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |     .center_box_three{ | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |     .center_box_two { | 
 |  |  |       flex: 1; | 
 |  |  |       width: 100%; | 
 |  |  | 
 |  |  |           line-height: 36px; | 
 |  |  |           border-bottom: 1px solid rgba(255, 255, 255, 0.16); | 
 |  |  |           margin-bottom: 10px; | 
 |  |  |           padding-right: 10px; | 
 |  |  |  | 
 |  |  |           .code { | 
 |  |  |             font-weight: 500; | 
 |  |  | 
 |  |  |   object-fit: cover; | 
 |  |  |   z-index: -1; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | </style> |