480 lines
13 KiB
Vue
480 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div class="containerTop">
|
|
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
|
|
</div>
|
|
<div class="containerBottom">
|
|
<div class="smallTitle">标准组件转化效率</div>
|
|
<bm-line-bar
|
|
:chartHeight="chartHeight"
|
|
:legendList="legendList"
|
|
:chartMsg="chartMsg"
|
|
:chartId="chartId"
|
|
:chartNum="chartNum"
|
|
/>
|
|
<base-table
|
|
:table-props="tableProps"
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import bmSearchBar from "../components/bmSearchBar.vue";
|
|
import BmLineBar from "../components/bmLineBar.vue";
|
|
import {
|
|
componentconvertrateCPage,
|
|
componentconvertrateCExport,
|
|
} from "@/api/report/benchmarking.js";
|
|
import moment from "moment";
|
|
export default {
|
|
name: "TurnoverRateBM",
|
|
data() {
|
|
return {
|
|
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: 100,
|
|
},
|
|
tableData: [],
|
|
chartHeight: this.tableHeight(269) / 2,
|
|
tableH: this.tableHeight(269) / 2,
|
|
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" },
|
|
],
|
|
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) + "%";
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
chartId: "turnoverRateBMChart",
|
|
chartNum: 1,
|
|
};
|
|
},
|
|
components: {
|
|
bmSearchBar,
|
|
BmLineBar,
|
|
},
|
|
computed: {
|
|
isOpen() {
|
|
return this.$store.getters.sidebar.opened;
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听左侧菜单栏是否展开
|
|
isOpen(val) {
|
|
if (this.$route.name === "TurnoverRateBM") {
|
|
this.chartNum++;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.tableH = this.tableHeight(269) / 2;
|
|
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);
|
|
},
|
|
activated() {
|
|
// 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
|
|
if (this.$route.name === "TurnoverRateBM") {
|
|
this.chartNum++;
|
|
}
|
|
},
|
|
methods: {
|
|
_setTableHeight() {
|
|
this.tableH = this.tableHeight(269) / 2;
|
|
this.chartHeight = this.tableHeight(269) / 2;
|
|
if (this.$route.name === "TurnoverRateBM") {
|
|
this.chartNum++;
|
|
}
|
|
},
|
|
getSearch(val) {
|
|
this.listQuery.type = val.type;
|
|
this.listQuery.startDate = val.startDate;
|
|
this.listQuery.factory = val.factory;
|
|
this.getList();
|
|
},
|
|
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(() => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.containerTop {
|
|
height: 64px;
|
|
}
|
|
.containerTop,
|
|
.containerBottom {
|
|
position: relative;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
.containerBottom {
|
|
height: calc(100vh - 201px);
|
|
margin-top: 8px;
|
|
.smallTitle {
|
|
font-size: 16px;
|
|
color: #000;
|
|
margin-bottom: 15px;
|
|
}
|
|
.smallTitle::before {
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
content: "";
|
|
margin-right: 8px;
|
|
vertical-align: -3px;
|
|
}
|
|
}
|
|
</style>
|