tire-platform-ui/src/views/landTransportation/motorcadeDriver/index.vue

<template>
  <div class="adds">
    <basic-container>
      <div class="home-container">
        <div style="display: flex;justify-content: center;">
          <div class="content">
            <div class="content-item" @click="handleClick('')">
              <div class="card">
                <div class="card-title card-title1">
                <span>
                  全
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="!activeName?'selected':''">{{ totalData.all }}</span>
                  <span class="card-content-text" :class="!activeName?'selected':''">全部</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('1')">
              <div class="card">
                <div class="card-title card-title2">
                <span>
                  未
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '1'?'selected':''">{{ totalData.one }}</span>
                  <span class="card-content-text" :class="activeName === '1'?'selected':''">未派车</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('2')">
              <div class="card">
                <div class="card-title card-title4">
                <span>
                  受
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '2'?'selected':''">{{ totalData.two }}</span>
                  <span class="card-content-text" :class="activeName === '2'?'selected':''">未受理</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('3')">
              <div class="card">
                <div class="card-title card-title5">
                <span>
                  未
                </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '3'?'selected':''">{{ totalData.three }}</span>
                  <span class="card-content-text" :class="activeName === '3'?'selected':''">未完工</span>
                </div>
              </div>
            </div>
            <div class="divider"/>
            <div class="content-item" @click="handleClick('4')">
              <div class="card">
                <div class="card-title card-title6">
                    <span>
                      已
                    </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '4'?'selected':''">{{ totalData.four }}</span>
                  <span class="card-content-text" :class="activeName === '4'?'selected':''">已完工</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-container>
    <basic-container v-if="key>0">
      <avue-crud
          :data="goodsList"
          :option="entrustOptionTwoT"
          :table-loading="loading"
          :page.sync="page"
          ref="crud"
          @on-load="onLoad"
          @resetColumn="resetColumn"
          @saveColumn="saveColumn"
          @search-change="searchChange"
          @search-reset="query={};activeName = ''"
          @search-criteria-switch="searchCriteriaSwitch"
          @row-save="(row,done,loading)=>{rowSave(row,0,done,loading)}"
          @row-update="rowSave">
        <template slot-scope="{row}" slot="fleetId">
          <span>{{ row.fleetName }}</span>
        </template>
        <template slot-scope="{row}" slot="fleetIdSearch">
          <crop-select
              v-model="row.fleetId"
              corpType="CD"
          ></crop-select>
        </template>
        <template slot-scope="{row}" slot="plateNo">
          <span class="el-button--text" style="cursor: pointer"
                @click="openTrack(row)">{{ row.plateNo }}</span>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button
              type="text"
              size="small"
              v-if="row.status===1"
              @click="rowSaveT(row,index)"
          >{{ row.$cellEdit ? '保 存' : '修 改' }}
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="designate(row, index)"
              v-if="row.status===1"
          >派 车
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="cancelDesignate(row, index)"
              v-if="row.status===2"
          >取消派车
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="annexOpen(row, index)"
          >附 件
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="changeFleetT(row, index)"
              v-if="row.status !== 0 && row.status !== 1 && row.status !== 2 && row.status !== 4"
          >变 更
          </el-button>
          <el-button
              size="small"
              type="text"
              @click="recordsOfChanges(row, index)"
              v-if="row.status > 2"
          >变更记录
          </el-button>
        </template>
        <template slot="addressDetail" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.addressDetail)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.addressDetail }}</div>
          </el-tooltip>
        </template>
      </avue-crud>
      <el-dialog
          title="附件"
          :visible.sync="dialogVisible"
          append-to-body
          width="70%">
        <c-upload
            typeUpload="PC"
            :basic="true"
            deleteUrl="/api/blade-client/common-file/remove"
            :data="orderList"
            :enumerationValue="76"
        ></c-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveAnnex" size="small" :loading="loadingTwo" :disabled="form.status >= 2">保 存</el-button>
        </span>
      </el-dialog>

      <el-dialog
          title="变更"
          :visible.sync="dialogChange"
          append-to-body
          width="70%">
        <avue-form :option="optionData" v-model="formData" v-if="dialogChange" ref="saveForm">
        </avue-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false" size="small">关 闭</el-button>
          <el-button type="primary" @click="confirmChange" size="small">确 定</el-button>
      </span>
      </el-dialog>
      <el-dialog
          title="变更记录"
          :visible.sync="dialogRecord"
          append-to-body
          width="70%">
        <avue-crud :data="dataRecord" :option="optionRecord" style="margin-top: -43px"></avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRecord = false" size="small">关 闭</el-button>
        </span>
      </el-dialog>
    </basic-container>
    <el-dialog
        title="车辆轨迹"
        append-to-body
        custom-class="dialog_two"
        :visible.sync="dialogVisibleTwo"
        lock-scroll
        width="80%">
      <div id="container"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  sendACarCollection,
  sendACarDispatchCollection,
  driverQueryCollection,
  fleetList,
  motorcadeDriver,
  fleetDriverSave, telephone, getAttachment, saveAttached, recordingDetails, changeVehicle
} from "@/api/landTransportation";
import {location} from "@/api/gaude";

