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

<template>
  <el-row
    v-loading="loading"
    :gutter="10"
    class="qualityModule"
  >
    <el-col :span="9">
      <div class="itemBox onlineProblem" style="height: 470px">
        <div class="titleLevel3 mb10">线上问题</div>
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in mainData.onlineProblemList"
            :key="index"
            :span="12"
            class="mb10"
          >
            <div
              :style="{ cursor: item.label == '新增问题' && 'pointer'}"
              @click.stop="onDetial('线上问题', item)"
            >
              <dataItem :item="item" />
            </div>
          </el-col>
        </el-row>
        <div class="chartSearchbar inlineBetween mt15">
          <div style="width: 200px">
            <span style="margin-right: 10px">分布类型:</span>
            <el-select
              v-model="onlineProblemViweType"
              size="small"
              filterable
              style="width: 115px"
              @change="$emit('search', { onlineProblemViweType })"
            >
              <el-option v-for="(t, index) in onlineProblemSelect" :key="index" :label="t" :value="t" />
            </el-select>
          </div>
        </div>
        <div v-loading="onlineLoading" class="chartViewHeight">
          <normal-echart v-if="onlineProblemChartOption" :chart-id="'chart1'" :option="onlineProblemChartOption" @onClick="changeList" />
        </div>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="itemBox quality" style="height: 470px">
        <div class="titleLevel3 mb10">线下质量</div>
        <el-row :gutter="10">
          <el-col v-for="(item, index) in mainData.offlineProblemList" :key="index" :span="12" class="mb10">
            <div
              :style="{ cursor: 'pointer'}"
              @click.stop="onDetial('线下质量', item)"
            >
              <dataItem :item="item" />
            </div>
          </el-col>
        </el-row>
        <div class="chartSearchbar inlineBetween mt15">
          <div style="width: 200px">
            <span style="margin-right: 10px">分布类型:</span>
            <el-select
              v-model="offlineProblemViweType"
              size="small"
              filterable
              style="width: 115px"
              @change="$emit('search', { offlineProblemViweType })"
            >
              <el-option v-for="(t, index) in offlineProblemSelect" :key="index" :label="t" :value="t" />
            </el-select>
          </div>
        </div>
        <div v-loading="offlineLoading" class="chartViewHeight">
          <normal-echart v-if="offlineProblemChartOption" :chart-id="'chart2'" :option="offlineProblemChartOption" @onClick="changeList" />
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="itemBox progress" style="min-height: 328px">
        <div class="titleLevel3 mb10">上线过程</div>
        <el-row v-if="mainData.onlineProcessList" :gutter="10">
          <el-col v-for="(item, index) in mainData.onlineProcessList.list" :key="index" :span="12" class="mb10">
            <dataItem :item="item" />
          </el-col>
        </el-row>
        <el-divider class="divider" />
        <el-row
          v-if="mainData.onlineProcessList"
          :gutter="10"
          class="rollBack"
          style="margin-top: 40px"
        >
          <el-col :span="12" class="mb10">
            <span class="rollBackItem">
              <span class="bigCircle" style="background: #7ED321" />
              回滚
              <span class="numText" style="font-size: 20px">{{ mainData.onlineProcessList.rollBack.countStr.countStr }}</span>
              次
            </span>
          </el-col>
          <el-col :span="12" class="mb10">
            <div class="rollBackItem">
              <span class="circle" style="background: #3F9DFE" />
              预发回滚
              <span class="numText">{{ mainData.onlineProcessList.rollBack.preCountStr.countStr }}</span>
              次
            </div>
            <div class="rollBackItem">
              <span class="circle" style="background: #3F9DFE" />
              全量回滚
              <span class="numText">{{ mainData.onlineProcessList.rollBack.fullCountStr.countStr }}</span>
              次
            </div>
            <div class="rollBackItem">
              <span class="circle" style="background: #3F9DFE" />
              小流量回滚
              <span class="numText">{{ mainData.onlineProcessList.rollBack.lowCountStr.countStr }}</span>
              次
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="itemBox progress" style="margin-top: 20px; height: 122px;">
        <div class="titleLevel3 mb10">移动端发布质量</div>
        <el-row :gutter="10">
          <el-col v-for="(item, index) in mainData.mobilePublishQualityList" :key="index" :span="12" class="mb10">
            <dataItem :item="item" />
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import dataItem from '../dataItem'
import normalEchart from '@/components/chart/normalEchart'
import { getOption } from '@/utils/options'
export default {
  components: {
    dataItem,
    normalEchart
  },
  props: {
    datas: {
      type: Object,
      required: true,
      default: () => {}
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    onlineLoading: {
      type: Boolean,
      required: false,
      default: false
    },
    offlineLoading: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      itemList: [
        {
          'innerColor': '#F5222D',
          'outColor': '#F5DDE2',
          'title': '123',
          'subTitle': '123',
          'bgColor': '#F5F7FC'
        },
        {
          'innerColor': '#FAAD14',
          'outColor': '#F7ECDA',
          'title': '',
          'subTitle': '',
          'bgColor': '#F5F7FC'
        },
        {
          'innerColor': '#C97DE9',
          'outColor': '#EFE5FA',
          'title': '',
          'subTitle': '',
          'bgColor': '#F5F7FC'
        },
        {
          'innerColor': '#7ED321',
          'outColor': '#E4F2DC',
          'title': '',
          'subTitle': '',
          'bgColor': '#F5F7FC'
        }
      ],
      redObj: {
        'innerColor': '#F5222D',
        'outColor': '#F5DDE2',
        'bgColor': '#F5F7FC'
      },
      yellowObj: {
        'innerColor': '#FAAD14',
        'outColor': '#F7ECDA',
        'bgColor': '#F5F7FC'
      },
      purpleObj: {
        'innerColor': '#C97DE9',
        'outColor': '#EFE5FA',
        'bgColor': '#F5F7FC'
      },
      greenObj: {
        'innerColor': '#7ED321',
        'outColor': '#E4F2DC',
        'bgColor': '#F5F7FC'
      },
      onlineProblemSelect: ['日期', '等级', '影响业务方'],
      offlineProblemSelect: ['日期', '等级', '责任人', '发现阶段'],
      offlineProblemViweType: '日期',
      onlineProblemViweType: '日期',
      onlineProblemChartOption: null,
      offlineProblemChartOption: null,
      echartsOption1: null,
      viewType: null,
      mainData: {}
    }
  },
  watch: {
    datas(newVal, oldVal) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        this.resetBaseData()
      }
    }
  },
  mounted() {
    this.resetBaseData()
  },
  methods: {
    onDetial(name, item) {
      if (name === '线上问题' && item.label === '新增问题' || name === '线下质量') {
        this.$emit('checkDetialModal', item)
      }
    },
    resetBaseData() {
      const {
        onlineProblemList,
        onlineProblemChart,
        offlineProblemList,
        offlineProblemChart,
        onlineProcessList,
        mobilePublishQualityList
      } = this.datas
      const {
        onlineProblemChart: mainDataOnlineProblemChart,
        offlineProblemChart: mainDataOfflineProblemChart
      } = this.mainData
      // 线上问题表
      if (onlineProblemList) {
        this.mainData = { ...this.mainData, onlineProblemList: this.getOnlineProblemList() }
      }
      // 线上问题图
      if (JSON.stringify(onlineProblemChart) !== JSON.stringify(mainDataOnlineProblemChart)) {
        const { xaxis, yaxis } = onlineProblemChart
        this.onlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 6 })
        this.mainData = { ...this.mainData, onlineProblemChart }
      }
      // 线下质量表
      if (offlineProblemList) {
        this.mainData = { ...this.mainData, offlineProblemList: this.getOfflineProblemList() }
      }
      // 线下质量图
      if (JSON.stringify(offlineProblemChart) !== JSON.stringify(mainDataOfflineProblemChart)) {
        const { xaxis, yaxis } = offlineProblemChart
        this.offlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 6 })
        this.mainData = { ...this.mainData, offlineProblemChart }
      }
      // 上线过程
      if (onlineProcessList) {
        this.mainData = { ...this.mainData, onlineProcessList: this.getOnlineProcessList() }
      }
      // 移动端发布质量
      if (mobilePublishQualityList) {
        this.mainData = { ...this.mainData, mobilePublishQualityList: this.getMobilePublishQualityList() }
      }
    },
    // 组织线上问题表数据
    getOnlineProblemList() {
      const { ImprovementsOverRate, depleteUnavailableTime, newOnlineProblems, onlineBreakRate } = this.datas.onlineProblemList
      return [
        {
          ...this.redObj,
          'label': newOnlineProblems.label,
          'title': newOnlineProblems.countStr,
          'titleUnit': '个',
          'subTitleUnit': 'rate',
          'subTitle': newOnlineProblems.chainRatio,
          'IdList': newOnlineProblems.idList
        },
        {
          ...this.yellowObj,
          'label': depleteUnavailableTime.label,
          'title': depleteUnavailableTime.countStr,
          'titleUnit': '分',
          'subTitleUnit': 'rate',
          'subTitle': depleteUnavailableTime.chainRatio,
          'IdList': depleteUnavailableTime.IdList
        },
        {
          ...this.purpleObj,
          'label': onlineBreakRate.label,
          'title': onlineBreakRate.countStr,
          'titleUnit': '%',
          'subTitleUnit': 'rate',
          'subTitle': onlineBreakRate.chainRatio,
          'IdList': onlineBreakRate.IdList
        },
        {
          ...this.greenObj,
          'label': ImprovementsOverRate.label,
          'title': ImprovementsOverRate.countStr,
          'titleUnit': '%',
          'subTitleUnit': 'rate',
          'subTitle': ImprovementsOverRate.chainRatio,
          'IdList': ImprovementsOverRate.IdList
        }
      ]
    },
    // 线下质量数据
    getOfflineProblemList() {
      const { newBug, reopen, testBackRate, releaseNopass } = this.datas.offlineProblemList
      return [
        {
          ...this.redObj,
          'label': newBug.label,
          'title': newBug.countStr,
          'titleUnit': '个',
          'subTitleUnit': 'rate',
          'subTitle': newBug.chainRatio,
          'IdList': newBug.idList
        },
        {
          ...this.yellowObj,
          'label': reopen.label,
          'title': reopen.countStr,
          'titleUnit': '次',
          'subTitleUnit': 'rate',
          'subTitle': reopen.chainRatio,
          'IdList': reopen.idList
        },
        {
          'color': '#3F9DFE',
          'bgColor': '#F5F7FC',
          'label': testBackRate.label,
          'title': testBackRate.countStr,
          'titleUnit': '%',
          'subTitleUnit': 'rate',
          'subTitle': testBackRate.chainRatio,
          'IdList': testBackRate.idList,
          'remark': testBackRate.remark,
          'type': 'circle'
        },
        {
          'color': '#7ED321',
          'bgColor': '#F5F7FC',
          'label': releaseNopass.label,
          'title': releaseNopass.countStr,
          'titleUnit': '%',
          'subTitleUnit': 'rate',
          'subTitle': releaseNopass.chainRatio,
          'IdList': releaseNopass.idList,
          'remark': releaseNopass.remark,
          'type': 'circle'
        }
      ]
    },
    // 上线过程数据
    getOnlineProcessList() {
      const { online, testFreeOnlineRate, onlinebyStreakingRate, rollBack } = this.datas.onlineProcessList
      return {
        'list': [
          {
            'innerColor': '#3F9DFE',
            'outColor': '#E2F0FF',
            'padding': '8px 0px',
            'label': online.label,
            'title': online.countStr,
            'titleUnit': '次',
            'IdList': online.idList
          },
          {
            'innerColor': '#7ED321',
            'outColor': '#E4F2DC',
            'padding': '8px 0px',
            'label': testFreeOnlineRate.label,
            'title': testFreeOnlineRate.countStr,
            'titleUnit': '%',
            'IdList': testFreeOnlineRate.idList
          },
          {
            'innerColor': '#F5222D',
            'outColor': '#F5DDE2',
            'padding': '8px 0px',
            'label': onlinebyStreakingRate.label,
            'title': onlinebyStreakingRate.countStr,
            'titleUnit': '次',
            'IdList': onlinebyStreakingRate.idList
          }
        ],
        rollBack
      }
    },
    // 移动端发布质量数据
    getMobilePublishQualityList() {
      const {
        hotpacth
        // addIssue // 增发
      } = this.datas.mobilePublishQualityList
      return [
        {
          'innerColor': '#3F9DFE',
          'outColor': '#E2F0FF',
          'padding': '8px 0px',
          'label': hotpacth.label,
          'title': hotpacth.countStr,
          'titleUnit': '次',
          'IdList': hotpacth.IdList
        }
        // 增发次数暂时隐藏
        // {
        //   'innerColor': '#F5222D',
        //   'outColor': '#F5DDE2',
        //   'padding': '8px 0px',
        //   'label': addIssue.label,
        //   'title': addIssue.countStr,
        //   'titleUnit': '次',
        //   'IdList': addIssue.IdList
        // }
      ]
    },
    changeList() {}
  }
}
</script>
<style scoped lang='less'>
.qualityModule {
  .divider {
    margin: 0 0 15px 0;
  }
  .rollBack {
    height: 94px;
    display: flex;
    align-items: center;
    .rollBackItem {
      color: #666;
      margin-bottom: 10px;
      .numText {
        color: #409EFF;
        font-weight: 600;
      }
    }
    .circle {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      margin-right: 6px;
    }
    .bigCircle {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      margin-right: 6px;
    }
  }
  .itemBox {
    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
    padding: 10px 10px;
    border-radius: 6px;
  }
  .chartSearchbar {
    margin-top: 10px;
    //margin-bottom: 10px;
  }
  .chartViewHeight {
    height: 250px;
    // padding-left: 15px;
  }
}
</style>