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.allTotalNum-safetyPatrolInspection.allRectificationNum}}</span>
            <span>{{(100-safetyPatrolInspection.allRectificationRatio).toFixed(2)}}%</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: '已巡检',
              },
            
            ]"
            :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>{{
               0
            }}</span>
            <span
              >{{
                 0
              }}%</span
            >
           
          </div>
        </div>
      </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: 90%;
  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;
        }
      }
    }
  }
}


</style>