export default {
  name: "index",
  data() {
    return {
      key: 0,
      query:{},
      dialogVisibleTwo:false,
      map: null,
      infoWindow: null,
      marker: null,
      formDataList:{},
      optionData: {
        span: 12,
        menuBtn: false,
        column: [{
          label: "车号",
          prop: "plateNo",
          allowCreate: true,
          overHidden: true,
          filterable: true,
          cascader: ['driverId'],
          type: 'select',
          dicUrl: '',
          props: {
            label: "plateNo",
            value: "plateNo"
          },
          change: (data) => {
            fleetList().then(res => {
              for (let item in res.data.data) {
                if (data.value === res.data.data[item].plateNo) {
                  this.formData.driverId = res.data.data[item].driverId
                  this.formData.driverName = res.data.data[item].driverName
                  this.formData.tel = res.data.data[item].tel
                }
              }
            })
          }
        }, {
          label: '状态',
          overHidden: true,
          width: 100,
          type: 'select',
          index: 14,
          props: {
            label: "dictValue",
            value: "dictKey"
          },
          dicData:[{
            dictKey: "2",
            dictValue: "未受理"
          },{
            dictKey: "3",
            dictValue: "未完工"
          },{
            dictKey: "5",
            dictValue: "未到厂"
          },{
            dictKey: "6",
            dictValue: "已提箱"
          }],
          prop: 'status'
        }, {
          label: "司机",
          prop: "driverId",
          type: 'select',
          dicUrl: "/api/blade-client/land-driver/driver-list?vehicleId={{key}}",
          props: {
            label: "name",
            value: "id"
          },
          change: (data) => {
            telephone().then(res => {
              for (let item in res.data.data) {
                if (data.value === res.data.data[item].id) {
                  this.formData.tel = res.data.data[item].tel
                }
              }
            })
          }
        }, {
          label: "电话",
          prop: "tel",
        }]
      },
      dialogRecord: false,
      dialogChange: false,
      formData: {},
      dataRecord: [],
      optionRecord: {
        stripe: true,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        addBtn: false,
        align: 'center',
        column: [
          {
            label: '变更内容',
            prop: 'content'
          }, {
            label: '变更人',
            prop: 'changeUserName'
          }, {
            label: '变更时间',
            prop: 'changeTime'
          }
        ]
      },
      form: {},
      loadingTwo:false,
      dialogVisible: false,
      orderList: [],
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300]
      },
      roleName: localStorage.getItem("roleName").split(',')[0],
      goodsList: [],
      entrustOptionTwoT: {},
      optionList: {
        stripe: true,
        align: 'center',
        menuAlign: 'center',
        index: true,
        addBtn: false,
        delBtn: false,
        menuWidth:150,
        cellBtn: false,
        cancelBtn: false,
        editBtn: false,
        addRowBtn: false,
        searchIcon: true,
        searchIndex: 2,
        searchSpan: 8,
        height: "auto",
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [
          {
            name: 'landWeight',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'landAmountD',
            type: 'sum',
            decimals: 2
          }, {
            name: 'ctnQuantity',
            type: 'count'
          }, {
            name: 'oneFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'twoFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'threeFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fourFeeC',
            type: 'sum',
            decimals: 2
          }, {
            name: 'fiveFeeC',
            type: 'sum',
            decimals: 2
          }],
        column: [ {
          label: '货运日期',
          prop: 'arrivalTime',
          overHidden: true,
          type: "date",
          searchRange: true,
          defaultTime: ['00:00:00', '23:59:59'],
          format: "yyyy-MM-dd HH:mm",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          index: 1,
          width: 119,
          search: true,
        }, {
          label: '物流运输',
          prop: 'dispatchDeptName',
          overHidden: true,
          index: 1,
          width: 82,
        }, {
          label: '运输调度',
          prop: 'dispatcherName',
          overHidden: true,
          index: 1,
          width: 70,
        }, {
          label: '货运地点',
          index: 2,
          width: 138,
          search: true,
          prop: 'addressDetail'
        }, {
          label: '提单号',
          width: 140,
          index: 3,
          search: true,
          overHidden: true,
          prop: 'billNo'
        }, {
          label: '场站',
          prop: 'station',
          overHidden: true,
          index: 4,
          width: 68,
          search: true,
        }, {
          label: '箱型',
          width: 68,
          index: 5,
          search: true,
          overHidden: true,
          prop: 'ctnType',
          type: 'select',
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=boxType",
          props: {
            label: "dictValue",
            value: "dictValue"
          }
        }, {
          label: '箱量',
          width: 58,
          index: 6,
          overHidden: true,
          prop: 'ctnQuantity'
        },
          {
            label: '车队',
            width: 90,
            search: true,
            index: 7,
            // hide:true,
            // showColumn: false,
            filterable: true,
            disabled: true,
            type: 'select',
            cascader: ['plateNo'],
            overHidden: true,
            prop: 'fleetId',
            dicUrl: "/api/blade-client/land-vehicle/list?size=1000&current=1&corpType=CD",
            props: {
              label: "fleetName",
              value: "fleetId",
              res: "data.records"
            },
            cell: true
          }, {
            label: '车号',
            width: 82,
            cell: true,
            search: true,
            index: 8,
            allowCreate: true,
            prop: "plateNo",
            overHidden: true,
            filterable: true,
            cascader: ['driverId'],
            type: "select",
            dicUrl: "/api/blade-client/land-vehicle/vehicle-list?fleetId={{key}}",
            props: {
              label: "plateNo",
              value: "plateNo"
            },
          },
          {
            label: '司机',
            width: 77,
            search: true,
            overHidden: true,
            cell: true,
            filterable: true,
            index: 9,
            prop: 'driverId',
            type: "select",
            dicUrl: "/api/blade-client/land-driver/driver-list?plateNo={{key}}",
            props: {
              label: "name",
              value: "id"
            }
          }, {
            label: '电话',
            overHidden: true,
            width: 124,
            search: true,
            cell: true,
            index: 10,
            prop: 'tel'
          }, {
            label: '平台号',
            width: 100,
            index: 11,
            search: true,
            overHidden: true,
            prop: 'orderNo'
          },{
            label: '箱号',
            overHidden: true,
            width: 140,
            index: 12,
            search: true,
            prop: 'ctnNo'
          },{
            label: '实际到厂时间',
            prop: 'realArrivalTime',
            overHidden: true,
            type: "date",
            searchRange: true,
            defaultTime: ['00:00:00', '23:59:59'],
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            index: 14,
            width: 132
          },{
            label: '受理日期',
            type: "datetime",
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            width: 132,
            index: 13,
            prop: 'acceptTime'
          },{
            label: '完工日期',
            prop: 'finishedTime',
            overHidden: true,
            type: "date",
            searchRange: true,
            defaultTime: ['00:00:00', '23:59:59'],
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            index:15,
            width: 132,
          },{
            label: '货物名称',
            overHidden: true,
            width: 100,
            search: true,
            index: 16,
            prop: 'goods'
          }, {
            label: '件数',
            width: 75,
            search: true,
            index: 17,
            overHidden: true,
            controls: false,
            cell: true,
            prop: 'quantity',
            type: 'number',
            precision:0
          }, {
            label: '重量(吨)',
            width: 75,
            prop: 'landWeight',
            controls: false,
            overHidden: true,
            index: 18,
            precision: 2,
            type: 'number'
          },
          // {
          //   label: '包装',
          //   width: 100,
          //   search: true,
          //   index: 6,
          //   overHidden: true,
          //   cell: true,
          //   prop: 'packing',
          //   type: 'select',
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=packaging",
          //   props: {
          //     label: "dictValue",
          //     value: "dictValue"
          //   },
          // },
          {
            label: '尺码',
            width: 75,
            // search: true,
            index:19,
            overHidden: true,
            cell: true,
            prop: 'size',
          },
          // {
          //   label: '陆运费(D)',
          //   overHidden: true,
          //   prop: 'landAmountD'
          // },
          {
            label: '应付陆运费',
            overHidden: true,
            index: 20,
            width: 68,
            cell: true,
            prop: 'landAmountC'
          }, {
            label: '委托备注',
            overHidden: true,
            index: 21,
            width: 238,
            prop: 'remarks'
          }, {
            label: '车队备注',
            cell: true,
            index: 22,
            width: 238,
            overHidden: true,
            prop: 'fleetRemarks'
          }, {
            label: '司机备注',
            overHidden: true,
            width: 238,
            index: 23,
            prop: 'driverRemarks'
          },
          // {
          //   label: '场站费',
          //   width: 100,
          //   precision: 2,
          //   cell: true,
          //   index: 24,
          //   controls: false,
          //   type: 'number',
          //   prop: 'oneFeeC'
          // }, {
          //   label: '港杂费',
          //   width: 100,
          //   precision: 2,
          //   cell: true,
          //   index: 25,
          //   controls: false,
          //   type: 'number',
          //   prop: 'twoFeeC'
          // }, {
          //   label: '扣款',
          //   width: 100,
          //   precision: 2,
          //   index: 26,
          //   cell: true,
          //   controls: false,
          //   type: 'number',
          //   prop: 'threeFeeC'
          // }, {
          //   label: '待时费',
          //   width: 100,
          //   precision: 2,
          //   index: 27,
          //   cell: true,
          //   controls: false,
          //   type: 'number',
          //   prop: 'fourFeeC'
          // }, {
          //   label: '其他',
          //   width: 100,
          //   precision: 2,
          //   index: 28,
          //   cell: true,
          //   type: 'number',
          //   controls: false,
          //   prop: 'fiveFeeC'
          // }, {
          //   label: '费用备注',
          //   width: 245,
          //   index: 29,
          //   cell: true,
          //   prop: 'feeRemarksC'
          // },
          {
            label: '制单日期',
            overHidden: true,
            prop: 'createTime',
            type: "date",
            searchRange: true,
            defaultTime: ['00:00:00', '23:59:59'],
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            index: 30,
            width: 100,
            search: true,
          }, {
            label: '船名航次',
            prop: 'factory',
            overHidden: true,
            index: 31,
            width: 128,
            search: true,
          }
        ]
      },
      totalData: {},
      activeName: '1',
      dispatchACarTimer:null
    }
  },
  async created() {
    this.entrustOptionTwoT = await this.getColumnData(this.getColumnName(87), this.optionList);
    this.key++
    this.findObject(this.entrustOptionTwoT.column, "plateNo").change = (data) => {
      fleetList({fleetId:data.row.fleetId}).then(res => {
        for (let item in res.data.data) {
          if (data.value === res.data.data[item].plateNo) {
            this.goodsList[data.index].driverId = res.data.data[item].driverId
            this.goodsList[data.index].driverName = res.data.data[item].driverName
            this.goodsList[data.index].tel = res.data.data[item].tel
          }
        }
      })
    }
    this.findObject(this.entrustOptionTwoT.column, "driverId").change = (data) => {
      telephone().then(res => {
        for (let item in res.data.data) {
          if (data.value === res.data.data[item].id) {
            this.goodsList[data.index].tel = res.data.data[item].tel
          }
        }
      })
    }
    let i = 0;
    this.entrustOptionTwoT.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.entrustOptionTwoT.searchMenuSpan = num * 8;
      this.entrustOptionTwoT.searchMenuPosition = "right";
    }
    let this_ = this
    this_.dispatchACarTimer = setInterval(function(){
      motorcadeDriver(3).then(res=>{
        this_.totalData = res.data.data
      })
    },5000)
  },
  beforeDestroy() {
    this.map && this.map.destroy();
    clearInterval(this.dispatchACarTimer); //关闭
  },
  methods: {
    confirmChange() {
      changeVehicle({
        ...this.formData,
        id: this.formDataList.id,
        originalPlateNo: this.formDataList.vehicleId,
        originalDriverName: this.formDataList.driverName,
        originalTel: this.formDataList.tel
      }).then(res => {
        this.dialogChange = false
        this.onLoad(this.page)
        this.$refs.saveForm.resetForm()
      })
    },
    //变更信息
    changeFleetT(row, index) {
      let data = [{
        dictKey: "2",
        dictValue: "未受理"
      },{
        dictKey: "3",
        dictValue: "未完工"
      },{
        dictKey: "5",
        dictValue: "未到厂"
      },{
        dictKey: "6",
        dictValue: "已提箱"
      }]
      for (let item of data){
        if (row.status == item.dictKey){
          this.formData = {
            status:item.dictKey,
            $status:item.dictValue
          }
        }
      }
      this.formDataList = row
      this.dialogChange = true
      this.optionData.column[0].dicUrl = "/api/blade-client/land-vehicle/vehicle-list?fleetId="+this.formDataList.fleetId
    },
    //打开变更记录
    recordsOfChanges(row, index) {
      this.dialogRecord = true
      recordingDetails({itemId: row.id, kind: 3}).then(res => {
        this.dataRecord = res.data.data
      })
    },
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(87), this.entrustOptionTwoT);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.entrustOptionTwoT = this.optionList;
      const inSave = await this.delColumnData(this.getColumnName(87), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.entrustOptionTwoT.height = this.entrustOptionTwoT.height - 230
      } else {
        this.entrustOptionTwoT.height = this.entrustOptionTwoT.height + 230
      }
      this.$refs.crud.getTableHeight()
    },
    //箱信息保存
    rowSave(row, index, done, loading) {
      done()
    },
    //箱信息选择车队
    getfleetIdT(data, row) {
      this.$set(row, 'fleetName', data.cname)
    },
    //搜索
    searchChange(params, done) {
      let data = params
      if (params.arrivalTime) {
        data.beginArrivalTime = params.arrivalTime[0]
        data.endArrivalTime = params.arrivalTime[1]
      }
      if (params.createTime) {
        data.beginCrateTime = params.createTime[0]
        data.endCrateTime = params.createTime[1]
      }
      delete data.arrivalTime
      delete data.createTime
      this.query = data;
      this.onLoad(this.page, params)
      done();
    },
    //查询
    onLoad(page, params={}) {
      motorcadeDriver(3).then(res => {
        this.totalData = res.data.data
      })
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        status: this.activeName,
        tag: '3',
        ...params,
        ...Object.assign(params, this.query)
      }
      this.loading = true;
      driverQueryCollection(queryParams).then(res => {
        this.goodsList = res.data.data.records
        this.page.total = res.data.data.total
        this.entrustOptionTwoT.height = window.innerHeight - 355;
      }).finally(() => {
        this.loading = false;
      })
    },
    //箱信息保存
    rowSaveT(row, index, done, loading) {
      if (row.$cellEdit) {
        fleetDriverSave(row).then(res => {
          this.$message.success("保存成功");
        })
      }
      this.$refs.crud.rowCell(row, index)
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    //箱信息派车
    designate(row) {
      if (row.plateNo) {
        this.$confirm('是否确定派车', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sendACarCollection(row).then(res => {
            this.$message.success('操作成功');
            this.onLoad(this.page)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else {
        this.$message.warning('未选择车号，请选择');
      }
    },
    //取消派车
    cancelDesignate(row) {
      this.$confirm('是否确定取消派车', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sendACarDispatchCollection({id: row.id}).then(res => {
          this.$message.success('操作成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //打开附件
    annexOpen(row, index) {
      this.loadingTwo = false
      this.dialogVisible = true
      this.form = row
      getAttachment({id: row.id}).then(res => {
        console.log(res)
        this.orderList = res.data.data
      })
    },
    //保存
    saveAnnex() {
      this.loadingTwo = true
      saveAttached({
        id: this.form.id,
        fileList: this.orderList
      }).then(res => {
        this.$message.success('保存成功');
        this.annexOpen(this.form)
      })
    },
    ToBreak(val) {
      if (val)return val.replace(/\n/g, '<br/>')
    },
    markerClick(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    openTrack(row){
      location({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557', color: '2'}).then(res => {
        this.dialogVisibleTwo = true
        let this_ = this
        setTimeout(function () {
          this_.initMap(res.data.data, row.plateNo);
        }, 1000)
      })
    },
    initMap(data, plateNo) {
      this.map = new AMap.Map("container", {resizeEnable: true});
      this.infoWindow = new AMap.InfoWindow({
        ffset: new AMap.Pixel(0, -30),
        offset: new AMap.Pixel(0, -30)
      });
      let icon = new AMap.Icon({
        size: new AMap.Size(52, 26), // 图标尺寸
        image: 'https://trade.tubaosoft.com/file/bladex/000000/1123598821738675201/che.png',
        imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
      });
      this.marker = new AMap.Marker({
        position: data.location,
        map: this.map,
        icon: icon,
        markerMeta: new AMap.Size(28, 28),
        offset: new AMap.Pixel(-26, -15),
        autoRotation: true,
        angle: -15
      });
      this.marker.content = '<div style="width: 300px;">'
          + '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + plateNo + '</p>'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">最后上报时间:</span>' + new Date(Number(data.time) + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19) + '</p>'
          + '<div style="width: 150px;float: left;">'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">车辆状态:</span>' + (data.speed > 0 ? '行驶中' : '停车') + '</p>'
          + '</div>'
          + '<div style="width: 150px;float: right;">'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">速度:</span>' + data.speed + 'km/h</p>'
          + '</div>'
          + '<p><span style="color: #a0a0a0">当前位置:</span>' + data.address + '</p>'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">经纬度:</span>' + data.location.join(',') + '</p>'
          + '</div>'
      this.infoWindow.open(this.map, this.map.getCenter());
      this.marker.on('click', this.markerClick);
      this.marker.emit('click', {target: this.marker});
      this.map.setFitView();
    },
  }
}
</script>

<style lang="scss" scoped>
#container {
  height: 80vh;
  width: 100%;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 0 !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
::v-deep .amap-info-content {
  padding: 5px 5px 5px 5px !important;
}
::v-deep .amap-info-close {
  right: 10px !important;
  top: 12px !important;
}
.selected{
  color: #1e9fff !important;
}
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      align-items: center;

      &_but {
        margin-right: 10px;
        border: 1px solid #409eff;
        width: 80px;
        border-radius: 3px;
        display: flex;

        &_left {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_right {
          width: 40px;
          text-align: center;
          color: #409eff;
          cursor: pointer;
        }

        &_active {
          color: #fff;
          background-color: #409eff;
        }
      }
    }
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6vh;
  width: 80vw;

  .divider {
    display: block;
    height: 0px;
    width: 100%;
    border-top: 1px dashed #dcdfe6;
  }

  &-item {
    margin-left: 1vw;

    .card {
      width: 130px;
      display: flex;
      align-items: center;

      &-title {
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          line-height: 20px;
        }
      }

      &-title1 {
        color: #037fe1;
        background-color: rgba(3, 127, 225, 0.15);
      }

      &-title2 {
        color: #ffa21e;
        background-color: rgba(255, 162, 30, 0.15);
      }

      &-title3 {
        color: #fb5b60;
        background-color: rgba(251, 91, 96, 0.15);
      }

      &-title4 {
        color: #42bc6f;
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-title5 {
        color: #14cde1;
        background-color: rgba(52, 149, 161, 0.15);
      }

      &-title6 {
        color: rgba(4, 66, 31, 0.63);
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-content {
        padding-left: 1vw;
        display: flex;
        flex-direction: column;

        &-num {
          font-size: 20px;
          font-weight: 600;
        }

        &-text {
          color: #909399;
        }
      }
    }
  }
}
</style>