From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示

---
 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue |  138 ++++++++++++++++++++++++++++++++++------------
 1 files changed, 102 insertions(+), 36 deletions(-)

diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
index 29e661e..1a7fa6b 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
@@ -1,38 +1,59 @@
 <template>
-	<el-divider content-position="left">相关任务 {{ total }}次</el-divider>
-	<el-table :data="list" style="width: 100%">
-		<el-table-column prop="id" label="id" />
-		<el-table-column prop="name" label="名称" />
-		<el-table-column prop="industry_type_str" label="任务类型" />
-		<el-table-column prop="ai_type_str" label="关联算法" />
-		<el-table-column prop="event_number" label="事件工单" />
-		<el-table-column prop="remark" label="备注" />
-		<el-table-column prop="area_code" label="地区代码" />
-		<el-table-column prop="begin_time" label="开始时间" />
-		<el-table-column prop="end_time" label="结束时间" />
-		<el-table-column prop="creator_name" label="创建者" />
-		<el-table-column label="操作">
-			<template #default="scope">
-				<el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
-			</template>
-		</el-table-column>
-	</el-table>
-	<el-pagination
-		background
-		:page-sizes="[10, 20, 30, 50]"
-		v-model:current-page="sizeParams.current"
-		v-model:page-size="sizeParams.size"
-		layout="total, sizes, prev, pager, next, jumper"
-		:total="total"
-		@change="pageChange"
+	<div class="devicejob-container">
+		<div class="machineTableDetailsTitle">
+			<p>
+				相关任务
+				<span>{{ total }}</span>
+				次
+			</p>
+		</div>
+		<div class="devicelob-table ztzf-table">
+			<el-table
+				:data="list"
+				:row-class-name="tableRowClassName"
+				style="width: 100%"
+				:row-style="{ height: '35px', fontSize: '14px', 'text-align': 'center' }"
+				:header-cell-style="{ 'text-align': 'center', height: '30px', fontSize: '14px' }"
+			>
+				<el-table-column label="序号" type="index" width="60">
+					<template #default="{ $index }">
+						{{ ($index + 1).toString().padStart(2, '0') }}
+					</template>
+				</el-table-column>
+				<el-table-column prop="id" label="任务编号" />
+				<el-table-column show-overflow-tooltip prop="name" label="任务名称" />
+				<el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
+				<el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
+				<el-table-column show-overflow-tooltip prop="event_number" label="事件工单" />
+
+				<el-table-column label="操作" width="80">
+					<template #default="scope">
+						<div class="ztzf-view" @click="viewJob(scope.row)">查看</div>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+		<el-pagination
+		class="ztzf-pagination"
+			background
+
+			v-model:current-page="sizeParams.current"
+			v-model:page-size="sizeParams.size"
+			layout=" prev, pager, next, jumper"
+			:total="total"
+			@change="pageChange"
+		/>
+	</div>
+
+	<DeviceJobDetails
+		v-if="deviceJobDetailsShow"
+		v-model:show="deviceJobDetailsShow"
+		:wayLineJodInfoId="wayLineJodInfoId"
 	/>
-
-  <DeviceJobDetails v-model:show="deviceJobDetailsShow"/>
-
 </template>
 <script setup>
 import { useStore } from 'vuex'
-import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue';
+import DeviceJobDetails from '@/components/DeviceJobDetails/DeviceJobDetails.vue'
 import { getDeviceJobList } from '@/api/home/task'
 
 const list = ref([])
@@ -41,17 +62,16 @@
 })
 const sizeParams = ref({
 	current: 1,
-	size: 10,
+	size: 5,
 })
 const store = useStore()
 const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
 const total = ref(0)
 const deviceJobDetailsShow = ref(false)
 const wayLineJodInfoId = ref(null)
-provide('wayLineJodInfoId', wayLineJodInfoId)
-const viewJob = (row) => {
-  wayLineJodInfoId.value = row.id
-  deviceJobDetailsShow.value = true
+const viewJob = row => {
+	wayLineJodInfoId.value = row.id
+	deviceJobDetailsShow.value = true
 }
 
 const getList = () => {
@@ -67,8 +87,54 @@
 	sizeParams.value.current = val
 	getList()
 }
+// 表格隔行变色
+const tableRowClassName = ({ row, rowIndex }) => {
+	if (rowIndex % 2 === 1) {
+		return 'warning-row'
+	} else {
+		return 'success-row'
+	}
+}
 onMounted(() => {
 	getList()
 })
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+// 标题
+.machineTableDetailsTitle {
+	margin: 0 24px;
+	margin-bottom: 10px;
+	background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
+	background-size: 100% 100%;
+	p {
+		display: inline-block;
+		margin-left: 30px;
+		font-size: 16px;
+		color: #ddf0ff;
+		line-height: 20px;
+		text-align: left;
+		margin-bottom: 8px;
+		span {
+			font-size: 26px;
+			color: #0282ff;
+			font-weight: bold;
+		}
+	}
+}
+// 表格
+.devicelob-table {
+	padding: 0 17px;
+
+}
+
+
+// 分页
+:deep(.el-pagination) {
+	display: flex;
+	justify-content: center;
+}
+:deep(.el-pagination button) {
+	background: center center no-repeat none !important;
+	color: #8eb8ea !important;
+}
+</style>

--
Gitblit v1.9.3