工时修改

pages/worktime/detail/index.uvue

@@ -41,7 +41,9 @@
                 </view>
                 <view class="info-card">
                     <view class="chart-container">
-                        <tui-xechars ref="chartRef" style="width: 370rpx; height: 370rpx;" @initFinished="onInitFinished"></tui-xechars>
+                        <view style="width: 365rpx; height: 365rpx;">
+                            <l-echart ref="chartRef" @finished="init"></l-echart>
+                        </view>
                         <view class="chart-legend">
                             <view v-for="(item, index) in chartLegendData" :key="index" class="legend-item">
                                 <view class="legend-left">
@@ -106,8 +108,15 @@
     import { ref } from 'vue'
     import { getOrderHourDetail } from '../../../api/worktime/index'
     import type { orderInfo } from '../../../types/order'
-    import { TuiCharts } from '@/uni_modules/tui-xechars'
-
+    // #ifdef MP
+    // 引入小程序依赖包，require只能是当前文件的相对路径
+    const echarts = require('../../../../static/echarts.min.js')
+    // #endif
+    // #ifndef MP
+    // 非小程序不需要引入
+    const echarts = null
+    // #endif
+    
     // 详情数据
     const detailData = ref<orderInfo>({
         orderType: 0 as Number,
@@ -136,15 +145,14 @@
         prepareHour: 0 as Number,
         workHour: 0 as Number,
         restartHour: 0 as Number,
-        handleHour: 0 as Number,
-        suspendHour: 0 as Number
+                    handleHour: 0 as Number,
+                    suspendHour: 0 as Number,
+					downtimeHour: 0 as Number,
     } as orderInfo)
 
     const loading = ref<boolean>(false)
     const chartData = ref<UTSJSONObject[]>([])
