thoth-frontend-test/src/views/dataBigManage/components/efficiencyModule/index.vue

<template>
  <el-row
    v-loading="loading"
    class="qualityModule"
  >
    <el-col :span="7">
      <div v-if="mainData.requirementData" class="itemBox" style="border-left-color: #3F9DFE; background: #F5FAFF">
        <div class="titleLevel3" style="color: #3F9DFE;">需求平均交付周期</div>
        <div class="content">
          <div class="item effic" style="color: #3F9DFE;">
            <span
              class="num"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.requirementData, activeLabel: mainData.requirementData.label }
              )"
            >{{ mainData.requirementData.countStr }}</span>
            <span class="unit">天</span>
          </div>
          <div class="item point">
            <span class="title">环比：</span>
            <span
              :class="Number(mainData.requirementData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.requirementData, activeLabel: mainData.requirementData.label }
              )"
            >
              <i v-if="Number(mainData.requirementData.chainRatio) > 0" class="el-icon-caret-top" />
              <i v-else class="el-icon-caret-bottom" />
              {{ mainData.requirementData.chainRatio }}%
            </span>
          </div>
        </div>
        <div class="foot">
          <div
            v-for="item in mainData.requirementData.subCountList"
            :key="item.label"
            class="item"
            @click.stop="$emit(
              'checkDetialModal',
              { ...mainData.requirementData, activeLabel: item.label }
            )"
          >
            <span class="title">{{ item.label }}：</span>
            <span class="value">
              <span class="num">{{ item.countStr }}</span>
              {{ item.unit }}
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="7">
      <div v-if="mainData.requirementPeopleData" class="itemBox" style="border-left-color: #7ED321; background: #F7FDF2">
        <div class="titleLevel3" style="color: #7ED321;">平均需求使用人力</div>
        <div class="content">
          <div class="item effic" style="color: #7ED321;margin-bottom: 20px;">
            <span
              class="num"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.requirementPeopleData, activeLabel: mainData.requirementPeopleData.label }
              )"
            >{{ mainData.requirementPeopleData.countStr }}</span>
            <span class="unit">人/日</span>
          </div>
          <div class="item point" style="margin-bottom: 20px;">
            <span class="title">环比：</span>
            <span
              :class="Number(mainData.requirementPeopleData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.requirementPeopleData, activeLabel: mainData.requirementPeopleData.label }
              )"
            >
              <i v-if="Number(mainData.requirementPeopleData.chainRatio) > 0" class="el-icon-caret-top" />
              <i v-else class="el-icon-caret-bottom" />
              {{ mainData.requirementPeopleData.chainRatio }}%
            </span>
          </div>
        </div>
        <div class="foot">
          <div
            v-for="item in mainData.requirementPeopleData.subCountList"
            :key="item.label"
            class="item"
            @click.stop="$emit(
              'checkDetialModal',
              { ...mainData.requirementPeopleData, activeLabel: item.label }
            )"
          >
            <span class="title">{{ item.label }}：</span>
            <span class="value">
              <span class="num">{{ item.countStr }}</span>
              {{ item.unit }}
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div v-if="mainData.bugAvgRepairData" class="itemBox" style="border-left-color: #F5222D; background: #FFF8F8">
        <div class="titleLevel3" style="color: #F5222D;">缺陷平均修复时长</div>
        <div class="content">
          <div class="item effic" style="color: #F5222D;">
            <span
              class="num"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.bugAvgRepairData, activeLabel: mainData.bugAvgRepairData.label }
              )"
            >{{ mainData.bugAvgRepairData.countStr }}</span>
            <span class="unit">h</span>
          </div>
          <div class="item point">
            <span class="title">环比：</span>
            <span
              :class="Number(mainData.bugAvgRepairData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.bugAvgRepairData, activeLabel: mainData.bugAvgRepairData.label }
              )"
            >
              <i v-if="Number(mainData.bugAvgRepairData.chainRatio) > 0" class="el-icon-caret-top" />
              <i v-else class="el-icon-caret-bottom" />
              {{ mainData.bugAvgRepairData.chainRatio }}%
            </span>
          </div>
        </div>
        <div class="foot">
          <div
            v-for="item in mainData.bugAvgRepairData.subCountList"
            :key="item.label"
            class="item"
            @click.stop="$emit(
              'checkDetialModal',
              { ...mainData.bugAvgRepairData, activeLabel: item.label }
            )"
          >
            <span class="title">{{ item.label }}：</span>
            <span class="value">
              <span class="num">{{ item.countStr }}</span>
              {{ item.unit }}
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div v-if="mainData.delayList" class="itemBox" style="border-left-color: #62D9AA; background: #62D9AA; color: #fff">
        <div v-for="item in mainData.delayList" :key="item.label" class="dataItemBox">
          <div
            :style="{ cursor: 'pointer'}"
            @click.stop="$emit('checkDetialModal', item)"
          >
            <dataItem
              :item="{
                'innerColor': '#62D9AA',
                'outColor': '#fff',
                'label': item.label,
                'labelColor': '#fff',
                'subTitle': `<span style=color:#fff;> 1%（${item.remark}）</span>`,
                'bgColor': 'transparent',
                'padding': '8px 0px'
              }"
            />
          </div>
        </div>
      </div>
    </el-col>
    <!-- 第二行 -->
    <el-col :span="7">
      <div v-if="mainData.taskData" class="itemBox" style="border-left-color: #FAAD14; background: #FFFAF1">
        <div class="titleLevel3" style="color: #FAAD14;">任务平均交付周期</div>
        <div class="content">
          <div class="item effic" style="color: #FAAD14;">
            <span
              class="num"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.taskData, activeLabel: mainData.taskData.label }
              )"
            >{{ mainData.taskData.countStr }}</span>
            <span class="unit">天</span>
          </div>
          <div class="item point">
            <span class="title">环比：</span>
            <span
              :class="Number(mainData.taskData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.taskData, activeLabel: mainData.taskData.label }
              )"
            >
              <i v-if="Number(mainData.taskData.chainRatio) > 0" class="el-icon-caret-top" />
              <i v-else class="el-icon-caret-bottom" />
              {{ mainData.taskData.chainRatio }}%
            </span>
          </div>
        </div>
        <div class="foot">
          <div
            v-for="item in mainData.taskData.subCountList"
            :key="item.label"
            class="item"
            @click.stop="$emit(
              'checkDetialModal',
              { ...mainData.taskData, activeLabel: item.label }
            )"
          >
            <span class="title">{{ item.label }}：</span>
            <span class="value">
              <span class="num">{{ item.countStr }}</span>
              {{ item.unit }}
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="7">
      <div
        v-if="Object.keys(mainData).filter(t => mainData[t]).length >= 7"
        class="itemBox"
        style="border-left-color: #999999; background: #FAFAFA"
      >
        <div class="empty">
          <svg-icon icon-class="empty" />
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div v-if="mainData.bugAvgOneDataRepairData" class="itemBox" style="border-left-color: #C97DE9; background: #FCF8FE">
        <div class="titleLevel3" style="color: #C97DE9;">缺陷24小时修复率</div>
        <div class="content">
          <div class="item effic" style="color: #C97DE9;">
            <span
              class="num"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.bugAvgOneDataRepairData, activeLabel: mainData.bugAvgOneDataRepairData.label }
              )"
            >{{ mainData.bugAvgOneDataRepairData.countStr }}</span>
            <span class="unit">%</span>
          </div>
          <div class="item point">
            <span class="title">环比：</span>
            <span
              :class="Number(mainData.bugAvgOneDataRepairData.chainRatio) > 0 ? 'item-up num' : 'item-down num'"
              @click.stop="$emit(
                'checkDetialModal',
                { ...mainData.bugAvgOneDataRepairData, activeLabel: mainData.bugAvgOneDataRepairData.label }
              )"
            >
              <i v-if="Number(mainData.bugAvgOneDataRepairData.chainRatio) > 0" class="el-icon-caret-top" />
              <i v-else class="el-icon-caret-bottom" />
              {{ mainData.bugAvgOneDataRepairData.chainRatio }}%
            </span>
          </div>
        </div>
        <div class="foot">
          <div
            v-for="item in mainData.bugAvgOneDataRepairData.subCountList"
            :key="item.label"
            class="item"
            @click.stop="$emit(
              'checkDetialModal',
              { ...mainData.bugAvgOneDataRepairData, activeLabel: item.label }
            )"
          >
            <span class="title">{{ item.label }}：</span>
            <span class="value">
              <span class="num">{{ item.countStr }}</span>
              {{ item.unit }}
            </span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div v-if="mainData.testDevPeopleScale" class="itemBox" style="border-left-color: #6394FA; background: #6394FA; color: #fff">
        <dataItem
          :item="{
            'innerColor': '#6394FA',
            'outColor': '#fff',
            'label': mainData.testDevPeopleScale.label,
            'labelColor': '#fff',
            'subTitle': `<span style=color:#fff;>${mainData.testDevPeopleScale.countStr}</span>`,
            'bgColor': 'transparent',
            'padding': '8px 0px'
          }"
        />
      </div>
    </el-col>
  </el-row>
