Merge branch 'dev_g' of United_Software/k_online_ui into dev

src/api/module/common.ts

@@ -188,3 +188,123 @@ export const SaveLayout = (params: any, config: any) => {
     config
   )
 }
+/**
+ * ETD to ETA(DAYS)点击跳转
+ */
+export const ClickEtdToEta = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'r1',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * PendingArrival点击跳转
+ */
+export const ClickPendingArrival = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'r3',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * PendingDeparture点击跳转
+ */
+export const ClickPendingDeparture = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'r4',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * KPIDeparture点击跳转
+ */
+export const ClickKPIDeparture = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'atd_r4',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * KPIArrival点击跳转
+ */
+export const ClickKPIArrival = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'ata_r3',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * Top10点击跳转
+ */
+export const ClickTop10 = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'top',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * CO2点击跳转
+ */
+export const ClickCO2 = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'search',
+      _reportType: 'co2e',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 评分提交
+ */
+export const scoringgrade = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'tools',
+      operate: 'mark_save',
+      ...params
+    },
+    config
+  )
+}

src/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -69,6 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/ScoringGrade/components/DialogColorful.vue

@@ -18,7 +18,7 @@ const submitDetails = (val: any) => {
         <img :src="props.colorfulSrc" />
       </div>
       <div class="vector">
-        <img class="vector_img" src="/src/styles/images/bubble_corner_colorful.png" />
+        <img class="vector_img" src="/k_new_online/src/styles/images/bubble_corner_colorful.png" />
       </div>
     </div>
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
@@ -38,7 +38,7 @@ const submitDetails = (val: any) => {
         </div>
       </div>
       <div class="vector vector_submit">
-        <img class="vector_img" src="/src/styles/images/bubble_corner_colorful.png" />
+        <img class="vector_img" src="/k_new_online/src/styles/images/bubble_corner_colorful.png" />
       </div>
     </div>
   </div>

src/components/ScoringGrade/components/DialogUe.vue

@@ -9,6 +9,7 @@ const props = defineProps({
   isShowHappy: Boolean
 })
 const checkboxGroup1 = ref([])
+const checkboxGroup2 = ref([])
 const evaluate = [
   'Lacking in functionality',
   'Inaccurate data',
@@ -25,10 +26,10 @@ const happyevaluate = [
 ]
 const emits = defineEmits(['changeAngryDetails', 'changeSmileRadio', 'changeHappybuttonbox'])
 const changebuttonbox = () => {
-  emits('changeAngryDetails')
+  emits('changeAngryDetails', checkboxGroup1.value)
 }
 const changeHappybuttonbox = () => {
-  emits('changeHappybuttonbox')
+  emits('changeHappybuttonbox', checkboxGroup2.value)
 }
 const Aspects = ref([
   'Highly Dissatisfied',
@@ -94,7 +95,7 @@ const changeSmileRadio = (title: any, value: any) => {
         </el-checkbox-group>
       </div>
       <div v-if="props.isShowHappy" class="dialogflex">
-        <el-checkbox-group v-model="checkboxGroup1" size="large">
+        <el-checkbox-group v-model="checkboxGroup2" size="large">
           <el-checkbox-button
             @change="changeHappybuttonbox"
             v-for="item in happyevaluate"
@@ -129,7 +130,7 @@ const changeSmileRadio = (title: any, value: any) => {
         </div>
       </div>
     </div>
-    <div class="vector"><img class="vector_img" src="/src/styles/images/bubble_corner.png" /></div>
+    <div class="vector"><img class="vector_img" src="/k_new_online/src/styles/images/bubble_corner.png" /></div>
   </div>
 </template>
 <style lang="scss" scoped>

src/components/ScoringGrade/src/ScoringGrade.vue

@@ -26,39 +26,39 @@ const colorfulSrc = ref()
 const dialogcontent = ref()
 const angryproposal = ref()
 const smileproposal = ref()
-const clickSrc = ref('/src/styles/images/score_normal.png')
+const clickSrc = ref('/k_new_online/src/styles/images/score_normal.png')
 avater.value = [
   {
-    src: '/src/styles/images/score_angry.png',
-    itemsrc: '/src/styles/images/angry_2.png',
+    src: '/k_new_online/src/styles/images/score_angry.png',
+    itemsrc: '/k_new_online//src/styles/images/angry_2.png',
     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
     expression: 'angry',
     proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
   },
   {
-    src: '/src/styles/images/score_sad.png',
-    itemsrc: '/src/styles/images/sad_2.png',
+    src: '/k_new_online/src/styles/images/score_sad.png',
+    itemsrc: '/k_new_online//src/styles/images/sad_2.png',
     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
-    expression: 'angry',
+    expression: 'sad',
     proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?'
   },
   {
-    src: '/src/styles/images/score_smile.png',
-    itemsrc: '/src/styles/images/smile_2.png',
+    src: '/k_new_online/src/styles/images/score_smile.png',
+    itemsrc: '/k_new_online//src/styles/images/smile_2.png',
     itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
     expression: 'smile',
     proposal: 'Could you share what aspects you liked and what could be improved ?'
   },
   {
-    src: '/src/styles/images/score_hhh.png',
-    itemsrc: '/src/styles/images/hhh_2.png',
+    src: '/k_new_online/src/styles/images/score_hhh.png',
+    itemsrc: '/k_new_online//src/styles/images/hhh_2.png',
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
-    expression: 'happy',
+    expression: 'hhh',
     proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
   },
   {
-    src: '/src/styles/images/score_happy.png',
-    itemsrc: '/src/styles/images/happy_2.png',
+    src: '/k_new_online/src/styles/images/score_happy.png',
+    itemsrc: '/k_new_online//src/styles/images/happy_2.png',
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
     expression: 'happy',
     proposal: 'We are curious to learn more about what specifically made you feel satisfied. '
@@ -71,6 +71,7 @@ const showPopver = () => {
   isShow.value = false
 }
 // 控制popover的显隐
+const checkexpression = ref()
 const showScore = (item: any) => {
   visible.value = false
   dialogVisible.value = true
@@ -81,16 +82,31 @@ const showScore = (item: any) => {
     isLoaded.value = true
     dialogcontent.value = item.itemtext
     if (item.expression == 'angry') {
+      checkexpression.value = 'angry'
+      setTimeout(() => {
+        isShowAngry.value = true
+        angryproposal.value = item.proposal
+      }, 1500)
+    } else if (item.expression == 'sad') {
+      checkexpression.value = 'sad'
       setTimeout(() => {
         isShowAngry.value = true
         angryproposal.value = item.proposal
       }, 1500)
     } else if (item.expression == 'smile') {
+      checkexpression.value = 'smile'
       setTimeout(() => {
         isShowSmile.value = true
         smileproposal.value = item.proposal
       }, 1500)
-    } else {
+    } else if (item.expression == 'hhh') {
+      checkexpression.value = 'hhh'
+      setTimeout(() => {
+        isShowHappy.value = true
+        angryproposal.value = item.proposal
+      }, 1500)
+    } else if (item.expression == 'happy') {
+      checkexpression.value = 'happy'
       setTimeout(() => {
         isShowHappy.value = true
         angryproposal.value = item.proposal
@@ -112,9 +128,17 @@ const closeDialog = () => {
   isshowDetails.value = false
   isShowSmile.value = false
   isshowexpression_details.value = false
+  isshowDetails_submit.value = false
+  smileCheckbox.value = {}
+  angryCheckbox.value = []
+  happyCheckbox.value = []
 }
 //生气表情，选择建议后显示对话
-const changeAngryDetails = () => {
+const angryCheckbox = ref([])
+const happyCheckbox = ref([])
+const smileCheckbox = ref()
+const changeAngryDetails = (val: any) => {
+  angryCheckbox.value = val
   setTimeout(() => {
     isLoaded_share.value = true
     setTimeout(() => {
@@ -123,7 +147,8 @@ const changeAngryDetails = () => {
   }, 1500)
 }
 //开心表情，选择建议后显示对话
-const changeHappybuttonbox = () => {
+const changeHappybuttonbox = (val: any) => {
+  happyCheckbox.value = val
   setTimeout(() => {
     isLoaded_share.value = true
     setTimeout(() => {
@@ -133,14 +158,64 @@ const changeHappybuttonbox = () => {
 }
 // smile提交后显示对话
 const changeSmileRadio = (val: any) => {
+  smileCheckbox.value = val
   if (Object.keys(val).length == 5) {
-    changeAngryDetails()
+    setTimeout(() => {
+      isLoaded_share.value = true
+      setTimeout(() => {
+        isshowexpression_details.value = true
+      }, 1500)
+    }, 1500)
   }
 }
 // 提交details
 const submitDetails = (val: any) => {
-  console.log(val)
-  isshowDetails_submit.value = true
+  if (angryCheckbox.value.length) {
+    $api
+      .scoringgrade({
+        suggestion: angryCheckbox.value,
+        proposal: val,
+        expression: checkexpression.value
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails.value = false
+          isshowDetails_submit.value = true
+        }
+      })
+  } else if (happyCheckbox.value.length) {
+    $api
+      .scoringgrade({
+        suggestion: happyCheckbox.value,
+        proposal: val,
+        expression: checkexpression.value
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails.value = false
+          isshowDetails_submit.value = true
+        }
+      })
+  } else {
+    let obj: any = {}
+    obj.Complete_funtionality = smileCheckbox.value['Complete funtionality']
+    obj.Accurate_data = smileCheckbox.value['Accurate data']
+    obj.Clear_information = smileCheckbox.value['Clear information']
+    obj.Easy_to_use = smileCheckbox.value['Easy to use']
+    obj.System_Performance = smileCheckbox.value['System Performance']
+    $api
+      .scoringgrade({
+        proposal: val,
+        expression: checkexpression.value,
+        ...obj
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails.value = false
+          isshowDetails_submit.value = true
+        }
+      })
+  }
 }
 </script>
 <template>
@@ -244,7 +319,7 @@ const submitDetails = (val: any) => {
         title="Submit Successful"
       >
         <template #icon>
-          <el-image src="/src/styles/images/submit_successful.png" />
+          <el-image src="/k_new_online/src/styles/images/submit_successful.png" />
         </template>
         <template #sub-title>
           <div class="sub_title_text">Apologize once again for your experience.</div>

src/views/Dashboard/src/DashboardView.vue

@@ -9,6 +9,9 @@ import RecentStatus from './components/RecentStatus.vue'
 import ScoringSystem from './components/ScoringSystem.vue'
 import TopMap from './components/TopMap.vue'
 import { ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 const value = ref('All')
 const activeName = ref('first')
 const SaveVisible = ref(false)
@@ -275,10 +278,12 @@ const Top1OInterval = reactive({
   Max: 0,
   interval: 0
 })
+const MapData = ref()
 const GetTop10ODEcharts = () => {
   $api.GetTop10ODEcharts({}).then((res: any) => {
     if (res.code === 200) {
       Top10Obj.DestinationData = res.data.seller_data_list_destination
+      MapData.value = res.data.toporiginMap
       Top10Obj.OriginData = res.data.seller_data_list_origin
       Top1OInterval.Max = res.data.Max
       Top1OInterval.interval = res.data.interval
@@ -333,6 +338,210 @@ 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()
+  }
+  // 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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'ETD to ETA (Days)'
+          obj.data = 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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'Pending Arrival'
+          obj.data = 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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'Pending Departure'
+          obj.data = 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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'KPI Departure'
+          obj.data = 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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'KPI Arrival'
+          obj.data = 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') {
+    let array: any = []
+    array.push(seller_chart_top10_origin.value[0].paramsdata)
+    console.log(array)
+    $api
+      .ClickTop10({
+        _reportRef: array,
+        _reportStationType: 'origin'
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'Top 10 Origin'
+          obj.data = seller_chart_top10_origin.value[0].paramsdata
+          sessionStorage.setItem('tagsList', JSON.stringify(obj))
+          router.push({
+            path: '/tracking'
+          })
+        }
+      })
+  }
+  // Top10 destination点击跳转
+  else if (val == 'Top 10 Destination') {
+    let array: any = []
+    array.push(seller_chart_top10_destination.value[0].paramsdata)
+    console.log(array)
+    $api
+      .ClickTop10({
+        _reportRef: array,
+        _reportStationType: 'agent'
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'Top 10 Destination'
+          obj.data = seller_chart_top10_destination.value[0].paramsdata
+          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) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'CO2e Emission by Origin (Top 10)'
+          obj.data = 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: 'origin'
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          sessionStorage.setItem('clickParams', JSON.stringify(res.data))
+          let obj: any = {}
+          obj.title = 'CO2e Emission by Destination (Top 10)'
+          obj.data = seller_chart_CO2_destination.value[0].paramsdata.name
+          sessionStorage.setItem('tagsList', JSON.stringify(obj))
+          router.push({
+            path: '/tracking'
+          })
+        }
+      })
+  }
+}
 </script>
 <template>
   <div class="dashboard">
@@ -455,7 +664,7 @@ const SearchCustomer = () => {
         handle=".handle-draggable"
       >
         <template v-for="item in Management" :key="item">
-          <div v-if="item.id === 1 && item.switchValue" class="filters_left">
+          <div v-if="item.title === 'KPI' && item.switchValue" class="filters_left">
             <!-- KPI -->
             <VBox_Dashboard @changeCancel="changeCancel(item.id)">
               <template #header>
@@ -478,12 +687,18 @@ const SearchCustomer = () => {
               <template #content>
                 <div class="KPI_Pending">
                   <div class="kpi">
-                    <PieChart ref="pie_chart" :PieData="KPIobj" style="height: 300px"></PieChart>
+                    <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"
+                      ref="pie_chart_kpi_arrival"
                       :PieData="Arrivalobj"
+                      @ClickParams="ClickParams(item.title + '1')"
                       style="height: 300px"
                     ></PieChart>
                   </div>
@@ -491,7 +706,10 @@ const SearchCustomer = () => {
               </template>
             </VBox_Dashboard>
           </div>
-          <div v-else-if="item.id === 2 && item.switchValue" class="filters_left">
+          <div
+            v-else-if="item.title === 'Pending Departure & Arrival' && item.switchValue"
+            class="filters_left"
+          >
             <!-- Pending -->
             <VBox_Dashboard @changeCancel="changeCancel(item.id)">
               <template #header>
@@ -515,14 +733,16 @@ const SearchCustomer = () => {
                 <div class="KPI_Pending">
                   <div class="kpi">
                     <PieChart
-                      ref="pie_chart"
+                      ref="pie_chart_pending_departure"
                       :PieData="Pendingobj"
+                      @ClickParams="ClickParams(item.title + '0')"
                       style="height: 300px"
                     ></PieChart>
                   </div>
                   <div class="kpi">
                     <PieChart
-                      ref="pie_chart"
+                      ref="pie_chart_pending_arrival"
+                      @ClickParams="ClickParams(item.title + '1')"
                       :PieData="PendingArrivalobj"
                       style="height: 300px"
                     ></PieChart>
@@ -532,7 +752,9 @@ const SearchCustomer = () => {
             </VBox_Dashboard>
           </div>
           <div
-            v-else-if="item.id === 3 && item.switchValue && RecentStatusList.length != 0"
+            v-else-if="
+              item.title === 'Recent Status' && item.switchValue && RecentStatusList.length != 0
+            "
             class="KPI_Pending"
           >
             <!-- Recent Status -->
@@ -573,7 +795,10 @@ const SearchCustomer = () => {
             </VBox_Dashboard>
           </div>
           <!-- ETD to ETA -->
-          <div v-else-if="item.id === 4 && item.switchValue" class="filters_left">
+          <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">
@@ -593,12 +818,20 @@ const SearchCustomer = () => {
                 </div>
               </template>
               <template #content>
-                <PieChart ref="pie_chart" :PieData="ETDobj" style="height: 300px"></PieChart>
+                <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.id === 5 && item.switchValue" class="filters_left">
+          <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">
@@ -646,7 +879,10 @@ const SearchCustomer = () => {
             </VBox_Dashboard>
           </div>
           <!-- Top10 Origin/Top 10 Destination -->
-          <div v-else-if="item.id === 6 && item.switchValue" class="KPI_Pending">
+          <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="align-items: start">
@@ -672,14 +908,14 @@ const SearchCustomer = () => {
                 <div class="KPI_Pending">
                   <div class="seller_chart">
                     <SellerChart
-                      ref="seller_chart"
+                      ref="seller_chart_top10_origin"
+                      @clickParams="ClickParams(item.title1)"
                       :SellerData="Top10Obj.OriginData"
                       :Interval="Top1OInterval"
-                      style="height: 272px"
                     ></SellerChart>
                   </div>
                   <div class="map">
-                    <TopMap></TopMap>
+                    <TopMap :MapData="MapData"></TopMap>
                   </div>
                 </div>
               </template>
@@ -687,21 +923,25 @@ const SearchCustomer = () => {
                 <div class="KPI_Pending">
                   <div class="seller_chart">
                     <SellerChart
-                      ref="seller_chart"
+                      ref="seller_chart_top10_destination"
+                      @clickParams="ClickParams(item.title2)"
                       :SellerData="Top10Obj.DestinationData"
                       :Interval="Top1OInterval"
                       style="height: 272px"
                     ></SellerChart>
                   </div>
-                  <div class="map">
-                    <TopMap></TopMap>
+                  <div class="map" style="height: 272px">
+                    <TopMap :MapData="MapData"></TopMap>
                   </div>
                 </div>
               </template>
             </VBox_Dashboard>
           </div>
           <!-- CO2e Emission by Origin (Top 10) -->
-          <div v-else-if="item.id === 7 && item.switchValue" class="filters_left">
+          <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">
@@ -722,8 +962,9 @@ const SearchCustomer = () => {
               </template>
               <template #content>
                 <BarChart
-                  ref="seller_chart"
+                  ref="seller_chart_CO2_origin"
                   :BarData="EmissionObj"
+                  @clickParams="ClickParams(item.title)"
                   style="height: 250px"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
@@ -731,7 +972,10 @@ const SearchCustomer = () => {
             </VBox_Dashboard>
           </div>
           <!-- CO2e Emission by Destination (Top 10) -->
-          <div v-else-if="item.id === 8 && item.switchValue" class="filters_left">
+          <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">
@@ -752,9 +996,10 @@ const SearchCustomer = () => {
               </template>
               <template #content>
                 <BarChart
-                  ref="seller_chart"
+                  ref="seller_chart_CO2_destination"
                   :BarData="DestinationObj"
                   style="height: 250px"
+                  @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>

src/views/Dashboard/src/components/BarChart.vue

@@ -174,12 +174,43 @@ const initOption = reactive({
       fontFamily: 'Lato-Light',
       color: '#646A73'
     }
+  },
+
+  toolbox: {
+    iconStyle: {
+      borderColor: '#2B2F36'
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#ff7500'
+      } // hover上去时的颜色
+    },
+    show: true, // 显示工具箱
+    feature: {
+      restore: { show: true },
+      saveAsImage: { show: true }
+    },
+    showTitle: false
   }
 })
 onMounted(() => {
   initChart()
 })
 
+const emits = defineEmits(['ClickParams'])
+const paramsdata = ref({
+  name: '',
+  type: ''
+})
+const clickParams = () => {
+  const bar_chart = echarts.init(bar_ref.value)
+  // 监听点击事件
+  bar_chart.on('click', function (params) {
+    paramsdata.value.name = params.name
+    paramsdata.value.type = params.seriesName
+    emits('ClickParams')
+  })
+}
 const initChart = () => {
   const bar_chart = echarts.init(bar_ref.value)
   bar_chart.setOption(initOption)
@@ -187,12 +218,11 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     bar_chart.resize()
   })
-  // 监听点击事件
-  bar_chart.on('click', function (params) {
-    // params 包含了点击事件的数据
-    console.log('1111', params) // 获取点击的数据
-  })
+  clickParams()
 }
+defineExpose({
+  paramsdata
+})
 </script>
 
 <template>

src/views/Dashboard/src/components/PieChart.vue

@@ -163,7 +163,16 @@ const initOption: any = reactive({
 onMounted(() => {
   initChart()
 })
-
+const emits = defineEmits(['ClickParams'])
+const paramsdata = ref()
+const clickParams = () => {
+  const pie_chart = echarts.init(pie_ref.value)
+  // 监听点击事件
+  pie_chart.on('click', function (params) {
+    paramsdata.value = params.data
+    emits('ClickParams')
+  })
+}
 const initChart = () => {
   const pie_chart = echarts.init(pie_ref.value)
   pie_chart.setOption(initOption)
@@ -171,12 +180,11 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     pie_chart.resize()
   })
-  // 监听点击事件
-  pie_chart.on('click', function (params) {
-    // params 包含了点击事件的数据
-    console.log(params.data) // 获取点击的数据
-  })
+  clickParams()
 }
+defineExpose({
+  paramsdata
+})
 </script>
 
 <template>

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -33,19 +33,19 @@ avater.value = [
     changecolortext: false
   },
   {
-    src: '/src/styles/images/score_sad.png',
-    src1: '/src/styles/images/score_sad.png',
-    itemsrc: '/src/styles/images/sad_2.png',
+    src: '/k_new_online/src/styles/images/score_sad.png',
+    src1: '/k_new_online/src/styles/images/score_sad.png',
+    itemsrc: '/k_new_online/src/styles/images/sad_2.png',
     itemtext: 'We are so sorry for the inconveniences. We value your experience immensely. ',
-    expression: 'angry',
+    expression: 'sad',
     proposal: 'Could you please tell us which aspects of the system you are dissatisfied with?',
     itemtitle: 'Dissatisfied',
     changecolortext: false
   },
   {
-    src: '/src/styles/images/score_smile.png',
-    src1: '/src/styles/images/score_smile.png',
-    itemsrc: '/src/styles/images/smile_2.png',
+    src: '/k_new_online/src/styles/images/score_smile.png',
+    src1: '/k_new_online/src/styles/images/score_smile.png',
+    itemsrc: '/k_new_online/src/styles/images/smile_2.png',
     itemtext: 'Thank you for sharing your thoughts with us. We value your experience greatly.',
     expression: 'smile',
     proposal: 'Could you share what aspects you liked and what could be improved ?',
@@ -53,19 +53,19 @@ avater.value = [
     changecolortext: false
   },
   {
-    src: '/src/styles/images/score_hhh.png',
-    src1: '/src/styles/images/score_hhh.png',
-    itemsrc: '/src/styles/images/hhh_2.png',
+    src: '/k_new_online/src/styles/images/score_hhh.png',
+    src1: '/k_new_online/src/styles/images/score_hhh.png',
+    itemsrc: '/k_new_online//src/styles/images/hhh_2.png',
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
-    expression: 'happy',
+    expression: 'hhh',
     proposal: 'We are curious to learn more about what specifically made you feel satisfied. ',
     itemtitle: 'Satisfied',
     changecolortext: false
   },
   {
-    src: '/src/styles/images/score_happy.png',
-    src1: '/src/styles/images/score_happy.png',
-    itemsrc: '/src/styles/images/happy_2.png',
+    src: '/k_new_online/src/styles/images/score_happy.png',
+    src1: '/k_new_online/src/styles/images/score_happy.png',
+    itemsrc: '/k_new_online/src/styles/images/happy_2.png',
     itemtext: 'Thank you very much for giving us a satisfied rating on our service or system.',
     expression: 'happy',
     proposal: 'We are curious to learn more about what specifically made you feel satisfied. ',
@@ -74,6 +74,7 @@ avater.value = [
   }
 ]
 const checkboxGroup1 = ref([])
+const checkboxGroup2 = ref([])
 const evaluate = [
   'Lacking in functionality',
   'Inaccurate data',
@@ -134,6 +135,9 @@ const closeDialog = () => {
   isShowSmile.value = false
   isshowDetails_submit.value = false
   isshowDetails.value = true
+  smilecheckbox.value = {}
+  checkboxGroup1.value = []
+  checkboxGroup2.value = []
 }
 const mouseenter = (item: any) => {
   item.src = item.itemsrc
@@ -145,16 +149,26 @@ const mouseout = (item: any) => {
 }
 const InnerTitle = ref()
 const InnerTileQues = ref()
+const checkexpression = ref()
 const OpenScoring = (item: any) => {
   dialogVisible.value = false
   innerVisible.value = true
   InnerTitle.value = item.itemtext
   InnerTileQues.value = item.proposal
   if (item.expression == 'angry') {
+    checkexpression.value = 'angry'
+    isShowAngry.value = true
+  } else if (item.expression == 'sad') {
+    checkexpression.value = 'sad'
     isShowAngry.value = true
   } else if (item.expression == 'smile') {
+    checkexpression.value = 'smile'
     isShowSmile.value = true
-  } else {
+  } else if (item.expression == 'hhh') {
+    checkexpression.value = 'hhh'
+    isShowHappy.value = true
+  } else if (item.expression == 'happy') {
+    checkexpression.value = 'happy'
     isShowHappy.value = true
   }
 }
@@ -164,6 +178,9 @@ const previous = () => {
   isShowAngry.value = false
   isShowSmile.value = false
   isShowHappy.value = false
+  smilecheckbox.value = {}
+  checkboxGroup1.value = []
+  checkboxGroup2.value = []
 }
 // 选择后button变为可选择
 const changeAngryDetails = () => {
@@ -174,25 +191,63 @@ const changeHappyDetails = () => {
   buttonDisabled.value = false
 }
 let SmileObj: any = {}
+const smilecheckbox = ref()
 const changeSmileRadio = (title: any, value: any) => {
   SmileObj[title] = value
-  console.log(Object.keys(SmileObj).length)
+  smilecheckbox.value = SmileObj
   if (Object.keys(SmileObj).length == Aspects.value.length) {
     buttonDisabled.value = false
   }
 }
 // 提交details
 const submitDetails = (val: any) => {
-  console.log(val)
-  isshowDetails_submit.value = true
-  isshowDetails.value = false
+  if (checkboxGroup1.value.length) {
+    $api
+      .scoringgrade({
+        suggestion: checkboxGroup1.value,
+        proposal: val,
+        expression: checkexpression.value
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails_submit.value = true
+          isshowDetails.value = false
+        }
+      })
+  } else if (checkboxGroup2.value.length) {
+    $api
+      .scoringgrade({
+        suggestion: checkboxGroup2.value,
+        proposal: val,
+        expression: checkexpression.value
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails_submit.value = true
+          isshowDetails.value = false
+        }
+      })
+  } else {
+    $api
+      .scoringgrade({
+        proposal: val,
+        expression: checkexpression.value,
+        ...smilecheckbox.value
+      })
+      .then((res: any) => {
+        if (res.code == 200) {
+          isshowDetails_submit.value = true
+          isshowDetails.value = false
+        }
+      })
+  }
 }
 </script>
 
 <template>
   <div class="scoring_dashboard" v-if="isShowScoring">
     <div class="scoring_left">
-      <img class="scoring_img" src="/src/styles/images/dashboard_scoring.png" />
+      <img class="scoring_img" src="/k_new_online/src/styles/images/dashboard_scoring.png" />
       <div>How satisfied are you with this system ?</div>
       <div class="das_share" @click="dialogVisible = true">Share Your Feedback</div>
       <el-dialog
@@ -274,7 +329,7 @@ const submitDetails = (val: any) => {
             </div>
           </div>
           <div v-if="isShowHappy" style="margin-bottom: 48px">
-            <el-checkbox-group v-model="checkboxGroup1" size="large">
+            <el-checkbox-group v-model="checkboxGroup2" size="large">
               <el-checkbox-button
                 @change="changeHappyDetails"
                 v-for="item in happyevaluate"
@@ -324,7 +379,7 @@ const submitDetails = (val: any) => {
           title="Submit Successful"
         >
           <template #icon>
-            <el-image src="/src/styles/images/submit_successful.png" />
+            <el-image src="/k_new_online/src/styles/images/submit_successful.png" />
           </template>
           <template #sub-title>
             <div class="sub_title_text">Apologize once again for your experience.</div>

src/views/Dashboard/src/components/SellerChart.vue

@@ -158,7 +158,16 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
 })
-
+const emits = defineEmits(['ClickParams'])
+const paramsdata = ref()
+const clickParams = () => {
+  const seller_chart = echarts.init(seller_ref.value)
+  // 监听点击事件
+  seller_chart.on('click', function (params) {
+    paramsdata.value = params.name
+    emits('ClickParams')
+  })
+}
 const initChart = () => {
   seller_data.value?.sort((a: any, b: any) => {
     return a.value - b.value // 从大到小排序
@@ -169,12 +178,11 @@ const initChart = () => {
   window.addEventListener('resize', () => {
     seller_chart.resize()
   })
-  // 监听点击事件
-  seller_chart.on('click', function (params) {
-    // params 包含了点击事件的数据
-    console.log(params) // 获取点击的数据
-  })
+  clickParams()
 }
+defineExpose({
+  paramsdata
+})
 </script>
 
 <template>

src/views/Dashboard/src/components/TopMap.vue

@@ -1,13 +1,75 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch, computed } from 'vue'
 import L from 'leaflet'
-const map = ref(null)
+const props = defineProps({
+  MapData: Array
+})
+const MapDataList = ref(props.MapData)
+watch(
+  () => props.MapData,
+  (current) => {
+    MapDataList.value = current
+  }
+)
 const init = () => {
-  map.value = L.map('map').setView([51.505, -0.09], 4)
+  const map = L.map('map').setView([51.505, -0.09], 3)
 
   L.tileLayer('https://map.kerryapex.com/osm_tiles/{z}/{x}/{y}.png', {
     attribution: '&copy; OpenStreetMap contributors'
-  }).addTo(map.value)
+  }).addTo(map)
+
+  const popupOptions = {
+    closeButton: false, // 移除关闭按钮
+    autoClose: false, // 禁止点击其他地方自动关闭
+    closeOnClick: false // 禁止点击地图时自动关闭
+  }
+  var markers = [
+    {
+      qandL: [151.5, -0.09],
+      divIcon: { iconSize: 0 },
+      name: 'CNSGH1',
+      color: '#FF7500',
+      value: 1,
+      textcolor: '#FFF'
+    },
+    {
+      qandL: [85.7128, 22.006],
+      divIcon: { iconSize: 0 },
+      name: 'CNSGH2',
+      color: '#ff9033',
+      value: 1,
+      textcolor: '#FFF'
+    },
+    {
+      qandL: [81.5, 27.6298],
+      divIcon: { iconSize: 0 },
+      name: 'CNSGH3',
+      color: '#ff9e4d',
+      value: 1,
+      textcolor: '#FFF'
+    }
+    // 添加更多点...
+  ]
+  console.log(props.MapData)
+  if (MapDataList.value) {
+    MapDataList.value.forEach((item: any) => {
+      const marker = L.marker(item.qandl, { icon: L.divIcon(item.divIcon) }).addTo(map)
+      // 绑定弹出框并立即展示
+      marker
+        .bindPopup(
+          `
+    <div class="popup-content" style="background-color:${item.color}">
+      <div class="popup-content-text">
+        <p class="popup-label" style="color:${item.textcolor}">${item.name}</p>
+        <p class="popup-value" style="color:${item.textcolor}">${item.value}</p>
+      </div>
+    </div>
+  `,
+          popupOptions
+        )
+        .openPopup()
+    })
+  }
 }
 
 onMounted(() => {
@@ -15,9 +77,52 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div id="map" style="height: 272px"></div>
+  <div id="map" style="width: 100%; height: 272px"></div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" >
 @import 'leaflet/dist/leaflet.css';
+.leaflet-popup-content-wrapper {
+  width: 58px !important;
+  height: 58px;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+.leaflet-popup-tip {
+  width: 0;
+  height: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: transparent;
+}
+.leaflet-popup-tip-container {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.leaflet-popup-content {
+  width: 58px;
+  height: 58px;
+  margin: 0;
+  .popup-content {
+    width: 58px;
+    height: 58px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      margin: 0;
+      text-align: center;
+    }
+    .popup-label {
+      font-size: 10px;
+      font-weight: 400;
+    }
+    .popup-value {
+      font-size: 12px;
+      font-weight: 700;
+    }
+  }
+}
 </style>

src/views/Tracking/src/TrackingView.vue

@@ -20,7 +20,8 @@ let searchTableQeury: any = {}
 const filterData = reactive({
   transportData: [] as Array<string>,
   daterangeData: [] as Array<string>,
-  morefiltersData: [] as Array<string>
+  morefiltersData: [] as Array<string>,
+  dashboardData: [] as Array<string>
 })
 const tagsData: any = ref([])
 const handleClose = (tag: any) => {
@@ -166,6 +167,7 @@ const clearfilters = () => {
   filterData.transportData = []
   filterData.daterangeData = []
   filterData.morefiltersData = []
+  filterData.dashboardData = []
   emitter.emit('clearTag', 'Transport Mode')
   emitter.emit('clearTag', 'ETD')
   emitter.emit('clearTag', 'ETA')
@@ -206,6 +208,11 @@ const renderTagsData = () => {
       tagsData.value.push(item)
     })
   }
+  if (filterData.dashboardData.length) {
+    filterData.dashboardData.forEach((item) => {
+      tagsData.value.push(item)
+    })
+  }
 }
 // 清除 Transport Tags
 const clearTransportTags = () => {
@@ -231,6 +238,15 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 onMounted(() => {
+  if (
+    sessionStorage.getItem('clickParams') != null ||
+    sessionStorage.getItem('clickParams') != ''
+  ) {
+    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
+    let str = `${data.title}:${data.data}`
+    filterData.daterangeData.push(str)
+    renderTagsData()
+  }
   setTimeout(() => {
     TransportListItem.value = TrackingTable_ref.value.TransportListItem
     TagsList.value = TrackingTable_ref.value.TagsList

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -121,31 +121,54 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
   }
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoading.value = true
-  await $api
-    .getTrackingTableData({
-      cp: pageInfo.value.pageNo,
-      ps: pageInfo.value.pageSize,
-      rc,
-      other_filed: '',
-      ...filterdataobj
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        trackingTable.value.data = res.data.searchData
-        pageInfo.value.total = Number(res.data.rc)
-        TransportListItem.value = res.data.TransportList
-        TagsList.value = res.data.tagsList
-
-        // 拥有所有字段的表格
-        setTimeout(() => {
-          allTable.value.columns = handleColumns(res.data.allColums, 'all')
-          allTable.value.data = res.data.searchData
-          nextTick(() => {
-            allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-          })
-        }, 1000)
-      }
-    })
+  if (
+    sessionStorage.getItem('clickParams') != null ||
+    sessionStorage.getItem('clickParams') != ''
+  ) {
+    const data = JSON.parse(sessionStorage.getItem('clickParams') as string) || {}
+    trackingTable.value.data = data.searchData
+    pageInfo.value.total = Number(data.rc)
+    TransportListItem.value = data.TransportList
+    TagsList.value = data.tagsList
+
+    // 拥有所有字段的表格
+    setTimeout(() => {
+      allTable.value.columns = handleColumns(data.allColums, 'all')
+      allTable.value.data = data.searchData
+      nextTick(() => {
+        allTableRef.value && autoWidth(allTable.value, allTableRef.value)
+      })
+    }, 1000)
+    setTimeout(() => {
+      sessionStorage.removeItem('clickParams')
+    }, 5000)
+  } else {
+    await $api
+      .getTrackingTableData({
+        cp: pageInfo.value.pageNo,
+        ps: pageInfo.value.pageSize,
+        rc,
+        other_filed: '',
+        ...filterdataobj
+      })
+      .then((res: any) => {
+        if (res.code === 200) {
+          trackingTable.value.data = res.data.searchData
+          pageInfo.value.total = Number(res.data.rc)
+          TransportListItem.value = res.data.TransportList
+          TagsList.value = res.data.tagsList
+
+          // 拥有所有字段的表格
+          setTimeout(() => {
+            allTable.value.columns = handleColumns(res.data.allColums, 'all')
+            allTable.value.data = res.data.searchData
+            nextTick(() => {
+              allTableRef.value && autoWidth(allTable.value, allTableRef.value)
+            })
+          }, 1000)
+        }
+      })
+  }
   nextTick(() => {
     !isInit && (tableLoading.value = false)
   })