recheckMonitor.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. <template>
  2. <div style="width: 100%">
  3. <el-card class="box-card">
  4. <div slot="header" class="clearfix">
  5. <el-breadcrumb separator-class="el-icon-arrow-right">
  6. <el-breadcrumb-item >首页</el-breadcrumb-item>
  7. <el-breadcrumb-item>监测任务</el-breadcrumb-item>
  8. <el-breadcrumb-item>例行监测</el-breadcrumb-item>
  9. <el-breadcrumb-item>任务列表</el-breadcrumb-item>
  10. </el-breadcrumb>
  11. </div>
  12. <!-- 头部搜索栏 -->
  13. <el-row :gutter="50" style="margin-right: 0px;">
  14. <el-form style="display: flex; flex-direction: row;">
  15. <el-form-item label="年度" class="select">
  16. <el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy" type="year"
  17. clearable />
  18. </el-form-item>
  19. <el-form-item label="任务状态" class="select">
  20. <el-select v-model="queryInfo.ispublic" style="width: 110px;" clearable>
  21. <el-option v-for="item in taskispublic" :key="item.value" :label="item.label"
  22. :value="item.value" >
  23. </el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="任务时间" class="select">
  27. <el-date-picker v-model="queryInfo.starttime" style="width: 180px;" align="right" type="date"
  28. :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd" />
  29. </el-form-item>
  30. <el-form-item label="--" class="select" style="margin-left: 10px;">
  31. <el-date-picker v-model="queryInfo.endtime" style="width: 180px;" align="right" type="date"
  32. :picker-options="pickerOptions" clearable />
  33. </el-form-item>
  34. <el-form-item label="任务名称" class="select">
  35. <el-input v-model="queryInfo.task_name"></el-input>
  36. </el-form-item>
  37. <!-- 查询 -->
  38. <el-button style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
  39. <!-- 重置 -->
  40. <el-button style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
  41. </el-form>
  42. </el-row>
  43. <!-- 头部钮区域-->
  44. <el-row :gutter="90" style="margin-right: 0px;">
  45. <div style="display: flex;flex-direction: row;float: right;">
  46. <el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
  47. <el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="ispublic()">发布
  48. </el-button>
  49. <el-button type="primary" size="small" plain icon="el-icon-scissors" @click="repeal()">废止</el-button>
  50. <el-button type="primary" size="small" plain icon="el-icon-delete" @click="delArray()">删除</el-button>
  51. <el-button type="primary" size="small" plain icon="el-icon-download">导出</el-button>
  52. </div>
  53. </el-row>
  54. <!-- 表格数据区域-->
  55. <el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
  56. :row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
  57. <el-table-column type="selection" width="50"></el-table-column>
  58. <el-table-column label="序号" width="50px">
  59. <template slot-scope="scope">
  60. {{ scope.$index+1 }}
  61. </template>
  62. </el-table-column>
  63. <!-- <el-table-column :key="" v-for="table in tableHeader" :label="table.label" :prop="table.prop" align="center"
  64. :width="table.width" :fixed="table.fixed" /> -->
  65. <el-table-column label="操作" align="center" fixed="right">
  66. <!-- 操作按钮区域的作用域插槽 -->
  67. <template slot-scope="scope">
  68. <el-col style="margin-bottom: 5px;">
  69. <el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">详情</el-button>
  70. <el-button type="success" size="mini" plain>牵头单位报告</el-button>
  71. </el-col>
  72. <el-col>
  73. <el-button type="success" size="mini" plain @click="TaskSample()">抽样单</el-button>
  74. <el-button type="success" size="mini" plain>承担单位报告</el-button>
  75. </el-col>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. <!-- 分页器区域-->
  80. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  81. :current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
  82. layout="total, sizes, prev, pager, next, jumper" :total="total" background />
  83. </el-card>
  84. <!-- 任务详情对话框-->
  85. <el-dialog title="查看" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false"
  86. class="dialogItem">
  87. <el-form v-if="readDialogVisible" :model="taskSampleForm" label-width="100px">
  88. <el-form-item label="任务名称:" prop="task_name" class="labelItem">
  89. <div>{{readForm.task_name}}</div>
  90. </el-form-item>
  91. <el-form-item label="任务优先级:" prop="level" class="labelItem">
  92. <div v-if="readForm.level=='0'">一般</div>
  93. <div v-if="readForm.level=='1'">紧急</div>
  94. <div v-if="readForm.level=='2'">特急</div>
  95. </el-form-item>
  96. <el-form-item label="监测类型:" prop="task_class" width="70px" class="labelItem">
  97. <div>{{readForm.task_class}}</div>
  98. </el-form-item>
  99. <el-form-item label="年度:" prop="year" class="labelItem">
  100. <div>{{readForm.year}}</div>
  101. </el-form-item>
  102. <el-form-item label="批次:" prop="batch" width="200px" class="labelItem">
  103. <div>{{readForm.batch}}</div>
  104. </el-form-item>
  105. <el-form-item label="任务时间:" prop="starttime" width="200px" class="labelItem">
  106. <div>{{readForm.starttime}} 至 {{readForm.endtime}}</div>
  107. </el-form-item>
  108. <el-form-item label="发布单位:" prop="releaser" class="labelItem">
  109. <div>{{readForm.releaser}}</div>
  110. </el-form-item>
  111. <el-form-item label="牵头单位:" prop="main_unit" class="labelItem">
  112. <div>{{readForm.main_unit}}</div>
  113. </el-form-item>
  114. <el-form-item label="附件:" prop="file_url" class="labelItem">
  115. <div>{{readForm.file_url}}</div>
  116. </el-form-item>
  117. <el-form-item label="文件号:" prop="filenum" width="200px" class="labelItem">
  118. <div v-if="readForm.filenum==null">无</div>
  119. <div v-else>{{readForm.filenum}}</div>
  120. </el-form-item>
  121. <el-form-item label="备注:" prop="log" class="labelItem">
  122. <div v-if="readForm.log==null">无</div>
  123. <div v-else>{{readForm.log}}</div>
  124. </el-form-item>
  125. <div class="footer">
  126. <el-button type="success" @click="readDialogVisible = false">返回</el-button>
  127. </div>
  128. </el-form>
  129. </el-dialog>
  130. </div>
  131. </template>
  132. <script>
  133. const token = window.sessionStorage.getItem('token')
  134. const rybh = window.sessionStorage.getItem('rybh')
  135. export default {
  136. name: 'recheckMonitor',
  137. data() {
  138. return {
  139. queryInfo:{
  140. year:'',
  141. task_name:'',
  142. starttime:'',
  143. endtime:'',
  144. ispublic:'',
  145. pageSize:10,
  146. pageNum:1
  147. },
  148. total:0,
  149. cellStyle: {
  150. padding: 2 + 'px'
  151. },
  152. rowStyle: {
  153. height: 35 + 'px'
  154. },
  155. tableHeader: [{
  156. label: '任务名称',
  157. prop: 'task_name',
  158. width: 150
  159. // fixed: 'left'
  160. },
  161. {
  162. label: '年度',
  163. prop: 'year',
  164. width: 80
  165. // fixed: 'left'
  166. }, {
  167. label: '文件号',
  168. prop: 'filenum',
  169. width: 150
  170. // fixed: 'left'
  171. },
  172. {
  173. label: '开始时间',
  174. prop: 'starttime',
  175. width: 120
  176. },
  177. {
  178. label: '结束时间',
  179. prop: 'endtime',
  180. width: 120
  181. },
  182. {
  183. label: '创建者',
  184. prop: 'releaser',
  185. width: 120
  186. },
  187. {
  188. label: '创建时间',
  189. prop: 'createtime',
  190. width: 180
  191. }, {
  192. label: '任务状态',
  193. prop: 'ispublic',
  194. width: 120
  195. },
  196. {
  197. label: '任务优先级',
  198. prop: 'level',
  199. width: 120
  200. },
  201. ],
  202. // 数据表格数据
  203. tableData: [],
  204. // 批量删除选中数据
  205. multipleSelection: [],
  206. // 任务状态选项
  207. taskispublic: [{
  208. value: '',
  209. label: '全部'
  210. }, {
  211. value: '0',
  212. label: '未发布'
  213. }, {
  214. value: '1',
  215. label: '已发布'
  216. }, {
  217. value: '2',
  218. label: '废止'
  219. }, {
  220. value: '5',
  221. label: '执行中'
  222. }, {
  223. value: '3',
  224. label: '已结束,未完成'
  225. }, {
  226. value: '4',
  227. label: '已结束,已完成'
  228. }],
  229. // 日期选择器快捷选项
  230. pickerOptions: {
  231. // disabledDate(time) {
  232. // return time.getTime() > Date.now();
  233. // },
  234. shortcuts: [{
  235. text: '今天',
  236. onClick(picker) {
  237. picker.$emit('pick', new Date());
  238. }
  239. }, {
  240. text: '昨天',
  241. onClick(picker) {
  242. const date = new Date();
  243. date.setTime(date.getTime() - 3600 * 1000 * 24);
  244. picker.$emit('pick', date);
  245. }
  246. }, {
  247. text: '一周前',
  248. onClick(picker) {
  249. const date = new Date();
  250. date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
  251. picker.$emit('pick', date);
  252. }
  253. }]
  254. },
  255. // 查看任务详情
  256. readDialogVisible: false,
  257. readForm: {},
  258. multipleSelection: [],
  259. delarr: [],
  260. pubarr: []
  261. }
  262. },
  263. created() {
  264. this.gettaskList()
  265. },
  266. methods: {
  267. add() {
  268. this.$router.push('addTask')
  269. },
  270. // 搜索
  271. async searchData() {
  272. this.queryInfo.pageNum = 1
  273. this.gettaskList()
  274. },
  275. // 重置
  276. reset(){
  277. this.queryInfo={
  278. year:'',
  279. task_name:'',
  280. starttime:'',
  281. endtime:'',
  282. ispublic:'',
  283. pageSize:10,
  284. pageNum:1
  285. }
  286. },
  287. /** 监听页码的改变 */
  288. handleCurrentChange(newPage) {
  289. this.queryInfo.pageNum = newPage
  290. this.gettaskList()
  291. },
  292. /** 监听每页显示多少数据的改变 */
  293. handleSizeChange(newSize) {
  294. this.queryInfo.pageSize = newSize
  295. this.gettaskList()
  296. },
  297. /** 监听页码的改变 */
  298. handleCurrentChange(newPage) {
  299. this.queryInfo.pageNum = newPage
  300. this.gettaskList()
  301. },
  302. // 获取任务列表
  303. async gettaskList() {
  304. for (var key in this.queryInfo) {
  305. if (this.queryInfo[key] == '') {
  306. delete this.queryInfo[key]
  307. }
  308. }
  309. const {
  310. data: res
  311. } = await this.$http.post(
  312. "getTaskList", this.queryInfo
  313. );
  314. for (let i = 0; i < res.data.rows.length; i++) {
  315. if (res.data.rows[i].ispublic == '0') {
  316. res.data.rows[i].ispublic = '未发布'
  317. } else if (res.data.rows[i].ispublic == '1') {
  318. res.data.rows[i].ispublic = '已发布'
  319. } else if (res.data.rows[i].ispublic == '2') {
  320. res.data.rows[i].ispublic = '废止'
  321. } else if (res.data.rows[i].ispublic == '3') {
  322. res.data.rows[i].ispublic = '已结束未完成'
  323. } else if (res.data.rows[i].ispublic == '5') {
  324. res.data.rows[i].ispublic = '执行中'
  325. }
  326. else {
  327. res.data.rows[i].ispublic = '已结束已完成'
  328. }
  329. if (res.data.rows[i].level == '0') {
  330. res.data.rows[i].level = '一般'
  331. } else if (res.data.rows[i].level == '1') {
  332. res.data.rows[i].level = '紧急'
  333. } else if (res.data.rows[i].level == '2') {
  334. res.data.rows[i].level = '特急'
  335. }
  336. }
  337. this.tableData = res.data.rows
  338. this.total = res.data.total
  339. },
  340. // 查看任务详情
  341. async readDialogVisible1(row) {
  342. this.readForm.batch = row.batch
  343. this.readForm.task_name = row.task_name
  344. this.readForm.task_class = row.task_class
  345. this.readForm.level = row.level
  346. this.readForm.year = row.year
  347. this.readForm.starttime = row.starttime
  348. this.readForm.endtime = row.endtime
  349. this.readForm.releaser = row.releaser
  350. this.readForm.main_unit = row.main_unit
  351. this.readForm.file_url = row.file_url
  352. this.readForm.filenum = row.filenum
  353. this.readForm.log = row.log
  354. this.readDialogVisible = true
  355. },
  356. // 批量删除学生
  357. handleSelectionChange(val) {
  358. this.multipleSelection = val;
  359. // console.log(this.multipleSelection)
  360. },
  361. // 删除任务
  362. async delArray() {
  363. // 判断任务是否为该创建者创建
  364. for (let i = 0; i < this.multipleSelection.length; i++) {
  365. if (rybh != this.multipleSelection[i].releaser) {
  366. this.$alert('任务仅创建者可以删除!', {
  367. confirmButtonText: '确定',
  368. callback: action => {
  369. }
  370. });
  371. }
  372. }
  373. var that = this;
  374. const length = this.multipleSelection.length;
  375. // var val = this.selectedData;
  376. for (let i = 0; i < length; i++) {
  377. // console.log(this.multipleSelection[i])
  378. this.delarr.push(this.multipleSelection[i].id);
  379. }
  380. const result = await this.$http.post('delTask', {
  381. delarr: that.delarr,
  382. token: token
  383. })
  384. if (result.data.code == 0) {
  385. this.$message({
  386. type: 'success',
  387. message: '删除成功!'
  388. });
  389. that.gettaskList()
  390. } else {
  391. this.$message({
  392. type: 'error',
  393. message: '删除失败!'
  394. });
  395. }
  396. this.$refs.multipleTable.clearSelection();
  397. },
  398. // 发布任务
  399. async ispublic() {
  400. // 判断任务是否为该创建者创建
  401. for (let i = 0; i < this.multipleSelection.length; i++) {
  402. if (rybh != this.multipleSelection[i].releaser) {
  403. this.$alert('任务仅创建者可以发布!', {
  404. confirmButtonText: '确定',
  405. callback: action => {
  406. }
  407. });
  408. }
  409. }
  410. var that = this;
  411. let canPub = 0
  412. const length = this.multipleSelection.length;
  413. // var val = this.selectedData;
  414. console.log(this.multipleSelection)
  415. // this.pubarr = this.multipleSelection;
  416. for (let i = 0; i < length; i++) {
  417. if (this.multipleSelection[i].ispublic != '未发布') {
  418. this.$alert('任务不在可发布状态!', {
  419. confirmButtonText: '确定',
  420. callback: action => {
  421. }
  422. });
  423. } else {
  424. this.multipleSelection[i].ispublic = 1
  425. canPub = 1
  426. }
  427. }
  428. if(canPub==1){
  429. const result = await this.$http.post('isPublicTask', {
  430. pubarr: that.multipleSelection,
  431. token: token
  432. })
  433. if (result.data.code == 0) {
  434. this.$message({
  435. type: 'success',
  436. message: '发布成功!'
  437. });
  438. that.gettaskList()
  439. }
  440. }
  441. },
  442. // 废止任务
  443. async repeal() {
  444. // 判断任务是否为该创建者创建
  445. for (let i = 0; i < this.multipleSelection.length; i++) {
  446. if (rybh != this.multipleSelection[i].releaser) {
  447. this.$alert('任务仅创建者可以废止!', {
  448. confirmButtonText: '确定',
  449. callback: action => {}
  450. });
  451. }
  452. }
  453. var that = this;
  454. let canPub = 0
  455. const length = this.multipleSelection.length;
  456. // var val = this.selectedData;
  457. this.pubarr = this.multipleSelection;
  458. for (let i = 0; i < length; i++) {
  459. if (this.pubarr[i].ispublic == '已发布') {
  460. this.pubarr[i].ispublic = 2
  461. canPub = 1
  462. } else {
  463. this.$alert('任务不在可废止状态!', {
  464. confirmButtonText: '确定',
  465. callback: action => {
  466. }
  467. });
  468. }
  469. if(canPub==1){
  470. const result = await this.$http.post('isPublicTask', {
  471. pubarr: that.pubarr,
  472. token: token
  473. })
  474. if (result.data.code == 0) {
  475. this.$message({
  476. type: 'success',
  477. message: '任务已废止!'
  478. });
  479. that.gettaskList()
  480. }
  481. }
  482. }
  483. }
  484. },
  485. }
  486. </script>
  487. <style lang="less" scoped>
  488. .el-table {
  489. align-items: center;
  490. margin-top: 25px;
  491. }
  492. /deep/ .el-col {
  493. padding-right: 0 !important;
  494. }
  495. /deep/ .el-radio-group label {
  496. width: 180px;
  497. margin-right: 10px;
  498. }
  499. .el-pagination {
  500. margin-top: 25px;
  501. }
  502. // .el-cascader {
  503. // width: 290px;
  504. // }
  505. .el-select {
  506. width: 210px;
  507. height: 100%;
  508. }
  509. .select {
  510. display: flex;
  511. flex-direction: row;
  512. margin-left: 10px;
  513. }
  514. .dialogItem /deep/ .el-dialog__body {
  515. padding: 15px 12px 0;
  516. color: #606266;
  517. font-size: 14px;
  518. word-break: break-all;
  519. }
  520. .el-form-item {
  521. margin-bottom: 8px;
  522. }
  523. .labelItem /deep/ .el-form-item__label {
  524. // width: 80px;
  525. text-align: center;
  526. vertical-align: middle;
  527. float: left;
  528. font-size: 13px;
  529. color: #606266;
  530. // line-height: 40px;
  531. padding: 0 2px 0 0;
  532. -webkit-box-sizing: border-box;
  533. box-sizing: border-box;
  534. }
  535. .el-dialog__header {
  536. border-bottom: 1px solid #e5e5e5;
  537. }
  538. // .el-form-item__content{
  539. // margin-left: 0;
  540. // }
  541. .footer {
  542. padding: 5px 0;
  543. border-top: 1px solid #e5e5e5;
  544. text-align: center;
  545. }
  546. </style>