//钢材统计报表
<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
            @change="changeScreen"
            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"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="选择日期"
            style="width:150px"
          >
          </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="refresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form-item>
        <el-form-item v-if="isShowOperate">
          <el-button type="primary" @click="checkTrans()"
            ><i class="el-icon-truck"></i>轨迹</el-button
          >
          <el-button type="primary" @click="operation()"
            ><i class="el-icon-edit"></i>更改</el-button
          >
          <el-button type="primary" @click="checkPoint()"
            ><i class="el-icon-map-location"></i>实时路径</el-button
          >
        </el-form-item>
        <el-form-item>
          <span style="margin-left: 1rem;font-size:16px">车数/件数：</span>
          <span style="font-size:16px"
            >{{ totalCapacity }}/{{ totalNumber }}</span
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        ref="tableRef"
        border
        style="width: 100%; margin-top: 20px"
        :max-height="maxHeight"
        :height="maxHeight"
        :row-class-name="tableRowClassName"
        @cell-click="cellClik"
        @cell-mouse-enter="cellMouse"
        @cell-mouse-leave="cellLeave"
        @row-click="rowClick"
        :cell-style="cellStyle"
      >
        <el-table-column
          width="50"
          label="序号"
          align="center"
          :resizable="false"
        >
          <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="consigneeName"
          label="下单客户"
          width="160px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="carrierName"
          label="承运商"
          align="center"
          width="60px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="capacityNo"
          column-key="capacityNo"
          label="车牌号"
          align="center"
          width="90px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物资名称"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="materialSpe"
          label="物资规格"
          align="center"
          sortable
          show-overflow-tooltip
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="materialNum"
          label="物资件数"
          align="center"
          width="50px"
        >
        </el-table-column>
        <el-table-column
          prop="addressPlace"
          label="收货地址"
          width="250px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="运单状态"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="entryGateTime"
          label="进厂时间"
          width="130px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="tareWeightTime"
          label="皮重时间"
          width="130px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="tareWeight" label="皮重" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="loadTime"
          label="装货时间"
          width="130px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="grossWeightTime"
          label="毛重时间"
          width="130px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="grossWeight" label="毛重" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="netWeight" label="净重" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="isPrintDelivery"
          label="送货单打印"
          align="center"
          width="100px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="outGateTime"
          label="出厂时间"
          width="130px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="arrivalAddress"
          label="抵达地址"
          width="280px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="receiptAddress"
          label="签收地址"
          width="280px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="运输订单号"
          width="180px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="capacityTel"
          label="司机电话"
          width="120px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="saler"
          label="业务员"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="shipperName"
          label="发货单位"
          width="170px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="consigneeTel"
          label="收货客户电话"
          width="120px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="isSelfMention" label="是否自提" align="center">
        </el-table-column>
        <el-table-column
          prop="saleOrderNo"
          label="销售订单号"
          width="200px"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="saleOrderStatus"
          label="销售订单状态"
          width="100px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="closeEntryId"
          label="金蝶分录ID"
          width="100px"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>
    <div>
      <vxe-modal
        width="549px"
        height="731px"
        v-model="isShow3"
        show-footer
        class="vxeModal"
      >
        <div class="demo-image__preview">
          <el-image style=" height:731px;text-align:center;" :src="src">
            <div slot="error" class="image-slot">
              <span>司机未上传图片</span>
            </div>
          </el-image>
        </div>
      </vxe-modal>
      <vxe-modal width="549px" height="731px" v-model="isShow4" show-footer>
        <div
          class="demo-image__preview"
          v-for="item in srcList2"
          :key="item.src"
        >
          <span>{{ item.title }}</span>
          <el-image style="height:731px;text-align:center" :src="item.src">
            <div slot="error" class="image-slot">
              <span>司机未上传图片</span>
            </div>
          </el-image>
        </div>
      </vxe-modal>
    </div>
    <div class="dialog">
      <el-dialog
        title="运单详情"
        :visible.sync="centerDialogVisible"
        width="90%"
        center
      >
        <div class="steelMapClass">
          <div class="steelMapClass1">
            <div class="steelMapClass12">
              <span>销售订单号:</span>
              <span>{{ steelMap.saleOrderNo }}</span>
            </div>
            <div class="steelMapClass12">
              <span>订单状态:</span>
              <span>{{ steelMap.saleOrderStatus }}</span>
            </div>
            <div class="steelMapClass12">
              <span>业务员:</span>
              <span>{{ steelMap.saler }}</span>
            </div>
            <div class="steelMapClass12">
              <span>下单客户:</span>
              <span>{{ steelMap.consigneeName }}</span>
            </div>
          </div>
          <div class="steelMapClass2">
            <div class="steelMapClass22">
              <span>收货地址:</span>
              <el-select
                v-model="steelMap.addressProvince"
                filterable
                placeholder="请选择"
                @change="onchangeProvince"
                style="width:120px"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.id"
                  :label="item.addressProvince"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="steelMap.addressDistrict"
                filterable
                placeholder="请选择"
                @change="onchangeCity"
                style="width:120px"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.addressDistrict"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="steelMap.addressTown"
                filterable
                placeholder="请选择"
                @change="onchangeCounty"
                style="width:120px"
              >
                <el-option
                  v-for="item in countyList"
                  :key="item.id"
                  :label="item.addressTown"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-autocomplete
                class="inline-input"
                v-model="steelMap.place"
                :fetch-suggestions="querySearch1"
                placeholder="请输入具体收货地址"
                :trigger-on-focus="false"
                @select="handleSelect1"
                style="width:250px"
              >
              </el-autocomplete>
              <el-button type="success" circle @click="addAddressClick"
                >提交</el-button
              >
            </div>
            <div
              class="steelMapClass23"
              v-if="
                steelMap.carStatus == 4 ||
                  steelMap.carStatus == 5 ||
                  steelMap.carStatus == null
              "
            >
              <el-button type="danger" round @click="deleteEasEntryId"
                >关闭运单</el-button
              >
            </div>
            <div class="steelMapClass23" v-if="steelMap.carStatus == 7">
              <el-button type="danger" round @click="reverseCloseOrder"
                >反关闭运单</el-button
              >
            </div>
          </div>
          <div class="steelMapClass3">
            <div class="steelMapClass32">
              <span>收货客户电话:</span>
              <el-input
                v-model="steelMap.consigneeTel"
                style="width:150px"
              ></el-input>
              <el-button type="success" circle @click="updateconsigneeTel"
                >提交</el-button
              >
            </div>
            <div class="steelMapClass33">
              <span>承运商:</span>
              <el-autocomplete
                style="width:120px"
                v-model="steelMap.carrierName"
                :fetch-suggestions="querySearchCarrier"
                placeholder="请输入承运商"
                @select="handleSelectCarrier"
              >
              </el-autocomplete>
              <el-button type="success" circle @click="updateTruckCarrier"
                >提交</el-button
              >
            </div>
            <div class="steelMapClass33">
              <span>车牌号:</span>
              <el-autocomplete
                style="width:120px"
                v-model="steelMap.capacityNo"
                :fetch-suggestions="querySearch"
                placeholder="请输入车牌号"
                @select="handleSelect()"
              ></el-autocomplete>
              <el-button type="success" circle @click="updateCapacity"
                >提交</el-button
              >
            </div>
            <div class="steelMapClass33">
              <span>司机电话:</span>
              <el-input
                style="width:120px"
                v-model="steelMap.capacityTel"
                placeholder="请输入电话号码"
              ></el-input>
              <el-button type="success" circle @click="updateDriverTel"
                >提交</el-button
              >
            </div>
          </div>
          <div class="steelMapClass4">
            <div class="steelMapClass42" v-if="steelMap.orderNo != null">
              <span>运输订单号:</span>
              <span>{{ steelMap.orderNo }}</span>
            </div>
            <div class="steelMapClass43">
              <span>运单状态:</span>
              <span>{{ steelMap.orderStatus }}</span>
            </div>
            <div
              class="steelMapClass43"
              v-if="steelMap.orderStatusTime != null"
            >
              <span>状态更新时间:</span>
              <span>{{ steelMap.orderStatusTime }}</span>
            </div>
          </div>
          <div class="steelMapClass5">
            <div class="steelMapClass52" v-if="steelMap.arrivalAddress != null">
              <span>抵达地址:</span>
              <span>{{ steelMap.arrivalAddress }}</span>
              <span class="steelMapClass521"
                ><el-button
                  type="success"
                  icon="el-icon-money"
                  circle
                  @click="toPhotoClick(steelMap.orderNo, 0)"
                ></el-button
              ></span>
            </div>
          </div>
          <div class="steelMapClass6">
            <div class="steelMapClass62" v-if="steelMap.receiptAddress != null">
              <span>签收地址:</span>
              <span>{{ steelMap.receiptAddress }}</span>
              <span class="steelMapClass621"
                ><el-button
                  type="success"
                  icon="el-icon-money"
                  circle
                  @click="receipctPhotoClick(steelMap.orderNo, 0)"
                ></el-button
              ></span>
            </div>
          </div>
        </div>
        <div class="table">
          <el-table
            :data="steelMap.mapList"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column
              prop="materialName"
              label="物资名称"
              align="center"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              prop="materialSpe"
              label="物资规格"
              align="center"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="materialNum"
              label="物资件数"
              align="center"
              width="200px"
            >
              <template slot-scope="scope">
                <button
                  type="primary"
                  @click="scope.row.materialNum--"
                  style="height:40px"
                >
                  -
                </button>
                <input
                  v-model="scope.row.materialNum"
                  style="width:40px;height: 40px;font-size:16px;line-height: 40px;text-align: center;"
                />
                <button
                  type="primary"
                  @click="scope.row.materialNum--"
                  style="height:40px"
                >
                  +
                </button>
                <el-button type="primary" @click="updateBillOrder(scope.row)"
                  >提交</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="grossWeight" label="毛重"> </el-table-column>
            <el-table-column
              prop="grossWeightTime"
              label="毛重时间"
              width="130px"
            >
            </el-table-column>
            <el-table-column prop="tareWeight" label="皮重"> </el-table-column>
            <el-table-column
              prop="tareWeightTime"
              label="皮重时间"
              width="130px"
            >
            </el-table-column>
            <el-table-column prop="netWeight" label="净重"> </el-table-column>
            <el-table-column prop="loadTime" label="装货时间" width="130px">
            </el-table-column>
            <el-table-column
              prop="closeEntryId"
              label="金蝶分录ID"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              label="分录操作"
              fixed="right"
              width="120px"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="closeEasEntryId(scope.row)"
                  v-if="scope.row.deletedStatus == null"
                  >关闭分录</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="adverseCloseSaleMaterial(scope.row)"
                  v-if="scope.row.deletedStatus != null"
                  >反关闭分录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">返 回</el-button>
        </span>
        <div>
          <vxe-modal
            width="549px"
            height="731px"
            v-model="isShow"
            show-footer
            class="vxeModal"
            title="抵达上传照片"
          >
            <div class="demo-image__preview">
              <el-image style=" height:731px;text-align:center;" :src="src">
                <div slot="error" class="image-slot">
                  <span>司机未上传图片</span>
                </div>
              </el-image>
            </div>
          </vxe-modal>
          <vxe-modal
            width="549px"
            height="731px"
            v-model="isShow2"
            show-footer
            title="签收上传照片"
          >
            <div
              class="demo-image__preview"
              v-for="(item, index) in srcList2"
              :key="index"
            >
              <span>{{ item.title }}</span>
              <el-image style="height:731px;text-align:center" :src="item.src">
                <div slot="error" class="image-slot">
                  <span>司机未上传图片</span>
                </div>
              </el-image>
            </div>
          </vxe-modal>
        </div>
      </el-dialog>
    </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 style="height:100%">
      <vxe-modal
        width="1237"
        height="731"
        v-model="value8"
        show-zoom
        resize
        title="实时路径"
        ><currentLocation :carNumber="carNumber"></currentLocation
      ></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'
