index.vue

<template>
  <div class="app-container">
    <div v-if="checkPermission(['manage isadmin'])">
      <el-row :gutter="20">
        <el-col :span="20">
          <!-- 用户操作 -->
          <div>
            <el-row :gutter="20">
              <el-col :span="6"><el-card shadow="always">用户数量<span style="margin-left: 12px;color: #606266;">{{ synthesizecount.usercount }}</span>个</el-card></el-col>
              <el-col :span="6"><el-card shadow="always">设备数量<span style="margin-left: 12px;color: #409EFF;">{{ synthesizecount.devicecount }}</span>个</el-card></el-col>
              <el-col :span="6"><el-card shadow="always">报警数量<span style="margin-left: 12px;color: #E6A23C;">{{ synthesizecount.devicepolice }}</span>个</el-card></el-col>
              <el-col :span="6"><el-card shadow="always">今天报警次数<span style="margin-left: 12px;color: #F56C6C;">{{ synthesizecount.timedevicepolice }}</span>个</el-card></el-col>
            </el-row>
          </div>
          <!-- 混合统计 -->
          <el-card class="box-card" style="margin-top:12px;padding-bottom:24px">
            <div class="chart-container" style="position: relative; top: 2px; height: 560px;">
              <chart height="100%" width="100%" />
            </div>
          </el-card>
          <!-- 统计 -->
          <el-card class="box-card" style="margin-top:12px;height: 200px;">
            <div style="display: inline-block;">
              <el-progress type="dashboard" :percentage="memory" :color="colors"></el-progress>
              <el-tooltip class="item" effect="dark" :content="memory + 'MB'" placement="top-start">
                <span style="position: relative;left: -115px;top: 12px;">项目运行速度</span>
              </el-tooltip>
            </div>
            <div style="display: inline-block;">
              <el-progress type="dashboard" :percentage="base_path" :color="colors"></el-progress>
              <el-tooltip class="item" effect="dark" :content="base_path * 10 + 'MB'" placement="top-start">
                <span style="position: relative;left: -108px;top: 12px;">项目容量</span>
              </el-tooltip>
            </div>
            <div style="display: inline-block;">
              <el-progress type="dashboard" :percentage="end_time" :color="colors"></el-progress>
              <el-tooltip class="item" effect="dark" :content="end_time + 'S'" placement="top-start">
                <span style="position: relative;left: -112px;top: 12px;">访问接口速度</span>
              </el-tooltip>
            </div>
            <div style="display: inline-block; position: relative;left: -36px;">
              <el-progress type="dashboard" :percentage="databas" :color="colors"></el-progress>
              <el-tooltip class="item" effect="dark" :content="databas + 'S'" placement="top-start">
                <span style="position: relative;left: -122px;top: 12px;">访问数据库速度</span>
              </el-tooltip>
            </div>
            <div style="display: inline-block;position: relative;right: -808px;bottom: 127px;">
              <el-progress type="dashboard" :percentage="rand" :color="colors"></el-progress>
              <el-tooltip class="item" effect="dark" :content="rand + 'MB'" placement="top-start">
                <span style="position: relative;left: -112px;top: 12px;">进程占用情况</span>
              </el-tooltip>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <!-- 时间线 -->
          <el-card class="box-card" style="width: 210px;position: relative;left: -13px;height: 908px;overflow:scroll">
            <div style="position: relative;left: -55px;">
              <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" style="width: 202px;">{{ activity.instructions }}<div style="padding-top: 7px;">ip:{{ activity.operationip }}</div></el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="checkPermission(['manage device'])">
      <!-- 用户首页 -->
      <el-row :gutter="20">
        <el-col :span="6"><el-card shadow="always">设备数量<span style="margin-left: 12px;color: #1426fe;">{{ uerscount.devicecount }}</span>个</el-card></el-col>
        <el-col v-if="uerscount.devicepolice != 0" :span="6"><el-card shadow="always">今日正常设备<span style="margin-left: 12px;color: #409EFF;">{{ uerscount.devicepolice }}</span>个</el-card></el-col>
        <el-col v-if="uerscount.devicepolice == 0" :span="6"><el-card shadow="always">今日正常设备<span style="margin-left: 12px;color: #409EFF;">{{ uerscount.devicecount }}</span>个</el-card></el-col>
        <el-col :span="6"><el-card shadow="always">今天报警数量<span style="margin-left: 12px;color: #E6A23C;">{{ uerscount.timedevicepolice }}</span>个</el-card></el-col>
        <el-col :span="6"><el-card shadow="always">设备服务分析<span :style="{color: uerscount.timedevicepolice === 0 ? '#67C23A' : (uerscount.timedevicepolice > 10 ? '#909399': (uerscount.timedevicepolice > 20 ? '#E6A23C' : '#F56C6C'))}" style="margin-left: 12px;">{{ uerscount.timedevicepolice === 0 ? '正常' : (uerscount.timedevicepolice > 10 ? '良好': (uerscount.timedevicepolice > 20 ? '较差' : '极差')) }}</span></el-card></el-col>
      </el-row>
      <el-card class="box-card" style="margin-top:12px;padding-bottom:24px">
        <div class="chart-container" style="position: relative; top: 2px; height: 560px;">
          <LineChart height="100%" width="100%" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/MixChart';
import LineChart from '@/components/Charts/LineMarker';
import checkPermission from '@/utils/permission';
import { homepagecount, timeline, Project_statistics, UserStatistics } from '@/api/homepage';
export default {
  name: 'Dashboard',
  components: { Chart, LineChart },
  data() {
    return {
      reverse: false,
      synthesizecount: [],
      uerscount: [],
      activities: [],
      memory: 0,
      base_path: 0,
      end_time: 0,
      databas: 0,
      rand: 0,
      colors: [
        { color: '#f56c6c', memory: 20 },
        { color: '#e6a23c', memory: 40 },
        { color: '#5cb87a', memory: 60 },
        { color: '#1989fa', memory: 80 },
        { color: '#6f7ad3', memory: 100 },
      ],
    };
  },
  created() {
    this.getList();
    this.timeline();
    this.Project();
    this.UserStatistics();
  },
  methods: {
    checkPermission,
    getList() {
      homepagecount()
        .then(response => {
          this.synthesizecount = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    timeline() {
      timeline()
        .then(response => {
          this.activities = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    Project() {
      Project_statistics()
        .then(response => {
          this.base_path = response.data.base_path;
          this.memory = response.data.memory;
          this.end_time = response.data.end_time;
          this.databas = response.data.dabatime;
          this.rand = response.data.rand;
        })
        .catch(err => {
          console.log(err);
        });
    },
    UserStatistics() {
      UserStatistics()
        .then(response => {
          if (response.code === 200) {
            this.uerscount = response.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  .chart-container{
    position: relative;
    width: 100%;
    top: 40px;
    // height: calc(100vh - 84px);
  }
}
</select>