|
|
@@ -0,0 +1,415 @@
|
|
|
+<template>
|
|
|
+ <div class="bg">
|
|
|
+ <el-dialog
|
|
|
+ width="80vw"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ title="认可申报材料编制进度查询"
|
|
|
+ :visible.sync="scanVisible"
|
|
|
+ top
|
|
|
+ style="margin-top: 50px; overflow: auto"
|
|
|
+ >
|
|
|
+ <!-- 表单是否显示 -->
|
|
|
+ <div style="height: 80vh; width: 98%; overflow: auto">
|
|
|
+ <div id="box">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 98%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="wheel-title">材料编制完成率</div>
|
|
|
+ <div id="check-progress" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="display: flex; justify-content: center; align-items: center"
|
|
|
+ >
|
|
|
+ <div>完成状态：</div>
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
+ @change="getTabledata"
|
|
|
+ v-model="zhuangTai"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in zhuangTaiList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-left: 10px">
|
|
|
+ <template>
|
|
|
+ <!-- <el-button
|
|
|
+ style="width: 80px"
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="getTabledata()"
|
|
|
+ >
|
|
|
+ 查询
|
|
|
+ </el-button> -->
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ style="width: 80px"
|
|
|
+ type="info"
|
|
|
+ @click="getDown()"
|
|
|
+ >
|
|
|
+ 一键下载
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="cnas">
|
|
|
+ <div style="width: 90%; margin: 0 auto; line-height: 35px">
|
|
|
+ 认可申报材料编制进度查阅
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData"
|
|
|
+ :border="true"
|
|
|
+ style="width: 90%; margin: 0 auto"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :key="Math.random()"
|
|
|
+ prop="pai_xu_hao_"
|
|
|
+ label="排序号"
|
|
|
+ width="60"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.pai_xu_hao_ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="wen_jian_ming_che"
|
|
|
+ label="文件名称"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.wen_jian_ming_che }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="tian_xie_shuo_min"
|
|
|
+ label="填写说明"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.tian_xie_shuo_min }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="fu_ze_ren_" label="负责人" width="60">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <ibps-user-selector
|
|
|
+ v-model="scope.row.fu_ze_ren_"
|
|
|
+ placeholder="请选择"
|
|
|
+ type="user"
|
|
|
+ :multiple="false"
|
|
|
+ store="id"
|
|
|
+ :disabled="true"
|
|
|
+ /> -->
|
|
|
+ {{ changUserName(scope.row.fu_ze_ren_) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="wan_cheng_qi_xian"
|
|
|
+ label="完成期限"
|
|
|
+ width="80"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.wan_cheng_qi_xian }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="shi_fou_guo_shen_"
|
|
|
+ label="完成状态"
|
|
|
+ width="65"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.shi_fou_guo_shen_ == '已完成'"
|
|
|
+ >已完成</div
|
|
|
+ >
|
|
|
+ <div style="color: red" v-else>未完成 </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fu_jian_" label="附件" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <ibps-attachment
|
|
|
+ v-model="scope.row.fu_jian_"
|
|
|
+ :download="true"
|
|
|
+ multiple
|
|
|
+ accept="*"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import IbpsAttachment from '@/business/platform/file/attachment/selector'
|
|
|
+import IbpsUserSelector from '@/business/platform/org/selector'
|
|
|
+import request from '@/utils/request'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ IbpsAttachment,
|
|
|
+ IbpsUserSelector
|
|
|
+ },
|
|
|
+ filters: {},
|
|
|
+ props: {
|
|
|
+ obj: {
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ scanVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const { userList } = this.$store.getters
|
|
|
+ return {
|
|
|
+ visible: true,
|
|
|
+ setCheckTime: '',
|
|
|
+ tableDataList: [],
|
|
|
+ tableData: [],
|
|
|
+ checkValue: 0,
|
|
|
+ zhuangTai: '',
|
|
|
+ zhuangTaiList: [
|
|
|
+ {
|
|
|
+ label: '已完成',
|
|
|
+ value: '已完成'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '未完成',
|
|
|
+ value: '未完成'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ userList: userList,
|
|
|
+ loading: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ obj() {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.getData()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.setCheckTime)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData() {
|
|
|
+ this.zhuangTai = ''
|
|
|
+ this.checkValue = 0
|
|
|
+ const res = await this.$common.request('query', {
|
|
|
+ key: 'nsbgtb',
|
|
|
+ params: [this.obj[0].id_]
|
|
|
+ })
|
|
|
+ const { data = [] } = res.variables || {}
|
|
|
+ this.tableDataList = data
|
|
|
+ this.tableData = data
|
|
|
+ const dataTrue = this.tableData.filter((i) => {
|
|
|
+ return i.shi_fou_guo_shen_ == '已完成'
|
|
|
+ })
|
|
|
+ this.checkValue =
|
|
|
+ parseInt((dataTrue.length / this.tableData.length) * 100) || 0
|
|
|
+ this.getcCheckProgressEcharts()
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ // 内审检查表完成率仪表盘
|
|
|
+ getcCheckProgressEcharts() {
|
|
|
+ var checkDom = document.getElementById('check-progress')
|
|
|
+ const setEchartWH = {
|
|
|
+ // 设置控制图表大小变量
|
|
|
+ width: 400,
|
|
|
+ height: 300
|
|
|
+ }
|
|
|
+ var checkChart = echarts.init(checkDom, null, setEchartWH)
|
|
|
+ var option
|
|
|
+ const this_ = this
|
|
|
+ option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 30,
|
|
|
+ color: [
|
|
|
+ [0.3, '#fd666d'],
|
|
|
+ [0.7, '#37a2da'],
|
|
|
+ [1, '#67e0e3']
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ itemStyle: {
|
|
|
+ color: 'auto'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ distance: -30,
|
|
|
+ length: 8,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ distance: -30,
|
|
|
+ length: 30,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ width: 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ formatter: '{value} %',
|
|
|
+ color: 'auto',
|
|
|
+ top: '100%'
|
|
|
+ },
|
|
|
+ data: [{ value: 0, top: '100%' }]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setCheckTime = setInterval(function () {
|
|
|
+ checkChart.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this_.checkValue
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }, 2000)
|
|
|
+ option && checkChart.setOption(option)
|
|
|
+ },
|
|
|
+ changUserName(id) {
|
|
|
+ const user = this.userList.find((item) => item.userId === id)
|
|
|
+ if (user) {
|
|
|
+ return user.userName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTabledata(value) {
|
|
|
+ if (value == '已完成') {
|
|
|
+ const data = this.tableDataList.filter((i) => {
|
|
|
+ return i.shi_fou_guo_shen_ == '已完成'
|
|
|
+ })
|
|
|
+ this.tableData = data
|
|
|
+ } else if (value == '未完成') {
|
|
|
+ const data = this.tableDataList.filter((i) => {
|
|
|
+ return i.shi_fou_guo_shen_ != '已完成'
|
|
|
+ })
|
|
|
+ this.tableData = data
|
|
|
+ } else {
|
|
|
+ this.tableData = this.tableDataList
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDown() {
|
|
|
+ const fileIds = []
|
|
|
+ for (const i of this.tableData) {
|
|
|
+ if (i.fu_jian_) {
|
|
|
+ fileIds.push(i.fu_jian_)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let finlyStr = fileIds.join(',')
|
|
|
+ let finlyStr2 = finlyStr.replace(/,+/g, ',').replace(/^,|,$/g, '')
|
|
|
+ let finlyStr3 = finlyStr2.split(',')
|
|
|
+ request({
|
|
|
+ url: '/platform/v3/file/downloadZip?attachmentIds=' + finlyStr3,
|
|
|
+ method: 'GET',
|
|
|
+ isLoading: true,
|
|
|
+ responseType: 'arraybuffer'
|
|
|
+ }).then((res) => {
|
|
|
+ const data = res.data
|
|
|
+ const blob =
|
|
|
+ data instanceof Blob
|
|
|
+ ? data
|
|
|
+ : new Blob([data], { type: 'application/octet-stream' })
|
|
|
+ const url = window.URL.createObjectURL(blob)
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.style.display = 'none'
|
|
|
+ link.href = url
|
|
|
+ link.setAttribute('download', '认可申报材料附件.zip')
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+ window.URL.revokeObjectURL(link.href)
|
|
|
+ document.body.removeChild(link)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ .main {
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+ position: relative;
|
|
|
+ top: 16px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .wheel-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ left: -8px;
|
|
|
+ top: 86%;
|
|
|
+ left: calc(90% - 205px);
|
|
|
+ // color: #000;
|
|
|
+ // font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-dialog__wrapper .el-dialog__body {
|
|
|
+ overflow-x: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-progress {
|
|
|
+ width: 92%;
|
|
|
+ position: relative;
|
|
|
+ line-height: 1;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-left: 5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cnas {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
tianxinyu