|
|
@@ -0,0 +1,344 @@
|
|
|
+<template>
|
|
|
+ <div class="global-variable">
|
|
|
+ <div class="searchbox">
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <el-collapse-item title="数据筛选" name="1">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="16" :sm="8" :md="7" :lg="5" :xl="4">
|
|
|
+ <el-form-item label="单位">
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ v-model="formInline.region"
|
|
|
+ placeholder="请选择区域"
|
|
|
+ >
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="16" :sm="8" :md="7" :lg="5" :xl="4">
|
|
|
+ <el-form-item label="场站">
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ v-model="formInline.region"
|
|
|
+ placeholder="请选择场站"
|
|
|
+ >
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="16" :sm="8" :md="7" :lg="5" :xl="4">
|
|
|
+ <el-form-item label="风机">
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ v-model="formInline.region"
|
|
|
+ placeholder="请选择风机"
|
|
|
+ >
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="14" :md="12" :lg="8" :xl="6">
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <el-date-picker
|
|
|
+ size="small"
|
|
|
+ v-model="timevalue"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="8" :sm="2" :md="4" :lg="1" :xl="2">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit" size="small"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <div class="main-body">
|
|
|
+ <div class="data-map">
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane>
|
|
|
+ <span slot="label">
|
|
|
+ <img
|
|
|
+ style="width: 30px; height: 20px; display: inline-block"
|
|
|
+ src="@/assets/analyse/04.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ 原始图
|
|
|
+ </span>
|
|
|
+ <div class="boxContent">
|
|
|
+ <div class="left">
|
|
|
+ <el-empty
|
|
|
+ :image-size="200"
|
|
|
+ v-if="currentRow === null"
|
|
|
+ ></el-empty>
|
|
|
+ <div v-else>原始图</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <DescrBox></DescrBox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="拟合图" class="picture">
|
|
|
+ <span slot="label">
|
|
|
+ <img
|
|
|
+ style="width: 25px; height: 20px; display: inline-block"
|
|
|
+ src="@/assets/analyse/01.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ 拟合图
|
|
|
+ </span>
|
|
|
+ <div class="boxContent">
|
|
|
+ <div class="left">
|
|
|
+ <el-empty
|
|
|
+ :image-size="200"
|
|
|
+ v-if="currentRow === null"
|
|
|
+ ></el-empty>
|
|
|
+ <div v-else>拟合图</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <DescrBox></DescrBox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="数据列表" class="picture">
|
|
|
+ <span slot="label">
|
|
|
+ <img
|
|
|
+ style="width: 20px; height: 20px; display: inline-block"
|
|
|
+ src="@/assets/analyse/dataList1.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ 数据列表
|
|
|
+ </span>
|
|
|
+ <div>
|
|
|
+ <MultilevelTable></MultilevelTable>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import DescrBox from "./components/descrBox.vue";
|
|
|
+import MultilevelTable from "./components/MultilevelTable.vue";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNames: ["1"],
|
|
|
+ formInline: {},
|
|
|
+ chartData: [],
|
|
|
+ chartLabels: [],
|
|
|
+ tableData: [],
|
|
|
+ data: [10, 20, 30, 40], // 假设是图表的数据
|
|
|
+ labels: ["2024/1/1", "2024/1/2", "2024/1/3", "2024/1/4"], // 假设是时间轴数据
|
|
|
+ currentIndex: 0,
|
|
|
+ tableData: [], // 假设是来自父组件的数据
|
|
|
+
|
|
|
+ company: "",
|
|
|
+ companyoptions: [],
|
|
|
+ unitvalue: "",
|
|
|
+ unitoptions: [],
|
|
|
+ monitoringvalue: "",
|
|
|
+ monitoringoptions: [],
|
|
|
+ timevalue: "",
|
|
|
+ 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,
|
|
|
+ isChartVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ DescrBox,
|
|
|
+ MultilevelTable,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentIndexUpdate(newIndex) {
|
|
|
+ this.currentIndex = newIndex;
|
|
|
+ },
|
|
|
+ setCurrent(row) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.singleTable) {
|
|
|
+ this.$refs.singleTable.setCurrentRow(row); // 设置当前行
|
|
|
+ } else {
|
|
|
+ console.warn("Cannot access $refs.singleTable: it's undefined.");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentRow = val; // 处理当前选中行
|
|
|
+ const index = this.tableData.indexOf(val); // 获取当前选中行的索引
|
|
|
+ this.currentIndex = index; // 更新当前索引
|
|
|
+ console.log("currentIndex updated to:", this.currentIndex);
|
|
|
+ },
|
|
|
+
|
|
|
+ generate(type) {
|
|
|
+ if (!this.currentRow) {
|
|
|
+ this.$message.warning("请先选择数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 缩小
|
|
|
+ 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 = [];
|
|
|
+ },
|
|
|
+ onSubmit() {},
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.head {
|
|
|
+ // border-top: 5px solid #088080;
|
|
|
+ // border-bottom: 5px solid #088080;
|
|
|
+ padding: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .headleft {
|
|
|
+ display: flex;
|
|
|
+ .picture {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .headright {
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.searchbox {
|
|
|
+ // display: flex;
|
|
|
+ margin: 20px 0 0 0;
|
|
|
+ p {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ width: 180px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-actions {
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 100%;
|
|
|
+ // 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);
|
|
|
+ }
|
|
|
+ .boxContent {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 39%;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-tabs--border-card {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tabs--border-card > .el-tabs__content {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-map::-webkit-scrollbar {
|
|
|
+ display: none; /* 隐藏滚动条 */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.subject.minimized {
|
|
|
+ height: 0px; /* Adjust height when minimized */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+#main {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+}
|
|
|
+
|
|
|
+// .line-chart {
|
|
|
+// position: relative;
|
|
|
+// }
|
|
|
+</style>
|
liujiejie
