MalfunctionWarning.vue 32 KB

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