|  |  |  | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ? | 
|---|
|  |  |  | data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div> | 
|---|
|  |  |  | <div class="unit_wrap" v-if="data1.monthOutTotalOnYear || data1.yearOutTotalOnYear"> | 
|---|
|  |  |  | <span style="color: #869CC9;">同比</span> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="(activeTab1 == 0 && data1.monthOutTotalOnYear > 0) || (activeTab1 == 1 && data1.yearOutTotalOnYear > 0)" | 
|---|
|  |  |  | src="@/assets/images/ic_up.png" class="icon" alt=""> | 
|---|
|  |  |  | <img v-else src="@/assets/images/ic_down.png" class="icon" alt=""> | 
|---|
|  |  |  | <span>{{ activeTab1 == 0 ? Math.abs(data1.monthOutTotalOnYear) : Math.abs(data1.yearOutTotalOnYear) | 
|---|
|  |  |  | }}%</span> | 
|---|
|  |  |  | <div class="unit_wrap"> | 
|---|
|  |  |  | <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> | 
|---|
|  |  |  | <template v-if="activeTab1 == 0 && data1.monthLastOutTotal"> | 
|---|
|  |  |  | <img v-if="data1.monthOutTotal > data1.monthLastOutTotal" src="@/assets/images/ic_up.png" | 
|---|
|  |  |  | class="icon" alt=""> | 
|---|
|  |  |  | <img v-else src="@/assets/images/ic_down.png" class="icon" alt=""> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template v-if="activeTab1 == 1 && data1.yearLastOutTotal"> | 
|---|
|  |  |  | <img v-if="data1.yearOutTotal > data1.yearLastOutTotal" src="@/assets/images/ic_up.png" | 
|---|
|  |  |  | class="icon" alt=""> | 
|---|
|  |  |  | <img v-else src="@/assets/images/ic_down.png" class="icon" alt=""> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <span v-if="activeTab1 == 0 && data1.monthLastOutTotal">{{ Math.abs((((data1.monthOutTotal - data1.monthLastOutTotal)/data1.monthLastOutTotal) * 100).toFixed(1)) }}%</span> | 
|---|
|  |  |  | <span v-else-if="activeTab1 == 1 && data1.yearLastOutTotal">{{ Math.abs((((data1.yearOutTotal - data1.yearLastOutTotal)/data1.yearLastOutTotal) * 100).toFixed(1)) }}%</span> | 
|---|
|  |  |  | <span v-else>-</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="train_wrap"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div ref="echartMap" class="echart_map" id="echartMap"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="warnning_info"> | 
|---|
|  |  |  | <div class="head" @click="isShowCarW = !isShowCarW"> | 
|---|
|  |  |  | <div class="head" @click="isShowCarW = !isShowCarW"> | 
|---|
|  |  |  | <img src="../assets/images/FireFighting/fire_right.png" alt=""> | 
|---|
|  |  |  | <span>车辆报警</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <img src="@/assets/images/energy_ef/ic_chukuxiaolv@2x.png" alt=""> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="name">出库效率</div> | 
|---|
|  |  |  | <div class="num"><span>{{ activeTab12 == 0 ? data1.todayInRata : data1.monthInRata }}</span>万支/小时 | 
|---|
|  |  |  | <div class="num"><span>{{ activeTab12 == 0 ? data1.todayOutRate : data1.monthOutRate }}</span>万支/小时 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <img src="@/assets/images/energy_ef/ic_rukuxiaolv@2x.png" alt=""> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="name">入库效率</div> | 
|---|
|  |  |  | <div class="num"><span class="today">{{ activeTab12 == 0 ? data1.monthOutTotal : data1.yearOutTotal | 
|---|
|  |  |  | <div class="num"><span class="today">{{ activeTab12 == 0 ? data1.todayInRate : data1.monthInRate | 
|---|
|  |  |  | }}</span>万支/小时</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | name: item.terminalId, | 
|---|
|  |  |  | img: item.status == 0 ? icLixian : item.status == 1 || item.status == 2 ? icZaitu : icKongxian, | 
|---|
|  |  |  | data: [{code: item.plateNum, value: [item.longitude,item.latitude]}] | 
|---|
|  |  |  | data: [{ code: item.plateNum, value: [item.longitude, item.latitude] }] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | // var scatterData = [ | 
|---|
|  |  |  | 
|---|
|  |  |  | myChart.setOption(option) | 
|---|
|  |  |  | myChart.on('click', function (params) { | 
|---|
|  |  |  | const item = params.data | 
|---|
|  |  |  | getCarsJobDetails({carCode: item.code}).then(res => { | 
|---|
|  |  |  | getCarsJobDetails({ carCode: item.code }).then(res => { | 
|---|
|  |  |  | activeCar.value = res.data | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | const result = res.data || [] | 
|---|
|  |  |  | dataList2.value = result | 
|---|
|  |  |  | dataList2.value.forEach(item => { | 
|---|
|  |  |  | item.planDateStrT = activeTab2.value == 2 ? dayjs(item.planDateStr).format('M') : dayjs(item.planDateStr).format('M.D') | 
|---|
|  |  |  | item.planDateStrT = activeTab2.value == 2 ? dayjs(item.planDate).format('M') : dayjs(item.planDate).format('M.D') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | initEnergy() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | return i | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | dataList5.value.forEach(i => { | 
|---|
|  |  |  | i.rate = ((i.num / count) * 100).toFixed(0) | 
|---|
|  |  |  | i.rate = count == 0 ? 0 : ((i.num / count) * 100).toFixed(0) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | data5.value = count | 
|---|
|  |  |  | initEchart1() | 
|---|
|  |  |  | 
|---|
|  |  |  | const dataList6 = ref([]) | 
|---|
|  |  |  | const getData6 = () => { | 
|---|
|  |  |  | wlstockList().then(res => { | 
|---|
|  |  |  | const result = res.data | 
|---|
|  |  |  | const result = res.data.stockList || [] | 
|---|
|  |  |  | dataList6.value = result | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | bottom: 0; | 
|---|
|  |  |  | border-top: 1px solid #5ecbce; | 
|---|
|  |  |  | border-bottom: 1px solid #5ecbce; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | width: 280px; | 
|---|
|  |  |  | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | width: 14px; | 
|---|
|  |  |  | margin-right: 10px; | 
|---|
|  |  |  | 
|---|
|  |  |  | .war_list { | 
|---|
|  |  |  | max-height: 300px; | 
|---|
|  |  |  | overflow: auto; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | color: #D2E0FF; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 30px; | 
|---|
|  |  |  | div{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | div { | 
|---|
|  |  |  | flex: 3; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .id_card{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .id_card { | 
|---|
|  |  |  | color: #00F2F3; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .title{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .title { | 
|---|
|  |  |  | flex: 4; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|