zhgdyun/src/views/projectAdmin/zjsj/command/rightOne.vue

<template>
  <Card title="安全管理">
    <div class="container">
      <div class="left">
        <div class="top">
          <div class="image">
            <img src="../assets/images/common/echart_orange.gif" alt="">
            <div class="value">
              <span class="number">{{ pollingData.closeRatio || 0 }}</span>
              <span class="unit">%</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <span class="label">已完成整改/巡检总数</span>
          <div class="value">
            <span class="number">{{ pollingData.rectificationNum || 0 }}</span>/<span class="number">{{ pollingData.totalNum || 0 }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="content">
          <div class="top-title">安全生产天数</div>

          <div class="days">
            <div class="number item">{{ days.kilobit || 0 }}</div>
            <div class="number item">{{ days.hundreds || 0 }}</div>
            <div class="number item">{{ days.decade || 0 }}</div>
            <div class="number item">{{ days.units || 0 }}</div>
            <div class="text item">天</div>
          </div>
          
          <div class="bottom">
            <span class="label">起始日期：</span>
            <div class="value">
              <span>{{ startDate.year }} </span>年
              <span>{{ startDate.month }} </span>月
              <span>{{ startDate.day }} </span>日
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'

import { resourceManagement } from '@/assets/js/api/zhongjianFourth'

import { mapState } from 'vuex'

export default {
  components: { Card },
  data() {
    return {
      // 巡检数据
      pollingData: {
        rectificationNum: undefined, // 完成整改数
        totalNum: undefined, // 巡检总数
        closeRatio: undefined, // 占比
        days: undefined, // 安全生产天数
        startWorkDate: undefined, // 起始日期 
      },
      // 天数
      days : {
        units: undefined,
        decade: undefined,
        hundreds: undefined,
        kilobit: undefined,
      },
      // 起始日期
      startDate: {
        year: undefined,
        month: undefined,
        day: undefined,
      },
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapState(['projectSn']),
  },
  methods: {
    /** 查询列表 */
    getList() {
      resourceManagement({ projectSn: this.projectSn }).then(res => {
        console.log('安全管理: ', res);
        const pollingData = this.pollingData;
        Object.keys(pollingData).forEach(key => {
          pollingData[key] = res.result[key]
        })
        
        pollingData.days = pollingData.days.toString()
        if (pollingData.days.length < 4) {
          pollingData.days = pollingData.days.padStart(4, 0)
          const days = this.days;

          days.units = pollingData.days[3];
          days.decade = pollingData.days[2];
          days.hundreds = pollingData.days[1];
          days.kilobit = pollingData.days[0];
        }

        const startDate = pollingData.startWorkDate.split('-');
        console.log('startDate: ', startDate);
        this.startDate.year = startDate[0]
        this.startDate.month = startDate[1]
        this.startDate.day = startDate[2]
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;

  .left {
    box-sizing: border-box;
    padding: 10px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    width: 50%;
    height: 100%;

    .top {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 150px;

      .image {
        display: grid;
        place-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        img {
          height: 150px;
        }
        .value {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 23px;
        }
      }
    }

    .bottom {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 13px;

      .number:nth-child(1) {
        color: #af5320;
      }

      .number:nth-child(2) {
        color: #fff;
      }
    }

    .label {
      font-size: 15px;
      color: #a5b2c0;
    }

    .value {
      color: #fff;
      font-size: 20px;
      text-align: center;
    }
  }

  .right {
    display: grid;
    place-items: center;
    width: 50%;
    height: 100%;

    .content {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      padding: 16px 6px 8px;
      width: 175px;
      height: 152px;
      background-image: url('../assets/images/command-center/max-block.png');

      .top-title {
        margin-bottom: 15px;
        font-size: 20px;
        color: #65b3b5;
        text-align: center;
      }

      .days {
        display: flex;
        .item {
          display: grid;
          place-items: center;
          width: 34px;
          height: 64px;
          color: #fff;
          font-size: 20px;
          &.number {
            background-image: url('../assets/images/command-center/block.png');
          }
          &.text {
            width: 28px !important;
            font-size: 17px;
          }
        }
      }

      .bottom {
        width: 100%;
        text-align: right;
        display: flex;
        color: #a5b2c0;
        font-size: 12px;
        white-space: nowrap;
        transform: scale(65%);
      }
    }
  }
}
</style>