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

merge master

feature/home
LiLongLong 6 months ago
parent
73843706da
commit
a3b8707dd8
5 changed files with 180 additions and 77 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/photo_icon.svg
  2. 100
      src/views/components/Footer.vue
  3. 73
      src/views/components/Liquid.vue
  4. 49
      src/views/graphite/components/TakePickture.vue
  5. 34
      src/views/graphite/index.vue

1
src/assets/photo_icon.svg
View File

@ -0,0 +1 @@
<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>

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

@ -1,3 +1,99 @@
<template>
<div class="h-[--footerHeight] pl-[--menuAreaWidth]">Footer</div>
</template>
<div class="h-[--footerHeight] bg-[--bgColor] footer">
<div class="footer_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-end">
<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>
<Liquid></Liquid>
</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>
<Liquid></Liquid>
</van-popover>
</div>
</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>
.footer{
display: flex;
align-items: center;
}
.footer_ins{
display: flex;
align-items: center;
border-radius: 5px;
background: #FFFFFF;
height: 80px;
width: 1268px;
margin-left: 380px;
}
.footer_waste{
display: flex;
align-items: center;
border-radius: 5px;
width: 430px;
height: 80px;
background: #FFFFFF;
margin-left: 10px;
}
.footer_normal{
margin-left: 100px;
}
.text_size{
font-size:30px;
padding-right: 5px;
}
.footer_container{
display: flex;
align-items: center;
border-radius: 5px;
width: 500px;
height: 80px;
background: #FFFFFF;
.circle {
width: 30px;
height: 30px;
background-color: green;
border-radius: 50%;
margin-left: 10px;
}
.waste_status{
padding:5px 5px;
}
.waste_detail{
margin-left: auto
}
}
</style>

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

@ -1,24 +1,22 @@
<template>
<div class="container">
<div>
<div class="waster_status">废液回收状态</div>
<div class="waster_pos">
<div class="contail_percentage"></div>
<div class="liquid" style="height: 50%;"></div>
<div class="percent_num">50%</div>
</div>
<div class="container_water_name">
碱中和容器
</div>
<div class="liquid">
<div class="liquid_status">废液回收状态</div>
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid_percent" style="height: 50%;"></div>
<div class="percent_num">50%</div>
</div>
<div class="container_water_name">
碱中和容器
</div>
<br/>
<div>
<div class="waster_status">溶液容器状态</div>
<div class="liquid_status">溶液容器状态</div>
<div class="solu_list">
<div v-for="solu in solutionList" :key="solu.id">
<div class="waster_pos">
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
<div class="liquid_percent" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
<div class="percent_num">{{ solu.percentage }}</div>
</div>
<div class="solu_name">
@ -57,60 +55,48 @@
percentage: '50%',
color:"#cf67e7"
},{
id : 1,
id : 6,
name: '硫酸',
percentage: '10%',
color:"#cf67e7"
},{
id : 2,
id : 7,
name: '硫酸',
percentage: '20%',
color:"#07a16e"
},{
id : 3,
id : 8,
name: '硫酸',
percentage: '30%',
},{
id : 4,
name: '硫酸',
percentage: '40%',
color:"#cf67e7"
},{
id : 5,
name: '硫酸',
percentage: '50%',
color:'#3586c6'
}])
</script>
<style lang="css" scoped>
.container{
.liquid{
background: #EEEFF8;
width: 1200px;
height: 900px;
width: 680px;
height: 690px;
.waster_pos{
.liquid_pos{
position: relative;
width: 100px;
height: 150px;
margin: 50px 60px;
height: 116px;
margin-top: 36px;
margin-left: 50px;
}
.waster_status{
.liquid_status{
height: 29px;
font-family: Source Han Sans;
font-size: 30px;
font-weight: 500;
color: #40474E;
padding-left: 26px;
padding-top: 19px;
}
.contail_percentage{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 83px;
height: 116px;
background-image: url('@/assets/container.svg');
background-size: cover;
background-position: center;
@ -118,11 +104,10 @@
border-radius: 10px;
}
.liquid {
.liquid_percent {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
width: 83px;
background-color: blue;
opacity: 0.5;
z-index: 2;
@ -135,14 +120,13 @@
font-weight: 500;
color: #9E9E9E;
margin-left: 45px;
margin-top: -35px;
}
}
.solu_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
gap:2px
}
.solu_name{
@ -151,7 +135,6 @@
font-weight: 500;
color: #9E9E9E;
margin-left: 65px;
margin-top: -35px;
}
.percent_num{

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

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

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

@ -1,5 +1,5 @@
<template>
<div class="graphite_home" id="home">
<div class="graphite_home component-page">
<div class="heat_area">
<div v-for="item in heatList" :key="item">
<HeatPosition :heatInfo="item"></HeatPosition>
@ -7,13 +7,10 @@
</div>
<!--拍照区-->
<div class="pickture_area">
<div class="pickture">
<TakePickture></TakePickture>
</div>
<TakePickture></TakePickture>
<!--操作区-->
<div class="graphite_btn">
<div><van-button size="large" class="btn_size" style="width: 840px;">开门</van-button></div>
<br/>
<div><van-button size="large" class="btn_size open">开门</van-button></div>
<van-row class="graphite_operate">
<van-col span="11">
<van-button size="large" class="btn_size">开始任务</van-button>
@ -22,7 +19,6 @@
<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>
@ -31,7 +27,6 @@
<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>
@ -40,9 +35,8 @@
<van-button size="large" class="btn_size">摇匀</van-button>
</van-col>
</van-row>
<br/>
<van-row class="graphite_operate">
<van-col span="7">
<van-col style="width:306px">
<van-button size="large" class="btn_size">移至加热</van-button>
</van-col>
<van-col span="7">
@ -52,7 +46,6 @@
<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>
@ -90,20 +83,15 @@
.graphite_home{
display: flex;
background: #F6F6F6;
height: 1840px;
width: 2800px;
}
.heat_area{
width: 1268px;
height: 1586px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 5px;
gap: 20px;
flex-direction: row;
padding-top:10px;
padding-bottom: 100px;
background: #FFFFFF;
border-radius: 20px;
@ -111,17 +99,15 @@
.pickture_area{
width: 1040px;
height: 1586px;
margin: 5px;
margin-left: 20px;
background: #FFFFFF;
padding: 50px;
border-radius: 20px;
}
.graphite_btn{
padding-top: 50px;
margin-left: 30px;
margin-left: 68px;
margin-top: 2rem;
}
.btn_size{
@ -129,10 +115,16 @@
height: 80px;
color: #1989FA;
border: 3px solid #1989FA;
}
.open{
width: 906px;
}
.graphite_operate{
gap: 40px;
gap: 15px;
padding-top:30px;
}
.waste{

Write Preview
Loading…
Cancel
Save