xqjsl.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700
  1. <template>
  2. <div class="ztfx">
  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-date-picker
  10. v-model="monthValue"
  11. type="year"
  12. placeholder="选择年份"
  13. popper-class="date-select"
  14. :clearable="false"
  15. >
  16. </el-date-picker>
  17. </div>
  18. </div>
  19. <div class="query-item">
  20. <div class="search-input select-btn">
  21. <el-button class="btn green" @click="onClickSearch">搜索</el-button>
  22. </div>
  23. <div class="search-input select-btn">
  24. <el-button class="btn green" @click="exportPDF">导出</el-button>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <el-row :gutter="20" class="table-panel pdfDom">
  31. <el-col :span="24">
  32. <!-- <panel :title="'月度'" :showLine="false"> -->
  33. <div class="table">
  34. <table style="width: 100%" border="0" cellspacing="0">
  35. <thead>
  36. <tr>
  37. <th rowspan="2" class="type1" style="width: 4vh"></th>
  38. <template v-for="m of monthData" :key="m">
  39. <th style="width: 6vh" class="type1" rowspan="2">{{ m }}</th>
  40. </template>
  41. </tr>
  42. </thead>
  43. </table>
  44. <div style="">
  45. <table
  46. style="width: 100%; text-align: center"
  47. border="0"
  48. cellspacing="0"
  49. >
  50. <tbody>
  51. <tr>
  52. <td style="width: 4vh">场站</td>
  53. <template v-for="(x, i) of GsList" :key="i">
  54. <td style="width: 3vh">本期(%)</td>
  55. <td style="width: 3vh">同期(%)</td>
  56. </template>
  57. </tr>
  58. <tr v-for="(items,key,index) in stations" :key="index">
  59. <td class="td-item" style="width: 4vh">{{items.name}}</td>
  60. <template v-for="(item, index) of items.children" :key="index">
  61. <td style="width: 3vh">
  62. {{ item.current }}
  63. <template v-if="item.compare === -1">
  64. <span class="svg-icon svg-icon-yellow">
  65. <svg-icon svgid="svg-arrow-dpwn-1" />
  66. </span>
  67. </template>
  68. <template v-if="item.compare === 1">
  69. <span class="svg-icon svg-icon-green">
  70. <svg-icon svgid="svg-arrow-up-1" />
  71. </span>
  72. </template>
  73. </td>
  74. <td style="width: 3vh">
  75. {{ item.sameperiod }}
  76. </td>
  77. </template>
  78. </tr>
  79. <!-- <tr>
  80. <td style="width: 4vh"></td>
  81. <template v-for="(x, i) of MhsLists" :key="i">
  82. <td style="width: 3vh">本期</td>
  83. <td style="width: 3vh">同期</td>
  84. </template>
  85. </tr>
  86. <tr>
  87. <td class="td-item" style="width: 4vh">麻黄山</td>
  88. <template v-for="(item, index) of MhsLists" :key="index">
  89. <td style="width: 3vh">
  90. {{ item.current }}
  91. <template v-if="item.compare === -1">
  92. <span class="svg-icon svg-icon-yellow">
  93. <svg-icon svgid="svg-arrow-dpwn-1" />
  94. </span>
  95. </template>
  96. <template v-if="item.compare === 1">
  97. <span class="svg-icon svg-icon-green">
  98. <svg-icon svgid="svg-arrow-up-1" />
  99. </span>
  100. </template>
  101. </td>
  102. <td style="width: 3vh">
  103. {{ item.sameperiod }}
  104. </td>
  105. </template>
  106. </tr>
  107. <tr>
  108. <td class="td-item" style="width: 4vh">牛首山</td>
  109. <template v-for="(item, index) of NshList" :key="index">
  110. <td style="width: 3vh">
  111. {{ item.current }}
  112. <template v-if="item.compare === -1">
  113. <span class="svg-icon svg-icon-yellow">
  114. <svg-icon svgid="svg-arrow-dpwn-1" />
  115. </span>
  116. </template>
  117. <template v-if="item.compare === 1">
  118. <span class="svg-icon svg-icon-green">
  119. <svg-icon svgid="svg-arrow-up-1" />
  120. </span>
  121. </template>
  122. </td>
  123. <td style="width: 3vh">
  124. {{ item.sameperiod }}
  125. </td>
  126. </template>
  127. </tr>
  128. <tr>
  129. <td class="td-item" style="width: 4vh">青山</td>
  130. <template v-for="(item, index) of QshList" :key="index">
  131. <td style="width: 3vh">
  132. {{ item.current }}
  133. <template v-if="item.compare === -1">
  134. <span class="svg-icon svg-icon-yellow">
  135. <svg-icon svgid="svg-arrow-dpwn-1" />
  136. </span>
  137. </template>
  138. <template v-if="item.compare === 1">
  139. <span class="svg-icon svg-icon-green">
  140. <svg-icon svgid="svg-arrow-up-1" />
  141. </span>
  142. </template>
  143. </td>
  144. <td style="width: 3vh">
  145. {{ item.sameperiod }}
  146. </td>
  147. </template>
  148. </tr>
  149. <tr>
  150. <td class="td-item" style="width: 4vh">石板泉</td>
  151. <template v-for="(item, index) of SbaqList" :key="index">
  152. <td style="width: 3vh">
  153. {{ item.current }}
  154. <template v-if="item.compare === -1">
  155. <span class="svg-icon svg-icon-yellow">
  156. <svg-icon svgid="svg-arrow-dpwn-1" />
  157. </span>
  158. </template>
  159. <template v-if="item.compare === 1">
  160. <span class="svg-icon svg-icon-green">
  161. <svg-icon svgid="svg-arrow-up-1" />
  162. </span>
  163. </template>
  164. </td>
  165. <td style="width: 3vh">
  166. {{ item.sameperiod }}
  167. </td>
  168. </template>
  169. </tr>
  170. <tr>
  171. <td class="td-item" style="width: 4vh">香山</td>
  172. <template v-for="(item, index) of XshList" :key="index">
  173. <td style="width: 3vh">
  174. {{ item.current }}
  175. <template v-if="item.compare === -1">
  176. <span class="svg-icon svg-icon-yellow">
  177. <svg-icon svgid="svg-arrow-dpwn-1" />
  178. </span>
  179. </template>
  180. <template v-if="item.compare === 1">
  181. <span class="svg-icon svg-icon-green">
  182. <svg-icon svgid="svg-arrow-up-1" />
  183. </span>
  184. </template>
  185. </td>
  186. <td style="width: 3vh">
  187. {{ item.sameperiod }}
  188. </td>
  189. </template>
  190. </tr>
  191. <tr>
  192. <td class="td-item" style="width: 4vh">公司</td>
  193. <template v-for="(item, index) of GsList" :key="index">
  194. <td style="width: 3vh">
  195. {{ item.current }}
  196. <template v-if="item.compare === -1">
  197. <span class="svg-icon svg-icon-yellow">
  198. <svg-icon svgid="svg-arrow-dpwn-1" />
  199. </span>
  200. </template>
  201. <template v-if="item.compare === 1">
  202. <span class="svg-icon svg-icon-green">
  203. <svg-icon svgid="svg-arrow-up-1" />
  204. </span>
  205. </template>
  206. </td>
  207. <td style="width: 3vh">
  208. {{ item.sameperiod }}
  209. </td>
  210. </template>
  211. </tr> -->
  212. </tbody>
  213. </table>
  214. </div>
  215. <!-- </el-scrollbar> -->
  216. </div>
  217. </el-col>
  218. </el-row>
  219. <el-row :gutter="20" class="table-panel">
  220. <el-col :span="24">
  221. <!-- <panel title="公司消缺及时率分析" :showLine="false"> -->
  222. <panel title="消缺及时率分析" :showLine="false">
  223. <!-- <vertival-bar-line-chart
  224. :height="'360px'"
  225. :units="units"
  226. :bardata="bardata"
  227. :lineData="lineData"
  228. /> -->
  229. <MultipleLineChart
  230. :list="DayPower.value"
  231. :units="DayPower.units"
  232. height="40vh"
  233. :showLegend="true"
  234. />
  235. <!-- :units="units"
  236. :bardata="bardata"
  237. :lineData="lineData" -->
  238. </panel>
  239. </el-col>
  240. </el-row>
  241. </div>
  242. </template>
  243. <script>
  244. // import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
  245. // import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
  246. import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
  247. import Panel from "../../components/coms/panel/panel.vue";
  248. import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
  249. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  250. import Get_PDF from "@tools/htmlToPdf";
  251. import api from "@api/economic/index.js";
  252. export default {
  253. setup() {},
  254. components: {
  255. Panel,
  256. DualPieChart,
  257. SvgIcon,
  258. // VertivalBarLineChart,
  259. MultipleLineChart,
  260. },
  261. data() {
  262. return {
  263. stations:{},
  264. monthData: [],
  265. MhsLists: [],
  266. NshList: [],
  267. QshList: [],
  268. SbaqList: [],
  269. XshList: [],
  270. GsList: [],
  271. units: [],
  272. nowCurrent: 1,
  273. months: new Date().getMonth() + 1,
  274. pickerOptions: {},
  275. bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
  276. lineData: [],
  277. timmer: null,
  278. monthValue: this.getmonthValue(),
  279. list: [],
  280. DayPower: {
  281. // 图表所用单位
  282. units: [""],
  283. value: [
  284. {
  285. title: "",
  286. yAxisIndex: 0, // 使用单位
  287. value: [],
  288. },
  289. ],
  290. },
  291. };
  292. },
  293. created() {
  294. let _this = this;
  295. // _this.$nextTick(() => {
  296. _this.getLists(false);
  297. // _this.timmer = setInterval(() => {
  298. // _this.getLists(false)
  299. // }, _this.$store.state.websocketTimeSec);
  300. // });
  301. },
  302. unmounted() {
  303. clearInterval(this.timmer);
  304. this.timmer = null;
  305. },
  306. mounted() {},
  307. methods: {
  308. exportPDF(name) {
  309. this.BASE.showMsg({
  310. type: "success",
  311. msg: "正在导出...请稍后...",
  312. });
  313. Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "消缺及时率");
  314. },
  315. getmonthValue() {
  316. let year = new Date().getFullYear().toString();
  317. return year;
  318. },
  319. onClickSearch() {
  320. this.getLists(false);
  321. },
  322. monthChange(data) {
  323. let year = data.getFullYear().toString();
  324. return year;
  325. },
  326. isNumber(val) {
  327. return typeof val === "number" && !isNaN(val);
  328. },
  329. getLists(showLoading) {
  330. let MhsLists = [];
  331. let NshList = [];
  332. let QshList = [];
  333. let SbaqList = [];
  334. let XshList = [];
  335. let GsList = [];
  336. let _this = this;
  337. let year = "";
  338. if (typeof this.monthValue === "string") {
  339. year = this.monthValue;
  340. } else {
  341. year = this.monthChange(this.monthValue);
  342. }
  343. const site = ["compare", "year", "month"];
  344. api
  345. .specificXqjslList({
  346. year: year,
  347. })
  348. .then((res) => {
  349. let stations = {}
  350. let company ={
  351. id:'0',
  352. name:'公司',
  353. children: []
  354. }
  355. this.list = res.data.map((item) => {
  356. for (let key in item) {
  357. if (!site.includes(key)) {
  358. if (this.isNumber(item[key])) {
  359. item[key] = item[key].toFixed(2);
  360. } else if (!item[key]) {
  361. item[key] = 0;
  362. item[key] = item[key].toFixed(2);
  363. }
  364. }
  365. }
  366. if(item.wpid === "0"){
  367. company.children.push(item)
  368. }
  369. if(!stations[item.wpid] && item.wpid !== "0" ){
  370. stations[item.wpid] = {
  371. id:item.wpid,
  372. name:item.wpname||'',
  373. children: []
  374. }
  375. }
  376. stations[item.wpid]?.children.push(item)
  377. if (item.wpid === "0") {
  378. GsList.push(item);
  379. }
  380. });
  381. stations.company = company
  382. for (const item in stations) {
  383. stations[item].children = stations[item].children.sort(this.compare("month"));
  384. }
  385. console.log(stations);
  386. this.stations = stations
  387. this.MhsLists = MhsLists.sort(this.compare("month"));
  388. this.NshList = NshList.sort(this.compare("month"));
  389. this.QshList = QshList.sort(this.compare("month"));
  390. this.SbaqList = SbaqList.sort(this.compare("month"));
  391. this.XshList = XshList.sort(this.compare("month"));
  392. this.GsList = GsList.sort(this.compare("month"));
  393. let nowCureent = [];
  394. let sameCureent = [];
  395. let monthData = [];
  396. let monthsAll = [];
  397. this.GsList.map((item) => {
  398. let objs = {};
  399. let obj = {};
  400. monthsAll.push(item.month);
  401. if (item.month > 10) {
  402. objs.text = item.month.toString();
  403. obj.text = item.month.toString();
  404. } else {
  405. item.text = "0" + item.month;
  406. objs.text = item.text;
  407. obj.text = item.text;
  408. }
  409. for (let key in item) {
  410. if (key === "current") {
  411. objs.value = item.current;
  412. nowCureent.push(objs);
  413. } else if (key === "sameperiod") {
  414. obj.value = item.sameperiod;
  415. sameCureent.push(obj);
  416. }
  417. }
  418. });
  419. this.monthData = monthsAll;
  420. this.DayPower = {
  421. // 图表所用单位
  422. units: [""],
  423. value: [
  424. {
  425. title: "本期",
  426. yAxisIndex: 0, // 使用单位
  427. value: nowCureent,
  428. // nowCureent
  429. },
  430. {
  431. title: "同期",
  432. yAxisIndex: 0, // 使用单位
  433. value: sameCureent,
  434. // sameCureent
  435. },
  436. ],
  437. };
  438. // this.DayPower = {
  439. // // 图表所用单位
  440. // units: [""],
  441. // value: [
  442. // {
  443. // title: "本期",
  444. // yAxisIndex: 0, // 使用单位
  445. // value: [],
  446. // },
  447. // {
  448. // title: "同期",
  449. // yAxisIndex: 0, // 使用单位
  450. // value: [],
  451. // },
  452. // ],
  453. // },
  454. // this.bardata.legend = ["本期", "同期"]
  455. // this.lineData = [];
  456. // this.bardata.area = monthData;
  457. // this.bardata.data[0] = sameCureent;
  458. // this.bardata.data[1] = nowCureent;
  459. });
  460. // _this.API.requestData({
  461. // showLoading,
  462. // method: "GET",
  463. // baseURL: "http://10.155.32.4:8034",
  464. // subUrl: "/specific/xqjslList",
  465. // data: {
  466. // year: year,
  467. // },
  468. // success(res) {
  469. // _this.list = res.data.map((item) => {
  470. // for (let key in item) {
  471. // if (!site.includes(key)) {
  472. // if (_this.isNumber(item[key])) {
  473. // item[key] = item[key].toFixed(2);
  474. // } else if (!item[key]) {
  475. // item[key] = 0;
  476. // item[key] = item[key].toFixed(2);
  477. // }
  478. // }
  479. // }
  480. // if (item.wpid === "MHS_FDC") {
  481. // MhsLists.push(item);
  482. // } else if (item.wpid === "NSS_FDC") {
  483. // NshList.push(item);
  484. // } else if (item.wpid === "QS_FDC") {
  485. // QshList.push(item);
  486. // } else if (item.wpid === "NSS_FDC") {
  487. // NshList.push(item);
  488. // } else if (item.wpid === "SBQ_FDC") {
  489. // SbaqList.push(item);
  490. // } else if (item.wpid === "XS_FDC") {
  491. // XshList.push(item);
  492. // } else {
  493. // GsList.push(item);
  494. // }
  495. // });
  496. // _this.MhsLists = MhsLists.sort(_this.compare("month"));
  497. // _this.NshList = NshList.sort(_this.compare("month"));
  498. // _this.QshList = QshList.sort(_this.compare("month"));
  499. // _this.SbaqList = SbaqList.sort(_this.compare("month"));
  500. // _this.XshList = XshList.sort(_this.compare("month"));
  501. // _this.GsList = GsList.sort(_this.compare("month"));
  502. // let nowCureent = [];
  503. // let sameCureent = [];
  504. // let monthData = [];
  505. // let monthsAll = [];
  506. // _this.GsList.map((item) => {
  507. // let objs = {};
  508. // let obj = {};
  509. // monthsAll.push(item.month);
  510. // if (item.month > 10) {
  511. // objs.text = item.month.toString();
  512. // obj.text = item.month.toString();
  513. // } else {
  514. // item.text = "0" + item.month;
  515. // objs.text = item.text;
  516. // obj.text = item.text;
  517. // }
  518. // for (let key in item) {
  519. // if (key === "current") {
  520. // objs.value = item.current;
  521. // nowCureent.push(objs);
  522. // } else if (key === "sameperiod") {
  523. // obj.value = item.sameperiod;
  524. // sameCureent.push(obj);
  525. // }
  526. // }
  527. // });
  528. // _this.monthData = monthsAll;
  529. // _this.DayPower = {
  530. // // 图表所用单位
  531. // units: [""],
  532. // value: [
  533. // {
  534. // title: "本期",
  535. // yAxisIndex: 0, // 使用单位
  536. // value: nowCureent,
  537. // // nowCureent
  538. // },
  539. // {
  540. // title: "同期",
  541. // yAxisIndex: 0, // 使用单位
  542. // value: sameCureent,
  543. // // sameCureent
  544. // },
  545. // ],
  546. // };
  547. // // _this.DayPower = {
  548. // // // 图表所用单位
  549. // // units: [""],
  550. // // value: [
  551. // // {
  552. // // title: "本期",
  553. // // yAxisIndex: 0, // 使用单位
  554. // // value: [],
  555. // // },
  556. // // {
  557. // // title: "同期",
  558. // // yAxisIndex: 0, // 使用单位
  559. // // value: [],
  560. // // },
  561. // // ],
  562. // // },
  563. // // _this.bardata.legend = ["本期", "同期"]
  564. // // _this.lineData = [];
  565. // // _this.bardata.area = monthData;
  566. // // _this.bardata.data[0] = sameCureent;
  567. // // _this.bardata.data[1] = nowCureent;
  568. // },
  569. // });
  570. },
  571. compare(property) {
  572. return (a, b) => {
  573. let val1 = a[property];
  574. let val2 = b[property];
  575. return val1 - val2;
  576. };
  577. },
  578. },
  579. };
  580. </script>
  581. <style lang="less" scope>
  582. .ztfx {
  583. font-size: 12px;
  584. .select-btn {
  585. width: 92px;
  586. }
  587. .com-panel {
  588. border: 1px solid #6067697d;
  589. }
  590. .table-complex {
  591. margin-top: 10px;
  592. .table {
  593. border: 1px solid #6067697d;
  594. tbody {
  595. tr:nth-child(2n) td {
  596. background-color: fade(@gray, 20%);
  597. &.item {
  598. background-color: transparent;
  599. }
  600. }
  601. }
  602. th {
  603. background: fade(@gray, 40);
  604. font-size: 12px;
  605. font-weight: 400;
  606. line-height: 24px;
  607. color: @gray-l;
  608. &.type1 {
  609. border-left: 0;
  610. border-right: 0;
  611. }
  612. }
  613. td {
  614. color: @gray-l;
  615. text-align: center;
  616. height: 26px;
  617. line-height: 26px;
  618. // &.item {
  619. // width: 100px;
  620. // }
  621. }
  622. svg {
  623. height: 1.222vh;
  624. }
  625. }
  626. }
  627. .table-panel {
  628. margin-top: 10px;
  629. .panel-header {
  630. text-align: center;
  631. }
  632. .table {
  633. border: 1px solid #6067697d;
  634. overflow-y: scroll;
  635. max-height: 45vh;
  636. tbody {
  637. tr:nth-child(2n) td {
  638. background-color: fade(@gray, 20%);
  639. &.item {
  640. background-color: transparent;
  641. }
  642. }
  643. }
  644. .td-item {
  645. width: 6vh;
  646. }
  647. th {
  648. background: fade(@gray, 40);
  649. font-size: 12px;
  650. font-weight: 400;
  651. line-height: 24px;
  652. color: @gray-l;
  653. &.type1 {
  654. border-left: 0;
  655. border-right: 0;
  656. height: 4vh;
  657. }
  658. }
  659. td {
  660. color: @gray-l;
  661. text-align: center;
  662. height: 46px;
  663. line-height: 46px;
  664. &.item {
  665. width: 100px;
  666. }
  667. }
  668. svg {
  669. height: 1.222vh;
  670. }
  671. }
  672. }
  673. .pie-chart-panel {
  674. margin-top: 10px;
  675. .line {
  676. border: none;
  677. }
  678. }
  679. }
  680. </style>