<!-- 受检设备分析  --数据看板 -->
<script name="EqptDeviceTrend" lang="ts" setup>
import dayjs from 'dayjs'
import draggable from 'vuedraggable'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { colors } from '../environment/colors'
import { getRangeAllTime } from '@/utils/date'
import type { deptType, dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { exportFile } from '@/utils/exportUtils'
import { getCustomerInfoList } from '@/api/resource/customer'
import {
  getBaseInfo,
  getNoVerificationAmount,
  getDeviceSource,
  getDeviceType,
  getAlreadyMeasured,
  getShouldMeasured,
  getDevicePerformance,
  exportDeviceType,
  getDeviceSourceDept,
  getDeviceTypeList
} from '@/api/dataManagement/data/eqptDevice'
import { eqptDevice } from './img'
const props = defineProps({
  lab: {
    type: String,
    default: ''
  }
})
// 日期查询条件
const dateRef = ref()
const current = ref('')
// 组别
const groupCodeList = ref<dictType[]>([])
const checkDestinationList = ref<dictType[]>([])
// 委托方
const customerList = ref<any[]>([])
setTimeout(() => {
  current.value = '近7日'
})
const selectCurrentTime = ref()
const menu = ref(['当日', '近7日', '近14天', '自定义时间'])

// 时间筛选条件
const startTime = ref()
const calendarChange = (e: any) => {
  startTime.value = e[0].getTime()
}
const pickerOptions = (time: any) => {
  if (startTime.value) {
    const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
    const minTime = startTime.value - timeRange * 2
    const maxTime = startTime.value + timeRange * 15
    return (
      time.getTime() <= minTime ||
      time.getTime() >= maxTime ||
      time.getTime() === startTime.value
    )
  } else {
    return false
  }
}
// 点击自定义时间
// const clickBtn = (event: any) => {
//   const select = event.target.innerText
//   if (select && select === '自定义时间') {
//     console.log('自定义时间', 'innerText')
//     console.log(dateRef.value)
//     dateRef.value.focus(true)
//     // dateRef.value.click()
//   } else if (select && select !== '自定义时间') {
//     selectCurrentTime.value = []
//     startTime.value = ''
//   }
// }
const currentBak = ref('')
const handlerFocus = () => {
  console.log('获取焦点')
  // 记录之前
  currentBak.value = current.value
  current.value = '自定义时间'
}
const handlerBlur = () => {
  console.log('失去焦点')
  if (!selectCurrentTime.value.length) {
    current.value = currentBak.value || '近7日'
  }
}
const timeDate = ref<string[]>([])
watch(
  () => current.value,
  newVal => {
    if (newVal) {
      if (newVal === '当日') {
        timeDate.value = [dayjs().format('YYYY-MM-DD')]
      } else if (newVal === '近7日') {
        timeDate.value = getRangeAllTime(
          dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        )
      } else if (newVal === '近14天') {
        timeDate.value = getRangeAllTime(
          dayjs().subtract(14, 'day').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        )
      }
      if (!newVal.includes('自定义')) {
        fetchData()
        selectCurrentTime.value = []
      }
    }
  }
)
watch(
  () => selectCurrentTime.value,
  newVal => {
    if (newVal.length === 2) {
      console.log('确定时间')
      timeDate.value = getRangeAllTime(newVal[0], newVal[1])
      fetchData()
    }
  }
)
// 公共查询条件
const searchQueryResult = ref({
  groupCode: '',
  labCode: '',
  timeStart: '',
  timeEnd: ''
})
// 受检设备各种类数量分析 查询条件
const searchQueryForTypeSoure = ref({
  // labCode: '',
  groupCode: '',
  customerId: ''
})
// 获取受检设备各种类数量分析数据
const fetchQueryForTypeSoure = () => {
  getDeviceType({
    ...searchQueryResult.value,
    ...searchQueryForTypeSoure.value
  }).then(res => {
    const current = showChart.value.filter(
      item => item.name === '受检设备各种类数量分析'
    )[0]
    current.data = []
    const data = []
    for (const i in res.data) {
      data.push({
        name: i,
        value: res.data[i]
      })
    }
    current.data = data
    // console.log(data, 'data 1')
  })
}
// 改变受检设备各种类数量分析 查询条件
const changeSearchQueryForTypeSoure = () => {
  fetchQueryForTypeSoure()
}
// 受检设备已检数量趋势 查询条件
const searchQueryForMeasured = ref({
  timeStart: '',
  timeEnd: '',
  customerId: '',
  checkDestination: ''
})
const selectForMeasured = ref([])
watch(() => selectForMeasured.value, (newVal) => {
  if (newVal && newVal?.length === 2) {
    searchQueryForMeasured.value.timeStart = `${newVal[0]} 00:00:00`
    searchQueryForMeasured.value.timeEnd = `${newVal[0]} 23:59:59`

  }
  else {
    searchQueryForMeasured.value.timeStart = ''
    searchQueryForMeasured.value.timeEnd = ''
  }
  fetchQueryForMeasured()
})
//  获取受检设备已检数量趋势 数据
const fetchQueryForMeasured = () => {
  getAlreadyMeasured({
    ...searchQueryResult.value,
    ...searchQueryForMeasured.value,
    timeStart: searchQueryForMeasured.value.timeStart ? searchQueryForMeasured.value.timeStart : searchQueryResult.value.timeStart,
    timeEnd: searchQueryForMeasured.value.timeEnd ? searchQueryForMeasured.value.timeEnd : searchQueryResult.value.timeEnd,
  }).then(res => {
    console.log(res.data, '受检设备已检数量趋势')
    const current = showChart.value.filter(
      item => item.name === '受检设备已检数量趋势'
    )[0]
    const data = [
      {
        name: '海口实验室',
        value: 'hAmount',
        data: ''
      },
      {
        name: '西昌实验室',
        value: 'xAmount',
        data: ''
      },
      {
        name: '外送',
        value: 'outAmount',
        data: ''
      },
    ]
    current.xAxisData = res.data.map((item: any) => item.dimension)
    current.data = data.map((item: any) => ({
      name: item.name,
      symbol: 'emptyCircle',
      data: res.data.map((citem: any) => String(citem[data.filter((ccitem: any) => ccitem.name === item.name)[0].value]))
    }))
  })
}
// 改变受检设备已检数量趋势 查询条件
const changeSearchQueryForMeasured = () => {
  fetchQueryForMeasured()
}
// 受检设备应检数量趋势 查询条件
const searchQueryForShouldMeasured = ref({
  timeStart: '',
  timeEnd: '',
  customerId: '',
  checkDestination: ''
})
const selectForShouldMeasured = ref([])
watch(() => selectForShouldMeasured.value, (newVal) => {
  if (newVal && newVal?.length === 2) {
    searchQueryForShouldMeasured.value.timeStart = `${newVal[0]} 00:00:00`
    searchQueryForShouldMeasured.value.timeEnd = `${newVal[0]} 23:59:59`
    fetchQueryForShouldMeasured()
  }
  else {
    searchQueryForShouldMeasured.value.timeStart = ''
    searchQueryForShouldMeasured.value.timeEnd = ''
  }
  fetchQueryForShouldMeasured()
})
const contextmenu = (name: string) => {
  console.log(name)
  if (name === '受检设备已检数量趋势') {
    selectForMeasured.value = []
    // fetchQueryForMeasured()
  } else if (name === '受检设备应检数量趋势') {
    selectForShouldMeasured.value = []
    // fetchQueryForShouldMeasured()
  }
}
//  获取受检设备已检数量趋势 数据
const fetchQueryForShouldMeasured = () => {
  getShouldMeasured({
    ...searchQueryResult.value,
    ...searchQueryForShouldMeasured.value,
    timeStart: searchQueryForShouldMeasured.value.timeStart ? searchQueryForShouldMeasured.value.timeStart : searchQueryResult.value.timeStart,
    timeEnd: searchQueryForShouldMeasured.value.timeEnd ? searchQueryForShouldMeasured.value.timeEnd : searchQueryResult.value.timeEnd,
  }).then(res => {
    console.log(res.data, '受检设备应检数量趋势')
    const current = showChart.value.filter(
      item => item.name === '受检设备应检数量趋势'
    )[0]
    const data = [
      {
        name: '海口实验室',
        value: 'hAmount',
        data: ''
      },
      {
        name: '西昌实验室',
        value: 'xAmount',
        data: ''
      },
      {
        name: '外送',
        value: 'outAmount',
        data: ''
      },
    ]
    current.xAxisData = res.data.map((item: any) => item.dimension)
    current.data = data.map((item: any) => ({
      name: item.name,
      symbol: 'circle',
      data: res.data.map((citem: any) => String(citem[data.filter((ccitem: any) => ccitem.name === item.name)[0].value]))
    }))
  })
}
// 改变受检设备应检数量趋势 查询条件
const changeSearchQueryForShouldMeasured = () => {
  fetchQueryForShouldMeasured()
}
watch(
  () => props.lab,
  newVal => {
    if (newVal) {
      searchQueryResult.value.labCode = props.lab
      fetchData()
    }
  }
)
// 基础信息展示数据
const baseInfo = ref([
  {
    name: '任务单总量',
    value: 'orderAmount',
    data: '',
    icon: eqptDevice['任务单总量'],
    color: '#1AAF8B'
  },
  {
    name: '受检设备规格型号总量',
    value: 'modelAmount',
    data: '',
    icon: eqptDevice['受检设备规格型号总量'],
    color: '#1AAF8B'
  },
  {
    name: '受检设备总量',
    value: 'sampleAmount',
    data: '',
    icon: eqptDevice['受检设备总量'],
    color: '#1AAF8B'
  },
  {
    name: '受检设备年度到期应检总量',
    value: 'expireAmount',
    data: '',
    icon: eqptDevice['受检设备年度到期应检总量'],
    color: '#1AAF8B'
  },
  {
    name: '受检设备已检总量',
    value: 'measuredAmount',
    data: '',
    icon: eqptDevice['受检设备已检总量'],
    color: '#1AAF8B'
  }
])
const showChart = ref<any[]>([
  {
    name: '未检定设备数量分析',
    type: 'rank-table',
    source: 'system',
    data: [],
    columns: [
      {
        text: '部门',
        value: 'dept',
        align: 'center'
      },
      {
        text: '数量',
        value: 'count',
        align: 'center'
      }
    ]
  },
  {
    name: '受检设备来源分析',
    type: 'pie',
    source: 'system',
    center: ['50%', '60%'],
    labelPosition: 'outside',
    radius: '70%',
    data: []
  },
  {
    name: '受检设备各种类数量分析',
    type: 'pie',
    source: 'system',
    // labelPosition: 'outside',
    // radius: '70%',
    center: ['50%', '60%'],
    data: []
  },
  {
    name: '受检设备已检数量趋势',
    type: 'line',
    source: 'system',
    xAxisData: [],
    data: [],
    smooth: false,
    gradient: false
  },
  {
    name: '受检设备应检数量趋势',
    type: 'line',
    source: 'system',
    xAxisData: [],
    data: [],
    smooth: false,
    gradient: false
  },
  {
    name: '受检设备性能趋势',
    type: 'rank-table',
    source: 'system',
    data: [],
    columns: [
      // {
      //   text: '序号',
      //   value: 'index',
      //   align: 'center',
      //   width: '70'
      // },
      {
        text: '设备名称',
        value: 'sampleName',
        align: 'center'
      },
      {
        text: '规格型号',
        value: 'model',
        align: 'center'
      },
      {
        text: '辅助字段',
        value: 'helpInstruction',
        align: 'center'
      },
      {
        text: '生产厂家',
        value: 'manufacturer',
        align: 'center'
      },
      {
        text: '报废次数',
        value: 'discardAmount',
        align: 'center'
      },
      {
        text: '维修次数',
        value: 'repairAmount',
        align: 'center'
      },
      {
        text: '总次数',
        value: 'totalAmount',
        align: 'center'
      }
    ]
  }
])
watch(
  () => showChart.value.length,
  () => {
    setTimeout(() => {
      const resize = new Event('resize')
      window.dispatchEvent(resize)
    })
  }
)
// 模拟数据
const loading = ref(false)
function fetchData() {
  console.log(current.value, '当前日期类型---要查询了')
  if (current.value !== '自定义时间') {
    console.log(timeDate.value, 'timeDate')
    if (current.value === '当日') {
      searchQueryResult.value.timeStart = `${timeDate.value[0]} 00:00:00`
      searchQueryResult.value.timeEnd = `${timeDate.value[0]} 23:59:59`
    } else {
      searchQueryResult.value.timeStart = `${timeDate.value[0]} 00:00:00`
      searchQueryResult.value.timeEnd = `${timeDate.value[timeDate.value.length - 1]} 23:59:59`
    }
  } else {
    searchQueryResult.value.timeStart = `${selectCurrentTime.value[0]} 00:00:00`
    searchQueryResult.value.timeEnd = `${selectCurrentTime.value[1]} 23:59:59`
    console.log(selectCurrentTime.value, 'selectCurrentTime.value')
  }
  // searchQueryResult.value.timeStart = `2024-01-01 00:00:00`
  // searchQueryResult.value.timeEnd = `2024-12-31 23:59:59`
  // 获取基础数据
  getBaseInfo(searchQueryResult.value).then(res => {
    baseInfo.value.forEach(item => {
      item.data = res.data[item.value]
    })
  })
  // 未检定数量分析
  getNoVerificationAmount(searchQueryResult.value).then(res => {
    // console.log(res.data, '未检定数量分析')
    const current = showChart.value.filter(
      item => item.name === '未检定设备数量分析'
    )[0]
    current.data = []
    for (const i in res.data) {
      current.data.push({
        dept: i,
        count: res.data[i]
      })
    }
  })
  // 受检设备来源分析
  getDeviceSource(searchQueryResult.value).then(res => {
    console.log(res.data, '受检设备来源分析')
    const current = showChart.value.filter(
      item => item.name === '受检设备来源分析'
    )[0]
    const data = []
    for (const i in res.data) {
      const obj = {
        name: '',
        id: '',
        value: ''
      }
      obj.name = i
      for (const j in res.data[i]) {
        obj.id = j
        obj.value = res.data[i][j]
      }
      data.push(obj)
    }
    current.data = data
    console.log(data, '受检设备来源分析')
  })
  // 受检设备各种类数量分析
  fetchQueryForTypeSoure()
  // 受检设备已检数量趋势
  fetchQueryForMeasured()
  // 受检设备应检数量趋势
  fetchQueryForShouldMeasured()
  // 受检设备性能趋势
  getDevicePerformance({
    ...searchQueryResult.value,
    offset: 1,
    limit: 9999
  }).then(res => {
    console.log(res.data, '受检设备性能趋势')
    const current = showChart.value.filter(item => item.name === '受检设备性能趋势')[0]
    current.data = res.data.rows.map((item: any, index: number) => ({
      ...item,
      index: index + 1
    }))
  })
  //
  // loading.value = true
  // setTimeout(() => {
  //   // 任务单来源分析
  //   const name1 = ['西昌发射站/一连', '西昌发射站/二连', '文昌发射站/一连', '文昌发射站/二连', '文昌地面站/一连', '西昌地面站/一连']
  //   showChart.value.filter((item: any) => item.name === '任务单来源分析')[0].data = name1.map((item: string) => ({
  //     name: item,
  //     value: String(Math.floor(Math.random() * 100) + 1),
  //   }))
  //   // 受检设备种类分析
  //   const name2 = ['一般压力表', '精密压力表', '数字多用表', '频谱分析仪', '三线表', '铷钟', '数字计数器']
  //   showChart.value.filter((item: any) => item.name === '受检设备种类分析')[0].data = name2.map((item: string) => ({
  //     name: item,
  //     value: String(Math.floor(Math.random() * 100) + 1),
  //   }))
  //   // 受检设备数量趋势
  //   showChart.value.filter((item: any) => item.name === '受检设备数量趋势')[0].data = name2.slice(0, 4).map((item: string) => ({
  //     name: item,
  //     // symbol: 'emptyCircle',
  //     symbol: 'circle',
  //     data: timeDate.value.map(item => Math.floor(Math.random() * 100) + 1),
  //   }))
  //   showChart.value.filter((item: any) => item.name === '受检设备数量趋势')[0].xAxisData = timeDate.value
  //   // 受检设备性能趋势
  //   const name3 = ['禁用', '故障维修', '报废']
  //   showChart.value.filter((item: any) => item.name === '受检设备性能趋势')[0].data = name3.map((item: string) => ({
  //     name: item,
  //     symbol: 'emptyCircle',
  //     data: timeDate.value.map(item => Math.floor(Math.random() * 100) + 1),
  //   }))
  //   showChart.value.filter((item: any) => item.name === '受检设备性能趋势')[0].xAxisData = timeDate.value
  //   // 受检设备来源排行榜
  //   showChart.value.filter((item: any) => item.name === '受检设备来源排行榜')[0].data = name1.map(() => (Math.floor(Math.random() * 100) + 1)).sort((a: any, b: any) => b - a)
  //   showChart.value.filter((item: any) => item.name === '受检设备来源排行榜')[0].xAxisData = name1
  //   loading.value = false
  // }, 3000)
}
defineExpose({
  showChart
})

// 拖拽结束
const onEnd = () => {
  console.log('拖拽结束')
  const resize = new Event('resize')
  window.dispatchEvent(resize)
}
onMounted(() => {
  // year.value = String(currentYear)
  if (props.lab) {
    searchQueryResult.value.labCode = props.lab
    // setTimeout(() => {
    //   fetchData()
    // }, 10)
  }
})
// 获取字典
const fetchDict = () => {
  // 组别
  getDictByCode('bizGroupCode').then(response => {
    const tempMenu = ['电学电源组', '热工力学组', '无线电脉冲组', '综合管理组']
    tempMenu.forEach(item => {
      const tempFindData = response.data.find(
        (e: { name: string; value: string }) => e.name === item
      )
      if (tempFindData) {
        groupCodeList.value.push({
          name: tempFindData.name,
          id: `${tempFindData.id}`,
          value: `${tempFindData.value}`
        })
      }
    })
  })
  // 检定去向
  getDictByCode('eqptCheckDirection').then(res => {
    checkDestinationList.value = res.data
  })
  // 获取委托方列表
  getCustomerInfoList({
    limit: 9999,
    offset: 1,
    approvalStatus: '0',
    formId: 'zyglwtfml'
  }).then(res => {
    customerList.value = res.data.rows.map((item: any) => ({
      name: item.customerName,
      id: item.id,
      value: item.id
    }))
  })
}
fetchDict()
// 受检设备种类数量分析-列表导出
const exportType = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  exportDeviceType({
    ...searchQueryResult.value,
    ...searchQueryForTypeSoure.value
  }).then(res => {
    const blob = new Blob([res.data])
    exportFile(blob, '受检设备种类数量分析.xlsx')
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// 备份数据 -- 受检设备来源分析
const deviceSourceData = ref({})
// 备份数据 -- 受检设备各种类数量分析
const deviceTypeData = ref({})
// 点击饼图
const clickPie = (params: any, ele: any) => {
  console.log(params, ele, '点击饼图')
  const current = showChart.value.filter((item: any) => item.name === ele.name)[0]
  if (ele.name === '受检设备来源分析') {
    deviceSourceData.value = JSON.parse(JSON.stringify(current))
    current.data = []
    getDeviceSourceDept({ ...searchQueryResult.value, customerId: params.data.id }).then(res => {
      current.data = res.data.rows.map((item: any) => ({ ...item, companyName: params.data.name}))
    })
  }
  else if (ele.name === '受检设备各种类数量分析') {
    deviceTypeData.value = JSON.parse(JSON.stringify(current))
    current.data = []
    getDeviceTypeList({
      ...searchQueryResult.value,
      ...searchQueryForTypeSoure.value,
      sampleName: params.data.name
    }).then(res => {
      // console.log(res.data, '123')
      current.data = res.data.rows
    })
  }
  current.type = 'rank-table'
  current.columns = [
    {
      text: '单位名称',
      value: 'companyName',
      align: 'center',
    },
    {
      text: '设备名称',
      value: 'equipmentName',
      align: 'center',
    },
    {
      text: '规格型号',
      value: 'model',
      align: 'center',
    },
    {
      text: '辅助字段',
      value: 'helpInstruction',
      align: 'center',
    },
    {
      text: '负责人',
      value: 'directorName',
      align: 'center',
    },
  ]
}
// 切换表格
const changeTable = (name: string) => {
  if (name !== '受检设备来源分析' && name !== '受检设备各种类数量分析') {
    return
  }
  // if (name === '受检设备来源分析') {
  let current = showChart.value.findIndex((item: any) => item.name === name)
  showChart.value[current] = name === '受检设备来源分析' ? deviceSourceData.value : deviceTypeData.value
  // }
}
</script>

<template>
  <div class="container">
    <!-- 查询条件 -->
    <div class="btns">
      <div />
      <div style="position: relative">
        <el-radio-group v-model="current">
          <el-radio-button v-for="item in menu" :key="item" :label="item">
            {{ item }}
          </el-radio-button>
        </el-radio-group>
        <!-- 自定义时间选择  --移花接木 -->
        <div style="width: 101px; position: absolute; top: 0; right: 0; opacity: 0">
          <el-date-picker style="width: 101px" ref="dateRef" v-model="selectCurrentTime" type="daterange"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD"  @focus="handlerFocus" @blur="handlerBlur" />
        </div>
      </div>
    </div>
    <!-- 展示内容 -->
    <div class="content-count">
      <!-- 统计数据 -->
      <div class="count">
        <div class="count-item" v-for="item in baseInfo" :key="item.value">
          <div class="header-icon" style="width: 55px">
            <img :src="item.icon" width="55px" height="50px" />
          </div>
          <div class="header-content">
            <div class="content-title">
              {{ item.name }}
            </div>
            <div class="content-count" :style="{ color: item.color }">
              {{ item.data }}
            </div>
          </div>
        </div>
      </div>
      <!-- 图表区域 -->
      <!-- <div class="chart"> -->
      <draggable v-model="showChart" item-key="name" class="chart" animation="300" drag-class="dragClass"
        ghost-class="ghostClass" chosen-class="chosenClass" @end="onEnd">
        <template #item="{ element, index }">
          <div :style="{
            width: `${'31.5%'}`
          }" class="chart-item">
            <div class="chart-name">
              <!-- {{ element.name }} -->
            </div>
            <div v-loading="loading" class="chart-page">
              <div style="width: 100%; height: 100%">
                <div class="chart-name"
                  :class="element.name === '受检设备各种类数量分析' || element.name === '受检设备来源分析' ? 'point' : ''" style="
                    width: 100%;
                    height: 10%;
                    display: flex;
                    margin-top: 25px;" @click="changeTable(element.name)">
                  {{ element.name }}
                  <div v-if="element.name === '受检设备各种类数量分析'" style="margin-left: 40px">
                    <!-- 部门 -->
                    <el-select v-model="searchQueryForTypeSoure.groupCode" style="width: 130px" class="short-input"
                      placeholder="组别" clearable @change="changeSearchQueryForTypeSoure">
                      <el-option v-for="item in groupCodeList" :key="item.id" :label="item.name" :value="item.value" />
                    </el-select>
                    <!-- 委托方 -->
                    <el-select v-model="searchQueryForTypeSoure.customerId" filterable style="width: 130px"
                      class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForTypeSoure">
                      <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
                    </el-select>
                    <!-- 导出 -->
                    <el-button type="primary" @click="exportType">导出</el-button>
                  </div>
                  <div v-if="element.name === '受检设备已检数量趋势'" style="margin-left: 40px;position: relative;">
                    <!-- 委托方 -->
                    <el-select v-model="searchQueryForMeasured.customerId" filterable style="width: 130px"
                      class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForMeasured">
                      <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
                    </el-select>
                    <!-- 自定义时间 -->
                    <el-button>自定义时间</el-button>
                    <div style="width: 102px; position: absolute; top: 0; right: 130px; opacity: 0"
                      @contextmenu="contextmenu(element.name)">
                      <el-date-picker style="width: 101px" v-model="selectForMeasured" type="daterange"
                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </div>
                    <!-- 检定去向 -->
                    <el-select v-model="searchQueryForMeasured.checkDestination" filterable style="width: 130px"
                      class="short-input" placeholder="检定去向" clearable @change="changeSearchQueryForMeasured">
                      <el-option v-for="item in checkDestinationList" :key="item.id" :label="item.name"
                        :value="item.value" />
                    </el-select>
                  </div>
                  <div v-if="element.name === '受检设备应检数量趋势'" style="margin-left: 40px;position: relative;">
                    <!-- 委托方 -->
                    <el-select v-model="searchQueryForShouldMeasured.customerId" filterable style="width: 130px"
                      class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForShouldMeasured">
                      <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
                    </el-select>
                    <!-- 自定义时间 -->
                    <el-button>自定义时间</el-button>
                    <div style="width: 102px; position: absolute; top: 0; right: 130px; opacity: 0"
                      @contextmenu="contextmenu(element.name)">
                      <el-date-picker style="width: 101px" v-model="selectForShouldMeasured" type="daterange"
                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </div>
                    <!-- 检定去向 -->
                    <el-select v-model="searchQueryForShouldMeasured.checkDestination" filterable style="width: 130px"
                      class="short-input" placeholder="检定去向" clearable @change="changeSearchQueryForShouldMeasured">
                      <el-option v-for="item in checkDestinationList" :key="item.id" :label="item.name"
                        :value="item.value" />
                    </el-select>
                  </div>
                </div>
                <div style="width: 100%; height: 80%">
                  <pie-chart v-if="element.type === 'pie'" :title="element.title" :show-total="element.showTotal"
                    :data="element.data" :colors="colors" :center="element.center" label-formatter="{style1|{c}}"
                    :label-position="element.labelPosition" :radius="element.radius" :grid="{
                      top: 50,
                      left: 15,
                      right: 15,
                      bottom: 10,
                      containLabel: true
                    }" :legend="{
                      itemWidth: 8,
                      itemHeight: 8,
                      type: 'scroll',
                      orient: 'horizontal',
                      icon: 'roundRect',
                      left: '0',
                      top: '10'
                    }" @clickPie="(params: any) => {
                      clickPie(params, element)
                    }" />
                  <line-chart v-if="element.type === 'line'" :colors="colors" :gradient="element.gradient"
                    :x-axis-data="element.xAxisData" :data="element.data" :smooth="element.smooth" :grid="{
                      top: 47,
                      left: 5,
                      right: 5,
                      bottom: 10,
                      containLabel: true
                    }" :legend="{
                      itemWidth: 8,
                      itemHeight: 2,
                      type: 'scroll',
                      orient: 'horizontal',
                      icon: 'roundRect',
                      left: '0',
                      top: '5'
                    }" />
                  <bar-chart-double v-if="element.type === 'bar-double'" :legend-data="element.legendData"
                    :data1="element.data1" :data2="element.data2" :x-axis-data="element.xAxisData" :legend="{
                      itemWidth: 8,
                      itemHeight: 8,
                      type: 'scroll',
                      orient: 'horizontal',
                      icon: 'roundRect',
                      left: '0',
                      top: '10'
                    }" />
                  <bar-chart-vertical v-if="element.type === 'bar-vertical'" :bar-coner="0" :data="element.data"
                    :x-axis-data="element.xAxisData" :legend="{
                      itemWidth: 8,
                      itemHeight: 8,
                      type: 'scroll',
                      orient: 'horizontal',
                      icon: 'roundRect',
                      left: '0',
                      top: '10'
                    }" />
                  <bar-chart-horizontal v-if="element.type === 'bar-horizontal'" bar-width="10" :bar-coner="0"
                    :data="element.data" :x-axis-data="element.xAxisData" :legend="{
                      itemWidth: 8,
                      itemHeight: 8,
                      type: 'scroll',
                      orient: 'horizontal',
                      icon: 'roundRect',
                      left: '0',
                      top: '10'
                    }" />
                  <scroll-table v-if="element.type === 'rank-table'" style="width: 100%" :height="300"
                    :data="element.data" :columns="element.columns" />
                </div>
              </div>
            </div>
          </div>
        </template>
      </draggable>
      <!-- </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.point {
  &:hover {
    cursor: pointer;
  }
}