-    const chartRef = ref<TuiCharts | null>(null)
-    // 保存图表实例
-    const chartInstance = ref<TuiCharts | null>(null)
+    const chartRef = ref<LEchartComponentPublicInstance | null>(null)
 
     // 图例数据类型
     type ChartLegendItem = {
@@ -155,7 +163,8 @@
     const chartLegendData = ref<ChartLegendItem[]>([])
 
     // 颜色配置
-    const chartColors = ['#5B9BF3', '#4DD4C0', '#FF9966', '#FF6B96', '#9B7FE8', '#FFD700', '#8A2BE2']
+    //const chartColors = ['#5B9BF3', '#4DD4C0', '#FF9966', '#FF6B96', '#9B7FE8', '#FFD700', '#8A2BE2']
+	const chartColors = ['#5B9BF3', '#4DD4C0', '#FF9966', '#FF6B96', '#9B7FE8', '#FFD700']
 
     // 格式化小时数
     const formatHours = (hourValue: number | null): string => {
@@ -163,80 +172,63 @@
         return (hourValue as number).toFixed(1)
     }
 
-    // 绘制图表
-    const drawChart = (charts: TuiCharts): void => {
-        console.log('准备绘制图表，数据:', chartData.value)
-        try {
-            // 检查数据是否有效
-            if (chartData.value == null || chartData.value.length == 0) {
-                console.log('图表数据为空，无法绘制')
-                return
-            }
-
-            console.log('图表实例状态:', charts)
-
-            // 清除之前的图表
-            if (charts.chartsMap != null) {
-                charts.chartsMap.clear()
-            }
+    const init = async () => {
+        if(chartRef.value == null) return
+        const chart = await chartRef.value!.init(echarts)
+        
+        // 检查数据是否有效
+        if (chartData.value == null || chartData.value.length == 0) {
+            return
+        }
 
-            // 创建饼图配置 - 使用环形图配置以匹配 flow-chart 组件
-            const pieOption = {
-                type: 'ring',
-                dataLabel: false,
-                legend: {
-                    show: false
+        // 计算总值用于百分比计算，只累加正值以确保百分比计算准确
+        const total = chartData.value.reduce((sum, currentItem) => {
+            const value = currentItem.get('value') as number;
+            return sum + (value > 0 ? value : 0);
+        }, 0);
+        
+        // 构建图表数据数组
+        const seriesData = chartData.value.map((item: UTSJSONObject, index: number) => {
+            const value = item.get('value') as number;
+            const percent = total > 0 ? (value / total * 100) : 0;
+            
+            return {
+                name: item.get('name'),
+                value: item.get('value'),
+                label: {
+                    // 如果百分比小于10%，不显示标签
+                    show: percent >= 10
                 },
-                series: chartData.value.map((item: UTSJSONObject, index: number) => {
-                    const value = item.get('value') as number;
-                    const total = chartData.value.reduce((sum, currentItem) => sum + (currentItem.get('value') as number), 0);
-                    const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
-                    
-                    return {
-                        name: item.get('name'),
-                        legendText: item.get('name'),
-                        data: [{
-                            name: item.get('name'),
-                            value: item.get('value'),
-							//labelText: `${percentage}%`,
-							//labelShow: true
-                        }],
-                        color: chartColors[index % chartColors.length]
-                    }
-                }),
-                extra: {
-                    ring: {
-                        type: 'ring',
-                        width: 8,
-                        activeOpacity: 0.5,
-                        activeRadius: 0,
-                        offsetAngle: 0,
-                        labelWidth: 15,
-                        ringWidth: 60,
-                        customRadius: 90,
-                        border: false,
-                        borderWidth: 0,
-                        borderColor: '#FFFFFF',
-                        centerColor: '#FFFFFF',
-                        linearType: 'none',
-                        // 添加背景色以匹配 flow-chart 组件
-                        backgroundColor: '#C4D7E9',
-
-                    }
+                itemStyle: {
+                    color: chartColors[index % chartColors.length]
                 }
-            } as UTSJSONObject
-
-            console.log('图表配置:', pieOption)
+            }
+        })
+
+        // 构建完整的图表选项对象
+        const option = {
+            legend: {
+                show: false
+            },
+            series: [{
+                type: 'pie', 
+                radius: ['30%', '99%'],
+                center: ['50%', '50%'],
+                label: {
+                    show: true,
+                    formatter: '{d}%',
+                    position: 'inside',
+                    color: '#fff',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    textShadow: '0 1px 3px rgba(0,0,0,0.5)'
+                },
+                data: seriesData
+            }]
+        } as UTSJSONObject
 
-            console.log('准备创建图表对象')
-            const pieChart = charts.add(0, pieOption)
-            console.log('创建图表对象完成:', pieChart)
-            console.log('准备绘制图表')
-            pieChart.draw()
-            console.log('图表绘制完成')
-        } catch (error) {
-            console.error('图表绘制出错:', error)
-        }
+        // 使用正确的API调用来设置图表选项
+        chart.setOption(option)
     }
 
     // 准备图表数据
@@ -247,9 +239,9 @@
         // 添加各项工时数据
         if (data.issueHour != null) {
             const item = {
-				name: '下发时长',
-				value: data.issueHour
-			} as UTSJSONObject
+                name: '下发时长',
+                value: data.issueHour
+            } as UTSJSONObject
             chartItems.push(item)
             legendItems.push({
                 name: '下发时长',
@@ -298,7 +290,7 @@
             } as ChartLegendItem)
         }
 
-        if (data.handleHour != null) {
+        /* if (data.handleHour != null) {
             const item = {name: '处理时长', value: data.handleHour} as UTSJSONObject
             chartItems.push(item)
             legendItems.push({
@@ -306,7 +298,7 @@
                 value: data.handleHour,
                 color: chartColors[legendItems.length % chartColors.length]
             } as ChartLegendItem)
-        }
+        } */
 
         if (data.suspendHour != null) {
             const item = {name: '挂起时长', value: data.suspendHour} as UTSJSONObject
@@ -318,14 +310,22 @@
             } as ChartLegendItem)
         }
 
+		if (data.downtimeHour != null) {
+            /* const item = {name: '停运时长', value: data.downtimeHour} as UTSJSONObject
+            chartItems.push(item) */
+            legendItems.push({
+                name: '停运时长',
+                value: data.downtimeHour,
+                //color: chartColors[legendItems.length % chartColors.length]
+				color: '#8A2BE2'
+            } as ChartLegendItem)
+        }
         chartData.value = chartItems
         chartLegendData.value = legendItems
-        console.log('更新chartData:', chartItems)
-        console.log('更新chartLegendData:', legendItems)
 
         // 如果图表已经初始化，则直接绘制
-        if (chartInstance.value != null && chartItems.length > 0) {
-            drawChart(chartInstance.value)
+        if (chartRef.value != null && chartItems.length > 0) {
+            init()
         }
     }
 
@@ -371,7 +371,8 @@
                     workHour: (data.get('workHour') as number | null) ?? 0,
                     restartHour: (data.get('restartHour') as number | null) ?? 0,
                     handleHour: (data.get('handleHour') as number | null) ?? 0,
-                    suspendHour: (data.get('suspendHour') as number | null) ?? 0
+                    suspendHour: (data.get('suspendHour') as number | null) ?? 0,
+					downtimeHour: (data.get('downtimeHour') as number | null) ?? 0,
                 } as orderInfo
 
                 detailData.value = orderDetail
@@ -396,19 +397,6 @@
         }
     }
 
