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

<template>
  <Card title="质量管理">
    <div class="container">
      <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 echarts from 'echarts4'

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

import { mapState } from 'vuex'

export default {
  components: { Card },
  data() {
    return {
      // 质量问题
      qualityProblem: {
        rectificationNum: undefined, // 整改数量
        noRectificationNum: undefined, // 未整改数量
        totalNum: undefined, // 总数量
      },
      list: [
        {dangerName:'防水'},
        {dangerName:'门窗'},
        {dangerName:'钢结构工程'},
        {dangerName:'建筑装饰装修'},
        {dangerName:'主体结构'},
        {dangerName:'建筑电气'},
      ]
    }
  },
  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 .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>