jcxt_qd/src/components/jc/specialMonitorqt.vue

<template>

	<div style="width: 100%">

			<div slot="header" class="clearfix">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>牵头单位</el-breadcrumb-item>
					<el-breadcrumb-item>任务列表</el-breadcrumb-item>

				</el-breadcrumb>
			</div>
			<!-- 头部搜索栏 -->
			<el-row :gutter="50" style="margin-right: 0px;">
				<el-form style="display: flex; flex-direction: row;" size="mini">
					<el-form-item label="年度" class="select">
						<el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy"
							type="year" clearable />
					</el-form-item>
					<el-form-item label="任务状态" class="select">
						<el-select v-model="queryInfo.ispublic" style="width: 110px;">
							<el-option v-for="item in taskstatus" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="任务时间" class="select">
						<el-date-picker v-model="queryInfo.starttime" style="width: 180px;" align="right" type="date"
							:picker-options="pickerOptions" clearable />
					</el-form-item>
					<el-form-item label="--" class="select" style="margin-left: 10px; padding-left: 0px;">
						<el-date-picker v-model="queryInfo.endtime" style="width: 180px;" align="right" type="date"
							:picker-options="pickerOptions" clearable />
					</el-form-item>
					<el-form-item label="任务名称" class="select">
						<el-input v-model="queryInfo.task_name"></el-input>
					</el-form-item>
					<!-- 查询 -->
					<el-button style="height: 28px;margin-left: 10px;" type="success"  size="mini"  @click="searchData()">查询</el-button>
					<!-- 重置 -->
					<el-button style="height: 28px;margin-left: 5px;" type="success"  size="mini" @click="reset()">重置</el-button>
				</el-form>
			</el-row>
			<!--  头部按钮区域-->
			<el-row :gutter="90" style="margin-right: 0px;">
				<div style="display: flex;flex-direction: row;float: right;">
					<el-button type="primary" size="small" plain icon="el-icon-download" @click="exportData">导出Excel</el-button>
				</div>
			</el-row>
			<!--  表格数据区域-->
					<el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
				:row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column label="序号" width="50px" align="center">
					<template slot-scope="scope">
						{{ scope.$index+1 }}
					</template>
				</el-table-column>

				<el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop"
					align="center" :width="table.width" :fixed="table.fixed" />
				<el-table-column prop="level" label="任务优先级" align="center" width="100">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.level==0">一般</el-tag>
						<el-tag type="warning" v-if="scope.row.level==1">紧急</el-tag>
						<el-tag type="danger" v-if="scope.row.level==2">特急</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="file_url" label="附件" align="center" width="60">
					<template slot-scope="scope">
						<span v-if="scope.row.file_url==null">--</span>
						<el-link v-else type="primary" :href="scope.row.file_url">下载</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="ispublic" label="任务状态"  align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.ispublic==1">已发布</el-tag>
					<el-tag type="danger" v-if="scope.row.ispublic==2">废止</el-tag>
					<el-tag type="info" v-if="scope.row.ispublic==3">已结束，未完成</el-tag>
					<el-tag type="success" v-if="scope.row.ispublic==4">已结束，已完成</el-tag>
					<el-tag type="warning" v-if="scope.row.ispublic==5">执行中</el-tag>
				</template>
			</el-table-column>
				<el-table-column label="操作" align="center" fixed="right">
					<!-- 操作按钮区域的作用域插槽 -->
					<template slot-scope="scope">
						<!-- <el-button type="warning" plain  size="small" @click="bindDialogShow1(scope.row)">绑定模型</el-button> -->
						<!-- <el-button type="success"  size="mini" @click="runtask(scope.row.id)" v-if="this.queryInfo.ispublic == 5">导出word</el-button> -->
						<el-button type="success"  size="mini" @click="runtask(scope.row.id)">执行任务</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		
	</div>

</template>

