|
|
|
|
<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="full_box">
|
|
|
|
|
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
|
|
|
|
|
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<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"
|
|
|
|
|
import isFullscreen from "@/assets/js/full.js"
|
|
|
|
|
import screenfull from "screenfull";
|
|
|
|
|
// import prefecture from "@/assets/json/data.json";
|
|
|
|
|
export default {
|
|
|
|
|
name: "DashBoard",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isFullFlag:false,
|
|
|
|
|
isSupport:false,
|
|
|
|
|
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.isSupport=document.fullscreenEnabled
|
|
|
|
|
// 监听页面全屏
|
|
|
|
|
window.addEventListener("fullscreenchange", (e)=> {
|
|
|
|
|
if (this.isSupport) {
|
|
|
|
|
document.fullscreenElement ? this.isFullFlag = true : this.isFullFlag = false
|
|
|
|
|
}
|
|
|
|
|
console.log(this.isSupport)
|
|
|
|
|
})
|
|
|
|
|
window.addEventListener('keydown', this.handleKeyDown, true)
|
|
|
|
|
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: {
|
|
|
|
|
handleKeyDown(e) {
|
|
|
|
|
console.log('ces')
|
|
|
|
|
if (e.keyCode === 122) {
|
|
|
|
|
console.log(1111)
|
|
|
|
|
e.preventDefault() // 阻止默认事件
|
|
|
|
|
e.stopPropagation() // 阻止冒泡事件
|
|
|
|
|
this.clickFun()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// isScreenFull() {
|
|
|
|
|
// if (!screenfull.isEnabled) {
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
// // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
|
|
|
|
|
// // 无需自己再判断当前屏幕状态
|
|
|
|
|
// screenfull.toggle();
|
|
|
|
|
// },
|
|
|
|
|
clickFun(){
|
|
|
|
|
if (this.isSupport) {
|
|
|
|
|
if (document.fullscreenElement) {
|
|
|
|
|
//document.exitFullscreen()退出全屏模式的方法
|
|
|
|
|
document.exitFullscreen();
|
|
|
|
|
this.isFullFlag = false;
|
|
|
|
|
} else {
|
|
|
|
|
//requestFullscreen(),请求全屏的方法
|
|
|
|
|
document.documentElement.requestFullscreen();
|
|
|
|
|
this.isFullFlag = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(this.isFullFlag)
|
|
|
|
|
// this.isFullFlag =!this.isFullFlag
|
|
|
|
|
// if (!screenfull.enabled) {
|
|
|
|
|
// this.$message({
|
|
|
|
|
// message: 'Your browser does not work',
|
|
|
|
|
// type: 'warning'
|
|
|
|
|
// })
|
|
|
|
|
// return false
|
|
|
|
|
// }
|
|
|
|
|
// screenfull.toggle()
|
|
|
|
|
},
|
|
|
|
|
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", ()=> {
|
|
|
|
|
this.myChart.resize();
|
|
|
|
|
this.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, {});
|
|
|
|
|
this.$echarts.registerMap("莒县", prefecture, {});
|
|
|
|
|
window.addEventListener("resize", ()=> {
|
|
|
|
|
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: "莒县",
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
console.log(option.series)
|
|
|
|
|
|
|
|
|
|
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", ()=> {
|
|
|
|
|
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: {
|
|
|
|
|
bottom:"8%"
|
|
|
|
|
// 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;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
window.removeEventListener('keydown', this.handleKeyDown)
|
|
|
|
|
window.removedEventListener('fullscreenchange', (e)=> {
|
|
|
|
|
if (this.isSupport) {
|
|
|
|
|
document.fullscreenElement ? this.isFullFlag = true : this.isFullFlag = false
|
|
|
|
|
}
|
|
|
|
|
console.log(this.isSupport)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</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>
|
