bearing copy.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. <template>
  2. <div>
  3. <div class="TopBox">
  4. <div class="leftdiv">
  5. <h4>轴承状态</h4>
  6. <div class="state">
  7. <p :style="{ backgroundColor: bearingStateColors.innerRing }">
  8. 轴承内圈状态
  9. </p>
  10. <p :style="{ backgroundColor: bearingStateColors.outerRing }">
  11. 轴承外圈状态
  12. </p>
  13. <p :style="{ backgroundColor: bearingStateColors.rollingElement }">
  14. 轴承滚动体状态
  15. </p>
  16. <p :style="{ backgroundColor: bearingStateColors.cage }">
  17. 轴承保持架状态
  18. </p>
  19. </div>
  20. <p class="PText">
  21. <span><i class="color1"></i>正常</span
  22. ><span><i class="color2"></i>报警</span
  23. ><span><i class="color3"></i>危险</span>
  24. </p>
  25. <div class="Btn">
  26. <el-button type="primary" size="small" @click="automaticDiagnosis"
  27. >自动诊断</el-button
  28. >
  29. </div>
  30. <h4>诊断步骤:</h4>
  31. <p class="minp">1、选择振动测点与起止时间,点击“查询”;</p>
  32. <p class="minp">2、对轴承“参数设置”输入相关信息;</p>
  33. <p class="minp">3、点击“自动诊断”输出最终轴承状态结果。</p>
  34. </div>
  35. <div class="rightdiv">
  36. <el-table
  37. ref="multipleTable"
  38. :data="tableData"
  39. tooltip-effect="dark"
  40. style="width: 100%"
  41. height="250"
  42. >
  43. <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
  44. <el-table-column prop="timeStamp" label="时间" align="center">
  45. </el-table-column>
  46. <el-table-column
  47. prop="samplingFrequency"
  48. label="采样频率(Hz)"
  49. align="center"
  50. >
  51. </el-table-column>
  52. <el-table-column
  53. prop="rotationalSpeed"
  54. label="转速(rpm)"
  55. align="center"
  56. >
  57. </el-table-column>
  58. <el-table-column
  59. prop="innerRingFault"
  60. label="轴承内圈故障"
  61. align="center"
  62. >
  63. </el-table-column>
  64. <el-table-column
  65. prop="outerRingFault"
  66. label="轴承外圈故障"
  67. align="center"
  68. >
  69. </el-table-column>
  70. <el-table-column
  71. prop="rollingElementFault"
  72. label="轴承滚动体故障"
  73. align="center"
  74. >
  75. </el-table-column>
  76. <el-table-column
  77. prop="cageFault"
  78. label="轴承保持架故障"
  79. align="center"
  80. >
  81. </el-table-column>
  82. </el-table>
  83. <div class="fenye">
  84. <p><span>故障状态代码说明:</span>0代表正常,1代表报警,2代表危险</p>
  85. <el-pagination
  86. @current-change="handleCurrentChange"
  87. :current-page="currentPage"
  88. layout="total, prev, pager, next, jumper"
  89. :total="totalCount"
  90. :page-size="10"
  91. ></el-pagination>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="bottomBox">
  96. <div class="BtLeft">
  97. <h4>轴承状态趋势图</h4>
  98. <el-empty
  99. v-if="this.xData.length === 0 || this.yData.length === 0"
  100. description="暂无数据"
  101. style="padding: 17px 0"
  102. ></el-empty>
  103. <Eecharts
  104. v-else
  105. style="height: 250px"
  106. :xData="xData"
  107. :yData="yData"
  108. :yNames="[
  109. '轴承内圈状态',
  110. '轴承外圈状态',
  111. '轴承滚动体状态',
  112. '轴承保持架状态',
  113. ]"
  114. yAxisName="轴承故障状态"
  115. ></Eecharts>
  116. </div>
  117. <div class="BtRight">
  118. <h4>参数设置</h4>
  119. <div class="BtRightDiv">
  120. <p class="BtRightP">
  121. 发动机到轴承测点转速传动比<span
  122. ><el-input v-model="transmissionRatio" size="small" v-number-only></el-input
  123. ></span>
  124. </p>
  125. <h4>滚动轴承参数输入</h4>
  126. <div class="canshu">
  127. <p class="BtRightP">
  128. <span class="label-text">轴承节圆直径D(mm)</span>
  129. <span
  130. ><el-input
  131. v-model="bearingPitchDiameter"
  132. size="small"
  133. v-number-only
  134. ></el-input
  135. ></span>
  136. </p>
  137. <p class="BtRightP">
  138. <span class="label-text">滚动体直径d(mm)</span>
  139. <span
  140. ><el-input
  141. v-model="rollingElementDiameter"
  142. size="small"
  143. v-number-only
  144. ></el-input
  145. ></span>
  146. </p>
  147. <p class="BtRightP">
  148. <span class="label-text">滚动体个数Z(个)</span>
  149. <span
  150. ><el-input v-model="rollingElementCount" size="small" v-number-only></el-input
  151. ></span>
  152. </p>
  153. <p class="BtRightP">
  154. <span class="label-text">接触角α(°)</span>
  155. <span
  156. ><el-input v-model="contactAngle" size="small" v-number-only></el-input
  157. ></span>
  158. </p>
  159. </div>
  160. <h4>报警阈值输入</h4>
  161. <div class="canshu">
  162. <p class="BtRightP">
  163. <span class="label-text">振动速度报警阈值(mm/s)</span>
  164. <span
  165. ><el-input
  166. v-model="vibrationSpeedAlarmThreshold"
  167. size="small"
  168. v-number-only
  169. ></el-input
  170. ></span>
  171. </p>
  172. <p class="BtRightP">
  173. <span class="label-text">振动速度危险阈值(mm/s)</span>
  174. <span
  175. ><el-input
  176. v-model="vibrationSpeedDangerThreshold"
  177. size="small"
  178. v-number-only
  179. ></el-input
  180. ></span>
  181. </p>
  182. <p class="BtRightP">
  183. <span class="label-text">包络总值报警阈值(gE)</span>
  184. <span
  185. ><el-input
  186. v-model="envelopeTotalAlarmThreshold"
  187. size="small"
  188. v-number-only
  189. ></el-input
  190. ></span>
  191. </p>
  192. <p class="BtRightP">
  193. <span class="label-text">包络总值危险阈值(gE)</span>
  194. <span
  195. ><el-input
  196. v-model="envelopeTotalDangerThreshold"
  197. size="small"
  198. v-number-only
  199. ></el-input
  200. ></span>
  201. </p>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </template>
  208. <script>
  209. import Eecharts from "./Eecharts.vue";
  210. export default {
  211. components: { Eecharts },
  212. props: {
  213. codedata: {
  214. type: Array,
  215. default: () => [],
  216. },
  217. totalCount: {
  218. type: Number,
  219. default: 0,
  220. },
  221. totalPage: {
  222. type: Number,
  223. default: 0,
  224. },
  225. },
  226. data() {
  227. return {
  228. tableData: [],
  229. // 添加新的数据属性用于绑定输入框的值
  230. transmissionRatio: "",
  231. bearingPitchDiameter: "",
  232. rollingElementDiameter: "",
  233. rollingElementCount: "",
  234. contactAngle: "",
  235. vibrationSpeedAlarmThreshold: "",
  236. vibrationSpeedDangerThreshold: "",
  237. envelopeTotalAlarmThreshold: "",
  238. envelopeTotalDangerThreshold: "",
  239. // 分页
  240. currentPage: 1,
  241. total: 1,
  242. xData: [],
  243. yData: [],
  244. // 颜色判断
  245. bearingStateColors: {
  246. innerRing: "#80808057",
  247. outerRing: "#80808057",
  248. rollingElement: "#80808057",
  249. cage: "#80808057",
  250. },
  251. hasError: false, // 标志是否已经显示过错误提示
  252. };
  253. },
  254. created() {
  255. console.log(this.codedata, "11111111111111111111111111");
  256. // this.tableData = this.codedata;
  257. },
  258. watch: {
  259. codedata: {
  260. handler(newVal) {
  261. this.tableData = newVal;
  262. },
  263. immediate: true, // 组件创建时立刻执行一次
  264. deep: true, // 如果 codedata 是复杂对象,建议加上
  265. },
  266. },
  267. methods: {
  268. toggleSelection(rows) {
  269. if (rows) {
  270. rows.forEach((row) => {
  271. this.$refs.multipleTable.toggleRowSelection(row);
  272. });
  273. } else {
  274. this.$refs.multipleTable.clearSelection();
  275. }
  276. },
  277. handleSelectionChange(val) {
  278. this.multipleSelection = val;
  279. },
  280. handleCurrentChange(val) {
  281. console.log(`当前页: ${val}`);
  282. this.currentPage = val // 子组件内部更新当前页
  283. this.$emit('updatePage', this.currentPage) // 通知父组件,把当前页传出去
  284. },
  285. automaticDiagnosis() {
  286. // 验证必填项
  287. const requiredFields = [
  288. { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
  289. { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
  290. { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
  291. { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
  292. { field: this.contactAngle, name: "接触角α(°)" },
  293. {
  294. field: this.vibrationSpeedAlarmThreshold,
  295. name: "振动速度报警阈值(mm/s)",
  296. },
  297. {
  298. field: this.vibrationSpeedDangerThreshold,
  299. name: "振动速度危险阈值(mm/s)",
  300. },
  301. {
  302. field: this.envelopeTotalAlarmThreshold,
  303. name: "包络总值报警阈值(gE)",
  304. },
  305. {
  306. field: this.envelopeTotalDangerThreshold,
  307. name: "包络总值危险阈值(gE)",
  308. },
  309. ];
  310. // 记录是否已弹出过错误提示
  311. let hasError = false;
  312. // 只检查必填项的字段是否为空
  313. // for (const { field, name } of requiredFields) {
  314. // if (!field && !hasError) {
  315. // // 弹出提示并标记已经出现错误提示
  316. // this.$message.error(`${name} 是必填项`);
  317. // hasError = true; // 标记已经弹出过错误提示
  318. // return; // 停止执行后续逻辑
  319. // }
  320. // }
  321. // 如果验证通过,继续执行后续逻辑
  322. const newProps = this.tableData.map(() => ({
  323. innerRingFault: Math.floor(Math.random() * 3).toString(),
  324. outerRingFault: Math.floor(Math.random() * 3).toString(),
  325. rollingElementFault: Math.floor(Math.random() * 3).toString(),
  326. cageFault: Math.floor(Math.random() * 3).toString(),
  327. }));
  328. this.tableData.forEach((row, index) => {
  329. this.$set(this.tableData, index, {
  330. ...row,
  331. ...newProps[index], // 用每一行自己生成的随机数
  332. });
  333. });
  334. // 更新颜色状态
  335. const fields = [
  336. { key: "innerRingFault", colorKey: "innerRing" },
  337. { key: "outerRingFault", colorKey: "outerRing" },
  338. { key: "rollingElementFault", colorKey: "rollingElement" },
  339. { key: "cageFault", colorKey: "cage" },
  340. ];
  341. fields.forEach(({ key, colorKey }) => {
  342. const values = newProps.map((item) => Number(item[key]));
  343. const maxVal = Math.max(...values);
  344. let color = "#80808057"; // 默认灰色
  345. if (maxVal === 0) color = "green"; // 无故障
  346. else if (maxVal === 1) color = "yellow"; // 警告
  347. else if (maxVal === 2) color = "red"; // 危险
  348. this.bearingStateColors[colorKey] = color; // 更新颜色
  349. });
  350. // 更新趋势图数据
  351. // 更新趋势图数据(用tableData,不是newProps)
  352. this.xData = this.tableData.map((item) => item.timeStamp);
  353. this.yData = fields.map(({ key }) =>
  354. this.tableData.map((item) => Number(item[key]))
  355. );
  356. },
  357. },
  358. };
  359. </script>
  360. <style lang="scss" scoped>
  361. h4 {
  362. margin-bottom: 5px;
  363. font-weight: 600;
  364. }
  365. .TopBox {
  366. height: 280px;
  367. display: flex;
  368. justify-content: space-around;
  369. .leftdiv {
  370. width: 29%;
  371. .state {
  372. display: flex;
  373. flex-wrap: wrap;
  374. justify-content: space-around;
  375. align-content: center;
  376. height: 100px;
  377. p {
  378. width: 150px;
  379. height: 40px;
  380. background: rgb(227, 227, 227);
  381. color: rgb(50, 50, 50);
  382. margin-bottom: 10px;
  383. text-align: center;
  384. align-content: center;
  385. font-weight: 600;
  386. }
  387. }
  388. .PText {
  389. display: flex;
  390. justify-content: space-around;
  391. span {
  392. display: flex;
  393. align-items: center;
  394. i {
  395. width: 30px;
  396. height: 15px;
  397. margin-right: 5px;
  398. }
  399. .color1 {
  400. background-color: green;
  401. }
  402. .color2 {
  403. background-color: yellow;
  404. }
  405. .color3 {
  406. background-color: red;
  407. }
  408. }
  409. }
  410. .Btn {
  411. display: flex;
  412. justify-content: space-around;
  413. margin: 10px 0;
  414. }
  415. .minp {
  416. font-size: 12px;
  417. }
  418. }
  419. .rightdiv {
  420. width: 69%;
  421. .fenye {
  422. display: flex;
  423. justify-content: space-between;
  424. margin: 5px 0;
  425. font-size: 12px;
  426. line-height: 30px;
  427. span {
  428. font-weight: 600;
  429. }
  430. }
  431. }
  432. }
  433. .bottomBox {
  434. display: flex;
  435. justify-content: space-around;
  436. margin-top: 10px;
  437. .BtLeft {
  438. border: 1px solid rgb(231, 231, 231);
  439. width: 49%;
  440. padding: 10px;
  441. }
  442. .BtRight {
  443. width: 49%;
  444. border: 1px solid rgb(231, 231, 231);
  445. padding: 10px;
  446. .BtRightDiv {
  447. padding: 0 10px;
  448. h4 {
  449. font-size: 14px;
  450. }
  451. .BtRightP {
  452. line-height: 30px;
  453. font-size: 12px;
  454. display: flex;
  455. margin-bottom: 5px;
  456. width: 50%;
  457. span {
  458. margin-left: 10px;
  459. .el-input {
  460. width: 100px;
  461. }
  462. }
  463. .label-text {
  464. width: 140px;
  465. }
  466. }
  467. .canshu {
  468. display: flex;
  469. flex-wrap: wrap;
  470. justify-content: space-between;
  471. }
  472. }
  473. }
  474. }
  475. ::v-deep .el-table__cell {
  476. padding: 2px 0;
  477. font-size: 12px;
  478. }
  479. </style>