LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

恢复原始版本

feature/home
LiLongLong 6 months ago
parent
f5e169d1ba
commit
ba3c361926
16 changed files with 241 additions and 368 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/arrow.svg
  2. 1
      src/assets/avatar.svg
  3. 9
      src/assets/main.css
  4. 1
      src/assets/photo_icon.svg
  5. 98
      src/views/components/Footer.vue
  6. 94
      src/views/components/Header.vue
  7. 35
      src/views/components/Liquid.vue
  8. 27
      src/views/components/Menu.vue
  9. 2
      src/views/components/index.ts
  10. 96
      src/views/graphite/components/AddWaste.vue
  11. 68
      src/views/graphite/components/HeatPosition.vue
  12. 41
      src/views/graphite/components/TakePickture.vue
  13. 44
      src/views/graphite/index.vue
  14. 50
      src/views/home/index.vue
  15. 34
      src/views/liquidConfig/index.vue
  16. 8
      src/views/logRecord/index.vue

1
src/assets/arrow.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="23" height="15" viewBox="0 0 23 15"><g transform="matrix(0,-1,1,0,-15,15)"><path d="M12.4365,15C12.4365,15,15,17.37044,15,17.37044C15,17.37044,5.12696,26.5,5.12696,26.5C5.12696,26.5,15,35.629599999999996,15,35.629599999999996C15,35.629599999999996,12.4365,38,12.4365,38C12.4365,38,0,26.5,0,26.5C0,26.5,12.4365,15,12.4365,15C12.4365,15,12.4365,15,12.4365,15Z" fill-rule="evenodd" fill="#1989FA" fill-opacity="1"/></g></svg>

1
src/assets/avatar.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><clipPath id="master_svg0_609_03555/609_03497"><rect x="8" y="8" width="24" height="24" rx="0"/></clipPath></defs><g><rect x="0" y="0" width="40" height="40" rx="20" fill="#1989FA" fill-opacity="1"/><g clip-path="url(#master_svg0_609_03555/609_03497)"><g><path d="M28.120604907226564,25.896875C27.67840490722656,24.849575,27.03680490722656,23.898375,26.231504907226565,23.096075C25.428604907226564,22.291475,24.47750490722656,21.649974999999998,23.430704907226563,21.207075C23.421304907226563,21.202375,23.41200490722656,21.199975000000002,23.40260490722656,21.195275000000002C24.862704907226565,20.140625,25.812004907226562,18.422655,25.812004907226562,16.484375C25.812004907226562,13.273435,23.21040490722656,10.671875,19.99946490722656,10.671875C16.788524907226563,10.671875,14.186964907226562,13.273435,14.186964907226562,16.484375C14.186964907226562,18.422655,15.136184907226562,20.140625,16.596334907226563,21.197675C16.586964907226562,21.202375,16.577584907226562,21.204675,16.56821490722656,21.209375C15.518214907226563,21.652375,14.576024907226563,22.287475,13.767434907226562,23.098475C12.962844907226563,23.901375,12.321344907226562,24.852475,11.878369907226563,25.899175C11.443186907226563,26.924075,11.208483707226563,28.022775,11.186963515026562,29.135975C11.186337956226563,29.160975,11.190725517226563,29.185875,11.199867807226562,29.209175C11.209010107226563,29.232375,11.222722007226562,29.253675,11.240195707226562,29.271575C11.257669407226562,29.289475,11.278551207226563,29.303675,11.301610907226562,29.313375C11.324669907226562,29.323175,11.349440907226562,29.328175,11.374463907226563,29.328075C11.374463907226563,29.328075,12.780714907226562,29.328075,12.780714907226562,29.328075C12.883834907226563,29.328075,12.965864907226562,29.246075,12.968214907226562,29.145275C13.015084907226562,27.335975,13.741654907226563,25.641375,15.026024907226562,24.357075000000002C16.354934907226564,23.028174999999997,18.119774907226564,22.296875,19.99946490722656,22.296875C21.879104907226562,22.296875,23.644004907226563,23.028174999999997,24.972904907226564,24.357075000000002C26.257304907226562,25.641375,26.983804907226563,27.335975,27.030704907226564,29.145275C27.033104907226562,29.248475,27.115104907226563,29.328075,27.218204907226564,29.328075C27.218204907226564,29.328075,28.624504907226562,29.328075,28.624504907226562,29.328075C28.64950490722656,29.328175,28.674304907226563,29.323175,28.697304907226563,29.313375C28.720404907226563,29.303675,28.741304907226564,29.289475,28.758704907226562,29.271575C28.776204907226564,29.253675,28.789904907226564,29.232375,28.799104907226564,29.209175C28.808204907226564,29.185875,28.81260490722656,29.160975,28.812004907226562,29.135975C28.788504907226564,28.015675,28.55650490722656,26.925775,28.120604907226564,25.896875C28.120604907226564,25.896875,28.120604907226564,25.896875,28.120604907226564,25.896875ZM19.99946490722656,20.515625C18.923684907226562,20.515625,17.911184907226563,20.096095,17.149464907226562,19.334375C16.387744907226562,18.572655,15.968214907226564,17.560155,15.968214907226564,16.484375C15.968214907226564,15.408595,16.387744907226562,14.396094999999999,17.149464907226562,13.634375C17.911184907226563,12.872655,18.923684907226562,12.453125,19.99946490722656,12.453125C21.075244907226562,12.453125,22.087704907226563,12.872655,22.84950490722656,13.634375C23.611204907226565,14.396094999999999,24.030704907226564,15.408595,24.030704907226564,16.484375C24.030704907226564,17.560155,23.611204907226565,18.572655,22.84950490722656,19.334375C22.087704907226563,20.096095,21.075244907226562,20.515625,19.99946490722656,20.515625Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>

