temperature.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <template>
  2. <div class="MAXdiv">
  3. <div class="TopBox">
  4. <div class="rightdiv">
  5. <el-table
  6. ref="multipleTable"
  7. :data="tableData"
  8. tooltip-effect="dark"
  9. style="width: 100%"
  10. height="250"
  11. >
  12. <el-table-column prop="time_stamp" label="时间" align="center" />
  13. <el-table-column
  14. prop="temp_channel"
  15. label="部件名称"
  16. align="center"
  17. />
  18. <!-- 自定义状态列样式 -->
  19. <el-table-column prop="status" label="温度状态" align="center">
  20. <template #default="{ row }">
  21. <span :class="{ 'warning-text': row.status !== '正常' }">
  22. {{ row.status }}
  23. </span>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. <div class="fenye">
  28. <p>特征值越接近1表示危险</p>
  29. <el-pagination
  30. @current-change="handleCurrentChange"
  31. :current-page="currentPage"
  32. layout="total, prev, pager, next"
  33. :total="totalCount"
  34. :page-size="500"
  35. />
  36. </div>
  37. </div>
  38. <div class="leftdiv">
  39. <div class="stateBox">
  40. <h4>温度状态</h4>
  41. <div class="state">
  42. <p :style="{ backgroundColor: getStatusColor('主轴承温度') }">
  43. 主轴承温度
  44. </p>
  45. <p :style="{ backgroundColor: getStatusColor('齿轮箱油温') }">
  46. 齿轮箱油温
  47. </p>
  48. <p
  49. :style="{
  50. backgroundColor: getStatusColor('发电机驱动端轴承温度'),
  51. }"
  52. >
  53. 发电机驱动端轴承温度
  54. </p>
  55. <p
  56. :style="{
  57. backgroundColor: getStatusColor('发电机非驱动端轴承温度'),
  58. }"
  59. >
  60. 发电机非驱动端轴承温度
  61. </p>
  62. </div>
  63. </div>
  64. <div class="Btn">
  65. <div style="height: 200px">
  66. <bing :result="result" />
  67. </div>
  68. <div class="minp">
  69. <p class="PText">
  70. <span><i class="color1"></i>正常</span>
  71. <span><i class="color2"></i>危险</span>
  72. </p>
  73. <h4>诊断步骤:</h4>
  74. <p>1、选择风场风机与起止时间,点击“查询”;</p>
  75. <p>2、点击“查询”输出最终温度状态结果。</p>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="bottomBox">
  81. <div class="tu" v-for="(item, index) in chartList" :key="index">
  82. <el-empty v-if="!hasData(item.data)" description="暂无数据" />
  83. <zhexian
  84. v-else
  85. :title="item.title"
  86. :lineType="item.lineType"
  87. :lineColor="item.lineColor"
  88. :chartData="item.data"
  89. :fieldCode="fieldCode"
  90. :windTurbineNumber="windTurbineNumber"
  91. :bearingKey="item.bearingKey"
  92. />
  93. </div>
  94. </div>
  95. </div>
  96. </template>
  97. <script>
  98. import Eecharts from "./Eecharts.vue";
  99. import bing from "./bing.vue";
  100. import Zhexian from "./zhexian.vue";
  101. export default {
  102. components: { Eecharts, bing, Zhexian },
  103. props: {
  104. echartsdata: {
  105. type: Object,
  106. default: () => ({
  107. main_bearing: [],
  108. generator_drive_end: [],
  109. gearbox_oil: [],
  110. generator_nondrive_end: [],
  111. }),
  112. },
  113. codedata: {
  114. type: Array,
  115. default: () => [],
  116. },
  117. totalCount: {
  118. type: Number,
  119. default: 0,
  120. },
  121. totalPage: {
  122. type: Number,
  123. default: 0,
  124. },
  125. fieldCode: {
  126. type: String,
  127. default: "",
  128. },
  129. windTurbineNumber: {
  130. type: String,
  131. default: "",
  132. },
  133. },
  134. data() {
  135. return {
  136. tableData: [],
  137. currentPage: 1,
  138. total: 1,
  139. result: {},
  140. bearingStateColors: {
  141. innerRing: "#80808057",
  142. outerRing: "#80808057",
  143. rollingElement: "#80808057",
  144. cage: "#80808057",
  145. },
  146. };
  147. },
  148. computed: {
  149. chartList() {
  150. const list = [
  151. {
  152. title: "主轴承温度趋势图",
  153. data: this.echartsdata.main_bearing,
  154. lineType: "line",
  155. lineColor: "#02aae9",
  156. bearingKey: "innerRing",
  157. },
  158. {
  159. title: "发电机驱动端轴承温度趋势图",
  160. data: this.echartsdata.generator_drive_end,
  161. bearingKey: "rollingElement",
  162. },
  163. {
  164. title: "齿轮箱油温趋势图",
  165. data: this.echartsdata.gearbox_oil,
  166. lineType: "line",
  167. lineColor: "#02aae9",
  168. bearingKey: "outerRing",
  169. },
  170. {
  171. title: "发电机非驱动端轴承温度趋势图",
  172. data: this.echartsdata.generator_nondrive_end,
  173. bearingKey: "cage",
  174. },
  175. ];
  176. const sortedList = list.slice().sort((a, b) => {
  177. return this.hasData(b.data) - this.hasData(a.data);
  178. });
  179. console.log(
  180. "排序后的图表列表:",
  181. sortedList.map((i) => ({
  182. title: i.title,
  183. hasData: this.hasData(i.data),
  184. }))
  185. );
  186. return sortedList;
  187. },
  188. },
  189. watch: {
  190. codedata: {
  191. handler(newVal) {
  192. this.tableData = newVal;
  193. this.updateBearingStateColors();
  194. this.updateStatusCount(); // 统计调用
  195. },
  196. immediate: true,
  197. deep: true,
  198. },
  199. },
  200. methods: {
  201. updateBearingStateColors() {
  202. // 四个温度类型对应状态颜色key
  203. const statusMap = {
  204. 主轴承温度: "innerRing",
  205. 齿轮箱油温: "outerRing",
  206. 发电机驱动端轴承温度: "rollingElement", // 改成“驱动端”对应数据字段
  207. 发电机非驱动端轴承温度: "cage", // 改成“非驱动端”对应数据字段
  208. };
  209. // 颜色映射,正常绿,异常黄,无数据灰
  210. const colorMap = {
  211. normal: "#8ae359",
  212. danger: "#eecb5f",
  213. unknown: "#80808057",
  214. };
  215. const updatedColors = {};
  216. // 遍历四个温度类型,分别判断它们对应的tableData是否有异常或报警
  217. for (const [label, key] of Object.entries(statusMap)) {
  218. const items = this.tableData.filter(
  219. (item) => item.temp_channel === label
  220. );
  221. if (items.length === 0) {
  222. updatedColors[key] = colorMap.unknown; // 无数据,灰色
  223. } else {
  224. const hasDanger = items.some(
  225. (item) => item.status === "异常" || item.status === "危险"
  226. );
  227. updatedColors[key] = hasDanger ? colorMap.danger : colorMap.normal;
  228. }
  229. }
  230. // 合并更新状态颜色对象
  231. this.bearingStateColors = {
  232. ...this.bearingStateColors,
  233. ...updatedColors,
  234. };
  235. },
  236. updateStatusCount() {
  237. let normalCount = 0;
  238. let dangerCount = 0;
  239. this.tableData.forEach((item) => {
  240. if (item.status === "正常") {
  241. normalCount++;
  242. } else if (
  243. item.status === "异常" ||
  244. item.status === "危险" ||
  245. item.status === "报警"
  246. ) {
  247. dangerCount++;
  248. }
  249. });
  250. this.result = {
  251. normal: normalCount,
  252. danger: dangerCount,
  253. };
  254. },
  255. getStatusColor(tempName) {
  256. const map = {
  257. 主轴承温度: "innerRing",
  258. 齿轮箱油温: "outerRing",
  259. 发电机驱动端轴承温度: "rollingElement",
  260. 发电机非驱动端轴承温度: "cage",
  261. };
  262. // 根据tempName返回对应颜色
  263. return this.bearingStateColors[map[tempName]] || "#80808057";
  264. },
  265. hasData(data) {
  266. if (!data) return false;
  267. if (
  268. typeof data === "object" &&
  269. Array.isArray(data.timestamps) &&
  270. Array.isArray(data.values)
  271. ) {
  272. return data.timestamps.length > 0 || data.values.length > 0;
  273. }
  274. return false;
  275. },
  276. handleCurrentChange(val) {
  277. this.currentPage = val;
  278. this.$emit("updatePage", this.currentPage);
  279. },
  280. },
  281. };
  282. </script>
  283. <style lang="scss" scoped>
  284. h4 {
  285. margin-bottom: 5px;
  286. font-weight: 600;
  287. }
  288. .TopBox {
  289. height: 280px;
  290. display: flex;
  291. justify-content: space-around;
  292. .leftdiv {
  293. width: 50%;
  294. display: flex;
  295. justify-content: space-around;
  296. .stateBox {
  297. .state {
  298. display: flex;
  299. flex-direction: column;
  300. justify-content: center; /* 整体居中 */
  301. align-items: center;
  302. height: 200px;
  303. gap: 20px; /* 控制间距 */
  304. p {
  305. width: 200px;
  306. height: 40px;
  307. background: rgb(227, 227, 227);
  308. color: rgb(50, 50, 50);
  309. text-align: center;
  310. align-content: center;
  311. font-weight: 600;
  312. }
  313. }
  314. .btn-auto {
  315. margin-top: 10px;
  316. width: 100%;
  317. }
  318. }
  319. .Btn {
  320. width: 50%;
  321. display: flex;
  322. flex-direction: column; /* 垂直排列 */
  323. justify-content: space-between; /* 顶部和底部对齐 */
  324. min-height: 100px; /* 确保容器有足够高度 */
  325. margin: 10px 0;
  326. .PText {
  327. display: flex;
  328. justify-content: space-around;
  329. span {
  330. display: flex;
  331. align-items: center;
  332. i {
  333. width: 30px;
  334. height: 15px;
  335. margin-right: 5px;
  336. }
  337. .color1 {
  338. background-color: #8ae359;
  339. }
  340. .color2 {
  341. background-color: #eecb5f;
  342. }
  343. .color3 {
  344. background-color: #f7715f;
  345. }
  346. }
  347. }
  348. margin: 10px 0;
  349. .minp {
  350. font-size: 12px;
  351. margin-top: auto; /* 自动推到最底部 */
  352. }
  353. }
  354. }
  355. .rightdiv {
  356. width: 50%;
  357. .fenye {
  358. display: flex;
  359. //justify-content: center;
  360. justify-content: space-between;
  361. margin: 5px 0;
  362. font-size: 12px;
  363. line-height: 30px;
  364. span {
  365. font-weight: 600;
  366. }
  367. }
  368. }
  369. }
  370. .bottomBox {
  371. margin-top: 20px;
  372. display: flex;
  373. flex-wrap: wrap;
  374. justify-content: space-around;
  375. border: 1px solid rgb(231, 231, 231);
  376. padding: 10px;
  377. .tu {
  378. width: 49%;
  379. height: 350px;
  380. }
  381. }
  382. ::v-deep .el-table__cell {
  383. padding: 2px 0;
  384. font-size: 12px;
  385. }
  386. .MAXdiv {
  387. overflow: hidden;
  388. overflow-y: auto;
  389. height: 70vh;
  390. }
  391. .warning-text {
  392. color: #e6a23c; /* Element UI的warning颜色 */
  393. font-weight: bold;
  394. }
  395. </style>