Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-ve...

董国庆

2025-03-05 1ad0b7bbb05871ce5c8e55bac3b248c3f6ccf326

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision

 src/App.vue

@@ -1,6 +1,6 @@
<template>

  <div id="app">

      <router-view/>

    <router-view />

  </div>

</template>



@@ -17,11 +17,11 @@
  },

  data() {

    return {

     


    };

  },

  created() {

 


  },

  mounted() {

    autofit.init({

@@ -32,14 +32,18 @@
    }, true);

  },

  methods: {

  


  },

};

</script>



<style lang='less'>

::-webkit-scrollbar {

  // display: none;

body {

  padding-right: 0 !important;

}



.el-dialog {

  border-radius: 12px;

}



.v-modal {

@@ -50,205 +54,27 @@
  z-index: 1000 !important;

}



.el-message {

  z-index: 9999 !important;

}



#app {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  width: 100%;

  height: 100%;

}



.color1 {

  color: rgba(0, 0, 0, .73);

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none !important;

}



.three_app {

  width: 100%;

  height: 100%;

  background-size: 100% 100%;



  .three_header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 30px;

    margin-bottom: 11px;



    div:nth-child(1) {

      display: flex;

      align-items: center;



      img {

        cursor: pointer;

        width: 24px;

        height: 24px;

        margin-right: 15px;

      }



      div {

        cursor: pointer;

        font-weight: 500;

        font-size: 12px;

        color: #FFFFFF;

      }

    }



    div:nth-child(2) {

      display: flex;

      align-items: center;



      img {

        cursor: pointer;

        width: 36px;

        height: 36px;

        margin-right: 8px;

        border-radius: 50%;

      }



      div {

        cursor: pointer;

        font-weight: 500;

        font-size: 12px;

        color: #FFFFFF;

      }

    }

  }



  .three_UI {

    height: calc(100% - 106px);



  }



  .drawer_class {

    width: 500px !important;

    border-radius: 56px 0px 0px 56px !important;



    .drawer_content {

      position: relative;



      .license {

        cursor: pointer;

        margin-left: 26px;

        padding: 4px 10px;

        font-weight: 400;

        font-size: 14px;

        color: rgba(95, 118, 248, 1);

        border-radius: 14px;

        border: 1px solid #5F76F8;

      }

    }

  }





  .logOut_class {

    position: absolute;

    bottom: 18px;

    left: 50%;

    transform: translate(-50%, -50%);

    cursor: pointer;

    padding: 14px 63px;

    border-radius: 4px;

    border: 1px solid #E8E8E8;

  }



  .close {

    cursor: pointer;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 13px;

    width: 22px;

    height: 16px;

  }



input[type="number"] {

  -moz-appearance: textfield !important;

}



.four_app {

  width: 100%;

  height: 100%;

}