<script>
	const qee = require('qf-export-excel')
		const HeadersList = [{
				title: '任务名称',
				key: 'task_name'
			}, {
				title: '年度',
				key: 'year'
			},
			{
				title: '文件号',
				key: 'filenum'
			}, {
				title: '开始时间',
				key: 'starttime'
			}, {
				title: '结束时间',
				key: 'endtime'
			}, {
				title: '创建者',
				key: 'releaser'
			}, {
				title: '任务优先级',
				key: 'level'
			}, {
				title: '任务状态',
				key: 'ispublic'
			}
		]
	export default {
		name: '',
		data() {
			return {
				total: 0,
				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				tableHeader: [{
						label: '任务名称',
						prop: 'task_name'
						// fixed: 'left'
					},
					{
						label: '年度',
						prop: 'year'
						// fixed: 'left'
					}, {
						label: '文件号',
						prop: 'filenum',
						// fixed: 'left'
					},
					{
						label: '开始时间',
						prop: 'starttime'
					},
					{
						label: '结束时间',
						prop: 'endtime'
					},
					{
						label: '创建者',
						prop: 'releaser'
					}

				],
				// 数据表格数据
				tableData: [],
				// 批量删除选中数据
				multipleSelection: [],
				queryInfo:{
					pageSize:10,
					pageNum:1,
					currentPage:1,
					year:'',
					ispublic:'',
					starttime:'',
					endtime:'',
					task_name:'',
					task_class:'专项监测'
				},
				// 任务状态选项
				taskstatus: [{
					value: '',
					label: '全部'
				}, {
					value: '1',
					label: '已发布'
				}, {
					value: '2',
					label: '已废止'
				}, {
					value: '3',
					label: '已结束，未完成'
				}, {
					value: '4',
					label: '已结束，已完成'
				}, {
					value: '5',
					label: '执行中'
				}],
				// 日期选择器快捷选项
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				bindDialogShow:false,
				options:[],
				bindForm:{}
			}
		},

		mounted: function() {
			this.gettaskList()
		},
		methods: {
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				console.log(`当前页: ${val}`);
				this.gettaskList()
			},
			// 批量选中
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection)
			},

			// 获取任务列表
			async gettaskList() {
				console.log(this.queryInfo)
				for (var key in this.queryInfo) {
					if (this.queryInfo[key] == '') {
						delete this.queryInfo[key]
					}
				}
				const {
					data: res
				} = await this.$http.post(
					"getTaskListTest", this.queryInfo
				);
				this.tableData = res.data.rows
				this.total = res.data.total
			},

			// 获取分页数据
			async choseModel() {
				const result = await this.$http.post('getPesticidesList', this.queryInfo)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.pesticidesList = result.data.data.rows
					this.total = result.data.data.total
				}
			},

			runtask(id) {
				console.log(id)
				this.$router.push({
					name: 'setTask',
					params: {
						id:id
					}
				})
			},
            // 搜索
			async searchData() {
				this.queryInfo.pageNum = 1
				console.log(this.queryInfo)
				this.gettaskList()
			},
			// 重置
			reset(){
				this.queryInfo={
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'专项监测'
				}
				this.gettaskList()
			},
				// 导出Excel
			async exportData() {
			
				// for (var key in this.exportInfo) {
				// 	if (this.exportInfo[key] == '') {
				// 		delete this.exportInfo[key]
				// 	}
				// }
			
				let exportList = []
					exportList = this.tableData
					
					for (let i = 0; i < exportList.length; i++) {
						if (exportList[i].level == '0') {
							exportList[i].level = '一般'
						} else if (exportList[i].level == '1')  {
							exportList[i].level = '紧急'
						}else{
							exportList[i].level = '特急'
						}
						if (exportList[i].ispublic == '1') {
							exportList[i].ispublic = '已发布'
						} else if(exportList[i].ispublic == '2')  {
							exportList[i].ispublic = '废止'
						}else if(exportList[i].ispublic == '3') {
							exportList[i].ispublic = '已结束，未完成'
						}else if(exportList[i].ispublic == '4') {
							exportList[i].ispublic = '已结束，已完成'
						}else if(exportList[i].ispublic == '5') {
							exportList[i].ispublic = '执行中'
						}
					}
				// 导出表格的表头设置
				// let allColumns = exportList
				var columnNames = []
				var columnValues = []
				// var columns = []
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('@/vendor/Export2Excel.js')
			
					for (var i = 0; i < HeadersList.length; i++) {
						columnNames[i] = HeadersList[i].title
						columnValues[i] = HeadersList[i].key
					}
					const tHeader = columnNames
					const filterVal = columnValues
					// console.log(columns)
					const list = exportList
					const data = this.formatJson(filterVal, list)
					export_json_to_excel(tHeader, data, '例行监测任务')
				
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},

		},
	}
</script>

<style lang="less" scoped>
	.el-breadcrumb {
		margin-bottom: 20px;
	}
	.el-table {
		align-items: center;
		margin-top: 25px;
	}

	/deep/ .el-col {
		padding-right: 0 !important;
	}

	/deep/ .el-radio-group label {
		width: 180px;
		margin-right: 10px;
	}

	.el-pagination {
		margin-top: 25px;
	}

	// .el-cascader {
	// 	width: 290px;
	// }

	.el-select {
		width: 210px;
		height: 100%;
	}

	.select {
		display: flex;
		flex-direction: row;
		margin-left: 10px;
	}

	.dialogItem /deep/ .el-dialog__body {
		padding: 15px 12px 0;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}

	.el-form-item {
		margin-bottom: 8px;
		padding-left: 18px;
	}

	.labelItem /deep/ .el-form-item__label {
		// width: 80px;
		text-align: center;
		vertical-align: middle;
		float: left;
		font-size: 13px;
		color: #606266;
		// line-height: 40px;
		padding: 0 2px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.cell {
		display: flex;
		flex-direction: row;
	}
	
	.footer {
		padding: 10px;
		text-align: center;
	}

	// .el-form-item__content{
	// 	margin-left: 0;
	// }
</style>