From c3aaf28f7316cce12eec007a9f85a96cbcddeec2 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期三, 07 五月 2025 10:34:20 +0800 Subject: [PATCH] 最新版本541200007 --- screen/src/views/LogisticsEfficiency.vue | 198 ++++++++++++++++++++++++++++++++++++------------- 1 files changed, 145 insertions(+), 53 deletions(-) diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue index 6e62925..5a96827 100644 --- a/screen/src/views/LogisticsEfficiency.vue +++ b/screen/src/views/LogisticsEfficiency.vue @@ -17,7 +17,7 @@ <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> @@ -31,7 +31,8 @@ <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=""> @@ -101,7 +102,7 @@ </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> @@ -151,7 +152,7 @@ data1.currentInDoneNum }}</span> <span v-else>0</span> - <span>涓囨敮</span> + 涓囨敮 </div> </div> </div> @@ -161,16 +162,17 @@ <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> </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> @@ -184,22 +186,28 @@ <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 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> </div> + <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> + </div> </div> <div class="right_box"> @@ -282,9 +290,10 @@ </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 class="val">{{ item.num }}{{item.name.indexOf('鎵樼洏') === -1 ? '涓囨敮' : '涓�'}}</div> </div> </div> </div> @@ -325,7 +334,7 @@ <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> @@ -344,7 +353,8 @@ <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"> @@ -381,7 +391,9 @@ wltotalInList, wltransportMeasure, carsListPost, - getCarsJobDetails + getCarsJobDetails, + getJobDetailsById, + carsEventListP } from '@/api' import 'swiper/css/swiper.min.css' import Swiper from 'swiper' @@ -451,27 +463,6 @@ ], 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', @@ -494,6 +485,26 @@ 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: [ { @@ -506,7 +517,7 @@ position: 'top', color: '#fff', }, - yAxisIndex: 1, + yAxisIndex: 0, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { @@ -530,7 +541,7 @@ name: '浠诲姟瀹屾垚閲�', type: 'bar', barWidth: 10, - yAxisIndex: 1, + yAxisIndex: 0, label: { show: false, position: 'top', @@ -560,7 +571,7 @@ type: 'line', smooth: false, showAllSymbol: true, - yAxisIndex: 0, + yAxisIndex: 1, symbol: 'none', lineStyle: { color: "#1a43bc" @@ -590,7 +601,19 @@ 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 }, @@ -610,6 +633,8 @@ const echartMap = ref() const initMap = () => { + console.log('----') + var myChart = echarts.init(echartMap.value) echarts.registerMap('js', ahJSON) const scatterData = data7.value.carsList.map(item => { @@ -707,22 +732,26 @@ }, 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: { @@ -768,12 +797,13 @@ } }, - //鍦板浘 + /* //鍦板浘 { type: 'map', mapType: 'js', geoIndex: -1, zoom: 1.2, //榛樿鏄剧ず绾у埆 + // roam: true, // 寮�鍚缉鏀惧拰骞崇Щ label: { show: true, color: '#ffffff', @@ -798,7 +828,7 @@ } }, data: data - }, + },*/ ...serData, ] } @@ -807,6 +837,7 @@ myChart.on('click', function (params) { const item = params.data getCarsJobDetails({ carCode: item.code }).then(res => { + // getCarsJobDetails({ id: item.id }).then(res => { // getCarsJobDetails({ carCode: '鐨朅E5277' }).then(res => { showModal.value = true activeCar.value = { ...res.data, carCode: item.code } @@ -826,6 +857,18 @@ const closeModal = () => { showModal.value = false activeCar.value = {} +} +const taskClick = (item) => { + // getCarsJobDetails({ carCode: item.carCodeFront }).then(res => { + getJobDetailsById({ id: item.id }).then(res => { + // getCarsJobDetails({ carCode: '鐨朅E5277' }).then(res => { + showModal.value = true + activeCar.value = { ...res.data, carCode: item.carCodeFront } + }) +} + +const openCloudAddr = () => { + window.open('https://vms.hikvisionauto.com:8040/', '_blank') } @@ -916,11 +959,20 @@ const isShowCarW = ref(false) const data7 = ref({}) +const eventList = ref([]) const getData7 = () => { carsListPost().then(res => { const result = res.data || {} data7.value = result initMap() + }, () => { + data7.value = { + carsList: [] + } + initMap() + }) + carsEventListP().then(res => { + eventList.value = res.data || [] }) } @@ -1106,6 +1158,7 @@ align-items: center; padding: 0 10px; font-size: 12px; + cursor: pointer; &:nth-of-type(2n) { background: rgba(27, 64, 97, 0.52); @@ -1252,7 +1305,9 @@ } } } + .center_box_three{ + } .center_box_two { flex: 1; width: 100%; @@ -1295,13 +1350,13 @@ 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; @@ -1318,6 +1373,8 @@ .war_list { max-height: 300px; overflow: auto; + padding-left: 10px; + padding-bottom: 12px; .line { font-size: 13px; @@ -1338,6 +1395,35 @@ flex: 4; } } + } + } + + .monitoring { + position: absolute; + cursor: pointer; + bottom: 10px; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + font-size: 15px; + width: 156px; + height: 40px; + background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%); + border-radius: 2px; + border: 1px solid; + border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1; + + .icon { + width: 16px; + height: 16px; + margin-right: 10px; + } + + .top { + width: 7px; + margin-left: 6px; } } } @@ -1505,6 +1591,7 @@ height: 36px !important; display: flex; align-items: center; + font-size: 14px; &:nth-of-type(2n+1) { background: rgba(0, 152, 255, 0.13); @@ -1518,6 +1605,10 @@ .val { flex: 2; } + } + + .orange { + color: #FF5728; } } } @@ -1839,6 +1930,7 @@ line-height: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 10px; + padding-right: 10px; .code { font-weight: 500; @@ -1904,4 +1996,4 @@ object-fit: cover; z-index: -1; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3