envelopecharts.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <template>
  2. <div>
  3. <!-- ECharts 图表容器 -->
  4. <div class="section">
  5. <el-input
  6. size="small"
  7. v-model="xiaoval"
  8. placeholder="请输入查询范围"
  9. @input="handleInput"
  10. ></el-input>
  11. <span>—</span>
  12. <el-input
  13. size="small"
  14. v-model="daval"
  15. placeholder="请输入查询范围"
  16. @input="handleInput"
  17. ></el-input>
  18. <el-button size="small" @click="chaxun">确定</el-button>
  19. <div v-if="TZshow" class="eigenvalue">
  20. <h5>特征值</h5>
  21. <p>有效值:{{ this.Xrms }}</p>
  22. <p>平均值:{{ this.envelopeList.mean_value }}</p>
  23. <p>最大值:{{ this.envelopeList.max_value }}</p>
  24. <p>最小值:{{ this.envelopeList.min_value }}</p>
  25. <p>峰值:{{ this.envelopeList.Xp }}</p>
  26. <p>峰峰值:{{ this.envelopeList.Xpp }}</p>
  27. <p>波形因子:{{ this.envelopeList.Sf }}</p>
  28. <p>脉冲指标:{{ this.envelopeList.If }}</p>
  29. <p>裕度指标:{{ this.envelopeList.Ce }}</p>
  30. <p>偏度指标:{{ this.envelopeList.Cw }}</p>
  31. <p>峭度指标:{{ this.envelopeList.Cq }}</p>
  32. </div>
  33. </div>
  34. <div class="line-chart" ref="chart"></div>
  35. </div>
  36. </template>
  37. <script>
  38. import * as echarts from "echarts"; // 导入 echarts 库
  39. import axios from "axios";
  40. export default {
  41. name: "TimedomainCharts", // 组件名称
  42. props: {
  43. // 可以通过 props 接收外部传入的数据
  44. currentIndex: {
  45. type: Number,
  46. default: 0,
  47. },
  48. ids: {
  49. type: Array,
  50. default: () => [],
  51. },
  52. activeIndex: {
  53. type: Number,
  54. default: 0,
  55. },
  56. envelopeListTwo: {
  57. type: Object,
  58. default: () => ({}),
  59. },
  60. currentRow: {
  61. type: Object,
  62. default: () => ({}),
  63. },
  64. windCode: {
  65. type: String,
  66. default: "",
  67. },
  68. },
  69. data() {
  70. return {
  71. chartInstance: null,
  72. option: null,
  73. xiaoval: "",
  74. daval: "",
  75. envelopeList: {},
  76. TZshow: false,
  77. };
  78. },
  79. watch: {
  80. // 监听 chartData 和 chartLabels 的变化,重新绘制图表
  81. chartData(newData) {
  82. this.updateChart(newData, this.chartLabels);
  83. },
  84. chartLabels(newLabels) {
  85. this.updateChart(this.chartData, newLabels);
  86. },
  87. envelopeListTwo: {
  88. handler(newValue) {
  89. this.updateChart(newValue.y, newValue.x); // 更新图表
  90. },
  91. deep: true, // 确保监听对象的深层次变
  92. },
  93. envelopeList: {
  94. handler(newValue) {
  95. this.updateChart(newValue.y, newValue.x); // 更新图表
  96. },
  97. deep: true, // 确保监听对象的深层次变
  98. },
  99. },
  100. mounted() {
  101. this.initializeChart();
  102. },
  103. methods: {
  104. handleInput() {
  105. this.$emit("update:modelValue", {
  106. xiaoval: this.xiaoval,
  107. daval: this.daval,
  108. });
  109. },
  110. chaxun() {
  111. this.$emit("handleLoading", null, true, this.activeIndex);
  112. const params = {
  113. ids: this.ids,
  114. // windCode: "SKF001",
  115. windCode: this.windCode,
  116. analysisType: "envelope",
  117. fmin: this.xiaoval,
  118. fmax: this.daval,
  119. };
  120. axios
  121. .post("/WJapi/analysis/envelope", params)
  122. .then((res) => {
  123. this.envelopeList = JSON.parse(res.data);
  124. const defaultData =
  125. this.envelopeList.y || this.envelopeListTwo.y || [];
  126. const defaultLabels =
  127. this.envelopeList.x || this.envelopeListTwo.x || [];
  128. this.updateChart(defaultData, defaultLabels);
  129. })
  130. .catch((error) => {})
  131. .finally(() => {
  132. this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
  133. });
  134. },
  135. initializeChart() {
  136. // 获取图表容器
  137. const chartDom = this.$refs.chart;
  138. // 初始化图表实例
  139. this.chartInstance = echarts.init(chartDom);
  140. // 初始化时使用空数据
  141. const defaultData = [];
  142. const defaultLabels = [];
  143. this.updateChart(defaultData, defaultLabels);
  144. },
  145. // 更新图表数据
  146. updateChart(data, labels) {
  147. // 获取 x 数组中的最大值
  148. const maxX = Math.max(...labels);
  149. // 计算最大值的下一个 5 的倍数
  150. const maxAxisValue = Math.ceil(maxX / 5) * 5;
  151. // 生成从 0 到 maxAxisValue 的刻度数组,间隔为 5
  152. const ticks = [];
  153. for (let i = 0; i <= maxAxisValue; i += 5) {
  154. ticks.push(i);
  155. }
  156. const option = {
  157. title: {
  158. text: this.envelopeList.title || this.envelopeListTwo.title,
  159. left: "center",
  160. },
  161. toolbox: {
  162. feature: {
  163. dataZoom: { yAxisIndex: "none" },
  164. restore: {},
  165. saveAsImage: {},
  166. myCustomTool: {
  167. show: true,
  168. title: "上一条",
  169. icon: `image://${require("@/assets/analyse/08.png")}`,
  170. onclick: () => this.previousRow(),
  171. },
  172. myCustomTool2: {
  173. show: true,
  174. title: "下一条",
  175. icon: `image://${require("@/assets/analyse/09.png")}`,
  176. onclick: () => this.nextRow(),
  177. },
  178. myCustomTool3: {
  179. show: true,
  180. title: "特征值",
  181. icon: `image://${require("@/assets/analyse/10.png")}`,
  182. onclick: () => this.Show(),
  183. },
  184. },
  185. },
  186. xAxis: {
  187. type: "value", // 使用数值型 x 轴,确保每个 x 值都有展示
  188. name: this.envelopeList.xaxis || this.envelopeListTwo.xaxis, // 设置 X 轴标题
  189. nameLocation: "center", // 标题位置:可选 "start" | "center" | "end"
  190. nameTextStyle: {
  191. fontSize: 14,
  192. color: "#333", // 标题颜色
  193. padding: [10, 0, 0, 0], // 上、右、下、左的间距
  194. },
  195. // min: 0, // X 轴最小值
  196. // max: maxAxisValue, // X 轴最大值为计算的最大值
  197. // interval: 5, // X 轴每 5 个单位显示一个刻度
  198. axisLabel: {
  199. formatter: (value) => {
  200. // 格式化显示刻度为 5 的倍数
  201. return value;
  202. },
  203. },
  204. axisTick: {
  205. show: true, // 显示刻度线
  206. },
  207. axisLine: {
  208. show: true, // 显示轴线
  209. },
  210. data: ticks, // 设置刻度
  211. },
  212. yAxis: {
  213. type: "value",
  214. name: this.envelopeList.yaxis || this.envelopeListTwo.yaxis,
  215. },
  216. tooltip: {
  217. trigger: "axis",
  218. formatter: (params) => {
  219. // 获取原始的 x 数值和对应的 y 值
  220. const xValue = params[0].value[0]; // 获取原始的 x 数值
  221. const yValue = params[0].value[1]; // 获取对应的 y 数值
  222. return `X: ${xValue}<br/>Y: ${yValue}`; // 显示原始的 x 和 y 值
  223. },
  224. axisPointer: {
  225. type: "line", // 显示十字线
  226. },
  227. },
  228. series: [
  229. {
  230. name: "数据系列",
  231. type: "line", // 折线图
  232. data: labels.map((item, index) => [item, data[index]]), // 修改为 [x, y] 数组
  233. // smooth: true,
  234. symbol: "none", // 数据点的样式
  235. symbolSize: 8, // 数据点的大小
  236. lineStyle: {
  237. color: "#162961",
  238. width: 1, // 线条宽度
  239. },
  240. itemStyle: {
  241. color: "#162961",
  242. borderColor: "#fff",
  243. borderWidth: 1,
  244. },
  245. },
  246. ],
  247. };
  248. // 使用更新的配置更新图表
  249. this.chartInstance.setOption(option);
  250. },
  251. previousRow() {
  252. this.$emit("update-previous-row", 3, this.activeIndex);
  253. },
  254. // 触发下一条
  255. nextRow() {
  256. this.$emit("update-next-row", 3, this.activeIndex);
  257. },
  258. Show() {
  259. this.TZshow = !this.TZshow;
  260. },
  261. },
  262. };
  263. </script>
  264. <style lang="scss" scoped>
  265. .line-chart {
  266. width: 100%;
  267. height: 260px;
  268. }
  269. .eigenvalue {
  270. position: absolute;
  271. top: 60px;
  272. right: 0;
  273. font-size: 10px;
  274. width: 100px;
  275. border: 1px solid black;
  276. padding: 5px;
  277. background: #fff;
  278. z-index: 99;
  279. h5 {
  280. line-height: 16px;
  281. height: 16px;
  282. }
  283. }
  284. .section {
  285. position: relative;
  286. display: flex;
  287. // line-height: 32px;
  288. .el-input {
  289. width: 150px;
  290. }
  291. .el-button {
  292. margin-left: 10px;
  293. }
  294. }
  295. </style>