更新
This commit is contained in:
112
src/views/asrs/Piechart/index.vue
Normal file
112
src/views/asrs/Piechart/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-22 15:01:54
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-09-05 14:52:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="23">
|
||||
<pieChart
|
||||
title="饼状图分析"
|
||||
ref="pieChart"
|
||||
height="500px"
|
||||
:total-number="tableData.totalNumber"
|
||||
:pie-data="tableData.list" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPage from '../mixins/basic-page';
|
||||
import pieChart from '../chart/PieChart.vue';
|
||||
import { getPieChart } from '@/api/asrs/warehouseStorehouseStorage';
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPieChart,
|
||||
},
|
||||
listQuery: {
|
||||
warehouseId: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'searchTime',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
pieChart,
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
if (this.listQuery.startTime) {
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
this.tableData = response.data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.pieChart.initChart();
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
if (val.searchTime) {
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
|
||||
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$modal.msgWarning('请选择时间');
|
||||
}
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
113
src/views/asrs/Piechart/indexb.vue
Normal file
113
src/views/asrs/Piechart/indexb.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-22 15:01:54
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-09-06 14:44:21
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="23">
|
||||
<pieChart
|
||||
title="饼状图分析"
|
||||
ref="pieChart"
|
||||
height="500px"
|
||||
:total-number="tableData.totalNumber"
|
||||
:pie-data="tableData.list" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPage from '../mixins/basic-page';
|
||||
import pieChart from '../chart/PieChart.vue';
|
||||
import { getPieChart } from '@/api/asrs/warehouseStorehouseStorage';
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPieChart,
|
||||
},
|
||||
listQuery: {
|
||||
warehouseId: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
formConfig: [
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'searchTime',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
pieChart,
|
||||
},
|
||||
created() {
|
||||
this.listQuery.warehouseId = this.bId;
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
if (this.listQuery.startTime) {
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
this.tableData = response.data;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.pieChart.initChart();
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
if (val.searchTime) {
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
|
||||
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$modal.msgWarning('请选择时间');
|
||||
}
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user