SZYGM1.0/src/views/realTime/trackMap/index.vue

<template>
  <div class="track-wrapper">
    <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-button
          class="search-button"
          size="default"
          type="primary"
          @click="searchHandler"
          >运单查询</el-button
        >
      </div>
    </div>
    <div class="track-map-wrapper">
      <div ref="trackMap" class="track-map" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { init, ECharts } from 'echarts'
import { ElMessage } from 'element-plus'

const inputValue = ref('')
const searchHandler = () => {
  ElMessage.info('开发中')
}
const clearHandler = () => {}

const activeColor = '#AC014D'
const inActiveColor = '#9C9FA5'
const trackMap = ref<HTMLElement | null>(null)
let trackMapCharts: ECharts
const option = reactive({
  tooltip: {
    show: false,
  },
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'none',
      top: 150,
      bottom: 80,
      symbolSize: 24,
      itemStyle: {
        color: activeColor,
      },
      label: {
        show: true,
        offset: [0, -70],
        width: 120,
        height: 90,
        lineHeight: 24,
        backgroundColor: activeColor,
        borderRadius: 4,
        align: 'center',
        color: '#FFFFFF',
        fontSize: 16,
        fontFamily: 'Microsoft YaHei',
        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[],
      links: [] as any[],
      lineStyle: {
        width: 6,
        color: activeColor,
        opacity: 1,
        curveness: 0,
      },
    },
  ],
})
watch(
  () => option.series[0].data,
  array => {
    option.series[0].links = array.reduce(
      (preArray, currentData, currentIndex, orginArray) => {
        if (currentIndex > 0) {
          const preData = orginArray[currentIndex - 1]
          const link = {
            source: preData.name,
            target: currentData.name,
          }
          if (!preData.value || !currentData.value) {
            Object.assign(link, {
              lineStyle: {
                color: inActiveColor,
              },
            })
          }
          preArray.push(link)
        }
        return preArray
      },
      []
    )
    trackMapCharts.setOption(option)
  },
  { deep: true }
)
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 = () => {
  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',
    '',
  ]
}
</script>
<style lang="scss" scoped>
.track-wrapper {
  width: 100%;
  height: 100%;
  .track-header {
    margin-bottom: 16px;
    .search {
      &-input {
        width: 240px;
        margin-right: 12px;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
      }
      &-button {
        background: #d5327b;
        border-radius: 4px;
        border: none;
      }
    }
  }
  .track-map-wrapper {
    width: 100%;
    height: calc(100% - 32px - 16px);
    background: url('@/assets/bg_map.jpg') no-repeat center/100% 100%;
    .track-map {
      height: 100%;
    }
  }
}
</style>