log.vue 13 KB

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