export default {
  components: {
    PathView,
    currentLocation
  },
  data() {
    return {
      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: '车牌号'
        }
      ],
      startTime: null,
      endTime: null,
      //合计净重
      totalNumber: 0,
      //合计车数
      totalCapacity: 0,
      tableTitle: '销售统计报表',
      capacityList: [],
      carrierList: [],
      tableData: [],
      spanArr: [],
      pos: 0,
      //需要合并列的名称
      mergeList: [
        '序号',
        '整车操作',
        '销售订单状态',
        '销售订单号',
        '发货单位',
        '司机电话',
        '运输订单号',
        '签收地址',
        '抵达地址',
        '出厂时间',
        '进厂时间',
        '运单状态',
        '车牌号',
        '承运商',
        '下单客户',
        '收货地址',
        '业务员',
        '送货单打印',
        '收货客户电话',
        '金蝶分录ID',
        '是否自提',
        '订单日期'
      ],
      //钢材多拼车辆线路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: window.innerHeight - 140,
      //轨迹窗口
      value7: false,
      //实时路径窗口
      value8: false,
      pathOption: {
        orderNumber: '',
        capacityNumber: '',
        startPointName: '',
        endPointName: ''
      },
      saleSteelKey: false,
      tableRowIndex: '',
      isRowClick: 0,
      orgCodeList: [
        'wuliuyunshubu',
        'dagangadmin',
        'shichangxinxibu',
        'xiaoshouyewuyuan',
        'zidonghuabu'
      ],
      isShowOperate: false
    }
  },
  created() {
    if (this.orgCodeList.includes(getCookie('orgCode'))) {
      this.isShowOperate = true
    }
    this.getSteelReport()
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        return (() => {
          this.maxHeight = window.innerHeight - 150
        })()
      }
    })
  },
  activated() {
    this.maxHeight = window.innerHeight - 150
  },
  computed: {},
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        column.property == 'arrivalAddress' ||
        column.property == 'receiptAddress'
      ) {
        return 'color : blue'
      }
    },
    rowClick(row, column, event) {
      this.steelMap = {}
      this.tableRowIndex = row.group
      this.isRowClick = 1
      this.steelMap = 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
    //   })
    // },
    checkTrans(row) {
      this.isRowClick = 0
      if (Object.values(this.steelMap).length == 0) {
        this.$message.error('请点击需要查看轨迹的行！')
        return
      }
      if (typeof row === 'undefined') {
        row = this.steelMap
      }
      if (row.outGateTime == null) {
        this.$message.error('该车还未出厂,暂无轨迹')
        return
      }
      let that = this
      that.axios
        .post('/api/v1/otms/fullPath?orderNumber=' + row.orderNo)
        .then(res => {
          console.log(res.data)
          if (res.data.data == '-1') {
            this.$message.error('运输订单未关闭的自提车辆无权查看!')
          } else if (res.data.data.startAndEndRoutes != null) {
            that.pathOption.orderNumber = row.orderNo
            that.pathOption.capacityNumber = row.capacityNo
            that.pathOption.startPointName = '达钢集团小东门'
            that.pathOption.endPointName = row.arrivalAddress
            that.value7 = true
          } else {
            this.$message.error('车辆没有开启GPS')
          }
        })
    },
    cellClik(row, column, cell, event) {
      console.log(row)
      if (column.property == 'arrivalAddress') {
        if (row.orderNo && row.arrivalAddress) {
          this.toPhotoClick(row.orderNo, 1)
        }
      }
      if (column.property == 'receiptAddress') {
        if (row.orderNo && row.receiptAddress) {
          this.receipctPhotoClick(row.orderNo, 1)
        }
      }
    },
    //反关闭运单
    reverseCloseOrder() {
      this.axios
        .post('/api/v1/ams/reverseCloseOrder', this.steelMap)
        .then(res => {
          this.operation(this.steelMap)
          this.getSteelReport()
        })
    },
    //筛选
    //筛选客户
    //点击操作弹出框
    operation(row) {
      this.isRowClick = 0
      if (Object.values(this.steelMap).length == 0) {
        this.$message.error('请点击需要执行更改操作的行！')
        return
      }
      if (typeof row === 'undefined') {
        row = this.steelMap
      }
      this.axios
        .post(
          '/api/v1/tms/getSteelReportDetailsBySmId?saleOrderMaterialId=' +
            row.saleOrderMaterialId
        )
        .then(res => {
          this.steelMap = res.data.data
          this.addressId = row.shipperAddressId
          this.getAllProvince()
          this.onchangeProvince()
          this.onchangeCity()
          this.centerDialogVisible = true
        })
    },
    //查看抵达图
    toPhotoClick(orderNo, num) {
      this.axios
        .post('/api/v1/otms/getArrivalPhoto?orderNumber=' + orderNo)
        .then(res => {
          this.srcList = []
          this.src = res.data.data
          if (num == 1) {
            this.isShow3 = true
          } else {
            this.isShow = true
          }
          this.srcList.push(res.data.data)
        })
    },
    //查看实时路径
    checkPoint() {
      if (this.input || this.input1 || this.steelMap.capacityNo) {
        this.carNumber = this.input || this.input1 || this.steelMap.capacityNo
        this.value8 = true
      } else {
        this.$message.error('请输入或者点击有车牌号的行查询车牌号的实时路径')
      }
    },
    //查看签收图
    receipctPhotoClick(orderNo, num) {
      this.axios
        .post('/api/v1/otms/getReceivingPhotoByUrl?orderNumber=' + orderNo)
        .then(res => {
          console.log(res.data)
          if (num == 1) {
            this.isShow4 = true
          } else {
            this.isShow2 = true
          }
          this.srcList2 = []
          if (res.data.resultReceiveNotePhoto != null) {
            this.srcList2.push({
              title: '签收单',
              src: res.data.resultReceiveNotePhoto
            })
          }
          if (res.data.resultSignedNotePhoto != null) {
            this.srcList2.push({
              title: '质保书',
              src: res.data.resultSignedNotePhoto
            })
          }
          if (res.data.resultEmptyContainerPhoto != null) {
            this.srcList2.push({
              title: '空货箱照片',
              src: res.data.resultEmptyContainerPhoto
            })
          }
        })
    },
    //反关闭整条分录
    adverseCloseSaleMaterial(row) {
      console.log(row.saleMaterialId)
      this.$confirm('确定反关闭该条分录?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        center: true
      }).then(() => {
        this.axios
          .post(
            '/api/v1/ams/adverseCloseSaleMaterial?saleMaterialId=' +
              row.saleMaterialId
          )
          .then(res => {
            if (res.data.code == '200') {
              this.$message.success('反关闭成功')
              this.operation(this.steelMap)
              this.getSteelReport()
            } else {
              this.$message.error('反关闭失败')
              this.operation(this.steelMap)
              this.getSteelReport()
            }
          })
          .catch(() => {
            this.$message.error('反关闭失败')
            this.getSteelReport()
          })
      })
    },
    //销售钢材报表导出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()
    },
    changeScreen() {},
    //承运商弹出层
    handleSelectCarrier() {
      this.carrierList.forEach(item => {
        if (item.carrierName == this.steelMap.carrierName) {
          this.steelMap.newCarrierId = item.carrierId
          this.steelMap.carrierId = item.carrierId
        }
      })
    },
    //承运商边输边查
    querySearchCarrier(queryString, cb) {
      if (queryString != null && queryString != '' && queryString.length > 1) {
        this.axios
          .post('/api/v1/uc/getCarrierMesByLike?index=' + queryString)
          .then(res => {
            if (res.data.code == '200') {
              this.carrierList = []
              if (res.data.data.length == 0) {
                this.$message.info('承运商不存在,请前往注册')
                return
              }
              var restaurants = res.data.data
              this.carrierList = res.data.data
              var results = queryString
                ? restaurants.filter(this.createFilterCarrier(queryString))
                : restaurants
              cb(results)
            }
          })
      }
    },
    createFilterCarrier(queryString) {
      return restaurants => {
        return (
          restaurants.value1.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        )
      }
    },
    //以下是车牌号边输边查搜索
    querySearch(queryString, cb) {
      if (queryString != null && queryString != '' && queryString.length > 3) {
        this.axios
          .post('/api/v1/uc/getCapacityByLike?index=' + queryString)
          .then(res => {
            this.capacityList = []
            if (res.data.code == '200') {
              if (res.data.data.length == 0) {
                this.$message.info('车牌号不存在,请前往注册')
                return
              }
              var restaurants = res.data.data
              this.capacityList = res.data.data
              var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants
              // 调用 callback 返回建议列表的数据
              cb(results)
            }
          })
      }
    },
    createFilter(queryString) {
      return restaurants => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        )
      }
    },
    //车牌号弹出层
    handleSelect() {
      this.capacityList.forEach(item => {
        if (item.capacityNumber === this.steelMap.capacityNo) {
          this.steelMap.newsCapacityId = item.capacityId
        }
      })
    },
    updateCapacity() {
      this.steelMap.capacityId = this.steelMap.newsCapacityId
      if (this.steelMap.newsCapacityId == null) {
        this.$message.warning('请先注册车牌号或者选中弹出后再提交!')
        return
      }
      if (!isVehicleNumber(this.steelMap.capacityNo)) {
        this.$message.error('请输入正确格式的车牌号!')
        return
      }
      if (this.steelMap.capacityIds != 0) {
        const loading = this.$loading({
          lock: true,
          text: '正在变更车牌号',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios
          .post('/api/v1/ams/updateCapacityNumberInFactory', this.steelMap)
          .then(res => {
            if (res.data.code == 200) {
              this.$message.success('变更车牌号成功!')
              this.operation(this.steelMap)
              this.axios
                .post(
                  '/api/v1/ams/matchingDriverTelRecently?capacityNumber=' +
                    this.steelMap.capacityNo
                )
                .then(res => {
                  if (res.data.data != null) {
                    this.steelMap.capacityTel = res.data.data
                    this.updateDriverTel()
                  }
                })

              this.getSteelReport()
              loading.close()
            } else {
              this.$message.success('变更失败，请联系管理员')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            }
          })
          .catch(() => {
            this.$message.success('变更失败，请联系管理员')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          })
      } else {
        if (this.steelMap.carrierIds == 0) {
          this.$message.error('请先选择承运商！')
          return
        }
        this.steelMap.lineId = this.lineSpelling[this.steelMap.mapList.length]
        this.steelMap.driverTel = this.steelMap.capacityTel
        this.steelMap.capacityNumber = this.steelMap.capacityNo
        let arr = []
        arr.push(this.steelMap)
        const loading = this.$loading({
          lock: true,
          text: '正在派车,请稍候',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios
          .post('/api/v1/ams/dispatchSteelOrder', arr)
          .then(res => {
            if (res.data.code == '200') {
              this.$message.success('派车成功!')
              this.operation(this.steelMap)
              this.axios
                .post(
                  '/api/v1/ams/matchingDriverTelRecently?capacityNumber=' +
                    this.steelMap.capacityNo
                )
                .then(res => {
                  if (res.data.data != null) {
                    this.steelMap.capacityTel = res.data.data
                    this.updateDriverTel()
                  }
                })
              this.getSteelReport()
              loading.close()
            } else {
              this.$message.error(res.data.data)
              this.getSteelReport()
              this.operation(this.steelMap)
              loading.close()
            }
          })
          .catch(() => {
            this.$message.error(res.data.data)
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          })
      }
    },
    //修改司机电话号码
    updateDriverTel() {
      const loading = this.$loading({
        lock: true,
        text: '修改电话号码中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (
        this.steelMap.capacityTel == null ||
        this.steelMap.capacityTel == ''
      ) {
        this.$message.error('电话号码不能为空')
        return
      }
      this.axios
        .post('/api/v1/uc/updateDriverTel', {
          orderId: parseInt(this.steelMap.orderId),
          driverTel: this.steelMap.capacityTel
        })
        .then(res => {
          if (res.data.code == '200') {
            this.$message.success('修改成功')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          } else {
            this.$message.error('修改失败')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          }
        })
        .catch(() => {
          this.$message.error('修改失败')
          this.operation(this.steelMap)
          this.getSteelReport()
          loading.close()
        })
    },
    //修改收货客户电话
    updateconsigneeTel() {
      const loading = this.$loading({
        lock: true,
        text: '修改电话号码中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (
        this.steelMap.consigneeTel == null ||
        this.steelMap.consigneeTel == ''
      ) {
        this.$message.error('电话号码不能为空')
        return
      }
      this.axios
        .post('/api/v1/ams/updateConsigneeTel', {
          saleOrderNo: this.steelMap.saleOrderNo,
          saleOrderMaterialId: this.steelMap.saleOrderMaterialId,
          consigneeTel: this.steelMap.consigneeTel
        })
        .then(res => {
          if (res.data.code == '200') {
            this.$message.success('修改成功')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          } else {
            this.$message.error('修改失败')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          }
        })
        .catch(() => {
          this.$message.error('修改失败')
          this.operation(this.steelMap)
          this.getSteelReport()
          loading.close()
        })
    },
    //关闭车辆金蝶分录
    deleteEasEntryId() {
      this.$confirm('确定关闭该车金蝶分录吗?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        center: true,
        type: 'warning'
      })
        .then(() => {
          let map = this.steelMap
          map.operateName = getCookie('loginName')
          map.isCloseEas = Number(0)
          const loading = this.$loading({
            lock: true,
            text: '正在关闭车辆',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.axios
            .post('/api/v1/ams/updateCarAddress', map)
            .then(res => {
              if (res.data.code == '200') {
                this.$message.success('关闭车辆成功')
                this.getSteelReport()
                this.operation(this.steelMap)
                loading.close()
              } else {
                this.$message.error('关闭车辆失败')
                this.operation(this.steelMap)
                this.getSteelReport()
                loading.close()
              }
            })
            .catch(() => {
              this.$message.error('关闭车辆失败')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            })
        })
        .catch(() => {
          this.$message.info('取消关闭')
        })
    },
    //修改承运商授权
    updateTruckCarrier() {
      console.log(this.steelMap)
      if (this.steelMap.newCarrierId == null) {
        this.$message.warning('请注册承运商或者选中弹出层之后再提交!')
        this.getSteelReport()
        return
      }
      if (this.steelMap.carrierIds != 0) {
        const loading = this.$loading({
          lock: true,
          text: '正在修改承运商授权',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios
          .post('/api/v1/ams/updateTruckNoCarrier', this.steelMap)
          .then(res => {
            if (res.data.code == '200') {
              this.$message.success('修改承运商授权成功')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            } else {
              this.$message.error('修改失败,请联系管理员!')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            }
          })
          .catch(() => {
            this.$message.error('修改失败,请联系管理员!')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          })
      } else {
        //授权承运商
        let arr = []
        arr.push(this.steelMap)
        const loading = this.$loading({
          lock: true,
          text: '正在授权承运商',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios
          .post('/api/v1/ams/dispatchToCarrier', arr)
          .then(res => {
            if (res.data.code == '0') {
              this.$message.success('授权承运商成功')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            } else {
              this.$message.error('授权失败,请联系管理员')
              this.operation(this.steelMap)
              this.getSteelReport()
              loading.close()
            }
          })
          .catch(() => {
            this.$message.error('授权失败,请联系管理员')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          })
      }
    },
    updateAddress(row) {
      this.drawer = true
      this.addressRow = row
      this.province = row.addressProvince
      this.city = row.addressDistrict
      this.county = row.addressTown
      this.addressId = row.shipperAddressId
      this.getAllProvince()
      this.onchangeProvince()
      this.onchangeCity()
    },
    //获取所有省数据
    getAllProvince() {
      this.axios.post('/api/v1/uc/getAllProvince').then(res => {
        this.provinceList = res.data.data
      })
    },
    //省改变
    onchangeProvince() {
      this.axios
        .post(
          '/api/v1/uc/getDistrictByProvince?addressProvince=' +
            this.steelMap.addressProvince +
            '&i=' +
            new Date()
        )
        .then(res => {
          this.cityList = res.data.data
          // this.city = "";
          // this.county = "";
        })
    },
    //市改变
    onchangeCity() {
      this.axios
        .post(
          '/api/v1/uc/getTownByDistrict?addressDistrict=' +
            this.steelMap.addressDistrict +
            '&i=' +
            new Date()
        )
        .then(res => {
          this.countyList = res.data.data
        })
    },
    //县(区)改变
    onchangeCounty() {
      let mapValue = {
        addressProvince: this.steelMap.addressProvince,
        addressDistrict: this.steelMap.addressDistrict,
        addressTown: this.steelMap.addressTown
      }
      this.axios.post('/api/v1/uc/getPlaceByAllAddress', mapValue).then(res => {
        this.addressId = res.data.data[0].addressId
      })
    },
    //收货地址弹出层
    handleSelect1(item) {
      console.log('获取所有下拉值!')
    },
    //以下是收货地址边输边查搜索
    querySearch1(queryString, cb) {
      this.axios
        .post(
          '/api/v1/ams/getRealAddressByLike?addressId=' +
            this.addressId +
            '&index=' +
            queryString
        )
        .then(res => {
          if (res.data.code == '200') {
            var restaurants = res.data.data
            var results = queryString
              ? restaurants.filter(this.createFilter1(queryString))
              : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
          }
        })
    },
    createFilter1(queryString) {
      return restaurants => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        )
      }
    },
    //修改收货地址
    addAddressClick() {
      const loading = this.$loading({
        lock: true,
        text: '正在修改收货地址',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let map = this.steelMap
      map.isCloseEas = Number(1)
      map.isNewCar = Number(1)
      map.shipperAddressId = this.addressId
      this.axios
        .post('/api/v1/ams/updateCarAddress', map)
        .then(res => {
          if (res.data.code == '200') {
            this.$message.success('修改收货地址成功!')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          } else {
            this.$message.error('修改失败,请联系管理员!')
            this.operation(this.steelMap)
            this.getSteelReport()
            loading.close()
          }
        })
        .catch(() => {
          this.$message.error('修改失败,请联系管理员!')
          this.operation(this.steelMap)
          this.getSteelReport()
          loading.close()
        })
    },
    //记录每一行的合并数
    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
          }
        }
        this.totalCapacity = data[data.length - 1].group + 1
        this.totalNumber = data.reduce(function(prev, item) {
          return prev + item.materialNum
        }, 0)
      }
    },
    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
        }
      }
    },
    //减少物资件数
    updateBillOrder(row) {
      const loading = this.$loading({
        lock: true,
        text: '修改物资件数中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let map = {
        materialId: row.materialId,
        materialNum: row.materialNum
      }
      let arr = []
      arr.push(map)
      let updateMap = {
        orderId: this.steelMap.orderId,
        saleOrderId: this.steelMap.saleOrderId,
        saleOrderMaterialId: this.steelMap.saleOrderMaterialId,
        mapList: arr
      }
      this.axios
        .post('/api/v1/oms/updateMaterialMes', updateMap)
        .then(res => {
          if (res.data.code == '200') {
            this.$message.success('修改物资数量成功')
            this.getSteelReport()
            loading.close()
          } else {
            this.$message.error('修改物资数量失败,请联系管理员')
            this.getSteelReport()
            loading.close()
          }
        })
        .catch(() => {
          this.$message.error('修改物资数量失败,请联系管理员')
          this.getSteelReport()
          loading.close()
        })
    },
    //关闭单条分录
    closeEasEntryId(row) {
      if (this.steelMap.mapList.length == 1) {
        this.deleteEasEntryId()
        return
      }
      this.$prompt('确定关闭该条分录吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        inputPlaceholder: '请输入关闭理由'
      })
        .then(({ value }) => {
          if (value != null || value != '') {
            const loading = this.$loading({
              lock: true,
              text: '正在关闭该条分录',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let map = {
              orderId: this.steelMap.orderId,
              saleOrderMaterialId: this.steelMap.saleOrderMaterialId,
              saleMaterialId: row.saleMaterialId,
              reason: value,
              number: this.steelMap.saleOrderNo,
              closeEntryId: row.closeEntryId
            }
            this.axios
              .post('/api/v1/ams/closeSteelMaterialId', map)
              .then(res => {
                if (res.data.code == '200') {
                  this.$message.success('关闭成功')
                  this.operation(this.steelMap)
                  this.getSteelReport()
                  loading.close()
                } else {
                  this.$message.error('关闭失败,请联系管理员')
                  this.operation(this.steelMap)
                  this.getSteelReport()
                  loading.close()
                }
              })
              .catch(() => {
                this.$message.error('关闭失败,请联系管理员')
                this.operation(this.steelMap)
                this.getSteelReport()
                loading.close()
              })
          }
        })
        .catch(() => {
          this.$message.info('取消输入')
        })
    },
    //查询，输入查询条件
    onclick() {
      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
      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 (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
        )
        .then(res => {
          this.tableData = res.data.data
          this.getSpanArr(res.data.data)
          loading.close()
        })
    },
    //重新获取表格数据
    refresh() {
      this.getSteelReport()
    },
    //获取钢材统计报表
    getSteelReport() {
      this.isRowClick = 0
      let startTime = null
      let endTime = null
      let carrierSsoId = null
      let carrierName = null
      let consigneeName = 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 (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.screen == '承运商') {
        carrierName = this.input1
      } else if (this.screen == '车牌号') {
        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
        )
        .then(res => {
          this.tableData = res.data.data
          this.getSpanArr(res.data.data)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.purchasFuelNewMonitor {
  .tableTop {
    margin-left: 20px;
    margin-top: 20px;
  }
  .table {
    margin-left: 20px;
    margin-top: 20px;
    ::-webkit-scrollbar {
      // width: 20px;
      height: 20px;
      background-color: transparent;
    }
  }
  .dialog {
    .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;
        }
      }
      .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;
        }
      }
    }
  }
  .address {
    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
