Browse Source

修改echarts

master
maochaoying 2 years ago
parent
commit
b9552ee25b
  1. 140
      src/components/Progress.vue
  2. 18
      src/components/info/EnvironmentInfo.vue
  3. 3
      src/pages/Home.vue

140
src/components/Progress.vue

@ -10,6 +10,7 @@
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
}}
</p>
<p class="pre_time">预热时间约5分钟</p>
<!-- <div class="progress_bg">
<div
class="pro"
@ -120,7 +121,7 @@ const binOption = ref({
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -131,7 +132,10 @@ const binOption = ref({
xAxis: {
type: 'category',
boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
},
yAxis: {
type: 'value',
@ -150,13 +154,13 @@ const binOption = ref({
data: echartsStore.binHumidity,
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'binHP',
data: echartsStore.binHP,
},
{
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
@ -168,7 +172,7 @@ const envir1Option = ref({
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -188,19 +192,25 @@ const envir1Option = ref({
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [],
},
],
@ -210,7 +220,7 @@ const envir2Option = ref({
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -230,19 +240,25 @@ const envir2Option = ref({
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: 'H2O2浓度',
type: 'line',
stack: '3',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2饱和度',
type: 'line',
stack: 'Total',
stack: '4',
data: [],
},
],
@ -293,7 +309,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -304,7 +320,10 @@ onMounted(() => {
xAxis: {
type: 'category',
boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
},
yAxis: {
type: 'value',
@ -323,13 +342,13 @@ onMounted(() => {
data: echartsStore.binHumidity,
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'binHP',
data: echartsStore.binHP,
},
{
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
@ -341,7 +360,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -361,19 +380,25 @@ onMounted(() => {
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [],
},
],
@ -383,7 +408,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -403,19 +428,25 @@ onMounted(() => {
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [],
},
],
@ -428,7 +459,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -439,7 +470,10 @@ onMounted(() => {
xAxis: {
type: 'category',
boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
},
yAxis: {
type: 'value',
@ -458,13 +492,13 @@ onMounted(() => {
data: echartsStore.binHumidity,
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'binHP',
data: echartsStore.binHP,
},
{
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line',
stack: 'binSaturation',
data: echartsStore.binSaturation,
@ -476,7 +510,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -496,19 +530,25 @@ onMounted(() => {
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [],
},
],
@ -518,7 +558,7 @@ onMounted(() => {
trigger: 'axis',
},
legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
},
grid: {
left: '3%',
@ -538,19 +578,25 @@ onMounted(() => {
{
name: '温度',
type: 'line',
stack: 'Total',
stack: '1',
data: [],
},
{
name: '湿度',
type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: 'H2O2浓度',
type: 'line',
stack: '3',
data: [],
},
{
name: '过氧化氢浓度',
name: 'H2O2饱和度',
type: 'line',
stack: 'Total',
stack: '4',
data: [],
},
],
@ -607,6 +653,7 @@ const continueDisinfect = () => {
padding: 0 23px;
display: flex;
align-items: center;
position: relative;
.left_time_tag {
width: 158.66px;
height: 45px;
@ -635,6 +682,15 @@ const continueDisinfect = () => {
align-items: center;
justify-content: center;
}
.pre_time {
position: absolute;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: red;
left: 214px;
}
.progress_bg {
width: 396px;
height: 14px;

18
src/components/info/EnvironmentInfo.vue

@ -22,24 +22,20 @@
</div>
<div class="content">
<div class="line">
<p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}温度</p>
<p class="num">{{ getTemperature() }}</p>
<p class="title">温度</p>
<p class="num">{{ getTemperature() }}°C</p>
</div>
<div class="line">
<p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}湿度</p>
<p class="title">相对湿度</p>
<p class="num">{{ getHumidity() }} {{ '%RH' }}</p>
</div>
<div class="line">
<p class="title">
{{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢浓度
</p>
<p class="num">{{ getHP() }} PPM</p>
<p class="title">相对饱和度</p>
<p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
</div>
<div class="line">
<p class="title">
{{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢相对饱和度
</p>
<p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
<p class="title">汽化过氧化氢浓度</p>
<p class="num">{{ getHP() }} ppm</p>
</div>
</div>
</div>

3
src/pages/Home.vue

@ -152,8 +152,7 @@
<LiquidHandle v-if="activeTab == 2" :tabType="1" />
<LiquidHandle v-if="activeTab == 3" :tabType="2" />
<Test v-if="activeTab == 4" />
<Setting />
<!-- <Setting v-if="activeTab == 5" /> -->
<Setting v-if="activeTab == 5" />
<div class="other_info">
<p>IP {{ settingStore.deviceIp }}</p>
<p class="time">{{ nowTime }}</p>

Loading…
Cancel
Save