园区上报

src/views/parkReportManagement/dailyReport.vue

@@ -1,158 +1,678 @@
+// 规定记录审核
 <template>
   <div class="center">
-    <div class="main_css">
-      <div class="formData">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="编写单位">
-            <el-input v-model="form.compilationUnit" clearable placeholder="请输入编写单位"></el-input>
-          </el-form-item>
-          <el-form-item label="编撰人员">
-            <el-input v-model="form.editor" clearable placeholder="请输入编撰人员"></el-input>
-          </el-form-item>
-          <el-form-item label="版本号">
-            <el-input v-model="form.versionNumber" clearable placeholder="请输入版本号"></el-input>
-          </el-form-item>
-          <el-form-item label="提交人">
-            <el-input v-model="form.submitter" clearable placeholder="自动获取,不可编辑" disabled></el-input>
-          </el-form-item>
-          <el-form-item label="版本说明">
-            <el-input v-model="form.versionDescription" clearable placeholder="请输入版本说明" maxlength="100">
-            </el-input>
-          </el-form-item>
-          <div>
-            <quill-editor v-model="form.content" res="myQuillEditor" :options="editorOption" id="editor">
-              <!-- @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" -->
-            </quill-editor>
-          </div>
-        </el-form>
-      </div>
-      <div class="btn">
-        <el-button @click="submit">提交</el-button>
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-col :span="14">
+            <el-button type="primary" @click="postponeSubmission" style="margin-right:10px">暂缓上报</el-button>
+            <el-button type="primary" @click="batchSubmission" style="margin-right:10px">批量上报</el-button>
+            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+            </el-date-picker>
+          </el-col>
+          <el-col :span="10">
+            <div class="screen">
+              <el-input class='find' v-model="searchkeyWord" placeholder="可按订单号、姓名、账号查找" @keyup.enter.native="find"
+                clearable @change="find" />
+              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+                  src="../../../public/img/sousuo.png"></el-button><span class="count_css">共{{ deptBudgetTotal
+                  }}条</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="search_btn">
+              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item search_block" @click="searchBtn(1)">
+                待上报
+              </div>
+              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
+                审核中
+              </div>
+              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
+                已通过
+              </div>
+              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
+                暂缓中
+              </div>
+              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item" @click="searchBtn('')">
+                全部
+              </div>
+            </div>
+          </el-col>
+        </el-row>
       </div>
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
+        highlight-current-row>
+        <el-table-column type="selection" width="55" :selectable="selectInit">
+        </el-table-column>
+        <el-table-column type="index" label="序号" width="50">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNo" label="订单编号" />
+        <el-table-column prop="compilationUnit" label="收款人" />
+        <el-table-column prop="editor" label="司机账号" />
+        <el-table-column prop="updateDate" label="流水号" />
+        <el-table-column prop="updateDate" label="金额(元)" />
+        <el-table-column prop="updateDate" label="类型" />
+        <!-- <el-table-column label="上传" prop="submitter" /> -->
+        <!-- <el-table-column prop="versionDescription" label="版本说明" /> -->
+        <el-table-column prop="status" label="状态" />
+        <el-table-column prop="updateDate" label="付款时间" />
+        <el-table-column label="操作" min-width="200">
+          <template slot-scope="scope">
+            <el-link target="_blank" @click="look(scope.row)" type="primary" :underline="false">查看</el-link>
+            <el-divider direction="vertical" />
+            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)" 
+            v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'" >上报</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      
+    <el-drawer title="运单信息" :visible.sync="rightSee" style="overflow-y: auto !important">
+      <div class="right_css">
+        <div class="right_item">订单编号：{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货时间</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货时间</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">托运方</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">托运方证件号或信用代码</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货方</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货方证件号或信用代码</div>
+        <div class="right_title">运费</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">车牌号</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">车牌颜色</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货地址</div>
+        <div class="right_item">
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+        </div>
+        <div class="right_title">收货地址</div>
+        <div class="right_item">
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+        </div>
+        <div class="right_title">司机姓名</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">司机身份证号</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">货物类别</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">货名</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">重量(kg)</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        
+        <!-- <div class="right_title">发货联系人</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货联系人电话</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div> -->
+        <!-- <div class="right_title">距离</div>
+        <div class="right_item">约{{ orderData.compilationUnit ? orderData.compilationUnit : 0 }}km</div> -->
+        <!-- <el-divider v-if="orderData.compilationUnit"></el-divider>
+        <div v-if="orderData.compilationUnit">
+          <div class="title_name">承运信息</div>
+          <div class="right_title">承运合同编号</div>
+          <div class="right_item">{{orderData.compilationUnit}}</div>
+          <div class="right_title">委托合同编号</div>
+          <div class="right_item">{{orderData.compilationUnit}}</div>
+          <div class="right_title">车牌号</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.carNo}}</div>
+          <div class="right_title">预计运费</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.estimatedFreight}}</div>
+          <div class="right_title">装车时间</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.loadingDate}}</div>
+          <div class="right_title">装车定位</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.loadingCity}}{{orderData.hyCarrierInfo.loadingArea}}</div>
+          <div class="right_title">装车照片</div>
+          <div style="display: flex;" v-if="orderData.hyCarrierInfo.loadingImg">
+            <div v-for="(item,index) in orderData.hyCarrierInfo.loadingImg.split(',')" :key="index">
+              <img :src="item" class="img_css" @click="enlarge(item)">
+            </div>
+          </div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.totalFreight">合计应付运费</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.totalFreight}}</div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.unloadingDate">卸车时间</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.unloadingDate}}</div>
+          <div class="right_title">卸车定位</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.unloadingCity}}{{orderData.hyCarrierInfo.unloadingArea}}</div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.unloadingImg">卸车照片</div>
+          <div style="display: flex;" v-if="orderData.hyCarrierInfo.unloadingImg">
+            <div v-for="(item,index) in orderData.hyCarrierInfo.unloadingImg.split(',')" :key="index">
+              <img :src="item" class="img_css" @click="enlarge(item)">
+            </div>
+          </div>
+        </div> -->
+        <!-- <el-divider v-if="orderData.freightInfo"></el-divider>
+        <div v-if="orderData.freightInfo">
+          <div class="title_name">运费信息（单位：元）</div>
+          <div class="right_title">预付运费</div>
+          <div class="right_item">{{orderData.freightInfo.prepaidFreight}} <span
+              style="margin-left: 100px;">{{orderData.freightInfo.prepaidFreightDate}}</span></div>
+          <div class="right_title">运费尾款</div>
+          <div class="right_item">{{orderData.freightInfo.freightBalance?orderData.freightInfo.freightBalance:'未支付'}}
+            <span style="margin-left: 100px;">{{orderData.freightInfo.freightBalanceDate}}</span></div>
+          <div class="right_title" v-if="orderData.freightInfo.freightBalance">明细</div>
+          <div class="right_item" v-if="orderData.freightInfo.freightBalance">
+            预付{{orderData.freightInfo.prepaidFreight ? orderData.freightInfo.prepaidFreight : 0}}元，服务费{{orderData.freightInfo.driverServiceCharge ? orderData.freightInfo.driverServiceCharge:0}}元，尾款{{orderData.freightInfo.freightBalance ? orderData.freightInfo.freightBalance:0}}元，合计收款{{orderData.freightInfo.totalCollection ? orderData.freightInfo.totalCollection:0}}元。
+          </div>
+        </div> -->
+        <!-- <el-divider v-if="orderData.repaymentInfo"></el-divider> -->
+        <!-- <div v-if="orderData.repaymentInfo">
+          <div class="title_name">还款信息</div>
+          <div class="right_title">运费</div>
+          <div class="right_item">{{orderData.freight}}</div>
+          <div class="right_title">超期费（每天3%）</div>
+          <div class="right_item">{{orderData.repaymentInfo.overdueFee}}</div>
+          <div class="right_title">合计应还</div>
+          <div class="right_item">{{orderData.repaymentInfo.totalRepayable}}</div>
+          <div class="right_title">还款（尾号6666）</div>
+          <div class="right_item">{{orderData.repaymentInfo.alreadyRepaid}}</div>
+        </div> -->
+        <div class="right_btn">
+          <el-button @click="rightSee = false">关闭</el-button>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
-
 <script>
