mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

剩余报表

Browse Source
This commit is contained in:
朱菊兰
2024-06-20 15:23:05 +08:00
parent 7ba831f496
commit ce350c0c7f
11 changed files with 1250 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
src/views/report/turnoverRateBM/index.vue
View File

@@ -4,7 +4,7 @@
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
</div>
<div class="containerBottom">
<div class="smallTitle">4月标准组件转化效率</div>
<div class="smallTitle">标准组件转化效率</div>
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
@@ -26,109 +26,62 @@
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "月目标值",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao2",
label: "年目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
import {
componentconvertrateCPage,
componentconvertrateCExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "TurnoverRateBM",
data() {
return {
tableProps,
factoryList: [
{ id: 0, name: "瑞昌" },
{ id: 1, name: "邯郸" },
],
tableProps: [],
tableProps1: [
{
prop: "factory",
label: "工厂名称",
filter: (val) => this.factoryList[val].name,
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
],
listQuery: {
current: 1,
size: 1000,
size: 100,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
tableData: [],
chartHeight: this.tableHeight(269) / 2,
tableH: this.tableHeight(269) / 2,
legendList: [
{ id: 1, name: "2024年4月", type: 1, color: "#8EF0AB" },
{ id: 2, name: "2023年4月", type: 1, color: "#63BDFF" },
{ id: 3, name: "2024年4月目标值", type: 1, color: "#288AFF" },
{ id: 4, name: "2024年目标值", type: 1, color: "#7164FF" },
{ id: 1, name: "", type: 1, color: "#8EF0AB" },
{ id: 2, name: "", type: 1, color: "#63BDFF" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
{ id: 4, name: "", type: 1, color: "#7164FF" },
],
chartMsg: {
color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
xData: ["成都", "邯郸", "瑞昌"],
xData: [],
yName: "单位/%",
series: [
{
name: "2023年4月",
data: [
{ name: "%", value: 12.64444444 },
{ name: "%", value: 12.29 },
{ name: "%", value: 12.33 },
],
name: "1",
data: [],
type: "bar",
barWidth: 20,
barGap: 0.5,
@@ -143,12 +96,8 @@ export default {
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 14.92 },
{ name: "%", value: 15.31 },
{ name: "%", value: 15.36 },
],
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
@@ -162,12 +111,8 @@ export default {
},
},
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 15.36 },
{ name: "%", value: 15.52 },
{ name: "%", value: 15.63 },
],
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
@@ -181,12 +126,8 @@ export default {
},
},
{
name: "2024年目标值",
data: [
{ name: "%", value: 15.63 },
{ name: "%", value: 15.69 },
{ name: "%", value: 15.78 },
],
name: "4",
data: [],
type: "bar",
barWidth: 20,
label: {
@@ -227,6 +168,13 @@ export default {
this.chartHeight = this.tableHeight(269) / 2;
window.addEventListener("resize", this._setTableHeight);
},
mounted() {
this.tableProp = this.tableProp1;
this.listQuery.type = 2;
this.listQuery.startDate = moment().format("yyyy-MM-DD");
this.listQuery.factory = [];
this.getList();
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
@@ -245,11 +193,255 @@ export default {
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
this.getList();
},
handleExport() {
console.log("导出");
getList() {
this.tableProps = [];
componentconvertrateCPage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.records.length > 0) {
let msg = res.data.records[0];
let arr1 = [
{
prop: "yoy",
label: msg.yoyColumn,
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
minWidth: 150,
},
];
let arr2 = [
{
prop: "yearTarget",
label: msg.yearTargetColumn,
minWidth: 150,
},
];
// 重置chart的series
this.chartMsg.series = [
{
name: "1",
data: [],
type: "bar",
barWidth: 20,
barGap: 0.5,
label: {
show: true,
position: "top",
color: "#68C483",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#63BDFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#288AFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "4",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#7164FF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
];
// 维度为月时加年目标
if (this.listQuery.type === 2) {
this.tableProps = this.tableProps1.concat(arr1, arr2);
this.legendList = [
{ id: 1, name: "", type: 1, color: "#8EF0AB" },
{ id: 2, name: "", type: 1, color: "#63BDFF" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
{ id: 4, name: "", type: 1, color: "#7164FF" },
];
this.legendList[3].name = msg.yearTargetColumn;
this.chartMsg.series[3].name = msg.yearTargetColumn;
} else {
this.tableProps = this.tableProps1.concat(arr1);
this.legendList = [
{ id: 1, name: "", type: 1, color: "#8EF0AB" },
{ id: 2, name: "", type: 1, color: "#63BDFF" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
];
}
this.tableData = res.data.records;
// 设置图例
this.legendList[0].name = msg.yoyColumn;
this.legendList[1].name = msg.queryColumn;
this.legendList[2].name = msg.targetColumn;
this.chartMsg.series[0].name = msg.yoyColumn;
this.chartMsg.series[1].name = msg.queryColumn;
this.chartMsg.series[2].name = msg.targetColumn;
// 设置chartMsg的series的数据
this.setChartMsg(res.data.records);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let barData1 = [];
let barData2 = [];
let barData3 = [];
let barData4 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
barData1.push({ name: "%", value: val[i].yoy || 0 });
barData2.push({
name: "%",
value: val[i].queryValue || 0,
});
barData3.push({ name: "%", value: val[i].target || 0 });
barData4.push({
name: "%",
value: val[i].yearTarget || 0,
});
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = barData1;
this.chartMsg.series[1].data = barData2;
this.chartMsg.series[2].data = barData3;
this.chartMsg.series[3].data = barData4;
if (this.listQuery.type !== 2) {
this.chartMsg.series.pop();
}
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
xData: [],
yName: "单位/%",
series: [
{
name: "1",
data: [],
type: "bar",
barWidth: 20,
barGap: 0.5,
label: {
show: true,
position: "top",
color: "#68C483",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#63BDFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#288AFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "4",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#7164FF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "转化效率对标.xls";
componentconvertrateCExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};