admin/iot_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码导入

Browse Source
This commit is contained in:
chy
2026-03-23 13:51:00 +08:00
commit 20ca199aa2
989 changed files with 132930 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

630
src/views/dataCenter/analysis.vue Normal file
View File

@@ -0,0 +1,630 @@
<template>
<div class="data-center-analysis">
<el-card style="margin-bottom: 12px">
<el-form :model="queryParams" ref="queryForm" :inline="true" size="mini" label-width="68px" style="margin-bottom: -18px">
<el-form-item :label="$t('dataCenter.analysis.349202-0')" prop="deviceId">
<el-select v-model="queryParams.deviceId" :placeholder="$t('dataCenter.analysis.349202-1')" filterable @change="handleDevDeviceChange">
<el-option v-for="(item, index) in deviceList" :key="index" :label="item.deviceName" :value="item.deviceId"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dataCenter.analysis.349202-2')" prop="dayDaterange">
<el-date-picker
style="width: 315px"
v-model="queryParams.dayDaterange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('dataCenter.analysis.349202-4')"
:end-placeholder="$t('dataCenter.analysis.349202-5')"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('dataCenter.analysis.349202-5') }}</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="handleResetQuery">{{ $t('dataCenter.analysis.349202-6') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-row :gutter="20" v-loading="loading">
<el-col :span="16">
<el-card class="card-box" style="margin-bottom: 20px">
<div v-show="deviceLineList.length !== 0" ref="deviceLineChart" style="width: 100%; height: 400px"></div>
<el-empty v-if="deviceLineList.length === 0" style="height: 400px" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="card-box" style="margin-bottom: 20px">
<div v-show="alertProcessList.length !== 0" ref="alertProcessPieChart" style="width: 100%; height: 400px"></div>
<el-empty v-if="alertProcessList.length === 0" style="height: 400px" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="card-box" style="margin-bottom: 0">
<div v-show="deviceBarList.length !== 0" ref="deviceBarChart" style="width: 100%; height: 480px"></div>
<el-empty v-if="deviceBarList.length === 0" style="height: 480px" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="card-box" style="margin-bottom: 0">
<dv-scroll-board v-show="realTimeConfig.data && realTimeConfig.data.length !== 0" class="scroll-board-wrap" :config="realTimeConfig" style="width: 100%; height: 480px" />
<el-empty v-if="!realTimeConfig.data || realTimeConfig.data.length === 0" style="height: 480px" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="card-box" style="margin-bottom: 0">
<dv-scroll-board v-show="alertInfoConfig.data && alertInfoConfig.data.length !== 0" class="scroll-board-wrap" :config="alertInfoConfig" style="width: 100%; height: 265px; margin-bottom: 15px" />
<el-empty v-if="!alertInfoConfig.data || alertInfoConfig.data.length === 0" style="height: 265px; margin-bottom: 15px" :image-size="120" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
<div v-show="alertLevelPieList.length !== 0" ref="alertPieChart" style="width: 100%; height: 200px"></div>
<el-empty v-if="alertLevelPieList.length === 0" style="height: 200px" :image-size="120" :description="$t('dataCenter.analysis.349202-7')"></el-empty>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import moment from 'moment';
import { listDeviceShort, listThingsModel } from '@/api/iot/device.js';
import { getDataCenterDeviceHistory, getDataCenterCountAlertProcess, getDataCenterCountAlertLevel, getDataCenterCountThingsModelInvoke } from '@/api/data/center.js';
import { listAlertLog } from '@/api/iot/alertLog';
export default {
name: 'dataCenterAnalysis',
dicts: ['iot_process_status', 'iot_alert_level'],
data() {
return {
loading: false,
loadingCount: 0,
deviceList: [],
identifierList: [], // 属性列表
pickerOptions: {
shortcuts: [
{
text: this.$t('dataCenter.analysis.349202-8'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 200 * 2);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.analysis.349202-9'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 200 * 24);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.analysis.349202-10'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 200 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.analysis.349202-11'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 200 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
],
},
// 查询参数
queryParams: {
deviceId: null,
dayDaterange: [new Date(new Date().getTime() - 3600 * 200 * 2), new Date()],
},
deviceLineList: [], // 设备折线图数据
alertProcessList: [], // 信息饼图数据列表
deviceBarList: [], // 设备柱状数据列表
realTimeConfig: {}, // 实时数据
alertInfoConfig: {},
alertLevelPieList: [], // 告警饼图数据列表
};
},
mounted() {
this.getDeviceList();
},
methods: {
// 获取设备列表
getDeviceList() {
const params = {
showChild: true,
pageNum: 1,
pageSize: 9999,
};
listDeviceShort(params).then((res) => {
if (res.code === 200) {
this.deviceList = res.rows;
}
});
},
// 选择设备后
handleDevDeviceChange(val) {
this.getDevIdentifierList(val);
},
getDevIdentifierList(deviceId) {
const params = {
deviceId: deviceId,
pageNum: 1,
pageSize: 9999,
};
listThingsModel(params).then((res) => {
if (res.code === 200) {
this.identifierList = res.rows;
}
});
},
// 查询设备的历史数据
getDevChartDatas() {
const devices = this.deviceList.find((item) => item.deviceId === this.queryParams.deviceId);
if (!devices) {
return;
}
this.myLoading();
const params = {
deviceId: devices.deviceId,
serialNumber: devices.serialNumber,
beginTime: moment(this.queryParams.dayDaterange[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(this.queryParams.dayDaterange[1]).format('YYYY-MM-DD HH:mm:ss'),
};
getDataCenterDeviceHistory(params).then((res) => {
if (res.code === 200) {
this.deviceLineList = res.data;
if (this.deviceLineList.length !== 0) {
setTimeout(() => {
this.drawDevLineChart();
}, 200);
}
}
this.myLoadingClose();
});
},
// 折线图
drawDevLineChart() {
this.deviceLineChart = this.$echarts.init(this.$refs.deviceLineChart);
this.deviceLineChart.clear();
// 设置折线图数据和样式
this.deviceLineChart.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
align: 'right',
left: '3%',
top: '6%',
},
grid: {
top: '20%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
// 自定义：设置x轴刻度
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: this.deviceLineList.length !== 0 && this.deviceLineList.map((item) => Object.keys(item)[0]),
},
// 自定义：设置y轴刻度
yAxis: {
type: 'value',
scale: true, //自适应
},
// 设置数据
series: this.getDevSeries(),
});
},
// 获取设备的series
getDevSeries() {
if (this.deviceLineList && this.deviceLineList.length !== 0) {
const identifiers = Object.values(this.deviceLineList[0])[0].map((item) => Object.keys(item)[0]) || [];
return identifiers.map((item) => {
return {
name: this.identifierList.find((chil) => chil.identifier === item).modelName,
type: 'line',
stack: this.$t('dataCenter.analysis.349202-12'),
data: this.deviceLineList.map((d) => {
const ide = Object.values(d)[0].find((f) => Object.keys(f)[0] === item);
return Object.values(ide)[0];
}),
};
});
}
},
// 查询统计告警信息处理
getCountAlertProcess() {
const devices = this.deviceList.find((item) => item.deviceId === this.queryParams.deviceId);
if (!devices) {
return;
}
this.myLoading();
const params = {
serialNumber: devices.serialNumber,
beginTime: moment(this.queryParams.dayDaterange[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(this.queryParams.dayDaterange[1]).format('YYYY-MM-DD HH:mm:ss'),
};
getDataCenterCountAlertProcess(params).then((res) => {
if (res.code === 200) {
this.alertProcessList = res.data;
if (this.alertProcessList.length !== 0) {
setTimeout(() => {
this.drawAlertProcessPieChart();
}, 200);
}
}
this.myLoadingClose();
});
},
// 饼图
drawAlertProcessPieChart() {
this.alertProcessPieChart = this.$echarts.init(this.$refs.alertProcessPieChart);
this.alertProcessPieChart.clear();
this.alertProcessPieChart.setOption({
title: {
text: this.$t('dataCenter.analysis.349202-13'),
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
show: true,
x: 'center',
y: 'bottom',
padding: [0, 0, 12, 0],
},
color: ['#5470C6', '#91CC75', '#73C0DE', '#FAC858', '#EE6666'],
series: [
{
type: 'pie',
radius: '70%',
center: ['50%', '49%'],
labelLine: {
show: true,
smooth: true, // 设置平滑曲线
length: 10, // 设置牵引线长度
length2: 10,
},
label: {
// 设置标签显示信息和格式
show: true,
position: 'outer',
fontSize: 11,
color: '#1d1d1d',
formatter: function (params) {
return `${params.name}：${params.value}个\n占：${params.percent}%`;
},
},
data: this.getAlertPieProcessData(),
},
],
});
},
getAlertPieProcessData() {
if (this.alertProcessList && this.alertProcessList.length !== 0) {
return this.alertProcessList.map((item) => {
return {
name: this.dict.type.iot_process_status.find((chil) => chil.value === String(item.type)).label,
value: item.count,
};
});
}
},
// 获取设备物模型指令下发数量
getThingsModelInvoke() {
const devices = this.deviceList.find((item) => item.deviceId === this.queryParams.deviceId);
if (!devices) {
return;
}
this.myLoading();
const params = {
serialNumber: devices.serialNumber,
beginTime: moment(this.queryParams.dayDaterange[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(this.queryParams.dayDaterange[1]).format('YYYY-MM-DD HH:mm:ss'),
};
getDataCenterCountThingsModelInvoke(params).then((res) => {
if (res.code === 200) {
this.deviceBarList = res.data;
if (this.deviceBarList.length !== 0) {
setTimeout(() => {
this.drawDeviceBarChart();
}, 200);
}
}
this.myLoadingClose();
});
},
// 柱状图
drawDeviceBarChart() {
this.deviceBarChart = this.$echarts.init(this.$refs.deviceBarChart);
this.deviceBarChart.clear();
this.deviceBarChart.setOption({
title: {
text: this.$t('dataCenter.analysis.349202-14'),
left: 'center',
},
color: ['#1890FF'],
textStyle: {
fontSize: 12,
fontStyle: 'normal',
},
grid: {
top: '10%',
left: '1%',
right: '6%',
bottom: '5%',
containLabel: true,
borderWidth: 0,
},
xAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fefef',
},
},
axisLabel: {
show: true,
interval: 0,
formatter: function (val) {
return `${val}次`;
},
},
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#fefef',
},
},
type: 'category',
data: this.deviceBarList.length !== 0 && this.deviceBarList.map((item) => item.modelName),
},
series: [
{
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
},
},
backgroundStyle: {
color: '#EBEEF5',
},
},
data: this.deviceBarList.length !== 0 && this.deviceBarList.map((item) => item.count),
type: 'bar',
barWidth: 30, //柱图宽度
},
],
});
},
// 查询告警信息
getDataRealTimeUpload() {
if (!this.queryParams.deviceId) {
return;
}
this.myLoading();
const params = {
deviceId: this.queryParams.deviceId,
pageNum: 1,
pageSize: 9999,
};
listThingsModel(params).then((res) => {
if (res.code === 200) {
const header = [this.$t('dataCenter.analysis.349202-15'), this.$t('dataCenter.analysis.349202-16'), this.$t('dataCenter.analysis.349202-17')];
let data = [];
if (res.rows && res.rows.length !== 0) {
data = res.rows.map((item) => {
return [item.modelName, item.value, item.ts];
});
}
this.realTimeConfig = {
rowNum: 10,
columnWidth: [100, 80, 190],
header: header,
data: data,
};
}
this.myLoadingClose();
});
},
// 查询告警信息
getAlertInfo() {
const devices = this.deviceList.find((item) => item.deviceId === this.queryParams.deviceId);
if (!devices) {
return;
}
this.myLoading();
const params = {
serialNumber: devices.serialNumber,
pageNum: 1,
pageSize: 9999,
};
listAlertLog(params).then((res) => {
const header = [this.$t('dataCenter.analysis.349202-18'), this.$t('dataCenter.analysis.349202-19'), this.$t('dataCenter.analysis.349202-20')];
let data = [];
if (res.rows && res.rows.length !== 0) {
data = res.rows.map((item) => {
return [item.alertName, this.dict.type.iot_alert_level.find((chil) => chil.value === String(item.alertLevel)).label, item.createTime];
});
}
this.alertInfoConfig = {
rowNum: 5,
columnWidth: [90, 90, 180],
header: header,
data: data,
};
this.myLoadingClose();
});
},
// 查询统计告警信息级别
getCountAlertLevel() {
const devices = this.deviceList.find((item) => item.deviceId === this.queryParams.deviceId);
if (!devices) {
return;
}
this.myLoading();
const params = {
serialNumber: devices.serialNumber,
};
getDataCenterCountAlertLevel(params).then((res) => {
if (res.code === 200) {
this.alertLevelPieList = res.data;
if (this.alertLevelPieList.length !== 0) {
setTimeout(() => {
this.drawAlertLevelPieChart();
}, 200);
}
}
this.myLoadingClose();
});
},
// 告警饼图
drawAlertLevelPieChart() {
this.alertPieChart = this.$echarts.init(this.$refs.alertPieChart);
this.alertPieChart.clear();
this.alertPieChart.setOption({
tooltip: {
trigger: 'item',
},
legend: {
show: true,
x: 'center',
y: 'bottom',
padding: [14, 0, 0, 0],
},
color: ['#5470C6', '#91CC75', '#73C0DE', '#FAC858', '#EE6666'],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '44%'],
labelLine: {
show: true,
smooth: true, // 设置平滑曲线
length: 10, // 设置牵引线长度
length2: 10,
},
label: {
// 设置标签显示信息和格式
show: true,
position: 'outer',
fontSize: 11,
color: '#1d1d1d',
formatter: function (params) {
return `${params.name}：${params.value}个\n占：${params.percent}%`;
},
},
data: this.getAlertLevelPieData(),
},
],
});
},
getAlertLevelPieData() {
if (this.alertLevelPieList && this.alertLevelPieList.length !== 0) {
return this.alertLevelPieList.map((item) => {
return {
name: this.dict.type.iot_alert_level.find((chil) => chil.value === String(item.type)).label,
value: item.count,
};
});
}
},
// 搜索按钮操作
handleQuery() {
this.getDevChartDatas(); // 查询设备的历史数据
this.getCountAlertProcess(); // 查询告警统计数据
this.getThingsModelInvoke(); // 设备使用统计
this.getDataRealTimeUpload(); // 获取数据实时上传
this.getAlertInfo(); // 查询告警信息
this.getCountAlertLevel(); // 查询告警级别统计
},
// 重置按钮操作
handleResetQuery() {
this.resetForm('queryForm');
this.deviceLineList = [];
this.alertProcessList = [];
this.deviceBarList = [];
this.realTimeConfig = {};
this.alertInfoConfig = {};
this.alertLevelPieList = [];
this.loading = false;
this.loadingCount = 0;
},
myLoading() {
if (this.loading === false) {
this.loading = true;
}
},
myLoadingClose() {
if (this.loadingCount === 5) {
this.loadingCount = 0;
this.loading = false;
return;
}
this.loadingCount = this.loadingCount + 1;
},
},
};
</script>
<style lang="scss" scoped>
.data-center-analysis {
padding: 20px;
.card-box {
padding: 0px;
/* 悬停效果，增加交互性 */
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.scroll-board-wrap {
::v-deep .header {
background-color: #f6f8fa !important;
color: #909399;
font-weight: bold;
.header-item {
height: 45px !important;
line-height: 45px !important;
}
}
::v-deep .rows {
.row-item {
height: 45px !important;
line-height: 45px !important;
color: #606266;
background-color: #fff !important;
}
}
}
}
}
</style>

