zhzb.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. <template>
  2. <HeaderNav @typeFlag="typeFlag" :isAll="true" />
  3. <div class="synthesizeTargetSystem">
  4. <div class="systemData bodys">
  5. <div class="line">
  6. <div class="leftContent"><span>数据指标</span></div>
  7. <div class="rightContent">
  8. <div class="more" @click="addTargets"><i>+</i>更多指标</div>
  9. </div>
  10. </div>
  11. <el-table
  12. ref="table"
  13. :data="stationData"
  14. :cell-style="cellStyle"
  15. :header-cell-style="headerStyle"
  16. height="81vh"
  17. style="width: 100%"
  18. fit
  19. v-loading="loading"
  20. element-loading-text="加载中..."
  21. element-loading-background="rgba(4, 12, 11, 0.8)"
  22. empty-text=" "
  23. v-if="tableShow"
  24. stripe
  25. >
  26. <el-table-column
  27. type="index"
  28. label="序号"
  29. align="center"
  30. fixed
  31. width="52"
  32. >
  33. </el-table-column>
  34. <el-table-column
  35. v-for="(item, index) in uniformDetial"
  36. :key="index"
  37. :prop="item.uniformCode"
  38. sortable
  39. align="center"
  40. header-align="center"
  41. :resizable="true"
  42. :min-width="item.width"
  43. :fixed="index < 2"
  44. >
  45. <!-- <template v-slot="scope" v-if="cilent == 'click'">
  46. <el-tag @click="v(item.uniformCode, scope.$index, item.name)">
  47. {{ scope.row[`${item.uniformCode}`] }}
  48. </el-tag>
  49. </template> -->
  50. <template v-slot="scope">
  51. <!-- 名称 容量无曲线 -->
  52. <el-tag v-if="index < 2">
  53. {{ scope.row[`${item.uniformCode}`] }}
  54. </el-tag>
  55. <el-tag
  56. v-else
  57. @contextmenu="v(item.uniformCode, scope.$index, item.name)"
  58. >
  59. {{ scope.row[`${item.uniformCode}`] }}
  60. </el-tag>
  61. </template>
  62. <template #header>
  63. <div v-if="item.name.length > 6">
  64. {{ item.name }}
  65. <span v-if="item.valueUnit">({{ item.valueUnit }})</span>
  66. </div>
  67. <div v-else>
  68. <div>{{ item.name }}</div>
  69. <div v-if="item.valueUnit">({{ item.valueUnit }})</div>
  70. </div>
  71. </template>
  72. </el-table-column>
  73. </el-table>
  74. <dialog-check
  75. :tagCode="tagCode"
  76. :changeWid="changeWid"
  77. :changeSer="changeSer"
  78. :changeAll="changeAll"
  79. :indexes="indexes"
  80. :tableData="newTableList"
  81. :tagName="tagName"
  82. :xs="xs"
  83. :ys="ys"
  84. :NameCode="CZMC"
  85. :visible="visible"
  86. v-on:tag="z($event)"
  87. :tag1="CZAMC"
  88. :tag2="ZJRL"
  89. ></dialog-check>
  90. </div>
  91. <zbDialog
  92. ref="zbdialog"
  93. :uniformName="alluniformName"
  94. :showname="showname"
  95. :uniformCode="alluniformCode"
  96. @tableRefresh="tableRefresh"
  97. />
  98. </div>
  99. </template>
  100. <script>
  101. import dialogCheck from "@/components/qushi/dialogCheck.vue";
  102. import zbDialog from "@/components/zbDialog/index.vue";
  103. import { getComprehensiveList } from "@/api/monitor/index.js";
  104. import HeaderNav from "@/components/headerNav/index.vue";
  105. import { getNewObj, deepClone } from "@/utills/func.js";
  106. export default {
  107. components: {
  108. HeaderNav,
  109. dialogCheck,
  110. zbDialog,
  111. },
  112. data() {
  113. return {
  114. showname: "选择指标",
  115. newTableList: [], //处理过的tableData
  116. changeAll: false,
  117. loading: false,
  118. CZMC: "CZMC",
  119. CZAMC: "CZAMC",
  120. ZJRL: "ZJRL",
  121. tagCode: "",
  122. indexes: "",
  123. tagName: "",
  124. color: [
  125. "#1985de",
  126. "#ff8300",
  127. "#06a746",
  128. "#3eede7",
  129. "#eb0f7c",
  130. "#dfdc0a",
  131. "#de0feb",
  132. "#cca4e3",
  133. ],
  134. stse: [],
  135. sts: [],
  136. statiomName: [],
  137. stationTit: null,
  138. leng: "",
  139. stationType: null,
  140. companyCode: null,
  141. uniformDetial: [],
  142. uniformDetials: [],
  143. codeValur: null,
  144. stationData: null,
  145. checkList: [],
  146. moreTargetData: [],
  147. tableData: [],
  148. timer: "",
  149. x: 500,
  150. y: 250,
  151. dragging: false,
  152. currentX: 50,
  153. currentY: 0,
  154. initialX: 0,
  155. initialY: 0,
  156. tableShow: true,
  157. tmpData: [],
  158. detailsValue: [],
  159. starttime: "",
  160. endtime: "",
  161. numgap: 900,
  162. intervalgap: 7,
  163. units: [],
  164. unitDatas: [{ flag: false, min: 0, max: 0, codex: 0 }],
  165. tagDatas: [],
  166. handleSwitch: false,
  167. chartsData: [],
  168. chartsDataAll: [],
  169. dialogCurveVisible: false,
  170. chartName: "趋势曲线",
  171. ysetDialogVisible: false,
  172. ysetName: "Y坐标设置",
  173. visible: false,
  174. xs: "",
  175. visibles: "",
  176. ys: "",
  177. dete: "",
  178. cilent: "",
  179. tableDatas: [],
  180. pageNow: 1,
  181. pageSize: 25,
  182. stationDatasd: [],
  183. changeSer: false,
  184. changeWid: false,
  185. activeTab: "all",
  186. tabIndex: 0,
  187. enterpriseIndex: "all",
  188. targets: "",
  189. };
  190. },
  191. created() {
  192. this.loading = true;
  193. let localAllTargets = window.localStorage.getItem("alllocalData");
  194. // 判断本地是否有指标
  195. if (localAllTargets != null && JSON.stringify(localAllTargets) != "{}") {
  196. localAllTargets = JSON.parse(localAllTargets);
  197. this.uniformDetial = localAllTargets;
  198. } else {
  199. this.uniformDetial = [
  200. { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
  201. { name: "装机容量", uniformCode: "ZJRL", valueUnit: "kW", width: "80" },
  202. {
  203. name: "日限电停机损失电量",
  204. valueUnit: null,
  205. uniformCode: "RXDTJSSDL",
  206. width: "150",
  207. },
  208. {
  209. name: "15分钟自耗电",
  210. valueUnit: null,
  211. uniformCode: "ZHD15",
  212. width: "150",
  213. },
  214. {
  215. name: "15分钟检修损失电量",
  216. valueUnit: null,
  217. uniformCode: "JXSSDL15",
  218. width: "150",
  219. },
  220. {
  221. name: "月限电停机损失电量",
  222. valueUnit: null,
  223. uniformCode: "YXDTJSSDL",
  224. width: "150",
  225. },
  226. ];
  227. window.localStorage.setItem(
  228. "alllocalData",
  229. JSON.stringify(this.uniformDetial)
  230. );
  231. }
  232. // this.$nextTick(() => this.firstRender());
  233. },
  234. mounted() {
  235. this.timer = setInterval(() => {
  236. this.firstRender();
  237. }, 5000);
  238. },
  239. unmounted() {
  240. clearInterval(this.timer);
  241. this.timer = null;
  242. },
  243. methods: {
  244. getNewObj,
  245. deepClone,
  246. // 头部tab选择
  247. typeFlag(activeTab, enterpriseIndex) {
  248. this.activeTab = activeTab;
  249. this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
  250. this.enterpriseIndex = enterpriseIndex;
  251. this.$nextTick(() => this.firstRender());
  252. },
  253. // 查询数据
  254. async firstRender() {
  255. //获取table数据
  256. const { data } = await getComprehensiveList({
  257. company:
  258. this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
  259. type: this.tabIndex.toString(),
  260. targets: this.alluniformCode,
  261. });
  262. this.getTableDatas(data.data);
  263. },
  264. // 处理列表数据
  265. getTableDatas(list) {
  266. let tableData = this.deepClone(list);
  267. let newList = [];
  268. let newList1 = [];
  269. let a = this.alluniformCode.split(",");
  270. tableData.forEach((item) => {
  271. let b = [];
  272. let c = [];
  273. if (item.dataList.length) {
  274. item.dataList.forEach((subItem, subIndex) => {
  275. b.push(subItem.pointValueInDouble.toFixed(2));
  276. c.push(subItem.pointName);
  277. });
  278. }
  279. newList1.push({
  280. CZMC: item.wpname,
  281. ZJRL: item.capacity,
  282. ...this.getNewObj(a, c),
  283. });
  284. newList.push({
  285. CZMC: item.wpname,
  286. ZJRL: item.capacity,
  287. ...this.getNewObj(a, b),
  288. });
  289. });
  290. this.newTableList = newList1;
  291. this.stationData = newList;
  292. this.loading = false;
  293. },
  294. z(s) {
  295. this.visible = s;
  296. },
  297. v(tagCode, index, tagName) {
  298. this.cilent = process.env.VUE_APP_DIALOG_POINT;
  299. this.visible = true;
  300. this.tagCode = tagCode;
  301. this.indexes = index;
  302. this.tagName = tagName;
  303. if (event.clientY > window.innerHeight - 180) {
  304. this.ys = event.clientY - 106;
  305. this.changeSer = true;
  306. this.changeAll = false;
  307. } else {
  308. this.ys = event.clientY + 16;
  309. this.changeSer = false;
  310. }
  311. if (
  312. event.clientY > window.innerHeight - 180 &&
  313. event.clientX > window.innerWidth - 100
  314. ) {
  315. this.changeWid = false;
  316. this.changeSer = false;
  317. this.changeAll = true;
  318. this.ys = event.clientY - 106;
  319. this.xs = event.clientX - 171;
  320. } else if (event.clientX > window.innerWidth - 100) {
  321. this.xs = event.clientX - 171;
  322. this.changeAll = false;
  323. this.changeWid = true;
  324. } else {
  325. this.xs = event.clientX - 1;
  326. this.changeWid = false;
  327. this.changeAll = false;
  328. }
  329. event.preventDefault();
  330. },
  331. cellStyle({ columnIndex }) {
  332. if (columnIndex > 2) {
  333. return {
  334. "font-family": "Arial",
  335. padding: "7px 0",
  336. "font-size": "13px",
  337. };
  338. } else {
  339. return {
  340. "backdrop-filter": "blur(10px)",
  341. padding: "7px 0",
  342. "font-size": "13px",
  343. };
  344. }
  345. },
  346. headerStyle({ columnIndex }) {
  347. if (columnIndex < 3) {
  348. return { "backdrop-filter": "blur(10px)", padding: "6px 0" };
  349. } else {
  350. return { padding: "6px 0" };
  351. }
  352. },
  353. //添加指标
  354. addTargets() {
  355. if (this.stationData.length)
  356. this.$refs.zbdialog.openDialog(this.tabIndex.toString());
  357. },
  358. //更多指标--确定刷新指标,刷新数据
  359. tableRefresh(checkList, moreTargetData) {
  360. this.tableShow = false;
  361. setTimeout(() => {
  362. this.tableShow = true;
  363. }, 100);
  364. var codeDetial = [];
  365. //整理选中指标
  366. var newArr = [...new Set(checkList)];
  367. newArr.forEach((arr) => {
  368. const obj = moreTargetData.find((value) => {
  369. return arr == value.name;
  370. });
  371. if (newArr.length > 13) {
  372. obj.width = "150";
  373. } else {
  374. obj.width = "";
  375. }
  376. codeDetial.push(obj);
  377. });
  378. this.uniformDetial = [
  379. { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
  380. {
  381. name: "装机容量",
  382. uniformCode: "ZJRL",
  383. valueUnit: "kW",
  384. width: "80",
  385. },
  386. ...codeDetial,
  387. ];
  388. window.localStorage.setItem(
  389. "alllocalData",
  390. JSON.stringify(this.uniformDetial)
  391. );
  392. //获取table数据
  393. this.firstRender();
  394. },
  395. },
  396. computed: {
  397. // 指标code字符串
  398. alluniformCode() {
  399. var arr = [];
  400. if (this.uniformDetial != null) {
  401. this.uniformDetial.forEach((item, index) => {
  402. if (index > 1) {
  403. arr.push(item.uniformCode);
  404. }
  405. });
  406. }
  407. const codeStr = arr.join(",");
  408. return codeStr;
  409. },
  410. // 指标name字符串
  411. alluniformName() {
  412. var arr = [];
  413. this.uniformDetial.forEach((item, index) => {
  414. if (index > 1) {
  415. arr.push(item.name);
  416. }
  417. });
  418. return arr;
  419. },
  420. },
  421. };
  422. </script>
  423. <style lang="less" scoped>
  424. .status {
  425. width: 100%;
  426. height: calc(100vh - 7.222vh);
  427. overflow-y: auto;
  428. display: flex;
  429. flex-direction: column;
  430. .panel-box {
  431. width: 100%;
  432. display: flex;
  433. flex-direction: row;
  434. flex-wrap: wrap;
  435. height: 54vh;
  436. overflow-y: auto;
  437. .panel-item {
  438. width: calc(20% - 1.185vh);
  439. margin-left: 1.481vh;
  440. margin-bottom: 1.481vh;
  441. &:nth-child(5n + 1) {
  442. margin-left: 0;
  443. }
  444. }
  445. }
  446. .table-box {
  447. border: 0.093vh solid @darkgray;
  448. position: relative;
  449. overflow: auto;
  450. flex-grow: 1;
  451. &::after,
  452. &::before {
  453. content: "";
  454. position: absolute;
  455. width: 0.185vh;
  456. height: 0.185vh;
  457. background-color: @write;
  458. top: 0.37vh;
  459. }
  460. &::after {
  461. left: 0.37vh;
  462. }
  463. &::before {
  464. right: 0.37vh;
  465. }
  466. }
  467. .table-box1 {
  468. border: 0.093vh solid @darkgray;
  469. position: relative;
  470. overflow: auto;
  471. flex-grow: 1;
  472. &::after,
  473. &::before {
  474. content: "";
  475. position: absolute;
  476. width: 0.185vh;
  477. height: 0.185vh;
  478. background-color: @write;
  479. top: 0.37vh;
  480. }
  481. &::after {
  482. left: 0.37vh;
  483. }
  484. &::before {
  485. right: 0.37vh;
  486. }
  487. }
  488. }
  489. .search-input {
  490. margin-left: 10px;
  491. /deep/ .el-input__suffix {
  492. position: absolute;
  493. height: 100%;
  494. right: -65px;
  495. }
  496. }
  497. .customColor {
  498. background: linear-gradient(
  499. 180deg,
  500. rgba(255, 255, 255, 0.4),
  501. rgba(255, 255, 255, 0.27)
  502. ) !important;
  503. }
  504. .searchColor {
  505. background-color: rgba(0, 70, 199, 0.2);
  506. border: 1px solid #3b4c6c;
  507. color: #b3b3b3;
  508. font-size: 14px;
  509. &:hover {
  510. background-color: rgba(0, 70, 199, 0.5);
  511. color: #ffffff;
  512. }
  513. }
  514. .el-popper.is-light {
  515. background: #1a7ccd;
  516. }
  517. .el-dropdown-item {
  518. background: red !important;
  519. }
  520. .example-showcase .el-dropdown-link {
  521. cursor: pointer;
  522. color: var(--el-color-primary);
  523. display: flex;
  524. align-items: center;
  525. }
  526. .synthesizeTargetSystem {
  527. padding: 0 20px;
  528. }
  529. .systemData {
  530. width: 100%;
  531. height: calc(100% - 70px);
  532. background-color: rgba(0, 0, 0, 0.45);
  533. padding: 5px;
  534. //overflow: hidden;
  535. overflow-y: auto;
  536. .font {
  537. font-family: "Arial" !important;
  538. }
  539. }
  540. .headerNav {
  541. margin-bottom: 15px;
  542. }
  543. .footerButton {
  544. justify-content: right;
  545. .el-button:first-child {
  546. background-color: rgba(0, 70, 199, 0.2) !important;
  547. color: #b3b3b3;
  548. border-color: transparent;
  549. }
  550. }
  551. .count {
  552. color: #fff;
  553. }
  554. .el-checkbox {
  555. width: 180px;
  556. }
  557. .line {
  558. display: flex;
  559. flex-direction: row;
  560. align-items: center;
  561. justify-content: space-between;
  562. width: 100%;
  563. margin-bottom: 5px;
  564. .leftContent {
  565. width: 242px;
  566. height: 41px;
  567. display: flex;
  568. align-items: center;
  569. background: url("../../../assets/imgs/title_left_bg.png");
  570. span {
  571. font-size: 16px;
  572. font-family: Microsoft YaHei;
  573. font-weight: 400;
  574. color: #ffffff;
  575. margin-left: 25px;
  576. }
  577. }
  578. .rightContent {
  579. position: relative;
  580. width: 212px;
  581. height: 28px;
  582. margin-top: 13px;
  583. background: url("../../../assets/imgs/title_right_bg.png");
  584. .more {
  585. float: right;
  586. width: 134px;
  587. height: 28px;
  588. line-height: 28px;
  589. text-align: center;
  590. color: #b3b3b3;
  591. font-size: 14px;
  592. cursor: pointer;
  593. background: url("../../../assets/imgs/buttonBack.png") no-repeat;
  594. background-size: cover;
  595. i {
  596. font-size: 18px;
  597. margin-right: 5px;
  598. vertical-align: -1%;
  599. }
  600. }
  601. }
  602. }
  603. .el-tag {
  604. background: none !important;
  605. border: none !important;
  606. color: #d8d8d9;
  607. cursor: pointer;
  608. }
  609. .el-tag:hover {
  610. color: #1c99ff;
  611. }
  612. .ststTit {
  613. width: 96%;
  614. height: 50px;
  615. color: #1c99ff;
  616. font-size: 16px;
  617. background: rgb(12, 15, 21);
  618. line-height: 50px;
  619. border-bottom: 1px solid #323b3c;
  620. box-sizing: border-box;
  621. padding-left: 10px;
  622. margin: 0 10px;
  623. }
  624. .overHidd {
  625. margin-top: 12px;
  626. overflow: scroll;
  627. height: 62%;
  628. }
  629. .stations {
  630. height: 40px;
  631. line-height: 40px;
  632. width: 97%;
  633. display: flex;
  634. justify-content: space-between;
  635. font-size: 15px;
  636. margin-left: 10px;
  637. padding-right: 10px;
  638. padding-left: 10px;
  639. border-radius: 4px;
  640. }
  641. .stations:hover {
  642. background: rgba(0, 70, 199, 0.2);
  643. }
  644. .header {
  645. cursor: move;
  646. }
  647. </style>