alarm-center-1.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. <template>
  2. <div class="alarm-center-1">
  3. <div class="action-bar">
  4. <div class="query mg-b-16">
  5. <div class="query-items">
  6. <div class="query-item">
  7. <div class="lable">风场:</div>
  8. <div class="search-input">
  9. <el-select
  10. v-model="wpvalue"
  11. clearable
  12. placeholder="请选择"
  13. popper-class="select"
  14. >
  15. <el-option
  16. v-for="item in wpoptions"
  17. :key="item.id"
  18. :label="item.name"
  19. :value="item.id"
  20. >
  21. </el-option>
  22. </el-select>
  23. </div>
  24. </div>
  25. <div class="query-item">
  26. <div class="lable">开始日期:</div>
  27. <div class="search-input">
  28. <el-date-picker
  29. v-model="startdate"
  30. type="date"
  31. placeholder="选择日期"
  32. popper-class="date-select"
  33. >
  34. </el-date-picker>
  35. </div>
  36. </div>
  37. <div class="query-item">
  38. <div class="lable">结束日期:</div>
  39. <div class="search-input">
  40. <el-date-picker
  41. v-model="enddate"
  42. type="date"
  43. placeholder="选择日期"
  44. popper-class="date-select"
  45. >
  46. </el-date-picker>
  47. </div>
  48. </div>
  49. <div class="query-item">
  50. <div class="lable">规则:</div>
  51. <el-cascader
  52. style="width: 240px"
  53. size="mini"
  54. popper-class="search-select"
  55. :options="cascaderOptions"
  56. :props="cascaderProps"
  57. v-model="cascaderSel"
  58. collapse-tags
  59. :clearable="true"
  60. ></el-cascader>
  61. </div>
  62. </div>
  63. <div class="query-actions">
  64. <button class="btn green" @click="searchData">搜索</button>
  65. <button class="btn green" @click="searchTree">筛选</button>
  66. </div>
  67. </div>
  68. </div>
  69. <panel-3 class="table-panel">
  70. <table-3 :data="tableData" :height="'85vh'">
  71. <template v-for="(item, i) in column" :key="i" #[item]="scope">
  72. <div class="bar" @click="showChart(scope)">
  73. <div
  74. class="bar-percent"
  75. :style="{
  76. width:
  77. (scope.data.count &&
  78. scope.data.count / (scope.data.count + scope.data.time)) *
  79. 100 +
  80. 'px',
  81. }"
  82. ></div>
  83. <span class="value"
  84. >{{ scope.data.count && scope.data.count }} 次数</span
  85. >
  86. </div>
  87. <div class="bar" @click="showChart(scope)">
  88. <div
  89. class="bar-percent"
  90. :style="{
  91. width:
  92. (scope.data.count &&
  93. scope.data.time / (scope.data.count + scope.data.time)) *
  94. 100 +
  95. 'px',
  96. }"
  97. ></div>
  98. <span class="value"
  99. >{{ scope.data.count && scope.data.time }} 分钟</span
  100. >
  101. </div>
  102. </template>
  103. </table-3>
  104. </panel-3>
  105. <el-dialog
  106. :title="dialogTitle"
  107. v-model="dialogVisible"
  108. width="70%"
  109. top="10vh"
  110. custom-class="modal"
  111. :close-on-click-modal="false"
  112. >
  113. <div class="searchForm">
  114. <div class="choose">
  115. <button class="btn green">等间隔</button>
  116. <!-- <button :class="chooseStatus?'btn green':'btn'" @click="switchChange(1,'original')">原始数据</button> -->
  117. </div>
  118. <el-select
  119. v-if="!chooseStatus"
  120. @change="switchChange(selectValue)"
  121. class="inputs"
  122. v-model="selectValue"
  123. placeholder="请选择"
  124. >
  125. <el-option
  126. v-for="item in timeoptions"
  127. :key="item.value"
  128. :label="item.label"
  129. :value="item.value"
  130. >
  131. </el-option>
  132. </el-select>
  133. </div>
  134. <multiple-y-line-chart-normal
  135. height="500px"
  136. :list="Analysis"
  137. :yAxises="AnalysisYAxises"
  138. :showLegend="true"
  139. />
  140. </el-dialog>
  141. </div>
  142. </template>
  143. <script>
  144. import Panel3 from "../../components/coms/panel/panel3.vue";
  145. import Table3 from "../../components/coms/table/table3.vue";
  146. import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
  147. import BASE from '@tools/basicTool.js';
  148. export default {
  149. components: { Panel3, Table3, MultipleYLineChartNormal },
  150. data() {
  151. return {
  152. dialogTitle: "",
  153. chooseStatus: false,
  154. dialogVisible: false,
  155. chooseTime: [],
  156. wpvalue: "",
  157. wpid: "",
  158. wtId: "",
  159. descName: "",
  160. AnalysisName: "",
  161. AnalysisUnit: "",
  162. Analysis: [
  163. {
  164. title: "",
  165. yAxisIndex: 0, // 使用单位
  166. value: [],
  167. },
  168. ],
  169. AnalysisYAxises: [
  170. {
  171. name: "",
  172. min: "",
  173. max: "",
  174. unit: "",
  175. position: "left",
  176. },
  177. {
  178. name: "",
  179. min: "",
  180. max: "",
  181. unit: "",
  182. position: "right",
  183. },
  184. ],
  185. selectValue: "60",
  186. timeoptions: [
  187. {
  188. value: "60",
  189. label: "一分钟",
  190. },
  191. {
  192. value: "300",
  193. label: "五分钟",
  194. },
  195. {
  196. value: "600",
  197. label: "十分钟",
  198. },
  199. {
  200. value: "1800",
  201. label: "三十分钟",
  202. },
  203. {
  204. value: "3600",
  205. label: "一小时",
  206. },
  207. {
  208. value: "86400",
  209. label: "一天",
  210. },
  211. ],
  212. wpoptions: "",
  213. options: [],
  214. cascaderOptions: [],
  215. cascaderSel: [],
  216. cascaderProps: { multiple: true },
  217. column: [
  218. "风机偏航过程震动",
  219. "齿轮箱轴承温升超过40度",
  220. "三相电流不平衡",
  221. "断轴或联轴器打滑",
  222. "风速突变",
  223. ],
  224. columnObj: [
  225. {
  226. name: "风机编号",
  227. field: "name",
  228. width: "100px",
  229. minWidth: "100px",
  230. },
  231. {
  232. name: "风机偏航过程震动",
  233. field: "风机偏航过程震动",
  234. align: "left",
  235. slot: true,
  236. sortable: true,
  237. minWidth: "200px",
  238. },
  239. {
  240. name: "齿轮箱轴承温升超过40度",
  241. field: "齿轮箱轴承温升超过40度",
  242. align: "left",
  243. slot: true,
  244. sortable: true,
  245. minWidth: "200px",
  246. },
  247. {
  248. name: "三相电流不平衡",
  249. field: "三相电流不平衡",
  250. align: "left",
  251. slot: true,
  252. sortable: true,
  253. minWidth: "200px",
  254. },
  255. {
  256. name: "断轴或联轴器打滑",
  257. field: "断轴或联轴器打滑",
  258. align: "left",
  259. slot: true,
  260. sortable: true,
  261. minWidth: "200px",
  262. },
  263. {
  264. name: "风速突变",
  265. align: "left",
  266. field: "风速突变",
  267. slot: true,
  268. sortable: true,
  269. minWidth: "200px",
  270. },
  271. ],
  272. startdate: new Date(
  273. new Date(new Date().setDate(new Date().getDate() - 1))
  274. ).formatDate("yyyy-MM-dd"),
  275. enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
  276. tableData: {
  277. column: [
  278. { name: "风机编号", field: "name" },
  279. {
  280. name: "主轴温度温差大于8度",
  281. field: "v1",
  282. align: "left",
  283. slot: true,
  284. },
  285. { name: "浆叶角过小", field: "v2", align: "left", slot: true },
  286. ],
  287. data: [{ name: "MG01_01", v1: { count: 12, time: 0 } }],
  288. },
  289. };
  290. },
  291. created() {
  292. this.$nextTick(() => {
  293. this.search();
  294. });
  295. },
  296. methods: {
  297. //对比
  298. showChart(column) {
  299. let that = this;
  300. that.dialogTitle = column.column.name;
  301. that.wtId = column.row.name;
  302. that.descName = column.column.name;
  303. that.requestDetailData(
  304. that.wpvalue,
  305. that.startdate,
  306. that.enddate,
  307. 60,
  308. column.row.name,
  309. column.column.name
  310. );
  311. },
  312. requestDetailData(station, startTs, endTs, interval, wtId, name) {
  313. let that = this;
  314. BASE.showLoading();
  315. that.API.requestData({
  316. method: "GET",
  317. subUrl: "/analysis/detail",
  318. data: {
  319. // station: that.wpvalue,
  320. // startTs: new Date(that.startdate).getTime(),
  321. // endTs: new Date(that.enddate).getTime(),
  322. // // interval: 360,
  323. // interval:1,
  324. // wtId: column.row.name,
  325. // name: column.column.name,
  326. station: station,
  327. startTs: new Date(new Date(startTs).formatDate("yyyy/MM/dd")).getTime(),
  328. endTs: new Date(new Date(endTs).formatDate("yyyy/MM/dd")).getTime(),
  329. interval: interval,
  330. wtId: wtId,
  331. name: name,
  332. },
  333. success(res) {
  334. console.log(res)
  335. if (res.data.length == 1) {
  336. that.dialogVisible = true;
  337. BASE.closeLoading();
  338. let yaxises = [
  339. {
  340. name: "",
  341. min: 0,
  342. max: null,
  343. unit: "",
  344. position: "left",
  345. },
  346. ];
  347. // yaxises.name = res.data[0].name;
  348. yaxises.unit = res.data[0].unit;
  349. that.AnalysisYAxises = yaxises;
  350. let aKey1 = ["doubleValue"];
  351. let aList1 = [
  352. {
  353. title: "",
  354. // yAxisIndex:"",
  355. smooth: true,
  356. value: [],
  357. },
  358. ];
  359. aKey1.forEach((keyEle, keyIndex) => {
  360. aList1[keyIndex].title = res.data[keyIndex].name;
  361. res.data[keyIndex].data.forEach((rEle) => {
  362. aList1[keyIndex].value.push({
  363. text: new Date(rEle.ts).formatDate("hh:mm"),
  364. value: rEle.doubleValue,
  365. });
  366. });
  367. });
  368. that.Analysis = aList1;
  369. } else if (res.data.length == 2) {
  370. that.dialogVisible = true;
  371. BASE.closeLoading();
  372. let aKey2 = ["doubleValue", "doubleValue"];
  373. let aList2 = [
  374. {
  375. title: "",
  376. // yAxisIndex:"",
  377. smooth: true,
  378. value: [],
  379. },
  380. {
  381. title: "",
  382. // yAxisIndex:"",
  383. smooth: true,
  384. value: [],
  385. },
  386. ];
  387. let yaxises1 = [
  388. {
  389. name: "",
  390. min: 0,
  391. max: null,
  392. unit: "",
  393. position: "left",
  394. },
  395. {
  396. name: "",
  397. min: 0,
  398. max: null,
  399. unit: "",
  400. position: "right",
  401. },
  402. ];
  403. yaxises1.forEach((aEle, aIndex) => {
  404. res.data.forEach((rEle) => {
  405. // aEle.name = rEle.name;
  406. aEle.unit = rEle.unit;
  407. });
  408. });
  409. that.AnalysisYAxises = yaxises1;
  410. aKey2.forEach((keyEle, keyIndex) => {
  411. aList2[keyIndex].title = res.data[keyIndex].name;
  412. res.data[keyIndex].data.forEach((rEle) => {
  413. aList2[keyIndex].value.push({
  414. text: new Date(rEle.ts).formatDate("hh:mm"),
  415. value: rEle.doubleValue,
  416. });
  417. });
  418. });
  419. // res.data.forEach((rEle,rIndex)=>{
  420. // })
  421. // aKey2.forEach((keyEle, keyIndex) => {
  422. // res.data.forEach((rEle) => {
  423. // // alist2[keyIndex].yAxisIndex = keyIndex;
  424. // aList2[keyIndex].title = res.data[keyIndex].name;
  425. // rEle.data.forEach((tEle,tIndex) => {
  426. // aList2[keyIndex].value.push({
  427. // text: new Date(tEle.ts).formatDate("hh:mm"),
  428. // // value: tEle[keyEle],
  429. // // value:res.data[keyIndex].data[tIndex].doubleValue
  430. // });
  431. // });
  432. // });
  433. // });
  434. that.Analysis = aList2;
  435. } else if (res.data.length == 4) {
  436. that.dialogVisible = true;
  437. BASE.closeLoading();
  438. let aKey4 = [
  439. "doubleValue",
  440. "doubleValue",
  441. "doubleValue",
  442. "doubleValue",
  443. ];
  444. let aList4 = [
  445. {
  446. title: "",
  447. // yAxisIndex:"",
  448. smooth: true,
  449. value: [],
  450. },
  451. {
  452. title: "",
  453. // yAxisIndex:"",
  454. smooth: true,
  455. value: [],
  456. },
  457. {
  458. title: "",
  459. // yAxisIndex:"",
  460. smooth: true,
  461. value: [],
  462. },
  463. {
  464. title: "",
  465. // yAxisIndex:"",
  466. smooth: true,
  467. value: [],
  468. },
  469. ];
  470. let yaxises2 = [
  471. {
  472. name: "",
  473. min: 0,
  474. max: null,
  475. unit: "",
  476. position: "left",
  477. },
  478. {
  479. name: "",
  480. min: 0,
  481. max: null,
  482. unit: "",
  483. position: "right",
  484. },
  485. ];
  486. yaxises2.forEach((aEle, aIndex) => {
  487. res.data.forEach((rEle) => {
  488. // aEle.name = rEle.name;
  489. aEle.unit = rEle.unit;
  490. });
  491. });
  492. that.AnalysisYAxises = yaxises2;
  493. aKey4.forEach((keyEle, keyIndex) => {
  494. aList4[keyIndex].title = res.data[keyIndex].name;
  495. res.data[keyIndex].data.forEach((rEle) => {
  496. aList4[keyIndex].value.push({
  497. text: new Date(rEle.ts).formatDate("hh:mm"),
  498. value: rEle.doubleValue,
  499. });
  500. });
  501. });
  502. that.Analysis = aList4;
  503. } else if (res.data.length == 0) {
  504. that.dialogVisible = false;
  505. BASE.closeLoading();
  506. that.BASE.showMsg({
  507. type: "warning",
  508. msg: "暂无数据",
  509. });
  510. }
  511. },
  512. });
  513. },
  514. //切换数据类型
  515. switchChange(interval,status) {
  516. if(status === 'interval') {
  517. this.chooseStatus = false
  518. this.selectValue = '60'
  519. }else if(status === 'original'){
  520. this.chooseStatus = true
  521. }
  522. this.requestDetailData(
  523. this.wpvalue,
  524. this.startdate,
  525. this.enddate,
  526. interval,
  527. this.wtId,
  528. this.descName
  529. );
  530. },
  531. async search() {
  532. const { data } = await this.API.requestData({
  533. subUrl: "powercompare/windfarmAjax",
  534. });
  535. this.wpoptions = data.data;
  536. this.wpvalue = data.data[0].id;
  537. this.searchData();
  538. },
  539. async searchTree() {
  540. let arr = [];
  541. let columnObj = [
  542. {
  543. name: "风机编号",
  544. field: "name",
  545. minWidth: "100px",
  546. },
  547. ];
  548. this.cascaderSel.forEach((e) => {
  549. let obj = {
  550. name: e[1],
  551. field: e[1],
  552. align: "left",
  553. slot: true,
  554. sortable: true,
  555. minWidth: "200px",
  556. };
  557. columnObj.push(obj);
  558. arr.push(e[1]);
  559. });
  560. this.columnObj = columnObj;
  561. this.column = arr;
  562. this.searchData();
  563. },
  564. async searchData() {
  565. const { data } = await this.API.requestData({
  566. baseURL: "http://192.168.1.18:8075/",
  567. subUrl: "alarm/count/query/new",
  568. data: {
  569. stationid: this.wpvalue,
  570. startdate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
  571. enddate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
  572. },
  573. });
  574. ////////
  575. const resData = data.data;
  576. // const resData =this.resdata;
  577. const column = this.columnObj;
  578. let dataAll = []; // 总数据集合
  579. resData.forEach((e) => {
  580. let obj = {
  581. name: Object.keys(e)[0],
  582. };
  583. let wpid = Object.keys(e)[0];
  584. this.wpid = wpid;
  585. e[wpid].forEach((k) => {
  586. column.forEach((c) => {
  587. if (k.alertText == c.name) {
  588. let obj1 = {
  589. count: k.count,
  590. time: k.time,
  591. };
  592. obj[k.alertText] = obj1;
  593. }
  594. });
  595. });
  596. dataAll.push(obj);
  597. });
  598. this.tableData.column = column;
  599. this.tableData.data = dataAll;
  600. ///////////////////// 获取规则list
  601. const map = {};
  602. var windNum = [];
  603. for (let i in resData) {
  604. for (let k in resData[i]) {
  605. map[k] = resData[i][k];
  606. }
  607. }
  608. // nmap为新的map 整理数据结构
  609. const nmap = {};
  610. for (let kv in map) {
  611. var nchildMap = {};
  612. var childrenMap = map[kv];
  613. for (var ckv in childrenMap) {
  614. var cckey = childrenMap[ckv].alertText;
  615. var ccvalue = childrenMap[ckv];
  616. nchildMap[cckey] = ccvalue;
  617. }
  618. nmap[kv] = nchildMap;
  619. }
  620. windNum = Object.keys(nmap);
  621. var cascaderOptions = [];
  622. var root = {}; // 原始根节点
  623. var clumnsOnes = nmap[windNum[0]];
  624. for (let k in clumnsOnes) {
  625. let f = clumnsOnes[k].relatePartsText
  626. ? clumnsOnes[k].relatePartsText
  627. : "其他";
  628. let fvalue = clumnsOnes[k].relateParts ? clumnsOnes[k].relateParts : "";
  629. if (root[f]) {
  630. // 已经存在此子节点
  631. if (!root[f].children[k]) {
  632. // 不存在子节点
  633. root[f].children[k] = {};
  634. root[f].children[k].value = root[f].children[k].label = k;
  635. root[f].fobj.children.push(root[f].children[k]);
  636. }
  637. } // 不存在子节点
  638. else {
  639. root[f] = {};
  640. // root[f].value = fvalue;
  641. // root[f].label = f;
  642. root[f].children = {};
  643. root[f].children[k] = {};
  644. root[f].children[k].value = root[f].children[k].label = k;
  645. // 将对象放入 cascaderOptions
  646. let childrenArray = [];
  647. childrenArray.push(root[f].children[k]);
  648. let fobj = {};
  649. fobj.value = fvalue;
  650. fobj.label = f;
  651. fobj.children = childrenArray;
  652. cascaderOptions.push(fobj);
  653. root[f].fobj = fobj;
  654. }
  655. }
  656. this.cascaderOptions = cascaderOptions;
  657. },
  658. },
  659. };
  660. </script>
  661. <style lang="less">
  662. .alarm-center-1 {
  663. .action-bar {
  664. display: flex;
  665. .query {
  666. justify-content: flex-start;
  667. }
  668. }
  669. .table-panel {
  670. width: 100%;
  671. background: transparent;
  672. padding: 0;
  673. .bar {
  674. display: flex;
  675. align-items: center;
  676. height: 16px;
  677. margin: 8px 0;
  678. .bar-percent {
  679. height: 100%;
  680. background: @green;
  681. margin-right: 8px;
  682. }
  683. }
  684. }
  685. .searchForm {
  686. display: flex;
  687. margin-left: 36px;
  688. flex-direction: row-reverse;
  689. .inputs {
  690. width: 15%;
  691. margin-right: 18px;
  692. }
  693. }
  694. }
  695. </style>