设备停机率新增总停机时长

src/views/equipmentDowntimeRate/index.vue

@@ -1,32 +1,6 @@
 <template>
 	<div class="equipment-rate-container">
-		<!-- <h2>设备停机率统计（当日）</h2>
-		<div class="table-container">
-			<div class="table-header">
-				<div class="cell">产线名称</div>
-				<div class="cell">产线编码</div>
-				<div class="cell">计划排产时间（小时）</div>
-				<div class="cell">设备累计停机时间（小时）</div>
-				<div class="cell">停机率</div>
-			</div>
-
-			<div class="scroll-wrapper" v-if="allLines.length > 0">
-				<vue3-seamless-scroll :list="allLines" :step="0.3" :hover="true" direction="up" :singleHeight="60"
-					:isWatch="true" class="scroll-content">
-					<div class="table-row" v-for="(line, index) in allLines" :key="index">
-						<div class="cell">{{ line.lineName }}</div>
-						<div class="cell">{{ line.lineCode }}</div>
-						<div class="cell">{{ line.planHours }}</div>
-						<div class="cell">{{ line.downtimeHours }}</div>
-						<div class="cell">{{ line.downtimeRate }}</div>
-					</div>
-				</vue3-seamless-scroll>
-			</div>
-
-			<div v-else class="empty-tip">暂无有派工的产线数据</div> -->
-		<!-- </div> -->
 		<div class="equipment-rate-container">
-			<!-- <h2>设备开机率统计（当日）</h2> -->
 			<el-form :model="queryParams" label-position="right" inline ref="queryRef" @submit.prevent>
 				<el-form-item label="搜索时间" prop="DateTimeRange">
 					<el-date-picker v-model="queryParams.DateTimeRange" type="daterange" :clearable="false"
@@ -38,6 +12,13 @@
 					<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
 				</el-form-item>
 			</el-form>
+			<div
+				style="display: flex; justify-content: end; align-items: center;margin-bottom: 10px; font-weight: bold;">
+				<el-card style="max-width: 480px">
+					总停机时间:{{ totalHours }}时
+				</el-card>
+			</div>
+
 			<el-table :data="tableData" v-loading="loading" ref="table" border highlight-current-row
 				@sort-change="sortChange">
 				<el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
@@ -65,6 +46,7 @@ import { getProductdatatable } from "@/api/equipmentDowntimeRate/index.js"
 
 const loading = ref(false)
 const rawDataList = ref([])
+const totalHours = ref(0)
 // 查询参数
 const queryParams = reactive({
 	pageNum: 1,
@@ -104,6 +86,7 @@ const getProductdatatableData = () => {
 			loading.value = false
 			if (res.code === 200) {
 				console.log('设备开机率', res);
+				totalHours.value = res.data[0].totalDowntimeHours
 				// 保存原始完整数据
 				rawDataList.value = res.data || []
 			}