thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheServer.vue

<template>
  <div class="OverallOverviewOfTheServer">
<!--     <div>
      <headTitle style="margin-top: 40px; margin-bottom: 10px;" title="整体概览" />
    </div> -->
    <table>
      <tr>
        <td class="first" colspan="1" rowspan="2">
          <canvas
            ref="myCanvas"
            style="border:0px solid #d3d3d3;height: max-content;width:inherit; display: block;"
          />
          <span class="title1">指标</span>
          <span class="title2">业务线</span>
        </td>
        <td colspan="3" class="color_1">线上质量</td>
        <td colspan="5" class="color_2">发布</td>
        <td colspan="8" class="color_3">线下质量及研究效率</td>
      </tr>
      <tr>
        <td class="col color_1_sub">P5+</td>
        <td class="col color_1_sub">P6</td>
        <td class="col color_1_sub">非定级</td>
        <td class="col color_2_sub">全量回滚数</td>
        <td class="col color_2_sub">小流量回滚数</td>
        <td class="col color_2_sub">裸奔上线数</td>
        <td class="col color_2_sub">免测上线数</td>
        <td class="col color_2_sub">上线数</td>
        <td class="col color_3_sub">P0问题</td>
        <td class="col color_3_sub">P1问题</td>
        <td class="col color_3_sub">P0&P1平均修复时长</td>
        <td class="col color_3_sub">Reopen次数</td>
        <td class="col color_3_sub">提测打回</td>
        <td class="col color_3_sub">准出不通过</td>
        <td class="col color_3_sub">提测延期</td>
        <td class="col color_3_sub">发布延期</td>
      </tr>
      <tr v-for="(item, index) in tableList" :key="index">
        <td style="color: #333333;font-weight: 500;">{{ item.name }}</td>
        <td
          v-for="(elm, elmIndex) in item.tableRow"
          :key="elmIndex"
          :class="{ col_red: isShowColor(elmIndex, elm) }"
        >
          {{ elm }}
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { getOverallOverview } from '@/api/qualityMonthlyReport/edit'
// import headTitle from '@/components/headTitle'

export default {
  name: 'OverallOverviewOfTheServer',
  // components: {
  //   headTitle
  // },
  data() {
    return {
      tableList: null
    }
  },
  mounted() {
    this.init()
    this.setCanvas()
  },
  methods: {
    async init() {
      // this.$route.query.reportId
      const res = await getOverallOverview(this.$route.query.reportId)
      // const res = await getOverallOverview(4)
      // console.log(res.data)
      this.tableList = res.data
    },
    setCanvas() {
      var c = this.$refs.myCanvas
      var ctx = c.getContext('2d')
      ctx.fillStyle = '#e9e9e9'
      ctx.lineWidth = 2
      ctx.strokeStyle = '#e9e9e9'
      ctx.moveTo(0, 0)
      ctx.lineTo(c.clientHeight * 3 + 20, c.clientWidth * 3)
      ctx.stroke()
    },
    isShowColor(index, value) {
      if (index === 0 || index === 3 || index === 8 || index === 11 || index === 12 || index === 13 || index === 14 || index === 15) {
        return value > 0
      }
      return false
    }
  }
}
</script>
<style lang="less" scoped>
.OverallOverviewOfTheServer {
  margin-top: 30px;
  table {
    border-collapse: collapse;
    width: 100%;
  }

  table,
  tr,
  td {
    border: 1px solid #e9e9e9;
  }

  td {
    text-align: center;
    height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
    position: relative;
  }
  td[class='first'] {
    width: 80px;
    min-width: 80px;
    background-color: rgba(214, 214, 214, 0.12);
    color: #333333;
    font-weight: 500;
  }
  // td[class='first']:before {
  //   content: '';
  //   position: absolute;
  //   width: 1px;
  //   height: 104px;
  //   top: 0;
  //   left: 0;
  //   background-color: #000;
  //   display: block;
  //   transform: rotate(-75deg);
  //   transform-origin: top;
  //   -ms-transform: rotate(-75deg);
  //   -ms-transform-origin: top;
  // }
  // td[class='first']:after {
  //   content: '';
  //   position: absolute;
  //   width: 1px;
  //   height: 140px;
  //   top: 0;
  //   left: 0;
  //   background-color: #e9e9e9;
  //   display: block;
  //   transform: rotate(-34deg);
  //   transform-origin: top;
  //   -ms-transform: rotate(-34deg);
  //   -ms-transform-origin: top;
  // }
  td.col {
    min-width: 40px;
    // height: 67px;
    //width: 100%;
    padding: 10px;
    color: #333333;
    font-weight: 500;
  }
  .title1 {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .title2 {
    position: absolute;
    bottom: 12px;
    left: 12px;
  }
  .color_1 {
    color: #333333;
    font-weight: 500;
    background: rgba(250, 173, 20, 0.15);
  }
  .color_1_sub {
    background: rgba(250, 173, 20, 0.08);
  }
  .color_2 {
    color: #333333;
    font-weight: 500;
    background: rgba(250, 126, 20, 0.15);
  }
  .color_2_sub {
    background: rgba(250, 126, 20, 0.08);
  }
  .color_3 {
    color: #333333;
    font-weight: 500;
    background: rgba(98, 217, 170, 0.15);
  }
  .color_3_sub {
    background: rgba(98, 217, 170, 0.08);
  }
  .col_red {
    color: #f5222d;
  }
}
</style>