zhgdyun/src/views/projectAdmin/fourEngin/security/leftTop.vue

<template>
  <Card title="安全巡检">
    <div class="charts">
      <div class="dllm">
        <div class="woria">
          <JRingChart
            :title="{
              text: '检查总数',
              subTitle: `${safetyPatrolInspection.allTotalNum}件`,
              fontSize: 18,
            }"
            :color="['#6EE4F0', '#E7622A']"
            :data="[
              {
                value: safetyPatrolInspection.allRectificationNum,
                name: '已处理',
              },
              {
                value: safetyPatrolInspection.allNoRectificationNum,
                name: '未处理',
              },
            ]"
            :radius="['60%', '85%']"
            :legend="false"
          />
        </div>
        <div class="legend">
          <div class="row">
            <span>已闭合</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ safetyPatrolInspection.allRectificationNum || 0 }}</span>
            <span
              >{{ safetyPatrolInspection.allRectificationRatio || 0 }}%</span
            >
          </div>
        </div>
        <div class="legend">
          <div class="row">
            <span>未闭合</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ safetyPatrolInspection.allNoRectificationNum || 0 }}</span>
            <span>{{ safetyPatrolInspection.noRectificationRatio || 0 }}%</span>
          </div>
        </div>
      </div>
      <div class="dllm">
        <div class="woria">
          <JRingChart
            :title="{
              text: '今日巡检',
              subTitle: `${safetyPatrolInspection.todayTotalNum}件`,
              fontSize: 18,
            }"
            :color="['#6EE4F0', '#E7622A']"
            :data="[
              {
                value: safetyPatrolInspection.todayRectificationNum,
                name: '已巡检',
              },
              {
                value: safetyPatrolInspection.todayNoRectificationRatio,
                name: '未巡检',
              },
            ]"
            :radius="['60%', '85%']"
            :legend="false"
          />
        </div>
        <div class="legend">
          <div class="row">
            <span>已闭合</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ safetyPatrolInspection.todayRectificationNum || 0 }}</span>
            <span
              >{{ safetyPatrolInspection.todayRectificationRatio || 0 }}%</span
            >
          </div>
        </div>
        <div class="legend">
          <div class="row">
            <span>未闭合</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{
              safetyPatrolInspection.todayNoRectificationRatio || 0
            }}</span>
            <span
              >{{
                safetyPatrolInspection.todayNoRectificationRatio || 0
              }}%</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="security-list">
      <div class="thead">
        <div class="row">
          <div class="td">事件类型</div>
          <div class="td">检查时间</div>
          <div class="td">处理状态</div>
        </div>
      </div>
      <div class="tbody">
        <vue-scroll>
          <div
            class="row"
            :class="fmtStatusColor(item.status)"
            v-for="(item, index) in detailData"
            :key="index"
          >
            <div class="td">{{ item.checkContent }}</div>
            <div class="td">{{ item.createTime }}</div>
            <div class="td" :class="fmtStatusColor(item.status)">
              {{ fmtStatus(item.status) }}
            </div>
          </div>
          <div
            class="row"
            v-if="
              safetyPatrolInspection.hiddenDangerInspectRecordList.length == 0
            "
          >
            <div
              style="
                font-size: 14px;
                color: #999;
                text-align: center;
                width: 100%;
                line-height: 200px;
              "
            >
              暂无数据
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
  </Card>
</template>

<script>
import {
  getAllTodayDataHdirApi,
  getTodayInspectionInfo,
} from "@/assets/js/api/zhongjianFourth";
import { gethiddenDangerInspectRecordApi } from "@/assets/js/api/safeManage.js";
import { mapState } from "vuex";

