|
|
@@ -41,7 +41,7 @@
|
|
|
</view>
|
|
|
<view class="info-card">
|
|
|
<view class="chart-container">
|
|
|
- <tui-xechars ref="chartRef" style="width: 200rpx; height: 200rpx;" @initFinished="onInitFinished"></tui-xechars>
|
|
|
+ <tui-xechars ref="chartRef" style="width: 370rpx; height: 370rpx;" @initFinished="onInitFinished"></tui-xechars>
|
|
|
<view class="chart-legend">
|
|
|
<view v-for="(item, index) in chartLegendData" :key="index" class="legend-item">
|
|
|
<view class="legend-left">
|
|
|
@@ -49,7 +49,7 @@
|
|
|
<text class="legend-name">{{ item.name }}</text>
|
|
|
</view>
|
|
|
<view class="legend-right">
|
|
|
- <text class="legend-value">{{ formatHours(item.value) }}小时</text>
|
|
|
+ <text class="legend-value">{{ formatHours(item.value) }}h</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -64,23 +64,23 @@
|
|
|
</view>
|
|
|
<view class="info-card">
|
|
|
<view class="info-item">
|
|
|
- <text class="info-label">故障-工单派发响应时长</text>
|
|
|
+ <text class="info-label">下发时长</text>
|
|
|
<text class="info-value">{{ formatHours(detailData.issueHour) }}小时</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
- <text class="info-label">工单签收响应时长</text>
|
|
|
+ <text class="info-label">接单时长</text>
|
|
|
<text class="info-value">{{ formatHours(detailData.acceptHour) }}小时</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
- <text class="info-label">工前准备耗时</text>
|
|
|
+ <text class="info-label">准备时长</text>
|
|
|
<text class="info-value">{{ formatHours(detailData.prepareHour) }}小时</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
- <text class="info-label">现场检修作业时长</text>
|
|
|
+ <text class="info-label">作业时长</text>
|
|
|
<text class="info-value">{{ formatHours(detailData.workHour) }}小时</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
- <text class="info-label">设备恢复运行调试时长</text>
|
|
|
+ <text class="info-label">复运时长</text>
|
|
|
<text class="info-value">{{ formatHours(detailData.restartHour) }}小时</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
@@ -145,7 +145,7 @@
|
|
|
const chartRef = ref<TuiCharts | null>(null)
|
|
|
// 保存图表实例
|
|
|
const chartInstance = ref<TuiCharts | null>(null)
|
|
|
-
|
|
|
+
|
|
|
// 图例数据类型
|
|
|
type ChartLegendItem = {
|
|
|
name: string
|
|
|
@@ -172,52 +172,62 @@
|
|
|
console.log('图表数据为空，无法绘制')
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
console.log('图表实例状态:', charts)
|
|
|
-
|
|
|
+
|
|
|
// 清除之前的图表
|
|
|
if (charts.chartsMap != null) {
|
|
|
charts.chartsMap.clear()
|
|
|
}
|
|
|
-
|
|
|
- // 创建饼图配置
|
|
|
+
|
|
|
+ // 创建饼图配置 - 使用环形图配置以匹配 flow-chart 组件
|
|
|
const pieOption = {
|
|
|
- type: 'pie',
|
|
|
+ type: 'ring',
|
|
|
dataLabel: false,
|
|
|
legend: {
|
|
|
show: false
|
|
|
},
|
|
|
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'),
|
|
|
+ legendText: item.get('name'),
|
|
|
data: [{
|
|
|
name: item.get('name'),
|
|
|
- value: item.get('value')
|
|
|
+ value: item.get('value'),
|
|
|
+ //labelText: `${percentage}%`,
|
|
|
+ //labelShow: true
|
|
|
}],
|
|
|
color: chartColors[index % chartColors.length]
|
|
|
}
|
|
|
}),
|
|
|
extra: {
|
|
|
- pie: {
|
|
|
+ ring: {
|
|
|
+ type: 'ring',
|
|
|
+ width: 8,
|
|
|
activeOpacity: 0.5,
|
|
|
activeRadius: 0,
|
|
|
offsetAngle: 0,
|
|
|
labelWidth: 15,
|
|
|
- ringWidth: 30,
|
|
|
- // 添加 customRadius 来控制饼图大小
|
|
|
- customRadius: 40,
|
|
|
+ ringWidth: 60,
|
|
|
+ customRadius: 90,
|
|
|
border: false,
|
|
|
borderWidth: 0,
|
|
|
borderColor: '#FFFFFF',
|
|
|
centerColor: '#FFFFFF',
|
|
|
- linearType: 'custom'
|
|
|
+ linearType: 'none',
|
|
|
+ // 添加背景色以匹配 flow-chart 组件
|
|
|
+ backgroundColor: '#C4D7E9',
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
} as UTSJSONObject
|
|
|
-
|
|
|
+
|
|
|
console.log('图表配置:', pieOption)
|
|
|
-
|
|
|
+
|
|
|
console.log('准备创建图表对象')
|
|
|
const pieChart = charts.add(0, pieOption)
|
|
|
console.log('创建图表对象完成:', pieChart)
|
|
|
@@ -237,52 +247,52 @@
|
|
|
// 添加各项工时数据
|
|
|
if (data.issueHour != null) {
|
|
|
const item = {
|
|
|
- name: '故障-工单派发响应时长',
|
|
|
- value: data.issueHour
|
|
|
- } as UTSJSONObject
|
|
|
+ name: '下发时长',
|
|
|
+ value: data.issueHour
|
|
|
+ } as UTSJSONObject
|
|
|
chartItems.push(item)
|
|
|
legendItems.push({
|
|
|
- name: '故障-工单派发响应时长',
|
|
|
+ name: '下发时长',
|
|
|
value: data.issueHour,
|
|
|
color: chartColors[legendItems.length % chartColors.length]
|
|
|
} as ChartLegendItem)
|
|
|
}
|
|
|
|
|
|
if (data.acceptHour != null) {
|
|
|
- const item = {name: '工单签收响应时长', value: data.acceptHour} as UTSJSONObject
|
|
|
+ const item = {name: '接单时长', value: data.acceptHour} as UTSJSONObject
|
|
|
chartItems.push(item)
|
|
|
legendItems.push({
|
|
|
- name: '工单签收响应时长',
|
|
|
+ name: '接单时长',
|
|
|
value: data.acceptHour,
|
|
|
color: chartColors[legendItems.length % chartColors.length]
|
|
|
} as ChartLegendItem)
|
|
|
}
|
|
|
|
|
|
if (data.prepareHour != null) {
|
|
|
- const item = {name: '工前准备耗时', value: data.prepareHour} as UTSJSONObject
|
|
|
+ const item = {name: '准备时长', value: data.prepareHour} as UTSJSONObject
|
|
|
chartItems.push(item)
|
|
|
legendItems.push({
|
|
|
- name: '工前准备耗时',
|
|
|
+ name: '准备时长',
|
|
|
value: data.prepareHour,
|
|
|
color: chartColors[legendItems.length % chartColors.length]
|
|
|
} as ChartLegendItem)
|
|
|
}
|
|
|
|
|
|
if (data.workHour != null) {
|
|
|
- const item = {name: '现场检修作业时长', value: data.workHour} as UTSJSONObject
|
|
|
+ const item = {name: '作业时长', value: data.workHour} as UTSJSONObject
|
|
|
chartItems.push(item)
|
|
|
legendItems.push({
|
|
|
- name: '现场检修作业时长',
|
|
|
+ name: '作业时长',
|
|
|
value: data.workHour,
|
|
|
color: chartColors[legendItems.length % chartColors.length]
|
|
|
} as ChartLegendItem)
|
|
|
}
|
|
|
|
|
|
if (data.restartHour != null) {
|
|
|
- const item = {name: '设备恢复运行调试时长', value: data.restartHour} as UTSJSONObject
|
|
|
+ const item = {name: '复运时长', value: data.restartHour} as UTSJSONObject
|
|
|
chartItems.push(item)
|
|
|
legendItems.push({
|
|
|
- name: '设备恢复运行调试时长',
|
|
|
+ name: '复运时长',
|
|
|
value: data.restartHour,
|
|
|
color: chartColors[legendItems.length % chartColors.length]
|
|
|
} as ChartLegendItem)
|
|
|
@@ -323,9 +333,9 @@
|
|
|
const loadDetail = async (id: string, orderType: string): Promise<void> => {
|
|
|
try {
|
|
|
loading.value = true
|
|
|
-
|
|
|
+
|
|
|
const result = await getOrderHourDetail(orderType, id)
|
|
|
-
|
|
|
+
|
|
|
// 提取响应数据
|
|
|
const resultObj = result as UTSJSONObject
|
|
|
const code = resultObj.get('code') as number
|
|
|
@@ -363,9 +373,9 @@
|
|
|
handleHour: (data.get('handleHour') as number | null) ?? 0,
|
|
|
suspendHour: (data.get('suspendHour') as number | null) ?? 0
|
|
|
} as orderInfo
|
|
|
-
|
|
|
+
|
|
|
detailData.value = orderDetail
|
|
|
-
|
|
|
+
|
|
|
// 准备图表数据
|
|
|
prepareChartData(orderDetail)
|
|
|
} else {
|
|
|
@@ -502,19 +512,20 @@
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- margin: 20rpx 0;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ padding: 5rpx 0;
|
|
|
}
|
|
|
|
|
|
.chart-legend {
|
|
|
flex: 1;
|
|
|
- padding-left: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.legend-item {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
@@ -532,20 +543,20 @@
|
|
|
}
|
|
|
|
|
|
.legend-color {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
border-radius: 4rpx;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
.legend-name {
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
color: #333333;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
|
|
|
.legend-value {
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
@@ -577,4 +588,4 @@
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
ouyj