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 { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const router = useRouter()
const value = ref('All')
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 BookingSearch = ref()
const checkboxGroup1 = ref(['All'])
const changeCheckboxGroup2 = ref('ETD')
const shipper = ref(['All', 'Air', 'Sea', 'Road'])
const shipper_two = ref(['ETD', 'ETA'])
const changeCheckboxGroup1 = (val: any) => {
  if (val.length == 3) {
    checkboxGroup1.value = ['All']
  }
  if (val.length == 0) {
    checkboxGroup1.value = ['All']
  } else if (val.indexOf('All') != -1) {
    if (val.indexOf('All') == 1 && val.length == 2) {
      checkboxGroup1.value = ['All']
    } else {
      checkboxGroup1.value.splice(val.indexOf('All'), 1)
    }
  }
}

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 DashDate = ref([dayjs().startOf('month'), dayjs().endOf('month')])
// 获取首页数据
let dashboardObj: any = {
  date_start: DashDate.value[0].format('MM/DD/YYYY'),
  date_end: DashDate.value[1].format('MM/DD/YYYY'),
  date_type: changeCheckboxGroup2.value
}
const GetDashboardData = (value: any, is_default: any) => {
  $api
    .GetDashboardData({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc: -1,
      is_default: is_default,
      ...value
    })
    .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 getTableData = () => {
  let is_default: any = ''
  if (Object.keys(dashboardObj).length === 0) {
    is_default = 'yes'
  } else {
    is_default = 'no'
  }
  $api
    .GetDashboardData({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc: pageInfo.value.total,
      is_default: is_default,
      ...dashboardObj
    })
    .then((res: any) => {
      if (res.code === 200) {
        Management.value = res.data.Management
        RecentStatusList.value = res.data.searchData
      }
    })
}
const DateChange = (value: any) => {
  dashboardObj.date_start = value[0]
  dashboardObj.date_end = value[1]
  dashboardObj.date_type = changeCheckboxGroup2.value
  GetDashboardData(dashboardObj, 'no')
}
// 获取ETD/ETA 图表数据
const ETDobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetETDEcharts = () => {
  $api
    .GetETDEcharts({
      b_date: '',
      e_date: ''
    })
    .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
      }
    })
}
// 获取KPI Departure图表数据
const KPIobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetKPIEcharts = () => {
  $api
    .GetKPIEcharts({
      r_type: 'atd_r4'
    })
    .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
      }
    })
}
// 获取KPI Arrival图表数据
const Arrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetKPIArrivalEcharts = () => {
  $api
    .GetKPIEcharts({
      r_type: 'ata_r3'
    })
    .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
      }
    })
}
// 获取Pending Departure图表数据
const Pendingobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetPendingEcharts = () => {
  $api
    .GetPendingEcharts({
      r_type: 'r4'
    })
    .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
      }
    })
}
// 获取Pending Arrival图表数据
const PendingArrivalobj = reactive({
  ETD_Title: '',
  ETDList: [],
  ETD_Radius: []
})
const GetPendingArrivalEcharts = () => {
  $api
    .GetPendingEcharts({
      r_type: 'r3'
    })
    .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
      }
    })
}
// 获取ContainerCount
const containerObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0
})
const containerType = ref([])
const GetContainerCountEcharts = (val: any) => {
  containerType.value = []
  $api
    .GetContainerCountEcharts({
      b_date: '',
      e_date: '',
      ...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
        for (let i = 0; i < res.data.ContainerCounSeries.length; i++) {
          containerType.value.push(res.data.ContainerCounSeries[i].name)
        }
        containerType.value.push('All')
      }
    })
}
//获取CO2 Origin
const EmissionObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0
})
const GetCo2EmissionEcharts = () => {
  $api.GetCo2EmissionEcharts({}).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
    }
  })
}
//获取CO2 Destination
const DestinationObj = reactive({
  bar_title: '',
  barList: [],
  barSeries: [],
  Max: 0,
  interval: 0
})
const GetCo2DestinationEcharts = () => {
  $api.GetCo2DestinationEcharts({}).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
    }
  })
}
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 GetTop10ODEcharts = () => {
  $api.GetTop10ODEcharts({}).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
    }
  })
}
onMounted(() => {
  GetDashboardData(dashboardObj, 'yes')
  GetETDEcharts()
  GetKPIEcharts()
  GetKPIArrivalEcharts()
  GetContainerCountEcharts(container_type)
  GetCo2EmissionEcharts()
  GetCo2DestinationEcharts()
  GetTop10ODEcharts()
  GetPendingEcharts()
  GetPendingArrivalEcharts()
})
let container_type: any = {
  container_type: 'All'
}
const changeType = (val: any) => {
  container_type.container_type = val
  GetContainerCountEcharts(container_type)
  GetDashboardData(dashboardObj, 'no')
}

