log.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryForm"
  6. size="small"
  7. :inline="true"
  8. v-show="showSearch"
  9. label-width="68px"
  10. >
  11. <el-form-item label="任务名称" prop="jobName">
  12. <el-input
  13. v-model="queryParams.jobName"
  14. placeholder="请输入任务名称"
  15. clearable
  16. style="width: 240px"
  17. @keyup.enter.native="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item label="任务组名" prop="jobGroup">
  21. <el-select
  22. v-model="queryParams.jobGroup"
  23. placeholder="请选择任务组名"
  24. clearable
  25. style="width: 240px"
  26. >
  27. <el-option
  28. v-for="dict in dict.type.sys_job_group"
  29. :key="dict.value"
  30. :label="dict.label"
  31. :value="dict.value"
  32. />
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="执行状态" prop="status">
  36. <el-select
  37. v-model="queryParams.status"
  38. placeholder="请选择执行状态"
  39. clearable
  40. style="width: 240px"
  41. >
  42. <el-option
  43. v-for="dict in dict.type.sys_common_status"
  44. :key="dict.value"
  45. :label="dict.label"
  46. :value="dict.value"
  47. />
  48. </el-select>
  49. </el-form-item>
  50. <el-form-item label="执行时间">
  51. <el-date-picker
  52. v-model="dateRange"
  53. style="width: 240px"
  54. value-format="yyyy-MM-dd"
  55. type="daterange"
  56. range-separator="-"
  57. start-placeholder="开始日期"
  58. end-placeholder="结束日期"
  59. ></el-date-picker>
  60. </el-form-item>
  61. <el-form-item label="是否完成" prop="whetherComplete">
  62. <el-select v-model="queryParams.whetherComplete" placeholder="请选择任务是否完成" clearable>
  63. <el-option
  64. v-for="dict in dict.type.sys_job_complete"
  65. :key="dict.value"
  66. :label="dict.label"
  67. :value="dict.value"
  68. />
  69. </el-select>
  70. </el-form-item>
  71. <el-form-item label="任务员工" prop="empno">
  72. <el-input
  73. v-model="queryParams.empno"
  74. placeholder="请输入员工工号"
  75. clearable
  76. />
  77. </el-form-item>
  78. <el-form-item label="任务大类" prop="jobType">
  79. <el-select v-model="queryParams.jobType" placeholder="请选择任务大类" clearable>
  80. <el-option
  81. v-for="dict in dict.type.sys_oa"
  82. :key="dict.value"
  83. :label="dict.label"
  84. :value="dict.value"
  85. />
  86. </el-select>
  87. </el-form-item>
  88. <el-form-item label="任务小类" prop="jobTypeS">
  89. <el-select v-model="queryParams.jobTypeS" placeholder="请选择任务小类" clearable>
  90. <el-option
  91. v-for="dict in dict.type.sys_oa_s"
  92. :key="dict.value"
  93. :label="dict.label"
  94. :value="dict.value"
  95. />
  96. </el-select>
  97. </el-form-item>
  98. <el-form-item>
  99. <el-button
  100. type="primary"
  101. icon="el-icon-search"
  102. size="mini"
  103. @click="handleQuery"
  104. >搜索</el-button
  105. >
  106. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
  107. >重置</el-button
  108. >
  109. </el-form-item>
  110. </el-form>
  111. <el-row :gutter="10" class="mb8">
  112. <el-col :span="1.5">
  113. <el-button
  114. type="danger"
  115. plain
  116. icon="el-icon-delete"
  117. size="mini"
  118. :disabled="multiple"
  119. @click="handleDelete"
  120. v-hasPermi="['monitor:job:remove']"
  121. >删除</el-button
  122. >
  123. </el-col>
  124. <el-col :span="1.5">
  125. <el-button
  126. type="danger"
  127. plain
  128. icon="el-icon-delete"
  129. size="mini"
  130. @click="handleClean"
  131. v-hasPermi="['monitor:job:remove']"
  132. >清空</el-button
  133. >
  134. </el-col>
  135. <el-col :span="1.5">
  136. <el-button
  137. type="warning"
  138. plain
  139. icon="el-icon-download"
  140. size="mini"
  141. @click="handleExport"
  142. v-hasPermi="['monitor:job:export']"
  143. >导出</el-button
  144. >
  145. </el-col>
  146. <el-col :span="1.5">
  147. <el-button
  148. type="warning"
  149. plain
  150. icon="el-icon-close"
  151. size="mini"
  152. @click="handleClose"
  153. >关闭</el-button
  154. >
  155. </el-col>
  156. <right-toolbar
  157. :showSearch.sync="showSearch"
  158. @queryTable="getList"
  159. ></right-toolbar>
  160. </el-row>
  161. <el-table
  162. v-loading="loading"
  163. :data="jobLogList"
  164. @selection-change="handleSelectionChange"
  165. @row-dblclick="dblclick"
  166. >
  167. <el-table-column type="selection" width="55" align="center" />
  168. <el-table-column label="编号" width="80" align="center" prop="jobLogId" />
  169. <el-table-column label="任务执行状态" align="center" prop="status">
  170. <template slot-scope="scope">
  171. <dict-tag
  172. :options="dict.type.sys_common_status"
  173. :value="scope.row.status"
  174. />
  175. </template>
  176. </el-table-column>
  177. <!-- <el-table-column label="执行时间" align="center" prop="createTime" width="180">
  178. <template slot-scope="scope">
  179. <span>{{ parseTime(scope.row.createTime) }}</span>
  180. </template>
  181. </el-table-column>-->
  182. <el-table-column
  183. label="完成时长"
  184. width="180"
  185. align="center"
  186. prop="tqaaaa"
  187. />
  188. <el-table-column
  189. label="超时时长"
  190. width="180"
  191. align="center"
  192. prop="tqbbbb"
  193. />
  194. <el-table-column
  195. label="任务名称"
  196. width="180"
  197. align="center"
  198. prop="jobName"
  199. :show-overflow-tooltip="false"
  200. />
  201. <el-table-column
  202. label="任务员工"
  203. width="80"
  204. align="center"
  205. prop="nickName"
  206. />
  207. <el-table-column
  208. label="任务大类"
  209. width="80"
  210. align="center"
  211. prop="jobType"
  212. />
  213. <el-table-column
  214. label="任务小类"
  215. width="80"
  216. align="center"
  217. prop="jobTypeS"
  218. />
  219. <el-table-column
  220. label="任务内容"
  221. width="200"
  222. align="center"
  223. prop="cont"
  224. />
  225. <el-table-column
  226. label="执行时间"
  227. align="center"
  228. prop="createTime"
  229. width="180"
  230. >
  231. <template slot-scope="scope">
  232. <span>{{ parseTime(scope.row.createTime) }}</span>
  233. </template>
  234. </el-table-column>
  235. <el-table-column
  236. label="完成时间"
  237. width="180"
  238. align="center"
  239. prop="executionTime"
  240. />
  241. <el-table-column
  242. label="预计时长"
  243. width="80"
  244. align="center"
  245. prop="durations"
  246. />
  247. <el-table-column
  248. label="oa执行状态"
  249. width="90"
  250. align="center"
  251. prop="completionStatus"
  252. >
  253. <template slot-scope="scope">
  254. <dict-tag
  255. :options="dict.type.sys_oa_back_state"
  256. :value="scope.row.completionStatus"
  257. />
  258. </template>
  259. </el-table-column>
  260. <el-table-column
  261. label="任务组名"
  262. align="center"
  263. prop="jobGroup"
  264. :show-overflow-tooltip="true"
  265. >
  266. <template slot-scope="scope">
  267. <dict-tag
  268. :options="dict.type.sys_job_group"
  269. :value="scope.row.jobGroup"
  270. />
  271. </template>
  272. </el-table-column>
  273. <!-- <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />-->
  274. <el-table-column
  275. label="日志信息"
  276. align="center"
  277. prop="jobMessage"
  278. :show-overflow-tooltip="true"
  279. />
  280. <el-table-column
  281. label="操作"
  282. align="center"
  283. class-name="small-padding fixed-width"
  284. >
  285. <template slot-scope="scope">
  286. <el-button
  287. size="mini"
  288. type="text"
  289. icon="el-icon-view"
  290. @click="handleView(scope.row)"
  291. v-hasPermi="['monitor:job:query']"
  292. >详细</el-button
  293. >
  294. </template>
  295. </el-table-column>
  296. </el-table>
  297. <pagination
  298. v-show="total > 0"
  299. :total="total"
  300. :page.sync="queryParams.pageNum"
  301. :limit.sync="queryParams.pageSize"
  302. @pagination="getList"
  303. />
  304. <!-- 调度日志详细 -->
  305. <el-dialog
  306. title="调度日志详细"
  307. :visible.sync="open"
  308. width="700px"
  309. append-to-body
  310. >
  311. <el-form ref="form" :model="form" label-width="100px" size="mini">
  312. <el-row>
  313. <el-col :span="12">
  314. <el-form-item label="日志序号:">{{ form.jobLogId }}</el-form-item>
  315. <el-form-item label="任务名称:">{{ form.jobName }}</el-form-item>
  316. <el-form-item label="员工工号:">{{ form.empno }}</el-form-item>
  317. </el-col>
  318. <el-col :span="12">
  319. <el-form-item label="任务分组:">{{ form.jobGroup }}</el-form-item>
  320. <el-form-item label="执行时间:">{{
  321. form.createTime
  322. }}</el-form-item>
  323. </el-col>
  324. <el-col :span="24">
  325. <el-form-item label="调用方法:">{{
  326. form.invokeTarget
  327. }}</el-form-item>
  328. </el-col>
  329. <el-col :span="24">
  330. <el-form-item label="日志信息:">{{
  331. form.jobMessage
  332. }}</el-form-item>
  333. </el-col>
  334. <el-col :span="24">
  335. <el-form-item label="执行状态:">
  336. <div v-if="form.status == 0">正常</div>
  337. <div v-else-if="form.status == 1">失败</div>
  338. </el-form-item>
  339. </el-col>
  340. <el-col :span="24">
  341. <el-form-item label="异常信息:" v-if="form.status == 1">{{
  342. form.exceptionInfo
  343. }}</el-form-item>
  344. </el-col>
  345. </el-row>
  346. </el-form>
  347. <div slot="footer">
  348. <el-button @click="open = false">关 闭</el-button>
  349. </div>
  350. </el-dialog>
  351. </div>
  352. </template>
  353. <script>
  354. import { getJob } from "@/api/monitor/job";
  355. import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog";
  356. export default {
  357. name: "JobLog",
  358. dicts: ["sys_job_complete", "sys_oa", "sys_oa_s", "sys_common_status", "sys_job_group","sys_oa_back_state"],
  359. data() {
  360. return {
  361. // 遮罩层
  362. loading: true,
  363. // 选中数组
  364. ids: [],
  365. // 非多个禁用
  366. multiple: true,
  367. // 显示搜索条件
  368. showSearch: true,
  369. // 总条数
  370. total: 0,
  371. // 调度日志表格数据
  372. jobLogList: [],
  373. // 是否显示弹出层
  374. open: false,
  375. // 日期范围
  376. dateRange: [],
  377. // 表单参数
  378. form: {},
  379. // 查询参数
  380. queryParams: {
  381. pageNum: 1,
  382. pageSize: 10,
  383. jobName: undefined,
  384. jobGroup: undefined,
  385. status: undefined,
  386. jobType: undefined,
  387. jobTypeS: undefined,
  388. empno:undefined,
  389. whetherComplete:undefined
  390. },
  391. };
  392. },
  393. created() {
  394. const jobId = this.$route.params && this.$route.params.jobId;
  395. if (jobId !== undefined && jobId != 0) {
  396. getJob(jobId).then((response) => {
  397. this.queryParams.jobName = response.data.jobName;
  398. this.queryParams.jobGroup = response.data.jobGroup;
  399. this.getList();
  400. });
  401. } else {
  402. this.getList();
  403. }
  404. },
  405. methods: {
  406. dblclick({ executionTime, createTime }, column) {
  407. console.log(
  408. (new Date(executionTime).getTime() - new Date(createTime).getTime()) /
  409. 1000 +
  410. "s"
  411. );
  412. },
  413. /** 查询调度日志列表 */
  414. getList() {
  415. this.loading = true;
  416. listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(
  417. (response) => {
  418. // console.log(response, 'response')
  419. this.jobLogList = response.rows.map((item) => {
  420. const { executionTime, createTime, duration } = item;
  421. const durations=`${duration}h`;
  422. let tqaaaa = null;
  423. if(executionTime != null){
  424. tqaaaa = (
  425. parseInt (
  426. new Date(executionTime).getTime() - new Date(createTime).getTime()
  427. ) /
  428. 1000 /
  429. 60 /
  430. 60
  431. ).toFixed(2);
  432. }
  433. /** 用于计算超时时长 */
  434. const calculateTime = (
  435. parseInt (
  436. new Date(executionTime == null ? Date(): executionTime).getTime() - new Date(createTime).getTime()
  437. ) /
  438. 1000 /
  439. 60 /
  440. 60
  441. ).toFixed(2);
  442. /** 计算超时时长 */
  443. const timestemp = (calculateTime - duration).toFixed(2) ;
  444. const tqbbbb = timestemp > 0 ? `超时 ${timestemp}h` : `未超时`;
  445. return {
  446. ...item,
  447. tqaaaa,
  448. tqbbbb,
  449. durations,
  450. };
  451. });
  452. this.total = response.total;
  453. this.loading = false;
  454. }
  455. );
  456. },
  457. // new Date(scope.row.executionTime).getTime()-new Date(scope.row.createTime).getTime())/1000+'s'
  458. // 返回按钮
  459. handleClose() {
  460. const obj = { path: "/monitor/job" };
  461. this.$tab.closeOpenPage(obj);
  462. },
  463. /** 搜索按钮操作 */
  464. handleQuery() {
  465. this.queryParams.pageNum = 1;
  466. this.getList();
  467. },
  468. /** 重置按钮操作 */
  469. resetQuery() {
  470. this.dateRange = [];
  471. this.resetForm("queryForm");
  472. this.handleQuery();
  473. },
  474. // 多选框选中数据
  475. handleSelectionChange(selection) {
  476. this.ids = selection.map((item) => item.jobLogId);
  477. this.multiple = !selection.length;
  478. },
  479. /** 详细按钮操作 */
  480. handleView(row) {
  481. this.open = true;
  482. this.form = row;
  483. },
  484. /** 删除按钮操作 */
  485. handleDelete(row) {
  486. const jobLogIds = this.ids;
  487. this.$modal
  488. .confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?')
  489. .then(function () {
  490. return delJobLog(jobLogIds);
  491. })
  492. .then(() => {
  493. this.getList();
  494. this.$modal.msgSuccess("删除成功");
  495. })
  496. .catch(() => {});
  497. },
  498. /** 清空按钮操作 */
  499. handleClean() {
  500. this.$modal
  501. .confirm("是否确认清空所有调度日志数据项?")
  502. .then(function () {
  503. return cleanJobLog();
  504. })
  505. .then(() => {
  506. this.getList();
  507. this.$modal.msgSuccess("清空成功");
  508. })
  509. .catch(() => {});
  510. },
  511. /** 导出按钮操作 */
  512. handleExport() {
  513. this.download(
  514. "/monitor/jobLog/export",
  515. {
  516. ...this.queryParams,
  517. },
  518. `log_${new Date().getTime()}.xlsx`
  519. );
  520. },
  521. },
  522. };
  523. </script>