vue3 DataV使用轮播表单，表单行内动态环形进度条刷新

   难点在于行内动态加载的环形进度条，无法用dataV自带的环形进度条组件来实现。这个组件不支持在行内使用v-html显示。 

  这里想了两种方式来实现，第一种，根据数据多次渲染ehcars圆环饼图来实现，但是对于电脑的性能要求较高，一旦数据量过多，加载缓甚至卡顿，严重影响体验。

  第二种，使用css样式配合js来实现，优待对于性能要求较低，但是成品的效果略显模糊，需要优化。

  在这里我选择了第二种，代码如下：

  

<template>
  <dv-scroll-board
                :config="configWork"
                ref="workExpress"
                style="width: 100%; height: calc(100% - 32px);"/>

              </dv-border-box-7>
</template>

<script setup>
import {
  ref, reactive, onMounted, inject, computed,
  watch,
} from 'vue';
import { useI18n } from 'vue-i18n-composable';
import getBaseApi from '../scriptFiles/baseApi';
import apiFunction from '../scriptFiles/backendApiFunction';

// 工作进度 ref
const workExpress = ref();
const configWorkList = reactive({
  data: [],
});
// 工作进度
const configWork = reactive(computed(() => ({
  indexHeader: '序号',
  oddRowBGC: 'transparent', // 奇数行背景色
  evenRowBGC: 'transparent', // 偶数行背景色
  headerBGC: 'rgb(91, 155, 213)', // 表头背景色
  header: [t('WorkOrderNumber'), t('CustomerName'), t('ProductName'), t('NumberRequiredItems'), t('ImportantSort'), t('ProcessProgress')],
  rowNum: 5, // 表行数
  headerHeight: 35,
  carousel: 'page',
  waitTime: 5000, // 轮播时间间隔(ms)
  align: ['center', 'center', 'center', 'center', 'center', 'left'],
  columnWidth: [140, 100, 100, 90, 90, 500],
  data: configWorkList.data,
})));

// 获取工作进度概览--
apiFunction.Q_WorkOrder().then((res) => {
  if (res.data.content.length > 0) {
    // 加标签
    res.data.content.forEach((item) => {
      let circleLists = '';
      item.processProgressList.forEach((it) => {
        let leftBlue = 0; let rightBlue = 0;
        if (it.processProgressPer < 50) {
          rightBlue = it.processProgressPer !== 0 ? it.processProgressPer : 0;
          leftBlue = 0;
        } else if (it.processProgressPer <= 100) {
          rightBlue = 100;
          // eslint-disable-next-line no-unused-vars
          leftBlue = (it.processProgressPer - 50);
        } else {
          rightBlue = 100;
          // eslint-disable-next-line no-unused-vars
          leftBlue = 100;
        }
        circleLists += `<div style="width: 50px; height: 100px;margin-right:10px;display:inline-block;position:relative">
         <div style="width: 50px; height: 50px; position:relative;mask: radial-gradient(transparent 23px, #000 21px);border-radius: 50%;overflow: hidden;">
            <div style="width: 25px; height: 50px;background: linear-gradient(to top, blue  ${leftBlue}% ,${leftBlue}%, #f1f1f1 ${100 - leftBlue}% );position:absolute;left:0;top:0;"></div>
            <div style="width: 25px; height: 50px;position:absolute;right:0;top:0;background: linear-gradient(to bottom, blue ${rightBlue}% ,${rightBlue}%, #f1f1f1 ${100 - rightBlue}%);"></div>
        </div>
        <div style="width:50px;height:50px;position:absolute;color:white;text-align:center;line-height:50px;top: 0;font-size: 11px;">
            ${it.processProgressPer ? it.processProgressPer : 0}%</div>
        <div style="font-size: 10px;position:absolute;width: 50px;height: 20px;bottom: 31px;line-height:20px;
        text-align:center;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">${it.processProgressName}</div>
        </div>
        `;
      });
      // 渲染
      configWorkList.data.push([item.orderNumber,
        item.customerName ? item.customerName : '-',
        item.productName,
        item.productionOrderRequiredThroughput,
        item.workOrderStatus === 2 ? '正常' : '错误',
        circleLists,
      ]);
    });
    configWork.data = configWorkList.data;
    workExpress.value.updateRows(configWork.data);
  } else {
    console.log('no data');
  }
});
</script>