diff --git a/src/views/device/bench/deviceBench.vue b/src/views/device/bench/deviceBench.vue
index 9206576..8d74984 100644
--- a/src/views/device/bench/deviceBench.vue
+++ b/src/views/device/bench/deviceBench.vue
@@ -1,13 +1,397 @@
 <script lang="ts" setup name="DeviceBench">
-// 逻辑代码
+import { getCurrentInstance, ref } from 'vue'
+import type { Ref } from 'vue'
+import Linechart from '@/components/Echart/LineChart.vue'
+import type { lineDataI } from '@/components/Echart/echart-interface'
+
+// 每个展示块高度
+const blockHeight = ref(300)
+const blockWidth = ref(400)
+const { proxy } = getCurrentInstance() as any
+// 设备台账检定提醒表格数据
+const standingBookTableData = ref([
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+])
+// 设备台账检定提醒表头
+const standingBookTableHead = [
+  { text: '设备名称', value: 'equipmentName' },
+  { text: '负责人', value: 'usePersonName', width: '120' },
+  { text: '上次检定时间', value: 'lastTime', width: '180' },
+]
+// 标准装置到期提醒表格数据
+const standardTableData = ref([
+  {
+    equipmentName: '设备1',
+    usePersonName: '负责人1',
+    lastTime: '2022-12-21 12:10:30',
+  },
+])
+// 标准装置到期提醒表头
+const standardTableHead = [
+  { text: '设备名称', value: 'equipmentName' },
+  { text: '负责人', value: 'usePersonName', width: '120' },
+  { text: '上次检定时间', value: 'lastTime', width: '180' },
+]
+// 设备检定趋势x轴
+const equipmentTestXData: Ref<string[]> = ref([])
+// 设备检定趋势数据
+const equipmentTestData: Ref<lineDataI[]> = ref([])
+// 设备检定趋势y轴最大值
+const equipmentTestYDataMax = ref()
+
+// 装置检定趋势x轴
+const standardTestXData: Ref<string[]> = ref([])
+// 装置检定趋势数据
+const standardTestData: Ref<lineDataI[]> = ref([])
+// 装置检定趋势y轴最大值
+const standardTestYDataMax = ref()
+
+// 我的设备
+const myEquipment = ref({
+  stay: 10, // 待检测设备数量
+  not: 10, // 超期未检测设备数量
+})
+// 本月统计数据
+const theMonthTotalData = ref({
+  testValue: 10, // 测量设备
+  testIn: 10, // 在用
+  testLeave: 10, // 闲置设备
+  testSeal: 10, // 封存
+  standardValue: 20, // 标准装置
+  standardIn: 20, // 在用
+  standardStop: 20, // 暂停
+  standardAnnul: 20, // 撤销
+  receive: 15, // 领用
+  borrow: 15, // 借用
+})
+
+function calcBlockSize() {
+  // 计算工作台区域高度 - 顶部-面包屑-边距
+  const bodyHeight = document.body.clientHeight - 60 - 50 - 20
+  blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
+  blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
+  console.log(blockHeight.value, blockWidth.value - 20)
+}
+window.addEventListener('resize', () => {
+  calcBlockSize()
+})
+
+onMounted(() => {
+  calcBlockSize()
+  setTimeout(() => {
+    equipmentTestXData.value = ['2022-08', '2022-12']
+    equipmentTestData.value = [{ name: '到期设备', data: [1, 11] }]
+    standardTestXData.value = ['2022-01', '2022-12', '2023-09']
+    standardTestData.value = [{ name: '标准装置', data: [1, 10, 2] }]
+  })
+})
 </script>
 
 <template>
   <app-container>
