admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/frequencyPanel.vue

<template>
  <div class="">
    <div class="grid-content bg-purple frequencyPanel">
      <div class="blanceChartTit">
        <span>频率</span>
      </div>
      <div style="padding: 30px">
        <div class="frequencyTit">当前频率  {{watchData.f?watchData.f:50.03}}hZ</div>
        <div class="frequencyTit2">
          频率偏差
          <span> {{watchData.fdeviation?watchData.fdeviation:0.06}}%</span>
        </div>
        <el-row class="mt-40 frequencyBox">
          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col class="rightSplitRed" :span="5">
            <div class="grid-content bg-purple">
              <el-tooltip
                class="item"
                effect="dark"
                content="50.02 Hz"
                placement="right"
              >
                <div class="rightSplitRedInner"></div>
              </el-tooltip>
            </div>
            <i class="el-icon-caret-top"></i>
            <div class="greenShadow"></div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row class="mt-20" style="text-align: right">
          <el-col :span="2">49</el-col>
          <el-col :span="5">49.5</el-col>
          <el-col :span="5">50</el-col>
          <el-col :span="5">50.5</el-col>
          <el-col :span="5">51</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'FrenquencyPanel',
  props: {
    getData: Object,
  },
  setup(props) {
    props
    const watchData = ref({})
    const getData = async () => {
      watchData.value = props.getData
    }

    const writeValue = (val) => {
      val
      getData()
    }

    //监听变化
    watch(
      () => props.getData,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        newVal
        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )

    return {
      watchData,
    }
  },
}
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>