调整设置温度弹框样式

src/services/task/task.ts

@@ -2,20 +2,18 @@ import httpRequest, { type BaseResponse } from "../httpRequest";
 import { addTxnRecord, injectFluidsRecord } from "../txn";
 import type { OperationCmd } from "../globalCmd/globalCmd";
 
-
-export function saveTaskName(params: { name: String}) {
-    return httpRequest<BaseResponse<any>>({ url: `/api/tasks/`, method: "POST", params });
+export function saveTaskName(params: { name: String }) {
+	return httpRequest<BaseResponse<any>>({ url: `/api/tasks/`, method: "POST", params });
 }
 
 //结束实验
-export function stopTask(params: { taskId: String}) {
-    return httpRequest<BaseResponse<string>>({ url: `/api/tasks/stop`, method: "POST", params });
+export function stopTask(params: { taskId: String }) {
+	return httpRequest<BaseResponse<string>>({ url: `/api/tasks/stop`, method: "POST", params });
 }
 
-
 //结束实验
 export function getIngTask() {
-    return httpRequest<BaseResponse<any>>({ url: `/api/tasks/getIngTask`, method: "GET" });
+	return httpRequest<BaseResponse<any>>({ url: `/api/tasks/getIngTask`, method: "GET" });
 }
 
 //批量加热
@@ -25,7 +23,7 @@ export function startHeat(params: { command: OperationCmd; params: [] }) {
 }
 
 //批量加液
-export function injectFluid(params:any) {
-	const commandId = injectFluidsRecord({ injectFluids:params.injectFluids, command:'', category: "task" });
+export function injectFluid(params: any) {
+	const commandId = injectFluidsRecord({ injectFluids: params.injectFluids, command: "injectFluid", category: "task" });
 	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/injectFluid", params: { ...params, commandId }, method: "POST" });
 }

src/services/txn.ts

@@ -24,13 +24,13 @@ type DebugCmdRecord = {
 
 type TaskCmdRecord = {
 	category: "task";
-	command: OperationCmd | null;
+	command: OperationCmd;
 	params: Record<string, any>;
 }
 
 type TaskCmdInjectFluidsRecord = {
 	category: "task";
-	command: '',
+	command: OperationCmd,
 	injectFluids: [];
 }
 

src/views/graphite/components/HeatPosition.vue

@@ -1,63 +1,65 @@
 <template>
-  <div
-    class="heat_main"
-    :style="`${
-      trayInfo.isSelect
-        ? 'border:4px solid rgb(66 215 76)'
-        : 'border:4px solid #ffffff'
-    }`"
-  >
-    <section class="heat_pos_text">
-      <div class="pos_text">{{ trayInfo.name }}</div>
-      <div class="pos_text pos_state">已放置</div>
-    </section>
-
-    <section
-      class="heat_pos"
-      :style="`background:${trayInfo?.id ? '' : ''}`"
-    >
-      <div
-        v-for="(tube, index) in trayInfo.tubeList || tubeList"
-        :key="index"
-        class="inner-circle"
-        @click.stop="onHandleTube(tube, index)"
-        :style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"
-      ></div>
-      <!--执行中状态的遮罩层-->
-      <div class="craft_executing_modal" v-if="trayInfo.craftInfo?.id" :style="{background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF'}">
-        <!--trayInfo.executing_craft 已选择工艺未执行-->
-        <div class="loading">
-          <img v-if="trayInfo.executing_craft" :src="ExecutingSvg"/>
-          <img v-else :src="ReadySvg" />
-        </div>
-        <div class="tray_craft" :style="{color: !trayInfo.executing_craft ? readyColor : executingColor}">{{ trayInfo.craftInfo.name }}</div>
-        <div class="tray_exce" :style="{color: !trayInfo.executing_craft ? readyColor : executingColor}">{{ !trayInfo.executing_craft ? '工艺等待执行' : '工艺执行完毕'}}</div>
-      </div>
-    </section>
-
-    <section class="heat_footer">
-      <div class="heat_temperature" @click="setTemperature">
-        <template v-if="trayInfo?.id">
-          <div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
-          <div class="heating" :style="{color:temperature_color}">{{ trayInfo.heatAearStatus?.isHeating ? '加热中' : '未加热' }}</div>
-        </template>
-        <template v-else>
-          <div class="target_temp set_temp">设置目标温度</div>
-        </template>
-      </div>
-
-      <div class="flex items-center py-4 justify-between px-2">
-        <div class="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
-        <button
-          :class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
-          @click.stop="onSelectTray"
-        >
-          选择
-        </button>
-      </div>
-    </section>
-
-    <OverlayModal :visible="tempVisible">
+	<div class="heat_main" :style="`${trayInfo.isSelect ? 'border:4px solid rgb(66 215 76)' : 'border:4px solid #ffffff'}`">
+		<section class="heat_pos_text">
+			<div class="pos_text">{{ trayInfo.name }}</div>
+			<div class="pos_text pos_state">已放置</div>
+		</section>
+
+		<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
+			<div
+				v-for="(tube, index) in trayInfo.tubeList || tubeList"
+				:key="index"
+				class="inner-circle"
+				@click.stop="onHandleTube(tube, index)"
+				:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
+			<!--执行中状态的遮罩层-->
+			<div
+				class="craft_executing_modal"
+				v-if="trayInfo.craftInfo?.id"
+				:style="{ background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF' }">
+				<!--trayInfo.executing_craft 已选择工艺未执行-->
+				<div class="loading">
+					<img v-if="trayInfo.executing_craft" :src="ExecutingSvg" />
+					<img v-else :src="ReadySvg" />
+				</div>
+				<div class="tray_craft" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
+					{{ trayInfo.craftInfo.name }}
+				</div>
+				<div class="tray_exce" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
+					{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
+				</div>
+			</div>
+		</section>
+
+		<section class="heat_footer">
+			<div class="heat_temperature" @click="setTemperature">
+				<template v-if="trayInfo?.id">
+					<div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
+					<div class="heating" :style="{ color: temperature_color }">
+						{{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
+					</div>
+				</template>
+				<template v-else>
+					<div class="target_temp set_temp">设置目标温度</div>
+				</template>
+			</div>
+
+			<div class="flex items-center py-4 justify-between px-2">
+				<div class="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
+				<button
+					:class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
+					@click.stop="onSelectTray">
+					选择
+				</button>
+			</div>
+		</section>
+
+		<van-overlay v-if="tempVisible" :show="true">
+			<div class="flex justify-center items-center h-full">
+				<SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" />
+			</div>
+		</van-overlay>
+		<!-- <OverlayModal :visible="tempVisible">
       <div class="set_temp_modal_content">
         <h3 class="set_temp_title">设定温度</h3>
         <section class="temp_label">
@@ -93,12 +95,12 @@
           </button>
         </footer>
       </div>
-    </OverlayModal>
-    <!--选择工艺-->
-    <OverlayModal :visible="craftVisible">
-      <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
-    </OverlayModal>
-  </div>
+    </OverlayModal> -->
+		<!--选择工艺-->
+		<OverlayModal :visible="craftVisible">
+			<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
+		</OverlayModal>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -107,25 +109,26 @@ import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "./CraftList.vue";
 import ReadySvg from "@/assets/ready.svg";
 import ExecutingSvg from "@/assets/executing.svg";
+import SetTemperature from "./SetTemperature.vue";
 
 const tubeList = ref<any>([]);
 const props = defineProps({
-  heatInfo: Object,
-  tubeIndex: Number,
+	heatInfo: Object,
+	tubeIndex: Number,
 });
-const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", 'onSelectCraft']);
+const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", "onSelectCraft"]);
 
-const selectedBackgroundColor = '#189952'
-const readyColor = '#EE8223'
-const executingColor = '#14A656'
+const selectedBackgroundColor = "#189952";
+const readyColor = "#EE8223";
+const executingColor = "#14A656";
 onMounted(() => {
-  for(let i = 0 ; i<16; i++){
-    tubeList.value.push({
-      backgroudColor:'',
-      id:i+1
-    })
-  }
-  reSet(props.heatInfo)
+	for (let i = 0; i < 16; i++) {
+		tubeList.value.push({
+			backgroudColor: "",
+			id: i + 1,
+		});
+	}
+	reSet(props.heatInfo);
 });
 
 const craftVisible = ref(false);
@@ -135,275 +138,274 @@ const trayTempType = ref(false);
 const tempVisible = ref(false);
 //加热区信息
 let trayInfo = ref<any>(props.heatInfo || {});
-let temperature_color = ref('#1677FF')
-watch(()=>trayInfo, (newVal:any) =>{
-  if(newVal.heatAearStatus.isHeating){
-    temperature_color.value = '#FE0A0A'  
-  }else{
-    temperature_color.value = '#1677FF'  
-  }
-  
-})
-const reSet = (newVal:any) => {
-  let heatAreaData = {...newVal}
-  if(heatAreaData.heatAearStatus?.trayStatus){
-    if(heatAreaData.tubeList && heatAreaData.tubeList.length){
-      heatAreaData.tubeList.forEach((item:any) => {
-        item.backgroudColor = selectedBackgroundColor
-        item.isSelected = true;
-      })
-    }else{
-      tubeList.value.forEach((item:any) => {
-        item.backgroudColor = selectedBackgroundColor
-        item.isSelected = true;
-      })
-      heatAreaData.tubeList = tubeList.value
-    }
-  }
-  trayInfo.value = heatAreaData
-}
+let temperature_color = ref("#1677FF");
+watch(
+	() => trayInfo,
+	(newVal: any) => {
+		if (newVal.heatAearStatus.isHeating) {
+			temperature_color.value = "#FE0A0A";
+		} else {
+			temperature_color.value = "#1677FF";
+		}
+	}
+);
+const reSet = (newVal: any) => {
+	let heatAreaData = { ...newVal };
+	if (heatAreaData.heatAearStatus?.trayStatus) {
+		if (heatAreaData.tubeList && heatAreaData.tubeList.length) {
+			heatAreaData.tubeList.forEach((item: any) => {
+				item.backgroudColor = selectedBackgroundColor;
+				item.isSelected = true;
+			});
+		} else {
+			tubeList.value.forEach((item: any) => {
+				item.backgroudColor = selectedBackgroundColor;
+				item.isSelected = true;
+			});
+			heatAreaData.tubeList = tubeList.value;
+		}
+	}
+	trayInfo.value = heatAreaData;
+};
 
 const heatAreaTemperature = ref(trayInfo.value.temperature || "");
 const currentIndex = ref();
 const onSelectTray = () => {
-  if (currentIndex.value !== props.tubeIndex) {
-    trayInfo.value.isSelect = true;
-  } else {
-    trayInfo.value.isSelect = !trayInfo.value.isSelect;
-  }
-  currentIndex.value = props.tubeIndex;
-  emits("onSelectedTray", trayInfo.value, 'isClick');
+	if (currentIndex.value !== props.tubeIndex) {
+		trayInfo.value.isSelect = true;
+	} else {
+		trayInfo.value.isSelect = !trayInfo.value.isSelect;
+	}
+	currentIndex.value = props.tubeIndex;
+	emits("onSelectedTray", trayInfo.value, "isClick");
 };
 
 const changeVisible = () => {
-  craftVisible.value = false;
+	craftVisible.value = false;
 };
 
 //选择工艺
 const onChooseCraft = () => {
-  onSelectTray()
-  craftVisible.value = true;
+	onSelectTray();
+	craftVisible.value = true;
 };
 const setTemperature = () => {
-  tempVisible.value = true;
+	heatAreaTemperature.value = +trayInfo.value.temperature;
+	tempVisible.value = true;
 };
 
-const onConfirm = () => {
-  trayInfo.value.temperature = heatAreaTemperature.value;
-  tempVisible.value = false;
-  //将设置的温度传给加热区
-  emits("onSetHeatAreaTemp", trayInfo.value);
+const onConfirm = (temperature: number) => {
+	trayInfo.value.temperature = temperature;
+	tempVisible.value = false;
+	//将设置的温度传给加热区
+	emits("onSetHeatAreaTemp", trayInfo.value);
 };
 
 //试管操作
-const onHandleTube = (tubeInfo: any, index:number) => {
-  if(!trayInfo.value.heatAearStatus.trayStatus)return;
-  //设置UI选中颜色
-  if(trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected){
-    tubeInfo.backgroudColor = ''
-  }else{
-    tubeInfo.backgroudColor = selectedBackgroundColor
-  }
-  tubeInfo.isSelected = !tubeInfo.isSelected;
+const onHandleTube = (tubeInfo: any, index: number) => {
+	if (!trayInfo.value.heatAearStatus.trayStatus) return;
+	//设置UI选中颜色
+	if (trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected) {
+		tubeInfo.backgroudColor = "";
+	} else {
+		tubeInfo.backgroudColor = selectedBackgroundColor;
+	}
+	tubeInfo.isSelected = !tubeInfo.isSelected;
 };
 
 //选择的工艺
-const onHandleSelectedCraft = (craftData:any) => {
-  emits('onSelectCraft', craftData)
+const onHandleSelectedCraft = (craftData: any) => {
+	emits("onSelectCraft", craftData);
 	changeVisible();
-}
-
+};
 </script>
 
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;
 .heat_main {
-  border: 1px solid #e9f3ff;
-  width: 11.5rem;
-  height: 18.125rem;
-  border-radius: 10px;
-  background: #e9f3ff;
+	border: 1px solid #e9f3ff;
+	width: 11.5rem;
+	height: 18.125rem;
+	border-radius: 10px;
+	background: #e9f3ff;
 }
 .heat_pos_text {
-  display: flex;
-  height: 1.75rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
-  .pos_text {
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: normal;
-    display: flex;
-    align-items: center;
-    color: #4d6882;
-  }
-
-  .pos_state {
-    margin-left: 50%;
-  }
+	display: flex;
+	height: 1.75rem;
+	padding-left: 0.875rem;
+	padding-right: 0.75rem;
+	.pos_text {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: normal;
+		display: flex;
+		align-items: center;
+		color: #4d6882;
+	}
+
+	.pos_state {
+		margin-left: 50%;
+	}
 }
 .heat_pos {
-  width: 10.375rem;
-  height: 10.375rem;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-left: 5px;
-  gap: 0.625rem;
-  flex-direction: row;
-  border: 2px solid #7592a8;
-  padding-top: 0.5rem;
-  border-radius: 0.5rem;
-
-  
+	width: 10.375rem;
+	height: 10.375rem;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin-left: 5px;
+	gap: 0.625rem;
+	flex-direction: row;
+	border: 2px solid #7592a8;
+	padding-top: 0.5rem;
+	border-radius: 0.5rem;
 }
 .inner-circle {
-  border-radius: 50%;
-  width: 1.625rem;
-  height: 1.625rem;
-  background-color: rgb(212, 212, 212);
+	border-radius: 50%;
+	width: 1.625rem;
+	height: 1.625rem;
+	background-color: rgb(212, 212, 212);
 }
 .heat_footer {
-  margin-top: 10px;
-  margin-left: 5px;
-  .heat_temperature {
-    height: 1.625rem;
-    width: 10rem;
-    background: #ffffff;
-    box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .target_temp {
-      color: #384d5d;
-      font-size: 0.75rem;
-    }
-
-    .heating {
-      color: #fe0a0a;
-      font-size: 0.875rem;
-      margin-left: 1rem;
-    }
-  }
-
-  .temp_text {
-    font-size: 1.125rem;
-    font-weight: bold;
-    color: #4d6882;
-  }
+	margin-top: 10px;
+	margin-left: 5px;
+	.heat_temperature {
+		height: 1.625rem;
+		width: 10rem;
+		background: #ffffff;
+		box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
+		border-radius: 5px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.target_temp {
+			color: #384d5d;
+			font-size: 0.75rem;
+		}
+
+		.heating {
+			color: #fe0a0a;
+			font-size: 0.875rem;
+			margin-left: 1rem;
+		}
+	}
+
+	.temp_text {
+		font-size: 1.125rem;
+		font-weight: bold;
+		color: #4d6882;
+	}
 }
 
 .heat_overlay {
-  border: 1px solid #e9f3ff;
-  width: 9.375rem;
-  height: 15.5rem;
-  border-radius: 20px;
-  margin-top: 3.125rem;
-  position: absolute;
-  background: #d3d3d3;
-  margin-top: -10.375rem;
-  opacity: 0.8;
-
-  .heat_loading {
-    margin: 3.875rem;
-  }
+	border: 1px solid #e9f3ff;
+	width: 9.375rem;
+	height: 15.5rem;
+	border-radius: 20px;
+	margin-top: 3.125rem;
+	position: absolute;
+	background: #d3d3d3;
+	margin-top: -10.375rem;
+	opacity: 0.8;
+
+	.heat_loading {
+		margin: 3.875rem;
+	}
 }
 
 .formula_picker {
-  width: 25rem;
-  margin: 20% 30%;
+	width: 25rem;
+	margin: 20% 30%;
 }
 
 .set_temp_modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .set_temp_modal_content {
-  width: 28.5rem;
-  height: 16.5rem;
-  background: #ffffff;
-
-  .temp_label {
-    margin-left: 2.875rem;
-    margin-top: 1rem;
-  }
-
-  .set_temp_title {
-    height: 1.875rem;
-    width: 5.25rem;
-    margin-top: 1.875rem;
-    margin-left: 1.25rem;
-    font-size: 1.25rem;
-    font-weight: 500;
-    color: #40474e;
-  }
+	width: 28.5rem;
+	height: 16.5rem;
+	background: #ffffff;
+
+	.temp_label {
+		margin-left: 2.875rem;
+		margin-top: 1rem;
+	}
+
+	.set_temp_title {
+		height: 1.875rem;
+		width: 5.25rem;
+		margin-top: 1.875rem;
+		margin-left: 1.25rem;
+		font-size: 1.25rem;
+		font-weight: 500;
+		color: #40474e;
+	}
 }
 
 .temp_input {
-  border: 1px solid #dadada;
-  font-size: 1.25rem;
-  width: 10rem;
+	border: 1px solid #dadada;
+	font-size: 1.25rem;
+	width: 10rem;
 }
 
 .temp_status {
-  margin-top: 1.5rem;
-  display: flex;
-  gap: 20px;
+	margin-top: 1.5rem;
+	display: flex;
+	gap: 20px;
 }
 
 .temp_radio {
-  font-size: 1.25rem;
-  display: flex;
-  gap: 20px;
+	font-size: 1.25rem;
+	display: flex;
+	gap: 20px;
 }
 
 :deep(.van-radio__icon) {
-  i {
-    font-size: 30px;
-    margin-top: -10px;
-  }
+	i {
+		font-size: 30px;
+		margin-top: -10px;
+	}
 }
-.text_choose{
-  position: relative;
-  z-index: 111;
-  
+.text_choose {
+	position: relative;
+	// z-index: 111;
 }
-.text_color{
-  background: #6893ff;
-  color: #ffffff;
+.text_color {
+	background: #6893ff;
+	color: #ffffff;
 }
 .craft_executing_modal {
-    position: relative;
-    width: 11.2rem;
-    height: 17.8rem;
-    padding-top: 0.5rem;
-    border-radius: 0.5rem;
-    opacity: 0.8;
-    z-index: 99;
-    margin-top: -11.5rem;
-    .loading {
-      margin-top: 4rem;
-      display: flex;
-      justify-content: center;
-    }
-    .tray_craft {
-      font-size: .75rem;
-      margin-top: 0.5rem;
-      font-weight: bold;
-      display: flex;
-      justify-content: center;
-      color: #EE8223;
-    }
-
-    .tray_exce {
-      font-size: 1rem;
-      font-weight: bold;
-      color: #EE8223;
-      display: flex;
-      justify-content: center;
-    }
-  }
+	position: relative;
+	width: 11.2rem;
+	height: 17.8rem;
+	padding-top: 0.5rem;
+	border-radius: 0.5rem;
+	opacity: 0.8;
+	z-index: 99;
+	margin-top: -11.5rem;
+	.loading {
+		margin-top: 4rem;
+		display: flex;
+		justify-content: center;
+	}
+	.tray_craft {
+		font-size: 0.75rem;
+		margin-top: 0.5rem;
+		font-weight: bold;
+		display: flex;
+		justify-content: center;
+		color: #ee8223;
+	}
+
+	.tray_exce {
+		font-size: 1rem;
+		font-weight: bold;
+		color: #ee8223;
+		display: flex;
+		justify-content: center;
+	}
+}
 </style>

src/views/graphite/components/SetTemperature.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="w-[440px] bg-white px-5 py-[30px] rounded-lg text-text">
+		<h3 class="text-xl font-medium">设定温度</h3>
+		<section class="">
+			<div class="text-xl flex items-center h-16">
+				<span class="min-w-[100px] text-right">目标温度</span
+				><el-input v-model="temperatureVal" class="ml-5 mr-3" style="width: 200px" placeholder="请输入温度" />
+				<span>℃</span>
+			</div>
+
+			<!-- <div class="text-xl flex items-center h-16">
+				<div class="min-w-[100px]">到达温度后</div>
+				<div class="ml-5 mr-3">
+					<van-radio-group direction="horizontal" shape="dot">
+						<van-radio name="1">保持温度</van-radio>
+						<van-radio name="2">停止加热</van-radio>
+					</van-radio-group>
+				</div>
+			</div> -->
+		</section>
+
+		<footer class="mt-4 flex justify-center items-center text-sm font-medium gap-x-8">
+			<button class="btn-dark px-10 py-2 text-xl" @click="$emit('confirm', temperatureVal)">确定</button>
+			<button class="btn-light px-10 py-2 text-xl" @click="$emit('cancel')">取消</button>
+		</footer>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{ temperature: number }>();
+const temperatureVal = ref<number>(props.temperature);
+const emit = defineEmits<{
+	(e: "confirm", temperature: number): void;
+	(e: "cancel"): void;
+}>();
+</script>
+<style lang="scss" scoped></style>