| | |
| | | </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 @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> |
| | |
| | | data1.currentInDoneNum |
| | | }}</span> |
| | | <span v-else>0</span> |
| | | <span>万支</span> |
| | | 万支 |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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' |
| | |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | name: '个', |
| | | min: 0, |
| | | axisLabel: { |
| | | color: '#869CC9' |
| | | }, |
| | | nameTextStyle: { |
| | | color: '#869CC9', |
| | | padding: [0, 0, 0, -18] // 四个数字分别为上右下左与原位置距离 |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: "rgba(49,105,129,0.4)", |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | type: 'value', |
| | | name: '万支', |
| | | offset: 0, |
| | | type: 'value', |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |