From e2a0afc1fe7e09243c51ef6da13550c792c532f9 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Tue, 11 Feb 2025 11:49:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BB=BB=E5=8A=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/graphite/components/CarfList.vue     | 101 ----------
 src/views/graphite/components/CraftList.vue    | 101 ++++++++++
 src/views/graphite/components/HeatPosition.vue | 247 ++++++++++++++++++++-----
 src/views/graphite/index.vue                   |  59 ++++--
 4 files changed, 344 insertions(+), 164 deletions(-)
 delete mode 100644 src/views/graphite/components/CarfList.vue
 create mode 100644 src/views/graphite/components/CraftList.vue

diff --git a/src/views/graphite/components/CarfList.vue b/src/views/graphite/components/CarfList.vue
deleted file mode 100644
index c99e26f..0000000
--- a/src/views/graphite/components/CarfList.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-    <div class="carf">
-        <div class="carf_title">选择工艺</div>
-        <div>
-            <div class="carf_column_name">工艺名称</div>
-            <div v-for="item in list" class="carf_item" @click="onChooseCarf(item)">
-                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="carf_li">{{ item.name }}</div>
-            </div>
-        </div>
-        <div class="overlay_btn">
-            <van-button type="primary" class="btn ok">确定</van-button>
-            <van-button class="btn cancel" @click="onCancel">取消</van-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref, onMounted } from 'vue'
-    const currentItem = ref()
-    const activeColor = ref('#ffffff')
-    const list = ref()
-    const emits = defineEmits(['changeVisible'])
-    onMounted(()=>{
-        list.value = [{
-            id: 10,
-            name: '硫酸溶解法1'
-        },{
-            id: 20,
-            name: '硫酸溶解法2'
-        },{
-            id: 30,
-            name: '硫酸溶解法3'
-        }]
-    })
-
-    const onChooseCarf = (data:any) => {
-        activeColor.value = '#d9d9d9'
-        currentItem.value = data
-    }
-
-    const onCancel = () => {
-        emits('changeVisible')
-    }
-</script>
-
-<style lang="scss" scoped>
-    .carf{
-        height: 27.5rem;
-        width: 23.75rem;
-        background: #ffffff;
-
-        .carf_title{
-            width: 5.25rem;
-            height: 1.875rem;
-            margin-left: 1.25rem;
-            margin-top: 1.875rem;
-            color: #40474E;
-            font-weight: 500;
-            font-size: 1.25rem;
-        }
-        
-    }
-
-    .carf_column_name{
-        width: 5rem;
-        height: 1.875rem;
-        color: rgba(0, 0, 0, 0.85);
-        margin-left: 2rem;
-        margin-top: .625rem;
-    }
-
-    .carf_item{
-        .carf_li{
-            display: flex;
-            align-items: center;
-            width: 23.75rem;
-            height: 3.125rem;
-            padding-left: 1.875rem;
-            font-size: 1.25rem;
-            color: rgba(0, 0, 0, 0.85);
-        }
-    }
-
-    .overlay_btn{
-        .btn{
-            width: 6.875rem;
-            height: 2.875rem;
-            font-size: 1.25rem;
-            margin-top: 6.875rem;
-        }
-
-        .ok{
-            margin-left: 5rem;
-        }
-
-        .cancel{
-            margin-left: 2.375rem;
-        }
-
-    }
-</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/CraftList.vue b/src/views/graphite/components/CraftList.vue
new file mode 100644
index 0000000..72b48bd
--- /dev/null
+++ b/src/views/graphite/components/CraftList.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="craft">
+        <div class="craft_title">选择工艺</div>
+        <section>
+            <div class="craft_column_name">工艺名称</div>
+            <div v-for="item in list" class="craft_item" @click="onChooseCraft(item)">
+                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="craft_li">{{ item.name }}</div>
+            </div>
+        </section>
+        <footer class="overlay_btn">
+            <van-button type="primary" class="btn ok">确定</van-button>
+            <van-button class="btn cancel" @click="onCancel">取消</van-button>
+        </footer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, onMounted } from 'vue'
+    const currentItem = ref()
+    const activeColor = ref('#ffffff')
+    const list = ref()
+    const emits = defineEmits(['changeVisible'])
+    onMounted(()=>{
+        list.value = [{
+            id: 10,
+            name: '硫酸溶解法1'
+        },{
+            id: 20,
+            name: '硫酸溶解法2'
+        },{
+            id: 30,
+            name: '硫酸溶解法3'
+        }]
+    })
+
+    const onChooseCraft = (data:any) => {
+        activeColor.value = 'rgb(157 205 241)'
+        currentItem.value = data
+    }
+
+    const onCancel = () => {
+        emits('changeVisible')
+    }
+</script>
+
+<style lang="scss" scoped>
+    .craft{
+        height: 27.5rem;
+        width: 23.75rem;
+        background: #ffffff;
+
+        .craft_title{
+            width: 5.25rem;
+            height: 1.875rem;
+            margin-left: 1.25rem;
+            margin-top: 1.875rem;
+            color: #40474E;
+            font-weight: 500;
+            font-size: 1.25rem;
+        }
+        
+    }
+
+    .craft_column_name{
+        width: 5rem;
+        height: 1.875rem;
+        color: rgba(0, 0, 0, 0.85);
+        margin-left: 2rem;
+        margin-top: .625rem;
+    }
+
+    .craft_item{
+        .craft_li{
+            display: flex;
+            align-items: center;
+            width: 23.75rem;
+            height: 3.125rem;
+            padding-left: 1.875rem;
+            font-size: 1.25rem;
+            color: rgba(0, 0, 0, 0.85);
+        }
+    }
+
+    .overlay_btn{
+        .btn{
+            width: 6.875rem;
+            height: 2.875rem;
+            font-size: 1.25rem;
+            margin-top: 6.875rem;
+        }
+
+        .ok{
+            margin-left: 5rem;
+        }
+
+        .cancel{
+            margin-left: 2.375rem;
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index 1f52ec3..9404871 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -1,81 +1,144 @@
 <template>
-    <div class="heat_main">
-      <div class="heat_pos_text">
-          <div class="pos_text">{{ `A-${heatInfo}` }}</div>
+    <div class="heat_main" @click="onSelectTray" :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : ''}`">
+      <section class="heat_pos_text">
+          <div class="pos_text">{{ `A-${posIndex || ''}` }}</div>
           <div class="pos_text pos_state">已放置</div>
-      </div>
-      <div class="heat_pos">
+      </section>
+
+      <section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`">
         <div
           v-for="(isActive, index) in ballStates"
           :key="index"
         >
-          <div class="inner-circle" :style="`background: ${heatInfo == 2 ? '#F2652D': ''}`"></div>
+          <div class="inner-circle" :style="`background: ${trayInfo?.id ? '#F2652D': ''}`"></div>
         </div>
-        
-      </div>
-      <!-- <div class="heat_overlay">
-        <div class="heat_loading">
-          <img :src="LoadingSvg"/>
+        <!--执行中状态的遮罩层-->
+        <div class="craft_executing_modal" v-if="trayInfo.state == 1">
+          <div class="loading">
+            <img :src="LoadingSvg"/>
+          </div>
+          <div class="tray_craft">
+            工艺名称
+          </div>
+          <div class="tray_exce">
+            工艺执行中
+          </div>
         </div>
-      </div> -->
-      <div class="heat_footer">
-        <div class="heat_temperature">
-          <div class="target_temp">目标温度: 120℃</div>
-          <div class="heating">加热中</div>
+      </section>
+
+      <section class="heat_footer">
+        <div class="heat_temperature" @click="setTemperature">
+          <template v-if="trayInfo?.id">
+            <div class="target_temp">目标温度: {{ trayInfo.trayTempVale }}℃</div>
+            <div class="heating">加热中</div>
+          </template>
+          <template v-else >
+            <div class="target_temp set_temp">设置目标温度</div>
+          </template>
         </div>
+
         <div>
           <div class="temp_text">120℃</div>
           <div class="heat_choose">
-            <van-button type="primary" class="btn" @click="()=>{onChooseFormula()}">选  择</van-button>
+            <van-button type="primary" class="btn" @click="()=>{onChooseCraft()}">选  择</van-button>
           </div>
         </div>
-      </div>
-
-      <van-overlay :show="formulaVisible" @click="formulaVisible = false" style="z-index: 999;">
-        <div class="formula_picker">
-          <van-picker
-            title="选择配方"
-            :columns="formulaList"
-            @confirm="onConfirmFormula"
-            @cancel="onCancelFormula"
-          />
+      </section>
+
+      <OverlayModal :visible="tempVisivle">
+        <div class="set_temp_modal_content">
+          <h3 class="set_temp_title">设定温度</h3>
+          <section class="temp_label">
+            <div class="text-xl ">
+              目标温度：<input type="number" v-model="trayTempVale" class="temp_input" placeholder="请输入温度"/>
+            </div>
+            <div class="text-xl temp_status flex">
+              <div>到达温度后</div>
+              <van-radio-group v-model="trayTempType" shape="square" class="flex temp_radio">
+                <van-radio name="1">保持温度</van-radio>
+                <van-radio name="2">停止加热</van-radio>
+              </van-radio-group>
+            </div>
+          </section>
+          
+          <footer
+            class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5">
+            <button class="btn-dark px-10 py-2 w-15" @click="onConfirm">确定</button>
+            <button class="btn-light px-10 py-2" @click="tempVisivle = false">取消</button>
+          </footer>
         </div>
-      </van-overlay>
+      </OverlayModal>
+      <!--选择工艺-->
+      <OverlayModal :visible="craftVisible">
+          <CraftList @changeVisible="changeVisible"></CraftList>
+      </OverlayModal>
 
     </div>
-    
   </template>
   
   <script lang="ts" setup>
   import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-  import LoadingSvg from '@/assets/loading.svg'
+  import OverlayModal from '@/components/OverlayModal.vue';
+  import CraftList from './CraftList.vue';
+  import LoadingSvg from '@/assets/loading.svg';
     const ballStates = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])
     const props = defineProps({
-      heatInfo:Number,
+      heatInfo:Object,
+      posIndex:Number
+    })
+    const emits = defineEmits(['onSelectedTray'])
 
