disinfector_vue/src/views/seal/index.vue

<script lang="ts" setup>
import { useSealStore } from '@/stores/sealStore'
import homeFinish from 'assets/images/home/home-finish.svg'
import homeStart from 'assets/images/home/home-start.svg'
import SealInstrumentSvg from 'assets/images/seal/seal-instrument.svg'
import DashboardChart from 'components/seal/DashboardChart.vue'
import { ref, watch } from 'vue'

const sealStore = useSealStore()
const sealState = ref(sealStore.sealState)

watch(() => sealStore.sealState, (newVal) => {
  sealState.value = newVal
})
// const pressure = ref()
const onStartTest = () => {
  // 此处轮询获取密封测试状态
  sealStore.updateSealState('initDevice')
}
const onFinishTest = () => {
  sealStore.updateSealState('idle')
}
</script>

<template>
  <div class="dashboard-container">
    <main class="main-content">
      <div class="seal-left">
        <!-- 仪表盘 -->
        <div class="seal-chart">
          <div class="chart-ml">
            <DashboardChart />
          </div>
          <div class="seal-opt">
            <div class="seal-status">
              <div class="seal-time-text">测试时间：</div>
              <div class="seal-time-statue seal-time-text">
                未开始
              </div>
            </div>
            <div class="seal-status">
              <div class="seal-diff-text">气压差值：</div>
              <div class="seal-diff-statue seal-diff-text">
                未开始
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="seal-right">
        <div class="left-title">
          <div class="title-text-test">
            <img :src="SealInstrumentSvg" alt="仪表盘">
            <div class="title-text">
              测试前气压
            </div>
            <div class="title-text title-text-kpa">
              <span>2</span>
              <span class="title-kpa-pl">KPa</span>
            </div>
          </div>
        </div>
        <div class="seal-right-btn">
          <div>
            <div class="seal-add-btn seal-start" :class="{ 'seal-start-show': sealState !== 'idle' }" @click="onStartTest">
              <img :src="homeStart" alt="">
              <div>启动测试</div>
            </div>
            <div class="seal-add-btn seal-stop" :class="{ 'seal-stop-show': sealState !== 'idle' }" @click="onFinishTest">
              <img :src="homeFinish" alt="">
              <div>停止测试</div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.main-content{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  height: 100%;
  gap: 10px;
  height: 100%;
  .seal-left{
    background: #FFFFFF;
    grid-column:  1 / 3;
    box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
    background: $gradient-color;
    .seal-chart{
      margin-left: 1rem;
    }
    .chart-ml{
      margin: 3rem;
      height: 25rem;
    }
  }
}
.seal-opt{
  display: flex;
  justify-content: center;
  margin-top: 8vh;
  gap: 2rem;
  .seal-status{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F6FAFE;
    width: 15rem;
    height: 5rem;
    border-radius: 15px;
  }
  .seal-time-text{
    font-size: 1.5rem;
    font-weight: 500;
    padding-left: 0.5rem;
  }
  .seal-time-statue{
    height: 3rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }
  .seal-diff-text{
    font-size: 1.5rem;
    font-weight: 500;
    padding-left: 0.5rem;
  }
  .seal-diff-statue{
    height: 3rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }
}
.seal-add-btn{
  width: 24vw;
  height: 8vh;
  border-radius: 12px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  gap: 10px;
  margin: 2rem;
}

.seal-start{
  background: #31CB7A;
}

.seal-start-show{
  background: #e6e6e6;
}

.seal-stop{
  background: #e8e8e8;
}

.seal-stop-show {
  background: #FF6767;
}

.seal-right{
  background: $gradient-color;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  .seal-right-btn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-title{
    padding-top: 3.5vw;
    padding-left: 3.5vw;
    display: flex;
    .title-text-test{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      .title-text{
        font-size: 20px;
      }
      .title-text-kpa{
        color: #409EFF;
      }
      .title-kpa-pl{
        padding-left: 5px;
        font-weight: bold;
      }
    }
  }
}
</style>