<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="任务标题" prop="taskTitle"> <el-input v-model="queryParams.taskTitle" placeholder="请输入任务标题" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="任务状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable size="small"> <el-option v-for="item in workTaskStatus" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" /> </el-select> </el-form-item> <el-form-item label="所属单位" prop="createEnterpriseId"> <el-select v-model="queryParams.createEnterpriseId" placeholder="请选择单位" :disabled="-2 != $store.state.user.enterpriseId" > <el-option v-for="item in enterprises" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <div id="chars" class="chars"></div> <el-table v-loading="loading" :data="taskList"> <el-table-column label="任务标题" align="center" prop="taskTitle" width="200" :show-overflow-tooltip="true"/> <el-table-column label="任务类型" align="center" prop="taskType" :formatter="taskTypeFormatter"/> <el-table-column label="任务状态" align="center" prop="status" :formatter="taskStatusFormatter"/> <el-table-column label="所属单位" align="center" prop="createEnterpriseId" :formatter="enterpriseFormatter"/> <el-table-column label="开始时间" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="截止时间" align="center" prop="endTime" width="180"> <template slot-scope="scope"> <span v-if="scope.row.endTime">{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> <span v-else>-</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetail(scope.row)" >详情</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> </div> </template> <script> import { listTask, getTask, delTask, addTask, updateTask, exportTask } from "@/api/inspectionWork/workTask"; import { inspectStatistic } from "@/api/inspectionWork/inspect"; import Editor from '@/components/Editor'; import PeopleChoice from "../PeopleChoice"; import { enterpriseLists } from "@/api/regulation/info"; export default { name: "inspect-statistic", components: { Editor, PeopleChoice, }, data() { return { // 遮罩层 loading: true, // 导出遮罩层 exportLoading: false, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 巡检巡查任务表格数据 taskList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, taskType: '2', taskTitle: null, taskContent: null, status: null, createEnterpriseId: null, endTime: null, isReport: null, isDel: null, taskStatus: null }, // 表单参数 workTaskType: [], workTaskStatus: [], myChart: null, enterprises: [] }; }, created() { this.getEnterpriseLists(); this.getList(); this.getWorkTaskType(); this.getWorkTaskStatus(); this.charsStar(); if(-2 != this.$store.state.user.enterpriseId){ this.queryParams.createEnterpriseId = this.$store.state.user.enterpriseId; } }, methods: { /** 查询巡检巡查任务列表 */ getList() { this.loading = true; listTask(this.queryParams).then(response => { this.taskList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { taskId: null, taskType: null, taskTitle: null, taskContent: null, status: 0, createEnterpriseId: null, groupNum: null, createBy: null, createTime: null, endTime: null, isReport: null, isDel: null, taskStatus: this.status }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.queryParams.taskStatus = this.queryParams.status; this.getList(); this.charsStar(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.taskId) this.single = selection.length!==1 this.multiple = !selection.length }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams; this.$confirm('是否确认导出所有巡检巡查任务数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.exportLoading = true; return exportTask(queryParams); }).then(response => { this.download(response.msg); this.exportLoading = false; }).catch(() => {}); }, getWorkTaskType(){ this.getDicts("t_work_task_type").then(response => { this.workTaskType = response.data; }); }, getWorkTaskStatus(){ this.getDicts("t_work_task_status").then(response => { this.workTaskStatus = response.data; }); }, //任务类型 taskTypeFormatter(row){ return this.selectDictLabel(this.workTaskType, row.taskType); }, //任务状态 taskStatusFormatter(row){ return this.selectDictLabel(this.workTaskStatus, row.status); }, //详情 handleDetail(row){ if(row.taskType == '1'){ this.$router.push({path:"/inspectionWork/taskPatrolDetail",query:{taskId:row.taskId}}); } if(row.taskType == '2'){ this.$router.push({path:"/inspectionWork/taskInspectDetail",query:{taskId:row.taskId}}); } }, charsStar() { inspectStatistic(this.queryParams).then((res) => { const dataX = res.data.map((item) => { return item.timeType; }); const dataY = res.data.map((item) => { return item.countNum; }); this.myChart = this.$echarts.init(document.getElementById("chars")); const option = this.charsOption(dataX, dataY); this.myChart.setOption(option); }); }, charsOption(dataX, dataY) { return { title: { text: "入户安检信息统计图", }, legend: {}, tooltip: { show: true, trigger: "item", // formatter: "{b}:设备总数;{c},在线:{c},离线:{e},报警:{f}", formatter: (params, ticket) => { return `入户安检次数 ${params.data}`; }, position: function (point, params, dom, rect, size) { // 固定在顶部 return [point[0] + 20, point[1]]; }, }, xAxis: { data: dataX, axisLabel: { interval: 0, rotate: 40, fontSize: "10", }, }, yAxis: { itemWidth: 10, }, series: [ { type: "bar", data: dataY, barMaxWidth: 100, itemStyle: { normal: { label: { show: true, position: "top", textStyle: { color: "gray", fontSize: 12, }, }, }, }, }, ], }; }, getEnterpriseLists(){ enterpriseLists().then(response => { this.enterprises = response.rows; this.enterprises.push({enterpriseId:-2,enterpriseName:"政府部门"}) }); }, enterpriseFormatter(row){ let info = this.enterprises.find(item => item.enterpriseId == row.createEnterpriseId); return info?info.enterpriseName:"-"; } } }; </script> <style scoped lang="scss"> .chars { width: 100%; height: 300px; text-align: center; line-height: 20; font-size: 10px; // background: red; } </style>