.dialog_class {

  border-radius: 16px;



  .el-dialog__body {

    padding: 41px 0 42px 0;

  }



  .el-dialog__header {

    display: none;

  }



  .reset_password {

    display: flex;

    flex-direction: column;

    align-items: center;



    .top-con {

      width: 100%;

      display: flex;

      justify-content: center;

      position: relative;



      .reset_password_title {

        font-weight: 600;

        font-size: 26px;

        color: #333333;

        margin-bottom: 49px;

      }



      img {

        position: absolute;

        right: 18px;

        width: 24px;

        height: 26px;

      }

    }



    .el-input>.el-input__inner::placeholder {

      font-size: 15px;

      font-weight: 400;

      color: rgba(200, 202, 214, 1);

    }



    .el-input {

      width: 311px;

      margin-top: 20px;

    }



    .el-input:first-child {

      margin-top: unset;

    }



    .el-input>.el-input__inner {

      width: 311px;

      height: 45px;

      font-size: 17px;

      padding: 0 41px;

    }



    .el-input__prefix {

      display: flex;

      align-items: center;

      left: 16px;

    }



    .prefix {

      width: 16px;

      height: 16px;

    }



    .el-button {

      margin-top: 39px;

      width: 311px;

      height: 50px;

      background: #5F76F8;

      border-radius: 4px;

      font-weight: 600;

      font-size: 18px;

      color: #FFFFFF;

      align-items: center;

      align-content: center;

      padding: unset;

      border: unset;

    }

  }

input[aria-hidden=true] {

  display: none !important;

}

</style>


 src/assets/routerIcon/driver.png

 src/assets/routerIcon/order.png

 src/layouts/index.vue

@@ -1,7 +1,7 @@
<template>

    <div class="sticky top0">

        <div class="header relative">

            <div class="title">

        <div class="header relative pointer">

            <div @click="$router.push('/home')" class="title">

                <img src="@/assets/logo.png" alt="">

                射洪“两客一危”监管平台

            </div>

@@ -24,8 +24,8 @@
        <div class="menu w100 bgColor1">

            <div v-for="(item, index) in routesList" :key="index" class="flex a-center h100">

                <div v-for="(item2, index2) in item.children" :key="index2" class="h100">

                    <div @click="$router.push(item2.path)" v-if="!item2.hide"

                        class="flex a-center h100 px--40 menuItemHover pointer"

                    <div @click="$router.push(item2.path)" v-if="!item2.meta.hide"

                        class="flex a-center j-center h100 w--160 menuItemHover pointer"

                        :class="item2.path == $route.path && 'bgColor2'">

                        <img v-if="item2.meta.icon" :src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"

                            class="w--15 h--15 mr--12 shrink0" />


 src/main.js

@@ -11,7 +11,19 @@
Vue.prototype.$cookies = cookies;

Vue.prototype.$baseURL = apiConfig.baseURL

Vue.config.productionTip = false

/* 全局TableHeight */

Vue.prototype.$baseTableHeight = (formType) => {

  let height = window.innerHeight

  let paddingHeight = 400

  const formHeight = 50



  if ('number' == typeof formType) {

    height = height - paddingHeight - formHeight * formType

  } else {

    height = height - paddingHeight

  }

  return height

}



new Vue({

  router,


 src/router/router.js

@@ -33,6 +33,57 @@
        ]

    },

    {

        path: '/company',

        component: Layout,

        children: [

            {

                path: '/company',

                component: () => import('@/view/company'),

                meta: {

                    title: '公司管理',

                    icon: 'company'

                }

            }

        ]

    },

    {

        path: '/driver',

        component: Layout,

        children: [

            {

                path: '/driver',

                component: () => import('@/view/driver'),

                meta: {

                    title: '驾驶员管理',

                    icon: 'driver'

                }

            }

        ]

    },

    {

        path: '/car',

        component: Layout,

        children: [

            {

                path: '/car-manage',

                component: () => import('@/view/car-manage'),

                meta: {

                    title: '车辆管理',

                    icon: 'car'

                }

            },

            {

                path: '/car-detail',

                component: () => import('@/view/car-manage/detail'),

                meta: {

                    title: '车辆详情',

                    icon: 'car',

                    hide: true

                }

            }

        ]

    },

    {

        path: '/early-warning',

        component: Layout,

        children: [

@@ -47,6 +98,20 @@
        ]

    },

    {

        path: '/order',

        component: Layout,

        children: [

            {

                path: '/order',

                component: () => import('@/view/order'),

                meta: {

                    title: '订单记录',

                    icon: 'order'

                }

            }

        ]

    },

    {

        path: '/complaint',

        component: Layout,

        children: [


 src/utils/utils.js

@@ -1,57 +1,38 @@




// 生成4位随机验证码

export function generateVerificationCode() {

    const characters = '123456789abcdefghijkmnpqrstuvwxyABCDEFGHJKLMNPQRSTUVWXY';

    let code = '';

    for (let i = 0; i < 4; i++) {

        code += characters.charAt(Math.floor(Math.random() * characters.length));

    }

    return code;

  const characters = '123456789abcdefghijkmnpqrstuvwxyABCDEFGHJKLMNPQRSTUVWXY';

  let code = '';

  for (let i = 0; i < 4; i++) {

    code += characters.charAt(Math.floor(Math.random() * characters.length));

  }

  return code;

}



// 导出

export const exportExcell = (name, params, url) => {

  let token = ''

  let shopType = localStorage.getItem('shopStyle')

  switch (shopType) {

    case '1':

      token = localStorage.getItem('tokenBlue')

      break;

    case '2':

      token = localStorage.getItem('tokenGreen')

      break;

    case '3':

      token = localStorage.getItem('tokenDarkBlue')

      break;

    case '4':

      token = localStorage.getItem('tokenPurple')

      break;

    default:

      break;

  }

    fetch('http://192.168.110.34:8081' + url, {

      method: 'post',

      body: JSON.stringify({

        ...params,

      }),

      headers: {

        Authorization: token,

        'ConTent-Type': 'application/json;charset=UTF-8', 
        timestamp: new Date().getTime(),

        client: localStorage.getItem('client')

      },

      responseType: 'blob',

    })

      .then((res) => res.blob())

      .then((res) => {

  
        const link = document.createElement('a');

        link.style.display = 'none';

        link.href = URL.createObjectURL(res);

        link.download = name;

        document.body.appendChild(link);

        link.click();

        // 释放的 URL 对象以及移除 a 标签

        URL.revokeObjectURL(link.href);

        document.body.removeChild(link);

      });

  };
  fetch(BASE_URL + url, {

    method: 'get',

    params: JSON.stringify({

      ...params,

    }),

    headers: {

      Authorization: localStorage.getItem('token'),

      'ConTent-Type': 'application/json;charset=UTF-8',

      timestamp: new Date().getTime(),

      client: localStorage.getItem('client')

    },

    responseType: 'blob',

  })

    .then((res) => res.blob())

    .then((res) => {

      const link = document.createElement('a');

      link.style.display = 'none';

      link.href = URL.createObjectURL(res);

      link.download = name;

      document.body.appendChild(link);

      link.click();

      // 释放的 URL 对象以及移除 a 标签

      URL.revokeObjectURL(link.href);

      document.body.removeChild(link);

    });

};


 src/view/car-manage/detail.vue

New file
@@ -0,0 +1,28 @@
<template>
    <div class="container">
        <div class=""></div>
    </div>
</template>

<script>
export default {
    name: "detail",
    data() {
        return {
            id: ''
        }
    },
    methods: {
        // getDetail() {
        //     this.$axios.get(`/api/complaint/detail/${this.id}`).then(res => {
        //         console.log(res);
        //     })
        // }
    },
    created() {
    }
}
</script>
<style scoped lang="less">

</style>

 src/view/car-manage/index.vue

@@ -1,32 +1,52 @@
<template>
    <div>
        <div class="form flex a-center j-between mt--23">
        <div class="form flex j-between mt--23" style="align-items: end;">
            <div class="form-left ml--30">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="预警类型:" prop="type" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="车辆号牌:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="所属车主:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆颜色:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆经营区域:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-form-item prop="level" style="margin-right: unset !important;">
                            <el-input class="w--90" v-model="searchForm.level" placeholder="请输入"></el-input>
                        </el-form-item>
                        <span class="mr--5 ml--5">-</span>
                        <el-form-item prop="level" class="unset_m">
                            <el-input  class="w--90"  v-model="searchForm.level" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="车辆运营类型:" prop="type" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="预警" value="1"></el-option>
                            <el-option label="报警" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆号牌:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="预警时间:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-date-picker :append-to-body="false" v-model="searchForm.date" type="daterange"
                            range-separator=" " start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    <el-form-item label="车辆运营状态:" prop="type" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="预警" value="1"></el-option>
                            <el-option label="报警" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-right mr--24 mb--22">
            <div class="form-right shrink0 mr--24 mb--23">
                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
                    @click="search">查询</el-button>
                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
@@ -42,24 +62,28 @@
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="车辆名称"></el-table-column>
                <el-table-column prop="name" label="车牌号码"></el-table-column>
                <el-table-column prop="name" label="投诉内容"></el-table-column>
                <el-table-column prop="name" label="投诉人电话"></el-table-column>
                <el-table-column prop="name" label="被投诉所属公司"></el-table-column>
                <el-table-column prop="name" label="被投诉驾驶员"></el-table-column>
                <el-table-column prop="name" label="投诉时间"></el-table-column>
                <el-table-column prop="name" label="车牌号"></el-table-column>
                <el-table-column prop="name" label="车辆颜色"></el-table-column>
                <el-table-column prop="name" label="车辆所属公司"></el-table-column>
                <el-table-column prop="name" label="核定载客位"></el-table-column>
                <el-table-column prop="name" label="车辆型号"></el-table-column>
                <el-table-column prop="name" label="车辆类型"></el-table-column>
                <el-table-column prop="name" label="车主"></el-table-column>
                <el-table-column prop="name" label="车身颜色"></el-table-column>
                <el-table-column prop="name" label="车辆注册日期"></el-table-column>
                <el-table-column prop="name" label="车辆经营区域"></el-table-column>
                <el-table-column prop="name" label="车辆运营类型"></el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle(scope.$index, scope.row)">处理</el-button>
                        <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-box relative mt--23 flex j-end">
                <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"  @current-change="handleCurrentChange"
                    :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total"  >
                <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="searchForm.page" background
                    layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total">
                </el-pagination>
            </div>
        </div>

 src/view/company/component/detailModal.vue

New file
@@ -0,0 +1,50 @@
<template>
    <div>
        <el-dialog title="公司信息" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false">
            <el-descriptions title="" :column="2">
                <el-descriptions-item label="公司名称">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="统一社会信用代码">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="注册地址">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="紧急联系电话">14725836902</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" :column="1">
                <el-descriptions-item
                    label="经营范围名称">巡游出租汽车经营服务。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）一般项目：代驾服务；商务代理代办服务；小微型客车租赁经营服务；信息系统集成服务；汽车零配件批发。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）</el-descriptions-item>
                <el-descriptions-item label="通讯地址">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="" :column="2">
                <el-descriptions-item label="经营业户经济类型">有限责任公司(非自然人投资或控股的法人独资)</el-descriptions-item>
                <el-descriptions-item label="注册资本">180万(元)</el-descriptions-item>
                <el-descriptions-item label="法人代表姓名">王强</el-descriptions-item>
                <el-descriptions-item label="法人代表电话">14725836905</el-descriptions-item>
                <el-descriptions-item label="状态">有效</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: false
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        closeClick() {
            this.dialogVisible = false
        }
    },
};
</script>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 25px;
}
</style>

 src/view/company/index.vue

