projects/mescc/zjl
into projects/mescc/develop
3 months ago
@@ -0,0 +1,38 @@ | |||
// 对标报表的接口 | |||
import request from '@/utils/request' | |||
// 稼动率对标 | |||
export function utilzationComparePage(data) { | |||
return request({ | |||
url: '/ip/utilzation-compare/page', | |||
method: 'post', | |||
data: data | |||
}) | |||
} | |||
// 稼动率对标导出 | |||
export function utilzationCompareExport(data) { | |||
return request({ | |||
url: '/ip/utilzation-compare/export-excel', | |||
method: 'post', | |||
responseType: 'blob', | |||
data: data | |||
}) | |||
} | |||
// 芯片OEE对标 | |||
export function chipoeeComparePage(data) { | |||
return request({ | |||
url: '/ip/chipoee-compare/page', | |||
method: 'post', | |||
data: data | |||
}) | |||
} | |||
// 芯片OEE对标导出 | |||
export function chipoeeCompareExport(data) { | |||
return request({ | |||
url: '/ip/chipoee-compare/export-excel', | |||
method: 'post', | |||
responseType: 'blob', | |||
data: data | |||
}) | |||
} |
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片OEE</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片OEE对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -26,102 +26,61 @@ | |||
<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, | |||
}, | |||
]; | |||
import { | |||
chipoeeComparePage, | |||
chipoeeCompareExport, | |||
} from "@/api/report/benchmarking.js"; | |||
import moment from "moment"; | |||
export default { | |||
name: "ChipOEEBM", | |||
data() { | |||
return { | |||
tableProps, | |||
factoryList: [ | |||
{ id: 0, name: "瑞昌" }, | |||
{ id: 1, name: "邯郸" }, | |||
], | |||
tableProps: [], | |||
tableProps1: [ | |||
{ | |||
prop: "factory", | |||
label: "工厂名称", | |||
filter: (val) => this.factoryList[val].name, | |||
minWidth: 150, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: "item", | |||
label: "科目", | |||
minWidth: 120, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: "unit", | |||
label: "单位", | |||
minWidth: 80, | |||
showOverflowtooltip: true, | |||
}, | |||
], | |||
listQuery: { | |||
current: 1, | |||
size: 1000, | |||
size: 100, | |||
}, | |||
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, | |||
tableData: [], | |||
chartHeight: this.tableHeight(269) / 2, | |||
tableH: this.tableHeight(269) / 2, | |||
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" }, | |||
{ id: 1, name: "", type: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "", type: 1, color: "#8EF0AB" }, | |||
{ id: 3, name: "", type: 1, color: "#288AFF" }, | |||
], | |||
chartMsg: { | |||
color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | |||
xData: ["成都", "邯郸", "瑞昌"], | |||
xData: [], | |||
yName: "单位/%", | |||
series: [ | |||
{ | |||
name: "2024年4月目标值", | |||
data: [ | |||
{ name: "%", value: 85 }, | |||
{ name: "%", value: 85 }, | |||
{ name: "%", value: 85 }, | |||
], | |||
name: "", | |||
data: [], | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
@@ -134,12 +93,8 @@ export default { | |||
}, | |||
}, | |||
{ | |||
name: "2023年4月", | |||
data: [ | |||
{ name: "%", value: 57.5 }, | |||
{ name: "%", value: 21.66 }, | |||
{ name: "%", value: 18.4 }, | |||
], | |||
name: "", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
@@ -152,12 +107,8 @@ export default { | |||
}, | |||
}, | |||
{ | |||
name: "2024年4月", | |||
data: [ | |||
{ name: "%", value: 23.33 }, | |||
{ name: "%", value: 7.02 }, | |||
{ name: "%", value: 80.2 }, | |||
], | |||
name: "", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
@@ -193,10 +144,17 @@ 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); | |||
}, | |||
mounted() { | |||
this.tableProp = this.tableProp1; | |||
this.listQuery.type = 2; | |||
this.listQuery.startDate = moment().format("yyyy-MM-DD"); | |||
this.listQuery.factory = []; | |||
this.getList(); | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this._setTableHeight); | |||
}, | |||
@@ -208,32 +166,166 @@ 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 === "ChipOEEBM") { | |||
this.chartNum++; | |||
} | |||
}, | |||
getSearch(val) { | |||
console.log(val); | |||
console.log("========================="); | |||
this.listQuery.type = val.type; | |||
this.listQuery.startDate = val.startDate; | |||
this.listQuery.factory = val.factory; | |||
this.getList(); | |||
}, | |||
getList() { | |||
this.tableProps = []; | |||
chipoeeComparePage({ ...this.listQuery }).then((res) => { | |||
if (res.data && res.data.records.length > 0) { | |||
let msg = res.data.records[0]; | |||
let arr = [ | |||
{ | |||
prop: "yoy", | |||
label: msg.yoyColumn, | |||
minWidth: 150, | |||
}, | |||
{ | |||
prop: "queryValue", | |||
label: msg.queryColumn, | |||
minWidth: 150, | |||
}, | |||
{ | |||
prop: "target", | |||
label: msg.targetColumn, | |||
minWidth: 150, | |||
}, | |||
]; | |||
this.tableProps = this.tableProps1.concat(arr); | |||
this.tableData = res.data.records; | |||
// 设置图例 | |||
this.legendList[0].name = msg.targetColumn; | |||
this.legendList[1].name = msg.yoyColumn; | |||
this.legendList[2].name = msg.queryColumn; | |||
this.chartMsg.series[0].name = msg.targetColumn; | |||
this.chartMsg.series[1].name = msg.yoyColumn; | |||
this.chartMsg.series[2].name = msg.queryColumn; | |||
// 设置chartMsg的series的数据 | |||
this.setChartMsg(res.data.records); | |||
} else { | |||
// 重置 | |||
this.resetMsg(); | |||
} | |||
}); | |||
}, | |||
setChartMsg(val) { | |||
let xData = []; | |||
let lineData = []; | |||
let barData1 = []; | |||
let barData2 = []; | |||
for (let i = 0; i < val.length; i++) { | |||
this.factoryList.map((item) => { | |||
if (item.id === val[i].factory) { | |||
xData.push(item.name); | |||
} | |||
}); | |||
lineData.push({ | |||
name: "%", | |||
value: val[i].target || 0, | |||
}); | |||
barData1.push({ name: "%", value: val[i].yoy || 0 }); | |||
barData2.push({ | |||
name: "%", | |||
value: val[i].queryValue || 0, | |||
}); | |||
} | |||
this.chartMsg.xData = xData; | |||
this.chartMsg.series[0].data = lineData; | |||
this.chartMsg.series[1].data = barData1; | |||
this.chartMsg.series[2].data = barData2; | |||
this.chartMsg.xData = xData; | |||
}, | |||
resetMsg() { | |||
this.tableProps = this.tableProps1; | |||
this.tableData = []; | |||
this.chartMsg = { | |||
color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | |||
xData: [], | |||
yName: "单位/%", | |||
series: [ | |||
{ | |||
name: "1", | |||
data: [], | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
label: { | |||
show: true, | |||
color: "#FFAE17", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
{ | |||
name: "2", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
show: true, | |||
position: [-18, -16], | |||
color: "#68C483", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
{ | |||
name: "3", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
show: true, | |||
position: [0, -16], | |||
color: "#288AFF", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
], | |||
}; | |||
}, | |||
handleExport() { | |||
console.log("导出"); | |||
handleExport(val) { | |||
this.listQuery.type = val.type; | |||
this.listQuery.startDate = val.startDate; | |||
this.listQuery.factory = val.factory; | |||
let fileName = "芯片OEE对标.xls"; | |||
chipoeeCompareExport({ ...this.listQuery }) | |||
.then((response) => { | |||
this.$download.excel(response, fileName); | |||
this.$message.success("导出成功"); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月芯片产量</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片产量对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -184,8 +184,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() { | |||
@@ -199,8 +199,8 @@ 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 === "ChipOutputBM") { | |||
this.chartNum++; | |||
} | |||
@@ -217,14 +217,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月芯片人均产量</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片人均产量对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -184,8 +184,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() { | |||
@@ -199,8 +199,8 @@ 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 === "ChipPerCapitaBM") { | |||
this.chartNum++; | |||
} | |||
@@ -217,14 +217,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月芯片良率</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片良率对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -193,8 +193,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() { | |||
@@ -208,8 +208,8 @@ 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 === "ChipYieldBM") { | |||
this.chartNum++; | |||
} | |||
@@ -226,14 +226,18 @@ export default { | |||
</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; | |||
@@ -0,0 +1,227 @@ | |||
<!-- 只适用于指标完成情况对标 --> | |||
<template> | |||
<div> | |||
<!-- 暂无数据 --> | |||
<div | |||
:style="{ height: chartHeight + 'px' }" | |||
v-show="this.chartMsg.series[0].data.length === 0" | |||
> | |||
<div | |||
class="no-data-bg" | |||
style="position: relative; left: 50%; transform: translateX(-50%)" | |||
></div> | |||
</div> | |||
<!-- 图例 --> | |||
<div v-show="this.chartMsg.series[0].data.length > 0"> | |||
<div class="legend"> | |||
<span class="item" v-for="item in legendList" :key="item.id"> | |||
<span | |||
v-if="item.type === 1" | |||
class="block" | |||
:style="{ backgroundColor: item.color }" | |||
></span> | |||
<span | |||
v-if="item.type === 2" | |||
class="line" | |||
:style="{ backgroundColor: item.color }" | |||
> | |||
<span | |||
class="line-block" | |||
:style="{ backgroundColor: item.color }" | |||
></span> | |||
</span> | |||
{{ item.name }}</span | |||
> | |||
</div> | |||
<div | |||
:id="chartId" | |||
:style="{ width: '100%', height: chartHeight + 'px' }" | |||
></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from "echarts"; | |||
import { debounce } from "@/utils/debounce"; | |||
export default { | |||
name: "bmBarComplete", | |||
data() { | |||
return { | |||
myChart: "", | |||
option: { | |||
color: [], | |||
// color: ["#8EF0AB", "#63BDFF", "#288AFF"], | |||
grid: { | |||
left: 70, | |||
right: 10, | |||
bottom: 30, | |||
top: 30, | |||
}, | |||
tooltip: { | |||
trigger: "axis", | |||
axisPointer: { | |||
// type: "cross", | |||
crossStyle: { | |||
color: "rgba(237,237,237,0.5)", | |||
}, | |||
}, | |||
formatter: function (params) { | |||
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`; | |||
for (var i = 0, l = params.length; i < l; i++) { | |||
res += | |||
"<br/>" + | |||
`${ | |||
params[i].seriesType === "line" | |||
? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />' | |||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>` | |||
}` + | |||
`<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + | |||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${ | |||
params[i].name === "%" | |||
? (params[i].value ? params[i].value.toFixed(2) : "0.00") + | |||
params[i].name | |||
: String(params[i].value).replace( | |||
/\B(?=(\d{3})+(?!\d))/g, | |||
"," | |||
) | |||
}</span>`; | |||
} | |||
return res; | |||
}, | |||
}, | |||
xAxis: { | |||
type: "category", | |||
data: [], | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisPointer: { | |||
type: "shadow", | |||
}, | |||
}, | |||
yAxis: { | |||
type: "value", | |||
name: "", | |||
nameTextStyle: { | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisLabel: {}, | |||
}, | |||
series: [], | |||
}, | |||
}; | |||
}, | |||
props: { | |||
chartHeight: { | |||
type: Number, | |||
default: 300, | |||
}, | |||
legendList: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
chartMsg: { | |||
type: Object, | |||
default: () => {}, | |||
}, | |||
chartId: { | |||
type: String, | |||
default: "bmChart", | |||
}, | |||
chartNum: { | |||
type: Number, | |||
default: 1, | |||
}, | |||
}, | |||
watch: { | |||
chartHeight: { | |||
handler(newVal) { | |||
this.chartHeight = newVal; | |||
}, | |||
}, | |||
chartNum(val) { | |||
this.canvasReset(); | |||
}, | |||
chartMsg: { | |||
handler(newVal) { | |||
this.canvasReset(); | |||
}, | |||
deep: true, | |||
}, | |||
}, | |||
mounted() { | |||
this.canvasReset(); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.getMes(); | |||
}, 500)(); | |||
}, | |||
getMes() { | |||
if (this.myChart) { | |||
this.myChart.dispose(); | |||
} | |||
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; | |||
if ( | |||
this.chartMsg.series.length > 0 && | |||
this.chartMsg.series[0].data[0].name === "%" | |||
) { | |||
this.option.yAxis.axisLabel = { | |||
formatter: function (value) { | |||
return value + ".00%"; | |||
}, | |||
}; | |||
} else { | |||
this.option.yAxis.axisLabel = { | |||
formatter: function (value) { | |||
return value; | |||
}, | |||
}; | |||
} | |||
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel; | |||
this.option.series = this.chartMsg.series; | |||
this.myChart.setOption(this.option); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.legend { | |||
position: absolute; | |||
right: 10px; | |||
top: 15px; | |||
.item { | |||
display: inline-block; | |||
margin-right: 10px; | |||
font-size: 14px; | |||
color: #8c8c8c; | |||
.block { | |||
width: 10px; | |||
height: 10px; | |||
display: inline-block; | |||
margin-right: 4px; | |||
} | |||
.line { | |||
width: 10px; | |||
height: 10px; | |||
border-radius: 5px; | |||
display: inline-block; | |||
margin-right: 4px; | |||
position: relative; | |||
.line-block { | |||
position: absolute; | |||
width: 20px; | |||
height: 2px; | |||
left: -5px; | |||
top: 4px; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,138 @@ | |||
<!-- 只使用于指标完成情况对标页面 --> | |||
<template> | |||
<el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip"> | |||
<el-form-item label="时间维度" prop="type"> | |||
<el-select | |||
size="small" | |||
v-model="form.type" | |||
placeholder="请选择" | |||
style="width: 100px" | |||
> | |||
<el-option | |||
v-for="item in typeList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id" | |||
> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 0" label="时间" prop="dayTime"> | |||
<el-date-picker | |||
size="small" | |||
clearable | |||
v-model="form.dayTime" | |||
type="date" | |||
placeholder="选择日期" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 1" label="时间" prop="weekTime"> | |||
<el-date-picker | |||
v-model="form.weekTime" | |||
type="week" | |||
format="yyyy-MM-dd" | |||
placeholder="选择周" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 2" label="时间" prop="monthTime"> | |||
<el-date-picker | |||
v-model="form.monthTime" | |||
type="month" | |||
placeholder="选择月份" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 3" label="时间" prop="yearTime"> | |||
<el-date-picker | |||
v-model="form.yearTime" | |||
type="year" | |||
placeholder="选择年份" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" size="small" @click="getDataList" | |||
>查询</el-button | |||
> | |||
<el-divider direction="vertical"></el-divider> | |||
<el-button type="primary" size="small" plain @click="handleExport" | |||
>导出</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</template> | |||
<script> | |||
import moment from "moment"; | |||
export default { | |||
name: "bmSearchBarComplete", | |||
data() { | |||
return { | |||
form: { | |||
type: 2, | |||
dayTime: moment().format("yyyy-MM-DD"), | |||
weekTime: moment().format("yyyy-MM-DD"), | |||
monthTime: moment().format("yyyy-MM-DD"), | |||
yearTime: moment().format("yyyy-MM-DD"), | |||
}, | |||
typeList: [ | |||
{ id: 0, name: "日" }, | |||
{ id: 1, name: "周" }, | |||
{ id: 2, name: "月" }, | |||
{ id: 3, name: "年" }, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
getDataList() { | |||
console.log(this.form); | |||
let params = {}; | |||
switch (this.form.type) { | |||
case 0: | |||
params.startDate = this.form.dayTime; | |||
break; | |||
case 1: | |||
params.startDate = this.form.weekTime; | |||
break; | |||
case 2: | |||
params.startDate = this.form.monthTime; | |||
break; | |||
case 3: | |||
params.startDate = this.form.yearTime; | |||
break; | |||
default: | |||
break; | |||
} | |||
params.type = this.form.type; | |||
this.$emit("getSearch", params); | |||
}, | |||
handleExport() { | |||
this.$emit("handleExport"); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.el-divider--vertical { | |||
height: 24px; | |||
} | |||
.blueTip::before { | |||
display: inline-block; | |||
content: ""; | |||
width: 4px; | |||
height: 18px; | |||
background: #0b58ff; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
margin-top: 8px; | |||
} | |||
</style> |
@@ -0,0 +1,208 @@ | |||
<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" | |||
:chartMsg="chartMsg" | |||
:chartId="chartId" | |||
: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"; | |||
const tableProps = [ | |||
{ | |||
prop: "factory", | |||
label: "指标名称", | |||
// filter: (val) => factoryList[val], | |||
}, | |||
{ | |||
prop: "unit", | |||
label: "单位", | |||
}, | |||
{ | |||
prop: "time1", | |||
label: "时间1", | |||
}, | |||
{ | |||
prop: "time2", | |||
label: "时间2", | |||
}, | |||
]; | |||
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(269) / 2, | |||
tableH: this.tableHeight(269) / 2, | |||
legendList: [ | |||
{ id: 1, name: "2023年4月", type: 1, color: "#288AFF33" }, | |||
{ id: 2, name: "2024年4月", type: 1, color: "#288AFF" }, | |||
], | |||
chartMsg: { | |||
color: ["#288AFF33", "#288AFF"], | |||
xData: ["成都", "邯郸", "瑞昌"], | |||
yName: "单位/MW", | |||
series: [ | |||
{ | |||
name: "2023年4月", | |||
data: [5505, 6578, 5500], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
show: true, | |||
position: "top", | |||
color: "#2789FF", | |||
}, | |||
}, | |||
{ | |||
name: "2024年4月", | |||
data: [3503, 3456, 4500], | |||
type: "bar", | |||
barWidth: 20, | |||
barGap: "-100%", | |||
label: { | |||
show: true, | |||
position: "top", | |||
color: "#288AFF", | |||
}, | |||
}, | |||
], | |||
}, | |||
chartId: "completionStatusIntrBMChart", | |||
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); | |||
}, | |||
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) { | |||
console.log(val); | |||
console.log("========================="); | |||
}, | |||
handleExport() { | |||
console.log("导出"); | |||
}, | |||
}, | |||
}; | |||
</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> |
@@ -2,12 +2,16 @@ | |||
<div> | |||
<!-- 暂无数据 --> | |||
<div | |||
class="no-data-bg" | |||
style="position: relative; left: 50%; transform: translateX(-50%)" | |||
v-show="this.chartMsg.series.length === 0" | |||
></div> | |||
:style="{ height: chartHeight + 'px' }" | |||
v-show="this.chartMsg.series[0].data.length === 0" | |||
> | |||
<div | |||
class="no-data-bg" | |||
style="position: relative; left: 50%; transform: translateX(-50%)" | |||
></div> | |||
</div> | |||
<!-- 图例 --> | |||
<div v-show="this.chartMsg.series.length > 0"> | |||
<div v-show="this.chartMsg.series[0].data.length > 0"> | |||
<div class="legend"> | |||
<span class="item" v-for="item in legendList" :key="item.id"> | |||
<span | |||
@@ -47,7 +51,7 @@ export default { | |||
color: [], | |||
// color: ["#8EF0AB", "#63BDFF", "#288AFF"], | |||
grid: { | |||
left: 100, | |||
left: 70, | |||
right: 10, | |||
bottom: 30, | |||
top: 30, | |||
@@ -65,17 +69,41 @@ export default { | |||
for (var i = 0, l = params.length; i < l; i++) { | |||
res += | |||
"<br/>" + | |||
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` + | |||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + | |||
`${ | |||
params[i].seriesType === "line" | |||
? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />' | |||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>` | |||
}` + | |||
`<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + | |||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${ | |||
params[i].name === "%" | |||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + | |||
? (params[i].value ? params[i].value.toFixed(2) : "0.00") + | |||
params[i].name | |||
: params[i].value | |||
: String(params[i].value).replace( | |||
/\B(?=(\d{3})+(?!\d))/g, | |||
"," | |||
) | |||
}</span>`; | |||
} | |||
return res; | |||
}, | |||
// formatter: function (params) { | |||
// console.log(params); | |||
// var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`; | |||
// for (var i = 0, l = params.length; i < l; i++) { | |||
// res += | |||
// "<br/>" + | |||
// `<span style='display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}'></span>` + | |||
// `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + | |||
// `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${ | |||
// params[i].name === "%" | |||
// ? (params[i].value ? params[i].value.toFixed(2) : 0.0) + | |||
// params[i].name | |||
// : params[i].value | |||
// }</span>`; | |||
// } | |||
// return res; | |||
// }, | |||
}, | |||
xAxis: { | |||
type: "category", | |||
@@ -181,7 +209,9 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
.legend { | |||
text-align: right; | |||
position: absolute; | |||
right: 10px; | |||
top: 15px; | |||
.item { | |||
display: inline-block; | |||
margin-right: 10px; | |||
@@ -16,41 +16,45 @@ | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 1" label="时间" prop="dayTime"> | |||
<el-form-item v-show="form.type === 0" label="时间" prop="dayTime"> | |||
<el-date-picker | |||
size="small" | |||
clearable | |||
v-model="form.dayTime" | |||
type="date" | |||
placeholder="选择日期" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 2" label="时间" prop="weekTime"> | |||
<el-form-item v-show="form.type === 1" label="时间" prop="weekTime"> | |||
<el-date-picker | |||
v-model="form.weekTime" | |||
type="week" | |||
format="yyyy 第 WW 周" | |||
format="yyyy-MM-dd" | |||
placeholder="选择周" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 3" label="时间" prop="monthTime"> | |||
<el-form-item v-show="form.type === 2" label="时间" prop="monthTime"> | |||
<el-date-picker | |||
v-model="form.monthTime" | |||
type="month" | |||
placeholder="选择月份" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="form.type === 4" label="时间" prop="yearTime"> | |||
<el-form-item v-show="form.type === 3" label="时间" prop="yearTime"> | |||
<el-date-picker | |||
v-model="form.yearTime" | |||
type="year" | |||
placeholder="选择年份" | |||
value-format="yyyy-MM-dd" | |||
style="width: 150px" | |||
> | |||
</el-date-picker> | |||
@@ -73,48 +77,73 @@ | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" size="small" @click="getDataList" | |||
<el-button type="primary" size="small" @click="getDataList('search')" | |||
>查询</el-button | |||
> | |||
<el-divider direction="vertical"></el-divider> | |||
<el-button type="primary" size="small" plain @click="handleExport" | |||
<el-button | |||
type="primary" | |||
size="small" | |||
plain | |||
@click="getDataList('export')" | |||
>导出</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</template> | |||
<script> | |||
import moment from "moment"; | |||
export default { | |||
name: "bmSearchBar", | |||
data() { | |||
return { | |||
form: { | |||
type: 1, | |||
dayTime: "", | |||
weekTime: "", | |||
monthTime: "", | |||
yearTime: "", | |||
factory: "", | |||
type: 2, | |||
dayTime: moment().format("yyyy-MM-DD"), | |||
weekTime: moment().format("yyyy-MM-DD"), | |||
monthTime: moment().format("yyyy-MM-DD"), | |||
yearTime: moment().format("yyyy-MM-DD"), | |||
factory: [], | |||
}, | |||
typeList: [ | |||
{ id: 1, name: "日" }, | |||
{ id: 2, name: "周" }, | |||
{ id: 3, name: "月" }, | |||
{ id: 4, name: "年" }, | |||
{ id: 0, name: "日" }, | |||
{ id: 1, name: "周" }, | |||
{ id: 2, name: "月" }, | |||
{ id: 3, name: "年" }, | |||
], | |||
factoryList: [ | |||
{ id: 1, name: "瑞昌" }, | |||
{ id: 2, name: "邯郸" }, | |||
{ id: 0, name: "瑞昌" }, | |||
{ id: 1, name: "邯郸" }, | |||
], | |||
}; | |||
}, | |||
methods: { | |||
getDataList() { | |||
getDataList(val) { | |||
console.log(this.form); | |||
this.$emit("getSearch", this.form); | |||
}, | |||
handleExport() { | |||
this.$emit("handleExport"); | |||
let params = {}; | |||
params.factory = this.form.factory; | |||
switch (this.form.type) { | |||
case 0: | |||
params.startDate = this.form.dayTime; | |||
break; | |||
case 1: | |||
params.startDate = this.form.weekTime; | |||
break; | |||
case 2: | |||
params.startDate = this.form.monthTime; | |||
break; | |||
case 3: | |||
params.startDate = this.form.yearTime; | |||
break; | |||
default: | |||
break; | |||
} | |||
params.type = this.form.type; | |||
if (val === "search") { | |||
this.$emit("getSearch", params); | |||
} else { | |||
this.$emit("handleExport", params); | |||
} | |||
}, | |||
}, | |||
}; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">CSS/PID6稼动率</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">稼动率对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -26,102 +26,61 @@ | |||
<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, | |||
}, | |||
]; | |||
import { | |||
utilzationComparePage, | |||
utilzationCompareExport, | |||
} from "@/api/report/benchmarking.js"; | |||
import moment from "moment"; | |||
export default { | |||
name: "ConversionEfficiencyBM", | |||
data() { | |||
return { | |||
tableProps, | |||
factoryList: [ | |||
{ id: 0, name: "瑞昌" }, | |||
{ id: 1, name: "邯郸" }, | |||
], | |||
tableProps: [], | |||
tableProps1: [ | |||
{ | |||
prop: "factory", | |||
label: "工厂名称", | |||
filter: (val) => this.factoryList[val].name, | |||
minWidth: 150, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: "item", | |||
label: "科目", | |||
minWidth: 120, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: "unit", | |||
label: "单位", | |||
minWidth: 80, | |||
showOverflowtooltip: true, | |||
}, | |||
], | |||
listQuery: { | |||
current: 1, | |||
size: 1000, | |||
size: 100, | |||
}, | |||
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, | |||
tableData: [], | |||
chartHeight: this.tableHeight(269) / 2, | |||
tableH: this.tableHeight(269) / 2, | |||
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" }, | |||
{ id: 1, name: "", type: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "", type: 1, color: "#8EF0AB" }, | |||
{ id: 3, name: "", type: 1, color: "#288AFF" }, | |||
], | |||
chartMsg: { | |||
color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | |||
xData: ["成都", "邯郸", "瑞昌"], | |||
xData: [], | |||
yName: "单位/%", | |||
series: [ | |||
{ | |||
name: "2024年4月目标值", | |||
data: [ | |||
{ name: "%", value: 85 }, | |||
{ name: "%", value: 85 }, | |||
{ name: "%", value: 85 }, | |||
], | |||
name: "1", | |||
data: [], | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
@@ -134,12 +93,8 @@ export default { | |||
}, | |||
}, | |||
{ | |||
name: "2023年4月", | |||
data: [ | |||
{ name: "%", value: 57.5 }, | |||
{ name: "%", value: 21.66 }, | |||
{ name: "%", value: 18.4 }, | |||
], | |||
name: "2", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
@@ -152,12 +107,8 @@ export default { | |||
}, | |||
}, | |||
{ | |||
name: "2024年4月", | |||
data: [ | |||
{ name: "%", value: 23.33 }, | |||
{ name: "%", value: 7.02 }, | |||
{ name: "%", value: 80.2 }, | |||
], | |||
name: "3", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
@@ -193,10 +144,17 @@ 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); | |||
}, | |||
mounted() { | |||
this.tableProp = this.tableProp1; | |||
this.listQuery.type = 2; | |||
this.listQuery.startDate = moment().format("yyyy-MM-DD"); | |||
this.listQuery.factory = []; | |||
this.getList(); | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this._setTableHeight); | |||
}, | |||
@@ -208,32 +166,166 @@ 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 === "ConversionEfficiencyBM") { | |||
this.chartNum++; | |||
} | |||
}, | |||
getSearch(val) { | |||
console.log(val); | |||
console.log("========================="); | |||
this.listQuery.type = val.type; | |||
this.listQuery.startDate = val.startDate; | |||
this.listQuery.factory = val.factory; | |||
this.getList(); | |||
}, | |||
getList() { | |||
this.tableProps = []; | |||
utilzationComparePage({ ...this.listQuery }).then((res) => { | |||
if (res.data && res.data.records.length > 0) { | |||
let msg = res.data.records[0]; | |||
let arr = [ | |||
{ | |||
prop: "yoy", | |||
label: msg.yoyColumn, | |||
minWidth: 150, | |||
}, | |||
{ | |||
prop: "queryValue", | |||
label: msg.queryColumn, | |||
minWidth: 150, | |||
}, | |||
{ | |||
prop: "target", | |||
label: msg.targetColumn, | |||
minWidth: 150, | |||
}, | |||
]; | |||
this.tableProps = this.tableProps1.concat(arr); | |||
this.tableData = res.data.records; | |||
// 设置图例 | |||
this.legendList[0].name = msg.targetColumn; | |||
this.legendList[1].name = msg.yoyColumn; | |||
this.legendList[2].name = msg.queryColumn; | |||
this.chartMsg.series[0].name = msg.targetColumn; | |||
this.chartMsg.series[1].name = msg.yoyColumn; | |||
this.chartMsg.series[2].name = msg.queryColumn; | |||
// 设置chartMsg的series的数据 | |||
this.setChartMsg(res.data.records); | |||
} else { | |||
// 重置 | |||
this.resetMsg(); | |||
} | |||
}); | |||
}, | |||
setChartMsg(val) { | |||
let xData = []; | |||
let lineData = []; | |||
let barData1 = []; | |||
let barData2 = []; | |||
for (let i = 0; i < val.length; i++) { | |||
this.factoryList.map((item) => { | |||
if (item.id === val[i].factory) { | |||
xData.push(item.name); | |||
} | |||
}); | |||
lineData.push({ | |||
name: "%", | |||
value: val[i].target || 0, | |||
}); | |||
barData1.push({ name: "%", value: val[i].yoy || 0 }); | |||
barData2.push({ | |||
name: "%", | |||
value: val[i].queryValue || 0, | |||
}); | |||
} | |||
this.chartMsg.xData = xData; | |||
this.chartMsg.series[0].data = lineData; | |||
this.chartMsg.series[1].data = barData1; | |||
this.chartMsg.series[2].data = barData2; | |||
this.chartMsg.xData = xData; | |||
}, | |||
resetMsg() { | |||
this.tableProps = this.tableProps1; | |||
this.tableData = []; | |||
this.chartMsg = { | |||
color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | |||
xData: [], | |||
yName: "单位/%", | |||
series: [ | |||
{ | |||
name: "1", | |||
data: [], | |||
type: "line", | |||
symbol: "circle", | |||
symbolSize: 6, | |||
label: { | |||
show: true, | |||
color: "#FFAE17", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
{ | |||
name: "2", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
show: true, | |||
position: [-18, -16], | |||
color: "#68C483", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
{ | |||
name: "3", | |||
data: [], | |||
type: "bar", | |||
barWidth: 20, | |||
label: { | |||
show: true, | |||
position: [0, -16], | |||
color: "#288AFF", | |||
formatter: function (params) { | |||
return params.value.toFixed(2) + "%"; | |||
}, | |||
}, | |||
}, | |||
], | |||
}; | |||
}, | |||
handleExport() { | |||
console.log("导出"); | |||
handleExport(val) { | |||
this.listQuery.type = val.type; | |||
this.listQuery.startDate = val.startDate; | |||
this.listQuery.factory = val.factory; | |||
let fileName = "稼动率对标.xls"; | |||
utilzationCompareExport({ ...this.listQuery }) | |||
.then((response) => { | |||
this.$download.excel(response, fileName); | |||
this.$message.success("导出成功"); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月FTO/基片投入</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">产量对标FTO</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -184,8 +184,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() { | |||
@@ -199,8 +199,8 @@ 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 === "FtoOutputBM") { | |||
this.chartNum++; | |||
} | |||
@@ -265,14 +265,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月封装OEE</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">封装OEE对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -193,8 +193,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() { | |||
@@ -208,8 +208,8 @@ 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 === "PackageOEEBM") { | |||
this.chartNum++; | |||
} | |||
@@ -226,14 +226,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月标准组件产量</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">标准组件产量对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -184,8 +184,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() { | |||
@@ -199,8 +199,8 @@ 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 === "SCOutputBM") { | |||
this.chartNum++; | |||
} | |||
@@ -217,14 +217,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月组件人均产量</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">组件人均产量对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -184,8 +184,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() { | |||
@@ -199,8 +199,8 @@ 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 === "SCPerCapitaBM") { | |||
this.chartNum++; | |||
} | |||
@@ -217,14 +217,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月标准组件良率</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">芯片良率对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -103,8 +103,8 @@ export default { | |||
{ 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: 2, color: "#FFCE6A" }, | |||
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" }, | |||
@@ -193,8 +193,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() { | |||
@@ -208,8 +208,8 @@ 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 === "SCYieldBM") { | |||
this.chartNum++; | |||
} | |||
@@ -226,14 +226,18 @@ export default { | |||
</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; | |||
@@ -2,6 +2,9 @@ | |||
<div> | |||
<div class="containerTop"> | |||
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">4月标准组件转化效率</div> | |||
<bm-line-bar | |||
:chartHeight="chartHeight" | |||
:legendList="legendList" | |||
@@ -9,9 +12,6 @@ | |||
:chartId="chartId" | |||
:chartNum="chartNum" | |||
/> | |||
</div> | |||
<div class="containerBottom"> | |||
<div class="smallTitle">封装OEE对标</div> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.current" | |||
@@ -109,8 +109,8 @@ export default { | |||
{ 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: "2023年4月", type: 1, color: "#63BDFF" }, | |||
@@ -223,8 +223,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() { | |||
@@ -238,8 +238,8 @@ 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 === "TurnoverRateBM") { | |||
this.chartNum++; | |||
} | |||
@@ -256,14 +256,18 @@ export default { | |||
</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; | |||