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

<template>
  <div>
    <basic-container v-show="show">
      <div class="home-container"
        v-if="roleName.indexOf('平台') !== -1 || roleName.indexOf('客户') !== -1 || roleName.indexOf('administrator') !== -1 || roleName.indexOf('admin') !== -1 || roleName.indexOf('散货经理') !== -1 || roleName.indexOf('演示账号') !== -1">
        <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('0')">
              <div class="card">
                <div class="card-title card-title7">
                  <span>
                    提
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '0' ? 'selected' : ''">{{ totalData.last }}</span>
                  <span class="card-content-text" :class="activeName === '0' ? '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.zero }}</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-title3">
                  <span>
                    派
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '2' ? 'selected' : ''">{{ totalData.one }}</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-title4">
                  <span>
                    受
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '3' ? 'selected' : ''">{{ totalData.two }}</span>
                  <span class="card-content-text" :class="activeName === '3' ? 'selected' : ''">未受理</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('4,6')">
              <div class="card">
                <div class="card-title card-title5">
                  <span>
                    完
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '4,6' ? 'selected' : ''">{{
                    totalData.three
                  }}</span>
                  <span class="card-content-text" :class="activeName === '4,6' ? 'selected' : ''">未完工</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('5')">
              <div class="card">
                <div class="card-title card-title6">
                  <span>
                    工
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '5' ? 'selected' : ''">{{ totalData.four }}</span>
                  <span class="card-content-text" :class="activeName === '5' ? 'selected' : ''">已关闭</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-container" v-if="roleName.indexOf('车队') !== -1">
        <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('2')">
              <div class="card">
                <div class="card-title card-title3">
                  <span>
                    派
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '2' ? 'selected' : ''">{{ totalData.one }}</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-title4">
                  <span>
                    受
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '3' ? 'selected' : ''">{{ totalData.two }}</span>
                  <span class="card-content-text" :class="activeName === '3' ? 'selected' : ''">未受理</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('4,6')">
              <div class="card">
                <div class="card-title card-title5">
                  <span>
                    完
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '4,6' ? 'selected' : ''">{{
                    totalData.three
                  }}</span>
                  <span class="card-content-text" :class="activeName === '4,6' ? 'selected' : ''">未完工</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('5')">
              <div class="card">
                <div class="card-title card-title6">
                  <span>
                    工
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '5' ? 'selected' : ''">{{ totalData.four }}</span>
                  <span class="card-content-text" :class="activeName === '5' ? 'selected' : ''">已关闭</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-container" v-if="roleName.indexOf('司机') !== -1">
        <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('3')">
              <div class="card">
                <div class="card-title card-title4">
                  <span>
                    受
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '3' ? 'selected' : ''">{{ totalData.two }}</span>
                  <span class="card-content-text" :class="activeName === '3' ? 'selected' : ''">未受理</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('4,6')">
              <div class="card">
                <div class="card-title card-title5">
                  <span>
                    完
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '4,6' ? 'selected' : ''">{{
                    totalData.three
                  }}</span>
                  <span class="card-content-text" :class="activeName === '4,6' ? 'selected' : ''">未完工</span>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="content-item" @click="handleClick('5')">
              <div class="card">
                <div class="card-title card-title6">
                  <span>
                    工
                  </span>
                </div>
                <div class="card-content">
                  <span class="card-content-num" :class="activeName === '5' ? 'selected' : ''">{{ totalData.four }}</span>
                  <span class="card-content-text" :class="activeName === '5' ? 'selected' : ''">已关闭</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-container>
    <basic-container v-show="show">
      <avue-crud :key="key" :table-loading="loading" :page.sync="page" :data="dataList" ref="crud" :option="option"
        :search.sync="query" @on-load="onLoad" @row-del="rowDel" @search-reset="query = {}; activeName = ''"
        @selection-change="selectionChange" @resetColumn="resetColumn" @saveColumn="saveColumn"
        @search-criteria-switch="searchCriteriaSwitch" @search-change="searchChange">
        <template slot="menuLeft" slot-scope="{size}"
          v-if="roleName.indexOf('客户') !== -1 || roleName.indexOf('分管调度') !== -1 || roleName.indexOf('administrator') !== -1 || roleName.indexOf('admin') !== -1 || roleName.indexOf('演示账号') !== -1">
          <el-button type="primary" icon="el-icon-plus" :size="size" @click="rowSave">{{$t("landbtn118n.new")}}</el-button>
          <el-button type="success" :size="size" :disabled="selectionList.length !== 1" @click="copyDocument">{{$t("landbtn118n.copy")}}
          </el-button>
          <el-button type="info" :size="size" icon="el-icon-printer">报表打印</el-button>
        </template>
        <template slot="plateNo" slot-scope="{row}" v-if="!row.$cellEdit">
          <span class="el-button--text" style="cursor: pointer" @click="openTrack(row)">{{ row.plateNo }}</span>
        </template>
        <template slot="corpShortNameSearch" slot-scope="{ row,index}">
          <crop-select v-model="row.corpId" :corpType="'KH'" :label="'shortName'"></crop-select>
        </template>
        <!--        <template slot="corpNameSearch" slot-scope="{ row,index}">-->
        <!--          <crop-select-->
        <!--              v-model="row.corpId"-->
        <!--          ></crop-select>-->
        <!--        </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="unloadingPlace" slot-scope="{ row,index}">
          <el-tooltip class="item" effect="dark" placement="top">
            <div v-html="ToBreak(row.unloadingPlace)" slot="content"></div>
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.unloadingPlace }}</div>
          </el-tooltip>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button type="text" icon="el-icon-edit" size="small" @click.stop="rowCell(row, index)">查看
          </el-button>
          <el-button type="text" icon="el-icon-delete" size="small"
            :disabled="roleName.indexOf('经理') !== -1 || roleName.indexOf('部门经理') !== -1 || roleName.indexOf('总经理') !== -1 || roleName.indexOf('总调度') !== -1"
            v-if="row.status < 1" @click.stop="$refs.crud.rowDel(row, index)">删除
          </el-button>
        </template>
        <template slot="corpShortName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row, index)">{{ row.corpShortName
            }}</span>
        </template>
        <template slot="dispatchNumber" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row, index)">{{ row.dispatchNumber
            }}</span>
        </template>
        <template slot="orderNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row, index)">{{ row.orderNo
            }}</span>
        </template>
        <template slot="contractNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row, index)">{{
            row.contractNo
          }}</span>
        </template>
        <template slot="fleetNameDetail" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row, index)">{{
            row.fleetNameDetail
          }}</span>
        </template>
      </avue-crud>
    </basic-container>
    <detail-page v-if="!show" @backToList="backToList" :id="id" :home="home"></detail-page>
    <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 detailPage from './detailPage'
