liulingling.177216
2024-08-26 349f1cfc5fa77fbc636d542df0d8050fddec48c2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <div class="dataList-right">
    <el-table
        :data="tagValues"
        border
        :height="height"
        ref="table"
    >
      <el-table-column
          prop="tagName"
          align="center"
          label="指标名称">
      </el-table-column>
      <el-table-column
          prop="meteName"
          align="center"
          label="表具名称">
      </el-table-column>
      <el-table-column
          prop="value"
          align="center"
          label="采集值">
        <template slot-scope="scope">
          <span v-html="showValue(scope.row['value'])"></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="unitId"
          align="center"
          :formatter="unitIdFormat"
          label="单位">
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import {getLiveData} from "@/api/basicSetup/equipmentfile";
import mixins from "@/layout/mixin/getHeight";
 
export default {
  name: "DataList",
  props: ["indexCodes"],
  mixins: [mixins],
  created() {
    if (this.$props.indexCodes) {
      this.tagCodes = this.$props.indexCodes;
    }
 
    this.getDicts("sys_unit").then(response => {
      this.unitIdOptions = response.data;
    });
  },
  data() {
    return {
      tagValues: [],
      tagCodes: [],
      timer: null,
      unitIdOptions: [],
      height: null
    }
  },
  mounted() {
    clearInterval(this.timer);
    this.refreshData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    setCharts() {
      this.height = window.innerHeight - 240
    },
    show(tagCodes) {
      this.tagValues = [];
      this.tagCodes = tagCodes;
      this.refresh();
    },
    refreshData() {
      this.timer = setInterval(() => {
        this.refresh();
      }, 3000);
    },
    refresh() {
      let that = this
      this.$nextTick(() => {
        that.$refs.table.doLayout()
      })
      if (this.tagCodes.length === 0) {
        return;
      }
 
      getLiveData(this.tagCodes).then(response => {
        if (response.code === 200) {
          this.tagValues = response.data;
          this.$nextTick(() => {
            that.$refs.table && that.$refs.table.doLayout()
          })
        }
      });
    },
    showValue(value) {
      if (value) {
        return value.toFixed(2);
      }
      return '';
    },
    // 单位字典翻译
    unitIdFormat(row, column) {
      return this.selectDictLabel(this.unitIdOptions, row.unitId);
    },
  }
}
</script>
 
<style scoped lang="scss">
.dataList-right {
  height: 100%;
  overflow: hidden;
}
</style>