认可申报计划进度

src/views/system/jbdScan/goods/renkeshenbao.vue

@@ -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>

src/views/system/jbdScan/scan.vue

@@ -18,6 +18,7 @@ import deviceFailureTag from './goods/deviceFailureTag.vue'
 import neishenzhuangtai from './goods/neishenzhuangtai'
 import fengxiangkongzhi from './goods/fengxiangkongzhi'
 import guanshenzhuangtai from './goods/guanshenzhuangtai'
+import renkeshenbao from './goods/renkeshenbao'
 
 export default {
   components: {
@@ -26,7 +27,8 @@ export default {
     deviceFailureTag,
     neishenzhuangtai,
     fengxiangkongzhi,
-    guanshenzhuangtai
+    guanshenzhuangtai,
+    renkeshenbao
   },
   props: {
     currentScan: String,