.dragClass {
  /* background-color: blueviolet !important; */
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  color: #6ff !important;
}

.ghostClass {
  /* background-color: blue !important; */
}

.chosenClass {
  color: #6ff !important;

  /* background-color: #ccc !important; */

  /* opacity: 1 !important; */

  /* width: 32.5% !important; */
}

.icon-button-icon {
  width: 50px;
  height: 50px;
}

.container {
  position: relative;
  // height: 500px;

  .btns {
    width: 100%;
    position: absolute;
    top: -36px;
    right: 50%;
    // left: 50%;
    display: flex;
    justify-content: space-between;
    padding: 0 120px;
  }

  .count {
    display: flex;
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: -40px;
    left: 44%;
    transform: translateX(-50%);

    .count-item {
      margin-left: 20px;
      // width: 30%;
      height: 75px;
      display: flex;
      padding: 0 10px;

      .header-icon {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .header-content {
        // width: 60%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .content-title {
          font-weight: 700;
        }

        .content-count {
          font-weight: 700;
          font-size: 24px;
          color: #1aaf8b;
          text-align: center;
        }
      }
    }
  }

  .chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    // margin-top: 15px;
    padding-top: 10px;

    .chart-item {
      width: 33%;
      height: 348px;
      // border: 1px solid red;
      margin-top: 10px;

      .chart-name {
        color: #3d6fb6;
        font-size: 18px;
        font-weight: 700;
      }

      .chart-page {
        height: 330px;
      }
    }
  }
}
</style>