|
@@ -2,27 +2,27 @@
|
|
|
<div class="global-variable">
|
|
|
<div class="head">
|
|
|
<div class="headleft">
|
|
|
- <div class="picture">
|
|
|
+ <div @click="generate('1')" class="picture">
|
|
|
<img src="@/assets/analyse/03.png" alt="" />
|
|
|
<p>时域图</p>
|
|
|
</div>
|
|
|
- <div class="picture">
|
|
|
+ <div @click="generate('2')" class="picture">
|
|
|
<img src="@/assets/analyse/04.png" alt="" />
|
|
|
<p>频谱图</p>
|
|
|
</div>
|
|
|
- <div class="picture">
|
|
|
+ <div @click="generate('3')" class="picture">
|
|
|
<img src="@/assets/analyse/01.png" alt="" />
|
|
|
<p>包络谱图</p>
|
|
|
</div>
|
|
|
- <div class="picture">
|
|
|
+ <div @click="generate('4')" class="picture">
|
|
|
<img src="@/assets/analyse/02.png" alt="" />
|
|
|
<p>趋势图</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="headright">
|
|
|
- <img src="@/assets/analyse/05.png" alt="" />
|
|
|
- <img src="@/assets/analyse/07.png" alt="" />
|
|
|
- <img src="@/assets/analyse/06.png" alt="" />
|
|
|
+ <img src="@/assets/analyse/05.png" alt="全部展开" @click="zhankai" />
|
|
|
+ <img src="@/assets/analyse/07.png" alt="全部缩小" @click="suoxiao" />
|
|
|
+ <img src="@/assets/analyse/06.png" alt="全部关闭" @click="guanbi" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="searchbox">
|
|
@@ -79,7 +79,47 @@
|
|
|
</div>
|
|
|
<div class="main-body">
|
|
|
<div class="data-map">
|
|
|
-
|
|
|
+ <div
|
|
|
+ class="chart-area"
|
|
|
+ v-for="(item, index) in fourList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="dialog-actions">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <span>
|
|
|
+ <i
|
|
|
+ class="el-icon-minus"
|
|
|
+ @click="lessen(index)"
|
|
|
+ style="cursor: pointer; margin-right: 10px"
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ class="el-icon-full-screen"
|
|
|
+ @click="amplifier(index)"
|
|
|
+ style="cursor: pointer; margin-right: 10px"
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ class="el-icon-close"
|
|
|
+ @click="close(index)"
|
|
|
+ style="cursor: pointer"
|
|
|
+ ></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="subject"
|
|
|
+ :class="{
|
|
|
+ minimized: item.isMinimized,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <p>测点路径:</p>
|
|
|
+ <P><span>采样频率:</span><span>采样时间:</span></P>
|
|
|
+ <div
|
|
|
+ :id="item.id"
|
|
|
+ class="line-chart"
|
|
|
+ style="width: 100%; height: 260px"
|
|
|
+ ></div>
|
|
|
+ <!-- <charts></charts> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="data-origin">
|
|
|
<el-table
|
|
@@ -101,7 +141,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import Charts from "./components/charts.vue";
|
|
|
export default {
|
|
|
+ // components: { Charts },
|
|
|
data() {
|
|
|
return {
|
|
|
company: "",
|
|
@@ -111,15 +154,245 @@ export default {
|
|
|
monitoringvalue: "",
|
|
|
monitoringoptions: [],
|
|
|
timevalue: "",
|
|
|
- tableData: [{}, {}, {}, {}],
|
|
|
+ tableData: [
|
|
|
+ { name: "2024-11-01", address: "Location A" },
|
|
|
+ { name: "2024-11-02", address: "Location B" },
|
|
|
+ { name: "2024-11-03", address: "Location C" },
|
|
|
+ ],
|
|
|
+
|
|
|
+ fourList: [],
|
|
|
+
|
|
|
+ currentRow: null, // 用于存储当前选中的行
|
|
|
+ currentIndex: 0,
|
|
|
};
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
+ // 当前所在行高亮提示
|
|
|
setCurrent(row) {
|
|
|
this.$refs.singleTable.setCurrentRow(row);
|
|
|
},
|
|
|
+ // 当前单选
|
|
|
handleCurrentChange(val) {
|
|
|
this.currentRow = val;
|
|
|
+ const index = this.tableData.indexOf(val);
|
|
|
+ this.currentIndex = index; // 更新当前索引
|
|
|
+ },
|
|
|
+
|
|
|
+ renderChart(containerId, data = []) {
|
|
|
+ // 获取特定的图表容器
|
|
|
+ const chartDom = document.getElementById(containerId);
|
|
|
+ if (!chartDom) {
|
|
|
+ console.error(`Container with id ${containerId} not found`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否已经存在 ECharts 实例,如果存在则销毁它
|
|
|
+ if (chartDom.__echarts_instance__) {
|
|
|
+ echarts.dispose(chartDom);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化 ECharts 实例
|
|
|
+ const myChart = echarts.init(chartDom);
|
|
|
+
|
|
|
+ // 定义默认的数据
|
|
|
+ let base = +new Date(1968, 9, 3);
|
|
|
+ let oneDay = 24 * 3600 * 1000;
|
|
|
+ let date = [];
|
|
|
+ let defaultData = [Math.random() * 300];
|
|
|
+ for (let i = 1; i < 200; i++) {
|
|
|
+ const now = new Date((base += oneDay));
|
|
|
+ date.push(
|
|
|
+ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
|
|
|
+ );
|
|
|
+ defaultData.push(
|
|
|
+ Math.round((Math.random() - 0.5) * 20 + defaultData[i - 1])
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用传入的数据或默认数据
|
|
|
+ const chartData = data.length > 0 ? data : defaultData;
|
|
|
+
|
|
|
+ // 配置选项
|
|
|
+ const option = {
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ dataZoom: { yAxisIndex: "none" },
|
|
|
+ restore: {},
|
|
|
+ saveAsImage: {},
|
|
|
+ myCustomTool: {
|
|
|
+ show: true,
|
|
|
+ title: "上一条",
|
|
|
+ icon: `image://${require("@/assets/analyse/08.png")}`,
|
|
|
+ onclick: () => this.previousRow(containerId), // 传递当前图表的 ID
|
|
|
+ },
|
|
|
+ myCustomTool2: {
|
|
|
+ show: true,
|
|
|
+ title: "下一条",
|
|
|
+ icon: `image://${require("@/assets/analyse/09.png")}`,
|
|
|
+ onclick: () => this.nextRow(containerId), // 传递当前图表的 ID
|
|
|
+ },
|
|
|
+ myCustomTool3: {
|
|
|
+ show: true,
|
|
|
+ title: "特征值",
|
|
|
+ icon: `image://${require("@/assets/analyse/10.png")}`,
|
|
|
+ onclick: () => alert("自定义按钮被点击!"),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: date,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, "100%"],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "数据系列",
|
|
|
+ type: "line",
|
|
|
+ symbol: "none",
|
|
|
+ sampling: "lttb",
|
|
|
+ itemStyle: { color: "rgb(255, 70, 131)" },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: "rgb(255, 158, 68)" },
|
|
|
+ { offset: 1, color: "rgb(255, 70, 131)" },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ data: chartData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置图表选项
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ // 监听窗口大小变化,调整图表大小
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上一条
|
|
|
+ previousRow(chartId) {
|
|
|
+ if (this.currentIndex > 0) {
|
|
|
+ this.currentIndex--;
|
|
|
+ } else {
|
|
|
+ this.currentIndex = this.tableData.length - 1;
|
|
|
+ }
|
|
|
+ this.selectRow(chartId);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下一条
|
|
|
+ nextRow(chartId) {
|
|
|
+ if (this.currentIndex < this.tableData.length - 1) {
|
|
|
+ this.currentIndex++;
|
|
|
+ } else {
|
|
|
+ this.currentIndex = 0;
|
|
|
+ }
|
|
|
+ this.selectRow(chartId);
|
|
|
+ },
|
|
|
+ selectRow(chartId) {
|
|
|
+ const row = this.tableData[this.currentIndex];
|
|
|
+ this.handleCurrentChange(row);
|
|
|
+ this.setCurrent(row);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.renderChart(chartId);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ generate(type) {
|
|
|
+ if (!this.currentRow) {
|
|
|
+ this.$message.warning("请先选择数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const nameMap = {
|
|
|
+ 1: "时域图",
|
|
|
+ 2: "频谱图",
|
|
|
+ 3: "包络谱图",
|
|
|
+ 4: "趋势图",
|
|
|
+ };
|
|
|
+ if (nameMap[type]) {
|
|
|
+ const newItem = {
|
|
|
+ name: nameMap[type],
|
|
|
+ isMinimized: false,
|
|
|
+ id: `chart-${Date.now()}`, // 使用唯一 ID
|
|
|
+ };
|
|
|
+ this.fourList.push(newItem);
|
|
|
+ if (this.fourList.length > 4) {
|
|
|
+ this.fourList.shift();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const newChart = this.fourList[this.fourList.length - 1];
|
|
|
+ this.renderChart(newChart.id); // 为新图表渲染数据
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ generate(type) {
|
|
|
+ if (!this.currentRow) {
|
|
|
+ this.$message.warning("请先选择数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const nameMap = {
|
|
|
+ 1: "时域图",
|
|
|
+ 2: "频谱图",
|
|
|
+ 3: "包络谱图",
|
|
|
+ 4: "趋势图",
|
|
|
+ };
|
|
|
+ if (nameMap[type]) {
|
|
|
+ const newItem = {
|
|
|
+ name: nameMap[type],
|
|
|
+ isMinimized: false,
|
|
|
+ id: `chart-${Date.now()}`, // 使用唯一 ID
|
|
|
+ };
|
|
|
+ this.fourList.push(newItem);
|
|
|
+ if (this.fourList.length > 4) {
|
|
|
+ this.fourList.shift();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const newChart = this.fourList[this.fourList.length - 1];
|
|
|
+ this.renderChart(newChart.id); // 为新图表渲染数据
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 缩小
|
|
|
+ lessen(index) {
|
|
|
+ if (!this.fourList[index].isMinimized) {
|
|
|
+ this.fourList[index].isMinimized = true;
|
|
|
+ }
|
|
|
+ console.log("1");
|
|
|
+ },
|
|
|
+ // 放大
|
|
|
+ amplifier(index) {
|
|
|
+ const item = this.fourList[index];
|
|
|
+ if (item.isMinimized) {
|
|
|
+ item.isMinimized = false;
|
|
|
+ }
|
|
|
+ console.log("2");
|
|
|
+ },
|
|
|
+ // 关闭
|
|
|
+ close(index) {
|
|
|
+ this.fourList.splice(index, 1);
|
|
|
+ console.log("3");
|
|
|
+ },
|
|
|
+
|
|
|
+ zhankai() {
|
|
|
+ this.fourList.forEach((item) => {
|
|
|
+ item.isMinimized = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ suoxiao() {
|
|
|
+ this.fourList.forEach((item) => {
|
|
|
+ item.isMinimized = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ guanbi() {
|
|
|
+ this.fourList = [];
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -135,12 +408,14 @@ export default {
|
|
|
.headleft {
|
|
|
display: flex;
|
|
|
.picture {
|
|
|
+ cursor: pointer;
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
margin: 0 20px;
|
|
|
+ font-size: 12px;
|
|
|
img {
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -149,6 +424,7 @@ export default {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -162,18 +438,51 @@ export default {
|
|
|
width: 180px;
|
|
|
}
|
|
|
}
|
|
|
+.dialog-actions {
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.subject {
|
|
|
+ height: 280px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ padding: 0 10px;
|
|
|
+ p {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.main-body {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.data-map {
|
|
|
width: 60%;
|
|
|
- height: 200px;
|
|
|
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
+ height: 620px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .chart-area {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
+ }
|
|
|
}
|
|
|
+ .data-map::-webkit-scrollbar {
|
|
|
+ display: none; /* 隐藏滚动条 */
|
|
|
+ }
|
|
|
+
|
|
|
.data-origin {
|
|
|
width: 39%;
|
|
|
- height: 200px;
|
|
|
+
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.subject.minimized {
|
|
|
+ height: 0px; /* Adjust height when minimized */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+#main {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+}
|
|
|
</style>
|