Browse Source

优化

master
LiLongLong 5 months ago
parent
commit
62402fe150
  1. 1
      src/components/OverlayModal.vue
  2. 2
      src/views/components/chooseAcidDlg.vue
  3. 31
      src/views/graphite/components/AddLiquid.vue
  4. 90
      src/views/graphite/components/HeatPosition.vue
  5. 53
      src/views/graphite/index.vue

1
src/components/OverlayModal.vue

@ -21,7 +21,6 @@
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 112
} }
.overlay_modal{ .overlay_modal{
display: flex; display: flex;

2
src/views/components/chooseAcidDlg.vue

@ -1,5 +1,5 @@
<template> <template>
<van-overlay :show="visible" style="z-index: 999;">
<van-overlay :show="visible">
<div class="overlay_modal" > <div class="overlay_modal" >
<div class="overlay_title">液体选择</div> <div class="overlay_title">液体选择</div>
<div class="overlay_content"> <div class="overlay_content">

31
src/views/graphite/components/AddLiquid.vue

@ -31,7 +31,7 @@
<!--左溶液瓶区--> <!--左溶液瓶区-->
<div> <div>
<div class="liquid_percentage"> <div class="liquid_percentage">
<div class="percent_num">300ml</div>
<div class="percent_num">{{ solution.remainQuan }}ml</div>
<div class="liquid_color" style="background-color:#26D574;"></div> <div class="liquid_color" style="background-color:#26D574;"></div>
</div> </div>
<div class="liquid_name">{{ solution.name }}</div> <div class="liquid_name">{{ solution.name }}</div>
@ -39,10 +39,10 @@
<!--右操作区--> <!--右操作区-->
<div> <div>
<div class="liquid_edit"> <div class="liquid_edit">
<div >
<!-- <div >
<van-icon name="edit" /> <van-icon name="edit" />
<span>请输入添加值</span> <span>请输入添加值</span>
</div>
</div> -->
<div class="liquid_field"> <div class="liquid_field">
<img :src="AddSvg" class="liquid_input_img"/> <img :src="AddSvg" class="liquid_input_img"/>
<input type="text" :key="index" v-model="solution.solutionNum" placeholder="请输入" class="liquid_input"/> <input type="text" :key="index" v-model="solution.solutionNum" placeholder="请输入" class="liquid_input"/>
@ -89,18 +89,22 @@
emits('onAddSolution', tubeQueue.value) emits('onAddSolution', tubeQueue.value)
onCancel() onCancel()
} }
console.log('props.currentSelectedTube---', props.currentSelectedTube)
onMounted(()=>{ onMounted(()=>{
// //
console.log('currentSelectedTube---', props.currentSelectedTube)
const containerList = settingStore.containerConf; const containerList = settingStore.containerConf;
const liquidMap = settingStore.liquidIdMap const liquidMap = settingStore.liquidIdMap
containerList.forEach(item => { containerList.forEach(item => {
if(item.type == 0){ if(item.type == 0){
const {capacityTotal, capacityUsed} = item;
const remainQuan = capacityTotal - capacityUsed
solutionList.value.push({ solutionList.value.push({
id: item.id,//ID() id: item.id,//ID()
name: liquidMap[item.solutionId] && liquidMap[item.solutionId].name, name: liquidMap[item.solutionId] && liquidMap[item.solutionId].name,
solutionId : item.solutionId,//ID solutionId : item.solutionId,//ID
capacityTotal:item.capacityTotal,
capacityUsed:item.capacityUsed,
remainQuan
}) })
} }
}) })
@ -116,7 +120,8 @@
for(let i = 0; i < 16; i++){ for(let i = 0; i < 16; i++){
tubeList.value.push({ tubeList.value.push({
id: i + 1, id: i + 1,
color:emptyColor
color:emptyColor,
backgroudColor:'#189952',
}) })
} }
} }
@ -270,7 +275,6 @@
background-image: url('@/assets/container.svg'); background-image: url('@/assets/container.svg');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
z-index: 1;
border-radius: 10px; border-radius: 10px;
margin-top: 1rem; margin-top: 1rem;
margin-left: 1rem; margin-left: 1rem;
@ -278,8 +282,8 @@
.percent_num{ .percent_num{
position: relative; position: relative;
top: 40%;
left: 22%;
top: 2.5rem;
left: 0.6rem;
font-size:1rem; font-size:1rem;
} }
.liquid_color{ .liquid_color{
@ -290,12 +294,11 @@
height: 50%; height: 50%;
background-color: blue; background-color: blue;
opacity: 0.5; opacity: 0.5;
z-index: 2;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
} }
.liquid_name{ .liquid_name{
margin-left: 2rem;
margin-left: 2.5rem;
margin-top: .5rem; margin-top: .5rem;
font-size: .75rem; font-size: .75rem;
color: #393F46; color: #393F46;
@ -326,12 +329,12 @@
.add_btn{ .add_btn{
background-color: #26D574; background-color: #26D574;
font-size: .625rem;
font-size: 1rem;
color: #ffffff; color: #ffffff;
width: 6.625rem; width: 6.625rem;
height: 1.625rem;
height: 1.8rem;
border-radius: 100px; border-radius: 100px;
margin-top:5px;
margin-top:1.2rem;
} }
} }

90
src/views/graphite/components/HeatPosition.vue

@ -13,12 +13,30 @@
</section> </section>
<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`"> <section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
<div <div
v-for="(tube, index) in trayInfo.tubeList || tubeList" v-for="(tube, index) in trayInfo.tubeList || tubeList"
:key="index" :key="index"
class="inner-circle" class="inner-circle"
@click.stop="onHandleTube(tube, index)" @click.stop="onHandleTube(tube, index)"
:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div> :style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
<div 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="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
</div>
<!--执行中状态的遮罩层--> <!--执行中状态的遮罩层-->
<div <div
class="craft_executing_modal" class="craft_executing_modal"
@ -36,29 +54,16 @@
{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }} {{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
</div> </div>
</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="heat_footer_choose">
<div class="flex items-center py-4 justify-between px-2"> <div class="flex items-center py-4 justify-between px-2">
<div class="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
<button <button
:class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`" :class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
@click.stop="onSelectTray"> @click.stop="onSelectTray">
选择 选择
</button> </button>
</div> </div>
</div>
</section> </section>
<van-overlay v-if="tempVisible" :show="true"> <van-overlay v-if="tempVisible" :show="true">
@ -66,43 +71,6 @@
<SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" /> <SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" />
</div> </div>
</van-overlay> </van-overlay>
<!-- <OverlayModal :visible="tempVisible">
<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="heatAreaTemperature"
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="tempVisible = false">
取消
</button>
</footer>
</div>
</OverlayModal> -->
<!--选择工艺--> <!--选择工艺-->
<OverlayModal :visible="craftVisible"> <OverlayModal :visible="craftVisible">
<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList> <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
@ -160,7 +128,6 @@ const reset = (heatInfo:any) => {
if(heatAreaData.heatAearStatus?.trayStatus){ if(heatAreaData.heatAearStatus?.trayStatus){
if(heatAreaData.tubeList && heatAreaData.tubeList.length){ if(heatAreaData.tubeList && heatAreaData.tubeList.length){
heatAreaData.tubeList.forEach((item:any) => { heatAreaData.tubeList.forEach((item:any) => {
item.backgroudColor = selectedBackgroundColor
item.isSelected = true; item.isSelected = true;
}) })
}else{ }else{
@ -265,6 +232,7 @@ const onHandleSelectedCraft = (craftData: any) => {
border: 2px solid #7592a8; border: 2px solid #7592a8;
padding-top: 0.5rem; padding-top: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
position: relative;
} }
.inner-circle { .inner-circle {
border-radius: 50%; border-radius: 50%;
@ -273,7 +241,8 @@ const onHandleSelectedCraft = (craftData: any) => {
background-color: rgb(212, 212, 212); background-color: rgb(212, 212, 212);
} }
.heat_footer { .heat_footer {
margin-top: 10px;
position: absolute;
margin-top: 10.5rem;
margin-left: 5px; margin-left: 5px;
.heat_temperature { .heat_temperature {
height: 1.625rem; height: 1.625rem;
@ -300,7 +269,14 @@ const onHandleSelectedCraft = (craftData: any) => {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: bold; font-weight: bold;
color: #4d6882; color: #4d6882;
padding-top:1rem;
padding-left: 0.5rem;
}
} }
.heat_footer_choose{
padding-top:3.2rem;
padding-left: 5rem;
} }
.heat_overlay { .heat_overlay {
@ -377,21 +353,19 @@ const onHandleSelectedCraft = (craftData: any) => {
} }
.text_choose { .text_choose {
position: relative; position: relative;
// z-index: 111;
} }
.text_color { .text_color {
background: #6893ff; background: #6893ff;
color: #ffffff; color: #ffffff;
} }
.craft_executing_modal { .craft_executing_modal {
position: relative;
position: absolute;
width: 11.2rem; width: 11.2rem;
height: 17.8rem; height: 17.8rem;
padding-top: 0.5rem; padding-top: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
opacity: 0.8; opacity: 0.8;
z-index: 99;
margin-top: -11.5rem;
margin-top: -2.5rem;
.loading { .loading {
margin-top: 4rem; margin-top: 4rem;
display: flex; display: flex;

53
src/views/graphite/index.vue

@ -1,11 +1,10 @@
<template> <template>
<div class="graphite_home component-page overflow-auto" id="heatArea"> <div class="graphite_home component-page overflow-auto" id="heatArea">
<div class="heat_area">
<div class="heat_area" v-if="heatList && heatList.length">
<div v-for="(item, index) in heatList" :key="item.id"> <div v-for="(item, index) in heatList" :key="item.id">
<HeatPosition <HeatPosition
:heatInfo="{ ...item, index }" :heatInfo="{ ...item, index }"
:tubeIndex="index + 1" :tubeIndex="index + 1"
:heatAearStatusList="heatAearStatusList"
@onSelectedTray="onSelectedTray" @onSelectedTray="onSelectedTray"
@onSetHeatAreaTemp="onSetHeatAreaTemp" @onSetHeatAreaTemp="onSetHeatAreaTemp"
@onSelectCraft=" @onSelectCraft="
@ -16,6 +15,9 @@
</div> </div>
<!--执行中状态的遮罩层--> <!--执行中状态的遮罩层-->
</div> </div>
<div v-else class="heat_area">
正在加载
</div>
<!--拍照区--> <!--拍照区-->
<div class="picture_area"> <div class="picture_area">
<!--加液区和拍照区可切换--> <!--加液区和拍照区可切换-->
@ -50,11 +52,11 @@
<van-button size="large" class="btn_size op_up_tray" @click="onUpTray">抬起托盘</van-button> <van-button size="large" class="btn_size op_up_tray" @click="onUpTray">抬起托盘</van-button>
</div> </div>
</div> </div>
<van-overlay :show="liquidVisible" v-if="liquidVisible" style="z-index: 9999">
<van-overlay :show="liquidVisible" v-if="liquidVisible">
<div class="liquid"> <div class="liquid">
<div class="addLiquid"> <div class="addLiquid">
<AddLiquid <AddLiquid
:currentSelectedTube="tubeRack"
:currentSelectedTube="JSON.parse(JSON.stringify(tubeRack))"
:liquidArea="liquidArea" :liquidArea="liquidArea"
@cancel="liquidVisible = false" @cancel="liquidVisible = false"
@onAddSolution="onAddSolution"></AddLiquid> @onAddSolution="onAddSolution"></AddLiquid>
@ -87,7 +89,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { ref, onMounted, onUnmounted, watch, shallowRef } from "vue";
//@ts-ignore //@ts-ignore
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import { createWebSocket, sharedWsUrl } from "@/services/socket"; import { createWebSocket, sharedWsUrl } from "@/services/socket";
@ -137,15 +139,14 @@ watch(
} }
); );
watch(()=>statusStore.status,(newVal, oldValue)=>{
watch(()=>settingStore.heatAreaConfig,(newVal, oldValue)=>{
if(newVal){ if(newVal){
heatAearStatusList.value = newVal.heatArea
updateHeatList()
initHeatList()
} }
}) })
const heatAearStatusList = ref(statusStore.status?.heatArea || []); const heatAearStatusList = ref(statusStore.status?.heatArea || []);
const heatList: any = ref([]);
const heatList = shallowRef<any>([]);
const craftVisible = ref(false); const craftVisible = ref(false);
let tubeList:any = []; let tubeList:any = [];
const selectedColor = "#4F85FB"; const selectedColor = "#4F85FB";
@ -176,11 +177,10 @@ onMounted(() => {
const command:any = cmdInfo.command; const command:any = cmdInfo.command;
//@ts-ignore //@ts-ignore
const cmdName = CmdDescMap[command]; const cmdName = CmdDescMap[command];
updateHeatList(command)
if(command == 'moveToHeatArea'){// if(command == 'moveToHeatArea'){//
console.log('tubeRack---', tubeRack)
//UI
updateHeatList()
// //
setTubeToActionArea(null)
} }
const result = data.data.success const result = data.data.success
? "执行完毕" ? "执行完毕"
@ -211,6 +211,7 @@ onMounted(() => {
const selectedTrayList = ref<any>([]); const selectedTrayList = ref<any>([]);
const selectedTrayObj: any = {}; const selectedTrayObj: any = {};
const onSelectedTray = (heatAreaItem: any, type: string) => { const onSelectedTray = (heatAreaItem: any, type: string) => {
//
heatList.value[heatAreaItem.index] = heatAreaItem; heatList.value[heatAreaItem.index] = heatAreaItem;
//selectedTrayList //selectedTrayList
let ids = selectedTrayList.value.map((tube: any) => tube.id); let ids = selectedTrayList.value.map((tube: any) => tube.id);
@ -226,12 +227,15 @@ const onSelectedTray = (heatAreaItem: any, type: string) => {
} else {// } else {//
heatAreaItem.isSelect = true; heatAreaItem.isSelect = true;
} }
console.log('selectedTrayList.value---', selectedTrayList.value)
tubeList = heatAreaItem.tubeList; tubeList = heatAreaItem.tubeList;
}; };
const initHeatList = () => { const initHeatList = () => {
let heatAearStatusList = statusStore.status.heatArea
console.log('settingStore.heatAreaConfig---', settingStore.heatAreaConfig)
heatList.value = settingStore.heatAreaConfig.map((item:any) => { heatList.value = settingStore.heatAreaConfig.map((item:any) => {
heatAearStatusList.value.forEach((areaItem:any) => {
heatAearStatusList.forEach((areaItem:any) => {
if(areaItem.hardwareId == item.hardwareId){ if(areaItem.hardwareId == item.hardwareId){
item = { item = {
...item, ...item,
@ -241,23 +245,27 @@ const initHeatList = () => {
}) })
return item; return item;
}); });
console.log('初始化加温区数据:==========', heatList.value)
} }
const updateHeatList = () => {
const updateHeatList = (command:any) => {
const list = [...heatList.value] const list = [...heatList.value]
let heatAearStatusList = statusStore.status.heatArea
const selectedIds = selectedTrayList.value.map((item: any) => item.id); const selectedIds = selectedTrayList.value.map((item: any) => item.id);
heatList.value = list.map((item:any) => { heatList.value = list.map((item:any) => {
heatAearStatusList.value.forEach((areaItem:any) => {
heatAearStatusList.forEach((areaItem:any) => {
if(areaItem.hardwareId == item.hardwareId){ if(areaItem.hardwareId == item.hardwareId){
item = { item = {
...item, ...item,
heatAearStatus:areaItem, heatAearStatus:areaItem,
tubeList:tubeRack.tubeList
} }
} }
}) })
if(selectedIds.includes(item.id)){ if(selectedIds.includes(item.id)){
item.isSelect = true; item.isSelect = true;
if(command == 'moveToHeatArea'){
item.tubeList = tubeRack.tubeList;
}
} }
return item; return item;
}); });
@ -456,9 +464,9 @@ const onMoveToHeat = () => {
let selectedDataItem = selectedTrayList.value[0]; let selectedDataItem = selectedTrayList.value[0];
//2, //2,
let hardwareId = selectedDataItem.hardwareId; let hardwareId = selectedDataItem.hardwareId;
// let trayStatus = heatAearStatusList.value[selectedDataItem.index].trayStatus;
let heatAearStatusList = statusStore.status.heatArea
let trayStatus; let trayStatus;
heatAearStatusList.value.forEach((item: any) => {
heatAearStatusList.forEach((item: any) => {
if (hardwareId == item.hardwareId) { if (hardwareId == item.hardwareId) {
trayStatus = item.trayStatus; trayStatus = item.trayStatus;
} }
@ -683,10 +691,10 @@ const onStartHeat = () => {
let existTubeRack = true; let existTubeRack = true;
// //
let hasSetTemp = true; let hasSetTemp = true;
selectedTrayList.value.forEach((item: any) => {
let tubeList = item.tubeList;
if (!tubeList || !tubeList.length) {
existTubeRack = false;
const selectedIds = selectedTrayList.value.map((item: any) => item.id);
heatList.value.forEach((item: any) => {
if (selectedIds.includes(item.id) && item.heatAearStatus.trayStatus == 0) {
existTubeRack = true;
} }
if (!item.temperature) { if (!item.temperature) {
hasSetTemp = false; hasSetTemp = false;
@ -869,7 +877,6 @@ const onSendCmd = (command: OperationCmd, params: any) => {
height: 18rem; height: 18rem;
background: rgb(230, 230, 230); background: rgb(230, 230, 230);
opacity: 0.5; opacity: 0.5;
z-index: 9999;
} }
} }

Loading…
Cancel
Save