suojin
/
physical_distribution
16
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. 258
      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

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

@ -10,7 +10,7 @@
</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>
@ -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>
@ -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: [],
villList: [],
mySwiper: null, mySwiper: null,
temp:'', temp: "",
weather:'', weather: "",
slideList: [ slideList: [
{ {
arr: [], arr: [],
@ -202,10 +210,10 @@ 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: [],
@ -266,29 +274,42 @@ export default {
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) => {
@ -340,9 +361,9 @@ export default {
// } // }
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) {
@ -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,7 +638,7 @@ export default {
fontSize: 15, fontSize: 15,
color: "#fff", color: "#fff",
}, },
top:12 top: 12,
}, },
legend: { legend: {
data: ["到件量", "派件量"], data: ["到件量", "派件量"],
@ -614,7 +646,7 @@ export default {
color: "#fff", color: "#fff",
}, },
top: 12, top: 12,
right:10 right: 10,
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -658,7 +690,7 @@ export default {
}, },
], ],
}; };
this.trendChart.setOption(option); this.trendCharts.setOption(option);
}, },
createCharts1() { createCharts1() {
var convertData = (data) => { var convertData = (data) => {
@ -675,13 +707,11 @@ export default {
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,
}, },
]); ]);
} }
@ -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(
{ {
@ -741,7 +771,7 @@ export default {
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,
}, },
@ -768,7 +798,7 @@ export default {
// }, // },
// }, // },
itemStyle: { itemStyle: {
color: "#000" color: "#000",
}, },
data: item[1].map((dataItem) => { data: item[1].map((dataItem) => {
return { return {
@ -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();
}); });
@ -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 {
@ -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%;

Write Preview
Loading…
Cancel
Save