tire-platform-ui/src/views/wel/home/landTransportation/components/sales-trend.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div>
        <div class="content" v-loading="loading">
          <avue-crud :data="tableData" :option="option" :key="key" ref="crud" @refresh-change="refresh"
                     @resetColumn="resetColumn"
                     @saveColumn="saveColumn">
            <template slot="menuLeft">
              <span>今日业务详情（集装箱）</span>
            </template>
            <template slot="billNo" slot-scope="{row}">
                <span class="el-button--text" style="cursor: pointer"
                      @click="openTrack(row,0)">{{ row.billNo }}</span>
            </template>
            <template slot="plateNo" slot-scope="{row}">
                <span class="el-button--text" style="cursor: pointer"
                      @click="openTrack(row,1)">{{ row.plateNo }}</span>
            </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>
            <template slot="status" slot-scope="{row}">
              <span v-if="row.status == 0" style="color: #E45656;">未调度</span>
              <span v-if="row.status == 1" style="color: #F56C6C;">未派车</span>
              <span v-if="row.status == 2" style="color: #F1A532;">未受理</span>
              <span v-if="row.status == 3" style="color: #53C21D;">未完工</span>
              <span v-if="row.status == 5" style="color: #F56C6C;">未到厂</span>
              <span v-if="row.status == 4" style="color: #3C9CFF;">工单关闭</span>
              <span v-if="row.status == 6" style="color: #3C9CFF;">未提箱</span>
            </template>
          </avue-crud>
        </div>
      </div>
    </el-card>
    <el-dialog
        title="车辆轨迹"
        append-to-body
        custom-class="dialog_two"
        :visible.sync="dialogVisible"
        lock-scroll
        width="80%">
      <div id="container"></div>
    </el-dialog>
  </div>
</template>

<script>
import {active} from "@/api/wel";
import {gaude, location} from "@/api/gaude";
import data from "@/views/util/data";

export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  data() {
    return {
      roleName: localStorage.getItem("roleName").split(','),
      dialogVisible: false,
      loading: false,
      tableData: [],
      map: null,
      infoWindow: null,
      marker: null,
      lineArr: [],
      key: 0,
      option: {},
      optionList: {
        stripe: true,
        index: true,
        menu: false,
        refreshBtn: true,
        addBtn: false,
        height: 390,
        align: 'center',
        column: [
          {
            label: '货运日期',
            prop: 'arrivalTime',
            type: "date",
            format: "yyyy-MM-dd HH:mm",
            index: 1,
            width: 150,
            overHidden: true,
          },
          {
            label: '业务员',
            prop: 'salesmanName',
            index: 2,
            width: 60,
            overHidden: true,
          },
          {
            label: '货运地点',
            prop: 'addressDetail',
            index: 3,
            width: 100
          },
          {
            label: '票据号',
            prop: 'receiptNo',
            index: 4,
            width: 100,
            overHidden: true,
          },
          {
            label: '提单号',
            prop: 'billNo',
            index: 5,
            width: 130,
            overHidden: true,
          },
          {
            label: '场站',
            prop: 'station',
            index: 6,
            width: 100,
            overHidden: true,
          },
          {
            label: '箱型箱量',
            prop: 'ctnDetail',
            index: 7,
            width: 100,
            overHidden: true,
          },
          {
            label: '车队',
            prop: 'fleetShortName',
            index: 8,
            width: 190,
            overHidden: true,
          },
          {
            label: '车号',
            prop: 'plateNo',
            index: 9,
            width: 100,
            overHidden: true,
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "string",
            index: 10,
            width: 100,
            overHidden: true,
          },
          {
            label: '运费',
            prop: 'landAmountD',
            index: 11,
            width: 100,
            overHidden: true,
          },
          {
            label: '应收杂费',
            prop: 'extraAmountD',
            index: 13,
            width: 100,
            overHidden: true,
          },
          {
            label: '客户名称',
            prop: 'corpShortName',
            index: 14,
            width: 100,
            overHidden: true,
          },
          {
            label: '备注',
            prop: 'remarks',
            index: 15,
            width: 100,
            overHidden: true,
          },
        ]
      },
    };
  },
  async mounted() {
    this.option = await this.getColumnData(this.getColumnName(140), this.optionList);
    this.key++
    this.init();
    for (let item of this.option.column) {
      if (item.prop === 'extraAmountC') return
    }
    if (this.roleName.indexOf('平台') !== -1) {
      this.option.column.push(
          {
            label: '应付杂费',
            prop: 'extraAmountC',
            index: 12,
            width: 100,
            overHidden: true
          }
      )
    }
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  methods: {
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(140), this.option);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn() {
      this.option = this.optionList;
      const inSave = await this.delColumnData(this.getColumnName(140), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
        for (let item of this.option.column) {
          if (item.prop === 'extraAmountC') return false
        }
        if (this.roleName.indexOf('平台') !== -1) {
          console.log(this.option.column)
          this.option.column.push(
              {
                label: '应付杂费',
                prop: 'extraAmountC',
                index: 12,
                width: 100,
                overHidden: true
              }
          )
        }
        this.key++
      }
    },
    openTrack(row, index) {
      if (index == 0) {
        this.$router.push({
          path: '/landTransportation/placeAnOrder/index',
          query: {id: row.orderId},
        });
      } else {
        // gaude({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557',color:'2'}).then(res => {
        //   this.lineArr = res.data.data
        //   this.dialogVisible = true
        //   let this_ = this
        //   setTimeout(function () {
        //     this_.initMap();
        //   }, 100)
        // })
        location({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557', color: '2'}).then(res => {
          console.log(res.data.data)
          console.log(this.lineArr[this.lineArr.length - 1])
          this.dialogVisible = true
          let this_ = this
          setTimeout(function () {
            this_.initMap(res.data.data, row.plateNo);
          }, 1000)
        })
      }
    },
    markerClick(e) {
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    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></p>'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">今日里程:</span>' + (data.distance.length > 0 ? data.distance : 0) + '</p>'
          + '</div>'
          + '<div style="width: 150px;float: right;">'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">速度:</span>' + data.speed + '</p>'
          + '<p style="padding: 5px 0"><span style="color: #a0a0a0">总里程:</span>' + data.mileage + '</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();
    },
    init() {
      this.getsalesTrend();
    },
    query(data) {
      this.getsalesTrend(data)
    },
    getsalesTrend(data = {status: 0, mold: 0}) {
      this.loading = true;
      active(data).then(res => {
        this.tableData = res.data.data
        this.loading = false;
      })
    },
    ToBreak(val) {
      if (val) return val.replace(/\n/g, '<br/>')
    },
    refresh() {
      this.init()
    }
  }
};
</script>

<style scoped src="../../../../../styles/demo-center.css"></style>
<style scoped>
#container {
  height: 80vh;
  width: 100%;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 0px;
  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;
  }
}

.content {
}

::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-close{
  right: 10px!important;
  top: 12px !important;
}
::v-deep .amap-info-content{
  padding: 5px 5px 5px 5px !important;
}
</style>