<template>
|
<v-scale-screen width="1920" height="960">
|
<div class="main_app">
|
<img src="@/assets/images/LogisticsCenter/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="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="left_box_one">
|
<Loading v-if="loading1" />
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>累计出库量(箱)</div>
|
<div class="question">
|
<img src="@/assets/images/ic_question@2x.png" style="margin-left: 6px;" class="icon" alt="">
|
<div class="hover_wrap">
|
<div class="triangle"></div>
|
<div class="title">累计出库量统计说明：</div>
|
<div>累计出库量：所有物流出库作业数据（包含联营加工（回运、落地销售）、前置库移库(成都/临沂)等所有出库作业数据）</div>
|
</div>
|
</div>
|
</div>
|
<div class="tabs">
|
<div class="tab" :class="{ active: activeTab1 == 1 }" @click="tab1Click(1)">本周</div>
|
<div class="separate"></div>
|
<div class="tab" :class="{ active: activeTab1 == 0 }" @click="tab1Click(0)">本月</div>
|
<div class="separate"></div>
|
<div class="tab" :class="{ active: activeTab1 == 2 }" @click="tab1Click(2)">本年</div>
|
</div>
|
</div>
|
<div class="content_wrap">
|
<div class="num_wrap">
|
<div class="question1">
|
<div class="hover_con">
|
<div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
|
<div class="num" v-for="i in StockOutData.currentNum + ''">
|
{{ i }}
|
<img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
|
</div>
|
</div>
|
<div class="hover_wrap">
|
<div class="triangle"></div>
|
<div class="title" v-if="StockOutData.currentProvinceNum || StockOutData.currentProvinceNum == 0">
|
调拨出库量：{{ StockOutData.currentProvinceNum.toFixed(0) }}箱</div>
|
<div class="title" v-if="StockOutData.currentOtherNum || StockOutData.currentOtherNum == 0">
|
其他出库量：{{ StockOutData.currentOtherNum.toFixed(0) }}箱</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="content">
|
<div class="unit_wrap">
|
<span class="la">同比</span>
|
<template v-if="StockOutData.sameOutNum">
|
<img v-if="StockOutData.currentOutNum >= StockOutData.sameOutNum" src="@/assets/images/ic_up.png"
|
class="icon" alt="">
|
<img v-else src="@/assets/images/ic_down.webp" class="icon" alt="">
|
</template>
|
<span v-if="StockOutData.sameOutNum">{{ Math.abs((((StockOutData.currentOutNum
|
-
|
StockOutData.sameOutNum) /
|
StockOutData.sameOutNum)
|
* 100).toFixed(2)) }}%</span>
|
<span v-else style="margin-left: 6px;">-</span>
|
<span v-if="StockOutData.totalCarNum" class="la" style="margin-left: 30px;margin-right: 10px;">累计出库车次</span>
|
<span>{{ StockOutData.totalCarNum || '' }}</span>
|
</div>
|
|
</div>
|
</div>
|
<div class="echart_wrap">
|
<div class="echart1" id="echart1"></div>
|
<div class="list">
|
<div class="item" v-for="item, i in StockOutData.arr" :key="i">
|
<div :style="{ background: colors[i] }" class="icon"></div>
|
<div class="text">{{ item.name }}</div>
|
<div class="num">{{ item.rate }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="left_box_two">
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>近7日到货情况</div>
|
</div>
|
</div>
|
<div class="energy_wrap">
|
<div class="energyRef"></div>
|
</div>
|
</div>
|
<div class="left_box_three">
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>当前订单任务</div>
|
</div>
|
<div class="search_wrap">
|
<img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
|
<input class="input" type="text" placeholder="订单查询" @keyup.enter="getData2" @blur="getData2"
|
v-model="taskCode">
|
<!-- <span>订单查询</span> -->
|
</div>
|
</div>
|
<div class="list_wrap">
|
<div class="header line">
|
<span class="item">合同号</span>
|
<span class="item status">订单状态</span>
|
<span class="item">目的地</span>
|
<span class="item">任务下达时间</span>
|
</div>
|
<div class="one-swiper list">
|
<div class="swiper-wrapper">
|
<div :class="{ avtive: modalInfo.contractNumber == item.contractNumber }"
|
class="line one-swiper-slide swiper-slide item" @click="taskClick(item)"
|
v-for="(item, i) in transportTask" :key="i">
|
<span class="item">{{ item.contractNumber }}</span>
|
<span class="item status">{{ item.statusDesc }}</span>
|
<span class="item">{{ item.receiveEnterprise }}</span>
|
<span class="item">{{ item.createDate || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
<template v-if="isLoadingTask || transportTask.length == 0">
|
<Loading v-if="isLoadingTask" />
|
<div class="empty" v-else>
|
<img src="@/assets/images/default_nodata.png" alt="">
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div class="center_box">
|
<div class="center_box_one">
|
<div class="header_wrap">
|
<div class="left">
|
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
|
<span>出库能力</span>
|
<div class="question">
|
<img src="@/assets/images/ic_question@2x.png" style="margin-left: 4px;" class="icon" alt="">
|
<div class="hover_wrap">
|
<div class="triangle"></div>
|
<div class="title">出库能力统计说明：</div>
|
<div>1、当前订单量：截至目前未配载的订单量</div>
|
<div>2、当前任务量：所有已下达运输且未出库的任务量：截止目前已配载未出库+无需配载的任务(同城任务量)</div>
|
<div>3、今日出库量：今日实际出库量：以电子锁上锁为准</div>
|
<div>4、剩余任务量：数据同当前任务量（弹窗分别展示同库和运输任务量</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<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="item">
|
<img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
|
<div class="content">
|
<div class="name">当前订单量</div>
|
<div class="num"><span class="blue"
|
v-if="cneterData.currentOrderNum || cneterData.currentOrderNum == 0">{{
|
cneterData.currentOrderNum }}</span>箱</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2.png" alt="">
|
<div class="content">
|
<div class="name">当前任务量</div>
|
<div class="num"><span v-if="cneterData.currentPlanNum || cneterData.currentPlanNum == 0">{{
|
cneterData.currentPlanNum }}</span>箱</div>
|
<div class="unit">车次：{{ cneterData.currentPlanCarNum }}</div>
|
</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt="">
|
<div class="content">
|
<div class="name">今日出库量</div>
|
<div class="num"><span v-if="cneterData.crrentOutNum || cneterData.crrentOutNum == 0"
|
class="finish">{{
|
cneterData.crrentOutNum }}</span>箱</div>
|
<div class="unit">车次：{{ cneterData.crrentOutCarNum }}</div>
|
</div>
|
</div>
|
<div class="tooltip_wrap">
|
<div class="item">
|
<img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
|
<div class="content">
|
<div class="name">剩余任务量</div>
|
<div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
|
class="today">{{
|
cneterData.crrentRestNum }}</span>箱</div>
|
<div class="unit">车次：{{ cneterData.crrentRestCarNum }}</div>
|
</div>
|
</div>
|
<div class="tooltip">
|
<div class="triangle"></div>
|
<div>运输任务量：{{ cneterData.needTransportOrderNum }}箱</div>
|
<div>同城共库任务量：{{ cneterData.noNeedTransportOrderNum }}箱</div>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
<div class="wrap">
|
<div class="content" :style='{ width: cneterData.level1 }'>
|
<div class="scale">0</div>
|
<!-- <div class="node">
|
<div>8h</div>
|
<div class="node_icon">
|
<div class="icon icon1"></div>
|
<div class="icon icon2"></div>
|
</div>
|
</div> -->
|
<div :style="{ width: cneterData.level3 }"
|
:class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box">
|
<div class="tooltip_wrap">
|
<div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
|
<div class="icon"></div>
|
<span>今日出库</span>
|
</div>
|
<div class="tooltip">
|
<div class="triangle"></div>今日出库量：{{ cneterData.crrentOutNum }}箱
|
</div>
|
</div>
|
</div>
|
<div :style="{ width: cneterData.level2 }" class="box box1">
|
<div class="tooltip_wrap">
|
<div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
|
<div class="icon"></div>
|
<span>当前任务</span>
|
</div>
|
<div class="tooltip">
|
<div class="triangle"></div>当前任务量：{{ cneterData.currentPlanNum }}箱
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="side">
|
<div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{ width: cneterData.level33 }"
|
class="box box22">
|
<div class="tooltip_wrap">
|
<div class="tag">
|
<div class="icon"></div>
|
<span>今日出库</span>
|
</div>
|
<div class="tooltip">
|
<div class="triangle"></div>今日出库量：{{ cneterData.crrentOutNum }}箱
|
</div>
|
</div>
|
</div>
|
<div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
|
:style="{ width: cneterData.level22 }" class="box box1 box11">
|
<div class="tooltip_wrap">
|
<div class="tag tag1">
|
<div class="icon"></div>
|
<span>当前任务</span>
|
</div>
|
<div class="tooltip">
|
<div class="triangle"></div>当前任务量：{{ cneterData.currentPlanNum }}箱
|
</div>
|
</div>
|
</div>
|
<!-- <div class="box"></div> -->
|
<div class="scale" style="left: -12px;">
|
<div class="tooltip_wrap">
|
<span>8h</span>
|
<div class="tooltip">
|
<div class="triangle"></div>8小时出库能力：{{ cneterData.hoursAbility }}箱
|
</div>
|
</div>
|
</div>
|
<div class="scale scale1">
|
<div class="tooltip_wrap">
|
<span>最大</span>
|
<div class="tooltip">
|
<div class="triangle"></div>最大出库能力：{{ cneterData.maxAbility }}箱
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center_box_two">
|
<div class="echart_map" ref="mapEchart" id="echart_map"></div>
|
<div v-if="showModal1" class="modal1">
|
<div class="content">
|
<div class="head line">
|
<div class="item">车牌号</div>
|
<div class="item">合同号</div>
|
<div class="item addr">目的地</div>
|
</div>
|
<div class="list">
|
<div class="line" v-for="item in active1List">
|
<div class="item">{{ item.platNumber }}</div>
|
<div class="item">{{ item.contractNumber }}</div>
|
<div class="item addr">{{ item.repertotyName }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="list">
|
<div class="item">
|
<div class="icon"></div>
|
<div class="text">出库量10w以上</div>
|
</div>
|
<div class="item">
|
<div class="icon icon2"></div>
|
<div class="text">出库量5-10w</div>
|
</div>
|
<div class="item">
|
<div class="icon icon3"></div>
|
<div class="text">出库量2-5w</div>
|
</div>
|
<div class="item">
|
<div class="icon icon4"></div>
|
<div class="text">出库量2w以下</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<div class="right_box">
|
<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="right_box_three">
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>仓库资源利用率</div>
|
</div>
|
<div class="side">
|
全省：
|
<span>{{ data5.currentNum }}</span>
|
<span class="unit">箱 | </span>
|
<span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span>
|
</div>
|
</div>
|
<div class="echart5_wrap">
|
<div class="echart5" id="echart5"></div>
|
</div>
|
</div>
|
<div class="right_box_three">
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>出库能力利用率</div>
|
</div>
|
<div class="side">
|
全省：
|
<span>{{ data6.currentNum }}</span>
|
<span class="unit">箱 | </span>
|
<span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span>
|
</div>
|
</div>
|
<div class="echart5_wrap">
|
<div class="echart5" id="echart6"></div>
|
</div>
|
</div>
|
<div class="right_box_three">
|
<div class="second_title">
|
<div class="title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
|
<div>运力资源利用率</div>
|
</div>
|
<div class="side">
|
全省：
|
<span>{{ data7.currentNum }}</span>
|
<span class="unit">辆 | </span>
|
<span v-if="data7.totalNum">{{ (data7.useRate * 100).toFixed(1) }}%</span>
|
</div>
|
</div>
|
<div class="echart5_wrap">
|
<div class="echart5" id="echart7"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- -->
|
<div class="modal_wrap" v-if="showModal">
|
<div class="title_head">
|
<div class="left">
|
<img src="@/assets/images/LogisticsCenter/ic_hetong.png" alt="">
|
<span>合同号：{{ modalInfo.contractNumber }}</span>
|
</div>
|
<div class="tit_status">{{ modalInfo.orderStatusDesc }}</div>
|
</div>
|
<div v-if="modalInfo.overStock && modalInfo.overStock == 1" class="stock">
|
<img src="@/assets/images/LogisticsCenter/ic_tips@2x.png" alt="">
|
<span>因库存不足，订单暂时无法配载</span>
|
</div>
|
<div class="info">
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">司机信息：</div>
|
<div class="val">{{ modalInfo.driverName }} {{ modalInfo.driverTel }}</div>
|
</div>
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">车牌号：</div>
|
<div class="val">{{ modalInfo.plateName }}</div>
|
</div>
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">发货地点：</div>
|
<div class="val">{{ modalInfo.deliveryEnterprise }}</div>
|
</div>
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">到货地点：</div>
|
<div class="val">{{ modalInfo.receiveEnterprise }}</div>
|
</div>
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">车辆位置：</div>
|
<div class="val">{{ modalInfo.position || '-' }}</div>
|
</div>
|
<div class="item">
|
<div class="dian"></div>
|
<div class="la">预计到达：</div>
|
<div class="val" v-if="modalInfo.plannedArrivedDate">{{ modalInfo.plannedArrivedDate.slice(0, 11) }}</div>
|
</div>
|
</div>
|
<div class="logistics_wrap">
|
<div class="m_title">
|
<img src="@/assets/images/LogisticsCenter/ic_title@2x.png" alt="">
|
<span>物流信息</span>
|
</div>
|
<div id="map-container" ref="mapContainer"></div>
|
<div class="fu_list">
|
<div class="fu_item" v-for="item, k in modalInfo.cicleStatusList">
|
<view v-if="k != modalInfo.cicleStatusList.length - 1" class="separate"></view>
|
<div class="item_title">
|
<div class="icon">
|
<img v-if="item.key == 0 && k != 0" src="@/assets/images/LogisticsCenter/ic_dingdan@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 0 && k == 0" src="@/assets/images/LogisticsCenter/ic_dingdan_sel@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 1 && k != 0" src="@/assets/images/LogisticsCenter/ic_peizai@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 1 && k == 0" src="@/assets/images/LogisticsCenter/ic_peizai_sel@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 2 && k != 0" src="@/assets/images/LogisticsCenter/ic_cangku@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 2 && k == 0" src="@/assets/images/LogisticsCenter/ic_cangku_sel@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 3 && k != 0" src="@/assets/images/LogisticsCenter/ic_yunshu@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 3 && k == 0" src="@/assets/images/LogisticsCenter/ic_yunshu_sel@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 4 && k != 0" src="@/assets/images/LogisticsCenter/ic_daohuo@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 4 && k == 0" src="@/assets/images/LogisticsCenter/ic_daohuo_sel@2x.png"
|
class="icon"></img>
|
<img v-if="item.key == 5" src="@/assets/images/LogisticsCenter/ic_dangqian@2x.png" class="icon"></img>
|
</div>
|
<div>{{ item.name }}</div>
|
</div>
|
<div class="item" v-for="ite, i in item.secondList">
|
<div class="h2" v-if="ite.orderStatusDes">
|
<div class="icon_wrap" v-if="i != 0">
|
<image src="@/static/driver/ic_mostarted.png" class="icon"></image>
|
</div>
|
<div v-else class="icon_wrap"></div>
|
<div class="text" :class="{ placeholder3: k == 0 && i == 0 }">
|
{{ ite.orderStatusDes }}
|
<text v-if="ite.tel">,发货仓库电话：</text>
|
<text v-if="ite.tel" class="primaryColor">{{ ite.tel }}</text>
|
</div>
|
</div>
|
<div class="time">{{ ite.recordDate }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Loading v-if="modalLoading" />
|
</div>
|
<div class="modal_mask" v-if="showModal || showModal1" @click="closeModal"></div>
|
</div>
|
</v-scale-screen>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, nextTick } from 'vue'
|
import VScaleScreen from 'v-scale-screen'
|
import Percent from '@/components/percent.vue'
|
import dayjs from 'dayjs'
|
import axios from "axios"
|
import * as echarts from 'echarts'
|
import 'swiper/css/swiper.min.css'
|
import Swiper from 'swiper'
|
import Map from '@/components/Map.vue'
|
import chinaJSON from '@/assets/china.json'
|
import fahuoImg from '@/assets/images/LogisticsCenter/ic_fahuodi@2x.png'
|
import shouImg from '@/assets/images/LogisticsCenter/ic_huowu@2x.png'
|
// import Loading from 'vue-loading-overlay'
|
// import 'vue-loading-overlay/dist/css/index.css'
|
import Loading from '@/components/Loading.vue'
|
|
import {
|
getStoreOperationList,
|
getStorecenterData,
|
getStoreenergyDataList,
|
getStorelastMonthOil,
|
getStoreTaskList,
|
|
kztotalOutQtyNum,
|
kzorderInfo,
|
mapYearAndMonthOutList,
|
kzinventoryUseRate,
|
outAbilityUseRate,
|
tranportAbilityUseRate,
|
kzfactoryList,
|
arriveGoodsList
|
} from '@/api'
|
|
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 mapList = ref([])
|
const mapEchart = ref()
|
const initMap = () => {
|
var myChart = echarts.init(mapEchart.value)
|
echarts.registerMap('china', chinaJSON)
|
var points = [
|
// 点坐标
|
{ value: [117.1582, 36.8701, 100], itemStyle: { color: '#6ae5e0' }, name: '山东', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
|
{ value: [117.29, 32.0581, 90], itemStyle: { color: '#6ae5e0' }, name: '安徽', total: 2, bj: 0, yj: 0, yx: 0, tj: 0, dw: 0 },
|
{ value: [114.3896, 30.6628, 1999], itemStyle: { color: '#6ae5e0' }, name: '湖北', total: 5, bj: 0, yj: 0, yx: 5, tj: 0, dw: 0 },
|
{ value: [119.5313, 29.8773, 2], itemStyle: { color: '#6ae5e0' }, name: '浙江', total: 10, bj: 0, yj: 0, yx: 10, tj: 0, dw: 0 },
|
{ value: [113.12244, 23.009505, 12], itemStyle: { color: '#6ae5e0' }, name: '广东', total: 8, bj: 0, yj: 0, yx: 8, tj: 0, dw: 0 },
|
{ value: [103.9526, 30.7617, 1901], itemStyle: { color: '#fff' }, name: '四川', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 }
|
]
|
const mapData = [
|
{ name: '北京市', code: '110000', value: 0 },
|
{ name: '天津市', code: '120000', value: 0 },
|
{ name: '上海市', code: '310000', value: 0 },
|
{ name: '重庆市', code: '500000', value: 0 },
|
{ name: '河北省', code: '130000', value: 0 },
|
{ name: '河南省', code: '410000', value: 0 },
|
{ name: '云南省', code: '530000', value: 0 },
|
{ name: '辽宁省', code: '210000', value: 0 },
|
{ name: '黑龙江省', code: '230000', value: 0 },
|
{ name: '湖南省', code: '430000', value: 0 },
|
{ name: '安徽省', code: '340000', value: 0 },
|
{ name: '山东省', code: '370000', value: 0 },
|
{ name: '新疆维吾尔自治区', code: '650000', value: 0 },
|
{ name: '江苏省', code: '320000', value: 0 },
|
{ name: '浙江省', code: '330000', value: 0 },
|
{ name: '江西省', code: '360000', value: 0 },
|
{ name: '湖北省', code: '420000', value: 0 },
|
{ name: '广西壮族自治区', code: '450000', value: 0 },
|
{ name: '甘肃省', code: '620000', value: 0 },
|
{ name: '山西省', code: '140000', value: 0 },
|
{ name: '内蒙古自治区', code: '150000', value: 0 },
|
{ name: '陕西省', code: '610000', value: 0 },
|
{ name: '吉林省', code: '220000', value: 0 },
|
{ name: '福建省', code: '350000', value: 0 },
|
{ name: '贵州省', code: '520000', value: 0 },
|
{ name: '广东省', code: '440000', value: 0 },
|
{ name: '青海省', code: '630000', value: 0 },
|
{ name: '西藏自治区', code: '540000', value: 0 },
|
{ name: '宁夏回族自治区', code: '640000', value: 0 },
|
{ name: '四川省', code: '510000', value: 0 },
|
{ name: '宁夏省', code: '640000', value: 0 },
|
{ name: '海南省', code: '460000', value: 0 },
|
{ name: '台湾省', code: '710000', value: 0 },
|
{ name: '香港特别行政区', code: '810000', value: 0 },
|
{ name: '澳门特别行政区', code: '820003', value: 0 },
|
{ name: '南海诸岛', code: '', value: 0 },
|
]
|
let totalNum = 0
|
mapList.value.forEach(i => {
|
totalNum += i.yearNum
|
})
|
mapData.forEach(item => {
|
item.monthNum = 0
|
item.yearNum = 0
|
mapList.value.forEach(ite => {
|
if (item.code == ite.code) {
|
item.value = 0
|
item.monthNum = ite.monthNum
|
item.yearNum = ite.yearNum
|
if (totalNum > 0) {
|
item.rate = ((ite.yearNum / totalNum) * 100).toFixed(2)
|
item.value = (ite.yearNum / totalNum).toFixed(4)
|
|
}
|
}
|
})
|
})
|
|
const option = {
|
//数据分段
|
visualMap: {
|
type: 'piecewise',
|
pieces: [
|
{ min: 0.05, max: 99999999999, label: '调拨量占比5%以上', color: '#be6f2b' },
|
{ min: 0.02, max: 0.05, label: '调拨量占比2%~5%', color: '#c39332' },
|
{ min: 0.01, max: 0.02, label: '调拨量占比1%~2%', color: '#5ecbaf' },
|
{ min: -1, max: 0.01, label: '调拨量占比1%以下', color: '#3561a4' },
|
// { min: 100000, max: 99999999999, label: '出库量10w以上', color: '#be6f2b' },
|
// { min: 50000, max: 100000, label: '出库量5-10w', color: '#c39332' },
|
// { min: 20000, max: 50000, label: '出库量2-5w', color: '#5ecbaf' },
|
// { min: -1, max: 20000, label: '出库量2w以下', color: '#3561a4' },
|
],
|
itemWidth: 22,
|
itemHeight: 22,
|
textStyle: {
|
color: '#fff', // 文本颜色
|
fontSize: 14, // 字体大小
|
},
|
},
|
// 悬浮窗
|
tooltip: {
|
trigger: 'item',
|
backgroundColor: 'rgba(0,0,0,0.8)', //设置背景图片 rgba格式
|
color: '#fff',
|
borderWidth: '1', //边框宽度设置1
|
borderColor: 'gray', //设置边框颜色
|
textStyle: {
|
color: '#fff', //设置文字颜色
|
},
|
extraCssText: 'width:120px;height:40px', // 设置提示框宽高等css样式
|
formatter: function (params) {
|
return `${params.name}: <br /> ${params.value || 0}辆`
|
},
|
},
|
geo: {
|
// 这个是重点 —— 这里设置为地图的阴影
|
map: 'china', // 表示中国地图
|
roam: false, // 禁止拖拽
|
label: {
|
// 标志信息
|
show: false, // 是否显示对应地名
|
},
|
silent: true, // 禁止hover效果
|
zoom: 1.4, // 地图比例
|
aspectScale: 0.9, // 比例
|
center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
|
itemStyle: {
|
areaColor: '#152e4a', //地图阴影的颜色
|
borderColor: '#779dc8', // 省份边框颜色
|
borderWidth: 0.5, // 省份边框宽度
|
// shadowBlur: 5, // 省份边框聚焦
|
},
|
emphasis: {
|
show: false,
|
},
|
//地图的阴影不显示南沙诸岛
|
regions: [
|
{
|
name: '南海诸岛',
|
itemStyle: {
|
// 隐藏地图
|
normal: {
|
opacity: 0, // 为 0 时不绘制该图形
|
},
|
emphasis: {
|
opacity: 0,
|
},
|
},
|
label: {
|
show: false, // 隐藏文字
|
},
|
},
|
],
|
},
|
//配置属性
|
series: [
|
{
|
type: 'map',
|
map: 'china',
|
zoom: 1.4,
|
aspectScale: 0.9, // 比例
|
zlevel: 1, // 设置地图的层级，将该地图上移（类似z-index）
|
emphasis: {
|
// 鼠标hover是否显示内容，可自己调节
|
label: {
|
show: true,
|
color: '#fff',
|
},
|
itemStyle: {
|
show: true,
|
color: '#fff', // 高亮文字颜色
|
borderColor: '#a4d0ec', // 高亮边框颜色
|
areaColor: '#0056FF', //高亮区域颜色
|
},
|
},
|
selectedMode: false,
|
label: {
|
// 地图标注
|
show: false,
|
},
|
tooltip: {
|
show: true,
|
triggerOn: 'click',
|
backgroundColor: 'rgba(0,0,0,0)',
|
padding: 0,
|
borderWidth: 0,
|
extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', // 去除box-shadow阴影
|
formatter: (params) => {
|
return `<div class="map-tip-box">
|
<div class="item-state-con title">
|
<div class="icon"></div>
|
<span>${params.data.name}</span>
|
</div>
|
<div class="item-state-con">
|
<span class="dot bj"></span>
|
<span class="item-state-num">
|
<span class="text">本月调拨量：</span>
|
<span class="num">${params.data.monthNum}箱</span>
|
</span>
|
</div>
|
<div class="item-state-con">
|
<span class="dot yj"></span>
|
<span class="item-state-num">
|
<span class="text">本年调拨量：</span>
|
<span class="num">${params.data.yearNum}箱</span>
|
</span>
|
</div>
|
<div class="item-state-con">
|
<span class="dot yj"></span>
|
<span class="item-state-num">
|
<span class="text">调拨量占比：</span>
|
<span class="num">${params.data.rate || 0}%</span>
|
</span>
|
</div>
|
</div>`
|
}
|
},
|
itemStyle: {
|
borderColor: '#a4d0ec', // 省份边框颜色
|
borderWidth: 1, // 省份边框宽度
|
// shadowBlur: 5, // 省份边框聚焦
|
areaColor: '#3c5997',
|
},
|
center: [105.194115019531, 35.582111640625], // 设置地图中心
|
data: mapData,
|
},
|
],
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
const getMap = () => {
|
mapYearAndMonthOutList({
|
factoryCode: activeCity.value.code
|
}).then(res => {
|
const temp = res.data || []
|
mapList.value = temp.map(item => {
|
item.value = item.monthNum
|
item.name = item.provinceName
|
item.code = item.provinceCode
|
return item
|
})
|
initMap()
|
})
|
}
|
const initEnergy = () => {
|
var myChart = echarts.init(document.querySelector('.energyRef'))
|
// 绘制图表
|
myChart.setOption({
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
// Use axis to trigger tooltip
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
}
|
},
|
legend: {
|
itemGap: 24,
|
// icon: 'circle',
|
right: '12px',
|
top: '16px',
|
itemWidth: 28,
|
itemHeight: 14,
|
textStyle: {
|
color: '#fff',
|
borderColor: '#fff'
|
},
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
top: '16%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#D2E0FF'
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
//这里输入线条的样式
|
color: 'rgba(255,255,255,0.14)'
|
},
|
splitNumber: 4
|
}
|
},
|
yAxis: {
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
color: '#D2E0FF'
|
},
|
type: 'category',
|
axisLine: {
|
show: false
|
},
|
data: dataList1.value.map(i => i.dateStr)
|
},
|
series: [
|
{
|
name: '未启运',
|
type: 'bar',
|
stack: 'total',
|
barWidth: 14,
|
label: {
|
show: true,
|
textStyle: {
|
color: '#000000',
|
fontSize: 12
|
}
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: dataList1.value.map(i => i.waitNum),
|
itemStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 1,
|
y2: 0,
|
colorStops: [{
|
offset: 0,
|
color: '#fadf74'
|
},
|
{
|
offset: 0.3,
|
color: '#f7cd5e'
|
}, {
|
offset: 1,
|
color: '#eea33b'
|
}]
|
}
|
}
|
},
|
},
|
{
|
name: '在途',
|
type: 'bar',
|
stack: 'total',
|
barWidth: 14,
|
label: {
|
show: true,
|
textStyle: {
|
color: '#000000',
|
fontSize: 12
|
}
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
textStyle: {
|
color: '#000000',
|
fontSize: 10
|
},
|
data: dataList1.value.map(i => i.ingNum),
|
itemStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 1,
|
y2: 0,
|
colorStops: [{
|
offset: 0,
|
color: '#60d1f9'
|
}, {
|
offset: 1,
|
color: '#4eacf7'
|
}]
|
}
|
}
|
},
|
},
|
{
|
name: '到货',
|
type: 'bar',
|
barWidth: 14,
|
stack: 'total',
|
label: {
|
show: true,
|
textStyle: {
|
color: '#000000',
|
fontSize: 12
|
}
|
},
|
textStyle: {
|
color: '#000000',
|
fontSize: 10
|
},
|
itemStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 1,
|
y2: 0,
|
colorStops: [{
|
offset: 0,
|
color: '#73f7d1'
|
}, {
|
offset: 1,
|
color: '#58beaa'
|
}]
|
}
|
},
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: dataList1.value.map(i => i.doneNum)
|
}
|
]
|
})
|
myChart.on('click', function (params) {
|
// console.log(params.seriesName)
|
// console.log(params.name)
|
const item = dataList1.value.find(i => i.dateStr == params.name)
|
// console.log(params);
|
active1List.value = params.seriesName == '在途' ? item.ingList : params.seriesName == '到货' ? item.doneList : item.waitList
|
showModal1.value = true
|
})
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
const showModal1 = ref(false)
|
const active1List = ref([])
|
|
const dataList1 = ref([])
|
const getData1 = () => {
|
arriveGoodsList({
|
factoryCode: activeCity.value.code
|
}).then(res => {
|
dataList1.value = res.data || []
|
initEnergy()
|
})
|
}
|
|
const transportTask = ref([])
|
const taskCode = ref('')
|
const showModal = ref(false)
|
const modalLoading = ref(false)
|
const modalInfo = ref({})
|
const modalTab = ref(0)
|
const pager = ref({
|
page: 0,
|
rows: 50
|
})
|
const taskClick = (item) => {
|
modalLoading.value = true
|
showModal.value = true
|
kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
|
modalInfo.value = res.data
|
const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0'
|
if (modalInfo.value.gisList && modalInfo.value.gisList.length > 0) {
|
const gisInfo = modalInfo.value.gisList[0]
|
if (gisInfo && gisInfo.gisList && gisInfo.gisList.length > 0) {
|
const adsInfo = gisInfo.gisList[gisInfo.gisList.length - 1]
|
const location = adsInfo.lon1 + ',' + adsInfo.lat1
|
axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`).then(res => {
|
console.log('res', res.data)
|
if(res.data.status == 1){
|
modalInfo.value.position = res.data.regeocode.formatted_address
|
}
|
})
|
}
|
}
|
|
modalLoading.value = false
|
nextTick(() => {
|
initGdMap()
|
})
|
}, () => {
|
modalLoading.value = false
|
})
|
}
|
const closeModal = () => {
|
showModal.value = false
|
showModal1.value = false
|
modalInfo.value = {}
|
}
|
|
|
const mapContainer = ref(null)
|
function distance(obj) {
|
const lat1 = obj.deliveryLat
|
const lng1 = obj.deliveryLon
|
const lat2 = obj.receiveLat
|
const lng2 = obj.receiveLon
|
const radLat1 = rad(lat1)
|
const radLat2 = rad(lat2)
|
const a = radLat1 - radLat2
|
const b = rad(lng1) - rad(lng2)
|
const Haversin = Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2),
|
2)
|
const radius = 6378137 // 地球半径
|
return 2 * radius * Math.asin(Math.sqrt(Haversin))
|
}
|
function rad(d) {
|
return d * Math.PI / 180.0
|
}
|
const initGdMap = () => {
|
const obj = modalInfo.value
|
let scale = 5
|
console.log((obj.deliveryLon + obj.receiveLon))
|
const distancet = distance(obj)
|
if (distancet > 1200000) {
|
scale = 3
|
} else if (distancet < 1200000 && distancet > 500000) {
|
scale = 4
|
} else if (distancet < 500000) {
|
scale = 5
|
} else {
|
scale = 5
|
}
|
console.log('distancet', distancet)
|
|
const map = new AMap.Map(mapContainer.value, {
|
zoom: scale, // 初始缩放级别
|
center: [(Number(obj.deliveryLon) + Number(obj.receiveLon)) / 2, (Number(obj.deliveryLat) + Number(obj.receiveLat)) / 2], // 初始中心点（北京坐标）
|
})
|
AMap.plugin(['AMap.ToolBar'], () => {
|
const toolbar = new AMap.ToolBar()
|
map.addControl(toolbar)
|
})
|
const marker1 = new AMap.Marker({
|
position: [obj.deliveryLon, obj.deliveryLat], // 标记点1坐标
|
icon: new AMap.Icon({
|
size: new AMap.Size(28, 32), // 图标大小
|
image: fahuoImg, // 图标图片URL
|
imageSize: new AMap.Size(28, 32), // 图标实际大小
|
}),
|
title: obj.deliveryEnterprise, // 鼠标悬停时显示的标题
|
})
|
map.add(marker1)
|
const marker2 = new AMap.Marker({
|
position: [obj.receiveLon, obj.receiveLat], // 标记点1坐标
|
icon: new AMap.Icon({
|
size: new AMap.Size(28, 32), // 图标大小
|
image: shouImg, // 图标图片URL
|
imageSize: new AMap.Size(28, 32), // 图标实际大小
|
}),
|
title: obj.receiveEnterprise, // 鼠标悬停时显示的标题
|
})
|
map.add(marker2)
|
// 绘制轨迹
|
const polylineList = obj.gisList[0].gisList || []
|
|
const polyline = new AMap.Polyline({
|
path: [
|
polylineList.map(i => {
|
return [i.lon, i.lat]
|
})
|
],
|
strokeColor: 'red', // 线的颜色
|
strokeWeight: 3, // 线的宽度
|
strokeOpacity: 0.8, // 线的透明度
|
strokeStyle: 'solid', // 线的样式
|
lineJoin: 'round', // 折线拐点的样式
|
})
|
map.add(polyline)
|
}
|
const isLoadingTask = ref(false)
|
const getData2 = () => {
|
isLoadingTask.value = true
|
getStoreTaskList({
|
pager: pager.value,
|
parameters: {
|
contractNumber: taskCode.value,
|
facrotyCodeList: activeCity.value.code ? [activeCity.value.code] : []
|
}
|
}).then(res => {
|
isLoadingTask.value = false
|
let temp = res.data.rows || []
|
transportTask.value = temp.map(item => {
|
if (item.createDate) {
|
item.createDate = item.createDate.slice(5, 16)
|
}
|
return item
|
})
|
console.log('isLoadingTask', isLoadingTask.value)
|
|
}, () => {
|
isLoadingTask.value = false
|
})
|
}
|
|
const cneterData = ref({})
|
const showPro = ref(false)
|
const cityList = ref()
|
const getCity = () => {
|
kzfactoryList().then(res => {
|
cityList.value = [{ name: '全省', code: '' }, ...res.data]
|
})
|
}
|
const activeCity = ref({ name: '全省', code: '' })
|
const colors = ['#0193FE', '#FFB642']
|
const cityClick = (item) => {
|
activeCity.value = item
|
showPro.value = false
|
changeCity()
|
}
|
const initEchart1 = () => {
|
const myChart = echarts.init(document.getElementById('echart1'))
|
|
const option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: ['72%', '96%'],
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
// 设置悬浮时样式为空
|
scale: false, // 关闭放大效果
|
itemStyle: {
|
shadowBlur: 0, // 阴影模糊度为 0
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
},
|
},
|
color: colors,
|
labelLine: {
|
show: false
|
},
|
data: StockOutData.value.arr
|
}
|
]
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
}
|
|
const activeTab1 = ref(0)
|
const loading1 = ref(false)
|
const StockOutData = ref({})
|
const getStockOut = () => {
|
loading1.value = true
|
kztotalOutQtyNum({ type: activeTab1.value, factoryCode: activeCity.value.code }).then(res => {
|
loading1.value = false
|
if (res.code == 200) {
|
let obj = res.data
|
obj.currentNum = (obj.currentOutNum + obj.currentInNum).toFixed(0) * 1
|
obj.lastNum = (obj.lastOutNum + obj.lastInNum).toFixed(0) * 1
|
// obj.sameNum = (obj.sameOutNum + obj.sameInNum).toFixed(0)
|
let arr = []
|
arr.push({ name: '省内', value: obj.currentInNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentInNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' })
|
arr.push({ name: '省外', value: obj.currentOutNum, rate: obj.currentInNum == 0 && obj.currentOutNum == 0 ? 0 : (obj.currentOutNum / (obj.currentInNum + obj.currentOutNum) * 100).toFixed(0) + '%' })
|
obj.arr = arr
|
|
StockOutData.value = obj
|
initEchart1()
|
}
|
|
}, () => {
|
loading1.value = false
|
})
|
}
|
const tab1Click = (val) => {
|
activeTab1.value = val
|
getStockOut()
|
}
|
// footer
|
const getData3 = () => {
|
getStorecenterData({
|
factoryCode: activeCity.value.code
|
}).then(res => {
|
const obj = res.data || {}
|
console.log('obj', obj)
|
|
// 8小时 计划 今日
|
// obj.hoursAbility = 6000
|
// obj.maxAbility = 8000
|
// obj.currentPlanNum = 22000
|
// obj.crrentOutNum = 7000
|
|
obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%'
|
if (obj.currentPlanNum >= obj.hoursAbility) {
|
obj.level2 = '100%'
|
obj.level22 = (((obj.currentPlanNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
|
obj.level22 = obj.level22 > 100 ? '100%' : obj.level22 + '%'
|
} else {
|
obj.level2 = ((obj.currentPlanNum / obj.hoursAbility) * 100).toFixed(2) + '%'
|
obj.level22 = 0
|
}
|
if (obj.crrentOutNum >= obj.hoursAbility) {
|
obj.level3 = '100%'
|
obj.level33 = (((obj.crrentOutNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
|
obj.level33 = obj.level33 > 100 ? '100%' : obj.level33 + '%'
|
} else {
|
obj.level3 = ((obj.crrentOutNum / obj.hoursAbility) * 100).toFixed(2) + '%'
|
obj.level33 = 0
|
}
|
|
// console.log('obj1', obj.level1);
|
// console.log('obj2', obj.level2);
|
// console.log('obj22', obj.level22);
|
// console.log('obj3', obj.level3);
|
// console.log('obj33', obj.level33);
|
|
cneterData.value = obj
|
|
})
|
}
|
|
const data5 = ref({})
|
const data6 = ref({})
|
const data7 = ref({})
|
const initEchart5 = () => {
|
// 基于准备好的dom，初始化echarts实例
|
const myChart = echarts.init(document.getElementById('echart5'))
|
// 绘制图表
|
myChart.setOption({
|
legend: {
|
itemGap: 12,
|
// icon: 'circle',
|
right: '12%',
|
top: '0%',
|
data: ['总库容', '当前库存', '库存利用率'],
|
itemWidth: 20,
|
itemHeight: 10,
|
textStyle: {
|
color: '#fff',
|
borderColor: '#fff'
|
},
|
},
|
grid: {
|
left: '3%',
|
right: '0%',
|
bottom: '3%',
|
top: '18%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// 遍历悬浮时的所有点，定制化显示内容
|
let result = `<div style="width: 160px">${params[0].name}</div>`
|
params.forEach((item) => {
|
if (item.seriesName === '总库容') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #5e9bca;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '当前库存') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '库存利用率') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b2bcd1;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}%</strong></div>
|
</div>`
|
}
|
})
|
return result
|
}
|
},
|
xAxis: [{
|
nameGap: 5,
|
type: 'category',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#999'
|
},
|
},
|
axisLabel: {
|
color: '#869CC9'
|
},
|
axisTick: {
|
show: false,
|
},
|
data: data5.value.detailList.map(i => i.factoryName),
|
}],
|
yAxis: [
|
{
|
nameTextStyle: {
|
color: '#869CC9',
|
},
|
name: '箱',
|
nameGap: 16,
|
type: 'value',
|
axisLabel: {
|
color: "#869CC9",
|
},
|
axisLine: {
|
show: true,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
width: 1,
|
color: "rgba(49,105,129,0.4)",
|
type: 'dashed'
|
}
|
},
|
},
|
{
|
type: 'value',
|
name: '%',
|
nameGap: 16,
|
min: 0,
|
// max: 100,
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
padding: [0, 0, 0, 12]
|
},
|
splitLine: false
|
}
|
],
|
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: '#2e6bf3'
|
},
|
{
|
offset: 1,
|
color: '#5fcbab'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data5.value.detailList.map(i => i.totalNum)
|
},
|
{
|
name: '当前库存',
|
type: 'bar',
|
barWidth: 10,
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
yAxisIndex: 0,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: '#eda13a'
|
},
|
{
|
offset: 0.6,
|
color: '#dfb44e'
|
},
|
{
|
offset: 1,
|
color: '#ccc16c'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data5.value.detailList.map(i => i.currentNum)
|
},
|
{
|
name: '库存利用率',
|
type: 'line',
|
smooth: false,
|
showAllSymbol: true,
|
symbol: 'none',
|
lineStyle: {
|
color: "#9eabc2"
|
},
|
yAxisIndex: 1,
|
tooltip: {
|
show: true,
|
formatter: '{c}' + '%',
|
},
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
data: data5.value.detailList.map(i => i.useRate)
|
}
|
]
|
})
|
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
const initEchart6 = () => {
|
// 基于准备好的dom，初始化echarts实例
|
const myChart = echarts.init(document.getElementById('echart6'))
|
// 绘制图表
|
myChart.setOption({
|
legend: {
|
itemGap: 12,
|
// icon: 'circle',
|
right: '10%',
|
top: '0',
|
data: ['出库能力', '当日出库量', '出库利用率'],
|
itemWidth: 20,
|
itemHeight: 10,
|
textStyle: {
|
color: '#fff',
|
borderColor: '#fff'
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// 遍历悬浮时的所有点，定制化显示内容
|
let result = `<div style="width: 160px">${params[0].name}</div>`
|
params.forEach((item) => {
|
if (item.seriesName === '出库能力') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #487af3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '当日出库量') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '出库利用率') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b0bcd3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}%</strong></div>
|
</div>`
|
}
|
})
|
return result
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '0%',
|
bottom: '3%',
|
top: '18%',
|
containLabel: true
|
},
|
xAxis: [{
|
nameGap: 5,
|
type: 'category',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#999'
|
},
|
},
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
},
|
axisTick: {
|
show: false,
|
},
|
data: data6.value.detailList.map(i => i.factoryName),
|
}],
|
yAxis: [
|
{
|
name: '箱',
|
nameGap: 16,
|
type: 'value',
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
padding: [0, 0, 0, 12]
|
},
|
axisLine: {
|
show: true,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
width: 1,
|
color: "rgba(49,105,129,0.4)",
|
type: 'dashed'
|
}
|
},
|
},
|
{
|
type: 'value',
|
name: '%',
|
nameGap: 16,
|
min: 0,
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
padding: [0, 0, 0, 12]
|
},
|
splitLine: false
|
}
|
],
|
series: [
|
{
|
name: '出库能力',
|
type: 'bar',
|
barWidth: 14,
|
barGap: '60%',
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
yAxisIndex: 0,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: '#2e6bf3'
|
},
|
{
|
offset: 1,
|
color: '#5fcbab'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data6.value.detailList.map(i => i.totalNum),
|
barGap: '-100%' // 设置柱子完全重叠
|
|
},
|
{
|
name: '当日出库量',
|
type: 'bar',
|
barWidth: 14,
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
yAxisIndex: 0,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: '#eda13a'
|
},
|
{
|
offset: 0.6,
|
color: '#dfb44e'
|
},
|
{
|
offset: 1,
|
color: '#ccc16c'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data6.value.detailList.map(i => i.currentNum),
|
barGap: '-100%' // 设置柱子完全重叠
|
},
|
{
|
name: '出库利用率',
|
type: 'line',
|
smooth: false,
|
showAllSymbol: true,
|
symbol: 'none',
|
lineStyle: {
|
color: "#9eabc2"
|
},
|
yAxisIndex: 1,
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
data: data6.value.detailList.map(i => i.useRate)
|
}
|
]
|
})
|
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
const initEchart7 = () => {
|
// 基于准备好的dom，初始化echarts实例
|
const myChart = echarts.init(document.getElementById('echart7'))
|
// 绘制图表
|
myChart.setOption({
|
legend: {
|
itemGap: 12,
|
// icon: 'circle',
|
right: '10%',
|
top: '0%',
|
data: ['当日可用运力', '当日提报运力', '车辆利用率'],
|
itemWidth: 20,
|
itemHeight: 10,
|
textStyle: {
|
color: '#fff',
|
borderColor: '#fff'
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// 遍历悬浮时的所有点，定制化显示内容
|
let result = `<div style="width: 160px">${params[0].name}</div>`
|
params.forEach((item) => {
|
if (item.seriesName === '当日可用运力') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #88d9cc;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '当日提报运力') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #e2a44f;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}</strong></div>
|
</div>`
|
} else if (item.seriesName === '车辆利用率') {
|
result += `
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
|
<div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b0bcd3;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
|
<div><strong>${item.value}%</strong></div>
|
</div>`
|
}
|
})
|
return result
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '0%',
|
bottom: '3%',
|
top: '18%',
|
containLabel: true
|
},
|
xAxis: [{
|
nameGap: 5,
|
type: 'category',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#999'
|
},
|
},
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
padding: [0, 0, 0, 12]
|
},
|
axisTick: {
|
show: false,
|
},
|
data: data7.value.detailList.map(i => i.factoryName),
|
}],
|
yAxis: [
|
{
|
nameTextStyle: {
|
color: '#869CC9',
|
},
|
name: '辆',
|
nameGap: 16,
|
type: 'value',
|
axisLabel: {
|
show: true,
|
color: "#869CC9",
|
},
|
axisLine: {
|
show: true,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
width: 1,
|
color: "rgba(49,105,129,0.4)",
|
type: 'dashed'
|
}
|
},
|
},
|
{
|
type: 'value',
|
name: '%',
|
nameGap: 16,
|
min: 0,
|
axisLabel: {
|
color: "#869CC9",
|
},
|
nameTextStyle: {
|
color: '#869CC9',
|
padding: [0, 0, 0, 12]
|
},
|
splitLine: false
|
}
|
],
|
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: '#73f0c6'
|
},
|
{
|
offset: 1,
|
color: '#3f8ca6'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data7.value.detailList.map(i => (i.totalNum - i.zaituNum))
|
},
|
{
|
name: '当日提报运力',
|
type: 'bar',
|
barWidth: 10,
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
yAxisIndex: 0,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: '#ed7e32'
|
},
|
{
|
offset: 0.6,
|
color: '#e99b5c'
|
},
|
{
|
offset: 1,
|
color: '#e7a774'
|
}
|
], false),
|
lineStyle: {
|
width: 1,
|
type: 'solid'
|
},
|
barBorderRadius: [30, 30, 0, 0],
|
},
|
data: data7.value.detailList.map(i => i.currentNum)
|
},
|
{
|
name: '车辆利用率',
|
type: 'line',
|
smooth: false,
|
showAllSymbol: true,
|
symbol: 'none',
|
lineStyle: {
|
color: "#9eabc2"
|
},
|
yAxisIndex: 1,
|
label: {
|
show: false,
|
position: 'top',
|
color: '#fff',
|
},
|
data: data7.value.detailList.map(i => i.useRate)
|
}
|
]
|
})
|
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
}
|
const getData5 = () => {
|
kzinventoryUseRate().then(res => {
|
data5.value = res.data
|
data5.value.detailList.forEach(item => {
|
if (item.useRate) {
|
item.useRate = (item.useRate * 100).toFixed(1)
|
}
|
|
})
|
initEchart5()
|
})
|
outAbilityUseRate().then(res => {
|
data6.value = res.data
|
data6.value.detailList.forEach(item => {
|
if (item.useRate) {
|
item.useRate = (item.useRate * 100).toFixed(1)
|
}
|
})
|
initEchart6()
|
})
|
tranportAbilityUseRate().then(res => {
|
data7.value = res.data
|
data7.value.detailList.forEach(item => {
|
// item.useRate = item.useRate * 100
|
if (item.useRate) {
|
item.useRate = (item.useRate * 100).toFixed(1)
|
}
|
})
|
initEchart7()
|
})
|
|
// initEchart6()
|
// initEchart7()
|
|
}
|
|
|
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, 6000),
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
})
|
}
|
|
const changeCity = () => {
|
getData1()
|
getStockOut()
|
getMap()
|
getData2()
|
getData3()
|
}
|
|
onMounted(() => {
|
getCity()
|
changeCity()
|
getData5()
|
setInterval(() => {
|
getCity()
|
changeCity()
|
getData5()
|
}, 1000 * 60 * 10)
|
setTimeout(() => {
|
loopFn1()
|
}, 12000)
|
})
|
|
|
</script>
|
|
<style lang="scss">
|
.map-tip-box {
|
background-color: rgba(6, 25, 48, .8);
|
padding: 10px 30px;
|
padding-left: 20px;
|
border-radius: 4px;
|
backdrop-filter: blur(10px);
|
color: #D2E0FF;
|
font-size: 12px;
|
border: 1px solid #D2E0FF;
|
|
.icon {
|
width: 12px;
|
height: 14px;
|
background-image: url('@/assets/images/FireFighting/ic_location@2x.png');
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: cover;
|
margin-right: 6px;
|
}
|
|
.title {
|
font-size: 14px;
|
font-weight: 600;
|
display: flex;
|
align-items: center
|
}
|
|
.item-state-con {
|
margin-bottom: 6px;
|
}
|
}
|
</style>
|
<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 {
|
margin-top: 20px;
|
padding: 0px 10px 30px 20px;
|
position: relative;
|
height: 160px;
|
|
.content_wrap {
|
display: flex;
|
justify-content: space-between;
|
|
.num_wrap {
|
width: 272px;
|
|
.num_list {
|
display: flex;
|
margin-bottom: 20px;
|
|
.num {
|
width: 30px;
|
height: 46px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
font-weight: 600;
|
font-size: 32px;
|
margin-right: 5px;
|
}
|
}
|
|
.content {
|
display: flex;
|
color: #D2E0FF;
|
|
.la {
|
color: #869CC9;
|
}
|
|
.unit_wrap {
|
display: flex;
|
align-items: center;
|
}
|
|
.icon {
|
width: 10px;
|
height: 12px;
|
margin-right: 6px;
|
margin-left: 4px;
|
}
|
}
|
}
|
|
.echart_wrap {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
height: 48px;
|
|
.echart1 {
|
width: 46px;
|
height: 46px;
|
margin-right: 8px;
|
}
|
|
.list {
|
flex: 1;
|
font-size: 13px;
|
|
.item {
|
display: flex;
|
align-items: center;
|
margin: 8px 0;
|
|
.icon {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 4px;
|
background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
|
}
|
|
.text {
|
margin-right: 6px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.left_box_two {
|
margin-bottom: 20px;
|
position: relative;
|
|
.second_title {
|
position: absolute;
|
top: 14px;
|
left: 20px;
|
}
|
|
.energy_wrap {
|
width: 100%;
|
height: 300px;
|
|
.energyRef {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.left_box_three {
|
width: 440px;
|
padding: 0 15px;
|
|
.second_title {
|
margin-bottom: 10px;
|
|
input {
|
font-size: 12px;
|
}
|
}
|
|
.list_wrap {
|
position: relative;
|
|
.list {
|
height: 200px;
|
overflow: hidden;
|
}
|
|
.empty {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 200px;
|
|
img {
|
width: 144px;
|
}
|
}
|
|
.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);
|
}
|
|
.item {
|
flex: 4;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.status {
|
flex: 3.2;
|
}
|
}
|
|
.avtive {
|
background: rgba(1, 171, 254, 0.2);
|
color: #01D9FE;
|
font-weight: 600;
|
}
|
|
.header {
|
font-weight: 500;
|
color: #01D9FE;
|
}
|
}
|
}
|
}
|
|
.center_box {
|
flex: 1;
|
padding: 0 20px;
|
margin: 0 20px;
|
display: flex;
|
flex-direction: column;
|
|
.center_box_one {
|
background: rgba(255, 255, 255, 0.02);
|
height: 230px;
|
border-top: 2px solid #306ba1;
|
padding: 20px 20px 0;
|
|
.header_wrap {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 28px;
|
font-weight: bold;
|
font-size: 18px;
|
position: relative;
|
|
/* background-image: -webkit-linear-gradient(top,
|
#ffffff 0%,
|
#c8ddff 66%,
|
#85b4ff 72%,
|
#74a9ff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent; */
|
|
.left {
|
display: flex;
|
align-items: center;
|
position: relative;
|
|
|
|
img {
|
width: 16px;
|
margin-right: 6px;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
position: relative;
|
|
.posi {
|
width: 16px;
|
margin-right: 8px;
|
}
|
|
.icon {
|
width: 14px;
|
margin-left: 2px;
|
}
|
}
|
|
.select_op {
|
position: absolute;
|
top: 26px;
|
right: -10px;
|
width: 90px;
|
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;
|
}
|
}
|
}
|
|
.static_wrap {
|
display: flex;
|
justify-content: space-between;
|
margin: 30px 0 14px;
|
|
.tooltip_wrap {
|
position: relative;
|
|
&:hover {
|
.tooltip {
|
display: block;
|
}
|
}
|
|
.tooltip {
|
display: none;
|
background: rgba(0, 30, 63, 0.6);
|
border: 1px solid #003F82;
|
backdrop-filter: blur(3px);
|
padding: 10px;
|
font-size: 15px;
|
color: #fff;
|
line-height: 19px;
|
font-weight: 400;
|
border-radius: 6px;
|
width: 230px;
|
position: absolute;
|
line-height: 24px;
|
left: 100%;
|
top: 50%;
|
transform: translate(20px, -42%);
|
z-index: 999999999999999;
|
}
|
}
|
|
.item {
|
display: flex;
|
|
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;
|
}
|
|
.blue {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#65a1fa 30%,
|
#3a84f6 100%);
|
}
|
|
.today {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#20FFC5 30%,
|
#20FFC5 100%);
|
}
|
|
.finish {
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#FFB120 30%,
|
#FFB120 100%);
|
}
|
}
|
|
.unit {
|
font-size: 13px;
|
color: #D2E0FF;
|
margin-top: 2px;
|
}
|
}
|
}
|
}
|
|
.footer {
|
.wrap {
|
display: flex;
|
align-items: center;
|
height: 76px;
|
|
.content {
|
width: 80%;
|
height: 16px;
|
background: rgba(255, 255, 255, 0.13);
|
border-radius: 8px;
|
margin-right: 6px;
|
display: flex;
|
position: relative;
|
|
}
|
|
.box {
|
width: 80%;
|
height: 16px;
|
background: linear-gradient(270deg, #FF9F02 0%, #FFEA70 100%);
|
border-radius: 8px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 9999;
|
|
.tag {
|
position: absolute;
|
z-index: 99999;
|
bottom: -30px;
|
right: 0;
|
transform: translate(50%, 0);
|
height: 20px;
|
background: #FECE01;
|
color: #000000;
|
padding: 0 6px;
|
border-radius: 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-width: 76px;
|
border: 1px solid #FECE01;
|
|
.icon {
|
position: absolute;
|
top: 1px;
|
left: 50%;
|
/* transform: translate(-50%,0); */
|
width: 10px;
|
height: 10px;
|
transform: rotate(45deg) translate(-50%, 0);
|
background: #FECE01;
|
z-index: -1;
|
}
|
}
|
|
.tooltip_wrap {
|
.tooltip {
|
z-index: 9999999999;
|
top: 34px;
|
transform: translate(70px, -42%);
|
}
|
}
|
|
.tag1 {
|
background-color: #28F0CC;
|
border: 1px solid #28F0CC;
|
|
.icon {
|
background-color: #28F0CC;
|
}
|
}
|
}
|
|
.box1 {
|
width: 10%;
|
z-index: 9;
|
background: linear-gradient(270deg, #68dfd3 0%, #006BFF 100%);
|
}
|
|
.box11 {
|
background: linear-gradient(270deg, #75f8cc 0%, #68dfd3 100%);
|
}
|
|
.box22 {
|
background: linear-gradient(270deg, #f2a43b 0%, #ecbb61 100%);
|
}
|
|
.box23 {
|
background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
|
}
|
|
.tooltip_wrap {
|
/* position: relative; */
|
|
&:hover {
|
.tooltip {
|
display: block;
|
}
|
}
|
|
.tooltip {
|
display: none;
|
background: #071b32;
|
border: 1px solid #003F82;
|
/* backdrop-filter: blur(3px); */
|
padding: 10px;
|
font-size: 15px;
|
color: #fff;
|
line-height: 19px;
|
font-weight: 400;
|
border-radius: 6px;
|
width: 200px;
|
position: absolute;
|
z-index: 99999999;
|
left: 100%;
|
top: 50%;
|
transform: translate(30px, -42%);
|
}
|
}
|
|
.scale {
|
position: absolute;
|
top: -24px;
|
left: 0;
|
font-size: 16px;
|
color: #D2E0FF;
|
|
.tooltip_wrap {
|
.tooltip {
|
width: 240px;
|
transform: translate(20px, -50%);
|
}
|
}
|
}
|
|
.scale1 {
|
left: 92%;
|
min-width: 36px;
|
}
|
|
.side {
|
flex: 1;
|
height: 16px;
|
background: rgba(255, 255, 255, 0.13);
|
border-radius: 8px;
|
position: relative;
|
}
|
}
|
}
|
}
|
|
.center_box_two {
|
width: 100%;
|
flex: 1;
|
position: relative;
|
|
.echart_map {
|
width: 100%;
|
height: 100%;
|
/* transform: scale(.2); */
|
}
|
|
.modal1 {
|
width: 500px;
|
height: 192px;
|
background: rgba(0, 86, 255, 0.1);
|
backdrop-filter: blur(5px);
|
padding: 12px 30px;
|
position: absolute;
|
top: 36px;
|
left: 12px;
|
border: 1px solid #4ba7f7;
|
z-index: 999999;
|
|
.content {
|
.list {
|
height: 128px;
|
overflow: auto;
|
}
|
|
.line {
|
display: flex;
|
align-items: center;
|
height: 32px;
|
color: #fff;
|
font-size: 12px;
|
|
&:nth-of-type(2n) {
|
background: rgba(134, 156, 201, 0.05);
|
}
|
|
.item {
|
flex: 3;
|
}
|
|
.addr {
|
flex: 5;
|
display: flex;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
}
|
}
|
|
.head {
|
font-weight: 500;
|
font-size: 13px;
|
color: #01D9FE;
|
}
|
}
|
|
}
|
}
|
}
|
|
.right_box {
|
width: 440px;
|
|
.right_box_three {
|
margin-top: 20px;
|
|
.echart5_wrap {
|
height: 192px;
|
width: 410px;
|
|
.echart5 {
|
height: 192px;
|
width: 410px;
|
}
|
}
|
}
|
}
|
|
.question {
|
display: flex;
|
align-items: center;
|
|
&:hover {
|
.hover_wrap {
|
display: block;
|
}
|
}
|
|
.hover_wrap {
|
display: none;
|
position: absolute;
|
left: 130px;
|
z-index: 999;
|
top: -5px;
|
width: 420px;
|
height: 148px;
|
background: rgba(0, 30, 63, 0.6);
|
border: 1px solid #003F82;
|
backdrop-filter: blur(3px);
|
padding: 10px;
|
font-size: 13px;
|
color: #ebf1fb;
|
line-height: 19px;
|
font-weight: 400;
|
border-radius: 6px;
|
|
div {
|
margin-bottom: 3px;
|
}
|
|
.triangle {
|
width: 12px;
|
height: 12px;
|
position: absolute;
|
top: 10px;
|
left: -6px;
|
transform: rotate(45deg);
|
border-left: 1px solid #003F82;
|
border-bottom: 1px solid #003F82;
|
background: rgba(0, 30, 63, 0.6);
|
backdrop-filter: blur(3px);
|
}
|
|
.title {
|
font-weight: bold;
|
font-size: 14px;
|
color: #e2ebfd;
|
}
|
}
|
}
|
}
|
|
.question1 {
|
display: flex;
|
align-items: center;
|
|
.hover_con {
|
position: relative;
|
|
&:hover {
|
.hover_wrap {
|
display: block;
|
}
|
}
|
}
|
|
|
.hover_wrap {
|
display: none;
|
|
position: absolute;
|
left: 108%;
|
z-index: 999;
|
top: -5px;
|
width: 212px;
|
height: 62px;
|
background: rgba(0, 30, 63, 0.6);
|
border: 1px solid #003F82;
|
backdrop-filter: blur(3px);
|
padding: 10px;
|
font-size: 15px;
|
color: #e9f0ff;
|
line-height: 19px;
|
font-weight: 400;
|
border-radius: 6px;
|
|
div {
|
margin-bottom: 3px;
|
}
|
|
|
.title {
|
color: #e2ebfd;
|
}
|
}
|
}
|
|
.triangle {
|
width: 12px;
|
height: 12px;
|
position: absolute;
|
top: 36%;
|
transform: translate(-50%, -50%);
|
left: -6px;
|
transform: rotate(45deg);
|
border-left: 1px solid #003F82;
|
border-bottom: 1px solid #003F82;
|
background: rgba(0, 30, 63, 0.6);
|
/* backdrop-filter: blur(3px); */
|
}
|
|
.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: 18px;
|
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;
|
}
|
|
.active {
|
color: #0094eb;
|
}
|
}
|
}
|
|
.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: 99999;
|
padding: 24px;
|
|
#map-container {
|
width: 260px;
|
height: 320px;
|
position: absolute;
|
top: 190px;
|
right: 20px;
|
z-index: 999999;
|
border-radius: 2px;
|
|
:deep(.amap-markers) {
|
left: -12px !important;
|
top: -32px !important;
|
}
|
}
|
|
.stock {
|
display: flex;
|
align-items: center;
|
color: #dd5d2a;
|
margin-bottom: 8px;
|
|
img {
|
margin-right: 6px;
|
width: 14px;
|
}
|
}
|
|
.title_head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 8px;
|
|
.left {
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 17px;
|
}
|
|
.tit_status {
|
color: #af8832;
|
}
|
|
img {
|
width: 20px;
|
margin-right: 4px;
|
}
|
}
|
|
.info {
|
display: flex;
|
flex-wrap: wrap;
|
background-color: #0d2845;
|
border-radius: 4px;
|
padding: 10px 20px 0px;
|
margin-bottom: 16px;
|
|
.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;
|
margin-top: 7px;
|
}
|
|
.la {
|
color: #01D9FE;
|
width: 70px;
|
}
|
.val{
|
flex: 1;
|
}
|
}
|
}
|
|
.logistics_wrap {
|
.m_title {
|
display: flex;
|
align-items: center;
|
font-style: 16px;
|
font-weight: 600;
|
margin-bottom: 20px;
|
|
img {
|
width: 24px;
|
margin-right: 4px;
|
}
|
}
|
|
.fu_list {
|
height: 310px;
|
width: 290px;
|
margin-top: 20px;
|
overflow: auto;
|
|
.fu_item {
|
position: relative;
|
|
.item_title {
|
margin-bottom: 6px;
|
|
.icon {
|
width: 36px;
|
display: flex;
|
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
}
|
|
.separate {
|
height: calc(100% - 8px);
|
/* width: 1px; */
|
border: 1px dashed #576783;
|
/* border: 1px dashed red; */
|
position: absolute;
|
left: 10px;
|
top: 20px;
|
z-index: -1;
|
}
|
|
.title {
|
font-weight: 500;
|
font-size: 16px;
|
color: #222222;
|
margin-bottom: 10px;
|
}
|
|
.line {
|
display: flex;
|
margin-bottom: 12px;
|
|
.label {
|
color: #becbe9;
|
margin-right: 20px;
|
}
|
|
.val {}
|
}
|
|
.item_title {
|
font-weight: 600;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
display: flex;
|
|
.icon {}
|
}
|
|
.icon_wrap {
|
width: 24px;
|
margin-right: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.icon {
|
width: 24px;
|
height: 24px;
|
position: relative;
|
z-index: 2;
|
}
|
}
|
|
.item {
|
position: relative;
|
color: #b1bfdc;
|
margin-bottom: 15px;
|
|
.text {
|
color: #b1bfdc;
|
margin-bottom: 6px;
|
width: 100%;
|
}
|
|
.icon {
|
width: 10px;
|
height: 10px;
|
position: relative;
|
z-index: 2;
|
}
|
|
.h2 {
|
display: flex;
|
align-items: center;
|
}
|
|
.h1 {}
|
|
.time {
|
padding-left: 39px;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
|
|
}
|
|
.modal_mask {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
z-index: 9999;
|
/* background-color: rgba(0, 0, 0, 0.0); */
|
/* background-color: red; */
|
}
|
|
.second_title {
|
height: 24px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: relative;
|
font-size: 16px;
|
margin-bottom: 20px;
|
|
.title {
|
display: flex;
|
align-items: center;
|
font-weight: 500;
|
font-size: 16px;
|
color: #FFFFFF;
|
position: relative;
|
|
.hover_wrap {
|
left: 175px;
|
height: 80px;
|
}
|
|
.icon {
|
width: 16px;
|
height: 16px;
|
margin-right: 10px;
|
}
|
}
|
|
.num_wrap {
|
font-weight: 400;
|
font-size: 14px;
|
color: #D2E0FF;
|
display: flex;
|
align-items: center;
|
|
.val {
|
font-weight: bold;
|
font-size: 16px;
|
color: #FFFFFF;
|
}
|
}
|
|
.search_wrap {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 14px;
|
color: #869CC9;
|
width: 110px;
|
height: 28px;
|
border-radius: 14px;
|
border: 1px solid #869CC9;
|
padding-left: 8px;
|
margin-right: 12px;
|
|
img {
|
width: 14px;
|
height: 14px;
|
margin-right: 3px;
|
}
|
|
.input {
|
flex: 1;
|
}
|
}
|
|
.side {
|
font-size: 14px;
|
color: #D2E0FF;
|
|
span {
|
font-size: 16px;
|
font-weight: 600;
|
color: #3981ea;
|
background-image: -webkit-linear-gradient(top,
|
#fff 0%,
|
#65a5ff 30%,
|
#2c66b9 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
|
.unit {
|
font-weight: 400;
|
font-size: 12px;
|
}
|
}
|
}
|
|
.tabs {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: #d2e0ff;
|
|
.tab {
|
cursor: pointer;
|
}
|
|
.separate {
|
width: 1px;
|
height: 14px;
|
background-color: #d2e0ff;
|
margin: 0 6px;
|
}
|
|
.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;
|
}
|
}
|
|
.bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
</style>
|
