<template>
|
<div class="dashboard-editor-container">
|
|
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
|
<el-row :gutter="10">
|
<el-col :xs="24" :sm="24" :lg="12">
|
<div class="chart-wrapper">
|
<div class="">
|
<el-select v-model="value" placeholder="请选择" @change="changeDay()">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="haocai-title"></div>
|
<el-row :gutter="10">
|
<el-col :xs="24" :sm="100" :lg="8">
|
<ring-chart ref="ringchartOne" :ring-color="'#ff6699'" :ring-value="numStatistics.noAcceptWayBillNum" :ring-proportion="numStatistics.noAcceptWayBillProportion" />
|
<div class="haocai-title">未揽收运单</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :lg="8">
|
<ring-chart ref="ringchartTwo" :ring-color="'#cc0066'" :ring-value="numStatistics.acceptWayBillNum" :ring-proportion="numStatistics.acceptWayBillNumProportion" />
|
<div class="haocai-title">已揽收运单</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :lg="8">
|
<ring-chart ref="ringchartThree" :ring-value="numStatistics.endWayBillNum" :ring-proportion="numStatistics.endWayBillNumProportion" />
|
<div class="haocai-title">已完成运单</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :lg="12">
|
<div class="chart-wrapper">
|
<div class="haocai-title">运单数量统计分析</div>
|
<bar-chart ref="barchartInfo" :xaxis-array="barXaxisArray" :series="barSeries" />
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
<div class="">
|
<el-select v-model="value2" placeholder="请选择" @change="changeLineDay()">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<line-chart ref="linechartInfo" :xaxis-array="lineXaxisArray" :series="lineSeries" />
|
</el-row>
|
|
<!-- <el-row :gutter="10">
|
<el-col :xs="24" :sm="24" :lg="8">
|
<div class="chart-wrapper">
|
<raddar-chart />
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :lg="8">
|
<div class="chart-wrapper">
|
<pie-chart />
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :lg="8">
|
<div class="chart-wrapper">
|
<bar-chart />
|
</div>
|
</el-col>
|
</el-row> -->
|
|
</div>
|
</template>
|
|
<script>
|
import PanelGroup from "./components/PanelGroup";
|
import LineChart from "./components/LineChart";
|
import RaddarChart from "./components/RaddarChart";
|
import PieChart from "./components/PieChart";
|
import RingChart from "./components/RingChart";
|
import BarChart from "./components/BarChart";
|
|
const lineChartData = {
|
newVisitis: {
|
expectedData: []
|
}
|
};
|
|
export default {
|
name: "DashboardAdmin",
|
components: {
|
PanelGroup,
|
LineChart,
|
RaddarChart,
|
PieChart,
|
RingChart,
|
BarChart
|
},
|
data() {
|
return {
|
lineChartData: lineChartData.newVisitis,
|
options: [
|
{
|
value: "今日",
|
label: "今日"
|
},
|
{
|
value: "近两日",
|
label: "近两日"
|
},
|
{
|
value: "近一星期",
|
label: "近一星期"
|
},
|
{
|
value: "近一月",
|
label: "近一月"
|
},
|
{
|
value: "近三月",
|
label: "近三月"
|
},
|
{
|
value: "近半年",
|
label: "近半年"
|
},
|
{
|
value: "近一年",
|
label: "近一年"
|
}
|
],
|
value: "今日",
|
value2: "近一月",
|
numStatistics: {
|
noAcceptWayBillNum: 0,
|
acceptWayBillNum: 0,
|
endWayBillNum: 0,
|
noAcceptWayBillProportion: 0,
|
acceptWayBillNumProportion: 0,
|
endWayBillNumProportion: 0
|
},
|
histogramNumList: [],
|
barXaxisArray: [],
|
barSeries: [{ name: "", data: [] }],
|
lineXaxisArray: [],
|
lineSeries: [{ name: "", data: [] }],
|
lineHistogramNumList: []
|
};
|
},
|
mounted() {
|
this.getUserWayBillNumStatistics();
|
this.getUserHistogramNumStatistics();
|
this.getUserWayBillLineStatistics();
|
},
|
methods: {
|
handleSetLineChartData(type) {
|
this.lineChartData = lineChartData[type];
|
},
|
getUserWayBillNumStatistics() {
|
var the = this;
|
var dateType = this.value;
|
const url = "/api/dashboard/tms/getUserWayBillNumStatistics";
|
const params = { dateType: dateType };
|
var callback = res => {
|
if (res.result) {
|
this.$set(this.numStatistics, "noAcceptWayBillNum", res.data.noAcceptWayBillNum);
|
this.$set(this.numStatistics, "acceptWayBillNum", res.data.acceptWayBillNum);
|
this.$set(this.numStatistics, "endWayBillNum", res.data.endWayBillNum);
|
var noAcceptWayBillProportion = 0;
|
if (res.data.WayBillNum !== 0) {
|
noAcceptWayBillProportion = parseFloat(res.data.noAcceptWayBillNum / res.data.WayBillNum * 100);
|
}
|
var acceptWayBillNumProportion = 0;
|
if (res.data.WayBillNum !== 0) {
|
acceptWayBillNumProportion = parseFloat(res.data.acceptWayBillNum / res.data.WayBillNum * 100);
|
}
|
var endWayBillNumProportion = 0;
|
if (res.data.WayBillNum !== 0) {
|
endWayBillNumProportion = parseFloat(res.data.endWayBillNum / res.data.WayBillNum * 100);
|
}
|
this.$set(this.numStatistics, "noAcceptWayBillProportion", noAcceptWayBillProportion);
|
this.$set(this.numStatistics, "acceptWayBillNumProportion", acceptWayBillNumProportion);
|
this.$set(this.numStatistics, "endWayBillNumProportion", endWayBillNumProportion);
|
window.setTimeout(function() {
|
the.$refs.ringchartOne.initChart();
|
the.$refs.ringchartTwo.initChart();
|
the.$refs.ringchartThree.initChart();
|
}, 10);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
changeDay() {
|
this.getUserWayBillNumStatistics();
|
},
|
changeLineDay() {
|
this.getUserWayBillLineStatistics();
|
},
|
getUserHistogramNumStatistics() {
|
var the = this;
|
const url = "/api/dashboard/tms/getUserHistogramNumStatistics";
|
const params = {};
|
var callback = res => {
|
if (res.result) {
|
this.barXaxisArray = [];
|
this.barSeries = [{ name: "", data: [] }];
|
this.histogramNumList = res.data;
|
this.barSeries[0].name = "运单数";
|
this.histogramNumList.forEach(row => {
|
this.barXaxisArray.push(row.year + "-" + row.month);
|
this.barSeries[0].data.push(row.count);
|
});
|
window.setTimeout(function() {
|
the.$refs.barchartInfo.initChart();
|
}, 10);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
getUserWayBillLineStatistics() {
|
var dateType = this.value2;
|
var the = this;
|
const url = "/api/dashboard/tms/getUserWayBillLineStatistics";
|
const params = { dateType: dateType };
|
var callback = res => {
|
if (res.result) {
|
this.lineXaxisArray = [];
|
this.lineSeries = [{ name: "", data: [] }];
|
this.lineHistogramNumList = [];
|
this.lineHistogramNumList = res.data;
|
this.lineSeries[0].name = "运单数";
|
this.lineHistogramNumList.forEach(row => {
|
this.lineXaxisArray.push(row.year + "-" + row.month + "-" + row.day);
|
this.lineSeries[0].data.push(row.count);
|
});
|
window.setTimeout(function() {
|
the.$refs.linechartInfo.initChart();
|
}, 10);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
}
|
}
|
};
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.dashboard-editor-container {
|
padding: 0px;
|
.chart-wrapper {
|
background: #fff;
|
padding: 16px 16px 0;
|
margin-bottom: 10px;
|
.haocai-title {
|
text-align: center;
|
color: #888;
|
font-size: 18px;
|
}
|
}
|
}
|
</style>
|
