yudao-init/src/views/report/ftoOutputBM/index.vue

<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">产量对标FTO</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: "FtoOutputBM",
  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: "单位/片",
        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: "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;
    window.addEventListener("resize", this._setTableHeight);
  },
  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);
      console.log("==========下面是测试代码，需删除");
      this.chartMsg.series = [];
    },
    handleExport() {
      console.log("导出=====下面是测试代码，需删除");
      this.chartMsg.series = [
        {
          name: "2024年4月目标值1",
          // data: [3000, 2000, 3000],
          // data: [6800, 5000, 8900],
          // data: [12000, 17000, 19000],
          data: [560000, 540000, 600000],
          type: "line",
          symbol: "circle",
          symbolSize: 6,
          label: {
            show: true,
            color: "#FFAE17",
          },
        },
        {
          name: "2023年4月",
          // data: [2100, 800, 1500],
          // data: [9500, 7200, 9901],
          // data: [14666, 15000, 17888],
          data: [550000, 456666, 590000],
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            // position: [-5, -16],
            // position: [-5, -16],
            // position: [-10, -16],
            position: [-17, -16],
            color: "#68C483",
          },
        },
        {
          name: "2024年4月",
          // data: [2100, 900, 1300],
          // data: [9100, 7300, 9700],
          // data: [14666, 15300, 18000],
          data: [556666, 456666, 650000],
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            position: [0, -16],
            color: "#288AFF",
          },
        },
      ];
    },
  },
};
</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>