9
src/assets/main.css
View File

@ -1,10 +1,7 @@
@import './base.css';
:root {
--globe-proportion: 0.4; /* 定义主色调 */
}
#app {
height: calc(1840px * 0.4);
width: calc(2800px * 0.4);
max-width: 2800px;
max-height: 1840px;
overflow: hidden;
background: #e9e9e9;
}

1
src/assets/photo_icon.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="51" height="38" viewBox="0 0 51 38"><g><path d="M34.3172,23.1571Q34.3172,24.7195,33.7294,26.0866Q33.1416,27.4537,32.1339,28.4582Q31.1262,29.4626,29.7827,30.0485Q28.4391,30.6344,26.8716,30.6344Q25.3041,30.6344,23.9605,30.0485Q22.6169,29.4626,21.6092,28.4582Q20.6015,27.4537,20.0137,26.0866Q19.4259,24.7195,19.4259,23.1571Q19.4259,21.6505,20.0137,20.2834Q20.6015,18.9163,21.6092,17.9119Q22.6169,16.9075,23.9605,16.3216Q25.3041,15.7357,26.8716,15.7357Q28.4391,15.7357,29.7827,16.3216Q31.1262,16.9075,32.1339,17.9119Q33.1416,18.9163,33.7294,20.2834Q34.3172,21.6505,34.3172,23.1571ZM6.60593,38Q5.03842,38,3.80681,37.721Q2.57519,37.442,1.73546,36.7724Q0.895719,36.1028,0.44786,34.9589Q0,33.815,0,32.0852L0,13.2247Q0,10.0999,1.48353,8.87225Q2.96707,7.64464,6.15807,7.64464L15.5631,7.64464Q16.4588,7.64464,17.0467,7.30984Q17.6345,6.97504,17.9984,6.41703Q18.3622,5.85903,18.6422,5.10573Q18.9221,4.35242,19.258,3.57122Q19.8178,2.12041,21.2173,1.06021Q22.6169,0,24.4083,0L29.6147,0Q31.6861,0,33.0017,1.14391Q34.3172,2.28781,34.7651,3.57122Q35.3809,5.24523,36.3886,6.44493Q37.3963,7.64464,38.5159,7.64464L45.6257,7.64464Q48.0889,7.58884,49.5445,8.98385Q51,10.3789,51,13.0573L51,32.1968Q51,35.0426,49.4885,36.5213Q47.9769,38,45.4577,38L6.60593,38ZM26.7596,11.4949Q24.2964,11.4949,22.169,12.4156Q20.0417,13.3363,18.4742,14.9266Q16.9067,16.5169,15.983,18.6373Q15.0593,20.7577,15.0593,23.1571Q15.0593,25.6123,15.983,27.7327Q16.9067,29.8532,18.4742,31.4156Q20.0417,32.978,22.169,33.8987Q24.2964,34.8194,26.7596,34.8194Q29.1669,34.8194,31.2942,33.8987Q33.4215,32.978,34.989,31.4156Q36.5565,29.8532,37.4802,27.7327Q38.404,25.6123,38.404,23.1571Q38.404,20.7577,37.4802,18.6373Q36.5565,16.5169,34.989,14.9266Q33.4215,13.3363,31.2942,12.4156Q29.1669,11.4949,26.7596,11.4949ZM30.6784,5.46843Q30.6784,4.57563,30.5944,4.07342Q30.5104,3.57122,29.4468,3.57122L24.8002,3.57122Q23.7366,3.51542,23.6526,4.01762Q23.5686,4.51983,23.5686,5.46843Q23.5126,6.52864,23.6806,6.97504Q23.8485,7.42144,24.8002,7.42144L29.4468,7.42144Q30.5104,7.42144,30.5944,6.91924Q30.6784,6.41704,30.6784,5.46843Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