-    // 图表初始化完成回调
-    const onInitFinished = (charts: TuiCharts): void => {
-        console.log('图表初始化完成')
-        chartInstance.value = charts
-        console.log('当前chartData:', chartData.value)
-        // 如果数据已经加载完成，则立即绘制图表
-        if (chartData.value != null && chartData.value.length > 0) {
-            drawChart(charts)
-        } else {
-            console.log('等待数据加载完成')
-        }
-    }
-
     // 返回上一页
     const goBack = (): void => {
         uni.navigateBack()
@@ -512,7 +500,7 @@
                 flex-direction: row;
                 align-items: center;
                 justify-content: space-between;
-                margin: 10rpx 0;
+                margin: 5rpx 0;
                 padding: 5rpx 0;
             }
 
@@ -588,4 +576,4 @@
             border-radius: 12rpx;
         }
     }
-</style>
+</style>

pages/worktime/index.uvue

@@ -130,7 +130,7 @@
                 <text class="text-gray">下发时间: {{ getPropertyValue(item, 'assignTime') }}</text>
               </view>
               <view class="info-value">
-                <text class="text-gray">处理时长: {{ formatNumber(parseFloat(getPropertyValue(item, 'handleHour'))) }}小时</text>
+                <text class="text-gray">作业时长: {{ formatNumber(parseFloat(getPropertyValue(item, 'workHour'))) }}小时</text>
               </view>
             </view>
           </view>
@@ -748,9 +748,9 @@ function onEndDateConfirm(value: string) {
     uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' })
     return
   }
-
+ 
   endDate.value = value
-  showEndDatePicker.value = false
+  showEndDatePicker.value = false 
 }
 
 // 点击列表项
@@ -764,7 +764,7 @@ function handleItemClick(item: any | null, index: number): void {
     const idStr = '' + id
     const orderTypeStr = '' + orderType
     uni.navigateTo({
-      url: `/pages/worktime/detail/echarts?id=${idStr}&orderType=${orderTypeStr}`
+      url: `/pages/worktime/detail/index?id=${idStr}&orderType=${orderTypeStr}`
     })
   }
 }

types/order.uts

@@ -32,6 +32,7 @@ export type orderInfo = {
     restartHour: number | 0
     handleHour: number | 0
     suspendHour: number | 0
+	downtimeHour: number | 0
 }
 
 // 工单列表响应