zdqy_firm_former/src/views/statistics/index_kanban.vue

<template>
  <!-- <dv-full-screen-container> -->
  <div ref="scrollDiv" class="screen">
    <!-- :style="{height:height}" -->
    <div class="statistics">
      <div
        class="editDate"
        style="background-color: rgba(0, 0, 0, 0); display: block; width: 100%"
      >
        <!-- 标题装饰组件 -->
        <!-- <header-decoration />
                <div class="stitle">实验室管理看板</div>
                <div class="block" style="display:none">
                    <span class="demonstration">开始:</span>
                    <el-date-picker
                        v-model="BeginDate"
                        type="year"
                        size="mini"
                        value-format="yyyy"
                        format="yyyy年"
                        style="width: 96px;"
                        :clearable="false"
                        placeholder="选择日期"
                        @change="checkYear(BeginDate,'begin')"
                    />
                </div>

                <div class="block">
                    <span class="demonstration">查询年度:</span>
                    <el-date-picker
                        v-model="endDate"
                        type="year"
                        size="mini"
                        value-format="yyyy"
                        format="yyyy年"
                        :clearable="false"
                        style="width: 96px;"
                        placeholder="选择日期"
                        @change="checkYear(endDate,'end')"
                    >
                        <el-date-picker
                            v-model="endDate"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择年"
                            @change="checkYear(endDate,'end')"
                        />
                    </el-date-picker>
                </div> -->
        <div class="date-filter-bar">
          <el-button-group class="date-range-btns">
            <!-- <el-button
              size="mini"
              :type="activeDateRange === 'week' ? 'primary' : 'default'"
              @click="setDateRange('week')"
            >
              近一周
            </el-button> -->
            <el-button
              size="mini"
              :type="activeDateRange === 'month' ? 'primary' : 'default'"
              @click="setDateRange('month')"
            >
              近一月
            </el-button>
            <el-button
              size="mini"
              :type="activeDateRange === 'year' ? 'primary' : 'default'"
              @click="setDateRange('year')"
            >
              本年
            </el-button>
            <el-button
              size="mini"
              :type="activeDateRange === 'threeYears' ? 'primary' : 'default'"
              @click="setDateRange('threeYears')"
            >
              近三年
            </el-button>
          </el-button-group>
          <el-date-picker
            v-model="endDate"
            class="date-range-picker"
            type="monthrange"
            size="mini"
            align="right"
            unlink-panels
            style="background-color: rgba(0, 0, 0, 0)"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onDateRangeChange"
          />
        </div>
      </div>
      <div class="kanban-tab-bar">
        <el-tabs v-model="activeKanbanTab">
          <el-tab-pane label="人员培训" name="personnel" />
          <el-tab-pane label="设备管理" name="equipment" />
          <el-tab-pane label="内部比对及外部质评" name="qualityCompare" />
          <el-tab-pane label="应急预案及风险控制" name="emergency" />
          <el-tab-pane label="内部审核" name="internalAudit" />
          <el-tab-pane label="管理评审" name="managementReview" />
        </el-tabs>
      </div>
      <div class="w2222" v-if="relOf">
        <div v-if="activeKanbanTab === 'personnel'" class="kanban-tab-panel">
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s4renYuanPeiXun
                v-if="showAll || showComponents[1]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS4renYuanPeiXun()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s5renYuanJianDu
                v-if="showAll || showComponents[3]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS5renYuanJianDu()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s4renYuanPeiXunCol
                v-if="showAll || showComponents[2]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS4renYuanPeiXunFB()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s5renYuanJianDuCol
                v-if="showAll || showComponents[4]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS5renYuanJianDuFB()"
              />
            </div>
          </div>
        </div>

        <div v-if="activeKanbanTab === 'equipment'" class="kanban-tab-panel">
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s7sheBeiJiaoZhun
                v-if="showAll || showComponents[5]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getJiaoYanObjNum()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s8sheBeiHeCha
                v-if="showAll || showComponents[7]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="gethechaObjNum()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s7sheBeiJiaoZhunCol
                v-if="showAll || showComponents[6]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getJiaoYanObjNumFB()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s8sheBeiHeChaCol
                v-if="showAll || showComponents[8]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="gethechaObjNumFB()"
              />
            </div>
          </div>
        </div>

        <div
          v-if="activeKanbanTab === 'qualityCompare'"
          class="kanban-tab-panel"
        >
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s9neiBuZhiLiang
                v-if="showAll || showComponents[9]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS9neiBuZhiLiang()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s10waiBuNengLi
                v-if="showAll || showComponents[11]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getnengtliObjNum()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s9neiBuZhiLiangCol
                v-if="showAll || showComponents[10]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS9neiBuZhiLiangFB()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s10waiBuNengLiCol
                v-if="showAll || showComponents[12]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getnengtliObjNumFB()"
              />
            </div>
          </div>
        </div>

        <div v-if="activeKanbanTab === 'emergency'" class="kanban-tab-panel">
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s15tousu
                v-if="showAll || showComponents[13]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS3tousu()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s12fengXian
                v-if="showAll || showComponents[15]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS12fengXian()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s15tousuCol
                v-if="showAll || showComponents[14]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS3tousuFB()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s12fengXianCol
                v-if="showAll || showComponents[16]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS12fengXianFB()"
              />
            </div>
          </div>
        </div>

        <div
          v-if="activeKanbanTab === 'internalAudit'"
          class="kanban-tab-panel"
        >
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s2manYiDu
                v-if="showAll || showComponents[17]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS2manYiDu()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s2manYiDuCol
                v-if="showAll || showComponents[18]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS2manYiDuFB()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s14bufuhexiang
                v-if="showAll || showComponents[19]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS14bufuhexiang()"
              />
            </div>
          </div>
        </div>

        <div
          v-if="activeKanbanTab === 'managementReview'"
          class="kanban-tab-panel"
        >
          <div class="kanban-chart-row kanban-chart-row--pie">
            <div class="kanban-chart-cell">
              <s1zhiLiangMuBiao
                v-if="showAll || showComponents[21]"
                width="100%"
                height="100%"
                :colorw="colorw"
                style="box-shadow: none"
                :data="getS1renwu()"
              />
            </div>
            <div class="kanban-chart-cell">
              <s1zhiLiangMuBiaoCol
                v-if="showAll || showComponents[22]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getS1renwuFB()"
              />
            </div>
          </div>
          <div class="kanban-chart-row kanban-chart-row--bar">
            <div class="kanban-chart-cell">
              <s16bzJunZhu
                v-if="showAll || showComponents[23]"
                width="100%"
                height="100%"
                :colorw="colorw"
                :direction="direction"
                style="box-shadow: none"
                :data="getbzJunZhujNum()"
              />
            </div>
          </div>
        </div>
        <div class="clear" />
      </div>
    </div>
  </div>
