| | |
| | | </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', |
| | |
| | | } |
| | | |
| | | .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; |