|
|
@@ -0,0 +1,316 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row slot="rightBar">
|
|
|
+ <!--用户数据-->
|
|
|
+ <el-col>
|
|
|
+ <div class="main-right-box">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="main-search-box">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-form-item label="组织机构:" class="formTreeItem">
|
|
|
+ <tree-select
|
|
|
+ v-model="queryParams.orgId"
|
|
|
+ :options="deptOptions"
|
|
|
+ :show-count="true"
|
|
|
+ :normalizer="tenantIdnormalizer"
|
|
|
+ :props="{ checkStrictly: true, label: 'name' }"
|
|
|
+ placeholder="请选择归属机构"
|
|
|
+ clearValueText="清除"
|
|
|
+ :noChildrenText="''"
|
|
|
+ @select="changeSelect"
|
|
|
+ noOptionsText="没有数据"
|
|
|
+ noResultsText="没有搜索结果"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="受训机构">
|
|
|
+ <org-tree
|
|
|
+ v-model="queryParams.orgId"
|
|
|
+ @defaultOrg="getDefaultOrg"
|
|
|
+ @checkChange="checkChange"
|
|
|
+ @click="clickTreeNode"
|
|
|
+ :defaultCheckSub="false"
|
|
|
+ ></org-tree>
|
|
|
+ </el-form-item>-->
|
|
|
+ <el-form-item label="培训任务名称:" label-width="50">
|
|
|
+ <el-select v-model="queryParams.planId" @change="changeHandler">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="时间" prop="date">
|
|
|
+ <el-date-picker value-format='yyyy-MM-dd' v-model="queryParams.date"
|
|
|
+ align="right" type="month" placeholder="请选择查询时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <!-- 按纽 -->
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ >导出数据
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="securityEquipmentMonitoringtable ml-4 flex-1"
|
|
|
+ >
|
|
|
+ <div class="title">教育统计报表</div>
|
|
|
+ <table ref="tb11" class="table-scroll">
|
|
|
+ <tr>
|
|
|
+ <th colspan="1" rowspan="1">序号</th>
|
|
|
+ <th colspan="1" rowspan="1">单位名称</th>
|
|
|
+ <th colspan="1" rowspan="1">应完成数</th>
|
|
|
+ <th colspan="1" rowspan="1">已完成数</th>
|
|
|
+ <th colspan="1" rowspan="1">完成率</th>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr v-for="(item, index) in targetList" :key="index">
|
|
|
+ <td>{{ index + 1 }}</td>
|
|
|
+ <td>{{ item.orgName }}</td>
|
|
|
+ <td>{{ item.shouldFinish }}</td>
|
|
|
+ <td>{{ item.finish }}</td>
|
|
|
+ <td>{{ item.finishRate }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {mapGetters} from "vuex";
|
|
|
+import {getEduPlanList, getEduReportData} from "@/api/evaluateTable/evaluateTable.js";
|
|
|
+import {deptTreeSelect} from "@/api/system/public";
|
|
|
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
|
|
|
+import dayjs from "dayjs";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "eduTrainingReport",
|
|
|
+
|
|
|
+ components: {OrgTree},
|
|
|
+ data() {
|
|
|
+ const {params, query} = this.$route;
|
|
|
+ return {
|
|
|
+ targetList: [],
|
|
|
+ loading: false,
|
|
|
+ options: [],
|
|
|
+ queryParams: {
|
|
|
+ orgId: null,
|
|
|
+ planId: "",
|
|
|
+ date: new Date(),
|
|
|
+ isWebSelect: 1,
|
|
|
+ },
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ deptOptions: [], //机构数组
|
|
|
+ selectedOrgName:null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDeptTree();
|
|
|
+ this.initPlanList();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ queryParams() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.deptOptions) {
|
|
|
+ this.queryParams.orgId = this.orgId;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["orgId"]),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeHandler() {
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ changeSelect(org) {
|
|
|
+ this.selectedOrgName=org.shortName
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ /** 查询机构树数据 */
|
|
|
+ getDeptTree() {
|
|
|
+ deptTreeSelect().then((response) => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ if (response.data.length > 0) {
|
|
|
+ this.selectedOrgName = response.data[0].shortName
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取所有计划列表 */
|
|
|
+ initPlanList() {
|
|
|
+ getEduPlanList(this.$store.getters.orgId).then((res) => {
|
|
|
+ this.options = res.data;
|
|
|
+ this.queryParams.planId = res.data[0].id;
|
|
|
+ if (this.queryParams.orgId && this.queryParams.planId) {
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** treeSelect组件自定义数据*/
|
|
|
+ tenantIdnormalizer(node, instanceId) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.shortName,
|
|
|
+ children: node.children,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //获取列表
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ getEduReportData(this.queryParams).then((res) => {
|
|
|
+ let {code, data, msg} = res;
|
|
|
+ if (code == 200) {
|
|
|
+ if (data.length > 0) {
|
|
|
+ this.targetList = data || [];
|
|
|
+ } else {
|
|
|
+ this.$message.error("暂无数据")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.$refs.Evaluate.show();
|
|
|
+ },
|
|
|
+ editHandler(row) {
|
|
|
+ this.$refs.Evaluate.show(row);
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.queryParams = {
|
|
|
+ orgId: this.orgId,
|
|
|
+ planId: this.options[0].id,
|
|
|
+ };
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ let param={
|
|
|
+ ...this.queryParams,
|
|
|
+ }
|
|
|
+ param.date=dayjs(param.date).format("YYYY-MM-DD HH:mm:s")
|
|
|
+ this.download(
|
|
|
+ "core/eduTask/exportReport",
|
|
|
+ param,
|
|
|
+ `${
|
|
|
+ this.selectedOrgName
|
|
|
+ }-${this.$tab.getCurrentTabName()}-${dayjs().format("YYYYMMDD")}.xlsx`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep.formTreeItem {
|
|
|
+ .el-form-item__content {
|
|
|
+ width: 264px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.securityEquipmentMonitoringtable {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .table-scroll {
|
|
|
+ // table-layout:auto;
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+ min-width: 100%;
|
|
|
+ border-spacing: 0;
|
|
|
+ text-align: center;
|
|
|
+ border-collapse: collapse;
|
|
|
+ max-height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ font-family: "仿宋_GB2312";
|
|
|
+
|
|
|
+ .orgName {
|
|
|
+ min-width: 180px !important;
|
|
|
+ width: 180px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr th,
|
|
|
+ tr td {
|
|
|
+ height: 25px;
|
|
|
+ border: 1px solid rgb(0, 0, 0);
|
|
|
+ // min-width: 75px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jump {
|
|
|
+ color: #02a7f0;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nojump {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 10;
|
|
|
+ //font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .greentd {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .redtd {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ clear: both;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ color: black;
|
|
|
+ font-size: x-large;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
coys