</template>

<script>
// 全屏展示
import screenfull from 'screenfull'
import * as echarts from 'echarts'
// 大屏标题组件
import headerDecoration from './headerDecoration'

import s1zhiLiangMuBiao from './item/s1zhiLiangMuBiao.vue'
import s1zhiLiangMuBiaoCol from './item/s1zhiLiangMuBiaoCol.vue'
import s1zhiLiang1 from './item/s1zhiLiang1.vue'
import s1zhiLiang2 from './item/s1zhiLiang2.vue'
import s1zhiLiang3 from './item/s1zhiLiang3.vue'

import s1jianCe from './item/s1jianCe.vue'
import s2manYiDu from './item/s2manYiDu.vue'
import s2manYiDuCol from './item/s2manYiDuPro.vue'
import s3tousu from './item/s3tousu.vue'
import s4renYuanPeiXun from './item/s4renYuanPeiXun.vue'
import s4renYuanPeiXunCol from './item/s4renYuanPeiXunCol.vue'
import s5renYuanJianDu from './item/s5renYuanJianDu.vue'
import s5renYuanJianDuCol from './item/s5renYuanJianDuCol.vue'
import s6sheBeiWeiHu from './item/s6sheBeiWeiHu.vue'
import s7sheBeiJiaoZhun from './item/s7sheBeiJiaoZhun.vue'
import s7sheBeiJiaoZhunCol from './item/s7sheBeiJiaoZhunCol.vue'
import s8sheBeiHeCha from './item/s8sheBeiHeCha.vue'
import s8sheBeiHeChaCol from './item/s8sheBeiHeChaCol.vue'
import s9neiBuZhiLiang from './item/s9neiBuZhiLiang.vue'
import s9neiBuZhiLiangCol from './item/s9neiBuZhiLiangCol.vue'
import s10waiBuNengLi from './item/s10waiBuNengLi.vue'
import s10waiBuNengLiCol from './item/s10waiBuNengLiCol.vue'
import s11biaoZhunWu from './item/s11biaoZhunWuCol2.vue'
import s11biaoZhunWucol from './item/s11biaoZhunWuCol.vue'

