优化

src/components/OverlayModal.vue

@@ -16,7 +16,7 @@
 <style scoped>
     .overlay{
         background: rgba(0, 0, 0, .7);
-        width: 87.5rem;
+        width: 80rem;
         height: 57.5rem;
         position: absolute;
         top: 0px;

src/views/graphite/components/HeatPosition.vue

@@ -39,7 +39,7 @@
       <div class="heat_temperature" @click="setTemperature">
         <template v-if="trayInfo?.id">
           <div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
-          <div class="heating">加热中</div>
+          <div class="heating" :style="{color:temperature_color}">{{ trayInfo.heatAearStatus.isHeating ? '加热中' : '未加热' }}</div>
         </template>
         <template v-else>
           <div class="target_temp set_temp">设置目标温度</div>
@@ -49,7 +49,7 @@
       <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"
+          :class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
           @click.stop="onSelectTray"
         >
           选择
@@ -114,6 +114,7 @@ const props = defineProps({
   tubeIndex: Number,
 });
 const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", 'onSelectCraft']);
+
 const selectedBackgroundColor = '#189952'
 const readyColor = '#EE8223'
 const executingColor = '#14A656'
@@ -134,6 +135,15 @@ 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){
@@ -359,6 +369,9 @@ const onHandleSelectedCraft = (craftData:any) => {
 .text_choose{
   position: relative;
   z-index: 111;
+  
+}
+.text_color{
   background: #6893ff;
   color: #ffffff;
 }

src/views/graphite/index.vue

@@ -143,36 +143,38 @@ const taskName = ref("");
 let globeStatus: any = 0;
 onMounted(() => {
   //6个加热区数据
-	heatList.value = settingStore.heatAreaConfig.map((item: any) => {
+  heatList.value = settingStore.heatAreaConfig.map((item:any) => {
     //添加一个字段，默认为未选中
     item.isSelect = false;
-		heatAearStatusList.value.forEach((areaItem: any) => {
-			if (areaItem.hardwareId == item.hardwareId) {
+    heatAearStatusList.value.forEach((areaItem:any) => {
+      if(areaItem.hardwareId == item.hardwareId){
         item = {
           ...item, 
-					heatAearStatus: areaItem,
-				};
+          heatAearStatus:areaItem
         }
-		});
+      }
+    })
     return item;
   });
   //设备16个试管的基础数据
   tubeBaseConfig();
   //连接socket
   const wsClient = createWebSocket(sharedWsUrl);
-	const subscription = wsClient.dataOb.subscribe(data => {
-		if (!globeStatus) {
-			//为了只输入一行，不想后台一直打印此处日志 TODO
-			console.log("globeStatus====", data);
+  const subscription = wsClient.dataOb.subscribe((data) => {
+    if(!globeStatus){//为了只输入一行，不想后台一直打印此处日志 TODO
+      console.log('globeStatus====', data)
     }
     globeStatus = 1;
     if (data.type === "cmd") {
       const cmdInfo = getTxnRecord(data.data.commandId, "task");
       if (cmdInfo) {
-				const command: any = cmdInfo.command;
+        const command:any = cmdInfo.command;
         //@ts-ignore
         const cmdName = CmdDescMap[command];
-				const result = data.data.success ? "执行完毕" : `执行失败 ${data.data.message}`;
+        console.log('data.data--', data.data)
+        const result = data.data.success
+          ? "执行完毕"
+          : `执行失败 ${data.data.message}`;
         ElMessage({
           message: `${cmdName} ${result}`,
           type: data.data.success ? "success" : "error",