|
|
@@ -1,733 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="global-variable">
|
|
|
- <div class="head">
|
|
|
- <div class="headleft">
|
|
|
- <div @click="generate('1')" class="picture">
|
|
|
- <img src="@/assets/analyse/03.png" alt="" />
|
|
|
- <p>时域图</p>
|
|
|
- </div>
|
|
|
- <div @click="generate('2')" class="picture">
|
|
|
- <img src="@/assets/analyse/04.png" alt="" />
|
|
|
- <p>频谱图</p>
|
|
|
- </div>
|
|
|
- <div @click="generate('3')" class="picture">
|
|
|
- <img src="@/assets/analyse/01.png" alt="" />
|
|
|
- <p>包络谱图</p>
|
|
|
- </div>
|
|
|
- <div @click="tendency" class="picture">
|
|
|
- <img src="@/assets/analyse/02.png" alt="" />
|
|
|
- <p>趋势图</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="headright">
|
|
|
- <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">
|
|
|
- <p>
|
|
|
- 单位：
|
|
|
- <selecttree
|
|
|
- style="width: 220px"
|
|
|
- placeholder="请选择上级单位"
|
|
|
- :list="parentOpt"
|
|
|
- type="1"
|
|
|
- v-model="companyCode"
|
|
|
- @change="parentChange"
|
|
|
- :defaultParentProps="{
|
|
|
- children: 'children',
|
|
|
- label: 'companyName',
|
|
|
- value: 'codeNumber',
|
|
|
- }"
|
|
|
- >
|
|
|
- </selecttree>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 风机：
|
|
|
- <el-select
|
|
|
- v-model="unitvalue"
|
|
|
- @change="getchedian"
|
|
|
- size="small"
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in unitoptions"
|
|
|
- :key="item.engineCode"
|
|
|
- :label="item.engineName"
|
|
|
- :value="item.engineCode"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 测点：
|
|
|
- <el-select
|
|
|
- v-model="monitoringvalue"
|
|
|
- size="small"
|
|
|
- clearable
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in monitoringoptions"
|
|
|
- :key="item.detectionPointEn"
|
|
|
- :label="item.detectionPointCn"
|
|
|
- :value="item.detectionPointEn"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 时间：
|
|
|
- <el-date-picker
|
|
|
- size="small"
|
|
|
- v-model="timevalue"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </p>
|
|
|
- <el-button type="primary" size="small" @click="conditions"
|
|
|
- >查询</el-button
|
|
|
- >
|
|
|
- <el-button size="small">导出</el-button>
|
|
|
- </div>
|
|
|
- <div class="main-body">
|
|
|
- <div class="data-map">
|
|
|
- <div
|
|
|
- class="chart-area"
|
|
|
- v-for="(item, index) in fourList"
|
|
|
- :key="item.index"
|
|
|
- >
|
|
|
- <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>采样时间:{{ samplingTime }}</span></P
|
|
|
- >
|
|
|
- <div v-if="item.name === '时域图'">
|
|
|
- <timedomaincharts
|
|
|
- :timeList="timeList"
|
|
|
- :currentIndex="currentIndex"
|
|
|
- :tableDataList="tableDataList"
|
|
|
- @update:currentIndex="handleCurrentIndexUpdate"
|
|
|
- @update-previous-row="goToPreviousRow"
|
|
|
- @update-next-row="goToNextRow"
|
|
|
- ></timedomaincharts>
|
|
|
- </div>
|
|
|
- <div v-if="item.name === '频谱图'">
|
|
|
- <spectrogramcharts
|
|
|
- :spectrumList="spectrumList"
|
|
|
- :currentIndex="currentIndex"
|
|
|
- :tableDataList="tableDataList"
|
|
|
- @update:currentIndex="handleCurrentIndexUpdate"
|
|
|
- @update-previous-row="goToPreviousRow"
|
|
|
- @update-next-row="goToNextRow"
|
|
|
- ></spectrogramcharts>
|
|
|
- </div>
|
|
|
- <div v-if="item.name === '包络谱图'">
|
|
|
- <envelopecharts
|
|
|
- :envelopeListTwo="envelopeListTwo"
|
|
|
- :currentIndex="currentIndex"
|
|
|
- :tableDataList="tableDataList"
|
|
|
- @update:currentIndex="handleCurrentIndexUpdate"
|
|
|
- @update-previous-row="goToPreviousRow"
|
|
|
- @update-next-row="goToNextRow"
|
|
|
- @update:modelValue="handleModelUpdate"
|
|
|
- ></envelopecharts>
|
|
|
- </div>
|
|
|
- <div v-if="item.name === '趋势图'">
|
|
|
- <tendencycharts :qsList="qsList"></tendencycharts>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="data-origin">
|
|
|
- <el-table
|
|
|
- ref="singleTable"
|
|
|
- :data="tableDataList"
|
|
|
- :current-row-key="currentIndex"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column type="index" label="排序"> </el-table-column>
|
|
|
- <el-table-column prop="timeStamp" label="时间"> </el-table-column>
|
|
|
- <el-table-column prop="mesurePointName" label="测点名称">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ getDetectionPointCn(scope.row.mesurePointName) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <!-- <el-table-column prop="companyName" label="场站">
|
|
|
- {{ getCompanyLabel(scope.row.companyCode) }}
|
|
|
- </el-table-column> -->
|
|
|
- <el-table-column prop="windTurbineNumber" label="风机" width="80px">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import {
|
|
|
- getSysOrganizationAuthTreeByRoleId,
|
|
|
- windEngineGrouPage,
|
|
|
- queryDetectionDic,
|
|
|
-} from "@/api/ledger.js";
|
|
|
-import selecttree from "../../components/selecttree.vue";
|
|
|
-
|
|
|
-import envelopecharts from "./components/envelopecharts.vue";
|
|
|
-import spectrogramcharts from "./components/spectrogramcharts.vue";
|
|
|
-import tendencycharts from "./components/tendencycharts.vue";
|
|
|
-import timedomaincharts from "./components/timedomaincharts.vue";
|
|
|
-import axios from "axios";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- envelopecharts,
|
|
|
- spectrogramcharts,
|
|
|
- tendencycharts,
|
|
|
- timedomaincharts,
|
|
|
- selecttree,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- unitvalue: "",
|
|
|
- unitoptions: [],
|
|
|
- monitoringvalue: "",
|
|
|
- monitoringoptions: [
|
|
|
- // {
|
|
|
- // detectionPointEn: "name",
|
|
|
- // detectionPointCn: "中文",
|
|
|
- // },
|
|
|
- ],
|
|
|
- fourList: [],
|
|
|
- currentRow: null, // 用于存储当前选中的行
|
|
|
- currentIndex: 0,
|
|
|
- isChartVisible: false,
|
|
|
- parentOpt: [],
|
|
|
- defaultdata: {},
|
|
|
- companyCode: "",
|
|
|
- maplist: {},
|
|
|
- timevalue: [], // 绑定 el-date-picker 的值
|
|
|
- startTime: "", // 开始时间
|
|
|
- endTime: "", // 结束时间
|
|
|
- tableDataList: [
|
|
|
- // { ids: 1, mesurePointName: "name" },
|
|
|
- // { ids: 2, mesurePointName: "22" },
|
|
|
- // { ids: 3, mesurePointName: "22" },
|
|
|
- ],
|
|
|
- samplingTime: "", // 采样时间
|
|
|
- timeList: {},
|
|
|
- spectrumList: {},
|
|
|
- envelopeList: {},
|
|
|
- qsList: {},
|
|
|
- envelopeListTwo: {},
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- this.GETtree();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 监听 timeList 的变化
|
|
|
- timeList(newTimeList) {
|
|
|
- if (newTimeList && newTimeList.length > 0) {
|
|
|
- // 当 timeList 不为空时，触发 ECharts 图表生成
|
|
|
- this.generateChart(1); // 或者根据具体逻辑来生成对应的图表
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- getDetectionPointCn(detectionPointEn) {
|
|
|
- const point = this.monitoringoptions?.find(
|
|
|
- (option) => option.detectionPointEn === detectionPointEn
|
|
|
- );
|
|
|
- return point ? point?.detectionPointCn : null; // 如果没有找到对应项，返回 null
|
|
|
- },
|
|
|
-
|
|
|
- // 获取风场
|
|
|
- async GETtree() {
|
|
|
- const res = await getSysOrganizationAuthTreeByRoleId();
|
|
|
- const treedata = res.data;
|
|
|
- const processedData = this.processTreeData(treedata);
|
|
|
- this.parentOpt = processedData;
|
|
|
- this.defaultdata = res.data[0];
|
|
|
- },
|
|
|
-
|
|
|
- parentChange(data) {
|
|
|
- this.maplist = data;
|
|
|
- this.maplistArr = data;
|
|
|
- let paramsData = {
|
|
|
- fieldCode: this.maplist.codeNumber,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 99,
|
|
|
- };
|
|
|
- this.unitvalue = "";
|
|
|
- // 获取风机
|
|
|
- windEngineGrouPage(paramsData).then((res) => {
|
|
|
- this.unitoptions = res.data.list;
|
|
|
- });
|
|
|
-
|
|
|
- console.log(data, "parentChange");
|
|
|
- if (data.codeType === "field") {
|
|
|
- if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- } else {
|
|
|
- const dataMapList = data.children;
|
|
|
- dataMapList.forEach((element) => {
|
|
|
- console.log(element);
|
|
|
- if (
|
|
|
- this.parseCoordinates(element.longitudeAndLatitudeString).length >
|
|
|
- 0 &&
|
|
|
- element.codeType === "field"
|
|
|
- ) {
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- processTreeData(treeData) {
|
|
|
- const processedData = [];
|
|
|
- function processNode(node) {
|
|
|
- if (node.codeType === "field") {
|
|
|
- node.companyName = node.fieldName;
|
|
|
- }
|
|
|
- if (node.children && node.children.length > 0) {
|
|
|
- node.children.forEach((child) => {
|
|
|
- processNode(child);
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- treeData.forEach((root) => {
|
|
|
- processNode(root);
|
|
|
- processedData.push(root);
|
|
|
- });
|
|
|
- return processedData;
|
|
|
- },
|
|
|
- parseCoordinates(input) {
|
|
|
- if (input && typeof input === "string") {
|
|
|
- return input.split(",").map(Number);
|
|
|
- }
|
|
|
- // debugger;
|
|
|
- return [];
|
|
|
- },
|
|
|
- // 获取测点
|
|
|
- getchedian(value) {
|
|
|
- queryDetectionDic({ engineCodes: value }).then((res) => {
|
|
|
- this.monitoringoptions = res.data;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- handleModelUpdate(data) {
|
|
|
- // 将子组件的值作为查询参数传递给查询接口
|
|
|
- data;
|
|
|
- this.xiaoval = data.xiaoval;
|
|
|
- this.daval = data.daval;
|
|
|
- },
|
|
|
-
|
|
|
- // 上一条数据
|
|
|
- goToPreviousRow(type) {
|
|
|
- if (this.tableDataList.length === 0) return;
|
|
|
- this.currentIndex =
|
|
|
- this.currentIndex === 0
|
|
|
- ? this.tableDataList.length - 1
|
|
|
- : this.currentIndex - 1;
|
|
|
-
|
|
|
- const currentRow = this.tableDataList[this.currentIndex];
|
|
|
- this.setCurrent(currentRow);
|
|
|
-
|
|
|
- const params = {
|
|
|
- ids: currentRow.id,
|
|
|
- windCode: "SKF001",
|
|
|
- };
|
|
|
-
|
|
|
- if (type === 1) {
|
|
|
- // For type 1, fetch time domain data
|
|
|
- params.analysisType = "time";
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/time", params)
|
|
|
- .then((res) => {
|
|
|
- this.timeList = JSON.parse(res.data);
|
|
|
- console.log("Time List Data:", this.timeList);
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Error fetching time domain data:", error);
|
|
|
- });
|
|
|
- } else if (type === 2) {
|
|
|
- // For type 2, fetch frequency domain data
|
|
|
- params.analysisType = "frequency";
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/frequency", params)
|
|
|
- .then((res) => {
|
|
|
- this.spectrumList = JSON.parse(res.data);
|
|
|
- console.log("Spectrum Data:", this.spectrumList);
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Error fetching frequency domain data:", error);
|
|
|
- });
|
|
|
- } else if (type === 3) {
|
|
|
- // For type 3, fetch envelope analysis data
|
|
|
- params.analysisType = "envelope";
|
|
|
- params.fmin = this.xiaoval; // 最小频率参数
|
|
|
- params.fmax = this.daval; // 最大频率参数
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/envelope", params)
|
|
|
- .then((res) => {
|
|
|
- this.envelopeListTwo = JSON.parse(res.data);
|
|
|
- console.log("Envelope Analysis Data:", this.envelopeListTwo);
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Error fetching envelope analysis data:", error);
|
|
|
- });
|
|
|
- } else {
|
|
|
- console.warn("Unknown type provided:", type);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 下一条数据，向后循环
|
|
|
- goToNextRow(type) {
|
|
|
- if (this.tableDataList.length === 0) return;
|
|
|
- this.currentIndex =
|
|
|
- this.currentIndex === this.tableDataList.length - 1
|
|
|
- ? 0
|
|
|
- : this.currentIndex + 1;
|
|
|
- const currentRow = this.tableDataList[this.currentIndex];
|
|
|
- this.setCurrent(currentRow);
|
|
|
- const params = {
|
|
|
- ids: currentRow.id,
|
|
|
- windCode: "SKF001",
|
|
|
- };
|
|
|
-
|
|
|
- if (type === 1) {
|
|
|
- // For type 1, fetch time domain data
|
|
|
- params.analysisType = "time";
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/time", params)
|
|
|
- .then((res) => {
|
|
|
- this.timeList = JSON.parse(res.data);
|
|
|
- console.log("Time List Data:", this.timeList);
|
|
|
- })
|
|
|
- .catch((error) => {});
|
|
|
- } else if (type === 2) {
|
|
|
- // For type 2, fetch frequency domain data
|
|
|
- params.analysisType = "frequency";
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/frequency", params)
|
|
|
- .then((res) => {
|
|
|
- this.spectrumList = JSON.parse(res.data);
|
|
|
- console.log("Spectrum Data:", this.spectrumList);
|
|
|
- })
|
|
|
- .catch((error) => {});
|
|
|
- } else if (type === 3) {
|
|
|
- // Type 3: 获取包络分析数据
|
|
|
- params.analysisType = "envelope";
|
|
|
- params.fmin = this.xiaoval; // 最小频率参数
|
|
|
- params.fmax = this.daval; // 最大频率参数
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/envelope", params)
|
|
|
- .then((res) => {
|
|
|
- this.envelopeListTwo = JSON.parse(res.data);
|
|
|
- console.log("Envelope Analysis Data:", this.envelopeListTwo);
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Error fetching envelope analysis data:", error);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 更新父组件的 currentIndex
|
|
|
- handleCurrentIndexUpdate(newIndex) {
|
|
|
- this.currentIndex = newIndex;
|
|
|
- this.handleCurrentChange(newIndex);
|
|
|
- },
|
|
|
- // 当前所在行高亮提示
|
|
|
- setCurrent(row) {
|
|
|
- this.$refs.singleTable.setCurrentRow(row);
|
|
|
- },
|
|
|
- // 当前单选
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentRow = val;
|
|
|
- const index = this.tableDataList.indexOf(val);
|
|
|
- this.currentIndex = index; // 更新当前索引
|
|
|
- console.log(this.currentIndex);
|
|
|
- },
|
|
|
-
|
|
|
- generate(type) {
|
|
|
- if (!this.currentRow) {
|
|
|
- this.$message.warning("请先选择数据");
|
|
|
- return;
|
|
|
- }
|
|
|
- const nameMap = {
|
|
|
- 1: "时域图", // Time Domain Chart
|
|
|
- 2: "频谱图", // Spectrogram Chart
|
|
|
- 3: "包络谱图", // Envelope Spectrum Chart
|
|
|
- };
|
|
|
-
|
|
|
- const chartName = nameMap[type];
|
|
|
- if (chartName) {
|
|
|
- const newItem = {
|
|
|
- name: chartName,
|
|
|
- isMinimized: false,
|
|
|
- id: `chart-${Date.now()}`,
|
|
|
- };
|
|
|
- this.fourList.push(newItem);
|
|
|
- }
|
|
|
-
|
|
|
- // API call for specific types
|
|
|
- if (type === "1") {
|
|
|
- // Time Domain Chart
|
|
|
- const params = {
|
|
|
- ids: [this.currentRow.id],
|
|
|
- // ids: [ 67803],
|
|
|
- windCode: "SKF001",
|
|
|
- analysisType: "time",
|
|
|
- };
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/time", params)
|
|
|
- .then((res) => {
|
|
|
- this.timeList = JSON.parse(res.data);
|
|
|
- console.log("Time List Data:", this.timeList);
|
|
|
- })
|
|
|
- .catch((error) => {});
|
|
|
- } else if (type === "2") {
|
|
|
- // Spectrogram Chart
|
|
|
- const params = {
|
|
|
- ids: [this.currentRow.id],
|
|
|
-
|
|
|
- windCode: "SKF001",
|
|
|
- analysisType: "frequency",
|
|
|
- };
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/frequency", params)
|
|
|
- .then((res) => {
|
|
|
- this.spectrumList = JSON.parse(res.data);
|
|
|
- console.log("Spectrum Data:", this.spectrumList);
|
|
|
- })
|
|
|
- .catch((error) => {});
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- tendency() {
|
|
|
- if (this.tableDataList.length === 0) {
|
|
|
- this.$message.warning("数据为空，无法生成图表");
|
|
|
- return;
|
|
|
- }
|
|
|
- const newItem = {
|
|
|
- name: "趋势图",
|
|
|
- isMinimized: false,
|
|
|
- id: `chart-${Date.now()}`,
|
|
|
- };
|
|
|
- const params = {
|
|
|
- ids: this.tableDataList.map((item) => item.id),
|
|
|
- windCode: "SKF001",
|
|
|
- analysisType: "trend",
|
|
|
- };
|
|
|
-
|
|
|
- axios
|
|
|
- .post("/WJapi/analysis/trend", params)
|
|
|
- .then((res) => {
|
|
|
- this.qsList = JSON.parse(res.data);
|
|
|
- this.fourList.push(newItem);
|
|
|
- console.log(res, "-------------------");
|
|
|
- })
|
|
|
- .catch((error) => {});
|
|
|
- },
|
|
|
-
|
|
|
- conditions() {
|
|
|
- // const params = {
|
|
|
- // windCode: this.maplist.codeNumber,
|
|
|
- // windTurbineNumberList: this.unitvalue,
|
|
|
- // mesureNameList: this.monitoringvalue,
|
|
|
- // startTime: this.$formatDateTWO(this.timevalue[0]),
|
|
|
- // endTime: this.$formatDateTWO(this.timevalue[1]),
|
|
|
- // };
|
|
|
-
|
|
|
- const params = {
|
|
|
- endTime: "2024-07-02 00:00:00",
|
|
|
- mesureNameList: ["gearbox_input_end_radial_vibration"],
|
|
|
- startTime: "2024-07-01 00:00:00",
|
|
|
- windCode: "SKF001",
|
|
|
- windTurbineNumberList: ["F004"],
|
|
|
- };
|
|
|
- const areParamsValid = (params) => {
|
|
|
- return (
|
|
|
- params.endTime &&
|
|
|
- params.startTime &&
|
|
|
- params.mesureNameList?.length > 0 &&
|
|
|
- params.windCode &&
|
|
|
- params.windTurbineNumberList?.length > 0
|
|
|
- );
|
|
|
- };
|
|
|
-
|
|
|
- if (areParamsValid(params)) {
|
|
|
- axios
|
|
|
- .post("/WZLapi/waveData/getMesureData", params)
|
|
|
- .then((res) => {
|
|
|
- this.tableDataList = res.data.datas;
|
|
|
- console.log(this.tableDataList, "-----------------");
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.error("Error:", error);
|
|
|
- // Handle the error here
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: "请填写全部条件",
|
|
|
- type: "warning",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 缩小
|
|
|
- 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 = [];
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</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;
|
|
|
- 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: 300px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- padding: 0 10px;
|
|
|
- p {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.main-body {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- .data-map {
|
|
|
- width: 60%;
|
|
|
- // 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%;
|
|
|
-
|
|
|
- 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;
|
|
|
-}
|
|
|
-</style>
|
rui.jiang