实验记录详情弹框

src/services/experience/experienceList.ts

@@ -1,11 +1,18 @@
 import type { BaseResponse } from "../httpRequest";
 import httpRequest from "../httpRequest";
 
+export type ExperienceStep = {
+	id: number;
+	startTime: string;
+	stepDescription: string;
+};
+
 export type ExperienceRecord = {
 	id: number;
 	name: string;
 	startTime: string;
 	createUser: number;
+	steps: ExperienceStep[];
 };
 
 export function getExperienceRecords(params: { pageNum: number; pageSize: number }) {

src/services/globalCmd/globalCmd.ts

@@ -106,7 +106,7 @@ export const CmdDescMap: { [k in OperationCmd]: string } = {
 	stopShakeUp: "结束摇匀",
 	startHeat: "开始加热",
 	stopHeat: "停止加热",
-	keepHeat: "恒温",
+	// keepHeat: "恒温",
 	takePhoto: "拍照",
 	// moveToUnusual: "移至异常区",
 	moveToHeatArea: "移至加热区",
@@ -129,7 +129,7 @@ export type OperationCmd =
 	| "stopShakeUp" // 结束摇匀
 	| "startHeat" // 开始加热
 	| "stopHeat" // 停止加热
-	| "keepHeat" // 恒温
+	// | "keepHeat" // 恒温
 	| "takePhoto" // 拍照
 	// | "moveToUnusual" // 移至异常区
 	| "moveToHeatArea" // 移至加热区

src/views/addLiquid/addLiquid.vue

@@ -22,7 +22,7 @@
 					</el-select>
 				</div>
 				<div class="flex-auto flex flex-col items-center justify-center gap-[.625rem]">
-					<div class="liquid-container relative w-[5rem] h-[7.125rem] rounded-lg overflow-hidden">
+					<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[5rem] h-[7.125rem] rounded-lg overflow-hidden">
 						<div
 							class="absolute left-0 w-full bottom-0 bg-[#26D574]"
 							:style="`height: ${
@@ -71,10 +71,3 @@ function liquidOptionDisabled(liquidId: number) {
 	return !!settingStore.heatContainers.find(h => h.solutionId !== 0 && h.solutionId === liquidId);
 }
 </script>
-<style lang="scss" scoped>
-.liquid-container {
-	background-image: url("@/assets/container.svg");
-	background-size: cover;
-	background-position: center;
-}
-</style>

src/views/components/Liquid.vue

@@ -7,7 +7,7 @@
 					v-for="container in settingStore.heatContainerWithLiquid"
 					:key="container.id"
 					class="flex flex-col items-center justify-center">
-					<div class="liquid-container relative w-[42px] h-[58px] rounded-lg overflow-hidden">
+					<div class=" bg-[url(@/assets/container.svg)] bg-cover relative w-[42px] h-[58px] rounded-lg overflow-hidden">
                         <div
 							class="absolute left-0 w-full bottom-0 bg-[#26D574]"
 							:style="`height: ${
@@ -35,10 +35,4 @@ import { useSettingStore } from "@/stores/setting";
 
 const settingStore = useSettingStore();
 </script>
-<style lang="scss" scoped>
-.liquid-container {
-	background-image: url("@/assets/container.svg");
-	background-size: cover;
-	background-position: center;
-}
-</style>
+

src/views/expeRecord/components/ExpeDetail.vue

@@ -1,8 +1,29 @@
 <template>
+	<section class="bg-white p-6 min-w-[600px]">
+		<h1 class="font-medium mb-4">步骤详情</h1>
+		<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
+			<p class="w-[10rem]">时间</p>
+			<p>操作步骤</p>
+		</header>
+		<main class="mb-4 max-h-[60vh] overflow-auto">
+			<div
+				v-for="step in record.steps"
+				:key="step.id"
+				class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e] border-b border-b-[#f8f8f8]">
+				<p class="w-[10rem]">{{ record.startTime }}</p>
+				<p>{{ record.name }}</p>
+			</div>
+		</main>
 
+		<footer class="flex justify-center gap-x-6">
+			<button class="btn-dark px-6 py-1" @click="$emit('confirm')">确定</button>
+			<button class="btn-light px-6 py-1" @click="$emit('cancel')">取消</button>
+		</footer>
+	</section>
 </template>
 <script setup lang="ts">
 import type { ExperienceRecord } from "@/services/experience/experienceList";
 
 const props = defineProps<{ record: ExperienceRecord }>();
+const emit = defineEmits(["confirm", "cancel"]);
 </script>

src/views/expeRecord/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="component-page">
 		<section class="flex items-center h-20 gap-3 pl-3">
-			<button :disabled="selectedIds.length === 0" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">导出</button>
+			<button :disabled="selectedIds.length === 0" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">
+				导出
+			</button>
 			<button
 				:disabled="selectedIds.length === 0"
 				class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled"
@@ -43,8 +45,10 @@
 			</div>
 		</section>
 
-		<van-overlay :show="showEditDialog">
-			<div class="flex justify-center items-center h-full"></div>
+		<van-overlay v-if="showEditDialog" :show="true">
+			<div class="flex justify-center items-center h-full">
+				<ExpeDetail :record="recordForEdit!" @confirm="showEditDialog = false" @cancel="showEditDialog = false" />
+			</div>
 		</van-overlay>
 	</div>
 </template>
@@ -57,6 +61,7 @@ import { onMounted, ref } from "vue";
 import { deleteExperienceRecords, getExperienceRecords, type ExperienceRecord } from "@/services/experience/experienceList";
 import { showToast } from "vant";
 import { useUserStore } from "@/stores/user";
+import ExpeDetail from "./components/ExpeDetail.vue";
 
 const userStore = useUserStore();
 const showEditDialog = ref<boolean>(false);
@@ -64,6 +69,8 @@ const showEditDialog = ref<boolean>(false);
 const recordList = ref<ExperienceRecord[]>([]);
 const selectedIds = ref<number[]>([]);
 
+const recordForEdit = ref<ExperienceRecord>();
+
 function getRecords() {
 	getExperienceRecords({ pageNum: 1, pageSize: 9999 }).then(res => {
 		if (res.success) {
@@ -105,6 +112,7 @@ function onDeleteRecords() {
 	});
 }
 function onDetailClick(item: ExperienceRecord) {
-	showToast('点了')
+	recordForEdit.value = item;
+	showEditDialog.value = true;
 }
 </script>

src/views/graphite/index.vue

@@ -726,7 +726,6 @@ const onSendCmd = (command:OperationCmd,params:any)=> {
 .graphite_home {
   background: #f6f6f6;
   display: flex;
-  gap: 1rem;
   // @media (min-width: $md) {
   flex-direction: column;
   align-items: stretch;
@@ -734,6 +733,7 @@ const onSendCmd = (command:OperationCmd,params:any)=> {
   .picture_area {
     display: flex;
     flex-direction: column-reverse;
+    margin: 0 12px;
   }
   @media (min-width: $lg) {
     flex-direction: row;