修改陆运

src/api/landTransportation/index.js

@@ -125,3 +125,17 @@ export function addressList(name) {
         method: 'get'
     })
 }
+//获取总数
+export function totalList(name) {
+    return request({
+        url: '/api/blade-land/order/count?kind='+name,
+        method: 'get'
+    })
+}
+//获取车队司机总数
+export function motorcadeDriver(name) {
+    return request({
+        url: '/api/blade-land/order-item/count?tag='+name,
+        method: 'get'
+    })
+}

src/views/basicData/landTransportation/driverInformation/index.vue

@@ -136,11 +136,12 @@ export default {
           overHidden: true,
           search:true,
           type: 'select',
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=sex",
+          dicUrl: "/api/blade-system/dict/dictionary?code=sex",
           props: {
             label: "dictValue",
-            value: "dictValue"
-          }
+            value: "dictKey"
+          },
+          dataType: "number",
         },{
           label: '驾驶证有效期',
           prop: 'driveExpire',

src/views/landTransportation/dispatchingCars/detailPage.vue

@@ -22,6 +22,26 @@
           :header-cell-style="{color:'#000',background:'#fafafa'}"
           style="width: 100%">
         <el-table-column
+            property="date"
+            align="center"
+            width="40">
+          <template slot-scope="scope">
+            <span v-if="scope.$index == 0">
+              <el-button type="primary" size="mini" circle>起</el-button>
+            </span>
+            <span v-else-if="scope.$index === tableData.length-1">
+              <el-button type="success" size="mini" circle>止</el-button>
+            </span>
+            <span v-else>
+              <el-button v-if="goodsForm.status === 1" type="warning" size="mini" circle>途</el-button>
+              <el-tooltip v-else class="item" effect="dark" content="删除" placement="right">
+                  <el-button type="danger" icon="el-icon-delete" size="mini" circle
+                             @click="deleteAddress(scope)"></el-button>
+              </el-tooltip>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
             type="index"
             label="序号"
             align="center"
@@ -687,7 +707,7 @@ export default {
         }).then(() => {
           dispatchCollection(row).then(res => {
             this.$message.success('操作成功');
-            this.refreshData()
+            row = res.data
           })
         }).catch(() => {
           this.$message({
@@ -708,7 +728,7 @@ export default {
       }).then(() => {
         cancelDispatchCollection({id: row.id}).then(res => {
           this.$message.success('操作成功');
-          this.refreshData()
+          row = res.data
         })
       }).catch(() => {
         this.$message({

src/views/landTransportation/dispatchingCars/index.vue

@@ -1,6 +1,55 @@
 <template>
   <div>
     <basic-container v-if="show">
+      <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">{{ totalData.all }}</span>
+                  <span class="card-content-text">全部订单</span>
+                </div>
+              </div>
+            </div>
+            <div class="divider"/>
+            <div class="content-item" @click="handleClick('0')">
+              <div class="card">
+                <div class="card-title card-title2">
+                <span>
+                  未
+                </span>
+                </div>
+                <div class="card-content">
+                  <span class="card-content-num">{{ totalData.zero }}</span>
+                  <span class="card-content-text">未调度</span>
+                </div>
+              </div>
+            </div>
+            <div class="divider"/>
+            <div class="content-item" @click="handleClick('1')">
+              <div class="card">
+                <div class="card-title card-title3">
+                <span>
+                  派
+                </span>
+                </div>
+                <div class="card-content">
+                  <span class="card-content-num">{{ totalData.one }}</span>
+                  <span class="card-content-text">未派车</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </basic-container>
+    <basic-container v-if="show">
       <avue-crud
           :table-loading="loading"
           :data="dataList"
@@ -13,9 +62,9 @@
           @saveColumn="saveColumn"
           @search-criteria-switch="searchCriteriaSwitch"
           @search-change="searchChange">
-<!--        <template slot="menuLeft" slot-scope="{size}">-->
-<!--          <el-button type="primary" :size="size" @click="rowSave">新增</el-button>-->
-<!--        </template>-->
+        <!--        <template slot="menuLeft" slot-scope="{size}">-->
+        <!--          <el-button type="primary" :size="size" @click="rowSave">新增</el-button>-->
+        <!--        </template>-->
         <template slot="corpNameSearch" slot-scope="{ row,index}">
           <crop-select
               v-model="row.corpId"
@@ -25,11 +74,18 @@
           <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"-->
-<!--                     @click.stop="$refs.crud.rowDel(row,index)">删除</el-button>-->
+                     @click.stop="rowCell(row,index)">编辑
+          </el-button>
+          <!--          <el-button type="text"-->
+          <!--                     icon="el-icon-delete"-->
+          <!--                     size="small"-->
+          <!--                     @click.stop="$refs.crud.rowDel(row,index)">删除</el-button>-->
+        </template>
+        <template slot="corpName" slot-scope="{row,index}">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="rowCell(row,index)">{{ row.corpName }}</span>
+        </template>
+        <template slot="id" slot-scope="{row,index}">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="rowCell(row,index)">{{ row.id }}</span>
         </template>
       </avue-crud>
     </basic-container>
@@ -39,125 +95,154 @@
 
 <script>
 import detailPage from './detailPage'
-import {removeDelegationList, selectInvoiceList} from "@/api/landTransportation";
+import {removeDelegationList, selectInvoiceList, totalList} from "@/api/landTransportation";
+
 export default {
   name: "index",
   components: {
     detailPage
   },
-  data(){
-    return{
-      id:'',
-      show:true,
-      loading:false,
-      dataList:[],
+  data() {
+    return {
+      id: '',
+      show: true,
+      loading: false,
+      dataList: [],
+      totalData: {},
       page: {
         pageSize: 10,
         currentPage: 1,
         total: 0,
-        pageSizes: [10,50,100,200,300]
+        pageSizes: [10, 50, 100, 200, 300]
       },
-      option:{},
-      optionList:{
-        align:'center',
+      option: {},
+      activeName: '',
+      optionList: {
+        stripe: true,
+        align: 'center',
+        menuWidth: 100,
+        menu: false,
         index: true,
         addBtn: false,
         editBtn: false,
-        delBtn:false,
-        height:"auto",
+        delBtn: false,
+        height: "auto",
         searchSpan: 8,
         searchIcon: true,
-        column:[{
-          label: '状态',
-          prop: 'itemStatusDetail',
-          index: 1,
-          width: 140
-        }, {
-          label: '订单号',
-          prop: 'id',
-          index: 1,
-          overHidden: true,
-          width: 160,
-          search: true,
-        }, {
-          label: '客户名称',
-          prop: 'corpName',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '所属公司',
-          prop: 'corpName',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '提单号',
-          prop: 'billNo',
-          index: 1,
-          overHidden: true,
-          width: 140,
-          search: true,
-        }, {
-          label: '货物名称',
-          prop: 'goods',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '路线',
-          prop: 'id',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '场站',
-          prop: 'station',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '到厂时间',
-          prop: 'arrivalTime',
-          overHidden: true,
-          type: "date",
-          searchRange: true,
-          defaultTime:['00:00:00', '23:59:59'],
-          format: "yyyy-MM-dd HH:mm:ss",
-          valueFormat: "yyyy-MM-dd HH:mm:ss",
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '工厂名称',
-          prop: 'factory',
-          overHidden: true,
-          index: 1,
-          width: 140,
-          search: true,
-        }, {
-          label: '制单日期',
-          overHidden: true,
-          prop: 'createTime',
-          type: "date",
-          searchRange: true,
-          defaultTime:['00:00:00', '23:59:59'],
-          format: "yyyy-MM-dd HH:mm:ss",
-          valueFormat: "yyyy-MM-dd HH:mm:ss",
-          index: 1,
-          width: 140,
-          search: true,
-        }]
+        column: [
+          {
+            label: '状态',
+            prop: 'itemStatusDetail',
+            index: 1,
+            overHidden: true,
+            width: 140
+          }, {
+            label: '订单号',
+            prop: 'id',
+            index: 2,
+            overHidden: true,
+            width: 160,
+            search: true,
+          }, {
+            label: '客户名称',
+            prop: 'corpName',
+            overHidden: true,
+            index: 3,
+            width: 140,
+            search: true,
+          }, {
+            label: '所属公司',
+            prop: 'belongCompany',
+            overHidden: true,
+            index: 4,
+            width: 140,
+            search: true,
+          }, {
+            label: '提单号',
+            prop: 'billNo',
+            index: 5,
+            overHidden: true,
+            width: 140,
+            search: true,
+          }, {
+            label: '货物名称',
+            prop: 'goods',
+            overHidden: true,
+            index: 6,
+            width: 140,
+            search: true,
+          }, {
+            label: '路线',
+            prop: 'addressDetail',
+            overHidden: true,
+            index: 7,
+            width: 140,
+            search: true,
+          }, {
+            label: '计划箱量',
+            prop: 'ctnDetail',
+            overHidden: true,
+            index: 8,
+            width: 140,
+            search: true,
+          }, {
+            label: '已派箱量',
+            prop: 'dispatchCtnDetail',
+            overHidden: true,
+            index: 9,
+            width: 140,
+            search: true,
+          }, {
+            label: '车队受理箱量',
+            prop: 'sendCtnDetail',
+            overHidden: true,
+            index: 10,
+            width: 140,
+            search: true,
+          }, {
+            label: '场站',
+            prop: 'station',
+            overHidden: true,
+            index: 11,
+            width: 140,
+            search: true,
+          }, {
+            label: '到厂时间',
+            prop: 'arrivalTime',
+            overHidden: true,
+            type: "date",
+            searchRange: true,
+            defaultTime: ['00:00:00', '23:59:59'],
+            format: "yyyy-MM-dd HH:mm:ss",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+            index: 12,
+            width: 140,
+            search: true,
+          }, {
+            label: '船名航次',
+            prop: 'factory',
+            overHidden: true,
+            index: 13,
+            width: 140,
+            search: true,
+          }, {
+            label: '制单日期',
+            overHidden: true,
+            prop: 'createTime',
+            type: "date",
+            searchRange: true,
+            defaultTime: ['00:00:00', '23:59:59'],
+            format: "yyyy-MM-dd HH:mm:ss",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+            index: 14,
+            width: 140,
+            search: true,
+          }]
       }
     }
   },
   async created() {
-    this.option = await this.getColumnData(this.getColumnName(86),this.optionList);
+    this.option = await this.getColumnData(this.getColumnName(86), this.optionList);
     let i = 0;
     this.option.column.forEach(item => {
       if (item.search) i++
@@ -168,7 +253,7 @@ export default {
       this.option.searchMenuPosition = "right";
     }
   },
-  methods:{
+  methods: {
     //自定义列保存
     async saveColumn() {
       /**
@@ -176,7 +261,7 @@ export default {
        * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
        * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
        */
-      const inSave = await this.saveColumnData(this.getColumnName(86),this.option);
+      const inSave = await this.saveColumnData(this.getColumnName(86), this.option);
       if (inSave) {
         this.$message.success("保存成功");
         //关闭窗口
@@ -186,7 +271,7 @@ export default {
     //自定义列重置
     async resetColumn() {
       this.option = this.optionList;
-      const inSave = await this.delColumnData(this.getColumnName(86),this.optionList);
+      const inSave = await this.delColumnData(this.getColumnName(86), this.optionList);
       if (inSave) {
         this.$message.success("重置成功");
         this.$refs.crud.$refs.dialogColumn.columnBox = false;
@@ -202,9 +287,13 @@ export default {
       this.$refs.crud.getTableHeight()
     },
     onLoad(page, params) {
+      totalList(2).then(res => {
+        this.totalData = res.data.data
+      })
       let queryParams = {
         size: page.pageSize,
         current: page.currentPage,
+        itemStatus: this.activeName,
         kind: '2',
         ...params
       }
@@ -212,7 +301,7 @@ export default {
       selectInvoiceList(queryParams).then(res => {
         this.dataList = res.data.data.records
         this.page.total = res.data.data.total
-        this.option.height = window.innerHeight - 240;
+        this.option.height = window.innerHeight - 420;
       }).finally(() => {
         this.loading = false;
       })
@@ -220,11 +309,11 @@ export default {
     //搜索
     searchChange(params, done) {
       let data = params
-      if (params.arrivalTime){
+      if (params.arrivalTime) {
         data.beginArrivalTime = params.arrivalTime[0]
         data.endArrivalTime = params.arrivalTime[1]
       }
-      if (params.createTime){
+      if (params.createTime) {
         data.beginCrateTime = params.createTime[0]
         data.endCrateTime = params.createTime[1]
       }
@@ -234,13 +323,13 @@ export default {
       done();
     },
     //列表删除
-    rowDel(row){
+    rowDel(row) {
       this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        removeDelegationList({ids:row.id}).then(res=>{
+        removeDelegationList({ids: row.id}).then(res => {
           this.$message.success('删除成功');
           this.onLoad(this.page)
         })
@@ -252,21 +341,303 @@ export default {
       });
     },
     //行编辑
-    rowCell(row,index){
+    rowCell(row, index) {
       console.log(row.id)
       this.id = row.id
       this.show = false
     },
-    rowSave(){
+    rowSave() {
       this.show = false
     },
-    backToList(){
+    backToList() {
       this.show = true
-    }
+    },
+    //切换订单状态
+    handleClick(tab) {
+      this.activeName = tab
+      this.onLoad(this.page)
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.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: 15vh;
+  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>
+<style lang="scss" scoped>
+.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: 15vh;
+  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>

src/views/landTransportation/driver/index.vue

@@ -1,6 +1,69 @@
 <template>
   <div>
     <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">{{ totalData.all }}</span>
+                  <span class="card-content-text">全部订单</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">{{ totalData.two }}</span>
+                  <span class="card-content-text">未受理</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">{{ totalData.three }}</span>
+                  <span class="card-content-text">未完工</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">{{ totalData.four }}</span>
+                  <span class="card-content-text">已完工</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </basic-container>
+    <basic-container>
       <avue-crud
           :data="goodsList"
           :option="goodsOptionCrud"
@@ -52,7 +115,7 @@ import {
   acceptanceCollection,
   acceptanceDispatchCollection,
   confirmCompletion,
-  fleetList
+  fleetList, motorcadeDriver
 } from "@/api/landTransportation";
 
 export default {
@@ -61,6 +124,7 @@ export default {
     return {
       form: {},
       loading: false,
+      activeName:'',
       page: {
         pageSize: 10,
         currentPage: 1,
@@ -70,6 +134,7 @@ export default {
       roleName: localStorage.getItem("roleName").split(',')[0],
       goodsList: [],
       goodsOptionCrud: {
+        stripe:true,
         index: true,
         addBtn: false,
         delBtn: false,
@@ -184,8 +249,9 @@ export default {
           cell: true,
           prop: 'driverRemarks'
         }
-        ]
+        ],
       },
+      totalData:{}
     }
   },
   methods: {
@@ -202,8 +268,16 @@ export default {
       this.onLoad(this.page, params)
       done();
     },
+    //切换订单状态
+    handleClick(tab) {
+      this.activeName = tab
+      this.onLoad(this.page)
+    },
     //查询
     onLoad(page, params) {
+      motorcadeDriver(4).then(res=>{
+        this.totalData = res.data.data
+      })
       let queryParams = {
         size: page.pageSize,
         current: page.currentPage,
@@ -224,7 +298,7 @@ export default {
     },
     //箱信息派车
     designate(row) {
-      if (row.fleetId) {
+      if (row.ctnNo) {
         this.$confirm('是否确定派车', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -241,7 +315,7 @@ export default {
           });
         });
       } else {
-        this.$message.warning('未选择车队，请选择');
+        this.$message.warning('未输入箱号，请输入');
       }
     },
     //取消派车
@@ -283,6 +357,143 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.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: 15vh;
+  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>

src/views/landTransportation/motorcadeDriver/index.vue

@@ -1,6 +1,83 @@
 <template>
   <div>
     <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">{{totalData.all}}</span>
+                  <span class="card-content-text">全部订单</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">{{ totalData.one }}</span>
+                  <span class="card-content-text">未派车</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">{{ totalData.two }}</span>
+                  <span class="card-content-text">未受理</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">{{ totalData.three }}</span>
+                  <span class="card-content-text">未完工</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">{{ totalData.four }}</span>
+                  <span class="card-content-text">已完工</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </basic-container>
+    <basic-container>
       <avue-crud
           :data="goodsList"
           :option="entrustOptionTwoT"
@@ -44,7 +121,8 @@ import {
   sendACarCollection,
   sendACarDispatchCollection,
   driverQueryCollection,
-  fleetList
+  fleetList,
+  motorcadeDriver
 } from "@/api/landTransportation";
 
 export default {
@@ -62,6 +140,7 @@ export default {
       roleName: localStorage.getItem("roleName").split(',')[0],
       goodsList: [],
       entrustOptionTwoT: {
+        stripe:true,
         align: 'center',
         menuAlign: 'center',
         index: true,
@@ -198,6 +277,8 @@ export default {
         }
         ]
       },
+      totalData:{},
+      activeName:''
     }
   },
   methods: {
@@ -216,9 +297,13 @@ export default {
     },
     //查询
     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
       }
@@ -234,6 +319,11 @@ export default {
     rowSaveT(row, index, done, loading) {
       this.$refs.crudContact.rowCell(row, index)
     },
+    //切换订单状态
+    handleClick(tab) {
+      this.activeName = tab
+      this.onLoad(this.page)
+    },
     //箱信息派车
     designate(row) {
       if (row.vehicleId) {
@@ -278,6 +368,143 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.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: 15vh;
+  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>

src/views/landTransportation/placeAnOrder/detailPage.vue

@@ -64,7 +64,7 @@
               <el-button type="success" size="mini" circle>止</el-button>
             </span>
             <span v-else>
-              <el-button v-if="goodsForm.status === 1" type="success" size="mini" circle>途</el-button>
+              <el-button v-if="goodsForm.status === 1" type="warning" size="mini" circle>途</el-button>
               <el-tooltip v-else class="item" effect="dark" content="删除" placement="right">
                   <el-button type="danger" icon="el-icon-delete" size="mini" circle
                              @click="deleteAddress(scope)"></el-button>
@@ -128,6 +128,7 @@
       <avue-crud
           :data="entrustList"
           :option="entrustOptionTwoT"
+          ref="entrustTwoT"
           @row-save="(row,done,loading)=>{rowSaveT(row,0,done,loading)}"
           @row-update="rowSaveT">
         <template slot="fleetId" slot-scope="{ row, index }">
@@ -143,7 +144,7 @@
     </basic-container>
     <containerTitle title="货物信息"></containerTitle>
     <basic-container>
-      <avue-form :option="goodsOptionForm" v-model="goodsForm">
+      <avue-form :option="goodsOptionForm" ref="goodsForm" v-model="goodsForm">
         <template slot-scope="scope" slot="corpId">
           <crop-select
               :disabled="goodsForm.status === 1"
@@ -280,7 +281,7 @@ export default {
     return {
       activeIndex: '1',
       goodsForm: {},
-      modelKey:1,
+      modelKey: 1,
       orderFilesList: [],
       roleName: localStorage.getItem("roleName").split(',')[0],
       breakConfiguration: {
@@ -373,36 +374,76 @@ export default {
         column: [{
           label: '客户名称',
           formslot: true,
-          prop: 'corpId'
+          prop: 'corpId',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '所属公司',
           formslot: true,
-          prop: 'belongCompany'
+          prop: 'belongCompany',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '订单号',
           prop: 'id',
           disabled: true
         }, {
           label: '提单号',
-          prop: 'billNo'
+          prop: 'billNo',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '场站',
-          prop: 'station'
+          prop: 'station',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '到厂时间',
           type: "datetime",
           format: 'yyyy-MM-dd HH:mm:ss',
           valueFormat: 'yyyy-MM-dd HH:mm:ss',
-          prop: 'arrivalTime'
+          prop: 'arrivalTime',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '船名航次',
-          prop: 'factory'
+          prop: 'factory',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '货物名称',
-          prop: 'goods'
+          prop: 'goods',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }, {
           label: '备注',
-          prop: 'remarks'
+          prop: 'remarks',
+          rules: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
         }
         ]
       },
@@ -469,8 +510,7 @@ export default {
           label: '备注',
           cell: true,
           prop: 'remarks'
-        }
-        ]
+        }]
       },
       collectionList: [],
       collectionOption: {
@@ -746,26 +786,44 @@ export default {
     },
     //保存
     editCustomer() {
-      let data = JSON.parse(JSON.stringify(this.tableData))
-      data.forEach((item,index) => {
-        item.sort = index+1
-        if (item.region.length !== 0) item.region = item.region.join(',')
-      })
-      saveSaveList({
-        ...this.goodsForm,
-        kind: '1',
-        orderAddressList: data,
-        orderItemList: this.entrustList,
-        orderFeeList: this.collectionList.concat(this.paymentList)
-      }).then(res => {
-        this.$message.success('保存成功');
-        if (!this.goodsForm.id){
-          this.goodsForm = {}
-          this.$emit('backToList')
-        }else {
-          this.refreshData()
+      for (let item in this.tableData){
+        if (!this.tableData[item].corpId) return this.$message.error('请选择第'+ Number(Number(item)+1) +'行发货工厂');
+        if (this.tableData[item].region.length === 0) return this.$message.error('请选择第'+ Number(Number(item)+1) +'行省市区');
+        if (!this.tableData[item].address) return this.$message.error('请输入第'+ Number(Number(item)+1) +'行详细地址');
+      }
+      for (let item in this.entrustList){
+        if (!this.tableData[item].ctnType) return this.$message.error('请选择第'+ Number(Number(item)+1) +'行尺寸箱型');
+        if (!this.tableData[item].ctnQuantity) return this.$message.error('请输入第'+ Number(Number(item)+1) +'行箱量');
+        if (!this.tableData[item].landWeight) return this.$message.error('请输入第'+ Number(Number(item)+1) +'行总重量');
+        if (!this.tableData[item].landAmountD) return this.$message.error('请输入第'+ Number(Number(item)+1) +'陆运费');
+      }
+      this.$refs['goodsForm'].validate((valid) => {
+        if (valid) {
+          let data = JSON.parse(JSON.stringify(this.tableData))
+          data.forEach((item, index) => {
+            item.sort = index + 1
+            if (item.region.length !== 0) item.region = item.region.join(',')
+          })
+          saveSaveList({
+            ...this.goodsForm,
+            kind: '1',
+            orderAddressList: data,
+            orderItemList: this.entrustList,
+            orderFeeList: this.collectionList.concat(this.paymentList)
+          }).then(res => {
+            this.$message.success('保存成功');
+            if (!this.goodsForm.id) {
+              this.goodsForm = {}
+              this.$emit('backToList')
+            } else {
+              this.refreshData()
+            }
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
         }
-      })
+      });
     },
     //收费新增
     addRowCollection() {
@@ -828,27 +886,27 @@ export default {
       this.goodsForm.belongCompany = row.belongCompany
     },
     //选择地址客户带出地址
-    withAddress(row,scope){
+    withAddress(row, scope) {
       if (!scope.row.key) scope.row.key = 0
       this.tableData[scope.$index].corpName = row.cname
       this.tableData[scope.$index].address = row.attn
       if (row.tel) {
-        if (!row.attn){
+        if (!row.attn) {
           this.tableData[scope.$index].address += row.tel
-        }else {
+        } else {
           this.tableData[scope.$index].address += '—' + row.tel
         }
       }
-      if (row.storageAddr){
-        if (!row.tel && !row.attn){
+      if (row.storageAddr) {
+        if (!row.tel && !row.attn) {
           this.tableData[scope.$index].address += row.storageAddr
-        }else {
+        } else {
           this.tableData[scope.$index].address += '—' + row.storageAddr
         }
       }
-      if (row.belongtoarea){
-        addressList(row.belongtoarea).then(res=>{
-          this.tableData[scope.$index].region = [res.data.data.provinceCode,res.data.data.parentId,res.data.data.districtCode]
+      if (row.belongtoarea) {
+        addressList(row.belongtoarea).then(res => {
+          this.tableData[scope.$index].region = [res.data.data.provinceCode, res.data.data.parentId, res.data.data.districtCode]
           scope.row.key++
         })
       }

src/views/landTransportation/placeAnOrder/index.vue

@@ -12,7 +12,7 @@
                 </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{totalData.all}}</span>
                   <span class="card-content-text">全部订单</span>
                 </div>
               </div>
@@ -26,7 +26,7 @@
                 </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{ totalData.zero }}</span>
                   <span class="card-content-text">未调度</span>
                 </div>
               </div>
@@ -40,7 +40,7 @@
                 </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{ totalData.one }}</span>
                   <span class="card-content-text">未派车</span>
                 </div>
               </div>
@@ -54,7 +54,7 @@
                 </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{ totalData.two }}</span>
                   <span class="card-content-text">未受理</span>
                 </div>
               </div>
@@ -68,7 +68,7 @@
                 </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{ totalData.three }}</span>
                   <span class="card-content-text">未完工</span>
                 </div>
               </div>
@@ -82,7 +82,7 @@
                     </span>
                 </div>
                 <div class="card-content">
-                  <span class="card-content-num">1</span>
+                  <span class="card-content-num">{{ totalData.four }}</span>
                   <span class="card-content-text">工单关闭</span>
                 </div>
               </div>
@@ -90,6 +90,8 @@
           </div>
         </div>
       </div>
+    </basic-container>
+    <basic-container v-if="show">
       <avue-crud
           :table-loading="loading"
           :page.sync="page"
@@ -113,11 +115,11 @@
           ></crop-select>
         </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-edit"-->
+<!--                     size="small"-->
+<!--                     @click.stop="rowCell(row,index)">编辑-->
+<!--          </el-button>-->
           <el-button type="text"
                      icon="el-icon-delete"
                      size="small"
@@ -125,6 +127,12 @@
                      @click.stop="$refs.crud.rowDel(row,index)">删除
           </el-button>
         </template>
+        <template slot="corpName" slot-scope="{row,index}">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="rowCell(row,index)">{{row.corpName}}</span>
+        </template>
+        <template slot="id" slot-scope="{row,index}">
+          <span style="color: #409EFF;cursor: pointer" @click.stop="rowCell(row,index)">{{row.id}}</span>
+        </template>
       </avue-crud>
     </basic-container>
     <detail-page v-else @backToList="backToList" :id="id"></detail-page>
@@ -133,7 +141,7 @@
 
 <script>
 import detailPage from './detailPage'
-import {removeDelegationList, selectInvoiceList} from "@/api/landTransportation";
+import {removeDelegationList, selectInvoiceList, totalList} from "@/api/landTransportation";
 import {getQueryString} from "@/util/util";
 
 export default {
@@ -154,10 +162,13 @@ export default {
         total: 0,
         pageSizes: [10, 50, 100, 200, 300]
       },
+      totalData:{},
       option: {},
       optionList: {
         align: 'center',
+        stripe:true,
         index: true,
+        menuWidth:100,
         addBtn: false,
         editBtn: false,
         delBtn: false,
@@ -165,79 +176,100 @@ export default {
         searchSpan: 8,
         searchIcon: true,
         searchIndex: 2,
-        column: [{
-          label: '状态',
-          prop: 'itemStatusDetail',
-          index: 1,
-          width: 140
-        }, {
-          label: '订单号',
-          prop: 'id',
-          index: 2,
-          overHidden: true,
-          width: 160,
-          search: true,
-        }, {
-          label: '客户名称',
-          prop: 'corpName',
-          overHidden: true,
-          index: 3,
-          width: 140,
-          search: true,
-        }, {
-          label: '所属公司',
-          prop: 'belongCompany',
-          overHidden: true,
-          index: 4,
-          width: 140,
-          search: true,
-        }, {
-          label: '提单号',
-          prop: 'billNo',
-          index: 5,
-          overHidden: true,
-          width: 140,
-          search: true,
-        }, {
-          label: '货物名称',
-          prop: 'goods',
-          overHidden: true,
-          index: 6,
-          width: 140,
-          search: true,
-        }, {
-          label: '路线',
-          prop: 'id',
-          overHidden: true,
-          index: 7,
-          width: 140,
-          search: true,
-        }, {
-          label: '场站',
-          prop: 'station',
-          overHidden: true,
-          index: 8,
-          width: 140,
-          search: true,
-        },
+        column:[
           {
+            label: '状态',
+            prop: 'itemStatusDetail',
+            index: 1,
+            overHidden: true,
+            width: 140
+          }, {
+            label: '订单号',
+            prop: 'id',
+            index: 2,
+            overHidden: true,
+            width: 160,
+            search: true,
+          }, {
+            label: '客户名称',
+            prop: 'corpName',
+            overHidden: true,
+            index: 3,
+            width: 140,
+            search: true,
+          }, {
+            label: '所属公司',
+            prop: 'belongCompany',
+            overHidden: true,
+            index: 4,
+            width: 140,
+            search: true,
+          }, {
+            label: '提单号',
+            prop: 'billNo',
+            index: 5,
+            overHidden: true,
+            width: 140,
+            search: true,
+          }, {
+            label: '货物名称',
+            prop: 'goods',
+            overHidden: true,
+            index: 6,
+            width: 140,
+            search: true,
+          }, {
+            label: '路线',
+            prop: 'addressDetail',
+            overHidden: true,
+            index: 7,
+            width: 140,
+            search: true,
+          },{
+            label: '计划箱量',
+            prop: 'ctnDetail',
+            overHidden: true,
+            index: 8,
+            width: 140,
+            search: true,
+          },{
+            label: '已派箱量',
+            prop: 'dispatchCtnDetail',
+            overHidden: true,
+            index: 9,
+            width: 140,
+            search: true,
+          },{
+            label: '车队受理箱量',
+            prop: 'sendCtnDetail',
+            overHidden: true,
+            index: 10,
+            width: 140,
+            search: true,
+          }, {
+            label: '场站',
+            prop: 'station',
+            overHidden: true,
+            index: 11,
+            width: 140,
+            search: true,
+          }, {
             label: '到厂时间',
             prop: 'arrivalTime',
             overHidden: true,
             type: "date",
             searchRange: true,
-            unlinkPanels: true,
-            defaultTime: ['00:00:00', '23:59:59'],
+            defaultTime:['00:00:00', '23:59:59'],
             format: "yyyy-MM-dd HH:mm:ss",
             valueFormat: "yyyy-MM-dd HH:mm:ss",
-            index: 9,
+            index: 12,
             width: 140,
             search: true,
           }, {
-            label: '工厂名称',
+            label: '船名航次',
             prop: 'factory',
             overHidden: true,
-            index: 10,
+            index: 13,
             width: 140,
             search: true,
           }, {
@@ -246,10 +278,10 @@ export default {
             prop: 'createTime',
             type: "date",
             searchRange: true,
-            defaultTime: ['00:00:00', '23:59:59'],
+            defaultTime:['00:00:00', '23:59:59'],
             format: "yyyy-MM-dd HH:mm:ss",
             valueFormat: "yyyy-MM-dd HH:mm:ss",
-            index: 11,
+            index: 14,
             width: 140,
             search: true,
           }]
@@ -307,6 +339,10 @@ export default {
       this.onLoad(this.page)
     },
     onLoad(page, params) {
+      totalList(1).then(res=>{
+        console.log(res)
+        this.totalData = res.data.data
+      })
       let queryParams = {
         size: page.pageSize,
         current: page.currentPage,
@@ -318,7 +354,7 @@ export default {
       selectInvoiceList(queryParams).then(res => {
         this.dataList = res.data.data.records
         this.page.total = res.data.data.total
-        this.option.height = window.innerHeight - 370;
+        this.option.height = window.innerHeight - 420;
       }).finally(() => {
         this.loading = false;
       })