¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <v-scale-screen width="1920" height="960"> |
| | | <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.gif" class="main_header_bg" alt="" /> |
| | | <div class="title">宿³°æºæ
§ç©æµååº-è°åº¦è½æè·è¸ª</div> |
| | | <div class="time_wrap"> |
| | | <span class="date">{{ date }}</span> |
| | | <span class="week">{{ week }}</span> |
| | | <span class="time">{{ time }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="main_content"> |
| | | <div class="left_box"> |
| | | <div class="left_box_one"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>累计åºåºéç»è®¡</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab1 == 0 }" @click="tabClick1(0)">æ¬æ</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab1 == 1 }" @click="tabClick1(1)">æ¬å¹´</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="content_wrap"> |
| | | <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"> |
| | | <!-- <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"> |
| | | <div class="icon_wrap"> |
| | | <img src="@/assets//images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | </div> |
| | | <div class="total"> |
| | | <span>累计åºåºè½¦æ¬¡</span> |
| | | <span><strong>{{ activeTab1 == 0 ? data1.monthOutTimes : data1.yearOutTimes }}</strong><span |
| | | class="unit">次</span></span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="left_box_two"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>è¿è¾ä»»å¡åæ</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab2 == 0 }" @click="tabClick2(0)">è¿7æ¥</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab2 == 1 }" @click="tabClick2(1)">æ¬æ</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab2 == 2 }" @click="tabClick2(2)">æ¬å¹´</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="energy_wrap"> |
| | | <div class="energyRef"></div> |
| | | </div> |
| | | </div> |
| | | <div class="left_box_three"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>å½åè¿è¾ä»»å¡</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="list_wrap"> |
| | | <div class="list"> |
| | | <div class="header line"> |
| | | <span class="item flag">æ è¯</span> |
| | | <span class="item order">è¿è¾åå·</span> |
| | | <span class="item id_card">è¿è¾è½¦è¾</span> |
| | | <span class="item status">ä½ä¸ç¶æ</span> |
| | | <span class="item addr">æ¶è´§åä½</span> |
| | | <span class="item time">ä»»å¡å¼å§æ¶é´</span> |
| | | </div> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | <div class="center_box"> |
| | | <div class="center_box_one"> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab4 == 0 }" @click="tabClick4(0)"> |
| | | <img v-if="activeTab4 == 0" src="@/assets/images/energy_ef/chuku_task_ac.png" alt=""> |
| | | <img v-else src="@/assets/images/energy_ef/chuku_task.png" alt=""> |
| | | <span>åºåºä»»å¡</span> |
| | | </div> |
| | | <div class="tab" :style="{ color: activeTab4 == 1 ? '#387df0' : '#d8e4f8' }" @click="tabClick4(1)"> |
| | | <img v-if="activeTab4 == 1" src="@/assets/images/energy_ef/ruku_task_ac.png" alt=""> |
| | | <img v-if="activeTab4 == 0" src="@/assets/images/energy_ef/ruku_task.png" alt=""> |
| | | <span>å
¥åºä»»å¡</span> |
| | | </div> |
| | | </div> |
| | | <div class="static_wrap"> |
| | | <div class="item"> |
| | | <img src="@/assets/images/energy_ef/ic_renwuzongliang@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">å½åä»»å¡é</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 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"> |
| | | <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 class="list"> |
| | | <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"> |
| | | <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 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"> |
| | | <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"> |
| | | <div class="right_box_one"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>åºå
¥åºæç</div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div class="tab" :class="{ active: activeTab12 == 0 }" @click="tabClick12(0)">仿¥</div> |
| | | <div class="separate"></div> |
| | | <div class="tab" :class="{ active: activeTab12 == 1 }" @click="tabClick12(1)">æ¬æ</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="static_wrap"> |
| | | <div class="item"> |
| | | <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.todayOutRate || 0 : data1.monthOutRate || 0 |
| | | }}</span>䏿¯/å°æ¶ |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <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.todayInRate || 0 : data1.monthInRate |
| | | || 0 |
| | | }}</span>䏿¯/å°æ¶</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right_box_two"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>仿¥å
¥åºéç»è®¡</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong>{{ data5 }}</strong></div> |
| | | <div>å
¥åºæ°é</div> |
| | | </div> |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item" v-for="item, i in dataList5"> |
| | | <div class="line"> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | </div> |
| | | <div :style="{ color: colors[i] }" class="num">{{ item.value }}䏿¯ | {{ item.rate }}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="right_box_three"> |
| | | <div class="com_header"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> |
| | | <div>åºåæ
åµ</div> |
| | | </div> |
| | | <img src="@/assets/images/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="repertory"> |
| | | <div class="use_ratio"> |
| | | <div class="header"> |
| | | <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="data6.num && data6.totalNum" :rate="((data6.num / data6.totalNum) * 100).toFixed(0)" /> |
| | | </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 }}䏿¯</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- --> |
| | | <div class="modal" v-if="showModal"> |
| | | <div class="title_head"> |
| | | <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | <span>{{ activeCar.carCode }}</span> |
| | | </div> |
| | | <div class="info"> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">è¿è¾åå·ï¼</div> |
| | | <div class="val">{{ activeCar.billCode }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">叿ºä¿¡æ¯ï¼</div> |
| | | <div class="val">{{ activeCar.name }} {{ activeCar.phone }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">æ»è¿è¾éï¼</div> |
| | | <div class="val" v-if="activeCar.totalNum">{{ activeCar.totalNum }}䏿¯</div> |
| | | </div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">ä½ä¸ä¿¡æ¯</div> |
| | | <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">ååå表</div> |
| | | </div> |
| | | <div class="tab1" v-if="modalTab == 0"> |
| | | <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> |
| | | </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" v-for="item in activeCar.contractList"> |
| | | <div class="head"> |
| | | <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"> |
| | | <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> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import VScaleScreen from 'v-scale-screen' |
| | | import Percent from '@/components/percent.vue' |
| | | 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, |
| | | wlplatformJobList, |
| | | 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')) |
| | | const week = ref(weekMap[new Date().getDay()]) |
| | | const time = ref(dayjs().format('HH:mm:ss')) |
| | | setInterval(() => { |
| | | date.value = dayjs().format('YYYY-MM-DD') |
| | | week.value = weekMap[new Date().getDay()] |
| | | time.value = dayjs().format('HH:mm:ss') |
| | | |
| | | }, 1000) |
| | | |
| | | |
| | | const initEnergy = () => { |
| | | var myChart = echarts.init(document.querySelector('.energyRef')) |
| | | // ç»å¶å¾è¡¨ |
| | | myChart.setOption({ |
| | | legend: { |
| | | itemGap: 12, |
| | | // icon: 'circle', |
| | | right: '12px', |
| | | top: '10px', |
| | | data: ['计åä»»å¡é', 'ä»»å¡å®æé', '计å任塿°'], |
| | | itemWidth: 12, |
| | | itemHeight: 4, |
| | | textStyle: { |
| | | color: '#fff', |
| | | borderColor: '#fff' |
| | | }, |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | top: '26%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | nameGap: 5, |
| | | type: 'category', |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: '#999' |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#869CC9' |
| | | }, |
| | | nameTextStyle: { |
| | | color: '#869CC9' // å个æ°ååå«ä¸ºä¸å³ä¸å·¦ä¸åä½ç½®è·ç¦» |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | data: dataList2.value.map(i => i.planDateStrT), |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | name: '䏿¯', |
| | | offset: 0, |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true, |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | width: 1, |
| | | color: "rgba(49,105,129,0.4)", |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | color: '#869CC9' |
| | | }, |
| | | nameTextStyle: { |
| | | color: '#869CC9', |
| | | 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: [ |
| | | { |
| | | name: '计åä»»å¡é', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | barGap: '60%', |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | | color: '#fff', |
| | | }, |
| | | yAxisIndex: 0, |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { |
| | | offset: 0, |
| | | color: '#5bc7d5' |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: '#1a3f55' |
| | | } |
| | | ], false), |
| | | lineStyle: { |
| | | width: 1, |
| | | type: 'solid' |
| | | }, |
| | | barBorderRadius: [3, 3, 0, 0], |
| | | }, |
| | | data: dataList2.value.map(i => i.planTaskNum) |
| | | }, |
| | | { |
| | | name: 'ä»»å¡å®æé', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | yAxisIndex: 0, |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | | color: '#fff', |
| | | }, |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { |
| | | offset: 0, |
| | | color: '#edaf3d' |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: '#323522' |
| | | } |
| | | ], false), |
| | | lineStyle: { |
| | | width: 1, |
| | | type: 'solid' |
| | | }, |
| | | barBorderRadius: [3, 3, 0, 0], |
| | | }, |
| | | data: dataList2.value.map(i => i.finishTaskNum) |
| | | }, |
| | | { |
| | | name: '计å任塿°', |
| | | type: 'line', |
| | | smooth: false, |
| | | showAllSymbol: true, |
| | | yAxisIndex: 1, |
| | | symbol: 'none', |
| | | lineStyle: { |
| | | color: "#1a43bc" |
| | | }, |
| | | label: { |
| | | show: false, |
| | | position: 'top', |
| | | color: '#fff', |
| | | }, |
| | | data: dataList2.value.map(i => i.planTimes) |
| | | } |
| | | ] |
| | | }) |
| | | |
| | | window.addEventListener('resize', function () {//æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | const initEchart1 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | const option = { |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | radius: ['86%', '100%'], |
| | | label: { |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'none' |
| | | }, |
| | | emphasis: { |
| | | // è®¾ç½®æ¬æµ®æ¶æ ·å¼ä¸ºç©º |
| | | scale: false, // å
³éæ¾å¤§ææ |
| | | itemStyle: { |
| | | shadowBlur: 0, // é´å½±æ¨¡ç³åº¦ä¸º 0 |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0)', |
| | | }, |
| | | }, |
| | | padAngle: 3, |
| | | itemStyle: { |
| | | borderRadius: 10 |
| | | }, |
| | | color: colors, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: dataList5.value |
| | | } |
| | | ] |
| | | } |
| | | myChart.setOption(option) |
| | | window.addEventListener('resize', function () { // æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | |
| | | const echartMap = ref() |
| | | const initMap = () => { |
| | | console.log('----') |
| | | |
| | | var myChart = echarts.init(echartMap.value) |
| | | echarts.registerMap('js', ahJSON) |
| | | 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', |
| | | // æ£ç¹æ ·å¼ |
| | | rippleEffect: { |
| | | period: 1, |
| | | scale: 1, |
| | | brushType: 'fill' |
| | | }, |
| | | // æ£ç¹å¤§å° èªå®ä¹æ£ç¹å¾ç |
| | | // 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: 4 }, |
| | | { name: "æ·®åå¸", value: 0 }, |
| | | { name: "马éå±±å¸", value: 6 }, |
| | | { name: "å®åºå¸", value: 2 }, |
| | | { name: "é»å±±å¸", value: 0 }, |
| | | { name: "ééµå¸", value: 40 }, |
| | | { name: "宿å·å¸", value: 0 }, |
| | | { name: "æ·®åå¸", value: 0 }, |
| | | { name: "å
å®å¸", value: 0 }, |
| | | { name: "æ± å·å¸", value: 1 }, |
| | | { name: "宣åå¸", value: 0 }, |
| | | { name: "亳å·å¸", value: 0 }, |
| | | ] |
| | | const option = { |
| | | title: { |
| | | top: 20, |
| | | text: '', |
| | | subtext: '', |
| | | x: 'center', |
| | | textStyle: { |
| | | color: '#ffffff' |
| | | } |
| | | }, |
| | | visualMap: { |
| | | show: false, |
| | | max: 100, |
| | | seriesIndex: [3], |
| | | inRange: { |
| | | color: ['#A5DCF4', '#006edd'] |
| | | } |
| | | }, |
| | | geo: [{ |
| | | map: 'js', |
| | | roam: true, //æ¯å¦å
è®¸ç¼©æ¾ |
| | | zoom: 1.2, //é»è®¤æ¾ç¤ºçº§å« |
| | | scaleLimit: { |
| | | min: 0, |
| | | max: 50 |
| | | }, //缩æ¾çº§å« |
| | | itemStyle: { |
| | | normal: { |
| | | areaColor: '#1d3b60', |
| | | borderColor: '#428598', |
| | | borderWidth: 2, |
| | | // shadowColor: 'rgba(63, 218, 255, 0.5)', |
| | | shadowBlur: 30 |
| | | }, |
| | | emphasis: { |
| | | areaColor: '#2B91B7', |
| | | } |
| | | }, |
| | | tooltip: { |
| | | show: false |
| | | } |
| | | }], |
| | | series: [ |
| | | { |
| | | type: 'effectScatter', |
| | | coordinateSystem: 'geo', |
| | | z: 5, |
| | | data, |
| | | symbolSize: 14, |
| | | label: { |
| | | normal: { |
| | | show: false, |
| | | formatter: function (params) { |
| | | return '{fline|å°ç¹ï¼' + params.data.city + '}\n{tline|' + (params.data.info || 'åçxxéä»¶') + '}' |
| | | }, |
| | | position: 'top', |
| | | backgroundColor: 'rgba(233,63,66,.9)', |
| | | padding: [0, 0], |
| | | borderRadius: 3, |
| | | lineHeight: 32, |
| | | color: '#ffffff', |
| | | rich: { |
| | | fline: { |
| | | padding: [0, 10, 10, 10], |
| | | color: '#ffffff' |
| | | }, |
| | | tline: { |
| | | padding: [10, 10, 0, 10], |
| | | color: '#ffffff' |
| | | } |
| | | } |
| | | }, |
| | | emphasis: { |
| | | show: true |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | color: '#e93f42', |
| | | } |
| | | }, |
| | | |
| | | //å°å¾ |
| | | { |
| | | type: 'map', |
| | | mapType: 'js', |
| | | geoIndex: -1, |
| | | zoom: 1.2, //é»è®¤æ¾ç¤ºçº§å« |
| | | // roam: true, // å¼å¯ç¼©æ¾å平移 |
| | | label: { |
| | | show: true, |
| | | color: '#ffffff', |
| | | |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | borderColor: '#428598', |
| | | borderWidth: 1, |
| | | areaColor: '#1d3b60' |
| | | }, |
| | | emphasis: { |
| | | 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: 'çAE5277' }).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: 'çAE5277' }).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) |
| | | const activeTab12 = ref(0) |
| | | const tabClick1 = (val) => { |
| | | activeTab1.value = val |
| | | } |
| | | const tabClick12 = (val) => { |
| | | activeTab12.value = val |
| | | } |
| | | const getData1 = () => { |
| | | wlcenterData().then(res => { |
| | | const result = res.data |
| | | data1.value = result |
| | | }) |
| | | } |
| | | |
| | | const dataList2 = ref([]) |
| | | const activeTab2 = ref(0) |
| | | const tabClick2 = (val) => { |
| | | activeTab2.value = val |
| | | getData2() |
| | | } |
| | | const getData2 = () => { |
| | | wltransportMeasure({ queryType: activeTab2.value }).then(res => { |
| | | 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() |
| | | }) |
| | | } |
| | | |
| | | const dataList3 = ref([]) |
| | | const statusMap = [ |
| | | { value: 0, label: 'å¾
确认' }, |
| | | { value: 1, label: 'å¾
ç¾å°' }, |
| | | { value: 2, label: 'çå¾
å«å·' }, |
| | | { value: 3, label: 'å
¥åçå¾
' }, |
| | | { value: 4, label: 'æå°çå¾
' }, |
| | | { value: 5, label: 'ä½ä¸ä¸' }, |
| | | { value: 6, label: 'ä½ä¸å®æ' }, |
| | | { value: 7, label: '转移ä¸' }, |
| | | { value: 8, label: 'å¼å¸¸æèµ·' }, |
| | | { value: 9, label: 'å·²ææç¦»å' }, |
| | | { value: 10, label: '已离å' }, |
| | | { value: 11, label: 'å·²è¿å·' }, |
| | | { value: 12, label: '已忶' }, |
| | | ] |
| | | const getData3 = () => { |
| | | wlplatformJobList().then(res => { |
| | | const result = res.data |
| | | dataList3.value = result |
| | | }) |
| | | } |
| | | const activeTab4 = ref(0) |
| | | const tabClick4 = (val) => { |
| | | activeTab4.value = val |
| | | } |
| | | const dataList5 = ref([]) |
| | | const data5 = ref(0) |
| | | const getData5 = () => { |
| | | wltotalInList().then(res => { |
| | | const result = res.data || [] |
| | | let count = 0 |
| | | dataList5.value = result.map(i => { |
| | | i.value = i.num |
| | | count += i.num |
| | | return i |
| | | }) |
| | | dataList5.value.forEach(i => { |
| | | i.rate = count == 0 ? 0 : ((i.num / count) * 100).toFixed(0) |
| | | }) |
| | | data5.value = count |
| | | initEchart1() |
| | | }) |
| | | } |
| | | const data6 = ref({}) |
| | | const getData6 = () => { |
| | | wlstockList().then(res => { |
| | | 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èªå·±æåå
ç´ æ¶ï¼èªå¨åå§åswiperiper |
| | | }) |
| | | } |
| | | const loopFn2 = () => { |
| | | var newSwiper1 = new Swiper('.two-swiper', { |
| | | initialSlide: 0, |
| | | direction: 'vertical', //ç«ç´æ¹å |
| | | slidesPerView: 6, |
| | | autoplay: autoplayFlag(data6.value.stockList, 6, 2000), |
| | | observer: true, //ä¿®æ¹swiperèªå·±æåå
ç´ æ¶ï¼èªå¨åå§åswiperiper |
| | | }) |
| | | } |
| | | onMounted(() => { |
| | | getData1() |
| | | getData2() |
| | | getData3() |
| | | getData5() |
| | | getData6() |
| | | getData7() |
| | | |
| | | setInterval(() => { |
| | | getData1() |
| | | getData2() |
| | | getData3() |
| | | getData5() |
| | | getData6() |
| | | getData7() |
| | | }, 1000 * 60 * 10) |
| | | |
| | | setTimeout(() => { |
| | | loopFn1() |
| | | loopFn2() |
| | | }, 12000) |
| | | }) |
| | | |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .swiper-wrapper { |
| | | display: block !important; |
| | | } |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | padding: 20px 25px 0; |
| | | |
| | | .left_box { |
| | | width: 440px; |
| | | |
| | | .left_box_one { |
| | | width: 100%; |
| | | position: relative; |
| | | margin-bottom: 20px; |
| | | |
| | | .content_wrap { |
| | | height: 164px; |
| | | padding: 22px 20px 0; |
| | | |
| | | .content { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | margin: 10px 0 22px; |
| | | |
| | | .num { |
| | | margin-right: 10px; |
| | | font-weight: bold; |
| | | font-size: 44px; |
| | | height: 48px; |
| | | line-height: 50px; |
| | | font-weight: bold; |
| | | color: #00F2F3; |
| | | letter-spacing: 3px; |
| | | background-image: -webkit-linear-gradient(top, |
| | | #1cdafb 0%, |
| | | #0177FE 70%, |
| | | #0177FE 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | .unit_wrap { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .icon { |
| | | width: 10px; |
| | | height: 12px; |
| | | margin-right: 6px; |
| | | margin-left: 4px; |
| | | } |
| | | } |
| | | |
| | | .train_wrap { |
| | | display: flex; |
| | | height: 40px; |
| | | margin-top: 18px; |
| | | |
| | | .icon_wrap { |
| | | width: 40px; |
| | | height: 40px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin-right: 4px; |
| | | border: 1px solid; |
| | | background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%); |
| | | border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1; |
| | | |
| | | img { |
| | | width: 26px; |
| | | } |
| | | } |
| | | |
| | | .total { |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 0 20px; |
| | | font-size: 16px; |
| | | border: 1px solid; |
| | | border-image: linear-gradient(180deg, rgba(177, 210, 255, 0.64), rgba(0, 171, 255, 0.7)) 1 1; |
| | | background: linear-gradient(180deg, rgba(0, 148, 235, 0.68) 0%, rgba(0, 148, 235, 0) 100%); |
| | | |
| | | .unit { |
| | | margin-left: 5px; |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .left_box_two { |
| | | margin-bottom: 20px; |
| | | |
| | | .energy_wrap { |
| | | width: 100%; |
| | | height: 250px; |
| | | |
| | | .energyRef { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .left_box_three { |
| | | .list_wrap { |
| | | padding: 10px 0; |
| | | |
| | | .list_temp { |
| | | height: 210px !important; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .list { |
| | | .line { |
| | | display: flex; |
| | | 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); |
| | | } |
| | | |
| | | .item { |
| | | flex: 5; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .flag { |
| | | flex: 3; |
| | | display: flex; |
| | | |
| | | span { |
| | | width: 22px; |
| | | height: 22px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 50%; |
| | | background: #00F2F3; |
| | | font-weight: 500; |
| | | color: #001B3C; |
| | | } |
| | | |
| | | .flag_bg { |
| | | background: #4eacf6; |
| | | } |
| | | } |
| | | |
| | | .status { |
| | | color: #FEAF01; |
| | | } |
| | | |
| | | .addr { |
| | | flex: 8; |
| | | |
| | | } |
| | | |
| | | .time { |
| | | flex: 6; |
| | | margin-left: 6px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .center_box { |
| | | flex: 1; |
| | | padding: 16px 60px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .center_box_one { |
| | | height: 190px; |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .tab { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 30px; |
| | | cursor: pointer; |
| | | |
| | | img { |
| | | width: 20px; |
| | | height: 20px; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | font-size: 20px; |
| | | font-weight: 600; |
| | | color: #D2E0FF; |
| | | } |
| | | |
| | | .active { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #eec05f 60%, |
| | | #eec05f 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | } |
| | | |
| | | .static_wrap { |
| | | display: flex; |
| | | align-items: center; |
| | | margin: 30px 0 54px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | justify-content: center; |
| | | flex: 1; |
| | | |
| | | img { |
| | | width: 68px; |
| | | height: 71px; |
| | | margin-right: 15px; |
| | | } |
| | | |
| | | .content { |
| | | font-size: 15px; |
| | | |
| | | .num { |
| | | font-size: 12px; |
| | | color: #D2E0FF; |
| | | |
| | | span { |
| | | font-weight: bold; |
| | | font-size: 30px; |
| | | margin-right: 5px; |
| | | font-weight: 600; |
| | | background-image: -webkit-linear-gradient(top, |
| | | #01D9FE 0%, |
| | | #01D9FE 60%, |
| | | #fff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | .today { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #20FFC5 50%, |
| | | #20FFC5 100%); |
| | | } |
| | | |
| | | .finish { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #FFB120 50%, |
| | | #FFB120 100%); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .center_box_two { |
| | | flex: 1; |
| | | width: 100%; |
| | | position: relative; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right_box { |
| | | width: 440px; |
| | | |
| | | .right_box_one { |
| | | margin-bottom: 20px; |
| | | |
| | | .static_wrap { |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | height: 140px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | img { |
| | | width: 80px; |
| | | height: 80px; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | .content { |
| | | font-size: 14px; |
| | | |
| | | .num { |
| | | font-size: 12px; |
| | | color: #D2E0FF; |
| | | margin-top: 8px; |
| | | |
| | | span { |
| | | font-weight: bold; |
| | | font-size: 24px; |
| | | margin-right: 4px; |
| | | font-weight: 600; |
| | | background-image: -webkit-linear-gradient(top, |
| | | #01D9FE 0%, |
| | | #01D9FE 60%, |
| | | #fff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | .today { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #20FFC5 50%, |
| | | #20FFC5 100%); |
| | | } |
| | | |
| | | .finish { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #FFB120 50%, |
| | | #FFB120 100%); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right_box_two { |
| | | .content { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 200px; |
| | | |
| | | .echart_wrap { |
| | | position: relative; |
| | | |
| | | .pie_text { |
| | | width: 104px; |
| | | height: 104px; |
| | | border: 1px dashed; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | |
| | | left: 50%; |
| | | top: 50%; |
| | | transform: translate(-50%, -50%); |
| | | z-index: 999; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | |
| | | .fs30 { |
| | | font-size: 30px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .echart { |
| | | width: 140px; |
| | | height: 140px; |
| | | } |
| | | |
| | | .list { |
| | | margin-left: 36px; |
| | | |
| | | .item { |
| | | margin-bottom: 14px; |
| | | font-size: 14px; |
| | | |
| | | &:nth-last-child(1) { |
| | | margin: 0; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 6px; |
| | | |
| | | .icon { |
| | | width: 12px; |
| | | height: 12px; |
| | | border-radius: 50%; |
| | | margin-right: 10px; |
| | | background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%); |
| | | } |
| | | } |
| | | |
| | | .num { |
| | | margin-left: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right_box_three { |
| | | .repertory { |
| | | .header { |
| | | padding: 15px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | margin-bottom: 11px; |
| | | |
| | | .num { |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #FFFFFF; |
| | | } |
| | | } |
| | | |
| | | .list { |
| | | margin-top: 22px; |
| | | height: 216px; |
| | | overflow: hidden; |
| | | scrollbar-width: none; |
| | | |
| | | .item { |
| | | width: 100%; |
| | | height: 36px !important; |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | background: rgba(0, 152, 255, 0.13); |
| | | } |
| | | |
| | | .la { |
| | | flex: 5; |
| | | padding-left: 20px; |
| | | } |
| | | |
| | | .val { |
| | | flex: 2; |
| | | } |
| | | } |
| | | |
| | | .orange { |
| | | color: #FF5728; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 90px; |
| | | position: relative; |
| | | padding: 0px 40px 16px; |
| | | font-weight: 600; |
| | | font-size: 36px; |
| | | |
| | | .title { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 70%, |
| | | #85b4ff 80%, |
| | | #74a9ff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | |
| | | .time_wrap { |
| | | font-size: 26px; |
| | | font-weight: 600; |
| | | background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 50%, |
| | | #85b4ff 80%, |
| | | #74a9ff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .time { |
| | | width: 130px; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | font-size: 30px; |
| | | } |
| | | |
| | | .week { |
| | | margin-left: 20px; |
| | | } |
| | | } |
| | | |
| | | .main_header_bg { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | z-index: -1; |
| | | } |
| | | } |
| | | |
| | | .com_header { |
| | | height: 40px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 15px 0 13px; |
| | | position: relative; |
| | | |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 66%, |
| | | #85b4ff 72%, |
| | | #74a9ff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | |
| | | .icon { |
| | | width: 16px; |
| | | height: 16px; |
| | | margin-right: 14px; |
| | | } |
| | | } |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #d2e0ff; |
| | | |
| | | .separate { |
| | | width: 1px; |
| | | height: 14px; |
| | | background-color: #d2e0ff; |
| | | margin: 0 6px; |
| | | } |
| | | |
| | | .tab { |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | color: #0094eb; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_app { |
| | | width: 1920px; |
| | | height: 960px; |
| | | /* width: 100%; |
| | | height: 100vh; */ |
| | | background: #0b2539; |
| | | color: #FFFFFF; |
| | | position: relative; |
| | | z-index: -2; |
| | | font-size: 14px; |
| | | |
| | | .main_bg { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | z-index: -1; |
| | | } |
| | | } |
| | | |
| | | .modal { |
| | | width: 600px; |
| | | height: 556px; |
| | | background: rgba(0, 30, 63, 0.5); |
| | | backdrop-filter: blur(5px); |
| | | position: fixed; |
| | | top: 20%; |
| | | left: 50%; |
| | | transform: translate(-50%, 0); |
| | | z-index: 999; |
| | | padding: 24px; |
| | | |
| | | .title_head { |
| | | display: flex; |
| | | align-items: center; |
| | | font-weight: bold; |
| | | font-size: 17px; |
| | | margin-bottom: 20px; |
| | | |
| | | img { |
| | | width: 20px; |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | .info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | width: 55%; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | width: 45%; |
| | | } |
| | | |
| | | .dian { |
| | | width: 4px; |
| | | height: 4px; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .la { |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tabs { |
| | | display: flex; |
| | | border-bottom: 1px solid rgba(255, 255, 255, 0.16); |
| | | margin: 0 -24px; |
| | | margin-bottom: 20px; |
| | | padding-left: 12px; |
| | | |
| | | .tab { |
| | | color: #869CC9; |
| | | font-size: 14px; |
| | | margin-right: 12px; |
| | | width: 80px; |
| | | height: 42px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border-bottom: 2px solid #06182e; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #00F2F3; |
| | | border-bottom: 2px solid #00F2F3; |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | |
| | | &:nth-last-child(1) { |
| | | .content { |
| | | .time { |
| | | padding-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .icon_wrap { |
| | | width: 24px; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .dian { |
| | | width: 12px; |
| | | height: 12px; |
| | | } |
| | | |
| | | .dian_ac { |
| | | width: 24px; |
| | | height: 24px; |
| | | } |
| | | |
| | | .line { |
| | | width: 1px; |
| | | height: 100%; |
| | | border: 1px dashed #8a9bc5; |
| | | } |
| | | } |
| | | |
| | | .content { |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | |
| | | .status { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | margin-bottom: 5px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .ac { |
| | | color: #00F2F3; |
| | | } |
| | | |
| | | .text { |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .time { |
| | | font-size: 12px; |
| | | padding-bottom: 12px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tab2 { |
| | | height: 360px; |
| | | overflow: auto; |
| | | |
| | | .list { |
| | | .item { |
| | | width: 560px; |
| | | background: rgba(1, 171, 254, 0.1); |
| | | font-size: 12px; |
| | | 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); |
| | | margin-bottom: 10px; |
| | | padding-right: 10px; |
| | | |
| | | .code { |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #00F2F3; |
| | | } |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-last-child(1) { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .name { |
| | | flex: 4; |
| | | } |
| | | |
| | | .num { |
| | | flex: 3; |
| | | } |
| | | |
| | | .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 { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | z-index: -1; |
| | | } |
| | | </style> |