|
|
|
@ -0,0 +1,342 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class="ptrecordBoxdown">
|
|
|
|
|
|
|
|
<div class="page-body">
|
|
|
|
|
|
|
|
<div class="zsbTableBox">
|
|
|
|
|
|
|
|
<el-table
|
|
|
|
|
|
|
|
:data="recordData"
|
|
|
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
|
|
|
height="calc(100% - 0px)"
|
|
|
|
|
|
|
|
v-loading="recordLoading"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-table-column label="采集时间" prop="dtime">
|
|
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
<span>{{ scope.row.dtime }}</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column label="文件名" prop="filename">
|
|
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
<el-button
|
|
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
|
|
@click="downFile(scope.row)"
|
|
|
|
|
|
|
|
class="buttonText"
|
|
|
|
|
|
|
|
>{{ scope.row.filename }}</el-button
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- <span>{{ scope.row.filename }}</span> -->
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-table-column label="创建时间" prop="createTime">
|
|
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
<span>{{ scope.row.createTime }}</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-table-column label="操作" width="200" class-name="editClass">
|
|
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
|
|
<el-link
|
|
|
|
|
|
|
|
type="primary"
|
|
|
|
|
|
|
|
@click="handleLookClick(scope.row)"
|
|
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
|
|
icon="el-icon-document"
|
|
|
|
|
|
|
|
>查看图谱</el-link
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<div class="pageNation">
|
|
|
|
|
|
|
|
<el-pagination
|
|
|
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
|
|
|
:current-page="page"
|
|
|
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
|
|
|
:page-sizes="[20, 40, 100]"
|
|
|
|
|
|
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
|
|
|
|
|
|
:total="total"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
|
|
|
title="图谱"
|
|
|
|
|
|
|
|
:visible.sync="tpdialogVisible"
|
|
|
|
|
|
|
|
width="860px"
|
|
|
|
|
|
|
|
class="tpboxChartsData"
|
|
|
|
|
|
|
|
append-to-body="true"
|
|
|
|
|
|
|
|
@close="closeCharts"
|
|
|
|
|
|
|
|
v-if="tpdialogVisible"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span v-if="tpRow.config">{{ tpRow.config.sensor.name }}</span>
|
|
|
|
|
|
|
|
<span v-else>{{ tpRow.configId }}</span>
|
|
|
|
|
|
|
|
<div id="tpEchartBox"></div>
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
|
|
|
<el-button @click="closeCharts">关闭</el-button>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { ieddlDownloadAllApi, ieddlServerApi } from "@/utils/api/index";
|
|
|
|
|
|
|
|
// import addzsbDialog from "./components/addzsbDialog";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
name: "record",
|
|
|
|
|
|
|
|
components: {},
|
|
|
|
|
|
|
|
props: ["currentNodeData"],
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
recordData: [],
|
|
|
|
|
|
|
|
recordLoading: false,
|
|
|
|
|
|
|
|
page: 1, // 当前页数
|
|
|
|
|
|
|
|
pageSize: 20, // 每页数量
|
|
|
|
|
|
|
|
total: 0, //总条数
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tpdialogVisible: false,
|
|
|
|
|
|
|
|
tpRow: "", //选中的图片当前行数据
|
|
|
|
|
|
|
|
tpModleData: "", //当前行的图谱数据
|
|
|
|
|
|
|
|
myChart: "",
|
|
|
|
|
|
|
|
xData4: [], //横坐标
|
|
|
|
|
|
|
|
lineData4: [], //纵坐标
|
|
|
|
|
|
|
|
yMax4: "", //y轴最大值
|
|
|
|
|
|
|
|
channelCrests4: [], //气体数组
|
|
|
|
|
|
|
|
dataPointer4: [], //气体点
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
created() {},
|
|
|
|
|
|
|
|
mounted() {},
|
|
|
|
|
|
|
|
watch: {},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
getdownAll(row, formRow) {
|
|
|
|
|
|
|
|
console.log("我是选中的节点", row);
|
|
|
|
|
|
|
|
console.log("我是选中的节点", formRow);
|
|
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
|
|
startTime: formRow.starttime,
|
|
|
|
|
|
|
|
endTime: formRow.endtime,
|
|
|
|
|
|
|
|
devId: row,
|
|
|
|
|
|
|
|
pageNum: this.page,
|
|
|
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
ieddlDownloadAllApi(params)
|
|
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
|
|
console.log(res);
|
|
|
|
|
|
|
|
this.recordData = res.data.content;
|
|
|
|
|
|
|
|
this.total = res.data.totalElements;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleLookClick(row) {
|
|
|
|
|
|
|
|
console.log(row);
|
|
|
|
|
|
|
|
// 判断是否存在 model 字段
|
|
|
|
|
|
|
|
if (row.model) {
|
|
|
|
|
|
|
|
// 如果有 model 字段，弹窗
|
|
|
|
|
|
|
|
// 这里可以进一步处理 model 数据，例如显示图谱
|
|
|
|
|
|
|
|
this.tpdialogVisible = true;
|
|
|
|
|
|
|
|
this.tpRow = row;
|
|
|
|
|
|
|
|
this.tpModleData = row.model;
|
|
|
|
|
|
|
|
this.lineData4 = this.tpModleData.channels[0].data; //纵坐标数据
|
|
|
|
|
|
|
|
this.yMax4 = this.tpModleData.yMax; //y轴最大值
|
|
|
|
|
|
|
|
this.channelCrests4 = this.tpModleData.channels[0].crests;
|
|
|
|
|
|
|
|
var timeSpan = 1; //时间间隔
|
|
|
|
|
|
|
|
for (var i = 0; i < this.tpModleData.k * timeSpan; i = i + timeSpan) {
|
|
|
|
|
|
|
|
this.xData4.push(i);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(this.lineData4);
|
|
|
|
|
|
|
|
for (var i = 0; i < this.channelCrests4.length; i++) {
|
|
|
|
|
|
|
|
this.dataPointer4.push({
|
|
|
|
|
|
|
|
name: this.channelCrests4[i].name,
|
|
|
|
|
|
|
|
label: this.channelCrests4[i].j + "",
|
|
|
|
|
|
|
|
xAxis: this.channelCrests4[i].time,
|
|
|
|
|
|
|
|
yAxis: this.lineData4[this.channelCrests4[i].time],
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(this.dataPointer4);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//横坐标数据
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
this.getEchart4();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 如果没有 model 字段，提示图谱数据不存在
|
|
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
|
|
message: "暂无图谱数据",
|
|
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getEchart4() {
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
|
|
that.myChart = this.$echarts.init(
|
|
|
|
|
|
|
|
document.getElementById("tpEchartBox")
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
|
|
// title: {
|
|
|
|
|
|
|
|
// text: "图谱4",
|
|
|
|
|
|
|
|
// left: "left",
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
animation: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
dataZoom: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: "inside",
|
|
|
|
|
|
|
|
start: 0,
|
|
|
|
|
|
|
|
end: 100,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
start: 0,
|
|
|
|
|
|
|
|
end: 100,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
data: this.xData4, // 把时间组成的数组接过来，放在x轴上
|
|
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
//interval: 0, // 显示所有刻度标签
|
|
|
|
|
|
|
|
showMaxLabel: true, // 确保显示最后一个刻度标签
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// showMaxLabel: true,
|
|
|
|
|
|
|
|
name: "单位:s", // 这个设置只在末尾添加单位
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
|
|
scale: true,
|
|
|
|
|
|
|
|
show: true, // 前提： y轴肯定是要显示的
|
|
|
|
|
|
|
|
name: "单位:mV", // 你的单位写在这就可以
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
// 单位样式
|
|
|
|
|
|
|
|
color: "#000", // 字体颜色
|
|
|
|
|
|
|
|
fontSize: 10, // 字体大小
|
|
|
|
|
|
|
|
padding: [0, 28, 4, 0], // 内填充
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
data: this.lineData4,
|
|
|
|
|
|
|
|
type: "line",
|
|
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
|
|
symbol: "none",
|
|
|
|
|
|
|
|
sampling: "lttb",
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
color: "rgb(255, 70, 131)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
markPoint: {
|
|
|
|
|
|
|
|
data: this.dataPointer4,
|
|
|
|
|
|
|
|
symbol: "pin",
|
|
|
|
|
|
|
|
symbolSize: 18,
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
|
|
distance: 0,
|
|
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
|
|
console.log(params);
|
|
|
|
|
|
|
|
return params.data.label + ":" + params.name;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
that.myChart.setOption(option);
|
|
|
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
|
|
|
that.myChart.resize();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
closeCharts() {
|
|
|
|
|
|
|
|
this.tpdialogVisible = false;
|
|
|
|
|
|
|
|
this.xData4 = []; //横坐标
|
|
|
|
|
|
|
|
this.lineData4 = []; //纵坐标
|
|
|
|
|
|
|
|
this.yMax4 = ""; //y轴最大值
|
|
|
|
|
|
|
|
this.channelCrests4 = []; //气体数组
|
|
|
|
|
|
|
|
this.dataPointer4 = []; //气体点
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//下载文件
|
|
|
|
|
|
|
|
downFile(row) {
|
|
|
|
|
|
|
|
// 创建一个新的a标签元素
|
|
|
|
|
|
|
|
const a = document.createElement("a");
|
|
|
|
|
|
|
|
// 设置a标签的href属性为文件的URL
|
|
|
|
|
|
|
|
a.href = row.path;
|
|
|
|
|
|
|
|
console.log(a.href);
|
|
|
|
|
|
|
|
// 设置文件名（可选，取决于服务器配置）
|
|
|
|
|
|
|
|
a.download = row.filename; // 你希望保存的文件名
|
|
|
|
|
|
|
|
// 触发点击事件
|
|
|
|
|
|
|
|
document.body.appendChild(a);
|
|
|
|
|
|
|
|
a.click();
|
|
|
|
|
|
|
|
// 然后移除a标签
|
|
|
|
|
|
|
|
document.body.removeChild(a);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//点击分页
|
|
|
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
|
|
|
this.page = val;
|
|
|
|
|
|
|
|
this.recordData = [];
|
|
|
|
|
|
|
|
this.getdownAll();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//每页条数
|
|
|
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
|
|
|
this.pageSize = val;
|
|
|
|
|
|
|
|
this.recordData = [];
|
|
|
|
|
|
|
|
this.getdownAll();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
|
|
|
|
.ptrecordBoxdown {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
|
|
|
.page-body {
|
|
|
|
|
|
|
|
width: calc(100% - 24px);
|
|
|
|
|
|
|
|
height: calc(calc(100% - 24px));
|
|
|
|
|
|
|
|
padding: 12px;
|
|
|
|
|
|
|
|
background: #eee;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
|
|
color: #000;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.zsbTableBox {
|
|
|
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
|
|
|
box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
|
.pageNation {
|
|
|
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.buttonText {
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.tpboxChartsData {
|
|
|
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
|
|
#tpEchartBox {
|
|
|
|
|
|
|
|
height: 380px;
|
|
|
|
|
|
|
|
width: 820px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
fanluyan
3 months ago