New file
@@ -0,0 +1,108 @@
<template>
    <div>
        <div class="form flex a-center j-between mt--23">
            <div class="form-left ml--30">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="公司名称:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="通讯地址:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="法人代表:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆运营类型:" prop="type" class="unset_m" style="margin-right: 15px;">
                        <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择">
                            <el-option label="公交" value="1"></el-option>
                            <el-option label="出租车" value="2"></el-option>
                            <el-option label="网约车" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-right mr--24 mb--22">
                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
                    @click="search">查询</el-button>
                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
                    size="small">重置</el-button>
            </div>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="公司名称"></el-table-column>
                <el-table-column prop="name" label="经营范围"></el-table-column>
                <el-table-column prop="name" label="运营类型"></el-table-column>
                <el-table-column prop="name" label="通讯地址"></el-table-column>
                <el-table-column prop="name" label="注册资本"></el-table-column>
                <el-table-column prop="name" label="法定代表人"></el-table-column>
                <el-table-column prop="name" label="联系人"></el-table-column>
                <el-table-column prop="name" label="联系电话"></el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showDetail">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="relative mt--23 flex j-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
        <DetailModal ref="detailModal" />
    </div>
</template>

<script>
import DetailModal from "./component/detailModal"

export default {
    components: {
        DetailModal
    },
    data() {
        return {
            searchForm: {
                total: 0,
                page: 1,
                pageSize: 10
            },
            tableData: [],
        };
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
    },
    methods: {
        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
        reset() {
        },
        search() {

        },
        handleSizeChange(e) {
            this.searchForm.pageSize = e
        },
        handleCurrentChange(e) {
            this.searchForm.page = e
        },
    }
}
</script>

