| | |
| | | </div> |
| | | <div class="search_wrap"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt=""> |
| | | <input class="input" type="text" @blur="getData2" v-model="taskCode"> |
| | | <input class="input" type="text" placeholder="订单查询" @keyup.enter="getData2" @blur="getData2" |
| | | v-model="taskCode"> |
| | | <!-- <span>订单查询</span> --> |
| | | </div> |
| | | </div> |
| | |
| | | <span class="item">位置</span> |
| | | <span class="item">任务下达时间</span> |
| | | </div> |
| | | <div class="line" v-for="(item, i) in transportTask" :key="i"> |
| | | <span class="item">{{ item.carNo }}</span> |
| | | <span class="item">{{ item.statusStr }}</span> |
| | | <span class="item">{{ item.address }}</span> |
| | | <span class="item">{{ item.taskDate }}</span> |
| | | <div class="one-swiper list"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="line one-swiper-slide swiper-slide item" @click="taskClick(item)" |
| | | v-for="(item, i) in transportTask" :key="i"> |
| | | <span class="item">{{ item.carNo }}</span> |
| | | <span class="item">{{ item.statusStr }}</span> |
| | | <span class="item">{{ item.address }}</span> |
| | | <span class="item">{{ item.taskDate }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <span>出库能力</span> |
| | | </div> |
| | | <div class="right"> |
| | | <img src="@/assets/images/LogisticsCenter/position.png" class="posi" alt=""> |
| | | <span>全省</span> |
| | | <img src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt=""> |
| | | </div> |
| | | <div class="select_op"> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | <div class="line">合肥仓</div> |
| | | <img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/position.png" class="posi" alt=""> |
| | | <span @click="showPro = !showPro">{{ activeCity.name }}</span> |
| | | <img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/bottom.png" class="icon" alt=""> |
| | | <div v-if="showPro" class="select_op"> |
| | | <div class="line" @click="cityClick(item)" v-for="item in cityList">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="static_wrap"> |
| | |
| | | <div class="echart_wrap"> |
| | | <div class="echart3" id="echart3"></div> |
| | | <div class="pie_text"> |
| | | <!-- <div class="fs30">{{ cneterData.PlanTotal }}%</div> --> |
| | | <div class="fs30">{{ cneterData.PlanTotal || 30 }}%</div> |
| | | </div> |
| | | </div> |
| | | <div class="text">计划完成量</div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- --> |
| | | <div class="modal_wrap" v-if="showModal"> |
| | | <div class="title_head"> |
| | | <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt=""> |
| | | <span>皖a222</span> |
| | | </div> |
| | | <div class="info"> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">运输单号:</div> |
| | | <div class="val">471342</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">司机信息:</div> |
| | | <div class="val">孙文武 17493932936</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">总运输量:</div> |
| | | <div class="val">22万支</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="dian"></div> |
| | | <div class="la">当前位置:</div> |
| | | <div class="val">安徽省合肥市包河区繁华大道123米处</div> |
| | | </div> |
| | | </div> |
| | | <div class="tabs"> |
| | | <div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">合同1:1231231</div> |
| | | <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">合同2:1231231</div> |
| | | </div> |
| | | <div class="ht_info"> |
| | | <div class="item"> |
| | | <div class="la">发货仓库:</div> |
| | | <div class="val">芜湖成品</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">预计到达:</div> |
| | | <div class="val">2024-12-04 14:00</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">到货地点:</div> |
| | | <div class="val">江门烟草物流配送中心</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">运输量:</div> |
| | | <div class="val">300万支</div> |
| | | </div> |
| | | </div> |
| | | <div class="tab1"> |
| | | <div class="title"> |
| | | <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt=""> |
| | | <span>物流信息</span> |
| | | </div> |
| | | <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> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="status">车辆启运-电子锁气运</div> |
| | | <div class="time">2024-04-02 12:00</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="modal_mask" v-if="showModal" @click="showModal = false"></div> |
| | | </div> |
| | | </v-scale-screen> |
| | | </template> |
| | |
| | | import Percent from '@/components/percent.vue' |
| | | import dayjs from 'dayjs' |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import chinaJSON from '@/assets/china.json' |
| | | import { |
| | | getStoreOperationList, |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: StockOutData.value |
| | | data: [3, 7] |
| | | } |
| | | ] |
| | | } |
| | |
| | | echarts.registerMap('china', chinaJSON) |
| | | var points = [ |
| | | // 点坐标 |
| | | { value: [110.81, 33.40], itemStyle: { color: '#c1bb1f' }, name: '北京', total: 0, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [116.55, 40.01], itemStyle: { color: '#3eef1d' }, name: '北京', total: 0, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [113.11, 28.40], itemStyle: { color: '#3eef1d' }, name: '北京', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [106.44, 29.50], itemStyle: { color: '#3eef1d' }, name: '北京', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [112.85, 38.95], itemStyle: { color: '#3eef1d' }, name: '北京', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [82.78, 43.27], itemStyle: { color: '#3eef1d' }, name: '北京', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | { value: [117.1582, 36.8701], itemStyle: { color: '#6ae5e0' }, name: '山东', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [117.29, 32.0581], itemStyle: { color: '#6ae5e0' }, name: '安徽', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 }, |
| | | { value: [114.3896, 30.6628], itemStyle: { color: '#6ae5e0' }, name: '湖北', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 }, |
| | | { value: [119.5313, 29.8773], itemStyle: { color: '#6ae5e0' }, name: '浙江', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 }, |
| | | { value: [113.12244, 23.009505], itemStyle: { color: '#6ae5e0' }, name: '广东', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 }, |
| | | { value: [103.9526, 30.7617], itemStyle: { color: '#6ae5e0' }, name: '四川', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 } |
| | | ] |
| | | var lineToLf = [ |
| | | { name: '11', coords: [[110.81, 33.40], [116.55, 40.01]], lineStyle: { color: '#c1bb1f' } }, |
| | | { name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } }, |
| | | { name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#3eef1d' } } |
| | | { name: '22', coords: [[113.11, 28.40], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '33', coords: [[106.44, 29.50], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '44', coords: [[112.85, 38.95], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } }, |
| | | { name: '55', coords: [[82.78, 43.27], [116.55, 40.01]], lineStyle: { color: '#6ae5e0' } } |
| | | ] |
| | | const option = { |
| | | backgroundColor: 'transparent', // 设置背景色透明 |
| | |
| | | }, |
| | | label: { |
| | | show: false, |
| | | triggerOn: 'click', |
| | | position: 'right', |
| | | formatter: '{b}', |
| | | color: '#97e9e1', |
| | |
| | | data: points, |
| | | tooltip: { |
| | | show: true, |
| | | triggerOn: 'click', |
| | | backgroundColor: 'rgba(0,0,0,0)', |
| | | padding: 0, |
| | | borderWidth: 0, |
| | |
| | | } |
| | | ] |
| | | }) |
| | | myChart.on('click', function (params) { |
| | | console.log(params.name) |
| | | |
| | | }) |
| | | window.addEventListener('resize', function () {//执行 |
| | | myChart.resize() |
| | | }) |
| | |
| | | |
| | | const transportTask = ref([]) |
| | | const taskCode = ref('') |
| | | const showModal = ref(false) |
| | | const modalInfo = ref({}) |
| | | const modalTab = ref(0) |
| | | const modalTabClick = (val) => { |
| | | modalTab.value = val |
| | | } |
| | | const taskClick = (item) => { |
| | | modalInfo.value = item |
| | | showModal.value = true |
| | | } |
| | | const getData2 = () => { |
| | | getStoreTaskList({ code: taskCode.value }).then(res => { |
| | | let temp = res.data || [] |
| | | temp = temp.splice(0, 5) |
| | | // temp = temp.splice(0, 5) |
| | | transportTask.value = temp.map(item => { |
| | | item.taskDate = item.taskDate.slice(5, 16) |
| | | return item |
| | | }) |
| | | loopFn1() |
| | | }) |
| | | } |
| | | |
| | | const cneterData = ref({}) |
| | | const showPro = ref(false) |
| | | const cityList = ref([ |
| | | { name: '全省', id: 0 }, |
| | | { name: '合肥仓', id: 1 }, |
| | | { name: '芜湖仓', id: 2 }, |
| | | { name: '滁州仓', id: 3 }, |
| | | { name: '蚌埠仓', id: 4 }, |
| | | ]) |
| | | const activeCity = ref({ name: '全省', id: 0 }) |
| | | const colors = ['#0193FE', '#FFB642'] |
| | | const StockOutData = ref([]) |
| | | const cityClick = (item) => { |
| | | activeCity.value = item |
| | | showPro.value = false |
| | | cneterData.value = {} |
| | | setTimeout(() => { |
| | | getData3() |
| | | }, 400) |
| | | } |
| | | const initEchart1 = () => { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | const option = { |
| | |
| | | }) |
| | | } |
| | | |
| | | 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: 5, |
| | | autoplay: autoplayFlag(transportTask.value, 5, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | |
| | | const initData = () => { |
| | | getData1() |
| | | getData2() |
| | |
| | | |
| | | initMap() |
| | | // initEchart2() |
| | | // initEchart3() |
| | | initEchart3() |
| | | // initEchart4() |
| | | // initEchart5() |
| | | window.addEventListener('click', () => { |
| | | |
| | | }) |
| | | }) |
| | | |
| | | |
| | |
| | | color: #D2E0FF; |
| | | font-size: 12px; |
| | | border: 1px solid #D2E0FF; |
| | | |
| | | .icon { |
| | | width: 12px; |
| | | height: 14px; |
| | |
| | | <style lang="scss" scoped> |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .swiper-wrapper { |
| | | display: block !important; |
| | | } |
| | | |
| | | .main_content { |
| | |
| | | } |
| | | |
| | | .list_wrap { |
| | | .list { |
| | | height: 200px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | height: 40px; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #D2E0FF; |
| | | cursor: pointer; |
| | | |
| | | &:nth-of-type(2n) { |
| | | background: rgba(134, 156, 201, 0.05); |
| | |
| | | font-weight: bold; |
| | | font-size: 18px; |
| | | position: relative; |
| | | &:hover{ |
| | | .select_op{ |
| | | display: block; |
| | | } |
| | | } |
| | | background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 66%, |
| | | #85b4ff 72%, |
| | | #74a9ff 100%); |
| | | |
| | | /* background-image: -webkit-linear-gradient(top, |
| | | #ffffff 0%, |
| | | #c8ddff 66%, |
| | | #85b4ff 72%, |
| | | #74a9ff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | -webkit-text-fill-color: transparent; */ |
| | | |
| | | .left { |
| | | display: flex; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | position: relative; |
| | | |
| | | .posi { |
| | | width: 16px; |
| | |
| | | margin-left: 2px; |
| | | } |
| | | } |
| | | .select_op{ |
| | | |
| | | .select_op { |
| | | position: absolute; |
| | | top: 26px; |
| | | right: 0px; |
| | | right: -10px; |
| | | width: 90px; |
| | | z-index: 11; |
| | | display: none; |
| | | background: radial-gradient( 64% 83% at 50% 50%, rgba(19,88,173,0.8) 0%, rgba(5,18,32,0.86) 100%); |
| | | .line{ |
| | | z-index: 1199999; |
| | | background: radial-gradient(64% 83% at 50% 50%, rgba(19, 88, 173, 0.8) 0%, rgba(5, 18, 32, 0.86) 100%); |
| | | color: #fff; |
| | | |
| | | .line { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 36px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | color: #fff; |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | .modal_wrap { |
| | | width: 600px; |
| | | height: 556px; |
| | | background: rgba(0, 30, 63, 0.5); |
| | | border: 1px solid #c6eef7; |
| | | 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-left: 12px; |
| | | 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; |
| | | } |
| | | } |
| | | |
| | | .ht_info { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | padding: 10px 10px 0; |
| | | background-color: #0d2845; |
| | | margin-bottom: 20px; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | width: 55%; |
| | | margin-bottom: 8px; |
| | | |
| | | &:nth-of-type(2n+1) { |
| | | width: 45%; |
| | | } |
| | | |
| | | .la { |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tab1 { |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | font-style: 16px; |
| | | font-weight: 600; |
| | | margin-bottom: 20px; |
| | | |
| | | img { |
| | | width: 24px; |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | .item { |
| | | display: flex; |
| | | margin-left: 6px; |
| | | |
| | | &: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; |
| | | } |
| | | |
| | | .text { |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .time { |
| | | font-size: 12px; |
| | | padding-bottom: 12px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .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; */ |
| | | } |
| | | |
| | | .second_title { |
| | | height: 24px; |
| | | display: flex; |