提交 d77031f0 编写于 作者: 很久是多久's avatar 很久是多久

增加时序采集数据页

上级 8612e6a7
<template>
<div :class="$style['app-content']">
<div>
<el-button type="text">
<i class="el-icon-d-arrow-left" style="font-size: 20px" @click="goBack"></i>
</el-button>
<span style="font-size: 20px; font-weight: bold">
{{
topicName
}}
</span>
&nbsp;&nbsp;&nbsp;
<!-- <el-tag v-if="baseInfo.onlineStatus == 0" type="success" :hit="false" size="small">在线</el-tag>
<el-tag v-if="baseInfo.onlineStatus == 1" type="danger" :hit="false" size="small">离线</el-tag>
<el-tag v-if="baseInfo.onlineStatus == 2" type="warning" size="small" :hit="false">未连接</el-tag>-->
</div>
<!-- <el-table border highlight-current-row :data="tableData">
<el-table-column align="center" prop="dataKey" label="指标" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="dataValue" label="指标值" show-overflow-tooltip></el-table-column>
</el-table>-->
<table :class="$style['device-table']" border="1">
<tr>
<th>指标</th>
<th>指标值</th>
<th>指标</th>
<th>指标值</th>
</tr>
<tr v-for="(item,index) in tableNewData" :key="index">
<template v-for="items in item">
<td>{{items.dataKey}}</td>
<td>{{items.dataValue}}</td>
</template>
</tr>
</table>
</div>
</template>
<script>
import { dataList } from "@/api/statistical/target";
export default {
data() {
return {
tableData: [],
tableNewData: [],
topicName: ""
};
},
mounted() {
this.getList();
this.topicName = this.$route.query.row.topicName;
},
beforeDestroy() {
//清理工作 避免内存泄漏
//销毁监听事件
},
methods: {
getList() {
let params = {
clientId: this.$route.query.clientId,
eventTime: this.$route.query.row.eventTime
};
dataList(params).then(res => {
if (res.code == 200) {
this.tableData = res.data;
this.getData();
}
});
},
getData() {
const arr = [];
let minarr = [];
this.tableData.forEach(cate => {
if (minarr.length === 2) {
minarr = [];
}
if (minarr.length == 0) {
arr.push(minarr);
}
minarr.push(cate);
});
this.tableNewData = arr;
},
goBack() {
this.$router.push({
path: "/StatisticalMonitor/Terminal",
query: {
activeNameBack: this.$route.query.activeName,
clientIdBack: this.$route.query.clientId,
startTime: this.$route.query.startTime,
endTime: this.$route.query.endTime
}
});
}
}
};
</script>
<style lang="scss" module>
.app-content {
padding: 20px;
}
.device-table {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #cfdbe6;
// border: none;
font-size: 14px;
td:nth-child(odd) {
width: 30%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
td:nth-child(even) {
width: 10%;
text-overflow: ellipsis;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
th {
height: 40px;
background: rgb(230, 245, 243);
}
th:nth-child(odd) {
width: 20%;
}
th:nth-child(even) {
width: 10%;
}
}
.device-table1 {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #dfe6ec;
// border: none;
font-size: 14px;
// min-height: 300px;
th {
height: 40px !important;
background: rgb(230, 245, 243);
}
.tdClass {
width: 10%;
overflow: hidden;
padding: 10px 15px;
text-align: center;
// background: #f8f8f9;
}
.tdStatus {
width: 19%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
.tdZB {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
.tdZB1 {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow: hidden;
padding: 10px 15px;
}
}
.greencircle {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background: url("../../.././assets/images/Common/green_point.png") no-repeat
50% 50%;
background-size: 100%;
margin-left: 8px;
}
.redcircle {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background: url("../../.././assets/images/Common/red_point.png") no-repeat 50%
50%;
background-size: 100%;
margin-left: 8px;
}
.tdZB1:hover {
color: #56b4b0;
}
</style>
<style scoped>
.el-form-item {
margin-bottom: 0px !important;
}
</style>
\ No newline at end of file
<template>
<div>
<el-form :model="qryData" ref="queryForm" :inline="true">
<el-form-item label="设备" required>
<el-select
v-model="qryData.clientId"
size="small"
placeholder="请选择设备"
clearable
filterable
style="width: 220px"
>
<el-option
v-for="item in prosstionoptions"
:key="item.clientId"
:label="item.deviceName"
:value="item.clientId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间:" required>
<el-date-picker
v-model="qryData.startTime"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="开始日期"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间:" required>
<el-date-picker
v-model="qryData.endTime"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table border highlight-current-row :data="tableData">
<el-table-column align="center" type="index" label="序号" width="60" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="topicName" label="topic名称" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="msgSize" label="数据大小" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="eventTime" label="数据上报时间" show-overflow-tooltip></el-table-column>
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-search"
@click="gotoDetailGuan(scope.row)"
>查看</el-button>
</template>
</el-table-column>
</el-table>
<div style="width:100%; height: 480px; left:2%;margin-top:20px" ref="ycechart"></div>
</div>
</template>
<script>
import { proOptions, dataList, dataCharts } from "@/api/statistical/target";
import echarts from "echarts";
export default {
props: {
clientId: {
type: String
},
startTime: {
type: String
},
endTime: {
type: String
}
},
data() {
return {
qryData: {
clientId: "D2253IpgJo",
startTime: this.$moment()
.subtract(1, "days")
.format("YYYY-MM-DD HH:mm:ss"),
endTime: this.$moment().format("YYYY-MM-DD HH:mm:ss")
},
prosstionoptions: [],
ycmyChart: null,
tableData: []
};
},
created() {
console.log(this.clientId, "namenamename");
console.log(this.startTime, "namenamename");
console.log(this.endTime, "namenamename");
if (this.clientId) {
this.qryData.clientId = this.clientId;
this.qryData.startTime = this.startTime;
this.qryData.endTime = this.endTime;
}
console.log(this.qryData.clientId, "namenamename");
console.log(this.qryData.startTime, "namenamename");
console.log(this.qryData.endTime, "namenamename");
this.deviceOptions();
},
methods: {
resizeChart() {
this.ycmyChart ? this.ycmyChart.resize() : "";
this.pdmyChart ? this.pdmyChart.resize() : "";
},
deviceOptions() {
proOptions({ type: 11 }).then(res => {
if (res.code == 200) {
this.prosstionoptions = res.data;
this.qryData.clientId = "D2253IpgJo";
}
});
this.getList();
this.drawLine();
},
getList() {
let params = {
clientId: this.qryData.clientId,
startTime:
this.qryData.startTime,
endTime:
this.qryData.endTime
};
dataList(params).then(res => {
if (res.code == 200) {
this.tableData = res.data;
}
});
},
drawLine() {
let params = { clientId: this.qryData.clientId || "" };
dataCharts(params).then(res => {
if (res.code == 200) {
this.ycmyChart = this.$echarts.init(this.$refs.ycechart);
this.ycmyChart.setOption({
xAxis: {
type: "category",
data: res.data.dateList,
axisLabel: {
interval: 0,
rotate: 0
// formatter: function(value) {
// return value.length > 6 ? value.slice(0, 3) + "..." : value;
// }
},
triggerEvent: true
},
yAxis: [
{
type: "value"
}
],
series: [
{
data: res.data.countList,
type: "line",
smooth: true,
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(230, 245, 243)"
},
{
offset: 0.9,
color: "rgb(176, 238, 235)"
}
],
globalCoord: false
}
}
},
itemStyle: {
normal: {
lineStyle: {
color: "#4AB7BD"
},
color: "#56B4B0"
}
}
// markArea: {
// itemStyle: {
// color: "rgb(230, 245, 243)"
// },
// data: [
// [
// {
// xAxis: res.data.pdEcharts.xData[0]
// },
// {
// xAxis:
// res.data.pdEcharts.xData[
// res.data.pdEcharts.xData.length - 1
// ]
// }
// ]
// ]
// }
}
],
legend: {
data: [],
orient: "vertical",
right: "0%",
top: "35%",
itemGap: 20,
padding: [0, 0, 0, 100]
},
title: {
text: "单位:条"
},
tooltip: {
trigger: "axis"
},
grid: {
left: "1%",
right: "7%",
bottom: "3%",
containLabel: true
}
});
}
});
},
handleSearch() {
let start = this.qryData.startTime;
let end = this.qryData.endTime;
if (
this.qryData.clientId &&
this.qryData.startTime &&
this.qryData.endTime
) {
if (start < end) {
this.getList();
this.drawLine();
} else {
this.$message.error("开始时间要小于结束时间!");
}
} else {
this.$message.error("有参数未选择!");
}
}, //查询
resetQuery() {
this.qryData.clientId = "";
this.qryData.startTime = "";
this.qryData.endTime = "";
},
gotoDetailGuan(row) {
this.$router.push({
path: "/StatisticalMonitor/Terminal/terminaldetail",
query: {
activeName: "1",
row: row,
clientId: this.qryData.clientId,
startTime: this.qryData.startTime,
endTime: this.qryData.endTime
}
});
}
}
};
</script>
<style lang="scss" module>
.app-content {
padding: 20px;
}
.device-table {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #cfdbe6;
// border: none;
font-size: 14px;
td:nth-child(odd) {
width: 30%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
td:nth-child(even) {
width: 10%;
text-overflow: ellipsis;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
th {
height: 40px;
background: rgb(230, 245, 243);
}
th:nth-child(odd) {
width: 20%;
}
th:nth-child(even) {
width: 10%;
}
}
.device-table1 {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #dfe6ec;
// border: none;
font-size: 14px;
// min-height: 300px;
th {
height: 40px !important;
background: rgb(230, 245, 243);
}
.tdClass {
width: 10%;
overflow: hidden;
padding: 10px 15px;
text-align: center;
// background: #f8f8f9;
}
.tdStatus {
width: 19%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
.tdZB {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
.tdZB1 {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow: hidden;
padding: 10px 15px;
}
}
.tdZB1:hover {
color: #56b4b0;
}
</style>
<style scoped>
\ No newline at end of file
<template>
<div :class="$style['app-content']">
<div>
<span style=" font-weight: bold">业务数据采集项</span>
<el-tabs
v-model="activeName"
@tab-click="handleClick"
type="border-card"
style="margin:20px 0"
>
<el-tab-pane label="网关" name="1">
<Sun :clientId="clientId" :startTime="startTime" :endTime="endTime"></Sun>
</el-tab-pane>
<el-tab-pane label="普通" name="2">
<Lemp :clientId="clientIdl" :startTime="startTimel" :endTime="endTimel"></Lemp>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import Lemp from "./lemp";
import Sun from "./guanfu";
export default {
components: {
Lemp,
Sun
},
data() {
return {
activeName: "1",
tabName: {},
clientId: null,
endTime: null,
startTime: null,
clientIdl: null,
endTimel: null,
startTimel: null,
};
},
created() {
if (
this.$route.query.activeNameBack &&
this.$route.query.activeNameBack == "1"
) {
this.activeName = this.$route.query.activeNameBack || "1";
this.clientId = this.$route.query.clientIdBack;
this.startTime = this.$route.query.startTime;
this.endTime = this.$route.query.endTime;
} else {
this.activeName = this.$route.query.activeNameBack || "1";
this.clientIdl = this.$route.query.clientIdBack;
this.startTimel = this.$route.query.startTime;
this.endTimel = this.$route.query.endTime;
}
console.log(this.clientId, "namenamename");
console.log(this.startTime, "namenamename");
console.log(this.endTime, "namenamename");
},
methods: {
//设备接口
deviceOptions() {
proOptions({ type: 11 }).then(res => {
if (res.code == 200) {
this.prosstionoptions = res.data;
this.qryData.clientId = "D2253IpgJo";
}
});
proOptions({ type: 12 }).then(res => {
if (res.code == 200) {
this.prosstionoptionsLamp = res.data;
}
});
this.getList();
this.drawLine();
},
handleClick(tab) {
this.tabName = tab;
} //tab切换
}
};
</script>
<style lang="scss" module>
.app-content {
padding: 20px;
}
.device-table {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #cfdbe6;
// border: none;
font-size: 14px;
td:nth-child(odd) {
width: 30%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
td:nth-child(even) {
width: 10%;
text-overflow: ellipsis;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
th {
height: 40px;
background: rgb(230, 245, 243);
}
th:nth-child(odd) {
width: 20%;
}
th:nth-child(even) {
width: 10%;
}
}
.device-table1 {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #dfe6ec;
// border: none;
font-size: 14px;
// min-height: 300px;
th {
height: 40px !important;
background: rgb(230, 245, 243);
}
.tdClass {
width: 10%;
overflow: hidden;
padding: 10px 15px;
text-align: center;
// background: #f8f8f9;
}
.tdStatus {
width: 19%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
.tdZB {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
.tdZB1 {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow: hidden;
padding: 10px 15px;
}
}
.tdZB1:hover {
color: #56b4b0;
}
</style>
<style scoped>
.el-form-item {
margin-bottom: 0px !important;
}
</style>
<template>
<div>
<el-form :model="qryData1" ref="queryForm" :inline="true">
<el-form-item label="设备" required>
<el-select
v-model="qryData1.clientId"
size="small"
placeholder="请选择设备"
clearable
filterable
style="width: 220px"
>
<el-option
v-for="item in prosstionoptionsLamp"
:key="item.clientId"
:label="item.deviceName"
:value="item.clientId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间:" required>
<el-date-picker
v-model="qryData1.startTime"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="开始日期"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间:" required>
<el-date-picker
v-model="qryData1.endTime"
size="small"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch1">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
</el-form-item>
</el-form>
<el-table border highlight-current-row :data="tableDataTwo">
<el-table-column align="center" type="index" label="序号" width="60" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="topicName" label="topic名称" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="msgSize" label="数据大小" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="eventTime" label="数据上报时间" show-overflow-tooltip></el-table-column>
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-search" @click="gotoDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<div style="width:100%; height: 480px; left:2%;margin-top:20px" ref="pdechart"></div>
</div>
</template>
<script>
import { proOptions, dataList, dataCharts } from "@/api/statistical/target";
import echarts from "echarts";
export default {
props: {
clientId: {
type: String
},
startTime: {
type: String
},
endTime: {
type: String
}
},
data() {
return {
qryData1: {
clientId: "D2253IpgJo",
startTime: this.$moment()
.subtract(1, "days")
.format("YYYY-MM-DD HH:mm:ss"),
endTime: this.$moment().format("YYYY-MM-DD HH:mm:ss")
},
prosstionoptionsLamp: [],
pdmyChart: null,
tableDataTwo: []
};
},
created() {
if (this.clientId) {
this.qryData1.clientId = this.clientId;
this.qryData1.startTime = this.startTime;
this.qryData1.endTime = this.endTime;
}
console.log(this.clientId, "111111");
this.deviceOptions();
},
methods: {
deviceOptions() {
proOptions({ type: 12 }).then(res => {
if (res.code == 200) {
this.prosstionoptionsLamp = res.data;
this.qryData1.clientId = "D2253IpgJo";
}
});
this.getList();
this.drawLine();
},
getList() {
let params = {
clientId: this.qryData1.clientId,
startTime:
this.qryData1.startTime,
endTime:
this.qryData1.endTime
};
dataList(params).then(res => {
if (res.code == 200) {
this.tableDataTwo = res.data;
}
});
},
drawLine() {
let params = { clientId: this.qryData1.clientId || "" };
dataCharts(params).then(res => {
if (res.code == 200) {
this.pdmyChart = this.$echarts.init(this.$refs.pdechart);
this.pdmyChart.setOption({
xAxis: {
type: "category",
data: res.data.dateList,
axisLabel: {
interval: 0,
rotate: 0
// formatter: function(value) {
// return value.length > 6 ? value.slice(0, 3) + "..." : value;
// }
},
triggerEvent: true
},
yAxis: [
{
type: "value"
}
],
series: [
{
data: res.data.countList,
type: "line",
smooth: true,
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(230, 245, 243)"
},
{
offset: 0.9,
color: "rgb(176, 238, 235)"
}
],
globalCoord: false
}
}
},
itemStyle: {
normal: {
lineStyle: {
color: "#4AB7BD"
},
color: "#56B4B0"
}
}
// markArea: {
// itemStyle: {
// color: "rgb(230, 245, 243)"
// },
// data: [
// [
// {
// xAxis: res.data.pdEcharts.xData[0]
// },
// {
// xAxis:
// res.data.pdEcharts.xData[
// res.data.pdEcharts.xData.length - 1
// ]
// }
// ]
// ]
// }
}
],
legend: {
data: [],
orient: "vertical",
right: "0%",
top: "35%",
itemGap: 20,
padding: [0, 0, 0, 100]
},
title: {
text: "单位:条"
},
tooltip: {
trigger: "axis"
},
grid: {
left: "1%",
right: "7%",
bottom: "3%",
containLabel: true
}
});
}
});
},
handleSearch1() {
let start = this.qryData1.startTime;
let end = this.qryData1.endTime;
if (
this.qryData1.clientId &&
this.qryData1.startTime &&
this.qryData1.endTime
) {
if (start < end) {
this.getList();
this.drawLine();
} else {
this.$message.error("开始时间要小于结束时间!");
}
} else {
this.$message.error("有参数未选择!");
}
}, //查询
resetQuery1() {
this.qryData1.clientId = "";
this.qryData1.startTime = "";
this.qryData1.endTime = "";
},
gotoDetail(row) {
this.$router.push({
path: "/StatisticalMonitor/Terminal/terminaldetail",
query: {
activeName: "2",
row: row,
clientId: this.qryData1.clientId,
startTime: this.qryData1.startTime,
endTime: this.qryData1.endTime
}
});
}
}
};
</script>
<style lang="scss" module>
.app-content {
padding: 20px;
}
.device-table {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #cfdbe6;
// border: none;
font-size: 14px;
td:nth-child(odd) {
width: 30%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
td:nth-child(even) {
width: 10%;
text-overflow: ellipsis;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
th {
height: 40px;
background: rgb(230, 245, 243);
}
th:nth-child(odd) {
width: 20%;
}
th:nth-child(even) {
width: 10%;
}
}
.device-table1 {
table-layout: fixed;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
border-collapse: collapse;
border: 1px solid #dfe6ec;
// border: none;
font-size: 14px;
// min-height: 300px;
th {
height: 40px !important;
background: rgb(230, 245, 243);
}
.tdClass {
width: 10%;
overflow: hidden;
padding: 10px 15px;
text-align: center;
// background: #f8f8f9;
}
.tdStatus {
width: 19%;
overflow: hidden;
padding: 10px 15px;
// background: #f8f8f9;
}
.tdZB {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
overflow: hidden;
padding: 10px 15px;
}
.tdZB1 {
width: 40%;
// text-overflow: ellipsis;
// white-space: nowrap;
// word-break: keep-all;
// background: #f8f8f9;
overflow: hidden;
padding: 10px 15px;
}
}
.tdZB1:hover {
color: #56b4b0;
}
</style>
<style scoped>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册