报表2页面
This commit is contained in:
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="containerTop">
|
||||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
|
||||
<bm-line-bar
|
||||
<bm-search-bar-complete
|
||||
@getSearch="getSearch"
|
||||
@handleExport="handleExport"
|
||||
/>
|
||||
</div>
|
||||
<div class="containerBottom">
|
||||
<div class="smallTitle">凯盛玻璃控股指标完成情况</div>
|
||||
<bm-bar-complete
|
||||
: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"
|
||||
@@ -24,33 +27,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bmSearchBar from "../components/bmSearchBar.vue";
|
||||
import BmLineBar from "../components/bmLineBar.vue";
|
||||
import BmSearchBarComplete from "./components/bmSearchBarComplete.vue";
|
||||
import BmBarComplete from "./components/bmBarComplete.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,
|
||||
label: "时间1",
|
||||
},
|
||||
{
|
||||
prop: "time2",
|
||||
label: "时间1目标值",
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true,
|
||||
label: "时间2",
|
||||
},
|
||||
];
|
||||
export default {
|
||||
@@ -63,73 +58,65 @@ export default {
|
||||
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" },
|
||||
{ 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,
|
||||
chartHeight: this.tableHeight(269) / 2,
|
||||
tableH: this.tableHeight(269) / 2,
|
||||
legendList: [
|
||||
{ id: 1, name: "2024年4月目标值", type: 1, color: "#8EF0AB" },
|
||||
{ id: 2, name: "2024年4月完成值", type: 1, color: "#288AFF" },
|
||||
{ id: 1, name: "2023年4月", type: 1, color: "#288AFF33" },
|
||||
{ id: 2, name: "2024年4月", type: 1, color: "#288AFF" },
|
||||
],
|
||||
chartMsg: {
|
||||
color: ["#8EF0AB", "#288AFF"],
|
||||
xData: ["碲化镉芯片", "碲化镉标准组件", "铜铟镓硒芯片"],
|
||||
color: ["#288AFF33", "#288AFF"],
|
||||
xData: ["成都", "邯郸", "瑞昌"],
|
||||
yName: "单位/MW",
|
||||
series: [
|
||||
{
|
||||
name: "2024年4月目标值",
|
||||
// data: [2100, 800, 1500],
|
||||
// data: [9500, 7200, 9901],
|
||||
// data: [14666, 15000, 17888],
|
||||
data: [55000, 45666, 59000],
|
||||
name: "2023年4月",
|
||||
data: [5505, 6578, 5500],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
// position: [-5, -16],
|
||||
// position: [-5, -16],
|
||||
// position: [-10, -16],
|
||||
position: [-17, -16],
|
||||
color: "#68C483",
|
||||
position: "top",
|
||||
color: "#2789FF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "2024年4月完成值",
|
||||
// data: [2100, 900, 1300],
|
||||
// data: [9100, 7300, 9700],
|
||||
// data: [14666, 15300, 18000],
|
||||
data: [5566, 4566, 6500],
|
||||
name: "2024年4月",
|
||||
data: [3503, 3456, 4500],
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barGap: "-100%",
|
||||
label: {
|
||||
show: true,
|
||||
position: [0, -16],
|
||||
position: "top",
|
||||
color: "#288AFF",
|
||||
},
|
||||
},
|
||||
@@ -140,8 +127,8 @@ export default {
|
||||
};
|
||||
},
|
||||
components: {
|
||||
bmSearchBar,
|
||||
BmLineBar,
|
||||
BmBarComplete,
|
||||
BmSearchBarComplete,
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
@@ -157,8 +144,8 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.tableH = this.tableHeight(137) / 2 - 70;
|
||||
this.chartHeight = this.tableHeight(137) / 2 - 111;
|
||||
this.tableH = this.tableHeight(269) / 2;
|
||||
this.chartHeight = this.tableHeight(269) / 2;
|
||||
window.addEventListener("resize", this._setTableHeight);
|
||||
},
|
||||
destroyed() {
|
||||
@@ -172,80 +159,36 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
_setTableHeight() {
|
||||
this.tableH = this.tableHeight(137) / 2 - 70;
|
||||
this.chartHeight = this.tableHeight(137) / 2 - 111;
|
||||
this.tableH = this.tableHeight(269) / 2;
|
||||
this.chartHeight = this.tableHeight(269) / 2;
|
||||
if (this.$route.name === "CompletionStatusIntrBM") {
|
||||
this.chartNum++;
|
||||
}
|
||||
},
|
||||
getSearch(val) {
|
||||
console.log(val);
|
||||
console.log("==========下面是测试代码，需删除");
|
||||
this.chartMsg.series = [];
|
||||
console.log("=========================");
|
||||
},
|
||||
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",
|
||||
},
|
||||
},
|
||||
];
|
||||
console.log("导出");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.containerTop {
|
||||
height: 64px;
|
||||
}
|
||||
.containerTop,
|
||||
.containerBottom {
|
||||
height: calc((100vh - 137px) / 2);
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
.containerBottom {
|
||||
height: calc(100vh - 201px);
|
||||
margin-top: 8px;
|
||||
.smallTitle {
|
||||
font-size: 16px;
|
||||
|
||||
Reference in New Issue
Block a user