报表样式2.0
This commit is contained in:
265
src/views/report/completionStatusIntrBM/index.vue
Normal file
265
src/views/report/completionStatusIntrBM/index.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="containerTop">
|
||||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
|
||||
<bm-line-bar
|
||||
:chartHeight="chartHeight"
|
||||
:legendList="legendList"
|
||||
:chartMsg="chartMsg"
|
||||
:chartId="chartId"
|
||||
:chartNum="chartNum"
|
||||
/>
|
||||
</div>
|
||||
<div class="containerBottom">
|
||||
<div class="smallTitle">指标完成情况对标</div>
|
||||
<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";
|
||||
const tableProps = [
|
||||
{
|
||||
prop: "factory",
|
||||
label: "指标名称",
|
||||
// filter: (val) => factoryList[val],
|
||||
minWidth: 200,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "unit",
|
||||
label: "单位",
|
||||
minWidth: 80,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "time1",
|
||||
label: "时间1完成值",
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "time2",
|
||||
label: "时间1目标值",
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "CompletionStatusIntrBM",
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 1000,
|
||||
},
|
||||
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" },
|
||||
],
|
||||
chartHeight: this.tableHeight(137) / 2 - 111,
|
||||
tableH: this.tableHeight(137) / 2 - 70,
|
||||
legendList: [
|
||||
{ id: 1, name: "2024年4月目标值", type: 1, color: "#8EF0AB" },
|
||||
{ id: 2, name: "2024年4月完成值", type: 1, color: "#288AFF" },
|
||||
],
|
||||
chartMsg: {
|
||||
color: ["#8EF0AB", "#288AFF"],
|
||||
xData: ["碲化镉芯片", "碲化镉标准组件", "铜铟镓硒芯片"],
|
||||
yName: "单位/MW",
|
||||
series: [
|
||||
{
|
||||
name: "2024年4月目标值",
|
||||
// data: [2100, 800, 1500],
|
||||
// data: [9500, 7200, 9901],
|
||||
// data: [14666, 15000, 17888],
|
||||
data: [55000, 45666, 59000],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
// position: [-5, -16],
|
||||
// position: [-5, -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: [5566, 4566, 6500],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: [0, -16],
|
||||
color: "#288AFF",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
chartId: "completionStatusIntrBMChart",
|
||||
chartNum: 1,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
bmSearchBar,
|
||||
BmLineBar,
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听左侧菜单栏是否展开
|
||||
isOpen(val) {
|
||||
if (this.$route.name === "CompletionStatusIntrBM") {
|
||||
this.chartNum++;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.tableH = this.tableHeight(137) / 2 - 70;
|
||||
this.chartHeight = this.tableHeight(137) / 2 - 111;
|
||||
window.addEventListener("resize", this._setTableHeight);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("resize", this._setTableHeight);
|
||||
},
|
||||
activated() {
|
||||
// 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
|
||||
if (this.$route.name === "CompletionStatusIntrBM") {
|
||||
this.chartNum++;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_setTableHeight() {
|
||||
this.tableH = this.tableHeight(137) / 2 - 70;
|
||||
this.chartHeight = this.tableHeight(137) / 2 - 111;
|
||||
if (this.$route.name === "CompletionStatusIntrBM") {
|
||||
this.chartNum++;
|
||||
}
|
||||
},
|
||||
getSearch(val) {
|
||||
console.log(val);
|
||||
console.log("==========下面是测试代码，需删除");
|
||||
this.chartMsg.series = [];
|
||||
},
|
||||
handleExport() {
|
||||
console.log("导出=====下面是测试代码，需删除");
|
||||
this.chartMsg.series = [
|
||||
{
|
||||
name: "2024年4月目标值1",
|
||||
// data: [3000, 2000, 3000],
|
||||
// data: [6800, 5000, 8900],
|
||||
// data: [12000, 17000, 19000],
|
||||
data: [560000, 540000, 600000],
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#FFAE17",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "2023年4月",
|
||||
// data: [2100, 800, 1500],
|
||||
// data: [9500, 7200, 9901],
|
||||
// data: [14666, 15000, 17888],
|
||||
data: [550000, 456666, 590000],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
// position: [-5, -16],
|
||||
// position: [-5, -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],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: [0, -16],
|
||||
color: "#288AFF",
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.containerTop,
|
||||
.containerBottom {
|
||||
height: calc((100vh - 137px) / 2);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
.containerBottom {
|
||||
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>
|
||||
Reference in New Issue
Block a user