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

乡镇模块修改swiperbug添加图表

Browse Source
main
jinna 3 years ago
parent 17e9399b4a
commit b4dfcc73d4
3 changed files with 518 additions and 110 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. BIN
      public/excel/wuliu.xlsx
  2. 243
      src/views/components/pieChart.vue
  3. 383
      src/views/dashboard/homepage.vue

BIN
public/excel/wuliu.xlsx
View File

Binary file not shown.

243
src/views/components/pieChart.vue
Unescape View File

@ -0,0 +1,243 @@
<template>
<div class="pie_chart">
<div class="pie_box" id="pieChart"></div>
<div class="pie_data">
<div class="data_txt" v-for="(item,index) in chartData" :key="item.name">
<div class="pie_color" :style="{background:startColor[index]}"></div>
<div class="pie_txt">{{item.name}}</div>
<div class="pie_txt">{{item.value}}</div>
<div class="pie_txt">{{item.percent}}%</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
chartData:Array
},
data() {
return {
pieChart:null,
// lineData:[],
// yData1:[],
// yData2:[]
// chartData:[],
RealData: [],
borderData: [],
startColor: [
"#0e94eb",
"#c440ef",
"#efb013",
"#2fda07",
"#d8ef13",
"#2e4af8",
"#0eebc4",
"#f129b1",
"#17defc",
"#f86363",
],
borderStartColor: [
"#0077c5",
"#a819d7",
"#c99002",
"#24bc00",
"#b6cb04",
"#112ee2",
"#00bd9c",
"#ce078f",
"#00b2cd",
"#ec3c3c",
],
};
},
created() {
// console.log(this.chartData)
this.$nextTick(() => {
console.log(this.chartData)
this.createCharts();
});
},
methods: {
createCharts() {
this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
window.addEventListener("resize", ()=> {
this.pieChart.resize();
});
this.chartData.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.pieChart.setOption(option);
// this.myChart1.setOption(option);
},
deepCopy(obj) {
if (typeof obj !== "object") {
return obj;
}
var newobj = {};
for (var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
},
},
};
</script>
<style lang="scss" scoped>
.pie_chart {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.pie_box {
width: 60%;
height: 100%;
// background: red;
}
.pie_data{
width: 39%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.data_txt{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.pie_color{
width: 0.24rem;
height: 0.2rem;
border-radius: 30%;
}
}
.pie_txt{
color:#fff;
font-size: 0.18rem;
}
}
}
</style>

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

