MalfunctionWarning.vue 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108
  1. <template>
  2. <div class="decision-page-1">
  3. <div class="query mg-b-8">
  4. <div class="query-items">
  5. <div class="query-item">
  6. <div class="lable">算法类型:</div>
  7. <div class="search-input">
  8. <el-select
  9. v-model="chooseAlgorithm"
  10. @change="algorithmChange(chooseAlgorithm)"
  11. clearable
  12. placeholder="请选择"
  13. popper-class="select"
  14. @clear="clear()"
  15. >
  16. <el-option
  17. v-for="item in algorithm"
  18. :key="item.name"
  19. :value="item.name"
  20. :label="item.name"
  21. >
  22. </el-option>
  23. </el-select>
  24. </div>
  25. </div>
  26. <div v-for="(item, index) in chooseAlgorithm.parameters" :key="index">
  27. {{ item.name }}:
  28. <input
  29. v-model="item.value"
  30. type="number"
  31. @focus="inputChange(item)"
  32. @blur="inputChange(item)"
  33. />
  34. </div>
  35. </div>
  36. </div>
  37. <div class="actions mg-b-8">
  38. <button class="btn" @click="TypeClick('sjfl')">数据分类</button>
  39. <button class="btn" @click="TypeClick('xljl')">模型记录</button>
  40. <button class="btn" @click="TypeClick('mxcc')">模型存储</button>
  41. </div>
  42. <el-row :type="'flex'" class="content">
  43. <el-col :span="16" class="pd-l-8">
  44. <panel :title="'训练记录'" :showLine="false">
  45. <div class="dataTitle">
  46. <div class="chooses">
  47. <el-date-picker
  48. class="picker"
  49. @change="changes"
  50. v-model="timeValue"
  51. type="datetimerange"
  52. range-separator="至"
  53. start-placeholder="开始日期"
  54. end-placeholder="结束日期"
  55. >
  56. </el-date-picker>
  57. <div class="contents">
  58. 风电场:
  59. <el-select
  60. v-model="selectValue"
  61. @change="search()"
  62. clearable
  63. placeholder="请选择"
  64. popper-class="select"
  65. style="width: 170px; margin-left: 20px"
  66. >
  67. <el-option
  68. v-for="item in options"
  69. :key="item.value"
  70. :value="item.value"
  71. :label="item.label"
  72. />
  73. </el-select>
  74. </div>
  75. <div class="contents">
  76. 机型:
  77. <el-select
  78. v-model="selectMoudle"
  79. @change="selectSearch()"
  80. clearable
  81. placeholder="全部"
  82. popper-class="select"
  83. style="width: 120px; margin-left: 20px"
  84. >
  85. <el-option
  86. v-for="item in moudleList"
  87. :key="item.value"
  88. :value="item.value"
  89. :label="item.label"
  90. />
  91. </el-select>
  92. </div>
  93. </div>
  94. <div class="buts">
  95. <button class="btn" @click="searchData()">查询</button>
  96. <button class="btn" @click="batchDeal()">批量处理</button>
  97. </div>
  98. </div>
  99. <el-table
  100. height="75vh"
  101. ref="multipleTable"
  102. empty-text="暂无数据"
  103. :data="dataList"
  104. :header-cell-style="{
  105. height: '40px',
  106. background: 'rgba(83, 98, 104, 0.2)',
  107. color: '#b2bdc0',
  108. 'border-bottom': '0px solid red',
  109. }"
  110. :cell-style="{
  111. height: '40px',
  112. 'border-bottom': 'solid 0px #242424',
  113. }"
  114. stripe
  115. style="width: 100%; margin-bottom: 10px"
  116. >
  117. <el-table-column
  118. prop="id"
  119. label="id"
  120. width="100"
  121. align="center"
  122. ></el-table-column>
  123. <el-table-column
  124. prop="faultTime"
  125. label="故障时间"
  126. width="210"
  127. align="center"
  128. ></el-table-column>
  129. <el-table-column
  130. prop="stationId"
  131. label="场站编号"
  132. width="120"
  133. align="center"
  134. ></el-table-column>
  135. <el-table-column
  136. prop="stationName"
  137. label="场站名称"
  138. width="150"
  139. align="center"
  140. ></el-table-column>
  141. <el-table-column
  142. prop="objectId"
  143. label="风机编号"
  144. width="120"
  145. align="center"
  146. ></el-table-column>
  147. <el-table-column
  148. prop="modelId"
  149. label="风机型号"
  150. width="120"
  151. align="center"
  152. ></el-table-column>
  153. <el-table-column
  154. prop="messageType"
  155. label="故障状态"
  156. width="120"
  157. align="center"
  158. ></el-table-column>
  159. <el-table-column
  160. prop="category1"
  161. label="类别"
  162. width="100"
  163. align="center"
  164. ></el-table-column>
  165. <el-table-column
  166. show-overflow-tooltip
  167. prop="alertText"
  168. label="故障内容"
  169. width="100"
  170. align="center"
  171. ></el-table-column>
  172. <el-table-column width="170" label="故障标签">
  173. <template #default="scope">
  174. <span>
  175. <el-select
  176. v-model="scope.row.labels"
  177. @change="selectChange(scope.row)"
  178. clearable
  179. placeholder="请选择"
  180. popper-class="select"
  181. style="width: 130px; margin-left: 30px"
  182. >
  183. <el-option
  184. v-for="item in faultLists"
  185. :key="item.faultcode"
  186. :label="item.faulttype"
  187. :value="item.faultcode"
  188. >
  189. </el-option>
  190. </el-select>
  191. </span>
  192. </template>
  193. </el-table-column>
  194. </el-table>
  195. </panel>
  196. </el-col>
  197. <el-col :span="8" class="pd-l-8">
  198. <panel :title="'演示过程图'" :showLine="false">
  199. <!-- <div class="records" v-if="recordList.length > 0">
  200. <el-select
  201. class="selectt"
  202. v-model="recordValue"
  203. @change="search()"
  204. clearable
  205. placeholder="请选择"
  206. popper-class="select"
  207. style="width: 130px; margin-left: 20px"
  208. >
  209. <el-option
  210. v-for="item in recordList"
  211. :key="item.names"
  212. :value="item.names"
  213. :label="item.names"
  214. />
  215. </el-select>
  216. 故障诊断模型:
  217. </div> -->
  218. <div
  219. class="scatterEcharts"
  220. id="scatter"
  221. @click="recordResults(storageList)"
  222. ></div>
  223. <div class="results" v-if="showTraining">
  224. <div class="progressTitle">
  225. <div v-if="!trainingFlag">数据获取中...</div>
  226. <div v-if="trainingFlag && width < 100">训练中...</div>
  227. <div v-if="trainingFlag && width === 100.0">训练完成</div>
  228. <div class="progressNum">
  229. 当前进度:{{ width >= 0 ? width : 0 }}%
  230. </div>
  231. </div>
  232. <div class="box">
  233. <div class="progress" :style="`width:${width}%;`"></div>
  234. <div class="line"></div>
  235. <div class="unprogress" :style="`width:${100 - width}%;`"></div>
  236. </div>
  237. </div>
  238. </panel>
  239. </el-col>
  240. </el-row>
  241. <DataClassify
  242. ref="dataClass"
  243. @click-training="handleTraining"
  244. @handleInterval="intervals"
  245. v-model="display"
  246. :allData="dataList"
  247. :chooseAlgorithm="chooseAlgorithm"
  248. ></DataClassify>
  249. <TrainingResults
  250. v-model="resultsDisplay"
  251. :allData="showList"
  252. :intervalValue="intervalValue"
  253. :moudleList="faultLists"
  254. @save-date="saveData"
  255. ></TrainingResults>
  256. <Records @results="recordResults" v-model="recordsDisplay"></Records>
  257. <BatchData
  258. v-model="batchDisplay"
  259. :moudleList="faultLists"
  260. :allData="dataList"
  261. @handleSave="saveData"
  262. ></BatchData>
  263. </div>
  264. </template>
  265. <script>
  266. import Panel from "../../components/coms/panel/panel.vue";
  267. import DataClassify from "./components/dataClassify.vue";
  268. import TrainingResults from "./components/trainingResults.vue";
  269. import Records from "./components/records.vue";
  270. import BatchData from "./components/batchData.vue";
  271. import partten from "@/helper/partten.js";
  272. import * as echarts from "echarts";
  273. import axios from "axios";
  274. export default {
  275. components: {
  276. Panel,
  277. partten,
  278. DataClassify,
  279. TrainingResults,
  280. Records,
  281. BatchData,
  282. },
  283. data() {
  284. return {
  285. faultLists: [],
  286. showTraining: false,
  287. trainingFlag: false,
  288. recordsDisplay: false,
  289. batchDisplay: false,
  290. width: 60,
  291. recordValue: "",
  292. // recordList: [],
  293. monitoringList: [],
  294. algorithm: [], //算法
  295. display: false,
  296. resultsDisplay: false,
  297. timeValue: [],
  298. showList: [],
  299. storageList: [],
  300. chooseAlgorithm: {},
  301. selectValue: "NSS_FDC",
  302. selectMoudle: "UP82",
  303. intervalValue: 1,
  304. timeList: [
  305. { value: "1小时" },
  306. { value: "1.5小时" },
  307. { value: "2小时" },
  308. { value: "2.5小时" },
  309. { value: "3小时" },
  310. { value: "3.5小时" },
  311. { value: "4小时" },
  312. { value: "4.5小时" },
  313. { value: "5小时" },
  314. { value: "5.5小时" },
  315. { value: "6小时" },
  316. { value: "6.5小时" },
  317. { value: "7小时" },
  318. { value: "7.5小时" },
  319. { value: "8小时" },
  320. { value: "8.5小时" },
  321. { value: "9小时" },
  322. { value: "9.5小时" },
  323. { value: "10小时" },
  324. { value: "10.5小时" },
  325. { value: "11小时" },
  326. { value: "11.5小时" },
  327. { value: "12小时" },
  328. ],
  329. options: [
  330. {
  331. value: "NSS_FDC",
  332. label: "牛首山风电场",
  333. station: [
  334. {
  335. lable: "UP82",
  336. value: "UP82",
  337. },
  338. ],
  339. },
  340. {
  341. value: "MHS_FDC",
  342. label: "麻黄山风电场",
  343. station: [
  344. {
  345. lable: "UP77",
  346. value: "UP77",
  347. },
  348. {
  349. lable: "UP105-2000-S",
  350. value: "UP105-2000-S",
  351. },
  352. ],
  353. },
  354. {
  355. value: "QS_FDC",
  356. label: "青山风电场",
  357. station: [
  358. {
  359. lable: "CCWE-1500",
  360. value: "CCWE-1500",
  361. },
  362. {
  363. lable: "UP105-2000-S",
  364. value: "UP105-2000-S",
  365. },
  366. ],
  367. },
  368. {
  369. value: "SBQ_FDC",
  370. label: "石板泉风电场",
  371. station: [
  372. {
  373. lable: "UP82",
  374. value: "UP82",
  375. },
  376. {
  377. lable: "UP97",
  378. value: "UP97",
  379. },
  380. {
  381. lable: "UP105-2000-S",
  382. value: "UP105-2000-S",
  383. },
  384. ],
  385. },
  386. {
  387. value: "XS_FDC",
  388. label: "香山风电场",
  389. station: [
  390. {
  391. lable: "UP97",
  392. value: "UP97",
  393. },
  394. {
  395. lable: "UP105-2000-S",
  396. value: "UP105-2000-S",
  397. },
  398. ],
  399. },
  400. ],
  401. moudleList: [],
  402. dataList: [],
  403. allData: [],
  404. resultList: [],
  405. series: [
  406. {
  407. name: "",
  408. symbolSize: 10,
  409. encode: { tooltip: [0, 1] },
  410. itemStyle: {
  411. color: "#ffffff",
  412. },
  413. data: [
  414. [11.0, 8.04],
  415. [8.07, 6.95],
  416. [13.0, 7.58],
  417. [9.05, 8.81],
  418. [11.0, 8.33],
  419. [14.0, 7.66],
  420. [13.4, 6.81],
  421. [10.0, 6.33],
  422. [14.0, 8.96],
  423. [12.5, 6.82],
  424. [9.15, 7.2],
  425. [11.5, 7.2],
  426. [3.03, 4.23],
  427. [12.2, 7.83],
  428. [2.02, 4.47],
  429. [1.05, 3.33],
  430. [4.05, 4.96],
  431. [6.03, 7.24],
  432. [12.0, 6.26],
  433. [12.0, 8.84],
  434. [7.08, 5.82],
  435. [5.02, 5.68],
  436. ],
  437. type: "scatter",
  438. },
  439. {
  440. name: "",
  441. encode: { tooltip: [0, 1] },
  442. symbolSize: 10,
  443. itemStyle: {
  444. color: "#FF0000",
  445. },
  446. data: [
  447. [1.0, 8.04],
  448. [18.07, 6.95],
  449. [3.0, 7.58],
  450. [19.05, 8.81],
  451. [1.0, 8.33],
  452. [4.0, 7.66],
  453. [3.4, 6.81],
  454. [20.0, 6.33],
  455. [4.0, 8.96],
  456. [2.5, 6.82],
  457. [19.15, 7.2],
  458. [11.5, 7.2],
  459. [3.03, 4.23],
  460. [12.2, 7.83],
  461. [2.02, 4.47],
  462. [1.05, 3.33],
  463. [4.05, 4.96],
  464. [6.03, 7.24],
  465. [12.0, 6.26],
  466. [12.0, 8.84],
  467. [7.08, 5.82],
  468. [5.02, 5.68],
  469. ],
  470. type: "scatter",
  471. },
  472. ],
  473. colors: [
  474. "#FFFFFF",
  475. "#FF0000",
  476. "#820041",
  477. "#FF00FF",
  478. "#8600FF",
  479. "#0000C6",
  480. "#00FFFF",
  481. "#00DB00",
  482. "#F9F900",
  483. "#FF5809",
  484. "#984B4B",
  485. "#AFAF61",
  486. "#5151A2",
  487. "#FFAF60",
  488. "#B766AD",
  489. "#006030",
  490. "#2894FF",
  491. "#796400",
  492. ],
  493. };
  494. },
  495. created() {
  496. // this.storageList = JSON.parse(
  497. // '[{"id":367361,"faultTime":"2021-10-22 10:46:09","messageType":1,"snapID":3744,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_13","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-22 12:29:56","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山13号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_13","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":366763,"faultTime":"2021-10-21 16:14:59","messageType":1,"snapID":27513,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_15","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-26 08:14:33","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山15号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_15","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":366005,"faultTime":"2021-10-21 12:52:56","messageType":1,"snapID":36067,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_12","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-25 09:14:11","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山12号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_12","opened":false,"categoryName":"风机","colors":"#FFFFFF"},{"id":365991,"faultTime":"2021-10-21 12:51:16","messageType":1,"snapID":36067,"confirmType":0,"confirmTime":null,"confirmPerson":null,"stationId":"NSS_FDC","projectId":"NSS01_GC","lineId":"NSS02_XL","windturbineId":"NG01_12","alertValue":0,"rank":"5","category1":"FJ","category2":"GZ","category3":"TJ","lastUpdateTime":"2021-10-25 09:14:11","lastUpdatePerson":"system","stationName":"牛首山风电场","projectName":null,"lineName":null,"windturbineName":"牛首山12号风机","alertText":"总故障","modelId":"UP82","objectName":"牛首山风电场","messageTypeString":"触发","objectId":"NG01_12","opened":false,"categoryName":"风机","colors":"#FFFFFF"}]'
  498. // );
  499. let select = this.options.filter(
  500. (item) => item.value === this.selectValue
  501. )[0];
  502. this.selectMoudle = select.station[0].lable;
  503. this.moudleList = select.station;
  504. if (this.timeValue.length === 0) {
  505. let date = new Date();
  506. this.timeValue[0] = date.getTime() - 86400000;
  507. this.timeValue[1] = date.getTime();
  508. }
  509. this.searchData();
  510. this.getType();
  511. // this.getRecords();
  512. this.getfaultLables();
  513. this.$nextTick(() => {
  514. this.getScatter();
  515. });
  516. },
  517. methods: {
  518. getType() {
  519. let that = this;
  520. this.API.requestData({
  521. method: "GET",
  522. subUrl: "http://192.168.10.18:8080/api/coordinate/algorithm",
  523. data: {
  524. type: 0,
  525. },
  526. success(res) {
  527. if (res) {
  528. that.algorithm = res;
  529. that.chooseAlgorithm = res[0];
  530. }
  531. },
  532. });
  533. },
  534. search() {
  535. let select = this.options.filter(
  536. (item) => item.value === this.selectValue
  537. )[0];
  538. this.selectMoudle = select.station[0].lable;
  539. this.moudleList = select.station;
  540. },
  541. searchData(realFlag) {
  542. let loading = "";
  543. if (!realFlag) {
  544. this.allData = [];
  545. this.monitoringList = [];
  546. loading = this.$loading({
  547. lock: true,
  548. text: "数据加载中",
  549. spinner: "el-icon-loading",
  550. background: "rgba(0, 0, 0, 0.7)",
  551. });
  552. }
  553. const that = this;
  554. this.API.requestData({
  555. method: "GET",
  556. subUrl: "http://192.168.10.18:8075/fault/history/list",
  557. data: {
  558. pagenum: "1",
  559. pagesize: 10000,
  560. stationid: this.selectValue,
  561. starttime: new Date(this.timeValue[0]).formatDate(
  562. "yyyy-MM-dd hh:mm:ss"
  563. ),
  564. endtime: new Date(this.timeValue[1]).formatDate(
  565. "yyyy-MM-dd hh:mm:ss"
  566. ),
  567. },
  568. success(res) {
  569. if (res) {
  570. let arr = [];
  571. res.forEach((item, index) => {});
  572. // let realData = [];
  573. if (!realFlag) {
  574. loading.close();
  575. }
  576. res.forEach((item, index) => {
  577. if (item.messageType === 1 && item.category1 === "FJ") {
  578. item.messageType = "触发";
  579. that.allData.push(item);
  580. if (arr.length < 11) {
  581. item.colors = "#ffffff";
  582. arr.push(item);
  583. } else if (arr.length < 33) {
  584. item.colors = "#FF0000";
  585. arr.push(item);
  586. }
  587. that.storageList = arr;
  588. // if (realFlag) {
  589. // if (that.monitoringList.length > 0) {
  590. // let arr = that.monitoringList.filter(
  591. // (val) => val.id === item.id
  592. // );
  593. // if (arr.length >= 0) {
  594. // realData.push(item);
  595. // }
  596. // }
  597. // } else {
  598. // that.allData.push(item);
  599. // that.monitoringList.push(item);
  600. // }
  601. }
  602. });
  603. that.queryData();
  604. // if (realFlag) {
  605. // that.monitoringList = [];
  606. // res.forEach((item) => {
  607. // if (item.messageType === "触发" && item.category1 === "FJ") {
  608. // that.monitoringList.push(item);
  609. // }
  610. // });
  611. // that.startTraining(realData);
  612. // }
  613. that.selectSearch();
  614. } else {
  615. loading.close();
  616. }
  617. },
  618. });
  619. },
  620. queryData() {
  621. let param = [];
  622. this.allData.forEach((item) => {
  623. param.push(item.id);
  624. });
  625. let that = this;
  626. that.API.requestData({
  627. method: "GET",
  628. subUrl: "http://192.168.1.18:9002/case/fault/list",
  629. data: {
  630. ids: param.join(","),
  631. },
  632. success(res) {
  633. if (res) {
  634. res.data.forEach((item) => {
  635. that.allData.filter((val) => val.id === item.faultid)[0].labels =
  636. item.faultcode;
  637. that.allData.filter((items) => items.id === item.faultid)[0].ids =
  638. item.id;
  639. });
  640. }
  641. },
  642. });
  643. },
  644. getFaultList(index) {
  645. let result = this.resultList[index];
  646. let that = this;
  647. this.API.requestData({
  648. method: "GET",
  649. subUrl: "http://192.168.10.18:8075/fault/history/",
  650. data: {
  651. ids: result.join(","),
  652. },
  653. success(res) {
  654. if (res) {
  655. res.forEach((item) => {
  656. item.colors = that.colors[index];
  657. });
  658. that.storageList =
  659. that.storageList.length > 0 ? [that.storageList, ...res] : res;
  660. index++;
  661. if (index < that.resultList.length) {
  662. that.getFaultList(index);
  663. }
  664. }
  665. },
  666. });
  667. },
  668. selectSearch() {
  669. this.dataList = [];
  670. if (this.selectMoudle === "全部") {
  671. this.dataList = this.allData;
  672. } else {
  673. this.allData.forEach((item) => {
  674. if (item.modelId.indexOf(this.selectMoudle) != -1) {
  675. this.dataList.push(item);
  676. }
  677. });
  678. }
  679. },
  680. getScatter() {
  681. let chartDom = document.getElementById("scatter");
  682. let myChart = echarts.init(chartDom);
  683. let option = {
  684. legend: {
  685. show: true,
  686. data: ["测试", "测试1"],
  687. right: 56,
  688. icon: "circle",
  689. itemWidth: 6,
  690. inactiveColor: "#606769",
  691. textStyle: {
  692. color: "#B3BDC0",
  693. fontSize: 12,
  694. },
  695. },
  696. xAxis: {
  697. splitLine: { show: false },
  698. },
  699. yAxis: {
  700. splitLine: { show: false },
  701. },
  702. tooltip: {
  703. position: "top",
  704. },
  705. series: this.series,
  706. };
  707. option && myChart.setOption(option);
  708. },
  709. algorithmChange(val) {
  710. this.chooseAlgorithm = this.algorithm.filter(
  711. (item) => item.name === val
  712. )[0];
  713. },
  714. TypeClick(btnType) {
  715. if (btnType === "sjfl") {
  716. this.display = true;
  717. } else if (btnType === "xljl") {
  718. this.recordsDisplay = true;
  719. }
  720. },
  721. handleTraining() {
  722. let that = this;
  723. that.resultList = [];
  724. this.API.requestData({
  725. method: "GET",
  726. subUrl: "http://192.168.10.18:8080/api/coordinate/",
  727. success(res) {
  728. if (res) {
  729. let dataList = [];
  730. res.forEach((item, index) => {
  731. let idList = [];
  732. item.value.forEach((val) => {
  733. let datas = {};
  734. let arr = val[2].split("-");
  735. let dataArr = [];
  736. datas.name =
  737. arr[0] +
  738. "-" +
  739. new Date(Number(arr[1])).formatDate("yyyy-MM-dd hh:mm:ss");
  740. dataArr.push([Number(val[0]), Number(val[1])]);
  741. idList.push(arr[2]);
  742. datas.symbolSize = 10;
  743. datas.encode = { tooltip: [0, 1] };
  744. datas.data = dataArr;
  745. datas.type = "scatter";
  746. datas.itemStyle = { color: that.colors[index] };
  747. dataList.push(datas);
  748. });
  749. that.resultList.push(idList);
  750. });
  751. that.series = dataList;
  752. that.getScatter();
  753. }
  754. },
  755. });
  756. this.API.requestData({
  757. method: "GET",
  758. subUrl: "http://192.168.10.18:8080/api/coordinate/progress",
  759. success(res) {
  760. that.showTraining = true;
  761. if (res) {
  762. that.trainingFlag = res.value === -1 ? false : true;
  763. that.width = res.value === -1 ? -1 : (res.value * 100).toFixed(2);
  764. if (that.width < 100) {
  765. setTimeout(() => {
  766. that.handleTraining();
  767. }, 1000);
  768. } else {
  769. if (that.resultList.length > 0) {
  770. that.storageList = [];
  771. that.getFaultList(0);
  772. }
  773. that.$refs.dataClass.reset();
  774. }
  775. }
  776. },
  777. });
  778. },
  779. recordResults(val) {
  780. this.showList = val;
  781. this.resultsDisplay = true;
  782. },
  783. inputChange(val) {
  784. val.value = Math.abs(val.value);
  785. if (val.type === "float") {
  786. val.value = val.value.toFixed(2);
  787. } else {
  788. val.value = val.value.toFixed(0);
  789. }
  790. },
  791. clear() {
  792. this.chooseAlgorithm = {};
  793. },
  794. intervals(intervalValue) {
  795. this.intervalValue = intervalValue;
  796. },
  797. // getRecords() {
  798. // let that = this;
  799. // this.API.requestData({
  800. // method: "GET",
  801. // subUrl: "http://192.168.10.18:8080/api/coordinate/history",
  802. // success(res) {
  803. // if (res) {
  804. // res.forEach((item) => {
  805. // let arr = item.name.split("-");
  806. // item.names =
  807. // arr[0] +
  808. // "-" +
  809. // new Date(Number(arr[1])).formatDate("yyyy-MM-dd hh:mm:ss");
  810. // });
  811. // that.recordValue = res[0].names;
  812. // that.recordList = res;
  813. // }
  814. // },
  815. // });
  816. // },
  817. // startTraining(realData) {
  818. // let params = {};
  819. // let dataInfos = [];
  820. // realData.forEach((item) => {
  821. // let datas = {};
  822. // datas.startTs =
  823. // new Date(item.faultTime).getTime() - this.intervalValue * 3600000;
  824. // datas.endTs = new Date(item.faultTime).getTime();
  825. // datas.thingId = item.objectId;
  826. // datas.modelId = item.modelId;
  827. // datas.stationId = item.stationId;
  828. // datas.id = item.id;
  829. // datas.faultTime = new Date(item.faultTime).getTime();
  830. // dataInfos.push(datas);
  831. // });
  832. // let paramt = this.recordList.filter(
  833. // (item) => item.names === this.recordValue
  834. // )[0];
  835. // let arr = paramt.name.split("-");
  836. // let algorithm = {
  837. // name: arr[0],
  838. // parameter: paramt.name,
  839. // };
  840. // params.algorithm = algorithm;
  841. // params.dataInfos = dataInfos;
  842. // axios({
  843. // method: "post",
  844. // url: "http://192.168.10.18:8080/api/coordinate/execute",
  845. // data: params,
  846. // header: {
  847. // "Content-Type": "application/json",
  848. // },
  849. // }).then((res) => {
  850. // if (res) {
  851. // let dataList = [];
  852. // res.forEach((item, index) => {
  853. // let idList = [];
  854. // item.value.forEach((val) => {
  855. // let datas = {};
  856. // let arr = val[2].split("-");
  857. // let dataArr = [];
  858. // datas.name =
  859. // arr[0] +
  860. // "-" +
  861. // new Date(Number(arr[1])).formatDate("yyyy-MM-dd hh:mm:ss");
  862. // dataArr.push([Number(val[0]), Number(val[1])]);
  863. // idList.push(arr[2]);
  864. // datas.symbolSize = 10;
  865. // datas.encode = { tooltip: [0, 1] };
  866. // datas.data = dataArr;
  867. // datas.type = "scatter";
  868. // datas.itemStyle = { color: this.colors[index] };
  869. // dataList.push(datas);
  870. // });
  871. // this.resultList.push(idList);
  872. // });
  873. // this.series = dataList;
  874. // this.getScatter();
  875. // }
  876. // });
  877. // },
  878. getfaultLables() {
  879. let that = this;
  880. this.API.requestData({
  881. method: "GET",
  882. subUrl: "http://192.168.1.18:9002/know/fault/type/all",
  883. success(res) {
  884. if (res) {
  885. that.faultLists = res.data;
  886. }
  887. },
  888. });
  889. },
  890. batchDeal() {
  891. this.batchDisplay = true;
  892. },
  893. selectChange(data) {
  894. let arr = [];
  895. arr.push(data);
  896. this.saveData(arr);
  897. },
  898. saveData(data) {
  899. let params = [];
  900. data.forEach((item) => {
  901. if (item.labels) {
  902. let obj = {
  903. faultid: item.id,
  904. stationcn: item.stationName,
  905. windturbineid: item.objectId,
  906. faulttype: this.faultLists.filter(
  907. (items) => items.faultcode === item.labels
  908. )[0]?.faulttype,
  909. faultcode: item.labels,
  910. starttime: item.faultTime,
  911. model: item.modelId,
  912. stationen: item.stationId,
  913. tag: 0,
  914. };
  915. if (item.ids) {
  916. obj.id = item.ids;
  917. }
  918. params.push(obj);
  919. }
  920. });
  921. if (params.length > 0) {
  922. axios({
  923. method: "post",
  924. url: "http://192.168.1.18:9002/case/fault/insert",
  925. data: params,
  926. header: {
  927. "Content-Type": "application/json",
  928. },
  929. }).then((res) => {
  930. if (res.data.code !== 200) {
  931. this.BASE.showMsg({
  932. type: "error",
  933. msg: "标签修改失败",
  934. });
  935. }
  936. });
  937. }
  938. },
  939. },
  940. };
  941. </script>
  942. <style scope lang="less">
  943. el-table__row > td {
  944. border: none;
  945. }
  946. .el-table::before {
  947. height: 0px;
  948. }
  949. .decision-page-1 {
  950. .com-panel .panel-title {
  951. line-height: 3.4259vh;
  952. }
  953. .tools {
  954. display: flex;
  955. line-height: 3.4259vh;
  956. .tool-block {
  957. display: flex;
  958. align-items: center;
  959. margin-left: 0.741vh;
  960. .legend {
  961. flex: auto;
  962. width: 0.741vh;
  963. height: 0.741vh;
  964. margin-right: 0.741vh;
  965. &.long {
  966. width: 2.963vh;
  967. height: 0.37vh;
  968. }
  969. }
  970. .legend-text {
  971. color: @gray-l;
  972. font-size: @fontsize-s;
  973. }
  974. }
  975. }
  976. .project-table {
  977. overflow: auto;
  978. tbody {
  979. height: calc(100vh - 24.5vh);
  980. }
  981. td {
  982. color: #b2bdc0;
  983. }
  984. }
  985. .contentMx {
  986. width: 100%;
  987. overflow-x: auto;
  988. }
  989. .activeMx {
  990. width: 150%;
  991. }
  992. .dataTitle {
  993. display: flex;
  994. flex-direction: row;
  995. align-items: center;
  996. justify-content: space-between;
  997. margin-bottom: 20px;
  998. margin-top: 10px;
  999. .chooses {
  1000. display: flex;
  1001. flex-direction: row;
  1002. align-items: center;
  1003. }
  1004. .timeInput {
  1005. width: 30px;
  1006. }
  1007. .contents {
  1008. display: flex;
  1009. flex-direction: row;
  1010. align-items: center;
  1011. margin-left: 30px;
  1012. }
  1013. }
  1014. .scatterEcharts {
  1015. width: 600px;
  1016. height: 500px;
  1017. }
  1018. .progressTitle {
  1019. display: flex;
  1020. flex-direction: row;
  1021. .progressNum {
  1022. margin-left: 20px;
  1023. }
  1024. }
  1025. .results {
  1026. margin-left: 35px;
  1027. }
  1028. .box {
  1029. width: 80%;
  1030. margin-top: 20px;
  1031. height: 20px;
  1032. display: flex;
  1033. align-items: center;
  1034. .progress {
  1035. background: linear-gradient(to right, #0d692c, #6df0a0);
  1036. height: 16px;
  1037. z-index: 1;
  1038. }
  1039. .line {
  1040. width: 1px;
  1041. height: 70px;
  1042. z-index: 2;
  1043. background: linear-gradient(
  1044. to bottom,
  1045. rgba(158, 151, 151, 0) 0%,
  1046. rgba(0, 0, 0, 0) 10%,
  1047. rgba(255, 255, 255, 0.3) 20%,
  1048. rgba(255, 255, 255, 0.6) 30%,
  1049. rgba(255, 255, 255, 0.8) 40%,
  1050. rgba(255, 255, 255, 1) 50%,
  1051. rgba(255, 255, 255, 0.8) 60%,
  1052. rgba(255, 255, 255, 0.6) 70%,
  1053. rgba(255, 255, 255, 0.3) 80%,
  1054. rgba(0, 0, 0, 0) 90%,
  1055. rgba(0, 0, 0, 0) 100%
  1056. );
  1057. transition: width 0.2s linear;
  1058. }
  1059. .unprogress {
  1060. background: linear-gradient(to right, #41acec, #003e7a);
  1061. height: 16px;
  1062. z-index: 1;
  1063. }
  1064. }
  1065. }
  1066. input::-webkit-outer-spin-button,
  1067. input::-webkit-inner-spin-button {
  1068. -webkit-appearance: none;
  1069. }
  1070. .records {
  1071. width: 100%;
  1072. display: flex;
  1073. flex-direction: row-reverse;
  1074. align-items: center;
  1075. }
  1076. .selectt {
  1077. width: 270px !important;
  1078. }
  1079. .buts {
  1080. display: flex;
  1081. flex-direction: row;
  1082. align-items: center;
  1083. justify-content: center;
  1084. }
  1085. </style>