icore-pass/src/views/sale/components/offSiteTransportation/inTransit.vue

<template>
  <!-- 在途运输信息选择页面 -->
  <div class="inTransit">
    <el-form :inline="true">
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">时间段</label>
            <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">产品分类</span>
          <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">车牌号</span>
          <el-input v-model="capacityNumber1" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">收货单位</span>
          <el-input v-model="consigneeCompanyName1" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
          <span class="el-form-item__span" style="width: auto;">承运单位</span>
          <el-input v-model="carrierName" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
        <span class="el-form-item__span" style="width: auto;">门岗名称</span>
        <el-input v-model="gatepostName" placeholder="请输入内容"></el-input>
      </el-form-item> 
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">报警类型</label>
          <el-select v-model="exceptionType" placeholder="报警类型">
            <el-option
              v-for="item in exceptionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" @click="onSearch"><i class="el-icon-search"></i>查询</el-button>
        <el-button type="primary" @click="exportData">导出</el-button>
      </el-form-item>
    </el-form>
    <!-- 执行中 -->
<el-tabs v-model="activeName" >
    <el-tab-pane label="执行中" name="first">
    <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"
            >实时轨迹</el-button
          >
        </template>
      </el-table-column>
    </mergeRowTable>
    </el-tab-pane>
    <!-- 已结束 -->
      <el-tab-pane label="已结束" name="second">
        <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>
        </mergeRowTable>
      </el-tab-pane>
      <!-- 有异常 -->
      <el-tab-pane label="有异常" name="third">
        <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"
            >实时轨迹</el-button
          >
          <el-button @click="inTransitAlarmclick(scope.row.orderNumber)" type="text" size="small" style="font-size: 17px">运输报警</el-button>
        </template>
      </el-table-column>
        </mergeRowTable>
      </el-tab-pane>
    </el-tabs>
    <div style="height: 100%">
      <vxe-modal width="1237" height="731" v-model="value7" show-zoom resize>
            <template #default>
              <PathView v-bind.sync="pathOption"></PathView>
            </template>
      </vxe-modal>
    </div>
    <!-- <div style="height: 100%">
      <vxe-modal width="1237" height="731" v-model="value6" show-zoom resize>
            <template #default>
              <inTransitOrderMileage v-bind.sync="mileOption"></inTransitOrderMileage>
            </template>
          </vxe-modal>
    </div> -->
    <div style="height: 100%">
      <vxe-modal width="1237" height="731" v-model="value5" show-zoom resize>
        <template #default>
          <dilTable ref="tableAlarm" v-bind.sync="optionAlarm"></dilTable>
        </template>
      </vxe-modal>
    </div> 
  </div>
</template>


