<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.getWayBillNumStatistics();
|
this.getHistogramNumStatistics();
|
this.getWayBillLineStatistics();
|
},
|
methods: {
|
handleSetLineChartData(type) {
|
this.lineChartData = lineChartData[type];
|
},
|
getWayBillNumStatistics() {
|
var the = this;
|
var DateType = this.value;
|
const url = "/api/User/GetWayBillNumStatistics";
|
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.getWayBillNumStatistics();
|
},
|
changeLineDay() {
|
this.getWayBillLineStatistics();
|
},
|
getHistogramNumStatistics() {
|
var the = this;
|
const url = "/api/User/GetHistogramNumStatistics";
|
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.CountWayBillNum);
|
});
|
window.setTimeout(function() {
|
the.$refs.barchartInfo.initChart();
|
}, 10);
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
getWayBillLineStatistics() {
|
var DateType = this.value2;
|
var the = this;
|
const url = "/api/User/GetWayBillLineStatistics";
|
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.CountWayBillNum);
|
});
|
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>
|
