轨迹地图对接口

public/config.js

@@ -169,6 +169,8 @@ var DATACONTENT_ID = {
   goodsAirline: 100009, // 货物航段
   goodsTrack: 100010, // 货物节点跟踪
   goodsFlight: 100011, // 货物航班跟踪
+  // 轨迹地图
+  trackMapNode: 1803533,
 
   /***-----统计分析------***/
   stOrderId: 18012,

src/views/realTime/trackMap/index.vue

@@ -3,15 +3,20 @@
     <div class="track-header flex">
       <div class="manageTitle">运单轨迹地图</div>
       <div class="search flex">
-        <el-input
-          v-model="inputValue"
-          class="search-input"
-          size="default"
-          placeholder="请输入运单号"
-          :prefix-icon="Search"
-          clearable
-          @clear="clearHandler"
-        />
+        <el-form ref="formRef" :model="formData" :rules="formRule">
+          <el-form-item prop="waybillNO">
+            <el-input
+              v-model.trim="formData.waybillNO"
+              class="search-input"
+              size="default"
+              placeholder="请输入运单号"
+              :prefix-icon="Search"
+              clearable
+              @keyup.enter="searchHandler"
+              @clear="clearHandler"
+            />
+          </el-form-item>
+        </el-form>
         <el-button
           v-permission="['waybill_query_button']"
           class="search-button"
@@ -28,15 +33,283 @@
   </div>
 </template>
 <script lang="ts" setup>
+import _ from 'lodash'
+import { Query } from '@/api/webApi'
 import { Search } from '@element-plus/icons-vue'
 import { init, ECharts } from 'echarts'
-import { ElMessage } from 'element-plus'
+import { ElMessage, FormInstance } from 'element-plus'
+
+const trackNodesMap = {
+  departure: [
+    {
+      name: '收货核单',
+      nodeCode: 'DEH',
+    },
+    {
+      name: '查验',
+      nodeCode: 'ACC_CHECK',
+    },
+    {
+      name: '安检',
+      nodeCode: '安检',
+    },
+    {
+      name: '加货',
+      nodeCode: 'ACC_BUP',
+    },
+    {
+      name: '预配载',
+      nodeCode: 'LS_CARGO',
+    },
+    {
+      name: '货站交接(离港)',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_02',
+    },
+    {
+      name: '运输前复核',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_03',
+    },
+    {
+      name: '机下交接(离港)',
+      nodeCode: '出港货邮',
+    },
+    {
+      name: '装机',
+      nodeCode: '装载完成',
+    },
+    {
+      name: '关闭舱门',
+      nodeCode: '关闭舱门',
+    },
+    {
+      name: '拉下登记',
+      nodeCode: 'CARGOS_OFFLOAD',
+    },
+    {
+      name: '拉回确认',
+      nodeCode: 'OFFLOAD_CONFIRM',
+    },
+    {
+      name: '退运',
+      nodeCode: 'BILL_RETURN',
+    },
+  ],
+  arrival: [
+    {
+      name: '卸机',
+      nodeCode: 'CARGOS_ARR_HANDOVER',
+    },
+    {
+      name: '机下交接(进港)',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_01',
+    },
+    {
+      name: '货站交接(进港)',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_99',
+    },
+    {
+      name: '理货',
+      nodeCode: 'IMP_TALLY',
+    },
+    {
+      name: '出库',
+      nodeCode: 'FSUDLV',
+    },
+  ],
+  internationalDeparture: [
+    {
+      name: '入园',
+      nodeCode: 'EPORTREL',
+    },
+    {
+      name: '海关',
+      nodeCode: 'MTREL_out',
+    },
+    {
+      name: '运抵',
+      nodeCode: 'FOH',
+    },
+    {
+      name: '安检',
+      nodeCode: 'REH',
+    },
+    {
+      name: '收运核单',
+      nodeCode: 'RCS',
+    },
+    {
+      name: '理货',
+      nodeCode: '板箱清单XML',
+    },
+    {
+      name: '拉下',
+      nodeCode: 'CARGOS_OFFLOAD',
+    },
+    {
+      name: '待运区',
+      nodeCode: 'WAT_LOC',
+    },
+    {
+      name: '货站交接',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_02',
+    },
+    {
+      name: '机下交接',
+      nodeCode: '出港货邮',
+    },
+    {
+      name: '装机',
+      nodeCode: '装载完成',
+    },
+  ],
+  internationalArrival: [
+    {
+      name: '卸机',
+      nodeCode: 'FFM',
+    },
+    {
+      name: '机下交接',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_01',
+    },
+    {
+      name: '货站交接',
+      nodeCode: 'CARGOS_HANDOVER_STATUS_99',
+    },
+    {
+      name: '理货',
+      nodeCode: 'RCF报',
+    },
+    {
+      name: '海关放行',
+      nodeCode: 'MTREL_in',
+    },
+    {
+      name: '出库',
+      nodeCode: 'DLV报',
+    },
+  ],
+}
 
-const inputValue = ref('')
+const formRef = ref<FormInstance | null>(null)
+const waybillValidator = (rule: any, value: any, callback: any) => {
+  console.log(value)
+  if (!value) {
+    return callback(new Error('请输入运单号'))
+  }
+  const reg = /^[0-9]{3}\-[0-9]{8}$/
+  if (!reg.test(value)) {
+    return callback(new Error('请输入正确的运单号'))
+  }
+  callback()
+}
+const formRule = {
+  waybillNO: [{ validator: waybillValidator, trigger: 'blur' }],
+}
+const formData = reactive({
+  waybillNO: '',
+})
 const searchHandler = () => {
-  ElMessage.info('开发中')
+  formRef.value?.validate(valid => {
+    if (valid) {
+      getTrackNodes()
+    }
+  })
 }
 const clearHandler = () => {}
+const getTrackNodes = async () => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    } = await Query({
+      id: DATACONTENT_ID.trackMapNode,
+      dataContent: [formData.waybillNO],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message || '失败')
+    }
+    if (!listValues.length) {
+      ElMessage.info('未查询到运单跟踪信息')
+      return
+    }
+    const isInternational = listValues[0].DIType !== 'DOM'
+    const isDeparture = listValues[0].IOType === '离港'
+    const trackNodes: {
+      name: string
+      nodeCode: string
+      value?: string
+      label?: any
+      itemStyle?: any
+    }[] = isInternational
+      ? isDeparture
+        ? trackNodesMap.internationalDeparture
+        : trackNodesMap.internationalArrival
+      : isDeparture
+      ? [...trackNodesMap.departure, ...trackNodesMap.arrival]
+      : [...trackNodesMap.arrival, ...trackNodesMap.departure]
+    listValues.forEach(
+      ({
+        nodeCode,
+        execPosition,
+        ConsignmentItemPackagingQuantityQuantity,
+        execResult,
+        execTime,
+      }) => {
+        const sameNode = trackNodes.find(node => node.nodeCode === nodeCode)
+        if (sameNode) {
+          Object.assign(sameNode, {
+            value: `${execPosition ?? ' '}/${String(
+              ConsignmentItemPackagingQuantityQuantity ?? ' '
+            )}\n${!!Number(execResult) ? '通过' : '未通过'}/${
+              String(execTime ?? '').split('T')[1] ?? ' '
+            }`,
+          })
+          if (!Number(execResult)) {
+            Object.assign(sameNode, {
+              label: {
+                backgroundColor: inActiveColor,
+              },
+              itemStyle: {
+                color: '#FFFFFF',
+                borderColor: inActiveColor,
+                borderWidth: 3,
+              },
+            })
+          } else {
+            delete sameNode.label
+            delete sameNode.itemStyle
+          }
+        }
+      }
+    )
+    option.series[0].data = trackNodes.map((node, index, arr) => {
+      const length = arr.length
+      const resultNode = {
+        ...node,
+        x: index <= length / 2 ? index * 140 : (length - index) * 140,
+        y:
+          index <= length / 2 ? 500 + (index % 2 ? 0 : 50) : index % 2 ? 0 : 50,
+      }
+      if (!resultNode.value) {
+        Object.assign(resultNode, {
+          value: ' / \n未通过/ ',
+          label: {
+            backgroundColor: inActiveColor,
+          },
+          itemStyle: {
+            color: '#FFFFFF',
+            borderColor: inActiveColor,
+            borderWidth: 3,
+          },
+        })
+      }
+      return resultNode
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
 
 const activeColor = '#AC014D'
 const inActiveColor = '#9C9FA5'
@@ -61,7 +334,7 @@ const option = reactive({
       label: {
         show: true,
         offset: [0, -70],
-        width: 120,
+        width: 130,
         height: 90,
         lineHeight: 24,
         backgroundColor: activeColor,
@@ -73,50 +346,7 @@ const option = reactive({
         fontWeight: 'bold',
         formatter: '{b}\n{c}',
       },
-      data: [
-        {
-          name: '收运核单',
-          x: 200,
-          y: 500,
-          value: '',
-        },
-        {
-          name: '安检',
-          x: 350,
-          y: 450,
-          value: '',
-        },
-        {
-          name: '理货',
-          x: 520,
-          y: 300,
-          value: '',
-        },
-        {
-          name: '待运区',
-          x: 680,
-          y: 300,
-          value: '',
-        },
-        {
-          name: '货站交接',
-          x: 890,
-          y: 200,
-          value: '',
-        },
-        {
-          name: '机下交接',
-          x: 930,
-          y: 40,
-          value: '',
-        },
-        {
-          name: '装机',
-          x: 780,
-          y: 0,
-          value: '',
-        },
-      ] as any[],
+      data: [] as any[],
       links: [] as any[],
       lineStyle: {
         width: 6,
@@ -138,7 +368,10 @@ watch(
             source: preData.name,
             target: currentData.name,
           }
-          if (!preData.value || !currentData.value) {
+          if (
+            preData.value.includes('未通过') ||
+            currentData.value.includes('未通过')
+          ) {
             Object.assign(link, {
               lineStyle: {
                 color: inActiveColor,
@@ -157,42 +390,14 @@ watch(
 )
 onMounted(() => {
   trackMapCharts = init(trackMap.value as HTMLElement)
-  const nodeValues = getNodeValues()
-  nodeValues.forEach((value, index) => {
-    option.series[0].data[index].value = value
-    if (!value) {
-      option.series[0].data[index].label = {
-        backgroundColor: inActiveColor,
-      }
-      option.series[0].data[index].itemStyle = {
-        color: '#FFFFFF',
-        borderColor: inActiveColor,
-        borderWidth: 3,
-      }
-    } else {
-      delete option.series[0].data[index].label
-      delete option.series[0].data[index].itemStyle
-    }
-  })
   window.addEventListener('resize', resizeHandler)
 })
 onBeforeUnmount(() => {
   window.removeEventListener('resize', resizeHandler)
 })
-const resizeHandler = () => {
+const resizeHandler = _.debounce(() => {
   trackMapCharts.resize()
-}
-const getNodeValues = () => {
-  return [
-    'A32/534件/\n通过/10:25',
-    'B24/534件/\n通过/10:40',
-    'C24/534件/\n通过/11:01',
-    'D32/534件/\n通过/11:25',
-    'E24/534件/\n通过/11:40',
-    'F24/534件/\n通过/12:02',
-    '',
-  ]
-}
+}, 300)
 </script>
 <style lang="scss" scoped>
 .track-wrapper {