suojin
/
physical_distribution
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改乡镇模块页面及数据

Browse Source
main
jinna 3 years ago
parent e37ea66ff0
commit 17e9399b4a
1 changed files with 414 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 550
      src/views/dashboard/homepage.vue

550
src/views/dashboard/homepage.vue
Unescape View File

@ -13,32 +13,86 @@
</div>
<div class="left_cen">
<div class="title_box">
<div class="left_tit">收件量</div>
<div class="left_tit">{{ activeName }}</div>
<div class="right_tit">
<div class="btn">收</div>
<div class="btn">发</div>
<div class="btn">到</div>
<div class="btn">派</div>
<div class="btn">签</div>
<div class="btn" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)">收</div>
<div class="btn" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)">发</div>
<div class="btn" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)">到</div>
<div class="btn" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)">派</div>
<div class="btn" :class="isActive == 5 ? 'active' : ''" @click="changeBtn(5)">签</div>
</div>
</div>
<div class="cen_con">
<!-- <swiper :options="swiperOptions">
<swiper-slide v-for="(item, index) in slideList" :key="index">
<table>
<tr>
<th>排名</th>
<th>乡镇</th>
<th>运单量</th>
</tr>
<tr v-for="item1 in item.arr" :key="item1.no">
<td>{{item1.no}}</td>
<td>{{item1.name}}</td>
<td>{{item1.count}}</td>
</tr>
</table>
</swiper-slide>
</swiper> -->
<!-- <div class="swiper_box">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in slideList" :key="index">
<table>
<tr>
<th>排名</th>
<th>乡镇</th>
<th>运单量</th>
</tr>
<tr v-for="item1 in item.arr" :key="item1.no">
<td>{{ item1.no }}</td>
<td>{{ item1.name }}</td>
<td>{{ item1.count }}</td>
</tr>
</table>
</div>
</div>
</div> -->
<div class="swiper-container" v-if="isSlide">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in slideList" :key="index">
<table>
<tr>
<th>排名</th>
<th>乡镇</th>
<th>运单量</th>
</tr>
<tr v-for="item1 in item.arr" :key="item1.no">
<td>{{ item1.no }}</td>
<td>{{ item1.name }}</td>
<td>{{ item1.count }}</td>
</tr>
</table>
</div>
<!-- <div class="swiper-slide">Slide 2</div> -->
</div>
</div>
</div>
<div class="cen_con"></div>
</div>
<div class="left_bot">
<div class="title_box">
<div class="tit">村点信息</div>
</div>
<div class="table_box">
<table cellspacing=30>
<table cellspacing="30">
<tr>
<th>站点名称</th>
<th>上行</th>
<th>下行</th>
</tr>
<tr v-for="item in villageData" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.upData}}</td>
<td>{{item.downData}}</td>
<td>{{ item.name }}</td>
<td>{{ item.upData }}</td>
<td>{{ item.downData }}</td>
</tr>
</table>
</div>
@ -51,16 +105,20 @@
<div class="cen_data">
<div class="data_top">
<div class="left_btn">
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">按日</div>
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">按月</div>
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">
按日
</div>
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">
按月
</div>
</div>
<div class="right_time">数据更新时间:2022-01-09</div>
</div>
<div class="data_bot">
<div class="data_box" v-for="item in totalData" :key="item.name">
<div class="data_txt">{{item.name}}</div>
<div class="data_txt" style="font-size:0.38rem">{{item.data}}</div>
<div class="data_txt">环比{{item.huanbi}}</div>
<div class="data_txt">{{ item.name }}</div>
<div class="data_txt" style="font-size: 0.38rem">{{ item.data }}</div>
<div class="data_txt">环比{{ item.huanbi }}</div>
</div>
</div>
</div>
@ -78,14 +136,14 @@
</div>
<div class="right_box">
<div class="full_btn">
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
<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">
<div class="tit">派件入库量占比</div>
</div>
<div class="pie_box" id="pieChart"></div>
<div class="pie_box" id="pieChart"></div>
</div>
<div class="right_center">
<div class="title_box">
@ -104,18 +162,24 @@
</template>
<script>
import Swiper from "swiper";
import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs";
import PathMap from '../components/pathMap';
import ShowMap from '../components/showmap';
import CarMile from '../components/carMile';
import CarWarn from '../components/carWarn';
import PathMap from "../components/pathMap";
import ShowMap from "../components/showmap";
import CarMile from "../components/carMile";
import CarWarn from "../components/carWarn";
import { queryWeath } from "@/api/base";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
components: {
PathMap,
CarMile,
CarWarn,
ShowMap,
// swiper,
// swiperSlide,
},
data() {
return {
@ -124,29 +188,169 @@ export default {
time: "",
date: "",
week: "",
isFullFlag:false,
isSupport:false,
dayData:[],
monthData:[],
totalData:[],
active:1,
xData:[],
yData1:[],
yData2:[],
villageData:[
]
isFullFlag: false,
isSupport: false,
dayData: [],
monthData: [],
totalData: [],
active: 1,
xData: [],
yData1: [],
yData2: [],
villageData: [],
mySwiper:null,
swiperOptions: {
autoplay: {
delay: 2500,
disableOnInteraction: true,
stopOnLastSlide: false,
},
loop: true,
// effect: "cube",
// cube: {
// slideShadows: true,
// shadow: true,
// shadowOffset: 100,
// shadowScale: 0.6,
// },
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
// progressbarOpposite: true,
},
},
slideList: [
{
arr: [],
},
{
arr: [],
},
],
shouData: [],
faData: [],
daoData: [],
paiData: [],
qianData: [],
isActive: 1,
activeName: "收件量",
isSlide:false
};
},
created() {
this.getTime();
this.readExcelFile("http://192.168.1.35:8081/excel/wuliu.xlsx");
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
},
mounted() {
this.isSupport=document.fullscreenEnabled
this.isSupport = document.fullscreenEnabled;
queryWeath().then((res) => {
console.log(res);
});
},
methods: {
readExcelFile(url) {
run() {
this.mySwiper = new Swiper(".swiper-container", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
autoplay: true, //可选选项，自动滑动
delay: 5000, //1秒切换一次
observer:true,
observeParents: true, //修改swiper的父元素时，自动初始化swiper
// onSlideChangeEnd: function (swiper) {
// console.log('测试')
// //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
// swiper.update();
// //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
// swiper.reLoop();
// //重新开始自动切换；
// swiper.startAutoplay();
// },
// 如果需要分页器
// pagination: {
// el: ".swiper-pagination",
// },
// 如果需要前进后退按钮
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// 如果需要滚动条
// scrollbar: {
// el: ".swiper-scrollbar",
// },
});
},
changeBtn(val) {
this.isActive = val;
this.slideList = [{ arr: [] }, { arr: [] }];
this.isSlide = false
if (val == 1) {
this.activeName = "收件量";
this.shouData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
} else if (val == 2) {
this.activeName = "发件量";
this.faData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
} else if (val == 3) {
this.activeName = "到件量";
this.daoData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
} else if (val == 4) {
this.activeName = "派件量";
this.paiData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
} else if (val == 5) {
this.activeName = "签件量";
this.qianData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
}
if(this.slideList){
this.isSlide = true;
}
this.$nextTick(() => {
// console.log(this.slideList)
// this.mySwiper.update()
// this.run()
});
},
readExcelFile(url) {
axios
.get(url, {
responseType: "arraybuffer",
@ -154,11 +358,11 @@ export default {
.then((res) => {
// console.log(res);
let data = new Uint8Array(res);
// console.log(data);
// console.log(data);
let wb = XLSX.read(data, {
type: "array",
});
// console.log(wb);
// console.log(wb);
let sheets = wb.Sheets; // 获取文档数据
// console.log(sheets);
this.content = this.transformSheets(sheets);
@ -169,46 +373,80 @@ export default {
for (const key in sheets) {
content1.push(XLSX.utils.sheet_to_json(sheets[key]));
}
console.log(content1);
// console.log(content1);/
this.dayData.push(
{name:'收件量',data:content1[0][0].日总收件量,huanbi:content1[0][0].收件量日总环比},
{name:'发件量',data:content1[0][0].日总发件量,huanbi:content1[0][0].发件量日总环比},
{name:'到件量',data:content1[0][0].日总到件量,huanbi:content1[0][0].到件量日总环比},
{name:'派件量',data:content1[0][0].日总派件量,huanbi:content1[0][0].派件量日总环比},
{name:'签件量',data:content1[0][0].日总签件量,huanbi:content1[0][0].签件量日总环比},
)
{ name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 },
{ name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 },
{ name: "到件量", data: content1[0][0].日总到件量, huanbi: content1[0][0].到件量日总环比 },
{ name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 },
{ name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 }
);
this.monthData.push(
{name:'收件量',data:content1[0][0].月总收件量,huanbi:content1[0][0].收件量月总环比},
{name:'发件量',data:content1[0][0].月总发件量,huanbi:content1[0][0].发件量月总环比},
{name:'到件量',data:content1[0][0].月总到件量,huanbi:content1[0][0].到件量月总环比},
{name:'派件量',data:content1[0][0].月总派件量,huanbi:content1[0][0].派件量月总环比},
{name:'签件量',data:content1[0][0].月总签件量,huanbi:content1[0][0].签件量月总环比},
)
this.totalData = this.dayData
content1[1].map(item =>{
this.xData.unshift(item.日期.substring(item.日期.length-5).replace('.','-'))
this.yData1.push(item.到件量)
this.yData2.push(item.派件量)
})
content1[3].map(item =>{
this.villageData.push({name:item.村点名称,upData:item.上行,downData:item.下行})
})
console.log(this.villageData)
this.$nextTick(() =>{
this.createChart()
})
{ name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 },
{ name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 },
{ name: "到件量", data: content1[0][0].月总到件量, huanbi: content1[0][0].到件量月总环比 },
{ name: "派件量", data: content1[0][0].月总派件量, huanbi: content1[0][0].派件量月总环比 },
{ name: "签件量", data: content1[0][0].月总签件量, huanbi: content1[0][0].签件量月总环比 }
);
this.totalData = this.dayData;
content1[1].map((item) => {
this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-"));
this.yData1.push(item.到件量);
this.yData2.push(item.派件量);
});
content1[3].map((item) => {
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
});
content1[2].map((item, index) => {
this.shouData.push({ name: item.名称, count: item.收件量 });
this.shouData = this.shouData.sort(function (a, b) {
return b.count - a.count;
});
this.faData.push({ name: item.名称, count: item.发件量 });
this.faData = this.faData.sort(function (a, b) {
return b.count - a.count;
});
this.daoData.push({ name: item.名称, count: item.到件量 });
this.daoData = this.daoData.sort(function (a, b) {
return b.count - a.count;
});
this.paiData.push({ name: item.名称, count: item.派件量 });
this.paiData = this.paiData.sort(function (a, b) {
return b.count - a.count;
});
this.qianData.push({ name: item.名称, count: item.签件量 });
this.qianData = this.qianData.sort(function (a, b) {
return b.count - a.count;
});
});
this.shouData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
} else {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
}
});
console.log(this.slideList);
if(this.slideList){
this.isSlide = true
}
this.$nextTick(() => {
this.createChart();
this.run();
});
},
// 按照日月更换数据
changeData(val){
this.active = val
if(val == 1){
this.totalData = this.dayData
}else if(val == 2){
this.totalData = this.monthData
changeData(val) {
this.active = val;
if (val == 1) {
this.totalData = this.dayData;
} else if (val == 2) {
this.totalData = this.monthData;
}
},
clickFun(){
clickFun() {
if (this.isSupport) {
if (document.fullscreenElement) {
//document.exitFullscreen()退出全屏模式的方法
@ -219,17 +457,17 @@ export default {
document.documentElement.requestFullscreen();
this.isFullFlag = true;
}
}
console.log(this.isFullFlag)
}
// 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()
// if (!screenfull.enabled) {
// this.$message({
// message: 'Your browser does not work',
// type: 'warning'
// })
// return false
// }
// screenfull.toggle()
},
createChart() {
@ -238,7 +476,7 @@ export default {
this.trendChart.resize();
});
var option = {
color: ["#91cc75", "#4cabce", ],
color: ["#91cc75", "#4cabce"],
title: {
text: "仓库收件量趋势",
textStyle: {
@ -266,10 +504,10 @@ export default {
boundaryGap: false,
data: this.xData,
axisLine: {
lineStyle: {
color: "#fff"
}
}
lineStyle: {
color: "#fff",
},
},
},
yAxis: {
type: "value",
@ -289,13 +527,13 @@ export default {
name: "派件量",
type: "line",
smooth: true,
data:this.yData2,
data: this.yData2,
},
],
};
this.trendChart.setOption(option);
},
fn(str) {
let num = null;
str >= 10 ? (num = str) : (num = "0" + str);
@ -334,6 +572,24 @@ export default {
background-size: 100% 100%;
display: flex;
.swiper-slide {
font-size: 0.18rem;
color: #fff;
}
tr {
th {
font-size: 0.18rem;
color: #fff;
padding: 0.1rem 0;
}
td {
font-size: 0.18rem;
color: #fff;
padding: 0.04rem 0;
}
}
.left_box {
width: 25%;
height: 100%;
@ -393,7 +649,7 @@ export default {
color: #fff;
display: flex;
height: 70%;
border: 0.5px solid #0e94ea;
// border: 0.5px solid #0e94ea;
border-radius: 10px;
justify-content: space-between;
align-items: center;
@ -405,20 +661,42 @@ export default {
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid #0e94ea;
border: 0.5px solid #0e94ea;
border-right: none;
cursor: pointer;
font-size: 0.18rem;
color: #fff;
&:last-child {
border-right: none;
border-right: 0.5px solid #0e94ea;
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
&:first-child {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
}
.active {
background: #0e94ea;
}
}
}
.cen_con {
width: 100%;
height: 89%;
table {
width: 100%;
tr {
th {
&:first-child {
width: 35%;
}
}
}
}
}
}
@ -445,26 +723,26 @@ export default {
padding-left: 0.4rem;
}
}
.table_box{
.table_box {
width: 100%;
height:88%;
overflow-y:auto ;
height: 88%;
overflow-y: auto;
}
table{
table {
width: 100%;
tr{
th{
tr {
th {
font-size: 0.18rem;
color: #fff;
padding: 0.1rem 0;
&:first-child{
&:first-child {
width: 40%;
}
}
td{
font-size:0.18rem;
td {
font-size: 0.18rem;
color: #fff;
padding: 0.08rem 0;
}
@ -475,8 +753,8 @@ export default {
.center_box {
width: 45%;
height: 100%;
.center_top{
.center_top {
width: 100%;
height: 8.8%;
background: red;
@ -485,23 +763,23 @@ export default {
justify-content: center;
align-items: center;
.top_tit{
.top_tit {
color: #cdddf7;
font-size: 0.52rem;
}
}
.cen_data{
.cen_data {
width: 100%;
height: 15%;
.data_top{
.data_top {
width: 100%;
height: 30%;
display: flex;
align-items: center;
justify-content: space-between;
.left_btn{
.left_btn {
width: 15%;
height: 65%;
display: flex;
@ -510,7 +788,7 @@ export default {
border-radius: 0.1rem;
margin-left: 0.1rem;
.txt{
.txt {
font-size: 0.18rem;
color: #fff;
width: 50%;
@ -522,25 +800,25 @@ export default {
align-items: center;
cursor: pointer;
&:last-child{
&:last-child {
border-left: none;
}
}
.txt_left{
border-top-left-radius: 0.1rem;
border-bottom-left-radius: 0.1rem;
.txt_left {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
.txt_right{
border-top-right-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
.txt_right {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
.active{
background:#0e94ea ;
.active {
background: #0e94ea;
}
}
.right_time{
.right_time {
width: 25%;
height: 100%;
color: #fff;
@ -550,13 +828,13 @@ export default {
}
}
.data_bot{
.data_bot {
width: 100%;
height: 70%;
display: flex;
// background: rebeccapurple;
.data_box{
.data_box {
width: 20%;
height: 100%;
// background: green;
@ -565,7 +843,7 @@ export default {
justify-content: space-around;
align-items: center;
.data_txt{
.data_txt {
color: #fff;
font-size: 0.18rem;
}
@ -573,21 +851,21 @@ export default {
}
}
.center_cen{
.center_cen {
width: 100%;
height: 46%;
background: red;
}
.cen_bot{
.cen_bot {
width: 100%;
height: 30%;
display: flex;
// background: green;
.echarts{
.echarts {
width: 50%;
height: 100%;
.trend_box{
.trend_box {
width: 100%;
height: 100%;
}
@ -599,7 +877,7 @@ export default {
height: 100%;
background: url(~@/assets/images/line_img.png) top left repeat-y;
.full_btn{
.full_btn {
width: 92%;
height: 3%;
// background: red;
@ -608,7 +886,7 @@ export default {
align-items: center;
}
.right_top{
.right_top {
width: 92%;
height: 30%;
margin: 0 auto;
@ -618,7 +896,7 @@ export default {
width: 100%;
height: 0.42rem;
background: url(~@/assets/images/box_title.png) top left no-repeat;
background-size:100% 100% ;
background-size: 100% 100%;
.tit {
width: 30%;
@ -631,23 +909,23 @@ export default {
}
}
.pie_box{
.pie_box {
width: 100%;
height: 80%;
// background: red;
}
}
.right_center{
.right_center {
width: 92%;
height: 45%;
// background: red;
margin:0 auto;
margin: 0 auto;
.title_box {
width: 100%;
height: 0.42rem;
background: url(~@/assets/images/box_title.png) top left no-repeat;
background-size:100% 100% ;
background-size: 100% 100%;
.tit {
width: 30%;
@ -661,16 +939,16 @@ export default {
}
}
.right_bot{
.right_bot {
width: 92%;
height: 20%;
// background: green;
margin:0 auto;
margin: 0 auto;
.title_box {
width: 100%;
height: 0.42rem;
background: url(~@/assets/images/box_title.png) top left no-repeat;
background-size:100% 100% ;
background-size: 100% 100%;
.tit {
width: 30%;

Write Preview
Loading…
Cancel
Save