<style scoped lang="less">
::v-deep .el-form-item .el-input__inner {
    width: 240px;
}
</style>

 src/view/complaint/index.vue

@@ -16,8 +16,8 @@
                    <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    <el-form-item label="公司名称:" prop="companyName" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.companyName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="预警时间:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-date-picker :append-to-body="false" v-model="searchForm.date" type="daterange"
@@ -40,7 +40,7 @@
                @click="exportExcell">导出</el-button>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="车辆名称"></el-table-column>
                <el-table-column prop="name" label="车牌号码"></el-table-column>
@@ -57,9 +57,15 @@
            </el-table>

            <div class="pagination-box relative mt--23 flex j-end">
                <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange"  @current-change="handleCurrentChange"
                    :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total"  >
                <el-pagination 
                    :popper-append-to-body="false"
                    popper-class="pagination-popper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchForm.page"
                    background
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
@@ -80,12 +86,18 @@
                type: '',
                level: '',
                name: '',
                companyName: '',
                total: 40,
                page: 1,
                pageSize: 10
            },
            tableData: [],
        };
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
    },
    methods: {
        reset() {
@@ -107,7 +119,17 @@
</script>

<style scoped lang="less">
.search-button {
    height: 40px !important;
::v-deep .pagination-popper {
    position: fixed !important;
    transform: 
        scale(calc(1 / var(--scale))) 
        translate(
            calc(100px * (1 - 1 / var(--scale))), 
            calc(5px * (1 - 1 / var(--scale)))
        ) !important;
    transform-origin: right top !important;
    right: calc(30px * (1 - 1 / var(--scale))) !important;
    margin-top: 5px;
    min-width: 100px !important;
}
</style>

 src/view/driver/component/detailModal.vue

New file
@@ -0,0 +1,73 @@
<template>
    <div>
        <el-dialog title="驾驶员信息" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false">
            <el-descriptions title="" :column="2">
                <el-descriptions-item label="机动车驾驶员姓名">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="驾驶员婚姻状况">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="驾驶员性别">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="出生日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="驾驶员手机号">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="驾驶员民族">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="驾驶员通信地址">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="驾驶员外语能力">14725836902</el-descriptions-item>
                <el-descriptions-item label="驾驶员学历">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="户口登记机关名称">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="户口地址或长住地址">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="驾驶员合同（或协议）签署公司">14725836902</el-descriptions-item>
                <el-descriptions-item label="驾驶员照片文件编号">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="机动车驾驶证扫描文件编号">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="准驾车型">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="初次领取驾驶证日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="驾驶证有效期限起">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="驾驶证有效期限止">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="是否巡游出租汽车驾驶员">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="资格证发证日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="初次领取资格证日期">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="资格证有效起始日期">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="资格证有效截止日期">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="驾驶员在平台的注册日期">14725836902</el-descriptions-item>
                <el-descriptions-item label="是否在驾驶员黑名单中">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="是否转职驾驶员">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="公司名称">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="运营类型">14725836902</el-descriptions-item>
                <el-descriptions-item label="网约车驾驶员资格证号">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="网约车驾驶员证发证机构">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="合同（或协议）有效期起">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="合同（或协议）有效期止">14725836902</el-descriptions-item>
                <el-descriptions-item label="国籍">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="紧急情况联系人">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="紧急情况联系人电话">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                <el-descriptions-item label="紧急情况联系人通讯地址">14725836902</el-descriptions-item>
                <el-descriptions-item label="状态">射洪洪达出租车有限公司</el-descriptions-item>
                <el-descriptions-item label="操作标识">91510922769973987B</el-descriptions-item>
                <el-descriptions-item label="更新时间">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: false
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        closeClick() {
            this.dialogVisible = false
        }
    },
};
</script>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 20px;
}
</style>

 src/view/driver/index.vue

