|
|
@@ -153,6 +153,27 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="col-7">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="demonstration" ></span>
|
|
|
+ <el-date-picker @blur="laborReportsUserGroupsCountApi('')"
|
|
|
+ v-model="laborReportsUserGroupsCountDate"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="card-body row">
|
|
|
+ <div id="laborReportsUserGroupsCount" class="col" style="width:600px;height:600px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@endsection
|
|
|
@@ -173,6 +194,7 @@
|
|
|
logisticsCountingRecords:{!! $logisticsCountingRecords !!},
|
|
|
warehouseCountingRecords:{!! $warehouseCountingRecords !!},
|
|
|
laborReportsCountingRecords:{!! $laborReportsCountingRecords !!},
|
|
|
+ laborReportsUserGroupsCount:{!! $laborReportsUserGroupsCount !!},
|
|
|
warehouses: {},
|
|
|
totalOrders: {
|
|
|
total: null,
|
|
|
@@ -221,6 +243,8 @@
|
|
|
moment(new Date()).format('yyyy-MM-DD')],
|
|
|
laborReportsCountingRecordsDate: [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-DD'),
|
|
|
moment(new Date()).format('yyyy-MM-DD')],
|
|
|
+ laborReportsUserGroupsCountDate: [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-DD'),
|
|
|
+ moment(new Date()).format('yyyy-MM-DD')],
|
|
|
orderCountingRecordsUnit: '日',
|
|
|
laborReportsCountingRecordUnit: '日'
|
|
|
},
|
|
|
@@ -253,6 +277,9 @@
|
|
|
this.laborReportsCountingRecordsChart = echarts.init(document.getElementById('laborReportsCountingRecords'));
|
|
|
this.initLaborReportsCountingRecordsChart();
|
|
|
|
|
|
+ this.laborReportsUserGroupsCountChart = echarts.init(document.getElementById('laborReportsUserGroupsCount'));
|
|
|
+ this.initLaborReportsUserGroupsCountChart();
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
getWareHouse: function (code) {
|
|
|
@@ -267,7 +294,7 @@
|
|
|
},
|
|
|
initOrderCountingRecordsChart() {
|
|
|
this.orderCountingRecordsChart.setOption({
|
|
|
- title: {text: '实时待处理订单'},
|
|
|
+ title: {text: '订单量趋势'},
|
|
|
tooltip: {},
|
|
|
legend: {data: ['订单数']},
|
|
|
xAxis: {
|
|
|
@@ -355,6 +382,34 @@
|
|
|
]
|
|
|
});
|
|
|
},
|
|
|
+ initLaborReportsUserGroupsCountChart() {
|
|
|
+ this.laborReportsUserGroupsCountChart.setOption({
|
|
|
+ title: {
|
|
|
+ text: '小组临时工分布',
|
|
|
+ left: 'left'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: this.laborReportsUserGroupsCount,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
initLaborReportsCountingRecords() {
|
|
|
let _this = this;
|
|
|
this.laborReportsCountingRecords.forEach(function (item) {
|
|
|
@@ -429,6 +484,18 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ laborReportsUserGroupsCountApi() {
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('start', this.laborReportsUserGroupsCountDate[0]);
|
|
|
+ formData.append('end', this.laborReportsUserGroupsCountDate[1]);
|
|
|
+ let _this = this;
|
|
|
+ axios.post('{{url('apiLocal/control/panel/menu/laborReportsUserGroupsCountApi')}}', formData).then(function (res) {
|
|
|
+ if (res.status === 200) {
|
|
|
+ _this.laborReportsUserGroupsCount = res.data.laborReportsUserGroupsCount;
|
|
|
+ _this.initLaborReportsUserGroupsCountChart();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
});
|
|
|
</script>
|