|
|
@@ -47,31 +47,30 @@
|
|
|
</el-row>
|
|
|
<div class="monthQuarterYear">
|
|
|
<el-tabs v-model="activeName" class="tableMain" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="考评指标项内容" name="first">
|
|
|
- <div class="dateTableBtns">
|
|
|
- <div class="tableBtn import" @click="handleImport">
|
|
|
- <img :src="importIcon" alt="">
|
|
|
- <span>导入</span>
|
|
|
+ <el-tab-pane v-for="it in stageData" :key="it.id" :label="it.stageName" :name="it.stageCode">
|
|
|
+ <div class="detailsHeader">
|
|
|
+ <div class="headerLeft">
|
|
|
+ <el-tag v-for="tag in indicatorList" :key="tag.id" size="large" class="tagArr"
|
|
|
+ effect="dark" :type="tag.id === isClickTagId ? '': 'info'" @click="handleShowPage(tag)">
|
|
|
+ <span>{{ tag.indicator_name }}</span>
|
|
|
+ </el-tag>
|
|
|
</div>
|
|
|
- <div class="tableBtn export" @click="handleExport">
|
|
|
- <img :src="exportIcon" alt="">
|
|
|
- <span>导出</span>
|
|
|
+ <div class="headerRight">
|
|
|
+ <div class="tableBtn import" @click="handleImport">
|
|
|
+ <img :src="importIcon" alt="">
|
|
|
+ <span>导入</span>
|
|
|
+ </div>
|
|
|
+ <div class="tableBtn export" @click="handleExport">
|
|
|
+ <img :src="exportIcon" alt="">
|
|
|
+ <span>导出</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-table :data="quantifiedList" style="width: 100%" ref="benchmark" :border="true" >
|
|
|
+ <el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT" :border="true" >
|
|
|
<el-table-column type="index" label="排名" align="center"></el-table-column>
|
|
|
- <el-table-column label="考评单位" prop="organization_name" width="200" sortable>
|
|
|
- <template #default="scope">
|
|
|
- <el-tooltip class="box-item" effect="customized" :content="scope.row.organization_name"
|
|
|
- placement="right">
|
|
|
- <span class="tooltipCC">{{scope.row.organization_name}}</span>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="综合得分" prop="score_total" sortable />
|
|
|
- <el-table-column v-for="(it, index) in benchmarkingIndicatorHeader" :key="index" :label="it.name" align="center">
|
|
|
- <el-table-column sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)"
|
|
|
- v-for="(iv, index) in it.children" :key="index" :label="iv.key" align="center">
|
|
|
+ <el-table-column label="考评单位" prop="organizationShortName" width="200" />
|
|
|
+ <el-table-column v-for="(it, index) in monthQuarterYearHeader" :key="index" :label="it.name" align="center">
|
|
|
+ <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.key" align="center">
|
|
|
<template #default="scope">
|
|
|
<span
|
|
|
style="font-weight: bold"
|
|
|
@@ -81,8 +80,6 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="考评评价指标内容" name="second">
|
|
|
- </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div class="tableSeach">
|
|
|
<div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
|
|
|
@@ -106,9 +103,10 @@
|
|
|
|
|
|
<script>
|
|
|
import importDailog from '../importPage/importDailog.vue'
|
|
|
-import {apiGetOrgEvalInfoList,apiGetbinsectionList} from '../../api/api'
|
|
|
-import ExcelJS from 'exceljs'
|
|
|
-import fileSave from 'file-saver'
|
|
|
+import {apiGetEvaluationIndicatorList,apiGetgetEvaluationInfoDataList,apiGetbinsectionList, apiGetbinstageList} from '../../api/api'
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
+import { saveAs } from 'file-saver'
|
|
|
+import * as XLSXD from 'xlsx-js-style'
|
|
|
|
|
|
import huoDef from '../../assets/benchmarkImg/huoDef.png'
|
|
|
import shuiDef from '../../assets/benchmarkImg/shuiDef.png'
|
|
|
@@ -134,9 +132,11 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
dialogVisible: false,
|
|
|
- activeName: 'first',
|
|
|
- quantifiedList: [],
|
|
|
- nonQuantifiedList: [],
|
|
|
+ activeName: '',
|
|
|
+ monthQuarterYearData: [],
|
|
|
+ monthQuarterYearHeader: [],
|
|
|
+ indicatorList: [],
|
|
|
+ isClickTagId: '',
|
|
|
receiptMsg: {
|
|
|
code: '',
|
|
|
des: '',
|
|
|
@@ -149,74 +149,18 @@ export default {
|
|
|
},
|
|
|
rowMsg: {},
|
|
|
moduleData: [],
|
|
|
+ stageData: [],
|
|
|
titleMsgArr: [],
|
|
|
- binSectionStr: 'HD',
|
|
|
+ binSectionStr: '',
|
|
|
exportIcon: exportIcon,
|
|
|
importIcon: importIcon,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.titleMsgArr = [
|
|
|
- {
|
|
|
- isClass: 'huoDef',
|
|
|
- isClassC: 'huoCha',
|
|
|
- isName: '火电',
|
|
|
- isNameEn: 'HD',
|
|
|
- img: huoDef,
|
|
|
- clickImg: huoCha,
|
|
|
- showClick: true
|
|
|
- },
|
|
|
- {
|
|
|
- isClass: 'shuiDef',
|
|
|
- isClassC: 'shuiCha',
|
|
|
- isName: '水电',
|
|
|
- isNameEn: 'SD',
|
|
|
- img: shuiDef,
|
|
|
- clickImg: shuiCha,
|
|
|
- showClick: false
|
|
|
- },
|
|
|
- {
|
|
|
- isClass: 'xinDef',
|
|
|
- isClassC: 'xinCha',
|
|
|
- isName: '新能源',
|
|
|
- isNameEn: 'XNYFG',
|
|
|
- img: xinDef,
|
|
|
- clickImg: xinCha,
|
|
|
- showClick: false
|
|
|
- },
|
|
|
- {
|
|
|
- isClass: 'meiDef',
|
|
|
- isClassC: 'meiCha',
|
|
|
- isName: '煤电一体化',
|
|
|
- isNameEn: 'MDYTH',
|
|
|
- img: meiDef,
|
|
|
- clickImg: meiCha,
|
|
|
- showClick: false
|
|
|
- },
|
|
|
- {
|
|
|
- isClass: 'guoDef',
|
|
|
- isClassC: 'guoCha',
|
|
|
- isName: '国际业务',
|
|
|
- isNameEn: 'GJYW',
|
|
|
- img: guoDef,
|
|
|
- clickImg: guoCha,
|
|
|
- showClick: false
|
|
|
- },
|
|
|
- {
|
|
|
- isClass: 'zongDef',
|
|
|
- isClassC: 'zongCha',
|
|
|
- isName: '综合支持',
|
|
|
- isNameEn: 'ZHZC',
|
|
|
- img: zongDef,
|
|
|
- clickImg: zongCha,
|
|
|
- showClick: false
|
|
|
- }
|
|
|
- ]
|
|
|
},
|
|
|
methods: {
|
|
|
- init(row) {
|
|
|
+ init(row, type) {
|
|
|
this.dialogVisible = true
|
|
|
- this.activeName = 'first'
|
|
|
this.receiptMsg = {
|
|
|
code: row.organizationEvaluationCode,
|
|
|
des: row.des,
|
|
|
@@ -227,103 +171,187 @@ export default {
|
|
|
year: row.year,
|
|
|
recStage: '有效'
|
|
|
}
|
|
|
- this.getDetails(row.id, '是')
|
|
|
- this.getModelData()
|
|
|
+ this.getModelData(type)
|
|
|
this.rowMsg = row
|
|
|
},
|
|
|
// 获取业务属性
|
|
|
- getModelData() {
|
|
|
+ getModelData(type) {
|
|
|
let that = this
|
|
|
- apiGetbinsectionList().then(datas =>{
|
|
|
+ that.titleMsgArr = []
|
|
|
+ let params = {
|
|
|
+ type: type === '年度' ? '3' : '2'
|
|
|
+ }
|
|
|
+ apiGetbinsectionList(params).then(datas =>{
|
|
|
if (datas && datas.data) {
|
|
|
that.moduleData = datas.data
|
|
|
+ that.moduleData.forEach(item =>{
|
|
|
+ let obj = {
|
|
|
+ id: item.id,
|
|
|
+ isName: item.sectionName === '新能源(光电)' ? '新能源光电' : item.sectionName === '新能源(风电)' ? '新能源风电' : item.sectionName,
|
|
|
+ isNameEn: item.sectionCode,
|
|
|
+ showClick: false
|
|
|
+ }
|
|
|
+ if (item.sectionName === '火电') {
|
|
|
+ obj.isClass = 'huoDef'
|
|
|
+ obj.img = huoDef
|
|
|
+ obj.isClassC = 'huoCha'
|
|
|
+ obj.clickImg = huoCha
|
|
|
+ } else if (item.sectionName === '水电') {
|
|
|
+ obj.isClass = 'shuiDef'
|
|
|
+ obj.img = shuiDef
|
|
|
+ obj.isClassC = 'shuiCha'
|
|
|
+ obj.clickImg = shuiCha
|
|
|
+ } else if (item.sectionName.indexOf('新能源') >-1) {
|
|
|
+ obj.isClass = 'xinDef'
|
|
|
+ obj.img = xinDef
|
|
|
+ obj.isClassC = 'xinCha'
|
|
|
+ obj.clickImg = xinCha
|
|
|
+ } else if (item.sectionName === '煤电一体化') {
|
|
|
+ obj.isClass = 'meiDef'
|
|
|
+ obj.img = meiDef
|
|
|
+ obj.isClassC = 'meiCha'
|
|
|
+ obj.clickImg = meiCha
|
|
|
+ } else if (item.sectionName === '国际业务') {
|
|
|
+ obj.isClass = 'guoDef'
|
|
|
+ obj.img = guoDef
|
|
|
+ obj.isClassC = 'guoCha'
|
|
|
+ obj.clickImg = guoCha
|
|
|
+ } else if (item.sectionName === '综合支持') {
|
|
|
+ obj.isClass = 'zongDef'
|
|
|
+ obj.img = zongDef
|
|
|
+ obj.isClassC = 'zongCha'
|
|
|
+ obj.clickImg = zongCha
|
|
|
+ } else {
|
|
|
+ obj.isClass = 'guoDef'
|
|
|
+ obj.img = guoDef
|
|
|
+ obj.isClassC = 'guoCha'
|
|
|
+ obj.clickImg = guoCha
|
|
|
+ }
|
|
|
+ that.titleMsgArr.push(obj)
|
|
|
+ })
|
|
|
+ that.titleMsgArr[0].showClick = true
|
|
|
+ that.binSectionStr = that.titleMsgArr[0].id
|
|
|
+ that.getStageData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //根据业务属性获取业务阶段
|
|
|
+ getStageData() {
|
|
|
+ let that = this
|
|
|
+ apiGetbinstageList().then(datas =>{
|
|
|
+ if (datas && datas.data) {
|
|
|
+ that.stageData = datas.data
|
|
|
+ that.activeName = datas.data[0].stageCode
|
|
|
+ that.getTableHeaderData(datas.data[0].id)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- //获取详情
|
|
|
- getDetails(id, isevl) {
|
|
|
+ //获取指标数据
|
|
|
+ getTableHeaderData(id) {
|
|
|
let that = this
|
|
|
+ this.monthQuarterYearHeader = []
|
|
|
+ this.monthQuarterYearData = []
|
|
|
let params = {
|
|
|
- organizationEvaluationId: id,
|
|
|
- isQuantified: isevl
|
|
|
+ organizationEvaluationId: that.rowMsg.id,
|
|
|
+ binSection: that.binSectionStr,
|
|
|
+ binStage: id
|
|
|
}
|
|
|
- apiGetOrgEvalInfoList(params).then(datas =>{
|
|
|
+ apiGetEvaluationIndicatorList(params).then(datas =>{
|
|
|
if (datas && datas.data) {
|
|
|
- if (isevl === '是') {
|
|
|
- that.quantifiedList = datas.data
|
|
|
- } else {
|
|
|
- that.nonQuantifiedList = datas.data
|
|
|
+ that.indicatorList = datas.data
|
|
|
+ if (datas.data.length>0) {
|
|
|
+ that.isClickTagId = datas.data[0].id
|
|
|
+ that.getTableData(that.isClickTagId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(val) {
|
|
|
+ let stageId = ''
|
|
|
+ this.stageData.forEach(it =>{
|
|
|
+ if (it.stageCode === val.props.name) {
|
|
|
+ stageId = it.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getTableHeaderData(stageId)
|
|
|
+ },
|
|
|
+ //获取表格数据
|
|
|
+ getTableData(id) {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ organizationEvaluationId: that.rowMsg.id,
|
|
|
+ indicatorId: id
|
|
|
+ }
|
|
|
+ apiGetgetEvaluationInfoDataList(params).then(datas =>{
|
|
|
+ if (datas && datas.data) {
|
|
|
+ if (datas.data.title) {
|
|
|
+ let header = []
|
|
|
+ for(let i in datas.data.title) {
|
|
|
+ let obj = {
|
|
|
+ name: i,
|
|
|
+ children: datas.data.title[i]
|
|
|
+ }
|
|
|
+ header.push(obj)
|
|
|
+ }
|
|
|
+ that.monthQuarterYearHeader = header
|
|
|
}
|
|
|
+ that.monthQuarterYearData = datas.data.value
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ handleShowPage(tag) {
|
|
|
+ this.isClickTagId = tag.id
|
|
|
+ this.monthQuarterYearHeader = []
|
|
|
+ this.monthQuarterYearData = []
|
|
|
+ this.getTableData(tag.id)
|
|
|
+ },
|
|
|
changType(data) {
|
|
|
this.titleMsgArr.forEach(it =>{
|
|
|
it.showClick = false
|
|
|
if (it.isName === data.isName) {
|
|
|
it.showClick = true
|
|
|
- this.binSectionStr = it.isNameEn
|
|
|
+ this.binSectionStr = it.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let stageId = ''
|
|
|
+ this.stageData.forEach(it =>{
|
|
|
+ if (it.stageCode === this.activeName) {
|
|
|
+ stageId = it.id
|
|
|
}
|
|
|
})
|
|
|
+ this.getTableHeaderData(stageId)
|
|
|
},
|
|
|
handleImport() {
|
|
|
- this.$refs.importPage.upload.title = "单位信息导入"
|
|
|
+ this.$refs.importPage.upload.title = "考评详情信息导入"
|
|
|
this.$refs.importPage.upload.open = true
|
|
|
this.$refs.importPage.upload.url = '/organization-evaluation-info/import'
|
|
|
},
|
|
|
successImport(val) {
|
|
|
- this.getDetails(this.rowMsg.id)
|
|
|
+ that.getTableData(that.isClickTagId)
|
|
|
},
|
|
|
handleExport() {
|
|
|
- let data = [] //接口返回数据
|
|
|
- const workbook = new ExcelJS.Workbook()
|
|
|
- const worksheet = workbook.addWorksheet('Sheet1')
|
|
|
- //根据数据自己调整
|
|
|
- let colums = []
|
|
|
- colums = [
|
|
|
- { header: 'ID', key: 'id', width: 26, hidden: true },
|
|
|
- { header: '单位名称', key: 'organizationShortName', width: 26 },
|
|
|
- { header: '指标分类', key: 'typeName', width: 18 },
|
|
|
- { header: '业务阶段', key: 'stageName', width: 18 },
|
|
|
- { header: '业务属性', key: 'sectionName', width: 18 },
|
|
|
- { header: '指标名称', key: 'childName', width: 18 },
|
|
|
- { header: '填报部门', key: 'deptName', width: 26 },
|
|
|
- { header: '指标项', key: 'optionName', width: 26 },
|
|
|
- ]
|
|
|
- if (this.activeName === 'first') {
|
|
|
- colums.push(
|
|
|
- { header: '值', key: 'quantifiedValue', width: 18 },
|
|
|
- { header: '单位', key: 'unit', width: 18 },
|
|
|
- { header: '审核状态', key: 'state', width: 18 }
|
|
|
- )
|
|
|
- this.quantifiedList.forEach(item =>{
|
|
|
- if (item.updateMark) {
|
|
|
- data.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- colums.push(
|
|
|
- { header: '值', key: 'nonQuantifiedValue', width: 18 },
|
|
|
- { header: '审核状态', key: 'state', width: 18 }
|
|
|
+ let indexvs = 0
|
|
|
+ this.stageData.forEach((it, index) =>{
|
|
|
+ if (it.stageCode === this.activeName) {
|
|
|
+ indexvs = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let $e = this.$refs.monthQuarterYearTT[indexvs].$el
|
|
|
+ try {
|
|
|
+ let $table = $e.querySelector('.el-table__fixed')
|
|
|
+ if(!$table) {
|
|
|
+ $table = $e
|
|
|
+ }
|
|
|
+ const wb = XLSX.utils.table_to_book($table, {raw:true})
|
|
|
+
|
|
|
+ const wbout = XLSXD.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
|
|
|
+ saveAs(
|
|
|
+ new Blob([wbout],{type: 'application/octet-stream'}),
|
|
|
+ `考评详情数据导出.xlsx`,
|
|
|
)
|
|
|
- this.nonQuantifiedList.forEach(item =>{
|
|
|
- if (item.updateMark) {
|
|
|
- data.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
+ } catch (e) {
|
|
|
+ if (typeof console !== 'undefined') console.error(e)
|
|
|
}
|
|
|
- worksheet.columns = colums
|
|
|
- worksheet.getRow(1).font = {
|
|
|
- size: 12,
|
|
|
- bold: true
|
|
|
- }
|
|
|
- worksheet.addRows(data)
|
|
|
-
|
|
|
- workbook.xlsx.writeBuffer().then(buffer => {
|
|
|
- //这里为type
|
|
|
- const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
|
|
|
- fileSave(blob, `数据导出.xlsx`)
|
|
|
- })
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
@@ -405,35 +433,65 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .dateTableBtns{
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
+ .detailsHeader{
|
|
|
width: 100%;
|
|
|
- margin-bottom: 5px;
|
|
|
- .tableBtn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .headerLeft{
|
|
|
display: flex;
|
|
|
- height: 20px;
|
|
|
- margin: 0 10px;
|
|
|
- img{
|
|
|
- margin-right: 5px;
|
|
|
- margin-top: 1px;
|
|
|
+ width: 80%;
|
|
|
+ .tagArr {
|
|
|
+ height: 33px;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
- span{
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
+
|
|
|
+ .el-tag--dark {
|
|
|
+ background-color: #184FB4;
|
|
|
+ border: 1px solid #184FB4;
|
|
|
}
|
|
|
- }
|
|
|
- .import{
|
|
|
- cursor: pointer;
|
|
|
- span{
|
|
|
- color: #ce1e78;
|
|
|
+
|
|
|
+ .el-tag--info {
|
|
|
+ background-color: #E6EBF5;
|
|
|
+ border: 1px solid #E6EBF5;
|
|
|
+ color: #9DA5BE;
|
|
|
+
|
|
|
+ .el-tag__close {
|
|
|
+ color: #9DA5BE;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .export{
|
|
|
- cursor: pointer;
|
|
|
- span{
|
|
|
- color: #2baa8a;
|
|
|
+ .headerRight{
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ width: 15%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .tableBtn {
|
|
|
+ display: flex;
|
|
|
+ height: 20px;
|
|
|
+ margin: 0 10px;
|
|
|
+ img{
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .import{
|
|
|
+ cursor: pointer;
|
|
|
+ span{
|
|
|
+ color: #ce1e78;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .export{
|
|
|
+ cursor: pointer;
|
|
|
+ span{
|
|
|
+ color: #2baa8a;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -455,7 +513,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.el-table__body-wrapper {
|
|
|
- height: 55vh !important;
|
|
|
+ height: 47vh !important;
|
|
|
.el-scrollbar{
|
|
|
.is-horizontal{
|
|
|
.el-scrollbar__thumb{
|
|
|
@@ -502,13 +560,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tableSeach{
|
|
|
- width: 81px;
|
|
|
- height: 100%;
|
|
|
+ width: 88px;
|
|
|
+ height: 63vh;
|
|
|
margin-left: 10px;
|
|
|
margin-top: 37px;
|
|
|
border: 1px solid #D6DBEA;
|
|
|
padding: 5px 0;
|
|
|
border-radius: 5px;
|
|
|
+ overflow-y: auto;
|
|
|
.seachType{
|
|
|
width: 78px;
|
|
|
height: 78px;
|
