<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: green;">{{ synthesizecount.device_online }}</span>个</el-card></el-col>
<el-col :span="6"><el-card shadow="always">报警数量<span style="margin-left: 12px;color: #e50015;">{{ synthesizecount.device_alarm }}</span>个</el-card></el-col>
<el-col :span="6"><el-card shadow="always">未报警数量<span style="margin-left: 12px;color: green;">{{ synthesizecount.device_normal }}</span>个</el-card></el-col>
<el-col :span="6"><el-card shadow="always">设备故障<span style="margin-left: 12px;color: #5d5f5f;">{{ synthesizecount.device_offline }}</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>
<el-row :align="'middle'">
<el-card class="box-card" style="margin-top:12px;height: 200px;">
<el-col :span="4" style="text-align: center;">
<el-progress type="dashboard" :percentage="synthesizecount.percent_alarm" color="red"></el-progress>
<el-tooltip class="item" effect="red" :content="synthesizecount.percent_alarm + '%'" placement="top-start">
<p>当前报警率</p>
</el-tooltip>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-progress type="dashboard" :percentage="synthesizecount.percent_online" color="green"></el-progress>
<el-tooltip class="item" effect="green" :content="synthesizecount.percent_online + '%'" placement="top-start">
<p>设备在线率</p>
</el-tooltip>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-progress type="dashboard" :percentage="memory" :color="colors"></el-progress>
<el-tooltip class="item" effect="dark" :content="memory + 'MB'" placement="top-start">
<p>项目运行速度</p>
</el-tooltip>
</el-col>
<el-col :span="4" style="text-align: center;">
<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">
<p>项目容量</p>
</el-tooltip>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-progress type="dashboard" :percentage="end_time" :color="colors"></el-progress>
<el-tooltip class="item" effect="dark" :content="end_time + 'S'" placement="top-start">
<p>访问接口速度</p>
</el-tooltip>
</el-col>
<el-col :span="4" style="text-align: center;">
<el-progress type="dashboard" :percentage="databas" :color="colors"></el-progress>
<el-tooltip class="item" effect="dark" :content="databas + 'S'" placement="top-start">
<p>访问数据库速度</p>
</el-tooltip>
</el-col>
</el-card>
</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-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>