zhgdyun/src/views/projectAdmin/fourEngin/command/rightTwo.vue

<template>
  <Card title="质量管理">
    <div class="container">
      <div class="left">
        <div class="image">
            <img src="../assets/images/common/quality.gif" alt="">
            <div class="value">
              <span class="number">{{ qualityProblem.totalNum || 0 }}</span>
            </div>
        </div>
        <div class="unit">
          <span>质量管理总数</span>
        </div>
      </div>
      <!-- <div class="left" ref="chart" style="transform: translateY(5px)"></div> -->
      <div class="right">
        <div class="top">
          <div class="left" :class=" tab==2 ? 'click' : ''" >
            <span class="label" @click="already(2)">已整改</span>
            <span class="value"
              >({{ qualityProblem.rectificationNum || 0 }})</span
            >
          </div>
          <div class="right" :class=" tab==5 ? 'click' : ''">
            <span class="label" @click="already(5)">未整改</span>
            <span class="value"
              >({{ qualityProblem.noRectificationNum || 0 }})</span
            >
          </div>
        </div>
        <vue-scroll style="flex: 1; position: relative">
          <div class="list" v-if="list.length">
            <div class="list-item" v-for="(item, index) in list" :key="index">
              <span class="label">{{ branchNewItem(item.dangerName) }}</span>
              <!-- <span class="value">{{ item.content }}</span> -->
            </div>
          </div>
          <div
            v-else
            class="empty"
            style="
              position: absolute;
              left: 55%;
              top: 40%;
              transform: translate(-50%, -50%);
            "
          >
            <img src="@/assets/images/noData3.png" />
            <div style="text-align: center; color: #5b626b; font-size: 14px">
              暂无数据
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card";
import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
import { getInspectionRecordListApi } from "@/assets/js/api/quality.js";
import {
  qualityManagement,
} from "@/assets/js/api/zhongjianFourth";

import { mapState } from "vuex";

export default {
  components: { Card, JNestedRingChart },
  data() {
    return {
      projectSn:"",
      tab : 2,
      show:true,
      recordStatus: 2, // 整改状态   2已整改（已闭合） 5待整改
      // 质量问题
      qualityProblem: {
        rectificationNum: undefined, // 整改数量
        noRectificationNum: undefined, // 未整改数量
        totalNum: undefined, // 总数量
      },
      list: [],
      titObj: {
        text: 0,
        y: "30%",
        subTitle: "质量问题数",
        color1: "#FFC303",
        size1: "38",
        size2: "14",
      },
      series: [
        {
          radius: ["0%", "60%"],
          color: "#070a16",
          startAngle: 90,
          data: [100],
        },
        {
          roseType: "area",
          radius: ["60%", "65%"],
          color: ["#66d4d9", "#47939a"],
          data: [50, 50],
          startAngle: 90,
        },
        {
          radius: ["65%", "73%"],
          color: "#070a16",
          startAngle: 90,
          data: [100],
        },
        {
          radius: ["73%", "85%"],
          color: ["#65d3d8", "#e5612a"],
          startAngle: 90,
          data: [
            { value: 0, name: "未整改质量问题" },
            { value: 0, name: "已整改质量问题" },
          ],
        },
      ],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn
  },
  mounted() {
    this.getQualityProblem();
    this.getQuality();
  },
  watch: {
    recordStatus: {
      deep: true,
      handler(n, o) {
        if (n != o) {
          this.getQuality();
        }
      },
    },
  },
  methods: {
    branchNewItem(val){
        var item = val.split('/')
        var ind = item.length - 1
        console.log("6666666666666",item);
        console.log("6666666666666",ind);
        console.log("6666666666666",item[ind]);
        return item[ind]
    },
    /** 查询列表 */
    getQualityProblem() {
      this.show = false
      qualityManagement({ projectSn: this.projectSn }).then((res) => {
        console.log("质量管理: ", res);
        if (res.code == 200) {
          this.titObj.text = res.result.totalNum;
          console.log('this.titObj.text',this.titObj.text)
          this.show = true
          this.series[3].data[0].value = res.result.noRectificationNum;
          this.series[3].data[1].value = res.result.rectificationNum;
          const qualityProblem = this.qualityProblem;
          Object.keys(qualityProblem).forEach((key) => {
            qualityProblem[key] = toString(res.result[key]);
          });
          function toString(value) {
            if (typeof value === "string") return value;
            return value.toString();
          }
        }
      });
    },
    already(val) {
      this.recordStatus = val;
      this.tab = val
    },
    getQuality() {
      getInspectionRecordListApi({
        projectSn: this.projectSn,
        recordStatus: this.recordStatus,
      }).then((res) => {
        if (res.code == 200) {
          console.log("查看整改问题", res);
          this.list = res.result.page.records.map((item) => {
              return { dangerName: item.dangerItemContent };
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  box-sizing: border-box;
  padding: 10px 0;

  width: 100%;
  height: 100%;

  > .left {
    width: 40%;
    height: 100%;
  }

  > .right {
    display: flex;
    flex-direction: column;
    width: 50%;
    .top {
      cursor: pointer;
      display: flex;
      padding: 5px 0;
      color: #fff;
      font-size: 14px;
      white-space: nowrap;
      line-height: 25px;
      margin-left: 55px;
      // .left {
      //   color: #af5320;
      //   transform: translateX(-10%);
      // }
      .click{
        color: #af5320;
      }
    }

    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      color: #fff;
      overflow-y: scroll;

      .list-item {
        position: relative;
        display: flex;
        box-sizing: border-box;
        border-left: 4px solid #66d3d8;
        margin-bottom: 2px;
        padding: 6px 0;
        width: 100%;
        background-image: linear-gradient(to right, #3b7589, #182337);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
        white-space: nowrap;

        &:hover {
          //   padding: 15px 0;
          //   margin-top: 2px;
          //   margin-bottom: 4px;
          //   &::before {
          //     content: "";
          //     position: absolute;
          //     top: 50%;
          //     left: 6px;
          //     display: inline-block;
          //     transform: translate(0, -50%);
          //     width: 6.6px;
          //     height: 11.6px;
          //     background-image: url("../assets/images/command-center/triangle.png");
          //     background-size: 100% 100%;
          //     transition: all 0.3s;
          //   }
          // .value {
          //   color: #c2805f;
          // }
        }

        &:last-child {
          margin-bottom: 0;
        }

        .label,
        .value {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .label {
          box-sizing: border-box;
          width: 100%;
          padding-left: 20px;
        }

        .value {
          width: 60%;
        }
      }
    }
  }
  .image {
        display: grid;
        place-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        img {
          height: 140px;
          margin-bottom: 30px;
        }
        .value {
          position: absolute;
          font-size: 23px;
          margin: 0px 0 30px 0;
        }
      }
      .unit{
        margin: -20px 0 0px 36px;
      }
}
</style>