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

<template>
  <Card title="质量管理">
    <div class="container">
      <div class="left">
        <JNestedRingChart
          :title="{
            text: '56',
            y: '35%',
            subTitle: '质量问题数',
            color1: '#FFC303',
            size1: '38',
            size2: '14',
          }"
          :series="series"
          :legend="{ show: false }"
        />
      </div>
      <!-- <div class="left" ref="chart" style="transform: translateY(5px)"></div> -->
      <div class="right">
        <div class="top">
          <div class="left">
            <span class="label">已整改质量问题</span>
            <span class="value"
              >({{ qualityProblem.rectificationNum || 0 }})</span
            >
          </div>
          <div class="right">
            <span class="label">未整改质量问题</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">{{ item.dangerName }}</span>
              <!-- <span class="value">{{ item.content }}</span> -->
            </div>
          </div>
          <div
            v-else
            class="empty"
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              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 echarts from "echarts4";

import {
  qualityManagement,
  listQualityManagement,
} from "@/assets/js/api/zhongjianFourth";

import { mapState } from "vuex";

export default {
  components: { Card, JNestedRingChart },
  data() {
    return {
      // 质量问题
      qualityProblem: {
        rectificationNum: undefined, // 整改数量
        noRectificationNum: undefined, // 未整改数量
        totalNum: undefined, // 总数量
      },
      list: [
        { dangerName: "防水" },
        { dangerName: "门窗" },
        { dangerName: "钢结构工程" },
        { dangerName: "建筑装饰装修" },
        { dangerName: "主体结构" },
        { dangerName: "建筑电气" },
      ],
      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: 28, name: "未整改质量问题" },
            { value: 28, name: "已整改质量问题" },
          ],
        },
      ],
    };
  },
  created() {
    // this.getQualityProblem()
    // this.getList()
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  mounted() {
    // this.initChart()
  },
  methods: {
    /** 查询列表 */
    // getQualityProblem() {
    //   qualityManagement({ projectSn: this.projectSn }).then(res => {
    //     console.log('质量管理: ', res);
    //     const qualityProblem = this.qualityProblem;
    //     Object.keys(qualityProblem).forEach(key => {
    //       qualityProblem[key] = toString(res.result[key]);
    //     })
    //     this.initChart()
    //     function toString(value) {
    //       if (typeof value === 'string') return value
    //       return value.toString()
    //     }
    //   })
    // },
    // /**  */
    // getList() {
    //   listQualityManagement({ projectSn: this.projectSn }).then(res => {
    //     console.log('质量问题库: ', res);
    //     // this.list = res.result;
    //   })
    // },
    // /** 初始化chart */
    // initChart() {
    //   const myChart = echarts.init(this.$refs.chart)
    //   const option = {
    //     backgroundColor: '#182337', //整个背景图色
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     title: {
    //       text: '质量问题数',
    //       left: '40%',
    //       top: '55%',
    //       textAlign: 'center',
    //       textStyle: {
    //         fontSize: '14',
    //         color: '#8f929b',
    //         fontWeight: '400',
    //       }
    //     },
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: ['70%', '63%'],
    //         center: ['40%', '50%'],
    //         hoverAnimation: false,
    //         label: {
    //           normal: {
    //             position: 'center'
    //           }
    //         },
    //         data: [
    //           {
    //             value: this.qualityProblem.noRectificationNum || '0',
    //             name: '未整改质量问题',
    //             itemStyle: {
    //               normal: {
    //                 color: '#60d3d0'
    //               }
    //             },
    //             label: {
    //               normal: {
    //                 show: false
    //               }
    //             }
    //           },
    //           {
    //             value: this.qualityProblem.rectificationNum || '0',
    //             name: '已整改质量问题',
    //             tooltip: {
    //               show: true
    //             },
    //             itemStyle: {
    //               normal: {
    //                 color:  '#f25d17'
    //               }
    //             },
    //             label: {
    //               normal: {
    //                 formatter: this.qualityProblem.totalNum || '0', // 中间的数值
    //                 textStyle: {
    //                   fontSize: 36,
    //                   color: '#ffc30f',
    //                   // 调整label的位置
    //                   padding: [-30, 0, 0, 0]
    //                 }
    //               }
    //             }
    //           }
    //         ]
    //       },
    //       {
    //         name: '人员类型',
    //         type: 'pie',
    //         hoverAnimation: false,
    //         legendHoverLink: false,
    //         radius: ['57%', '55%'],
    //         center: ['40%', '50%'],
    //         color: ['#182337', '#60d3d0'],
    //         label: {
    //           normal: {
    //             position: 'inner'
    //           }
    //         },
    //         labelLine: {
    //           normal: {
    //             show: false
    //           }
    //         },
    //         tooltip: {
    //           show: false
    //         },
    //         data: [
    //           {
    //             value: 50,
    //             name: ''
    //           },
    //           {
    //             value: 50,
    //             name: ''
    //           },
    //         ]
    //       }
    //     ]
    //   }
    //   myChart.setOption(option)
    // }
  },
};
</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 {
      display: flex;
      padding: 5px 0;
      color: #fff;
      font-size: 14px;
      white-space: nowrap;
      line-height: 25px;
      .left {
        color: #af5320;
        transform: translateX(-10%);
      }
    }

    .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%;
        }
      }
    }
  }
}
</style>