index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707
  1. <template>
  2. <div class="kernel">
  3. <el-collapse v-model="activeNames">
  4. <el-collapse-item title="基础信息" name="1">
  5. <p @click="database" class="CPC">
  6. 数据入库风场统计数: <span>{{ windFarmCount }}</span
  7. >个
  8. </p>
  9. <el-drawer title="入库统计" :visible.sync="drawer">
  10. <div class="card" v-for="(item, index) in Rklist" :key="index">
  11. <p>{{ item.windFarmName }}</p>
  12. <ul>
  13. <li
  14. v-for="(type, typeIndex) in item.typeCountDataList"
  15. :key="typeIndex"
  16. @click="details(item.windFarmCode, type)"
  17. >
  18. <span class="sp1">{{ type.transferName }}</span>
  19. <span class="sp2">{{ type.count }}</span>
  20. <span class="sp3">{{
  21. type.latestStorageTime || "无数据"
  22. }}</span>
  23. </li>
  24. </ul>
  25. </div>
  26. </el-drawer>
  27. <el-dialog title="统计信息" :visible.sync="dialogVisible" width="50%">
  28. <ul class="scrollable-list">
  29. <li v-for="(item, index) in dataset" :key="index">
  30. 任务名称: <span>{{ item.taskName }}</span> 时间跨度:<span>{{
  31. item.dataMinTime
  32. }}</span
  33. >~<span>{{ item.dataMaxTime }}</span>
  34. </li>
  35. </ul>
  36. </el-dialog>
  37. <el-descriptions title="最新入库详情">
  38. <el-descriptions-item label="任务名称">{{
  39. this.incoming.taskName
  40. }}</el-descriptions-item>
  41. <el-descriptions-item label="数据类型">{{
  42. this.incoming.transferTypeName
  43. }}</el-descriptions-item>
  44. <el-descriptions-item label="时间颗粒度"
  45. >{{ this.incoming.timeGranularity }}(秒)</el-descriptions-item
  46. >
  47. <el-descriptions-item label="时间范围"
  48. >{{ this.incoming.dataMinTime }}~{{
  49. this.incoming.dataMaxTime
  50. }}</el-descriptions-item
  51. >
  52. <el-descriptions-item label="风场名称">{{
  53. this.incoming.windFarmName
  54. }}</el-descriptions-item>
  55. <el-descriptions-item label="机组数量">{{
  56. this.incoming.engineCount
  57. }}</el-descriptions-item>
  58. <el-descriptions-item label="入库时间">{{
  59. this.incoming.transferFinishTime
  60. }}</el-descriptions-item>
  61. <el-descriptions-item label="收资人">{{
  62. this.incoming.dataCollector
  63. }}</el-descriptions-item>
  64. </el-descriptions>
  65. </el-collapse-item>
  66. </el-collapse>
  67. <div class="condition">
  68. <p>
  69. 风场名称:
  70. <el-select v-model="windvalue" placeholder="请选择">
  71. <el-option
  72. v-for="item in windoptions"
  73. :key="item.fieldCode"
  74. :label="item.fieldName"
  75. :value="item.fieldCode"
  76. >
  77. </el-option>
  78. </el-select>
  79. </p>
  80. <p>
  81. 转换类型:
  82. <el-select v-model="typevalue" placeholder="请选择">
  83. <el-option
  84. v-for="item in typeoptions"
  85. :key="item.paramKey"
  86. :label="item.paramValue"
  87. :value="item.paramKey"
  88. >
  89. </el-option>
  90. </el-select>
  91. </p>
  92. <p>
  93. 转换状态:
  94. <el-select v-model="statevalue" placeholder="请选择">
  95. <el-option
  96. v-for="item in stateoptions"
  97. :key="item.transferStatus"
  98. :label="item.label"
  99. :value="item.transferStatus"
  100. >
  101. </el-option>
  102. </el-select>
  103. </p>
  104. <div>
  105. <el-button @click="query">查询</el-button>
  106. <el-button @click="reset">重置</el-button>
  107. <el-button @click="newtransition">新增转换</el-button>
  108. </div>
  109. </div>
  110. <el-dialog title="转换" :visible.sync="transitionShow" width="30%">
  111. <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
  112. <el-form-item label="选择风场" prop="wind">
  113. <el-select v-model="form.wind" clearable placeholder="请选择风场">
  114. <el-option
  115. v-for="item in windoptions"
  116. :key="item.fieldCode"
  117. :label="item.fieldName"
  118. :value="item.fieldCode"
  119. />
  120. </el-select>
  121. </el-form-item>
  122. <el-form-item label="转换类型" prop="type">
  123. <el-select v-model="form.type" clearable placeholder="请选择转换类型">
  124. <el-option
  125. v-for="item in typeoptions"
  126. :key="item.paramKey"
  127. :label="item.paramValue"
  128. :value="item.paramKey"
  129. />
  130. </el-select>
  131. </el-form-item>
  132. <el-form-item label="读取路径" prop="path">
  133. <el-input v-model="form.path" clearable />
  134. </el-form-item>
  135. <el-form-item label="收资人" prop="name">
  136. <el-input v-model="form.name" clearable />
  137. </el-form-item>
  138. <el-form-item>
  139. <el-button type="primary" @click="onSubmit">提交</el-button>
  140. </el-form-item>
  141. </el-form>
  142. <el-dialog
  143. width="40%"
  144. title="提交"
  145. :visible.sync="innerVisible"
  146. append-to-body
  147. >
  148. <div class="renwu">
  149. <p>
  150. 任务名称:<el-input
  151. placeholder="请输入内容"
  152. v-model="nameinput"
  153. clearable
  154. >
  155. </el-input>
  156. </p>
  157. <el-button @click="onruku">确定</el-button>
  158. </div>
  159. </el-dialog>
  160. </el-dialog>
  161. <template>
  162. <el-table :data="tableData" style="width: 100%">
  163. <el-table-column type="expand">
  164. <template slot-scope="props">
  165. <el-form label-position="left" inline class="demo-table-expand">
  166. <el-form-item label="风场编号:">
  167. <span>{{ props.row.windFarmCode }}</span>
  168. </el-form-item>
  169. <el-form-item label="风场名称:">
  170. <span>{{ props.row.windFarmName }}</span>
  171. </el-form-item>
  172. <el-form-item label="任务名称:">
  173. <span>{{ props.row.taskName }}</span>
  174. </el-form-item>
  175. <el-form-item label="收资人:">
  176. <span>{{ props.row.dataCollector }}</span>
  177. </el-form-item>
  178. <el-form-item label="原始数据读取路径:">
  179. <span>{{ props.row.readDir }}</span>
  180. </el-form-item>
  181. <el-form-item label="标准化数据保存路径:">
  182. <span>{{ props.row.archivePath }}</span>
  183. </el-form-item>
  184. <el-form-item label="时间跨度:">
  185. <span
  186. >{{ props.row.dataMinTime }}~{{ props.row.dataMaxTime }}</span
  187. >
  188. </el-form-item>
  189. <el-form-item label="时间颗粒度(秒):">
  190. <span>{{ props.row.timeGranularity }}</span>
  191. </el-form-item>
  192. <el-form-item label="异常信息:" class="form-item">
  193. <span>{{ props.row.errInfo }}</span>
  194. </el-form-item>
  195. </el-form>
  196. </template>
  197. </el-table-column>
  198. <el-table-column label="风场名称" prop="windFarmName" width="200">
  199. </el-table-column>
  200. <el-table-column label="任务名称" prop="taskName" > </el-table-column>
  201. <el-table-column label="转换类型" prop="transferTypeName" width="130">
  202. </el-table-column>
  203. <el-table-column label="导入状态" prop="transferStatus" width="100">
  204. <template slot-scope="scope">
  205. <span v-if="scope.row.transferStatus === -1">等待导入</span>
  206. <span v-if="scope.row.transferStatus === 0">导入中</span>
  207. <span v-if="scope.row.transferStatus === 1">导入成功</span>
  208. <span v-if="scope.row.transferStatus === 2">导入失败</span>
  209. </template>
  210. </el-table-column>
  211. <el-table-column label="创建时间" prop="createTime">
  212. </el-table-column>
  213. <el-table-column label="操作" prop="desc">
  214. <template slot-scope="scope">
  215. <el-button @click="editor(scope.row)" type="text" size="small">
  216. 编辑
  217. </el-button>
  218. <el-button
  219. @click="restart(scope.row)"
  220. type="text"
  221. size="small"
  222. v-if="scope.row.transferStatus !== 1"
  223. >
  224. 重新导入
  225. </el-button>
  226. </template></el-table-column
  227. >
  228. </el-table>
  229. <el-pagination
  230. class="fenye"
  231. @size-change="handleSizeChange"
  232. @current-change="handleCurrentChange"
  233. :page-size="pageSize"
  234. layout="total, prev, pager, next"
  235. :total="total"
  236. ></el-pagination>
  237. </template>
  238. </div>
  239. </template>
  240. <script>
  241. import axios from "axios";
  242. import { getWindFieldNames } from "@/api/ledger.js";
  243. export default {
  244. data() {
  245. return {
  246. dialogVisible: false,
  247. dataset: [],
  248. windFarmCount: "",
  249. typevalue: "",
  250. typeoptions: [],
  251. statevalue: "",
  252. incoming: {},
  253. stateoptions: [
  254. {
  255. transferStatus: -1,
  256. label: "等待转换",
  257. },
  258. {
  259. transferStatus: 0,
  260. label: "转换中",
  261. },
  262. {
  263. transferStatus: 1,
  264. label: "转换成功",
  265. },
  266. {
  267. transferStatus: 2,
  268. label: "转换失败",
  269. },
  270. ],
  271. activeNames: ["1"],
  272. windvalue: "",
  273. windoptions: [],
  274. currentPage: 1, // 当前页
  275. pageSize: 10, // 每页显示条数
  276. total: 0,
  277. drawer: false,
  278. tableData: [],
  279. Rklist: [],
  280. nameinput: "",
  281. transitionShow: false,
  282. innerVisible: false,
  283. form: {
  284. wind: "",
  285. type: "",
  286. path: "",
  287. name: "",
  288. },
  289. formRules: {
  290. wind: [{ required: true, message: "请选择风场", trigger: "blur" }],
  291. type: [{ required: true, message: "请选择转换类型", trigger: "blur" }],
  292. path: [{ required: true, message: "请输入读取路径", trigger: "blur" }],
  293. name: [{ required: true, message: "请输入收资人", trigger: "blur" }],
  294. },
  295. };
  296. },
  297. created() {
  298. this.getchaxun();
  299. this.gettongji();
  300. this.getzuijin();
  301. this.windsite();
  302. this.query();
  303. },
  304. methods: {
  305. load() {
  306. this.count += 2;
  307. },
  308. async getchaxun() {
  309. const params = {
  310. type: "trans_type", // 假设 trans_type 是你传递的参数
  311. };
  312. try {
  313. const res = await axios.get("/ETLapi/sysConf/getByType", { params });
  314. this.typeoptions = res.data.datas;
  315. } catch (error) {
  316. console.error("Error fetching data:", error);
  317. }
  318. },
  319. async gettongji() {
  320. try {
  321. const res = await axios.post("/ETLapi/dataTransfer/getStatisticalData");
  322. this.windFarmCount = res.data.datas.windFarmCount;
  323. } catch (error) {
  324. console.error("Error fetching data:", error);
  325. }
  326. },
  327. async getzuijin() {
  328. try {
  329. const res = await axios.post(
  330. "/ETLapi/dataTransfer/recentlyImportedSuccessfulData"
  331. );
  332. this.incoming = res.data.datas;
  333. } catch (error) {
  334. console.error("Error fetching data:", error);
  335. }
  336. },
  337. async windsite() {
  338. try {
  339. const res = await getWindFieldNames();
  340. this.windoptions = res.data;
  341. } catch (error) {
  342. console.error("Error fetching data:", error);
  343. }
  344. },
  345. async query() {
  346. const params = {
  347. pageNo: this.currentPage,
  348. pageSize: this.pageSize,
  349. transferStatus: this.statevalue,
  350. transferType: this.typevalue,
  351. windFarmCode: this.windvalue,
  352. };
  353. try {
  354. const res = await axios.post(
  355. "/ETLapi/dataTransfer/getDataTransfer",
  356. params
  357. );
  358. this.tableData = res.data.datas;
  359. this.total = res.data.totalCount;
  360. } catch (error) {
  361. console.error("Error fetching data:", error);
  362. }
  363. },
  364. handleSizeChange(newSize) {
  365. this.pageSize = newSize;
  366. this.query(); // 更新后重新请求数据
  367. },
  368. // 处理页码变化
  369. handleCurrentChange(page) {
  370. this.currentPage = page; // 更新当前页
  371. this.query(); // 重新请求数据
  372. },
  373. reset() {
  374. this.windvalue = "";
  375. this.typevalue = "";
  376. this.statevalue = "";
  377. this.query();
  378. },
  379. restart(row) {
  380. axios
  381. .get(`/ETLapi/dataTransfer/reTransfer/${row.id}`)
  382. .then((res) => {
  383. if (res.data.code === 200) {
  384. this.$message({
  385. message: "重新导入成功",
  386. type: "success",
  387. });
  388. this.query();
  389. }
  390. if (res.data.code === 500) {
  391. this.$message.error(res.data.message);
  392. }
  393. })
  394. .catch((error) => {
  395. console.error("Error fetching data:", error);
  396. });
  397. },
  398. database() {
  399. this.drawer = true;
  400. axios
  401. .post(`/ETLapi/dataTransfer/classificationImportDataDetails`)
  402. .then((res) => {
  403. if (res.data.code === 200) {
  404. this.Rklist = res.data.datas;
  405. }
  406. if (res.data.code === 500) {
  407. this.$message.error(res.data.message);
  408. }
  409. })
  410. .catch((error) => {
  411. console.error("Error fetching data:", error);
  412. });
  413. },
  414. details(windFarmCode, type) {
  415. this.dialogVisible = true;
  416. // console.log(windFarmCode, type);
  417. // return;
  418. const params = {
  419. pageNo: "1",
  420. pageSize: "999",
  421. transferStatus: 1,
  422. transferType: type.transferType,
  423. windFarmCode: windFarmCode,
  424. };
  425. axios
  426. .post("/ETLapi/dataTransfer/getDataTransfer", params)
  427. .then((res) => {
  428. this.dataset = res.data.datas;
  429. })
  430. .catch((error) => {
  431. console.error("Error fetching data:", error);
  432. });
  433. },
  434. newtransition() {
  435. this.transitionShow = true;
  436. },
  437. onSubmit() {
  438. this.$refs.form.validate((valid) => {
  439. if (valid) {
  440. // 表单验证通过,执行提交操作
  441. const currentTime = this.$formatDateTWO(new Date());
  442. const selectedWind = this.windoptions.find(
  443. (option) => option.fieldCode === this.form.wind
  444. );
  445. const selectedType = this.typeoptions.find(
  446. (option) => option.paramKey === this.form.type
  447. );
  448. const windLabel = selectedWind ? selectedWind.fieldName : "";
  449. const typeLabel = selectedType ? selectedType.paramValue : "";
  450. // 拼接 nameinput
  451. this.nameinput = `${windLabel}${typeLabel}${currentTime}`;
  452. this.innerVisible = true;
  453. } else {
  454. console.log("表单验证失败");
  455. }
  456. });
  457. },
  458. onruku() {
  459. const params = {
  460. dataCollector: this.form.name,
  461. readDir: this.form.path,
  462. taskName: this.nameinput,
  463. transferType: this.form.type,
  464. windFarmCode: this.form.wind,
  465. windFarmName:
  466. this.windoptions.find((option) => option.fieldCode === this.form.wind)
  467. ?.fieldName || "",
  468. };
  469. axios
  470. .post("/ETLapi/dataTransfer/addDataTransferTask", params)
  471. .then((res) => {
  472. this.innerVisible = false;
  473. this.transitionShow = false;
  474. if (res.data.code === 200) {
  475. this.$message({
  476. message: "导入成功",
  477. type: "success",
  478. });
  479. this.query();
  480. }
  481. if (res.data.code === 500) {
  482. this.$message.error(res.data.message);
  483. }
  484. });
  485. },
  486. },
  487. };
  488. </script>
  489. <style lang="scss" scoped>
  490. .CPC {
  491. border: 1px solid #008080;
  492. background: #00808057;
  493. display: inline-block;
  494. padding: 10px;
  495. color: #000000;
  496. border-radius: 5px;
  497. cursor: pointer;
  498. }
  499. .kernel {
  500. min-height: 100vh;
  501. width: 100%;
  502. background: #fff;
  503. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  504. padding: 0 40px;
  505. h3 {
  506. font-size: 40px;
  507. font-weight: 600;
  508. text-align: center;
  509. }
  510. .condition {
  511. display: flex;
  512. padding: 20px 0;
  513. p {
  514. margin-right: 20px;
  515. }
  516. }
  517. }
  518. .demo-table-expand {
  519. font-size: 0;
  520. }
  521. .demo-table-expand label {
  522. width: 90px;
  523. color: #99a9bf;
  524. }
  525. .demo-table-expand .el-form-item {
  526. margin-right: 0;
  527. margin-bottom: 0;
  528. width: 50%;
  529. }
  530. ::v-deep .el-collapse-item__header {
  531. font-weight: 600;
  532. font-size: 18px;
  533. }
  534. .fenye {
  535. display: flex;
  536. justify-content: center;
  537. padding: 20px 0;
  538. }
  539. .card {
  540. margin: 10px 30px;
  541. border-radius: 4px;
  542. padding: 20px;
  543. border: 1px solid #b3b3b3;
  544. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  545. p {
  546. font-weight: 600;
  547. font-size: 16px;
  548. }
  549. ul {
  550. padding-left: 10px;
  551. li:hover {
  552. background: #008080;
  553. color: #fff;
  554. cursor: pointer;
  555. }
  556. span {
  557. display: inline-block;
  558. }
  559. .sp1 {
  560. width: 120px;
  561. }
  562. .sp2 {
  563. width: 50px;
  564. }
  565. }
  566. }
  567. .renwu {
  568. display: flex;
  569. .el-input {
  570. width: 400px;
  571. margin-right: 20px;
  572. }
  573. }
  574. .demo-table-expand {
  575. display: flex;
  576. flex-wrap: wrap;
  577. /* 允许换行 */
  578. gap: 0px;
  579. /* 子元素间距 */
  580. }
  581. .demo-table-expand .el-form-item {
  582. flex: 1 1 100%;
  583. /* 每个表单项占满一行 */
  584. display: inline-flex;
  585. /* 让每个项都在一行显示 */
  586. margin-bottom: 0;
  587. /* 去掉多余的底部边距 */
  588. }
  589. .demo-table-expand .el-form-item label {
  590. width: 120px;
  591. /* 可以根据需要调整标签宽度 */
  592. margin-right: 10px;
  593. /* 标签和内容的间距 */
  594. }
  595. .demo-table-expand .el-form-item span {
  596. flex: 1;
  597. /* 内容占满剩余空间 */
  598. }
  599. /* 确保 label 能根据内容换行 */
  600. .form-item {
  601. display: flex;
  602. /* 使用 Flexbox 布局 */
  603. flex-wrap: wrap;
  604. /* 允许换行 */
  605. align-items: center;
  606. /* 标签和内容在垂直方向上对齐 */
  607. }
  608. .form-item label {
  609. white-space: normal;
  610. /* 允许标签文本换行 */
  611. word-wrap: break-word;
  612. /* 自动断行 */
  613. max-width: 150px;
  614. /* 限制标签宽度,防止过长 */
  615. }
  616. .form-item span {
  617. flex: 1;
  618. /* 内容部分占满剩余空间 */
  619. word-wrap: break-word;
  620. /* 内容部分也允许换行 */
  621. white-space: normal;
  622. /* 内容部分的文本能自动换行 */
  623. }
  624. .scrollable-list {
  625. height: 400px;
  626. overflow-y: auto;
  627. /* 其他样式 */
  628. }
  629. /* 自定义滚动条 */
  630. .scrollable-list::-webkit-scrollbar {
  631. width: 8px; /* 设置滚动条的宽度 */
  632. }
  633. .scrollable-list::-webkit-scrollbar-track {
  634. background: #f1f1f1; /* 设置滚动条轨道的背景颜色 */
  635. border-radius: 4px;
  636. }
  637. .scrollable-list::-webkit-scrollbar-thumb {
  638. background: #888; /* 设置滚动条滑块的颜色 */
  639. border-radius: 4px;
  640. }
  641. .scrollable-list::-webkit-scrollbar-thumb:hover {
  642. background: #555; /* 鼠标悬停时滑块的颜色 */
  643. }
  644. ::v-deep .el-drawer__header > :first-child {
  645. font-size: 18px;
  646. font-weight: 800;
  647. color: #000000;
  648. }
  649. </style>