348 lines
8.9 KiB
Vue
348 lines
8.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="containerTop">
|
|
<bm-search-bar-complete
|
|
@getSearch="getSearch"
|
|
@handleExport="handleExport"
|
|
/>
|
|
</div>
|
|
<div class="containerBottom">
|
|
<div class="smallTitle">凯盛玻璃控股指标完成情况</div>
|
|
<bm-bar-complete
|
|
:chartHeight="chartHeight"
|
|
:legendList="legendList"
|
|
:chartMsg1="chartMsg1"
|
|
:chartMsg2="chartMsg2"
|
|
:chartNum="chartNum"
|
|
/>
|
|
<base-table
|
|
:table-props="tableProps"
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BmSearchBarComplete from "./components/bmSearchBarComplete.vue";
|
|
import BmBarComplete from "./components/bmBarComplete.vue";
|
|
import {
|
|
targetCompletionPage,
|
|
targetCompletionExport,
|
|
} from "@/api/report/benchmarking.js";
|
|
import moment from "moment";
|
|
export default {
|
|
name: "CompletionStatusIntrBM",
|
|
data() {
|
|
return {
|
|
tableProps: [],
|
|
tableProps1: [
|
|
{
|
|
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: "#288AFF33" },
|
|
{ id: 2, name: "", type: 1, color: "#288AFF" },
|
|
],
|
|
chartMsg1: {
|
|
color: ["#288AFF33", "#288AFF"],
|
|
xData: [],
|
|
yName: "单位/MW",
|
|
series: [
|
|
{
|
|
name: "1",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
},
|
|
{
|
|
name: "2",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
barGap: "-100%",
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#288AFF",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
chartMsg2: {
|
|
color: ["#288AFF33", "#288AFF"],
|
|
xData: [],
|
|
yName: "单位/㎡",
|
|
series: [
|
|
{
|
|
name: "1",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
},
|
|
{
|
|
name: "2",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
barGap: "-100%",
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#288AFF",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
chartNum: 1,
|
|
};
|
|
},
|
|
components: {
|
|
BmBarComplete,
|
|
BmSearchBarComplete,
|
|
},
|
|
computed: {
|
|
isOpen() {
|
|
return this.$store.getters.sidebar.opened;
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听左侧菜单栏是否展开
|
|
isOpen(val) {
|
|
if (this.$route.name === "CompletionStatusIntrBM") {
|
|
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.getList();
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener("resize", this._setTableHeight);
|
|
},
|
|
activated() {
|
|
// 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
|
|
if (this.$route.name === "CompletionStatusIntrBM") {
|
|
this.chartNum++;
|
|
}
|
|
},
|
|
methods: {
|
|
_setTableHeight() {
|
|
this.tableH = this.tableHeight(269) / 2;
|
|
this.chartHeight = this.tableHeight(269) / 2;
|
|
if (this.$route.name === "CompletionStatusIntrBM") {
|
|
this.chartNum++;
|
|
}
|
|
},
|
|
getSearch(val) {
|
|
this.listQuery.type = val.type;
|
|
this.listQuery.startDate = val.startDate;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.tableProps = [];
|
|
targetCompletionPage({ ...this.listQuery }).then((res) => {
|
|
if (res.data && res.data.records.length > 0) {
|
|
let msg = res.data.records[0];
|
|
let arr = [
|
|
{
|
|
prop: "queryValue",
|
|
label: msg.queryColumn,
|
|
filter: (val) => (val || val === 0 ? val : "-"),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
prop: "target",
|
|
label: msg.targetColumn,
|
|
filter: (val) => (val || val === 0 ? val : "-"),
|
|
minWidth: 150,
|
|
},
|
|
];
|
|
this.tableProps = this.tableProps1.concat(arr);
|
|
this.tableData = res.data.records;
|
|
// 设置图例
|
|
this.legendList[0].name = msg.targetColumn;
|
|
this.legendList[1].name = msg.queryColumn;
|
|
this.chartMsg1.series[0].name = msg.targetColumn;
|
|
this.chartMsg1.series[1].name = msg.queryColumn;
|
|
this.chartMsg2.series[0].name = msg.targetColumn;
|
|
this.chartMsg2.series[1].name = msg.queryColumn;
|
|
// 设置偏移量
|
|
switch (this.listQuery.type) {
|
|
case 0:
|
|
this.chartMsg1.series[1].label.position = [-5, -16];
|
|
this.chartMsg2.series[1].label.position = [-5, -16];
|
|
break;
|
|
case 1:
|
|
this.chartMsg1.series[1].label.position = [-5, -16];
|
|
this.chartMsg2.series[1].label.position = [-5, -16];
|
|
break;
|
|
case 2:
|
|
this.chartMsg1.series[1].label.position = [-10, -16];
|
|
this.chartMsg2.series[1].label.position = [-10, -16];
|
|
break;
|
|
default:
|
|
this.chartMsg1.series[1].label.position = [-17, -16];
|
|
this.chartMsg2.series[1].label.position = [-17, -16];
|
|
}
|
|
// 设置chartMsg的series的数据
|
|
this.setChartMsg(res.data.records);
|
|
} else {
|
|
// 重置
|
|
this.resetMsg();
|
|
}
|
|
});
|
|
},
|
|
setChartMsg(val) {
|
|
let xData1 = [];
|
|
let xData2 = [];
|
|
let barData1 = [];
|
|
let barData2 = [];
|
|
let barData3 = [];
|
|
let barData4 = [];
|
|
for (let i = 0; i < val.length; i++) {
|
|
if (val[i].unit !== "㎡") {
|
|
xData1.push(val[i].item);
|
|
barData1.push(val[i].target || 0);
|
|
barData2.push(val[i].queryValue || 0);
|
|
} else {
|
|
xData2.push(val[i].item);
|
|
barData3.push(val[i].target || 0);
|
|
barData4.push(val[i].queryValue || 0);
|
|
}
|
|
}
|
|
this.chartMsg1.xData = xData1;
|
|
this.chartMsg2.xData = xData2;
|
|
this.chartMsg1.series[0].data = barData1;
|
|
this.chartMsg1.series[1].data = barData2;
|
|
this.chartMsg2.series[0].data = barData3;
|
|
this.chartMsg2.series[1].data = barData4;
|
|
},
|
|
resetMsg() {
|
|
this.tableProps = this.tableProps1;
|
|
this.tableData = [];
|
|
this.chartMsg1 = {
|
|
color: ["#288AFF33", "#288AFF"],
|
|
xData: [],
|
|
yName: "单位/MW",
|
|
series: [
|
|
{
|
|
name: "1",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
},
|
|
{
|
|
name: "2",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
barGap: "-100%",
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#288AFF",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
this.chartMsg2 = {
|
|
color: ["#288AFF33", "#288AFF"],
|
|
xData: [],
|
|
yName: "单位/㎡",
|
|
series: [
|
|
{
|
|
name: "1",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
},
|
|
{
|
|
name: "2",
|
|
data: [],
|
|
type: "bar",
|
|
barWidth: 20,
|
|
barGap: "-100%",
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
color: "#288AFF",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
},
|
|
handleExport(val) {
|
|
this.listQuery.type = val.type;
|
|
this.listQuery.startDate = val.startDate;
|
|
let fileName = "指标完成情况对标.xls";
|
|
targetCompletionExport({ ...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>
|