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

<template>
  <el-row
    v-loading="loading"
    :gutter="20"
    class="throughputModule"
  >
    <el-col :span="6">
      <div class="itemBox whole throughput" style="background: #EEF0F5">
        <div class="tab">
          <span
            v-for="item in wholeTabList"
            :key="item"
            class="tabItem"
            :class="wholeTab === item && 'active'"
            @click="changeTab('wholeTab', item)"
          >{{ item }}</span>
        </div>
        <div class="list">
          <div
            v-for="item in mainData.throughputList"
            :key="item.pointer"
            class="listItem flex-center-between"
            @click.stop="$emit(
              'checkDetialModal',
              { list: [...mainData.throughputList], activeLabel: item.label }
            )"
          >
            <!-- <div v-html="item.text" />
            <div v-html="item.pointer" /> -->
            <div>
              {{ item.label }}
              <span :class="Number(item.chainRatio) > 0 ? 'textRed count' : 'textBlue count'">{{ item.countStr }}</span>
              <span>
                {{ item.label.includes('率') ? '%' : '个' }}
              </span>
            </div>
            <div class="throughputRate">
              <span>环比：</span>
              <span :class="Number(item.chainRatio) > 0 ? 'item-up' : 'item-down'">
                <i v-if="Number(item.chainRatio) > 0" class="el-icon-caret-top" />
                <i v-else class="el-icon-caret-bottom" />
                {{ item.chainRatio }}%
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="itemBox">
        <div class="titleLevel3 mb25">需求方向分布图</div>
        <div class="chartViewHeight">
          <normal-echart v-if="requirementDirectionChartOption" :chart-id="'chart3'" :option="requirementDirectionChartOption" @onClick="changeList" />
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="itemBox">
        <div class="titleLevel3 mb25">需求积压率</div>
        <div class="chartSearchbar inlineBetween mt15">
          <div style="width: 200px">
            <el-select
              v-model="requirementBacklogType"
              size="small"
              filterable
              style="width: 115px"
              @change="$emit('search', { requirementBacklogType })"
            >
              <el-option v-for="(t, index) in requirementBacklogOptionList" :key="index" :label="t" :value="t" />
            </el-select>
          </div>
        </div>
        <div class="chartViewHeight" style="height: 178px">
          <normal-echart v-if="requirementBacklogRateChartOption" :chart-id="'chart4'" :option="requirementBacklogRateChartOption" @onClick="changeList" />
        </div>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="itemBox">
        <div class="titleLevel3  mb25">版本需求</div>
        <div v-if="mainData.versionRequirementChart && mainData.versionRequirementChart.length > 0">
          <div class="tab">
            <el-select
              v-model="verTab"
              size="small"
              filterable
              style="width: 115px"
              @change="(e) => $emit('change', l.key, e)"
            >
              <el-option v-for="o in mainData.versionRequirementChart" :key="o.label" :label="o.label" :value="o.label" />
            </el-select>
          </div>
          <div class="chartViewHeight" style="height: 178px">
            <normal-echart v-if="versionRequirementChartOption[verTab]" :chart-id="'chart5'" :option="versionRequirementChartOption[verTab]" @onClick="changeList" />
          </div>
        </div>
        <div v-else style="height: 210px; font-size: 50px; text-align: center; padding-top: 20%;">
          <svg-icon icon-class="empty" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import normalEchart from '@/components/chart/normalEchart'
import { getOption } from '@/utils/options'
export default {
  components: {
    normalEchart
  },
  props: {
    datas: {
      type: Object,
      required: true,
      default: () => {}
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      requirementDirectionChartOption: null,
      requirementBacklogRateChartOption: null,
      versionRequirementChartOption: null,
      viewType: null,
      // verTabList: ['青桔端', '滴滴小程序'],
      verTab: '',
      wholeTabList: ['需求', '任务', '项目'],
      wholeTab: '需求',
      requirementBacklogOptionList: ['研发积压', '测试积压', '产品积压'],
      requirementBacklogType: '研发积压',
      mainData: {},
      needCheckDetialModalList: [
        '新增需求', '上线需求', '延期需求', '紧急需求率', '新增任务', '上线任务', '延期任务', '新增项目', '上线项目'
      ]
    }
  },
  watch: {
    datas() {
      this.resetBaseData()
    }
  },
  mounted() {
    this.resetBaseData()
  },
  methods: {
    resetBaseData() {
      const {
        throughputList, // 需求任务项目
        requirementDirectionChart, // 需求方向分布图
        requirementBacklogRateChart, // 积压率
        versionRequirementChart // 版本需求
      } = this.datas
      // 需求任务项目
      if (throughputList) {
        this.mainData = { ...this.mainData, throughputList }
      }
      if (requirementDirectionChart) {
        const { xaxis, yaxis } = requirementDirectionChart
        this.requirementDirectionChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 10 })
      }
      // 积压率
      if (requirementBacklogRateChart) {
        const { xaxis, yaxis } = requirementBacklogRateChart
        this.requirementBacklogRateChartOption = getOption(xaxis, yaxis[0].data, 'line', { endValue: 10 })
      }
      if (versionRequirementChart) {
        this.mainData = { ...this.mainData, versionRequirementChart }
        this.verTab = versionRequirementChart[0] && versionRequirementChart[0].label
        const obj = {}
        versionRequirementChart.forEach(t => {
          obj[t.label] = getOption(t.xaxis, t.yaxis[0].data, 'bar', { endValue: 10 })
        })
        this.versionRequirementChartOption = obj
      }
    },
    changeList() {},
    changeTab(type, value) {
      this[type] = value
      this.$emit('search', { [type]: value })
    }
  }
}
</script>
<style scoped lang='less'>
.throughputModule {
  .throughput {
    color: #333;
    .throughputRate {
      min-width: 100px;
    }
    .count {
      font-weight: 600;
    }
  }
  .item-up {
    color:#F32850
  }
  .item-down {
    color:#9FFF39
  }
  .itemBox {
    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
    padding: 10px 10px;
    border-radius: 6px;
    &.whole {
      padding: 10px 0px;
      height: 276px;
      .tab {
        padding: 0 20px;
      }
      .list {
        margin-top: 8px;
        .listItem {
          height: 38px;
          line-height: 38px;
          width: 100%;
          background: #fff;
          margin: 7px 0px;
          padding: 0 20px;
        }
      }
    }
    .tab {
      .tabItem {
        margin-right: 15px;
        cursor: pointer;
        &.active {
          color: #409EFF;
        }
      }
    }
  }
  .chartSearchbar {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .chartViewHeight {
    height: 210px;
    width: 100%;
  }
}
</style>