import s12fengXian from './item/s12fengXian.vue'
import s12fengXianCol from './item/s12fengXianCol.vue'
import s13shengWu from './item/s13shengWu.vue'
import s14bufuhexiang from './item/s14bufuhexiangCol.vue'
import s15tousu from './item/s15tousu.vue'
import s15tousuCol from './item/s15tousuCol.vue'
import s16bzJunZhu from './item/s16bzJunZhuCol2.vue'
import s17bzXiBao from './item/s17bzXiBao.vue'

import none from './item/none.vue'
// import * as echarts from 'echarts'
import {
  DBData,
  getConfig,
  getJiaoYanObj,
  gethechaObj,
  getgangqianpeixunFBObj,
  getguanshenObjFB,
  getzhiliangmubiaotitleObj,
  getneishenObjFB,
  getfengxianObjFB,
  getyingjiObjFB,
  getwaibuObjFB,
  getneibuObjFB,
  getJiaoYanObjFB,
  gethechaObjFB,
  getnengliObj,
  getkangningyangpinObj,
  getzaigangrenyuanFBObj,
  getgaijinxiangObj,
  getbufuheObj,
  getguanshenObj,
  getneishenObj,
  getfengxianObj,
  getyingjiObj,
  getneibuObj,
  getwaibuObj,
  gethechaMGObj,
  getJiaoYanMGObj,
  getgangqianpeixunObj,
  getzaigangrenyuanObj,
  getfenzuZLZBObj,
  getzongZLMBObj,
  getzhiliangzhibiaotitleObj,
  getyangPinCaiJiObj,
  getbiaozhunTObj,
  getbzJunZhuObj,
  getbzJunZhuTObj,
  getbzXiBaoObj,
  getbzXiBaoTObj
} from './js/selectDB.js'
import sendDatas from './sendDatas.js'
import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js'
export default {
  components: {
    headerDecoration,
    none,
    s1zhiLiang1,
    s1zhiLiang2,
    s1zhiLiang3,
    s1zhiLiangMuBiao,
    s1zhiLiangMuBiaoCol,
    s1jianCe,
    s2manYiDu,
    s2manYiDuCol,
    s3tousu,
    s4renYuanPeiXun,
    s4renYuanPeiXunCol,
    s5renYuanJianDu,
    s5renYuanJianDuCol,
    s6sheBeiWeiHu,
    s7sheBeiJiaoZhun,
    s7sheBeiJiaoZhunCol,
    s8sheBeiHeCha,
    s8sheBeiHeChaCol,
    s9neiBuZhiLiang,
    s9neiBuZhiLiangCol,
    s10waiBuNengLi,
    s10waiBuNengLiCol,
    s11biaoZhunWu,
    s12fengXian,
    s12fengXianCol,
    s13shengWu,
    s14bufuhexiang,
    s15tousu,
    s15tousuCol,
    s16bzJunZhu,
    s17bzXiBao,
    s11biaoZhunWucol
  },
  mixins: [sendDatas],
  props: {
    shows: {
      // 传入的内容显示序号
      type: Array,
      default: () => []
    },
    displayType: {
      // 显示类型，默认为横向   ,作为表单统计图的外部引用为 line
      type: String,
      default: 'row'
    }
  },
  data() {
    return {
      direction: 'x',
      height: window.screen.height - 200 + 'px',
      BeginDate: '',
      endDate: '',
      activeDateRange: 'month',
      activeKanbanTab: 'personnel',
      jiaoyanObj: [],
      jiaoyanMGObj: [],
      hechaObj: [],
      hechaMGObj: [],
      waibuObj: [],
      waibuObjfb: [],
      neibuObj: [],
      neibuObjfb: [],
      yingjiObj: [],
      yingjifbObj: [],
      fengxianObj: [],
      fengxianfbObj: [],
      neishenObj: [],
      neishenfbObj: [],
      guanshenObj: [],
      guanshenfbObj: [],
      bufuheObj: [],
      gaijinxiangObj: [],
      nengliObj: [],
      buhegelvObj: [],
      zhiliangzhibiaotitle: [],
      biaozhunTObj: [],
      bzJunZhuObj: [],
      bzJunZhuTObj: [],
      bzXiBaoObj: [],
      bzXiBaoTObj: [],
      fenzuzlmb: [],
      zaigangrenyuan: [],
      zaigangrenyuanfb: [],
      gangqianpeixun: [],
      gangqianpeixunfb: [],
      relData: {},
      relOf: false,
      selectEnd: '',
      selectBeg: '',
      showAll: true,
      timer: '',
      timer1: '',
      showComponents: {}, // 显示全部统计子组件 , 若有新增，往后累计。 供动态表单进行查阅使用。
      dataScope: [],
      colorw: '#000',
      pageOT: 1,
      rollup: true,
      idsStr: '',
      quality: [],
      quality1: [],
      allEcharts: [],
      bumen: '',
      zhiliangmuTitle: [],
      zhiliangmuNeirong: [],
      zhiliangxianzhi: [],
      tableNum: [],
      pageAll: 0,
      fadeinout: true,
      allBuMen: [],
      bfBuMen: [],
      tableData: {
        header: [
          '<span style="font-size:16px;height:53px">质量指标</span>',
          '<span style="font-size:16px;height:53px">百分比/数量</span>'
        ],
        rowNum: 10,
        columnWidth: [600, 400],
        align: ['left', 'right'],
        data: [
          // ['行1列1', '行1列2', '行1列3'],
        ]
      },
      tableData1: {
        header: [
          '<span style="font-size:16px;height:53px">质量指标</span>',
          '<span style="font-size:16px;height:53px">计算公式</span>',
          '<span style="font-size:16px;height:53px">指标限值</span>'
        ],
        rowNum: 5,
        columnWidth: [300, 900, 200],
        align: ['left', 'left', 'right'],
        data: [
          // ['行1列1', '行1列2', '行1列3'],
        ]
      }
    }
  },
  watch: {
    activeKanbanTab() {
      this.scheduleKanbanChartResize()
    },
    relOf(val) {
      if (val) {
        this.scheduleKanbanChartResize()
      }
    },
    zhiliangmuNeirong: {
      handler() {
        // this.drawLine()
        this.pageAll = this.zhiliangmuNeirong.length
      },
      deep: true
    }
  },
  created() {
    // this.currentTime()
    // this.getqualityData()
    // if (screenfull.isEnabled && !screenfull.isFullscreen) {
    //     this.allView()
    // }
  },
  provide() {
    return { rollcontinue: this.rollcontinue, rollstop: this.rollstop }
  },
  mounted() {
    /* 以shows是否有参数来判断， 是否需要仅显示部分子组件*/
    if (this.shows.length > 0) {
      this.showAll = false
      this.isShowComponents()
    }
    /* 开始及结束时间的默认设置*/
    if (!Array.isArray(this.endDate) || this.endDate.length !== 2) {
      this.setDateRange('month')
    } else {
      this.getqualityData()
    }
    // 获取统计的配置

    // if (this.buhegelvObj.length > 0) {
    //     this.timer1 = setInterval(() => {
    //         if (this.pageOT >= this.pageAll) {
    //             this.pageOT = 1
    //         } else {
    //             this.pageOT = this.pageOT + 1
    //         }
    //         // console.log(this.pageOT)
    //     }, 8000)
    // }
    // this.drawLine()
  },
  updated() {
    // this.drawLine();
    this.allEcharts.forEach((i) => {
      i.resize()
    })
  },
  beforeDestroy() {
    if (screenfull.isFullscreen) {
      screenfull.toggle()
    }
    clearInterval(this.timer)
  },
  methods: {
    scheduleKanbanChartResize() {
      this.$nextTick(() => {
        requestAnimationFrame(() => {
          this.resizeVisibleKanbanCharts()
        })
      })
    },
    resizeVisibleKanbanCharts() {
      if (!this.$el) return
      this.$el
        .querySelectorAll('.kanban-tab-panel canvas')
        .forEach((canvas) => {
          const chartDom = canvas.parentElement
          if (!chartDom) return
          const chart = echarts.getInstanceByDom(chartDom)
          if (chart) chart.resize()
        })
    },
    /* 判断是否统计子组件中传递过来的，是否需要隐藏。若需要则进行隐藏的遍历  */
    isShowComponents() {
      /* 将参数进行显示 */
      for (let i = 0; i < this.shows.length; i++) {
        this.showComponents[this.shows[i]] = true
      }
    },
    getqualityData() {
      const { deptList } = this.$store.getters || {}
      const filterLetter = [
        '综合',
        '质量',
        '科研',
        '教学',
        '医疗',
        '样品',
        '助理',
        '急诊'
      ]
      const AllDeptList = deptList.filter((d) => d.depth === 4)
      const deptEntity = deptList.filter(
        (d) =>
          d.depth === 4 && !filterLetter.some((i) => d.positionName.includes(i))
      )

      this.idsStr = deptEntity.map((i) => i.positionId).join(',')
      this.bumen = AllDeptList.map((i) => i.positionId).join(',')
      this.allBuMen = AllDeptList.map((i) => ({
        NAME_: i.positionName,
        numA: 0,
        num: 0,
        wnum: 0,
        chu: 0
      }))
      this.bfBuMen = deptEntity.map((i) => ({
        NAME_: i.positionName,
        numA: 0,
        num: 0,
        wnum: 0,
        chu: 0
      }))
      console.log('aaaa', this.bfBuMen)

      this.getConfigData(this.endDate, this.bumen, this.idsStr)
    },
    getNextMonth(date) {
      const arr = date.split('-')
      const year = arr[0] // 获取当前日期的年份
      const month = arr[1] // 获取当前日期的月份
      let year2 = year
      let month2 = parseInt(month) + 1
      if (month2 == 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }
      month2 = month2 > 9 ? month2 : '0' + month2
      const t2 = year2 + '-' + month2
      return t2
    },
    /* 查询统计配置中的完成率*/
    getConfigData(end, allDept, filterDept) {
      console.log(end, allDept, filterDept)
      const that = this
      this.tableData.data = []
      this.tableData1.data = []
      const queryEnd = [...end]
      queryEnd[2] = queryEnd[1]
      queryEnd[1] = this.getNextMonth(queryEnd[1])
      Promise.all([
        repostCurd('query', getConfig()),
        repostCurd('query', getyangPinCaiJiObj(queryEnd, filterDept)),
        repostCurd('query', getzhiliangzhibiaotitleObj(queryEnd, filterDept)),
        repostCurd('query', getzongZLMBObj(queryEnd, filterDept)),
        repostCurd('query', getfenzuZLZBObj(queryEnd, filterDept)),
        repostCurd('query', getzaigangrenyuanObj(queryEnd, allDept)),
        repostCurd('query', getgangqianpeixunObj(queryEnd, allDept)),
        repostCurd('query', getJiaoYanObj(queryEnd, allDept)),
        repostCurd('query', getJiaoYanObjFB(queryEnd, allDept)),
        repostCurd('query', gethechaObj(queryEnd, allDept)),
        repostCurd('query', gethechaObjFB(queryEnd, allDept)),
        repostCurd('query', getwaibuObj(queryEnd, allDept)),
        repostCurd('query', getneibuObj(queryEnd, allDept)),
        repostCurd('query', getyingjiObj(queryEnd, allDept)),
        repostCurd('query', getfengxianObj(queryEnd, allDept)),
        repostCurd('query', getneishenObj(queryEnd, allDept)),
        repostCurd('query', getguanshenObj(queryEnd, allDept)),
        repostCurd('query', getbufuheObj(queryEnd, allDept)),
        repostCurd('query', getgaijinxiangObj(queryEnd, allDept)),
        repostCurd('query', getzaigangrenyuanFBObj(queryEnd, allDept)),
        repostCurd('query', getgangqianpeixunFBObj(queryEnd, allDept)),
        repostCurd('query', getneibuObjFB(queryEnd, allDept)),
        repostCurd('query', getwaibuObjFB(queryEnd, allDept)),
        repostCurd('query', getyingjiObjFB(queryEnd, allDept)),
        repostCurd('query', getfengxianObjFB(queryEnd, allDept)),
        repostCurd('query', getneishenObjFB(queryEnd, allDept)),
        repostCurd('query', getguanshenObjFB(queryEnd, allDept)),
        repostCurd('query', getzhiliangmubiaotitleObj(queryEnd, filterDept))
      ]).then(
        ([
          response,
          response1,
          response2,
          response3,
          response4,
          response5,
          response6,
          response7,
          response8,
          response9,
          response10,
          response11,
          response12,
          response13,
          response14,
          response15,
          response16,
          response17,
          response18,
          fb,
          fb1,
          fb2,
          fb3,
          fb4,
          fb5,
          fb6,
          fb7,
          fb8
        ]) => {
          that.config = response.variables.data
          that.buhegelvObj = response1.variables.data
          that.zhiliangzhibiaotitle = response2.variables.data
          that.tableNum = response3.variables.data
          const arr = this.tableNum
          const aa = []
          for (let j = 0; j < arr.length; j++) {
            const changeArr = [
              '<span style="font-size:14px;height:45px;line-height:45px;display:inline-block">' +
                arr[j].zhi_liang_zhi_bia +
                '</span>',
              '<span style="font-size:14px;height:45px;line-height:45px;display:inline-block">' +
                arr[j].location.toFixed(2) +
                '</span>'
            ]
            // aa.push(changeArr)
            const changeArr1 = [
              '<span style="font-size:14px;height:45px;display:inline-block;">' +
                arr[j].zhi_liang_zhi_bia +
                '</span>',
              '<span style="font-size:14px;height:45px;display:inline-block;">' +
                arr[j].ji_suan_gong_shi_ +
                '</span>',
              '<span style="font-size:14px;height:45px;display:inline-block;">' +
                arr[j].zhi_biao_xian_zhi +
                '</span>'
            ]
            that.tableData.data.push(changeArr)
            that.tableData1.data.push(changeArr1)
          }
          const qqaa = response4.variables.data
          that.fenzuzlmb = this.sortArr(qqaa, 'bzbm')
          // console.log(that.fenzuzlmb,'qqaaqqaaqqaa')
          that.zaigangrenyuan = response5.variables.data
          that.gangqianpeixun = response6.variables.data
          that.jiaoyanObj = response7.variables.data
          that.jiaoyanMGObj = response8.variables.data
          that.hechaObj = response9.variables.data
          that.hechaMGObj = response10.variables.data
          that.waibuObj = response11.variables.data
          that.neibuObj = response12.variables.data
          that.yingjiObj = response13.variables.data
          that.fengxianObj = response14.variables.data
          that.neishenObj = response15.variables.data
          that.guanshenObj = response16.variables.data
          that.bufuheObj = response17.variables.data
          that.gaijinxiangObj = response18.variables.data
          that.getzzzbNum()
          that.zaigangrenyuanfb = fb.variables.data
          that.gangqianpeixunfb = fb1.variables.data
          that.neibuObjfb = fb2.variables.data
          that.waibuObjfb = fb3.variables.data
          that.yingjifbObj = fb4.variables.data
          that.fengxianfbObj = fb5.variables.data
          that.neishenfbObj = fb6.variables.data
          that.guanshenfbObj = fb7.variables.data
          that.zhiliangmubiaotitle = fb8.variables.data
          that.relOf = true
        }
      )
    },
    /* 查询全部*/
    selectAll() {
      this.relOf = false
      this.getqualityData()
    },
    checkYear(year, data) {
      this.selectAll()
    },
    onDateRangeChange(val) {
      if (!val || val.length !== 2) return
      this.activeDateRange = ''
      this.dataScope = val
      this.selectAll()
    },
    formatMonth(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      return `${year}-${month}`
    },
    setDateRange(range) {
      const now = new Date()
      const end = this.formatMonth(now)
      const startDate = new Date()
      let start

      switch (range) {
        case 'week':
          startDate.setDate(startDate.getDate() - 7)
          start = this.formatMonth(startDate)
          break
        case 'month':
          startDate.setMonth(startDate.getMonth() - 1)
          start = this.formatMonth(startDate)
          break
        case 'year':
          start = `${now.getFullYear()}-01`
          break
        case 'threeYears':
          startDate.setFullYear(startDate.getFullYear() - 3)
          start = this.formatMonth(startDate)
          break
        default:
          return
      }

      this.activeDateRange = range
      this.endDate = [start, end]
      this.dataScope = [start, end]
      this.selectAll()
    },
    /* 获取当前年份*/
    getDate(year) {
      year = year || 0
      const nowDate = new Date()
      const date = new Date(new Date().setDate(1) + 31 * 24 * 60 * 60 * 1000)
      let month = date.getMonth() + 1
      const m1 = nowDate.getMonth() + 1
      const month1 = m1 < 10 ? '0' + m1 : nowDate.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      // console.log([nowDate.getFullYear() - year + "-" + month1,date.getFullYear() + "-" + month])
      // return [nowDate.getFullYear() - year + "-" + month1,date.getFullYear() + "-" + month];
      return [
        nowDate.getFullYear() - year + '-01',
        nowDate.getFullYear() - year + '-' + month1
      ]
    },
    sortArr(arr, str) {
      if (!arr?.length) return [] // 空数组直接返回

      // 1. 按属性排序
      const sorted = [...arr].sort((a, b) => a[str].localeCompare(b[str]))

      // 2. 使用 Map 进行分组（更高效）
      const grouped = sorted.reduce((map, item) => {
        const key = item[str]
        map.has(key) ? map.get(key).push(item) : map.set(key, [item])
        return map
      }, new Map())

      // 3. 转换为目标格式 [{ id_: key, data: [...] }]
      return [...grouped].map(([id_, data]) => ({ id_, data }))
    },
    getzzzbNum() {
      // 1. 生成月份数组
      const [startDate, endDate] = [this.endDate[0], this.endDate[1]]
      const [startYear, startMonth] = startDate.split('-').map(Number)
      const [endYear, endMonth] = endDate.split('-').map(Number)

      const monthCount =
        endYear > startYear
          ? (endYear - startYear) * 12 + endMonth - startMonth + 1
          : endMonth - startMonth + 1

      const dateArray = Array.from({ length: monthCount }, (_, i) => {
        const month = startMonth + i
        const year = startYear + Math.floor((month - 1) / 12)
        const paddedMonth = String(month % 12 || 12).padStart(2, '0')
        return `${year}-${paddedMonth}`
      })

      // 2. 合并 quality 和 fenzuzlmb 数据
      const qualityMap = new Map(this.quality.map((item) => [item.id_, item]))
      this.fenzuzlmb.forEach((item) => {
        if (qualityMap.has(item.id_)) {
          qualityMap.get(item.id_).data = item.data || ''
        }
      })

      // 3. 按日期重组数据
      const zongfz = [...qualityMap.values()]
        .map(({ id_, name_, data = [] }) => {
          const zlzbfz = dateArray.map((name_) => ({ name_ }))

          data.forEach(({ bzsj, zhi_liang_zhi_bia, location }) => {
            const target = zlzbfz.find((item) => item.name_ === bzsj)
            if (target) target[zhi_liang_zhi_bia] = location
          })

          return { id: id_, name: name_, data: zlzbfz }
        })
        .filter((item) =>
          item.data.some((entry) => Object.keys(entry).length > 1)
        )

      // 4. 提取标题和指标值
      const title = [
        'name_',
        ...this.zhiliangzhibiaotitle.map((item) => item.zhi_liang_zhi_bia)
      ]
      const zbval = this.zhiliangzhibiaotitle.map((item) =>
        parseFloat(item.zhi_biao_xian_zhi.match(/(\d+(\.\d+)?)/)[0])
      )

      // 5. 更新组件数据
      Object.assign(this, {
        zhiliangmuTitle: title,
        zhiliangmuNeirong: zongfz,
        zhiliangxianzhi: zbval,
        pageAll: zongfz.length
      })

      clearInterval(this.timer1)
    },
    goBack() {
      this.$router.back(-1)
      this.fadeinout = true
      clearInterval(this.timer1)
    },
    rollcontinue() {
      this.fadeinout = false
      this.timer1 = setInterval(() => {
        if (this.pageOT >= Math.ceil(this.pageAll / 2) + 7) {
          this.pageOT = 1
        } else {
          this.pageOT = this.pageOT + 1
        }
      }, 4000)
      this.rollup = true
    },
    rollstop() {
      this.fadeinout = true
      clearInterval(this.timer1)
      // console.log('dfhjsdifjsojfjiofjoijdiffffjidffffff')
      this.rollup = false
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  .editDate {
    flex-shrink: 0;
    min-height: 40px;
    overflow: visible;
    background-color: rgb(249, 255, 255);
    position: relative;
  }
  .kanban-tab-bar {
    width: 100%;
    flex-shrink: 0;
    padding: 0 1%;
    ::v-deep .el-tabs__header {
      margin-bottom: 0;
    }
    ::v-deep .el-tabs__item {
      color: #606266;
      height: 36px;
      line-height: 36px;
      font-size: 13px;
    }
    ::v-deep .el-tabs__item.is-active {
      color: rgb(0, 191, 191);
    }
    ::v-deep .el-tabs__active-bar {
      background-color: rgb(0, 191, 191);
    }
    ::v-deep .el-tabs__nav-wrap::after {
      background-color: #e4e7ed;
    }
  }
  .w2222 {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .date-filter-bar {
    width: 100%;
    min-height: 40px;
    text-align: center;
    margin: 8px 0 8px 1%;
    font-size: 100%;
    color: #fff !important;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    $filter-control-height: 32px;
    $filter-border: 1px solid #dcdfe6;
    ::v-deep .date-range-btns {
      display: inline-flex;
      align-items: stretch;
      .el-button {
        box-sizing: border-box;
        height: $filter-control-height;
        min-height: $filter-control-height;
        padding: 0 12px;
        line-height: calc(#{$filter-control-height} - 2px);
        border: $filter-border;
      }
      .el-button--primary {
        border-color: rgb(0, 191, 191);
      }
    }
    ::v-deep .date-range-picker.el-date-editor.el-range-editor {
      box-sizing: border-box;
      height: $filter-control-height !important;
      min-height: $filter-control-height;
      line-height: calc(#{$filter-control-height} - 2px);
      border: $filter-border;
      border-radius: 4px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      background-color: rgba(0, 0, 0, 0);
      .el-range-input {
        height: auto;
        line-height: 1;
        margin: 0;
        color: #000;
        background-color: transparent;
      }
      .el-range-separator {
        height: auto;
        line-height: 1;
        color: #000;
      }
      .el-range__icon,
      .el-range__close-icon {
        height: auto;
        line-height: 1;
        margin-top: 0;
      }
    }
  }
  .block {
    float: left;
    font-size: 14px;
  }
}
#dv-full-screen-container {
  // background-image: url('./img/stars.png');
  background-size: 100% 100%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  // background-color: #f9ffff;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  //  .headerContent{
  //   flex: 1;

  //  }
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.goBackButton {
  width: 2%;
  position: absolute;
  right: 0;
}
.shiyankanbanfanhui {
  border: none;
  .border-box-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.stitle {
  text-align: center;
  font-size: 150%;
  // font-family: PingFangSC-Semibold, sans-serif;
  font-weight: 600;
  margin: 0;
}
.ttitle {
  font-size: 120%;
  font-weight: 600;
  height: 2%;
  margin: 1% 0;
}
.screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0.5%;
}
.clear {
  clear: both;
}
.congxiebox7 {
  background-color: rgba(6, 30, 93, 0.5);
  box-shadow: rgb(128 128 128 / 30%) 0px 0px 40px inset;
  border: 1px solid rgba(128, 128, 128, 0.3);
  margin: 1% 0 0 0;
  font-size: 12px;
}
.gongshiAll {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 20%;
  .touwidth {
    width: 30%;
    text-align: right;
  }
  .gongshiXian {
    border-bottom: #fff solid 2px;
    padding-bottom: 6%;
    text-align: center;
    font-size: 12px;
  }
}
.mubiaozhi {
  text-align: center;
  margin-top: 3%;
}
.nullDate {
  height: 100%;
  text-align: center;
  line-height: 100%;
  font-size: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.componentsData {
  height: 92%;
}
.nullDate1 {
  height: 50%;
  width: 25%;
  display: inline-block;
  text-align: center;
  line-height: 50%;
  font-size: 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanban-tab-panel {
  width: 100%;
  padding: 8px 0;
}
.kanban-chart-row {
  display: flex;
  width: 100%;
  gap: 12px;
  &--pie {
    height: 320px;
  }
  &--bar {
    height: 400px;
    margin-top: 12px;
  }
}
.kanban-chart-cell {
  flex: 1;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  ::v-deep .statisticsPage {
    width: 100% !important;
    height: 100%;
    float: none;
    box-shadow: none;
    > div:hover {
      transform: none !important;
      transition: none !important;
    }
  }
}
</style>
<style lang="scss">
.el-year-table .today .cell {
  color: #606266 !important;
  font-weight: 100 !important;
}
</style>
<style lang="scss" scoped>
.statistics ::v-deep .date-filter-bar .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  color: #000;
}
.date-range-btns {
  margin-right: 0;
  ::v-deep .el-button {
    background-color: rgba(0, 0, 0, 0);
    color: #000;
    border-color: #dcdfe6;
  }
  ::v-deep .el-button--primary {
    background-color: rgb(0, 191, 191);
    border-color: rgb(0, 191, 191);
    color: #fff;
  }
}
.fade-in {
  animation: fadeIn 1s linear forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-out {
  animation: fadeOut 1s linear forwards;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>