轨迹地图修改

src/views/realTime/trackMap/index.vue

@@ -1,11 +1,207 @@
 <template>
-  <div></div>
+  <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">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue'
+import { init, ECharts } from 'echarts'
+import { ElMessage } from 'element-plus'
 
-export default defineComponent({
-  setup() {},
-});
+const inputValue = ref('')
+const searchHandler = () => {
+  ElMessage.info('开发中')
+}
+const clearHandler = () => {}
+
+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: '#AC014D',
+      },
+      label: {
+        show: true,
+        offset: [0, -70],
+        width: 120,
+        height: 90,
+        lineHeight: 24,
+        backgroundColor: '#AC014D',
+        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: '#AC014D',
+        opacity: 1,
+        curveness: 0,
+      },
+    },
+  ],
+})
+watch(
+  () => option.series[0].data,
+  array => {
+    option.series[0].links = array.reduce(
+      (preArray, currentData, currentIndex, orginArray) => {
+        if (currentIndex > 0) {
+          preArray.push({
+            source: orginArray[currentIndex - 1].name,
+            target: currentData.name,
+          })
+        }
+        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: '#9C9FA5',
+      }
+    } else {
+      delete option.series[0].data[index].label
+    }
+  })
+  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></style>
+<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>