jg-chemical-client2/src/views/RealtimeData.vue

<template>
  <div v-loading="loading">
    <div style="font-size: 26px;font-weight: bolder;padding: 8px 0">实时数据展示</div>
    <div id="aaa">
      <el-table
        :data="points"
        style="width: 100%">
        <!--{ mqtt: '', type: '开关量输入', desc: '电动调节阀停', value: null, datetime: '', dataType: '' }-->
        <el-table-column
          type="index"
          :index="index => index + 1"/>
        <el-table-column
          prop="mqtt"
          label="标签"
          width="130"
          align="center"
        />
        <el-table-column
          prop="type"
          label="类型"
          width="130"
          align="center"
        />
        <el-table-column
          prop="desc"
          label="中文"
          width="180"
          align="center"
        />
        <el-table-column
          prop="value"
          label="值"
          align="center"
        >
          <template slot-scope="scope">
            <div class="tag-value">{{ scope.row.value }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="datetime"
          label="时间"
          align="center"
        />
        <el-table-column
          prop="dataType"
          label="数据类型"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'RealtimeData',
  data () {
    return {
      loading: false,
      logs: [],
    }
  },
  computed: {
    ...mapState({
      test: (state, getter) => {
        return state.tag.test
      },
      count: (state, getter) => state.tag.count,
      points: (state, getter) => {
        const arr = []
        for (const key in state.tag.points) {
          arr.push({
            tag: key,
            ...state.tag.points[key]
          })
        }
        return arr
      },
    }),
  },
  mounted () {
    this.tagValueChange()
  },
  methods: {
    ...mapMutations(['SET_POINT_VALUE']),
    tagValueChange() {
      //选择一个需要观察的节点
      const mqtt = document.getElementById('aaa')
      // 设置observer的配置选项
      const config = { childList: true, subtree: true, attributes: true, characterData: true }

      const observer = new MutationObserver((mutationRecords, observer) => {
        mutationRecords.forEach(mutation => {
          const data = Number(mutation.target.data)
          if (mutation.type === 'characterData' && data + '' !== 'NaN') {
            // console.log('mutation change in ', mutation.type, ' name: ', mutation.target.data)
            mutation.target.parentNode.style.color = 'red'
            const timeout = setTimeout(() => {
              mutation.target.parentNode.style.color = '#606266'
              clearTimeout(timeout)
            }, 1500)
          }
        })
      })
      //使用配置文件对目标节点进行观测
      observer.observe(tag, config)
      // 停止观测
      // observer.disconnect()
    }
  },
}
</script>

<style lang="less" scoped>

</style>