<script>
import { sjTime } from "@/utils/sharedJsFile";
import PathView from "./mapTest.vue"
export default {
  name: "inTransit",
  components: { 
    PathView,
  },
  data() {
    return {
      exceptionTypes:[{
          value: '全部类型',
          label: '全部类型'
        }, {
          value: '离线',
          label: '离线'
        },{
          value: '停车',
          label: '停车'
        },{
          value: '偏离',
          label: '偏离'
        }],
        inputValues:[{
          value: '螺纹钢',
          label: '螺纹钢'
        }, {
          value: '微粉',
          label: '微粉'
        },{
          value: '带钢',
          label: '带钢'
        },{
          value: '钢坯',
          label: '钢坯'
        },{
          value: '其他',
          label: '其他'
        }],
       gatepostNames1: [{
          value: '信钢北门出口',
          label: '信钢北门出口'
        }, {
          value: '科创微粉出口',
          label: '科创微粉出口'
        },{
          value: '象屿库',
          label: '象屿库'
        },{
          value: '智同库',
          label: '智同库'
        },{
          value: '中联厂出口',      
          label: '中联厂出口'
        }],
      dateValue:[new Date(), new Date()],
      inputValue:"螺纹钢",
      exceptionType:"全部类型",
      selectOrderNumber:"",
      capacityNumber1:"",
      carrierName:"",
       gatepostName:"",
       value7:false,
       value6:false,
       value5:false,
       dialogVisible:false,
      consigneeCompanyName1:"",
      status: "",
      state: "",
      activeName: "first",
      option: {       
        // 表格请求数据的地址
        requestUrl: "/api/v1/otms/getInTransitTransportation?apiId=468",
        comparison:"orderNumber",
        columnIndexs:[2,1,5,6,7,8,12,13],  
      },
       option2: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/otms/getFinishTruckOrderInfo?apiId=468",
        comparison:"orderNumber",
        columnIndexs:[2,1,5,6,7,8,12,13],
      },
      optionAlarm:{
        requestUrl: "",
      },
      pathOption:{
           orderNumber:'',
        capacityNumber:'',
         startPointName:'',
        endPointName:'',
      },
      mileOption:{
        orderNumber:''
      },
      alarmOption:{
        orderNumber:''
      },
       option3: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/otms/getHaveAbnormalTruckOrderInfo?apiId=468",
        comparison:"orderNumber",
        columnIndexs:[2,1,5,6,7,8,12,13],
      }
      
    };
  },
  mounted() {
    console.log("nijfdsojfosafj")
    this.restaurants = this.loadAll();
    // this.onSearch();
    
  },
  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;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
     querySearch2(queryString, cb) {
      var restaurants = [
        { value: "信钢北门出口"},
        { value: "科创微粉出口"},
        { value: "象屿库"},
        { value: "智同库"},
      ];
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
     querySearch3(queryString, cb) {
      var restaurants = [
        { value: "离线"},
        { value: "停车"},
        { value: "偏离"},
        { value: "全部类型"},
      ];
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "螺纹钢"},
         { value: "微粉"},
        { value: "带钢"},
        { value: "钢坯"},
        { value: "其他"},
      ];
    },
    exportData(){
        

        let tHeader = [];
        let filterVal = [];
        if(this.activeName=="first"){
          this.$refs.tab.dataColumnData.filter( (item,i) =>{
                    tHeader.push(item.label);
                        filterVal.push(item.prop);
                    } )
            this.export2Excel(tHeader,filterVal,this.$refs.tab.dataTabel,'执行中表格');
        }else if(this.activeName=="second"){
            this.$refs.tab2.dataColumnData.filter( (item,i) =>{
              tHeader.push(item.label);
                  filterVal.push(item.prop);
              } )
          this.export2Excel(tHeader,filterVal,this.$refs.tab2.dataTabel,'已完成表格');
        } else if(this.activeName=="third"){
            this.$refs.tab3.dataColumnData.filter( (item,i) =>{
                      tHeader.push(item.label);
                          filterVal.push(item.prop);
                      } )
            this.export2Excel(tHeader,filterVal,this.$refs.tab3.dataTabel,'有异常表格');
        }
        
        
    },
    export2Excel(tHeader,filterVal,dataTabel,exeName) {
      var that = this;
       this.downloadLoading = true
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        console.log("export_json_to_excel",export_json_to_excel)
        let list = dataTabel;
        let data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, exeName); // 导出的表格名称
      });
    },
    //3.格式转换
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    onSearch(){
  
      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,
                      "capacityNumbers": this.capacityNumber1,
                      "carrierNames":this.carrierName,
                      "outGatepostNames":this.gatepostName,
                      "consigneeCompanyNames": this.consigneeCompanyName1});
      }
      if(this.activeName=="second"){
      //改变已完成条件              
      this.$refs.tab2.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                      "endTime": sjTime(this.dateValue[1]),
                      "materialNames": this.inputValue,
                      "capacityNumbers": this.capacityNumber1,
                      "carrierNames":this.carrierName,
                      "outGatepostNames":this.gatepostName,
                      "consigneeCompanyNames": this.consigneeCompanyName1});
      }
      if(this.activeName=="third"){
      //改变有异常条件              
      this.$refs.tab3.setDataRequestQuery({"startTime":sjTime(this.dateValue[0]),
                      "endTime": sjTime(this.dateValue[1]),
                      "materialNames": this.inputValue,
                      "capacityNumber1": this.capacityNumber1,
                      "carrierName1":this.carrierName,
                      "abnormalType":this.exceptionType=="全部类型"?"":this.exceptionType,
                      "outGatepostNames":this.gatepostName,
                      "consigneeCompanyName1": this.consigneeCompanyName1});
      }                              
    },


    //other
    click(row) {
     
        this.pathOption.orderNumber=row.orderNumber;
        this.pathOption.capacityNumber=row.capacityNumber;
        this.pathOption.startPointName="达钢集团"+row.outGatepostName,
        this.pathOption.endPointName=row.deliveryAddress,
        this.value7=true;

    },
    historyclick(row){
      
      this.pathOption.orderNumber=row.orderNumber;
        this.pathOption.capacityNumber=row.capacityNumber;
        this.pathOption.startPointName="达钢集团"+row.outGatepostName,
        this.pathOption.endPointName=row.deliveryAddress,
         console.log(this.pathOption,"this.pathOption")
        this.value7=true;
    },
    allDistanceclick(orderNumber){
      //this.$router.push("/offsite/inTransitOrderMileage?orderNumber="+orderNumber);
    
      this.mileOption.orderNumber=orderNumber;
      this.value6=true;
    },
    inTransitAlarmclick(orderNumber){
      this.optionAlarm.requestUrl="/api/v1/otms/getTransportAbnormalInfo?apiId=472&orderNumbers="+orderNumber;
      this.value5=true;
    },
    },
};
</script>
<style lang='scss' scoped>
.el-input {
    width: 150px;
    margin-left: 5px;
}
span.el-form-item__span {
    float: left;
    margin-top: 7px;
}
.homeworkPath {
  .top {
    padding: 20px 30px;
  }
}
</style>