mosty_hnzy_pc_temp/src/views/warningAndDecision/warningCenter/com/waterPolo.vue

<template>
  <div class="water-polo-container">
    <div class="warningTitle">甘肃省烟草专卖局(公司)安全生产得分(总分100分)</div>
    <div class="warningCent">
      <div ref="waterPolo" class="liquidfill-container"></div>
      <div class="warningCentInfo">
        <div class="warningCentInfoItem" v-for="(item, index) in dataArr" :key="index">
          <div class="warningCentInfoTitle">
            <el-icon color="#0b6c51">
              <Burger />
            </el-icon>
            <span>{{ item.moduleName }}（{{ item.sumCount || 0 }}）</span>
          </div>
          <span :style="{ color: item.moduleName.indexOf('扣分') !== -1 ? '#e72828' : '#0b6c51' }">
            {{ item.sumScore }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import * as echarts from "echarts"
import "echarts-liquidfill"
import { ref, onMounted, defineExpose, defineProps } from "vue"
import { getApi, postApi, } from "@/api/tobAcco_api.js";
import Big from "@/utils/big.js"
// const proxy = getCurrentInstance()
// const { D_BZ_ZHYJ } = proxy.$dict("D_BZ_ZHYJ");

const props = defineProps({
  year: {
    type: [Number, String],
  }
})
/** 水球dom */
const waterPolo = ref(null)

const formData = ref({
  /** 总得分 */
  totalScore: 0,

})
/** 模块得分
  * - moduleName 模块名称
  * - sumScore 得分
  * - sumCount 数量
  *  */
const dataArr = ref([])
const chart = ref(null)
/**
 * 初始化综合评分
 */
const initializeComprehensiveRating = () => {
  const data = [0]
  const dom = waterPolo.value
  if (!dom) return
  chart.value = echarts.init(dom)
  chart.value.setOption({
    series: [{
      radius: "80%", // 半径大小，可以是百分比或像素值
      center: ["50%", "50%"], // 中心位置
      type: "liquidFill",
      data: data,
      backgroundStyle: {
        color: "#fff" // 背景颜色
      },
      label: {
        color: "#0b6c51", // 文字颜色
        fontSize: 34, // 字体大小
        normal: { // 百分比正常样式
          textStyle: { // 百分比正常样式字体
            fontSize: 34, // 百分比正常样式字体大小
            color: '#0b6c51'
          },
          formatter: function (param) { // 百分比正常样式字体格式
            return param.value * 100 + '分'; // 百分比正常样式字体格式
          }
        }

      },
      outline: {
        itemStyle: {
          borderColor: "#0b6c51" // 外圈颜色
        }
      },
      color: ["#0b6c51"] // 水波颜色
    }]
  })
}

const setLiquidFill = (value) => {
  if (!chart.value) return
  chart.value.setOption({
    series: [{
      data: [value]
    }]
  })
}
/**
 * 获取表格数据
 */
const getDetail = () => {
  getApi({ year: props.year }, "/mosty-jcgl/scoreItem/getScoreSummary").then((res) => {
    res = res || {}
    formData.value = {
      totalScore: res.totalScore || 0,
    }
    dataArr.value = Array.isArray(res.modules) ? res.modules : []
    dataArr.value = dataArr.value.map((item) => {
      return {
        ...item,
        moduleName: typeof item.moduleName === 'string' ? item.moduleName : '',
        sumScore: new Big(item.sumScore || 0).round(2),
        sumCount: item.sumCount || 0
      }
    })
    // 设置水球
    setLiquidFill(new Big(formData.value.totalScore).div(100).round(2).toNumber())
  })
}
onMounted(() => {
  getDetail()
  initializeComprehensiveRating()
})
/** 刷新数据 （by年变化） */
const refresh = () => {
  getDetail()
}
defineExpose({
  refresh
})
</script>


<style scoped lang="scss">
.warningCent {
  height: calc(100% - 18px);
  display: flex;
  align-items: center;
  justify-content: center;

  .liquidfill-container {
    width: 170px;
    height: 100%;
  }

  .warningCentInfo {
    width: calc(100% - 170px);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    color: #0b6c51;
    font-size: 13px;
    box-sizing: border-box;
    padding: 20px 0;

    .warningCentInfoItem {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      .warningCentInfoTitle {
        color: #0a0909;
        display: flex;
        align-items: center;

        span {
          margin-left: 8px;
        }
      }
    }
  }
}

.warningTitle {
  font-size: 18px;
  line-height: 18px;
  color: #03130e;
  padding-left: 20px;
  border-left: 4px solid #0b6c51;
}
</style>