k_online_ui/src/views/Dashboard/src/DashboardView.vue

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import QuickCalendarDate from '@/components/DateRange/src/components/QuickCalendarDate.vue'
import { VueDraggable } from 'vue-draggable-plus'
import PieChart from './components/PieChart.vue'
import SellerChart from './components/SellerChart.vue'
import BarChart from './components/BarChart.vue'
import RecentStatus from './components/RecentStatus.vue'
import ScoringSystem from './components/ScoringSystem.vue'
import TopMap from './components/TopMap.vue'
import DashFilters from './components/DashFiters.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeName = ref('first')
const SaveVisible = ref(false)
// 可拖拽模块的列表
interface ManagementItem {
  title: string
  switchValue: boolean
  text: string
  id: number
  title1: string
  title2: string
}
const Management = ref<ManagementItem[]>([])

const changeCancel = (id: any) => {
  Management.value[id - 1].switchValue = false
}

//RecentStatusList
const RecentStatusList = ref()
const pageInfo = ref({ pageNo: 1, pageSize: 10, total: 10000 })
const isShowtitle1 = ref(true)
// 点击tab
const handleTabClick = (tab: any) => {
  if (tab.props.name == 'first') {
    isShowtitle1.value = true
  } else {
    isShowtitle1.value = false
  }
}
const KPIDefaulteData = ref()
const PendingDefaulteData = ref()
const RecentDefaulteData = ref()
const ETDDefaulteData = ref()
const ContainerefaultData = ref()
const Top10DefaultData = ref()
const Co2OriginDefaultData = ref()
const Co2DestinationDefaultData = ref()
// 获取首页数据
let dashboardObj: any = {}
const GetDashboardData = () => {
  $api
    .getDashboardFilters({})
    .then((res: any) => {
      if (res.code == 200) {
        //给默认筛选条件赋值
        KPIDefaulteData.value = res.data.KPIDefaulteData
        dashboardObj.KPIDefaulteData = res.data.KPIDefaulteData
        PendingDefaulteData.value = res.data.PendingDefaultData
        dashboardObj.PendingDefaultData = res.data.PendingDefaultData
        RecentDefaulteData.value = res.data.RecentDefaultData
        dashboardObj.RecentDefaultData = res.data.RecentDefaultData
        ETDDefaulteData.value = res.data.ETDDefaultData
        dashboardObj.ETDDefaultData = res.data.ETDDefaultData
        ContainerefaultData.value = res.data.ContainerefaultData
        dashboardObj.ContainerefaultData = res.data.ContainerefaultData
        Top10DefaultData.value = res.data.Top10faultData
        dashboardObj.Top10faultData = res.data.Top10faultData
        Co2OriginDefaultData.value = res.data.OriginCo2Top10faultData
        dashboardObj.OriginCo2Top10faultData = res.data.OriginCo2Top10faultData
        Co2DestinationDefaultData.value = res.data.DestinationCo2Top10faultData
        dashboardObj.DestinationCo2Top10faultData = res.data.DestinationCo2Top10faultData
      }
    })
    .finally(() => {
      nextTick(() => {
        GetKpiData(KPIDefaulteData.value)
        GetPendingEcharts(PendingDefaulteData.value)
        getTableData(false, RecentDefaulteData.value)
        GetETDEcharts(ETDDefaulteData.value)
        GetContainerCountEcharts(ContainerefaultData.value)
        GetTop10ODEcharts(Top10DefaultData.value)
        GetCo2EmissionEcharts(Co2OriginDefaultData.value)
        GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
      })
    })
}
// 获取表单数据
const getTableData = (isPage: any, val: any) => {
  dashboardObj.RecentDefaultData = val
  const rc = isPage ? pageInfo.value.total : -1
  $api
    .GetDashboardData({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc,
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        pageInfo.value.total = Number(res.data.rc)
        Management.value = res.data.Management
        RecentStatusList.value = res.data.searchData
      }
    })
}
const KPIobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: [],
  download_name: ''
})
const Arrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: [],
  download_name: ''
})
const KPILoading = ref(true)
const KPIArrivalLoading = ref(true)
//查询KPI
const GetKpiData = (val: any) => {
  dashboardObj.KPIDefaulteData = val
  // 获取KPI Departure图表数据
  $api
    .GetKPIEcharts({
      r_type: 'atd_r4',
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        KPIobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
        KPIobj.ETDList = res.data.ETDList
        KPIobj.ETD_Radius = res.data.ETD_Radius
        KPIobj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      KPILoading.value = false
    })
  // 获取KPI Arrival图表数据
  $api
    .GetKPIEcharts({
      r_type: 'ata_r3',
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        Arrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
        Arrivalobj.ETDList = res.data.ETDList
        Arrivalobj.ETD_Radius = res.data.ETD_Radius
        Arrivalobj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      KPIArrivalLoading.value = false
    })
}
const Pendingobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: [],
  download_name: ''
})
const PendingArrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: [],
  download_name: ''
})
const PendingLoading = ref(true)
const PendingArrivalLoading = ref(true)
// 查询Pending
const GetPendingEcharts = (val: any) => {
  dashboardObj.PendingDefaultData = val
  // 获取Pending Departure图表数据
  $api
    .GetPendingEcharts({
      r_type: 'r4',
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        Pendingobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
        Pendingobj.ETDList = res.data.ETDList
        Pendingobj.ETD_Radius = res.data.ETD_Radius
        Pendingobj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      PendingLoading.value = false
    })
  // 获取Pending Arrival图表数据
  $api
    .GetPendingEcharts({
      r_type: 'r3',
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        PendingArrivalobj.ETD_Title = `{a|${res.data.title1}}{b|${res.data.title2}}`
        PendingArrivalobj.ETDList = res.data.ETDList
        PendingArrivalobj.ETD_Radius = res.data.ETD_Radius
        PendingArrivalobj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      PendingArrivalLoading.value = false
    })
}
const ETDobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: [],
  download_name: ''
})
const ETDLoading = ref(true)
// 获取ETD/ETA 图表数据
const GetETDEcharts = (val: any) => {
  dashboardObj.ETDDefaultData = val
  $api
    .GetETDEcharts({
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        ETDobj.ETD_Title = `{a|${res.data.ETD_Title}}`
        ETDobj.ETDList = res.data.ETDList
        ETDobj.ETD_Radius = res.data.ETD_Radius
        ETDobj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      ETDLoading.value = false
    })
}
// 获取ContainerCount
const containerObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0,
  download_name: ''
})
const containerLoading = ref(true)
const GetContainerCountEcharts = (val: any) => {
  dashboardObj.ContainerefaultData = val
  $api
    .GetContainerCountEcharts({
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        containerObj.bar_title = res.data.ContainerCount_Title
        containerObj.barList = res.data.ContainerCountList
        containerObj.barSeries = res.data.ContainerCounSeries
        containerObj.Max = res.data.Max
        containerObj.interval = res.data.interval
        containerObj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      containerLoading.value = false
    })
}
const topdestinationinType = ref()
const toporiginType = ref()
//获取Top10 Origin/Destination
const Top10Obj = reactive({
  OriginData: [],
  DestinationData: []
})
const Top1OInterval = reactive({
  Max: 0,
  interval: 0
})
const Top1OInterval_dest = reactive({
  Max: 0,
  interval: 0
})
const TopOriginLoading = ref(true)
const GetTop10ODEcharts = (val: any) => {
  dashboardObj.Top10faultData = val
  $api
    .GetTop10ODEcharts({
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        Top10Obj.DestinationData = res.data.seller_data_list_destination
        Top10Obj.OriginData = res.data.seller_data_list_origin
        Top1OInterval.Max = res.data.Max
        Top1OInterval.interval = res.data.interval
        Top1OInterval_dest.Max = res.data.dest_Max
        Top1OInterval_dest.interval = res.data.dest_interval
        topdestinationinType.value = res.data.topdestinationinType
        toporiginType.value = res.data.toporiginType
      }
    })
    .finally(() => {
      TopOriginLoading.value = false
    })
}
//获取CO2 Origin
const EmissionLoading = ref(true)
const EmissionObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0,
  download_name: ''
})
const GetCo2EmissionEcharts = (val: any) => {
  dashboardObj.OriginCo2Top10faultData = val
  $api
    .GetCo2EmissionEcharts({
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        EmissionObj.bar_title = res.data.ContainerCount_Title
        EmissionObj.barList = res.data.ContainerCountList
        EmissionObj.barSeries = res.data.ContainerCounSeries
        EmissionObj.Max = res.data.Max
        EmissionObj.interval = res.data.interval
        EmissionObj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      EmissionLoading.value = false
    })
}
//获取CO2 Destination
const DestinationObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0,
  download_name: ''
})
const DestinationLoading = ref(true)
const GetCo2DestinationEcharts = (val: any) => {
  dashboardObj.DestinationCo2Top10faultData = val
  $api
    .GetCo2DestinationEcharts({
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        DestinationObj.bar_title = res.data.ContainerCount_Title
        DestinationObj.barList = res.data.ContainerCountList
        DestinationObj.barSeries = res.data.ContainerCounSeries
        DestinationObj.Max = res.data.Max
        DestinationObj.interval = res.data.interval
        DestinationObj.download_name = res.data.download_name
      }
    })
    .finally(() => {
      DestinationLoading.value = false
    })
}
onMounted(() => {
  GetDashboardData()
})

