routineMonitor.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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 :to="{ path: '/jc/workbench' }">首页</el-breadcrumb-item>
  6. <el-breadcrumb-item>承担单位</el-breadcrumb-item>
  7. <el-breadcrumb-item>例行监测</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. </div>
  10. <!-- 头部搜索栏 -->
  11. <el-row :gutter="50" style="margin-right: 0px;">
  12. <el-form style="display: flex; flex-direction: row;" size="mini">
  13. <el-form-item label="年度" class="select">
  14. <el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy"
  15. type="year" clearable />
  16. </el-form-item>
  17. <el-form-item label="任务状态" class="select">
  18. <el-select v-model="queryInfo.ispublic" style="width: 110px;">
  19. <el-option v-for="item in taskstatus" :key="item.value" :label="item.label"
  20. :value="item.value">
  21. </el-option>
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="任务时间" class="select">
  25. <el-date-picker v-model="queryInfo.starttime" style="width: 180px;" align="right" type="date"
  26. :picker-options="pickerOptions" clearable />
  27. </el-form-item>
  28. <el-form-item label="--" class="select" style="margin-left: 10px; padding-left: 0px;">
  29. <el-date-picker v-model="queryInfo.endtime" style="width: 180px;" align="right" type="date"
  30. :picker-options="pickerOptions" clearable />
  31. </el-form-item>
  32. <el-form-item label="任务名称" class="select">
  33. <el-input v-model="queryInfo.task_name"></el-input>
  34. </el-form-item>
  35. <!-- 查询 -->
  36. <el-button style="height: 28px;margin-left: 10px;" size="mini" type="primary" @click="searchData()">查询</el-button>
  37. <!-- 重置 -->
  38. <el-button style="height: 28px;margin-left: 5px;" size="mini" type="primary" @click="reset()">重置</el-button>
  39. </el-form>
  40. </el-row>
  41. <!-- 头部钮区域-->
  42. <el-row :gutter="90" style="margin-right: 0px;">
  43. <div style="display: flex;flex-direction: row;float: right;">
  44. <!-- <el-button type="primary" size="small" plain icon="el-icon-plus" @click="add">新增</el-button>
  45. <el-button type="primary" size="small" plain icon="el-icon-edit-outline" >发布</el-button>
  46. <el-button type="primary" size="small" plain icon="el-icon-scissors" >废止</el-button>
  47. <el-button type="primary" size="small" plain icon="el-icon-delete" >删除</el-button> -->
  48. <el-button type="primary" size="small" plain icon="el-icon-download" @click="exportData">导出Excel</el-button>
  49. </div>
  50. </el-row>
  51. <!-- 表格数据区域-->
  52. <el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
  53. :row-style="rowStyle" :cell-style="cellStyle">
  54. <el-table-column type="selection" width="50" align="center"></el-table-column>
  55. <el-table-column label="序号" width="50px" align="center">
  56. <template slot-scope="scope">
  57. {{ scope.$index+1 }}
  58. </template>
  59. </el-table-column>
  60. <el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop"
  61. align="center" :width="table.width" :fixed="table.fixed" />
  62. <el-table-column prop="ispublic" label="任务状态" align="center">
  63. <template slot-scope="scope">
  64. <el-tag type="" v-if="scope.row.ispublic==1">已发布</el-tag>
  65. <el-tag type="danger" v-if="scope.row.ispublic==14">抽样中</el-tag>
  66. <el-tag type="info" v-if="scope.row.ispublic==13">检测中</el-tag>
  67. <el-tag type="success" v-if="scope.row.ispublic==17">检测中</el-tag>
  68. <el-tag type="" v-if="scope.row.ispublic==21">已完成</el-tag>
  69. <el-tag type="warning" v-if="scope.row.ispublic==25">未完成</el-tag>
  70. </template>
  71. </el-table-column>
  72. <el-table-column prop="level" label="任务优先级" width="100" align="center">
  73. <template slot-scope="scope">
  74. <el-tag type="success" v-if="scope.row.level==0">一般</el-tag>
  75. <el-tag type="warning" v-if="scope.row.level==1">紧急</el-tag>
  76. <el-tag type="danger" v-if="scope.row.level==2">特急</el-tag>
  77. </template>
  78. </el-table-column>
  79. <el-table-column prop="file_url" label="附件" width="80" align="center">
  80. <template slot-scope="scope">
  81. <span v-if="scope.row.file_url == null">--</span>
  82. <el-link v-else type="primary" :href="scope.row.file_url">下载</el-link>
  83. </template>
  84. </el-table-column>
  85. <el-table-column label="操作" align="center" fixed="right">
  86. <!-- 操作按钮区域的作用域插槽 -->
  87. <template slot-scope="scope">
  88. <el-col>
  89. <el-button type="primary" style="margin-top:5px;" size="mini" @click="runtask(scope.row.id)">执行任务</el-button>
  90. </el-col>
  91. <el-col>
  92. <el-button type="success" style="margin:5px 0px;" size="mini" @click="up(scope.row.id)">上报任务</el-button>
  93. </el-col>
  94. </template>
  95. </el-table-column>
  96. </el-table>
  97. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  98. :current-page="queryInfo.currentPage" :page-sizes="[1,10, 20, 30, 40]" :page-size="queryInfo.pageSize"
  99. layout="total, sizes, prev, pager, next, jumper" :total="total">
  100. </el-pagination>
  101. </div>
  102. </template>
  103. <script>
  104. const qee = require('qf-export-excel')
  105. const HeadersList = [{
  106. title: '任务名称',
  107. key: 'task_name',
  108. },
  109. {
  110. title: '年度',
  111. key: 'year',
  112. }, {
  113. title: '文件号',
  114. key: 'filenum',
  115. },
  116. {
  117. title: '开始时间',
  118. key: 'starttime',
  119. },
  120. {
  121. title: '结束时间',
  122. key: 'endtime',
  123. },
  124. {
  125. title: '发布单位',
  126. key: 'releaser',
  127. },
  128. {
  129. title: '创建时间',
  130. key: 'createtime',
  131. },{
  132. title: '任务状态',
  133. key: 'ispublic'
  134. },{
  135. title: '任务优先级',
  136. key: 'level'
  137. }
  138. ]
  139. export default {
  140. name: '',
  141. data() {
  142. return {
  143. total: 0,
  144. cellStyle: {
  145. padding: 2 + 'px'
  146. },
  147. rowStyle: {
  148. height: 35 + 'px'
  149. },
  150. tableHeader: [{
  151. label: '任务名称',
  152. prop: 'task_name',
  153. // fixed: 'left'
  154. },
  155. {
  156. label: '年度',
  157. prop: 'year',
  158. // fixed: 'left'
  159. }, {
  160. label: '文件号',
  161. prop: 'filenum',
  162. // fixed: 'left'
  163. },
  164. {
  165. label: '开始时间',
  166. prop: 'starttime',
  167. },
  168. {
  169. label: '结束时间',
  170. prop: 'endtime',
  171. },
  172. {
  173. label: '发布单位',
  174. prop: 'releaser.rymc',
  175. },
  176. // {
  177. // label: '创建时间',
  178. // prop: 'create_time',
  179. // // width: 180
  180. // },
  181. ],
  182. // 数据表格数据
  183. tableData: [],
  184. // 批量删除选中数据
  185. multipleSelection: [],
  186. queryInfo:{
  187. pageSize:10,
  188. pageNum:1,
  189. currentPage:1,
  190. year:'',
  191. ispublic:'',
  192. starttime:'',
  193. endtime:'',
  194. task_name:'',
  195. task_class:'例行监测'
  196. },
  197. // 任务状态选项
  198. taskstatus: [{
  199. value: '',
  200. label: '全部'
  201. },{
  202. value: '1',
  203. label: '已发布'
  204. }, {
  205. value: '9',
  206. label: '执行中'
  207. }, {
  208. value: '13',
  209. label: '抽样中'
  210. }, {
  211. value: '17',
  212. label: '检测中'
  213. }, {
  214. value: '21',
  215. label: '已完成'
  216. }, {
  217. value: '25',
  218. label: '未完成'
  219. }],
  220. // 日期选择器快捷选项
  221. pickerOptions: {
  222. disabledDate(time) {
  223. return time.getTime() > Date.now();
  224. },
  225. shortcuts: [{
  226. text: '今天',
  227. onClick(picker) {
  228. picker.$emit('pick', new Date());
  229. }
  230. }, {
  231. text: '昨天',
  232. onClick(picker) {
  233. const date = new Date();
  234. date.setTime(date.getTime() - 3600 * 1000 * 24);
  235. picker.$emit('pick', date);
  236. }
  237. }, {
  238. text: '一周前',
  239. onClick(picker) {
  240. const date = new Date();
  241. date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
  242. picker.$emit('pick', date);
  243. }
  244. }]
  245. },
  246. }
  247. },
  248. mounted() {
  249. this.gettaskList()
  250. },
  251. // created() {
  252. // this.gettaskList()
  253. // },
  254. methods: {
  255. handleSizeChange(val) {
  256. this.queryInfo.pageSize = val;
  257. console.log(`每页 ${val} 条`);
  258. this.gettaskList()
  259. },
  260. handleCurrentChange(val) {
  261. this.queryInfo.pageNum = val;
  262. console.log(`当前页: ${val}`);
  263. this.gettaskList()
  264. },
  265. add() {
  266. // this.$router.push('')
  267. },
  268. async gettaskList() {
  269. for (var key in this.queryInfo) {
  270. if (this.queryInfo[key] == '') {
  271. delete this.queryInfo[key]
  272. }
  273. }
  274. const {
  275. data: res
  276. } = await this.$http.post(
  277. "getCdTasks", this.queryInfo
  278. );
  279. console.log(res)
  280. this.tableData = res.data.rows
  281. this.total = res.data.total
  282. },
  283. // 搜索
  284. async searchData() {
  285. console.log(this.queryInfo)
  286. this.queryInfo.pageNum = 1
  287. this.gettaskList()
  288. },
  289. // 重置
  290. reset(){
  291. this.queryInfo={
  292. year:'',
  293. task_name:'',
  294. starttime:'',
  295. endtime:'',
  296. ispublic:'',
  297. pageSize:'',
  298. pageNum:1,
  299. task_class:'例行监测'
  300. }
  301. this.gettaskList()
  302. },
  303. async runtask(id) {
  304. console.log(id)
  305. this.$router.push({
  306. name: 'setTaskcd',
  307. params: {
  308. id: id
  309. }
  310. })
  311. },
  312. async up(id){
  313. this.$confirm('上报任务后不可撤回, 是否继续?', '提示', {
  314. confirmButtonText: '确定',
  315. cancelButtonText: '取消',
  316. type: 'warning'
  317. }).then(() => {
  318. this.$message({
  319. type: 'success',
  320. message: '任务上报成功!'
  321. });
  322. this.task_id = id
  323. this.uptask(task_id)
  324. }).catch(() => {
  325. this.$message({
  326. type: 'info',
  327. message: '已取消上报'
  328. });
  329. });
  330. },
  331. // 导出Excel
  332. async exportData() {
  333. // for (var key in this.exportInfo) {
  334. // if (this.exportInfo[key] == '') {
  335. // delete this.exportInfo[key]
  336. // }
  337. // }
  338. console.log(this.tableData)
  339. let exportList = []
  340. exportList = this.tableData
  341. for (let i = 0; i < exportList.length; i++) {
  342. if (exportList[i].level == '0') {
  343. exportList[i].level = '一般'
  344. } else if (exportList[i].level == '1') {
  345. exportList[i].level = '紧急'
  346. }else{
  347. exportList[i].level = '特急'
  348. }
  349. if (exportList[i].ispublic == '1') {
  350. exportList[i].ispublic = '已发布'
  351. } else if(exportList[i].ispublic == '2') {
  352. exportList[i].ispublic = '废止'
  353. }else if(exportList[i].ispublic == '3') {
  354. exportList[i].ispublic = '已结束,未完成'
  355. }else if(exportList[i].ispublic == '4') {
  356. exportList[i].ispublic = '已结束,已完成'
  357. }else if(exportList[i].ispublic == '5') {
  358. exportList[i].ispublic = '执行中'
  359. }
  360. }
  361. // 导出表格的表头设置
  362. // let allColumns = exportList
  363. var columnNames = []
  364. var columnValues = []
  365. // var columns = []
  366. require.ensure([], () => {
  367. const {
  368. export_json_to_excel
  369. } = require('@/vendor/Export2Excel.js')
  370. for (var i = 0; i < HeadersList.length; i++) {
  371. columnNames[i] = HeadersList[i].title
  372. columnValues[i] = HeadersList[i].key
  373. }
  374. const tHeader = columnNames
  375. const filterVal = columnValues
  376. // console.log(columns)
  377. const list = exportList
  378. const data = this.formatJson(filterVal, list)
  379. export_json_to_excel(tHeader, data, '例行监测任务')
  380. })
  381. },
  382. formatJson(filterVal, jsonData) {
  383. return jsonData.map(v => filterVal.map(j => v[j]))
  384. },
  385. },
  386. }
  387. </script>
  388. <style lang="less" scoped>
  389. .el-breadcrumb {
  390. margin-bottom: 20px;
  391. }
  392. .el-table {
  393. align-items: center;
  394. margin-top: 25px;
  395. }
  396. /deep/ .el-col {
  397. padding-right: 0 !important;
  398. }
  399. /deep/ .el-radio-group label {
  400. width: 180px;
  401. margin-right: 10px;
  402. }
  403. .el-pagination {
  404. margin-top: 25px;
  405. }
  406. // .el-cascader {
  407. // width: 290px;
  408. // }
  409. .el-select {
  410. width: 210px;
  411. height: 100%;
  412. }
  413. .select {
  414. display: flex;
  415. flex-direction: row;
  416. margin-left: 10px;
  417. }
  418. .dialogItem /deep/ .el-dialog__body {
  419. padding: 15px 12px 0;
  420. color: #606266;
  421. font-size: 14px;
  422. word-break: break-all;
  423. }
  424. .el-form-item {
  425. margin-bottom: 8px;
  426. padding-left: 18px;
  427. }
  428. .labelItem /deep/ .el-form-item__label {
  429. // width: 80px;
  430. text-align: center;
  431. vertical-align: middle;
  432. float: left;
  433. font-size: 13px;
  434. color: #606266;
  435. // line-height: 40px;
  436. padding: 0 2px 0 0;
  437. -webkit-box-sizing: border-box;
  438. box-sizing: border-box;
  439. }
  440. // .el-form-item__content{
  441. // margin-left: 0;
  442. // }
  443. </style>