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

<template>
  <Card title="安全巡检">
    <div class="charts">
      <div class="dllm">
        <div class="woria">
          <JRingChart
            :title="{ text: '安全隐患', subTitle: `${todayInspection.totalNum}件`, fontSize: 14 }"
            :color="['#6EE4F0', '#E7622A']"
            :data="[{ value: safetyPeril.rectificationNum, name:'已处理' }, { value: safetyPeril.noRectificationNum, name:'未处理' }]"
            :radius="['60%', '85%']"
            :legend="false"
          />
        </div>
        <div class="legend">
          <div class="row">
            <span>已处理</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ safetyPeril.rectificationNum || 0 }}</span>
            <span>{{ safetyPeril.rectificationRatio || 0 }}%</span>
          </div>
        </div>
        <div class="legend">
          <div class="row">
            <span>未处理</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ safetyPeril.noRectificationNum || 0 }}</span>
            <span>{{ safetyPeril.noRectificationRatio || 0 }}%</span>
          </div>
        </div>
      </div>
      <div class="dllm">
        <div class="woria">
          <JRingChart
            :title="{ text: '今日巡检', subTitle: `${todayInspection.totalNum}件`, fontSize: 14 }"
            :color="['#6EE4F0', '#E7622A']"
            :data="[{ value: todayInspection.rectificationNum, name:'已巡检' }, { value: todayInspection.noRectificationNum, name:'未巡检' }]"
            :radius="['60%', '85%']"
            :legend="false"
          />
        </div>
        <div class="legend">
          <div class="row">
            <span>已巡检</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ todayInspection.rectificationNum || 0 }}</span>
            <span>{{ todayInspection.rectificationRatio || 0 }}%</span>
          </div>
        </div>
        <div class="legend">
          <div class="row">
            <span>未巡检</span>
            <span>占比</span>
          </div>
          <div class="row">
            <span>{{ todayInspection.noRectificationNum || 0 }}</span>
            <span>{{ todayInspection.noRectificationRatio || 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 list" :key="index">
            <div class="td">{{ fmtType(item.type) }}</div>
            <div class="td">{{ item.datetime }}</div>
            <div class="td" :class="fmtStatusColor(item.status)">{{ fmtStatus(item.status) }}</div>
          </div>
        </vue-scroll>
      </div>
    </div>
  </Card>
</template>

<script>
import { getSafetyPerilInfo, getTodayInspectionInfo } from '@/assets/js/api/zhongjianFourth'
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 {
      // 安全隐患
      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 },
      ],
    }
  },
  created() {
    this.getSafetyPerilInfo()
    this.getTodayInspectionInfo()
  },
  computed: {
    ...mapState(['projectSn']),
  },
  methods: {
    /** 查询安全隐患数据 */
    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 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
    },
    fmtStatus(status) {
      return status === 1 ? '未处理' : status === 2 ? '已处理' : status === 3 ? '整改中' : '--'
    },
    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: 4px;
        left: -4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      &:nth-child(2)::before {
        background-color: #6ee4ef;
      }
      &:nth-child(3)::before {
        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;
      &:nth-child(1) {
        width: 28%;
      }
      &:nth-child(2) {
        width: calc(72% - 80px);
      }
      &:nth-child(3) {
        width: 80px;
      }
      &.orange {
        color: #e7622a;
      }
      &.green {
        color: #40cdad;
      }
      &.blue {
        color: #64ccd9;
      }
    }
  }
}
</style>