From 0798091933fade5d2ee24891d7441b4e848a4d25 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 17 十二月 2024 17:15:39 +0800
Subject: [PATCH] 最新版本541200007
---
screen/src/views/LogisticsEfficiency.vue | 333 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 210 insertions(+), 123 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 1861f8d..899b850 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -3,7 +3,7 @@
<div class="main_app">
<img src="@/assets/images/energy_ef/bg@2x.png" class="main_bg" alt="" />
<div class="main_header">
- <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
+ <!-- <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> -->
<div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-璋冨害鑳芥晥璺熻釜</div>
<div class="time_wrap">
<span class="date">{{ date }}</span>
@@ -30,14 +30,22 @@
<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">
@@ -151,21 +159,33 @@
<div class="list">
<div class="item">
<img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt="">
- <span>鍦ㄩ�旓細{{ 8 }}</span>
+ <span>鍦ㄩ�旓細{{ data7.busyNum }}</span>
</div>
<div class="item">
<img src="@/assets/images/LogisticsCenter/car_kongxian@2x.png" alt="">
- <span>绌洪棽锛歿{ 8 }}</span>
+ <span>绌洪棽锛歿{ data7.idleNum }}</span>
</div>
<div class="item">
<img src="@/assets/images/LogisticsCenter/car_lixian@2x.png" alt="">
- <span>绂荤嚎锛歿{ 8 }}</span>
+ <span>绂荤嚎锛歿{ data7.offlineNum }}</span>
</div>
</div>
<div class="echart_wrap">
<div ref="echartMap" class="echart_map" id="echartMap"></div>
</div>
-
+ <div class="warnning_info">
+ <div class="head" @click="isShowCarW = !isShowCarW">
+ <img src="../assets/images/FireFighting/fire_right.png" alt="">
+ <span>杞﹁締鎶ヨ</span>
+ </div>
+ <div v-if="isShowCarW" class="war_list">
+ <div class="line" v-for="item in data7.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>
+ </div>
</div>
</div>
<div class="right_box">
@@ -187,7 +207,7 @@
<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>
@@ -195,7 +215,7 @@
<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>
@@ -259,7 +279,7 @@
</div>
</div>
<!-- -->
- <div class="modal" v-if="showModal">
+ <div class="modal" v-if="activeCar && activeCar.phone">
<div class="title_head">
<img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt="">
<span>鐨朼222</span>
@@ -314,7 +334,7 @@
</div>
</div>
</div>
- <div class="modal_mask" v-if="showModal" @click="showModal = false"></div>
+ <div class="modal_mask" v-if="activeCar && activeCar.phone" @click="activeCar = {}"></div>
</div>
</v-scale-screen>
</template>
@@ -336,6 +356,8 @@
wlstockList,
wltotalInList,
wltransportMeasure,
+ carsListPost,
+ getCarsJobDetails
} from '@/api'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
@@ -351,13 +373,6 @@
time.value = dayjs().format('HH:mm:ss')
}, 1000)
-
-const showModal = ref(false)
-const modalTab = ref(0)
-const modalTabClick = (val) => {
- modalTab.value = val
-}
-
const initEnergy = () => {
@@ -381,42 +396,62 @@
left: '3%',
right: '4%',
bottom: '3%',
- top: '18%',
+ top: '26%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
- xAxis: [{
- nameGap: 5,
- type: 'category',
- axisLine: {
- show: true,
- lineStyle: {
- color: '#999'
+ xAxis: [
+ {
+ nameGap: 5,
+ type: 'category',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#999'
+ },
},
- },
- axisLabel: {
- color: '#869CC9'
- // fontSize: 24,
- },
- axisTick: {
- show: false,
- },
- data: dataList2.value.map(i => i.planDate),
- }],
+ axisLabel: {
+ color: '#869CC9'
+ // fontSize: 24,
+ },
+ axisTick: {
+ show: false,
+ },
+ data: dataList2.value.map(i => i.planDateStrT),
+ }
+ ],
yAxis: [
{
- nameTextStyle: {
- color: '#869CC9',
- },
- offset: 0,
- name: '涓囨敮',
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: {
show: true,
},
@@ -428,18 +463,10 @@
type: 'dashed'
}
},
- },
- {
- type: 'value',
- name: '%',
- min: 0,
- max: 100,
- // interval: 5,
axisLabel: {
- formatter: '{value}%'
- },
- splitLine: false
- }
+ formatter: '{value}'
+ }
+ },
],
series: [
{
@@ -452,6 +479,7 @@
position: 'top',
color: '#fff',
},
+ yAxisIndex: 1,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
@@ -475,6 +503,7 @@
name: '浠诲姟瀹屾垚閲�',
type: 'bar',
barWidth: 10,
+ yAxisIndex: 1,
label: {
show: false,
position: 'top',
@@ -504,6 +533,7 @@
type: 'line',
smooth: false,
showAllSymbol: true,
+ yAxisIndex: 0,
symbol: 'none',
lineStyle: {
color: "#1a43bc"
@@ -555,26 +585,24 @@
const initMap = () => {
var myChart = echarts.init(echartMap.value)
echarts.registerMap('js', ahJSON)
- var scatterData = [
- {
- name: '骞煎効鍥�',
- num: 15,
- color: ['#1984ff', '#184b8d'],
- img: icKongxian,
- data: [
- { name: '', value: [117.25, 31.49] },
- ],
- },
- {
- name: '灏忓',
- num: 11,
- color: ['#f16c08', '#7f3710'],
- img: icLixian,
- data: [
- { name: '', value: [118.5, 31.08] },
- ],
+ const scatterData = data7.value.carsList.map(item => {
+ 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] }]
}
- ]
+ })
+ // var scatterData = [
+ // {
+ // name: '骞煎効鍥�',
+ // num: 15,
+ // // color: ['#1984ff', '#184b8d'],
+ // img: icKongxian,
+ // data: [
+ // { name: 'asdasdas ', value: [117.25, 31.49] },
+ // ],
+ // },
+ // ]
let serData = []
scatterData.forEach((item) => {
serData.push({
@@ -609,30 +637,11 @@
},
symbolSize: [32, 40],
hoverAnimation: true,
-
zlevel: 99,
data: item.data,
})
}
)
- var center = {
- '鍚堣偉甯�': [117.25, 31.83],
- '婊佸窞甯�': [118.32, 32.3],
- '鑺滄箹甯�': [118.43, 31.35],
- '闃滈槼甯�': [115.38, 32.89],
- '铓屽煚甯�': [117.39, 32.92],
- '娣崡甯�': [116.99, 32.63],
- '椹瀺灞卞競': [118.5, 31.71],
- '瀹夊簡甯�': [117.05, 30.52],
- '榛勫北甯�': [118.33, 29.71],
- '閾滈櫟甯�': [117.81, 30.94],
- '瀹垮窞甯�': [116.98, 33.64],
- '娣寳甯�': [116.8, 33.9],
- '鍏畨甯�': [116.51, 31.75],
- '姹犲窞甯�': [117.49, 30.66],
- '瀹ｅ煄甯�': [118.76, 30.94],
- '浜冲窞甯�': [115.78, 33.84],
- }
var data = [
{ name: "鍚堣偉甯�", value: 3 },
{ name: "婊佸窞甯�", value: 0 },
@@ -659,16 +668,6 @@
x: 'center',
textStyle: {
color: '#ffffff'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- if (typeof (params.value)[2] == "undefined") {
- return params.name + ' : ' + params.value
- } else {
- return params.name + ' : ' + params.value[2]
- }
}
},
visualMap: {
@@ -712,7 +711,7 @@
symbolSize: 14,
label: {
normal: {
- show: true,
+ show: false,
formatter: function (params) {
return '{fline|鍦扮偣锛�' + params.data.city + '}\n{tline|' + (params.data.info || '鍙戠敓xx闆嗕欢') + '}'
},
@@ -751,10 +750,7 @@
label: {
show: true,
color: '#ffffff',
- emphasis: {
- color: 'white',
- show: false
- }
+
},
itemStyle: {
normal: {
@@ -763,9 +759,15 @@
areaColor: '#1d3b60'
},
emphasis: {
- areaColor: '#FA8C16',
- borderWidth: 1,
- color: '#428598'
+ disabled: true,
+ // areaColor: '#FA8C16',
+ // borderWidth: 1,
+ // color: '#428598',
+ label: {
+ show: true, // 濮嬬粓鏄剧ず鏂囧瓧
+ color: '#fff' // 璁剧疆鏂囧瓧棰滆壊
+ },
+ areaColor: null
}
},
data: data
@@ -775,10 +777,22 @@
}
myChart.setOption(option)
+ myChart.on('click', function (params) {
+ const item = params.data
+ getCarsJobDetails({ carCode: item.code }).then(res => {
+ activeCar.value = res.data
+ })
+ })
window.addEventListener('resize', function () {//鎵ц
myChart.resize()
})
}
+const activeCar = ref({})
+const modalTab = ref(0)
+const modalTabClick = (val) => {
+ modalTab.value = val
+}
+
const data1 = ref({})
const activeTab1 = ref(0)
@@ -798,11 +812,17 @@
const dataList2 = ref([])
const activeTab2 = ref(0)
-const tabClick2 = (val) => { activeTab2.value = val }
+const tabClick2 = (val) => {
+ activeTab2.value = val
+ getData2()
+}
const getData2 = () => {
wltransportMeasure({ queryType: activeTab2.value }).then(res => {
- const result = res.data
+ const result = res.data || []
dataList2.value = result
+ dataList2.value.forEach(item => {
+ item.planDateStrT = activeTab2.value == 2 ? dayjs(item.planDate).format('M') : dayjs(item.planDate).format('M.D')
+ })
initEnergy()
})
}
@@ -827,12 +847,14 @@
wlplatformJobList().then(res => {
const result = res.data
dataList3.value = result
- loopFn1()
})
}
const data4 = ref({})
const activeTab4 = ref(0)
-const tabClick4 = (val) => { activeTab4.value = val }
+const tabClick4 = (val) => {
+ activeTab4.value = val
+ getData4()
+}
const getData4 = () => {
wljobData({ queryType: activeTab4.value }).then(res => {
const result = res.data
@@ -851,7 +873,7 @@
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()
@@ -860,9 +882,18 @@
const dataList6 = ref([])
const getData6 = () => {
wlstockList().then(res => {
- const result = res.data
+ const result = res.data.stockList || []
dataList6.value = result
- loopFn2()
+ })
+}
+
+const isShowCarW = ref(false)
+const data7 = ref({})
+const getData7 = () => {
+ carsListPost().then(res => {
+ const result = res.data || {}
+ data7.value = result
+ initMap()
})
}
@@ -898,8 +929,12 @@
getData4()
getData5()
getData6()
+ getData7()
- initMap()
+ setTimeout(() => {
+ loopFn1()
+ loopFn2()
+ }, 12000)
})
@@ -1209,7 +1244,7 @@
}
.echart_wrap {
- width: 100%;
+ width: 86%;
height: 100%;
.echart_map {
@@ -1218,6 +1253,58 @@
/* transform: rotate(60deg); */
}
}
+
+ .warnning_info {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ border-top: 1px solid #5ecbce;
+ border-bottom: 1px solid #5ecbce;
+
+ .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;
+ 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 {
+ flex: 3;
+ }
+
+ .id_card {
+ color: #00F2F3;
+ }
+
+ .title {
+ flex: 4;
+ }
+ }
+ }
+ }
}
}
--
Gitblit v1.9.3