src/components/DilCommonUI/index.js

@@ -1,7 +1,8 @@
 import Table from "./packages/table/index.js";
 import Form from "./packages/form/index.js";
+import MergeRowTable from "./packages/mergeRowTable/index.js";
 
-const components = [Table, Form];
+const components = [Table, Form, MergeRowTable];
 
 const install = function(Vue) {
   components.forEach(component => {

src/components/DilCommonUI/packages/mergeRowTable/index.js

@@ -0,0 +1,7 @@
+import MergeRowTable from "./src/mergeRowTable.vue";
+
+MergeRowTable.install = function(Vue) {
+  Vue.component(MergeRowTable.name, MergeRowTable);
+};
+
+export default MergeRowTable;

src/components/DilCommonUI/packages/mergeRowTable/src/mergeRowTable.js

@@ -0,0 +1,407 @@
+import Sortablejs from "sortablejs";
+export default {
+  data() {
+    return {
+      // 等数据渲染完了再显示
+      isShow: false,
+      // 自己 请求体 参数
+      dataRequestQuery: {},
+      // 自己的表数据
+      dataTabel: [],
+      // 自己的表头数据
+      dataColumnData: [],
+      // 拖拽的表头数据
+      dataDropColumn: [],
+      // 自己的数据总条数
+      dataTotal: 0,
+      // 自己的当前页面数
+      dataCurrentPage: 1,
+      // 自己的每页显示条目个数
+      dataPageSize: 10,
+      // 保存表格所有页面所选中的数据
+      dataRadioId: [],
+      // 保存表格单选的数据 保存数据的id
+      dataRadioId: "",
+      // 合并数组
+      spanArr:[],
+
+    };
+  },
+  created() {
+    if(this.isHeigth){
+      window.addEventListener('resize',this.getHeight)
+      this.getHeight();
+    }
+    
+    this.dataCurrentPage = this.currentPage;
+    this.dataPageSize = this.pageSize;
+    this.requestData();
+  },
+  mounted() {
+    //行拖拽
+    // this.rowDrop();
+    //列拖拽
+    // this.columnDrop();
+  },
+  methods: {
+
+    //记录每一行的合并数
+    getSpanArr(data) {
+      //每次调用方法初始化
+      this.spanArr = [];
+      for (var i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.spanArr.push(1);
+          this.pos = 0;
+        } else {
+          // 判断当前元素与上一个元素是否相同
+          console.log(this.comparison)
+          if (data[i][this.comparison] === data[i - 1][this.comparison]) {
+            this.spanArr[this.pos] += 1;
+            this.spanArr.push(0);
+          } else {
+            this.spanArr.push(1);
+            this.pos = i;
+          }
+        }
+      }
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      console.log("this.columnIndexs")
+      console.log(this.columnIndexs)
+      console.log("this.columnIndexs")
+    
+      if (
+        this.columnIndexs.indexOf(columnIndex)!=-1
+      ) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
+    },
+    getHeight(){
+      this.height = window.innerHeight - this.shiyHeigth;
+      console.log(this.height);
+    },
+    //计算合计列
+    getSummaries(columns,data) {
+      const sums = [];
+      columns.forEach((column, index) => {
+       const values = data.map(item => Number(item[column.property]));
+           if (column.property =='resultNetWeight' ) {
+            sums[index] = values.reduce((prev, curr) => {
+             const value = Number(curr);
+             if (!isNaN(value)) {
+               return prev + curr;
+             } else {
+               return prev;
+             }
+            }, 0);
+            console.log(sums )
+            sums[index];
+           }
+      });
+      // console.log("净重：" + sums)
+      return sums
+      },
+    // 通过请求获取数据
+    requestData(options) {
+      let pageNum = undefined;
+      let pageSize = undefined;
+      
+      if (options) {
+        pageNum = options.pageNum;
+        pageSize = options.pageSize;
+      }
+      
+      if (this.requestUrl) {
+        // 处理请求地址逻辑
+        let url;
+        if (this.requestUrl.indexOf("//") > -1) {
+          url = this.requestUrl;
+        } else {
+          url = this.requestUrl;
+        }
+        // 判断是否需要在请求体中放入参数
+        if(this.requestQuery){
+          this.dataRequestQuery=this.requestQuery;
+          // console.log(this.dataRequestQuery.resultBreakId)
+        }
+        let data = undefined;
+        for (const key in this.dataRequestQuery) {
+          const val = this.dataRequestQuery[key];
+          console.log(val)
+          if (val||val==0) {
+            if (!data) data = {};
+            data[key] = val;
+          }
+        }
+        //判断是否是带分页查询
+        if(this.isKuang){
+          // 发送请求
+          this.axios
+          .post(url, data, {
+            // 请求地址 中
+            params: {
+              pageNum: 1,
+              pageSize: pageSize || this.dataPageSize
+            }
+          })
+          .then(response => {
+            let d = response.data.data;
+            this.dataTabel = d.list;
+            this.dataTotal = d.total;
+            this.getSpanArr(this.dataTabel);
+            //执行成功的回调
+            this.$emit('func',response.data.data);
+            this.refreshColumnData(d.columnData);
+            this.isShow = true;
+          });
+        }else{
+          // 发送请求
+          this.axios
+            .post(url, data, {
+              // 请求地址 中
+              params: {
+                pageNum: pageNum || this.dataCurrentPage,
+                pageSize: pageSize || this.dataPageSize
+              }
+            })
+            .then(response => {
+              let d = response.data.data;
+              this.dataTabel = d.list;
+              this.dataTotal = d.total;
+              this.getSpanArr(this.dataTabel);
+              //执行成功的回调
+              this.$emit('func',response.data.data);
+              this.refreshColumnData(d.columnData);
+              this.isShow = true;
+            });
+        }
+      } else {
+        console.warn("requestUrl 参数不能为 null");
+      }
+    },
+    // 刷新表头显示数据
+    refreshColumnData(columnData) {
+      // 表头只赋值一次(在查出全部数据的情况下才只赋值一次)
+      console.log("biaof")
+      console.log(this.dataColumnData.length)
+      if (this.dataColumnData.length > 0){
+          return;
+      } 
+      // 如果前端有写表头，则加在后端表头前面
+      
+      const d = this.columnData.concat(columnData);
+      // 把操作列拼接到最后一列
+      this.dataColumnData = d;
+      this.dataDropColumn = [].concat(this.dataColumnData);
+    },
+    // 排序回调
+    sortChange({ column, prop, order }) {
+      // column : 列的数据
+      // prop : 排序字段参数名
+      // order : 排序方式 （ascending:升序;descending:降序;null:无）
+
+      // 前端排序
+      // const sort = {
+      //   ascending: (a, b) => {
+      //     a[prop] = this.getString(a[prop]);
+      //     b[prop] = this.getString(b[prop]);
+      //     return a[prop].localeCompare(b[prop] || "", 'zh-CN');
+      //   },
+      //   descending: (a, b) => {
+      //     a[prop] = this.getString(a[prop]);
+      //     b[prop] = this.getString(b[prop]);
+      //     return b[prop].localeCompare(a[prop] || "", 'zh-CN')
+      //   },
+      // };
+      // this.dataTabel.sort(sort[order]);
+      // 前端排序
+
+      // 后端排序
+      let s = {
+        ascending: "asc",
+        descending: "desc"
+      };
+
+      let value = {
+        orderType: s[order] || undefined,
+        orderField: order ? prop : undefined
+      };
+
+      this.setDataRequestQuery(value);
+    },
+    // 更新请求参数
+    setDataRequestQuery(value) {
+      console.log(value);
+      let q = this.dataRequestQuery;
+      for (const key in value) {
+        q[key] = value[key];
+      }
+      this.requestData(q);
+      this.$emit("update:requestQuery", q);
+      this.dataRequestQuery = q;
+    },
+    // 格式化字符串
+    getString(str) {
+      if (str != null && str != undefined && str.toString) {
+        return str.toString();
+      } else {
+        return str || "";
+      }
+    },
+    // 当某一行被点击时会触发该事件
+    rowClick(row, column, event) {
+      if (this.selectionType == "radio") {
+        if (this.dataRadioId == row.ROW_ID) {
+          this.dataRadioId = "";
+          row = {};
+        } else {
+          this.dataRadioId = row.ROW_ID;
+        }
+        this.$emit("radio-change", row);
+      }
+    },
+    // 多选的选中行改变回调
+    selectionChange(selection) {
+      // this.dataSelection = selection;
+      // 将多选中的数据抛出
+      this.$emit("selection-change", selection);
+    },
+    // 当表格的筛选条件发生变化的时候会触发该事件，
+    // 参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
+    filterChange(filters) {
+      let value = {};
+      for (const key in filters) {
+        value[key] = filters[key].length > 0 ? filters[key] : undefined;
+      }
+      // 每次筛选时，都默认将页面改为第一页，避免数据过少时，显示没有数据
+      this.currentChange(1, false);
+      this.setDataRequestQuery(value);
+    },
+    // 行拖拽
+    rowDrop() {
+      const tbody = document.querySelector(".el-table__body-wrapper tbody");
+      const _this = this;
+      Sortablejs.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = _this.dataTabel.splice(oldIndex, 1)[0];
+          _this.dataTabel.splice(newIndex, 0, currRow);
+        }
+      });
+    },
+    // 列拖拽
+    columnDrop() {
+      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
+      this.sortablejs = Sortablejs.create(wrapperTr, {
+        animation: 180,
+        delay: 0,
+        handle: ".allowDrag",
+        onEnd: evt => {
+          // 因为序号列和单多选列不在数组中，所以需要进行偏移计算
+          const offset = this.dragColumnOffset;
+          evt.oldIndex -= offset;
+          evt.newIndex -= offset;
+          // 换列
+          const oldItem = this.dataDropColumn[evt.oldIndex];
+          this.dataDropColumn.splice(evt.oldIndex, 1);
+          this.dataDropColumn.splice(evt.newIndex, 0, oldItem);
+        }
+      });
+    },
+    // current-page 改变时会触发
+    currentChange(val, isRequest = true) {
+      if (isRequest) {
+        this.requestData({ pageNum: val });
+      }
+      // 最后通知父节点页面改变
+      this.dataCurrentPage = val;
+      this.$emit("update:current-page", val);
+    },
+    // pageSize 改变时会触发
+    sizeChange(val) {
+      this.dataPageSize = val;
+      this.requestData({});
+      this.$emit("update:size-change", val);
+    }
+  },
+  computed: {
+    // 计算是否使用排序功能
+    dataSortable() {
+      return function (item) {
+        if (item.template) {
+          return false;
+        } else if (item.sortable) {
+          return item.sortable;
+        } else {
+          return this.sortable;
+        }
+      };
+    },
+    // 计算每列的最小宽度
+    dataColumnMinWidth() {
+      return function (item) {
+        let mw = 0;
+        if (this.dataSortable(item)) {
+          // 如果使用排序功能
+          mw += 30;
+        }
+
+        if (item.filters && item.filters.length > 0) {
+          mw += 20;
+        }
+        if (item.label) {
+          mw += item.label.toString().length * 30;
+        }
+        return mw;
+      };
+    },
+    // 计算拖拽列的偏移差
+    dragColumnOffset() {
+      let o = 0;
+      if (this.showIndex) {
+        o++;
+      }
+      if (this.selectionType != "") {
+        o++;
+      }
+      return o;
+    }
+  },
+  watch: {
+    requestQuery: {
+      deep: true,
+      handler(val, oldVal) {
+        let q = this.dataRequestQuery;
+        for (const key in val) {
+          q[key] = val[key] ? val[key] : undefined;
+        }
+        this.setDataRequestQuery(q);
+      }
+    },
+  },
+  // 注册组件
+  components: {
+    // 代理组件
+    componentProxy: {
+      props: {
+        html: {
+          default: ""
+        },
+        scope: {
+          default() {
+            return {};
+          }
+        }
+      },
+      template: ``,
+      created() {
+        this.$options.template = this.html;
+      }
+    }
+  }
+};

