//钢材统计报表
<template>
  <div class="purchasFuelNewMonitor">
    <div class="tableTop">
      <el-form :inline="true" style="margin-top :5px">
        <el-form-item>
          <el-select
            v-model="screen"
            placeholder="请选择需筛选的内容"
            clearable
            style="width:100px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:170px"
            v-model="input"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="screen1"
            placeholder="请选择需筛选的内容"
            clearable
            style="width:100px"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="width:170px"
            v-model="input1"
            placeholder="请输入查询条件"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >订单日期：</label
          >
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="选择日期"
            style="width:150px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="选择日期"
            style="width:150px"
            :picker-options="pickerOptions1"
          >
          </el-date-picker>
          <el-button type="primary" class="btn" @click="onclick">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportAllReportToExcel"
            >下载Excel</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="checkTrans()"
            ><i class="el-icon-truck"></i>轨迹</el-button
          >
        </el-form-item>
        <el-form-item>
          <label
            class="el-form-item__label"
            style="width: auto;font-size: 16px;line-height: auto;"
            >车数/件数： {{ totalCapacity }}/{{ totalNumber }}
          </label>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="visibleList"
        :span-method="objectSpanMethod"
        ref="tableRef"
        border
        style="width: 100%; margin-top: 20px"
        :height="maxHeight"
        :max-height="maxHeight"
        :row-class-name="tableRowClassName"
        @cell-click="cellClik"
        @cell-mouse-enter="cellMouse1"
        @cell-mouse-leave="cellLeave1"
        @row-click="rowClick"
        :cell-style="cellStyle"
        @filter-change="filterChange"
        :key="saleSteelKey"
        id="salesLogisticsStat_saleSteelReports_table"
        individual-panel
        @resetTable="reset"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
          :resizable="false"
          v-if="!columnNoRoutList.includes('序号')"
        >
          <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="订单日期"
          width="110px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="saleMakeDate"
          label="制单日期"
          width="130px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="capacityNo"
          column-key="capacityNo"
          label="车号"
          align="center"
          width="90px"
          sortable
          show-overflow-tooltip
          :filters="filterCapacityList"
        >
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="客户"
          width="180px"
          align="center"
          column-key="consigneeName"
          :filters="filterConsigneeList"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          column-key="materialNameList"
          label="物料名称"
          align="center"
          width="150px"
          sortable
          :filters="filtermaterialNameList"
          v-if="!columnNoRoutList.includes('物资名称')"
        >
        </el-table-column>
        <el-table-column
          prop="materialSpe"
          label="规格型号"
          column-key="materialSpe"
          align="center"
          sortable
          :filters="filtermaterialSpe"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="saleOrderStatus"
          column-key="saleOrderStatus"
          label="销售订单状态"
          width="110px"
          align="center"
          :filters="filterSaleOrderStatus"
          sortable
          v-if="!columnNoRoutList.includes('销售订单状态')"
        >
        </el-table-column>

        <!-- <el-table-column
          prop="areaName"
          label="销售片区"
          width="150px"
          align="center"
          column-key="saleAreaList"
          :filters="filterSaleAreaList"
        > -->
        <!-- </el-table-column> -->
        <el-table-column
          prop="carrierName"
          label="承运商"
          align="center"
          width="80px"
          column-key="carrierList"
          sortable
          show-overflow-tooltip
          :filters="filterCarrierList"
          v-if="!columnNoRoutList.includes('承运商')"
        >
        </el-table-column>

        <el-table-column
          prop="materialNum"
          label="物资件数"
          align="center"
          width="50px"
          v-if="!columnNoRoutList.includes('物资件数')"
        >
        </el-table-column>
        <el-table-column
          prop="materialThoWeight"
          label="理重"
          align="center"
          width="50px"
          v-if="!columnNoRoutList.includes('理重')"
        >
        </el-table-column>
        <el-table-column
          prop="addressPlace"
          label="收货地址"
          width="250px"
          sortable
          column-key="addressPlace"
          :filters="filteraddressPlace"
          v-if="!columnNoRoutList.includes('收货地址')"
        >
        </el-table-column>

        <el-table-column
          prop="saleRemark"
          column-key="saleRemark"
          label="摘要"
          width="150px"
          align="center"
          :filters="filterSaleRemark"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('摘要')"
        >
        </el-table-column>
        <el-table-column
          prop="truckRemark"
          label="备注"
          width="150"
          align="center"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('备注')"
        >
        </el-table-column>
        <el-table-column
          prop="capacityTel"
          label="司机电话"
          width="120px"
          align="center"
          v-if="!columnNoRoutList.includes('司机电话')"
        >
        </el-table-column>
        <el-table-column
          prop="tareWeightTime"
          label="皮重时间"
          width="130px"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('皮重时间')"
        >
        </el-table-column>
        <el-table-column
          prop="tareWeight"
          label="皮重"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('皮重')"
        >
        </el-table-column>

        <el-table-column
          prop="grossWeightTime"
          label="毛重时间"
          width="130px"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('毛重时间')"
        >
        </el-table-column>
        <el-table-column
          prop="grossWeight"
          label="毛重"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('毛重')"
        >
        </el-table-column>
        <el-table-column
          prop="netWeight"
          label="净重"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('净重')"
        >
        </el-table-column>
        <el-table-column
          prop="priceValue"
          label="实际运价"
          width="100px"
          v-if="!columnNoRoutList.includes('实际运价')"
        >
        </el-table-column>
        <el-table-column
          prop="detailsAmount"
          label="实际运费"
          width="100px"
          v-if="!columnNoRoutList.includes('实际运费')"
        ></el-table-column>
        <el-table-column
          prop="orderNo"
          label="运输订单号"
          width="180px"
          align="center"
          v-if="!columnNoRoutList.includes('运输订单号')"
        >
        </el-table-column>
        <el-table-column
          prop="saler"
          label="业务员"
          align="center"
          v-if="!columnNoRoutList.includes('业务员')"
        >
        </el-table-column>
        <el-table-column
          prop="shipperName"
          label="发货单位"
          width="170px"
          align="center"
          v-if="!columnNoRoutList.includes('发货单位')"
        >
        </el-table-column>
        <el-table-column
          prop="isSelfMention"
          label="是否自提"
          align="center"
          v-if="!columnNoRoutList.includes('是否自提')"
        >
        </el-table-column>

        <el-table-column
          prop="saleOrderNo"
          label="销售订单号"
          width="200px"
          align="center"
          v-if="!columnNoRoutList.includes('销售订单号')"
        >
        </el-table-column>
        <el-table-column
          prop="closeEntryId"
          label="金蝶分录ID"
          width="120px"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('金蝶分录ID')"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="订单变更时间"
          width="120px"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('订单变更时间')"
        >
        </el-table-column>
        <el-table-column
          prop="saleOrderInertUpdateRemark"
          label="销售订单变更记录"
          width="120px"
          show-overflow-tooltip
          v-if="!columnNoRoutList.includes('销售订单变更记录')"
        >
        </el-table-column>
      </el-table>
    </div>
    <div>
      <vxe-modal
        width="80%"
        height="80%"
        v-model="isShow3"
        show-footer
        show-zoom
        class="vxeModal"
      >
        <div class="demo-image__preview" v-for="(item, i) in srcList" :key="i">
          <span>{{ item.title }}</span>
          <el-image
            :src="item.src"
            fit="fill"
            @click.prevent.right="receiveClick(item.src, '抵达')"
          >
            <div slot="error" class="image-slot">
              <span>司机未上传图片</span>
            </div>
          </el-image>
        </div>
      </vxe-modal>
      <vxe-modal width="80%" height="80%" v-model="isShow4" show-zoom>
        <div class="demo-image__preview" v-for="(item, i) in srcList2" :key="i">
          <el-image
            :src="item.src"
            fit="fill"
            @click.prevent.right="receiveClick(item.src, '签收')"
          >
            <div slot="error" class="image-slot">
              <span>司机未上传图片</span>
            </div>
          </el-image>
        </div>
      </vxe-modal>
    </div>
    <div style="height: 100%">
      <vxe-modal
        width="1237"
        height="731"
        v-model="value7"
        show-zoom
        resize
        title="轨迹查询"
      >
        <template #default>
          <PathView v-bind.sync="pathOption"></PathView>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<script>
