userStatistics.vue

<template>
  <div class="app-container">
    <el-tooltip v-for=" item in deviceListType " :key="item.id" class="item" effect="dark" :content=" '设备分类下总数量' + item.counnum" placement="top">
      <el-button>{{ item.tname }}</el-button>
    </el-tooltip>
    <el-badge :value="devicenum" class="item" type="primary">
      <el-button size="small">用户总数</el-button>
    </el-badge>
    <el-table :data="countdata" stripe style="width: 100%">
      <el-table-column prop="date" label="姓名" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="工业探测器" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_1 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="家用报警器" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_2 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="家用报警器(IOT)" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_4 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="压力监测设备" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_5 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="烟雾感应设备" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_6 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="烟雾感应设备(联通)" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_7 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="家用报警器(RTU)" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_8 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="液位探测器" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_9 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="温度变送器" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_10 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="消防报警及联动设备" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px; color: #13CE66;">{{ scope.row.type_11 }}<span style="color: #878D99;">  个设备</span></span>
        </template>
      </el-table-column>
    </el-table>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>
  </div>
</template>

<script>
import { deviceTypeList } from '@/api/device';
import websocketurl from '@/api/configurl';
import BackToTop from '@/components/BackToTop';
export default {
  components: { BackToTop },
  data() {
    return {
      deviceListType: [], // 设备分类
      countdata: [],
      websock: null,
      devicenum: undefined,
      type: {
        token: undefined,
        id: '1',
      },
      timer: undefined,
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // Please keep consistent with height to center vertically
        background: '#e7eaf1', // The background color of the button
      },
    };
  },
  created() {
    this.getList();// 设备分类
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
  },
  methods: {
    getList() {
      deviceTypeList()
        .then(response => {
          var devicetype = response.data;
          this.deviceListType = devicetype['devicetype'];
        })
        .catch(err => {
          console.log(err);
        });
    },
    initWebSocket(){ // 初始化weosocket
      const wsuri = websocketurl.baseURL;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen(){ // 连接建立之后执行send方法发送数据
      console.log('连接成功');
    },
    websocketonerror(){ // 连接建立失败重连
      this.$notify({
        title: '警告',
        message: '建立链接失败,正在重连',
        type: 'warning',
      });
      this.initWebSocket();
    },
    websocketonmessage(e){ // 数据接收
      const redata = JSON.parse(e.data);
      this.countdata = redata.data.userdata;
      this.devicenum = redata.data.usercount;
    },
    websocketsend(){ // 数据发送
      this.websock.send(JSON.stringify(this.type));
    },
    websocketclose(e){ // 关闭
      console.log('断开连接', e);
      this.$notify({
        title: '警告',
        message: '用户统计长连接已断开',
        type: 'warning',
      });
    },
  },
};
</script>

<style>
</style>