mt-fe-group
/
yudao-init
7
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

报表

pull/40/head
juzi 3 months ago
parent
3d7e3d828c
commit
05b5814907
12 changed files with 2577 additions and 23 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +246
    -0
      src/views/report/chipOEEBM/index.vue
  2. +249
    -0
      src/views/report/chipOutputBM/index.vue
  3. +249
    -0
      src/views/report/chipPerCapitaBM/index.vue
  4. +246
    -0
      src/views/report/chipYieldBM/index.vue
  5. +24
    -19
      src/views/report/components/bmLineBar.vue
  6. +246
    -0
      src/views/report/conversionEfficiencyBM/index.vue
  7. +61
    -4
      src/views/report/ftoOutputBM/index.vue
  8. +246
    -0
      src/views/report/packageOEEBM/index.vue
  9. +249
    -0
      src/views/report/scOutputBM/index.vue
  10. +249
    -0
      src/views/report/scPerCapitaBM/index.vue
  11. +246
    -0
      src/views/report/scYieldBM/index.vue
  12. +266
    -0
      src/views/report/turnoverRateBM/index.vue

+ 246
- 0
src/views/report/chipOEEBM/index.vue View File

@@ -0,0 +1,246 @@
<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: "ChipOEEBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2024年4月目标值",
data: [85, 85, 85],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [57.5, 21.66, 18.4],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [23.33, 7.02, 80.2],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipOEEBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipOEEBM") {
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 === "ChipOEEBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipOEEBM") {
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>

+ 249
- 0
src/views/report/chipOutputBM/index.vue View File

@@ -0,0 +1,249 @@
<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: "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: "ChipOutputBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
yAxisLabel: {
formatter: function (value) {
return value;
},
},
series: [
{
name: "2024年4月目标值",
// 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",
},
},
],
},
chartId: "chipOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipOutputBM") {
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 === "ChipOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipOutputBM") {
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>

+ 249
- 0
src/views/report/chipPerCapitaBM/index.vue View File

@@ -0,0 +1,249 @@
<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: "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: "ChipPerCapitaBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
yAxisLabel: {
formatter: function (value) {
return value;
},
},
series: [
{
name: "2024年4月目标值",
// 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",
},
},
],
},
chartId: "chipPerCapitaBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipPerCapitaBM") {
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 === "ChipPerCapitaBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipPerCapitaBM") {
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>

+ 246
- 0
src/views/report/chipYieldBM/index.vue View File

@@ -0,0 +1,246 @@
<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: "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: "ChipYieldBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2024年4月目标值",
data: [85, 85, 85],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [57.5, 21.66, 18.4],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [23.33, 7.02, 80.2],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipYieldBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipYieldBM") {
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 === "ChipYieldBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipYieldBM") {
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>

+ 24
- 19
src/views/report/components/bmLineBar.vue View File

@@ -21,7 +21,10 @@
{{ item.name }}</span
>
</div>
<div id="main" :style="{ width: '100%', height: chartHeight + 'px' }"></div>
<div
:id="chartId"
:style="{ width: '100%', height: chartHeight + 'px' }"
></div>
</div>
</template>
<script>
@@ -44,12 +47,13 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
console.log(params);
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
@@ -73,6 +77,12 @@ export default {
},
yAxis: {
type: "value",
name: "",
nameTextStyle: {
fontSize: 12,
align: "right",
},
axisLabel: {},
},
series: [],
},
@@ -91,6 +101,14 @@ export default {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
@@ -98,7 +116,7 @@ export default {
this.chartHeight = newVal;
},
},
isOpen(val) {
chartNum(val) {
this.canvasReset();
},
chartMsg: {
@@ -108,22 +126,8 @@ export default {
deep: true,
},
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
mounted() {
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.myChart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
@@ -134,12 +138,13 @@ export default {
getMes() {
if (this.myChart) {
this.myChart.dispose();
this.myChart = "";
}
var chartDom = document.getElementById("main");
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
this.option.yAxis.name = this.chartMsg.yName;
this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.myChart.setOption(this.option);
},


+ 246
- 0
src/views/report/conversionEfficiencyBM/index.vue View File

@@ -0,0 +1,246 @@
<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: "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: "ConversionEfficiencyBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2024年4月目标值",
data: [85, 85, 85],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [57.5, 21.66, 18.4],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [23.33, 7.02, 80.2],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "conversionEfficiencyBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ConversionEfficiencyBM") {
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 === "ConversionEfficiencyBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ConversionEfficiencyBM") {
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>

+ 61
- 4
src/views/report/ftoOutputBM/index.vue View File

@@ -1,4 +1,3 @@
<!-- 产量对标FTO -->
<template>
<div>
<div class="containerTop">
@@ -7,6 +6,8 @@
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
@@ -112,34 +113,81 @@ export default {
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
yAxisLabel: {
formatter: function (value) {
return value;
},
},
series: [
{
name: "2024年4月目标值",
data: [70000, 80000, 90000],
// 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: [12000, 20000, 150000],
// 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: [60000, 70000, 80000],
// 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",
},
},
],
},
chartId: "ftoOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
@@ -148,10 +196,19 @@ export default {
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
// 图重新加载，为了防止窗口变化后尺寸图显示不佳，数据不更新
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);


+ 246
- 0
src/views/report/packageOEEBM/index.vue View File

@@ -0,0 +1,246 @@
<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: "PackageOEEBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2024年4月目标值",
data: [85, 85, 85],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [57.5, 21.66, 18.4],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [23.33, 7.02, 80.2],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "packageOEEBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "PackageOEEBM") {
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 === "PackageOEEBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "PackageOEEBM") {
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>

+ 249
- 0
src/views/report/scOutputBM/index.vue View File

@@ -0,0 +1,249 @@
<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: "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: "SCOutputBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
yAxisLabel: {
formatter: function (value) {
return value;
},
},
series: [
{
name: "2024年4月目标值",
// 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",
},
},
],
},
chartId: "scOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "SCOutputBM") {
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 === "SCOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCOutputBM") {
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>

+ 249
- 0
src/views/report/scPerCapitaBM/index.vue View File

@@ -0,0 +1,249 @@
<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: "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: "SCPerCapitaBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
yAxisLabel: {
formatter: function (value) {
return value;
},
},
series: [
{
name: "2024年4月目标值",
// 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",
},
},
],
},
chartId: "scPerCapitaBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "SCPerCapitaBM") {
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 === "SCPerCapitaBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCPerCapitaBM") {
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>

+ 246
- 0
src/views/report/scYieldBM/index.vue View File

@@ -0,0 +1,246 @@
<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: "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: "SCYieldBM",
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: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
yAxisLabel: {
formatter: function (value) {
return value + ".00%";
},
},
series: [
{
name: "2024年4月目标值",
data: [85, 85, 85],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [57.5, 21.66, 18.4],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [23.33, 7.02, 80.2],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "scYieldBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "SCYieldBM") {
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 === "SCYieldBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCYieldBM") {
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>

+ 266
- 0
src/views/report/turnoverRateBM/index.vue 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>

Write Preview
Loading…
Cancel
Save