routineMonitor.vue 18 KB

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