New file
@@ -0,0 +1,99 @@
<template>
    <div>
        <div class="form flex a-center j-between mt--23">
            <div class="form-left ml--30">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="公司名称:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="驾驶员手机号:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系人姓名:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-right mr--24 mb--22">
                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
                    @click="search">查询</el-button>
                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
                    size="small">重置</el-button>
            </div>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="机动车驾驶员姓名"></el-table-column>
                <el-table-column prop="name" label="车辆所属公司"></el-table-column>
                <el-table-column prop="name" label="机动车驾驶证号"></el-table-column>
                <el-table-column prop="name" label="驾驶员通信地址"></el-table-column>
                <el-table-column prop="name" label="紧急情况联系人"></el-table-column>
                <el-table-column prop="name" label="紧急情况联系人电话"></el-table-column>
                <el-table-column prop="name" label="驾驶员手机号"></el-table-column>
                <el-table-column prop="name" label="驾驶员合同签订公司"></el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showDetail">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="relative mt--23 flex j-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
        <DetailModal ref="detailModal" />
    </div>
</template>

<script>
import DetailModal from "./component/detailModal"

export default {
    components: {
        DetailModal
    },
    data() {
        return {
            searchForm: {
                total: 0,
                page: 1,
                pageSize: 10
            },
            tableData: [],
        };
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
    },
    methods: {
        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
        reset() {
        },
        search() {

        },
        handleSizeChange(e) {
            this.searchForm.pageSize = e
        },
        handleCurrentChange(e) {
            this.searchForm.page = e
        },
    }
}
</script>
<style scoped lang="less">
::v-deep .el-form-item .el-input__inner {
    width: 240px;
}
</style>

 src/view/login/index.vue

