maochaoying
/
soil
generated from maochaoying/dreamworks-frontend-template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

上仓温度

master
maochaoying 2 years ago
parent
9aef50944f
commit
6d7296b6eb
2 changed files with 260 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      src/components/charts/UpperTemperature.vue
  2. 177
      src/components/operation/LiquidInjection.vue

94
src/components/charts/UpperTemperature.vue
View File

@ -0,0 +1,94 @@
<template>
<div class="upper_temperature_container">
<div class="title_wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<g>
<ellipse
cx="15"
cy="15"
rx="15"
ry="15"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M15.155750000000001,16.849040000000002L15.155750000000001,12.557269999999999C15.155750000000001,12.29636,14.94327,12.08388,14.68236,12.08388L14.644860000000001,12.08388C14.3902,12.08388,14.18553,12.29011,14.18553,12.54321L14.18553,16.849040000000002C13.47935,17.0537,12.962209999999999,17.6849,12.962209999999999,18.4379C12.962209999999999,19.3582,13.7262,20.1034,14.671420000000001,20.1034C15.615079999999999,20.1034,16.37906,19.3566,16.37906,18.4379C16.3775,17.6849,15.86036,17.055300000000003,15.155750000000001,16.849040000000002ZM17.66956,14.947659999999999C17.56332,14.86017,17.50083,14.741430000000001,17.50083,14.61957L17.50083,9.766919999999999C17.50083,8.2405,16.23064,7,14.66986,7C13.10907,7,11.83888,8.2405,11.83888,9.766919999999999L11.83888,14.48208C11.83888,14.68675,11.75452,14.87579,11.60922,14.999220000000001C10.58588,15.8632,10,17.117800000000003,10,18.439500000000002C10,20.9533,12.09511,23,14.671420000000001,23C17.24773,23,19.342840000000002,20.954900000000002,19.342840000000002,18.439500000000002C19.341279999999998,17.0865,18.73196,15.8132,17.66956,14.947659999999999ZM14.66986,21.5517C12.904399999999999,21.5517,11.47017,20.155,11.47017,18.4379C11.47017,17.3677,12.02949,16.38346,12.96534,15.80695L13.19188,15.6679C13.26531,15.6226,13.31061,15.54136,13.31061,15.45543L13.31061,9.766919999999999C13.31061,9.03886,13.92149,8.44673,14.671420000000001,8.44673C15.42135,8.44673,16.03222,9.03886,16.03222,9.766919999999999L16.03222,15.45542C16.03222,15.54135,16.07753,15.6226,16.15096,15.6679L16.3775,15.80695C17.31335,16.38346,17.87111,17.3662,17.87111,18.4379C17.86954,20.155,16.43375,21.5517,14.66986,21.5517Z"
fill="#565EE4"
fill-opacity="1"
/>
</g>
</g>
</svg>
<p class="title">上仓制冷温度</p>
</div>
<div class="temp_wrap">
<p class="num">-30</p>
<p class="unit">℃</p>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.upper_temperature_container {
width: 350px;
height: 240px;
border-radius: 16px;
background: #565ee4;
box-sizing: border-box;
padding: 10px;
.title_wrap {
padding: 7px 0 20px 7px;
box-sizing: border-box;
display: flex;
align-items: center;
.title {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
margin-left: 6px;
color: #ffffff;
}
}
.temp_wrap {
width: 330px;
height: 160px;
border-radius: 14px;
background: #4d54d0;
display: flex;
align-items: center;
justify-content: center;
.num {
font-family: Poppins;
font-size: 90px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.02em;
color: #ffffff;
margin-right: 10px;
}
.unit {
font-family: Source Han Sans CN;
font-size: 88px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.02em;
color: #ffffff;
}
}
}
</style>

177
src/components/operation/LiquidInjection.vue
View File

@ -1,14 +1,51 @@
<template> <template>
<div class="liquid_injection_container"> <div class="liquid_injection_container">
<div class="title_wrap"> <div class="title_wrap">
<img class="water_icon" :src="Water" alt="" />
<p class="info">正在注入液氮</p>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<path
d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
fill="#9395A0"
fill-opacity="1"
/>
</g>
</svg>
<p class="title">操作运行状态</p>
</div>
<div class="chart_container">
<UpperTemperature />
<UpperTank />
</div>
<div class="btns">
<div class="disable_wrap">
<div class="real_btn">
<img :src="StopIcon" class="icon" alt="" />
<p class="text">暂停注入</p>
</div>
</div>
<div class="start_wrap">
<div class="real_btn">
<img :src="StartIcon" class="icon" alt="" />
<p class="text">注入液氮</p>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import Water from '@/assets/img/water.png'
import UpperTank from 'cpns/charts/UpperTank'
import StartIcon from '@/assets/img/start.png'
import StopIcon from '@/assets/img/stop.png'
import UpperTemperature from 'cpns/charts/UpperTemperature'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -21,21 +58,139 @@ import Water from '@/assets/img/water.png'
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
.title_wrap { .title_wrap {
padding: 13px 0 33px 14px;
width: 720px;
height: 62px;
border-radius: 16px;
background: #ffffff;
padding: 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
.water_icon {
width: 47px;
height: 35px;
margin-right: 22px;
}
.info {
margin-bottom: 20px;
box-sizing: border-box;
.title {
margin-left: 17px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #3d3d3d;
color: #9395a0;
}
.active {
color: #08092c;
}
}
.chart_container {
width: 720px;
height: 240px;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
margin-bottom: 20px;
}
.btns {
display: flex;
align-items: center;
box-sizing: border-box;
.disable_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
margin-right: 20px;
background: rgba(199, 204, 208, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #d8d8d8;
box-sizing: border-box;
border: 2px solid #c4c4c4;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.start_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(23, 241, 121, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #17f179;
box-sizing: border-box;
border: 2px solid #1ad66e;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.stop_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(250, 28, 28, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #fa1c1c;
box-sizing: border-box;
border: 2px solid #b71212;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save