diff --git a/code/web/task_schedule/src/views/data/bi/DepartmentAttachingRateView.vue b/code/web/task_schedule/src/views/data/bi/DepartmentAttachingRateView.vue
index a43af32..0179799 100644
--- a/code/web/task_schedule/src/views/data/bi/DepartmentAttachingRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/DepartmentAttachingRateView.vue
@@ -2,30 +2,226 @@
  * @Author: Kane
  * @Date: 2023-10-17 14:53:17
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/views/data/bi/DepartmentArchievementView.vue
+ * @FilePath: /task_schedule/src/views/data/bi/DepartmentAttachingRateView.vue
  * @Description:
  *
  * Copyright (c) ${2023} by Kane, All Rights Reserved.
 -->
 
 <template>
-    <div class="wrapper" />
+    <div class="wrapper">
+        <el-row :gutter="10">
+            <el-col span="24">
+                <el-button
+                    type="warning"
+                    icon="upload"
+                    @click="showUploadFileDialog"
+                >
+                    上传
+                </el-button>
+                <el-button
+                    type="primary"
+                    icon="refresh"
+                    @click="refresh"
+                >
+                    刷新
+                </el-button>
+            </el-col>
+        </el-row>
+        <el-table
+            width="100%"
+            stripe
+            border
+            :data="tableData"
+        >
+            <el-table-column
+                label="部门"
+                align="center"
+            >
+                <template #default="department">
+                    <span>{{ department.row.departmentName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="车险保费(万)"
+                align="center"
+            >
+                <template #default="department">
+                    <span>{{ department.row.motoPremium.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="非车险保费(万)"
+                align="center"
+            >
+                <template #default="department">
+                    <span>{{ department.row.nomotoPremium.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="渗透率"
+                align="center"
+            >
+                <template #default="department">
+                    <span>{{ department.row.attachingRate.toFixed(2) + "%" }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination_wrapper">
+            <el-pagination
+                v-model="ui.tableCurrentPageIndex"
+                class="pull_left"
+                size="small"
+                background
+                :page-size="ui.tablePageSize"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="0"
+                @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange"
+            />
+        </div>
+        <div
+            class="upload-dialog-wrapper"
+        >
+            <el-dialog
+                v-model="ui.showUploadDialog"
+                title="上传报表"
+                width="600px"
+                :close-on-click-modal="false"
+                :close-on-press-escape="false"
+                :show-close="true"
+            >
+                <BiDataUploadView :report-type="2" />
+            </el-dialog>
+        </div>
+    </div>
 </template>
 <script lang="ts">
-import { reactive } from "vue";
+import { reactive, computed, onBeforeMount } from "vue";
+import {
+    type BIDepartmentAttachingRateRecord,
+    type QueryBIDepartmentAttachingRateResponse,
+    type QueryBIDepartmentAttachingRateDataHandler,
+    queryDepartmentAttachingRateData
+} from "@/utils/BIReport.js";
+import { ElMessage, ElMessageBox } from "element-plus";
+import BiDataUploadView from "@/views/data/bi/BiDataUploadView.vue";
+
+interface UI
+{
+    showUI: boolean,
+    showUploadDialog: boolean,
+    tablePageSize: number,
+    tableCurrentPageIndex: number,
+    BIDepartmentAttachingRateData: BIDepartmentAttachingRateRecord[],
+}
 
 export default {
     name: "DepartmentAttachingRateView",
+    components: { BiDataUploadView, },
     setup()
     {
-        const ui = reactive({
+        const ui: UI = reactive({
             showUI: true,
+            showUploadDialog: false,
+            tablePageSize: 10,
+            tableCurrentPageIndex: 1,
+            BIDepartmentAttachingRateData: [],
         });
+
+        const tableData = computed((): BIDepartmentAttachingRateRecord[] =>
+        {
+            const tableCount = ui.BIDepartmentAttachingRateData.length;
+            const startIndex = ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) > tableCount ? tableCount - ui.tablePageSize : ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 );
+            const endIndex = ui.tablePageSize * ui.tableCurrentPageIndex;
+
+            return ui.BIDepartmentAttachingRateData.slice( startIndex, endIndex );
+        });
+
+        const onCurrentPageIndexChange = ( pageIndex: number ): void =>
+        {
+            ui.tableCurrentPageIndex = pageIndex;
+        };
+
+        const onTablePageSizeChange = ( pageSize: number ): void =>
+        {
+            ui.tablePageSize = pageSize;
+        };
+
+        const handler: QueryBIDepartmentAttachingRateDataHandler = ( response: QueryBIDepartmentAttachingRateResponse, error: any ): void =>
+        {
+            // 判断一下标志位
+            if ( response.success )
+            {
+                // 请求成功
+                ElMessage({
+                    message: "更新成功",
+                    type: "success",
+                });
+
+                ui.BIDepartmentAttachingRateData = response.records;
+            }
+            else
+            {
+                // 请求失败
+                ElMessageBox.confirm(
+                    response.message,
+                    "请求机构渗透率数据失败",
+                    {
+                        confirmButtonText: "确定",
+                        type: "warning",
+                        center: true,
+                    }
+                )
+                    .then((): void => {})
+                    .catch((): void => {});
+
+                if ( error !== null )
+                {
+                    console.log( "请求机构渗透率数据失败", error );
+                }
+            }
+        };
+
+        const refresh = (): void =>
+        {
+            queryDepartmentAttachingRateData( handler );
+        };
+
+        const showUploadFileDialog = (): void =>
+        {
+            ui.showUploadDialog = true;
+        };
+
+        onBeforeMount((): void =>
+        {
+            refresh();
+        });
+
+        return {
+            ui,
+            tableData,
+            onCurrentPageIndexChange,
+            onTablePageSizeChange,
+            showUploadFileDialog,
+            handler,
+            refresh,
+        };
     },
 };
 </script>
 <style lang="scss" scoped>
 .wrapper {
-    margin: 10px;
+    margin: 0px 10px 10px 10px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+}
+
+.pagination_wrapper {
+    display: flex;
+    justify-content: flex-end;
 }
 </style>
diff --git a/code/web/task_schedule/src/views/data/bi/DepartmentRenewalRateView.vue b/code/web/task_schedule/src/views/data/bi/DepartmentRenewalRateView.vue
index 1301645..c33663e 100644
--- a/code/web/task_schedule/src/views/data/bi/DepartmentRenewalRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/DepartmentRenewalRateView.vue
@@ -2,29 +2,219 @@
  * @Author: Kane
  * @Date: 2023-11-10 17:48:01
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/views/data/bi/DepartmentAttachingRateView copy.vue
+ * @FilePath: /task_schedule/src/views/data/bi/DepartmentRenewalRateView.vue
  * @Description:
  *
  * Copyright (c) ${2023} by Kane, All Rights Reserved.
 -->
 <template>
-    <div class="wrapper" />
+    <div class="wrapper">
+        <el-row :gutter="10">
+            <el-col :span="24">
+                <el-button
+                    type="warning"
+                    icon="upload"
+                >
+                    上传
+                </el-button>
+                <el-button
+                    type="primary"
+                    icon="refresh"
+                    @click="refresh"
+                >
+                    刷新
+                </el-button>
+            </el-col>
+        </el-row>
+        <el-table
+            :data="tableData"
+            style="width:100%;"
+            border
+            stripe
+        >
+            <el-table-column
+                label="部门"
+                align="center"
+                width="250px"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.责任部门 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="机构目标值"
+                align="center"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.机构目标值.toFixed(2) + "%" }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="到期数全月"
+                align="center"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.到期数全月 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="序时到期数占比"
+                align="center"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.序时到期数占比.toFixed(2) + "%" }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="个车续保率序时"
+                align="center"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.个车续保率序时.toFixed(2) + "%" }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="个车续保率全月"
+                align="center"
+            >
+                <template #default="dept">
+                    <span>{{ dept.row.个车续保率全月.toFixed(2) + "%" }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <el-pagination
+                v-model="ui.tableCurrentPageIndex"
+                class="pull_left"
+                size="small"
+                background
+                :page-size="ui.tablePageSize"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="0"
+                @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange"
+            />
+        </div>
+    </div>
 </template>
 <script lang="ts">
-import { reactive } from "vue";
+import { reactive, computed, onBeforeMount } from "vue";
+import {
+    type BIDepartmentRenewalRateRecord,
+    type QueryBIDepartmentRenewalRateResponse,
+    type QueryBIDepartmentRenewalRateDataHandler,
+    queryDepartmentRenewalRateData
+} from "@/utils/BIReport.js";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+interface UI
+{
+    showUI: boolean;
+    showUploadFileDialog: boolean;
+    tablePageSize: number;
+    tableCurrentPageIndex: number;
+    BIDepartmentRenewalRateData: BIDepartmentRenewalRateRecord[];
+}
 
 export default {
     name: "DepartmentRenewalRateView",
     setup()
     {
-        const ui = reactive({
+        const ui: UI = reactive({
             showUI: true,
+            showUploadFileDialog: false,
+            tablePageSize: 10,
+            tableCurrentPageIndex: 1,
+            BIDepartmentRenewalRateData: [],
         });
+
+        // on
+        const onCurrentPageIndexChange = ( pageIndex: number ): void =>
+        {
+            ui.tableCurrentPageIndex = pageIndex;
+        };
+
+        const onTablePageSizeChange = ( pageSize: number ): void =>
+        {
+            ui.tablePageSize = pageSize;
+        };
+
+        // 计算变量
+        const tableData = computed((): BIDepartmentRenewalRateRecord[] =>
+        {
+            const tableCount = ui.BIDepartmentRenewalRateData.length;
+            const startIndex = ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) < tableCount ? ui.tablePageSize * ( ui.tableCurrentPageIndex - 1 ) : ( tableCount - ui.tablePageSize );
+            const endIndex = ui.tablePageSize * ui.tableCurrentPageIndex < tableCount ? ui.tablePageSize * ui.tableCurrentPageIndex : tableCount;
+
+            return ui.BIDepartmentRenewalRateData.slice( startIndex, endIndex );
+        });
+
+        // handler
+        const handler: QueryBIDepartmentRenewalRateDataHandler = ( response: QueryBIDepartmentRenewalRateResponse, error: any ): void =>
+        {
+            if ( response.success )
+            {
+                ui.BIDepartmentRenewalRateData = response.records;
+
+                ElMessage({
+                    message: "更新完成",
+                    type: "success",
+                });
+            }
+            else
+            {
+                ElMessageBox.confirm(
+                    response.message,
+                    "请求BI机构续保率数据失败",
+                    {
+                        confirmButtonText: "确定",
+                        type: "warning",
+                        center: true,
+                    }
+                )
+                    .then((): void => {})
+                    .catch((): void => {});
+
+                if ( error !== null )
+                {
+                    console.log( error );
+                }
+            }
+        };
+
+        onBeforeMount((): void =>
+        {
+            refresh();
+        });
+
+        const refresh = (): void =>
+        {
+            queryDepartmentRenewalRateData( handler );
+        };
+
+        return {
+            ui,
+            onCurrentPageIndexChange,
+            onTablePageSizeChange,
+            // 计算变量
+            tableData,
+            refresh,
+        };
     },
 };
 </script>
 <style lang="scss" scoped>
 .wrapper {
-    margin: 10px;
+    margin: 0px 10px 10px 10px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+}
+
+.pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
 }
 </style>
diff --git a/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue b/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
index c0904ca..5702854 100644
--- a/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
@@ -239,7 +239,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wrapper {
-    margin: 10px;
+    margin: 0px 10px 10px 10px;
 
     >*+* {
         margin-top: 10px;
diff --git a/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue b/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
index 9085941..34a9774 100644
--- a/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
@@ -227,7 +227,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wrapper {
-    margin: 10px;
+    margin: 0px 10px 10px 10px;
 
     >*+* {
         margin-top: 10px;