suojin
/
physical_distribution
15
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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 400
      src/views/dashboard/homepage.vue

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

@ -13,23 +13,77 @@
</div> </div>
<div class="left_cen"> <div class="left_cen">
<div class="title_box"> <div class="title_box">
<div class="left_tit">收件量</div> <div class="left_tit">{{ activeName }}</div>
<div class="right_tit"> <div class="right_tit">
<div class="btn">收</div> <div class="btn" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)">收</div>
<div class="btn">发</div> <div class="btn" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)">发</div>
<div class="btn">到</div> <div class="btn" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)">到</div>
<div class="btn">派</div> <div class="btn" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)">派</div>
<div class="btn">签</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> </div>
<div class="cen_con"></div>
</div> </div>
<div class="left_bot"> <div class="left_bot">
<div class="title_box"> <div class="title_box">
<div class="tit">村点信息</div> <div class="tit">村点信息</div>
</div> </div>
<div class="table_box"> <div class="table_box">
<table cellspacing=30> <table cellspacing="30">
<tr> <tr>
<th>站点名称</th> <th>站点名称</th>
<th>上行</th> <th>上行</th>
@ -51,8 +105,12 @@
<div class="cen_data"> <div class="cen_data">
<div class="data_top"> <div class="data_top">
<div class="left_btn"> <div class="left_btn">
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">按日</div> <div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">按月</div> 按日
</div>
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">
按月
</div>
</div> </div>
<div class="right_time">数据更新时间:2022-01-09</div> <div class="right_time">数据更新时间:2022-01-09</div>
</div> </div>
@ -78,8 +136,8 @@
</div> </div>
<div class="right_box"> <div class="right_box">
<div class="full_btn"> <div class="full_btn">
<img v-show="!isFullFlag" src="~@/assets/images/full.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=""> <img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="" />
</div> </div>
<div class="right_top"> <div class="right_top">
<div class="title_box"> <div class="title_box">
@ -104,18 +162,24 @@
</template> </template>
<script> <script>
import Swiper from "swiper";
import axios from "axios"; import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs"; import * as XLSX from "xlsx/xlsx.mjs";
import PathMap from '../components/pathMap'; import PathMap from "../components/pathMap";
import ShowMap from '../components/showmap'; import ShowMap from "../components/showmap";
import CarMile from '../components/carMile'; import CarMile from "../components/carMile";
import CarWarn from '../components/carWarn'; 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 { export default {
components: { components: {
PathMap, PathMap,
CarMile, CarMile,
CarWarn, CarWarn,
ShowMap, ShowMap,
// swiper,
// swiperSlide,
}, },
data() { data() {
return { return {
@ -133,19 +197,159 @@ export default {
xData: [], xData: [],
yData1: [], yData1: [],
yData2: [], yData2: [],
villageData:[ 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() { created() {
this.getTime(); 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() { mounted() {
this.isSupport=document.fullscreenEnabled this.isSupport = document.fullscreenEnabled;
queryWeath().then((res) => {
console.log(res);
});
}, },
methods: { methods: {
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) { readExcelFile(url) {
axios axios
.get(url, { .get(url, {
@ -169,43 +373,77 @@ export default {
for (const key in sheets) { for (const key in sheets) {
content1.push(XLSX.utils.sheet_to_json(sheets[key])); content1.push(XLSX.utils.sheet_to_json(sheets[key]));
} }
console.log(content1); // console.log(content1);/
this.dayData.push( 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( 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].到件量月总环比}, { 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 this.totalData = this.dayData;
content1[1].map(item =>{ content1[1].map((item) => {
this.xData.unshift(item.日期.substring(item.日期.length-5).replace('.','-')) this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-"));
this.yData1.push(item.到件量) this.yData1.push(item.到件量);
this.yData2.push(item.派件量) this.yData2.push(item.派件量);
}) });
content1[3].map(item =>{ content1[3].map((item) => {
this.villageData.push({name:item.村点名称,upData:item.上行,downData:item.下行}) this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
}) });
console.log(this.villageData) 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.$nextTick(() => {
this.createChart() this.createChart();
})
this.run();
});
}, },
// 按照日月更换数据 // 按照日月更换数据
changeData(val) { changeData(val) {
this.active = val this.active = val;
if (val == 1) { if (val == 1) {
this.totalData = this.dayData this.totalData = this.dayData;
} else if (val == 2) { } else if (val == 2) {
this.totalData = this.monthData this.totalData = this.monthData;
} }
}, },
clickFun() { clickFun() {
@ -220,7 +458,7 @@ export default {
this.isFullFlag = true; this.isFullFlag = true;
} }
} }
console.log(this.isFullFlag) // console.log(this.isFullFlag);
// this.isFullFlag =!this.isFullFlag // this.isFullFlag =!this.isFullFlag
// if (!screenfull.enabled) { // if (!screenfull.enabled) {
// this.$message({ // this.$message({
@ -238,7 +476,7 @@ export default {
this.trendChart.resize(); this.trendChart.resize();
}); });
var option = { var option = {
color: ["#91cc75", "#4cabce", ], color: ["#91cc75", "#4cabce"],
title: { title: {
text: "仓库收件量趋势", text: "仓库收件量趋势",
textStyle: { textStyle: {
@ -267,9 +505,9 @@ export default {
data: this.xData, data: this.xData,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -334,6 +572,24 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; 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 { .left_box {
width: 25%; width: 25%;
height: 100%; height: 100%;
@ -393,7 +649,7 @@ export default {
color: #fff; color: #fff;
display: flex; display: flex;
height: 70%; height: 70%;
border: 0.5px solid #0e94ea; // border: 0.5px solid #0e94ea;
border-radius: 10px; border-radius: 10px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -405,20 +661,42 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-right: 0.5px solid #0e94ea; border: 0.5px solid #0e94ea;
border-right: none;
cursor: pointer; cursor: pointer;
font-size: 0.18rem; font-size: 0.18rem;
color: #fff; color: #fff;
&:last-child { &: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 { .cen_con {
width: 100%; width: 100%;
height: 89%; height: 89%;
table {
width: 100%;
tr {
th {
&:first-child {
width: 35%;
}
}
}
}
} }
} }
@ -528,12 +806,12 @@ export default {
} }
.txt_left { .txt_left {
border-top-left-radius: 0.1rem; border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.1rem; border-bottom-left-radius: 0.2rem;
} }
.txt_right { .txt_right {
border-top-right-radius: 0.1rem; border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.1rem; border-bottom-right-radius: 0.2rem;
} }
.active { .active {

Write Preview
Loading…
Cancel
Save