-    工作台
+    <div class="device-bench">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <bench-col
+            icon="icon-book"
+            title="设备台账检定提醒"
+            path-url="/standingBook/adjustDevice"
+            :style="{ height: blockHeight }"
+            :height="blockHeight"
+          >
+            <el-table :data="standingBookTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+              <el-table-column
+                v-for="item in standingBookTableHead"
+                :key="item.value"
+                :prop="item.value"
+                align="center"
+                :label="item.text"
+                :width="item.width"
+              />
+            </el-table>
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            icon="icon-line"
+            title="设备检定趋势"
+            :height="blockHeight"
+          >
+            <line-chart
+              :x-axis-data="equipmentTestXData"
+              :width="`${blockWidth - 20}px`"
+              :data="equipmentTestData"
+              unit="件"
+            />
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            icon="icon-book"
+            title="本月统计数据"
+            :height="blockHeight"
+          >
+            <div class="the-month-total-Data">
+              <div>
+                <div class="title">
+                  <span>测量设备</span>
+                  <span style="margin-right: 6px;">{{ theMonthTotalData.testValue }}</span>
+                </div>
+                <div class="content">
+                  <el-row :gutter="10">
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>在用设备</span>
+                        <span style="margin-top: 6px;">
+                          {{ theMonthTotalData.testIn }}
+                        </span>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>闲置设备</span>
+                        <span style="margin-top: 6px;">{{ theMonthTotalData.testLeave }}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>封存设备</span>
+                        <span style="margin-top: 6px;">{{ theMonthTotalData.testSeal }}</span>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div>
+                <div class="title">
+                  <span>标准装置</span>
+                  <span style="margin-right: 6px;">{{ theMonthTotalData.standardValue }}</span>
+                </div>
+                <div class="content">
+                  <el-row :gutter="10">
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>在用装置</span>
+                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardIn }}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>暂停装置</span>
+                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardStop }}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="item">
+                        <span>撤销装置</span>
+                        <span style="margin-top: 6px;">{{ theMonthTotalData.standardAnnul }}</span>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+
+              <div class="content">
+                <el-row :gutter="20">
+                  <el-col :span="12">
+                    <div class="item">
+                      <span>本月设备领用</span>
+                      <span style="margin-top: 6px;">{{ theMonthTotalData.receive }}</span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="item">
+                      <span>本月设备借用</span>
+                      <span style="margin-top: 6px;">{{ theMonthTotalData.borrow }}</span>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </bench-col>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="device-bench" style="margin-top: 10px;">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <bench-col
+            icon="icon-book"
+            title="标准装置到期提醒"
+            path-url="/standard/expirationRemind"
+            :style="{ height: blockHeight }"
+            :height="blockHeight"
+          >
+            <el-table :data="standardTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
+              <el-table-column
+                v-for="item in standardTableHead"
+                :key="item.value"
+                :prop="item.value"
+                align="center"
+                :label="item.text"
+                :width="item.width"
+              />
+            </el-table>
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            icon="icon-line"
+            title="设备检定趋势"
+            :height="blockHeight"
+          >
+            <line-chart
+              :x-axis-data="standardTestXData"
+              :width="`${blockWidth - 20}px`"
+              :data="standardTestData"
+              unit="件"
+            />
+          </bench-col>
+        </el-col>
+        <el-col :span="8">
+          <bench-col
+            icon="icon-book"
+            title="我的设备"
+            :height="blockHeight"
+          >
+            <div class="my-equipment">
+              <div class="item">
+                <span>待检定设备数量</span>
+                <span style="margin-top: 16px;">{{ myEquipment.stay }}</span>
+              </div>
+              <div class="item">
+                <span>超期未检定设备数量</span>
+                <span style="margin-top: 16px;">{{ myEquipment.not }}</span>
+              </div>
+            </div>
+          </bench-col>
+        </el-col>
+      </el-row>
+    </div>
   </app-container>
 </template>
 
 <style lang="scss" scoped>
-// 样式
+.device-bench {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .the-month-total-Data {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 0 20px;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-weight: 500;
+      margin-bottom: 3px;
+    }
+
+    .content {
+      width: 100%;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-right: 10px;
+        padding: 3px 0;
+        justify-content: center;
+        align-items: center;
+        background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
+        border-radius: 8px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .my-equipment {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 20px;
+
+    .item {
+      height: 40%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-image: linear-gradient(to right, #caddff, #3d7eff);
+      border-radius: 16px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.bench-table {
+  .el-table__header-wrapper {
+    border-radius: 8px;
+  }
+}
+
+.bench-table-header {
+  th {
+    font-weight: normal;
+    font-size: 14px;
+  }
+}
+
+.bench-table-row {
+  border-radius: 8px;
+}
 </style>