滑杆组件、Counter组件等跳变问题及控制成功后数据包未传回时页面无反应的解决方案

[zxiaohong]

方案一： 更新模板方案

1. 修改store/index.js,初始 state 中添加一个字段intervaling: true

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './action';
import getters from './getters';
// 其他引入...
Vue.use(Vuex);
const state = {
  initDeviceInfo: {},
  feedId: '',
  snapshotData: {},
  streams: [],
  deviceStatus: 1,
  intervaling: true, // 轮训中
  intervalTimestamp: 0, // 轮询请求发起的时间
  controlTimestamp: 0, // 控制发起的时间
};

// 其他代码 ...
export default new Vuex.Store({
  actions,
  mutations: mixinMutations,
  state: mixinState,
  getters: mixinGetters,
});

2. 修改store/getters.js,初始 state 中添加一项intervaling: state => state.intervaling,

const getters = {
  // ...其他代码
  intervaling: state => state.intervaling,
  controlTimestamp: state => state.controlTimestamp,
  intervalTimestamp: state => state.intervalTimestamp,
};

export default getters;

3. 修改store/mutations.js,初始 state 中添加一项intervaling: state => state.intervaling,

// 过滤快照信息为健值对
function getKeyValue(data) {
  console.log('getKeyVal:' + data);
  if (!data) return {};
  const dataKeyValue = {};
  data.forEach((val) => {
    dataKeyValue[val.stream_id] = val.current_value;
  });
  return dataKeyValue;
}
export default {
 // ... 其他代码
  UPDATE_STREAMS(state, payload) {
    payload = payload || {}; // 兼容控制成功后数据包未传回页面无反应的问题
    const callBackData = getKeyValue(payload.streams);
    Object.keys(callBackData).forEach((key) => {
      state.streams[key] = callBackData[key];
    });
  },
// 更新轮询状态
  UPDATE_INTERVAL_STATE(state, data) {
    state.intervaling = data;
  },
// 更新轮询发出的时间戳
  UPDATE_INTERVA_TIMESTAMP(state, data) {
    state.intervalTimestamp = data;
  },
// 更新控制指令发出的时间戳
  UPDATE_CONTROL_TIMESTAMP(state, data) {
    state.controlTimestamp = data;
  },
};

4. 修改store/actions.js

import { SmartSDK } from '@/utils';

export default {
  initDeviceData({ commit }) {
    SmartSDK.initDevice().then(response => {
      commit('INIT_DEVICE_DATA', response);
    })
  },
  updateSnapshot({ commit }) {
    // 记录轮询获取快照的时间戳
    const _intervalTimestamp = new Date().getTime();
    commit('UPDATE_INTERVA_TIMESTAMP', _intervalTimestamp);
    SmartSDK.getSnapshot().then(response => {
      commit('UPDATE_SNAOSHOT', response);
    });
  },
};

5. 修改 App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
    <MaskOffline/>
  </div>
</template>
<script>
import MaskOffline from "@/components/Common/MaskOffline";
import { mapGetters } from "vuex";

export default {
  name: "App",
  components: {
    MaskOffline
  },
  data() {
    return {
      timer: null
    };
  },
  computed: {
    ...mapGetters(["intervaling"])
  },
  watch: {
    intervaling(val) {
      if (!val) {
        clearTimeout(this.timer);
        this.timer = null;
      } else {
        this.gerSnapshots(4000);
      }
    }
  },
  mounted() {
    window.JDSMART.ready(() => {
      this.$store.dispatch("initDeviceData");
      this.gerSnapshots(4000);
    });
    this.$router.afterEach(() => {
      this.$loading.hide();
    });
  },
  methods: {
    gerSnapshots(time) {
      this.timer = setTimeout(() => {
        this.$store.dispatch("updateSnapshot");
        clearTimeout(this.timer);
        this.gerSnapshots(time);
      }, time);
    }
  }
};
</script>

<style>
body {
  background-color: #eaeaea;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

6. 相关组件的修改，例如：滑杆组件PromiseSlip

值改变时，停止轮训 this.$store.commit("UPDATE_INTERVAL_STATE", false);
上报成功和失败后都恢复轮训 this.$store.commit("UPDATE_INTERVAL_STATE", true);

<template>
  <div v-show="powerOn">
    <PromiseSlipBase
      :cur-val="currentValue"
      :unit="unit"
      :title="title"
      :range="range"
      :disabled="disabled"
      @changeRange="handleRangeChange"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PromiseSlipBase from "./PromiseSlipBase";
import uiData from "../../locale/uiData";

export default {
  name: "PromiseSlip",
  components: {
    PromiseSlipBase
  },
  props: {
    streamId: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      disabled: false,
      powerOn: false,
      currentValue: 0,
      title: uiData[this.streamId].title,
      unit: uiData[this.streamId].unit,
      range:{
        max: uiData[this.streamId].max,
        min: uiData[this.streamId].min,
        dots: [...uiData[this.streamId].dots],
        showTip: uiData[this.streamId].showTip
      }
    };
  },
  computed: {
    ...mapGetters(["streams"])
  },
  watch: {
    streams: {
      handler(val) {
        this.getInfo(val);
      },
      deep: true
    }
  },
  activated() {
    this.getInfo(this.streams);
  },
  methods: {
    // 通过streams 获取信息
    getInfo(val) {
      this.powerOn = !!Number.parseInt(val.Power, 10);
      this.disabled = !!Number.parseInt(val.BabyLock, 10);
      this.currentValue =
        val[this.streamId] ? Number.parseInt(val[this.streamId], 10) : Number.parseInt(uiData[this.streamId].currentValue, 10);
    },
        // 当范围改变的时候
    handleRangeChange(val) {
      // 记录控制发出的时间戳
      const controlTimestamp = new Date().getTime();
      this.$store.commit('UPDATE_CONTROL_TIMESTAMP', controlTimestamp);
      // 停止轮询
      this.$store.commit('UPDATE_INTERVAL_STATE', false);
      this.$loading.show({
        modal: true,
        text: '努力中',
      });

      const { SmartSDK, buildPostData, buildUpdateStreamsData } = this.$smartUtils;
      const param = buildPostData(this.streamId, val);

      SmartSDK.controlDevice(param).then(
        (res) => {
          const updateStreamsData = buildUpdateStreamsData(res, this.streamId, val);
          this.$store.commit('UPDATE_STREAMS', updateStreamsData);
          this.$store.commit('UPDATE_INTERVAL_STATE', true);
          this.currentValue = val;
          this.$loading.hide();
        },
        (error) => {
          this.$loading.hide();
          this.$toast.show(error.errorInfo);
          this.$store.commit('UPDATE_INTERVAL_STATE', true);
        },
      );
    },
  }
};
</script>