You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1735 lines
68 KiB
1735 lines
68 KiB
4 years ago
|
<template>
|
||
|
|
<div class="contant_box">
|
||
|
|
<div class="container-flex" tabindex="0" hidefocus="true">
|
||
|
|
<div class="box-left">
|
||
|
|
<div class="left-top">
|
||
|
|
<div class="current-num">
|
||
|
|
<div>当前到件量</div>
|
||
|
|
<p>123,456,789</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-center">
|
||
|
|
<div class="title-box">
|
||
|
|
<h6>派件入库量占比</h6>
|
||
|
|
</div>
|
||
|
|
<div class="chart-box pie-chart">
|
||
|
|
<div id="pie"></div>
|
||
|
|
<div>
|
||
|
|
<div class="pie-data" id="pie-data">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-bottom select">
|
||
|
|
<div class="title-box">
|
||
|
|
<h6>日照市莒县寄派件数据</h6>
|
||
|
|
<img class="line-img" src="~@/assets/images/line-blue.png" alt="">
|
||
|
|
<button id="filBtn" @click="filtrate"><img src="~@/assets/images/select_icon.png" alt="">筛选</button>
|
||
|
|
</div>
|
||
|
|
<div class="chart-box">
|
||
|
|
<div class="filter-con" id="filCon" data-type="1" :style="{display:isFiltrate ? 'flex' : 'none'}">
|
||
|
|
<!-- <div class="select" tabindex="0" hidefocus="true" @click="clickWay"> -->
|
||
|
|
<!-- <div class="select-div" >
|
||
|
|
{{wayName}}
|
||
|
|
</div> -->
|
||
|
|
<!-- <ul class="select-ul" :class="!isShowWay ? 'isSelect' : ''" :style="{display:isShowWay ? 'block' : 'none'}">
|
||
|
|
{{isShowWay}}
|
||
|
|
<li :class="isWay == 1 ? 'active' : ''" data-value="1" @click="clickisWay(1)">派件</li>
|
||
|
|
<li :class="isWay == 2 ? 'active' : ''" @click="clickisWay(2)" data-value="2">寄件</li>
|
||
|
|
</ul> -->
|
||
|
|
<el-select v-model="wayName" placeholder="请选择" popper-class="secondPop" >
|
||
|
|
<el-option
|
||
|
|
v-for="item in wayOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="companyName" placeholder="请选择" popper-class="secondPop">
|
||
|
|
<el-option
|
||
|
|
v-for="item in companyOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="expressName" placeholder="请选择" popper-class="secondPop">
|
||
|
|
<el-option
|
||
|
|
v-for="item in expressOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<!-- </div> -->
|
||
|
|
<!-- <div class="select" tabindex="0" hidefocus="true" @click="clickCompany">
|
||
|
|
<div class="select-div">
|
||
|
|
{{companyName}}
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul company" :style="{display:isShowCom ? 'block' : 'none'}">
|
||
|
|
<li :class="isWay == 1 ? 'active' : ''" @click="clickCom(1)" data-value="">公司</li>
|
||
|
|
<li :class="isWay == 2 ? 'active' : ''" @click="clickCom(2)" data-value="1">顺丰</li>
|
||
|
|
<li :class="isWay == 3 ? 'active' : ''" @click="clickCom(3)" data-value="2">京东</li>
|
||
|
|
<li :class="isWay == 4 ? 'active' : ''" @click="clickCom(4)" data-value="2">EMS</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
快件类型
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul">
|
||
|
|
<li class="active" data-value="">快件类型</li>
|
||
|
|
<li data-value="0">文件</li>
|
||
|
|
<li data-value="1">物品</li>
|
||
|
|
</ul>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div id="gdMap" class="gd-map"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-center">
|
||
|
|
<div class="center-top">
|
||
|
|
<h1>智慧物流服务中心</h1>
|
||
|
|
</div>
|
||
|
|
<div class="center-center">
|
||
|
|
<div class="weather-box">
|
||
|
|
<div class="data">
|
||
|
|
<p class="time" id="time">{{time}}</p>
|
||
|
|
<p id="date">
|
||
|
|
<span>{{date}}</span><span>{{ampm}}</span><span>周{{day}}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="weather">
|
||
|
|
<img id="weatherImg" src="~@/assets/images/weather/weather_img01.png" alt="">
|
||
|
|
<div id="weather">
|
||
|
|
<p class="active">多云</p>
|
||
|
|
<p>16-22℃</p>
|
||
|
|
<p>日照市莒县</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img src="~@/assets/images/line_bg.png" alt="">
|
||
|
|
<div class="select-box">
|
||
|
|
<ul id="barType">
|
||
|
|
<li :class="expressType == 1 ? 'active' : ''" data-value="1" @click="postExpressage(1)">派件</li>
|
||
|
|
<li :class="expressType == 2 ? 'active' : ''" data-value="2" @click="postExpressage(2)">寄件</li>
|
||
|
|
</ul>
|
||
|
|
<div data-type="2" class="filter-con" style="margin-top:0.32rem">
|
||
|
|
<el-select v-model="comName" placeholder="请选择" popper-class="firstPop">
|
||
|
|
<el-option
|
||
|
|
v-for="item in comOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<el-select v-model="kjName" placeholder="请选择" popper-class="firstPop">
|
||
|
|
<el-option
|
||
|
|
v-for="item in expressOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
<!-- <div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
公司
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul company">
|
||
|
|
<li class="active" data-value="">公司</li>
|
||
|
|
<li data-value="1">顺丰</li>
|
||
|
|
<li data-value="2">京东</li>
|
||
|
|
<li data-value="2">EMS</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
快件类型
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul">
|
||
|
|
<li class="active" data-value="">快件类型</li>
|
||
|
|
<li data-value="0">文件</li>
|
||
|
|
<li data-value="1">物品</li>
|
||
|
|
</ul>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="center-bottom">
|
||
|
|
<!-- <iframe style="width:100%;height:99%" src="https://lcrm3.lunz.cn/LocatInfoAllPage?imei=863013180426430&KEY=2C6074D0-C8E4-4BA4-A50A-E3A46EAD394A" frameborder="0"></iframe> -->
|
||
|
|
<iframe style="width:100%;height:99%" :src="iframeUrl" frameborder="0"></iframe>
|
||
|
|
|
||
|
|
<!-- <div class="chart-box">
|
||
|
|
<div id="chart4" style="width:100%;height:95%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="city-data">
|
||
|
|
<div class="city-box">
|
||
|
|
<p id="titleQ"><span>全网</span>到珠海</p>
|
||
|
|
<ul class="city-btn" data-city="1">
|
||
|
|
<li class="active">全网</li>
|
||
|
|
<li>ABCDE</li>
|
||
|
|
<li>FGHIJ</li>
|
||
|
|
<li>KLMNO</li>
|
||
|
|
<li>PQRST</li>
|
||
|
|
<li>UVWXYZ</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="city-div" id="city">
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<ul class="ranking-box">
|
||
|
|
<li><span></span>
|
||
|
|
<p>城市</p>
|
||
|
|
<p>派件</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="enlarge-box">
|
||
|
|
<button class="enlarge-btn" id="fangda"></button>
|
||
|
|
<ul class="modal-btn">
|
||
|
|
<li>
|
||
|
|
<div></div>1</li>
|
||
|
|
<li>
|
||
|
|
<div></div>2</li>
|
||
|
|
<li>
|
||
|
|
<div></div>3</li>
|
||
|
|
<li>
|
||
|
|
<div></div>4</li>
|
||
|
|
<li>
|
||
|
|
<div></div>5</li>
|
||
|
|
<li>
|
||
|
|
<div></div>6</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="box-right">
|
||
|
|
<div class="right-top">
|
||
|
|
<div class="title-box">
|
||
|
|
<h6 id="barTitle">派件数据</h6>
|
||
|
|
<img class="line-img" src="~@/assets/images/line-blue.png" alt="">
|
||
|
|
<button data-state=1 id="tabBtn" @click="clickTable"><img src="~@/assets/images/chart_icon.png" alt=""><span>{{tableName}}</span></button>
|
||
|
|
</div>
|
||
|
|
<p class="unit">单位：件</p>
|
||
|
|
<div class="chart-box" :style="{display:isTable ? 'block' : 'none'}">
|
||
|
|
<div id="chart3" style="width:100%;height:100%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="data-box" :style="{display:!isTable ? 'block' : 'none'}">
|
||
|
|
<table class="table1">
|
||
|
|
<tr>
|
||
|
|
<td>入库件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data1">{{tableData.num1}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td rowspan="2">在库件</td>
|
||
|
|
<td rowspan="2" class="table-data dph-data2">{{tableData.num2}}</td>
|
||
|
|
<td>正常件</td>
|
||
|
|
<td class="table-data dph-data3">{{tableData.num3}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>滞留件</td>
|
||
|
|
<td class="table-data dph-data5">{{tableData.num4}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td rowspan="2">出库件</td>
|
||
|
|
<td rowspan="2" class="dph-data6">{{tableData.num5}}</td>
|
||
|
|
<td>派送件</td>
|
||
|
|
<td class="table-data dph-data7">{{tableData.num6}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>自提件</td>
|
||
|
|
<td class="table-data dph-data8">{{tableData.num7}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>退签件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data9">{{tableData.num8}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>丢失件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data4">{{tableData.num9}}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<table class="table1" style="display:none;">
|
||
|
|
<tr>
|
||
|
|
<td>入库件</td>
|
||
|
|
<td colspan="3" class="table-data mail-data1">1</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td rowspan="2">在库件</td>
|
||
|
|
<td rowspan="2" class="table-data mail-data2">1</td>
|
||
|
|
<td>正常件</td>
|
||
|
|
<td class="table-data mail-data7">1</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>滞留件</td>
|
||
|
|
<td class="table-data mail-data4">1</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>出库件</td>
|
||
|
|
<td colspan="3" class="mail-data6">1</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>丢失件</td>
|
||
|
|
<td colspan="3" class="mail-data3">1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>撤销件</td>
|
||
|
|
<td colspan="3" class="table-data mail-data5">1</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right-center">
|
||
|
|
<div class="title-box">
|
||
|
|
<p id="switchBtn"><span :class="activeType == '1' ? 'active' : ''" data-dataType="income" @click="expendData(1)">收入数据</span>
|
||
|
|
<img class="line-img" src="~@/assets/images/line-blue.png" alt="">
|
||
|
|
<span data-dataType="expend" :class="activeType == '2' ? 'active' : ''" @click="expendData(2)">支出数据</span></p>
|
||
|
|
<img class="line-img" src="~@/assets/images/line-blue.png" alt="">
|
||
|
|
<button id="dateBtn" @click="expendDate"><img src="~@/assets/images/data_icon.png" alt="">日期</button>
|
||
|
|
</div>
|
||
|
|
<div class="data-box">
|
||
|
|
<p class="data-number" id="totalProfit">{{money}}元</p>
|
||
|
|
<div class="time-box" id="timeBox" :style="{display:isExpend ? 'block' : 'none'}">
|
||
|
|
<div class="time-div">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="startTime"
|
||
|
|
type="date"
|
||
|
|
class="dataPicker"
|
||
|
|
:clearable="false"
|
||
|
|
placeholder=""
|
||
|
|
popper-class="startPop"
|
||
|
|
:picker-options="pickerOptions">
|
||
|
|
</el-date-picker>
|
||
|
|
<!-- <input class="time-input" type="text" value="" id="startTime">
|
||
|
|
<img src="~@/assets/images/selsct_time.png" alt=""> -->
|
||
|
|
</div>
|
||
|
|
<div class="time-div end">
|
||
|
|
<!-- <input class="time-input" type="text" value="" id="endTime">
|
||
|
|
<img src="~@/assets/images/selsct_time.png" alt=""> -->
|
||
|
|
<el-date-picker
|
||
|
|
v-model="endTime"
|
||
|
|
type="date"
|
||
|
|
class="dataPicker"
|
||
|
|
:clearable="false"
|
||
|
|
placeholder=""
|
||
|
|
popper-class="startPop secondPicker"
|
||
|
|
:picker-options="pickerOptions">
|
||
|
|
</el-date-picker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right-bottom">
|
||
|
|
<div class="title-box">
|
||
|
|
<button id="setBtn" @click="clickSet"><img src="~@/assets/images/settings_icon.png" alt="">设置</button>
|
||
|
|
</div>
|
||
|
|
<div class="data-box">
|
||
|
|
<div class="settings-box">
|
||
|
|
<p><img src="~@/assets/images/teacher_icon.png" alt="">今日值班：<span id="name_a"></span><span id="date_a"></span></p>
|
||
|
|
<p><img src="~@/assets/images/people_iocn.png" alt="">负责人：<span id="lea_a"></span></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="pop-up">
|
||
|
|
<span class="close-pop"></span>
|
||
|
|
<h2 class="title">当前到件量</h2>
|
||
|
|
<div class="pop-data-box">
|
||
|
|
<p>123,456,789</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pop-up">
|
||
|
|
<span class="close-pop"></span>
|
||
|
|
<h2 class="title">派件入库量占比</h2>
|
||
|
|
<div class="chart-box pie-chart">
|
||
|
|
<div id="pie1"></div>
|
||
|
|
<div>
|
||
|
|
<div class="pie-data">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pop-up">
|
||
|
|
<span class="close-pop"></span>
|
||
|
|
<h2 class="title">广东省寄派件数据 </h2>
|
||
|
|
<div class="filter-con pop-filter" style="display:flex" data-type="3">
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
派件
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul">
|
||
|
|
<li class="active" data-value="1">派件</li>
|
||
|
|
<li data-value="2">寄件</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
公司
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul company">
|
||
|
|
<li class="active" data-value="">公司</li>
|
||
|
|
<li data-value="1">顺丰</li>
|
||
|
|
<li data-value="2">京东</li>
|
||
|
|
<li data-value="2">EMS</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
快件类型
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul">
|
||
|
|
<li class="active" data-value="">快件类型</li>
|
||
|
|
<li data-value="0">文件</li>
|
||
|
|
<li data-value="1">物品</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart-box pop-chart">
|
||
|
|
<div id="gdMaps" class="gd-map"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pop-up">
|
||
|
|
<span class="close-pop"></span>
|
||
|
|
<div class="filter-con pop-filters" style="display:flex" data-type="4">
|
||
|
|
<div class="select-pop" tabindex="0" hidefocus="true">
|
||
|
|
<ul id="barTypes">
|
||
|
|
<li class="active" data-value="1">派件</li>
|
||
|
|
<li data-value="2">寄件</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
公司
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul company">
|
||
|
|
<li class="active" data-value="">公司</li>
|
||
|
|
<li data-value="1">顺丰</li>
|
||
|
|
<li data-value="2">京东</li>
|
||
|
|
<li data-value="2">EMS</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="select" tabindex="0" hidefocus="true">
|
||
|
|
<div class="select-div">
|
||
|
|
快件类型
|
||
|
|
</div>
|
||
|
|
<ul class="select-ul">
|
||
|
|
<li class="active" data-value="">快件类型</li>
|
||
|
|
<li data-value="0">文件</li>
|
||
|
|
<li data-value="1">物品</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cont-div">
|
||
|
|
<div class="chart-box pop-charts">
|
||
|
|
<div id="chart4s" style="width:100%;height:95%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cont-div">
|
||
|
|
<h2 class="title" id="barTitles">派件数据</h2>
|
||
|
|
<button class="btn-class" data-state=1 id="tabBtns"><img src="~@/assets/images/chart_icon.png" alt=""><span>图表</span></button>
|
||
|
|
<div class="chart-box pop-chart">
|
||
|
|
<div id="chart3s" style="width:100%;height:90%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="data-box" style="top:25%;width:8.6rem;display:none;">
|
||
|
|
<table class="table2">
|
||
|
|
<tr>
|
||
|
|
<td>入库件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data1">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td rowspan="2">在库件</td>
|
||
|
|
<td rowspan="2" class="table-data dph-data2">0</td>
|
||
|
|
<td>正常件</td>
|
||
|
|
<td class="table-data dph-data3">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>滞留件</td>
|
||
|
|
<td class="table-data dph-data5">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td rowspan="2">出库件</td>
|
||
|
|
<td rowspan="2" class="dph-data6">0</td>
|
||
|
|
<td>派送件</td>
|
||
|
|
<td class="table-data dph-data7">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>自提件</td>
|
||
|
|
<td class="table-data dph-data8">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>退签件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data9">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>丢失件</td>
|
||
|
|
<td colspan="3" class="table-data dph-data4">0</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<table class="table2" style="display:none;">
|
||
|
|
<tr>
|
||
|
|
<td>入库件</td>
|
||
|
|
<td colspan="3" class="table-data mail-data1">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td rowspan="2">在库件</td>
|
||
|
|
<td rowspan="2" class="table-data mail-data2">0</td>
|
||
|
|
<td>正常件</td>
|
||
|
|
<td class="table-data mail-data7">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>滞留件</td>
|
||
|
|
<td class="table-data mail-data4">0</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>出库件</td>
|
||
|
|
<td colspan="3" class="mail-data6">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="bg-color">
|
||
|
|
<td>丢失件</td>
|
||
|
|
<td colspan="3" class="mail-data3">0</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>撤销件</td>
|
||
|
|
<td colspan="3" class="table-data mail-data5">0</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cont-div">
|
||
|
|
<h2 class="title" id="titles"></h2>
|
||
|
|
<button class="btn-class" id="dateBtns"><img src="~@/assets/images/data_icon.png" alt="">日期</button>
|
||
|
|
<div class="data-box pop-time">
|
||
|
|
<div class="time-box" id="timeBoxs">
|
||
|
|
<div class="time-div">
|
||
|
|
<input class="time-input" type="text" value="" id="startTimes">
|
||
|
|
<img src="~@/assets/images/selsct_time.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="time-div end">
|
||
|
|
<input class="time-input" type="text" value="" id="endTimes">
|
||
|
|
<img src="~@/assets/images/selsct_time.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pop-data-box" id="totalProfits">
|
||
|
|
<p></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pop-data">
|
||
|
|
<div class="city-data">
|
||
|
|
<div class="city-box">
|
||
|
|
<p id="titleQs"><span>全网</span>到珠海</p>
|
||
|
|
<ul class="city-btn" data-city="2">
|
||
|
|
<li class="active">全网</li>
|
||
|
|
<li>ABCDE</li>
|
||
|
|
<li>FGHIJ</li>
|
||
|
|
<li>KLMNO</li>
|
||
|
|
<li>PQRST</li>
|
||
|
|
<li>UVWXYZ</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="city-div" id="citys">
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<ul class="ranking-box">
|
||
|
|
<li><span></span>
|
||
|
|
<p>城市</p>
|
||
|
|
<p>派件</p>
|
||
|
|
</li>
|
||
|
|
<!-- <li><span>1</span><p>上海</p><p>1sss25(万件)</p></li>-->
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pop-up" :style="{visibility:isSet ? 'visible' : ''}">
|
||
|
|
<span class="close-pop" @click="closeSet"></span>
|
||
|
|
<h2 class="title">设置</h2>
|
||
|
|
<div class="set-div">
|
||
|
|
<div class="set-box">
|
||
|
|
<label class="four-f" for="">排班日期</label>
|
||
|
|
<div class="time-div">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="scheduleTime"
|
||
|
|
type="date"
|
||
|
|
class="dataPicker"
|
||
|
|
:clearable="false"
|
||
|
|
placeholder=""
|
||
|
|
popper-class="startPop"
|
||
|
|
:picker-options="pickerOptions">
|
||
|
|
</el-date-picker>
|
||
|
|
<!-- <input class="time-input" type="text" value="" id="times">
|
||
|
|
<img src="~@/assets/images/selsct_time.png" alt=""> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="set-box">
|
||
|
|
<label for="">值班人</label>
|
||
|
|
<input type="text" value="">
|
||
|
|
<button class="plus" id="addT"></button>
|
||
|
|
<button class="mineus" id="mineusT" style="display:none;"></button>
|
||
|
|
</div>
|
||
|
|
<div class="set-box">
|
||
|
|
<label for="">负责人</label>
|
||
|
|
<input type="text" value="">
|
||
|
|
<button class="plus" id="addL"></button>
|
||
|
|
<button class="mineus" id="mineusL" style="display:none;"></button>
|
||
|
|
<button class="add-btn" id="addSet"><img src="~@/assets/images/plus.png" alt="">添加</button>
|
||
|
|
</div>
|
||
|
|
<table class="table3">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>值班人</th>
|
||
|
|
<th>排班日期</th>
|
||
|
|
<th>负责人</th>
|
||
|
|
<th>操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="tList">
|
||
|
|
<!--
|
||
|
|
<tr>
|
||
|
|
<td colspan="4">
|
||
|
|
<p style="width:9.6rem;">暂无数据</p>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
-->
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>1</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="pages-div mineus">
|
||
|
|
<button class="prev"></button>
|
||
|
|
<p id="page"><span>0</span>/<span>0</span></p>
|
||
|
|
<button class="next"></button>
|
||
|
|
<input type="number">
|
||
|
|
<button class="skip">跳转</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tishi">日期已存在!</div>
|
||
|
|
<div class="edit-div" style="display:none;">
|
||
|
|
<h4>编辑</h4>
|
||
|
|
<span class="close-edit"></span>
|
||
|
|
<div class="set-box">
|
||
|
|
<label for="">值班人</label>
|
||
|
|
<input class="input-edit" id="editT" type="text" value="">
|
||
|
|
</div>
|
||
|
|
<div class="set-box">
|
||
|
|
<label for="">负责人</label>
|
||
|
|
<input class="input-edit" id="editL" type="text" value="">
|
||
|
|
</div>
|
||
|
|
<div class="set-box edit-box">
|
||
|
|
<button id="qxEdit">取消</button>
|
||
|
|
<button id="qdEdit">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import china from "@/assets/json/china.json";
|
||
|
|
import prefecture from "@/assets/json/prefecture.json"
|
||
|
|
export default {
|
||
|
|
name: "DashBoard",
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
time:'00:00:00',
|
||
|
|
timer:null,
|
||
|
|
isTable:true,
|
||
|
|
ampm:"am",
|
||
|
|
date:'2022/12/09',
|
||
|
|
day:'2',
|
||
|
|
money:'123,456.5',
|
||
|
|
activeType:'1',
|
||
|
|
expressType:"1",
|
||
|
|
isExpend:false,
|
||
|
|
isFiltrate:false,
|
||
|
|
isSet:false,
|
||
|
|
tableName:"图表",
|
||
|
|
isWay:1,
|
||
|
|
imei:'',
|
||
|
|
key:'',
|
||
|
|
iframeUrl:"",
|
||
|
|
charData : [
|
||
|
|
{
|
||
|
|
name: '顺丰',
|
||
|
|
value: 192581,
|
||
|
|
percent: '30.8721',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '京东',
|
||
|
|
value: 215635,
|
||
|
|
percent: '34.076',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'EMS',
|
||
|
|
value: 224585,
|
||
|
|
percent: '35.49',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
myChart:null,
|
||
|
|
myChart1:null,
|
||
|
|
xData:[],
|
||
|
|
yData:[],
|
||
|
|
RealData : [],
|
||
|
|
borderData : [],
|
||
|
|
startColor:['#0e94eb', '#c440ef', '#efb013', '#2fda07', '#d8ef13', '#2e4af8', '#0eebc4', '#f129b1', '#17defc', '#f86363'],
|
||
|
|
borderStartColor:['#0077c5', '#a819d7', '#c99002', '#24bc00', '#b6cb04', '#112ee2', '#00bd9c', '#ce078f', '#00b2cd', '#ec3c3c'],
|
||
|
|
// chardata1:[
|
||
|
|
// {name: '广州市',value: 120057.34},{name: '韶关市',value: 15477.48},{name: '深圳市',value: 131686.1},{name: '珠海市',value: 6992.6},
|
||
|
|
// {name: '汕头市',value: 44045.49},{name: '佛山市',value: 40689.64},{name: '江门市',value: 37659.78},{name: '湛江市',value: 45180.97},
|
||
|
|
// {name: '茂名市',value: 5204.26},{name: '肇庆市',value: 21900.9},{name: '惠州市',value: 4918.26},{name: '梅州市',value: 5881.84},
|
||
|
|
// {name: '汕尾市',value: 4178.01},{name: '河源市',value: 2227.92},{name: '阳江市',value: 2180.98},{name: '清远市',value: 9172.94},
|
||
|
|
// {name: '东莞市',value: 3368},{name: '中山市',value: 306.98},{name: '潮州市',value: 810.66},{name: '揭阳市',value: 542.2},
|
||
|
|
// {name: '云浮市',value: 256.38}
|
||
|
|
// ],
|
||
|
|
chardata1:[
|
||
|
|
{name: '夏庄镇',value: 120057.34},{name: '库山乡',value: 15477.48},{name: '棋山镇',value: 131686.1},{name: '安庄镇',value: 6992.6},
|
||
|
|
{name: '果庄乡',value: 44045.49},{name: '洛河镇',value: 40689.64},{name: '招贤镇',value: 37659.78},{name: '桑园镇',value: 45180.97},
|
||
|
|
{name: '阎庄镇',value: 5204.26},{name: '城阳街道',value: 21900.9},{name: '莒县经济开发区',value: 4918.26},{name: '峤山镇',value: 5881.84},
|
||
|
|
{name: '浮来山镇',value: 4178.01},{name: '店子集镇',value: 2227.92},{name: '龙山镇',value: 2180.98},{name: '刘官庄镇',value: 9172.94},
|
||
|
|
{name: '陵阳镇',value: 3368},{name: '长岭镇',value: 306.98},{name: '寨里河镇',value: 810.66},{name: '东莞镇',value: 542.2},
|
||
|
|
{name: '小店镇',value: 256.38}
|
||
|
|
],
|
||
|
|
myChart1:null,
|
||
|
|
myCharts1:null,
|
||
|
|
myChart2:null,
|
||
|
|
myCharts2:null,
|
||
|
|
tableData:{
|
||
|
|
num1:0,num2:0,num3:0,num4:0,num5:0,num6:0,num7:0,num8:0,num9:0,
|
||
|
|
},
|
||
|
|
isShowWay:false,
|
||
|
|
companyName:'1',
|
||
|
|
isShowCom:false,
|
||
|
|
wayOptions:[
|
||
|
|
{
|
||
|
|
value: '1',
|
||
|
|
label: '派件'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '2',
|
||
|
|
label: '寄件'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
wayName:'1',
|
||
|
|
companyOptions:[
|
||
|
|
{ value: '1',label: '公司'},
|
||
|
|
{ value: '2',label: '顺丰'},
|
||
|
|
{ value: '3',label: '京东'},
|
||
|
|
{ value: '4',label: 'EMS'},
|
||
|
|
],
|
||
|
|
expressName:'0',
|
||
|
|
expressOptions:[
|
||
|
|
{ value: '0',label: '文件'},
|
||
|
|
{ value: '2',label: '物品'},
|
||
|
|
],
|
||
|
|
comName:'1',
|
||
|
|
comOptions:[
|
||
|
|
{ value: '1',label: '公司'},
|
||
|
|
{ value: '2',label: '顺丰'},
|
||
|
|
{ value: '3',label: '京东'},
|
||
|
|
{ value: '4',label: 'EMS'},
|
||
|
|
],
|
||
|
|
kjName:'0',
|
||
|
|
startTime:'',
|
||
|
|
endTime:'',
|
||
|
|
scheduleTime:'',
|
||
|
|
pickerOptions: {
|
||
|
|
disabledDate(time) {
|
||
|
|
return time.getTime() > Date.now();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.getTime()
|
||
|
|
this.$nextTick(() =>{
|
||
|
|
this.createCharts();
|
||
|
|
this.createCharts1();
|
||
|
|
this.createCharts2(1,'')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.imei = '41000002503';
|
||
|
|
this.key = "266843ed-5d4f-472c-beec-e5e50a114d47"
|
||
|
|
this.iframeUrl = "https://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=" + this.imei + "&KEY=" + this.key
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
fn(str){
|
||
|
|
let num = null;
|
||
|
|
str >= 10 ? num = str : num = "0" + str;
|
||
|
|
return num
|
||
|
|
},
|
||
|
|
getTime(){
|
||
|
|
//获取当前时间
|
||
|
|
this.timer = setInterval( () => {
|
||
|
|
var date = new Date();
|
||
|
|
var year = date.getFullYear(); //当前年份
|
||
|
|
var month = date.getMonth(); //当前月份
|
||
|
|
var data = date.getDate(); //天
|
||
|
|
var hours = date.getHours(); //小时
|
||
|
|
var minute = date.getMinutes(); //分
|
||
|
|
var second = date.getSeconds(); //秒
|
||
|
|
this.day = date.getDay(); //获取当前星期几
|
||
|
|
this.ampm = hours < 12 ? 'am' : 'pm';
|
||
|
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
|
||
|
|
this.date = year + '/' + (month + 1) + '/' + data
|
||
|
|
// $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
|
||
|
|
// $('#date').html('')
|
||
|
|
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
createCharts(){
|
||
|
|
this.myChart = this.$echarts.init(document.getElementById('pie'));
|
||
|
|
this.myChart1 = this.$echarts.init(document.getElementById('pie1'));
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
myChart.resize();
|
||
|
|
myChart1.resize();
|
||
|
|
});
|
||
|
|
var str = '';
|
||
|
|
for (var i = 0; i < this.charData.length; i++) {
|
||
|
|
str += '<p><span><i class="legend" style="background:'
|
||
|
|
+ this.startColor[i] + '"></i></span>' + this.charData[i].name
|
||
|
|
+ '<span class="pie-number" style="color:' + this.startColor[i] + '">'
|
||
|
|
+ this.charData[i].value + '</span>' + Number(this.charData[i].percent).toFixed(2) + '%</p>';
|
||
|
|
};
|
||
|
|
document.getElementById('pie-data').innerHTML += str
|
||
|
|
this.charData.map((a,b) =>{
|
||
|
|
this.xData.push(a.name);
|
||
|
|
this.yData.push(a.value)
|
||
|
|
});
|
||
|
|
this.charData.map((item, index) => {
|
||
|
|
var newobj = this.deepCopy(item);
|
||
|
|
var newobj1 = this.deepCopy(item);
|
||
|
|
this.RealData.push(newobj);
|
||
|
|
this.borderData.push(newobj1);
|
||
|
|
});
|
||
|
|
this.RealData.map((item, index) => {
|
||
|
|
item.itemStyle = {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: this.startColor[index] // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: this.startColor[index] // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.borderData.map((item, index) => {
|
||
|
|
item.itemStyle = {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: this.borderStartColor[index] // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: this.borderStartColor[index] // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
// position: ['30%', '50%'],
|
||
|
|
confine: true,
|
||
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
// 主要展示层的
|
||
|
|
{
|
||
|
|
radius: ['50%', '85%'],
|
||
|
|
center: ['50%', '50%'],
|
||
|
|
type: 'pie',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
name: "派件入库量占比内容",
|
||
|
|
data: this.RealData
|
||
|
|
},
|
||
|
|
// 边框的设置
|
||
|
|
{
|
||
|
|
radius: ['45%', '50%'],
|
||
|
|
center: ['50%', '50%'],
|
||
|
|
type: 'pie',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
animation: false,
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: this.borderData
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
this.myChart.setOption(option);
|
||
|
|
this.myChart1.setOption(option);
|
||
|
|
},
|
||
|
|
createCharts1(){
|
||
|
|
this.myChart1 = this.$echarts.init(document.getElementById('gdMap'));
|
||
|
|
this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps'));
|
||
|
|
this.$echarts.registerMap("莒县", prefecture, {});
|
||
|
|
// this.$echarts.registerMap("莒县", china, {});
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
this.myChart1.resize();
|
||
|
|
this.myCharts1.resize();
|
||
|
|
});
|
||
|
|
var yMax = 0;
|
||
|
|
for (var j = 0; j < this.chardata1.length; j++) {
|
||
|
|
if (yMax < this.chardata1[j].value) {
|
||
|
|
yMax = this.chardata1[j].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.myChart1.hideLoading();
|
||
|
|
this.myCharts1.hideLoading();
|
||
|
|
var option = {
|
||
|
|
animation: true,
|
||
|
|
tooltip: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
visualMap: {
|
||
|
|
min: 0,
|
||
|
|
max: yMax,
|
||
|
|
text: ['高', '低'],
|
||
|
|
orient: 'horizontal',
|
||
|
|
itemWidth: 15,
|
||
|
|
itemHeight: 200,
|
||
|
|
right: 0,
|
||
|
|
bottom: 30,
|
||
|
|
inRange: {
|
||
|
|
color: ['#75ddff', '#0e94eb']
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
color: 'white'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '数据名称',
|
||
|
|
type: 'map',
|
||
|
|
mapType: '莒县',
|
||
|
|
selectedMode: 'multiple',
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
formatter: '{b}<br/>{c} (件)'
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#0e94eb',
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: { // 也是选中样式
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#fff',
|
||
|
|
backgroundColor: 'red',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: this.chardata1,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
this.myChart1.setOption(option);
|
||
|
|
this.myCharts1.setOption(option);
|
||
|
|
},
|
||
|
|
createCharts2(type, chartType){
|
||
|
|
this.myChart2 = this.$echarts.init(document.getElementById('chart3'));
|
||
|
|
this.myCharts2 = this.$echarts.init(document.getElementById('chart3s'));
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
this.myChart2.resize();
|
||
|
|
this.myCharts2.resize();
|
||
|
|
});
|
||
|
|
// 设置背景阴影的参数，获取数据的最大值
|
||
|
|
var data; //横坐标数据，不动
|
||
|
|
var data_; //模拟数据
|
||
|
|
if (type == 1) {
|
||
|
|
data_ = [{
|
||
|
|
name: "入库件",
|
||
|
|
value: 584
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "滞留件",
|
||
|
|
value: 152
|
||
|
|
}, {
|
||
|
|
name: "丢失件",
|
||
|
|
value: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "正常件",
|
||
|
|
value: 689
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "派送件",
|
||
|
|
value: 200
|
||
|
|
}, {
|
||
|
|
name: "自提件",
|
||
|
|
value: 121
|
||
|
|
}, {
|
||
|
|
name: "退签件",
|
||
|
|
value: 92
|
||
|
|
}]
|
||
|
|
} else if (type == 2) {
|
||
|
|
data_ = [{
|
||
|
|
name: "入库件",
|
||
|
|
value: 568
|
||
|
|
}, {
|
||
|
|
name: "丢失件",
|
||
|
|
value: 287
|
||
|
|
}, {
|
||
|
|
name: "滞留件",
|
||
|
|
value: 120
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "撤销件",
|
||
|
|
value: 152
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "出库件",
|
||
|
|
value: 125
|
||
|
|
}, {
|
||
|
|
name: "正常件",
|
||
|
|
value: 122
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
var series_data; //绘制图表的数据
|
||
|
|
//绘制图表
|
||
|
|
var yMax = 0;
|
||
|
|
for (var j = 0; j < data_.length; j++) {
|
||
|
|
if (yMax < data_[j].value) {
|
||
|
|
yMax = data_[j].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var dataShadow = [];
|
||
|
|
for (var i = 0; i < 10; i++) {
|
||
|
|
dataShadow.push(yMax * 2);
|
||
|
|
}
|
||
|
|
if (type == 1) {
|
||
|
|
data = ['入库件', '在库件', '出库件', '退签件', '丢失件'];
|
||
|
|
this.tableData.num1 = data_[0].value
|
||
|
|
this.tableData.num2 = data_[1].value + data_[3].value
|
||
|
|
this.tableData.num3 = data_[3].value
|
||
|
|
this.tableData.num4 = data_[2].value
|
||
|
|
this.tableData.num5 = data_[1].value
|
||
|
|
this.tableData.num6 = data_[4].value + data_[5].value
|
||
|
|
this.tableData.num7 = data_[4].value
|
||
|
|
this.tableData.num8 = data_[5].value
|
||
|
|
this.tableData.num9 = data_[6].value
|
||
|
|
|
||
|
|
series_data = [
|
||
|
|
{ // For shadow
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: 20,
|
||
|
|
xAxisIndex: 2,
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(14, 148, 235, 0.102)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: dataShadow,
|
||
|
|
animation: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '入库件',
|
||
|
|
type: 'bar',
|
||
|
|
barGap: '-100%',
|
||
|
|
barWidth: '40%',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#0e94eb'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [data_[0], 0, 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '滞留件',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '在库件',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,.9)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, data_[1], 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '丢失件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,0.4)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, 0, 0, data_[2]],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '正常件',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '在库件',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,0.3)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, data_[3], 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '派送件',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '出库件',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(196,64,239,0.8)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, data_[4], 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '自提件',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '出库件',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(196,64,239,0.4)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, data_[5], 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '退签件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(219,44,44,0.8)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, 0, data_[6], 0],
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}else if(type == 2){
|
||
|
|
data = ['入库件', '在库件', '出库件', '丢失件', '撤销件'];
|
||
|
|
this.tableData.num1 = data_[0].value
|
||
|
|
this.tableData.num2 = data_[1].value + data_[3].value
|
||
|
|
this.tableData.num3 = data_[3].value
|
||
|
|
this.tableData.num4 = data_[2].value
|
||
|
|
this.tableData.num5 = data_[1].value
|
||
|
|
this.tableData.num6 = data_[4].value + data_[5].value
|
||
|
|
this.tableData.num7 = data_[4].value
|
||
|
|
this.tableData.num8 = data_[5].value
|
||
|
|
this.tableData.num9 = data_[6].value
|
||
|
|
series_data = [
|
||
|
|
{ // For shadow
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: 20,
|
||
|
|
xAxisIndex: 2,
|
||
|
|
tooltip: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(14, 148, 235, 0.102)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: dataShadow,
|
||
|
|
animation: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '入库件',
|
||
|
|
barGap: '-100%',
|
||
|
|
barWidth: '40%',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#0e94eb'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [data_[0], 0, 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '正常件',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '在库件',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,.9)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, data_[5], 0, 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '丢失件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,.9)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, 0, data_[1], 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '滞留件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
stack: '在库件',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,0.4)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data: [0, data_[2], 0, 0, 0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '撤销件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(239,176,19,0.3)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, 0, 0, data_[3]],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '出库件',
|
||
|
|
type: 'bar',
|
||
|
|
xAxisIndex: 1,
|
||
|
|
stack: '退签件',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(196,64,239,0.8)'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
opacity: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [0, 0, data_[4], 0, 0],
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
var option = {
|
||
|
|
title: '',
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
show: false,
|
||
|
|
data: data,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
position: "bottom",
|
||
|
|
data: data,
|
||
|
|
boundaryGap: true,
|
||
|
|
// offset: 40,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
show: false,
|
||
|
|
data: dataShadow,
|
||
|
|
axisLabel: {
|
||
|
|
inside: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
z: 10
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
show: true,
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0e94eb"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
color: '#0e94eb'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
show: false,
|
||
|
|
type: "value",
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#0e94eb'
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#0e94eb'
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#999'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
// color: ['#e54035'],
|
||
|
|
series: series_data
|
||
|
|
}
|
||
|
|
if (chartType === '') {
|
||
|
|
this.myChart2.clear();
|
||
|
|
this.myCharts2.clear();
|
||
|
|
this.myChart2.setOption(option);
|
||
|
|
this.myCharts2.setOption(option);
|
||
|
|
} else if (chartType === 0) {
|
||
|
|
this.myChart2.clear();
|
||
|
|
this.myChart2.setOption(option);
|
||
|
|
} else if (chartType === 1) {
|
||
|
|
this.myCharts2.clear();
|
||
|
|
this.myCharts2.setOption(option);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
expendData(type){
|
||
|
|
this.activeType = type
|
||
|
|
this.money = type == 1 ? "123456.5" : "32,111.4"
|
||
|
|
},
|
||
|
|
expendDate(){
|
||
|
|
this.isExpend = !this.isExpend
|
||
|
|
},
|
||
|
|
postExpressage(type){
|
||
|
|
this.expressType = type;
|
||
|
|
this.$nextTick(() =>{
|
||
|
|
this.createCharts2(type,'')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
filtrate(){
|
||
|
|
console.log(this.isFiltrate)
|
||
|
|
this.isFiltrate = !this.isFiltrate
|
||
|
|
},
|
||
|
|
clickTable(){
|
||
|
|
console.log(this.isTable)
|
||
|
|
this.isTable = !this.isTable
|
||
|
|
this.tableName = this.isTable ? '图表' : '表格'
|
||
|
|
},
|
||
|
|
clickSet(){
|
||
|
|
this.isSet = !this.isSet
|
||
|
|
},
|
||
|
|
closeSet(){
|
||
|
|
|
||
|
|
this.isSet = false;
|
||
|
|
console.log(this.isSet)
|
||
|
|
},
|
||
|
|
clickWay(){
|
||
|
|
this.isShowWay = !this.isShowWay;
|
||
|
|
},
|
||
|
|
clickisWay(way){
|
||
|
|
this.isShowWay = false;
|
||
|
|
this.isWay = way
|
||
|
|
this.wayName = way == 1 ? '派件' : '寄件'
|
||
|
|
console.log(this.isShowWay)
|
||
|
|
},
|
||
|
|
clickCompany(){
|
||
|
|
this.isShowCom = true
|
||
|
|
},
|
||
|
|
clickCom(way){
|
||
|
|
this.companyName = way == 1 ? '公司' : way == 2 ? '顺丰' : way == 3 ? '京东' : 'EMS'
|
||
|
|
this.isShowCom = false
|
||
|
|
},
|
||
|
|
deepCopy(obj){
|
||
|
|
if (typeof obj !== 'object') {
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
var newobj = {};
|
||
|
|
for (var attr in obj) {
|
||
|
|
newobj[attr] = obj[attr];
|
||
|
|
}
|
||
|
|
return newobj;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import "@/styles/style.css";
|
||
|
|
.contant_box{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-con{
|
||
|
|
.el-select{
|
||
|
|
width:1.6rem;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.el-input{
|
||
|
|
width:100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 0.18rem;
|
||
|
|
|
||
|
|
.el-input__inner{
|
||
|
|
font-size: 0.18rem;
|
||
|
|
width:100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 0;
|
||
|
|
border: 1px solid #0E94EA;
|
||
|
|
background: transparent;
|
||
|
|
color:#fff;
|
||
|
|
|
||
|
|
&:focus{
|
||
|
|
border: 1px solid #0E94EA;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.el-input__icon{
|
||
|
|
line-height: 0;
|
||
|
|
font-size: 0.25rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-select-dropdown{
|
||
|
|
border:none !important;
|
||
|
|
width:1.6rem !important;
|
||
|
|
border-radius: 0 !important;
|
||
|
|
.el-select-dropdown__list{
|
||
|
|
padding: 0 !important;
|
||
|
|
.el-select-dropdown__item{
|
||
|
|
height: 0.5rem;
|
||
|
|
line-height: 0.5rem;
|
||
|
|
font-size: 0.18rem;
|
||
|
|
}
|
||
|
|
.el-select-dropdown__item.hover{
|
||
|
|
background: #0e94eb;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.el-select-dropdown__item.selected{
|
||
|
|
background:#0e94eb;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.popper__arrow{
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.firstPop{
|
||
|
|
top: 1.8rem !important;
|
||
|
|
}
|
||
|
|
.secondPop{
|
||
|
|
top: 6.2rem !important;
|
||
|
|
}
|
||
|
|
// .time-box .set-box{
|
||
|
|
.time-div{
|
||
|
|
border:1px solid #0E94EA;
|
||
|
|
height: 0.36rem;
|
||
|
|
width: 1.8rem;
|
||
|
|
|
||
|
|
.dataPicker{
|
||
|
|
width: 100% !important;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
.el-input__inner{
|
||
|
|
border-radius: 0;
|
||
|
|
border: 0;
|
||
|
|
background: transparent;
|
||
|
|
font-size: 0.18rem;
|
||
|
|
height: 100%;
|
||
|
|
margin-top: 0;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
color: #fff;
|
||
|
|
background: rgba(14, 148, 234, 0.2);
|
||
|
|
padding: 0 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-input__prefix{
|
||
|
|
font-size: 0.18rem;
|
||
|
|
color:#fff;
|
||
|
|
|
||
|
|
.el-input__icon{
|
||
|
|
line-height: 0;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// }
|
||
|
|
.secondPicker{
|
||
|
|
left: 15.54rem !important;
|
||
|
|
}
|
||
|
|
.startPop{
|
||
|
|
width: 3.5rem !important;
|
||
|
|
height: 4rem;
|
||
|
|
margin-top: 0.2rem;
|
||
|
|
line-height: 0.2rem !important;
|
||
|
|
margin-top: 0.12rem !important;
|
||
|
|
|
||
|
|
.el-picker-panel__body-wrapper{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 0.2rem;
|
||
|
|
|
||
|
|
.el-picker-panel__body{
|
||
|
|
width:100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.el-date-picker__header{
|
||
|
|
margin: 0 0.28rem;
|
||
|
|
line-height: 0.1rem;
|
||
|
|
height: 0.8rem;
|
||
|
|
|
||
|
|
.el-date-picker__header-label{
|
||
|
|
font-size: 0.18rem;
|
||
|
|
position: relative;
|
||
|
|
top: -0.72rem;
|
||
|
|
}
|
||
|
|
.el-date-picker__header-label:last-child{
|
||
|
|
margin-left: 1rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-picker-panel__icon-btn{
|
||
|
|
font-size: 0.2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-picker-panel__content{
|
||
|
|
width: 100% !important;
|
||
|
|
margin: 0rem;
|
||
|
|
|
||
|
|
.el-date-table{
|
||
|
|
font-size: 0.18rem;
|
||
|
|
|
||
|
|
.el-date-table__row{
|
||
|
|
td{
|
||
|
|
height:0.2rem;
|
||
|
|
|
||
|
|
div{
|
||
|
|
height: 0.2rem;
|
||
|
|
|
||
|
|
|
||
|
|
span{
|
||
|
|
width: 0.4rem;
|
||
|
|
height: 0.4rem;
|
||
|
|
line-height: 0.4rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popper__arrow{
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-date-picker{
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-popper .popper__arrow{
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
</style>
|