@@ -199,31 +185,8 @@ export default {
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,
- },
- },
+ temp:'',
+ weather:'',
slideList: [
{
arr: [],
@@ -239,53 +202,60 @@ export default {
qianData: [],
isActive: 1,
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() {
this.getTime();
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
+ this.$nextTick(() =>{
+ this.createCharts()
+ })
},
mounted() {
this.isSupport = document.fullscreenEnabled;
queryWeath().then((res) => {
- console.log(res);
+ this.temp = res.result.now.temp
+ this.weather = res.result.now.text
});
},
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",
- // },
+ delay: 10000, //1秒切换一次
});
},
@@ -339,17 +309,150 @@ export default {
}
});
}
- if(this.slideList){
- this.isSlide = true;
- }
+ // if(this.slideList){
+ // this.isSlide = true;
+ // }
this.$nextTick(() => {
// 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}
{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) {
axios
.get(url, {
@@ -373,7 +476,7 @@ 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].发件量日总环比 },
@@ -394,6 +497,7 @@ export default {
this.yData1.push(item.到件量);
this.yData2.push(item.派件量);
});
+ this.dateTime = content1[0][0].日期.replaceAll(".","/")
content1[3].map((item) => {
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
});
@@ -419,6 +523,10 @@ export default {
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) => {
if (index <= 10) {
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 });
}
});
- console.log(this.slideList);
- if(this.slideList){
- this.isSlide = true
- }
this.$nextTick(() => {
this.createChart();
-
+ this.createCharts()
this.run();
});
},
@@ -582,11 +686,12 @@ export default {
font-size: 0.18rem;
color: #fff;
padding: 0.1rem 0;
+ font-weight: 500;
}
td {
font-size: 0.18rem;
color: #fff;
- padding: 0.04rem 0;
+ padding: 0.03rem 0;
}
}
@@ -601,15 +706,19 @@ export default {
border: 1px solid #0e94ea;
margin: 0 auto;
margin-top: 0.1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
.time_box {
width: 49%;
- height: 100%;
+ height: 80%;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: space-around;
+ justify-content: space-between;
+ border-right: 0.02rem solid #cdddf7;
.date_box {
width: 100%;
@@ -620,6 +729,18 @@ export default {
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 {
@@ -692,9 +813,20 @@ export default {
tr {
th {
&: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%;
height: 80%;
+ display: flex;
+ justify-content: space-between;
+
+ .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;
+ }
+ }
+ }
}
.right_center {
+