|  |  |  | 
|---|
|  |  |  | <div class="main_app"> | 
|---|
|  |  |  | <img src="@/assets/images/energy_ef/bg@2x.png" class="main_bg" alt="" /> | 
|---|
|  |  |  | <div class="main_header"> | 
|---|
|  |  |  | <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" /> | 
|---|
|  |  |  | <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> | 
|---|
|  |  |  | <div class="title">安泰智慧物流园区-调度能效跟踪</div> | 
|---|
|  |  |  | <div class="time_wrap"> | 
|---|
|  |  |  | <span class="date">{{ date }}</span> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="one-swiper list_temp"> | 
|---|
|  |  |  | <div class="swiper-wrapper"> | 
|---|
|  |  |  | <div class="line swiper-slide one-swiper-slide" v-for="item in dataList3"> | 
|---|
|  |  |  | <div class="line swiper-slide one-swiper-slide" @click="showModal = true" v-for="item in dataList3"> | 
|---|
|  |  |  | <span class="item flag"><span :class="{ flag_bg: item.type == 1 || item.type == 3 }">{{ item.type | 
|---|
|  |  |  | == 1 | 
|---|
|  |  |  | || item.type == 3 ? '出' : '入' }}</span></span> | 
|---|
|  |  |  | 
|---|
|  |  |  | <span class="item id_card">{{ item.carCodeFront }}</span> | 
|---|
|  |  |  | <span class="item status">{{ statusMap[item.status].label }}</span> | 
|---|
|  |  |  | <span class="item addr">{{ item.repertotyAddress }}</span> | 
|---|
|  |  |  | <span class="item time" v-if="item.confirmTaskDate">{{ item.confirmTaskDate.slice(5, 16) }}</span> | 
|---|
|  |  |  | <span class="item time">{{ item.confirmTaskDate ? item.confirmTaskDate.slice(5, 16) : '-' | 
|---|
|  |  |  | }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="center_box_two"> | 
|---|
|  |  |  | <div ref="echartMap" class="echart_map" id="echartMap"></div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> | 
|---|
|  |  |  | <span>在途:{{ 8 }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <img src="@/assets/images/LogisticsCenter/car_kongxian@2x.png" alt=""> | 
|---|
|  |  |  | <span>空闲:{{ 8 }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <img src="@/assets/images/LogisticsCenter/car_lixian@2x.png" alt=""> | 
|---|
|  |  |  | <span>离线:{{ 8 }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="echart_wrap"> | 
|---|
|  |  |  | <div ref="echartMap" class="echart_map" id="echartMap"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="right_box"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="modal_mask" v-if="showModal" @click="showModal = false"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </v-scale-screen> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | color: ['#1984ff', '#184b8d'], | 
|---|
|  |  |  | img: icKongxian, | 
|---|
|  |  |  | data: [ | 
|---|
|  |  |  | { name: '腾冲市', value: [117.25, 31.49] }, | 
|---|
|  |  |  | { name: '', value: [117.25, 31.49] }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 
|---|
|  |  |  | color: ['#f16c08', '#7f3710'], | 
|---|
|  |  |  | img: icLixian, | 
|---|
|  |  |  | data: [ | 
|---|
|  |  |  | { name: '腾冲市', value: [118.5, 31.08] }, | 
|---|
|  |  |  | { name: '', value: [118.5, 31.08] }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | symbolSize: [24, 30], | 
|---|
|  |  |  | symbolSize: [32, 40], | 
|---|
|  |  |  | hoverAnimation: true, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | zlevel: 99, | 
|---|
|  |  |  | 
|---|
|  |  |  | { name: "滁州市", value: 0 }, | 
|---|
|  |  |  | { name: "芜湖市", value: 1 }, | 
|---|
|  |  |  | { name: "阜阳市", value: 0 }, | 
|---|
|  |  |  | { name: "蚌埠市", value: 0 }, | 
|---|
|  |  |  | { name: "蚌埠市", value: 4 }, | 
|---|
|  |  |  | { name: "淮南市", value: 0 }, | 
|---|
|  |  |  | { name: "马鞍山市", value: 0 }, | 
|---|
|  |  |  | { name: "安庆市", value: 0 }, | 
|---|
|  |  |  | { name: "马鞍山市", value: 6 }, | 
|---|
|  |  |  | { name: "安庆市", value: 2 }, | 
|---|
|  |  |  | { name: "黄山市", value: 0 }, | 
|---|
|  |  |  | { name: "铜陵市", value: 0 }, | 
|---|
|  |  |  | { name: "铜陵市", value: 40 }, | 
|---|
|  |  |  | { name: "宿州市", value: 0 }, | 
|---|
|  |  |  | { name: "淮北市", value: 0 }, | 
|---|
|  |  |  | { name: "六安市", value: 0 }, | 
|---|
|  |  |  | 
|---|
|  |  |  | geo: [{ | 
|---|
|  |  |  | map: 'js', | 
|---|
|  |  |  | roam: false, //是否允许缩放 | 
|---|
|  |  |  | zoom: 1.1, //默认显示级别 | 
|---|
|  |  |  | zoom: 1.2, //默认显示级别 | 
|---|
|  |  |  | scaleLimit: { | 
|---|
|  |  |  | min: 0, | 
|---|
|  |  |  | max: 3 | 
|---|
|  |  |  | 
|---|
|  |  |  | type: 'map', | 
|---|
|  |  |  | mapType: 'js', | 
|---|
|  |  |  | geoIndex: -1, | 
|---|
|  |  |  | zoom: 1.1, //默认显示级别 | 
|---|
|  |  |  | zoom: 1.2, //默认显示级别 | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | show: true, | 
|---|
|  |  |  | color: '#ffffff', | 
|---|
|  |  |  | 
|---|
|  |  |  | wlplatformJobList().then(res => { | 
|---|
|  |  |  | const result = res.data | 
|---|
|  |  |  | dataList3.value = result | 
|---|
|  |  |  | loopFn1() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const data4 = ref({}) | 
|---|
|  |  |  | 
|---|
|  |  |  | wlstockList().then(res => { | 
|---|
|  |  |  | const result = res.data | 
|---|
|  |  |  | dataList6.value = result | 
|---|
|  |  |  | loopFn2() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | getData6() | 
|---|
|  |  |  |  | 
|---|
|  |  |  | initMap() | 
|---|
|  |  |  |  | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | loopFn1() | 
|---|
|  |  |  | loopFn2() | 
|---|
|  |  |  | }, 12000) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .time { | 
|---|
|  |  |  | flex: 8; | 
|---|
|  |  |  | flex: 6; | 
|---|
|  |  |  | margin-left: 6px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | .center_box_two { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .echart_map { | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 10px; | 
|---|
|  |  |  | left: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | margin-bottom: 18px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | width: 36px; | 
|---|
|  |  |  | height: 36px; | 
|---|
|  |  |  | margin-right: 15px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .echart_wrap { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .echart_map { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | /* transform: rotate(60deg); */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | margin-top: 22px; | 
|---|
|  |  |  | height: 240px; | 
|---|
|  |  |  | overflow: auto; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | scrollbar-width: none; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | 
|---|
|  |  |  | top: 20%; | 
|---|
|  |  |  | left: 50%; | 
|---|
|  |  |  | transform: translate(-50%, 0); | 
|---|
|  |  |  | z-index: 99; | 
|---|
|  |  |  | z-index: 999; | 
|---|
|  |  |  | padding: 24px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .title_head { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .modal_mask { | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | z-index: 99; | 
|---|
|  |  |  | background-color: rgba(0, 0, 0, 0.1); | 
|---|
|  |  |  | /* background-color: red; */ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | left: 0; | 
|---|