diff --git a/jero-web/src/views/toDoCenter/OTAToDoTask/index.vue b/jero-web/src/views/toDoCenter/OTAToDoTask/index.vue
new file mode 100644
index 000000000..15e2d7e23
--- /dev/null
+++ b/jero-web/src/views/toDoCenter/OTAToDoTask/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('softwareversion')">
+                <span>{{$t('softwareversion')}}</span>
+              </div>
+              <a-select :placeholder="$t('PleaseSelect')+$t('softwareplatform')"
+                        class="box-input"
+                        :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                        allowClear
+                        showSearch
+                        optionFilterProp="label"
+                        :autoClearSearchValue="false"
+                        v-model="queryParam.releaseName">
+                <a-select-option v-for="(item, key) in softwareversionList"
+                                 :label='item'
+                                 :key="key"
+                                 :value="item">
+                  <span style="display: inline-block;width: 100%" :title=" item">
+                    {{ item }}
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('releaseType')">
+                <span>{{$t('releaseType')}}</span>
+              </div>
+              <a-select :placeholder="$t('PleaseSelect')+$t('releaseType')"
+                        class="box-input"
+                        :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                        allowClear
+                        showSearch
+                        optionFilterProp="label"
+                        v-model="queryParam.releaseType">
+                <a-select-option v-for="(item, key) in releaseTypeList"
+                                 :label='item'
+                                 :key="key"
+                                 :value="item">
+                  <span style="display: inline-block;width: 100%" :title=" item">
+                    {{ item }}
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('vehicleType')">
+                <span>{{$t('vehicleType')}}</span>
+              </div>
+              <a-select :placeholder="$t('PleaseSelect')+$t('vehicleType')"
+                        class="box-input"
+                        :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                        allowClear
+                        showSearch
+                        optionFilterProp="label"
+                        :autoClearSearchValue="false"
+                        v-model="queryParam.vehicle">
+                <a-select-option v-for="(item, key) in vehicleTypeList"
+                                 :label='item'
+                                 :key="key"
+                                 :value="item">
+                  <span style="display: inline-block;width: 100%" :title=" item">
+                    {{ item }}
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+          </a-col>
+
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" @click="searchReset">{{$t('reset')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+               </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :components="drag(columns,'columns')"
+        :loading="loading"
+        :pagination="false"
+        :scroll="{x: '100%',y:'calc(100vh - 140px)'}"
+        rowKey="id"
+        :data-source="dataSource"
+        :columns="columns"
+      >
+        <span slot="action" slot-scope="text,record">
+         <a @click="processingClick(record)">{{$t('Processing')}}</a>
+        </span>
+      </a-table>
+      <div class="page" v-if="dataSource.length > 0">
+        <a-pagination
+          :show-total="total => $t('total')+` ${total} ` +$t('strip')"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="pageSize"
+          :total="total"
+          :current="pageNo"
+          @change="pageOnChange"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
+
+  export default {
+    name: 'index',
+    components: {},
+    mixins:[ResizeHeader, ResizeColumnProvide],
+    data() {
+      return {
+        queryParam: {},
+        dataSource: [],
+        vehicleTypeList:[],
+        softwareversionList:[],
+        releaseTypeList:['BUILD','MARKETING','POC'],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        loading: false,
+        url:{
+          list:'',
+        },
+        columns: [
+          {
+            title: this.$t('softwareversion'),
+            align: 'left',
+            dataIndex: 'releaseName',
+            ellipsis: true,
+            width: 170
+          },
+          {
+            title: this.$t('releaseType'),
+            align: 'left',
+            dataIndex: 'releaseType',
+            ellipsis: true,
+            width: 170
+          },
+          {
+            title: this.$t('vehicleType'),
+            align: 'left',
+            dataIndex: 'vehicle',
+            ellipsis: true,
+            width: 600,
+          },
+          {
+            title: this.$t('softwarereleasetime'),
+            align: 'left',
+            dataIndex: 'releaseDate',
+            ellipsis: true,
+            width: 170,
+          },
+          {
+            title: this.$t('operation'),
+            align: 'left',
+            ellipsis: true,
+            width: 170,
+            scopedSlots: { customRender: 'action' }
+          }
+        ]
+      }
+    },
+    mounted() {
+      this.getList()
+      this.getSelectData()
+    },
+    methods: {
+      getSelectData(){
+        getAction('/ota/otaManageApplyEO/getPullDownList', {}).then((res) => {
+          if (res.success) {
+            this.softwareversionList = res.result.plannedBpLaunchBatchList
+            this.vehicleTypeList = res.result.carSet
+          } else {
+          }
+        })
+      },
+      searchQuery() {
+        this.pageNo = 1
+        this.getList()
+      },
+      searchReset() {
+        this.pageNo = 1
+        this.queryParam = {}
+        this.getList()
+      },
+      pageOnChange(page) {
+        this.pageNo = page
+        this.getList()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.pageSize = pageSize
+        this.getList()
+      },
+      getList() {
+        let queryParam = JSON.parse(JSON.stringify(this.queryParam))
+        Object.keys(queryParam).forEach(val => {
+          if (queryParam[val] instanceof Array) {
+            queryParam[val] = queryParam[val].join(',')
+          }
+        })
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+          ...queryParam
+        }
+        this.loading = true
+        getAction('/ota/otaManageApplyEO/getOtaTodoList', query).then((res) => {
+          if (res.success) {
+            if (res.result.current > 1 && res.result.records.length == 0) {
+              this.pageNo = 1
+              this.getList()
+              return
+            }
+            this.dataSource = res.result.records || []
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      processingClick(row){
+        let newUrl = this.$router.resolve({
+          path:'/components/detil',
+          query:{
+            vehicleTypeCode:row.vehicle,
+            plannedBpLaunchBatch:row.releaseName,
+            releaseDate:row.releaseDate
+          },
+        })
+        window.open(newUrl.href, '_blank')
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import'~@assets/less/common.less';
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 110px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .text-operation {
+    margin-right: 8px;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+
+  ::v-deep .ant-table-row:first-child {
+    background: #fff !important;
+    opacity: 0.9;
+  }
+
+  ::v-deep .ant-table-body {
+    background: transparent !important;
+  }
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  ::v-deep .ant-table-placeholder{
+    margin-top: 8px !important;
+  }
+</style>
\ No newline at end of file