98
src/views/components/Footer.vue
View File

@ -1,98 +0,0 @@
<template>
<div class="header_ins">
<van-icon name="discount-o" size="15" style="padding:5px"/>
<span class="ins_text text_size">等待指令</span>
</div>
<div class="footer_waste">
<van-popover v-model:show="showContainerPopover" placement="top">
<template #reference>
<div class="footer_container">
<div class="circle" style="background-color: #F2652D;"></div>
<div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div class="liquid">
<Liquid></Liquid>
</div>
</van-popover>
</div>
<div class="footer_normal">
<van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
<template #reference>
<div class="footer_container">
<div class="circle"></div>
<div class="waste_status text_size">溶液正常</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div>
<Liquid></Liquid>
</div>
</van-popover>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Liquid from './Liquid.vue'
const showContainerPopover = ref(false)
const showWastePopover = ref(false)
</script>
<style scoped>
.header_ins{
display: flex;
align-items: center;
border-radius: 5px;
width: calc(1268px* var(--globe-proportion));
height: calc(60px* var(--globe-proportion));
background: #FFFFFF;
}
.footer_waste{
display: flex;
align-items: center;
border-radius: 5px;
width: calc(430px* var(--globe-proportion));
height: calc(60px* var(--globe-proportion));
background: #FFFFFF;
margin-left: 10px;
}
.footer_normal{
margin-left: 70px;
}
.text_size{
font-size:calc(30px * var(--globe-proportion));
padding-right: 5px;
}
.footer_container{
display: flex;
align-items: center;
border-radius: 5px;
width: calc(500px * var(--globe-proportion));
height: calc(60px* var(--globe-proportion));
background: #FFFFFF;
.circle {
width: calc(30px * var(--globe-proportion));
height: calc(30px * var(--globe-proportion));
background-color: green;
border-radius: 50%;
margin-left: 10px;
}
.waste_status{
padding:5px 5px;
}
.waste_detail{
margin-left: auto
}
}
.liquid{
height: 400px;
}
</style>

94
src/views/components/Header.vue
View File