</template>
<script>
import dataItem from '../dataItem'
export default {
  components: {
    dataItem
  },
  props: {
    datas: {
      type: Object,
      required: true,
      default: () => {}
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      mainData: {}
    }
  },
  watch: {
    datas(newVal) {
      this.resetBaseData()
    }
  },
  mounted() {
    this.resetBaseData()
  },
  methods: {
    resetBaseData() {
      const {
        efficiencyData
      } = this.datas
      if (efficiencyData) {
        this.mainData = efficiencyData
      }
    },
    changeList() {},
    changeTab(type, value) {
      this[type] = value
    }
  }
}
</script>
<style scoped lang='less'>
.qualityModule {
  // .itemBox {
    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
    padding: 5px 20px;
    border-radius: 6px;
    margin-bottom: 10px;
    .itemBox {
      height: 134px;
      border-left: 4px solid transparent;
      margin-bottom: 10px;
      border-radius: 6px;
      padding: 8px 10px;
      margin: 10px 10px;
      .empty {
        text-align: center;
        line-height: 134px;
        font-size: 50px;
      }
      .content {
        .item {
          display: inline-block;
          margin: 12px 16px 30px 0;
          .num {
            font-size: 18px;
            cursor: pointer;
          }
          .unit {
            font-size: 14px;
          }
        }
        .point {
          .title {
            font-size: 12px;
            color: #666;
          }
          .num {
            font-size: 12px;
          }
        }
      }
      .foot {
        .item {
          display: inline-block;
          // margin: 0 5px;
          font-size: 12px;
          color: #666;
          cursor: pointer;
          &:first-child {
            margin-left: 0;
          }
          .num {
            color: #333;
            font-weight: 600;
          }
          &::after {
            content: '|';
            color: #DDDFE5;
            margin: 0 7px 0 5px;
          }
          &:last-child::after {
            content: '';
          }
        }
      }
      .dataItemBox {
        &::after {
          content: '';
          display: block;
          color: #fff;
          width: 100%;
          height: 1px;
          background: #fff;
          opacity: 0.7;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
    .item-up {
      color:#F32850
    }
    .item-down {
      color:#9FFF39
    }
}
</style>