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 | 789 +++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 607 insertions(+), 182 deletions(-) diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue index a04ca3b..5a96827 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> @@ -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> @@ -30,14 +30,25 @@ <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> --> + <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=""> + <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 style="margin-left: 10px;">-</span> </div> </div> <div class="train_wrap"> @@ -89,14 +100,20 @@ <span class="item addr">鏀惰揣鍗曚綅</span> <span class="item time">浠诲姟寮�濮嬫椂闂�</span> </div> - <div class="line" 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> - <span class="item order">{{ item.billCode || item.contractNum }}</span> - <span class="item id_card">{{ item.carCodeFront }}</span> - <span class="item status">{{ statusMap[item.status].label }}</span> - <span class="item addr">{{ item.repertotyAddress }}</span> - <span class="item time" v-if="item.confirmTaskDate">{{ item.confirmTaskDate.slice(5, 16) }}</span> + <div class="one-swiper list_temp"> + <div class="swiper-wrapper"> + <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> + <span class="item order">{{ item.billCode || item.contractNum }}</span> + <span class="item id_card">{{ item.carCodeFront }}</span> + <span class="item status">{{ statusMap[item.status].label }}</span> + <span class="item addr">{{ item.repertotyAddress }}</span> + <span class="item time">{{ item.confirmTaskDate ? item.confirmTaskDate.slice(5, 16) : '-' + }}</span> + </div> + </div> </div> </div> </div> @@ -121,28 +138,76 @@ <img src="@/assets/images/energy_ef/ic_renwuzongliang@2x.png" alt=""> <div class="content"> <div class="name">褰撳墠浠诲姟閲�</div> - <div class="num"><span>{{ data4.planTaskNum }}</span>涓囨敮</div> + <div class="num"><span>{{ activeTab4 == 0 ? data1.currentOutNum : data1.currentInNum }}</span>涓囨敮</div> </div> </div> <div class="item"> <img src="@/assets/images/energy_ef/ic_wanchengrenwu@2x.png" alt=""> <div class="content"> <div class="name">褰撴棩瀹屾垚浠诲姟鎬婚噺</div> - <div class="num"><span class="today">{{ data4.finishTaskNum }}</span>涓囨敮</div> + <div class="num"> + <span v-if="data1.currentOutDoneNum || data1.currentInDoneNum" class="today">{{ + activeTab4 == + 0 ? data1.currentOutDoneNum : + data1.currentInDoneNum + }}</span> + <span v-else>0</span> + 涓囨敮 + </div> </div> </div> <div class="item"> <img src="@/assets/images/energy_ef/ic_bili@2x.png" alt=""> <div class="content"> <div class="name">宸插畬鎴愭瘮渚�</div> - <div class="num" v-if="data4.finishTaskNum && data4.planTaskNum"><span class="finish">{{ (( - data4.finishTaskNum / data4.planTaskNum) * 100).toFixed(1) }}%</span>涓囨敮</div> + <div class="num"> + <span v-if="activeTab4 == 0 && data1.currentOutNum" class="finish">{{ ((data1.currentOutDoneNum / + data1.currentOutNum) * 100).toFixed(1) }}</span> + <span v-if="activeTab4 == 1 && data1.currentInNum" class="finish">{{ ((data1.currentInDoneNum / + data1.currentInNum) * 100).toFixed(1) }}</span> + % + </div> </div> </div> </div> </div> <div class="center_box_two"> - <div ref="echartMap" class="echart_map" id="echartMap"></div> + <div class="list" style="z-index: 10000"> + <div class="item"> + <img src="@/assets/images/LogisticsCenter/car_zaitu@2x.png" alt=""> + <span>鍦ㄩ�旓細{{ data7.busyNum }}</span> + </div> + <div class="item"> + <img src="@/assets/images/LogisticsCenter/car_kongxian@2x.png" alt=""> + <span>绌洪棽锛歿{ data7.idleNum }}</span> + </div> + <div class="item"> + <img src="@/assets/images/LogisticsCenter/car_lixian@2x.png" alt=""> + <span>绂荤嚎锛歿{ data7.offlineNum }}</span> + </div> + </div> + <div class="echart_wrap" style="width: 100%;height: 100%"> + <div ref="echartMap" class="echart_map" id="echartMap"></div> + </div> + <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 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"> @@ -164,7 +229,8 @@ <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 || 0 : data1.monthOutRate || 0 + }}</span>涓囨敮/灏忔椂 </div> </div> </div> @@ -172,7 +238,8 @@ <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 || 0 : data1.monthInRate + || 0 }}</span>涓囨敮/灏忔椂</div> </div> </div> @@ -216,17 +283,18 @@ <div class="repertory"> <div class="use_ratio"> <div class="header"> - <div>搴撳瓨閲� <span class="num">{{ data1.stockTotal }}/{{ data1.stockMax }}</span></div> - <div v-if="data1.stockTotal && data1.stockMax">鍒╃敤鐜噞{ ((data1.stockTotal / data1.stockMax) * - 100).toFixed(0) }}%</div> + <div>搴撳瓨閲� <span class="num">{{ data6.num }}/{{ data6.totalNum }}</span></div> + <div v-if="data6.num && data6.totalNum">鍒╃敤鐜噞{ (data6.useRate * 100).toFixed(0) }}%</div> </div> - <Percent v-if="data1.stockTotal && data1.stockMax" - :rate="((data1.stockTotal / data1.stockMax) * 100).toFixed(0)" /> + <Percent v-if="data6.num && data6.totalNum" :rate="((data6.num / data6.totalNum) * 100).toFixed(0)" /> </div> - <div class="list"> - <div class="item" v-for="item in dataList6"> - <div class="la">{{ item.name }}</div> - <div class="val">{{ item.num }}涓囨敮</div> + <div class="list two-swiper"> + <div class="swiper-wrapper"> + <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 }}{{item.name.indexOf('鎵樼洏') === -1 ? '涓囨敮' : '涓�'}}</div> + </div> </div> </div> </div> @@ -237,23 +305,23 @@ <div class="modal" v-if="showModal"> <div class="title_head"> <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> - <span>鐨朼222</span> + <span>{{ activeCar.carCode }}</span> </div> <div class="info"> <div class="item"> <div class="dian"></div> <div class="la">杩愯緭鍗曞彿锛�</div> - <div class="val">22</div> + <div class="val">{{ activeCar.billCode }}</div> </div> <div class="item"> <div class="dian"></div> <div class="la">鍙告満淇℃伅锛�</div> - <div class="val">22</div> + <div class="val">{{ activeCar.name }} {{ activeCar.phone }}</div> </div> <div class="item"> <div class="dian"></div> <div class="la">鎬昏繍杈撻噺锛�</div> - <div class="val">22 涓囨敮</div> + <div class="val" v-if="activeCar.totalNum">{{ activeCar.totalNum }}涓囨敮</div> </div> </div> <div class="tabs"> @@ -261,34 +329,46 @@ <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">鍚堝悓鍒楄〃</div> </div> <div class="tab1" v-if="modalTab == 0"> - <div class="item" v-for="item, i in 3"> - <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> + <template v-for="item, i in activeCar.logList"> + <div class="item" v-if="i < 4 || showMore"> + <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 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> + <div class="text">{{ item.content }}</div> + <div class="time">{{ item.createDate }}</div> + </div> </div> - <div class="content"> - <div class="status">浣滀笟涓�</div> - <div class="text">浣滀笟浠诲姟鍦ㄣ�愬叆搴撳幓1鍙锋湀鍙般�戝紑濮嬩綔涓�</div> - <div class="time">2024-04-02 12:00</div> - </div> + </template> + <div class="more_btn" v-if="!showMore && activeCar.logList && activeCar.logList.length > 4" + @click="showMore = true">鏌ョ湅鏇村浣滀笟淇℃伅</div> + <div class="empty" v-if="!activeCar.contractList || activeCar.logList.contractList == 0"> + <img src="@/assets/images/default_nodata.png" alt=""> </div> </div> <div class="tab2" v-if="modalTab == 1"> <div class="list"> - <div class="item"> + <div class="item" v-for="item in activeCar.contractList"> <div class="head"> - <div class="code">鍚堝悓鍙凤細12312312</div> - <div class="addr">鏀惰揣鍦帮細姹熼棬鐑熻崏鐗╂祦涓績</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 3"> - <div class="name">鐗╂枡鍚嶇О锛�<span class="val">榛勫北</span></div> - <div class="num">鏁伴噺锛�<span class="val">100涓囨敮</span></div> + <div class="line" v-for="i in item.detailList"> + <div class="name">鐗╂枡鍚嶇О锛�<span class="val">{{ i.materialName }}</span></div> + <div class="num">鏁伴噺锛�<span class="val">{{ i.ioQty }}涓囨敮</span></div> </div> + </div> + <div class="empty" v-if="!activeCar.contractList || activeCar.logList.contractList == 0"> + <img src="@/assets/images/default_nodata.png" alt=""> </div> </div> </div> </div> + <div class="modal_mask" v-if="showModal" @click="closeModal"></div> </div> </v-scale-screen> </template> @@ -300,6 +380,9 @@ import dayjs from 'dayjs' import * as echarts from 'echarts' import ahJSON from '@/assets/anhui.json' +import icKongxian from '@/assets/images/LogisticsCenter/map_car_kongxian@2x.png' +import icLixian from '@/assets/images/LogisticsCenter/map_car_lixian@2x.png' +import icZaitu from '@/assets/images/LogisticsCenter/map_car_zaitu@2x.png' import { wlcenterData, wljobData, @@ -307,8 +390,15 @@ wlstockList, wltotalInList, wltransportMeasure, + carsListPost, + getCarsJobDetails, + getJobDetailsById, + carsEventListP } from '@/api' +import 'swiper/css/swiper.min.css' +import Swiper from 'swiper' +const statusMapD = ['浠诲姟鐢熸垚', '纭浠诲姟', '宸茬鍒�', '鍏ュ洯绛夊緟', '鏈堝彴鍙彿', '浣滀笟涓�', '浣滀笟瀹屾垚', '鏈堝彴杞Щ', '寮傚父鎸傝捣', '涓嬪彂鎺堟潈绂诲洯', '绂诲洯', '宸茶繃鍙�'] const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',] const date = ref(dayjs().format('YYYY.MM.DD')) @@ -320,13 +410,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 = () => { @@ -350,42 +433,39 @@ 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' + }, + nameTextStyle: { + color: '#869CC9' // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂� + }, + axisTick: { + show: false, + }, + data: dataList2.value.map(i => i.planDateStrT), + } + ], yAxis: [ { - nameTextStyle: { - color: '#869CC9', - }, - offset: 0, name: '涓囨敮', + offset: 0, type: 'value', - axisLabel: { - show: true, - color: "#869CC9", - }, axisLine: { show: true, }, @@ -397,18 +477,34 @@ type: 'dashed' } }, + axisLabel: { + color: '#869CC9' + }, + nameTextStyle: { + color: '#869CC9', + padding: [0, 0, 0, 12] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂� + }, }, { type: 'value', - name: '%', + name: '涓�', min: 0, - max: 100, - // interval: 5, axisLabel: { - formatter: '{value}%' + color: '#869CC9' }, - splitLine: false - } + nameTextStyle: { + color: '#869CC9', + padding: [0, 0, 0, -18] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂� + }, + splitLine: { + show: false, + lineStyle: { + width: 1, + color: "rgba(49,105,129,0.4)", + type: 'dashed' + } + }, + }, ], series: [ { @@ -421,6 +517,7 @@ position: 'top', color: '#fff', }, + yAxisIndex: 0, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { @@ -444,6 +541,7 @@ name: '浠诲姟瀹屾垚閲�', type: 'bar', barWidth: 10, + yAxisIndex: 0, label: { show: false, position: 'top', @@ -473,6 +571,7 @@ type: 'line', smooth: false, showAllSymbol: true, + yAxisIndex: 1, symbol: 'none', lineStyle: { color: "#1a43bc" @@ -502,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 }, @@ -522,37 +633,78 @@ const echartMap = ref() const initMap = () => { + console.log('----') + var myChart = echarts.init(echartMap.value) echarts.registerMap('js', ahJSON) - 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], - '瀹e煄甯�': [118.76, 30.94], - '浜冲窞甯�': [115.78, 33.84], + const scatterData = data7.value.carsList.map(item => { + return { + name: item.terminalId, + img: item.jobStatus == 2 ? icLixian : item.jobStatus == 1 ? 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({ + name: `${item.name}`, + type: 'effectScatter', + coordinateSystem: 'geo', + effectType: 'ripple', + showEffectOn: 'render', + // 鏁g偣鏍峰紡 + rippleEffect: { + period: 1, + scale: 1, + brushType: 'fill' + }, + // 鏁g偣澶у皬 鑷畾涔夋暎鐐瑰浘鐗� + // symbol: `image://${item.img}`, + symbol: `image://${item.img}`, + label: { + show: true, + formatter: '{b|{b}}', + position: 'top', + distance: -1, + rich: { + b: { + color: "#fff", + fontSize: 14, + height: 30, + // width: 200, + padding: 5, + }, + } + }, + symbolSize: [32, 40], + hoverAnimation: true, + zlevel: 99, + data: item.data, + }) } + ) var data = [ { name: "鍚堣偉甯�", value: 3 }, { name: "婊佸窞甯�", value: 0 }, { name: "鑺滄箹甯�", value: 1 }, { name: "闃滈槼甯�", value: 0 }, - { name: "铓屽煚甯�", value: 0 }, + { name: "铓屽煚甯�", value: 4 }, { name: "娣崡甯�", value: 0 }, - { name: "椹瀺灞卞競", value: 0 }, - { name: "瀹夊簡甯�", value: 0 }, + { name: "椹瀺灞卞競", value: 6 }, + { name: "瀹夊簡甯�", value: 2 }, { name: "榛勫北甯�", value: 0 }, - { name: "閾滈櫟甯�", value: 0 }, + { name: "閾滈櫟甯�", value: 40 }, { name: "瀹垮窞甯�", value: 0 }, { name: "娣寳甯�", value: 0 }, { name: "鍏畨甯�", value: 0 }, @@ -570,17 +722,6 @@ 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: { show: false, max: 100, @@ -591,22 +732,26 @@ }, geo: [{ map: 'js', - roam: false, //鏄惁鍏佽缂╂斁 - zoom: 1.1, //榛樿鏄剧ず绾у埆 + 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: { @@ -622,7 +767,7 @@ symbolSize: 14, label: { normal: { - show: true, + show: false, formatter: function (params) { return '{fline|鍦扮偣锛�' + params.data.city + '}\n{tline|' + (params.data.info || '鍙戠敓xx闆嗕欢') + '}' }, @@ -652,42 +797,80 @@ } }, - //鍦板浘 + /* //鍦板浘 { type: 'map', mapType: 'js', geoIndex: -1, - zoom: 1.1, //榛樿鏄剧ず绾у埆 + zoom: 1.2, //榛樿鏄剧ず绾у埆 + // roam: true, // 寮�鍚缉鏀惧拰骞崇Щ label: { show: true, color: '#ffffff', - emphasis: { - color: 'white', - show: false - } + }, itemStyle: { normal: { - borderColor: '#2980b9', + borderColor: '#428598', borderWidth: 1, areaColor: '#1d3b60' }, emphasis: { - areaColor: '#FA8C16', - borderWidth: 0, - color: 'green' + disabled: true, + // areaColor: '#FA8C16', + // borderWidth: 1, + // color: '#428598', + label: { + show: true, // 濮嬬粓鏄剧ず鏂囧瓧 + color: '#fff' // 璁剧疆鏂囧瓧棰滆壊 + }, + areaColor: null } }, data: data - } + },*/ + ...serData, ] } myChart.setOption(option) + 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 } + }) + }) window.addEventListener('resize', function () {//鎵ц myChart.resize() }) } +const activeCar = ref({}) +const showModal = ref(false) +const modalTab = ref(0) +const showMore = ref(false) +const modalTabClick = (val) => { + modalTab.value = val +} +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') +} + const data1 = ref({}) const activeTab1 = ref(0) @@ -707,11 +890,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() }) } @@ -738,14 +927,9 @@ dataList3.value = result }) } -const data4 = ref({}) const activeTab4 = ref(0) -const tabClick4 = (val) => { activeTab4.value = val } -const getData4 = () => { - wljobData({ queryType: activeTab4.value }).then(res => { - const result = res.data - data4.value = result - }) +const tabClick4 = (val) => { + activeTab4.value = val } const dataList5 = ref([]) const data5 = ref(0) @@ -759,28 +943,85 @@ 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 data6 = ref({}) const getData6 = () => { wlstockList().then(res => { - const result = res.data - dataList6.value = result + const result = res.data || [] + data6.value = result + }) +} + +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 || [] + }) +} + +const autoplayFlag = (list = [], leng = 4, time = 2000) => { + if (list.length > leng) { + return { delay: time, disableOnInteraction: false } + } else { + return false + } +} +const loopFn1 = () => { + var newSwiper1 = new Swiper('.one-swiper', { + initialSlide: 0, + direction: 'vertical', //绔栫洿鏂瑰悜 + slidesPerView: 7, + autoplay: autoplayFlag(dataList3.value, 7, 2000), + observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiperiper + }) +} +const loopFn2 = () => { + var newSwiper1 = new Swiper('.two-swiper', { + initialSlide: 0, + direction: 'vertical', //绔栫洿鏂瑰悜 + slidesPerView: 6, + autoplay: autoplayFlag(data6.value.stockList, 6, 2000), + observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiperiper }) } onMounted(() => { getData1() getData2() getData3() - getData4() getData5() getData6() + getData7() - initMap() + setInterval(() => { + getData1() + getData2() + getData3() + getData5() + getData6() + getData7() + }, 1000 * 60 * 10) + + setTimeout(() => { + loopFn1() + loopFn2() + }, 12000) }) @@ -789,6 +1030,10 @@ <style lang="scss" scoped> div { box-sizing: border-box; +} + +.swiper-wrapper { + display: block !important; } .main_content { @@ -815,15 +1060,15 @@ .num { margin-right: 10px; font-weight: bold; - font-size: 46px; - height: 44px; - line-height: 52px; + font-size: 44px; + height: 48px; + line-height: 50px; font-weight: bold; color: #00F2F3; letter-spacing: 3px; background-image: -webkit-linear-gradient(top, - #01D9FE 0%, - #0177FE 60%, + #1cdafb 0%, + #0177FE 70%, #0177FE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -901,13 +1146,19 @@ .list_wrap { padding: 10px 0; + .list_temp { + height: 210px !important; + overflow: hidden; + } + .list { .line { display: flex; - height: 30px; + height: 30px !important; align-items: center; padding: 0 10px; font-size: 12px; + cursor: pointer; &:nth-of-type(2n) { background: rgba(27, 64, 97, 0.52); @@ -951,7 +1202,8 @@ } .time { - flex: 8; + flex: 6; + margin-left: 6px; } } } @@ -1053,14 +1305,126 @@ } } } + .center_box_three{ + } .center_box_two { flex: 1; width: 100%; + position: relative; - .echart_map { - width: 100%; + .list { + position: absolute; + top: 10px; + left: 20px; + + .item { + display: flex; + align-items: center; + font-weight: 500; + font-size: 20px; + margin-bottom: 18px; + + img { + width: 36px; + height: 36px; + margin-right: 15px; + } + } + } + + .echart_wrap { + width: 86%; height: 100%; + + .echart_map { + width: 100%; + height: 100%; + /* transform: rotate(60deg); */ + } + } + + .warnning_info { + position: absolute; + right: 0; + 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; + 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; + padding-left: 10px; + padding-bottom: 12px; + + .line { + font-size: 13px; + color: #D2E0FF; + display: flex; + align-items: center; + height: 30px; + + div { + flex: 3; + } + + .id_card { + color: #00F2F3; + } + + .title { + 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; + } } } } @@ -1218,15 +1582,16 @@ .list { margin-top: 22px; - height: 240px; - overflow: auto; + height: 216px; + overflow: hidden; scrollbar-width: none; .item { width: 100%; - height: 36px; + height: 36px !important; display: flex; align-items: center; + font-size: 14px; &:nth-of-type(2n+1) { background: rgba(0, 152, 255, 0.13); @@ -1240,6 +1605,10 @@ .val { flex: 2; } + } + + .orange { + color: #FF5728; } } } @@ -1385,7 +1754,7 @@ top: 20%; left: 50%; transform: translate(-50%, 0); - z-index: 99; + z-index: 999; padding: 24px; .title_head { @@ -1459,6 +1828,25 @@ } .tab1 { + height: 360px; + overflow: auto; + + .more_btn { + width: 116px; + height: 25px; + border-radius: 2px; + border: 1px solid #D2E0FF; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; + color: D2E0FF; + margin-left: 30px; + margin-top: 12px; + cursor: pointer; + } + + .item { display: flex; @@ -1505,6 +1893,10 @@ color: #fff; } + .ac { + color: #00F2F3; + } + .text { margin-bottom: 4px; } @@ -1518,6 +1910,9 @@ } .tab2 { + height: 360px; + overflow: auto; + .list { .item { width: 560px; @@ -1526,40 +1921,70 @@ color: #D2E0FF; padding: 10px; margin-bottom: 10px; + .head { display: flex; justify-content: space-between; align-items: center; height: 36px; line-height: 36px; - border-bottom: 1px solid rgba(255,255,255,0.16); + border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 10px; + padding-right: 10px; + .code { font-weight: 500; font-size: 14px; color: #00F2F3; } } - .line{ + + .line { display: flex; align-items: center; margin-bottom: 8px; - &:nth-last-child(1){ + + &:nth-last-child(1) { margin-bottom: 0; } - .name{ + + .name { flex: 4; } - .num{ + + .num { flex: 3; } - .val{ + + .val { color: #fff; } } } } } + + .empty { + display: flex; + justify-content: center; + align-items: center; + height: 340px; + + img { + width: 144px; + } + } +} + +.modal_mask { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99; + background-color: rgba(0, 0, 0, 0.1); + /* background-color: red; */ } .bg { @@ -1571,4 +1996,4 @@ object-fit: cover; z-index: -1; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3