ztzhl.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  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. <button class="btn green" @click="onClickSearch">搜索</button>
  22. </div>
  23. <div class="search-input select-btn">
  24. <button class="btn green" @click="exportPDF">导出</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 MhsLists" :key="i">
  54. <td style="width:3vh;">本期</td>
  55. <td style="width:3vh;">同期</td>
  56. </template>
  57. </tr>
  58. <tr>
  59. <td class="td-item" style="width:4vh;">麻黄山</td>
  60. <template v-for="(item, index) of MhsLists" :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 class="td-item" style="width:4vh;">牛首山</td>
  81. <template v-for="(item, index) of NshList" :key="index">
  82. <td style="width:3vh;">
  83. {{ item.current }}
  84. <template v-if="item.compare === -1">
  85. <span class="svg-icon svg-icon-yellow">
  86. <svg-icon svgid="svg-arrow-dpwn-1" />
  87. </span>
  88. </template>
  89. <template v-if="item.compare === 1">
  90. <span class="svg-icon svg-icon-green">
  91. <svg-icon svgid="svg-arrow-up-1" />
  92. </span>
  93. </template>
  94. </td>
  95. <td style="width:3vh;">
  96. {{ item.sameperiod }}
  97. </td>
  98. </template>
  99. </tr>
  100. <tr>
  101. <td class="td-item" style="width:4vh;">青山</td>
  102. <template v-for="(item, index) of QshList" :key="index">
  103. <td style="width:3vh;">
  104. {{ item.current }}
  105. <template v-if="item.compare === -1">
  106. <span class="svg-icon svg-icon-yellow">
  107. <svg-icon svgid="svg-arrow-dpwn-1" />
  108. </span>
  109. </template>
  110. <template v-if="item.compare === 1">
  111. <span class="svg-icon svg-icon-green">
  112. <svg-icon svgid="svg-arrow-up-1" />
  113. </span>
  114. </template>
  115. </td>
  116. <td style="width:3vh;">
  117. {{ item.sameperiod }}
  118. </td>
  119. </template>
  120. </tr>
  121. <tr>
  122. <td class="td-item" style="width:4vh;">石板泉</td>
  123. <template v-for="(item, index) of SbaqList" :key="index">
  124. <td style="width:3vh;">
  125. {{ item.current }}
  126. <template v-if="item.compare === -1">
  127. <span class="svg-icon svg-icon-yellow">
  128. <svg-icon svgid="svg-arrow-dpwn-1" />
  129. </span>
  130. </template>
  131. <template v-if="item.compare === 1">
  132. <span class="svg-icon svg-icon-green">
  133. <svg-icon svgid="svg-arrow-up-1" />
  134. </span>
  135. </template>
  136. </td>
  137. <td style="width:3vh;">
  138. {{ item.sameperiod }}
  139. </td>
  140. </template>
  141. </tr>
  142. <tr>
  143. <td class="td-item" style="width:4vh;">香山</td>
  144. <template v-for="(item, index) of XshList" :key="index">
  145. <td style="width:3vh;">
  146. {{ item.current }}
  147. <template v-if="item.compare === -1">
  148. <span class="svg-icon svg-icon-yellow">
  149. <svg-icon svgid="svg-arrow-dpwn-1" />
  150. </span>
  151. </template>
  152. <template v-if="item.compare === 1">
  153. <span class="svg-icon svg-icon-green">
  154. <svg-icon svgid="svg-arrow-up-1" />
  155. </span>
  156. </template>
  157. </td>
  158. <td style="width:3vh;">
  159. {{ item.sameperiod }}
  160. </td>
  161. </template>
  162. </tr>
  163. <tr>
  164. <td class="td-item" style="width:4vh;">公司</td>
  165. <template v-for="(item, index) of GsList" :key="index">
  166. <td style="width:3vh;">
  167. {{ item.current }}
  168. <template v-if="item.compare === -1">
  169. <span class="svg-icon svg-icon-yellow">
  170. <svg-icon svgid="svg-arrow-dpwn-1" />
  171. </span>
  172. </template>
  173. <template v-if="item.compare === 1">
  174. <span class="svg-icon svg-icon-green">
  175. <svg-icon svgid="svg-arrow-up-1" />
  176. </span>
  177. </template>
  178. </td>
  179. <td style="width:3vh;">
  180. {{ item.sameperiod }}
  181. </td>
  182. </template>
  183. </tr>
  184. </tbody>
  185. </table>
  186. </div>
  187. <!-- </el-scrollbar> -->
  188. </div>
  189. </el-col>
  190. </el-row>
  191. <el-row :gutter="20" class="table-panel">
  192. <el-col :span="24">
  193. <panel title="公司状态转换率分析" :showLine="false">
  194. <!-- <vertival-bar-line-chart
  195. :height="'360px'"
  196. :units="units"
  197. :bardata="bardata"
  198. :lineData="lineData"
  199. /> -->
  200. <MultipleLineChart
  201. :list="DayPower.value"
  202. :units="DayPower.units"
  203. height="40vh" :showLegend="true"
  204. />
  205. <!-- :units="units"
  206. :bardata="bardata"
  207. :lineData="lineData" -->
  208. </panel>
  209. </el-col>
  210. </el-row>
  211. </div>
  212. </template>
  213. <script>
  214. // import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
  215. // import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
  216. import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
  217. import Panel from "../../components/coms/panel/panel.vue";
  218. import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
  219. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  220. import Get_PDF from "@tools/htmlToPdf";
  221. export default {
  222. setup() {},
  223. components: {
  224. Panel,
  225. DualPieChart,
  226. SvgIcon,
  227. // VertivalBarLineChart,
  228. MultipleLineChart
  229. },
  230. data() {
  231. return {
  232. monthData: [],
  233. MhsLists: [],
  234. NshList: [],
  235. QshList: [],
  236. SbaqList: [],
  237. XshList: [],
  238. GsList: [],
  239. units: [],
  240. nowCurrent: 1,
  241. months: new Date().getMonth() + 1,
  242. pickerOptions: {},
  243. bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
  244. lineData: [],
  245. timmer: null,
  246. monthValue: this.getmonthValue(),
  247. list: [],
  248. DayPower: {
  249. // 图表所用单位
  250. units: [""],
  251. value: [
  252. {
  253. title: "",
  254. yAxisIndex: 0, // 使用单位
  255. value: [],
  256. },
  257. ],
  258. },
  259. };
  260. },
  261. created() {
  262. let _this = this
  263. // _this.$nextTick(() => {
  264. _this.getLists(false);
  265. // _this.timmer = setInterval(() => {
  266. // _this.getLists(false)
  267. // }, _this.$store.state.websocketTimeSec);
  268. // });
  269. },
  270. unmounted() {
  271. clearInterval(this.timmer);
  272. this.timmer = null;
  273. },
  274. mounted() {},
  275. methods: {
  276. exportPDF (name) {
  277. this.BASE.showMsg({
  278. type: "success",
  279. msg: "正在导出...请稍后..."
  280. });
  281. Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "状态转换率");
  282. },
  283. getmonthValue(){
  284. let year = new Date().getFullYear().toString()
  285. return year
  286. },
  287. onClickSearch() {
  288. this.getLists(false)
  289. },
  290. monthChange(data){
  291. let year = data.getFullYear().toString();
  292. return year
  293. },
  294. isNumber(val) {
  295. return typeof val === 'number' && !isNaN(val)
  296. },
  297. getLists(showLoading) {
  298. let MhsLists = []
  299. let NshList= []
  300. let QshList= []
  301. let SbaqList= []
  302. let XshList= []
  303. let GsList= []
  304. let _this = this
  305. let year = ''
  306. if (typeof(this.monthValue) === 'string') {
  307. year = this.monthValue
  308. } else {
  309. year = this.monthChange(this.monthValue)
  310. }
  311. const site = ['compare', 'year', 'month']
  312. _this.API.requestData({
  313. showLoading,
  314. method: "GET",
  315. baseURL: 'http://10.155.32.4:8034',
  316. subUrl: "/specific/ztzhlList",
  317. data:{
  318. year: year
  319. },
  320. success(res) {
  321. _this.list = res.data.map(item => {
  322. for (let key in item) {
  323. if (!site.includes(key)) {
  324. if(_this.isNumber(item[key])) {
  325. item[key] = item[key].toFixed(2)
  326. } else if (!item[key]){
  327. item[key] = 0
  328. item[key] = item[key].toFixed(2)
  329. }
  330. }
  331. }
  332. if (item.wpid === 'MHS_FDC') {
  333. MhsLists.push(item)
  334. } else if (item.wpid === 'NSS_FDC') {
  335. NshList.push(item)
  336. } else if (item.wpid === 'QS_FDC') {
  337. QshList.push(item)
  338. } else if (item.wpid === 'NSS_FDC') {
  339. NshList.push(item)
  340. } else if (item.wpid === 'SBQ_FDC') {
  341. SbaqList.push(item)
  342. } else if (item.wpid === 'XS_FDC') {
  343. XshList.push(item)
  344. } else {
  345. GsList.push(item)
  346. }
  347. })
  348. _this.MhsLists = MhsLists.sort(_this.compare('month'))
  349. _this.NshList= NshList.sort(_this.compare('month'))
  350. _this.QshList= QshList.sort(_this.compare('month'))
  351. _this.SbaqList= SbaqList.sort(_this.compare('month'))
  352. _this.XshList= XshList.sort(_this.compare('month'))
  353. _this.GsList= GsList.sort(_this.compare('month'))
  354. let nowCureent = []
  355. let sameCureent = []
  356. let monthData = []
  357. let monthsAll = []
  358. _this.GsList.map(item => {
  359. let objs = {}
  360. let obj = {}
  361. monthsAll.push(item.month)
  362. if (item.month > 10) {
  363. objs.text = item.month.toString()
  364. obj.text = item.month.toString()
  365. } else {
  366. item.text = '0'+ item.month
  367. objs.text = item.text
  368. obj.text = item.text
  369. }
  370. for (let key in item) {
  371. if (key === 'current') {
  372. objs.value = item.current
  373. nowCureent.push(objs)
  374. } else if (key === 'sameperiod'){
  375. obj.value = item.sameperiod
  376. sameCureent.push(obj)
  377. }
  378. }
  379. })
  380. _this.monthData = monthsAll
  381. _this.DayPower = {
  382. // 图表所用单位
  383. units: [""],
  384. value: [
  385. {
  386. title: "本期",
  387. yAxisIndex: 0, // 使用单位
  388. value: nowCureent,
  389. // nowCureent
  390. },
  391. {
  392. title: "同期",
  393. yAxisIndex: 0, // 使用单位
  394. value: sameCureent,
  395. // sameCureent
  396. },
  397. ],
  398. }
  399. // _this.DayPower = {
  400. // // 图表所用单位
  401. // units: [""],
  402. // value: [
  403. // {
  404. // title: "本期",
  405. // yAxisIndex: 0, // 使用单位
  406. // value: [],
  407. // },
  408. // {
  409. // title: "同期",
  410. // yAxisIndex: 0, // 使用单位
  411. // value: [],
  412. // },
  413. // ],
  414. // },
  415. // _this.bardata.legend = ["本期", "同期"]
  416. // _this.lineData = [];
  417. // _this.bardata.area = monthData;
  418. // _this.bardata.data[0] = sameCureent;
  419. // _this.bardata.data[1] = nowCureent;
  420. }
  421. })
  422. },
  423. compare(property) {
  424. return (a, b) => {
  425. let val1 = a[property]
  426. let val2 = b[property]
  427. return val1 - val2
  428. }
  429. }
  430. }
  431. };
  432. </script>
  433. <style lang="less">
  434. .ztfx {
  435. font-size: 12px;
  436. .select-btn {
  437. width: 92px;
  438. }
  439. .com-panel {
  440. border: 1px solid #6067697d;
  441. }
  442. .table-complex {
  443. margin-top: 10px;
  444. .table {
  445. border: 1px solid #6067697d;
  446. tbody {
  447. tr:nth-child(2n) td {
  448. background-color: fade(@gray, 20%);
  449. &.item {
  450. background-color: transparent;
  451. }
  452. }
  453. }
  454. th {
  455. background: fade(@gray, 40);
  456. font-size: 12px;
  457. font-weight: 400;
  458. line-height: 24px;
  459. color: @gray-l;
  460. &.type1 {
  461. border-left: 0;
  462. border-right: 0;
  463. }
  464. }
  465. td {
  466. color: @gray-l;
  467. text-align: center;
  468. height: 26px;
  469. line-height: 26px;
  470. // &.item {
  471. // width: 100px;
  472. // }
  473. }
  474. svg {
  475. height: 1.222vh;
  476. }
  477. }
  478. }
  479. .table-panel {
  480. margin-top: 10px;
  481. .panel-header {
  482. text-align: center;
  483. }
  484. .table {
  485. border: 1px solid #6067697d;
  486. tbody {
  487. tr:nth-child(2n) td {
  488. background-color: fade(@gray, 20%);
  489. &.item {
  490. background-color: transparent;
  491. }
  492. }
  493. }
  494. .td-item {
  495. width: 6vh;
  496. }
  497. th {
  498. background: fade(@gray, 40);
  499. font-size: 12px;
  500. font-weight: 400;
  501. line-height: 24px;
  502. color: @gray-l;
  503. &.type1 {
  504. border-left: 0;
  505. border-right: 0;
  506. height: 4vh;
  507. }
  508. }
  509. td {
  510. color: @gray-l;
  511. text-align: center;
  512. height: 46px;
  513. line-height: 46px;
  514. &.item {
  515. width: 100px;
  516. }
  517. }
  518. svg {
  519. height: 1.222vh;
  520. }
  521. }
  522. }
  523. .pie-chart-panel {
  524. margin-top: 10px;
  525. .line{
  526. border:none;
  527. }
  528. }
  529. }
  530. </style>