|
|
@@ -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>
|
