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-13 15:36:02 +08:00
parent 3d7e3d828c
commit 05b5814907
12 changed files with 2577 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/views/report/turnoverRateBM/index.vue Normal file
View File

@@ -0,0 +1,266 @@
<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">封装OEE对标</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: "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,
},
];
export default {
name: "TurnoverRateBM",
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: "2023年4月", type: 1, color: "#63BDFF" },
{ id: 3, name: "2024年4月目标值", type: 1, color: "#288AFF" },
{ id: 4, name: "2024年目标值", type: 1, color: "#7164FF" },
],
chartMsg: {
color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2023年4月",
data: [12.64, 12.29, 12.33],
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: "2024年4月",
data: [14.92, 15.31, 15.36],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#63BDFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月目标值",
data: [15.36, 15.52, 15.63],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#288AFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年目标值",
data: [15.63, 15.69, 15.78],
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(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 === "TurnoverRateBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "TurnoverRateBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</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>