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; ...@@ -19,7 +19,7 @@ import java.util.List;
* @author zxfei * @author zxfei
* @date 2022-06-28 * @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 { public interface ISiteFeign extends IFeign {
...@@ -66,7 +66,7 @@ public interface ISiteFeign extends IFeign { ...@@ -66,7 +66,7 @@ public interface ISiteFeign extends IFeign {
* *
* @return * @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); String siteTree(@RequestHeader("Authorization") String authorization);
/** /**
......
device-manager-ui/admin/src/views/Home.vue
View file @ f5cf5a55
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
> >
<el-row <el-row
><span style="font-size: 14px" ><span style="font-size: 14px"
>停用率 {{ statData.deviceStopRatio }}</span >停用率 {{ statData.deviceStopRatio * 100 }}%</span
></el-row ></el-row
> >
<el-row> <el-row>
...@@ -148,16 +148,12 @@ ...@@ -148,16 +148,12 @@
> >
<el-col :span="12"> <el-col :span="12">
<el-card class="box-card"> <el-card class="box-card">
<!-- <el-descriptions title="设备总量" colon="false" column="3">
</el-descriptions> -->
<div id="deviceTotal" style="width: 100%; height: 300px"></div> <div id="deviceTotal" style="width: 100%; height: 300px"></div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-card class="box-card"> <el-card class="box-card">
<el-descriptions title="设备状态" colon="false" column="3"> <div id="deviceStat" style="width: 100%; height: 300px"></div>
</el-descriptions>
<div id="deviceStat" style="width: 100%; height: 150px"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -168,16 +164,12 @@ ...@@ -168,16 +164,12 @@
> >
<el-col :span="12"> <el-col :span="12">
<el-card class="box-card"> <el-card class="box-card">
<el-descriptions title="设备告警趋势" colon="false" column="3"> <div id="deviceAlarm" style="width: 100%; height: 300px"></div>
</el-descriptions>
<div id="deviceAlarm" style="width: 100%; height: 150"></div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-card class="box-card"> <el-card class="box-card">
<el-descriptions title="设备推送趋势" colon="false" column="3"> <div id="devicePush" style="width: 100%; height: 300px"></div>
</el-descriptions>
<div id="devicePush" style="width: 100%; height: 150"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -195,7 +187,7 @@ export default { ...@@ -195,7 +187,7 @@ export default {
let today = new Date(); let today = new Date();
let query = { let query = {
year: today.getFullYear(), year: today.getFullYear(),
month: today.getMonth()+1, month: today.getMonth() + 1,
day: today.getDate(), day: today.getDate(),
}; };
//查询今日设备统计 //查询今日设备统计
...@@ -212,20 +204,22 @@ export default { ...@@ -212,20 +204,22 @@ export default {
.catch((error) => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}); });
//默认查询15天数据
let beforeday = new Date(today); let beforeday = new Date(today);
beforeday.setDate(beforeday.getDate() - 15); 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) this.$post("/device/stat/list", query)
.then((res) => { .then((res) => {
if (res.code == 1) { if (res.code == 1) {
console.log("res", res); console.log("res", res);
this.statArrayData = res.data.data; this.statArrayData = res.data.data;
console.log("statData", this.statArrayData);
this.beforeday = this.statArrayData.map((i) => { this.beforeday = this.statArrayData.map((i) => {
let daystr = i.month + "-" + i.day; let daystr = i.month + "-" + i.day;
return daystr; return daystr;
...@@ -247,10 +241,37 @@ export default { ...@@ -247,10 +241,37 @@ export default {
.catch((error) => { .catch((error) => {
this.$message.error(error.message); 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) { formatterDate(time) {
let date = new Date(Number(time)); let date = new Date(Number(time));
let Y = date.getFullYear() + "-"; let Y = date.getFullYear() + "-";
...@@ -287,65 +308,6 @@ export default { ...@@ -287,65 +308,6 @@ export default {
var deviceTotalChart = this.$echarts.init( var deviceTotalChart = this.$echarts.init(
document.getElementById("deviceTotal") 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 = { let option = {
title: { title: {
text: "设备数据", text: "设备数据",
...@@ -359,13 +321,6 @@ export default { ...@@ -359,13 +321,6 @@ export default {
y: "top", y: "top",
data: ["设备总量", "在线趋势"], data: ["设备总量", "在线趋势"],
}, },
// grid: {
// top: "20%",
// left: "3%",
// right: "10%",
// bottom: "5%",
// containLabel: true,
// },
xAxis: { xAxis: {
name: "天", name: "天",
type: "category", type: "category",
...@@ -394,6 +349,7 @@ export default { ...@@ -394,6 +349,7 @@ export default {
name: "设备总量", name: "设备总量",
data: this.deviceTotalyData, data: this.deviceTotalyData,
type: "bar", type: "bar",
barWidth: 22, // 设置柱状图的宽度
}, },
{ {
...@@ -408,7 +364,113 @@ export default { ...@@ -408,7 +364,113 @@ export default {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
deviceTotalChart.setOption(option); 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() { data() {
...@@ -420,8 +482,11 @@ export default { ...@@ -420,8 +482,11 @@ export default {
dayProjectList: [], dayProjectList: [],
pendList: [], pendList: [],
beforeday: [], beforeday: [],
beforeDeviceStatday: [],
deviceTotalyData: [], deviceTotalyData: [],
deviceOnlineyData: [], deviceOnlineyData: [],
deviceStatOnlineyData: [],
deviceStatOfflineyData: [],
weekPerDay: { weekPerDay: {
xData: [], xData: [],
yData: [], yData: [],
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ f5cf5a55
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
ref="layoutTable" ref="layoutTable"
:data="tableData" :data="tableData"
notAdd notAdd
notDel
:config="tableConfig" :config="tableConfig"
> >
<el-button <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