From 6a788cb2152becf6fdff8c693e2d9add5c5899fb Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期五, 16 一月 2026 18:10:35 +0800
Subject: [PATCH] feat: 添加设备列表、工作内容管理和事故案例功能模块

---
 screen/src/main.js                                 |   10 
 screen/src/view/projectList/index.vue              |  348 ++---
 screen/src/view/workList/detail.vue                |   79 +
 screen/src/view/workList/index.vue                 |  533 +++++++++
 screen/src/assets/img/home/Shape@2x99.png          |    0 
 screen/src/view/accidentCase/detail.vue            |  100 +
 screen/src/components/customPreview.vue            |   44 
 screen/src/view/hiddenDanger/index.vue             |  669 +++++++++++
 screen/src/assets/img/home/89Combined Shape@2x.png |    0 
 screen/src/components/customTable.vue              |   78 +
 screen/src/router/index.js                         |   42 
 screen/src/view/equipmentList/index.vue            |  490 ++++++++
 /dev/null                                          |  542 ---------
 screen/src/assets/img/home/Group@2x.png            |    0 
 screen/src/assets/img/home/77Combined Shape@2x.png |    0 
 screen/src/App.vue                                 |    4 
 screen/src/components/customPagination.vue         |  130 ++
 screen/src/components/customDialog.vue             |   61 +
 screen/src/view/home/index.vue                     |   46 
 screen/src/view/accidentCase/index.vue             |  351 +++++
 screen/src/assets/img/home/Rectangle 4@2x.png      |    0 
 21 files changed, 2,797 insertions(+), 730 deletions(-)

diff --git a/screen/src/App.vue b/screen/src/App.vue
index 8d7e3f8..81c2155 100644
--- a/screen/src/App.vue
+++ b/screen/src/App.vue
@@ -27,10 +27,6 @@
       this.$router.replace('/home');
       // this.$router.replace('/');
       return
-    } else {
-      this.$router.replace({
-        path: this.$route.path,
-      });
     }
   },
 }