// Save Layout
const SaveLayout = () => {
  SaveVisible.value = false
  Management.value.forEach((item: any, index: any) => {
    item.id = index + 1
  })
  $api
    .SaveLayout({
      management: Management.value
    })
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage({
          message: res.data.msg,
          duration: 3000,
          type: 'success'
        })
      }
    })
}
//Save Filters
const SaveFilters = () => {
  SaveVisible.value = false
  Management.value.forEach((item: any, index: any) => {
    item.id = index + 1
  })
  $api
    .SaveLayout({
      management: Management.value,
      dashboardObj
    })
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage({
          message: res.data.msg,
          duration: 3000,
          type: 'success'
        })
      }
    })
}
//ETD to ETA(DAYS)点击跳转
const pie_chart_ETD = ref()
const pie_chart_pending_arrival = ref()
const pie_chart_pending_departure = ref()
const pie_chart_kpi_departure = ref()
const pie_chart_kpi_arrival = ref()
const seller_chart_top10_origin = ref()
const seller_chart_top10_destination = ref()
const seller_chart_CO2_origin = ref()
const seller_chart_CO2_destination = ref()
const startyear = ref()
const startmonth = ref()
const startday = ref()
const endyear = ref()
const endmonth = ref()
const endday = ref()
//处理跳转数据
const handleTurnData = (startdate: any, enddata: any, name: any) => {
  if (name == 'Container') {
    if (startdate != '') {
      startmonth.value = startdate.split('/')[0]
      startyear.value = startdate.split('/')[1]
    }
    if (enddata != '') {
      endmonth.value = enddata.split('/')[0]
      endyear.value = enddata.split('/')[1]
    }
  } else {
    if (startdate != '') {
      startmonth.value = startdate.split('/')[0]
      startyear.value = startdate.split('/')[2]
      startday.value = startdate.split('/')[1]
    }
    if (enddata != '') {
      endmonth.value = enddata.split('/')[0]
      endyear.value = enddata.split('/')[2]
      endday.value = enddata.split('/')[1]
    }
  }
}
const ClickParams = (val: any) => {
  const currentDate = new Date()
  let tenyear = currentDate.getFullYear()
  let tenmonth = currentDate.getMonth() - 11
  if (tenmonth < 0) {
    tenyear -= 1
    tenmonth += 11
  }
  const reportList: any = {}
  const handlereportlist = (transportation: any, type: any, name: any) => {
    if (transportation.includes('All')) {
      reportList.transport_mode = 'All'
    } else {
      reportList.transport_mode = dashboardObj.ETDDefaultData.transportation
    }
    if (name == 'Container') {
      if (type == 'ETA') {
        if (startyear.value) {
          reportList.eta_start = startyear.value + '-' + startmonth.value + '-01'
          reportList.eta_end =
            endyear.value +
            '-' +
            endmonth.value +
            '-' +
            new Date(endyear.value, endmonth.value, 0).getDate()
        }
      } else {
        if (startyear.value) {
          reportList.etd_start = startyear.value + '-' + startmonth.value + '-01'
          reportList.etd_end =
            endyear.value +
            '-' +
            endmonth.value +
            '-' +
            new Date(endyear.value, endmonth.value, 0).getDate()
        }
      }
    } else {
      if (type == 'ETA') {
        if (startyear.value) {
          reportList.eta_start = startyear.value + '-' + startmonth.value + startday.value
          reportList.eta_end = endyear.value + '-' + endmonth.value + '-' + endday.value
        }
      } else {
        if (startyear.value) {
          reportList.etd_start = startyear.value + '-' + startmonth.value + startday.value
          reportList.etd_end = endyear.value + '-' + endmonth.value + '-' + endday.value
        }
      }
    }
  }
  // ETD to ETA(DAYS)点击跳转
  if (val == 'ETD to ETA (Days)') {
    handleTurnData(
      dashboardObj.ETDDefaultData.date_start,
      dashboardObj.ETDDefaultData.date_end,
      'Container'
    )
    $api
      .ClickEtdToEta({
        _reportRef: pie_chart_ETD.value[0].paramsdata.name,
        _reportRefe_date: currentDate.getMonth() + 1 + '/' + currentDate.getFullYear(),
        _reportRefb_date: tenmonth + '/' + tenyear,
        ...dashboardObj.ETDDefaultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_ETD.value[0].paramsdata.name
          reportList._reportRefe_date = currentDate.getMonth() + 1 + '/' + currentDate.getFullYear()
          reportList._reportType = 'r1'
          reportList._reportRefb_date = tenmonth + '/' + tenyear
          handlereportlist(
            dashboardObj.ETDDefaultData.transportation,
            dashboardObj.ETDDefaultData.date_type,
            'Container'
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'ETD to ETA (Days)'
          obj.name = pie_chart_ETD.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  //  PendingArrival点击跳转
  else if (val == 'Pending1') {
    handleTurnData(
      dashboardObj.PendingDefaultData.date_start,
      dashboardObj.PendingDefaultData.date_end,
      ''
    )
    $api
      .ClickPendingArrival({
        _reportRef: pie_chart_pending_arrival.value[0].paramsdata.name,
        ...dashboardObj.PendingDefaultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
          reportList._reportType = 'r3'
          handlereportlist(
            dashboardObj.PendingDefaultData.transportation,
            dashboardObj.PendingDefaultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'Pending Arrival'
          obj.name = pie_chart_pending_arrival.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // PendingDeparture点击跳转
  else if (val == 'Pending0') {
    handleTurnData(
      dashboardObj.PendingDefaultData.date_start,
      dashboardObj.PendingDefaultData.date_end,
      ''
    )
    $api
      .ClickPendingDeparture({
        _reportRef: pie_chart_pending_departure.value[0].paramsdata.name,
        ...dashboardObj.PendingDefaultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportType = 'r4'
          reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
          handlereportlist(
            dashboardObj.PendingDefaultData.transportation,
            dashboardObj.PendingDefaultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'Pending Departure'
          obj.name = pie_chart_pending_departure.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // KPIDeparture点击跳转
  else if (val == 'KPI0') {
    handleTurnData(
      dashboardObj.KPIDefaulteData.date_start,
      dashboardObj.KPIDefaulteData.date_end,
      ''
    )
    $api
      .ClickKPIDeparture({
        _reportRef: pie_chart_kpi_departure.value[0].paramsdata.name,
        ...dashboardObj.KPIDefaulteData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_kpi_departure.value[0].paramsdata.name
          reportList._reportType = 'atd_r4'
          handlereportlist(
            dashboardObj.KPIDefaulteData.transportation,
            dashboardObj.KPIDefaulteData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'KPI Departure'
          obj.name = pie_chart_kpi_departure.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // KPIArrival点击跳转
  else if (val == 'KPI1') {
    handleTurnData(
      dashboardObj.KPIDefaulteData.date_start,
      dashboardObj.KPIDefaulteData.date_end,
      ''
    )
    $api
      .ClickKPIArrival({
        _reportRef: pie_chart_kpi_arrival.value[0].paramsdata.name,
        ...dashboardObj.KPIDefaulteData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_kpi_arrival.value[0].paramsdata.name
          reportList._reportType = 'ata_r3'
          handlereportlist(
            dashboardObj.KPIDefaulteData.transportation,
            dashboardObj.KPIDefaulteData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'KPI Arrival'
          obj.name = pie_chart_kpi_arrival.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // Top10 origin点击跳转
  else if (val == 'Top 10 Origin') {
    handleTurnData(dashboardObj.Top10faultData.date_start, dashboardObj.Top10faultData.date_end, '')
    $api
      .ClickTop10({
        _reportRef: seller_chart_top10_origin.value[0].paramsdata,
        _reportStationType: toporiginType.value,
        _city_name: seller_chart_top10_origin.value[0].paramscityname,
        ...dashboardObj.Top10faultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = seller_chart_top10_origin.value[0].paramsdata
          reportList._reportType = 'top'
          reportList._reportStationType = toporiginType.value
          reportList._city_name = seller_chart_top10_origin.value[0].paramscityname
          handlereportlist(
            dashboardObj.Top10faultData.transportation,
            dashboardObj.Top10faultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'Top 10 Origin'
          obj.name = seller_chart_top10_origin.value[0].paramsdata
          obj.data = seller_chart_top10_origin.value[0].paramscityname
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // Top10 destination点击跳转
  else if (val == 'Top 10 Destination') {
    handleTurnData(dashboardObj.Top10faultData.date_start, dashboardObj.Top10faultData.date_end, '')
    $api
      .ClickTop10({
        _reportRef: seller_chart_top10_destination.value[0].paramsdata,
        _reportStationType: topdestinationinType.value,
        _city_name: seller_chart_top10_destination.value[0].paramscityname,
        ...dashboardObj.Top10faultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = seller_chart_top10_destination.value[0].paramsdata
          reportList._reportStationType = topdestinationinType.value
          reportList._reportType = 'top'
          reportList._city_name = seller_chart_top10_destination.value[0].paramscityname
          handlereportlist(
            dashboardObj.Top10faultData.transportation,
            dashboardObj.Top10faultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'Top 10 Destination'
          obj.name = seller_chart_top10_destination.value[0].paramsdata
          obj.data = seller_chart_top10_destination.value[0].paramscityname
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // CO2e Emission by Origin (Top 10)点击跳转
  else if (val == 'CO2e Emission by Origin (Top 10)') {
    handleTurnData(
      dashboardObj.OriginCo2Top10faultData.date_start,
      dashboardObj.OriginCo2Top10faultData.date_end,
      ''
    )
    $api
      .ClickCO2({
        _reportRef: seller_chart_CO2_origin.value[0].paramsdata.name,
        _reportDataType: seller_chart_CO2_origin.value[0].paramsdata.type,
        _reportStationType: 'origin',
        ...dashboardObj.OriginCo2Top10faultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = seller_chart_CO2_origin.value[0].paramsdata.name
          reportList._reportDataType = seller_chart_CO2_origin.value[0].paramsdata.type
          reportList._reportStationType = 'origin'
          reportList._reportType = 'co2e'
          handlereportlist(
            dashboardObj.OriginCo2Top10faultData.transportation,
            dashboardObj.OriginCo2Top10faultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'CO2e Emission by Origin (Top 10)'
          obj.name = seller_chart_CO2_origin.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
  // CO2e Emission by Origin (Top 10)点击跳转
  else if (val == 'CO2e Emission by Destination (Top 10)') {
    handleTurnData(
      dashboardObj.DestinationCo2Top10faultData.date_start,
      dashboardObj.DestinationCo2Top10faultData.date_end,
      ''
    )
    $api
      .ClickCO2({
        _reportRef: seller_chart_CO2_destination.value[0].paramsdata.name,
        _reportDataType: seller_chart_CO2_destination.value[0].paramsdata.type,
        _reportStationType: 'agent',
        ...dashboardObj.DestinationCo2Top10faultData
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = seller_chart_CO2_destination.value[0].paramsdata.name
          reportList._reportDataType = seller_chart_CO2_destination.value[0].paramsdata.type
          reportList._reportType = 'co2e'
          reportList._reportStationType = 'agent'
          handlereportlist(
            dashboardObj.DestinationCo2Top10faultData.transportation,
            dashboardObj.DestinationCo2Top10faultData.date_type,
            ''
          )
          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
          sessionStorage.setItem('reportList', JSON.stringify(reportList))
          let obj: any = {}
          obj.title = 'CO2e Emission by Destination (Top 10)'
          obj.name = seller_chart_CO2_destination.value[0].paramsdata.name
          sessionStorage.setItem('tagsList', JSON.stringify(obj))
          router.push({
            path: '/tracking'
          })
        }
      })
  }
}
</script>
<template>
  <div class="dashboard">
    <!-- 评分 -->
    <ScoringSystem></ScoringSystem>
    <!-- Title -->
    <div class="Title">
      <div>Dashboard</div>
      <div>
        <el-popover trigger="click" width="400">
          <template #reference>
            <el-button class="el-button--default">
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_view__management_b"></use>
                </svg>
              </span>
              View Management
            </el-button>
          </template>
          <div class="Management">
            <div class="title">View Management</div>
            <div class="management_content" v-for="(item, index) in Management" :key="index">
              <div class="management_flex">
                <div class="content_title">{{ item.title }}</div>
                <div><el-switch v-model="item.switchValue" /></div>
              </div>
              <div class="content_text">{{ item.text }}</div>
            </div>
            <el-divider />
            <div class="tips">
              <span class="iconfont_icon">
                <svg class="iconfont iconfont_tips" aria-hidden="true">
                  <use xlink:href="#icon-icon_info_b"></use>
                </svg>
              </span>
              <div class="tips_text">
                Please remember to click the save button in order to keep the new dashboard layout
                and widgets.
              </div>
            </div>
          </div>
        </el-popover>
        <el-popover
          :visible="SaveVisible"
          :popper-style="{ display: 'flex', flexDirection: 'column', alignItems: 'center' }"
        >
          <template #reference>
            <el-button
              class="el-button--default"
              @blur="SaveVisible = false"
              @click="SaveVisible = !SaveVisible"
            >
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_save_b"></use>
                </svg>
              </span>
              Save
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_dropdown_b"></use>
                </svg>
              </span>
            </el-button>
          </template>
          <div class="Save_filters" @click="SaveFilters">
            <span class="iconfont_icon iconfont_icon_save">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_save_b"></use>
              </svg>
            </span>
            <div>Save Filters</div>
          </div>
          <div class="Save_filters" @click="SaveLayout">
            <span class="iconfont_icon iconfont_icon_save">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_save_b"></use>
              </svg>
            </span>
            <div>Save Layout</div>
          </div>
        </el-popover>
      </div>
    </div>
    <!-- 图表 -->
    <div class="echarts">
      <VueDraggable
        style="
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 8px;
          width: 100%;
        "
        ref="infoContentRef"
        ghost-class="ghost-class"
        :forceFallback="true"
        fallback-class="fallback-class"
        v-model="Management"
        handle=".handle-draggable"
      >
        <template v-for="item in Management" :key="item">
          <div v-if="item.title === 'KPI' && item.switchValue" class="filters_left">
            <!-- KPI -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="KPIDefaulteData"
                    @FilterSearch="GetKpiData"
                  ></DashFilters>
                  <!-- <el-tooltip
                    effect="dark"
                    :offset="6"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip> -->
                </div>
              </template>
              <template #content>
                <div class="KPI_Pending">
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart_kpi_departure"
                      @ClickParams="ClickParams(item.title + '0')"
                      :PieData="KPIobj"
                      v-vloading="KPILoading"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart_kpi_arrival"
                      :PieData="Arrivalobj"
                      v-vloading="KPIArrivalLoading"
                      @ClickParams="ClickParams(item.title + '1')"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <div v-else-if="item.title === 'Pending' && item.switchValue" class="filters_left">
            <!-- Pending -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="PendingDefaulteData"
                    :radioisDisabled="true"
                    @FilterSearch="GetKpiData"
                  ></DashFilters>
                </div>
              </template>
              <template #content>
                <div class="KPI_Pending">
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart_pending_departure"
                      :PieData="Pendingobj"
                      v-vloading="PendingLoading"
                      @ClickParams="ClickParams(item.title + '0')"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart_pending_arrival"
                      @ClickParams="ClickParams(item.title + '1')"
                      :PieData="PendingArrivalobj"
                      v-vloading="PendingArrivalLoading"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <div
            v-else-if="
              item.title === 'Recent Status' && item.switchValue && RecentStatusList.length != 0
            "
            class="KPI_Pending"
          >
            <!-- Recent Status -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="RecentDefaulteData"
                    @FilterSearch="getTableData"
                    :isRecent="true"
                  ></DashFilters>
                </div>
              </template>
              <template #content>
                <RecentStatus :RecentStatusList="RecentStatusList"></RecentStatus>
                <div class="pagination">
                  <span>Total {{ pageInfo.total }}</span>
                  <el-pagination
                    v-model:current-page="pageInfo.pageNo"
                    v-model:page-size="pageInfo.pageSize"
                    :page-sizes="[10, 50, 100, 200]"
                    layout="prev, pager, next"
                    :pager-count="3"
                    :total="pageInfo.total"
                    @size-change="getTableData(true, RecentDefaulteData)"
                    @current-change="getTableData(true, RecentDefaulteData)"
                  />
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- ETD to ETA -->
          <div
            v-else-if="item.title === 'ETD to ETA (Days)' && item.switchValue"
            class="filters_left"
          >
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="ETDDefaulteData"
                    @FilterSearch="GetETDEcharts"
                    :isETDToETA="true"
                    :isContainer="true"
                  ></DashFilters>
                </div>
              </template>
              <template #content>
                <PieChart
                  ref="pie_chart_ETD"
                  @ClickParams="ClickParams(item.title)"
                  :PieData="ETDobj"
                  v-vloading="ETDLoading"
                  style="height: 300px"
                ></PieChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- Container Count -->
          <div
            v-else-if="item.title === 'Container Count' && item.switchValue"
            class="filters_left"
          >
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex" style="justify-content: space-between">
                  <div class="Title_flex">
                    {{ item.title }}
                    <DashFilters
                      :defaultData="ContainerefaultData"
                      @FilterSearch="GetContainerCountEcharts"
                      :isContainer="true"
                    ></DashFilters>
                  </div>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart_Container_count"
                  :BarData="containerObj"
                  v-vloading="containerLoading"
                  style="height: 300px"
                  :barHeight="{ height: '300px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- Top10 Origin/Top 10 Destination -->
          <div
            v-else-if="item.title === 'Top 10 Origin/Destination' && item.switchValue"
            class="KPI_Pending"
          >
            <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
              <template #header>
                <div class="Title_flex" style="height: 48px">
                  <el-tabs
                    v-model="activeName"
                    class="demo-tabs"
                    style="height: 48px"
                    @tab-click="handleTabClick"
                  >
                    <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
                    <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
                  </el-tabs>
                  <DashFilters
                    :defaultData="Top10DefaultData"
                    @FilterSearch="GetTop10ODEcharts"
                  ></DashFilters>
                </div>
              </template>
              <template v-if="isShowtitle1" #content>
                <div class="KPI_Pending">
                  <div class="seller_chart">
                    <SellerChart
                      ref="seller_chart_top10_origin"
                      @clickParams="ClickParams(item.title1)"
                      :SellerData="Top10Obj.OriginData"
                      v-vloading="TopOriginLoading"
                      :Interval="Top1OInterval"
                    ></SellerChart>
                  </div>
                  <div class="map">
                    <TopMap :obj="dashboardObj.Top10faultData"></TopMap>
                  </div>
                </div>
              </template>
              <template v-else #content2>
                <div class="KPI_Pending">
                  <div class="seller_chart">
                    <SellerChart
                      ref="seller_chart_top10_destination"
                      @clickParams="ClickParams(item.title2)"
                      :SellerData="Top10Obj.DestinationData"
                      :Interval="Top1OInterval_dest"
                      v-vloading="TopOriginLoading"
                      style="height: 272px"
                    ></SellerChart>
                  </div>
                  <div class="map" style="height: 272px">
                    <TopMap :obj="dashboardObj.Top10faultData"></TopMap>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- CO2e Emission by Origin (Top 10) -->
          <div
            v-else-if="item.title === 'CO2e Emission by Origin (Top 10)' && item.switchValue"
            class="filters_left"
          >
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="Co2OriginDefaultData"
                    @FilterSearch="GetCo2EmissionEcharts"
                  ></DashFilters>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart_CO2_origin"
                  :BarData="EmissionObj"
                  @clickParams="ClickParams(item.title)"
                  v-vloading="EmissionLoading"
                  style="height: 250px"
                  :barHeight="{ height: '250px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
          <!-- CO2e Emission by Destination (Top 10) -->
          <div
            v-else-if="item.title === 'CO2e Emission by Destination (Top 10)' && item.switchValue"
            class="filters_left"
          >
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <DashFilters
                    :defaultData="Co2DestinationDefaultData"
                    @FilterSearch="GetCo2DestinationEcharts"
                  ></DashFilters>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart_CO2_destination"
                  :BarData="DestinationObj"
                  v-vloading="DestinationLoading"
                  style="height: 250px"
                  @clickParams="ClickParams(item.title)"
                  :barHeight="{ height: '250px' }"
                ></BarChart>
              </template>
            </VBox_Dashboard>
          </div>
        </template>
      </VueDraggable>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
}
.iconfont {
  vertical-align: -2px;
}
.Management {
  max-height: 800px;
  overflow-y: auto;
}
.title {
  font-weight: 700;
  font-size: var(--font-size-5);
  background-color: var(--color-header-bg);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.management_content {
  width: 368px;
  min-height: 54px;
  margin: 10px auto;
  background-color: var(--color-header-bg);
  border-radius: var(--border-radius-6);
  padding: 8px 16px;
}
.management_flex {
  display: flex;
  height: 20px;
  justify-content: space-between;
  align-items: center;
}
.content_title {
  font-weight: 700;
  font-size: var(--font-size-3);
}
.content_text {
  color: var(--color-neutral-2);
  font-size: var(--font-size-2);
  line-height: 16px;
}
.tips {
  display: flex;
  justify-content: center;
}
.tips_text {
  width: 278.43px;
  text-align: center;
  font-size: var(--font-size-2);
  color: var(--color-neutral-2);
}
.el-divider--horizontal {
  margin: 8px 0;
}
.Save_filters {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: var(--font-size-3);
  width: 126px;
  margin: 4px 0;
  cursor: pointer;
}
.iconfont_icon_save {
  margin-right: 16px;
}
.Save_filters:hover {
  border-color: var(--color-btn-default-bg-hover);
  background-color: var(--color-btn-default-bg-hover);
  fill: var(--color-theme);
  div {
    color: var(--color-theme);
  }
}
.filters {
  display: flex;
  padding: 0 24px;
  height: 32px;
  align-items: center;
  margin-bottom: 8px;
  justify-content: space-between;
}
.KPI_Pending {
  display: flex;
  width: 100%;
}
.filters_left {
  border-radius: var(--border-radius-6);
  flex: 1 48%;
}
.KPI_title {
  border-bottom: 1px solid var(--color-border);
  height: 48px;
  line-height: 48px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  padding-left: 16px;
  font-weight: 700;
  font-size: var(--font-size-5);
}
.tips_filter {
  margin-right: 8px;
  height: 32px;
}
.filters_right {
  width: 251px;
  height: 32px;
  margin-bottom: 8px;
}
:deep(.ETD_title) {
  margin-bottom: 0 !important;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
  height: 32px;
}
.echarts {
  padding: 0 22px;
}
.kpi {
  width: 50%;
  border-right: 1px solid var(--color-border);
}
.kpi:last-child {
  border-right: none;
}
.ghost-class {
  opacity: 0;
}
.fallback-class {
  opacity: 1 !important;
  background-color: #fff;
  cursor: move !important;
  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding: 4px 8px;
}
.container-type {
  font-size: 14px;
  font-weight: 400;
  margin-right: 4px;
}
.seller_chart {
  width: 30%;
  border-right: 1px solid var(--color-border);
}
.map {
  width: 70%;
}
.Title_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
}
.iconfont_icon_tip {
  margin-left: 8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
}
.dashboard {
  z-index: 2014;
  position: relative;
  background-color: white;
  padding-bottom: 40px;
}
:deep(.el-tabs__header) {
  height: 48px;
  margin-bottom: 0;
}
</style>