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

Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution into main

Browse Source
main
xuechunyuan 3 years ago
parent 0633bdcf8d 292d079da3
commit b28502f6d7
3 changed files with 283 additions and 161 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. 2
      src/assets/json/prefecture.json
  3. 442
      src/views/dashboard/homepage.vue

BIN
public/excel/wuliu.xlsx
View File

Binary file not shown.

2
src/assets/json/prefecture.json
View File

File diff suppressed because one or more lines are too long

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

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

Write Preview
Loading…
Cancel
Save