Skip to content

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

修改首页统计图

parent 114b4650
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 113 deletions
common-lib/src/main/java/com/mortals/xhx/feign/site/ISiteFeign.java
View file @ f5cf5a55
......@@ -19,7 +19,7 @@ import java.util.List;
* @author zxfei
* @date 2022-06-28
*/
@FeignClient(name = "base-manager", path = "/base", fallback = SiteFeignFallbackFactory.class)
@FeignClient(name = "base-manager", path = "/base", fallbackFactory = SiteFeignFallbackFactory.class)
public interface ISiteFeign extends IFeign {
......@@ -66,7 +66,7 @@ public interface ISiteFeign extends IFeign {
*
* @return
*/
@GetMapping(value = "/site/siteTree",produces = MediaType.APPLICATION_JSON_UTF8_VALUE, consumes = "application/json;charset=UTF-8")
@GetMapping(value = "/site/siteTree")
String siteTree(@RequestHeader("Authorization") String authorization);
/**
......
device-manager-ui/admin/src/views/Home.vue
View file @ f5cf5a55
......@@ -82,7 +82,7 @@
>
<el-row
><span style="font-size: 14px"
>停用率 {{ statData.deviceStopRatio }}</span
>停用率 {{ statData.deviceStopRatio * 100 }}%</span
></el-row
>
<el-row>
......@@ -148,16 +148,12 @@
>
<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>
<div id="deviceStat" style="width: 100%; height: 300px"></div>
</el-card>
</el-col>
</el-row>
......@@ -168,16 +164,12 @@
>
<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>
<div id="deviceAlarm" 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="devicePush" style="width: 100%; height: 150"></div>
<div id="devicePush" style="width: 100%; height: 300px"></div>
</el-card>
</el-col>
</el-row>
......@@ -195,7 +187,7 @@ export default {
let today = new Date();
let query = {
year: today.getFullYear(),
month: today.getMonth()+1,
month: today.getMonth() + 1,
day: today.getDate(),
};
//查询今日设备统计
......@@ -212,20 +204,22 @@ export default {
.catch((error) => {
this.$message.error(error.message);
});
//默认查询15天数据
let beforeday = new Date(today);
beforeday.setDate(beforeday.getDate() - 15);
this.findDeviceTotalStat(beforeday);
query = { createTimeStart: this.formatterDate(beforeday) };
this.findDeviceStat(beforeday);
},
methods: {
findDeviceTotalStat(beforeday) {
let 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;
......@@ -247,10 +241,37 @@ export default {
.catch((error) => {
this.$message.error(error.message);
});
},
//默认查询15天数据
findDeviceStat(beforeday) {
let query = { createTimeStart: this.formatterDate(beforeday) };
this.$post("/device/stat/list", query)
.then((res) => {
if (res.code == 1) {
this.statArrayData = res.data.data;
this.beforeDeviceStatday = this.statArrayData.map((i) => {
let daystr = i.month + "-" + i.day;
return daystr;
});
this.deviceStatOnlineyData = this.statArrayData.map((i) => {
return i.deviceOnlineRatio;
});
this.deviceStatOfflineyData = this.statArrayData.map((i) => {
return i.deviceOfflineRatio;
});
this.$nextTick(() => {
this.deviceStatEcharts();
});
}
this.loading = false;
})
.catch((error) => {
this.$message.error(error.message);
});
},
methods: {
formatterDate(time) {
let date = new Date(Number(time));
let Y = date.getFullYear() + "-";
......@@ -287,65 +308,6 @@ export default {
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: "设备数据",
......@@ -359,13 +321,6 @@ export default {
y: "top",
data: ["设备总量", "在线趋势"],
},
// grid: {
// top: "20%",
// left: "3%",
// right: "10%",
// bottom: "5%",
// containLabel: true,
// },
xAxis: {
name: "天",
type: "category",
......@@ -394,6 +349,7 @@ export default {
name: "设备总量",
data: this.deviceTotalyData,
type: "bar",
barWidth: 22, // 设置柱状图的宽度
},
{
......@@ -408,7 +364,113 @@ export default {
// 使用刚指定的配置项和数据显示图表。
deviceTotalChart.setOption(option);
//myChart1.setOption(option);
},
deviceStatEcharts() {
var deviceStatChart = this.$echarts.init(
document.getElementById("deviceStat")
);
let deviceStatOption = {
title: {
text: "设备状态",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["在线率", "离线率"],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: this.beforeDeviceStatday,
},
],
yAxis: [
{
type: "value",
max: 2,
},
],
series: [
{
name: "在线率",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
emphasis: {
focus: "series",
},
data: this.deviceStatOnlineyData,
},
{
name: "离线率",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: "series",
},
data: this.deviceStatOfflineyData,
},
],
};
deviceStatChart.setOption(deviceStatOption);
},
},
data() {
......@@ -420,8 +482,11 @@ export default {
dayProjectList: [],
pendList: [],
beforeday: [],
beforeDeviceStatday: [],
deviceTotalyData: [],
deviceOnlineyData: [],
deviceStatOnlineyData: [],
deviceStatOfflineyData: [],
weekPerDay: {
xData: [],
yData: [],
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ f5cf5a55
......@@ -41,6 +41,7 @@
ref="layoutTable"
:data="tableData"
notAdd
notDel
:config="tableConfig"
>
<el-button
......
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