@ -9,7 +9,14 @@
<div style="font-size: 0.18rem; color: #fff">{{ week }}</div> <div style="font-size: 0.18rem; color: #fff">{{ week }}</div>
</div> </div>
</div> </div>
<div class="weather_box"></div> <div class="weather_box">
<img src="~@/assets/images/weather/weather_img01.png" alt="">
<div>
<div class="weather_txt">{{temp}}℃</div>
<div class="weather_txt">{{weather}}</div>
<div class="weather_txt">日照市莒县</div>
</div>
</div>
</div> </div>
<div class="left_cen"> <div class="left_cen">
<div class="title_box"> <div class="title_box">
@ -23,50 +30,18 @@
</div> </div>
</div> </div>
<div class="cen_con"> <div class="cen_con">
<!-- <swiper :options="swiperOptions"> <div class="swiper-container">
<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-wrapper">
<div class="swiper-slide" v-for="(item, index) in slideList" :key="index"> <div class="swiper-slide" v-for="(item, index) in slideList" :key="index">
<table> <table>
<tr> <tr>
<th></th>
<th>排名</th> <th>排名</th>
<th>乡镇</th> <th>乡镇</th>
<th>运单量</th> <th>运单量</th>
</tr> </tr>
<tr v-for="item1 in item.arr" :key="item1.no"> <tr v-for="item1 in item.arr" :key="item1.no">
<td :class="item1.no <= 3 ? 'ac_no' : ''">{{item1.no <= 3 ? 'top' : ''}}</td>
<td>{{ item1.no }}</td> <td>{{ item1.no }}</td>
<td>{{ item1.name }}</td> <td>{{ item1.name }}</td>
<td>{{ item1.count }}</td> <td>{{ item1.count }}</td>
@ -112,7 +87,7 @@
按月 按月
</div> </div>
</div> </div>
<div class="right_time">数据更新时间:2022-01-09</div> <div class="right_time">数据更新时间:{{dateTime}}</div>
</div> </div>
<div class="data_bot"> <div class="data_bot">
<div class="data_box" v-for="item in totalData" :key="item.name"> <div class="data_box" v-for="item in totalData" :key="item.name">
@ -143,7 +118,18 @@
<div class="title_box"> <div class="title_box">
<div class="tit">派件入库量占比</div> <div class="tit">派件入库量占比</div>
</div> </div>
<div class="chart_box">
<div class="pie_box" id="pieChart"></div> <div class="pie_box" id="pieChart"></div>
<div class="pie_data">
<div class="data_txt" v-for="(item,index) in pieData" :key="item.name">
<div class="pie_color" :style="{background:startColor[index]}"></div>
<div class="pie_txt">{{item.name}}</div>
<div class="pie_txt">{{item.value}}</div>
<div class="pie_txt">{{item.percent}}%</div>
</div>
</div>
</div>
</div> </div>
<div class="right_center"> <div class="right_center">
<div class="title_box"> <div class="title_box">
@ -199,31 +185,8 @@ export default {
yData2: [], yData2: [],
villageData: [], villageData: [],
mySwiper:null, mySwiper:null,
swiperOptions: { temp:'',
autoplay: { weather:'',
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: [ slideList: [
{ {
arr: [], arr: [],
@ -239,53 +202,60 @@ export default {
qianData: [], qianData: [],
isActive: 1, isActive: 1,
activeName: "收件量", activeName: "收件量",
isSlide:false dateTime:'',
// isSlide:false
pieChart:null,
trendChart:null,
chartData:[],
pieData:[],
RealData: [],
borderData: [],
startColor: [
"#0e94eb",
"#c440ef",
"#efb013",
"#2fda07",
"#d8ef13",
"#2e4af8",
"#0eebc4",
"#f129b1",
"#17defc",
"#f86363",
],
borderStartColor: [
"#0077c5",
"#a819d7",
"#c99002",
"#24bc00",
"#b6cb04",
"#112ee2",
"#00bd9c",
"#ce078f",
"#00b2cd",
"#ec3c3c",
],
}; };
}, },
created() { created() {
this.getTime(); this.getTime();
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx"); this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
this.$nextTick(() =>{
this.createCharts()
})
}, },
mounted() { mounted() {
this.isSupport = document.fullscreenEnabled; this.isSupport = document.fullscreenEnabled;
queryWeath().then((res) => { queryWeath().then((res) => {
console.log(res); this.temp = res.result.now.temp
this.weather = res.result.now.text
}); });
}, },
methods: { methods: {
run() { run() {
this.mySwiper = new Swiper(".swiper-container", { this.mySwiper = new Swiper(".swiper-container", {
// direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项 loop: true, // 循环模式选项
autoplay: true, //可选选项，自动滑动 autoplay: true, //可选选项，自动滑动
delay: 5000, //1秒切换一次 delay: 10000, //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",
// },
}); });
}, },
@ -339,17 +309,150 @@ export default {
} }
}); });
} }
if(this.slideList){ // if(this.slideList){
this.isSlide = true; // this.isSlide = true;
} // }
this.$nextTick(() => { this.$nextTick(() => {
// console.log(this.slideList) // console.log(this.slideList)
// this.mySwiper.update() this.mySwiper.destroy()
// this.run() this.run()
}); });
}, },
deepCopy(obj) {
if (typeof obj !== "object") {
return obj;
}
var newobj = {};
for (var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
},
createCharts() {
this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
window.addEventListener("resize", ()=> {
this.pieChart.resize();
});
this.pieData.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.pieChart.setOption(option);
// this.myChart1.setOption(option);
},
readExcelFile(url) { readExcelFile(url) {
axios axios
.get(url, { .get(url, {
@ -373,7 +476,7 @@ 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].发件量日总环比 },
@ -394,6 +497,7 @@ export default {
this.yData1.push(item.到件量); this.yData1.push(item.到件量);
this.yData2.push(item.派件量); this.yData2.push(item.派件量);
}); });
this.dateTime = content1[0][0].日期.replaceAll(".","/")
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.下行 });
}); });
@ -419,6 +523,10 @@ export default {
return b.count - a.count; return b.count - a.count;
}); });
}); });
content1[0].map(item =>{
this.pieData.push({name:item.快递名称,value:item.收件量,percent:((item.收件量 / content1[0][0].日总收件量).toFixed(4) )* 100})
})
console.log(this.pieData)
this.shouData.map((item, index) => { this.shouData.map((item, index) => {
if (index <= 10) { if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
@ -426,13 +534,9 @@ export default {
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); 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.createCharts()
this.run(); this.run();
}); });
}, },
@ -582,11 +686,12 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #fff; color: #fff;
padding: 0.1rem 0; padding: 0.1rem 0;
font-weight: 500;
} }
td { td {
font-size: 0.18rem; font-size: 0.18rem;
color: #fff; color: #fff;
padding: 0.04rem 0; padding: 0.03rem 0;
} }
} }
@ -601,15 +706,19 @@ export default {
border: 1px solid #0e94ea; border: 1px solid #0e94ea;
margin: 0 auto; margin: 0 auto;
margin-top: 0.1rem; margin-top: 0.1rem;
display: flex;
justify-content: space-between;
align-items: center;
.time_box { .time_box {
width: 49%; width: 49%;
height: 100%; height: 80%;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-between;
border-right: 0.02rem solid #cdddf7;
.date_box { .date_box {
width: 100%; width: 100%;
@ -620,6 +729,18 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
} }
} }
.weather_box{
width:50%;
display: flex;
justify-content: center;
align-items: center;
.weather_txt{
font-size: 0.18rem;
color: #fff;
}
}
} }
.left_cen { .left_cen {
@ -692,9 +813,20 @@ export default {
tr { tr {
th { th {
&:first-child { &:first-child {
width: 35%; width: 8%;
} }
} }
.ac_no{
width: 0.25rem;
height: 0.2rem;
background: red;
border-radius: 50%;
margin-bottom: 0.02rem;
display: inline-block;
line-height: 0.2rem;
text-align: center;
font-size: 0.16rem;
}
} }
} }
} }
@ -909,11 +1041,44 @@ export default {
} }
} }
.pie_box { .chart_box{
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex;
justify-content: space-between;
.pie_box {
width: 60%;
height: 100%;
// background: red; // background: red;
} }
.pie_data{
width: 39%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.data_txt{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.pie_color{
width: 0.24rem;
height: 0.2rem;
border-radius: 30%;
}
}
.pie_txt{
color:#fff;
font-size: 0.18rem;
}
}
}
} }
.right_center { .right_center {

Write Preview
Loading…
Cancel
Save