esswisdom_ipad_V3M_green/uni_modules/jerry-gauge/index.vue

<template>
  <view class="gauge-container">
    <canvas class="canvas" canvas-id="canvas2"></canvas>
  </view>
</template>

<script>
import Gauge from "./index.js";
import { mapState } from 'vuex';

export default {
  name: "gauge",
  data() {
    return {
      gaugeInstance: null,
	   uidatasdataSOC:0// 用于保存 Gauge 实例
    };
  },
  computed: {
	  ...mapState(['formattedTime']),
    ...mapState({
      uidatasdata: state => state.uidatasdata
    })
  },
  watch: {
    formattedTime: {
      handler(newVal, oldVal) {
        // 更新 uidatasdataSOC 的值
		if(newVal.SOC){
			this.uidatasdataSOC = (newVal.SOC * 1).toFixed(0);
		}else{
			this.uidatasdataSOC =80;
		}
		console.log(this.uidatasdataSOC);
        // 重新创建 Gauge 实例
        this.createGauge();
      },
      deep: true
    }
  },
  mounted() {
    this.createGauge();
  },
  methods: {
    createGauge() {
      // 销毁旧的 Gauge 实例，如果有的话
      if (this.gaugeInstance) {
        this.gaugeInstance = null;
      }

      // 创建新的 Gauge 实例
      this.gaugeInstance = new Gauge({
        canvasId: "canvas2",
        value: this.uidatasdataSOC,
        lineWidth: 20,
        progressColor: ["#B0D0FF", "#5B8FF9"],
        valueColor: "blue"
      });
    }
  }
};
</script>

<style>
.gauge-container {
  padding: 0rpx 20rpx;
  text-align: left;
}
.title {
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
}
.canvas {
  width: 180px;
  height: 150px;
  margin-top: 10rpx;
}
</style>