Skip to content

D
device-new-platform
Commit 70244856 authored by 赵啸非's avatar 赵啸非
Browse files
Options

首页统计报表修改

parent 6bf5f2d1
Hide whitespace changes
Inline Side-by-side
Showing with 402 additions and 69 deletions
device-manager-ui/admin/package.json
View file @ 70244856
......@@ -9,19 +9,21 @@
"build:prod": "vue-cli-service build --model prod"
},
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@chenfengyuan/vue-qrcode": "^1.0.2",
"@riophae/vue-treeselect": "0.4.0",
"@vue/babel-preset-app": "^4.5.13",
"@xunlei/vue-context-menu": "^1.0.2",
"muse-ui": "^3.0.2",
"axios": "^0.18.0",
"core-js": "3.8.1",
"echarts": "^4.3.0",
"echarts": "^4.9.0",
"element-ui": "^2.15.5",
"file-saver": "2.0.4",
"fuse.js": "6.4.3",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"json-bigint": "^0.3.0",
"muse-ui": "^3.0.2",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
......
device-manager-ui/admin/src/assets/utils/globalComponents.js
View file @ 70244856
......@@ -10,6 +10,7 @@ import Confirm from '@/components/Confirm';
import FormField from '@/components/FormField';
import Upload from '@/components/Upload';
import ImageUpload from '@/components/ImageUpload';
import ImagePreview from '@/components/ImagePreview';
import FileUpload from '@/components/FileUpload';
import Editor from '@/components/Editor';
import Map from '@/components/Map';
......@@ -29,6 +30,7 @@ Prototype.install = (Vue, options) => {
Vue.component('Confirm', Confirm) // 局部确认窗口
Vue.component('Upload', Upload) // 文件上传
Vue.component('ImageUpload', ImageUpload) // 图片上传
Vue.component('ImagePreview', ImagePreview) // 图片预览
Vue.component('FileUpload', FileUpload) // 文件上传
Vue.component('Editor', Editor) // 富文本
Vue.component('Map', Map) // 地图
......
device-manager-ui/admin/src/main.js
View file @ 70244856
......@@ -11,9 +11,9 @@ import GlobalComponents from './assets/utils/globalComponents.js'
import Global from './assets/utils/global.js'
import VueClipboard from 'vue-clipboard2'
import VueAMap from 'vue-amap';
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(Prototype);
......
device-manager-ui/admin/src/views/Home.vue
View file @ 70244856
<template>
<div class="page page-home" style="min-height: 100vh">
<el-row :gutter="10" >
<el-row style="margin-left:50px;margin-right:50px" type="flex" justify="end" :gutter="10" >
<el-button type="text">数据更新:{{ statData.updateTime}}</el-button>
<el-button icon='el-icon-refresh' type="text">手动刷新</el-button>
</el-row>
<el-card style="margin-left:50px;margin-right:50px;margin-top:10px">
<el-col :span="3" >
<span style="font-size:20px"><b>{{ statData.deviceTotalCount}}</b></span>
<el-row><span style="font-size:14px">昨日 {{ statData.deviceAddCount}}</span></el-row>
<el-button icon='el-icon-mobile' type="text">设备总数</el-button>
<!-- <el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">设备总数</span></el-row> -->
<el-row :gutter="10">
<el-row
style="margin-left: 50px; margin-right: 50px"
type="flex"
justify="end"
:gutter="10"
>
<el-button type="text"
>数据更新:{{ formatterDate(statData.updateTime) }}</el-button
>
<el-button icon="el-icon-refresh" type="text">手动刷新</el-button>
</el-row>
<el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px">
<el-col :span="3">
<span style="font-size: 20px"
><b>{{ statData.deviceTotalCount }}</b></span
>
<el-row
><span style="font-size: 14px"
>昨日 {{ statData.deviceAddCount }}</span
></el-row
>
<el-button icon="el-icon-mobile" type="text">设备总数</el-button>
<!-- <el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">设备总数</span></el-row> -->
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:20px"><b>{{ statData.siteTotalCount}}</b></span></el-row>
<el-row><span style="font-size:14px">昨日 {{ statData.siteAddCount}}</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:13px">监控站点数</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.siteTotalCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>昨日 {{ statData.siteAddCount }}</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 13px">监控站点数</span></el-row
>
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:20px"><b>{{ statData.deviceOnlineCount}}</b></span></el-row>
<el-row><span style="font-size:14px">昨日 {{ statData.deviceOnlineRatio}}</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">在线设备</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.deviceOnlineCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>昨日 {{ statData.deviceOnlineRatio }}</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">在线设备</span></el-row
>
</el-col>
<el-col :span="3">
<el-row><span style="font-size:20px"><b>{{ statData.deviceOfflineCount}}</b></span></el-row>
<el-row><span style="font-size:14px">在线率 {{ statData.deviceOfflineRatio*100}}%</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">离线设备</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.deviceOfflineCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>在线率 {{ statData.deviceOfflineRatio * 100 }}%</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">离线设备</span></el-row
>
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:20px"><b>{{ statData.deviceStopRatio}}</b></span></el-row>
<el-row><span style="font-size:14px">停用率 {{ statData.deviceStopRatio}}</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">停用设备</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.deviceStopRatio }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>停用率 {{ statData.deviceStopRatio }}</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">停用设备</span></el-row
>
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:20px"><b>{{ statData.alarmTotalCount}}</b></span></el-row>
<el-row><span style="font-size:14px">昨日 {{ statData.alarmAddCount}}</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">今日告警次数</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.alarmTotalCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>昨日 {{ statData.alarmAddCount }}</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">今日告警次数</span></el-row
>
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:20px"><b>{{ statData.pushTotalCount}}</b></span></el-row>
<el-row><span style="font-size:14px">昨日 {{ statData.pushAddCount}}</span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">今日消息推送</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 20px"
><b>{{ statData.pushTotalCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>昨日 {{ statData.pushAddCount }}</span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">今日消息推送</span></el-row
>
</el-col>
<el-col :span="3" >
<el-row><span style="font-size:14px">今日下发命令 <b>{{ statData.uploadMessageTotalCount}}</b></span></el-row>
<el-row><span style="font-size:14px">今日下发命令 <b>{{ statData.downloadMessageTotalCount}}</b></span></el-row>
<el-row > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">数据获取</span></el-row>
<el-col :span="3">
<el-row
><span style="font-size: 14px"
>今日下发命令 <b>{{ statData.uploadMessageTotalCount }}</b></span
></el-row
>
<el-row
><span style="font-size: 14px"
>今日下发命令
<b>{{ statData.downloadMessageTotalCount }}</b></span
></el-row
>
<el-row>
<i size="mini" :class="'el-icon-mobile'"> </i
><span style="font-size: 14px">数据获取</span></el-row
>
</el-col>
</el-card>
</el-row>
<el-row
style="margin-left: 35px; margin-right: 35px; margin-top: 10px"
:gutter="20"
>
<el-col :span="12">
<el-card class="box-card">
<!-- <el-descriptions title="设备总量" colon="false" column="3">
</el-descriptions> -->
<div id="deviceTotal" style="width: 100%; height: 300px"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<el-descriptions title="设备状态" colon="false" column="3">
</el-descriptions>
<div id="deviceStat" style="width: 100%; height: 150px"></div>
</el-card>
</el-col>
</el-row>
<el-row
style="margin-left: 35px; margin-right: 35px; margin-top: 10px"
:gutter="20"
>
<el-col :span="12">
<el-card class="box-card">
<el-descriptions title="设备告警趋势" colon="false" column="3">
</el-descriptions>
<div id="deviceAlarm" style="width: 100%; height: 150"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<el-descriptions title="设备推送趋势" colon="false" column="3">
</el-descriptions>
<div id="devicePush" style="width: 100%; height: 150"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
......@@ -66,26 +192,226 @@ export default {
},
},
created() {
let query={year:2022,month:7,day:5}
//查询今日设备统计
this.loading=true;
this.$post("/device/stat/list", query)
.then((res) => {
if (res.code == 1) {
console.log("res",res)
this.statData=res.data.data[0]
console.log("statData",this.statData)
}
this.loading=false;
})
.catch((error) => {
this.$message.error(error.message);
});
let today = new Date();
let query = {
year: today.getYear,
month: today.getMonth,
day: today.getDay,
};
//查询今日设备统计
this.loading = true;
this.$post("/device/stat/list", query)
.then((res) => {
if (res.code == 1) {
console.log("res", res);
this.statData = res.data.data[0];
console.log("statData", this.statData);
}
this.loading = false;
})
.catch((error) => {
this.$message.error(error.message);
});
let beforeday = new Date(today);
beforeday.setDate(beforeday.getDate() - 15);
query = { createTimeStart: this.formatterDate(beforeday) };
this.$post("/device/stat/list", query)
.then((res) => {
if (res.code == 1) {
console.log("res", res);
this.statArrayData = res.data.data;
console.log("statData", this.statArrayData);
this.beforeday = this.statArrayData.map((i) => {
let daystr = i.month + "-" + i.day;
return daystr;
});
this.deviceTotalyData = this.statArrayData.map((i) => {
return i.deviceTotalCount;
});
this.deviceOnlineyData = this.statArrayData.map((i) => {
return i.deviceOnlineRatio;
});
this.$nextTick(() => {
this.myEcharts();
});
}
this.loading = false;
})
.catch((error) => {
this.$message.error(error.message);
});
//默认查询15天数据
},
methods: {
formatterDate(time) {
let date = new Date(Number(time));
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D = this.panLeft(date.getDate()) + " ";
let h = this.panLeft(date.getHours()) + ":";
let m = this.panLeft(date.getMinutes()) + ":";
let s = this.panLeft(date.getSeconds());
return Y + M + D + h + m + s;
},
getYear(time) {
let date = new Date(Number(time));
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D = this.panLeft(date.getDate()) + " ";
let h = this.panLeft(date.getHours()) + ":";
let m = this.panLeft(date.getMinutes()) + ":";
let s = this.panLeft(date.getSeconds());
return Y + M + D + h + m + s;
},
panLeft(num) {
return num < 10 ? "0" + num : num;
},
myEcharts() {
// 基于准备好的dom，初始化echarts实例
var deviceTotalChart = this.$echarts.init(
document.getElementById("deviceTotal")
);
//var myChart1 = this.$echarts.init(document.getElementById("main1"));
// 指定图表的配置项和数据
// var option = {
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// },
// legend: {},
// grid: {
// left: "3%",
// right: "4%",
// bottom: "3%",
// containLabel: true,
// },
// xAxis: [
// {
// type: "category",
// data: this.weekPerDay.xData,
// },
// ],
// yAxis: [
// {
// type: "value",
// },
// ],
// series: [
// {
// name: "项目个数",
// type: "bar",
// itemStyle: {
// normal: {
// //这里是重点
// color: function (params) {
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
// var colorList = [
// "#c23531",
// "#2f4554",
// "#61a0a8",
// // "#d48265",
// // "#91c7ae",
// // "#749f83",
// // "#ca8622",
// ];
// return colorList[params.dataIndex];
// },
// },
// },
// emphasis: {
// focus: "series",
// },
// data: this.weekPerDay.yData,
// },
// ],
// };
let option = {
title: {
text: "设备数据",
subtext: "",
x: "center",
},
legend: {
orient: "horizontal",
x: "left",
y: "top",
data: ["设备总量", "在线趋势"],
},
// grid: {
// top: "20%",
// left: "3%",
// right: "10%",
// bottom: "5%",
// containLabel: true,
// },
xAxis: {
name: "天",
type: "category",
data: this.beforeday,
},
yAxis: [
{
name: "设备总量",
type: "value",
// min: 0, // 配置 Y 轴刻度最小值
max: 400, // 配置 Y 轴刻度最大值
// splitNumber: 7, // 配置 Y 轴数值间隔
},
{
name: "在线率",
type: "value",
// min: 0, // 配置 Y 轴刻度最小值
max: 1, // 配置 Y 轴刻度最大值
//splitNumber: 7, // 配置 Y 轴数值间隔
},
],
series: [
// 多组折线图数据
{
name: "设备总量",
data: this.deviceTotalyData,
type: "bar",
},
{
name: "在线趋势",
yAxisIndex: 1,
data: this.deviceOnlineyData,
type: "line",
},
],
color: ["#3366CC", "#008000"],
};
// 使用刚指定的配置项和数据显示图表。
deviceTotalChart.setOption(option);
//myChart1.setOption(option);
},
},
data() {
return {
......@@ -95,6 +421,9 @@ export default {
statData: {},
dayProjectList: [],
pendList: [],
beforeday: [],
deviceTotalyData: [],
deviceOnlineyData: [],
weekPerDay: {
xData: [],
yData: [],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment