specialMonitor.vue 18 KB

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