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-19 16:01:13 +08:00
parent 45538e80c4
commit 9de0dfc639
9 changed files with 1238 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/report/chipPerCapitaBM/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,101 +26,61 @@
<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,
},
];
import {
chipAnnualAverageProductionPage,
chipAnnualAverageProductionExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "ChipPerCapitaBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
{ id: 1, name: "", type: 2, color: "#FFCE6A" },
{ id: 2, name: "", type: 1, color: "#8EF0AB" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
xData: [],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
@@ -130,28 +90,22 @@ export default {
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
@@ -188,6 +142,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);
},
@@ -206,11 +167,143 @@ 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 = [];
chipAnnualAverageProductionPage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.records.length > 0) {
let msg = res.data.records[0];
let arr = [
{
prop: "yoy",
label: msg.yoyColumn,
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
minWidth: 150,
},
];
this.tableProps = this.tableProps1.concat(arr);
this.tableData = res.data.records;
// 设置图例
this.legendList[0].name = msg.targetColumn;
this.legendList[1].name = msg.yoyColumn;
this.legendList[2].name = msg.queryColumn;
this.chartMsg.series[0].name = msg.targetColumn;
this.chartMsg.series[1].name = msg.yoyColumn;
this.chartMsg.series[2].name = msg.queryColumn;
// 设置偏移量
switch (this.listQuery.type) {
case 0:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 1:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 2:
this.chartMsg.series[1].label.position = [-10, -16];
break;
default:
this.chartMsg.series[1].label.position = [-17, -16];
}
// 设置chartMsg的series的数据
this.setChartMsg(res.data.records);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let lineData = [];
let barData1 = [];
let barData2 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
lineData.push(val[i].target || 0);
barData1.push(val[i].yoy || 0);
barData2.push(val[i].queryValue || 0);
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = lineData;
this.chartMsg.series[1].data = barData1;
this.chartMsg.series[2].data = barData2;
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/片",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "芯片人均产量对标.xls";
chipAnnualAverageProductionExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};