123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- <template>
- <div>
- <!-- ECharts 图表容器 -->
- <div class="section">
- <el-input
- size="small"
- v-model="xiaoval"
- placeholder="请输入查询范围"
- @input="handleInput"
- ></el-input>
- <span>—</span>
- <el-input
- size="small"
- v-model="daval"
- placeholder="请输入查询范围"
- @input="handleInput"
- ></el-input>
- <el-button size="small" @click="chaxun">确定</el-button>
- <div v-if="TZshow" class="eigenvalue">
- <h5>特征值</h5>
- <p>有效值:{{ this.Xrms }}</p>
- <p>平均值:{{ this.envelopeList.mean_value }}</p>
- <p>最大值:{{ this.envelopeList.max_value }}</p>
- <p>最小值:{{ this.envelopeList.min_value }}</p>
- <p>峰值:{{ this.envelopeList.Xp }}</p>
- <p>峰峰值:{{ this.envelopeList.Xpp }}</p>
- <p>波形因子:{{ this.envelopeList.Sf }}</p>
- <p>脉冲指标:{{ this.envelopeList.If }}</p>
- <p>裕度指标:{{ this.envelopeList.Ce }}</p>
- <p>偏度指标:{{ this.envelopeList.Cw }}</p>
- <p>峭度指标:{{ this.envelopeList.Cq }}</p>
- </div>
- </div>
- <div class="line-chart" ref="chart"></div>
- </div>
- </template>
- <script>
- import * as echarts from "echarts"; // 导入 echarts 库
- import axios from "axios";
- export default {
- name: "TimedomainCharts", // 组件名称
- props: {
- // 可以通过 props 接收外部传入的数据
- currentIndex: {
- type: Number,
- default: 0,
- },
- ids: {
- type: Array,
- default: () => [],
- },
- activeIndex: {
- type: Number,
- default: 0,
- },
- envelopeListTwo: {
- type: Object,
- default: () => ({}),
- },
- currentRow: {
- type: Object,
- default: () => ({}),
- },
-
- windCode: {
- type: String,
- default: "",
- },
- },
- data() {
- return {
- chartInstance: null,
- option: null,
- xiaoval: "",
- daval: "",
- envelopeList: {},
- TZshow: false,
- };
- },
- watch: {
- // 监听 chartData 和 chartLabels 的变化,重新绘制图表
- chartData(newData) {
- this.updateChart(newData, this.chartLabels);
- },
- chartLabels(newLabels) {
- this.updateChart(this.chartData, newLabels);
- },
- envelopeListTwo: {
- handler(newValue) {
- this.updateChart(newValue.y, newValue.x); // 更新图表
- },
- deep: true, // 确保监听对象的深层次变
- },
- envelopeList: {
- handler(newValue) {
- this.updateChart(newValue.y, newValue.x); // 更新图表
- },
- deep: true, // 确保监听对象的深层次变
- },
- },
- mounted() {
- this.initializeChart();
- },
- methods: {
- handleInput() {
- this.$emit("update:modelValue", {
- xiaoval: this.xiaoval,
- daval: this.daval,
- });
- },
- chaxun() {
- this.$emit("handleLoading", null, true, this.activeIndex);
- const params = {
- ids: this.ids,
- // windCode: "SKF001",
- windCode: this.windCode,
- analysisType: "envelope",
- fmin: this.xiaoval,
- fmax: this.daval,
- };
- axios
- .post("/WJapi/analysis/envelope", params)
- .then((res) => {
- this.envelopeList = JSON.parse(res.data);
- const defaultData =
- this.envelopeList.y || this.envelopeListTwo.y || [];
- const defaultLabels =
- this.envelopeList.x || this.envelopeListTwo.x || [];
- this.updateChart(defaultData, defaultLabels);
- })
- .catch((error) => {})
- .finally(() => {
- this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
- });
- },
- initializeChart() {
- // 获取图表容器
- const chartDom = this.$refs.chart;
- // 初始化图表实例
- this.chartInstance = echarts.init(chartDom);
- // 初始化时使用空数据
- const defaultData = [];
- const defaultLabels = [];
- this.updateChart(defaultData, defaultLabels);
- },
- // 更新图表数据
- updateChart(data, labels) {
- // 获取 x 数组中的最大值
- const maxX = Math.max(...labels);
- // 计算最大值的下一个 5 的倍数
- const maxAxisValue = Math.ceil(maxX / 5) * 5;
- // 生成从 0 到 maxAxisValue 的刻度数组,间隔为 5
- const ticks = [];
- for (let i = 0; i <= maxAxisValue; i += 5) {
- ticks.push(i);
- }
- const option = {
- title: {
- text: this.envelopeList.title || this.envelopeListTwo.title,
- left: "center",
- },
- toolbox: {
- feature: {
- dataZoom: { yAxisIndex: "none" },
- restore: {},
- saveAsImage: {},
- myCustomTool: {
- show: true,
- title: "上一条",
- icon: `image://${require("@/assets/analyse/08.png")}`,
- onclick: () => this.previousRow(),
- },
- myCustomTool2: {
- show: true,
- title: "下一条",
- icon: `image://${require("@/assets/analyse/09.png")}`,
- onclick: () => this.nextRow(),
- },
- myCustomTool3: {
- show: true,
- title: "特征值",
- icon: `image://${require("@/assets/analyse/10.png")}`,
- onclick: () => this.Show(),
- },
- },
- },
- xAxis: {
- type: "value", // 使用数值型 x 轴,确保每个 x 值都有展示
- name: this.envelopeList.xaxis || this.envelopeListTwo.xaxis, // 设置 X 轴标题
- nameLocation: "center", // 标题位置:可选 "start" | "center" | "end"
- nameTextStyle: {
- fontSize: 14,
- color: "#333", // 标题颜色
- padding: [10, 0, 0, 0], // 上、右、下、左的间距
- },
- // min: 0, // X 轴最小值
- // max: maxAxisValue, // X 轴最大值为计算的最大值
- // interval: 5, // X 轴每 5 个单位显示一个刻度
- axisLabel: {
- formatter: (value) => {
- // 格式化显示刻度为 5 的倍数
- return value;
- },
- },
- axisTick: {
- show: true, // 显示刻度线
- },
- axisLine: {
- show: true, // 显示轴线
- },
- data: ticks, // 设置刻度
- },
- yAxis: {
- type: "value",
- name: this.envelopeList.yaxis || this.envelopeListTwo.yaxis,
- },
- tooltip: {
- trigger: "axis",
- formatter: (params) => {
- // 获取原始的 x 数值和对应的 y 值
- const xValue = params[0].value[0]; // 获取原始的 x 数值
- const yValue = params[0].value[1]; // 获取对应的 y 数值
- return `X: ${xValue}<br/>Y: ${yValue}`; // 显示原始的 x 和 y 值
- },
- axisPointer: {
- type: "line", // 显示十字线
- },
- },
- series: [
- {
- name: "数据系列",
- type: "line", // 折线图
- data: labels.map((item, index) => [item, data[index]]), // 修改为 [x, y] 数组
- // smooth: true,
- symbol: "none", // 数据点的样式
- symbolSize: 8, // 数据点的大小
- lineStyle: {
- color: "#162961",
- width: 1, // 线条宽度
- },
- itemStyle: {
- color: "#162961",
- borderColor: "#fff",
- borderWidth: 1,
- },
- },
- ],
- };
- // 使用更新的配置更新图表
- this.chartInstance.setOption(option);
- },
- previousRow() {
- this.$emit("update-previous-row", 3, this.activeIndex);
- },
- // 触发下一条
- nextRow() {
- this.$emit("update-next-row", 3, this.activeIndex);
- },
- Show() {
- this.TZshow = !this.TZshow;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .line-chart {
- width: 100%;
- height: 260px;
- }
- .eigenvalue {
- position: absolute;
- top: 60px;
- right: 0;
- font-size: 10px;
- width: 100px;
- border: 1px solid black;
- padding: 5px;
- background: #fff;
- z-index: 99;
- h5 {
- line-height: 16px;
- height: 16px;
- }
- }
- .section {
- position: relative;
- display: flex;
- // line-height: 32px;
- .el-input {
- width: 150px;
- }
- .el-button {
- margin-left: 10px;
- }
- }
- </style>
|