@@ -1,22 +1,102 @@
<template>
  <div class="flex a-center">
    <div>射洪“两客一危”监管平台</div>
    <div></div>
  <div>
    <div class="login_box">
      <div class="fs--40 fw-bold">
        <h1>
          射洪“两客一危”监管平台
        </h1>
      </div>
      <div class="mt--20 txt-center py--20 px--20 br--10 box-s1">
        <div class="fs--20 fw-bold">登陆</div>
        <div class="mt--20">
          <el-input class="w100" prefix-icon="el-icon-user" placeholder="账号" v-model="account" />
        </div>
        <div class="mt--20">
          <el-input prefix-icon="el-icon-lock" placeholder="密码" v-model="password" show-password />
        </div>
        <div class="mt--20 flex a-center code_box">
          <div class="flex1">
            <el-input type="number" placeholder="请输入验证码" v-model="code" />
          </div>
          <div @click="resetCodeStr" class="fs--18 lh--40 border1 pointer">{{ codeStr }}</div>
        </div>
        <div @click="login" class="mt--40 br--5 lh--50 pointer bgcolor1 color1">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { generateVerificationCode } from '@/utils/utils';
export default {
  components: {},
  props: {},
  data() {
    return {};
    return {
      account: '',
      password: '',
      code: '',
      codeStr: ''
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {},
  created() {
    this.resetCodeStr()
  },
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    login() {
      this.$router.push('/home')
    },
    handleKeyDown(event) {
      if (event.key === "Enter") {
      }
    },
    // 校验验证码
    matchCaseInsensitive(str, pattern) {
      return str.match(new RegExp(pattern, "i"));
    },
    resetCodeStr() {
      this.codeStr = generateVerificationCode();
    },
  },
};
</script>
<style scoped lang="less"></style>
<style scoped lang="less">
.login_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box-s1 {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.code_box {
  border-radius: 4px;
  border: 1px solid #DCDFE6;

  ::v-deep .el-input__inner {
    border: unset !important;
  }
}

.bgcolor1 {
  background: #0E6EFD;
}

.color1 {
  color: #fff;
}

.border1 {
  border-left: 1px solid #DCDFE6;
  min-width: 100px;
}
</style>

 src/view/order/component/detailModal.vue

New file
@@ -0,0 +1,64 @@
<template>
    <div>
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                <el-radio-button label="order">订单信息</el-radio-button>
                <el-radio-button label="track">行程轨迹</el-radio-button>
                <el-radio-button label="monitoring">行程监控</el-radio-button>
            </el-radio-group>
            <!-- 订单信息 -->
            <div v-show="tabPosition == 'order'">
                <el-descriptions title="" :column="3">
                    <el-descriptions-item label="公司名称">射洪洪达出租车有限公司</el-descriptions-item>
                    <el-descriptions-item label="发起地区划">91510922769973987B</el-descriptions-item>
                    <el-descriptions-item label="订单编号">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                    <el-descriptions-item label="机动车驾驶证编号">射洪洪达出租车有限公司</el-descriptions-item>
                    <el-descriptions-item label="驾驶员手机号">91510922769973987B</el-descriptions-item>
                    <el-descriptions-item label="车辆号牌">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                    <el-descriptions-item label="派单时间">射洪洪达出租车有限公司</el-descriptions-item>
                    <el-descriptions-item label="订单发起时间">91510922769973987B</el-descriptions-item>
                    <el-descriptions-item label="乘客备注">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                    <el-descriptions-item label="出发地点">射洪洪达出租车有限公司</el-descriptions-item>
                    <el-descriptions-item label="下车地点">91510922769973987B</el-descriptions-item>
                    <el-descriptions-item label="运价类型编号">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                    <el-descriptions-item label="订单金额">射洪洪达出租车有限公司</el-descriptions-item>
                    <el-descriptions-item label="实付价">91510922769973987B</el-descriptions-item>
                    <el-descriptions-item label="支付方式">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 行程轨迹 -->
            <div v-show="tabPosition == 'track'">
                
            </div>
            <!-- 行程监控 -->
            <div v-show="tabPosition == 'monitoring'"></div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: true,
            tabPosition: 'order',
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        closeClick() {
            this.dialogVisible = false
        }
    },
};
</script>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 25px;
}
</style>

 src/view/order/index.vue

