|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="one-swiper list_temp"> | 
|---|
|  |  |  | <div class="swiper-wrapper"> | 
|---|
|  |  |  | <div class="line swiper-slide one-swiper-slide" @click="showModal = true" v-for="item in dataList3"> | 
|---|
|  |  |  | <div @click="taskClick(item)" class="line swiper-slide one-swiper-slide" 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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <img src="@/assets/images/energy_ef/ic_wanchengrenwu@2x.png" alt=""> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="name">当日完成任务总量</div> | 
|---|
|  |  |  | <div class="num"><span v-if="data1.currentOutDoneNum || data1.currentInDoneNum" class="today">{{ | 
|---|
|  |  |  | activeTab4 == | 
|---|
|  |  |  | 0 ? data1.currentOutDoneNum : | 
|---|
|  |  |  | data1.currentInDoneNum | 
|---|
|  |  |  | }}</span>万支</div> | 
|---|
|  |  |  | <div class="num"> | 
|---|
|  |  |  | <span v-if="data1.currentOutDoneNum || data1.currentInDoneNum" class="today">{{ | 
|---|
|  |  |  | activeTab4 == | 
|---|
|  |  |  | 0 ? data1.currentOutDoneNum : | 
|---|
|  |  |  | data1.currentInDoneNum | 
|---|
|  |  |  | }}</span> | 
|---|
|  |  |  | <span v-else>0</span> | 
|---|
|  |  |  | 万支 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="name">已完成比例</div> | 
|---|
|  |  |  | <div class="num"> | 
|---|
|  |  |  | <span v-if="activeTab4 == 0 && data1.currentOutNum" class="finish">{{ ((data1.currentOutDoneNum / | 
|---|
|  |  |  | data1.currentOutNum) * 100).toFixed(1) }}%</span> | 
|---|
|  |  |  | data1.currentOutNum) * 100).toFixed(1) }}</span> | 
|---|
|  |  |  | <span v-if="activeTab4 == 1 && data1.currentInNum" class="finish">{{ ((data1.currentInDoneNum / | 
|---|
|  |  |  | data1.currentInNum) * 100).toFixed(1) }}%</span> | 
|---|
|  |  |  | data1.currentInNum) * 100).toFixed(1) }}</span> | 
|---|
|  |  |  | % | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <span>车辆报警</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="isShowCarW" class="war_list"> | 
|---|
|  |  |  | <div class="line" v-for="item in data7.eventList"> | 
|---|
|  |  |  | <div class="line" v-for="item in eventList"> | 
|---|
|  |  |  | <div class="id_card">{{ item.carCode }}</div> | 
|---|
|  |  |  | <div class="title">{{ item.title }}</div> | 
|---|
|  |  |  | <div v-if="item.time">{{ item.time.slice(11) }}</div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list two-swiper"> | 
|---|
|  |  |  | <div class="swiper-wrapper"> | 
|---|
|  |  |  | <div class="item two-swiper-slide swiper-slide" v-for="item in data6.stockList"> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="icon_wrap"> | 
|---|
|  |  |  | <img v-if="i != 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt=""> | 
|---|
|  |  |  | <img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt=""> | 
|---|
|  |  |  | <div class="line"></div> | 
|---|
|  |  |  | <div v-if="i != activeCar.logList.length - 1" class="line"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="status" :class="{ ac: i == 0 }">{{ statusMapD[item.objType] }}</div> | 
|---|
|  |  |  | 
|---|
|  |  |  | wltotalInList, | 
|---|
|  |  |  | wltransportMeasure, | 
|---|
|  |  |  | carsListPost, | 
|---|
|  |  |  | getCarsJobDetails | 
|---|
|  |  |  | getCarsJobDetails, | 
|---|
|  |  |  | carsEventListP | 
|---|
|  |  |  | } from '@/api' | 
|---|
|  |  |  | import 'swiper/css/swiper.min.css' | 
|---|
|  |  |  | import Swiper from 'swiper' | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | color: '#869CC9' | 
|---|
|  |  |  | // fontSize: 24, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | nameTextStyle: { | 
|---|
|  |  |  | color: '#869CC9'   // 四个数字分别为上右下左与原位置距离 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | axisTick: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | 
|---|
|  |  |  | yAxis: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'value', | 
|---|
|  |  |  | name: '个', | 
|---|
|  |  |  | min: 0, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | show: true, | 
|---|
|  |  |  | color: "#869CC9", | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | splitLine: { | 
|---|
|  |  |  | show: true, | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | width: 1, | 
|---|
|  |  |  | color: "rgba(49,105,129,0.4)", | 
|---|
|  |  |  | type: 'dashed' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // interval: 5, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | formatter: '{value}' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'value', | 
|---|
|  |  |  | name: '万支', | 
|---|
|  |  |  | nameTextStyle: { | 
|---|
|  |  |  | color: '#869CC9', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | offset: 0, | 
|---|
|  |  |  | type: 'value', | 
|---|
|  |  |  | axisLine: { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | formatter: '{value}' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | color: '#869CC9' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | nameTextStyle: { | 
|---|
|  |  |  | color: '#869CC9', | 
|---|
|  |  |  | padding: [0, 0, 0, 12]    // 四个数字分别为上右下左与原位置距离 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'value', | 
|---|
|  |  |  | name: '个', | 
|---|
|  |  |  | min: 0, | 
|---|
|  |  |  | axisLabel: { | 
|---|
|  |  |  | color: '#869CC9' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | nameTextStyle: { | 
|---|
|  |  |  | color: '#869CC9', | 
|---|
|  |  |  | padding: [0, 0, 0, -18]    // 四个数字分别为上右下左与原位置距离 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | splitLine: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | width: 1, | 
|---|
|  |  |  | color: "rgba(49,105,129,0.4)", | 
|---|
|  |  |  | type: 'dashed' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | series: [ | 
|---|
|  |  |  | 
|---|
|  |  |  | position: 'top', | 
|---|
|  |  |  | color: '#fff', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | yAxisIndex: 1, | 
|---|
|  |  |  | yAxisIndex: 0, | 
|---|
|  |  |  | itemStyle: { | 
|---|
|  |  |  | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 
|---|
|  |  |  | name: '任务完成量', | 
|---|
|  |  |  | type: 'bar', | 
|---|
|  |  |  | barWidth: 10, | 
|---|
|  |  |  | yAxisIndex: 1, | 
|---|
|  |  |  | yAxisIndex: 0, | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | position: 'top', | 
|---|
|  |  |  | 
|---|
|  |  |  | type: 'line', | 
|---|
|  |  |  | smooth: false, | 
|---|
|  |  |  | showAllSymbol: true, | 
|---|
|  |  |  | yAxisIndex: 0, | 
|---|
|  |  |  | yAxisIndex: 1, | 
|---|
|  |  |  | symbol: 'none', | 
|---|
|  |  |  | lineStyle: { | 
|---|
|  |  |  | color: "#1a43bc" | 
|---|
|  |  |  | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | position: 'center' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | padAngle: 5, | 
|---|
|  |  |  | tooltip: { | 
|---|
|  |  |  | trigger: 'none' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | emphasis: { | 
|---|
|  |  |  | // 设置悬浮时样式为空 | 
|---|
|  |  |  | scale: false, // 关闭放大效果 | 
|---|
|  |  |  | itemStyle: { | 
|---|
|  |  |  | shadowBlur: 0, // 阴影模糊度为 0 | 
|---|
|  |  |  | shadowOffsetX: 0, | 
|---|
|  |  |  | shadowColor: 'rgba(0, 0, 0, 0)', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | padAngle: 3, | 
|---|
|  |  |  | itemStyle: { | 
|---|
|  |  |  | borderRadius: 10 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | showModal.value = false | 
|---|
|  |  |  | activeCar.value = {} | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const taskClick = (item) => { | 
|---|
|  |  |  | getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { | 
|---|
|  |  |  | // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => { | 
|---|
|  |  |  | showModal.value = true | 
|---|
|  |  |  | activeCar.value = { ...res.data, carCode: item.carCodeFront } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const data1 = ref({}) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const isShowCarW = ref(false) | 
|---|
|  |  |  | const data7 = ref({}) | 
|---|
|  |  |  | const eventList = ref([]) | 
|---|
|  |  |  | const getData7 = () => { | 
|---|
|  |  |  | carsListPost().then(res => { | 
|---|
|  |  |  | const result = res.data || {} | 
|---|
|  |  |  | data7.value = result | 
|---|
|  |  |  | initMap() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | carsEventListP().then(res => { | 
|---|
|  |  |  | eventList.value = res.data || [] | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &:nth-of-type(2n) { | 
|---|
|  |  |  | background: rgba(27, 64, 97, 0.52); | 
|---|
|  |  |  | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | border-top: 1px solid #5ecbce; | 
|---|
|  |  |  | border-bottom: 1px solid #5ecbce; | 
|---|
|  |  |  | background: rgba(0, 30, 63, 0.4); | 
|---|
|  |  |  | /* backdrop-filter: blur(5px); */ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | width: 280px; | 
|---|
|  |  |  | height: 57px; | 
|---|
|  |  |  | background: rgba(0, 30, 63, 0.4); | 
|---|
|  |  |  | backdrop-filter: blur(5px); | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | 
|---|
|  |  |  | .war_list { | 
|---|
|  |  |  | max-height: 300px; | 
|---|
|  |  |  | overflow: auto; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | padding-bottom: 12px; | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | color: #D2E0FF; | 
|---|
|  |  |  | 
|---|
|  |  |  | height: 36px !important; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &:nth-of-type(2n+1) { | 
|---|
|  |  |  | background: rgba(0, 152, 255, 0.13); | 
|---|
|  |  |  | 
|---|
|  |  |  | flex: 2; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .orange { | 
|---|
|  |  |  | color: #FF5728; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|