From 2362411833ffde65f16a35d626bee17068826529 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Thu, 12 Dec 2024 16:50:38 +0800
Subject: [PATCH] md

---
 src/views/oms/common/LineOrderChart.vue       | 137 ++++++++
 .../oms/emisWaybill/panel/traceInfoPanel.vue  | 322 ++++++++++++++++++
 src/views/oms/emisWaybill/waybillTracking.vue | 177 ++++++++++
 3 files changed, 636 insertions(+)
 create mode 100644 src/views/oms/common/LineOrderChart.vue
 create mode 100644 src/views/oms/emisWaybill/panel/traceInfoPanel.vue
 create mode 100644 src/views/oms/emisWaybill/waybillTracking.vue

diff --git a/src/views/oms/common/LineOrderChart.vue b/src/views/oms/common/LineOrderChart.vue
new file mode 100644
index 0000000..fe86091
--- /dev/null
+++ b/src/views/oms/common/LineOrderChart.vue
@@ -0,0 +1,137 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ xAxisData,orderStateData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: xAxisData,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: '订单统计', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: orderStateData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        // {
+        //   name: '应付',
+        //   smooth: true,
+        //   type: 'line',
+        //   itemStyle: {
+        //     normal: {
+        //       color: '#3888fa',
+        //       lineStyle: {
+        //         color: '#3888fa',
+        //         width: 2
+        //       },
+        //       areaStyle: {
+        //         color: '#f3f8ff'
+        //       }
+        //     }
+        //   },
+        //   data: actualData,
+        //   animationDuration: 2800,
+        //   animationEasing: 'quadraticOut'
+        // }
+
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/oms/emisWaybill/panel/traceInfoPanel.vue b/src/views/oms/emisWaybill/panel/traceInfoPanel.vue
new file mode 100644
index 0000000..a8bb287
--- /dev/null
+++ b/src/views/oms/emisWaybill/panel/traceInfoPanel.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="" style="background-color: #F3F4F8;padding:0px">
+      <div v-if="extBillInfo!=null" style="line-height:30px;margin-top: 0px; font-size: 14px;width:100%"  class="panel" >
+        <div style="display: inline-flex;    width: 100%;">
+          <div style="width:20%;color:black;font-weight: 600; font-size: 18px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;">{{ extBillInfo.sendSiteName  }}</div>
+          <div style="position: relative;    text-align: center;">
+            <svg t="1726269105329" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="2426" width="200" height="50" xmlns="http://www.w3.org/2000/svg">
+              <path d="M 1467.617 655.095 L -534.095 655.095 C -589.52 653.579 -620.594 625.007 -590.029 603.666 C -577.517 594.93 -556.788 589.42 -534.095 588.798 L 1467.617 588.798 C 1523.042 587.282 1561.249 613.957 1536.386 636.814 C 1523.467 648.693 1496.419 655.882 1467.617 655.095 Z" p-id="2427" style="fill: rgb(135, 5, 5);"/>
+              <path d="M 1522.012 638.505 C 1515.688 638.601 1509.572 636.246 1504.945 631.934 L 1319.089 456.404 C 1304.914 444.275 1309.185 421.349 1326.776 415.138 C 1335.725 411.978 1345.694 414.332 1352.284 421.161 L 1538.567 596.692 C 1552.099 609.534 1546.655 632.209 1528.767 637.507 C 1526.574 638.157 1524.3 638.493 1522.012 638.505 Z" p-id="2428" style="fill: rgb(148, 6, 6);"/>
+            </svg>
+            <div style="position: absolute; top:0px;left:35%;    color: gray;">{{ extBillInfo.waybillStatus }}</div>
+            <div style="position: absolute; top:30px;left:35%;    color: gray;">{{ extBillInfo.productTypeName }}</div>
+
+          </div>
+          <div style="width:20%;color:black;font-weight: 600;font-size: 18px;  display: flex;
+          justify-content: center;
+          align-items: center;text-align: center;">{{ extBillInfo.destinationName  }}</div>
+        </div>
+        <div style="width: 100%;color:black;font-weight: 600;padding-left: 10px;">
+          <div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==0"> 预计送达:{{ extBillInfo.estimateDate }}</div>
+          <div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==1"> 签收时间:{{ extBillInfo.signDate }}</div>
+        </div>
+
+
+      </div>
+      <div v-if="extBillInfo!=null&&extBillInfo.blBillPicDispatchRmk==1" style="line-height:30px;margin-top: 5px; font-size: 14px;display: inline-flex;width:100%"  class="panel" >
+        <div style="width: 85%;color:gray;padding-left: 10px;">签收底单</div>
+        <div style="width: 15%;text-align: center;font-size: 14px;" @click="viewSignedPic">查看</div>
+      </div>
+
+      <!-- <el-scrollbar style="height:400px;"> -->
+        <div style="min-height:50px;margin-top: 10px;"  class="panel" >
+          <!-- <div style="font-weight: 600;margin-bottom: 20px;padding-left: 40px;">运单号:{{ billCode }}</div> -->
+          <el-timeline :reverse="reverse">
+              <el-timeline-item
+                v-for="(step, stepIndex) in traceInfoList"
+                :key="stepIndex"
+                :timestamp="step.time"
+                :type="stepIndex==0?'primary ':''"
+                >
+                {{step.content}}
+              </el-timeline-item>
+          </el-timeline>
+        </div>
+      <!-- </el-scrollbar> -->
+
+
+      <div  v-if="open" style="z-index: 2004;width: 97%;
+    padding: 15px 15px;
+    color: gray;" class="code-wrapper code-dialog">
+        <div class="input-captcha" style="    position: relative;">
+            <div>
+              请输入手机号码后四位
+            </div>
+            <div style="position: absolute;right: 5px;top: 0px;">
+              <span
+                @click.stop="clostBtnClick"
+              >
+                <i class="el-icon-close" style="font-size: 26px;color: black"></i>
+              </span>
+            </div>
+
+            <div class="input-box">
+              <div class="input-content">
+                <input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="">
+                <input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="">
+                <input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="">
+                <input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input0')" type="number" placeholder="">
+              </div>
+            </div>
+            <div style="width:100%;text-align: center">
+              <el-button type="primary" plain style="    margin-top: 10px;
+    width: 60%;
+    height: 40px;" @click="handleShowSignPic" >确   定</el-button>
+            </div>
+         </div>
+      </div>
+
+      <div v-if="open" class="code-mask" tabindex="0" style="z-index: 2003;"></div>
+
+
+      <el-dialog
+      :visible.sync="dialogVisible"
+      title="图片"
+      width="100%"
+      append-to-body
+    >
+      <img
+        :src="signImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { queryTraceInfo,querySignedPic } from "@/api/oms/emisCommon";
+
+export default {
+  name: "TraceInfoPanel",
+  props:{
+    billCode:{
+      type: String,
+    }
+  },
+  dicts: [],
+  data() {
+    return {
+      reverse: false,
+      open:false,
+      showSignPic:false,
+      dialogVisible:false,
+      signImageUrl:"",
+      input0: '',
+      input1: '',
+      input2: '',
+      input3: '',
+      latestBillList:[],
+      extBillInfo:null,
+      // 遮罩层
+      loading: true,
+      // 地球洲表格数据
+      traceInfoList: []
+
+    };
+  },
+  created() {
+    this.queryTrace();
+  },
+  watch: {
+      "billCode": {
+          handler (newValue, oldValue) {
+            this.queryTrace();
+          },
+          deep: true
+      }
+  },
+  methods: {
+    /** 查询地球洲列表 */
+    queryTrace() {
+
+      console.log("queryTrace===>==>",this.billCode);
+         this.loading = true;
+        //  if(!this.billCode){
+        //   return this.$message.error("输入查询单号")
+        //  }
+         queryTraceInfo(this.billCode,"1234").then(response => {
+          this.traceInfoList = response.data;
+          this.extBillInfo=response.extBillInfo;
+          // this.recordLatestBill(this.billCode);
+          this.loading = false;
+        });
+
+    },
+    latestClick(item){
+        this.billCode=item;
+        this.queryTrace();
+    },
+    clostBtnClick(){
+      this.open=false;
+    },
+    viewSignedPic(){
+        this.input0='';
+        this.input1='';
+        this.input2='';
+        this.input3='';
+        this.open=true;
+    },
+    handleShowSignPic(){
+        let code=this.input0+""+this.input1+""+this.input2+""+this.input3;
+        this.loading = true;
+        querySignedPic(this.billCode,code).then(response => {
+          // console.log(response.data);
+          this.signImageUrl = response.data;
+          this.loading = false;
+          this.open=false;
+          this.dialogVisible=true;
+        });
+
+    },
+    deleteValue (inputValue, previousItem) { // 键盘按下时$event，当前input，上一个input
+      if (this[inputValue].length > 0) { // 当前有值，清空之
+        this[inputValue] = ''
+      } else { // 当前没有值，光标跳转到上一个input，并清空该input值
+        this.$nextTick(() => {
+          this.$refs[previousItem].focus()
+          this[previousItem] = ''
+          this[inputValue] = ''
+        })
+      }
+    },
+    changeValue (e, inputValue, nextItem) { // 键盘抬起时$event，当前input，下一个input
+      if (e.keyCode !== 8) {
+        this.$nextTick(() => {
+          this.$refs[nextItem].focus() // 截取当前值最后一位，跳到下一个input
+          this[inputValue] = (this[inputValue]).toString().slice(-1)
+        })
+      }
+    }
+
+  }
+};
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss">
+
+:deep #app{
+  background-color: #fff!important;
+}
+
+.el-input__inner:hover {
+    border-color: #eeeeee;
+}
+
+.panel {
+    background-color: #fff;
+    padding: 5px;
+    line-height: 30px;
+}
+
+
+
+
+ .input-captcha{
+  min-height: 200px;
+  .input-box {
+    text-align: center;
+    min-height: 100px;
+    border-radius: 8px;
+    width: 100%;
+    max-width: 500px;
+    display: inline-block;
+    padding: 10px;
+    box-sizing: border-box;
+    input {
+      vertical-align: middle;
+    }
+    & + .input-box {
+      margin-top: 20px;
+    }
+    // 六个span时的样式
+    .simple-input-content {
+      label {
+        padding: 20px;
+      }
+      span {
+        vertical-align: middle;
+        border: 1px solid silver;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        &.highlight {
+          border-color: purple;
+        }
+      }
+    }
+    // 六个input时的样式
+    .input-content {
+      padding: 0px;
+      input {
+        width: 60px;
+        height: 60px;
+        font-size: 40px;
+        text-align: center;
+        margin-right: 5px;
+        border: 1px solid #d3d3d3;
+        border-radius: 5px;
+      }
+    }
+    /* 去掉input[type=number]浏览器默认的icon显示 */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button { // chrome
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+    input{ // 火狐
+        -moz-appearance:textfield;
+    }
+  }
+}
+
+.code-wrapper {
+  position: absolute;
+  top: 100px;
+  text-align: center;
+}
+.code-dialog{
+  margin: 0 auto 50px;
+    background: #fff;
+    border-radius: 2px;
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.code-mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .5;
+    background: #000
+}
+
+.his-q-code {
+    background-color: #fcfcfc;
+    border-color: #d2d2d2;
+    color: #000000;
+    font-weight: 700;
+    border-radius: 20px;
+}
+
+</style>
diff --git a/src/views/oms/emisWaybill/waybillTracking.vue b/src/views/oms/emisWaybill/waybillTracking.vue
new file mode 100644
index 0000000..78e82d7
--- /dev/null
+++ b/src/views/oms/emisWaybill/waybillTracking.vue
@@ -0,0 +1,177 @@
+<template>
+  <XdPageContainer  class="dashboard-container" >
+    <!-- class="app-container" -->
+    <el-form slot="pageHeader" style="background: white; padding: 10px;"  class="queryForm" :model="queryParams" ref="queryForm"   size="mini" :maxShow="9" label-width="100px"    @search="handleQuery" @reset="resetQuery">
+      <el-form-item label="按运单号查询" prop="billCode">
+                  <XdTextareaInput
+                    v-model="queryParams.billCode"
+                    :placeholder="$t('多个流水号逗号或换行隔开')"
+                    clearable
+                    :rows="4"
+                  />
+                </el-form-item>
+                <el-button type="primary" icon="el-icon-search"  @click="handleQuery">查询</el-button>
+
+    </el-form>
+
+    <div
+        slot="pageContent"
+        style="padding: 0px 10px 5px 0px;overflow:auto;max-height: 700px"
+    >
+
+      <div style="display:inline-flex;width: 100%;border-bottom: 1px solid #d9d9d9;margin-bottom: 20px;">
+        <div class="form-group-title"><span class="title">{{ $t('跟踪信息') }}</span></div>
+      </div>
+      <!-- <el-scrollbar style="height: 100%"> -->
+        <!-- 如果显示子单勾选则循环显示子单 -->
+        <div v-for="(item,index) in emisWaybillList" :key="resetRefreshId+'.'+index">
+          <CardWithHeader :header="'运单号:'+item" >
+              <template v-slot:body>
+                <TraceInfoPanel  :billCode="item" :key="resetRefreshId+'.d.'+index" ></TraceInfoPanel>
+              </template>
+          </CardWithHeader>
+        </div>
+
+      <!-- </el-scrollbar> -->
+    </div>
+
+  </XdPageContainer>
+</template>
+
+<script>
+
+import { formatSearchStr,deepClone } from '@/utils/index'
+import CardWithHeader from '@/components/CardWithHeader/index.vue';
+import TraceInfoPanel from '@/views/oms/emisWaybill/panel/traceInfoPanel.vue';
+
+export default {
+  name: "WaybillTracking",
+  props:{
+  },
+  components: {
+    CardWithHeader,
+    TraceInfoPanel
+  },
+  dicts: [],
+  data() {
+    return {
+      resetRefreshId:null,
+      // 运单列表表格数据
+      emisWaybillList: [],
+      blSubBill:0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100,
+        billCode: null,
+
+      },
+    };
+  },
+  watch: {
+  "$route": {
+        handler (newValue, oldValue) {
+          console.log("===>billCode==>",this.$route.query.billCode);
+          this.queryParams.billCode=this.$route.query.billCode;
+          this.handleQuery();
+        },
+        deep: true
+  },
+  },
+  created() {
+    if(this.$route.query.action=="query"){
+      this.queryParams.billCode=this.$route.query.billCode;
+      this.handleQuery();
+    }
+  },
+  methods: {
+    getUUID() {
+        return Math.random().toString(36).substring(3,10);
+    },
+    lpadZero(val,len) {
+      return (new Array(len + 1).join('0') + val).slice(-len);
+    },
+    /** 查询运单列表列表 */
+    getList() {
+
+      this.emisWaybillList=[];
+
+      this.loading = true;
+
+      if(!this.queryParams.billCode){
+        return;
+      }
+
+      this.resetRefreshId="tracing-"+Math.random().toString(36).substring(3,10);
+
+      if(this.queryParams.billCode){
+          let billCodeStr=formatSearchStr(this.queryParams.billCode);
+          let billCodeArr=billCodeStr.split(",");
+          let newBillCodeArr=[];
+          billCodeArr.forEach(item=>{
+            if(item.trim().length > 0){
+              newBillCodeArr.push(item.trim());
+            }
+          });
+
+          this.emisWaybillList=newBillCodeArr;
+          console.log("===>getList==>",this.emisWaybillList);
+      }
+
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+:deep .el-form-item__label-wrap {
+  margin-left: 0 !important;
+  }
+  .el-divider{
+    margin-top: 0px;
+    background: 0 0;
+    border-top: 1px solid #E6EBF5;
+  }
+  .el-divider__text {
+    color: #0955ee;
+    cursor: pointer;
+  }
+
+
+   .query-label {
+    .el-radio{
+        display: block;
+        line-height: 23px;
+        white-space: normal;
+        margin-right: 0;
+    }
+  }
+
+  .queryForm .el-form-item {
+    margin-bottom: 0px !important;
+}
+
+.tip :deep.is-success > .el-step__line > i {
+    background-color: #67c23a;
+}
+.tip :deep.is-error > .el-step__line > i {
+    background-color: #f56c6c;
+}
+
+
+</style>