import Card from "../components/Card.vue";
import JRingChart from "../../common/jChart/pie/JRingChart.vue";
export default {
  components: { Card, JRingChart },
  data() {
    return {
      safetyPatrolInspection: {
        hiddenDangerInspectRecordList: [],
      },
      // 安全隐患
      safetyPeril: {
        rectificationNum: 0,
        rectificationRatio: 0,
        noRectificationNum: 0,
        noRectificationRatio: 0,
        totalNum: 0,
      },
      // 今日巡检
      todayInspection: {
        rectificationNum: 0,
        rectificationRatio: 0,
        noRectificationNum: 0,
        noRectificationRatio: 0,
        totalNum: 0,
      },
      // 事件列表
      list: [
        { type: 1, datetime: "2022-02-02 13:39:09", status: 1 },
        { type: 2, datetime: "2022-02-02 13:39:09", status: 2 },
        { type: 3, datetime: "2022-02-02 13:39:09", status: 3 },
        { type: 1, datetime: "2022-02-02 13:39:09", status: 1 },
      ],
      //隐患类型
      detailData: [],
    };
  },
  created() {
    // this.getSafetyPerilInfo()
    this.getTodayInspectionInfo();
    this.getAllTodayDataHdir();
    this.loadList();
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  methods: {
    //隐患事件类型
    loadList() {
      gethiddenDangerInspectRecordApi({ projectSn: this.projectSn }).then(
        (result) => {
          console.log("隐患事件类型数据", result.result);
          this.detailData = result.result.records;
          // result.result.records.forEach(item=>{
          //    this.detailData.push(item.checkContent)
          // })
        }
      );
    },
    getAllTodayDataHdir() {
      getAllTodayDataHdirApi({ projectSn: this.projectSn }).then((res) => {
        console.log(res, "getAllTodayDataHdir");
        this.safetyPatrolInspection = res.result;
      });
    },
    // /** 查询安全隐患数据 */
    // getSafetyPerilInfo() {
    //   getSafetyPerilInfo({ projectSn: this.projectSn }).then(res => {
    //     console.log('查询安全隐患数据: ', res);
    //     const safetyPeril = this.safetyPeril;
    //     Object.keys(safetyPeril).forEach(key => {
    //       safetyPeril[key] = res.result[key];
    //     })
    //   })
    // },
    /** 查询今日巡检数据 */
    getTodayInspectionInfo() {
      getTodayInspectionInfo({ projectSn: this.projectSn }).then((res) => {
        console.log("查询今日巡检数据: ", res);
        const todayInspection = this.todayInspection;
        Object.keys(todayInspection).forEach((key) => {
          todayInspection[key] = res.result[key];
        });
      });
    },
    fmtType(type) {
      return type == 1 ? "隐患问题" : type == 2 ? "排查记录" : "";
      // return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
    },
    fmtStatus(status) {
      return status === 1
        ? "无需整改"
        : status === 2
        ? "待整改"
        : status === 3
        ? "待复查"
        : status === 4
        ? "合格"
        : status === 5
        ? "不合格"
        : "";
    },
    fmtStatusColor(status) {
      return status === 1
        ? "orange"
        : status === 2
        ? "green"
        : status === 3
        ? "blue"
        : "";
    },
  },
};
</script>

<style lang="less" scoped>
.charts {
  margin-top: 2%;
  height: 47%;
  display: flex;
  color: #fff;

  .dllm {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .woria {
      width: 100%;
      height: calc(100% - 92px);
    }

    .legend {
      position: relative;
      width: 100px;

      &::before {
        content: "";
        position: absolute;
        top: 1px;
        left: -10px;
        width: 6px;
        height: 6px;
      }

      &:nth-child(2)::before {
        width: 12px;
        height: 12px;
        background-color: #6ee4ef;
      }

      &:nth-child(3)::before {
        width: 12px;
        height: 12px;
        background-color: #e7622a;
      }

      .row {
        display: flex;

        span {
          text-align: center;

          &:first-child {
            width: 60%;
          }

          &:last-child {
            width: 40%;
          }
        }

        &:first-child {
          font-size: 14px;
        }

        &:last-child {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #6ae3eb;
        }
      }
    }
  }
}

.security-list {
  margin-top: 3%;
  height: 48%;
  color: #fff;

  .thead {
    color: #6ae3eb;
    margin-bottom: 5px;
  }

  .tbody {
    height: calc(100% - 50px);
    font-size: 12px;
  }

  .row {
    width: 98%;
    height: 50px;
    line-height: 50px;
    display: flex;

    &.orange {
      //background: linear-gradient(90deg, #356f83, #213c4f);
      &::before {
        content: "";
        // width: 4px;
        // height: 100%;
        // background-color: #67d4d9;
      }
    }

    .td {
      text-align: center;
      text-overflow: ellipsis;

      overflow: hidden;

      white-space: nowrap;
      cursor: pointer;

      &:nth-child(1) {
        width: 35%;
      }

      &:nth-child(2) {
        width: calc(30% - -38px);
      }

      &:nth-child(3) {
        width: 70px;
      }

      &.orange {
        color: #e7622a;
      }

      &.green {
        color: #40cdad;
      }

      &.blue {
        color: #64ccd9;
      }
    }
  }
}
</style>