You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
688 lines
17 KiB
688 lines
17 KiB
<template> |
|
<div class="container_box"> |
|
<div class="left_box"> |
|
<div class="left_top"> |
|
<div class="time_box"> |
|
<div style="font-size: 0.4rem; color: #fff">{{ time }}</div> |
|
<div class="date_box"> |
|
<div style="font-size: 0.18rem; color: #fff">{{ date }}</div> |
|
<div style="font-size: 0.18rem; color: #fff">{{ week }}</div> |
|
</div> |
|
</div> |
|
<div class="weather_box"></div> |
|
</div> |
|
<div class="left_cen"> |
|
<div class="title_box"> |
|
<div class="left_tit">收件量</div> |
|
<div class="right_tit"> |
|
<div class="btn">收</div> |
|
<div class="btn">发</div> |
|
<div class="btn">到</div> |
|
<div class="btn">派</div> |
|
<div class="btn">签</div> |
|
</div> |
|
</div> |
|
<div class="cen_con"></div> |
|
</div> |
|
<div class="left_bot"> |
|
<div class="title_box"> |
|
<div class="tit">村点信息</div> |
|
</div> |
|
<div class="table_box"> |
|
<table cellspacing=30> |
|
<tr> |
|
<th>站点名称</th> |
|
<th>上行</th> |
|
<th>下行</th> |
|
</tr> |
|
<tr v-for="item in villageData" :key="item.name"> |
|
<td>{{item.name}}</td> |
|
<td>{{item.upData}}</td> |
|
<td>{{item.downData}}</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="center_box"> |
|
<div class="center_top"> |
|
<div class="top_tit">莒县物流服务中心</div> |
|
</div> |
|
<div class="cen_data"> |
|
<div class="data_top"> |
|
<div class="left_btn"> |
|
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">按日</div> |
|
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">按月</div> |
|
</div> |
|
<div class="right_time">数据更新时间:2022-01-09</div> |
|
</div> |
|
<div class="data_bot"> |
|
<div class="data_box" v-for="item in totalData" :key="item.name"> |
|
<div class="data_txt">{{item.name}}</div> |
|
<div class="data_txt" style="font-size:0.38rem">{{item.data}}</div> |
|
<div class="data_txt">环比{{item.huanbi}}</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="center_cen"> |
|
<PathMap></PathMap> |
|
</div> |
|
<div class="cen_bot"> |
|
<div class="echarts"> |
|
<ShowMap></ShowMap> |
|
</div> |
|
<div class="echarts"> |
|
<div id="trendChart" class="trend_box"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right_box"> |
|
<div class="full_btn"> |
|
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt=""> |
|
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt=""> |
|
</div> |
|
<div class="right_top"> |
|
<div class="title_box"> |
|
<div class="tit">派件入库量占比</div> |
|
</div> |
|
<div class="pie_box" id="pieChart"></div> |
|
</div> |
|
<div class="right_center"> |
|
<div class="title_box"> |
|
<div class="tit">车辆行驶里程</div> |
|
</div> |
|
<CarMile></CarMile> |
|
</div> |
|
<div class="right_bot"> |
|
<div class="title_box"> |
|
<div class="tit">车辆报警</div> |
|
</div> |
|
<CarWarn></CarWarn> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
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'; |
|
export default { |
|
components: { |
|
PathMap, |
|
CarMile, |
|
CarWarn, |
|
ShowMap, |
|
}, |
|
data() { |
|
return { |
|
timer: null, |
|
day: "", |
|
time: "", |
|
date: "", |
|
week: "", |
|
isFullFlag:false, |
|
isSupport:false, |
|
dayData:[], |
|
monthData:[], |
|
totalData:[], |
|
active:1, |
|
xData:[], |
|
yData1:[], |
|
yData2:[], |
|
villageData:[ |
|
] |
|
}; |
|
}, |
|
created() { |
|
this.getTime(); |
|
this.readExcelFile("http://192.168.1.35:8081/excel/wuliu.xlsx"); |
|
|
|
}, |
|
mounted() { |
|
this.isSupport=document.fullscreenEnabled |
|
}, |
|
methods: { |
|
readExcelFile(url) { |
|
axios |
|
.get(url, { |
|
responseType: "arraybuffer", |
|
}) |
|
.then((res) => { |
|
// console.log(res); |
|
let data = new Uint8Array(res); |
|
// console.log(data); |
|
let wb = XLSX.read(data, { |
|
type: "array", |
|
}); |
|
// console.log(wb); |
|
let sheets = wb.Sheets; // 获取文档数据 |
|
// console.log(sheets); |
|
this.content = this.transformSheets(sheets); |
|
}); |
|
}, |
|
transformSheets(sheets) { |
|
const content1 = []; |
|
for (const key in sheets) { |
|
content1.push(XLSX.utils.sheet_to_json(sheets[key])); |
|
} |
|
console.log(content1); |
|
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].派件量日总环比}, |
|
{name:'签件量',data:content1[0][0].日总签件量,huanbi:content1[0][0].签件量日总环比}, |
|
) |
|
this.monthData.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].派件量月总环比}, |
|
{name:'签件量',data:content1[0][0].月总签件量,huanbi:content1[0][0].签件量月总环比}, |
|
) |
|
this.totalData = this.dayData |
|
content1[1].map(item =>{ |
|
this.xData.unshift(item.日期.substring(item.日期.length-5).replace('.','-')) |
|
this.yData1.push(item.到件量) |
|
this.yData2.push(item.派件量) |
|
}) |
|
content1[3].map(item =>{ |
|
this.villageData.push({name:item.村点名称,upData:item.上行,downData:item.下行}) |
|
}) |
|
console.log(this.villageData) |
|
this.$nextTick(() =>{ |
|
this.createChart() |
|
}) |
|
}, |
|
|
|
// 按照日月更换数据 |
|
changeData(val){ |
|
this.active = val |
|
if(val == 1){ |
|
this.totalData = this.dayData |
|
}else if(val == 2){ |
|
this.totalData = this.monthData |
|
} |
|
}, |
|
clickFun(){ |
|
if (this.isSupport) { |
|
if (document.fullscreenElement) { |
|
//document.exitFullscreen()退出全屏模式的方法 |
|
document.exitFullscreen(); |
|
this.isFullFlag = false; |
|
} else { |
|
//requestFullscreen(),请求全屏的方法 |
|
document.documentElement.requestFullscreen(); |
|
this.isFullFlag = true; |
|
} |
|
} |
|
console.log(this.isFullFlag) |
|
// this.isFullFlag =!this.isFullFlag |
|
// if (!screenfull.enabled) { |
|
// this.$message({ |
|
// message: 'Your browser does not work', |
|
// type: 'warning' |
|
// }) |
|
// return false |
|
// } |
|
// screenfull.toggle() |
|
}, |
|
|
|
createChart() { |
|
this.trendChart = this.$echarts.init(document.getElementById("trendChart")); |
|
window.addEventListener("resize", function () { |
|
this.trendChart.resize(); |
|
}); |
|
var option = { |
|
color: ["#91cc75", "#4cabce", ], |
|
title: { |
|
text: "仓库收件量趋势", |
|
textStyle: { |
|
fontSize: 15, |
|
color: "#fff", |
|
}, |
|
}, |
|
legend: { |
|
data: ["到件量", "派件量"], |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
grid: { |
|
left: "3%", |
|
right: "4%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: false, |
|
data: this.xData, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#fff" |
|
} |
|
} |
|
}, |
|
yAxis: { |
|
type: "value", |
|
axisLabel: { |
|
show: true, |
|
color: "#fff", |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "到件量", |
|
type: "line", |
|
smooth: true, |
|
data: this.yData1, |
|
}, |
|
{ |
|
name: "派件量", |
|
type: "line", |
|
smooth: true, |
|
data:this.yData2, |
|
}, |
|
], |
|
}; |
|
this.trendChart.setOption(option); |
|
}, |
|
|
|
fn(str) { |
|
let num = null; |
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
return num; |
|
}, |
|
getWeek(e) { |
|
let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; |
|
this.week = arr[e]; |
|
}, |
|
getTime() { |
|
//获取当前时间 |
|
this.timer = setInterval(() => { |
|
var date = new Date(); |
|
var year = date.getFullYear(); //当前年份 |
|
var month = date.getMonth(); //当前月份 |
|
var data = date.getDate(); //天 |
|
var hours = date.getHours(); //小时 |
|
var minute = date.getMinutes(); //分 |
|
var second = date.getSeconds(); //秒 |
|
this.day = date.getDay(); //获取当前星期几 |
|
this.getWeek(this.day); |
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
|
this.date = year + "/" + (month + 1) + "/" + data; |
|
}, 1000); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container_box { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
background: url(~@/assets/images/index_bg.png); |
|
background-size: 100% 100%; |
|
display: flex; |
|
|
|
.left_box { |
|
width: 25%; |
|
height: 100%; |
|
background: url(~@/assets/images/line_img.png) top right repeat-y; |
|
|
|
.left_top { |
|
width: 90%; |
|
height: 12%; |
|
border: 1px solid #0e94ea; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
|
|
.time_box { |
|
width: 49%; |
|
height: 100%; |
|
color: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: space-around; |
|
|
|
.date_box { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
color: #fff; |
|
font-size: 0.18rem; |
|
} |
|
} |
|
} |
|
|
|
.left_cen { |
|
width: 90%; |
|
height: 45%; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
.title_box { |
|
width: 100%; |
|
height: 0.42rem; |
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.left_tit { |
|
color: #fff; |
|
width: 30%; |
|
display: flex; |
|
padding-left: 0.4rem; |
|
align-items: center; |
|
font-size: 0.2rem; |
|
} |
|
.right_tit { |
|
width: 65%; |
|
color: #fff; |
|
display: flex; |
|
height: 70%; |
|
border: 0.5px solid #0e94ea; |
|
border-radius: 10px; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-right: 0.3rem; |
|
|
|
.btn { |
|
width: 20%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
border-right: 0.5px solid #0e94ea; |
|
cursor: pointer; |
|
font-size: 0.18rem; |
|
color: #fff; |
|
|
|
&:last-child { |
|
border-right: none; |
|
} |
|
} |
|
} |
|
} |
|
.cen_con { |
|
width: 100%; |
|
height: 89%; |
|
} |
|
} |
|
|
|
.left_bot { |
|
width: 90%; |
|
height: 39%; |
|
// background: red; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
|
|
.title_box { |
|
width: 100%; |
|
height: 0.42rem; |
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
background-size: 100% 100%; |
|
|
|
.tit { |
|
width: 30%; |
|
height: 100%; |
|
font-size: 0.2rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 0.4rem; |
|
} |
|
} |
|
.table_box{ |
|
width: 100%; |
|
height:88%; |
|
overflow-y:auto ; |
|
} |
|
table{ |
|
width: 100%; |
|
|
|
tr{ |
|
th{ |
|
font-size: 0.18rem; |
|
color: #fff; |
|
padding: 0.1rem 0; |
|
|
|
&:first-child{ |
|
width: 40%; |
|
} |
|
} |
|
td{ |
|
font-size:0.18rem; |
|
color: #fff; |
|
padding: 0.08rem 0; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.center_box { |
|
width: 45%; |
|
height: 100%; |
|
|
|
.center_top{ |
|
width: 100%; |
|
height: 8.8%; |
|
background: red; |
|
background: url(~@/assets/images/title_border.png) bottom center no-repeat; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.top_tit{ |
|
color: #cdddf7; |
|
font-size: 0.52rem; |
|
} |
|
} |
|
.cen_data{ |
|
width: 100%; |
|
height: 15%; |
|
|
|
.data_top{ |
|
width: 100%; |
|
height: 30%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.left_btn{ |
|
width: 15%; |
|
height: 65%; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
border-radius: 0.1rem; |
|
margin-left: 0.1rem; |
|
|
|
.txt{ |
|
font-size: 0.18rem; |
|
color: #fff; |
|
width: 50%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
// border-right: 1px solid #0e94ea; |
|
border: 1px solid #0e94ea; |
|
align-items: center; |
|
cursor: pointer; |
|
|
|
&:last-child{ |
|
border-left: none; |
|
} |
|
} |
|
|
|
.txt_left{ |
|
border-top-left-radius: 0.1rem; |
|
border-bottom-left-radius: 0.1rem; |
|
} |
|
.txt_right{ |
|
border-top-right-radius: 0.1rem; |
|
border-bottom-right-radius: 0.1rem; |
|
} |
|
|
|
.active{ |
|
background:#0e94ea ; |
|
} |
|
} |
|
.right_time{ |
|
width: 25%; |
|
height: 100%; |
|
color: #fff; |
|
font-size: 0.18rem; |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.data_bot{ |
|
width: 100%; |
|
height: 70%; |
|
display: flex; |
|
// background: rebeccapurple; |
|
|
|
.data_box{ |
|
width: 20%; |
|
height: 100%; |
|
// background: green; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
align-items: center; |
|
|
|
.data_txt{ |
|
color: #fff; |
|
font-size: 0.18rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.center_cen{ |
|
width: 100%; |
|
height: 46%; |
|
background: red; |
|
} |
|
.cen_bot{ |
|
width: 100%; |
|
height: 30%; |
|
display: flex; |
|
// background: green; |
|
|
|
.echarts{ |
|
width: 50%; |
|
height: 100%; |
|
.trend_box{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
.right_box { |
|
width: 30%; |
|
height: 100%; |
|
background: url(~@/assets/images/line_img.png) top left repeat-y; |
|
|
|
.full_btn{ |
|
width: 92%; |
|
height: 3%; |
|
// background: red; |
|
display: flex; |
|
justify-content: flex-end; |
|
align-items: center; |
|
} |
|
|
|
.right_top{ |
|
width: 92%; |
|
height: 30%; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
|
|
.title_box { |
|
width: 100%; |
|
height: 0.42rem; |
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
background-size:100% 100% ; |
|
|
|
.tit { |
|
width: 30%; |
|
height: 100%; |
|
font-size: 0.2rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 0.4rem; |
|
} |
|
} |
|
|
|
.pie_box{ |
|
width: 100%; |
|
height: 80%; |
|
// background: red; |
|
} |
|
} |
|
|
|
.right_center{ |
|
width: 92%; |
|
height: 45%; |
|
// background: red; |
|
margin:0 auto; |
|
.title_box { |
|
width: 100%; |
|
height: 0.42rem; |
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
background-size:100% 100% ; |
|
|
|
.tit { |
|
width: 30%; |
|
height: 100%; |
|
font-size: 0.2rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 0.4rem; |
|
} |
|
} |
|
} |
|
|
|
.right_bot{ |
|
width: 92%; |
|
height: 20%; |
|
// background: green; |
|
margin:0 auto; |
|
.title_box { |
|
width: 100%; |
|
height: 0.42rem; |
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
background-size:100% 100% ; |
|
|
|
.tit { |
|
width: 30%; |
|
height: 100%; |
|
font-size: 0.2rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
padding-left: 0.4rem; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|