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.
1924 lines
58 KiB
1924 lines
58 KiB
<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>
|
|
|