feat: 添加设备列表、工作内容管理和事故案例功能模块

hejianhao

2026-01-16 6a788cb2152becf6fdff8c693e2d9add5c5899fb

 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>
</style>