import { sjTime, isVehicleNumber } from '@/utils/sharedJsFile'
import { getCookie } from '@/utils/util.js'
import PathView from './mapTest.vue'
import currentLocation from './currentLocation.vue'
import { downloadFile } from '@/utils/base64ToBlob.js'
export default {
  components: {
    PathView,
    currentLocation
  },
  data() {
    return {
      isCheckGPS: true,
      userId: null,
      orgCode: null,
      taskAllNum: 0,
      noticeInterval: null,
      exceptionHandleVisible: false,
      batchCarrierName: null,
      batchCarrierVisible: false,
      batchAddressProvince: '',
      batchAddressDistrict: '',
      batchAddressTown: '',
      batchPlace: '',
      centerDialogVisibleBatch: false,
      reallyList: [],
      visibleList: [],
      itemHeight: 30,
      scrollTop: 0,
      totalHeight: 0,
      debounceS: false,
      carNumber: '',
      //弹出框
      centerDialogVisible: false,
      //根据车序号查询的值
      steelMap: {},
      //钢材子表数据
      steelList: [],
      drawer: false,
      isShow3: false,
      isShow4: false,
      input: null,
      screen: '',
      screen1: '',
      options: [
        {
          value: '客户',
          lable: '客户'
        },
        {
          value: '承运商',
          lable: '承运商'
        },
        {
          value: '车牌号',
          lable: '车牌号'
        },
        {
          value: '分录ID',
          lable: '分录ID'
        }
      ],
      options1: [
        {
          value: '客户',
          lable: '客户'
        },
        {
          value: '承运商',
          lable: '承运商'
        },
        {
          value: '车牌号',
          lable: '车牌号'
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      startTime: new Date(),
      endTime: new Date(),
      //合计净重
      totalNumber: 0,
      //合计车数
      totalCapacity: 0,
      tableTitle: '销售统计报表',
      capacityList: [],
      carrierList: [],
      tableData: [],
      //筛选条件1（客户）
      filters1: [],
      spanArr: [],
      pos: 0,
      //需要合并列的名称
      mergeList: [
        '选择',
        '序号',
        '整车操作',
        '销售订单状态',
        '销售订单号',
        '发货单位',
        '司机电话',
        '运输订单号',
        '签收地址',
        '签收时间',
        '抵达地址',
        '抵达时间',
        '出厂时间',
        '进厂时间',
        '运单状态',
        '车牌号',
        '承运商',
        '客户',
        '收货地址',
        '业务员',
        '送货单打印',
        '收货客户电话',
        '是否自提',
        '订单日期',
        '短信发送',
        '销售片区',
        '抵达时间',
        '签收时间',
        '系统建议运价',
        '摘要',
        '备注',
        '订单变更时间'
      ],
      //钢材多拼车辆线路ID
      //索引从1-10为1-10拼路线ID
      lineSpelling: [
        0,
        110001,
        110002,
        110003,
        110004,
        110005,
        110006,
        110007,
        110008,
        110009,
        110010
      ],
      tableTitle: '销售钢材统计报表',
      //所有省
      provinceList: [],
      //选中的省
      province: '',
      //所有市
      cityList: [],
      //选中的市
      city: '',
      //所有的县(区)
      countyList: [],
      //选中的县
      county: '',
      //地址输入框的值
      addresText: '',
      //已选中省市县
      address: null,
      //具体地址
      place: null,
      //暂存具体地址
      place1: null,
      //省市县Id
      addressId: null,
      addressRow: {},
      srcList: [],
      src: '',
      isShow: false,
      srcList2: [],
      src2: '',
      isShow2: false,
      input1: '',
      maxHeight: 700,
      //轨迹窗口
      value7: false,
      //实时路径窗口
      value8: false,
      pathOption: {
        orderNumber: '',
        capacityNumber: '',
        startPointName: '',
        endPointName: ''
      },
      saleSteelKey: false,
      tableRowIndex: '',
      isRowClick: 0,
      orgCodeList: [
        'wuliuyunshubu',
        'dagangadmin',
        'zidonghuabu',
        'chengyunshang'
      ],
      isShowOperate: false,
      filterConsigneeList: [],
      filterCarrierList: [],
      filterCapacityList: [],
      filtermaterialNameList: [],
      filterSaleAreaList: [],
      filterorderStatus: [],
      filteraddressPlace: [],
      filtermaterialSpe: [],
      filterSaleRemark: [],
      filterSaleOrderStatus: [],
      filterMap: {},
      //权限控制
      notRoutList: [],
      location: null,
      orderNumber: null,
      capacityNumber: null,
      arrivalReceiving: false,
      arriavlList: [],
      receiveList: [],
      fileListArrival: [],
      fileListReceive: [],
      dialogImageUrl: '',
      dialogVisible: false,
      isLoading: false,
      batchList: [],
      dialogFormVisible: false,
      addresText: null,
      originalPriceValue: null,
      originalAddress: null,
      aaadrawer: false,
      downloadCapacityNo: null,
      batchCarrierList: [],
      columnNoRoutList: [],
      scrollTopUpDownLenght: 0
    }
  },
  created() {
    this.orgCode = getCookie('orgCode')
    this.userId = getCookie('userId')
    if (this.orgCodeList.includes(getCookie('orgCode'))) {
      this.isShowOperate = true
    }
    if (getCookie('orgCode') == 'chengyunshang') {
      this.notRoutList = [
        'checkPoint',
        'checkTrans',
        'carrierName',
        'consigeeTel',
        'province',
        'city',
        'country',
        'place',
        'addressClick',
        'closeOrder',
        'materialNum',
        'closeEntry',
        'capacityNo',
        'batchCarrier',
        'select',
        'exceptionHandle',
        'mergeSplit'
      ]
    }
    if (getCookie('orgCode') == 'shouhuokehu') {
      //如果是收货客户,则查询
      this.axios
        .post('/api/v1/uc/getColumnNoRoutList', {
          orgCode: getCookie('orgCode'),
          tableName: '销售钢材报表'
        })
        .then(res => {
          this.columnNoRoutList = res.data
          console.log(res)
        })
      this.notRoutList = ['select']
    }
    this.cellMouse1 = this.debounce((row, column, cell) => {
      this.cellMouse(row, column, cell)
    }, 100)
    this.cellLeave1 = this.debounce((row, column, cell) => {
      this.cellLeave(row, column, cell)
    }, 100)
    this.getSteelReport()
  },
  watch: {
    tableData: {
      handler(oldVal, newVal) {
        this.filterListChange()
      },
      deep: true,
      immediate: true
    },
    scrollTop: {
      immediate: true,
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          //   debugger
          if (val >= 0 && this.tableData.length > this.visibleList.length) {
            if (
              val >=
              this.tableData.length * 30 -
                document.querySelector('.el-table__body-wrapper').offsetHeight -
                20
            ) {
              val =
                this.tableData.length * 30 -
                document.querySelector('.el-table__body-wrapper').offsetHeight
            }
            if (val <= 0) {
              val = 0
            }
            let upDownLenght = val - this.scrollTopUpDownLenght
            const start = Math.floor(val / this.itemHeight)
            if (upDownLenght < 0) {
              let a =
                this.visibleList[0].rowKey -
                Math.floor(this.maxHeight / this.itemHeight) -
                1
              if (a <= 0) {
                a = 0
              }
              this.visibleList = this.tableData.slice(
                a,
                a + Math.ceil(this.maxHeight / this.itemHeight)
              )
              // this.visibleList = this.tableData.slice(
              //   start,
              //   start + Math.floor(this.maxHeight / this.itemHeight) + 1
              // )
              this.getSpanArr(this.visibleList)
              if (this.visibleList[0].rowKey == 0) {
                document.querySelector(
                  '.el-table__body-wrapper .el-table__body'
                ).style.transform = `translateY(${0}px)`
              } else {
                document.querySelector(
                  '.el-table__body-wrapper .el-table__body'
                ).style.transform = `translateY(${val}px)`
              }
            } else {
              this.visibleList = this.tableData.slice(
                start,
                start + Math.floor(this.maxHeight / this.itemHeight) + 1
              )
              this.getSpanArr(this.visibleList)
              document.querySelector(
                '.el-table__body-wrapper .el-table__body'
              ).style.transform = `translateY(${val}px)`
            }
            this.scrollTopUpDownLenght = val
          }
        })
      }
    }
  },
  computed: {},
  mounted() {
    let that = this
    this.$nextTick(() => {
      window.onresize = () => {
        return (() => {
          this.maxHeight = window.innerHeight - 130
        })()
      }
    })
    this.$refs.tableRef.bodyWrapper.addEventListener('scroll', e => {
      // console.log(e)
      if (this.debounceS) return
      this.debounceS = true
      this.scrollTop = e.target.scrollTop
      let upDownLenght = this.scrollTop - this.scrollTopUpDownLenght
      //   this.scrollTopUpDownLenght = this.scrollTop
      setTimeout(() => {
        this.debounceS = false
      }, 60)
      // document.querySelector(
      //   '.el-table__body-wrapper .el-table__body'
      // ).style.transform = `translateY(0px)`
    })
  },
  activated() {
    this.maxHeight = window.innerHeight - 130
  },
  computed: {},
  methods: {
    //防抖函数--防止用户重复点击
    debounce(func, delay) {
      let timer = null
      return function(...args) {
        if (timer !== null) {
          clearTimeout(timer)
        }
        timer = setTimeout(function() {
          func.apply(this, args)
        }, delay)
      }
    },
    // handleSelectionChange(selection) {
    //   this.batchList = selection
    //   console.log(selection)
    // },
    //筛选
    filterChange(obj) {
      //承运商筛选,后续有待优化
      if (typeof obj.carrierList != 'undefined' && obj.carrierList.length > 0) {
        this.filterMap.carrierList = obj.carrierList
      }
      if (
        typeof obj.carrierList != 'undefined' &&
        obj.carrierList.length == 0
      ) {
        delete this.filterMap.carrierList
      }
      //物资名称筛选,后续有待优化
      if (
        typeof obj.materialNameList != 'undefined' &&
        obj.materialNameList.length > 0
      ) {
        this.filterMap.materialNameList = obj.materialNameList
      }
      if (
        typeof obj.materialNameList != 'undefined' &&
        obj.materialNameList.length == 0
      ) {
        delete this.filterMap.materialNameList
      }
      //车牌号筛选,后续有待优化
      if (typeof obj.capacityNo != 'undefined' && obj.capacityNo.length > 0) {
        this.filterMap.capacityList = obj.capacityNo
      }
      if (typeof obj.capacityNo != 'undefined' && obj.capacityNo.length == 0) {
        delete this.filterMap.capacityList
      }
      //客户筛选,后续有待优化
      if (
        typeof obj.consigneeName != 'undefined' &&
        obj.consigneeName.length > 0
      ) {
        this.filterMap.consigneeNameList = obj.consigneeName
      }
      if (
        typeof obj.consigneeName != 'undefined' &&
        obj.consigneeName.length == 0
      ) {
        delete this.filterMap.consigneeNameList
      }
      //销售片区筛选,后续有待优化
      if (
        typeof obj.saleAreaList != 'undefined' &&
        obj.saleAreaList.length > 0
      ) {
        this.filterMap.saleAreaList = obj.saleAreaList
      }
      if (
        typeof obj.saleAreaList != 'undefined' &&
        obj.saleAreaList.length == 0
      ) {
        delete this.filterMap.saleAreaList
      }
      //物资规格筛选
      if (typeof obj.materialSpe != 'undefined' && obj.materialSpe.length > 0) {
        this.filterMap.materialSpeList = obj.materialSpe
      }
      if (
        typeof obj.materialSpe != 'undefined' &&
        obj.materialSpe.length == 0
      ) {
        delete this.filterMap.materialSpeList
      }
      //收货地址筛选
      if (
        typeof obj.addressPlace != 'undefined' &&
        obj.addressPlace.length > 0
      ) {
        this.filterMap.addressPlaceList = obj.addressPlace
      }
      if (
        typeof obj.addressPlace != 'undefined' &&
        obj.addressPlace.length == 0
      ) {
        delete this.filterMap.addressPlaceList
      }
      if (typeof obj.orderStatus != 'undefined' && obj.orderStatus.length > 0) {
        this.filterMap.orderStatusList = obj.orderStatus
      }
      if (
        typeof obj.orderStatus != 'undefined' &&
        obj.orderStatus.length == 0
      ) {
        delete this.filterMap.orderStatusList
      }
      if (
        typeof obj.saleOrderStatus != 'undefined' &&
        obj.saleOrderStatus.length > 0
      ) {
        this.filterMap.saleOrderStatusList = obj.saleOrderStatus
      }
      if (
        typeof obj.saleOrderStatus != 'undefined' &&
        obj.saleOrderStatus.length == 0
      ) {
        delete this.filterMap.saleOrderStatusList
      }
      if (typeof obj.saleRemark != 'undefined' && obj.saleRemark.length > 0) {
        this.filterMap.saleRemarkList = obj.saleRemark
      }
      if (typeof obj.saleRemark != 'undefined' && obj.saleRemark.length == 0) {
        delete this.filterMap.saleRemarkList
      }
      // if (obj)
      this.onclick(this.filterMap)
    },
    //控制筛选数组变化
    filterListChange() {
      //客户筛选数组
      let consigneeNameList = this.tableData
        .map(e => {
          return e.consigneeName
        })
        .sort()
      //承运商筛选数组
      let carrierNameList = this.tableData
        .map(e => {
          return e.carrierName
        })
        .sort()
      //车牌号筛选数组
      let capacityList = this.tableData
        .map(e => {
          return e.newCapacityNo
        })
        .sort()
      //物资筛选数组
      let materialNameList = this.tableData
        .map(e => {
          return e.materialName
        })
        .filter(e => {
          return e != null
        })
        .sort()
      //销售片区筛选数组
      let saleAreaList = this.tableData
        .map(e => {
          return e.areaName
        })
        .filter(e => {
          return e != null
        })
      let addressPlaceList = this.tableData
        .map(e => {
          return e.addressPlace
        })
        .filter(e => {
          return e != null
        })
        .sort()
      let orderStatusList = this.tableData
        .map(e => {
          return e.orderStatus
        })
        .filter(e => {
          return e != null
        })
      let materialSpeList = this.tableData
        .map(e => {
          return e.materialSpe
        })
        .filter(e => {
          return e != null
        })
        .sort()
      let saleOrderStatusList = this.tableData.map(e => {
        return e.saleOrderStatus
      })
      let saleRemarkList = this.tableData
        .map(e => {
          return e.saleRemark
        })
        .sort()
      this.filterConsigneeList = []
      this.filterCarrierList = []
      this.filterCapacityList = []
      this.filtermaterialNameList = []
      this.filterSaleAreaList = []
      this.filterorderStatus = []
      this.filteraddressPlace = []
      this.filtermaterialSpe = []
      this.filterSaleOrderStatus = []
      this.filterSaleRemark = []
      Array.from(new Set(consigneeNameList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterConsigneeList.push(map)
      })
      Array.from(new Set(carrierNameList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterCarrierList.push(map)
      })
      Array.from(new Set(capacityList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterCapacityList.push(map)
      })
      Array.from(new Set(materialNameList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filtermaterialNameList.push(map)
      })
      Array.from(new Set(saleAreaList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterSaleAreaList.push(map)
      })
      Array.from(new Set(addressPlaceList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filteraddressPlace.push(map)
      })
      Array.from(new Set(orderStatusList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterorderStatus.push(map)
      })
      Array.from(new Set(materialSpeList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filtermaterialSpe.push(map)
      })
      Array.from(new Set(saleOrderStatusList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterSaleOrderStatus.push(map)
      })
      Array.from(new Set(saleRemarkList)).forEach(e => {
        let map = {}
        map.text = e
        map.value = e
        this.filterSaleRemark.push(map)
      })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { height: '30px' }
    },
    rowClick(row, column, event) {
      this.steelMap = {}
      this.tableRowIndex = row.group
      this.isRowClick = 1
      this.steelMap = row
      this.$refs.tableRef.toggleRowSelection(row)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.group == this.tableRowIndex && this.tableRowIndex !== '') {
        return 'warning-row'
      }
    },
    cellMouse(row, column, cell, event) {
      if (this.isRowClick == 0) {
        this.tableRowIndex = row.group
      }
    },
    cellLeave(row, column, cell, event) {
      if (this.isRowClick == 0) {
        this.tableRowIndex = ''
      }
    },
    reset() {
      var that = this
      that.$nextTick(() => {
        that.saleSteelKey = !that.saleSteelKey
      })
    },
    cellClik(row, column, cell, event) {
      console.log(row)
      if (column.property == 'arrivalAddress') {
        if (row.orderNo && row.arrivalAddress) {
          this.downloadCapacityNo = row.capacityNo
          this.toPhotoClick(row.orderNo, 1)
        }
      }
      if (column.property == 'receiptAddress') {
        if (row.orderNo && row.receiptAddress) {
          this.downloadCapacityNo = row.capacityNo
          this.receipctPhotoClick(row.orderNo, 1)
        }
      }
    },
    //销售钢材报表导出excel
    exportAllReportToExcel() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出Excel',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var title = this.tableTitle
      let tHeader = []
      let filterVal = []
      console.log(this.$refs.tableRef)
      this.$refs.tableRef.$children.forEach(item => {
        if (item.label != undefined && item.prop != undefined) {
          if (tHeader.indexOf(item.label) === -1) {
            tHeader.push(item.label)
          }
          if (filterVal.indexOf(item.prop) === -1) {
            filterVal.push(item.prop)
          }
        }
      })
      this.downloadLoading = true
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('@/assets/excel/Export2Excel.js') //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        let data = this.tableData.map(v => filterVal.map(j => v[j])) //3.formatJson格式转换
        export_json_to_excel(tHeader, data, title) // (title)导出的表格名称
      })
      loading.close()
    },
    getNodeNum(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          data[i].group = i
          data[i].rowKey = i
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].saleOrderMaterialId === data[i - 1].saleOrderMaterialId) {
            data[i].group = data[i - 1].group
            data[i].rowKey = i
          } else {
            data[i].group = data[i - 1].group + 1
            data[i].rowKey = i
          }
        }
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          // data[i].group = i
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].saleOrderMaterialId === data[i - 1].saleOrderMaterialId) {
            this.spanArr[this.pos] += 1
            // data[i].group = data[i - 1].group
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
            // data[i].group = data[i - 1].group + 1
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeList.indexOf(column.label) != -1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    //计算总件数和总车数
    getTotalNum(data) {
      //通过车序号的个数来计算车数
      let arr = []
      arr = data.map(e => {
        if (
          e.capacityNo != '取消' &&
          e.saleOrderStatus != '关闭' &&
          e.saleOrderStatus != '反审批' &&
          e.orderStatus != '已关闭'
        ) {
          return e.saleOrderMaterialId
        }
      })
      this.totalCapacity = Array.from(new Set(arr)).length
      this.totalNumber = data.reduce(function(prev, item) {
        return prev + item.materialNum
      }, 0)
    },
    //查询，输入查询条件
    onclick(obj) {
      this.isRowClick = 0
      const loading = this.$loading({
        lock: true,
        text: '正在获取数据',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let startTime = null
      let endTime = null
      let carrierSsoId = null
      let carrierName = null
      let consigneeName = null
      let capacityNo = null
      let remark = null
      let saler = null
      let easPrimaryId = null
      let consigneeLoginName = null
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime)
        endTime = sjTime(this.endTime)
      }
      if (getCookie('orgCode') == 'chengyunshang') {
        carrierSsoId = getCookie('userId')
      }
      if (getCookie('orgCode') == 'xiaoshouyewuyuan') {
        saler = getCookie('loginName')
      }
      if (getCookie('orgCode') == 'shouhuokehu') {
        consigneeLoginName = getCookie('loginName')
        obj.consigneeLoginName = consigneeLoginName
      }
      if (this.screen == '客户') {
        consigneeName = this.input
      } else if (this.screen == '承运商') {
        carrierName = this.input
      } else if (this.screen == '车牌号') {
        capacityNo = this.input
      } else if (this.screen == '分录ID') {
        easPrimaryId = this.input
      } else {
        remark = this.input
      }
      if (this.screen1 == '客户') {
        consigneeName = this.input1
      } else if (this.screen1 == '承运商') {
        carrierName = this.input1
      } else if (this.screen1 == '车牌号') {
        capacityNo = this.input1
      } else {
        remark = this.input1
      }
      this.axios
        .post(
          '/api/v1/tms/getSaleSteelReport?startTime=' +
            startTime +
            '&endTime=' +
            endTime +
            '&carrierSsoId=' +
            carrierSsoId +
            '&i=' +
            new Date() +
            '&remark=' +
            remark +
            '&consigneeName=' +
            consigneeName +
            '&carrierName=' +
            carrierName +
            '&capacityNo=' +
            capacityNo +
            '&saler=' +
            saler +
            '&easPrimaryId=' +
            easPrimaryId,
          obj
        )
        .then(res => {
          this.tableData = res.data.data
          this.getNodeNum(this.tableData)
          this.totalHeight += this.itemHeight
          this.totalHeight += this.itemHeight
          this.visibleList = []
          this.maxHeight = window.innerHeight - 130
          this.visibleList = this.tableData.slice(
            0,
            Math.floor(this.maxHeight / this.itemHeight) + 1
          )
          console.log(this.visibleList)
          console.log(this.maxHeight, 'this.maxHeight')
          loading.close()
          console.log(this.visibleList, 'this.visibleList')
          this.getSpanArr(this.visibleList)
          this.getTotalNum(this.tableData)
          console.log(this.maxHeight, 'this.maxHeight')
          this.maxHeight = window.innerHeight - 130
          console.log(this.maxHeight, 'this.maxHeight')
          loading.close()
        })
    },
    //重新获取表格数据
    refresh() {
      this.getSteelReport()
    },
    //获取钢材统计报表
    getSteelReport() {
      const loading = this.$loading({
        lock: true,
        text: '正在获取数据,请稍候',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.isRowClick = 0
      let startTime = null
      let endTime = null
      let carrierSsoId = null
      let carrierName = null
      let consigneeName = null
      let consigneeSsoId = null
      let consigneeLoginName = null
      let capacityNo = null
      let remark = null
      let saler = null
      if (this.startTime && this.endTime) {
        startTime = sjTime(this.startTime)
        endTime = sjTime(this.endTime)
      }
      if (getCookie('orgCode') == 'chengyunshang') {
        carrierSsoId = getCookie('userId')
      }
      if (getCookie('orgCode') == 'xiaoshouyewuyuan') {
        saler = getCookie('loginName')
      }
      if (getCookie('orgCode') == 'shouhuokehu') {
        consigneeLoginName = getCookie('loginName')
        this.filterMap.consigneeLoginName = consigneeLoginName
      }
      if (this.screen == '客户') {
        consigneeName = this.input
      } else if (this.screen == '承运商') {
        carrierName = this.input
      } else if (this.screen == '车牌号') {
        capacityNo = this.input
      } else {
        remark = this.input
      }
      if (this.screen1 == '下单客户') {
        consigneeName = this.input1
      } else if (this.screen1 == '承运商') {
        carrierName = this.input1
      } else if (this.screen1 == '车牌号') {
        capacityNo = this.input1
      } else {
        remark = this.input1
      }
      if (getCookie('orgCode') == 'chengyunshang') {
        carrierSsoId = getCookie('userId')
      }
      if (getCookie('orgCode') == 'xiaoshouyewuyuan') {
        saler = getCookie('loginName')
      }
      this.axios
        .post(
          '/api/v1/tms/getSaleSteelReport?startTime=' +
            startTime +
            '&endTime=' +
            endTime +
            '&carrierSsoId=' +
            carrierSsoId +
            '&saler=' +
            saler +
            '&i=' +
            new Date() +
            '&remark=' +
            remark +
            '&consigneeName=' +
            consigneeName +
            '&carrierName=' +
            carrierName +
            '&capacityNo=' +
            capacityNo,
          this.filterMap
        )
        .then(res => {
          this.tableData = res.data.data
          this.totalHeight += this.itemHeight
          this.visibleList = []
          this.maxHeight = window.innerHeight - 130
          this.getNodeNum(this.tableData)
          this.visibleList = this.tableData.slice(
            0,
            Math.floor(this.maxHeight / this.itemHeight) + 1
          )
          this.getSpanArr(this.visibleList)
          console.log(this.visibleList)
          this.getTotalNum(this.tableData)
          loading.close()
        })
        .catch(() => {
          this.maxHeight = window.innerHeight - 130
          loading.close()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.purchasFuelNewMonitor {
  .tableTop {
    margin-left: 20px;
    margin-top: 20px;
  }
  .table {
    margin-left: 20px;
    margin-top: 20px;
    .el-tooltip {
      width: auto !important;
    }
    /deep/ .el-table__body {
      overflow-y: auto;
      position: absolute !important;
      tr:hover > td {
        background-color: #fff;
      }
    }

    ::-webkit-scrollbar {
      height: 20px;
      background-color: transparent;
    }
  }

  .dialog {
    .exceptionHandleClass {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .steelMapClass {
      .steelMapClass1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        .steelMapClass12 {
          margin-left: 50px;
          margin-right: 10px;
        }
      }
      .steelMapClass2 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        .steelMapClass22 {
          margin-left: 50px;
          margin-right: 10px;
          .el-select {
            .el-input .el-input--suffix {
              .el-input__inner {
                border: 0px solid !important;
              }
            }
          }
        }
      }
      .steelMapClass3 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        .steelMapClass32 {
          margin-left: 50px;
          // margin-right: 10px;
        }
        .steelMapClass33 {
          margin-left: 20px;
          // margin-right: 10px;
        }
      }
      .steelMapClass4 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;

        .steelMapClass42 {
          margin-left: 50px;
          margin-right: 10px;
        }
        .steelMapClass43 {
          margin-left: 50px;
          margin-right: 10px;
        }
        .steelMapClass44 {
          margin-left: 50px;
          margin-right: 10px;
        }
      }
      .steelMapClass5 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;

        .steelMapClass52 {
          margin-left: 50px;
          margin-right: 10px;
          .steelMapClass521 {
            margin-left: 20px;
          }
        }
      }
      .steelMapClass6 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        .steelMapClass62 {
          margin-left: 50px;
          margin-right: 10px;
        }
      }

      .steelMapClass7 {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 16px;
        .steelMapClass72 {
          margin-left: 50px;
          margin-right: 10px;
        }
      }
    }
    .table1 {
      margin-left: 20px;
      margin-top: 20px;
      .el-tooltip {
        width: auto !important;
      }
    }
  }
  .address {
    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
<!-- <style lang="scss">
.el-table__body-wrapper {
  overflow-y: auto;
  .el-table__body {
    position: absolute;
  }
}
</style> -->
