-
-
-
{{item.name}}
-
{{item.value}}
-
{{item.percent}}%
+
+
+
{{ item.name }}
+
{{ item.value }}
+
{{ item.percent }}%
@@ -153,10 +163,8 @@ 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 pieChart from "../components/pieChart";
import { queryWeath } from "@/api/base";
// import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
@@ -165,7 +173,6 @@ export default {
PathMap,
CarMile,
CarWarn,
- ShowMap,
},
data() {
return {
@@ -184,9 +191,10 @@ export default {
yData1: [],
yData2: [],
villageData: [],
- mySwiper:null,
- temp:'',
- weather:'',
+ villList: [],
+ mySwiper: null,
+ temp: "",
+ weather: "",
slideList: [
{
arr: [],
@@ -202,15 +210,15 @@ export default {
qianData: [],
isActive: 1,
activeName: "收件量",
- dateTime:'',
+ dateTime: "",
// isSlide:false
- pieChart:null,
- trendChart:null,
- chartData:[],
- pieData:[],
+ pieChart: null,
+ trendCharts: null,
+ chartData: [],
+ pieData: [],
RealData: [],
borderData: [],
- startColor: [
+ startColor: [
"#0e94eb",
"#c440ef",
"#efb013",
@@ -234,8 +242,8 @@ export default {
"#00b2cd",
"#ec3c3c",
],
- mapData:[],
- datas:[],
+ mapData: [],
+ datas: [],
geoCoordMap: {
棋山镇: [118.895378, 35.877537],
东莞镇: [118.972146, 35.991826],
@@ -247,7 +255,7 @@ export default {
桑园镇: [119.046012, 35.678553], //桑园镇
阎庄镇: [118.834585, 35.670621], //阎庄镇
莒县电子商务公共服务中心: [118.901658, 35.60688],
- 店子集镇:[118.914151,35.5844],
+ 店子集镇: [118.914151, 35.5844],
城阳街道: [118.82472, 35.583488], //城阳街道
峤山镇: [118.946005, 35.657339], //峤山镇
龙山镇: [119.003747, 35.515955],
@@ -265,30 +273,43 @@ export default {
created() {
this.getTime();
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
- this.$nextTick(() =>{
- this.createCharts()
- })
+ this.$nextTick(() => {
+ this.createCharts();
+ });
},
mounted() {
this.isSupport = document.fullscreenEnabled;
queryWeath().then((res) => {
- this.temp = res.result.now.temp
- this.weather = res.result.now.text
+ this.temp = res.result.now.temp;
+ this.weather = res.result.now.text;
});
},
methods: {
run() {
- this.mySwiper = new Swiper(".swiper-container", {
+ this.mySwiper = new Swiper(".swiper1", {
loop: true, // 循环模式选项
- autoplay: true, //可选选项，自动滑动
- delay: 10000, //1秒切换一次
+ autoplay:{
+ delay: 10000,//10秒切换一次
+ disableOnInteraction: false,
+ }
+ });
+ },
+
+ run1() {
+ this.mySwiper = new Swiper(".swiper2", {
+ loop: true, // 循环模式选项
+ // autoplay: true, //可选选项，自动滑动
+ autoplay:{
+ delay: 10000,//10秒切换一次
+ disableOnInteraction: false,
+ }
});
},
changeBtn(val) {
this.isActive = val;
this.slideList = [{ arr: [] }, { arr: [] }];
- this.isSlide = false
+ this.isSlide = false;
if (val == 1) {
this.activeName = "收件量";
this.shouData.map((item, index) => {
@@ -339,10 +360,10 @@ export default {
// this.isSlide = true;
// }
this.$nextTick(() => {
- // console.log(this.slideList)
- this.mySwiper.destroy()
-
- this.run()
+ // console.log(this.slideList)
+ this.mySwiper.destroy();
+
+ this.run();
});
},
deepCopy(obj) {
@@ -357,7 +378,7 @@ export default {
},
createCharts() {
this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
- window.addEventListener("resize", ()=> {
+ window.addEventListener("resize", () => {
this.pieChart.resize();
});
this.pieData.map((item, index) => {
@@ -523,13 +544,19 @@ export default {
this.yData1.push(item.到件量);
this.yData2.push(item.派件量);
});
- this.dateTime = content1[0][0].日期.replaceAll(".","/")
+ this.dateTime = content1[0][0].日期.replaceAll(".", "/");
content1[3].map((item) => {
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
});
+ for (var i = 0, len = this.villageData.length; i < len; i += 7) {
+ this.villList.push({ arr: this.villageData.slice(i, i + 7) });
+ }
content1[2].map((item, index) => {
- this.mapData.push({name:item.名称,value:item.收件量})
- this.datas.push([{ name: item.名称, value:item.收件量 }, { name: "莒县电子商务公共服务中心" }])
+ this.mapData.push({ name: item.名称, value: item.收件量 });
+ this.datas.push([
+ { name: item.名称, value: item.收件量 },
+ { name: "莒县电子商务公共服务中心" },
+ ]);
this.shouData.push({ name: item.名称, count: item.收件量 });
this.shouData = this.shouData.sort(function (a, b) {
return b.count - a.count;
@@ -551,10 +578,14 @@ 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)
+ 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 });
@@ -565,8 +596,9 @@ export default {
this.$nextTick(() => {
this.createChart();
this.createCharts();
- this.createCharts1()
+ this.createCharts1();
this.run();
+ this.run1();
});
},
@@ -594,9 +626,9 @@ export default {
},
createChart() {
- this.trendChart = this.$echarts.init(document.getElementById("trendChart"));
- window.addEventListener("resize", function () {
- this.trendChart.resize();
+ this.trendCharts = this.$echarts.init(document.getElementById("trendChart"));
+ window.addEventListener("resize", () => {
+ this.trendCharts.resize();
});
var option = {
color: ["#91cc75", "#4cabce"],
@@ -606,15 +638,15 @@ export default {
fontSize: 15,
color: "#fff",
},
- top:12
+ top: 12,
},
legend: {
data: ["到件量", "派件量"],
textStyle: {
color: "#fff",
},
- top:12,
- right:10
+ top: 12,
+ right: 10,
},
tooltip: {
trigger: "axis",
@@ -623,7 +655,7 @@ export default {
left: "3%",
right: "4%",
bottom: "3%",
- top:"18%",
+ top: "18%",
containLabel: true,
},
xAxis: {
@@ -658,36 +690,34 @@ export default {
},
],
};
- this.trendChart.setOption(option);
+ this.trendCharts.setOption(option);
},
createCharts1() {
- var convertData = (data) => {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- var fromCoord = this.geoCoordMap[dataItem[0].name];
- var toCoord = this.geoCoordMap[dataItem[1].name];
- if (fromCoord && toCoord) {
- res.push([
- {
- coord: toCoord,
- fromName: dataItem[0].name,
- value: dataItem[0].value,
- // name: dataItem[0].name,
- visualMap:false,
-
- },
- {
- coord:fromCoord ,
- toName: dataItem[1].name,
- visualMap:false,
-
- },
- ]);
- }
- }
- return res;
- };
+ var convertData = (data) => {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var dataItem = data[i];
+ var fromCoord = this.geoCoordMap[dataItem[0].name];
+ var toCoord = this.geoCoordMap[dataItem[1].name];
+ if (fromCoord && toCoord) {
+ res.push([
+ {
+ coord: toCoord,
+ fromName: dataItem[0].name,
+ value: dataItem[0].value,
+ // name: dataItem[0].name,
+ visualMap: false,
+ },
+ {
+ coord: fromCoord,
+ toName: dataItem[1].name,
+ visualMap: false,
+ },
+ ]);
+ }
+ }
+ return res;
+ };
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
@@ -696,10 +726,10 @@ export default {
}
}
const series = [];
- var color = ['#000'];
+ var color = ["#fafd1d"];
// 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
- console.log(item)
+ console.log(item);
console.log(convertData(item[1]));
series.push(
{
@@ -719,12 +749,12 @@ export default {
symbolSize: 5, // 图标大小
},
lineStyle: {
- // normal: {
- color: color[i],
- width: 3, // 尾迹线条宽度
- opacity: 0.6, // 尾迹线条透明度
- curveness: 0.2, // 尾迹线条曲直度
- // },
+ // normal: {
+ color: color[i],
+ width: 3, // 尾迹线条宽度
+ opacity: 0.6, // 尾迹线条透明度
+ curveness: 0.2, // 尾迹线条曲直度
+ // },
},
data: convertData(item[1]),
},
@@ -738,10 +768,10 @@ export default {
brushType: "stroke", // 波纹绘制方式 stroke, fill
scale: 3, // 波纹圆环最大限制，值越大波纹越大
},
- tooltip: {
+ tooltip: {
trigger: "item",
formatter(params) {
- return params.data.name + ':' + params.data.value[2]
+ return params.data.name + ":" + params.data.value[2];
},
},
label: {
@@ -751,7 +781,7 @@ export default {
offset: [5, 0], // 偏移设置
formatter(params) {
// 圆环显示文字
- return '';
+ return "";
},
fontSize: 13,
},
@@ -760,19 +790,19 @@ export default {
},
},
symbol: "circle",
- symbolSize:3,
+ symbolSize: 3,
// itemStyle: {
// normal: {
// // show: false,
// color: "#000",
// },
// },
- itemStyle: {
- color: "#000"
+ itemStyle: {
+ color: "#000",
},
data: item[1].map((dataItem) => {
return {
- visualMap:false,
+ visualMap: false,
name: dataItem[0].name,
// value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
};
@@ -818,7 +848,7 @@ export default {
// this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps'));
// this.$echarts.registerMap("china1", china1, {});
this.$echarts.registerMap("莒县", prefecture, {});
- window.addEventListener("resize", function () {
+ window.addEventListener("resize", () => {
this.myChart1.resize();
// this.myCharts1.resize();
});
@@ -850,7 +880,7 @@ export default {
textStyle: {
color: "#fff",
},
- bottom:"2%",
+ bottom: "2%",
itemWidth: 10,
},
geo: {
@@ -993,14 +1023,14 @@ export default {
font-size: 0.18rem;
}
}
-
- .weather_box{
- width:50%;
+
+ .weather_box {
+ width: 50%;
display: flex;
justify-content: center;
align-items: center;
- .weather_txt{
+ .weather_txt {
font-size: 0.18rem;
color: #fff;
}
@@ -1072,6 +1102,57 @@ export default {
width: 100%;
height: 89%;
+ .swiper1 {
+ height: 100%;
+ .swiper-wrapper {
+ height: 100%;
+
+ .swiper-slide {
+ height: 100%;
+ }
+ }
+ }
+
+ .table_con {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .table_line {
+ width: 100%;
+ height: 0.32rem;
+ display: flex;
+ align-items: center;
+
+ .table_item {
+ width: 31%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font-size: 0.18rem;
+ &:first-child {
+ width: 5%;
+ }
+ }
+
+ .ac_no {
+ height: 0.24rem;
+ background: red;
+ border-radius: 50%;
+ margin-bottom: 0.02rem;
+ display: inline-block;
+ line-height: 0.24rem;
+ text-align: center;
+ font-size: 0.14rem;
+ }
+ }
+
table {
width: 100%;
tr {
@@ -1080,7 +1161,7 @@ export default {
width: 8%;
}
}
- .ac_no{
+ .ac_no {
width: 0.25rem;
height: 0.2rem;
background: red;
@@ -1122,7 +1203,48 @@ export default {
.table_box {
width: 100%;
height: 88%;
- overflow-y: auto;
+ // overflow-y: auto;
+
+ .swiper2{
+ height: 100%;
+
+ .swiper-wrapper{
+ height: 100%;
+
+ .swiper-slide{
+ height: 100%;
+ }
+ }
+ }
+
+ .table_con {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .table_line {
+ width: 100%;
+ height: 0.4rem;
+ display: flex;
+ align-items: center;
+
+ .table_item {
+ width: 33%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ div {
+ font-size: 0.18rem;
+ color: #fff;
+ }
}
table {
width: 100%;
@@ -1261,8 +1383,8 @@ export default {
.echarts {
width: 50%;
height: 100%;
- .map_box{
- width:100%;
+ .map_box {
+ width: 100%;
height: 100%;
}
.trend_box {
@@ -1309,45 +1431,45 @@ export default {
}
}
- .chart_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;
+ .pie_box {
+ width: 60%;
+ height: 100%;
+ // background: red;
+ }
- .data_txt{
- width: 100%;
+ .pie_data {
+ width: 39%;
+ height: 100%;
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ justify-content: space-around;
align-items: center;
- .pie_color{
- width: 0.24rem;
- height: 0.2rem;
- border-radius: 30%;
+ .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;
}
- }
- .pie_txt{
- color:#fff;
- font-size: 0.18rem;
}
}
}
- }
.right_center {
width: 92%;
+