// 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'
        })
      }
    })
}
//输入框失焦时查询数据
const SearchCustomer = () => {
  dashboardObj.customer = BookingSearch.value
  GetDashboardData(dashboardObj, 'no')
}
//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 ClickParams = (val: any) => {
  const currentDate = new Date()
  let tenyear: any = 0
  if (currentDate.getMonth() - 11 < 0) {
    tenyear = currentDate.getFullYear() - 1
  } else {
    tenyear = currentDate.getFullYear()
  }
  const reportList: any = {}
  // ETD to ETA(DAYS)点击跳转
  if (val == 'ETD to ETA (Days)') {
    $api
      .ClickEtdToEta({
        _reportRef: pie_chart_ETD.value[0].paramsdata.name,
        _reportRefe_date: currentDate.getMonth() + 1 + '/' + currentDate.getFullYear(),
        _reportRefb_date: currentDate.getMonth() + 3 + '/' + tenyear
      })
      .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 = currentDate.getMonth() + 3 + '/' + tenyear
          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 == 'Pending Departure & Arrival1') {
    $api
      .ClickPendingArrival({
        _reportRef: pie_chart_pending_arrival.value[0].paramsdata.name
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
          reportList._reportType = 'r3'
          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 == 'Pending Departure & Arrival0') {
    $api
      .ClickPendingDeparture({
        _reportRef: pie_chart_pending_departure.value[0].paramsdata.name
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportType = 'r4'
          reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
          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') {
    $api
      .ClickKPIDeparture({
        _reportRef: pie_chart_kpi_departure.value[0].paramsdata.name
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_kpi_departure.value[0].paramsdata.name
          reportList._reportType = 'atd_r4'
          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') {
    $api
      .ClickKPIArrival({
        _reportRef: pie_chart_kpi_arrival.value[0].paramsdata.name
      })
      .then((res: any) => {
        if (res.code == 200) {
          reportList._reportRef = pie_chart_kpi_arrival.value[0].paramsdata.name
          reportList._reportType = 'ata_r3'
          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') {
    $api
      .ClickTop10({
        _reportRef: seller_chart_top10_origin.value[0].paramsdata,
        _reportStationType: toporiginType.value,
        _city_name: seller_chart_top10_origin.value[0].paramscityname
      })
      .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
          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') {
    $api
      .ClickTop10({
        _reportRef: seller_chart_top10_destination.value[0].paramsdata,
        _reportStationType: topdestinationinType.value,
        _city_name: seller_chart_top10_destination.value[0].paramscityname
      })
      .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
          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)') {
    $api
      .ClickCO2({
        _reportRef: seller_chart_CO2_origin.value[0].paramsdata.name,
        _reportDataType: seller_chart_CO2_origin.value[0].paramsdata.type,
        _reportStationType: 'origin'
      })
      .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'
          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)') {
    $api
      .ClickCO2({
        _reportRef: seller_chart_CO2_destination.value[0].paramsdata.name,
        _reportDataType: seller_chart_CO2_destination.value[0].paramsdata.type,
        _reportStationType: 'agent'
      })
      .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'
          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="filters">
      <div style="display: flex; align-items: center">
        <div class="tips_filter">
          <el-checkbox-group
            @change="changeCheckboxGroup1"
            v-model="checkboxGroup1"
            size="large"
            style="height: 32px"
          >
            <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
              {{ item }}
            </el-checkbox-button>
          </el-checkbox-group>
        </div>
        <div class="tips_filter">
          <el-radio-group v-model="changeCheckboxGroup2">
            <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="tips_filter">
          <QuickCalendarDate @DateChange="DateChange" :Date="DashDate"></QuickCalendarDate>
        </div>
      </div>
      <div class="filters_right">
        <el-input placeholder="Customer" v-model="BookingSearch" @blur="SearchCustomer">
          <template #prefix>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_search_b"></use>
              </svg>
            </span>
          </template>
        </el-input>
      </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 }}
                  <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"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                  <div class="kpi">
                    <PieChart
                      ref="pie_chart_kpi_arrival"
                      :PieData="Arrivalobj"
                      @ClickParams="ClickParams(item.title + '1')"
                      style="height: 300px"
                    ></PieChart>
                  </div>
                </div>
              </template>
            </VBox_Dashboard>
          </div>
          <div
            v-else-if="item.title === 'Pending Departure & Arrival' && item.switchValue"
            class="filters_left"
          >
            <!-- Pending -->
            <VBox_Dashboard @changeCancel="changeCancel(item.id)">
              <template #header>
                <div class="Title_flex">
                  {{ item.title }}
                  <el-tooltip :offset="6" effect="dark" :content="item.text" placement="bottom">
                    <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_pending_departure"
                      :PieData="Pendingobj"
                      @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"
                      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 }}
                  <el-tooltip
                    :offset="6"
                    effect="dark"
                    :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>
                <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"
                    @current-change="getTableData"
                  />
                </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 }}
                  <el-tooltip
                    :offset="6"
                    effect="dark"
                    :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>
                <PieChart
                  ref="pie_chart_ETD"
                  @ClickParams="ClickParams(item.title)"
                  :PieData="ETDobj"
                  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 }}
                    <el-tooltip
                      :offset="6"
                      effect="dark"
                      :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>
                  <div style="margin-right: 50px; display: flex; align-items: center">
                    <span style="font-weight: 400; font-size: 14px; margin-right: 4px">Type</span>
                    <el-select
                      v-model="value"
                      placeholder="Select"
                      style="width: 100px"
                      @change="changeType"
                    >
                      <el-option
                        v-for="item in containerType"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </div>
                </div>
              </template>
              <template #content>
                <BarChart
                  ref="seller_chart_Container_count"
                  :BarData="containerObj"
                  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>
                  <el-tooltip
                    :offset="6"
                    effect="dark"
                    :content="item.text"
                    placement="bottom-start"
                  >
                    <span class="iconfont_icon iconfont_icon_tip">
                      <svg class="iconfont" aria-hidden="true" style="vertical-align: 1px">
                        <use xlink:href="#icon-icon_info_b"></use>
                      </svg>
                    </span>
                  </el-tooltip>
                </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"
                      :Interval="Top1OInterval"
                    ></SellerChart>
                  </div>
                  <div class="map">
                    <TopMap></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"
                      style="height: 272px"
                    ></SellerChart>
                  </div>
                  <div class="map" style="height: 272px">
                    <TopMap></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 }}
                  <el-tooltip
                    :offset="6"
                    effect="dark"
                    :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>
                <BarChart
                  ref="seller_chart_CO2_origin"
                  :BarData="EmissionObj"
                  @clickParams="ClickParams(item.title)"
                  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 }}
                  <el-tooltip
                    :offset="6"
                    effect="dark"
                    :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>
                <BarChart
                  ref="seller_chart_CO2_destination"
                  :BarData="DestinationObj"
                  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);
  }
}
:deep(.el-checkbox-button__inner) {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
  padding: 0;
  width: 61px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
:deep(.el-checkbox-button__inner:hover) {
  color: var(--color-theme);
  background-color: var(--color-btn-default-bg-hover);
  border-color: var(--color-btn-default-bg-hover);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: transparent;
}
:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-6);
  border-bottom-left-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
  border-top-right-radius: var(--border-radius-6);
  border-bottom-right-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
  color: #ffffff;
  background-color: var(--color-theme);
  border-color: var(--color-theme);
  box-shadow: none;
  font-weight: 700;
}
:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner) {
  border-left-color: var(--color-theme);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: var(--color-border);
}
.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;
}
.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>