src/components/DilCommonUI/packages/mergeRowTable/src/mergeRowTable.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="st-base-table" v-show="isShow">
+    <!-- 表格主体 -->
+    <el-table
+      ref="mainTable"
+      :data="dataTabel"
+      row-key="ROW_ID"
+      :stripe="stripe"
+      :border="border"
+      :cell-class-name="cellClassName"
+      :height="height"
+      :highlight-current-row="highlightCurrentRow"
+      style="width:100%"
+      :span-method="objectSpanMethod"
+      @sort-change="sortChange"
+      @selection-change="selectionChange"
+      @filter-change="filterChange"
+      @row-click="rowClick"
+      @row-dblclick="rowDbClick"
+      v-loading="loading"
+      element-loading-text="玩命加载中"
+      element-loading-spinner="el-icon-loading"
+      :isHeigth="isHeigth"
+      :shiyHeigth="shiyHeigth"
+    >
+      <!-- 多选列 -->
+      <el-table-column
+        v-if="selectionType == 'select'"
+        type="selection"
+        width="50"
+        align="center"
+        fixed="left"
+        :reserve-selection="reserveSelection"
+        :resizable="false"
+      >
+      </el-table-column>
+
+      <!-- 单选 -->
+      <el-table-column
+        v-if="selectionType == 'radio'"
+        width="50"
+        align="center"
+        label="单选"
+        fixed="left"
+        :resizable="false"
+      >
+        <template slot-scope="scope">
+          <el-radio
+            :value="dataRadioId"
+            :label="scope.row.ROW_ID"
+            @click.native.prevent.stop="rowClick(scope.row)"
+          >
+            {{ "" }}
+          </el-radio>
+        </template>
+      </el-table-column>
+
+      <!-- 序号 -->
+      <el-table-column
+        v-if="showIndex"
+        type="index"
+        width="50"
+        label="序号"
+        align="center"
+        fixed="left"
+        :resizable="false"
+      >
+      </el-table-column>
+
+      <!-- 表格列 -->
+      <el-table-column
+        v-for="(item, index) in dataColumnData"
+        :key="item.data_id || 'auto_' + index"
+        v-bind="item"
+        :column-key="dataDropColumn[index].prop"
+        :align="item.align || align"
+        :sortable="dataSortable(item)"
+        :show-overflow-tooltip="item.showOverflowTooltip || showOverflowTooltip"
+        :min-width="item['min-width'] || dataColumnMinWidth(item)"
+        :class-name="item['class-name'] || 'allowDrag'"
+      >
+        <!-- 表格每行的内容 -->
+        <div slot-scope="scope">
+          <!-- 功能位置 -->
+          <component-proxy
+            v-if="item.template"
+            :html="item.template"
+            :scope="scope"
+            v-on="$listeners"
+          >
+          </component-proxy>
+
+          <!-- 文本位置 -->
+          <template v-else>
+            {{ dataTabel[scope.$index][dataDropColumn[index].prop] }}
+          </template>
+        </div>
+      </el-table-column>
+
+      <!-- 默认插槽 -->
+      <slot></slot>
+    </el-table>
+
+    <!-- 分页器 -->
+    <el-pagination
+      v-if="isPagination"
+      :layout="layout"
+      :current-page="dataCurrentPage"
+      :page-sizes="pageSizes"
+      :page-size="dataPageSize"
+      :total="dataTotal"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import table from "./mergeRowTable.js";
+export default {
+  name: "MergeRowTable",
+  extends: table,
+  props: {
+    // 合并行下标
+    columnIndexs:{
+     default: []
+    },
+    //比对字段
+    comparison:{
+      default: ""
+    },
+    shiyHeigth: {
+      default: null
+    },
+    isHeigth: {
+      default: false
+    },
+    drawer: {
+      default: false
+    },
+    //判断是否带分页查询
+    isKuang: {
+      default: false
+    },
+    // 请求地址
+    requestUrl: {
+      default: ""
+    },
+    // 请求参数 请求体中的参数
+    requestQuery: {
+      default() {
+        return {};
+      }
+    },
+    // 表头数据
+    columnData: {
+      default() {
+        return [];
+      }
+    },
+    // 是否显示序号
+    showIndex: {
+      default: true
+    },
+    // 是否显示选择框
+    // radio : 显示单选框
+    // select : 显示多选框
+    selectionType: {
+      default: ""
+    },
+    // 是否在数据翻页后保留之前选中的数据（需指定 row-key）
+    reserveSelection: {
+      default: true
+    },
+    // 是否为斑马纹 table
+    stripe: {
+      default: true
+    },
+    // Table 的高度，默认为自动高度。
+    // 如果 height 为 number 类型，单位 px；
+    // 如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
+    height: {
+      default: null
+    },
+    // Table 的最大高度。合法的值为数字或者单位为 px 的高度。
+    //sdada
+    maxHeight: {
+      default: null
+    },
+    // 是否启用排序
+    sortable: {
+      default: "custom"
+    },
+    // 对齐方式 left/center/right
+    align: {
+      default: "center"
+    },
+    // 是否带有纵向边框
+    border: {
+      default: true
+    },
+    // 是否要高亮当前行
+    highlightCurrentRow: {
+      default: false
+    },
+    // 当内容过长被隐藏时显示 tooltip
+    showOverflowTooltip: {
+      default: true
+    },
+    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
+    rowClassName: {
+      default() {
+        return ({ row, rowIndex }) => "";
+      }
+    },
+    // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
+    cellClassName: {
+      default() {
+        return ({ row, rowIndex }) => "";
+      }
+    },
+    loading: {
+      default: false
+    },
+    // 是否启用分页器
+    isPagination: {
+      default: true
+    },
+    // 当前页数，支持 .sync 修饰符
+    currentPage: {
+      default: 1
+    },
+    // 每页显示个数选择器的选项设置
+    pageSizes: {
+      default() {
+        return [10, 20, 50, 100, 200, 1000, 50000];
+      }
+    },
+    // 每页显示条目个数，支持 .sync 修饰符
+    pageSize: {
+      default: 10
+    },
+    //组件布局，子组件名用逗号分隔
+    layout: {
+      default: "total, prev, pager, next, sizes, jumper"
+    }
+  },
+  watch: {
+    requestUrl() {
+      this.refreshData();
+    },
+    drawer(val) {
+      if (val) {
+        this.dataRadioId = null;
+      }
+    }
+  },
+  methods: {
+    // 刷新表格数据
+    refreshData() {
+      this.requestData();
+      // 多选表格清空用户的选择
+      this.$refs.mainTable.clearSelection();
+    },
+    rowDbClick(row) {
+      console.log(row);
+      console.log("我被双击了");
+      this.$emit("rowDbClick", row);
+    },
+    toggleRowExpansion(row, expanded) {
+      this.$refs.mainTable.toggleRowExpansion(row, expanded);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@media print {
+  .el-pagination {
+    display: none;
+  }
+}
+/deep/.el-table .success-row {
+  background: #fff !important;
+  color: #f56c6c;
+  height: 44px;
+  line-height: 46px;
+  font-size: 22px;
+  font-weight: 700;
+}
+</style>

src/views/sale/app.js

@@ -23,7 +23,6 @@ import 'vxe-table/lib/style.css'
 Vue.use(VXETable)
 Vue.prototype.$XModal = VXETable.modal
 
-
 import AMap from 'vue-amap';
 window._AMapSecurityConfig = {
   securityJsCode:'6a75ec7300ae4ba9f385d1bb452ffd21',

src/views/sale/components/offSiteTransportation/checkGPS.vue

@@ -834,6 +834,5 @@ span.item_details2 {
   height: 40px;
   width: 240px;
   float: left;
-  top: 0px;
 }
 </style>

src/views/sale/components/offSiteTransportation/inTransit.vue

@@ -51,7 +51,7 @@
     <!-- 执行中 -->
 <el-tabs v-model="activeName" >
     <el-tab-pane label="执行中" name="first">
-    <dilTable ref="tab" v-bind.sync="option">
+    <mergeRowTable ref="tab" v-bind.sync="option">
       <el-table-column fixed="right" label="操作" width="110">
         <template slot-scope="scope">
           <el-button @click="click(scope.row)" type="text" size="small" style="font-size: 17px"
@@ -59,22 +59,22 @@
           >
         </template>
       </el-table-column>
-    </dilTable>
+    </mergeRowTable>
     </el-tab-pane>
     <!-- 已结束 -->
       <el-tab-pane label="已结束" name="second">
-        <dilTable ref="tab2" v-bind.sync="option2">
+        <mergeRowTable ref="tab2" v-bind.sync="option2">
          <el-table-column fixed="right" label="操作" width="220">
         <template slot-scope="scope">
           <el-button @click="historyclick(scope.row)" type="text" size="small" style="font-size: 17px">历史轨迹</el-button>
           <!-- <el-button @click="allDistanceclick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">总距离</el-button> -->
         </template>
       </el-table-column>
-        </dilTable>
+        </mergeRowTable>
       </el-tab-pane>
       <!-- 有异常 -->
       <el-tab-pane label="有异常" name="third">
-        <dilTable ref="tab3" v-bind.sync="option3">
+        <mergeRowTable ref="tab3" :span-method="objectSpanMethod" v-bind.sync="option3">
          <el-table-column fixed="right" label="操作" width="220">
         <template slot-scope="scope">
            <el-button @click="click(scope.row)" type="text" size="small" style="font-size: 17px"
@@ -83,7 +83,7 @@
           <el-button @click="inTransitAlarmclick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">运输报警</el-button>
         </template>
       </el-table-column>
-        </dilTable>
+        </mergeRowTable>
       </el-tab-pane>
     </el-tabs>
     <div style="height: 100%">
@@ -184,10 +184,14 @@ export default {
       option: {       
         // 表格请求数据的地址
         requestUrl: "/api/v1/otms/getInTransitTransportation?apiId=468",
+        comparison:"orderNumber",
+        columnIndexs:[2,1,5,6,7,8,12],  
       },
        option2: {
         // 表格请求数据的地址
         requestUrl: "/api/v1/otms/getFinishTruckOrderInfo?apiId=468",
+        comparison:"orderNumber",
+        columnIndexs:[2,1,5,6,7,8,12],
       },
       optionAlarm:{
         requestUrl: "",
@@ -207,7 +211,10 @@ export default {
        option3: {
         // 表格请求数据的地址
         requestUrl: "/api/v1/otms/getHaveAbnormalTruckOrderInfo?apiId=468",
+        comparison:"orderNumber",
+        columnIndexs:[2,1,5,6,7,8,12],
       }
+      
     };
   },
   mounted() {
@@ -217,6 +224,47 @@ export default {
     
   },
   methods: {
+     //记录每一行的合并数
+    getSpanArr(data) {
+      //每次调用方法初始化
+      this.spanArr = [];
+      for (var i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.spanArr.push(1);
+          this.pos = 0;
+        } else {
+          // 判断当前元素与上一个元素是否相同
+          if (data[i].orderNumber === data[i - 1].orderNumber) {
+            this.spanArr[this.pos] += 1;
+            this.spanArr.push(0);
+          } else {
+            this.spanArr.push(1);
+            this.pos = i;
+          }
+        }
+      }
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (
+        columnIndex == 0 ||
+        columnIndex == 1 ||
+        columnIndex == 7 ||
+        columnIndex == 8 ||
+        columnIndex == 9 ||
+        columnIndex == 10 ||
+        columnIndex == 11 ||
+        columnIndex == 12 ||
+        columnIndex == 13 ||
+        columnIndex == 14
+      ) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
+    },
     showPathView(data){
       this.dialogVisible=!this.dialogVisible;
       this.selectOrderNumber=data.orderNumber;
@@ -315,6 +363,8 @@ export default {
   
       if(this.activeName=="first"){
       //改变执行中条件
+      console.log(this.$refs.tab)
+      console.log("this.$refs.tab")
       this.$refs.tab.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                       "endTime": sjTime(this.dateValue[1]),
                       "materialNames": this.inputValue,

src/views/sale/components/offSiteTransportation/mapTest.vue

@@ -8,7 +8,7 @@
                  <label class="item_details">收货地址:{{endPointName}}</label>
                  <br/>
              </div>
-             <div class="driving_information">  
+             <div class="driving_information2">  
                 <label class="item_details">时间:{{runRoute.gtm}}</label>
                 <br/>
                 <label class="item_details">车速:{{runRoute.spd}}千米/小时</label>
@@ -254,9 +254,9 @@ export default {
         },
         //defualt数据
         defaultDate(){
-            let that=this;
-            that.pathNavigator.start(that.listPath[0].runPath.length)
-            that.pathNavigator.pause();
+            // let that=this;
+            // that.pathNavigator.start(that.listPath[0].runPath.length)
+            // that.pathNavigator.pause();
             
         },
         //初始化地图
@@ -460,7 +460,7 @@ export default {
 	margin: 0;
 	font-family: "微软雅黑";
 }
-.driving_information {
+.driving_information2 {
     position: relative;
     top: 50px;
 }

src/views/sale/components/transport_excute/tms-offsite/arrivalResult.vue

@@ -63,20 +63,6 @@
           </template>
         </el-table-column>
       </el-table>
-      <dilTable ref="excelDom" v-bind.sync="option">
-        <el-table-column fixed="right" label="照片游览" width="120">
-          <template slot-scope="scope">
-            <el-button
-              @click="toPhotoClick(scope.row.orderNumber)"
-              type="text"
-              size="small"
-              style="font-size: 6px"
-            >
-              抵达满货照片</el-button
-            >
-          </template>
-        </el-table-column>
-      </dilTable>
     </div>
     <!-- 分页器 -->
     <el-pagination
@@ -246,7 +232,6 @@ export default {
         }
         //判断是否是带分页查询
         if (this.isKuang) {
-          console.log("AAAAAAAAAAAAAAAAAAAAA");
           // 发送请求
           this.axios
             .post(url, data, {
@@ -261,14 +246,11 @@ export default {
               this.dataTabel = d.list;
               this.getSpanArr(this.dataTabel);
               this.dataTotal = d.total;
-              console.log(this.dataTabel);
-              console.log("this.dataTabe");
               //执行成功的回调
               this.$emit("func", response.data.data);
               this.refreshColumnData(d.columnData);
             });
         } else {
-          console.log("BBBBBBBBBBBBBBBBBBBBBBBBB");
           // 发送请求
           this.axios
             .post(url, data, {
@@ -283,10 +265,6 @@ export default {
               this.dataTabel = d.list;
               this.dataTotal = d.total;
               this.getSpanArr(this.dataTabel);
-              response;
-              console.log(response);
-              console.log(this.dataTabel);
-              console.log("this.dataTabe");
               //执行成功的回调
               this.$emit("func", response.data.data);
               this.refreshColumnData(d.columnData);
@@ -330,35 +308,19 @@ export default {
       if (this.endTime) {
         endTime = sjTime(this.endTime);
       }
-      if (startTime && endTime) {
-        if (startTime < endTime) {
-          this.option.requestUrl =
-            "/api/v1/tms/getReceiptResult?apiId=470" +
-            "&startTime=" +
-            startTime +
-            "&endTime=" +
-            endTime +
-            "&i=" +
-            new Date() +
-            "&con=" +
-            this.input;
-        } else {
+      if(startTime && endTime){
+        if(startTime < endTime){
+          this.requestUrl = '/api/v1/otms/getArrivalResult?apiId=470' + "&startTime=" + startTime + "&endTime=" + endTime + "&i="+new Date()+"&con="+this.input; 
+          this.requestData(this.option)
+        }else{
           this.startTime = null;
           this.endTime = null;
           this.$message.warning("开始时间要比结束时间早");
         }
-      } else {
-        console.log(startTime && endTime);
-        this.option.requestUrl =
-          "/api/v1/tms/getReceiptResult?apiId=470" +
-          "&startTime=" +
-          startTime +
-          "&endTime=" +
-          endTime +
-          "&i=" +
-          new Date() +
-          "&con=" +
-          this.input;
+      }else{
+        console.log(startTime && endTime)
+         this.requestUrl = '/api/v1/otms/getArrivalResult?apiId=470' + "&startTime=" + startTime + "&endTime=" + endTime + "&i="+new Date()+"&con="+this.input; 
+        this.requestData(this.option)
       }
     }
   }

src/views/sale/components/transport_excute/tms-offsite/receiptResult.vue

@@ -30,15 +30,64 @@
       </el-button> -->
     </div>
     <div class="table">
-      <dilTable ref="excelDom" v-bind.sync="option" >
-       <el-table-column fixed="right" label="照片游览" width="120">
-          <template slot-scope="scope">
-            <el-button @click="toPhotoClick(scope.row.orderNumber)" type="text" size="small" style="font-size: 6px">
-                签收照片</el-button>
-          </template>
-      </el-table-column>
-      </dilTable>
+      <el-table
+        @filter-change="filterChange"
+        :data="dataTabel"
+        :span-method="objectSpanMethod"
+        border
+        style="width: 100%; margin-top: 20px"
+      >
+        <el-table-column prop="orderNumber" label="运输订单号">
+        </el-table-column>
+        <el-table-column prop="capacityNumber" label="车牌号">
+        </el-table-column>
+        <el-table-column prop="materialName" label="物资名称">
+        </el-table-column>
+        <el-table-column prop="materialSpecification" label="规格">
+        </el-table-column>
+        <el-table-column prop="materialModel" label="型号"> </el-table-column>
+        <el-table-column prop="resultNetWeight" label="净重"> </el-table-column>
+        <el-table-column prop="resultGrossWeightTime" label="净重时间">
+        </el-table-column>
+        <el-table-column prop="resultOutGateTime" label="出厂时间">
+        </el-table-column>
+        <el-table-column prop="outGatepostName" label="出厂门岗">
+        </el-table-column>
+        <el-table-column prop="carrierName" label="承运商名称">
+        </el-table-column>
+        <el-table-column prop="deliveryAddress" label="详细收货地址">
+        </el-table-column>
+        <el-table-column prop="receiveName" label="客户名称"> </el-table-column>
+        <el-table-column prop="resultArrivalAddress" label="抵达收货点的地址">
+        </el-table-column>
+        <el-table-column prop="insertTime" label="抵达作业时间">
+        </el-table-column>
+        <el-table-column fixed="right" label="照片游览">
+          <template slot-scope="scope">
+            <el-button
+              @click="toPhotoClick(scope.row.orderNumber)"
+              type="text"
+              size="small"
+              style="font-size: 6px"
+            >
+              抵达满货照片</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <!-- 分页器 -->
+    <el-pagination
+      v-if="isPagination"
+      :layout="layout"
+      :current-page="dataCurrentPage"
+      :page-sizes="pageSizes"
+      :page-size="dataPageSize"
+      :total="dataTotal"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+    >
+    </el-pagination>
      <vxe-modal width="549px" height="731px" v-model="isShow" show-footer>
         <div class="demo-image__preview">
           <el-image 
@@ -57,6 +106,19 @@ export default {
   name: "homeworkPath",
   data() {
     return {
+       spanArr: [],
+      dataTabel: [],
+      // 自己的数据总条数
+      dataTotal: 0,
+      // 自己的每页显示条目个数
+      dataPageSize: 10,
+      // 每页显示个数选择器的选项设置
+      pageSizes: [10, 20, 50, 100, 200, 1000, 50000],
+      layout: "total, prev, pager, next, sizes, jumper",
+      // 自己的当前页面数
+      dataCurrentPage: 1,
+      // 是否启用分页器
+      isPagination: true,
       restaurants: [],
       input: "",
       srcList:[],
@@ -64,16 +126,177 @@ export default {
        isShow:false,
       startTime: null,
       endTime: null,
+      // 表格请求数据的地址
+      requestUrl: "/api/v1/otms/getReceiptResult?apiId=470",
+      beforeRow: 0,
+      thatrowspan: 1,
       option: {
-        // 表格请求数据的地址
-        requestUrl: "/api/v1/otms/getReceiptResult?apiId=470",
-      },
+        pageSize: 10,
+        pageNum: 1
+      }
     };
+  },
+   mounted() {
+    this.requestData(this.option);
   },
   created(){
    
   },
   methods: {
+     //记录每一行的合并数
+    getSpanArr(data) {
+      //每次调用方法初始化
+      this.spanArr = [];
+      for (var i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.spanArr.push(1);
+          this.pos = 0;
+        } else {
+          // 判断当前元素与上一个元素是否相同
+          if (data[i].orderNumber === data[i - 1].orderNumber) {
+            this.spanArr[this.pos] += 1;
+            this.spanArr.push(0);
+          } else {
+            this.spanArr.push(1);
+            this.pos = i;
+          }
+        }
+      }
+    },
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (
+        columnIndex == 0 ||
+        columnIndex == 1 ||
+        columnIndex == 7 ||
+        columnIndex == 8 ||
+        columnIndex == 9 ||
+        columnIndex == 10 ||
+        columnIndex == 11 ||
+        columnIndex == 12 ||
+        columnIndex == 13 ||
+        columnIndex == 14
+      ) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
+    },
+    // 参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
+    filterChange(filters) {
+      let value = {};
+      for (const key in filters) {
+        value[key] = filters[key].length > 0 ? filters[key] : undefined;
+      }
+      // 每次筛选时，都默认将页面改为第一页，避免数据过少时，显示没有数据
+      this.currentChange(1, false);
+      this.setDataRequestQuery(value);
+    },
+    // current-page 改变时会触发
+    currentChange(val, isRequest = true) {
+      if (isRequest) {
+        this.requestData({ pageNum: val });
+      }
+      // 最后通知父节点页面改变
+      this.dataCurrentPage = val;
+      this.$emit("update:current-page", val);
+    },
+    // pageSize 改变时会触发
+    sizeChange(val) {
+      this.dataPageSize = val;
+      this.requestData({});
+      this.$emit("update:size-change", val);
+    },
+    // 通过请求获取数据
+    requestData(options) {
+      let pageNum = undefined;
+      let pageSize = undefined;
+
+      if (options) {
+        pageNum = options.pageNum;
+        pageSize = options.pageSize;
+      }
+      console.log(this.requestUrl);
+      if (this.requestUrl) {
+        // 处理请求地址逻辑
+        let url;
+        if (this.requestUrl.indexOf("//") > -1) {
+          url = this.requestUrl;
+        } else {
+          url = this.requestUrl;
+        }
+        // 判断是否需要在请求体中放入参数
+        if (this.requestQuery) {
+          this.dataRequestQuery = this.requestQuery;
+          // console.log(this.dataRequestQuery.resultBreakId)
+        }
+        let data = undefined;
+        for (const key in this.dataRequestQuery) {
+          const val = this.dataRequestQuery[key];
+          console.log(val);
+          if (val || val == 0) {
+            if (!data) data = {};
+            data[key] = val;
+          }
+        }
+        //判断是否是带分页查询
+        if (this.isKuang) {
+          // 发送请求
+          this.axios
+            .post(url, data, {
+              // 请求地址 中
+              params: {
+                pageNum: 1,
+                pageSize: pageSize || this.dataPageSize
+              }
+            })
+            .then(response => {
+              let d = response.data.data;
+              this.dataTabel = d.list;
+              this.getSpanArr(this.dataTabel);
+              this.dataTotal = d.total;
+              //执行成功的回调
+              this.$emit("func", response.data.data);
+              this.refreshColumnData(d.columnData);
+            });
+        } else {
+          // 发送请求
+          this.axios
+            .post(url, data, {
+              // 请求地址 中
+              params: {
+                pageNum: pageNum || this.dataCurrentPage,
+                pageSize: pageSize || this.dataPageSize
+              }
+            })
+            .then(response => {
+              let d = response.data.data;
+              this.dataTabel = d.list;
+              this.dataTotal = d.total;
+              this.getSpanArr(this.dataTabel);
+              //执行成功的回调
+              this.$emit("func", response.data.data);
+              this.refreshColumnData(d.columnData);
+            });
+        }
+      } else {
+        console.warn("requestUrl 参数不能为 null");
+      }
+    },
+    // 刷新表头显示数据
+    refreshColumnData(columnData) {
+      // 表头只赋值一次(在查出全部数据的情况下才只赋值一次)
+      if (this.dataColumnData.length > 0) {
+        return;
+      }
+      // 如果前端有写表头，则加在后端表头前面
+      const d = this.columnData.concat(columnData);
+      // 把操作列拼接到最后一列
+      this.dataColumnData = d;
+      this.dataDropColumn = [].concat(this.dataColumnData);
+    },
      toPhotoClick(orderNumber){
       this.axios
        .post("/api/v1/otms/getReceivingPhotoByUrl?orderNumber="+orderNumber)
@@ -101,15 +324,17 @@ export default {
       }
       if(startTime && endTime){
         if(startTime < endTime){
-          this.option.requestUrl = '/api/v1/tms/getReceiptResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
-        }else{
+          this.requestUrl = '/api/v1/tms/getReceiptResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
+           this.requestData(this.option);
+       }else{
           this.startTime = null;
           this.endTime = null;
           this.$message.warning('开始时间要比结束时间早')
         }
       }else{
         console.log(startTime && endTime)
-         this.option.requestUrl = '/api/v1/tms/getReceivingResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
+         this.requestUrl = '/api/v1/tms/getReceivingResult?apiId=471' + "&startTime=" + startTime + "&endTime=" + endTime + "&i=" +new Date()+"&con="+this.input; 
+        this.requestData(this.option);
       }
     },
    }