@ -1,54 +1,111 @@
<template>
<div class="header">
<div class="header_logo">
<img :src="logo" style="height:20px"/>
<img :src="logo"/>
</div>
<div class="header_time">
<!--时间区-->
<div class="header_menu">
{{ currentTime }}
</div>
<!--指令区-->
<div class="header_ins">
<van-icon name="discount-o" size="30" style="padding:5px"/>
<span class="ins_text text_size">等待指令</span>
</div>
<div>
<van-popover v-model:show="showContainerPopover">
<template #reference>
<div class="header_container">
<div class="circle" style="background-color: #F2652D;"></div>
<div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div>
<Liquid></Liquid>
</div>
</van-popover>
</div>
<div>
<van-popover v-model:show="showWastePopover">
<template #reference>
<div class="header_container">
<div class="circle"></div>
<div class="waste_status text_size">溶液正常</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div>
<Liquid></Liquid>
</div>
</van-popover>
</div>
<div class="header_user">
<img :src="AvatarSvg" width="20px" height="20px"/>
<div style="font-size: 15px;">Admin</div>
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="70"/>
<div style="font-size: 30px;">Admin</div>
</div>
</div>
</template>
<script lang="ts" setup>
import logo from '@/assets/logo.png'
import AvatarSvg from '@/assets/avatar.svg'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {eventBus} from '@/eventBus'
import Liquid from './Liquid.vue'
import { getFormattedDateTime } from '@/utils'
const router = useRouter()
const menus = [{
text: '菜单',
value: 0
},{
text: '测试页面',
value: 1
}]
const menuId = ref(0)
const menuList = ref(menus)
const time = getFormattedDateTime()
const currentTime = ref(time)
const showContainerPopover = ref(false)
const showWastePopover = ref(false)
onMounted(()=>{
//测试页面返回时，需要调整菜单
eventBus.on('menuId', (value:number)=>{
menuId.value = value
})
})
const onHandleMenu = () => {
//跳转测试页面
if(menuId.value === 0){
router.push('/')
}
if(menuId.value === 1){
router.push('/test')
}
}
</script>
<style scoped>
.header{
width: 100%;
display: flex;
align-items: center;
background: #e9e9e9;
align-items: center;
height: calc(108px * var(--globe-proportion));
height: 108px;
.header_logo{
padding:10px 10px;
}
.header_time{
width: calc(375px * var(--globe-proportion));
height: calc(80px * var(--globe-proportion));
font-size: calc(28px * var(--globe-proportion));
display: flex;
align-items: center;
margin-left: calc(1910px * var(--globe-proportion));
background: white;
justify-content: center;
border-radius: 10px;
.header_menu{
margin-left:12px;
width: 361px;
padding-top:5px;
font-size: 28px;
.header_menu_item{
color:#FFFFFF
}
}
.header_ins{
@ -83,9 +140,10 @@
.header_user{
display: flex;
align-items: center;
width: 25%;
justify-content: flex-end;
padding-right: 20px;
gap: 5px;
padding-left: 7px;
}
}

35
src/views/components/Liquid.vue
View File

@ -86,23 +86,23 @@
<style lang="css" scoped>
.container{
background: #EEEFF8;
width: calc(1200px * var(--globe-proportion));
height: calc(1100px * var(--globe-proportion));
width: 1200px;
height: 900px;
.waster_pos{
position: relative;
width: calc(100px * var(--globe-proportion));
height: calc(150px * var(--globe-proportion));
margin: calc(50px * var(--globe-proportion)) calc(60px * var(--globe-proportion));
width: 100px;
height: 150px;
margin: 50px 60px;
}
.waster_status{
height: 29px;
font-family: Source Han Sans;
font-size: calc(30px * var(--globe-proportion));
font-size: 30px;
font-weight: 500;
color: #40474E;
padding-left: calc(26px * var(--globe-proportion));
padding-top: calc(19px * var(--globe-proportion));
padding-left: 26px;
padding-top: 19px;
}
.contail_percentage{
@ -131,33 +131,34 @@
.container_water_name{
font-family: 思源黑体;
font-size: calc(26px * var(--globe-proportion));
font-size: 26px;
font-weight: 500;
color: #9E9E9E;
margin-left: calc(45px * var(--globe-proportion));
margin-top: calc(-35px * var(--globe-proportion));
margin-left: 45px;
margin-top: -35px;
}
}
.solu_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
.solu_name{
font-family: 思源黑体;
font-size: calc(26px * var(--globe-proportion));
font-size: 26px;
font-weight: 500;
color: #9E9E9E;
margin-left: calc(65px * var(--globe-proportion));
margin-top: calc(-35px * var(--globe-proportion));
margin-left: 65px;
margin-top: -35px;
}
.percent_num{
font-size: calc(30px * var(--globe-proportion));
font-size: 30px;
position: relative;
z-index: 2;
top: calc(60px * var(--globe-proportion));
left: calc(20px * var(--globe-proportion));
top: 60px;
left: 20px;
}
</style>

27
src/views/components/Menu.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="menu">
<van-sidebar v-model="active" class="sidebar">
<van-sidebar v-model="active" style="width:325px;font-size: 30px">
<van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
<template #title scoped>
<div class="menn_li">
<div><img :src="active== menu.id ? menu.s_img : menu.n_img" class="menu_icon"/></div>
<div>{{ menu.name }}</div>
<div><img :src="active== menu.id ? menu.s_img : menu.n_img"/></div>
<div style="margin-left: 30px;">{{ menu.name }}</div>
</div>
</template>
</van-sidebar-item>
@ -60,17 +60,13 @@
</script>
<style lang="css" scoped>
.sidebar{
width:calc(325px * var(--globe-proportion));
font-size: calc(30px * var(--globe-proportion))
}
.menu{
height: calc(1840px * var(--globe-proportion));
background: #e9e9e9;
position: absolute;
margin-left: 17%;
}
.menn_text{
font-size: calc(30px * var(--globe-proportion));
font-size: 30px;
margin-top:20px;
}
@ -82,22 +78,17 @@
.menn_btn{
border-radius: 10px;
height: calc(100px * var(--globe-proportion));
width: calc(320px * var(--globe-proportion));
height: 100px;
width: 320px;
display: flex;
justify-content: center;
align-items: center;
}
.menn_li{
display: flex;
align-items: center;
gap: 5px;
}
.menu_icon{
width: calc(80px * var(--globe-proportion));
height: calc(80px * var(--globe-proportion));
}
</style>

2
src/views/components/index.ts
View File

@ -0,0 +1,2 @@
import { default as Header } from './Header.vue'
import { default as Liquid } from './Liquid.vue'

96
src/views/graphite/components/AddWaste.vue
View File

@ -17,13 +17,14 @@
<div>
<div class="waste_edit">
<div >
<van-icon name="edit"/>
<van-icon name="edit" />
<span>请输入添加值</span>
</div>
<br/>
<div class="waste_field">
<img :src="AddSvg" class="add_icon"/>
<van-field type="number" autosize placeholder="请输入" class='waste_input' size="normal"/>ml
<img :src="AddSvg"/>
<van-field placeholder="请输入" />
<div class="ml">ml</div>
</div>
<br/>
<div>
@ -54,53 +55,52 @@
</script>
<style scoped>
.title{
font-size: calc(40px * var(--globe-proportion));
font-size: 40px;
font-weight: 500;
line-height: 11px;
padding-top: calc(80px * var(--globe-proportion));
margin-left: calc(90px * var(--globe-proportion));
line-height: 22px;
padding-top: 80px;
margin-left:90px;
color: #323233;
}
.waste_main{
height: calc(900px * var(--globe-proportion));
height: 900px;
flex-wrap: wrap;
display: flex;
.waste_area{
height: calc(330px * 0.4);
width: calc(480px * 0.4);
height: 330px;
width: 480px;
border: 2px solid #275EFB;
margin-top: calc(100px * 0.4);
margin-left: calc(70px * 0.4);
margin-top: 100px;
margin-left: 70px;
background: rgb(243 251 255);
border-radius: 20px;
display: flex;
.waste_percentage{
position: relative;
width: calc(141px * 0.4);
height: calc(198px * 0.4);
width: 141px;
height: 198px;
background-image: url('@/assets/container.svg');
background-size: cover;
background-position: center;
z-index: 1;
border-radius: 10px;
margin-top: calc(33px * 0.4);
margin-left: calc(32px * 0.4);
margin-top: 33px;
margin-left: 32px;
}
.percent_num{
position: relative;
top: 40%;
left: 22%;
font-size: calc(30px * 0.4);
font-size: 30px;
}
.waste_color{
position: absolute;
bottom: 0;
left: 0;
width: calc(141px * 0.4);
width: 141px;
height: 50%;
background-color: blue;
opacity: 0.5;
@ -109,42 +109,39 @@
}
.waste_name{
margin-left: calc(76px * 0.4);
margin-top: calc(27px * 0.4);
font-size: calc(26px * 0.4);
margin-left: 76px;
margin-top: 27px;
font-size: 26px;
color: #393F46;
}
.waste_edit{
background: #ffffff;
width: calc(256px * 0.4);
height: calc(220px * 0.4);
margin-left: calc(30px * 0.4);
margin-top: calc(20px * 0.4);
padding-top: calc(30px * 0.4);
font-size: calc(20px * 0.4);
padding-left: calc(35px * 0.4);
width: 256px;
height: 220px;
margin-left: 30px;
margin-top: 20px;
padding-top: 30px;
font-size: 20px;
padding-left: 35px;
}
.waste_field{
width: calc(210px * 0.4);
height: calc(54px * 0.4);
width: 210px;
display: flex;
border: 1px solid;
border-radius: calc(04px * 0.4);
border-radius: 304px;
border: 1px solid #E4E5F1;
align-items: center;
}
}
.add_btn{
background-color: #26D574;
font-size: calc(20px * 0.4);
font-size: 20px;
color: #ffffff;
width: calc(210px * 0.4);
height: calc(54px * 0.4);
border-radius: calc(100px * 0.4);
width: 200px;
border-radius: 100px;
}
}
@ -156,32 +153,21 @@
margin-left: 35%;
height: 200px;
.btn{
width:calc(438px * 0.4);
height: calc(90px * 0.4);
font-size: calc(40px * 0.4);
width:438px;
height: 90px;
font-size: 40px;
}
}
.ml{
margin-right: 20px;
padding-top: 5px;
}
.add_result{
font-size: calc(26px * 0.4);
font-size: 26px;
color: #393f46;
margin-top: calc(18px * 0.4);
margin-left: calc(45px * 0.4);
}
.add_icon{
width: calc(28px * 0.4);
height: calc(28px * 0.4);
margin-top: 18px;
margin-left: 45px;
}
.waste_input{
font-size: calc(18px * 0.4);
}
</style>

68
src/views/graphite/components/HeatPosition.vue
View File

@ -80,20 +80,21 @@
<style scoped>
.heat_main{
border: 1px solid #E9F3FF;
width: calc(366px * var(--globe-proportion));
height: calc(580px * var(--globe-proportion));
width: 366px;
height: 580px;
border-radius: 20px;
background: #E9F3FF;
margin-top: calc(159px * var(--globe-proportion));
margin-top: 110px;
}
.heat_pos_text{
display: flex;
height: calc(53px * var(--globe-proportion));
padding-left: 20px;
height: 55px;
padding-left: 29px;
padding-right: 23px;
.pos_text{
font-size: calc(26px * var(--globe-proportion));
font-size: 26px;
font-weight: 500;
line-height: normal;
display: flex;
@ -106,62 +107,67 @@
}
}
.heat_pos{
width: calc(330px * var(--globe-proportion));
height: calc(330px * var(--globe-proportion));
width: 330px;
height: 330px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-left: 5px;
gap: 10px;
gap: 22px;
flex-direction: row;
background: #384D5D;
border: 2px solid #7592A8;
margin-left: 15px;
padding-top: 15px;
border-radius: 16px;
}
.inner-circle {
border-radius: 50%;
width: calc(50px * var(--globe-proportion));
height: calc(50px * var(--globe-proportion));
width: 50px;
height: 50px;
background-color: rgb(209, 33, 33);
}
.heat_footer{
height: calc(180px * var(--globe-proportion));
width: calc(330px * var(--globe-proportion));
height: 180px;
width: 330px;
margin-top: 10px;
margin-left: 5px;
.heat_temperature{
height: calc(46px * var(--globe-proportion));
width: calc(330px * var(--globe-proportion));
height: 46px;
width: 330px;
background: #FFFFFF;
box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
border-radius: 5px;
display: flex;
align-items: center;
margin-left: 10px;
.target_temp{
color: #384D5D;
font-size: calc(22px * var(--globe-proportion));
font-size: 22px;
}
.heating{
color: #FE0A0A;
font-size: calc(28px * var(--globe-proportion));
margin-left: calc(70px * var(--globe-proportion));
font-size: 28px;
margin-left: 70px;
}
}
.temp_text{
width: calc(109px * var(--globe-proportion));
height: calc(52px * var(--globe-proportion));
width: 109px;
height: 52px;
opacity: 1;
font-family: Source Han Sans;
font-size: calc(36px * var(--globe-proportion));
font-size: 36px;
font-weight: bold;
line-height: normal;
display: flex;
align-items: center;
color: #4D6882;
padding-top: calc(70px * var(--globe-proportion));
margin-left: calc(25px * var(--globe-proportion));
padding-top: 70px;
margin-left: 25px;
}
}
@ -183,21 +189,21 @@
.heat_choose{
position: absolute;
margin-left: calc(215px * var(--globe-proportion));
margin-left: 215px;
z-index: 99;
margin-top: -15px;
margin-top: -30px;
.btn{
width: calc(126px * var(--globe-proportion));
height: calc(38px * var(--globe-proportion));
font-size: calc(20px * var(--globe-proportion));
background:#1989FA;
color: white;
width: 120px;
height: 60px;
font-size: 20px;
color:#1989FA;
background: #ffffff;
}
}
.formula_picker{
width: calc(800px * var(--globe-proportion));
width: 800px;
margin: 20% 30%;
}

41
src/views/graphite/components/TakePickture.vue
View File

@ -1,46 +1,23 @@
<template>
<div class="picture">
<!-- <van-button class="area">拍照</van-button> -->
<div class="area">
<div class="area_btn">
<img :src="PhotoSvg" class="photo_icon"/>
拍照
</div>
</div>
<van-button class="area">拍照</van-button>
</div>
</template>
<script lang="ts" setup>
import PhotoSvg from '@/assets/photo_icon.svg'
</script>
<style scoped>
.picture{
height: calc(726px * var(--globe-proportion));
width: calc(911px * var(--globe-proportion));
height: 820px;
background-image: url('@/assets/picture.svg');
background-repeat: no-repeat;
background-size: contain;
margin-left:10px
}
.area{
background: rgba(255, 255, 255, 0.5);
font-size: calc(26px * var(--globe-proportion));
width: calc(911px * var(--globe-proportion));
height: calc(126px * var(--globe-proportion));
position: absolute;
margin-top: calc(600px * var(--globe-proportion));
.area_btn{
display: flex;
justify-content: center;
align-items: center;
height: calc(126px * var(--globe-proportion));
font-size: calc(42px * var(--globe-proportion));
font-weight: bold;
color: #FFFFFF;
gap:10px;
.photo_icon{
width: calc(51px * var(--globe-proportion));
height: calc(38px * var(--globe-proportion));
}
}
margin-left: 80%;
margin-top: 760px;
font-size: 26px;
width: 130px;
}
</style>

44
src/views/graphite/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="graphite_home" id="home">
<div class="heat_area">
<div v-for="(item, index) in heatList" :key="item">
<div :style="`margin-top:${index>2?'-40px':''}`"><HeatPosition :heatInfo="item"></HeatPosition></div>
<div v-for="item in heatList" :key="item">
<HeatPosition :heatInfo="item"></HeatPosition>
</div>
</div>
<!--拍照区-->
@ -10,8 +10,10 @@
<div class="pickture">
<TakePickture></TakePickture>
</div>
<!--操作区-->
<div class="graphite_btn">
<div><van-button size="large" class="btn_size" style="width: calc(930px * var(--globe-proportion));">开门</van-button></div>
<div><van-button size="large" class="btn_size" style="width: 840px;">开门</van-button></div>
<br/>
<van-row class="graphite_operate">
<van-col span="11">
<van-button size="large" class="btn_size">开始任务</van-button>
@ -20,6 +22,7 @@
<van-button size="large" class="btn_size">结束任务</van-button>
</van-col>
</van-row>
<br/>
<van-row class="graphite_operate">
<van-col span="11">
<van-button size="large" class="btn_size">选择配方</van-button>
@ -28,6 +31,7 @@
<van-button size="large" class="btn_size">执行配方</van-button>
</van-col>
</van-row>
<br/>
<van-row class="graphite_operate">
<van-col span="11">
<van-button size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
@ -36,6 +40,7 @@
<van-button size="large" class="btn_size">摇匀</van-button>
</van-col>
</van-row>
<br/>
<van-row class="graphite_operate">
<van-col span="7">
<van-button size="large" class="btn_size">移至加热</van-button>
@ -47,6 +52,7 @@
<van-button size="large" class="btn_size">移至特殊</van-button>
</van-col>
</van-row>
<br/>
<van-row class="graphite_operate">
<van-col span="11">
<van-button size="large" class="btn_size">开始加热</van-button>
@ -84,17 +90,19 @@
.graphite_home{
display: flex;
background: #F6F6F6;
width: calc(2418px * var(--globe-proportion));
height: 1840px;
width: 2800px;
}
.heat_area{
width: calc(1268px * var(--globe-proportion));
height: calc(1620px * var(--globe-proportion));
width: 1268px;
height: 1586px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 5px;
gap: calc(20px * var(--globe-proportion));
gap: 20px;
flex-direction: row;
padding-top:10px;
padding-bottom: 100px;
background: #FFFFFF;
@ -102,29 +110,29 @@
}
.pickture_area{
width: calc(1100px * var(--globe-proportion));
height: calc(1620px * var(--globe-proportion));
width: 1000px;
height: 1586px;
margin: 5px;
margin-left: 20px;
background: #FFFFFF;
padding: calc(50px * var(--globe-proportion));
padding: 50px;
border-radius: 20px;
}
.graphite_btn{
padding-top: calc(50px * var(--globe-proportion));
margin-left: calc(30px * var(--globe-proportion));
padding-top: 50px;
margin-left: 30px;
}
.btn_size{
font-size: calc(30px * var(--globe-proportion));
height: calc(80px * var(--globe-proportion));
font-size: 30px;
height: 80px;
color: #1989FA;
border: 3px solid #1989FA;
}
.graphite_operate{
gap: calc(40px * var(--globe-proportion));
line-height: 3.5;
gap: 40px;
}
.waste{
@ -134,8 +142,8 @@
height: 100%;
align-items: center;
.addWaste{
width: calc(2250px * 0.4);
height: calc(1235px * 0.4);
width: 2250px;
height: 1235px;
background: #FFFFFF;
}
}

50
src/views/home/index.vue
View File

@ -1,30 +1,24 @@
<template>
<div>
<div><Header></Header></div>
<div class="container" style="display: flex;">
<div class="home_menu">
<div id="container">
<div>
<Header></Header>
<div style="background: #ffffff;" class="home_menu">
<Menu></Menu>
</div>
<main>
<div class="main">
<router-view v-slot="{ Component }">
<keep-alive :exclude="['Home']">
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</main>
</div>
<div class="footer">
<Footer></Footer>
</div>
<main>
<router-view v-slot="{ Component }">
<keep-alive :exclude="['Home']">
<component :is="Component" />
</keep-alive>
</router-view>
</main>
</div>
</template>
<script setup lang="ts">
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import { onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import Menu from '@/views/components/Menu.vue'
@ -40,24 +34,12 @@
},{ immediate: true, deep: true })
</script>
<style>
.main{
display: flex;
width: calc(2418px * var(--globe-proportion));
background: rgb(255, 255, 255);
height: calc(1640px * var(--globe-proportion));
}
.home_menu{
background: rgb(255, 255, 255);
height: calc(1724px * var(--globe-proportion));
width: calc(450px * var(--globe-proportion));
}
.footer{
position: relative;
margin-top: -25px;
width: calc(2425px * var(--globe-proportion));
margin-left: calc(325px * var(--globe-proportion));
background: #e9e9e9;
display: flex;
gap: 5px;
position: absolute;
left: 84%;
height: 1724px;
width: 450px;
}
</style>

34
src/views/liquidConfig/index.vue
View File

@ -1,33 +1,3 @@
<template>
<div>
<div class="waster_config">
<div class="config_title">
<div class="config_name"></div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
.waster_config{
width: calc(410px * 0.4);
height: calc(430px * 0.4);
border:1px solid #275EFB;
margin-left: calc(134px * 0.4);
margin-top: calc(160px * 0.4);
.config_title{
width: calc(410px * 0.4);
height: calc(80px * 0.4);
background: rgba(25, 137, 250, 0.1216);
padding-top:calc(15px * 0.4);
.config_name{
width: calc(248px * 0.4);
height: calc(50px * 0.4);
background: #FFFFFF;
margin-left: calc(81px * 0.4);
}
}
}
</style>
<div>加液配置</div>
</template>

8
src/views/logRecord/index.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="log">日志记录</div>
<div>日志记录</div>
</template>
<script lang="ts" setup>
</script>
<style lang="css" scoped>
.log{
}
</style>
</script>
Write Preview
Loading…
Cancel
Save