index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. <template>
  2. <el-scrollbar height="92vh">
  3. <div class="query mg-b-8">
  4. <div class="query-items">
  5. <div class="query-item" style="width: 200px;">
  6. <div class="lable">场站:</div>
  7. <div class="search-input">
  8. <el-select v-model="station" placeholder="请选择" popper-class="select" @change="stationChange">
  9. <el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name"> </el-option>
  10. </el-select>
  11. </div>
  12. </div>
  13. <div class="query-item" style="width: 230px;">
  14. <div class="lable">故障类型:</div>
  15. <div class="search-input">
  16. <el-select v-model="widget" multiple collapse-tags clearable placeholder="请选择" popper-class="select">
  17. <el-option @click="checkAll" :class="active?'green':''">
  18. 全选
  19. </el-option>
  20. <el-option v-for="item in widgetArr" :key="item.value" :value="item.value" :label="item.label">
  21. </el-option>
  22. </el-select>
  23. </div>
  24. </div>
  25. <div class="query-item" style="width: 230px;">
  26. <div class="lable">风机型号:</div>
  27. <div class="search-input">
  28. <el-select v-model="model" multiple collapse-tags clearable placeholder="请选择" popper-class="select">
  29. <el-option v-for="item in fjxh" :key="item.value" :value="item.value" :label="item.label">
  30. </el-option>
  31. </el-select>
  32. </div>
  33. </div>
  34. <div class="query-item" style="width: 180px;">
  35. <div class="lable">模型:</div>
  36. <div class="search-input">
  37. <el-select v-model="mx" collapse-tags clearable placeholder="请选择" popper-class="select">
  38. <el-option key="1" value="list" label="原数据"></el-option>
  39. <el-option key="2" value="alg" label="DB-SCAN"></el-option>
  40. </el-select>
  41. </div>
  42. </div>
  43. <div class="query-item">
  44. <div class="lable">时间:</div>
  45. <div class="search-input">
  46. <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
  47. end-placeholder="结束日期">
  48. </el-date-picker>
  49. </div>
  50. </div>
  51. <div class="query-actions">
  52. <button class="btn" @click="list">查询</button>
  53. <button class="btn" @click="query()">导入</button>
  54. <button class="btn" @click="export">导出</button>
  55. </div>
  56. </div>
  57. </div>
  58. <el-row :type="'flex'" class="content">
  59. <ComTable :data="tableData" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
  60. v-loading="tableLoading" element-loading-text="拼命加载中"
  61. element-loading-background="rgba(0, 0, 0, 0.8)" v-if="mx=='list'"></ComTable>
  62. <ComTable :data="tableData2" :pageSize="pageSize" @onPagging="onChangePage" height="84vh"
  63. v-loading="tableLoading" element-loading-text="拼命加载中"
  64. element-loading-background="rgba(0, 0, 0, 0.8)" v-else></ComTable>
  65. </el-row>
  66. <el-dialog title="原始数据对比" v-model="gzCgd" width="80%" top="5vh" custom-class="modal" :close-on-click-modal="false" :before-close="onClickDialogClose" class="isvisiable">
  67. <Point :data="gzCgdData" :st='st' v-if='gzCgd'/>
  68. </el-dialog>
  69. </el-scrollbar>
  70. </template>
  71. <script>
  72. import ComTable from "@/components/coms/table/table.vue";
  73. import Point from "./point.vue";
  74. export default {
  75. components: {
  76. ComTable,
  77. Point,
  78. },
  79. data() {
  80. const that = this;
  81. return {
  82. active: true,
  83. selectAll: true,
  84. pageIndex: 1,
  85. pageSize: 20,
  86. gzCgd: false, //传感点组件隐藏或显示
  87. gzCgdData: [], //传感点参数
  88. st:'',
  89. widgetArr: [],
  90. ChangZhan: [],
  91. fjxh: [],
  92. fjxhArr: [],
  93. widget: [],
  94. model: [],
  95. mx:'list',
  96. time: [],
  97. station: '',
  98. tableData: {
  99. column: [{
  100. name: "序号",
  101. field: "index",
  102. is_light: false,
  103. width: '50px',
  104. },
  105. {
  106. name: "风机编号",
  107. field: "wtId",
  108. is_light: false,
  109. width: '150px',
  110. },
  111. {
  112. name: "故障类型",
  113. field: "tableTag",
  114. is_light: false,
  115. width: '150px',
  116. },
  117. {
  118. name: "故障现象",
  119. field: "symptom",
  120. is_light: false,
  121. width: '300px',
  122. },
  123. {
  124. name: "时间",
  125. field: "tableTime",
  126. is_light: false,
  127. width: '350px',
  128. },
  129. {
  130. name: "风机型号",
  131. field: "tableModel",
  132. is_light: false,
  133. width: '150px',
  134. },
  135. {
  136. name: "厂商",
  137. field: "tableManufacturer",
  138. is_light: false,
  139. width: '150px',
  140. },
  141. {
  142. name: "操作",
  143. field: "cz",
  144. is_light: false,
  145. width: '200px',
  146. template: () => {
  147. return (
  148. "<el-button type='text' style='cursor: pointer;' value='config'>传感点</el-button>&nbsp"
  149. );
  150. },
  151. click(e, row) {
  152. that.onClickOption(e, row);
  153. },
  154. },
  155. ],
  156. data: [],
  157. },
  158. tableData2: {
  159. column: [{
  160. name: "序号",
  161. field: "index",
  162. is_light: false,
  163. width: '50px',
  164. },
  165. {
  166. name: "风机编号",
  167. field: "wtId",
  168. is_light: false,
  169. width: '200px',
  170. },
  171. {
  172. name: "故障类型",
  173. field: "faulttype",
  174. is_light: false,
  175. width: '200px',
  176. },
  177. {
  178. name: "故障时间",
  179. field: "faultTime",
  180. is_light: false,
  181. width: '200px',
  182. },
  183. {
  184. name: "风机型号",
  185. field: "modelId",
  186. is_light: false,
  187. width: '200px',
  188. },
  189. {
  190. name: "操作",
  191. field: "cz",
  192. is_light: false,
  193. width: '200px',
  194. template: () => {
  195. return (
  196. "<el-button type='text' style='cursor: pointer;' value='config'>传感点</el-button>&nbsp"
  197. );
  198. },
  199. click(e, row) {
  200. that.onClickOption(e, row);
  201. },
  202. },
  203. ],
  204. data: [],
  205. },
  206. };
  207. },
  208. methods: {
  209. stationChange(){
  210. let fjxh = [];
  211. this.fjxhArr.forEach(ele => {
  212. if (ele.id == this.station) {
  213. ele.value.forEach(ele2 => {
  214. fjxh.push({
  215. label: ele2,
  216. value: ele2
  217. })
  218. })
  219. this.model = ele.value;
  220. }
  221. })
  222. this.fjxh = fjxh;
  223. },
  224. checkAll() {
  225. this.selectAll = !this.selectAll
  226. if (this.selectAll) {
  227. let widget = [];
  228. this.widgetArr.forEach(ele=>{
  229. widget.push(ele.value)
  230. })
  231. this.widget = widget;
  232. this.active = true;
  233. } else {
  234. this.active = false;
  235. this.widget = [];
  236. }
  237. },
  238. onChangePage(params) {
  239. this.pageIndex = params.pageIndex;
  240. this.pageSize = params.pageSize;
  241. this.list();
  242. },
  243. async startAjax() {
  244. var that = this;
  245. that.time = [new Date((new Date() - 3600 * 1000 * 24 * 360)).formatDate("yyyy-MM-dd hh:mm:ss"), new Date()
  246. .formatDate("yyyy-MM-dd hh:mm:ss")
  247. ];
  248. await that.API.requestData({
  249. method: "GET",
  250. baseURL: "http://192.168.1.18:9002/",
  251. subUrl: "basic/widget/condition",
  252. success(res) {
  253. let widgetArr = [],
  254. widget = [];
  255. res.data.forEach((ele, index) => {
  256. widgetArr.push({
  257. label: ele.faulttype,
  258. value: ele.faultcode
  259. })
  260. widget.push(ele.faultcode)
  261. })
  262. that.widget = widget;
  263. that.widgetArr = widgetArr;
  264. },
  265. });
  266. await that.API.requestData({
  267. method: "GET",
  268. baseURL: "http://192.168.1.18:9002/",
  269. subUrl: "basic/station/all",
  270. success(res) {
  271. that.ChangZhan = res.data;
  272. that.station = res.data[1].name
  273. let fjxhArr = [];
  274. let model = [],
  275. fjxh = [];
  276. res.data.forEach(ele => {
  277. fjxhArr.push({
  278. id: ele.id,
  279. value: ele.model.split("/")
  280. })
  281. if (ele.id == "NSS_FDC") {
  282. model = ["UP82"];
  283. fjxh.push({
  284. label: "UP82",
  285. value: "UP82"
  286. })
  287. }
  288. })
  289. that.fjxhArr = fjxhArr;
  290. that.model = model;
  291. that.fjxh = fjxh;
  292. },
  293. });
  294. that.list()
  295. },
  296. onClickOption(e, row) { // 操作按钮
  297. let that = this;
  298. if ("config" == e.target.getAttribute("value")) { //传感点
  299. that.API.requestData({
  300. method: "GET",
  301. baseURL: "http://192.168.1.18:9002/",
  302. subUrl: "point/list",
  303. data: {
  304. wtId: row.wtId,
  305. widget: row.widget
  306. },
  307. success(res) {
  308. if (res.code == 200) {
  309. if(res.data.length){
  310. that.gzCgdData = res.data;
  311. if(that.mx == 'list'){
  312. that.st = Date.parse(new Date(row.tableTime.split(" - ")[0]));
  313. }else{
  314. that.st = Date.parse(new Date(row.faultTime));
  315. }
  316. that.gzCgd = true;
  317. }else{
  318. that.BASE.showMsg({
  319. msg: "暂无数据"
  320. });
  321. }
  322. }
  323. },
  324. });
  325. }
  326. },
  327. onClickDialogClose() { // 弹窗右上角关闭按钮
  328. this.gzCgd = false;
  329. },
  330. formatDate(dates) {
  331. var date = new Date(dates);
  332. var YY = date.getFullYear() + '-';
  333. var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  334. var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  335. var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  336. var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  337. var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  338. return YY + MM + DD + " " + hh + mm + ss;
  339. },
  340. list() {
  341. var that = this;
  342. let station = '',
  343. widget = ''
  344. if (typeof that.time[0].valueOf() != 'string') {
  345. that.time[0] = that.formatDate(that.time[0].valueOf())
  346. }
  347. if (typeof that.time[1].valueOf() != 'string') {
  348. that.time[1] = that.formatDate(that.time[1].valueOf())
  349. }
  350. if (typeof that.station.valueOf() == 'string') {
  351. that.ChangZhan.forEach(ele => {
  352. if (ele.name == that.station) {
  353. station = ele.id
  354. }
  355. })
  356. }
  357. if (typeof that.widget.valueOf() == 'string') {
  358. that.widgetArr.forEach(ele => {
  359. if (ele.label == that.widget) {
  360. widget = ele.value
  361. }
  362. })
  363. }
  364. if (that.model.length== 0) {
  365. that.BASE.showMsg({
  366. type: "warning",
  367. msg: "请选择风机型号",
  368. });
  369. return
  370. }
  371. if (that.widget.length == 0) {
  372. that.BASE.showMsg({
  373. type: "warning",
  374. msg: "请选择部件",
  375. });
  376. return
  377. }
  378. that.tableData.data = [];
  379. that.tableData2.data = [];
  380. that.API.requestData({
  381. showLoading: true,
  382. method: "GET",
  383. baseURL: "http://192.168.10.4:9002/",
  384. subUrl: "case/fault/list",
  385. data: {
  386. widget: widget ? widget : that.widget,
  387. station: station ? station : that.station,
  388. model: that.model,
  389. st: that.time[0].valueOf(),
  390. et: that.time[1].valueOf()
  391. },
  392. success(res) {
  393. if (res.code == 200) {
  394. if (res.data.length) {
  395. let data = res.data;
  396. if(that.mx == 'list'){
  397. let k = 0;
  398. for (var i = 0; i < data.length; i++) {
  399. if(data[i].endtime != undefined){
  400. k ++;
  401. let obj = {
  402. index: k,
  403. tableTag: data[i].faulttype,
  404. symptom: data[i].symptom,
  405. tableModel: data[i].model,
  406. tableTime: data[i].starttime + ' - ' + data[i].endtime,
  407. tableManufacturer: data[i].manufacturer,
  408. wtId: data[i].windturbineid,
  409. widget:data[i].faultcode
  410. };
  411. that.tableData.data.push(obj);
  412. }
  413. }
  414. }else{
  415. that.tableData2.data = [];
  416. let k = 0;
  417. for (var i = 0; i < data.length; i++) {
  418. if(data[i].endtime == undefined){
  419. k ++;
  420. let obj = {
  421. index: k,
  422. wtId: data[i].windturbineid,
  423. faulttype: data[i].faulttype,
  424. modelId: data[i].model,
  425. faultTime: data[i].starttime,
  426. widget:data[i].faultcode
  427. };
  428. that.tableData2.data.push(obj);
  429. }
  430. }
  431. }
  432. }
  433. }
  434. },
  435. });
  436. },
  437. formatJson(filterVal, jsonData) {
  438. return jsonData.map(v => filterVal.map(j => v[j]));
  439. },
  440. export() {
  441. let that = this;
  442. const {export_json_to_excel} = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径
  443. let tHeader = []; // 上面设置Excel的表格第一行的标题
  444. let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
  445. that.tableData.column.forEach(ele => {
  446. if(ele.field != 'cz'){
  447. tHeader.push(ele.name);
  448. filterVal.push(ele.field);
  449. }
  450. });
  451. const data = that.formatJson(filterVal, that.tableData.data);
  452. export_json_to_excel(tHeader, data, '故障样本库'); // 最后一个是表名字
  453. },
  454. },
  455. created() {
  456. this.startAjax();
  457. },
  458. watch: {
  459. mx(){
  460. this.list();
  461. }
  462. },
  463. };
  464. </script>
  465. <style lang="less" scoped>
  466. .mb10 {
  467. margin-bottom: 10px;
  468. }
  469. .el-select.w {
  470. width: 100%;
  471. }
  472. // .el-range-editor.w{width: 100%;}
  473. </style>