<template>
  <div>
    <ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
    </ButtonNav>
    <div class="search">
      <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
        <el-form-item label="时间维度" prop="type">
          <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周"
            placeholder="选择周" style="width: 180px" @change="onValueChange" :picker-options="{'firstDayOfWeek': 1}">
          </el-date-picker>
          至
          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周"
            placeholder="选择周" style="width: 180px" @change="onValueChange" :picker-options="{'firstDayOfWeek': 1}">
          </el-date-picker>
          <!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
            {{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
          </span> -->
        </el-form-item>
        <el-form-item v-show="listQuery.type === 2" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange"
            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
            @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
          <el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
            placeholder="开始时间">
          </el-date-picker>
          ~
          <el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year"
            placeholder="结束时间" @change="getYear">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getDataList">查询</el-button>
          <el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="containerTop">

      <!-- <div class="smallTitle">产量转化效率</div> -->

      <!-- <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> -->
      <el-row v-if="this.listQuery.type === 2">
        <el-col :span="12">
          <div class="blueTip">
            生产情况对比
          </div>
          <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
            :legendList="legendList" ref="dayChart" :chartMsg="chartMsg" :chartId="chartId" :chartNum="chartNum" />
        </el-col>
        <el-col :span="6" style="margin-top: 30px">
          <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
            :chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
            :chartNum="chartNum" />
        </el-col>
        <el-col :span="6">
          <div class="blueTip">
            {{ title }}
          </div>
          <bm-line-bar-year-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
            :chartMsg="chartMsgYearTarget" ref="chartYearTarget" :chartId=" 'chartYearTarget'" :chartNum="chartNum" />
        </el-col>
      </el-row>
      <el-row v-else-if="this.listQuery.type === 1 || this.listQuery.type === 0">
        <el-col :span="18">
          <div class="blueTip">
            生产情况对比
          </div>
          <bm-line-bar :type="listQuery.type" style="margin-top: 20px;" :show="false" :chartHeight="chartHeight"
            :legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
        </el-col>
        <el-col :span="6" style="margin-top: 30px">
          <bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
            :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId=" 'chartDayTarget'" :chartNum="chartNum" />
        </el-col>
        <!-- <el-col :span="6">
          <div class="blueTip">
            {{ title }}
          </div>
          <bm-line-bar-year-target :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsgYearTarget"
            :chartId=" 'chartYearTarget'" :chartNum="chartNum" />
        </el-col> -->
      </el-row>
      <el-row v-else>
        <div class="blueTip">
          生产情况对比
        </div>
        <!-- <el-col :span="12"> -->
        <bm-line-bar :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList" :chartMsg="chartMsg"
          :chartId="chartId" :chartNum="chartNum" />
        <!-- </el-col> -->
      </el-row>
      <base-table :key="showTable" :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
        :table-data="tableData" :max-height="tableH" />
    </div>
    <!-- <div class="containerBottom">

    </div> -->
  </div>
</template>

<script>
import { getProduceSituationData, exportProduceSituationData } from '@/api/report';
import bmSearchBar from "./components/bmSearchBar.vue";
import BmLineBar from "./components/produceLineBar.vue";
import BmLineBarTarget from "./components/produceLineBarTarget.vue";
import BmLineBarYearTarget from "./components/produceLineBarYearTarget.vue";
import ButtonNav from '@/components/ButtonNav'
import moment from 'moment'
export default {
  name: "ChipYieldBM",
  data() {
    return {
      otherProps:[],
      start: undefined,
      currentMenu:'邯郸',
      end: undefined,
      title: '',
      gridLeft:true,
      showTable:false,
      listQuery: {
        pageNo: 1,
        start: undefined,
        end: undefined,
        pageSize:999,
        // size: 10,
        // current: 1,
        factory: null,
        // total: 0,
        type: 2,
        startDate: undefined,
        endDate: undefined,
        reportTime: []
      },
      timeList: [
        {
          value: 0,
          label: '日'
        },
        {
          value: 1,
          label: '周'
        },
        {
          value: 2,
          label: '月'
        },
        {
          value: 3,
          label: '年'
        }
      ],
      tableData: [],
      chartHeight: this.tableHeight(137) / 2 - 111,
      tableH: this.tableHeight(137) / 2 - 70,
      legendList: [
        { id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
        { id: 2, name: "芯片产量", type: 1, color: "#288AFF" },
        { id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
        this.currentMenu == '瑞昌' ? null :
          { id: 4, name: "BIPV产量", type: 1, color: "#7164FF" },
      ],
      chartMsgYearTarget: {
        color: ["#8EF0AB", "#288AFF", "#64BDFF", '#7164FF'],
        xData: [],
        yName: "单位/片",
        yAxis: {
          type: "value",
          name: "单位/片",
          show: true,
          splitNumber: 5,
          nameTextStyle: {
            fontSize: 12,
            align: "right",
          },
          axisLabel: {},
        },
        series: [
          {
            name: "FTO投入",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              color: "#8EF0AB",
              position: [-18, -16],
              formatter: function (params) {
                return params.value
              },
            },
          },
          {
            name: "芯片产量",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "#288AFF",
              formatter: function (params) {
                return params.value
              },
            },
          },
          {
            name: "标准组件产量",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [18, -16],
              color: "#64BDFF",
              formatter: function (params) {
                return params.value
              },
            },
          },
            {
              name: "BIPV产量",
              data: [],
              type: "bar",
              barWidth: 20,
              label: {
                show: true,
                position: [20, -16],
                color: "#7164FF",
                formatter: function (params) {
                  return params.value
                },
              },
            },
        ],
      },
      chartMsgTarget: {
        color: [ "#8EF0AB", 'rgba(104, 196, 131, .3)', "#288AFF", 'rgba(40, 138, 255, .2)', "#64BDFF", 'rgba(100,189,255,.3)', '#7164FF', 'rgba(113,100,255,.2)',],
        xData: [],
        yName: "单位/片",
        yAxis:{
          type: "value",
          name: "单位/片",
          show: true,

          // min: function (value) {//取最小值向下取整为最小刻度
          //   return Math.floor(value.min)
          // },
          // max: function (value) {//取最大值向上取整为最大刻度
          //   return Math.ceil(value.max)
          // },
          splitNumber: 4,
          nameTextStyle: {
            fontSize: 12,
            align: "right",
          },
          axisLabel: {},
        },
        series: [],
      },
      chartMsg: {
        color: ["#8EF0AB", "#288AFF", "#64BDFF", '#7164FF'],
        xData: [],
        yName: "单位/片",
        yAxis:{
            type: "value",
            name: "单位/片",
            nameTextStyle: {
              fontSize: 12,
              align: "right",
          },
          // scale: true,
          // min: function (value) {//取最小值向下取整为最小刻度
          //   return Math.floor(value.min)
          // },
          splitNumber: 4,
          // max: function (value) {//取最大值向上取整为最大刻度
          //   return Math.ceil(value.max)
          // },
            axisLabel: {},
          },
        series: [
          {
            name: "FTO投入",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [-18, -16],
              color: "#8EF0AB",
              formatter: function (params) {
                return params.value
              },
            },
          },
          {
            name: "芯片产量",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "#288AFF",
              formatter: function (params) {
                return params.value
              },
            },
          },
          {
            name: "标准组件产量",
            data: [
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [5, -16],
              color: "#64BDFF",
              formatter: function (params) {
                return params.value
              },
            },
          },
          {
            name: "BIPV产量",
            data: [],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [10, -16],
              color: "#7164FF",
              formatter: function (params) {
                return params.value
              },
            },
          },
        ],
      },
      chartId: "chipYieldBMChart",
      chartNum: 1,
    };
  },
  components: {
    bmSearchBar,
    BmLineBar,
    BmLineBarTarget,
    BmLineBarYearTarget,
    ButtonNav
  },
  computed: {
    dataArr() {
      if (this.currentMenu != '瑞昌') {
       return  [{
          factory: null,
          item: 'FTO投入',
          unit: '片'
        },
        {
          factory: null,
          item: '芯片产量',
          unit: '片'
        },
        {
          factory: null,
          item: '标准组件产量',
          unit: '片'
        },
        {
          factory: null,
          item: 'BIPV产量',
          unit: 'm2'
        },]
      } else {
        return [{
          factory: null,
          item: 'FTO投入',
          unit: '片'
        },
        {
          factory: null,
          item: '芯片产量',
          unit: '片'
        },
        {
          factory: null,
          item: '标准组件产量',
          unit: '片'
        }]
      }
    },
    tableProps() {
      return [
        // {
        //   prop: "factory",
        //   label: "工厂名称",
        //   // filter: (val) => factoryList[val],
        //   minWidth: 200,
        //   showOverflowtooltip: true,
        // },
        {
          prop: "item",
          label: "科目",
          // filter: (val) => factoryList[val],
          minWidth: 200,
          showOverflowtooltip: true,
        },
        {
          prop: "unit",
          label: "单位",
          minWidth: 120,
          showOverflowtooltip: true,
        },
        ...this.otherProps
      ]
    },
    weekNum() {
      return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
    },
    isOpen() {
      return this.$store.getters.sidebar.opened;
    },
  },
  watch: {
    // 监听左侧菜单栏是否展开
    dataArr(val) {
      this.tableData = val
    },
    currentMenu(val) {
      // console.log(val)
      if (val === '瑞昌') {
        this.legendList = [
          { id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
          { id: 2, name: "芯片产量", type: 1, color: "#288AFF" },
          { id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
        ]
      } else {
        [
          { id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
          { id: 2, name: "芯片产量", type: 1, color: "#288AFF" },
          { id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
          { id: 4, name: "BIPV产量", type: 1, color: "#7164FF" },
        ]
      }
      this.getDataList()
    },
    isOpen(val) {
      if (this.$route.name === "productionSituationTablets") {
        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 === "productionSituationTablets") {
      this.chartNum++;
    }
  },
  mounted() {
    // this.getOverView()
    const today = new Date()
    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
    this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
    this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
    this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
    this.getDataList()
  },
  methods: {
    handleChange() {
      this.listQuery.reportTime = []
      this.listQuery.end = null
      this.listQuery.start = null
      this.listQuery.startDate = null
      this.listQuery.endDate = null
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let spanOneArr = [], concatOne = 0;
      // let spanTwoArr = [], concatTwo = 0;

      this.tableData.map((item, index) => {
        // console.log(inde);
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //第一列需合并相同内容的判断条件
          if (item.factory === this.tableData[index - 1].factory) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          };
        }
      });

      if (columnIndex === 0) {
        const _row = spanOneArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getYear(e) {
      if (this.listQuery.end - this.listQuery.start > 10 * 365 * 24 * 60 * 60 * 1000) {
        this.$message({
          message: '年份起止时间不能超过十年',
          type: 'warning'
        });
        this.listQuery.reportTime = []
        this.listQuery.start = undefined
        this.listQuery.end = undefined
        // console.log();
      } else {
        this.listQuery.startDate = this.listQuery.start
        this.listQuery.endDate = this.listQuery.end
      }
      if (!this.listQuery.start && !this.listQuery.end) {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
      // console.log(e);
    },
    onValueChange(picker, k) { // 选中近k周后触发的操作
      // console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
      if (this.listQuery.start && this.listQuery.end) {
        // console.log(this.listQuery.reportTime)
        this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
        this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
        const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
        if (numDays > 168) {
          // console.log(numDays)
          this.$message({
            message: '周范围不能超过24周',
            type: 'warning'
          });
        } else {
          this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
          this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
        }
      }
      if (!this.listQuery.start && !this.listQuery.end) {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    changeDayTime() {
      if (this.listQuery.reportTime) {
        // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
        // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
        // console.log(this.listQuery.reportTime[1])
        const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
        if (numDays > 30) {
          this.$message({
            message: '时间范围不能超过30天',
            type: 'warning'
          });
          this.listQuery.reportTime = [];
        } else {
          this.listQuery.startDate = this.listQuery.reportTime[0]
          this.listQuery.endDate = this.listQuery.reportTime[1]
        }
      } else {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    changeTime(value) {
      if (this.listQuery.reportTime) {
        const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0];
        if (numDays > 2 * 365 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: '时间范围不能超过24个月',
            type: 'warning'
          });
          this.listQuery.reportTime = [];
        } else {
          this.listQuery.startDate = this.listQuery.reportTime[0]
          this.listQuery.endDate = this.listQuery.reportTime[1]
        }
      } else {
        this.listQuery.startDate = undefined
        this.listQuery.endDate = undefined
      }
    },
    async getDataList() {
      this.otherProps = []
      this.chartMsg.xData = []
      this.chartMsgTarget.xData = []
      this.chartMsgYearTarget.xData = []
      this.chartMsg.series[0].data = []
      this.chartMsg.series[1].data = []
      this.chartMsg.series[2].data = []
      if (this.chartMsg.series[3]) {
        this.chartMsg.series[3].data = []
      }
      this.chartMsgTarget.series = []
      this.chartMsgYearTarget.series[0].data = []
      this.chartMsgYearTarget.series[1].data = []
      this.chartMsgYearTarget.series[2].data = []
      if (this.chartMsgYearTarget.series[3]) {
        this.chartMsgYearTarget.series[3].data = []
      }
      // console.log(this.listQuery);
      if (!this.listQuery.startDate && !this.listQuery.endDate) {
        return this.$message('请选择起止时间')
      }
      if (!this.listQuery.type) {
        return this.$message('请选择时间维度')
      }
      let arr = []
      this.currentMenu === '邯郸' ? arr.push(1) : arr.push(0)
      this.listQuery.factory = arr
      const res = await getProduceSituationData(this.listQuery)
      res.data.list.forEach((ele, index) => {
        let i = index + 1
        // this.chartMsg.xData.push(ele.titleValue.replace(/[^\d]/g, " "))
        this.otherProps.push({
          label: ele.titleValue,
          prop: 'value' + i
        })
      })
      let maxData = []
      res.data.list.forEach((ele, index) => {
        let i = index + 1
        let m = 'value' + i
        ele.productionSituationDataVOList.forEach((item) => {
          // maxData.push(item.ftoInput, item.chipYield, item.componentYield)
          this.dataArr[0]['' + m + ''] = item.ftoInput
          // this.dataArr[3].factory = item.factory == 1 ? '邯郸' : '瑞昌'
          this.dataArr[1]['' + m + ''] = item.chipYield
          this.dataArr[2]['' + m + ''] = item.componentYield
          // this.dataArr[3]['' + m + ''] = item.bipvProductOutput
          if (this.dataArr[3]) {
            maxData.push(item.bipvProductOutput)
            this.dataArr[3]['' + m + ''] = item.bipvProductOutput
          }
        })
        // ele.titleValue
        // .push({
        //   label: ele.titleValue,
        //   props: 'value' + index + 1,
        // })
      })
      if (this.listQuery.type === 2) {
        res.data.list.slice(0, res.data.list.length - 1).forEach((ele, index) => {
          ele.productionSituationDataVOList.forEach((item) => {
            maxData.push(item.ftoInput, item.chipYield, item.componentYield)
          })
        })
      } else {
        res.data.list.forEach((ele, index) => {
          ele.productionSituationDataVOList.forEach((item) => {
            maxData.push(item.ftoInput, item.chipYield, item.componentYield)
         })
        })
      }

        this.chartMsg.yAxis.max = Math.ceil(Math.max(...maxData))
        this.chartMsgTarget.yAxis.max = Math.ceil(Math.max(...maxData))
        this.chartMsg.yAxis.min = Math.ceil(Math.min(...maxData))
        this.chartMsgTarget.yAxis.min = Math.ceil(Math.min(...maxData))
        this.chartMsg.yAxis.interval = (this.chartMsg.yAxis.max - this.chartMsg.yAxis.min) / 4
        this.chartMsgTarget.yAxis.interval = (this.chartMsgTarget.yAxis.max - this.chartMsgTarget.yAxis.min) / 4
      if (this.listQuery.type === 2) {
        if (res.data.list.length === 3) {
          this.gridLeft = false
        } else {
          this.gridLeft = true
        }
        // console.log(res.data.list.length);
        // res.data.list.forEach((ele) => {
        res.data.list.slice(0, res.data.list.length - 3).forEach((ele, index) => {
          // let i = index + 1
          this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length-3))
          ele.productionSituationDataVOList.forEach((item) => {
            this.chartMsg.series[0].data.push({
              name: ele.titleValue,
              value: item.ftoInput === 0 ? null : item.ftoInput
            })
            this.chartMsg.series[1].data.push({
              name: ele.titleValue,
              value: item.chipYield === 0 ? null : item.chipYield
            })
            this.chartMsg.series[2].data.push({
              name: ele.titleValue,
              value: item.componentYield === 0 ? null : item.componentYield
            })
            if (this.dataArr[3]) {
              this.chartMsg.series[3].data.push({
                name: ele.titleValue,
                value: item.bipvProductOutput === 0 ? null : item.bipvProductOutput
              })
            }
          })
        })
        this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 2].titleValue.slice(0, res.data.list[res.data.list.length - 2].titleValue.length - 3))
        // this.chartMsgTarget.series = [{
        //   name: "FTO投入",
        //   data: [
        //     // s
        //     { name: "FTO投入目标", value:res,data,list },
        //     { name: "%", value: 85 },
        //     { name: "%", value: 85 },
        //   ],
        //   type: "bar",
        //   barWidth: 20,
        //   barGap: '0',
        //   label: {
        //     show: true,
        //     position: [-18, -16],
        //     color: "#FFAE17",
        //     formatter: function (params) {
        //       return params.value
        //     },
        //   },
        // },]
        let fto = []
        let chip = []
        let std = []
        let bipv = []
        let targetObj = {}
        let obj = {}
        res.data.list.slice(res.data.list.length - 3, res.data.list.length - 1).forEach((ele, index) => {
          // console.log("ele",ele.titleValue);
          // let i = index + 1
          // this.chartMsgTarget.xData.push(ele.titleValue)
          if (ele.titleValue.search('完成') == -1) {
            ele.productionSituationDataVOList.forEach((item) => {
            targetObj.ftoInput = item.ftoInput
            targetObj.chipYield = item.chipYield
            targetObj.componentYield = item.componentYield
            targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
          })
            // console.log("fto",ele.titleValue,fto);
          } else {
            ele.productionSituationDataVOList.forEach((item) => {
              obj.ftoInput = item.ftoInput
              obj.chipYield = item.chipYield
              obj.componentYield = item.componentYield
              obj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
              // if (ele.titleValue.search('目标') != -1) {
              // } else {

            })
          }
        })
        fto.push({
          name: "FTO投入完成值",
          data: [
            // s
            { name: 'FTO投入完成值', value: obj.ftoInput,titleValue: obj.ftoInput },
            // { name: 'FTO投入完成值', value: 33 },
            // { name: "%", value: 85 },
            // { name: "%", value: 85 },
          ],
          type: "bar",
          barWidth: 20,
          stack: 'f',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(104,196,131)",
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "FTO投入目标值",
          data: [
            // s
            { name: 'FTO投入目标', value: (targetObj.ftoInput - obj.ftoInput) > 0 ? (targetObj.ftoInput - obj.ftoInput) : null, titleValue: targetObj.ftoInput },
            // { name: 'FTO投入目标值', value: 11 },
            // { name: "%", value: 85 },
            // { name: "%", value: 85 },
          ],
          type: "bar",
          barWidth: 20,
          stack: 'f',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(104,196,131,.3)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        chip.push({
          name: "芯片产量完成值",
          // barGap: '-100%',
          stack: 'a',
          data: [
            { name: "芯片产量完成值", value: obj.chipYield, titleValue: obj.chipYield },
            // { name: '芯片产量完成值', value: 55 },
            // { name: "%", value: 21.66 },
            // { name: "%", value: 18.4 },
          ],
          type: "bar",
          barWidth: 20,
          // barGap: '-100%',
          label: {
            show: true,
            color: "rgba(40,138,255)",
            position: [-18, -16],
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "芯片产量目标值",
          // barGap: '-100%',
          stack: 'a',
          data: [
            { name: "芯片产量目标值", value: (targetObj.chipYield - obj.chipYield) > 0 ? (targetObj.chipYield - obj.chipYield) : null, titleValue: targetObj.chipYield },
            // { name: '芯片产量目标值', value: 22 },
            // { name: "%", value: 21.66 },
            // { name: "%", value: 18.4 },
          ],
          type: "bar",
          barWidth: 20,
          // barGap: '-100%',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(40,138,255,.2)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        std.push({
          name: "标准组件产量完成值",
          stack: 'b',
          data: [
            { name: "标准组件产量完成值", value: obj.componentYield, titleValue: obj.componentYield },
            // { name: '标准组件产量完成值', value: 23 },
            // { name: "%", value: 7.02 },
            // { name: "%", value: 80.2 },
          ],
          type: "bar",
          barWidth: 20,
          label: {
            color: "rgba(100,189,255)",
            show: true,
            position: [0, -16],
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "标准组件产量目标值",
          stack: 'b',
          data: [
            { name: "标准组件产量目标值", value: (targetObj.componentYield - obj.componentYield) > 0 ? (targetObj.componentYield - obj.componentYield) : null, titleValue: targetObj.componentYield },
            // { name: '标准组件产量目标值', value: 23 },

            // { name: "%", value: 7.02 },
            // { name: "%", value: 80.2 },
          ],
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            position: [0, -16],
            color: "rgba(100,189,255,.3)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        bipv.push(this.currentMenu == '瑞昌' ? null :
          {
            name: "BIPV产量完成值",
            stack: 'c',
            data: [
              { name: "BIPV产量完成值", value: obj.bipvProductOutput, titleValue: obj.bipvProductOutput },
              // { name: 'BIPV产量完成值', value: 32 },
              // { name: "%", value: 7.02 },
              // { name: "%", value: 80.2 },
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "rgba(113,100,255)",
              formatter: function (params) {
                return params.value
              },
            },
          }, this.currentMenu == '瑞昌' ? null :
          {
            name: "BIPV产量目标值",
            stack: 'c',
            data: [
              { name: "BIPV产量目标值", value: (targetObj.bipvProductOutput - obj.bipvProductOutput) > 0 ? (targetObj.bipvProductOutput - obj.bipvProductOutput) : null, titleValue: targetObj.bipvProductOutput },
              // { name: 'BIPV产量目标值', value: 24 },
              // { name: "%", value: 7.02 },
              // { name: "%", value: 80.2 },
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "rgba(113,100,255,.2)",
              formatter: function (params) {
                return params.value
              },
            },
          },)
        // }
        this.chartMsgTarget.series = [...fto, ...chip, ...std, ...bipv]
        // console.log('arr', this.chartMsgTarget.series)
        // arr.forEach((ele) => {

        // })
        res.data.list.slice(res.data.list.length - 1, res.data.list.length).forEach((ele, index) => {
          // let i = index + 1
          this.chartMsgYearTarget.xData.push(ele.titleValue)
          this.title = ele.titleValue
          ele.productionSituationDataVOList.forEach((item) => {
            this.chartMsgYearTarget.series[0].data.push({
              name: ele.titleValue,
              value: item.ftoInput === 0 ? null : item.ftoInput
            })
            this.chartMsgYearTarget.series[1].data.push({
              name: ele.titleValue,
              value: item.chipYield === 0 ? null : item.chipYield
            })
            this.chartMsgYearTarget.series[2].data.push({
              name: ele.titleValue,
              value: item.componentYield === 0 ? null : item.componentYield
            })
            if (this.dataArr[3]) {
              this.chartMsgYearTarget.series[3].data.push({
                name: ele.titleValue,
                value: item.bipvProductOutput === 0 ? null : item.bipvProductOutput
              })
            }
          })
        })
        // })
      } else if (this.listQuery.type === 1 || this.listQuery.type === 0) {
        if (res.data.list.length === 2) {
          this.gridLeft = false
        } else {
          this.gridLeft = true
        }
        // console.log(res.data.list.slice(res.data.list.length - 2, res.data.list.length));
        // res.data.list.forEach((ele) => {
        res.data.list.slice(0, res.data.list.length - 2).forEach((ele, index) => {
          // let i = index + 1
          this.chartMsg.xData.push(ele.titleValue.slice(0, ele.titleValue.length - 3))
          ele.productionSituationDataVOList.forEach((item) => {
            this.chartMsg.series[0].data.push({
              name: ele.titleValue,
              value: item.ftoInput === 0 ? null : item.ftoInput
            })
            this.chartMsg.series[1].data.push({
              name: ele.titleValue,
              value: item.chipYield === 0 ? null : item.chipYield
            })
            this.chartMsg.series[2].data.push({
              name: ele.titleValue,
              value: item.componentYield === 0 ? null : item.componentYield
            })
            if (this.dataArr[3]) {
              this.chartMsg.series[3].data.push({
                name: ele.titleValue,
                value: item.bipvProductOutput === 0 ? null : item.bipvProductOutput
              })
            }
          })
        })
        // console.log(this.chartMsg.series[0]);
        this.chartMsgTarget.xData.push(res.data.list[res.data.list.length - 1].titleValue.slice(0, res.data.list[res.data.list.length - 1].titleValue.length - 3))
        // this.chartMsgTarget.series = [{
        //   name: "FTO投入",
        //   data: [
        //     // s
        //     { name: "FTO投入目标", value:res,data,list },
        //     { name: "%", value: 85 },
        //     { name: "%", value: 85 },
        //   ],
        //   type: "bar",
        //   barWidth: 20,
        //   barGap: '0',
        //   label: {
        //     show: true,
        //     position: [-18, -16],
        //     color: "#FFAE17",
        //     formatter: function (params) {
        //       return params.value
        //     },
        //   },
        // },]
        let fto = []
        let chip = []
        let std = []
        let bipv = []
        let targetObj = {}
        let obj = {}
        res.data.list.slice(res.data.list.length - 2, res.data.list.length).forEach((ele, index) => {
          // console.log("ele", ele.titleValue);
          // let i = index + 1
          // this.chartMsgTarget.xData.push(ele.titleValue)
          ele.productionSituationDataVOList.forEach((item) => {
          if (ele.titleValue.search('完成') == -1) {
              targetObj.ftoInput = item.ftoInput
              targetObj.chipYield = item.chipYield
              targetObj.componentYield = item.componentYield
              targetObj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
            // console.log("fto", ele.titleValue, fto);
          } else {

              obj.ftoInput = item.ftoInput
              obj.chipYield = item.chipYield
              obj.componentYield = item.componentYield
              obj.bipvProductOutput = this.currentMenu == '瑞昌' ? null : item.bipvProductOutput
              // if (ele.titleValue.search('目标') != -1) {
              // } else {
          }
          })
        })
        fto.push({
          name: "FTO投入完成值",
          data: [
            // s
            { name: 'FTO投入完成值', value: obj.ftoInput, titleValue: obj.ftoInput },
            // { name: 'FTO投入完成值', value: 33 },
            // { name: "%", value: 85 },
            // { name: "%", value: 85 },
          ],
          type: "bar",
          barWidth: 20,
          stack: 'f',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(104,196,131)",
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "FTO投入目标值",
          data: [
            // s
            { name: 'FTO投入目标', value: (targetObj.ftoInput - obj.ftoInput) > 0 ? (targetObj.ftoInput - obj.ftoInput) : null, titleValue: targetObj.ftoInput },
            // { name: 'FTO投入目标值', value: 11 },
            // { name: "%", value: 85 },
            // { name: "%", value: 85 },
          ],
          type: "bar",
          barWidth: 20,
          stack: 'f',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(104,196,131,.3)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        chip.push({
          name: "芯片产量完成值",
          // barGap: '-100%',
          stack: 'a',
          data: [
            { name: "芯片产量完成值", value: obj.chipYield, titleValue: obj.chipYield },
            // { name: '芯片产量完成值', value: 55 },
            // { name: "%", value: 21.66 },
            // { name: "%", value: 18.4 },
          ],
          type: "bar",
          barWidth: 20,
          // barGap: '-100%',
          label: {
            show: true,
            color: "rgba(40,138,255)",
            position: [-18, -16],
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "芯片产量目标值",
          // barGap: '-100%',
          stack: 'a',
          data: [
            { name: "芯片产量目标值", value: (targetObj.chipYield - obj.chipYield) > 0 ? (targetObj.chipYield - obj.chipYield) : null, titleValue: targetObj.chipYield },
            // { name: '芯片产量目标值', value: 22 },
            // { name: "%", value: 21.66 },
            // { name: "%", value: 18.4 },
          ],
          type: "bar",
          barWidth: 20,
          // barGap: '-100%',
          label: {
            show: true,
            position: [-18, -16],
            color: "rgba(40,138,255,.2)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        std.push({
          name: "标准组件产量完成值",
          stack: 'b',
          data: [
            { name: "标准组件产量完成值", value: obj.componentYield, titleValue: obj.componentYield },
            // { name: '标准组件产量完成值', value: 23 },
            // { name: "%", value: 7.02 },
            // { name: "%", value: 80.2 },
          ],
          type: "bar",
          barWidth: 20,
          label: {
            color: "rgba(100,189,255)",
            show: true,
            position: [0, -16],
            formatter: function (params) {
              return params.value
            },
          },
        }, {
          name: "标准组件产量目标值",
          stack: 'b',
          data: [
            { name: "标准组件产量目标值", value: (targetObj.componentYield - obj.componentYield) > 0 ? (targetObj.componentYield - obj.componentYield) : null, titleValue: targetObj.componentYield },
            // { name: '标准组件产量目标值', value: 23 },

            // { name: "%", value: 7.02 },
            // { name: "%", value: 80.2 },
          ],
          type: "bar",
          barWidth: 20,
          label: {
            show: true,
            position: [0, -16],
            color: "rgba(100,189,255,.3)",
            formatter: function (params) {
              return params.value
            },
          },
        })
        bipv.push(this.currentMenu == '瑞昌' ? null :
          {
            name: "BIPV产量完成值",
            stack: 'c',
            data: [
              { name: "BIPV产量完成值", value: obj.bipvProductOutput, titleValue: obj.bipvProductOutput },
              // { name: 'BIPV产量完成值', value: 32 },
              // { name: "%", value: 7.02 },
              // { name: "%", value: 80.2 },
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "rgba(113,100,255)",
              formatter: function (params) {
                return params.value
              },
            },
          }, this.currentMenu == '瑞昌' ? null :
          {
            name: "BIPV产量目标值",
            stack: 'c',
            data: [
              { name: "BIPV产量目标值", value: (targetObj.bipvProductOutput - obj.bipvProductOutput) > 0 ? (targetObj.bipvProductOutput - obj.bipvProductOutput) : null, titleValue: targetObj.bipvProductOutput },
              // { name: 'BIPV产量目标值', value: 24 },
              // { name: "%", value: 7.02 },
              // { name: "%", value: 80.2 },
            ],
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: [0, -16],
              color: "rgba(113,100,255,.2)",
              formatter: function (params) {
                return params.value
              },
            },
          },)
        // }
        this.chartMsgTarget.series = [...fto, ...chip, ...std, ...bipv]
      } else {
        res.data.list.forEach((ele, index) => {
          this.chartMsg.xData.push(ele.titleValue)
        })
        for (let i in this.dataArr[0]) {
            this.chartMsg.series[0].name = this.dataArr[0]['item']
          if (i.search('value') === 0) {
              this.chartMsg.series[0].data.push({
                name: this.dataArr[0]['item'],
                value: this.dataArr[0][i] === 0 ? null : this.dataArr[0][i]
              })
            }
          }
        for (let i in this.dataArr[1]) {
            this.chartMsg.series[1].name = this.dataArr[1]['item']
            if (i.search('value') === 0) {
              this.chartMsg.series[1].data.push({
                name: this.dataArr[1]['item'],
                value: this.dataArr[1][i] === 0 ? null : this.dataArr[1][i]
              })
            }
          }
        for (let i in this.dataArr[2]) {
            this.chartMsg.series[2].name = this.dataArr[2]['item']
            if (i.search('value') === 0) {
              this.chartMsg.series[2].data.push({
                name: this.dataArr[2]['item'],
                value: this.dataArr[2][i] === 0 ? null : this.dataArr[2][i]
              })
            }
        }
        if (this.dataArr[3]) {
          for (let i in this.dataArr[3]) {
            this.chartMsg.series[3].name = this.dataArr[3]['item']
            if (i.search('value') === 0) {
              this.chartMsg.series[3].data.push({
                name: this.dataArr[3]['item'],
                value: this.dataArr[3][i] === 0 ? null : this.dataArr[3][i]
              })
            }
          }
          }
      }
      // console.log(this.dataArr)
      // console.log(this.tableData);
      // this.$nextTick(() => {
      this.tableData = this.dataArr
      this.showTable = !this.showTable
      // })
      // this.$forceUpdate()
      // this.tableProps = otherProps
      // res.data.list.forEach((ele) => {
      //   console.log(ele);
      //   ele.productionSituationDataVOList.forEach((item) => {
      //     let obj = {
      //       bipvProductOutput: item.bipvProductOutput,
      //       chipYield: item.chipYield,
      //       componentYield: item.componentYield,
      //       factory: item.factory,
      //       ftoInput: item.ftoInput,
      //       titleValue:ele.titleValue
      //     }
      //     dataArr.push(obj)
      //   })
      // })
      // console.log(dataArr)
      // this.tableProps.push()
      // this.listQuery.total = res.data.total
      // if (this.listQuery.total > 0) {
      //   this.tableData.forEach(item => {
      //     item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
      //     item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
      //   })
      // }
    },
    _setTableHeight() {
      this.tableH = this.tableHeight(137) / 2 - 70;
      this.chartHeight = this.tableHeight(137) / 2 - 111;
      if (this.$route.name === "productionSituationTablets") {
        this.chartNum++;
      }
    },
    getSearch(val) {
      console.log(val);
      console.log("=========================");
    },
    handleExport() {
      let fileName = "生产情况(片).xls";
      exportProduceSituationData(this.listQuery)
        .then((response) => {
          this.$download.excel(response, fileName);
          this.$message.success("导出成功");
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  // height: calc((100px));
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 16px 0 16px;
  margin: 8px 0px;
}

.containerTop {
  height: calc((100vh - 170px));
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

.blueTip::before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 18px;
  background: #0B58FF;
  border-radius: 1px;
  margin-right: 8PX;
  margin-top: 8px;
}

.containerTop {
  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>
