Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

src/crud/components/UD.operation.vue

@@ -1,8 +1,8 @@
 <!-- 默认插槽值 -->
 <template>
-    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+    <el-button v-if="isEdit" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
     <!-- 弹出框提示 trigger="click" -->
-    <el-popover trigger="click" v-model:visible="scope.row.visible" placement="top" :width="160">
+    <el-popover v-if="isDelete" trigger="click" v-model:visible="scope.row.visible" placement="top" :width="160">
         <div>
             <div style="margin-bottom: 10px;">
                 <span>是否确认删除该条数据?</span>
@@ -34,6 +34,14 @@
             data: {
                 default: null,
                 type: Object
+            },
+            isEdit: {
+                default: true,
+                type: Boolean
+            },
+            isDelete: {
+                default: true,
+                type: Boolean
             }
         },
         data() { //字段

src/crud/index.vue

@@ -22,24 +22,27 @@
                 :width="item.width" :show-overflow-tooltip="!item.overflow" />
 
             <el-table-column :fixed="tableFrom.operateFixed ? 'right' : 'false'" :label="tableFrom.operateTitle"
-                width="150px">
+                :width="tableFrom.operateWidth ? tableFrom.operateWidth : '150px'">
                 <!-- 默认插槽值 -->
                 <template #default="scope">
-                    <ud-operation :scope="scope" :data="testData" @handleEdit="handleEdit" @handleDelete="handleDelete">
+                    <ud-operation :scope="scope" :data="testData" :isEdit="tableFrom.operate.edit"
+                        :isDelete="tableFrom.operate.delete" @handleEdit="handleEdit" @handleDelete="handleDelete">
                     </ud-operation>
                 </template>
             </el-table-column>
         </el-table>
         <!-- 分页组件 -->
-        <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
+        <el-pagination v-if="false" :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
         <!-- 对话框 -->
         <el-dialog v-model="dialogFormVisible" :title="`${title}`">
+            <!-- 是否自定义Dialog -->
+            <div v-if="tableFrom.customDialog">
 
+            </div>
+            <!-- 系统内容 -->
             <el-form ref="ruleFormRef" :rules="rules" :model="form">
-
                 <el-form-item v-for="(item,index) in tableFrom.field" :label="item.label" :prop="item.prop"
                     :label-width="formLabelWidth">
-
                     <!-- 输入框 -->
                     <div style="width: 100%;" v-if="item.form.type === 'input'">
                         <el-input v-model="form[item.prop]" :type="item.itemType"
@@ -58,9 +61,7 @@
                             :value-format="item.form.valueFormat" :type="item.form.itemType"
                             :placeholder="item.form.placeholder" />
                     </div>
-
                 </el-form-item>
-
             </el-form>
 
             <template #footer>
@@ -140,10 +141,7 @@
     const rules = reactive(initRules)
 
     //搜索条件
-    let searchCondition = reactive({
-        name: '',
-        date: ''
-    })
+    let searchCondition = reactive(props.homeData ? props.homeData.search : [])
 
     //表单字段
     const form = ref(initForm)

src/data/cardAfter/cardFillDo.ts

@@ -6,6 +6,7 @@ export const Data = {
     },
     table: {
         style: '',
+        customDialog: false,
         extend: [{
             type: 'index',
             label: '序号',
@@ -92,9 +93,10 @@ export const Data = {
         operateTitle: '操作',
         operateFixed: true,
         isOperate: true,
+        operateWidth: '80px',
         operate: {
             edit: true,
-            delete: true
+            delete: false
         }
     }
 }

src/data/menuData.ts

@@ -11,114 +11,120 @@ frameUrl?:string; 嵌套外链。
  */
 export const list = [
     // {
-        // title: '售后服务',
-        // path: 'home', //对应name名称
-        // icon: 'one',
-        // auth: true,
-        // order: 1,
-        // children: [
-            {
-                title: '基础信息查询服务',
-                path: 'home',
-                children: [{
-                    title: '用户信息查询及变更服务',
-                    path: 'userQueryChange',
-                    children: []
-                }, {
-                    title: '车辆信息查询及变更服务',
-                    path: 'vehicleEnquirChange',
-                    children: []
-                }, {
-                    title: '签约信息查询服务',
-                    path: 'signingQuery',
-                    children: []
-                }, {
-                    title: '卡片信息查询服务',
-                    path: 'cardQueries',
-                    children: []
-                }, {
-                    title: 'OBU信息查询服务',
-                    path: 'OBUQuery',
-                    children: []
-                }]
-            },
-            {
-                title: '通行流水查询服务',
-                path: 'trafficFlow',
+    // title: '售后服务',
+    // path: 'home', //对应name名称
+    // icon: 'one',
+    // auth: true,
+    // order: 1,
+    // children: [
+    {
+        title: '基础信息查询服务',
+        path: 'home',
+        icon: 'Notification',
+        children: [{
+            title: '用户信息查询及变更服务',
+            path: 'userQueryChange',
+            children: []
+        }, {
+            title: '车辆信息查询及变更服务',
+            path: 'vehicleEnquirChange',
+            children: []
+        }, {
+            title: '签约信息查询服务',
+            path: 'signingQuery',
+            children: []
+        }, {
+            title: '卡片信息查询服务',
+            path: 'cardQueries',
+            children: []
+        }, {
+            title: 'OBU信息查询服务',
+            path: 'OBUQuery',
+            children: []
+        }]
+    },
+    {
+        title: '通行流水查询服务',
+        path: 'trafficFlow',
+        children: []
+    }, {
+        title: '黑名单查询服务',
+        path: 'blacklistQuery',
+        children: []
+    }, {
+        title: '卡签售后服务',
+        path: 'home',
+        icon: 'Postcard',
+        children: [{
+            title: '卡签补办服务',
+            path: 'cardFillDo',
+            children: []
+        }, {
+            title: '卡签续期服务',
+            path: 'cardRenewal',
+            children: []
+        }, {
+            title: '标签重新激活服务',
+            path: 'TABActivate',
+            children: []
+        }, {
+            title: '主动挂起(解除)服务',
+            path: 'initiativeHangUp',
+            children: []
+        }, {
+            title: '被动挂起(解除)服务',
+            path: 'passivityHangUp',
+            children: []
+        }, {
+            title: '卡签注销',
+            path: 'TABActivate',
+            children: []
+        }]
+    }, {
+        title: '储值卡资金服务',
+        path: 'home',
+        icon: 'CreditCard',
+        children: [{
+            title: '对公账户注册审核服务',
+            path: 'home',
+            icon: 'Collection',
+            children: [{
+                title: '对公账户注册审核服务',
+                path: 'corporateaccountManage',
                 children: []
-            }, {
-                title: '黑名单查询服务',
-                path: 'blacklistQuery',
+            }]
+        }, {
+            title: '充值及圈存服务',
+            path: 'home',
+            icon: 'CopyDocument',
+            children: [{
+                title: '储值卡充值服务(修复)[圈存]',
+                path: 'cardrechargefix',
                 children: []
             }, {
-                title: '卡签售后服务',
-                path: 'home',
-                children: [{
-                    title: '卡签补办服务',
-                    path: 'cardFillDo',
-                    children: []
-                }, {
-                    title: '卡签续期服务',
-                    path: 'cardRenewal',
-                    children: []
-                }, {
-                    title: '标签重新激活服务',
-                    path: 'TABActivate',
-                    children: []
-                }, {
-                    title: '主动挂起(解除)服务',
-                    path: 'initiativeHangUp',
-                    children: []
-                }, {
-                    title: '被动挂起(解除)服务',
-                    path: 'passivityHangUp',
-                    children: []
-                }, {
-                    title: '卡签注销',
-                    path: 'TABActivate',
-                    children: []
-                }]
+                title: '对公账户打款充值服务',
+                path: 'advancepaymentaccount',
+                children: []
+            }]
+        }, {
+            title: '注销退费服务',
+            path: 'cardrefundcostManage',
+            children: []
+        }, {
+            title: '补卡额及补交服务',
+            path: 'home',
+            icon:'Connection',
+            children: [{
+                title: '储值卡-补卡额服务',
+                path: 'supplyCardBalance',
+                children: []
             }, {
-                title: '储值卡资金服务',
-                path: 'home',
-                children: [{
-                    title: '对公账户注册审核服务',
-                    path: 'home',
-                    children: [{
-                        title: '对公账户注册审核服务',
-                        path: 'corporateaccountManage',
-                        children: []
-                    }]
-                }, {
-                    title: '充值及圈存服务',
-                    path: 'home',
-                    children: [{
-                        title: '储值卡充值服务(修复)[圈存]',
-                        path: 'cardrechargefix',
-                        children: []
-                    }, {
-                        title: '对公账户打款充值服务',
-                        path: 'advancepaymentaccount',
-                        children: []
-                    }]
-                }, {
-                    title: '注销退费服务',
-                    path: 'cardrefundcostManage',
-                    children: []
-                }, {
-                    title: '补卡额及补交服务',
-                    path: 'home',
-                    children: [{
-                        title: '储值卡-补卡额服务',
-                        path: 'supplyCardBalance',
-                        children: []
-                    }, {
-                        title: '储值卡-补交服务',
-                        path: 'addsupplyCardBalance',
-                        children: []
-                    }]
-                }]
-            }
-        // ]
+                title: '储值卡-补交服务',
+                path: 'addsupplyCardBalance',
+                children: []
+            }]
+        }]
+    }
+    // ]
     // }
 ];

src/data/tableConfig.ts

@@ -4,6 +4,7 @@ export const cfg = {
     },
     table: { //table 样式配置
         style: '', //默认表格样式
+        border: false, //是否添加边框(默认false)
         extend: [{ //表头拓展
             type: '', //类型:selection,index,expand
             width: '', //表头宽度
@@ -26,10 +27,10 @@ export const cfg = {
                 }
             }
         ],
-        border: false, //是否添加边框(默认false)
+        isOperate: true, //是否为表格添加操作处(默认true)
         operateTitle: '', //操作栏标题
         operateFixed: false, //操作栏是否固定(默认false)
-        isOperate: true, //是否为表格添加操作处(默认true)
+        operateWidth: '', //操作栏宽度
         operate: {
             edit: true, //是否编辑
             delete: true //是否删除

src/layout/components/Item.vue

@@ -1,6 +1,6 @@
 <template>
   <el-icon>
-    <Icon style="width: 16px;height: 16px;" icon="Apple" ></Icon>
+    <Icon style="width: 16px;height: 16px;" :icon="icon" ></Icon>
   </el-icon>
 </template>
 <script>
@@ -10,11 +10,7 @@
     props: {
       icon: {
         type: String,
-        default: ''
-      },
-      title: {
-        type: String,
-        default: ''
+        default: 'Apple'
       }
     }
   }

src/layout/components/SidebarItem.vue

@@ -3,7 +3,7 @@
     <!-- 父级菜单 -->
     <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.title + ',' + item.path">
       <template #title>
-        <Item />
+        <Item :icon="item.icon" />
         <span style="font-size:14px">{{ item.title }}</span>
       </template>
       <el-menu-item-group>

src/layout/index.vue

@@ -40,7 +40,6 @@
               </TabContainer>
 
               <!-- 主体内容页面 -->
-
               <router-view name="key"></router-view>
 
               <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->

src/views/dengmingcong/cardFillDo/cardFillDo.vue

@@ -13,9 +13,6 @@
 </template>
 <script setup lang="ts">
     import CRUD from "@/crud/index.vue";
-    // import {
-    //     homeData
-    // } from '@/data/tableConfig' //表单配置
     import {
         Data
     } from '@/data/cardAfter/cardFillDo' //表单配置

src/views/shengbo/blacklistQuery/blacklistQuery.vue

@@ -1,7 +1,258 @@
 <template>
-  blacklistQuery
+  <div style="font-size: 13px; color: rgb(209, 65, 65)">
+    注：目前仅支持中国工商银行贵州省分行、中国工商银行股份有限公司贵州省分行、农业银行、部互联网发行、
+    世纪恒通、工行微ETC、工总行直连模式三、贵州农信联社、贵州工行微ETC、世纪恒通GH查询下黑原因！
+  </div>
+  <div class="top">
+    <!-- 输入框 -->
+    <div class="topstyle">
+      <span style="margin-right: 10px; width: 40px">卡号</span>
+      <el-input v-model="input4" placeholder="请输入卡号"> </el-input>
+    </div>
+    <!-- 日期框 -->
+    <div class="topstyle">
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="开始日期"
+        format="YYYY/MM/DD hh:mm:ss"
+      />
+      <!-- <span>-</span> -->
+      <!-- <el-button>至</el-button> -->
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="结束日期"
+        format="YYYY/MM/DD hh:mm:ss"
+        style="margin-left: 5px"
+      />
+    </div>
+    <!-- 下拉框 -->
+    <div class="topstyle">
+      <span style="margin-right: 10px">查询类型</span>
+      <el-select v-model="value1" style="width: 100px">
+        <el-option label="下黑" value="shanghai" />
+        <el-option label="反白" value="beijing" />
+      </el-select>
+    </div>
+    <!-- 按钮 -->
+    <div class="topstyle">
+      <el-button v-model="input4" type="success" :icon="Search" @click="search">搜索</el-button>
+      <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
+      <el-button type="primary" :icon="Plus" @click="dialogFormVisible = true">添加</el-button>
+      <el-dialog v-model="dialogFormVisible" title="卡黑名单-操作(下黑反白)">
+        <el-form :model="form">
+          <el-form-item label="卡号：" :label-width="150">
+            <el-input v-model="form.name" style="width: 215px" />
+          </el-form-item>
+          <el-form-item label="黑名单类型：" :label-width="150">
+            <el-select v-model="form" placeholder="请选择黑名单类型">
+              <el-option label="卡挂失" value="shanghai" />
+              <el-option label="无卡挂起" value="beijing" />
+              <el-option label="无卡销售" value="shanghai" />
+              <el-option label="账户透支" value="beijing" />
+              <el-option label="合作机构黑名单" value="shanghai" />
+              <el-option label="车型不符" value="beijing" />
+              <el-option label="储值卡余额不足" value="shanghai" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态类型：" :label-width="150">
+            <el-select v-model="form.region" placeholder="请选择状态类型">
+              <el-option label="下黑" value="shanghai" />
+              <el-option label="反白" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="原因：" :label-width="150">
+            <el-input v-model="form.desc" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">关闭</el-button>
+            <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+  <div style="padding-top: 12px">
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column property="date1" label="序号" width="60" />
+      <el-table-column property="date2" label="卡号" width="120" />
+      <el-table-column property="date3" label="黑名单类型" width="100" />
+      <el-table-column property="date4" label="黑名单生效时间" width="170" />
+      <el-table-column property="date5" label="状态" width="60" />
+      <el-table-column property="date6" label="黑名单反白时间" width="130" />
+      <el-table-column property="date7" label="下黑操作工号" width="110" />
+      <el-table-column property="date8" label="下黑原因" width="200" />
+      <el-table-column property="date9" label="反白操作工号" width="130" />
+      <el-table-column property="date10" label="反白原因" width="110" />
+      <el-table-column label="操作" width="90">
+        <el-button @click="dialogFormVisible1 = true" style="border-style: none">详情</el-button>
+      </el-table-column>
+    </el-table>
+    <el-dialog v-model="dialogFormVisible1">
+            <span class="as-gravity-center" style="font-size: 22px">基本信息</span>
+            <el-form :model="form1" style="padding-top: 12px">
+              <el-form-item label="卡号：" :label-width="150">
+                <el-input v-model="form1.data" style="width: 215px" disabled />
+              </el-form-item>
+            </el-form>
+            <el-form :model="form1">
+              <el-form-item label="车辆号：" :label-width="150">
+                <el-input v-model="form1.data1" style="width: 215px" disabled />
+              </el-form-item>
+            </el-form>
+            <el-form :model="form1">
+              <el-form-item label="机构名称：" :label-width="150">
+                <el-input v-model="form1.data2" style="width: 215px" disabled />
+              </el-form-item>
+            </el-form>
+            <el-form :model="form1">
+              <el-form-item label="黑名单类型：" :label-width="150">
+                <el-input v-model="form1.data3" style="width: 215px" disabled />
+              </el-form-item>
+            </el-form>
+            <span class="as-gravity-center" style="font-size: 22px">黑名单上传日志</span>
+            <el-form :model="form1" style="padding-top: 12px">
+              <el-form-item label="上传日志：" :label-width="150" style="color: rgb(209, 65, 65)">
+                <el-input v-model="form1.data4" type="textarea" disabled />
+              </el-form-item>
+            </el-form>
+            <span class="as-gravity-center" style="font-size: 22px">渠道下黑原因</span>
+            <el-form :model="form1" style="padding-top: 12px">
+              <el-form-item label="查询结果：" :label-width="150" style="color: rgb(209, 65, 65)">
+                <el-input v-model="form1.data5" style="width: 215px" disabled />
+              </el-form-item>
+            </el-form>
+            <el-form :model="form1">
+              <el-form-item label="下黑原因：" :label-width="150" style="color: rgb(209, 65, 65)">
+                <el-input v-model="form1.data6" type="textarea" disabled />
+              </el-form-item>
+            </el-form>
+            <template #footer>
+              <span>
+                <el-button @click="dialogFormVisible1 = false">关闭</el-button>
+              </span>
+            </template>
+          </el-dialog>
+  </div>
+  <div style="padding-top: 12px" class="as-gravity-center-end">
+    <el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="1000" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-  
-</script>
+import { reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Calendar, Search, Refresh, Plus } from '@element-plus/icons-vue'
+import type { ElTable } from 'element-plus'
+
+const input3 = ref('')
+const input4 = ref('')
+const value1 = ref('')
+
+function reset() {}
+function search() {}
+function addTo() {}
+const dialogFormVisible = ref(false)
+const dialogFormVisible1 = ref(false)
+const form1 = reactive({
+  data: '52011640230217310678',
+  data1: '云AG9L76',
+  data2: '中国工商银行贵州省分行',
+  data3: '账户透支黑名单',
+  data4: '未查到黑名单上传日志！',
+  data5: '成功',
+  data6:
+    '银行卡号：621476*********6594,总欠额：229.78元,最后一次补扣时间：2022-05-09 07:31:06,失败原因：总行处理失败:帐户余额不足,请保证余额充足系统每天会自动补扣',
+})
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+interface User {
+  date1: string
+  date2: string
+  date3: string
+  date4: string
+  date5: string
+  date6: string
+  date7: string
+  date8: string
+  date9: string
+  date10: string
+  date11: string
+}
+
+const currentRow = ref()
+const singleTableRef = ref<InstanceType<typeof ElTable>>()
+
+const setCurrent = (row?: User) => {
+  singleTableRef.value!.setCurrentRow(row)
+}
+const handleCurrentChange = (val: User | undefined) => {
+  currentRow.value = val
+}
+const tableData: User[] = [
+  {
+    date1: '1',
+    date2: '52011640230217310678',
+    date3: '账户透支',
+    date4: '2020-12-19T03:41:04',
+    date5: '在黑',
+    date6: '',
+    date7: 'ETCGsyh002',
+    date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
+    date9: '',
+    date10: '',
+    date11: '',
+  },
+  {
+    date1: '2',
+    date2: '52011640230217310678',
+    date3: '账户透支',
+    date4: '2020-12-19T03:41:04',
+    date5: '在黑',
+    date6: '',
+    date7: 'ETCGsyh002',
+    date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
+    date9: '',
+    date10: '',
+    date11: '',
+  },
+  {
+    date1: '3',
+    date2: '52011640230217310678',
+    date3: '账户透支',
+    date4: '2020-12-19T03:41:04',
+    date5: '在黑',
+    date6: '',
+    date7: 'ETCGsyh002',
+    date8: '车牌尾号L76欠费:229.78元;于20201219进入黑名单',
+    date9: '',
+    date10: '',
+    date11: '',
+  },
+]
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  margin-left: 10px;
+}
+.topstyle {
+  display: flex;
+  height: 50px;
+  margin-right: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+</style>

src/views/shengbo/trafficFlow/trafficFlow.vue

@@ -1,7 +1,202 @@
 <template>
-  trafficFlow
+  <div class="top">
+    <!-- 输入框 -->
+    <div class="topstyle">
+      <el-input v-model="input4" placeholder="请输入ETC卡号"> </el-input>
+    </div>
+    <div class="topstyle">
+      <el-input v-model="input4" placeholder="请输入车牌号"> </el-input>
+    </div>
+    <!-- 日期框 -->
+    <div class="topstyle" >
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="开始日志日期"
+        format="YYYY/MM/DD hh:mm:ss"
+       
+      />
+      <!-- <span>-</span> -->
+       <!-- <el-button>至</el-button> -->
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        
+        placeholder="结束日志日期"
+        format="YYYY/MM/DD hh:mm:ss"
+         style="margin-left: 5px;"
+      />
+    </div>
+    <!-- 按钮 -->
+    <div class="topstyle">
+      <el-button v-model="input4" type="success" :icon="Search" @click="search">搜索</el-button>
+      <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
+      <el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button>
+      <el-button type="primary" plain  @click="exportAll">导出所有</el-button>
+    </div>
+  </div>
+  <div style="padding-top: 12px">
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column property="date1" label="序号" width="60" />
+      <el-table-column property="date2" label="ETC卡号" width="140" />
+      <el-table-column property="date3" label="车牌号" width="100" />
+      <el-table-column property="date4" label="消费类型" width="90" />
+      <el-table-column property="date5" label="入口时间" width="110" />
+      <el-table-column property="date6" label="入口站名" width="110" />
+      <el-table-column property="date7" label="出口时间" width="110" />
+      <el-table-column property="date8" label="出口站名" width="110" />
+      <el-table-column property="date9" label="交易前余额（元）" width="140" />
+      <el-table-column property="date10" label="交易金额（元）" width="125" />
+      <el-table-column property="date11" label="交易后金额（元）" width="140" />
+    </el-table>
+  </div>
+  <div style="padding-top: 12px" class="as-gravity-center-end">
+    <el-pagination
+      :page-sizes="[10, 20, 30, 40]"
+      layout="sizes, prev, pager, next"
+      :total="1000"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
-  
-</script>
+import { reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Calendar, Search, Refresh } from '@element-plus/icons-vue'
+import type { ElTable } from 'element-plus'
+
+const input3 = ref('')
+const input4 = ref('')
+const value1 = ref('')
+
+function reset() {}
+function search() {}
+function exportCurrentPage() {}
+function exportAll() {}
+
+interface User {
+  date1: string
+  date2: string
+  date3: string
+  date4: string
+  date5: string
+  date6: string
+  date7: string
+  date8: string
+  date9: string
+  date10: string
+  date11: string
+}
+
+const currentRow = ref()
+const singleTableRef = ref<InstanceType<typeof ElTable>>()
+
+const setCurrent = (row?: User) => {
+  singleTableRef.value!.setCurrentRow(row)
+}
+const handleCurrentChange = (val: User | undefined) => {
+  currentRow.value = val
+}
+// const objectService = {
+//   url: 'http://localhost:8888/list2',
+// }
+
+// const { data } = useRequest(objectService)
+// console.log(data.value);
+
+// const tableData = data
+const tableData: User[] = [
+  {
+    date1: '1',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+  {
+    date1: '2',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+  {
+    date1: '3',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+  {
+    date1: '4',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+  {
+    date1: '5',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+  {
+    date1: '6',
+    date2: '52011328220200481698',
+    date3: '贵A710AE',
+    date4: '省内流水',
+    date5: '2019-12-27 20:14:02',
+    date6: '贵阳西主线站',
+    date7: '2019-12-27 20:18:20',
+    date8: '贵阳西主线站',
+    date9: '38.25',
+    date10: '0.00',
+    date11: '38.25',
+  },
+]
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  margin-left: 10px;
+}
+.topstyle {
+  display: flex;
+  height: 40px;
+
+  margin-right: 10px;
+  align-items: center;
+  justify-content: flex-start;
+}
+</style>

src/views/weixingrong/OBUQuery/OBUQuery.vue

@@ -28,37 +28,91 @@ const options = [
     label: 'Option5',
   },
 ]
+const colors = [{
+            value: 'Option1',
+            label: '蓝色',
+        },
+        {
+            value: 'Option2',
+            label: '黄色',
+        },
+        {
+            value: 'Option3',
+            label: '黑色',
+        },
+        {
+            value: 'Option4',
+            label: '白色',
+        },
+        {
+            value: 'Option5',
+            label: '渐变绿色',
+        },
+        {
+            value: 'Option6',
+            label: '黄绿双拼色',
+        },
+        {
+            value: 'Option7',
+            label: '蓝白渐变色',
+        },
+        {
+            value: 'Option8',
+            label: '未确定',
+        },
+        {
+            value: 'Option9',
+            label: '绿色',
+        },
+        {
+            value: 'Option10',
+            label: '红色',
+        },
+    ]
 const tableData = [
   {
-    date: '2016-05-03',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-    tag: 'Home',
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    OBUNo: '5202161708027065',
+    channel: '中国邮政储蓄银行股份有限公司贵州省分行',
+    OBUStatus: '正常',
   },
   {
-    date: '2016-05-02',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-    tag: 'Office',
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    OBUNo: '5202161708027065',
+    channel: '中国邮政储蓄银行股份有限公司贵州省分行',
+    OBUStatus: '正常',
   },
   {
-    date: '2016-05-04',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-    tag: 'Home',
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    OBUNo: '5202161708027065',
+    channel: '中国邮政储蓄银行股份有限公司贵州省分行',
+    OBUStatus: '正常',
   },
+  {
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    OBUNo: '5202161708027065',
+    channel: '中国邮政储蓄银行股份有限公司贵州省分行',
+    OBUStatus: '正常',
+  },
+  
 ]
-const handleClick = () => {
-  console.log('click')
+const handleView = (item:any,v:any) => {
+  console.log('view',item,v)
+}
+const handleEdit = (item:any,v:any) => {
+  console.log('edit',item,v.OBUNo)
 }
 </script>
 <template>
@@ -73,7 +127,7 @@ const handleClick = () => {
             <el-form-item label="车牌颜色">
                 <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
                     <el-option
-                    v-for="item in options"
+                    v-for="item in colors"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
@@ -108,23 +162,25 @@ const handleClick = () => {
             <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
         </el-form>
         <el-table :data="tableData" style="width: 100%">
-            <el-table-column type="index" label="序号" width="64" fixed  />
-            <el-table-column fixed prop="date" label="客户名称" width="150" />
-            <el-table-column prop="name" label="车牌" width="120" />
-            <el-table-column prop="state" label="车牌颜色" width="120" />
-            <el-table-column prop="city" label="车型" width="120" />
-            <el-table-column prop="address" label="OBU编号" width="160" />
-            <el-table-column prop="address" label="渠道" width="260" />
-            <el-table-column prop="zip" label="OBU状态" width="120" />
-            <el-table-column fixed="right" label="操作" width="160">
-            <template #default>
-                <el-button type="primary" size="small" @click="handleClick">详情</el-button>
-                <el-button text size="small">Edit</el-button>
+            <el-table-column type="index" label="序号" width="64" fixed align="center" />
+            <el-table-column fixed prop="customerName" label="客户名称" width="100" align="center" />
+            <el-table-column prop="carNo" label="车牌" width="100" align="center" />
+            <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
+            <el-table-column prop="carStyle" label="车型" width="100" align="center" />
+            <el-table-column prop="OBUNo" label="OBU编号" width="160" align="center" />
+            <el-table-column prop="channel" label="渠道" width="360" align="center" />
+            <el-table-column prop="OBUStatus" label="OBU状态" width="100" align="center" />
+            <el-table-column fixed="right" label="操作" width="160" align="center" >
+            <template #default="scope">
+                <el-button type="primary" size="small" @click="handleView(scope.$index, scope.row)">详情</el-button>
+                <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
             </template>
             </el-table-column>
         </el-table>
     </div>
 </template>
 <style scoped>
-    
+.el-form--inline .el-form-item{
+    margin-right: 16px;
+}
 </style>

src/views/weixingrong/cardQueries/cardQueries.vue

@@ -1,9 +1,174 @@
 <script lang='ts' setup>
-    
+    import { reactive } from 'vue';
+    const OBUList = reactive({
+        cno: '',
+        carNo: '',
+        carColors: '',
+        OBUno: '',
+    })
+const colors = [{
+            value: 'Option1',
+            label: '蓝色',
+        },
+        {
+            value: 'Option2',
+            label: '黄色',
+        },
+        {
+            value: 'Option3',
+            label: '黑色',
+        },
+        {
+            value: 'Option4',
+            label: '白色',
+        },
+        {
+            value: 'Option5',
+            label: '渐变绿色',
+        },
+        {
+            value: 'Option6',
+            label: '黄绿双拼色',
+        },
+        {
+            value: 'Option7',
+            label: '蓝白渐变色',
+        },
+        {
+            value: 'Option8',
+            label: '未确定',
+        },
+        {
+            value: 'Option9',
+            label: '绿色',
+        },
+        {
+            value: 'Option10',
+            label: '红色',
+        },
+    ]
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const tableData = [
+  {
+    creatTime: '2012-01-10 09:30:15',
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    cardNo: '5202161708027065',
+    cardType: '一般卡类型',
+    productType: '一般卡产品类型',
+    updateTime: '2012-01-10 09:30:15',
+    modifyTime: '2012-01-10 09:30:15',
+    cardStatus: '正常',
+  },
+  
+]
+const handleClick = () => {
+  console.log('click')
+}
 </script>
 <template>
-    卡片信息查询服务
+    <div class="OBU-query content-warpper">
+        <el-form :inline="true" :model="OBUList" class="demo-form-inline">
+            <el-form-item label="客户编号">
+                <el-input v-model="OBUList.cno" placeholder="客户编号" />
+            </el-form-item>
+            <el-form-item label="车牌号码">
+                <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
+            </el-form-item>
+            <el-form-item label="车牌颜色">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                    <el-option
+                    v-for="item in colors"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="卡表面号">
+                <el-input v-model="OBUList.OBUno" placeholder="卡表面号" />
+            </el-form-item>
+            <el-form-item><el-button type="primary">读卡</el-button></el-form-item>
+            <el-form-item label="卡类型">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="状态">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="每条页数">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
+            <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
+        </el-form>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column type="index" label="序号" width="64" fixed align="center" />
+            <el-table-column fixed prop="creatTime" label="创建时间" width="100" align="center" />
+            <el-table-column fixed prop="customerName" label="客户名称" width="100" align="center" />
+            <el-table-column prop="carNo" label="车牌" width="100" align="center" />
+            <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
+            <el-table-column prop="carStyle" label="客货类别" width="100" align="center" />
+            <el-table-column prop="cardNo" label="卡表面号" width="160" align="center" />
+            <el-table-column prop="cardType" label="卡类型" width="120" align="center" />
+            <el-table-column prop="productType" label="产品类型" width="120" align="center" />
+            <el-table-column prop="cardStatus" label="状态" width="100" align="center" />
+            <el-table-column prop="updateTime" label="状态变更时间" width="100" align="center" />
+            <el-table-column prop="modifyTime" label="更新时间" width="100" align="center" />
+            <el-table-column fixed="right" label="操作" width="160" align="center" >
+            <template #default>
+                <el-button type="primary" size="small" @click="handleClick">详情</el-button>
+                <el-button type="success" size="small">修改</el-button>
+            </template>
+            </el-table-column>
+        </el-table>
+    </div>
 </template>
 <style scoped>
-    
+ .el-form--inline .el-form-item{
+    margin-right: 16px;
+}   
 </style>

src/views/weixingrong/signingQuery/signingQuery.vue

@@ -1,9 +1,174 @@
 <script lang='ts' setup>
-    
+    import { reactive } from 'vue';
+    const OBUList = reactive({
+        cno: '',
+        carNo: '',
+        carColors: '',
+        OBUno: '',
+    })
+const colors = [{
+            value: 'Option1',
+            label: '蓝色',
+        },
+        {
+            value: 'Option2',
+            label: '黄色',
+        },
+        {
+            value: 'Option3',
+            label: '黑色',
+        },
+        {
+            value: 'Option4',
+            label: '白色',
+        },
+        {
+            value: 'Option5',
+            label: '渐变绿色',
+        },
+        {
+            value: 'Option6',
+            label: '黄绿双拼色',
+        },
+        {
+            value: 'Option7',
+            label: '蓝白渐变色',
+        },
+        {
+            value: 'Option8',
+            label: '未确定',
+        },
+        {
+            value: 'Option9',
+            label: '绿色',
+        },
+        {
+            value: 'Option10',
+            label: '红色',
+        },
+    ]
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const tableData = [
+  {
+    creatTime: '2012-01-10 09:30:15',
+    customerName: '周金波',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    cardNo: '5202161708027065',
+    cardType: '一般卡类型',
+    productType: '一般卡产品类型',
+    updateTime: '2012-01-10 09:30:15',
+    modifyTime: '2012-01-10 09:30:15',
+    cardStatus: '正常',
+  },
+  
+]
+const handleClick = () => {
+  console.log('click')
+}
 </script>
 <template>
-    签约信息查询服务
+    <div class="OBU-query content-warpper">
+        <el-form :inline="true" :model="OBUList" class="demo-form-inline">
+            <el-form-item label="客户编号">
+                <el-input v-model="OBUList.cno" placeholder="客户编号" />
+            </el-form-item>
+            <el-form-item label="车牌号码">
+                <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
+            </el-form-item>
+            <el-form-item label="车牌颜色">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                    <el-option
+                    v-for="item in colors"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="卡表面号">
+                <el-input v-model="OBUList.OBUno" placeholder="卡表面号" />
+            </el-form-item>
+            <el-form-item><el-button type="primary">读卡</el-button></el-form-item>
+            <el-form-item label="卡类型">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="状态">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="每条页数">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
+            <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
+        </el-form>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column type="index" label="序号" width="64" fixed align="center" />
+            <el-table-column fixed prop="creatTime" label="创建时间" width="100" align="center" />
+            <el-table-column fixed prop="customerName" label="客户名称" width="100" align="center" />
+            <el-table-column prop="carNo" label="车牌" width="100" align="center" />
+            <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
+            <el-table-column prop="carStyle" label="客货类别" width="100" align="center" />
+            <el-table-column prop="cardNo" label="卡表面号" width="160" align="center" />
+            <el-table-column prop="cardType" label="卡类型" width="120" align="center" />
+            <el-table-column prop="productType" label="产品类型" width="120" align="center" />
+            <el-table-column prop="cardStatus" label="状态" width="100" align="center" />
+            <el-table-column prop="updateTime" label="状态变更时间" width="100" align="center" />
+            <el-table-column prop="modifyTime" label="更新时间" width="100" align="center" />
+            <el-table-column fixed="right" label="操作" width="160" align="center" >
+            <template #default>
+                <el-button type="primary" size="small" @click="handleClick">详情</el-button>
+                <el-button type="success" size="small">修改</el-button>
+            </template>
+            </el-table-column>
+        </el-table>
+    </div>
 </template>
 <style scoped>
-    
+  .el-form--inline .el-form-item{
+    margin-right: 16px;
+}  
 </style>

src/views/weixingrong/userQueryChange/userQueryChange.vue

@@ -1,9 +1,113 @@
 <script lang='ts' setup>
-    
+    import { reactive } from 'vue';
+    const OBUList = reactive({
+        cno: '',
+        carNo: '',
+        carColors: '',
+        OBUno: '',
+    })
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const tableData = [
+  {
+    carId: '贵CEP186_0',
+    customerNo: '52010116110441017',
+    customerName: '周金碧',
+    certificatesType: '身份证（含临时身份证）',
+    identificationNo: '522125196110110029',
+    phone: '15885137270',
+    handler: '周金碧',
+    handlerTime: '2018/03/17 21:15:13',
+    department: '技术部',
+  },
+]
+const handleClick = () => {
+  console.log('click')
+}
 </script>
 <template>
-    用户查询及变更服务
+    <div class="OBU-query content-warpper">
+        <el-form :inline="true" :model="OBUList" class="demo-form-inline">
+            <el-form-item label="证件类型">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="证件号码">
+                <el-input v-model="OBUList.OBUno" placeholder="证件号码" />
+            </el-form-item>
+            <el-form-item label="客户编号">
+                <el-input v-model="OBUList.OBUno" placeholder="客户编号" />
+            </el-form-item>
+            <el-form-item label="客户名称">
+                <el-input v-model="OBUList.OBUno" placeholder="客户名称" />
+            </el-form-item>
+            <el-form-item label="手机号码">
+                <el-input v-model="OBUList.OBUno" placeholder="手机号码" />
+            </el-form-item>
+            <el-form-item label="指定经办人">
+                <el-input v-model="OBUList.OBUno" placeholder="指定经办人" />
+            </el-form-item>
+            
+            <el-form-item label="每条页数">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
+            <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
+        </el-form>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column type="index" label="序号" width="64" fixed align="center" />
+            <el-table-column prop="customerNo" label="客户编号" width="180" align="center" />
+            <el-table-column prop="customerName" label="客户名称" width="100" align="center" />
+            <el-table-column prop="certificatesType" label="客户证件类型" width="180" align="center" />
+            <el-table-column prop="identificationNo" label="客户证件号码" width="180" align="center" />
+            <el-table-column prop="phone" label="手机号" width="100" align="center" />
+            <el-table-column prop="handler" label="指定经办人" width="120" align="center" />
+            <el-table-column prop="handlerTime" label="经办时间" width="100" align="center" />
+            <el-table-column prop="department" label="部门" width="180" align="center" />
+            <el-table-column fixed="right" label="操作" width="160" align="center" >
+            <template #default>
+                <el-button type="success" size="small" @click="handleClick">修改</el-button>
+                <el-button type="primary" size="small">查看</el-button>
+            </template>
+            </el-table-column>
+        </el-table>
+    </div>
 </template>
 <style scoped>
-    
+ .el-form--inline .el-form-item{
+    margin-right: 16px;
+}   
 </style>

src/views/weixingrong/vehicleEnquirChange/vehicleEnquirChange.vue

@@ -1,9 +1,184 @@
 <script lang='ts' setup>
-    
+    import { reactive } from 'vue';
+    const OBUList = reactive({
+        cno: '',
+        carNo: '',
+        carColors: '',
+        OBUno: '',
+    })
+const colors = [{
+            value: 'Option1',
+            label: '蓝色',
+        },
+        {
+            value: 'Option2',
+            label: '黄色',
+        },
+        {
+            value: 'Option3',
+            label: '黑色',
+        },
+        {
+            value: 'Option4',
+            label: '白色',
+        },
+        {
+            value: 'Option5',
+            label: '渐变绿色',
+        },
+        {
+            value: 'Option6',
+            label: '黄绿双拼色',
+        },
+        {
+            value: 'Option7',
+            label: '蓝白渐变色',
+        },
+        {
+            value: 'Option8',
+            label: '未确定',
+        },
+        {
+            value: 'Option9',
+            label: '绿色',
+        },
+        {
+            value: 'Option10',
+            label: '红色',
+        },
+    ]
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const tableData = [
+  {
+    carId: '贵CEP186_0',
+    customerNo: '52010116110441017',
+    customerName: '周金碧',
+    certificatesType: '身份证（含临时身份证）',
+    identificationNo: '522125196110110029',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    updateTime: '2018/03/17 21:15:13',
+  },
+  {
+    carId: '贵CEP186_0',
+    customerNo: '52010116110441017',
+    customerName: '周金碧',
+    certificatesType: '身份证（含临时身份证）',
+    identificationNo: '522125196110110029',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    updateTime: '2018/03/17 21:15:13',
+  },
+  {
+    carId: '贵CEP186_0',
+    customerNo: '52010116110441017',
+    customerName: '周金碧',
+    certificatesType: '身份证（含临时身份证）',
+    identificationNo: '522125196110110029',
+    carNo: '贵CEP186',
+    carColor: '白色',
+    carStyle: '一型客车',
+    updateTime: '2018/03/17 21:15:13',
+  },
+]
+const handleClick = () => {
+  console.log('click')
+}
 </script>
 <template>
-    车辆信息查询及变更服务
+    <div class="OBU-query content-warpper">
+        <el-form :inline="true" :model="OBUList" class="demo-form-inline">
+            
+            <el-form-item label="车牌号码">
+                <el-input v-model="OBUList.carNo" placeholder="车牌号码" />
+            </el-form-item>
+            <el-form-item label="车牌颜色">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="Select">
+                    <el-option
+                    v-for="item in colors"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="所有人证件类型">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="所有人证件号">
+                <el-input v-model="OBUList.OBUno" placeholder="所有人证件号" />
+            </el-form-item>
+            <el-form-item label="所有人名称">
+                <el-input v-model="OBUList.OBUno" placeholder="所有人名称" />
+            </el-form-item>
+            <el-form-item label="客户编号">
+                <el-input v-model="OBUList.OBUno" placeholder="客户编号" />
+            </el-form-item>
+            <el-form-item label="每条页数">
+                <el-select v-model="OBUList.carColors" class="m-2" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item><el-button type="primary" icon="Search">查询</el-button></el-form-item>
+            <el-form-item><el-button type="warning" plain icon="Refresh">重置</el-button></el-form-item>
+        </el-form>
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column type="index" label="序号" width="64" fixed align="center" />
+            <el-table-column prop="carId" label="车牌编号" width="120" align="center" />
+            <el-table-column prop="customerNo" label="客户编号" width="180" align="center" />
+            <el-table-column prop="customerName" label="客户名称" width="100" align="center" />
+            <el-table-column prop="certificatesType" label="客户证件类型" width="180" align="center" />
+            <el-table-column prop="identificationNo" label="客户证件号码" width="180" align="center" />
+            <el-table-column prop="carNo" label="车牌号码" width="100" align="center" />
+            <el-table-column prop="carColor" label="车牌颜色" width="120" align="center" />
+            <el-table-column prop="carStyle" label="车型" width="100" align="center" />
+            <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
+            <el-table-column fixed="right" label="操作" width="160" align="center" >
+            <template #default>
+                <el-button type="success" size="small" @click="handleClick">修改</el-button>
+                <el-button type="primary" size="small">详情</el-button>
+            </template>
+            </el-table-column>
+        </el-table>
+    </div>
 </template>
 <style scoped>
-    
+  .el-form--inline .el-form-item{
+    margin-right: 16px;
+}  
 </style>