643
src/views/dataCenter/history.vue Normal file
View File

@@ -0,0 +1,643 @@
<template>
<div class="data-center-history">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane :label="$t('dataCenter.history.384934-0')" name="device">
<div class="device-wrap">
<el-form @submit.native.prevent :model="devQueryParams" ref="devQueryForm" size="mini" :inline="true" label-width="68px">
<el-form-item :label="$t('dataCenter.history.384934-1')" prop="deviceId">
<el-select style="width: 100%" v-model="devQueryParams.deviceId" :placeholder="$t('dataCenter.history.384934-2')" filterable @change="handleDevDeviceChange">
<el-option v-for="(item, index) in devDeviceList" :key="index" :label="item.deviceName" :value="item.deviceId"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dataCenter.history.384934-3')" prop="identifiers">
<el-select style="width: 100%" v-model="devQueryParams.identifiers" :placeholder="$t('dataCenter.history.384934-4')" filterable multiple collapse-tags>
<el-option v-for="(item, index) in devIdentifierList" :key="index" :label="item.modelName" :value="item.identifier"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dataCenter.history.384934-5')" prop="dayDaterange">
<el-date-picker
style="width: 315px"
v-model="devQueryParams.dayDaterange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('dataCenter.history.384934-6')"
:end-placeholder="$t('dataCenter.history.384934-7')"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item style="float: right; margin-right: 0">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleDevQuery">{{ $t('dataCenter.history.384934-8') }}</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="handleDevResetQuery">{{ $t('dataCenter.history.384934-9') }}</el-button>
</el-form-item>
</el-form>
<el-row>
<el-col :span="24">
<el-card v-loading="loading" shadow="never">
<div slot="header">
<span>{{ $t('dataCenter.history.384934-10') }}</span>
</div>
<div class="el-table--enable-row-hover el-table--medium">
<div v-show="devDatas.length !== 0" ref="devLineChart" style="width: 100%; height: 480px; background: #fff"></div>
<el-empty v-if="devDatas.length === 0" style="height: 480px" :description="$t('dataCenter.history.384934-12')"></el-empty>
<el-table v-show="devTotal > 0" style="margin-top: 50px" :data="devTableList" :border="false">
<el-table-column :label="$t('dataCenter.history.384934-13')" prop="time" width="200" />
<el-table-column v-for="item in this.devTableHeaderTemp" :key="item.value" :label="item.name" :prop="item.value" />
</el-table>
<pagination
style="margin-bottom: 20px"
v-show="devTotal > 0"
:autoScroll="false"
:total="devTotal"
:page.sync="devPageNum"
:limit.sync="devPageSize"
@pagination="getDevTableList"
/>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('dataCenter.history.384934-14')" name="scene">
<div class="scene-wrap">
<el-form @submit.native.prevent :model="sceneQueryParams" ref="sceneQueryForm" size="mini" :inline="true" label-width="68px">
<el-form-item :label="$t('dataCenter.history.384934-15')" prop="sceneModelId">
<el-select style="width: 100%" v-model="sceneQueryParams.sceneModelId" :placeholder="$t('dataCenter.history.384934-16')" @change="handleSceneModelChange">
<el-option v-for="(item, index) in sceneModelList" :key="index" :label="item.sceneModelName" :value="item.sceneModelId"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dataCenter.history.384934-17')" prop="sceneModelDeviceId">
<el-select style="width: 100%" v-model="sceneQueryParams.sceneModelDeviceId" :placeholder="$t('dataCenter.history.384934-18')" @change="handleSceneDeviceChange">
<el-option v-for="(item, index) in sceneDeviceList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dataCenter.history.384934-3')" prop="identifiers">
<el-select style="width: 100%" v-model="sceneQueryParams.identifiers" :placeholder="$t('dataCenter.history.384934-4')" multiple collapse-tags>
<el-option v-for="(item, index) in sceneIdentifierList" :key="index" :label="item.sourceName" :value="item.identifier"></el-option>
</el-select>
</el-form-item>
<template v-if="sceneSearchShow">
<el-form-item :label="$t('dataCenter.history.384934-5')" prop="dayDaterange">
<el-date-picker
style="width: 315px"
v-model="sceneQueryParams.dayDaterange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('dataCenter.history.384934-6')"
:end-placeholder="$t('dataCenter.history.384934-7')"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
</template>
<el-form-item style="float: right; margin-right: 0">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleSceneQuery">{{ $t('dataCenter.history.384934-8') }}</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="handleSceneResetQuery">{{ $t('dataCenter.history.384934-9') }}</el-button>
<el-button type="text" @click="handleSceneSearchChange">
{{ sceneSearchShow ? $t('template.index.891112-113') : $t('template.index.891112-112') }}
<i :class="{ 'el-icon-arrow-down': !sceneSearchShow, 'el-icon-arrow-up': sceneSearchShow }"></i>
</el-button>
</el-form-item>
</el-form>
<el-row>
<el-col :span="24">
<el-card v-loading="loading" shadow="never">
<div slot="header">
<span>{{ $t('dataCenter.history.384934-10') }}</span>
</div>
<div class="el-table--enable-row-hover el-table--medium">
<div v-show="sceneDatas.length !== 0" ref="sceneLineChart" style="width: 100%; height: 480px; background: #fff"></div>
<el-empty v-if="sceneDatas.length === 0" style="height: 480px" :description="$t('dataCenter.history.384934-12')"></el-empty>
<el-table v-show="sceneTotal > 0" style="margin-top: 50px" :data="sceneTableList" :border="false">
<el-table-column :label="$t('dataCenter.history.384934-13')" prop="time" width="200" />
<el-table-column v-for="item in this.sceneTableHeaderTemp" :key="item.value" :label="item.name" :prop="item.value" />
</el-table>
<pagination
style="margin-bottom: 20px"
v-show="sceneTotal > 0"
:autoScroll="false"
:total="sceneTotal"
:page.sync="scenePageNum"
:limit.sync="scenePageSize"
@pagination="getSceneTableList"
/>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
import moment from 'moment';
import { listDeviceShort, listThingsModel } from '@/api/iot/device.js';
import { getSceneModelList, getSceneModelDetail, getSceneModelDataList } from '@/api/scene/list.js';
import { getDataCenterDeviceHistory, getDataCenterSceneHistory } from '@/api/data/center.js';
export default {
name: 'dataCenterHistory',
data() {
return {
activeTab: 'device',
devDeviceList: [], // 设备-设备列表
devIdentifierList: [],
pickerOptions: {
shortcuts: [
{
text: this.$t('dataCenter.history.384934-19'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 2);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.history.384934-20'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.history.384934-21'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: this.$t('dataCenter.history.384934-22'),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
],
},
// 查询参数
devQueryParams: {
deviceId: null,
identifiers: [],
dayDaterange: [new Date(new Date().getTime() - 3600 * 1000 * 2), new Date()],
},
loading: false,
devDatas: [], // 设备列表数据
devTableComTemp: [], // 设备列表table数据
devTableHeaderTemp: [], // 设备列表table数据
devPageNum: 1,
devPageSize: 10,
devTotal: 0,
sceneSearchShow: false, //搜索展开
sceneModelList: [], // 场景列表
sceneDeviceList: [],
sceneIdentifierList: [], // 场景变量
sceneQueryParams: {
sceneModelId: null,
sceneModelDeviceId: null,
identifiers: [],
dayDaterange: [new Date(new Date().getTime() - 3600 * 1000 * 2), new Date()],
},
sceneDatas: [], // 场景列表数据
sceneTableComTemp: [], // 设备列表table数据
sceneTableHeaderTemp: [], // 设备列表table数据
scenePageNum: 1,
scenePageSize: 10,
sceneTotal: 0,
};
},
mounted() {
this.getDevDeviceList();
this.getSceneModelListDatas();
const { activeName, deviceId, identifier, sceneModelId, sceneModelDeviceId } = this.$route.query;
if (activeName) {
this.activeTab = activeName || 'device';
// 设置默认值
if (activeName === 'device') {
this.devQueryParams.deviceId = Number(deviceId);
this.getDevIdentifierList(Number(deviceId));
this.devQueryParams.identifiers = [identifier];
setTimeout(() => {
this.handleDevQuery();
}, 500);
} else {
this.sceneQueryParams.sceneModelId = Number(sceneModelId);
this.getSceneModelDetailDatas(Number(sceneModelId));
this.sceneQueryParams.sceneModelDeviceId = Number(sceneModelDeviceId);
this.getSceneIdentifierList(Number(sceneModelDeviceId));
this.sceneQueryParams.identifiers = [identifier];
setTimeout(() => {
this.handleSceneQuery();
}, 500);
}
}
},
computed: {
devTableList() {
const start = (this.devPageNum - 1) * this.devPageSize;
const end = start + this.devPageSize;
return this.devTableComTemp.slice(start, end);
},
sceneTableList() {
const start = (this.scenePageNum - 1) * this.scenePageSize;
const end = start + this.scenePageSize;
return this.sceneTableComTemp.slice(start, end);
},
},
methods: {
// 获取设备列表
getDevDeviceList() {
const params = {
showChild: true,
pageNum: 1,
pageSize: 9999,
};
listDeviceShort(params).then((res) => {
if (res.code === 200) {
this.devDeviceList = res.rows;
}
});
},
// 选择设备后
handleDevDeviceChange(val) {
this.devQueryParams.identifiers = [];
this.getDevIdentifierList(val);
},
getDevIdentifierList(deviceId) {
const params = {
deviceId: deviceId,
pageNum: 1,
pageSize: 9999,
};
listThingsModel(params).then((res) => {
if (res.code === 200) {
this.devIdentifierList = res.rows;
}
});
},
// 获取设备图形数据
getDevChartDatas() {
this.loading = true;
const devices = this.devDeviceList.find((item) => item.deviceId === this.devQueryParams.deviceId);
const identifierList = this.devQueryParams.identifiers.map((item) => {
const identifiers = this.devIdentifierList.find((chil) => chil.identifier === item);
return { identifier: identifiers.identifier, type: identifiers.type };
});
const params = {
deviceId: devices.deviceId,
serialNumber: devices.serialNumber,
identifierList: identifierList,
beginTime: moment(this.devQueryParams.dayDaterange[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(this.devQueryParams.dayDaterange[1]).format('YYYY-MM-DD HH:mm:ss'),
};
getDataCenterDeviceHistory(params).then((res) => {
if (res.code === 200) {
this.devDatas = res.data;
this.formatDevTableDatas();
if (this.devDatas.length !== 0) {
setTimeout(() => {
this.drawDevLine();
}, 500);
}
}
this.loading = false;
});
},
// 搜索按钮操作
handleDevQuery() {
const isField = this.areAllFields(this.devQueryParams);
if (isField) {
this.getDevChartDatas();
}
},
// 重置按钮操作
handleDevResetQuery() {
this.resetForm('devQueryForm');
this.devQueryParams.identifiers = [];
this.devDatas = [];
this.devTableComTemp = [];
this.devTotal = 0;
this.handleDevQuery();
},
// 获取设备列表数据
getDevTableList(e) {
this.devPageNum = e.page;
this.devPageSize = e.limit;
},
// 搜索展开隐藏
handleSceneSearchChange() {
this.sceneSearchShow = !this.sceneSearchShow;
},
// 获取场景列表
getSceneModelListDatas() {
const params = {
pageNum: 1,
pageSize: 9999,
};
getSceneModelList(params).then((res) => {
if (res.code === 200) {
this.sceneModelList = res.rows;
}
});
},
// 场景选择后
handleSceneModelChange(val) {
this.sceneQueryParams.sceneModelDeviceId = null;
this.sceneQueryParams.identifiers = [];
this.getSceneModelDetailDatas(val);
},
getSceneModelDetailDatas(sceneModelId) {
getSceneModelDetail(sceneModelId).then((res) => {
if (res.code === 200) {
this.sceneDeviceList = res.data.sceneModelDeviceList;
}
});
},
// 场景-设备选择后
handleSceneDeviceChange(val) {
this.sceneQueryParams.identifiers = [];
this.getSceneIdentifierList(val);
},
// 获取变量情况列表
getSceneIdentifierList(sceneModelDeviceId) {
const params = {
sceneModelId: this.sceneQueryParams.sceneModelId,
sceneModelDeviceId: sceneModelDeviceId,
pageNum: 1,
pageSize: 9999,
};
getSceneModelDataList(params).then((res) => {
if (res.code === 200) {
this.sceneIdentifierList = res.rows;
}
});
},
// 获取设备图形数据
getSceneChartDatas() {
this.loading = true;
const variableType = this.sceneDeviceList.find((item) => item.id === this.sceneQueryParams.sceneModelDeviceId).variableType;
const ids = this.sceneQueryParams.identifiers.map((item) => this.sceneIdentifierList.find((chil) => chil.identifier === item).id).join(',');
const params = {
sceneModelId: this.sceneQueryParams.sceneModelId,
sceneModelDeviceId: this.sceneQueryParams.sceneModelDeviceId,
variableType: variableType,
ids: ids,
beginTime: moment(this.sceneQueryParams.dayDaterange[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(this.sceneQueryParams.dayDaterange[1]).format('YYYY-MM-DD HH:mm:ss'),
};
getDataCenterSceneHistory(params).then((res) => {
if (res.code === 200) {
this.sceneDatas = res.data;
this.formatSceneTableDatas();
if (this.sceneDatas.length !== 0) {
setTimeout(() => {
this.drawSceneLine();
}, 500);
}
}
this.loading = false;
});
},
// 搜索按钮操作
handleSceneQuery() {
const isField = this.areAllFields(this.sceneQueryParams);
if (isField) {
this.getSceneChartDatas();
}
},
// 重置按钮操作
handleSceneResetQuery() {
this.resetForm('sceneQueryForm');
this.sceneQueryParams.identifiers = [];
this.sceneDatas = [];
this.sceneTableComTemp = [];
this.sceneTotal = 0;
this.handleSceneQuery();
},
// 获取场景列表数据
getSceneTableList(e) {
this.scenePageNum = e.page;
this.scenePageSize = e.limit;
},
// 判断对象是否都有值
areAllFields(obj) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
if (!obj[key] || obj[key] === '' || obj[key].length === 0) {
return false;
}
}
}
return true;
},
drawDevLine() {
// 初始化折线图
this.charts = this.$echarts.init(this.$refs.devLineChart);
this.charts.clear();
// 设置折线图数据和样式
this.charts.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
align: 'right',
left: '3%',
top: '15%',
},
grid: {
top: '30%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
toolbox: {
feature: {
dataView: {},
restore: {},
saveAsImage: {},
},
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
// 自定义：设置x轴刻度
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: this.devDatas.length !== 0 && this.devDatas.map((item) => Object.keys(item)[0]),
},
// 自定义：设置y轴刻度
yAxis: {
type: 'value',
scale: true, //自适应
},
// 设置数据
series: this.getDevSeries(),
});
},
// 获取设备的series
getDevSeries() {
return this.devQueryParams.identifiers.map((item) => {
return {
name: this.devIdentifierList.find((chil) => chil.identifier === item).modelName,
type: 'line',
stack: this.$t('dataCenter.history.384934-23'),
data: this.devDatas.map((d) => {
const ide = Object.values(d)[0].find((f) => Object.keys(f)[0] === item);
return Object.values(ide)[0];
}),
};
});
},
// 格式化设备列表数据
formatDevTableDatas() {
this.devTableComTemp = this.devDatas.map((item) => {
const time = Object.keys(item)[0];
let obj = {};
Object.values(item)[0].forEach((chil) => {
obj[Object.keys(chil)[0]] = Object.values(chil)[0];
});
return { time, ...obj };
});
this.devTotal = this.devDatas.length;
this.devTableHeaderTemp = this.devQueryParams.identifiers.map((item) => ({
name: this.devIdentifierList.find((chil) => chil.identifier === item).modelName,
value: item,
}));
},
drawSceneLine() {
// 初始化折线图
this.charts = this.$echarts.init(this.$refs.sceneLineChart);
this.charts.clear();
// 设置折线图数据和样式
this.charts.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
align: 'right',
left: '3%',
top: '15%',
},
grid: {
top: '30%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
toolbox: {
feature: {
dataView: {},
restore: {},
saveAsImage: {},
},
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
// 自定义：设置x轴刻度
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: this.sceneDatas.length !== 0 && this.sceneDatas.map((item) => Object.keys(item)[0]),
},
// 自定义：设置y轴刻度
yAxis: {
type: 'value',
boundaryGap: true,
splitNumber: 4,
interval: 250,
},
// 设置数据
series: this.getSceneSeries(),
});
},
// 获取设备的series
getSceneSeries() {
return this.sceneQueryParams.identifiers.map((item) => {
return {
name: this.sceneIdentifierList.find((chil) => chil.identifier === item).sourceName,
type: 'line',
stack: this.$t('dataCenter.history.384934-23'),
data: this.sceneDatas.map((d) => {
const ide = Object.values(d)[0].find((f) => Object.keys(f)[0] === item);
return Object.values(ide)[0];
}),
};
});
},
// 格式化设备列表数据
formatSceneTableDatas() {
this.sceneTableComTemp = this.sceneDatas.map((item) => {
const time = Object.keys(item)[0];
let obj = {};
Object.values(item)[0].forEach((chil) => {
obj[Object.keys(chil)[0]] = Object.values(chil)[0];
});
return { time, ...obj };
});
this.sceneTotal = this.sceneDatas.length;
this.sceneTableHeaderTemp = this.sceneQueryParams.identifiers.map((item) => ({
name: this.sceneIdentifierList.find((chil) => chil.identifier === item).sourceName,
value: item,
}));
},
},
};
</script>
<style lang="scss" scoped>
.data-center-history {
padding: 20px;
.device-wrap {
margin-top: 5px;
}
.scene-wrap {
margin-top: 5px;
}
}
</style>