+    onMounted(()=>{
     })
 
-    //选择配方
-    const formulaVisible = ref(false)
+    const craftVisible = ref(false)
+
+    //设置温度
+    const trayTempType = ref(false)
+    const tempVisivle = ref(false)
+    //托盘信息
+    const trayInfo = ref(props.heatInfo || {})
+    const trayTempVale = ref(trayInfo.value.trayTempVale || '')
     const formulaList:any = ref([])
-    const onChooseFormula = () => {
-      formulaVisible.value = true;
-      formulaList.value = [{ text: '硫酸', value: '1' }]
-      formulaList.value.push({ text: '硫酸', value: '1' })
+
+    //选中托盘
+    const isSelect = ref(false)
+    const currentIndex = ref()
+    const selectedTrayList = ref<any>([])
+    const onSelectTray = () => {
+        if(currentIndex.value !== props.posIndex ){
+            isSelect.value = true;
+        }else{
+            isSelect.value = !isSelect.value
+        }
+        currentIndex.value = props.posIndex;
+        
+        emits("onSelectedTray", props.heatInfo)
+        
     }
 
-    const onConfirmFormula = (value:any) => {
-      console.log('value---', value)
-      formulaVisible.value = false;
+
+    const changeVisible = () => {
+        craftVisible.value = false;
+    }
+    //选择工艺
+    const onChooseCraft = () => {
+        craftVisible.value = true;
+    }
+    const setTemperature = () => {
+      tempVisivle.value = true;
     }
 
-    const onCancelFormula = () => {
-      formulaVisible.value = false;
+    const onConfirm = () => {
+      trayInfo.value.id = 3;
+      trayInfo.value.trayTempVale = trayTempVale;
+      tempVisivle.value = false;
     }
 
   </script>
   
-  <style scoped>
+  <style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
   .heat_main{
     border: 1px solid #E9F3FF;
     width: 366px;
@@ -105,26 +168,55 @@
     }
   }
   .heat_pos{
-    width: 330px;
-    height: 330px;
+    width: 10.375rem;
+    height: 10.375rem;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-left: 5px;
-    gap: 22px;
+    gap: .625rem;
     flex-direction: row;
-    background: #384D5D;
     border: 2px solid #7592A8;
-    margin-left: 15px;
-    padding-top: 15px;
-    border-radius: 16px;
+    margin-left: .5rem;
+    padding-top: .5rem;
+    border-radius: 0.5rem;
+    
+    .craft_executing_modal{
+      position: absolute;
+      width: 10rem;
+      height: 18rem;
+      background: rgba(2, 86, 255, 0.12);
+      opacity: 0.5;
+      z-index: 9999;
+      margin-top: -2rem;
+      .loading{
+        margin-left: 4.2rem;
+        margin-top: 4rem;
+      }
+      .tray_craft{
+        font-size: 1rem;
+        margin-top: 0.5rem;
+        margin-left: 3rem;
+        font-weight: bold;
+        color: #4D6882;
+      }
+
+      .tray_exce{
+        font-size: 1.2rem;
+        margin-left: 1.8rem;
+        font-weight: bold;
+        color: #4D6882;
+      }
+
+      
+    }
 
   }
   .inner-circle {
     border-radius: 50%;
     width: 50px;
     height: 50px;
-    background-color: rgb(209, 33, 33);
+    background-color: rgb(212, 212, 212);
   }
   .heat_footer{
     height: 180px;
@@ -139,6 +231,7 @@
       border-radius: 5px;
       display: flex;
       align-items: center;
+      justify-content: center;
       margin-left: 10px;
       .target_temp{
         color: #384D5D;
@@ -204,6 +297,58 @@
     width: 800px;
     margin: 20% 30%;
   }
+  
+  .set_temp_modal{
+    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;
+    }
+  }
+  
+  .temp_input{
+    border: 1px solid #dadada;
+    font-size: 1.25rem;
+    width: 10rem;
+  }
+
+  .temp_status{
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 20px;
+  }
+
+  .temp_radio{
+    font-size: 1.25rem;
+    display: flex;
+    gap: 20px;
+  }
+
+  :deep(.van-radio__icon){
+    i{
+      font-size: 30px;
+      margin-top: -10px;
+    }
+  }
 
   </style>
   
\ No newline at end of file
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 0222997..e8ff3f6 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,9 +1,16 @@
 <template>
     <div class="graphite_home component-page">
         <div class="heat_area">
-            <div v-for="item in heatList" :key="item">
-                <HeatPosition :heatInfo="item"></HeatPosition>
+            <div v-for="(item, index) in heatList" :key="item">
+                
+                    <HeatPosition :heatInfo="item" :posIndex="index + 1" @onSelectedTray="onSelectedTray"></HeatPosition>
+            
+                <!-- <div class="craft_executing_modal">
+
+                </div> -->
             </div>
+            <!--执行中状态的遮罩层-->
+        
         </div>
         <!--拍照区-->
         <div class="pickture_area">
@@ -65,18 +72,37 @@
             </div>
         </van-overlay>
         <!--选择工艺-->
-        <OverlayModal :visible="carfVisible">
-            <CarfList @changeVisible="changeVisible"></CarfList>
+        <OverlayModal :visible="craftVisible">
+            <CraftList @changeVisible="changeVisible"></CraftList>
         </OverlayModal>
     </div>
 </template>
 <script lang="ts" setup>
-    import { ref } from 'vue';
+    import { ref, onMounted } from 'vue';
     import {HeatPosition, TakePickture, AddLiquid} from './components'
     import OverlayModal from '@/components/OverlayModal.vue';
-    import CarfList from './components/CarfList.vue';
-    const heatList:any = ref([1,2,3,4,5,6])
-    const carfVisible = ref(false)
+    import CraftList from './components/CraftList.vue';
+    const heatList:any = ref([{
+        id:1,
+        name:'A-1',
+        trayTempVale: 200,
+    }])
+    const craftVisible = ref(false)
+
+    onMounted(()=>{
+        while (heatList.value.length < 6) {
+            heatList.value.push({});
+        }
+
+    })
+
+    //选择的托盘
+    const selectedTrayList = ref<any>([])
+    const onSelectedTray = (data={}) => {
+        selectedTrayList.value.push(data)
+        console.log('selectedTrayList.value--', selectedTrayList.value)
+    }
+    
     //添加溶液
     const liquidVisible = ref(false)
     const onAddLiquid = () => {
@@ -84,15 +110,15 @@
     }
 
     const changeVisible = () => {
-        carfVisible.value = false;
+        craftVisible.value = false;
     }
     //选择工艺
     const onChooseCaft = () => {
-        carfVisible.value = true;
+        craftVisible.value = true;
     }
 </script>
-<style>
-
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
     .graphite_home{
         display: flex;
         background: #F6F6F6;
@@ -108,6 +134,15 @@
         padding-bottom: 100px;
         background: #FFFFFF;
         border-radius: 20px;
+
+        .craft_executing_modal{
+            position: absolute;
+            width: 10.5rem;
+            height: 18rem;
+            background: rgb(230, 230, 230);
+            opacity: 0.5;
+            z-index: 9999;
+        }
     }
 
     .pickture_area{