| | |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>累计出库量统计</div> |
| | | <div>累计出库量统计(万支)</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tabClick1(0)">本月</div> |
| | |
| | | <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ? |
| | | data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div> |
| | | <div class="unit_wrap"> |
| | | <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> |
| | | <!-- <span style="color: #869CC9;">{{ activeTab1 == 0 ? '同比' : '环比' }}</span> --> |
| | | <span style="color: #869CC9;">环比</span> |
| | | <template v-if="activeTab1 == 0 && data1.monthLastOutTotal"> |
| | | <img v-if="data1.monthOutTotal > data1.monthLastOutTotal" src="@/assets/images/ic_up.png" |
| | | class="icon" alt=""> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box_two"> |
| | | <div class="list"> |
| | | <div class="list" style="z-index: 10000"> |
| | | <div class="item"> |
| | | <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> |
| | | <span>在途:{{ data7.busyNum }}</span> |
| | |
| | | <span>离线:{{ data7.offlineNum }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="echart_wrap"> |
| | | <div class="echart_wrap" style="width: 100%;height: 100%"> |
| | | <div ref="echartMap" class="echart_map" id="echartMap"></div> |
| | | </div> |
| | | <div class="warnning_info"> |
| | | <div class="warnning_info" style="z-index: 10000"> |
| | | <div class="head" @click="isShowCarW = !isShowCarW"> |
| | | <img src="../assets/images/FireFighting/fire_right.png" alt=""> |
| | | <span>车辆报警</span> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div @click="openCloudAddr" class="monitoring"> |
| | | <div @click="openCloudAddr" class="monitoring" style="z-index: 10000"> |
| | | <img src="@/assets/images/ic_jiankong@2x.png" class="icon" alt=""> |
| | | <div>车辆监控平台</div> |
| | | <img class="top" src="@/assets/images/SecurityControl/ar_open@2x.png" alt=""> |
| | |
| | | <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 class="val">{{ item.num }}{{item.name.indexOf('托盘') === -1 ? '万支' : '个'}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="list"> |
| | | <div class="item" v-for="item in activeCar.contractList"> |
| | | <div class="head"> |
| | | <div class="code">合同号:{{ item.ioCode }}</div> |
| | | <div class="code">合同号:<span v-if="item.detailList && item.detailList.length > 0">{{ |
| | | item.detailList[0].contractNum }}</span></div> |
| | | <div class="addr">收货地:{{ item.address }}</div> |
| | | </div> |
| | | <div class="line" v-for="i in item.detailList"> |
| | |
| | | wltransportMeasure, |
| | | carsListPost, |
| | | getCarsJobDetails, |
| | | getJobDetailsById, |
| | | carsEventListP |
| | | } from '@/api' |
| | | import 'swiper/css/swiper.min.css' |
| | |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | name: '万支', |
| | | offset: 0, |
| | | type: 'value', |
| | |
| | | |
| | | const echartMap = ref() |
| | | const initMap = () => { |
| | | console.log('----') |
| | | |
| | | var myChart = echarts.init(echartMap.value) |
| | | echarts.registerMap('js', ahJSON) |
| | | const scatterData = data7.value.carsList.map(item => { |
| | |
| | | }, |
| | | geo: [{ |
| | | map: 'js', |
| | | roam: false, //是否允许缩放 |
| | | roam: true, //是否允许缩放 |
| | | zoom: 1.2, //默认显示级别 |
| | | scaleLimit: { |
| | | min: 0, |
| | | max: 3 |
| | | max: 50 |
| | | }, //缩放级别 |
| | | label: { |
| | | show: true, // 始终显示文字 |
| | | color: '#fff' // 设置文字颜色 |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | areaColor: 'transparent', |
| | | borderColor: '#3fdaff', |
| | | borderWidth: 2, |
| | | shadowColor: 'rgba(63, 218, 255, 0.5)', |
| | | shadowBlur: 30 |
| | | areaColor: '#1d3b60', |
| | | borderColor: '#428598', |
| | | borderWidth: 1, |
| | | // shadowColor: 'rgba(63, 218, 255, 0.5)', |
| | | // shadowBlur: 30 |
| | | }, |
| | | emphasis: { |
| | | areaColor: '#2B91B7', |
| | | areaColor: '#5bc7d5', |
| | | } |
| | | }, |
| | | tooltip: { |
| | |
| | | } |
| | | }, |
| | | |
| | | //地图 |
| | | /* //地图 |
| | | { |
| | | type: 'map', |
| | | mapType: 'js', |
| | | geoIndex: -1, |
| | | zoom: 1.2, //默认显示级别 |
| | | // roam: true, // 开启缩放和平移 |
| | | label: { |
| | | show: true, |
| | | color: '#ffffff', |
| | |
| | | } |
| | | }, |
| | | data: data |
| | | }, |
| | | },*/ |
| | | ...serData, |
| | | ] |
| | | } |
| | |
| | | myChart.on('click', function (params) { |
| | | const item = params.data |
| | | getCarsJobDetails({ carCode: item.code }).then(res => { |
| | | // getCarsJobDetails({ id: item.id }).then(res => { |
| | | // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => { |
| | | showModal.value = true |
| | | activeCar.value = { ...res.data, carCode: item.code } |
| | |
| | | activeCar.value = {} |
| | | } |
| | | const taskClick = (item) => { |
| | | getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { |
| | | // getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { |
| | | getJobDetailsById({ id: item.id }).then(res => { |
| | | // getCarsJobDetails({ carCode: '皖AE5277' }).then(res => { |
| | | showModal.value = true |
| | | activeCar.value = { ...res.data, carCode: item.carCodeFront } |
| | |
| | | i.rate = count == 0 ? 0 : ((i.num / count) * 100).toFixed(0) |
| | | }) |
| | | data5.value = count |
| | | console.log(data5.value) |
| | | initEchart1() |
| | | }) |
| | | } |
| | |
| | | carsListPost().then(res => { |
| | | const result = res.data || {} |
| | | data7.value = result |
| | | initMap() |
| | | }, () => { |
| | | data7.value = { |
| | | carsList: [] |
| | | } |
| | | initMap() |
| | | }) |
| | | carsEventListP().then(res => { |
| | |
| | | } |
| | | } |
| | | } |
| | | .center_box_three{ |
| | | |
| | | } |
| | | .center_box_two { |
| | | flex: 1; |
| | | width: 100%; |
| | |
| | | line-height: 36px; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.16); |
| | | margin-bottom: 10px; |
| | | padding-right: 10px; |
| | | |
| | | .code { |
| | | font-weight: 500; |
| | |
| | | object-fit: cover; |
| | | z-index: -1; |
| | | } |
| | | </style> |
| | | </style> |