-  import {
-    addFormData
-  } from '@/api/platformManagement'
-  import quillEditor from 'vue-quill-editor';
-  export default {
-    data() {
-      return {
-        editorOption: {
-          // modules: {
-          //   // toolbar: [
-          //   //   ['bold', 'italic', 'underline', 'strike', 'background', 'color', 'font', 'size'],
-          //   //   ['blockquote', 'code-block']
-          //   // ]
-          // }
-        },
-        form: {},
-        regulations: {},
-        version: [],
-        count: ""
+import {
+  getList,
+  seeData,
+  // toExamine,
+  // postNews,
+  // delFormData
+} from '@/api/platformManagement'
+export default {
+  data() {
+    return {
+      tableData: [],
+      // 分页
+      searchkeyWord: '',
+      currentPage: 1,
+      pageSize: 10,
+      deptBudgetTotal: 0,
+      deptCircularPage: {},
+      search: '',
+      orderData: {
+
+      },
+      value1: '',
+      status:'',
+      addressUrl: [],
+      disabled: false,
+      rejectInfo: false,
+      rightSee: false,
+      form: {
+        id: '',
+        checkList: [],
+        rejectReasonDescription: ''
       }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // AddRecord() {
+    //   this.$router.push({
+    //     path: 'specifiedRecordsAdd'
+    //   })
+    // },
+
+    dateChange(e) {
+      this.startDate = e[0]
+      this.endDate = e[1]
+      this.getList()
     },
-    created() {
-      this.form.submitter = JSON.parse(localStorage.getItem('UserInfo')).deptName
-      this.regulations = JSON.parse(localStorage.getItem("regulations"))
-      if (this.regulations) {
-        this.$set(this.form, "compilationUnit", this.regulations.compilationUnit)
-        this.$set(this.form, "editor", this.regulations.editor)
-        // 默认当前生效规定版本版本号尾号 + 1
-        this.version = this.regulations.versionNumber.split(".")
-        this.count = Number(this.version[this.version.length - 1]) + 1
-        this.$set(this.form, "versionNumber", this.regulations.versionNumber.substr(0, this.version.length + 1) + this
-          .count)
-      }
+    //暂缓上报
+    postponeSubmission() {
+
     },
-    methods: {
-      // Oneditorblur(e) {//失去焦点事件
-      //   console.log(e)
-      // },
-      // Oneditorfocus(e) {//获得焦点事件
-      //   console.log(e)
-      // },
-      // Oneditorchange(e) {//内容改变事件
-      //   console.log(this.content)
-      // },
-      // SaveHtml(event) {//富文本点击保存按钮
-      //   alert(this.content);
-      // },
-      submit() {
-        if (this.form.compilationUnit && (this.form.compilationUnit.length < 0 || this.form.compilationUnit.length >
-          25)) {
-          this.$message.error("编写单位字数应在 0 - 25 之间")
-          return
-        }
-        if (this.form.editor && (this.form.editor.length < 0 || this.form.editor.length > 10)) {
-          this.$message.error("编撰人员字数应在 0 - 10 之间")
-          return
-        }
-        if (!this.form.versionNumber) {
-          this.$message.error("请输入版本号")
-          return
-        }
-        if (this.form.versionNumber.indexOf(".") == -1) {
-          this.$message.error("版本号格式不正确，如 1.**")
-          return
-        }
-        if (this.form.versionDescription && (this.form.versionDescription.length < 0 || this.form.versionDescription
-            .length > 100)) {
-          this.$message.error("版本说明字数应在 0 - 100 之间")
-          return
-        }
-        this.listLoading = true
-        addFormData(this.form).then(response => {
-            this.$notify({
-              title: '成功',
-              message: '添加成功！',
-              type: 'success'
-            });
-            var _obj = {}
-            _obj.compilationUnit = this.form.compilationUnit
-            _obj.editor = this.form.editor
-            _obj.versionNumber = this.form.versionNumber
-            localStorage.setItem("regulations", JSON.stringify(_obj))
-            this.listLoading = false
-            this.$router.go(-1)
-          })
-          .catch(() => {
-            this.loading = false
-          })
-      }
+    //批量上报
+    batchSubmission() {
+
+    },
+    //上报
+    submission() {
+
+    },
+      selectInit() {
+        return true;
+      },
+    getList() {
+      this.loading = true
+      const _obj = {}
+      _obj.currentPage = this.currentPage
+      _obj.pageSize = this.pageSize
+      _obj.searchKeyWord = this.searchkeyWord
+      _obj.searchType = this.search
+      getList(_obj).then(response => {
+        this.tableData = response.data.records
+        this.deptBudgetTotal = response.data.total
+        // if (this.tableData[0].status == '待审核' || this.tableData[0].status == '已驳回') {
+        //   // 最上面一条处于待审核和已驳回时新增按钮置灰不可用
+        //   this.disabled = true
+        // }
+        this.listLoading = false
+      })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    searchBtn(num) {
+      this.search = num;
+      this.getList();
+    },
+    // del(row) {
+    //   this.$confirm('确定要删除该记录吗？', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   })
+    //     .then(() => {
+    //       this.listLoading = true
+    //       var _del = {}
+    //       _del.id = row.id
+    //       delFormData(_del).then(response => {
+    //         this.$notify({
+    //           title: '成功',
+    //           message: '删除成功！',
+    //           type: 'success'
+    //         })
+    //         this.getList()
+    //         this.listLoading = false
+    //       })
+    //         .catch(() => {
+    //           this.loading = false
+    //         })
+    //     })
+    // },
+    // submitInfo() {
+    //   this.listLoading = true
+    //   postNews(this.Info).then(response => {
+    //     this.$notify({
+    //       title: '成功',
+    //       message: '发送成功！',
+    //       type: 'success'
+    //     })
+    //     this.sendInfoClose()
+    //     this.listLoading = false
+    //   })
+    //     .catch(() => {
+    //       this.loading = false
+    //     })
+    // },
+    find() {
+      this.getList()
+    },
+    look(row) {
+      this.loading = true
+      seeData({
+        id: row.id
+      }).then(response => {
+        this.orderData = response.data
+        this.rightSee = true
+        this.listLoading = false
+      })
+        .catch(() => {
+          this.listLoading = false
+        })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      console.log(`当前页: ${val}`)
+      this.getList()
     }
   }
+}
 </script>
-
 <style lang="scss" scoped>
-  .center {
-    background: #F5F6F7;
-    height: calc(100vh - 4.5vh);
-    padding-top: 20px;
+.center {
+  padding: 10px 20px;
+  background: #f5f6f7;
+  height: calc(100vh - 5vh);
+
+  .top_css {
+    padding: 10px;
+
+    .search_btn {
+      height: 80px;
+      background: linear-gradient(#fafbfb, #ffffff);
+      display: flex;
+      margin-top: 20px;
+
+      .search_block {
+        margin-left: 20px;
+      }
+
+      .search_item {
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 40px;
+        width: 112px;
+        height: 40px;
+        background: #f7f8f9;
+        cursor: pointer;
+        margin-top: 30px;
+      }
+
+      .searchNo {
+        color: #323233;
+      }
+
+      .search {
+        color: #2f53eb;
+        background: #ffffff;
+      }
+    }
+  }
+
+  .ask_css {
+    position: absolute;
+    margin: 3px 0 0 10px;
+  }
+
+  .center_css {
+    background: #ffffff;
+    border-radius: 1px;
+    margin-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .screen {
+    display: flex;
+
+    .search {
+      width: 40px;
+      height: 40px;
+      background: #2f53eb;
+      border-radius: 0px 2px 2px 0px;
+      border: 1px solid #DCDFE6;
+      margin-left: -1px;
+    }
+
+    .count_css {
+      width: 80px;
+      text-align: center;
+      line-height: 40px;
+      color: #666666;
+    }
+  }
+
+  .el-button {
+    padding: 10px 20px !important;
+  }
+
+  .center_css {
+
+    ::v-deep .el-table th,
+    ::v-deep .el-table td {
+      text-align: center;
+    }
+
+    .fujian {
+      font-size: 24px;
+      color: #409eff;
+    }
+
+    .warning {
+      font-size: 14px;
+      color: #ed1d1d;
+    }
+  }
+}
+
+.el-button--primary {
+  color: #FFF;
+  background-color: #2f53eb;
+  border-color: #2f53eb;
+}
+
+.car_css {
+  width: 50%;
+  display: inline-block;
+  text-align: center;
+  margin-top: 30px;
+  position: relative;
+
+  .status_css {
+    background: #3AC602;
+    width: 50px;
+    height: 17px;
+    position: absolute;
+    top: 0px;
+    right: 15px;
+    border-radius: 3px;
+  }
+
+  .carno_css {
+    padding: 1px 5px;
+    background-color: #F5F6F7;
+    color: #666666;
+    border-radius: 12px;
+    text-align: center;
+    width: 100px;
+    margin: 10px auto 0;
+  }
+
+  .carborder_css {
+    border: 1px solid #F0F1F2;
+    margin: 15px auto 0;
+    width: 90%;
+  }
+}
+
+.tips {
+  color: #999999;
+  font-size: 14px;
+}
+
+.car_item {
+  width: 200px;
+  height: 160px;
+  border-radius: 5px;
+}
+
+.user {
+  margin-bottom: 20px;
+
+  .id_css {
+    font-size: 14px;
+  }
+
+  .id_css,
+  .name_css {
+    margin: 5px 0;
+    color: #0D0D0D;
+  }
+
+  .pay_name {
+    color: #9D9D9D;
+    font-size: 14px;
+  }
+
+  .name_css {
+    font-size: 16px;
+  }
+
+  .user_item {
+    margin: 25px 0;
+    width: 450px;
+    height: 300px;
+  }
+
+  .border_css {
+    width: 100%;
+    border: 1px solid #F0F1F2;
+  }
+}
+
+::v-deep .el-table--border .el-table__header th {
+  background: #f7f8f9;
+}
+
+.btn_css {
+  color: #409EFF;
+  cursor: pointer
+}
+
+.btn_css1 {
+  margin-left: -20px;
+}
+
+.sign {
+  font-size: 14px;
+  color: red;
+}
+
+.form_css {
+  width: 100%;
+  margin: 20px auto 20px;
+
+  ::v-deep .el-checkbox {
+    width: 40%;
+    height: 30px;
+  }
+
+  // ::v-deep .el-dialog__body{
+  // 	padding: 10px 20px;
+  // }
+  ::v-deep .el-dialog__title {
+    font-size: 16px;
+  }
+
+  ::v-deep .el-textarea__inner {
+    background: #F0F1F2;
+  }
+
+  .form_btn {
+    text-align: right;
+    margin-top: 10px;
+  }
+}
+
+//发送信息
+.Info_css {
+  .Info_title {
+    color: #323233;
+    font-size: 16px;
+  }
+
+  .Info_item {
+    margin: 20px 0;
+  }
 
+  .Info_btn {
+    text-align: right;
+    margin-top: 10px;
+  }
+}
+
+//附件
+.file {
+  .fujian_css {
+    width: 631px;
+    display: flex;
+    margin: 0 auto;
+    text-align: center;
+    line-height: 32px;
+    border: 1px solid #F0F1F2;
+    border-right: 0px;
+    border-radius: 2px 0px 0px 2px;
+
+    .fujian_item {
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      border-right: 1px solid #F0F1F2;
+    }
+
+    .file_btn {
+      color: #2F53EB;
+      background-color: #CFDBFE;
+    }
   }
 
-  .main_css {
-    width: 96%;
-    height: 90vh;
-    overflow-y: scroll;
-    background: #FFFFFF;
+  .file_img {
+    width: 525px;
+    height: 332px;
     margin: 20px auto;
-    padding-top: 20px;
   }
 
-  .formData {
-    width: 50%;
-    margin: 20px 0 0 140px;
+  .img_css {
+    width: 525px;
+    height: 332px;
   }
 
   .btn {
-    text-align: right;
-    position: absolute;
-    right: 200px;
-    bottom: 100px;
+    width: 400px;
+    margin: 0 auto;
+  }
+}
+  .right_css {
+    // overflow-y: auto !important;
+    min-height: 1266px;
+    padding: 0 20px;
+
+    .right_title {
+      color: #9D9D9D;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .title_name {
+      margin-bottom: 10px;
+    }
+
+    .right_item {
+      color: #0D0D0D;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+
+    .right_btn {
+      text-align: center;
+      margin: 10px 0;
+    }
+
+    .img_css {
+      width: 100px;
+      height: 80px;
+      margin-right: 5px;
+    }
+
+    .right_img {
+      width: 200px;
+      height: 120px;
+      margin-top: 10px;
+    }
   }
+.find::v-deep input.el-input__inner {
+  border-radius: 0;
+}
+::v-deep .el-drawer.rtl{
+  overflow: auto;
+}
 </style>

src/views/parkReportManagement/waybillReporting.vue

@@ -5,91 +5,197 @@
       <div class="top_css">
         <el-row>
           <el-col :span="14">
-            <el-button type="primary" :disabled="disabled" @click="AddRecord">新增</el-button>
+            <el-button type="primary" @click="postponeSubmission" style="margin-right:10px">暂缓上报</el-button>
+            <el-button type="primary" @click="batchSubmission" style="margin-right:10px">批量上报</el-button>
+            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+            </el-date-picker>
           </el-col>
           <el-col :span="10">
             <div class="screen">
-              <el-input class='find' v-model="searchkeyWord" placeholder="可按版本号、编写单位、编撰人员查找" @keyup.enter.native="find" clearable @change="find" />
-              <el-button class="search" @click="find"><img
-                width="16"
-                height="16"
-                style="margin-left: -8px"
-                src="../../../public/img/sousuo.png"
-              ></el-button><span
-                class="count_css"
-              >共{{ deptBudgetTotal }}条</span>
+              <el-input class='find' v-model="searchkeyWord" placeholder="可按订单号、姓名、账号查找" @keyup.enter.native="find"
+                clearable @change="find" />
+              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+                  src="../../../public/img/sousuo.png"></el-button><span class="count_css">共{{ deptBudgetTotal
+                  }}条</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="search_btn">
+              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item search_block" @click="searchBtn(1)">
+                待上报
+              </div>
+              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
+                审核中
+              </div>
+              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
+                已通过
+              </div>
+              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
+                暂缓中
+              </div>
+              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item" @click="searchBtn('')">
+                全部
+              </div>
             </div>
           </el-col>
         </el-row>
       </div>
-      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
-        <el-table-column prop="versionNumber" label="版本号" />
-        <el-table-column prop="compilationUnit" label="编写单位" />
-        <el-table-column prop="editor" label="编撰人员" />
-        <el-table-column prop="updateDate" label="更新日期" />
-        <el-table-column label="上传" prop="submitter" />
-        <el-table-column prop="versionDescription" label="版本说明" />
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
+        highlight-current-row>
+        <el-table-column type="selection" width="55" :selectable="selectInit">
+        </el-table-column>
+        <el-table-column type="index" label="序号" width="50">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNo" label="订单编号" />
+        <el-table-column prop="compilationUnit" label="发运人" />
+        <el-table-column prop="editor" label="发运人账号" />
+        <el-table-column prop="updateDate" label="承运人" />
+        <el-table-column prop="updateDate" label="承运人账号" />
+        <el-table-column prop="updateDate" label="订单完结时间" />
+        <!-- <el-table-column label="上传" prop="submitter" /> -->
+        <!-- <el-table-column prop="versionDescription" label="版本说明" /> -->
         <el-table-column prop="status" label="状态" />
-        <el-table-column label="操作" min-width="300">
+        <el-table-column label="操作" min-width="200">
           <template slot-scope="scope">
-            <el-link target="_blank" type="primary" :underline="false" @click="look(scope.row)">查看</el-link>
-            <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" :disabled="scope.row.status != '待审核'" @click="audit(scope.row)">审核
-            </el-link>
+            <el-link target="_blank" @click="look(scope.row)" type="primary" :underline="false">查看</el-link>
             <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" :disabled="scope.row.status != '待审核' && scope.row.status != '已驳回' " @click="del(scope.row)">删除</el-link>
-            <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" @click="edit(scope.row)">编辑</el-link>
+            <el-link target="_blank" type="primary" :underline="false" @click="submission(scope.row)" 
+            v-if="scope.row.search == 1 || scope.row.search == 4 || scope.row.status == '暂缓中'" >上报</el-link>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination
-      :current-page="currentPage"
-      style="text-align: center; margin-top: 10px"
-      :page-size="deptCircularPage.pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="deptBudgetTotal"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-    <el-dialog :close-on-click-modal='false' title="驳回认证" :visible.sync="rejectInfo" width="400px" :before-close="rejectClose">
-      <div>
-        <div><span class="sign">*</span>选择驳回原因</div>
-        <div class="form_css">
-          <el-form ref="form" :model="form" label-width="80px">
-            <el-checkbox-group v-model="form.checkList">
-              <el-checkbox label="证件照片不清晰" value="1" />
-              <el-checkbox label="证件照片上传错误" value="2" />
-              <el-checkbox label="身份信息填写错误" value="3" />
-              <el-checkbox label="证件信息填写错误" value="4" />
-              <el-checkbox label="其他" value="5" />
-            </el-checkbox-group>
-            <div style="margin: 20px 0;">驳回原因描述（选填）</div>
-            <el-input
-              v-model="form.rejectReasonDescription"
-              type="textarea"
-              :rows="3"
-              resize="none"
-              placeholder="输入驳回原因，1-100个字"
-              minlength="100"
-            />
-            <div class="form_btn">
-              <el-button @click="rejectClose">取消</el-button>
-              <el-button type="primary" @click="submit">确定</el-button>
+    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      
+    <el-drawer title="运单信息" :visible.sync="rightSee" style="overflow-y: auto !important">
+      <div class="right_css">
+        <div class="right_item">订单编号：{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货时间</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货时间</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">托运方</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">托运方证件号或信用代码</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货方</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">收货方证件号或信用代码</div>
+        <div class="right_title">运费</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">车牌号</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">车牌颜色</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货地址</div>
+        <div class="right_item">
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+        </div>
+        <div class="right_title">收货地址</div>
+        <div class="right_item">
+          {{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}{{ orderData.compilationUnit }}
+        </div>
+        <div class="right_title">司机姓名</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">司机身份证号</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">货物类别</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">货名</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">重量(kg)</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        
+        <!-- <div class="right_title">发货联系人</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div>
+        <div class="right_title">发货联系人电话</div>
+        <div class="right_item">{{ orderData.compilationUnit }}</div> -->
+        <!-- <div class="right_title">距离</div>
+        <div class="right_item">约{{ orderData.compilationUnit ? orderData.compilationUnit : 0 }}km</div> -->
+        <!-- <el-divider v-if="orderData.compilationUnit"></el-divider>
+        <div v-if="orderData.compilationUnit">
+          <div class="title_name">承运信息</div>
+          <div class="right_title">承运合同编号</div>
+          <div class="right_item">{{orderData.compilationUnit}}</div>
+          <div class="right_title">委托合同编号</div>
+          <div class="right_item">{{orderData.compilationUnit}}</div>
+          <div class="right_title">车牌号</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.carNo}}</div>
+          <div class="right_title">预计运费</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.estimatedFreight}}</div>
+          <div class="right_title">装车时间</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.loadingDate}}</div>
+          <div class="right_title">装车定位</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.loadingCity}}{{orderData.hyCarrierInfo.loadingArea}}</div>
+          <div class="right_title">装车照片</div>
+          <div style="display: flex;" v-if="orderData.hyCarrierInfo.loadingImg">
+            <div v-for="(item,index) in orderData.hyCarrierInfo.loadingImg.split(',')" :key="index">
+              <img :src="item" class="img_css" @click="enlarge(item)">
+            </div>
+          </div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.totalFreight">合计应付运费</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.totalFreight}}</div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.unloadingDate">卸车时间</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.unloadingDate}}</div>
+          <div class="right_title">卸车定位</div>
+          <div class="right_item">{{orderData.hyCarrierInfo.unloadingCity}}{{orderData.hyCarrierInfo.unloadingArea}}</div>
+          <div class="right_title" v-if="orderData.hyCarrierInfo.unloadingImg">卸车照片</div>
+          <div style="display: flex;" v-if="orderData.hyCarrierInfo.unloadingImg">
+            <div v-for="(item,index) in orderData.hyCarrierInfo.unloadingImg.split(',')" :key="index">
+              <img :src="item" class="img_css" @click="enlarge(item)">
             </div>
-          </el-form>
+          </div>
+        </div> -->
+        <!-- <el-divider v-if="orderData.freightInfo"></el-divider>
+        <div v-if="orderData.freightInfo">
+          <div class="title_name">运费信息（单位：元）</div>
+          <div class="right_title">预付运费</div>
+          <div class="right_item">{{orderData.freightInfo.prepaidFreight}} <span
+              style="margin-left: 100px;">{{orderData.freightInfo.prepaidFreightDate}}</span></div>
+          <div class="right_title">运费尾款</div>
+          <div class="right_item">{{orderData.freightInfo.freightBalance?orderData.freightInfo.freightBalance:'未支付'}}
+            <span style="margin-left: 100px;">{{orderData.freightInfo.freightBalanceDate}}</span></div>
+          <div class="right_title" v-if="orderData.freightInfo.freightBalance">明细</div>
+          <div class="right_item" v-if="orderData.freightInfo.freightBalance">
+            预付{{orderData.freightInfo.prepaidFreight ? orderData.freightInfo.prepaidFreight : 0}}元，服务费{{orderData.freightInfo.driverServiceCharge ? orderData.freightInfo.driverServiceCharge:0}}元，尾款{{orderData.freightInfo.freightBalance ? orderData.freightInfo.freightBalance:0}}元，合计收款{{orderData.freightInfo.totalCollection ? orderData.freightInfo.totalCollection:0}}元。
+          </div>
+        </div> -->
+        <!-- <el-divider v-if="orderData.repaymentInfo"></el-divider> -->
+        <!-- <div v-if="orderData.repaymentInfo">
+          <div class="title_name">还款信息</div>
+          <div class="right_title">运费</div>
+          <div class="right_item">{{orderData.freight}}</div>
+          <div class="right_title">超期费（每天3%）</div>
+          <div class="right_item">{{orderData.repaymentInfo.overdueFee}}</div>
+          <div class="right_title">合计应还</div>
+          <div class="right_item">{{orderData.repaymentInfo.totalRepayable}}</div>
+          <div class="right_title">还款（尾号6666）</div>
+          <div class="right_item">{{orderData.repaymentInfo.alreadyRepaid}}</div>
+        </div> -->
+        <div class="right_btn">
+          <el-button @click="rightSee = false">关闭</el-button>
         </div>
       </div>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 <script>
 import {
   getList,
-  toExamine,
-  postNews,
-  delFormData
+  seeData,
+  // toExamine,
+  // postNews,
+  // delFormData
 } from '@/api/platformManagement'
 export default {
   data() {
@@ -102,9 +208,15 @@ export default {
       deptBudgetTotal: 0,
       deptCircularPage: {},
       search: '',
+      orderData: {
+
+      },
+      value1: '',
+      status:'',
       addressUrl: [],
       disabled: false,
       rejectInfo: false,
+      rightSee: false,
       form: {
         id: '',
         checkList: [],
@@ -116,11 +228,32 @@ export default {
     this.getList()
   },
   methods: {
-    AddRecord() {
-      this.$router.push({
-        path: 'specifiedRecordsAdd'
-      })
+    // AddRecord() {
+    //   this.$router.push({
+    //     path: 'specifiedRecordsAdd'
+    //   })
+    // },
+
+    dateChange(e) {
+      this.startDate = e[0]
+      this.endDate = e[1]
+      this.getList()
+    },
+    //暂缓上报
+    postponeSubmission() {
+
+    },
+    //批量上报
+    batchSubmission() {
+
     },
+    //上报
+    submission() {
+
+    },
+      selectInit() {
+        return true;
+      },
     getList() {
       this.loading = true
       const _obj = {}
@@ -131,158 +264,75 @@ export default {
       getList(_obj).then(response => {
         this.tableData = response.data.records
         this.deptBudgetTotal = response.data.total
-        if (this.tableData[0].status == '待审核' || this.tableData[0].status == '已驳回') {
-          // 最上面一条处于待审核和已驳回时新增按钮置灰不可用
-          this.disabled = true
-        }
+        // if (this.tableData[0].status == '待审核' || this.tableData[0].status == '已驳回') {
+        //   // 最上面一条处于待审核和已驳回时新增按钮置灰不可用
+        //   this.disabled = true
+        // }
         this.listLoading = false
       })
         .catch(() => {
           this.loading = false
         })
     },
-    del(row) {
-      this.$confirm('确定要删除该记录吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          this.listLoading = true
-          var _del = {}
-          _del.id = row.id
-          delFormData(_del).then(response => {
-            this.$notify({
-              title: '成功',
-              message: '删除成功！',
-              type: 'success'
-            })
-            this.getList()
-            this.listLoading = false
-          })
-            .catch(() => {
-              this.loading = false
-            })
-        })
-    },
-    sendInfoClose() {
-      this.Info = {}
-      this.sendInfo = false
-    },
-    submitInfo() {
-      this.listLoading = true
-      postNews(this.Info).then(response => {
-        this.$notify({
-          title: '成功',
-          message: '发送成功！',
-          type: 'success'
-        })
-        this.sendInfoClose()
-        this.listLoading = false
-      })
-        .catch(() => {
-          this.loading = false
-        })
-    },
-    switchChange(row, num) {
-      var _examine = {}
-      _examine.id = row.id
-      let title
-      if (num == 1) {
-        _examine.flag = 3
-        title = '禁用后客户将无法使用所有功能，是否确定禁用？'
-      } else if (num == 2) {
-        title = '确定重新启用该用户？'
-        _examine.flag = 4
-      }
-      this.$confirm(title, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          this.listLoading = true
-          toExamine(_examine).then(response => {
-            if (num == 1) {
-              this.$notify({
-                title: '成功',
-                message: '禁用成功！',
-                type: 'success'
-              })
-            } else if (num == 2) {
-              this.$notify({
-                title: '成功',
-                message: '启用成功！',
-                type: 'success'
-              })
-            }
-            this.getList()
-            this.listLoading = false
-          })
-            .catch(() => {
-              this.loading = false
-            })
-        })
+    searchBtn(num) {
+      this.search = num;
+      this.getList();
     },
+    // del(row) {
+    //   this.$confirm('确定要删除该记录吗？', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   })
+    //     .then(() => {
+    //       this.listLoading = true
+    //       var _del = {}
+    //       _del.id = row.id
+    //       delFormData(_del).then(response => {
+    //         this.$notify({
+    //           title: '成功',
+    //           message: '删除成功！',
+    //           type: 'success'
+    //         })
+    //         this.getList()
+    //         this.listLoading = false
+    //       })
+    //         .catch(() => {
+    //           this.loading = false
+    //         })
+    //     })
+    // },
+    // submitInfo() {
+    //   this.listLoading = true
+    //   postNews(this.Info).then(response => {
+    //     this.$notify({
+    //       title: '成功',
+    //       message: '发送成功！',
+    //       type: 'success'
+    //     })
+    //     this.sendInfoClose()
+    //     this.listLoading = false
+    //   })
+    //     .catch(() => {
+    //       this.loading = false
+    //     })
+    // },
     find() {
       this.getList()
     },
     look(row) {
-      this.$router.push({
-        path: 'specifiedRecordsLook',
-        query: {
-          id: row.id,
-          type: '1'
-        }
-      })
-    },
-    edit(row) {
-      this.$router.push({
-        path: 'specifiedRecordsLook',
-        query: {
-          id: row.id,
-          type: '2'
-        }
-      })
-    },
-    submit() {
-      if (this.form.checkList.length == 0) {
-        this.$message.error('请选择驳回原因')
-        return
-      }
-      this.listLoading = true
-      this.form.rejectReason = this.form.checkList.toString()
-      delete this.form.checkList
-      toExamine(this.form).then(response => {
-        this.$notify({
-          title: '成功',
-          message: '驳回成功！',
-          type: 'success'
-        })
-        this.form.checkList = []
-        this.form.rejectReasonDescription = ''
-        this.rejectInfo = false
-        this.getList()
+      this.loading = true
+      seeData({
+        id: row.id
+      }).then(response => {
+        this.orderData = response.data
+        this.rightSee = true
         this.listLoading = false
       })
         .catch(() => {
-          this.loading = false
+          this.listLoading = false
         })
     },
-    audit(row) {
-      this.$router.push({
-        path: 'specifiedRecordsLook',
-        query: {
-          id: row.id,
-          type: '3'
-        }
-      })
-    },
-    rejectClose() {
-      this.form.checkList = []
-      this.form.rejectReasonDescription = ''
-      this.rejectInfo = false
-    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`)
       this.pageSize = val
@@ -297,281 +347,331 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-	.center {
-		padding: 10px 20px;
-		background: #f5f6f7;
-		height: calc(100vh - 5vh);
-
-		.top_css {
-			padding: 10px;
-
-			.search_btn {
-				display: flex;
-				margin-top: 20px;
-
-				.search_item {
-					text-align: center;
-					font-size: 14px;
-					font-weight: 600;
-					line-height: 40px;
-					width: 112px;
-					height: 40px;
-					background: #f7f8f9;
-					cursor: pointer
-				}
-
-				.searchNo {
-					color: #323233;
-				}
-
-				.search {
-					color: #2f53eb;
-					background: #ffffff;
-				}
-			}
-		}
-
-		.ask_css {
-			position: absolute;
-			margin: 3px 0 0 10px;
-		}
-
-		.center_css {
-			background: #ffffff;
-			border-radius: 1px;
-			margin-top: 10px;
-			padding-bottom: 10px;
-		}
-
-		.screen {
-			display: flex;
-
-			.search {
-				width: 40px;
-				height: 40px;
-				background: #2f53eb;
-				border-radius: 0px 2px 2px 0px;
-				border: 1px solid #DCDFE6;
-        margin-left:-1px;
-			}
-
-			.count_css {
-				width: 80px;
-				text-align: center;
-				line-height: 40px;
-				color: #666666;
-			}
-		}
-
-		.el-button {
-			padding: 10px 20px !important;
-		}
-
-		.center_css {
-
-			::v-deep .el-table th,
-			::v-deep .el-table td {
-				text-align: center;
-			}
-
-			.fujian {
-				font-size: 24px;
-				color: #409eff;
-			}
-
-			.warning {
-				font-size: 14px;
-				color: #ed1d1d;
-			}
-		}
-	}
+.center {
+  padding: 10px 20px;
+  background: #f5f6f7;
+  height: calc(100vh - 5vh);
+
+  .top_css {
+    padding: 10px;
+
+    .search_btn {
+      height: 80px;
+      background: linear-gradient(#fafbfb, #ffffff);
+      display: flex;
+      margin-top: 20px;
+
+      .search_block {
+        margin-left: 20px;
+      }
+
+      .search_item {
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 40px;
+        width: 112px;
+        height: 40px;
+        background: #f7f8f9;
+        cursor: pointer;
+        margin-top: 30px;
+      }
+
+      .searchNo {
+        color: #323233;
+      }
+
+      .search {
+        color: #2f53eb;
+        background: #ffffff;
+      }
+    }
+  }
+
+  .ask_css {
+    position: absolute;
+    margin: 3px 0 0 10px;
+  }
+
+  .center_css {
+    background: #ffffff;
+    border-radius: 1px;
+    margin-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .screen {
+    display: flex;
+
+    .search {
+      width: 40px;
+      height: 40px;
+      background: #2f53eb;
+      border-radius: 0px 2px 2px 0px;
+      border: 1px solid #DCDFE6;
+      margin-left: -1px;
+    }
+
+    .count_css {
+      width: 80px;
+      text-align: center;
+      line-height: 40px;
+      color: #666666;
+    }
+  }
+
+  .el-button {
+    padding: 10px 20px !important;
+  }
+
+  .center_css {
+
+    ::v-deep .el-table th,
+    ::v-deep .el-table td {
+      text-align: center;
+    }
+
+    .fujian {
+      font-size: 24px;
+      color: #409eff;
+    }
+
+    .warning {
+      font-size: 14px;
+      color: #ed1d1d;
+    }
+  }
+}
+
 .el-button--primary {
-    color: #FFF;
-    background-color: #2f53eb;
-    border-color: #2f53eb;
+  color: #FFF;
+  background-color: #2f53eb;
+  border-color: #2f53eb;
+}
+
+.car_css {
+  width: 50%;
+  display: inline-block;
+  text-align: center;
+  margin-top: 30px;
+  position: relative;
+
+  .status_css {
+    background: #3AC602;
+    width: 50px;
+    height: 17px;
+    position: absolute;
+    top: 0px;
+    right: 15px;
+    border-radius: 3px;
+  }
+
+  .carno_css {
+    padding: 1px 5px;
+    background-color: #F5F6F7;
+    color: #666666;
+    border-radius: 12px;
+    text-align: center;
+    width: 100px;
+    margin: 10px auto 0;
+  }
+
+  .carborder_css {
+    border: 1px solid #F0F1F2;
+    margin: 15px auto 0;
+    width: 90%;
+  }
+}
+
+.tips {
+  color: #999999;
+  font-size: 14px;
+}
+
+.car_item {
+  width: 200px;
+  height: 160px;
+  border-radius: 5px;
+}
+
+.user {
+  margin-bottom: 20px;
+
+  .id_css {
+    font-size: 14px;
+  }
+
+  .id_css,
+  .name_css {
+    margin: 5px 0;
+    color: #0D0D0D;
+  }
+
+  .pay_name {
+    color: #9D9D9D;
+    font-size: 14px;
+  }
+
+  .name_css {
+    font-size: 16px;
+  }
+
+  .user_item {
+    margin: 25px 0;
+    width: 450px;
+    height: 300px;
+  }
+
+  .border_css {
+    width: 100%;
+    border: 1px solid #F0F1F2;
+  }
+}
+
+::v-deep .el-table--border .el-table__header th {
+  background: #f7f8f9;
+}
+
+.btn_css {
+  color: #409EFF;
+  cursor: pointer
+}
+
+.btn_css1 {
+  margin-left: -20px;
+}
+
+.sign {
+  font-size: 14px;
+  color: red;
+}
+
+.form_css {
+  width: 100%;
+  margin: 20px auto 20px;
+
+  ::v-deep .el-checkbox {
+    width: 40%;
+    height: 30px;
+  }
+
+  // ::v-deep .el-dialog__body{
+  // 	padding: 10px 20px;
+  // }
+  ::v-deep .el-dialog__title {
+    font-size: 16px;
+  }
+
+  ::v-deep .el-textarea__inner {
+    background: #F0F1F2;
+  }
+
+  .form_btn {
+    text-align: right;
+    margin-top: 10px;
+  }
+}
+
+//发送信息
+.Info_css {
+  .Info_title {
+    color: #323233;
+    font-size: 16px;
+  }
+
+  .Info_item {
+    margin: 20px 0;
+  }
+
+  .Info_btn {
+    text-align: right;
+    margin-top: 10px;
+  }
+}
+
+//附件
+.file {
+  .fujian_css {
+    width: 631px;
+    display: flex;
+    margin: 0 auto;
+    text-align: center;
+    line-height: 32px;
+    border: 1px solid #F0F1F2;
+    border-right: 0px;
+    border-radius: 2px 0px 0px 2px;
+
+    .fujian_item {
+      cursor: pointer;
+      width: 90px;
+      height: 32px;
+      border-right: 1px solid #F0F1F2;
+    }
+
+    .file_btn {
+      color: #2F53EB;
+      background-color: #CFDBFE;
+    }
+  }
+
+  .file_img {
+    width: 525px;
+    height: 332px;
+    margin: 20px auto;
+  }
+
+  .img_css {
+    width: 525px;
+    height: 332px;
+  }
+
+  .btn {
+    width: 400px;
+    margin: 0 auto;
+  }
 }
-	.car_css {
-		width: 50%;
-		display: inline-block;
-		text-align: center;
-		margin-top: 30px;
-		position: relative;
-
-		.status_css {
-			background: #3AC602;
-			width: 50px;
-			height: 17px;
-			position: absolute;
-			top: 0px;
-			right: 15px;
-			border-radius: 3px;
-		}
-
-		.carno_css {
-			padding: 1px 5px;
-			background-color: #F5F6F7;
-			color: #666666;
-			border-radius: 12px;
-			text-align: center;
-			width: 100px;
-			margin: 10px auto 0;
-		}
-
-		.carborder_css {
-			border: 1px solid #F0F1F2;
-			margin: 15px auto 0;
-			width: 90%;
-		}
-	}
-
-	.tips {
-		color: #999999;
-		font-size: 14px;
-	}
-
-	.car_item {
-		width: 200px;
-		height: 160px;
-		border-radius: 5px;
-	}
-
-	.user {
-		margin-bottom: 20px;
-
-		.id_css {
-			font-size: 14px;
-		}
-
-		.id_css,
-		.name_css {
-			margin: 5px 0;
-			color: #0D0D0D;
-		}
-
-		.pay_name {
-			color: #9D9D9D;
-			font-size: 14px;
-		}
-
-		.name_css {
-			font-size: 16px;
-		}
-
-		.user_item {
-			margin: 25px 0;
-			width: 450px;
-			height: 300px;
-		}
-
-		.border_css {
-			width: 100%;
-			border: 1px solid #F0F1F2;
-		}
-	}
-
-	::v-deep .el-table--border .el-table__header th {
-		background: #f7f8f9;
-	}
-
-	.btn_css {
-		color: #409EFF;
-		cursor: pointer
-	}
-
-	.btn_css1 {
-		margin-left: -20px;
-	}
-
-	.sign {
-		font-size: 14px;
-		color: red;
-	}
-
-	.form_css {
-		width: 100%;
-		margin: 20px auto 20px;
-
-		::v-deep .el-checkbox {
-			width: 40%;
-			height: 30px;
-		}
-
-		// ::v-deep .el-dialog__body{
-		// 	padding: 10px 20px;
-		// }
-		::v-deep .el-dialog__title {
-			font-size: 16px;
-		}
-
-		::v-deep .el-textarea__inner {
-			background: #F0F1F2;
-		}
-
-		.form_btn {
-			text-align: right;
-			margin-top: 10px;
-		}
-	}
-
-	//发送信息
-	.Info_css {
-		.Info_title {
-			color: #323233;
-			font-size: 16px;
-		}
-
-		.Info_item {
-			margin: 20px 0;
-		}
-
-		.Info_btn {
-			text-align: right;
-			margin-top: 10px;
-		}
-	}
-
-	//附件
-	.file {
-		.fujian_css {
-			width: 631px;
-			display: flex;
-			margin: 0 auto;
-			text-align: center;
-			line-height: 32px;
-			border: 1px solid #F0F1F2;
-			border-right: 0px;
-			border-radius: 2px 0px 0px 2px;
-
-			.fujian_item {
-				cursor: pointer;
-				width: 90px;
-				height: 32px;
-				border-right: 1px solid #F0F1F2;
-			}
-
-			.file_btn {
-				color: #2F53EB;
-				background-color: #CFDBFE;
-			}
-		}
-
-		.file_img {
-			width: 525px;
-			height: 332px;
-			margin: 20px auto;
-		}
-
-		.img_css {
-			width: 525px;
-			height: 332px;
-		}
-
-		.btn {
-			width: 400px;
-			margin: 0 auto;
-		}
-	}
-  .find::v-deep input.el-input__inner{
-    border-radius:0;
+  .right_css {
+    // overflow-y: auto !important;
+    min-height: 1266px;
+    padding: 0 20px;
+
+    .right_title {
+      color: #9D9D9D;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .title_name {
+      margin-bottom: 10px;
+    }
+
+    .right_item {
+      color: #0D0D0D;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+
+    .right_btn {
+      text-align: center;
+      margin: 10px 0;
+    }
+
+    .img_css {
+      width: 100px;
+      height: 80px;
+      margin-right: 5px;
+    }
+
+    .right_img {
+      width: 200px;
+      height: 120px;
+      margin-top: 10px;
+    }
   }
+.find::v-deep input.el-input__inner {
+  border-radius: 0;
+}
+::v-deep .el-drawer.rtl{
+  overflow: auto;
+}
 </style>