superviseDataClassify.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <template>
  2. <el-dialog
  3. width="70%"
  4. top="10vh"
  5. custom-class="modal"
  6. :close-on-click-modal="false"
  7. >
  8. <template #title>
  9. <div class="showTitles">
  10. <div class="left">
  11. <div class="titles">模型训练</div>
  12. <button v-if="!trainingFlag" class="btn" @click="startTraining()">
  13. 开始训练
  14. </button>
  15. <button v-if="trainingFlag" disabled>训练中</button>
  16. </div>
  17. <div class="selects">
  18. <div style="margin-right: 20px">
  19. 比例:
  20. <el-select
  21. v-model="percent"
  22. @change="selectSearch()"
  23. clearable
  24. placeholder="请选择"
  25. popper-class="select"
  26. style="width: 120px; margin-left: 20px"
  27. >
  28. <el-option
  29. v-for="item in percentList"
  30. :key="item.value"
  31. :value="item.value"
  32. :label="item.label"
  33. />
  34. </el-select>
  35. </div>
  36. <div>
  37. 故障前时间范围:
  38. <el-select
  39. v-model="intervalValue"
  40. clearable
  41. placeholder="请选择"
  42. popper-class="select"
  43. style="width: 105px; margin-left: 20px"
  44. >
  45. <el-option
  46. v-for="item in timeList"
  47. :key="item.value"
  48. :value="item.value"
  49. :label="item.label"
  50. />
  51. </el-select>
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <div style="height: 70vh; overflow-y: auto">
  57. <el-row :type="'flex'" class="content">
  58. <el-col :span="12" class="pd-l-8">
  59. <div class="titleBar">
  60. <div class="titleName">训练级</div>
  61. </div>
  62. <el-table
  63. ref="multipleTable"
  64. empty-text="暂无数据"
  65. :data="trainingList"
  66. :header-cell-style="{
  67. height: '40px',
  68. background: 'rgba(83, 98, 104, 0.2)',
  69. color: '#b2bdc0',
  70. 'border-bottom': '0px solid red',
  71. }"
  72. :cell-style="{
  73. height: '40px',
  74. 'border-bottom': 'solid 0px #242424',
  75. }"
  76. stripe
  77. style="width: 100%; margin-bottom: 10px"
  78. >
  79. <el-table-column
  80. prop="starttime"
  81. label="故障时间"
  82. width="180"
  83. align="center"
  84. ></el-table-column>
  85. <el-table-column
  86. prop="stationen"
  87. label="风场"
  88. width="80"
  89. align="center"
  90. ></el-table-column>
  91. <el-table-column
  92. prop="stationcn"
  93. label="场站名称"
  94. width="150"
  95. align="center"
  96. ></el-table-column>
  97. <el-table-column
  98. prop="windturbineid"
  99. label="风机编号"
  100. width="80"
  101. align="center"
  102. ></el-table-column>
  103. <el-table-column
  104. prop="model"
  105. label="风机型号"
  106. width="100"
  107. align="center"
  108. ></el-table-column>
  109. <el-table-column
  110. prop="faulttype"
  111. label="故障"
  112. width="120"
  113. align="center"
  114. ></el-table-column>
  115. </el-table>
  116. </el-col>
  117. <el-col :span="12" class="pd-l-8">
  118. <div class="titleBar">
  119. <div class="titleName">测试级</div>
  120. </div>
  121. <el-table
  122. ref="multipleTable"
  123. empty-text="暂无数据"
  124. :data="testList"
  125. :header-cell-style="{
  126. height: '40px',
  127. background: 'rgba(83, 98, 104, 0.2)',
  128. color: '#b2bdc0',
  129. 'border-bottom': '0px solid red',
  130. }"
  131. :cell-style="{
  132. height: '40px',
  133. 'border-bottom': 'solid 0px #242424',
  134. }"
  135. stripe
  136. style="width: 100%; margin-bottom: 10px"
  137. >
  138. <el-table-column
  139. prop="starttime"
  140. label="故障时间"
  141. width="175"
  142. align="center"
  143. ></el-table-column>
  144. <el-table-column
  145. prop="stationen"
  146. label="风场"
  147. width="80"
  148. align="center"
  149. ></el-table-column>
  150. <el-table-column
  151. prop="stationcn"
  152. label="场站名称"
  153. width="150"
  154. align="center"
  155. ></el-table-column>
  156. <el-table-column
  157. prop="windturbineid"
  158. label="风机编号"
  159. width="80"
  160. align="center"
  161. ></el-table-column>
  162. <el-table-column
  163. prop="model"
  164. label="风机型号"
  165. width="100"
  166. align="center"
  167. ></el-table-column>
  168. <el-table-column
  169. prop="faulttype"
  170. label="故障"
  171. width="110"
  172. align="center"
  173. ></el-table-column>
  174. </el-table>
  175. </el-col>
  176. </el-row>
  177. </div>
  178. </el-dialog>
  179. </template>
  180. <script>
  181. import axios from "axios";
  182. import BASE from "@tools/basicTool.js";
  183. export default {
  184. components: {
  185. },
  186. data() {
  187. return {
  188. trainingList: [],
  189. testList: [],
  190. randoms: [],
  191. trainingFlag: false,
  192. percent: 7,
  193. intervalValue: 1,
  194. faultList: {
  195. JC: "机舱故障",
  196. BJ: "变桨故障",
  197. PH: "偏航故障",
  198. FDJ: "发电机故障",
  199. CLX: "齿轮箱故障",
  200. YY: "液压故障",
  201. ZZ: "主轴故障",
  202. ZK: "主控故障",
  203. BPQ: "变频器故障",
  204. },
  205. percentList: [
  206. {
  207. label: "10%",
  208. value: 1,
  209. },
  210. {
  211. label: "20%",
  212. value: 2,
  213. },
  214. {
  215. label: "30%",
  216. value: 4,
  217. },
  218. {
  219. label: "40%",
  220. value: 4,
  221. },
  222. {
  223. label: "50%",
  224. value: 5,
  225. },
  226. {
  227. label: "60%",
  228. value: 6,
  229. },
  230. {
  231. label: "70%",
  232. value: 7,
  233. },
  234. {
  235. label: "80%",
  236. value: 8,
  237. },
  238. {
  239. label: "90%",
  240. value: 9,
  241. },
  242. {
  243. label: "100%",
  244. value: 10,
  245. },
  246. ],
  247. timeList: [
  248. { label: "1小时", value: 1 },
  249. { label: "1.5小时", value: 1.5 },
  250. { label: "2小时", value: 2 },
  251. { label: "2.5小时", value: 2.5 },
  252. { label: "3小时", value: 3 },
  253. { label: "3.5小时", value: 3.5 },
  254. { label: "4小时", value: 4 },
  255. { label: "4.5小时", value: 4.5 },
  256. { label: "5小时", value: 5 },
  257. { label: "5.5小时", value: 5.5 },
  258. { label: "6小时", value: 6 },
  259. { label: "6.5小时", value: 6.5 },
  260. { label: "7小时", value: 7 },
  261. { label: "7.5小时", value: 7.5 },
  262. { label: "8小时", value: 8 },
  263. { label: "8.5小时", value: 8.5 },
  264. { label: "9小时", value: 9 },
  265. { label: "9.5小时", value: 9.5 },
  266. { label: "10小时", value: 10 },
  267. { label: "10.5小时", value: 10.5 },
  268. { label: "11小时", value: 11 },
  269. { label: "11.5小时", value: 11.5 },
  270. { label: "12小时", value: 12 },
  271. ],
  272. exportTrainingLists: [],
  273. exportTestList: [],
  274. exportList: [],
  275. resultData: [],
  276. tHeader: [],
  277. };
  278. },
  279. props: {
  280. allData: {
  281. type: Array,
  282. default: () => {
  283. return [];
  284. },
  285. },
  286. chooseAlgorithm: {
  287. type: String,
  288. },
  289. },
  290. updated() {
  291. this.selectSearch();
  292. },
  293. methods: {
  294. selectSearch() {
  295. (this.trainingList = []),
  296. (this.testList = []),
  297. (this.randoms = []),
  298. this.handleData();
  299. },
  300. handleData() {
  301. let max = this.allData.length;
  302. let number = ((max * this.percent) / 10).toFixed(0);
  303. if (this.randoms.length >= number) {
  304. this.randoms.forEach((item) => {
  305. this.trainingList.push(this.allData[item]);
  306. });
  307. this.testList = this.allData.filter(
  308. (val) => this.trainingList.indexOf(val) === -1
  309. );
  310. this.trainingList.sort(this.Compare("faultTime"));
  311. this.testList.sort(this.Compare("faultTime"));
  312. } else {
  313. let num = this.getRandoms(0, max - 1);
  314. if (this.randoms.filter((item) => item === num).length > 0) {
  315. this.handleData();
  316. } else {
  317. this.randoms.push(num);
  318. this.handleData();
  319. }
  320. }
  321. },
  322. getRandoms(Min, Max) {
  323. let Range = Max - Min;
  324. let Rand = Math.random();
  325. let num = Min + Math.round(Range * Rand);
  326. return num;
  327. },
  328. Compare(property) {
  329. return function (a, b) {
  330. var value1 = new Date(a[property]).getTime();
  331. var value2 = new Date(b[property]).getTime();
  332. return value2 - value1;
  333. };
  334. },
  335. startTraining() {
  336. let params = {};
  337. let dataInfos = []
  338. let dataParams = []
  339. this.trainingList.forEach((item) => {
  340. let datas = {};
  341. datas.startTs =
  342. new Date(item.starttime).getTime() - this.intervalValue * 3600000;
  343. datas.endTs = new Date(item.starttime).getTime();
  344. datas.thingId = item.windturbineid;
  345. datas.modelId = item.model;
  346. datas.stationId = item.stationen;
  347. datas.id = item.faultid;
  348. datas.faultTime = new Date(item.starttime).getTime();
  349. datas.tag = item.faultcode
  350. dataInfos.push(datas);
  351. });
  352. this.chooseAlgorithm.parameters.forEach(item =>{
  353. dataParams.push(item.value)
  354. })
  355. let algorithm = {
  356. name: this.chooseAlgorithm.name,
  357. parameter: JSON.stringify(dataParams)
  358. }
  359. params.algorithm = algorithm
  360. params.dataInfos = dataInfos
  361. axios({
  362. method: "post",
  363. url: "http://192.168.10.18:8080/api/supervised/execute",
  364. data: params,
  365. header: {
  366. "Content-Type": "application/json",
  367. },
  368. }).then((res) => {
  369. if (res.data === "success") {
  370. this.BASE.showMsg({
  371. type: "success",
  372. msg: "训练中...",
  373. });
  374. // this.trainingFlag = true;
  375. this.$emit("click-training");
  376. }else{
  377. this.BASE.showMsg({
  378. type: "warning",
  379. msg: res.data,
  380. });
  381. }
  382. });
  383. },
  384. },
  385. };
  386. </script>
  387. <style scope lang="less">
  388. .showTitles {
  389. display: flex;
  390. flex-direction: row;
  391. justify-content: space-between;
  392. align-items: center;
  393. .left {
  394. display: flex;
  395. flex-direction: row;
  396. align-items: center;
  397. .titles {
  398. margin-right: 20px;
  399. }
  400. }
  401. }
  402. .selects {
  403. display: flex;
  404. flex-direction: row;
  405. margin-right: 43px;
  406. }
  407. .titleBar {
  408. display: flex;
  409. flex-direction: row;
  410. justify-content: space-between;
  411. align-items: center;
  412. .titleName {
  413. color: #ffffff;
  414. font-size: 16px;
  415. }
  416. }
  417. .buttons {
  418. display: flex;
  419. flex-direction: row-reverse;
  420. margin-bottom: 10px;
  421. .btn {
  422. margin-right: 15px;
  423. }
  424. }
  425. </style>