feat(NonProductionEfficiency): 日报汇总非生产实现添加 npt时间占比的饼图

src/views/pms/iotrddailyreport/components/NonProductionEfficiency.vue

@@ -204,10 +204,22 @@ const getPieData = () => {
     .filter((item) => item.value > 0)
 }
 
-const resizeChart = () => {
-  chart?.resize()
+const getNptFieldPieData = () => {
+  const excludedFields: Array<keyof ListItem> = ['selfStopTime', 'relocationTime', 'winterBreakTime']
+
+  return nonProductionTimeFields
+    .filter(([field]) => !excludedFields.includes(field))
+    .map(([field, label]) => ({
+      name: label,
+      value: getFieldTotal(field)
+    }))
+    .filter((item) => item.value > 0)
 }
 
+const resizeChart = useDebounceFn(() => {
+  renderChart()
+}, 150)
+
 const renderChart = () => {
   if (!chartRef.value) return
 
@@ -217,39 +229,117 @@ const renderChart = () => {
   window.removeEventListener('resize', resizeChart)
   window.addEventListener('resize', resizeChart)
 
-  const pieData = getPieData()
+  const projectPieData = getPieData()
+  const nptFieldPieData = getNptFieldPieData()
+  const chartWidth = chart.getWidth()
+  const chartHeight = chart.getHeight()
+  const projectCenter = chartWidth * 0.25
+  const nptFieldCenter = chartWidth * 0.73
+  const pieCenterY = chartHeight * 0.55
+  const graphic: any[] = [
+    {
+      type: 'text',
+      x: projectCenter,
+      y: 32,
+      style: {
+        text: '项目NPT占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    },
+    {
+      type: 'text',
+      x: nptFieldCenter,
+      y: 32,
+      style: {
+        text: 'NPT各项时间占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    }
+  ]
+
+  if (projectPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: projectCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无项目NPT数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
+
+  if (nptFieldPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: nptFieldCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无NPT项数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
 
   chart.setOption({
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>NPT合计: {c} H<br/>占比: {d}%'
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: 24,
-      top: 32,
-      bottom: 24
+      formatter: (params: any) =>
+        `${params.seriesName}<br/>${params.name}: ${formatNumber(params.value)} H<br/>占比: ${params.percent}%`
     },
-    graphic:
-      pieData.length === 0
-        ? {
-            type: 'text',
-            left: 'center',
-            top: 'middle',
-            style: {
-              text: '暂无NPT数据',
-              fill: '#909399',
-              fontSize: 14
-            }
-          }
-        : undefined,
+    legend: [
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        left: 16,
+        top: 64,
+        bottom: 24,
+        data: projectPieData.map((item) => item.name)
+      },
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        right: 16,
+        top: 64,
+        bottom: 24,
+        data: nptFieldPieData.map((item) => item.name)
+      }
+    ],
+    graphic,
     series: [
       {
-        name: 'NPT合计',
+        name: '项目NPT占比',
+        type: 'pie',
+        radius: ['34%', '56%'],
+        center: ['25%', '55%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          formatter: '{b}: {d}%'
+        },
+        data: projectPieData
+      },
+      {
+        name: 'NPT各项时间占比',
         type: 'pie',
-        radius: ['42%', '68%'],
-        center: ['50%', '50%'],
+        radius: ['34%', '56%'],
+        center: ['73%', '55%'],
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 4,
@@ -259,7 +349,7 @@ const renderChart = () => {
         label: {
           formatter: '{b}: {d}%'
         },
-        data: pieData
+        data: nptFieldPieData
       }
     ]
   })

src/views/pms/iotrhdailyreport/components/NonProductionEfficiency.vue

@@ -199,10 +199,22 @@ const getPieData = () => {
     .filter((item) => item.value > 0)
 }
 
-const resizeChart = () => {
-  chart?.resize()
+const getNptFieldPieData = () => {
+  const excludedFields: Array<keyof ListItem> = ['selfStopTime', 'relocationTime', 'winterBreakTime']
+
+  return nonProductionTimeFields
+    .filter(([field]) => !excludedFields.includes(field))
+    .map(([field, label]) => ({
+      name: label,
+      value: getFieldTotal(field)
+    }))
+    .filter((item) => item.value > 0)
 }
 
+const resizeChart = useDebounceFn(() => {
+  renderChart()
+}, 150)
+
 const renderChart = () => {
   if (!chartRef.value) return
 
@@ -212,39 +224,117 @@ const renderChart = () => {
   window.removeEventListener('resize', resizeChart)
   window.addEventListener('resize', resizeChart)
 
-  const pieData = getPieData()
+  const projectPieData = getPieData()
+  const nptFieldPieData = getNptFieldPieData()
+  const chartWidth = chart.getWidth()
+  const chartHeight = chart.getHeight()
+  const projectCenter = chartWidth * 0.25
+  const nptFieldCenter = chartWidth * 0.73
+  const pieCenterY = chartHeight * 0.55
+  const graphic: any[] = [
+    {
+      type: 'text',
+      x: projectCenter,
+      y: 32,
+      style: {
+        text: '项目NPT占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    },
+    {
+      type: 'text',
+      x: nptFieldCenter,
+      y: 32,
+      style: {
+        text: 'NPT各项时间占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    }
+  ]
+
+  if (projectPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: projectCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无项目NPT数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
+
+  if (nptFieldPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: nptFieldCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无NPT项数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
 
   chart.setOption({
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>NPT合计: {c} H<br/>占比: {d}%'
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: 24,
-      top: 32,
-      bottom: 24
+      formatter: (params: any) =>
+        `${params.seriesName}<br/>${params.name}: ${formatNumber(params.value)} H<br/>占比: ${params.percent}%`
     },
-    graphic:
-      pieData.length === 0
-        ? {
-            type: 'text',
-            left: 'center',
-            top: 'middle',
-            style: {
-              text: '暂无NPT数据',
-              fill: '#909399',
-              fontSize: 14
-            }
-          }
-        : undefined,
+    legend: [
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        left: 16,
+        top: 64,
+        bottom: 24,
+        data: projectPieData.map((item) => item.name)
+      },
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        right: 16,
+        top: 64,
+        bottom: 24,
+        data: nptFieldPieData.map((item) => item.name)
+      }
+    ],
+    graphic,
     series: [
       {
-        name: 'NPT合计',
+        name: '项目NPT占比',
+        type: 'pie',
+        radius: ['34%', '56%'],
+        center: ['25%', '55%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          formatter: '{b}: {d}%'
+        },
+        data: projectPieData
+      },
+      {
+        name: 'NPT各项时间占比',
         type: 'pie',
-        radius: ['42%', '68%'],
-        center: ['50%', '50%'],
+        radius: ['34%', '56%'],
+        center: ['73%', '55%'],
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 4,
@@ -254,7 +344,7 @@ const renderChart = () => {
         label: {
           formatter: '{b}: {d}%'
         },
-        data: pieData
+        data: nptFieldPieData
       }
     ]
   })

src/views/pms/iotrydailyreport/components/NonProductionEfficiency.vue

@@ -205,10 +205,22 @@ const getPieData = () => {
     .filter((item) => item.value > 0)
 }
 
-const resizeChart = () => {
-  chart?.resize()
+const getNptFieldPieData = () => {
+  const excludedFields: Array<keyof ListItem> = ['selfStopTime', 'relocationTime', 'winterBreakTime']
+
+  return nonProductionTimeFields
+    .filter(([field]) => !excludedFields.includes(field))
+    .map(([field, label]) => ({
+      name: label,
+      value: getFieldTotal(field)
+    }))
+    .filter((item) => item.value > 0)
 }
 
+const resizeChart = useDebounceFn(() => {
+  renderChart()
+}, 150)
+
 const renderChart = () => {
   if (!chartRef.value) return
 
@@ -218,39 +230,117 @@ const renderChart = () => {
   window.removeEventListener('resize', resizeChart)
   window.addEventListener('resize', resizeChart)
 
-  const pieData = getPieData()
+  const projectPieData = getPieData()
+  const nptFieldPieData = getNptFieldPieData()
+  const chartWidth = chart.getWidth()
+  const chartHeight = chart.getHeight()
+  const projectCenter = chartWidth * 0.25
+  const nptFieldCenter = chartWidth * 0.73
+  const pieCenterY = chartHeight * 0.55
+  const graphic: any[] = [
+    {
+      type: 'text',
+      x: projectCenter,
+      y: 32,
+      style: {
+        text: '项目NPT占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    },
+    {
+      type: 'text',
+      x: nptFieldCenter,
+      y: 32,
+      style: {
+        text: 'NPT各项时间占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    }
+  ]
+
+  if (projectPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: projectCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无项目NPT数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
+
+  if (nptFieldPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: nptFieldCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无NPT项数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
 
   chart.setOption({
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>NPT合计: {c} H<br/>占比: {d}%'
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: 24,
-      top: 32,
-      bottom: 24
+      formatter: (params: any) =>
+        `${params.seriesName}<br/>${params.name}: ${formatNumber(params.value)} H<br/>占比: ${params.percent}%`
     },
-    graphic:
-      pieData.length === 0
-        ? {
-            type: 'text',
-            left: 'center',
-            top: 'middle',
-            style: {
-              text: '暂无NPT数据',
-              fill: '#909399',
-              fontSize: 14
-            }
-          }
-        : undefined,
+    legend: [
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        left: 16,
+        top: 64,
+        bottom: 24,
+        data: projectPieData.map((item) => item.name)
+      },
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        right: 16,
+        top: 64,
+        bottom: 24,
+        data: nptFieldPieData.map((item) => item.name)
+      }
+    ],
+    graphic,
     series: [
       {
-        name: 'NPT合计',
+        name: '项目NPT占比',
+        type: 'pie',
+        radius: ['34%', '56%'],
+        center: ['25%', '55%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          formatter: '{b}: {d}%'
+        },
+        data: projectPieData
+      },
+      {
+        name: 'NPT各项时间占比',
         type: 'pie',
-        radius: ['42%', '68%'],
-        center: ['50%', '50%'],
+        radius: ['34%', '56%'],
+        center: ['73%', '55%'],
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 4,
@@ -260,7 +350,7 @@ const renderChart = () => {
         label: {
           formatter: '{b}: {d}%'
         },
-        data: pieData
+        data: nptFieldPieData
       }
     ]
   })

src/views/pms/iotrydailyreport/components/XjNonProductionEfficiency.vue

@@ -205,10 +205,22 @@ const getPieData = () => {
     .filter((item) => item.value > 0)
 }
 
-const resizeChart = () => {
-  chart?.resize()
+const getNptFieldPieData = () => {
+  const excludedFields: Array<keyof ListItem> = ['selfStopTime', 'relocationTime', 'winterBreakTime']
+
+  return nonProductionTimeFields
+    .filter(([field]) => !excludedFields.includes(field))
+    .map(([field, label]) => ({
+      name: label,
+      value: getFieldTotal(field)
+    }))
+    .filter((item) => item.value > 0)
 }
 
+const resizeChart = useDebounceFn(() => {
+  renderChart()
+}, 150)
+
 const renderChart = () => {
   if (!chartRef.value) return
 
@@ -218,39 +230,117 @@ const renderChart = () => {
   window.removeEventListener('resize', resizeChart)
   window.addEventListener('resize', resizeChart)
 
-  const pieData = getPieData()
+  const projectPieData = getPieData()
+  const nptFieldPieData = getNptFieldPieData()
+  const chartWidth = chart.getWidth()
+  const chartHeight = chart.getHeight()
+  const projectCenter = chartWidth * 0.25
+  const nptFieldCenter = chartWidth * 0.73
+  const pieCenterY = chartHeight * 0.55
+  const graphic: any[] = [
+    {
+      type: 'text',
+      x: projectCenter,
+      y: 32,
+      style: {
+        text: '项目NPT占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    },
+    {
+      type: 'text',
+      x: nptFieldCenter,
+      y: 32,
+      style: {
+        text: 'NPT各项时间占比',
+        fill: '#303133',
+        fontSize: 14,
+        fontWeight: 500,
+        textAlign: 'center',
+        textVerticalAlign: 'middle'
+      }
+    }
+  ]
+
+  if (projectPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: projectCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无项目NPT数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
+
+  if (nptFieldPieData.length === 0) {
+    graphic.push({
+      type: 'text',
+      x: nptFieldCenter,
+      y: pieCenterY,
+      style: {
+        text: '暂无NPT项数据',
+        fill: '#909399',
+        fontSize: 14,
+        textAlign: 'center'
+      }
+    })
+  }
 
   chart.setOption({
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>NPT合计: {c} H<br/>占比: {d}%'
-    },
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: 24,
-      top: 32,
-      bottom: 24
+      formatter: (params: any) =>
+        `${params.seriesName}<br/>${params.name}: ${formatNumber(params.value)} H<br/>占比: ${params.percent}%`
     },
-    graphic:
-      pieData.length === 0
-        ? {
-            type: 'text',
-            left: 'center',
-            top: 'middle',
-            style: {
-              text: '暂无NPT数据',
-              fill: '#909399',
-              fontSize: 14
-            }
-          }
-        : undefined,
+    legend: [
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        left: 16,
+        top: 64,
+        bottom: 24,
+        data: projectPieData.map((item) => item.name)
+      },
+      {
+        type: 'scroll',
+        orient: 'vertical',
+        right: 16,
+        top: 64,
+        bottom: 24,
+        data: nptFieldPieData.map((item) => item.name)
+      }
+    ],
+    graphic,
     series: [
       {
-        name: 'NPT合计',
+        name: '项目NPT占比',
+        type: 'pie',
+        radius: ['34%', '56%'],
+        center: ['25%', '55%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          formatter: '{b}: {d}%'
+        },
+        data: projectPieData
+      },
+      {
+        name: 'NPT各项时间占比',
         type: 'pie',
-        radius: ['42%', '68%'],
-        center: ['50%', '50%'],
+        radius: ['34%', '56%'],
+        center: ['73%', '55%'],
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 4,
@@ -260,7 +350,7 @@ const renderChart = () => {
         label: {
           formatter: '{b}: {d}%'
         },
-        data: pieData
+        data: nptFieldPieData
       }
     ]
   })