import { getSalesman, removeDelegationList, selectInvoiceList, totalList } from "@/api/landTransportation/bulkCargo";
import { getQueryString } from "@/util/util";
import { businessStatisticsFrequency } from "@/api/wel";
import { gaude, location } from "@/api/gaude";
import { customerList, fleetList } from "@/api/basicData/customerInformation";
import { defaultDate } from "@/util/date";

export default {
  name: "index",
  components: {
    detailPage
  },
  watch: {
    option: {
      handler(newValue, oldValue) {
        if (this.roleName.indexOf('调度中心业务员') !== -1 || this.roleName.indexOf('调度中心经理') !== -1) {
          this.findObject(this.option.column, "freightCollect").hide = true
          this.findObject(this.option.column, "freightCollect").showColumn = false
        }
        if (this.roleName == "平台,调度派单") {
          this.findObject(this.option.column, "freightPay").hide = true
          this.findObject(this.option.column, "freightPay").showColumn = false
        }
      }
    }
  },
  data() {
    return {
      id: '',
      map: null,
      infoWindow: null,
      marker: null,
      dialogVisible: false,
      lineArr: [],
      activeName: '0',
      show: true,
      query: {},
      selectionList: [],
      dataList: [],
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300, 500, 1000]
      },
      key: 0,
      totalData: {},
      option: {},
      optionList: {},
      //客户
      optionListOne: {
        align: 'center',
        stripe: true,
        index: true,
        menu: true,
        menuWidth: 120,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        selection: true,
        highlightCurrentRow: true,
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [{
          name: 'freightCollect',
          type: 'sum',
          decimals: 2
        }, {
          name: 'freightPay',
          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: 126,
            search: true,
          }, {
            label: '业务员',
            index: 2,
            width: 70,
            prop: 'salesmanName',
            searchProp: 'salesman',
            search: true,
            overHidden: true,
            filterable: true,
            type: "select",
            dicUrl: "/api/blade-user/userList?roleAlias=业务员",
            props: {
              label: "realName",
              value: "id"
            }
          }, {
            label: '物流运输',
            prop: 'dispatchDeptName',
            searchProp: 'dispatchDept',
            search: true,
            filterable: true,
            dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
            type: "select",
            props: {
              label: "deptName",
              value: "id"
            },
            overHidden: true,
            index: 3,
            width: 80
          }, {
            label: '运输调度',
            prop: 'dispatcherName',
            overHidden: true,
            index: 4,
            width: 70,
          }, {
            label: '派车单号',
            width: 80,
            index: 5,
            prop: 'dispatchNumber',
            overHidden: true,
            search: true,
          }, {
            label: '装货地点',
            prop: 'addressDetail',
            index: 6,
            width: 132,
            search: true,
          }, {
            label: '卸货地点',
            prop: 'unloadingPlace',
            index: 7,
            width: 132,
            search: true,
          }, {
            label: '车队',
            width: 90,
            index: 8,
            overHidden: true,
            prop: 'fleetShortName',
            searchProp: 'fleetId',
            type: 'select',
            cascader: ['plateNo'],
            props: {
              label: "cname",
              value: "id"
            },
            filterable: true,
            search: true,
          }, {
            label: '车型',
            width: 90,
            index: 9,
            prop: 'fleetVolum'
          }, {
            label: '运费',
            index: 11,
            width: 100,
            prop: 'freightCollect'
          }, {
            label: '状态',
            prop: 'status',
            index: 12,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status_two",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "string",
            type: 'select',
            overHidden: true,
            search: true,
            width: 90
          }, {
            label: '备注',
            index: 13,
            overHidden: true,
            width: 130,
            prop: 'remarks',
          }, {
            label: '公司名称',
            prop: 'corpShortName',
            overHidden: true,
            index: 14,
            width: 120,
            search: true,
          }, {
            label: '制单人',
            prop: 'createUserName',
            overHidden: true,
            index: 15,
            width: 60,
          }, {
            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: 16,
            width: 135,
            search: true,
          },
          {
            label: '平台号',
            width: 70,
            index: 9,
            prop: 'orderNo',
            searchProp: 'orderNo',
            filterable: true,
            search: true,
            hide: true,
          }, 
          {
            label: '结算金额(收)',
            width: 100,
            index: 18,
            prop: 'settlementAmountD'
          }, 
          {
            label: '结算时间(收)',
            width: 100,
            index: 19,
            prop: 'settlementDateD',
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          }, 
          {
            label: '结算金额(付)',
            width: 100,
            index: 20,
            prop: 'settlementAmountC'
          }, 
          {
            label: '结算时间(付)',
            width: 100,
            index: 21,
            prop: 'settlementDateC',
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          }, 
          {
            label: '对账金额(收)',
            width: 100,
            index: 22,
            prop: 'reconciliationAmountD'
          }, 
          {
            label: '对账时间(收)',
            width: 100,
            index: 23,
            prop: 'reconciliationDateD',
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          }, 
          {
            label: '对账金额(付)',
            width: 100,
            index: 24,
            prop: 'reconciliationAmountC'
          }, 
          {
            label: '对账时间(付)',
            width: 100,
            index: 25,
            prop: 'reconciliationDateC',
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
        ]
      },
      //调度
      optionListTwo: {
        align: 'center',
        stripe: true,
        index: true,
        menu: true,
        menuWidth: 120,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        selection: true,
        highlightCurrentRow: true,
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [{
          name: 'freightCollect',
          type: 'sum',
          decimals: 2
        }, {
          name: 'freightPay',
          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: 126,
            search: true,
          }, {
            label: '业务员',
            index: 2,
            width: 70,
            prop: 'salesmanName',
            searchProp: 'salesman',
            search: true,
            overHidden: true,
            filterable: true,
            type: "select",
            dicUrl: "/api/blade-user/userList?roleAlias=业务员",
            props: {
              label: "realName",
              value: "id"
            }
          }, {
            label: '运输调度',
            prop: 'dispatcherName',
            overHidden: true,
            index: 3,
            width: 70,
          }, {
            label: '派车单号',
            width: 80,
            index: 4,
            prop: 'dispatchNumber',
            overHidden: true,
            search: true,
          }, {
            label: '装货地点',
            prop: 'addressDetail',
            index: 5,
            width: 132,
            search: true,
          }, {
            label: '卸货地点',
            prop: 'unloadingPlace',
            index: 6,
            width: 132,
            search: true,
          }, {
            label: '车队',
            width: 90,
            index: 7,
            overHidden: true,
            prop: 'fleetShortName',
            searchProp: 'fleetId',
            type: 'select',
            dicData: [],
            cascader: ['plateNo'],
            props: {
              label: "cname",
              value: "id"
            },
            filterable: true,
            search: true,
          }, {
            label: '车号',
            width: 90,
            index: 8,
            prop: 'plateNo'
          }, {
            label: '车型',
            width: 90,
            index: 9,
            prop: 'fleetVolum'
          }, {
            label: '应收运费',
            index: 11,
            width: 100,
            prop: 'freightCollect'
          }, {
            label: '状态',
            prop: 'status',
            index: 12,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status_two",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "string",
            type: 'select',
            overHidden: true,
            search: true,
            width: 90
          }, {
            label: '应付运费',
            prop: 'freightPay',
            overHidden: true,
            width: 100,
            index: 13,
          }, {
            label: '备注',
            index: 14,
            overHidden: true,
            width: 130,
            prop: 'remarks',
          }, {
            label: '公司名称',
            prop: 'corpShortName',
            overHidden: true,
            index: 15,
            width: 120,
            search: true,
          }, {
            label: '制单人',
            prop: 'createUserName',
            overHidden: true,
            index: 16,
            width: 60,
          }, {
            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: 17,
            width: 135,
            search: true,
          }
        ]
      },
      optionListThree: {
        align: 'center',
        stripe: true,
        index: true,
        menu: true,
        menuWidth: 120,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        selection: true,
        highlightCurrentRow: true,
        showSummary: true,
        summaryText: "合计",
        sumColumnList: [{
          name: 'freightCollect',
          type: 'sum',
          decimals: 2
        }, {
          name: 'freightPay',
          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: 126,
            search: true,
          }, {
            label: '物流运输',
            prop: 'dispatchDeptName',
            searchProp: 'dispatchDept',
            search: true,
            filterable: true,
            dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
            type: "select",
            props: {
              label: "deptName",
              value: "id"
            },
            overHidden: true,
            index: 2,
            width: 80
          }, {
            label: '运输调度',
            prop: 'dispatcherName',
            overHidden: true,
            index: 3,
            width: 70,
          }, {
            label: '派车单号',
            width: 80,
            index: 4,
            prop: 'dispatchNumber',
            overHidden: true,
            search: true,
          }, {
            label: '装货地点',
            prop: 'addressDetail',
            index: 5,
            width: 132,
            search: true,
          }, {
            label: '卸货地点',
            prop: 'unloadingPlace',
            index: 6,
            width: 132,
            search: true,
          }, {
            label: '车队',
            width: 90,
            index: 7,
            overHidden: true,
            prop: 'fleetShortName',
            searchProp: 'fleetId',
            type: 'select',
            cascader: ['plateNo'],
            props: {
              label: "cname",
              value: "id"
            },
            filterable: true,
            search: true,
          }, {
            label: '车号',
            width: 90,
            index: 8,
            prop: 'plateNo',
            type: "select",
            cascader: ['driverId'],
            dicUrl: "/api/blade-client/land-vehicle/vehicle-list?fleetId={{key}}",
            props: {
              label: "plateNo",
              value: "plateNo"
            },
            filterable: true,
            search: true,
          }, {
            label: '司机',
            width: 70,
            index: 9,
            prop: 'driverName',
            searchProp: 'driverId',
            filterable: true,
            type: "select",
            dicUrl: "/api/blade-client/land-driver/driver-list?plateNo={{key}}",
            props: {
              label: "name",
              value: "id"
            },
            search: true,
          }, {
            label: '电话',
            width: 120,
            index: 10,
            prop: 'driverTel'
          }, {
            label: '车型',
            width: 90,
            index: 11,
            prop: 'fleetVolum'
          },
          // {
          //   label: '状态',
          //   prop: 'status',
          //   index: 13,
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status_two",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey"
          //   },
          //   dataType: "string",
          //   type: 'select',
          //   overHidden: true,
          //   search: true,
          //   width: 140
          // },
          {
            label: '应付运费',
            prop: 'freightPay',
            overHidden: true,
            width: 100,
            index: 13,
          }, {
            label: '备注',
            index: 14,
            overHidden: true,
            width: 130,
            prop: 'remarks',
          }]
      },
      optionListFour: {
        align: 'center',
        stripe: true,
        index: true,
        menu: true,
        menuWidth: 120,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        selection: true,
        highlightCurrentRow: true,
        showSummary: false,
        summaryText: "合计",
        sumColumnList: [{
          name: 'freightCollect',
          type: 'sum',
          decimals: 2
        }, {
          name: 'freightPay',
          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: 126,
            search: true,
          }, {
            label: '物流运输',
            prop: 'dispatchDeptName',
            searchProp: 'dispatchDept',
            search: true,
            filterable: true,
            dicUrl: "/api/blade-system/dept/top-list?deptCategory=1",
            type: "select",
            props: {
              label: "deptName",
              value: "id"
            },
            overHidden: true,
            index: 2,
            width: 80
          }, {
            label: '运输调度',
            prop: 'dispatcherName',
            overHidden: true,
            index: 3,
            width: 70,
          }, {
            label: '派车单号',
            width: 80,
            index: 4,
            prop: 'dispatchNumber',
            overHidden: true,
            search: true,
          }, {
            label: '装货地点',
            prop: 'addressDetail',
            index: 5,
            width: 132,
            search: true,
          }, {
            label: '卸货地点',
            prop: 'unloadingPlace',
            index: 6,
            width: 132,
            search: true,
          }, {
            label: '车队',
            width: 90,
            index: 7,
            overHidden: true,
            prop: 'fleetShortName',
            searchProp: 'fleetId',
            type: 'select',
            cascader: ['plateNo'],
            props: {
              label: "cname",
              value: "id"
            },
            filterable: true,
            search: true,
          }, {
            label: '车号',
            width: 90,
            index: 8,
            prop: 'plateNo',
            type: "select",
            cascader: ['driverId'],
            dicUrl: "/api/blade-client/land-vehicle/vehicle-list?fleetId={{key}}",
            props: {
              label: "plateNo",
              value: "plateNo"
            },
            filterable: true,
            search: true,
          }, {
            label: '司机',
            width: 70,
            index: 9,
            prop: 'driverName',
            searchProp: 'driverId',
            filterable: true,
            type: "select",
            dicUrl: "/api/blade-client/land-driver/driver-list?plateNo={{key}}",
            props: {
              label: "name",
              value: "id"
            },
            search: true,
          }, {
            label: '电话',
            width: 120,
            index: 10,
            prop: 'driverTel'
          }, {
            label: '车型',
            width: 90,
            index: 11,
            prop: 'fleetVolum'
          },
          // {
          //   label: '状态',
          //   prop: 'status',
          //   index: 13,
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=land_order_status_two",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey"
          //   },
          //   dataType: "string",
          //   type: 'select',
          //   overHidden: true,
          //   search: true,
          //   width: 140
          // },
          {
            label: '备注',
            index: 14,
            overHidden: true,
            width: 130,
            prop: 'remarks',
          }]
      },
      home: false,
      entrustTimer: null,
      roleName: localStorage.getItem("roleName").split(','),
    }
  },

  activated() {
    if (this.$route.query.id) {
      this.rowCell({ id: this.$route.query.id }, 0)
      this.$router.$avueRouter.closeTag(window.location.hash.slice(1))
      this.home = true
    }
    if (this.$route.query.params){
      this.rowCell({id:this.$route.query.params},0)
    }
  },
  async created() {
    // this.option = this.optionListOne
    // this.option = this.optionListTwo
    // this.option = this.optionListThree
    this.query = {
      arrivalTime: [defaultDate(4)[0] + ' 00:00:00', defaultDate(4)[1] + ' 23:59:59']
    }
    if (this.roleName.indexOf('客户') !== -1 || this.roleName.indexOf('admin') !== -1 || this.roleName.indexOf('散货经理') !== -1) {
      this.activeName = '0'
      this.optionList = this.optionListOne
    } else if (this.roleName.indexOf('平台') !== -1) {
      this.activeName = '0'
      this.optionList = this.optionListTwo
    } else if (this.roleName.indexOf('车队') !== -1) {
      this.activeName = '2'
      this.optionList = this.optionListThree
    } else {
      this.activeName = '3'
      this.optionList = this.optionListFour
    }
    this.option = await this.getColumnData(this.getColumnName(85.7), this.optionList);
    this.key++
    fleetList().then(res => {
      this.findObject(this.option.column, "fleetShortName").dicData = res.data.data
    })
    getSalesman().then(res => {
      this.findObject(this.option.column, "salesmanName").dicData = res.data.data
    })
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (this.roleName.indexOf('经理') !== -1 || this.roleName.indexOf('部门经理') !== -1 || this.roleName.indexOf('总经理') !== -1 || this.roleName.indexOf('总调度') !== -1) {
      //   this.option.menu = false
      this.option.header = false
    }
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  mounted() {
    businessStatisticsFrequency().then(res => {
      // let this_ = this
      // this_.entrustTimer = setInterval(function () {
      //   if (JSON.parse(localStorage.getItem("saber-token")).content) {
      //     totalList(1).then(res => {
      //       this_.totalData = res.data.data
      //     })
      //   }
      // },  Number(res.data.data[0].dictKey)*1000)
    })
  },
  beforeDestroy() {
    this.map && this.map.destroy();
    clearInterval(this.entrustTimer); //关闭
  },
  methods: {
    openTrack(row) {
      location({ itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557', color: '2' }).then(res => {
        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 = null
      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();
    },
    selectionChange(list) {
      this.selectionList = list
      // this.$message.success('选中的数据'+ JSON.stringify(list));
    },
    //自定义列保存
    async saveColumn() {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(85.7), 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(85.7), this.optionList);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
        if (this.roleName.indexOf('经理') !== -1 || this.roleName.indexOf('部门经理') !== -1 || this.roleName.indexOf('总经理') !== -1) {
          this.option.menu = false
          this.option.header = false
        }
      }
    },
    // 获得高度
    searchCriteriaSwitch(type) {
      if (type) {
        this.option.height = this.option.height - 138
      } else {
        this.option.height = this.option.height + 138
      }
      this.$refs.crud.getTableHeight()
    },
    //切换订单状态
    handleClick(tab) {
      this.activeName = tab
      this.onLoad(this.page)
    },
    onLoad(page, params = {}) {
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        // itemStatus: this.activeName,
        statusIds: this.activeName,
        ...Object.assign(params, this.query)
      }
      if (queryParams.arrivalTime) {
        queryParams.beginArrivalTime = queryParams.arrivalTime[0]
        queryParams.endArrivalTime = queryParams.arrivalTime[1]
      }
      delete queryParams.arrivalTime
      totalList(queryParams).then(res => {
        this.totalData = res.data.data
      })
      this.loading = true;
      selectInvoiceList(queryParams).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
        this.option.height = window.innerHeight - 350;
      }).finally(() => {
        this.loading = false;
      })
    },
    //搜索
    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, data)
      done();
    },
    //列表删除
    rowDel(row) {
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDelegationList({ ids: row.id }).then(res => {
          this.$message.success('删除成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //行编辑
    rowCell(row, index) {
      // console.log(localStorage.getItem("roleName").split(','))
      this.id = row.id
      this.show = false
    },
    rowSave() {
      this.show = false
    },
    //复制单据
    copyDocument() {
      this.id = 'copy' + this.selectionList[0].id
      this.show = false
    },
    backToList(type) {
      if (type) {
        this.home = false
        this.$router.push({
          path: '/landTransportation/bulkCargo/index'
        });
      }
      this.id = ''
      this.show = true
      this.onLoad(this.page)
    },
    ToBreak(val) {
      if (val) return val.replace(/\n/g, '<br/>')
    }
  }
}
</script>

<style lang="scss" scoped>
.selected {
  color: #1e9fff !important;
}

.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 5px;
    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);
      }

      &-title7 {
        color: rgba(231, 90, 15, 0.63);
        background-color: rgba(220, 150, 42, 0.15);
      }

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

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

        &-text {
          color: #909399;
        }
      }
    }
  }
}

#container {
  height: 80vh;
  width: 100%;
}

::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 0 !important;
}

::v-deep .amap-info-close {
  right: 10px !important;
  top: 12px !important;
}

::v-deep .amap-info-content {
  padding: 5px 5px 5px 5px !important;
}
</style>