<template> <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" :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 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(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" }, ], chartMsg: { color: ["#FFCE6A", "#8EF0AB", "#288AFF"], xData: ["成都", "邯郸", "瑞昌"], yName: "单位/%", series: [ { name: "2024年4月目标值", data: [ { name: "%", value: 85 }, { name: "%", value: 85 }, { name: "%", value: 85 }, ], type: "line", symbol: "circle", symbolSize: 6, label: { show: true, color: "#FFAE17", formatter: function (params) { return params.value.toFixed(2) + "%"; }, }, }, { name: "2023年4月", data: [ { name: "%", value: 57.5 }, { name: "%", value: 21.66 }, { name: "%", value: 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: [ { name: "%", value: 23.33 }, { name: "%", value: 7.02 }, { name: "%", value: 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(269) / 2; this.chartHeight = this.tableHeight(269) / 2; 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(269) / 2; this.chartHeight = this.tableHeight(269) / 2; if (this.$route.name === "ChipYieldBM") { 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>