qn-sim-web/src/views/sys/index.vue

<template>
  <div>
    <div class='infos'>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-tickets'></span>
          租户基本信息
        </div>
        <div class='content'>
          <div>
            租户ID <span>{{tenantDetail.tenantId}}</span>
          </div>
          <div>
            租户名称 <span>{{tenantDetail.tenantName}}</span>
          </div>
          <div>
            开通时间 <span>{{tenantDetail.tenantCreateTime}}</span>
          </div>
        </div>
      </el-card>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-cpu'></span>
          设备数
        </div>
        <div class='content'>
          <Bar
            :current-value='tenantDetail.countStatistics.productCount || 0'
            :total-value='tenantDetail.countStatistics.productLimitNumber || 1'
          >
            <template #title>
              <div class='bar-title'>
                <div class='label'>
                  产品
                </div>
              </div>
            </template>
            <template #currentValue>已添加</template>
          </Bar>
          <Bar
            :current-value='tenantDetail.countStatistics.deviceCount || 0'
            :total-value='(tenantDetail.countStatistics.deviceLimitNumberPerProduct || 1) * (tenantDetail.countStatistics.productLimitNumber || 1)'
          >
            <template #title>
              <div class='bar-title'>
                <div class='label'>
                  设备
                </div>
              </div>
            </template>
            <template #currentValue>已添加</template>
          </Bar>
        </div>
      </el-card>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-coin'></span>
          Open API
        </div>
        <div class='content'>
          <div>
            AppID <span>{{tenantDetail.openApi.appId || '-'}}</span>
          </div>
          <div class='secret'>
            AppSecret
            <span>
              {{tenantDetail.openApi.appSecret || '-'}}
            </span>
            <a class='reset' @click='handleReset'>重置</a>
          </div>
          <div>
            生成时间 <span>{{tenantDetail.openApi.createTime || '-'}}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class='device'>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-cpu'></span>
          实时在线设备数
          <el-tooltip effect='dark' content='于物联网平台建立长连接的设备数量，数据采集有一定延迟。' placement='top'>
            <span class='tips el-icon-question'></span>
          </el-tooltip>
        </div>
        <div class='content'>
          <Bar
            :current-value='tenantDetail.onlineStatistics.onlineCount || 0'
            :total-value='tenantDetail.onlineStatistics.totalCount || 1'
          >
            <template #title>
              <div class='bar-title'>
                <div class='label'>
                  当前在线设备
                </div>
              </div>
            </template>
          </Bar>
          <div class='not-active'>
            <div>
              占比: {{
                ((tenantDetail.onlineStatistics.onlineCount || 0) / (tenantDetail.onlineStatistics.totalCount || 1) * 100).toFixed(2)
              }}%
            </div>
          </div>
        </div>
      </el-card>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-cpu'></span>
          在线设备数量
          <DatePicker
            v-model='onLineDeviceQueryDate'
            @change='getOnLineDevice'
          />
        </div>
        <BasicLine class='line-chart' :data='onLineDeviceList' />
      </el-card>
    </div>
    <div class='message'>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-chat-dot-square'></span>
          发送到平台的消息量
          <el-tooltip effect='dark' content='从物联网发送到服务端和设备的消息，数据采集有一定延迟。' placement='top'>
            <span class='tips el-icon-question'></span>
          </el-tooltip>
        </div>
        <BasicLine :height='210'/>
        <div class='month'>本月消息量: 3000</div>
      </el-card>
      <el-card>
        <div class='title'>
          <span class='icon el-icon-chat-dot-square'></span>
          平台发出的消息量
          <el-tooltip effect='dark' content='从物联网发送到服务端和设备的消息，数据采集有一定延迟。' placement='top'>
            <span class='tips el-icon-question'></span>
          </el-tooltip>
        </div>
        <BasicLine :height='210' />
        <div class='month'>本月消息量: 3000</div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import dayjs from 'dayjs';
import Bar from '@/components/Bar/index.vue';
import BasicLine from '@/components/Charts/BasicLine';
import {getOnlineDeviceData, getTenantDetail} from '@/api/sys';
import DatePicker from '@/components/DatePicker/index.vue';

export default {
  name: 'Sys',
  components: {
    Bar,
    BasicLine,
    DatePicker,
  },
  data() {
    return {
      tenantDetail: {
        countStatistics: {},
        onlineStatistics: {},
        openApi: {},
      },
      onLineDeviceQueryDate: [dayjs().subtract(24, 'hour'), dayjs()],
      onLineDeviceList: [],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 重置
    handleReset() {
      this.$confirm('重置后将导致原有AppSecret失效, 是否确定重置？', { type: 'warning' }).then(() => {
        // todo reset
      }).catch(() => {});
    },

    // 获取在线设备数量
    getOnLineDevice() {
      let [start, end] = this.onLineDeviceQueryDate;
      const format = 'YYYY-MM-DD HH:mm:ss';
      start = dayjs(start).format(format);
      end = dayjs(end).format(format);
      getOnlineDeviceData(start, end).then((res) => {
        this.onLineDeviceList = res.data.data.map((item) => ({
          label: dayjs(item.timeString).format('MM/DD HH:mm'),
          value: item.onlineNum,
        }));
      });
    },

    initData() {
      getTenantDetail(this.userInfo['tenant_id']).then((res) => {
        this.tenantDetail = res.data.data;
      });
      this.getOnLineDevice();
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style scoped lang='scss'>
.infos {
  display: flex;

  .el-card {
    flex: 1;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }

    .content {
      color: #555555;
      font-size: 14px;
      line-height: 3;

      span {
        margin-left: 10px;
      }

      .reset {
        color: red;
        cursor: pointer;
        margin: 0 20px;

        &:hover {
          text-decoration: underline;
        }
      }

      .ki-bar:first-child {
        margin-top: 20px;
      }

      .ki-bar {
        margin-top: 30px;
      }

      .secret {
        display: flex;

        span {
          width: 0;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.title {
  color: #000c17;
  font-weight: bold;
  display: flex;
  align-items: center;

  .icon {
    margin-right: 10px;
  }
}

.bar-title {
  color: #555555;
  font-size: 14px;
  display: flex;
  align-items: baseline;

  .label {
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
  }

  span {
    font-size: 14px;
    font-weight: normal;
  }
}

.tips {
  color: #cccccc;
  margin-left: 10px;
}

.el-date-editor {
  margin-left: auto;
}

.device {
  margin-top: 20px;
  display: flex;

  .el-card:first-child {
    flex: 1;
    margin-right: 20px;
  }

  .el-card:last-child {
    flex: 2;
    padding-right: 20px
  }

  .ki-bar, .line-chart {
    margin-top: 25px;
  }

  .not-active {
    margin-top: 30px;

    span {
      font-size: 14px;
      margin-left: 10px;
    }
  }
}

.message {
  margin-top: 20px;
  display: flex;

  .title {
    margin-bottom: 30px;
  }

  .el-card {
    flex: 1;
  }

  .el-card:first-child {
    margin-right: 20px;
  }

  .month {
    font-size: 14px;
    margin-top: 15px;
  }
}
</style>