New file
@@ -0,0 +1,126 @@
<template>
    <div>
        <div class="form flex a-center j-between mt--23">
            <div class="form-left ml--30">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="派单时间:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆号牌:" prop="name" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="驾驶员姓名:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="上车地点:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="下车地点:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="里程范围:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-right mr--24 mb--22">
                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
                    @click="search">查询</el-button>
                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
                    size="small">重置</el-button>
            </div>
        </div>
        <div class="mt--23 ml--30">
            <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-top" type="primary" size="small"
                @click="exportExcell">导出</el-button>
        </div>
        <div class="table-box ml--30 mt--23 mr--30">
            <el-table :data="tableData" border stripe style="width: 100%" :height="height">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="name" label="订单编号"></el-table-column>
                <el-table-column prop="name" label="车牌号"></el-table-column>
                <el-table-column prop="name" label="车牌颜色"></el-table-column>
                <el-table-column prop="name" label="车辆所属公司"></el-table-column>
                <el-table-column prop="name" label="上车地点"></el-table-column>
                <el-table-column prop="name" label="下车地点"></el-table-column>
                <el-table-column prop="name" label="载客里程"></el-table-column>
                <el-table-column prop="name" label="驾驶员名称"></el-table-column>
                <el-table-column prop="name" label="驾驶员电话"></el-table-column>
                <el-table-column prop="name" label="派单时间"></el-table-column>
                <el-table-column prop="name" label="订单金额"></el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showDetail">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="relative mt--23 flex j-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
        <DetailModal ref="detailModal" />
    </div>
</template>

<script>
import DetailModal from "./component/detailModal"
import { exportExcell } from '@/utils/utils'

export default {
    components: {
        DetailModal
    },
    data() {
        return {
            searchForm: {
                total: 0,
                page: 1,
                pageSize: 10
            },
            tableData: [],
        };
    },
    computed: {
        height() {
            return this.$baseTableHeight()
        },
    },
    methods: {
        showDetail() {
            this.$refs.detailModal.dialogVisible = true
        },
        reset() {
        },
        search() {

        },
        exportExcell() {

        },
        handleSizeChange(e) {
            this.searchForm.pageSize = e
        },
        handleCurrentChange(e) {
            this.searchForm.page = e
        },
    }
}
</script>
<style scoped lang="less">
.search-button {
    height: 40px !important;
}

::v-deep .el-form-item .el-input__inner {
    width: 240px;
}
</style>