diff --git a/screen/src/assets/img/home/77Combined Shape@2x.png b/screen/src/assets/img/home/77Combined Shape@2x.png
new file mode 100644
index 0000000..6c805d1
--- /dev/null
+++ b/screen/src/assets/img/home/77Combined Shape@2x.png
Binary files differ
diff --git a/screen/src/assets/img/home/89Combined Shape@2x.png b/screen/src/assets/img/home/89Combined Shape@2x.png
new file mode 100644
index 0000000..882fbff
--- /dev/null
+++ b/screen/src/assets/img/home/89Combined Shape@2x.png
Binary files differ
diff --git a/screen/src/assets/img/home/Group@2x.png b/screen/src/assets/img/home/Group@2x.png
new file mode 100644
index 0000000..e04dd9e
--- /dev/null
+++ b/screen/src/assets/img/home/Group@2x.png
Binary files differ
diff --git a/screen/src/assets/img/home/Rectangle 4@2x.png b/screen/src/assets/img/home/Rectangle 4@2x.png
new file mode 100644
index 0000000..fb18537
--- /dev/null
+++ b/screen/src/assets/img/home/Rectangle 4@2x.png
Binary files differ
diff --git a/screen/src/assets/img/home/Shape@2x99.png b/screen/src/assets/img/home/Shape@2x99.png
new file mode 100644
index 0000000..5e521c2
--- /dev/null
+++ b/screen/src/assets/img/home/Shape@2x99.png
Binary files differ
diff --git a/screen/src/components/column.js b/screen/src/components/column.js
deleted file mode 100644
index 50afde3..0000000
--- a/screen/src/components/column.js
+++ /dev/null
@@ -1,156 +0,0 @@
-export const columns1 = [
-    {
-        prop: 'appealDescription',
-        label: '诉求描述',
-    },
-    {
-        prop: 'contactPerson',
-        label: '联系人',
-    },
-    {
-        prop: 'contactPhone',
-        label: '联系电话',
-    },
-    {
-        prop: 'createTime',
-        label: '提交时间',
-        width: 180
-    },
-    {
-        prop: 'status',
-        label: '状态',
-    },
-    {
-        prop: 'processRemark',
-        label: '处理备注',
-    },
-    {
-        prop: 'processPersonName',
-        label: '处理人',
-    },
-    {
-        prop: 'processTime',
-        label: '处理时间',
-        width: 180
-    }
-]
-
-// 社区网格总人数表头
-export const columns2 = [
-    { prop: 'gridInfo', label: '网格' },
-    { prop: 'communityName', label: '小区' },
-    { prop: 'buildingInfo', label: '楼栋' },
-    { prop: 'unitNumber', label: '单元号' },
-    { prop: 'houseNumber', label: '门牌号' },
-    { prop: 'userName', label: '姓名' },
-    { prop: 'idCard', label: '身份证号码' },
-    { prop: 'age', label: '年龄' },
-    { prop: 'registeredResidence', label: '户籍地' },
-    { prop: 'contactNumber', label: '联系电话' },
-    { prop: 'typeName', label: '人员类别' }
-]
-
-// 重点人员合计表头
-export const columns3 = [
-    { prop: 'typeName', label: '人员类别' },
-    { prop: 'gridInfo', label: '网格' },
-    { prop: 'communityName', label: '小区' },
-    { prop: 'buildingInfo', label: '楼栋' },
-    { prop: 'unitNumber', label: '单元号' },
-    { prop: 'houseNumber', label: '门牌号' },
-    { prop: 'userName', label: '姓名' },
-    { prop: 'idCard', label: '身份证号' },
-    { prop: 'age', label: '年龄' },
-    { prop: 'contactNumber', label: '联系电话' }
-]
-
-// 社区社会组织表头
-export const columns4 = [
-    { prop: 'organizationName', label: '组织名称' },
-    { prop: 'businessScope', label: '业务范围' },
-    { prop: 'address', label: '地址' },
-    { prop: 'organizationPerson', label: '负责人' },
-    { prop: 'contactNumber', label: '联系电话' }
-]
-
-// 社区志愿者表头
-export const columns5 = [
-    { prop: 'userName', label: '姓名' },
-    { prop: 'userSex', label: '性别' },
-    { prop: 'birthDate', label: '出生年月' },
-    { prop: 'serviceArea', label: '服务区域' },
-    { prop: 'registerDate', label: '注册日期' },
-    { prop: 'totalServiceDuration', label: '总服务时长' },
-    { prop: 'joinTeamDate', label: '加入队伍时间' }
-]
-
-// 社会工作者表头
-export const columns6 = [
-    { prop: 'userName', label: '姓名' },
-    { prop: 'userSex', label: '性别' },
-    { prop: 'birthDate', label: '出生年月' },
-    { prop: 'politicalStatus', label: '政治面貌' },
-    { prop: 'contactNumber', label: '联系电话' },
-    { prop: 'employerPosition', label: '工作单位及职务' },
-    { prop: 'qualificationLevel', label: '职业资格' }
-]
-
-// 社区慈善资源表头
-export const columns7 = [
-    { prop: 'typeParentName', label: '资源类别' },
-    { prop: 'resourceNameDesc', label: '资源名称描述' },
-    { prop: 'resourceSource', label: '来源（捐赠方/提供方）' },
-    { prop: 'quantityScale', label: '数量/规模' },
-    { prop: 'resourceUnit', label: '单位' },
-    { prop: 'contactPerson', label: '联系人' },
-    { prop: 'contactNumber', label: '联系电话' }
-]
-
-// 助需表头
-export const columns8 = [
-    { prop: 'nickName', label: '发布人姓名' },
-    { prop: 'contactNumber', label: '联系电话' },
-    { prop: 'requirementDescription', label: '需求描述' },
-    { prop: 'updateTime', label: '记录修改时间', width: 180 },
-    { prop: 'status', label: '状态' },
-    { prop: 'processRemark', label: '处理备注' },
-    { prop: 'processPersonName', label: '处理人名称' },
-    { prop: 'processTime', label: '处理时间', width: 180 }
-]
-
-export const getColumns = (openType, tabType) => {
-    // 当 openType 为 2 时，根据 tabType 返回不同的列
-    if (openType === 2) {
-        switch (tabType) {
-            case 'report': // 上报
-                return columns1;
-            case 'helpNeeds': // 助需
-                return columns8;
-            case 'appealService': // 群众诉求服务
-                return columns1;
-            case 'snapShot': // 随心拍
-                return columns1;
-            default:
-                return columns1;
-        }
-    }
-
-    switch (openType) {
-        case 2: // 事件中心
-            return columns1;
-        case 3: // 社区网格总人数
-            return columns2;
-        case 4: // 重点人员合计
-            return columns3;
-        case 5: // 社区社会组织
-            return columns4;
-        case 6: // 社区志愿者
-            return columns5;
-        case 7: // 社会工作者
-            return columns6;
-        case 8: // 社区慈善资源
-            return columns7;
-        default:
-            return [];
-    }
-}
diff --git a/screen/src/components/customDialog.vue b/screen/src/components/customDialog.vue
new file mode 100644
index 0000000..c5419e3
--- /dev/null
+++ b/screen/src/components/customDialog.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" v-on="$listeners">
+      <slot></slot>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang="less">
+::v-deep .el-dialog {
+  background-image: url("../assets/img/home/Rectangle 4@2x.png");
+  background-size: 100% 100%;
+
+  .el-dialog__header {
+    background-image: url("../assets/img/home/Group@2x.png");
+    background-size: 100% 100%;
+    padding: 30px 0 26px 0;
+    text-align: center;
+    position: relative;
+
+    .el-dialog__title {
+      font-size: 24px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      font-family: "Source Han Sans CN Bold";
+    }
+
+    .el-dialog__headerbtn {
+      position: absolute;
+      right: 30px;
+      top: 30px;
+      background-image: url("../assets/img/home/Shape@2x99.png");
+      background-size: 100% 100%;
+      width: 20px;
+      height: 20px;
+
+      i {
+        display: none;
+      }
+    }
+  }
+
+  .el-dialog__body{
+    padding: 20px 30px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/components/customPagination.vue b/screen/src/components/customPagination.vue
new file mode 100644
index 0000000..7abce16
--- /dev/null
+++ b/screen/src/components/customPagination.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-pagination
+      v-bind="$attrs"
+      v-on="$listeners"
+      class="mt--16 txt-right"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang="less">
+::v-deep .el-pagination {
+  padding: 0;
+  display: flex;
+  justify-content: flex-end;
+
+  .el-pagination__total {
+    font-family: "Source Han Sans CN Regular";
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 30px;
+    margin-right: 6px;
+  }
+
+  .btn-prev,
+  .btn-next {
+    background: rgba(1, 123, 231, 0.2);
+    color: rgba(255, 255, 255, 0.5);
+    padding: 0;
+    width: 18px !important;
+    overflow: hidden;
+  }
+
+  .btn-prev {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .btn-next {
+    margin-left: 4px;
+    margin-right: 23px;
+  }
+
+  .el-pager {
+    display: flex;
+    gap: 4px;
+
+    .number {
+      font-family: "Source Han Sans CN Regular";
+      line-height: 30px;
+      height: 30px;
+      width: 30px;
+      text-align: center;
+      background: rgba(1, 123, 231, 0.2);
+      color: rgba(255, 255, 255, 0.5);
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    li {
+      padding: 0;
+      min-width: 0;
+      flex-shrink: 0;
+      background-color: transparent;
+    }
+
+    li:hover {
+      background: rgba(1, 123, 231, 0.5);
+    }
+
+    .active {
+      background: rgba(1, 123, 231, 0.5);
+    }
+
+    .btn-quickprev,
+    .btn-quicknext {
+      color: rgba(182, 217, 252, 1);
+    }
+  }
+
+  .el-pagination__sizes {
+    margin: 0;
+
+    .el-input {
+      margin: 0;
+
+      .el-input__inner {
+        color: #017be7;
+        font-size: 12px;
+        background-color: transparent;
+        border: 2px solid #051371;
+      }
+
+      .el-input__icon {
+        color: #017be7;
+      }
+    }
+  }
+
+  .el-pagination__jump {
+    margin-left: 0;
+    color: rgba(255, 255, 255, 0.5);
+    .el-pagination__editor.el-input {
+      margin: 0 6px;
+      .el-input__inner {
+        background-color: transparent;
+        border: 2px solid #051371;
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/components/customPreview.vue b/screen/src/components/customPreview.vue
new file mode 100644
index 0000000..cf79891
--- /dev/null
+++ b/screen/src/components/customPreview.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <CustomDialog title="图片预览" :visible.sync="visible" width="1420px" @close="$emit('close')">
+      <div style="height: 691px">
+        <div v-for="(item, index) in imgArr" :key="index">
+          <img :src="item" style="width: 100%; height: 100%" />
+        </div>
+      </div>
+    </CustomDialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    imgArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return { visible: false };
+  },
+  computed: {},
+  watch: {
+    show: {
+      handler(newVal, oldVal) {
+        this.visible = newVal;
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/screen/src/components/customTable.vue b/screen/src/components/customTable.vue
new file mode 100644
index 0000000..b5847b2
--- /dev/null
+++ b/screen/src/components/customTable.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-table
+      v-bind="$attrs"
+      v-on="$listeners"
+      :row-class-name="getClassName"
+      :header-row-class-name="'headClassName'"
+    >
+      <slot></slot>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    getClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "oneRow";
+      } else {
+        return "twoRow";
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+::v-deep .el-table {
+  background: transparent;
+
+  &::before {
+    background-color: transparent;
+  }
+
+  .el-table__body tr:hover > td {
+    background-color: rgba(17, 40, 255, 0.2) !important;
+  }
+  .headClassName {
+    .el-table__cell {
+      background-color: #012d94 !important;
+      font-family: "Source Han Sans CN Regular";
+      font-size: 12px;
+      color: #00ebfc;
+      font-weight: 400;
+      padding: 0;
+      border-bottom: none;
+    }
+    height: 30px !important;
+  }
+  .el-table__cell {
+    text-align: center;
+    line-height: 21px;
+    border-bottom: none;
+  }
+  .el-table__row {
+    font-size: 14px;
+    color: #ffffff;
+    font-family: "Source Han Sans CN Medium";
+  }
+  .oneRow {
+    background-color: #02004d !important;
+    height: 50px;
+  }
+  .twoRow {
+    background: rgba(14, 95, 255, .2) !important;
+    height: 50px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/components/service.js b/screen/src/components/service.js
deleted file mode 100644
index 4c145a4..0000000
--- a/screen/src/components/service.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import request from '@/utils/request'
-
-export const getAppealList = async (data) => {
-  return request(`/t-appeal-services/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
-
-// 助需列表接口
-export const getHelpNeedsList = async (data) => {
-  return request(`/t-help-needs/pageList`, {
-    method: 'post',
-    data
-  })
-}
-
-// 网格和重点人员列表接口
-export const getKeyGridUserList = async (data) => {
-  return request(`/t-large-key-grid-user/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
-
-// 社区社会组织列表接口
-export const getOrganizationList = async (data) => {
-  return request(`/t-large-organization/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
-
-// 社区志愿者列表接口
-export const getVolunteerList = async (data) => {
-  return request(`/t-large-volunteer/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
-
-// 社会工作者列表接口
-export const getSocialWorkerList = async (data) => {
-  return request(`/t-large-social-worker/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
-
-// 社区慈善资源列表接口
-export const getResourceList = async (data) => {
-  return request(`/t-large-resource/pageListLarge`, {
-    method: 'post',
-    data
-  })
-}
diff --git a/screen/src/components/tableModel.vue b/screen/src/components/tableModel.vue
deleted file mode 100644
index d157e1c..0000000
--- a/screen/src/components/tableModel.vue
+++ /dev/null
@@ -1,542 +0,0 @@
-<template>
-    <el-dialog width="1520px" :visible.sync="dialogVisible" @close="handleClose" :custom-class="openType == 2 ? 'table-model-dialog table-model-dialog-with-tab' : 'table-model-dialog'">
-        <img @click="handleClose" src="../assets/img/close.png"
-            class="w--24 h--24 cursor-pointer absolute top--30 right--30" alt="" />
-        <div class="title">{{ getTitle }}</div>
-        <div v-if="openType == 1" class="mt--66 pl--60">
-            <div class="flex a-center flex-w gap--40">
-                <div v-for="item in 10" :key="item" class="txt-center bgcolor1 h--250 pt--83" style="width: 440px;">
-                    <img class="w--100 h--64" src="../assets/img/video.png" style="margin: 0 auto;" alt="" />
-                    <div class="lh--24 fs--14 mt--60 color1">视频将在预览时播放</div>
-                </div>
-            </div>
-        </div>
-        <div v-else class="pl--85 pr--85">
-            <!-- Tab 切换，仅在 openType==2 时显示 -->
-            <div v-if="openType == 2" class="tab-container mt--30">
-                <div
-                    v-for="tab in tabs"
-                    :key="tab.value"
-                    :class="['tab-item', { 'tab-active': activeTab === tab.value }]"
-                    @click="handleTabChange(tab.value)">
-                    {{ tab.label }}
-                </div>
-            </div>
-            <el-table :data="tableData" class="mt--49" header-row-class-name="header-row-class">
-                <el-table-column type="index" width="55" label="序号"></el-table-column>
-                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
-                    :width="item.width"></el-table-column>
-            </el-table>
-            <el-pagination class="mt--64 txt-right" @size-change="handleSizeChange"
-                @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 50, 100, 200]"
-                :page-size="pageSize" layout="total, prev, pager, next, sizes" :total="total">
-            </el-pagination>
-        </div>
-    </el-dialog>
-</template>
-
-<script>
-import { getColumns } from './column.js'
-import { getAppealList, getKeyGridUserList, getOrganizationList, getVolunteerList, getSocialWorkerList, getResourceList, getHelpNeedsList } from './service.js'
-
-export default {
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-            default: false
-        },
-        title: {
-            type: String,
-            default: ''
-        },
-        openType: {
-            type: Number,
-            default: null // 1: 监控列表, 2: 事件中心, 3: 社区网格总人数, 4: 重点人员合计, 5: 社区社会组织, 6: 社区志愿者, 7: 社会工作者, 8: 社区慈善资源
-        },
-        extraParams: {
-            type: Object,
-            default: () => ({})
-        }
-    },
-    data() {
-        return {
-            dialogVisible: false,
-            columns: [],
-            tableData: [],
-            total: 0,
-            pageNum: 1,
-            pageSize: 10,
-            // Tab 相关
-            activeTab: 'report', // 默认选中"上报"
-            tabs: [
-                { label: '告警上报事件', value: 'report' },
-                { label: '助需', value: 'helpNeeds' },
-                { label: '群众诉求服务', value: 'appealService' },
-                { label: '随手拍', value: 'snapShot' }
-            ]
-        };
-    },
-    computed: {
-        getTitle() {
-            const titles = {
-                1: '监控列表',
-                2: '告警居民上报事件',
-                3: '社区网格总人数',
-                4: '重点人员合计',
-                5: '社区社会组织',
-                6: '社区志愿者',
-                7: '社会工作者',
-                8: '社区慈善资源'
-            };
-            return titles[this.openType] || '数据列表';
-        }
-    },
-    watch: {
-        visible: {
-            handler(newVal) {
-                if (newVal) {
-                    // 如果是 openType==2，重置 tab 为默认值
-                    if (this.openType === 2) {
-                        this.activeTab = 'report';
-                    }
-                    this.columns = getColumns(this.openType, this.activeTab);
-                    this.getTableData();
-                }
-                this.dialogVisible = newVal;
-            },
-            immediate: true
-        },
-        activeTab: {
-            handler() {
-                if (this.openType === 2) {
-                    this.columns = getColumns(this.openType, this.activeTab);
-                    this.pageNum = 1; // 切换 tab 时重置页码
-                    this.getTableData();
-                }
-            }
-        }
-    },
-    created() { },
-    mounted() { },
-    methods: {
-        getTableData() {
-            const requestParams = {
-                pageNum: this.pageNum,
-                pageSize: this.pageSize,
-                ...this.extraParams
-            };
-
-            switch (this.openType) {
-                case 1:
-                    // 监控列表 - 暂不处理
-                    break;
-                case 2:
-                    // 事件中心 - 根据 tab 类型调用不同接口
-                    this.getEventCenterData(requestParams);
-                    break;
-                case 3:
-                case 4:
-                    // 社区网格总人数 / 重点人员合计
-                    const userType = this.openType === 3 ? 2 : 1;
-                    requestParams.userType = userType;
-                    if (this.extraParams.typeId) {
-                        requestParams.typeId = this.extraParams.typeId;
-                    }
-                    getKeyGridUserList(requestParams).then(res => {
-                        this.tableData = res.records.map((item, index) => ({
-                            ...item,
-                            index: index + 1
-                        }));
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取网格重点人员数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 5:
-                    // 社区社会组织
-                    getOrganizationList(requestParams).then(res => {
-                        this.tableData = res.records.map((item, index) => ({
-                            ...item,
-                            index: index + 1
-                        }));
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取社会组织数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 6:
-                    // 社区志愿者
-                    getVolunteerList(requestParams).then(res => {
-                        this.tableData = res.records.map((item, index) => ({
-                            ...item,
-                            index: index + 1,
-                            userSex: item.userSex === 1 ? '男' : '女'
-                        }));
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取志愿者数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 7:
-                    // 社会工作者
-                    getSocialWorkerList(requestParams).then(res => {
-                        this.tableData = res.records.map((item, index) => ({
-                            ...item,
-                            index: index + 1,
-                            userSex: item.userSex === 1 ? '男' : '女'
-                        }));
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取社会工作者数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 8:
-                    // 社区慈善资源
-                    getResourceList(requestParams).then(res => {
-                        this.tableData = res.records.map((item, index) => ({
-                            ...item,
-                            index: index + 1
-                        }));
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取慈善资源数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                default:
-                    console.warn('未知的弹窗类型:', this.openType);
-                    this.tableData = [];
-                    this.total = 0;
-            }
-        },
-        handleClose() {
-            this.$emit('update:visible', false);
-        },
-        handleSizeChange(val) {
-            this.pageSize = val;
-            this.getTableData();
-        },
-        handleCurrentChange(val) {
-            this.pageNum = val;
-            this.getTableData();
-        },
-        // Tab 切换处理
-        handleTabChange(tabValue) {
-            this.activeTab = tabValue;
-        },
-        // 获取事件中心数据（根据 tab 类型）
-        getEventCenterData(requestParams) {
-            switch (this.activeTab) {
-                case 'report':
-                    // 上报 - 使用原接口，不传 appealType
-                    getAppealList(requestParams).then(res => {
-                        this.tableData = res.records.map(item => {
-                            item.status = item.status == 1 ? '待处理' : '已处理';
-                            return item;
-                        });
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取上报数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 'helpNeeds':
-                    // 助需
-                    getHelpNeedsList(requestParams).then(res => {
-                        this.tableData = res.records.map(item => {
-                            item.status = item.status == 1 ? '待处理' : '已处理';
-                            return item;
-                        });
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取助需数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 'appealService':
-                    // 群众诉求服务 - 传 appealType=1
-                    const appealServiceParams = { ...requestParams, appealType: 1 };
-                    getAppealList(appealServiceParams).then(res => {
-                        this.tableData = res.records.map(item => {
-                            item.status = item.status == 1 ? '待处理' : '已处理';
-                            return item;
-                        });
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取群众诉求服务数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                case 'snapShot':
-                    // 随心拍 - 传 appealType=2
-                    const snapShotParams = { ...requestParams, appealType: 2 };
-                    getAppealList(snapShotParams).then(res => {
-                        this.tableData = res.records.map(item => {
-                            item.status = item.status == 1 ? '待处理' : '已处理';
-                            return item;
-                        });
-                        this.total = res.total;
-                    }).catch(error => {
-                        console.error('获取随心拍数据失败:', error);
-                        this.tableData = [];
-                        this.total = 0;
-                    });
-                    break;
-                default:
-                    this.tableData = [];
-                    this.total = 0;
-            }
-        }
-    },
-};
-</script>
-<style scoped lang="less">
-.color1 {
-    font-family: 'Alibaba-PuHuiTi-R';
-    color: #E6F7FF;
-}
-
-.bgcolor1 {
-    background: linear-gradient(180deg, rgba(88, 184, 252, .7) 0%, rgba(114, 215, 246, 0.1) 100%);
-}
-
-// Tab 样式
-.tab-container {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-}
-
-.tab-item {
-    padding: 10px 30px;
-    font-size: 16px;
-    color: #B6D9FC;
-    cursor: pointer;
-    border: 1px solid rgba(9, 185, 255, 0.3);
-    border-radius: 4px;
-    background-color: transparent;
-    transition: all 0.3s;
-    font-family: 'Source Han Sans CN Regular';
-
-    &:hover {
-        border-color: #09B9FF;
-        color: #FFFFFF;
-        background-color: rgba(9, 185, 255, 0.1);
-    }
-}
-
-.tab-active {
-    border-color: #09B9FF;
-    color: #FFFFFF;
-    background: #09B9FF;
-    box-shadow: 0px 0px 10px rgba(9, 185, 255, 0.5);
-}
-
-::v-deep .table-model-dialog {
-    background-color: transparent;
-    height: 760px;
-    background-image: url(../assets/img/dialog.png);
-    background-size: 100% 100%;
-    overflow: auto;
-    opacity: .95;
-
-    .title {
-        text-align: center;
-        font-family: 'Source Han Sans CN Bold';
-        font-weight: bold;
-        font-size: 30px;
-        color: #CCE0F8;
-        line-height: 30px;
-        text-shadow: 0px 0px 10px #1068F7;
-        padding-top: 45px;
-    }
-
-    .el-dialog__header {
-        display: none;
-    }
-
-    .el-dialog__body {
-        padding: 0;
-    }
-}
-
-// 当有 tab 时，增加弹窗高度（tab 占据约 70px）
-::v-deep .table-model-dialog-with-tab {
-    height: 850px;
-
-    .title {
-        text-align: center;
-        font-family: 'Source Han Sans CN Bold';
-        font-weight: bold;
-        font-size: 30px;
-        color: #CCE0F8;
-        line-height: 30px;
-        text-shadow: 0px 0px 10px #1068F7;
-        padding-top: 45px;
-    }
-
-    .el-dialog__header {
-        display: none;
-    }
-
-    .el-dialog__body {
-        padding: 0;
-    }
-}
-
-.el-table {
-    background-color: transparent;
-
-    ::v-deep tbody tr {
-        pointer-events: none;
-    }
-
-    ::v-deep .el-table__body {
-        tr {
-            background-color: #14284D;
-
-            td {
-                border-bottom: none;
-                color: #fff;
-                font-size: 14px;
-            }
-        }
-
-        tr:nth-child(2n) {
-            background-color: transparent;
-        }
-    }
-}
-
-::v-deep .header-row-class {
-    height: 32px;
-    background: linear-gradient(180deg, rgba(98, 157, 255, 0) 0%, rgba(51, 100, 255, 0.3) 100%);
-
-    th.el-table__cell {
-        background-color: transparent;
-        border-bottom: none;
-        color: #fff;
-        border-bottom: 1px solid;
-        border-top: 1px solid;
-        border-image: linear-gradient(360deg, rgba(0, 254, 254, 0.09), rgba(0, 132, 255, 1)) 1 1;
-        font-size: 14px;
-    }
-
-    th.el-table__cell:first-child {
-        border-left: 1px solid;
-        border-image: linear-gradient(360deg, rgba(0, 254, 254, 0.09), rgba(0, 132, 255, 1)) 1 1;
-    }
-
-    th.el-table__cell:last-child {
-        border-right: 1px solid;
-        border-image: linear-gradient(360deg, rgba(0, 254, 254, 0.09), rgba(0, 132, 255, 1)) 1 1;
-    }
-}
-
-::v-deep .el-pagination {
-    padding: 0;
-    display: flex;
-    justify-content: flex-end;
-
-    .el-pagination__total {
-        font-family: 'Source Han Sans CN Regular';
-        font-weight: 400;
-        font-size: 14px;
-        color: #FFFFFF;
-        line-height: 30px;
-        margin-right: 31px;
-    }
-
-    .btn-prev,
-    .btn-next {
-        background-color: transparent;
-        color: #B6D9FC;
-        padding: 0;
-
-    }
-
-    .btn-prev {
-        margin-right: 6px;
-    }
-
-    .btn-next {
-        margin-left: 6px;
-        margin-right: 2px;
-    }
-
-    .el-pager {
-        display: flex;
-        gap: 10px;
-
-        .number {
-            font-family: 'Source Han Sans CN Regular';
-            line-height: 30px;
-            height: 30px;
-            width: 30px;
-            text-align: center;
-            border-radius: 4px;
-            border: 1px solid #09B9FF;
-            color: #FFFFFF;
-            font-size: 14px;
-            font-weight: 400;
-        }
-
-        li {
-            padding: 0;
-            min-width: 0;
-            flex-shrink: 0;
-            background-color: transparent;
-        }
-
-        li:hover {
-            background: #09B9FF;
-            border-radius: 4px;
-            border: 1px solid #09B9FF;
-        }
-
-        .active {
-            background: #09B9FF;
-            border-radius: 4px;
-            border: 1px solid #09B9FF;
-        }
-
-        .btn-quickprev,
-        .btn-quicknext {
-            color: rgba(182, 217, 252, 1);
-        }
-    }
-
-    .el-pagination__sizes {
-        margin: 0;
-
-        .el-input {
-            margin: 0;
-
-            .el-input__inner {
-                color: #FFFFFF;
-                font-size: 12px;
-                background-color: transparent;
-                border-radius: 4px;
-                border: 1px solid #09B9FF;
-            }
-
-            .el-input__icon {
-                color: #B6D9FC;
-            }
-        }
-    }
-}
-</style>
diff --git a/screen/src/main.js b/screen/src/main.js
index dbf561b..dc1c4ad 100644
--- a/screen/src/main.js
+++ b/screen/src/main.js
@@ -13,8 +13,18 @@
 import 'echarts-gl';
 import * as echarts from 'echarts';
 import TitleBox from './components/titleBox.vue'
+import CustomTable from './components/customTable.vue'
+import CustomPagination from './components/customPagination.vue'
+import CustomDialog from './components/customDialog.vue'
+import CustomPreview from './components/customPreview.vue'
+
+
 
 Vue.component('TitleBox', TitleBox)
+Vue.component('CustomTable', CustomTable)
+Vue.component('CustomPagination', CustomPagination)
+Vue.component('CustomDialog', CustomDialog)
+Vue.component('CustomPreview', CustomPreview)
 
 Vue.prototype.$axios = axios
 Vue.prototype.$echarts = echarts
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index fb40565..980e209 100644
--- a/screen/src/router/index.js
+++ b/screen/src/router/index.js
@@ -26,6 +26,48 @@
       title: '项目列表'
     }
   },
+  {
+    path: '/equipmentList',
+    component: () => import('../view/equipmentList/index.vue'),
+    meta: {
+      title: '设备列表'
+    }
+  },
+  {
+    path: '/hiddenDanger',
+    component: () => import('../view/hiddenDanger/index.vue'),
+    meta: {
+      title: '重大隐患列表'
+    }
+  },
+  {
+    path: '/workList',
+    component: () => import('../view/workList/index.vue'),
+    meta: {
+      title: '工作内容管理'
+    }
+  },
+  {
+    path: '/workList/detail',
+    component: () => import('../view/workList/detail.vue'),
+    meta: {
+      title: '工作内容详情'
+    }
+  },
+  {
+    path: '/accidentCase',
+    component: () => import('../view/accidentCase/index.vue'),
+    meta: {
+      title: '事故案例'
+    }
+  },
+   {
+    path: '/accidentCase/detail',
+    component: () => import('../view/accidentCase/detail.vue'),
+    meta: {
+      title: '事故案例详情'
+    }
+  },
 ]
 
 const createRouter = () => new Router({
diff --git a/screen/src/view/accidentCase/detail.vue b/screen/src/view/accidentCase/detail.vue
new file mode 100644
index 0000000..c05900f
--- /dev/null
+++ b/screen/src/view/accidentCase/detail.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div>
+        <img
+          @click="backFun"
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13 cursor-pointer"
+        />
+      </div>
+      <div class="bgcolor1 mt--25 oa" style="height: 900px">
+        <div class="flex a-center">
+          <div class="fs--30 lh--30 c-fff SHSBold mr--8">
+            德国模德机床中国总部及研发生产基地项目落户成都东部新区
+          </div>
+          <div class="typeBox">塔吊倒塌</div>
+        </div>
+        <div class="flex a-center j-between mt--24">
+          <div class="flex a-center">
+            <img
+              src="../../assets/img/home/Shape@2x (1).png"
+              class="mr--6 w--9 h--10"
+            />
+            <div class="SHSN fs--12 lh--12 c-fff">伤亡：造成 1 人死亡</div>
+          </div>
+          <div class="flex a-center">
+            <img
+              src="../../assets/img/home/Shape@2x (2).png"
+              class="mr--6 w--8 h--10"
+            />
+            <div class="SHSN fs--12 lh--12 c-fff">河北省秦皇岛市昌黎县</div>
+          </div>
+          <div class="flex a-center">
+            <img
+              src="../../assets/img/home/Shape@2x (3).png"
+              class="mr--6 w--10 h--9"
+            />
+            <div class="SHSN fs--12 lh--12 c-fff">2025年11月10日</div>
+          </div>
+        </div>
+        <div class="mt--18 fs--14 c-fff SHSN">
+          德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区
+        </div>
+        <div class="mt--26 flex flex-column a-center gap--18">
+          <img
+            style="width: 730px; height: 348px"
+            src="../../assets/img/home/Shape@2x (3).png"
+          />
+          <img
+            style="width: 730px; height: 348px"
+            src="../../assets/img/home/Shape@2x (3).png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    backFun() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.typeBox {
+  min-width: 60px;
+  line-height: 20px;
+  text-align: center;
+  background: linear-gradient(180deg, #ff4d4f 0%, #e5484d 100%);
+  border-radius: 20px;
+  border: 1px solid #e5484d;
+  font-size: 12px;
+  color: #ffffff;
+  font-family: "Source Han Sans CN Bold";
+}
+
+.bgcolor1 {
+  background: rgba(47, 85, 143, 0.3);
+  border: 2px solid #3d7fff;
+  padding: 45px 50px;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/view/accidentCase/index.vue b/screen/src/view/accidentCase/index.vue
new file mode 100644
index 0000000..2ba7e83
--- /dev/null
+++ b/screen/src/view/accidentCase/index.vue
@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div @click="backFun" class="flex a-center cursor-pointer">
+        <img
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13"
+        />
+        <div class="c-fff lh--22 fs--22 SHSBold">事故案例</div>
+      </div>
+      <!-- 搜索 -->
+      <div class="flex a-center gap--16 mt--24 mb--20">
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="选择城市"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="选择工作类型"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(1)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime1"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(2)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime2"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请输入搜索内容"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <div class="btn SHSR">搜索</div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="mt--20 border1 oa" style="height: 800px">
+        <div
+          v-for="(item, index) in 10"
+          :key="item"
+          class="flex a-center j-between px--32 py--20 c-fff cursor-pointer tableItem"
+          :class="{ bgcolor2: (index + 1) % 2 != 0 }"
+          @click="toDetail(item)"
+        >
+          <div class="flex a-center">
+            <div class="fs--29 lh--29 SHSN">31</div>
+            <div class="border2 ml--15 mr--16"></div>
+            <div class="fs--12 lh--14 SHSN color1">
+              <p>2025</p>
+              <p>12</p>
+            </div>
+          </div>
+          <div class="ml--79 flex1">
+            <div class="fs--20 lh--20 SHSBold mt--2">
+              秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢
+            </div>
+            <div class="flex a-center j-between mt--6">
+              <div class="flex a-center gap--7">
+                <img
+                  src="../../assets/img/home/Shape@2x (2).png"
+                  class="shrink0 w--8 h--9"
+                />
+                <div class="fs--12 lh--12 c-fff SHSN">河北省秦皇岛市昌黎县</div>
+              </div>
+              <div class="typeBox">塔吊倒塌</div>
+            </div>
+            <div class="mt--5 fs--14 lh--20 SHSR c-fff">
+              秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故秦皇岛市钢铁厂发生塔吊倒塌事故
+            </div>
+          </div>
+          <img
+            src="../../assets/img/logo.png"
+            class="w--264 h--160 shrink0 ml--54 br--10"
+          />
+        </div>
+      </div>
+      <CustomPagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="10"
+        :total="400"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {
+      dateTime: null,
+      projectId: null,
+      dateTxt: "",
+      currentPage: 1,
+    };
+  },
+  computed: {},
+  watch: {
+    dateTime: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    toDetail(item) {
+      this.$router.push({
+        path: "/accidentCase/detail",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    handleClick(type) {
+      this.$refs[`datetime${type}`].focus();
+    },
+
+    backFun() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.tableItem:hover {
+  background-color: rgba(17, 40, 255, 0.2) !important;
+}
+
+.typeBox {
+  min-width: 60px;
+  line-height: 20px;
+  text-align: center;
+  background: linear-gradient(180deg, #ff4d4f 0%, #e5484d 100%);
+  border-radius: 20px;
+  border: 1px solid #e5484d;
+  font-size: 12px;
+  color: #ffffff;
+  font-family: "Source Han Sans CN Bold";
+}
+.border1 {
+  border: 2px solid rgba(61, 127, 255, 0.3);
+}
+
+.border2 {
+  border: 1px solid #ffffff;
+  transform: rotate(20deg);
+  height: 21px;
+}
+
+.bgcolor1 {
+  background: rgba(2, 0, 77, 0.8);
+  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
+  border: 2px solid #0d53b7;
+}
+
+.bgcolor2 {
+  background: rgba(14, 95, 255, 0.2);
+}
+
+.color1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.picker {
+  ::v-deep .el-input__icon {
+    display: none;
+  }
+
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+
+  ::v-deep .el-range-input {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+}
+
+.searchBox {
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 0;
+  }
+
+  ::v-deep .el-input__suffix {
+    display: none;
+  }
+
+  .btn {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background: linear-gradient(
+      90deg,
+      #3467d0 0%,
+      #0d226a 50.35%,
+      #376fe0 100%
+    );
+    height: 38px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #ffffff;
+    padding: 0 26px;
+    border: 1px solid #307ad9;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+.btnColor {
+  color: #00ebfc;
+}
+
+::v-deep .el-descriptions {
+  .el-descriptions__body {
+    background-color: transparent;
+
+    .el-descriptions-item__container {
+      color: #ffffff;
+      font-family: "Source Han Sans CN Regular";
+    }
+  }
+}
+</style>
diff --git a/screen/src/view/equipmentList/index.vue b/screen/src/view/equipmentList/index.vue
new file mode 100644
index 0000000..e8125ff
--- /dev/null
+++ b/screen/src/view/equipmentList/index.vue
@@ -0,0 +1,490 @@
+<template>
+  <div>
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div @click="backFun" class="flex a-center cursor-pointer">
+        <img
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13"
+        />
+        <div class="c-fff lh--22 fs--22 SHSBold">设备列表</div>
+      </div>
+      <!-- 搜索 -->
+      <div class="flex a-center gap--16 mt--24 mb--20">
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择项目"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择设备类型"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(1)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime1"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(2)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime2"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请输入搜索内容"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <div class="btn SHSR">搜索</div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <CustomTable
+        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
+        height="800"
+        style="border: 2px solid #3d7fff"
+      >
+        <el-table-column label="设备名称" prop="projectName" />
+        <el-table-column label="设备类型" prop="projectName" />
+        <el-table-column label="设备编号" prop="projectName" />
+        <el-table-column label="设备出厂日期" prop="projectName" />
+        <el-table-column label="使用单位" prop="projectName" />
+        <el-table-column label="工程起重机械生产单位" prop="projectName" />
+        <el-table-column label="工程起重机械租赁单位" prop="projectName" />
+        <el-table-column label="工程起重机械维保单位" prop="projectName" />
+        <el-table-column label="工程起重机械安拆单位" prop="projectName" />
+        <el-table-column label="本月检查情况" prop="projectName">
+          <template #default="{ row, $index }">
+            <div class="flex a-center j-center">
+              <div class="ripple">
+                <div
+                  class="ripple-wave wave-1"
+                  :class="{ bgColor3: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-2"
+                  :class="{ bgColor4: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-3"
+                  :class="{ bgColor5: $index === 0 }"
+                ></div>
+              </div>
+              <div class="ml--6 SHSR">{{ $index }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="最近一次检查时间" prop="projectName" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button
+              @click="toHiddenDanger(row, 3)"
+              type="text"
+              class="btnColor"
+              >隐患</el-button
+            >
+            <el-button
+              type="text"
+              class="btnColor"
+              @click="projectVisible = true"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </CustomTable>
+      <CustomPagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="10"
+        :total="400"
+      />
+    </div>
+    <!-- 项目列表弹窗 -->
+    <CustomDialog title="项目" :visible.sync="projectVisible" width="1420px">
+      <CustomTable
+        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
+        height="630"
+      >
+        <el-table-column label="检查计划" prop="projectName" />
+        <el-table-column label="计划类型" prop="projectName" />
+        <el-table-column label="检测时间" prop="projectName" />
+        <el-table-column label="分数" prop="projectName" />
+        <el-table-column label="风险类型" prop="projectName" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-popover trigger="click" popper-class="custom-popper">
+              <template #reference>
+                <el-button type="text" class="btnColor">查看报告</el-button>
+              </template>
+              <div
+                class="h100 flex flex-column a-center j-between c-fff fs--16 SHSBold"
+              >
+                <div
+                  @click="openReport('safe')"
+                  class="py--12 w100 txt-center br--10 bgcolor6 cursor-pointer"
+                >
+                  综合报告
+                </div>
+                <div
+                  @click="openReport('device')"
+                  class="py--12 w100 txt-center br--10 bgcolor7 cursor-pointer"
+                >
+                  设备报告
+                </div>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </CustomTable>
+    </CustomDialog>
+    <!-- 检查报告弹窗 -->
+    <CustomDialog title="检查报告" :visible.sync="reportVisible" width="1420px">
+      <div style="height: 691px" class="oa">
+        <iframe
+          v-if="reportUrl"
+          :src="reportUrl"
+          width="100%"
+          height="100%"
+          frameborder="0"
+        ></iframe>
+      </div>
+    </CustomDialog>
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {
+      dateTime: null,
+      projectId: null,
+      dateTxt: "",
+      currentPage: 1,
+      projectVisible: false,
+      reportVisible: false,
+      reportUrl: "",
+      safeReportUrl:
+        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
+      deviceReportUrl:
+        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
+    };
+  },
+  computed: {},
+  watch: {
+    dateTime: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    toHiddenDanger(row, type) {
+      this.$router.push({
+        path: "/hiddenDanger",
+        query: {
+          projectId: row.projectId,
+          activeTab: type,
+        },
+      });
+    },
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    handleClick(type) {
+      this.$refs[`datetime${type}`].focus();
+    },
+
+    backFun() {
+      this.$router.go(-1);
+    },
+
+    openReport(type) {
+      if (type === "safe") {
+        this.reportUrl = this.safeReportUrl;
+      } else if (type === "device") {
+        this.reportUrl = this.deviceReportUrl;
+      } else {
+        this.reportUrl = "";
+      }
+      this.reportVisible = !!this.reportUrl;
+    },
+  },
+};
+</script>
+<style lang="less">
+.custom-popper {
+  background: transparent;
+  background-image: url("../../assets/img/home/77Combined Shape@2x.png");
+  background-size: 100% 100%;
+  padding: 31px 38px;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  width: 227px;
+  height: 180px;
+
+  .popper__arrow {
+    display: none;
+  }
+}
+</style>
+<style scoped lang="less">
+.bgcolor1 {
+  background: rgba(2, 0, 77, 0.8);
+  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
+  border: 2px solid #0d53b7;
+}
+
+.bgColor2 {
+  background: rgba(24, 69, 135, 0.9);
+}
+
+.bgColor3 {
+  background: rgba(67, 221, 189, 1) !important;
+}
+
+.bgColor4 {
+  background: rgba(67, 221, 189, 0.6) !important;
+}
+
+.bgColor5 {
+  background: rgba(67, 221, 189, 0.4) !important;
+}
+
+.bgcolor6 {
+  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
+}
+
+.bgcolor7 {
+  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
+}
+
+.picker {
+  ::v-deep .el-input__icon {
+    display: none;
+  }
+
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+
+  ::v-deep .el-range-input {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+}
+
+.searchBox {
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 0;
+  }
+
+  ::v-deep .el-input__suffix {
+    display: none;
+  }
+
+  .btn {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background: linear-gradient(
+      90deg,
+      #3467d0 0%,
+      #0d226a 50.35%,
+      #376fe0 100%
+    );
+    height: 38px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #ffffff;
+    padding: 0 26px;
+    border: 1px solid #307ad9;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+.btnColor {
+  color: #00ebfc;
+}
+
+::v-deep .el-descriptions {
+  .el-descriptions__body {
+    background-color: transparent;
+
+    .el-descriptions-item__container {
+      color: #ffffff;
+      font-family: "Source Han Sans CN Regular";
+    }
+  }
+}
+
+.ripple {
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+
+.ripple-wave {
+  position: absolute;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.wave-1 {
+  width: 14px;
+  height: 14px;
+  background-color: rgba(255, 55, 95, 1);
+}
+
+.wave-2 {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(255, 55, 95, 0.6);
+  animation: ripple-effect 2s ease-out infinite;
+}
+
+.wave-3 {
+  width: 24px;
+  height: 24px;
+  background-color: rgba(255, 55, 95, 0.4);
+  animation: ripple-effect 2s ease-out infinite 1s;
+}
+
+@keyframes ripple-effect {
+  0% {
+    transform: translate(-50%, -50%) scale(0.7);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) scale(1.4);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/screen/src/view/hiddenDanger/index.vue b/screen/src/view/hiddenDanger/index.vue
new file mode 100644
index 0000000..6afffb7
--- /dev/null
+++ b/screen/src/view/hiddenDanger/index.vue
@@ -0,0 +1,669 @@
+<template>
+  <div class="relative">
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div>
+        <img
+          @click="backFun"
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13 cursor-pointer"
+        />
+      </div>
+      <!-- tab -->
+      <div
+        class="flex a-center absolute postion-center br--16 top--130 br--16 c-fff fs--14 bgcolor4 SSHR"
+      >
+        <div @click="activeTab = 1" class="lh--32 px--20 cursor-pointer z-10">
+          重大隐患
+        </div>
+        <div @click="activeTab = 2" class="lh--32 px--20 cursor-pointer z-10">
+          安全隐患
+        </div>
+        <div @click="activeTab = 3" class="lh--32 px--20 cursor-pointer z-10">
+          设备隐患
+        </div>
+        <div class="activeBox" :style="{ left: (activeTab - 1) * 95 + 'px' }">
+          占位盒子
+        </div>
+      </div>
+      <!-- 搜索 -->
+      <div class="flex a-center gap--16 mt--24 mb--20">
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择项目"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择整改状态"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          v-if="activeTab == 1"
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择隐患类型"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          v-else
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请选择隐患等级"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <img
+            src="../../assets/img/down-circle@2x.png"
+            class="w--15 h--16 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(1)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime1"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          @click="handleClick(2)"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+        >
+          <el-date-picker
+            v-model="dateTime"
+            ref="datetime2"
+            type="datetime"
+            placeholder=""
+          >
+          </el-date-picker>
+          <div
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+            style="width: calc(100% - 20px)"
+            v-if="dateTxt"
+          >
+            {{ dateTxt }}
+          </div>
+          <div
+            v-else
+            class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+          >
+            请选择日期
+          </div>
+          <img
+            src="../../assets/img/home/Shape@2x (6).png"
+            class="w--13 h--13 shrink0"
+          />
+        </div>
+        <div
+          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
+        >
+          <el-select
+            filterable
+            v-model="projectId"
+            placeholder="请输入搜索内容"
+            class="flex1"
+          >
+            <el-option
+              v-for="item in [1, 2]"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+          <div class="btn SHSR">搜索</div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <CustomTable
+        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
+        height="800"
+        style="border: 2px solid #3d7fff"
+      >
+        <el-table-column label="项目名称" prop="projectName" />
+        <el-table-column label="检查计划" prop="projectName" />
+        <el-table-column label="检查内容" prop="projectName" />
+        <el-table-column label="问题描述" prop="projectName" />
+        <el-table-column label="问题部位" prop="projectName" />
+        <el-table-column label="问题备注" prop="projectName" />
+        <el-table-column label="隐患等级" prop="projectName" />
+        <el-table-column
+          v-if="activeTab == 1"
+          label="隐患类型"
+          prop="projectName"
+        />
+        <el-table-column label="图片" prop="projectName">
+          <template #default="{ row }"
+            ><div
+              class="btnColor cursor-pointer"
+              :class="false && 'disableColor'"
+              @click="previewVisible = true"
+            >
+              1张
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="检查时间" prop="projectName" />
+        <el-table-column label="整改状态" prop="projectName">
+          <template #default="{ row, $index }">
+            <div class="flex a-center j-center">
+              <div class="ripple">
+                <div
+                  class="ripple-wave wave-1"
+                  :class="{ bgColor3: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-2"
+                  :class="{ bgColor4: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-3"
+                  :class="{ bgColor5: $index === 0 }"
+                ></div>
+              </div>
+              <div class="ml--6 SHSR">{{ $index }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="责任人" prop="projectName" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button @click="updatePeople = true" type="text" class="btnColor"
+              >编辑责任人</el-button
+            >
+            <el-button
+              type="text"
+              class="btnColor"
+              @click="detailVisible = true"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </CustomTable>
+      <CustomPagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="10"
+        :total="400"
+      />
+    </div>
+    <!-- 修改责任人 -->
+    <CustomDialog title="责任人" :visible.sync="updatePeople" width="600px">
+      <div class="pt--37 px--45 pb--64">
+        <input
+          v-model="peopleName"
+          placeholder="请输入"
+          class="w100 h--60 fs--14 SHSR py--23 px--21 bgcolor5 c-fff"
+        />
+        <div class="flex a-center j-center gap--30 mt--59 SHSR fs--16 c-fff">
+          <div
+            @click="closeUpdatePeople"
+            class="w--150 lh--40 txt-center bgcolor2 br--4 cursor-pointer"
+          >
+            取消
+          </div>
+          <div
+            @click="saveUpdatePeople"
+            class="w--150 lh--40 txt-center bgcolor3 br--4 cursor-pointer"
+          >
+            保存
+          </div>
+        </div>
+      </div>
+    </CustomDialog>
+    <!-- 隐患详情 -->
+    <CustomDialog title="项目名称" :visible.sync="detailVisible" width="1420px">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
+        <el-tab-pane label="基本信息" name="first">
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">责任人：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">问题部门：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="mt--30">
+            <div class="SHSR fs--16 lh--16 mb--17 color1">规范条款：</div>
+            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+              计划名称计划名称计划名称
+            </div>
+          </div>
+          <div class="mt--30">
+            <div class="SHSR fs--16 lh--16 mb--17 color1">建议措施：</div>
+            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+              计划名称计划名称计划名称
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">问题数量：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">扣除积分：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">附加分数：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">备注：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="复查记录（无）" name="second">
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">复合内容：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">复合状态：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">复合图片：</div>
+              <div
+                class="lh--60 px--19 btnColor SHSBold fs--18 w100 cursor-pointer"
+                :class="false && 'disableColor'"
+                @click="previewVisible = true"
+              >
+                1张
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">复核人：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+          <div class="flex j-between gap--30 mt--30">
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">创建时间：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+            <div class="flex1">
+              <div class="SHSR fs--16 lh--16 mb--17 color1">更新时间：</div>
+              <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor6">
+                计划名称计划名称计划名称
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </CustomDialog>
+    <!-- 图片预览 -->
+    <CustomPreview
+      :show="previewVisible"
+      :imgArr="[]"
+      @close="previewVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {
+      activeTab: 1,
+      dateTime: null,
+      projectId: null,
+      dateTxt: "",
+      currentPage: 1,
+      updatePeople: false,
+      peopleName: "",
+      detailVisible: false,
+      activeName: "first",
+      previewVisible: false,
+    };
+  },
+  computed: {},
+  watch: {
+    dateTime: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    if (this.$route.query.activeTab) {
+      this.activeTab = this.$route.query.activeTab;
+    }
+  },
+  mounted() {},
+  methods: {
+    handleClickTab(tab) {
+      this.activeName = tab.name;
+    },
+    closeUpdatePeople() {
+      this.updatePeople = false;
+      this.peopleName = "";
+    },
+    saveUpdatePeople() {
+      if (!this.peopleName) {
+        this.$message({
+          message: "请输入责任人",
+          type: "warning",
+        });
+        return;
+      }
+      this.$message({
+        message: "保存成功",
+        type: "success",
+      });
+      this.closeUpdatePeople();
+    },
+
+    backFun() {
+      this.$router.go(-1);
+    },
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+input::placeholder {
+  color: rgba(255, 255, 255, 0.2);
+}
+
+input:focus {
+  outline: none;
+}
+
+.btnColor {
+  color: #00ebfc;
+}
+
+.disableColor {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.color1 {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.bgcolor1 {
+  background: rgba(2, 0, 77, 0.8);
+  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
+  border: 2px solid #0d53b7;
+}
+
+.bgcolor2 {
+  background: #838fbb;
+}
+
+.bgcolor3 {
+  background: linear-gradient(270deg, #09b9ff 0%, #4d68ff 100%);
+}
+
+.bgcolor4 {
+  background: #06175b;
+  border-radius: 16px;
+  border: 1px solid #204fb3;
+}
+
+.bgcolor5 {
+  background: rgba(6, 23, 91, 0.6);
+  border: 1px solid #204fb3;
+}
+
+.bgcolor6 {
+  background: rgba(24, 83, 200, 0.2);
+}
+
+.activeBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0 20px;
+  height: 32px;
+  background: #0600e4;
+  color: transparent;
+  box-shadow: inset 0px 0px 20px 0px rgba(102, 255, 255, 0.52);
+  border-radius: 20px;
+  border: 1px solid rgba(50, 197, 255, 0.22);
+  transition: all 0.3s ease-in-out;
+}
+
+.picker {
+  ::v-deep .el-input__icon {
+    display: none;
+  }
+
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+
+  ::v-deep .el-range-input {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+}
+
+.searchBox {
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 0;
+  }
+
+  ::v-deep .el-input__suffix {
+    display: none;
+  }
+
+  .btn {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background: linear-gradient(
+      90deg,
+      #3467d0 0%,
+      #0d226a 50.35%,
+      #376fe0 100%
+    );
+    height: 38px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #ffffff;
+    padding: 0 26px;
+    border: 1px solid #307ad9;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+::v-deep .el-tabs {
+  .el-tabs__header {
+    border-bottom: none;
+    margin: 0;
+    .el-tabs__nav {
+      border: none;
+
+      .el-tabs__item {
+        border: none;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 14px;
+        font-family: "Source Han Sans CN Regular";
+        padding: 0 32px;
+        height: 34px;
+        line-height: 34px;
+
+        &:hover {
+          font-family: "Source Han Sans CN Bold";
+          color: #ffffff;
+          background: linear-gradient(180deg, #1f54ae 0%, #017be7 100%);
+          border-radius: 6px 6px 0px 0px;
+        }
+      }
+
+      .is-active {
+        font-family: "Source Han Sans CN Bold";
+        color: #ffffff;
+        background: linear-gradient(180deg, #1f54ae 0%, #017be7 100%);
+        border-radius: 6px 6px 0px 0px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/view/home/index.vue b/screen/src/view/home/index.vue
index 378f406..2c841cf 100644
--- a/screen/src/view/home/index.vue
+++ b/screen/src/view/home/index.vue
@@ -22,7 +22,7 @@
         src="../../assets/img/home/Group@2x (4).png"
         class="w--110 h--110 mr--9 shrink0"
       />
-      <div class="bgimg4 pt--10 c-fff">
+      <div @click="toHiddenDanger" class="bgimg4 pt--10 c-fff cursor-pointer">
         <div class="flex a-center ml--14">
           <div class="ripple">
             <div class="ripple-wave wave-1"></div>
@@ -207,7 +207,10 @@
           <template #title> 设备数据总览 </template>
           <template #content>
             <div class="flex j-end mt--8">
-              <div class="flex a-center pl--11 pr--13 py--6 bgimg2">
+              <div
+                @click="toEquipmentList"
+                class="flex a-center pl--11 pr--13 py--6 bgimg2 cursor-pointer"
+              >
                 <div class="c-fff fs--14 SHSR mr--29 lh--14 shrink0">
                   本月检查情况
                 </div>
@@ -249,6 +252,7 @@
           <template #title> 事故简讯 </template>
           <template #right>
             <div
+              @click="toAccidentCaseList"
               class="flex a-center py--6 pl--10 pr--8 br--4 bgcolor5 cursor-pointer"
             >
               <div class="fs--12 lh--12 c-fff mr--4 SHSR">详情</div>
@@ -269,6 +273,7 @@
             >
               <div>
                 <div
+                  @click="toAccidentCaseDetail(item)"
                   v-for="(item, index) in scrollData"
                   :key="`${item.id}-${index}`"
                   :class="(index + 1) % 2 === 0 ? 'bgcolor7' : ''"
@@ -321,6 +326,7 @@
           <template #title> 工作展示 </template>
           <template #right>
             <div
+              @click="toWorkList"
               class="flex a-center py--6 pl--10 pr--8 br--4 bgcolor5 cursor-pointer"
             >
               <div class="fs--12 lh--12 c-fff mr--4 SHSR">详情</div>
@@ -341,7 +347,7 @@
                 @change="handleChangeCarousel"
               >
                 <el-carousel-item v-for="(item, index) in 4" :key="index">
-                  <div>
+                  <div @click="toWorkDetail(item)" class="cursor-pointer">
                     <img
                       src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/1bcd9db5-c909-4edc-a3d2-61cc33c54462.jpg"
                       class="w100 h--290"
@@ -438,10 +444,36 @@
     this.stopAutoScroll();
   },
   methods: {
-    toPorjectList() {
-      this.$router.replace({
-        path: "/projectList",
+    toAccidentCaseDetail(item) {
+      this.$router.push({
+        path: "/accidentCase/detail",
+        query: {
+          id: item.id,
+        },
       });
+    },
+    toAccidentCaseList() {
+      this.$router.push("/accidentCase");
+    },
+    toWorkDetail(item) {
+      this.$router.push({
+        path: "/workList/detail",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+    toWorkList() {
+      this.$router.push("/workList");
+    },
+    toPorjectList() {
+      this.$router.push("/projectList");
+    },
+    toEquipmentList() {
+      this.$router.push("/equipmentList");
+    },
+    toHiddenDanger() {
+      this.$router.push("/hiddenDanger");
     },
     // 切换活动索引
     changeActiveIndex(index) {
@@ -823,7 +855,7 @@
 }
 
 .activeBox2 {
-  left: 100px;
+  left: 95px;
 }
 
 .leftBox {
diff --git a/screen/src/view/projectList/index.vue b/screen/src/view/projectList/index.vue
index 7982b3e..1c3e5e8 100644
--- a/screen/src/view/projectList/index.vue
+++ b/screen/src/view/projectList/index.vue
@@ -13,7 +13,7 @@
       <!-- 搜索 -->
       <div class="flex a-center gap--16 mt--24 mb--20">
         <div
-          class="flex a-center j-between pl--18 pr--15 h--40 relative flex1 bgcolor1 searchBox"
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
         >
           <el-select
             filterable
@@ -35,7 +35,7 @@
           />
         </div>
         <div
-          class="flex a-center j-between pl--18 pr--15 h--40 relative flex1 bgcolor1 searchBox"
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
         >
           <el-select
             filterable
@@ -57,7 +57,7 @@
           />
         </div>
         <div
-          class="flex a-center j-between pl--18 pr--15 h--40 relative flex1 bgcolor1 searchBox"
+          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
         >
           <el-select
             filterable
@@ -80,7 +80,7 @@
         </div>
         <div
           @click="handleClick(1)"
-          class="flex a-center j-between px--20 flex1 h--40 relative bgcolor1 picker"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
         >
           <el-date-picker
             v-model="dateTime"
@@ -109,7 +109,7 @@
         </div>
         <div
           @click="handleClick(2)"
-          class="flex a-center j-between px--20 flex1 h--40 relative bgcolor1 picker"
+          class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
         >
           <el-date-picker
             v-model="dateTime"
@@ -137,7 +137,7 @@
           />
         </div>
         <div
-          class="flex a-center j-between flex1 pl--20 h--40 relative bgcolor1 searchBox"
+          class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
         >
           <el-select
             filterable
@@ -157,17 +157,16 @@
         </div>
       </div>
       <!-- 表格 -->
-      <el-table
+      <CustomTable
         :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
         height="800"
-        :row-class-name="getClassName"
-        :header-row-class-name="'headClassName'"
+        style="border: 2px solid #3d7fff"
       >
         <el-table-column label="项目名称" prop="projectName" />
         <el-table-column label="项目类型" prop="projectName" />
         <el-table-column label="单位集合" prop="projectName">
-          <template #default="scope">
-            <div class="flex j-center">
+          <template #default="{ row }">
+            <div class="flex j-center" @click="companyVisible = true">
               <div
                 class="w--70 lh--30 txt-center j-center bgColor2 SHSR cursor-pointer"
               >
@@ -180,37 +179,123 @@
         <el-table-column label="本月检查情况" prop="projectName" />
         <el-table-column label="最后一次检查时间" prop="projectName" />
         <el-table-column label="本月检查风险" prop="projectName">
-          <template #default="scope">
+          <template #default="{ row, $index }">
             <div class="flex a-center j-center">
               <div class="ripple">
-                <div class="ripple-wave wave-1"></div>
-                <div class="ripple-wave wave-2"></div>
-                <div class="ripple-wave wave-3"></div>
+                <div
+                  class="ripple-wave wave-1"
+                  :class="{ bgColor3: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-2"
+                  :class="{ bgColor4: $index === 0 }"
+                ></div>
+                <div
+                  class="ripple-wave wave-3"
+                  :class="{ bgColor5: $index === 0 }"
+                ></div>
               </div>
-              <div class="ml--6 SHSR">已检查</div>
+              <div class="ml--6 SHSR">{{ $index }}</div>
             </div>
           </template>
         </el-table-column>
         <el-table-column label="操作">
-          <template #default="scope">
+          <template #default="{ row }">
             <el-button type="text" class="btnColor">详情</el-button>
-            <el-button type="text" class="btnColor">隐患</el-button>
-            <el-button type="text" class="btnColor">报告</el-button>
+            <el-button
+              @click="toHiddenDanger(row, 2)"
+              type="text"
+              class="btnColor"
+              >隐患</el-button
+            >
+            <el-button
+              type="text"
+              class="btnColor"
+              @click="projectVisible = true"
+              >报告</el-button
+            >
           </template>
         </el-table-column>
-      </el-table>
-      <el-pagination
-        class="mt--16 txt-right"
+      </CustomTable>
+      <CustomPagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[100, 200, 300, 400]"
         :page-size="10"
-        layout="total, sizes, prev, pager, next, jumper"
         :total="400"
-      >
-      </el-pagination>
+      />
     </div>
+    <!-- 项目列表弹窗 -->
+    <CustomDialog title="项目" :visible.sync="projectVisible" width="1420px">
+      <CustomTable
+        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
+        height="630"
+      >
+        <el-table-column label="检查计划" prop="projectName" />
+        <el-table-column label="计划类型" prop="projectName" />
+        <el-table-column label="检测时间" prop="projectName" />
+        <el-table-column label="分数" prop="projectName" />
+        <el-table-column label="风险类型" prop="projectName" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-popover trigger="click" popper-class="custom-popper">
+              <template #reference>
+                <el-button type="text" class="btnColor">查看报告</el-button>
+              </template>
+              <div
+                class="h100 flex flex-column a-center j-between c-fff fs--16 SHSBold"
+              >
+                <div
+                  @click="openReport('safe')"
+                  class="py--12 w100 txt-center br--10 bgcolor6 cursor-pointer"
+                >
+                  安全报告
+                </div>
+                <div
+                  @click="openReport('device')"
+                  class="py--12 w100 txt-center br--10 bgcolor7 cursor-pointer"
+                >
+                  设备报告
+                </div>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </CustomTable>
+    </CustomDialog>
+    <!-- 单位信息弹窗 -->
+    <CustomDialog title="单位信息" :visible.sync="companyVisible" width="1420px">
+      <el-descriptions>
+        <el-descriptions-item label="施工单位">成都喜望</el-descriptions-item>
+        <el-descriptions-item label="项目经理">张三</el-descriptions-item>
+        <el-descriptions-item label="联系方式"
+          >18100000000</el-descriptions-item
+        >
+        <el-descriptions-item label="监理单位">成都喜望</el-descriptions-item>
+        <el-descriptions-item label="总监">张三</el-descriptions-item>
+        <el-descriptions-item label="联系方式"
+          >18100000000</el-descriptions-item
+        >
+        <el-descriptions-item label="建设单位">成都喜望</el-descriptions-item>
+        <el-descriptions-item label="项目负责人">张三</el-descriptions-item>
+        <el-descriptions-item label="联系方式"
+          >18100000000</el-descriptions-item
+        >
+      </el-descriptions>
+    </CustomDialog>
+    <!-- 检查报告弹窗 -->
+    <CustomDialog title="检查报告" :visible.sync="reportVisible" width="1420px">
+      <div style="height: 691px" class="oa">
+        <iframe
+          v-if="reportUrl"
+          :src="reportUrl"
+          width="100%"
+          height="100%"
+          frameborder="0"
+        ></iframe>
+      </div>
+    </CustomDialog>
   </div>
 </template>
 
@@ -226,6 +311,14 @@
       projectId: null,
       dateTxt: "",
       currentPage: 1,
+      projectVisible: false,
+      companyVisible: false,
+      reportVisible: false,
+      reportUrl: "",
+      safeReportUrl:
+        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
+      deviceReportUrl:
+        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
     };
   },
   computed: {},
@@ -242,6 +335,16 @@
   created() {},
   mounted() {},
   methods: {
+    toHiddenDanger(row,type) {
+      this.$router.push({
+        path: '/hiddenDanger',
+        query: {
+          projectId: row.projectId,
+          activeTab: type,
+        }
+      })
+    },
+
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
@@ -255,21 +358,38 @@
     },
 
     backFun() {
-      this.$router.replace({
-        path: "/home",
-      });
+      this.$router.go(-1);
     },
-
-    getClassName({ row, rowIndex }) {
-      if (rowIndex % 2 === 0) {
-        return "oneRow";
+    openReport(type) {
+      if (type === "safe") {
+        this.reportUrl = this.safeReportUrl;
+      } else if (type === "device") {
+        this.reportUrl = this.deviceReportUrl;
       } else {
-        return "twoRow";
+        this.reportUrl = "";
       }
+      this.reportVisible = !!this.reportUrl;
     },
   },
 };
 </script>
+<style lang="less">
+.custom-popper {
+  background: transparent;
+  background-image: url("../../assets/img/home/77Combined Shape@2x.png");
+  background-size: 100% 100%;
+  padding: 31px 38px;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  width: 227px;
+  height: 180px;
+
+  .popper__arrow {
+    display: none;
+  }
+}
+</style>
 <style scoped lang="less">
 .bgcolor1 {
   background: rgba(2, 0, 77, 0.8);
@@ -293,46 +413,12 @@
   background: rgba(67, 221, 189, 0.4) !important;
 }
 
-::v-deep .el-table {
-  &::before {
-    background-color: transparent;
-  }
-  
-  border: 2px solid #3d7fff;
-  background: #071166;
-  .el-table__body tr:hover > td {
-    background-color: rgba(17, 40, 255, 0.2) !important;
-  }
-  .headClassName {
-    .el-table__cell {
-      background-color: #012d94 !important;
-      font-family: "Source Han Sans CN Regular";
-      font-size: 12px;
-      color: #00ebfc;
-      font-weight: 400;
-      padding: 0;
-      border-bottom: none;
-    }
-    height: 30px !important;
-  }
-  .el-table__cell {
-    text-align: center;
-    line-height: 21px;
-    border-bottom: none;
-  }
-  .el-table__row {
-    font-size: 14px;
-    color: #ffffff;
-    font-family: "Source Han Sans CN Medium";
-  }
-  .oneRow {
-    background-color: #02004d !important;
-    height: 50px;
-  }
-  .twoRow {
-    background-color: #051371 !important;
-    height: 50px;
-  }
+.bgcolor6 {
+  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
+}
+
+.bgcolor7 {
+  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
 }
 
 .picker {
@@ -387,111 +473,19 @@
   }
 }
 
-::v-deep .el-pagination {
-  padding: 0;
-  display: flex;
-  justify-content: flex-end;
-
-  .el-pagination__total {
-    font-family: "Source Han Sans CN Regular";
-    font-weight: 400;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.5);
-    line-height: 30px;
-    margin-right: 6px;
-  }
-
-  .btn-prev,
-  .btn-next {
-    background: rgba(1, 123, 231, 0.2);
-    color: rgba(255, 255, 255, 0.5);
-    padding: 0;
-    width: 18px !important;
-    overflow: hidden;
-  }
-
-  .btn-prev {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  .btn-next {
-    margin-left: 4px;
-    margin-right: 23px;
-  }
-
-  .el-pager {
-    display: flex;
-    gap: 4px;
-
-    .number {
-      font-family: "Source Han Sans CN Regular";
-      line-height: 30px;
-      height: 30px;
-      width: 30px;
-      text-align: center;
-      background: rgba(1, 123, 231, 0.2);
-      color: rgba(255, 255, 255, 0.5);
-      font-size: 14px;
-      font-weight: 400;
-    }
-
-    li {
-      padding: 0;
-      min-width: 0;
-      flex-shrink: 0;
-      background-color: transparent;
-    }
-
-    li:hover {
-      background: rgba(1, 123, 231, 0.5);
-    }
-
-    .active {
-      background: rgba(1, 123, 231, 0.5);
-    }
-
-    .btn-quickprev,
-    .btn-quicknext {
-      color: rgba(182, 217, 252, 1);
-    }
-  }
-
-  .el-pagination__sizes {
-    margin: 0;
-
-    .el-input {
-      margin: 0;
-
-      .el-input__inner {
-        color: #017be7;
-        font-size: 12px;
-        background-color: transparent;
-        border: 2px solid #051371;
-      }
-
-      .el-input__icon {
-        color: #017be7;
-      }
-    }
-  }
-
-  .el-pagination__jump {
-    margin-left: 0;
-    color: rgba(255, 255, 255, 0.5);
-    .el-pagination__editor.el-input {
-      margin: 0 6px;
-      .el-input__inner {
-        background-color: transparent;
-        border: 2px solid #051371;
-        color: rgba(255, 255, 255, 0.5);
-      }
-    }
-  }
-}
-
 .btnColor {
   color: #00ebfc;
+}
+
+::v-deep .el-descriptions {
+  .el-descriptions__body {
+    background-color: transparent;
+
+    .el-descriptions-item__container {
+      color: #ffffff;
+      font-family: "Source Han Sans CN Regular";
+    }
+  }
 }
 
 .ripple {
@@ -542,4 +536,4 @@
     opacity: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/screen/src/view/workList/detail.vue b/screen/src/view/workList/detail.vue
new file mode 100644
index 0000000..20eb749
--- /dev/null
+++ b/screen/src/view/workList/detail.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div>
+        <img
+          @click="backFun"
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13 cursor-pointer"
+        />
+      </div>
+      <div class="bgcolor1 mt--25 oa" style="height: 900px;">
+        <div class="fs--30 lh--30 c-fff SHSBold">
+          德国模德机床中国总部及研发生产基地项目落户成都东部新区
+        </div>
+        <div class="flex a-center gap--20 mt--24">
+          <div class="flex a-center">
+            <img
+              src="../../assets/img/home/Shape@2x (3).png"
+              class="mr--6 w--10 h--9"
+            />
+            <div class="SHSN fs--12 lh--12 c-fff">2025年11月10日</div>
+          </div>
+          <div class="lh--20 px--8 br--10 fs--12 bgcolor2 c-fff SHSBold">
+            工作视察
+          </div>
+        </div>
+        <div class="mt--18 fs--14 c-fff SHSN">
+          德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区德国模德机床中国总部及研发生产基地项目落户成都东部新区
+        </div>
+        <div class="mt--26 flex flex-column a-center gap--18">
+          <img
+            style="width: 730px;height: 348px;"
+            src="../../assets/img/home/Shape@2x (3).png"
+          />
+          <img
+            style="width: 730px;height: 348px;"
+            src="../../assets/img/home/Shape@2x (3).png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    backFun() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.bgcolor1 {
+  background: rgba(47, 85, 143, 0.3);
+  border: 2px solid #3d7fff;
+  padding: 45px 50px;
+  height: 100%;
+}
+
+.bgcolor2 {
+  background: #09b9ff;
+  border: 1px solid #017be7;
+}
+</style>
\ No newline at end of file
diff --git a/screen/src/view/workList/index.vue b/screen/src/view/workList/index.vue
new file mode 100644
index 0000000..87f195e
--- /dev/null
+++ b/screen/src/view/workList/index.vue
@@ -0,0 +1,533 @@
+<template>
+  <div>
+    <HeaderBox />
+    <div class="pt--35 px--20 pb--54">
+      <!-- 返回 -->
+      <div @click="backFun" class="flex a-center cursor-pointer">
+        <img
+          src="../../assets/img/back.png"
+          class="w--22 h--20 shrink0 mr--13"
+        />
+        <div class="c-fff lh--22 fs--22 SHSBold">工作内容管理</div>
+      </div>
+      <!-- 搜索 -->
+      <div class="flex a-center j-between mt--24 mb--20">
+        <div class="flex a-center gap--16">
+          <div
+            class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
+          >
+            <el-select
+              filterable
+              v-model="projectId"
+              placeholder="请选择工作类型"
+              class="flex1"
+            >
+              <el-option
+                v-for="item in [1, 2]"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+            <img
+              src="../../assets/img/down-circle@2x.png"
+              class="w--15 h--16 shrink0"
+            />
+          </div>
+          <div
+            @click="handleClick(1)"
+            class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+          >
+            <el-date-picker
+              v-model="dateTime"
+              ref="datetime1"
+              type="datetime"
+              placeholder=""
+            >
+            </el-date-picker>
+            <div
+              class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+              style="width: calc(100% - 20px)"
+              v-if="dateTxt"
+            >
+              {{ dateTxt }}
+            </div>
+            <div
+              v-else
+              class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+            >
+              请选择日期
+            </div>
+            <img
+              src="../../assets/img/home/Shape@2x (6).png"
+              class="w--13 h--13 shrink0"
+            />
+          </div>
+          <div
+            @click="handleClick(2)"
+            class="flex a-center j-between px--20 w--300 h--40 relative bgcolor1 picker"
+          >
+            <el-date-picker
+              v-model="dateTime"
+              ref="datetime2"
+              type="datetime"
+              placeholder=""
+            >
+            </el-date-picker>
+            <div
+              class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
+              style="width: calc(100% - 20px)"
+              v-if="dateTxt"
+            >
+              {{ dateTxt }}
+            </div>
+            <div
+              v-else
+              class="absolute w100 h100 flex a-center c-fff fs--14 SHSR"
+            >
+              请选择日期
+            </div>
+            <img
+              src="../../assets/img/home/Shape@2x (6).png"
+              class="w--13 h--13 shrink0"
+            />
+          </div>
+          <div
+            class="flex a-center j-between w--300 pl--20 h--40 relative bgcolor1 searchBox"
+          >
+            <el-select
+              filterable
+              v-model="projectId"
+              placeholder="请输入搜索内容"
+              class="flex1"
+            >
+              <el-option
+                v-for="item in [1, 2]"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+            <div class="btn SHSR">搜索</div>
+          </div>
+        </div>
+        <div
+          @click="formVisible = true"
+          class="flex a-center j-center w--150 h--40 cursor-pointer br--4 bgcolor8"
+        >
+          <img
+            src="../../assets/img/home/89Combined Shape@2x.png"
+            class="w--12 h--12 shrink0 mr--10"
+          />
+          <div class="fs--14 lh--14 c-fff SHSR">新增</div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <CustomTable
+        :data="[{ projectName: '项目777' }, { projectName: '项目2' }]"
+        height="800"
+        style="border: 2px solid #3d7fff"
+      >
+        <el-table-column label="编号" prop="projectName">
+          <template #default="{ row, $index }">
+            {{ $index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="标题" prop="projectName" />
+        <el-table-column label="简介" prop="projectName" />
+        <el-table-column label="图片" prop="projectName">
+          <template #default="{ row }"
+            ><div
+              class="btnColor cursor-pointer"
+              :class="false && 'disableColor'"
+              @click="previewVisible = true"
+            >
+              1张
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" prop="projectName" />
+        <el-table-column label="上传时间" prop="projectName" />
+        <el-table-column label="状态" prop="projectName" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button type="text" class="btnColor" @click="toDetail(row)"
+              >详情</el-button
+            >
+            <el-button type="text" class="btnColor" @click="editForm(row)">编辑</el-button>
+            <el-button type="text" class="btnColor">删除</el-button>
+            <el-button type="text" class="btnColor">隐藏</el-button>
+          </template>
+        </el-table-column>
+      </CustomTable>
+      <CustomPagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="10"
+        :total="400"
+      />
+    </div>
+    <!-- 图片预览 -->
+    <CustomPreview
+      :show="previewVisible"
+      :imgArr="[]"
+      @close="previewVisible = false"
+    />
+    <!-- 新增/编辑 -->
+    <CustomDialog
+      title="新增工作内容"
+      :visible.sync="formVisible"
+      width="800px"
+      @close="closeForm"
+    >
+      <div class="pt--30 px--45">
+        <div>
+          <div class="SHSR fs--16 lh--16 mb--17 color1">工作标题：</div>
+          <input
+            v-model="peopleName"
+            placeholder="请输入"
+            class="w100 h--60 fs--14 SHSR py--23 px--21 bgcolor5 c-fff"
+          />
+        </div>
+        <div class="mt--30">
+          <div class="SHSR fs--16 lh--16 mb--17 color1">工作类型：</div>
+          <div
+            class="flex a-center j-between w100 pl--18 pr--15 h--60 SHSR fs--14 c-fff bgcolor5 searchBox"
+          >
+            <el-select
+              filterable
+              v-model="projectId"
+              placeholder="请选择工作类型"
+              class="formSelect flex1"
+            >
+              <el-option
+                v-for="item in [1, 2]"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+            <img
+              src="../../assets/img/down-circle@2x.png"
+              class="w--15 h--16 shrink0"
+            />
+          </div>
+        </div>
+        <div class="mt--30">
+          <div class="SHSR fs--16 lh--16 mb--17 color1">工作简介：</div>
+          <textarea
+            v-model="peopleName"
+            placeholder="请输入"
+            class="w100 h--120 fs--14 SHSR py--23 px--21 bgcolor5 c-fff"
+          />
+        </div>
+        <div class="mt--30">
+          <div class="SHSR fs--16 lh--16 mb--17 color1">工作图片：</div>
+          <div class="flex gap--10">
+            <el-image
+              v-for="(item, index) in fileList"
+              :key="index"
+              :src="item.url"
+              class="w--100 h--100 fileListBox"
+              :preview-src-list="[item.url]"
+            />
+            <el-upload
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :before-upload="beforeUpload"
+              :limit="5"
+              accept="image/png, image/jpeg, image/gif"
+              :show-file-list="false"
+              :on-success="handleSuccess"
+            >
+              <div
+                class="flex a-center flex-column gap--15 px--20 py--20 border1 br--8 uploadBox"
+              >
+                <img
+                  src="../../assets/img/home/89Combined Shape@2x.png"
+                  class="w--18 h--18"
+                />
+                <div class="c-fff fs--16">上传图片</div>
+              </div>
+            </el-upload>
+          </div>
+          <div class="color1 mt--10 fs--16 SHSR">
+            请上传<span class="btnColor">png、jpg、gif</span>格式图片
+          </div>
+        </div>
+        <div class="flex a-center j-center gap--30 mt--59 SHSR fs--16 c-fff">
+          <div
+            @click="closeForm"
+            class="w--150 lh--40 txt-center bgcolor2 br--4 cursor-pointer"
+          >
+            取消
+          </div>
+          <div
+            @click="saveForm"
+            class="w--150 lh--40 txt-center bgcolor3 br--4 cursor-pointer"
+          >
+            保存
+          </div>
+        </div>
+      </div>
+    </CustomDialog>
+  </div>
+</template>
+
+<script>
+import HeaderBox from "../header/index.vue";
+import moment from "moment";
+export default {
+  components: { HeaderBox },
+  props: {},
+  data() {
+    return {
+      dateTime: null,
+      projectId: null,
+      dateTxt: "",
+      currentPage: 1,
+      previewVisible: false,
+      formVisible: false,
+      peopleName: "",
+      fileList: [],
+    };
+  },
+  computed: {},
+  watch: {
+    dateTime: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.dateTxt = moment(newVal).format("YYYY年MM月DD日 HH:mm:ss");
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+
+    handleSuccess(response, file, fileList) {
+      console.log(response, file, fileList);
+      this.fileList = fileList;
+      this.$message.success("上传成功");
+    },
+
+    beforeUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isGIF = file.type === "image/gif";
+      if (!isJPG && !isPNG && !isGIF) {
+        this.$message.error("上传图片格式必须为jpg、png、gif");
+        return false;
+      }
+      return true;
+    },
+
+    editForm(row) {
+      this.formVisible = true;
+    },
+
+    closeForm() {
+      this.formVisible = false;
+    },
+
+    saveForm() {
+      this.closeForm();
+    },
+
+    toDetail(row) {
+      this.$router.push({
+        path: "/workList/detail",
+        query: {
+          projectId: row.projectId,
+        },
+      });
+    },
+
+    toHiddenDanger(row, type) {
+      this.$router.push({
+        path: "/hiddenDanger",
+        query: {
+          projectId: row.projectId,
+          activeTab: type,
+        },
+      });
+    },
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    handleClick(type) {
+      this.$refs[`datetime${type}`].focus();
+    },
+
+    backFun() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.border1 {
+  border: 2px dashed #8c939d;
+}
+
+input::placeholder {
+  color: rgba(255, 255, 255, 0.2);
+}
+
+input:focus {
+  outline: none;
+}
+
+textarea::placeholder {
+  color: rgba(255, 255, 255, 0.2);
+}
+
+textarea:focus {
+  outline: none;
+}
+
+.uploadBox:hover {
+  border-color: #00ebfc !important;
+}
+
+.bgcolor1 {
+  background: rgba(2, 0, 77, 0.8);
+  box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
+  border: 2px solid #0d53b7;
+}
+
+.bgColor2 {
+  background: rgba(24, 69, 135, 0.9);
+}
+
+.bgColor3 {
+  background: rgba(67, 221, 189, 1) !important;
+}
+
+.bgColor4 {
+  background: rgba(67, 221, 189, 0.6) !important;
+}
+
+.bgColor5 {
+  background: rgba(67, 221, 189, 0.4) !important;
+}
+
+.bgcolor2 {
+  background: #838fbb;
+}
+
+.bgcolor3 {
+  background: linear-gradient(270deg, #09b9ff 0%, #4d68ff 100%);
+}
+
+.bgcolor5 {
+  background: rgba(6, 23, 91, 0.6);
+  border: 1px solid #204fb3;
+}
+
+.bgcolor6 {
+  background: linear-gradient(270deg, #64aef0 0%, #4b70ec 100%);
+}
+
+.bgcolor7 {
+  background: linear-gradient(270deg, #3dabea 0%, #28a5ec 100%);
+}
+
+.bgcolor8 {
+  background: linear-gradient(270deg, #09b9ff 0%, #4d68ff 100%);
+}
+
+.color1 {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.picker {
+  ::v-deep .el-input__icon {
+    display: none;
+  }
+
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+
+  ::v-deep .el-range-input {
+    background: transparent;
+    border: none;
+    color: transparent;
+  }
+}
+
+.searchBox {
+  ::v-deep .formSelect {
+    input::placeholder {
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  ::v-deep .el-input__inner {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 0;
+  }
+
+  ::v-deep .el-input__suffix {
+    display: none;
+  }
+
+  .btn {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background: linear-gradient(
+      90deg,
+      #3467d0 0%,
+      #0d226a 50.35%,
+      #376fe0 100%
+    );
+    height: 38px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #ffffff;
+    padding: 0 26px;
+    border: 1px solid #307ad9;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+.btnColor {
+  color: #00ebfc;
+}
+
+.disableColor {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+::v-deep .el-descriptions {
+  .el-descriptions__body {
+    background-color: transparent;
+
+    .el-descriptions-item__container {
+      color: #ffffff;
+      font-family: "Source Han Sans CN Regular";
+    }
+  }
+}
+</style>

--
Gitblit v1.7.1