indexFd.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  1. <template>
  2. <div class="parcel-box">
  3. <div class="title">
  4. <div class="form-wrapper">
  5. <div class="select-wrapper">
  6. <el-select
  7. size="mini"
  8. v-model="tabIndex"
  9. placeholder="请选择"
  10. @change="tabClick"
  11. >
  12. <el-option
  13. v-for="item in tabOptions"
  14. :key="item.id"
  15. :label="item.name"
  16. :value="item.id"
  17. >
  18. </el-option>
  19. </el-select>
  20. <el-select
  21. size="mini"
  22. v-model="company"
  23. placeholder="请选择"
  24. @change="search"
  25. >
  26. <el-option
  27. v-for="item in companyOptions"
  28. :key="item.id"
  29. :label="item.aname"
  30. :value="item.id"
  31. >
  32. </el-option>
  33. </el-select>
  34. </div>
  35. <div class="date-wrapper">
  36. <div class="date-item-wrapper">
  37. <div class="date-item-date">
  38. <el-date-picker
  39. size="mini"
  40. v-model="searchYear"
  41. type="year"
  42. value-format="YYYY"
  43. placeholder="选择年"
  44. >
  45. </el-date-picker>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="btns">
  51. <el-button round size="mini" class="buttons search" @click="search"
  52. >搜索</el-button
  53. >
  54. </div>
  55. <!-- <el-button round size="mini">导出</el-button> -->
  56. </div>
  57. <div class="data-bodys">
  58. <div class="line clearfix">
  59. <div class="leftContent left">
  60. <span>利用小时分析</span>
  61. </div>
  62. <div class="rightContent line-right"></div>
  63. </div>
  64. <div class="economicTable">
  65. <el-table
  66. :data="tableData"
  67. style="width: 100%"
  68. size="mini"
  69. stripe
  70. height="100%"
  71. :header-cell-style="{ 'text-align': 'center' }"
  72. @row-click="rowClick"
  73. >
  74. <el-table-column
  75. align="left"
  76. prop=""
  77. width="80"
  78. label="场站"
  79. show-overflow-tooltip
  80. sortable
  81. >
  82. <template v-slot="scope">
  83. <span style="cursor: pointer">{{ scope.row.wpname }}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column
  87. align="center"
  88. :label="val"
  89. v-for="(val, index) in tableHead"
  90. :key="index"
  91. width="auto"
  92. sortable
  93. >
  94. <template v-slot="scope">
  95. <div v-if="scope.row.wpname == ''">
  96. <el-row>
  97. <el-col :span="12"
  98. ><span>{{ scope.row.data?.current }}</span></el-col
  99. >
  100. <el-col :span="12"
  101. ><span>{{ scope.row.data.sameperiod }}</span></el-col
  102. >
  103. </el-row>
  104. </div>
  105. <div v-else>
  106. <el-row>
  107. <el-col :span="12">
  108. <div style="white-space: nowrap; height: 100%">
  109. <span style="white-space: nowrap">{{
  110. scope.row.targetList &&
  111. (scope.row.targetList[index]?.current ||
  112. scope.row.targetList[index]?.current === 0
  113. ? scope.row.targetList[index]?.current
  114. : "--")
  115. }}</span>
  116. <i
  117. v-if="
  118. scope.row.targetList &&
  119. (scope.row.targetList[index]?.compare > 0 ||
  120. scope.row.targetList[index]?.compare === 0)
  121. "
  122. class="active_icon icon-arrow-up compare-lift-up"
  123. ></i>
  124. <i
  125. v-if="
  126. scope.row.targetList &&
  127. scope.row.targetList[index]?.compare < 0
  128. "
  129. class="active_icon icon-arrow-down compare-lift-down"
  130. ></i>
  131. </div>
  132. </el-col>
  133. <el-col :span="12"
  134. ><span>{{
  135. scope.row.targetList &&
  136. (scope.row.targetList[index]?.sameperiod ||
  137. scope.row.targetList[index]?.sameperiod === 0
  138. ? scope.row.targetList[index]?.sameperiod
  139. : "--")
  140. }}</span></el-col
  141. >
  142. </el-row>
  143. </div>
  144. </template>
  145. </el-table-column>
  146. </el-table>
  147. </div>
  148. </div>
  149. <div class="echarts">
  150. <div class="chart-name">
  151. <div class="point left bottom"></div>
  152. <div class="point right bottom"></div>
  153. 利用小时分析
  154. </div>
  155. <div style="height: calc(100% - 50px)">
  156. <BarCharts
  157. :list="barList"
  158. width="97%"
  159. height="100%"
  160. :top="25"
  161. :pillarName="pillarName"
  162. :xdate="false"
  163. :showLegend="true"
  164. :units="['']"
  165. ></BarCharts>
  166. </div>
  167. </div>
  168. </div>
  169. </template>
  170. <script>
  171. import { GetOrganization } from "@/api/headerNav.js";
  172. import BarCharts from "../../homePage/components/barCharts.vue";
  173. import { lyxsList } from "@/api/curveAnalyse";
  174. export default {
  175. name: "utillHoursFd", //利用小时分析
  176. components: {
  177. // ChartColumnar,
  178. // Panel,
  179. BarCharts,
  180. },
  181. data() {
  182. return {
  183. pillarName: "",
  184. list: [],
  185. tabIndex: -1,
  186. tabOptions: [
  187. { id: -1, name: "风电" },
  188. { id: -2, name: "光伏" },
  189. ],
  190. // barHeight: '260px',
  191. barList: [],
  192. tableData: [],
  193. tableHead: [
  194. "一月",
  195. "二月",
  196. "三月",
  197. "四月",
  198. "五月",
  199. "六月",
  200. "七月",
  201. "八月",
  202. "九月",
  203. "十月",
  204. "十一月",
  205. "十二月",
  206. ],
  207. company: "",
  208. companyOptions: [],
  209. searchYear: this.getmonthValue(),
  210. selectValue: "利用小时分析",
  211. };
  212. },
  213. watch: {},
  214. filters: {},
  215. computed: {},
  216. created() {
  217. this.initialization();
  218. },
  219. methods: {
  220. initialization() {
  221. GetOrganization({ type: this.tabIndex }).then((res) => {
  222. if (res.data) {
  223. this.companyOptions = res.data;
  224. this.company = res.data[0].id;
  225. this.search();
  226. }
  227. });
  228. },
  229. compare(property) {
  230. return (a, b) => {
  231. let val1 = a[property];
  232. let val2 = b[property];
  233. return val1 - val2;
  234. };
  235. },
  236. rowClick(list) {
  237. if (list?.wpname) {
  238. let barList = [
  239. {
  240. name: "本期",
  241. children: [],
  242. date: [],
  243. },
  244. {
  245. name: "同期",
  246. children: [],
  247. },
  248. ];
  249. this.pillarName = list.wpname;
  250. list.targetList.forEach((item) => {
  251. barList[0].date.push(item.month + "月");
  252. barList[0].children.push(item.current || 0);
  253. barList[1].children.push(item.compare || 0);
  254. });
  255. this.barList = barList;
  256. }
  257. },
  258. isNumber(val) {
  259. return typeof val === "number" && !isNaN(val);
  260. },
  261. search() {
  262. lyxsList({
  263. companys: this.company,
  264. type: this.tabIndex,
  265. year: this.monthChange(this.searchYear),
  266. }).then((res) => {
  267. if (res.data.length) {
  268. let arr = [
  269. {
  270. wpname: "",
  271. data: {
  272. wpname: "期次",
  273. current: "本期",
  274. sameperiod: "同期",
  275. },
  276. },
  277. ];
  278. this.tableData = [...arr, ...res.data];
  279. this.rowClick(res.data[res.data.length - 1]);
  280. } else {
  281. this.barList = [];
  282. }
  283. });
  284. },
  285. monthChange(data) {
  286. let year = new Date(data).getFullYear().toString();
  287. return year;
  288. },
  289. getmonthValue() {
  290. let year = new Date().getFullYear().toString();
  291. return year;
  292. },
  293. tabClick(data) {
  294. this.$router.push({
  295. path: "/economicsOperation/thematicAnalysis/utillHours",
  296. });
  297. },
  298. },
  299. mounted() {},
  300. beforeUnmount() {},
  301. };
  302. </script>
  303. <style lang="less" scoped>
  304. .parcel-box {
  305. padding: 0 20px;
  306. box-sizing: border-box;
  307. height: 100%;
  308. .title ::v-deep {
  309. display: flex;
  310. flex-direction: row;
  311. align-items: center;
  312. margin-top: 10px;
  313. margin-bottom: 10px;
  314. padding-left: 10px;
  315. .form-wrapper {
  316. display: flex;
  317. align-items: center;
  318. .select-wrapper {
  319. display: flex;
  320. align-items: center;
  321. .el-select {
  322. width: 155px;
  323. margin-right: 10px;
  324. .el-input .el-input__inner {
  325. width: 150px;
  326. }
  327. }
  328. }
  329. .date-wrapper {
  330. display: flex;
  331. align-items: center;
  332. font-size: 14px;
  333. font-family: Microsoft YaHei;
  334. font-weight: 400;
  335. color: #b3b3b3;
  336. .date-item-wrapper {
  337. white-space: nowrap;
  338. display: flex;
  339. align-items: center;
  340. margin-right: 15px;
  341. .date-item-date {
  342. .el-input {
  343. width: 155px;
  344. }
  345. .el-input .el-input__inner {
  346. width: 150px;
  347. font-size: 13px;
  348. color: #b3b3b3;
  349. }
  350. }
  351. }
  352. }
  353. }
  354. .but {
  355. display: flex;
  356. flex-direction: row;
  357. align-content: center;
  358. }
  359. .el-button + .el-button {
  360. margin-left: 0;
  361. }
  362. .buttons {
  363. background-color: rgba(0, 70, 199, 0.2);
  364. border: 1px solid #3b4c6c;
  365. color: #b3b3b3;
  366. font-size: 14px;
  367. margin-right: 10px;
  368. &:hover {
  369. background-color: rgba(0, 70, 199, 0.5);
  370. color: #ffffff;
  371. }
  372. }
  373. }
  374. .line {
  375. padding-bottom: 5px;
  376. .leftContent {
  377. width: 242px;
  378. height: 41px;
  379. line-height: 41px;
  380. background: url("../../../../../assets/imgs/title_left_bg.png");
  381. span {
  382. font-size: 16px;
  383. font-family: Microsoft YaHei;
  384. font-weight: 400;
  385. color: #ffffff;
  386. margin-left: 25px;
  387. }
  388. }
  389. .rightContent {
  390. width: 212px;
  391. height: 28px;
  392. margin-top: 13px;
  393. background: url("../../../../../assets/imgs/title_right_bg.png");
  394. }
  395. .left {
  396. float: left;
  397. }
  398. .line-right {
  399. float: right;
  400. }
  401. }
  402. .data-bodys {
  403. height: calc(100% - 60px - 300px - 10px);
  404. display: flex;
  405. flex-direction: column;
  406. background-color: rgba(0, 0, 0, 0.45);
  407. border-radius: 5px;
  408. padding: 5px;
  409. .icon-arrow-down:before {
  410. color: #ff8300;
  411. }
  412. .icon-arrow-up:before {
  413. color: #1c99ff;
  414. }
  415. .economicTable {
  416. width: 100%;
  417. height: calc(100% - 46px);
  418. }
  419. }
  420. .echarts {
  421. margin-top: 10px;
  422. background-color: rgba(0, 0, 0, 0.45);
  423. border-radius: 5px;
  424. width: 100%;
  425. height: 300px;
  426. }
  427. }
  428. .clearfix::after {
  429. content: "";
  430. clear: both;
  431. height: 0;
  432. line-height: 0;
  433. visibility: hidden;
  434. display: block;
  435. }
  436. .clearfix {
  437. zoom: 1;
  438. }
  439. .el-table::before {
  440. height: 0;
  441. }
  442. .chart-name {
  443. display: flex;
  444. align-items: center;
  445. justify-content: center;
  446. position: relative;
  447. width: 100%;
  448. height: 40px;
  449. border-bottom: 1px solid rgba(106, 106, 106, 0.5);
  450. font-size: 16px;
  451. font-family: Microsoft YaHei;
  452. font-weight: 400;
  453. color: #ffffff;
  454. }
  455. .point {
  456. width: 6px;
  457. height: 1px;
  458. background-color: #ffffff;
  459. position: absolute;
  460. &.left {
  461. left: 0;
  462. }
  463. &.right {
  464. right: 0;
  465. }
  466. &.top {
  467. top: -1px;
  468. }
  469. &.bottom {
  470. bottom: -1px;
  471. }
  472. }
  473. </style>