zdqy_firm_former/src/views/InterLaboratory/interStatistics/index.vue

<template>
    <div class="personView">
        <dv-full-screen-container>
            <div class="topView" style="width: 100%; height: 11%">
                <div class="jbd-title">
                    <dv-decoration-8
                        style="
                            width: 20%;
                            height: 50px;
                            position: absolute;
                            left: 0px;
                            top: 0px;
                        "
                    />
                    <div style="width: 100%">
                        <div
                            style="
                                height: 40%;
                                font-size: 22px;
                                margin-top: 10px;
                            "
                        >
                            质控看板
                        </div>
                        <dv-decoration-5
                            style="width: 30%; height: 50%; margin: 0 auto"
                        />
                    </div>
                    <dv-decoration-8
                        :reverse="true"
                        style="
                            width: 20%;
                            height: 50px;
                            position: absolute;
                            right: 0px;
                            top: 0px;
                        "
                    />
                </div>
                <div class="contain">
                    <div style="display: flex; text-align: center; height:38px; line-height: 38px;width: 25%;position: absolute; left: 3%;top:6%;">
                        <div style="margin-right:10px;">选择年份</div>
                        <yearrange st :year-values="yearValues" :size="size" :value-format="valueFormat" />
                    </div>
                    <div

                        style="width:12%; height:2.825rem; line-height:2.825rem; text-align:center;position: absolute; right: 3%; top:6%;color:white;"
                        @click.prevent="goBack()"
                    >
                        <dv-border-box-8>返回</dv-border-box-8>
                    </div>
                </div>
            </div>
            <dv-border-box-1
                style="
                    width: 100%;
                    height: 90%;
                    box-sizing: border-box;
                    overflow: hidden;
                "
            >
                <div style="height: 3%" />
                <div class="botView">

                    <div class="viewBot">
                        <div class="botleft">
                            <chartA :info="chartAData" />

                        </div>
                        <dv-decoration-2
                            :reverse="true"
                            style="width: 2%; height: 100%"
                        />
                        <div class="botmidd">
                            <chartB :info="chartBData" />

                        </div>
                        <dv-decoration-2
                            :reverse="true"
                            style="width: 2%; height: 100%"
                        />
                        <div class="botright">
                            <chartE :info="chartEData" />
                        </div>

                    </div>
                    <dv-decoration-10
                        style="height: 2%; width: 100%; margin: 0 auto"
                    />
                    <div class="viewTop">
                        <div class="topleft">
                            <chartC :info="chartCData" />
                        </div>
                        <dv-decoration-2
                            :reverse="true"
                            style="width: 2%; height: 100%"
                        />
                        <div class="topright">
                            <chartD :info="chartDData" />
                        </div>
                    </div>
                </div></dv-border-box-1>
        </dv-full-screen-container>
    </div>
</template>

<script>
import screenfull from 'screenfull'
export default {

    components: {

        yearrange: () => import('../yearrange.vue'),
        chartA: () => import('./chartA.vue'),
        chartB: () => import('./chartB.vue'),
        chartC: () => import('./chartC.vue'),
        chartD: () => import('./chartD.vue'),
        chartE: () => import('./chartE.vue')

    },
    data () {
        return {
            yearArr: [],
            yearStr: '',
            numArr: [],
            result: [],
            result1: [],
            result2: [],
            result3: [],
            result4: [],
            result5: [],
            result6: [],
            list1: [],
            list2: [],
            list3: [],
            list4: [],
            list5: [],
            list6: [],
            list7: [],
            data1: [],
            data2: [],
            data3: [],
            arr1: [],
            arr2: [],
            arr3: [],
            yearValues: [new Date().getFullYear() - 4 + '', new Date().getFullYear() + ''],
            size: 'mini',
            valueFormat: 'yyyy',

            activityList: [],
            chartAData: {
                id: 'chartA',
                title: '项目验证类型统计'
            },
            chartBData: {
                id: 'chartB',
                title: '实验室间比对率'
            },
            chartCData: {
                id: 'chartC',
                title: '检验项目不合格率'
            },
            chartDData: {
                id: 'chartD',
                title: '检验项目参加率'
            },
            chartEData: {
                id: 'chartE',
                title: '室内质控项目开展率'
            }

        }
    },
    watch: {
        yearValues: {
            handler (newVal, oldVal) {
                this.getData()
            },
            deep: true
            // immediate: true
        }
    },
    created () {
        if (screenfull.isEnabled && !screenfull.isFullscreen) {
            screenfull.request()
        }
        this.getData()
        this.getactivityList()
    },
    mounted () {

    },
    beforeDestroy () {
        if (screenfull.isFullscreen) {
            screenfull.toggle()
        }
    },

    methods: {
        // 返回
        goBack () {
            this.$router.back(-1)
        },
        getNumArr  (min, max) { return Array.from(Array(max - min + 1), (v, k) => k + min) },
        // 所有活动
        async getactivityList () {
            // const sql = `select huo_dong_ming_che as value from	t_sjzphdjhylxqb GROUP BY huo_dong_ming_che`
            const { variables: { data }} = await this.$common.request('query', {
                key: 'interlabQualityBoard1',
                params: [null]
            })
            this.activityList = data
        },
        getData () {
            this.chartAData = {
                id: 'chartA',
                title: '项目验证类型统计'
            }
            this.chartBData = {
                id: 'chartB',
                title: '实验室间比对率'
            }
            this.chartCData = {
                id: 'chartC',
                title: '检验项目不合格率'
            }
            this.chartDData = {
                id: 'chartD',
                title: '检验项目参加率'
            }
            this.chartEData = {
                id: 'chartE',
                title: '室内质控项目开展率'
            }

            this.yearArr = this.getNumArr(Number(this.yearValues[0]), Number(this.yearValues[1]))
            this.yearStr = this.yearArr.join(',')

            this.getListA()
            this.chartAData.yearArr = this.yearArr
            this.chartAData.numArr = this.result

            this.getListB()
            this.chartBData.yearArr = this.yearArr
            this.chartBData.data1 = this.data1
            this.chartBData.data2 = this.data2
            this.chartBData.data3 = this.data3

            this.getListC()
            this.chartCData.yearArr = this.yearArr
            this.chartCData.result1 = this.result1
            this.chartCData.result2 = this.result2
            this.chartCData.result3 = this.result3
            this.chartCData.result4 = this.result4
            this.chartCData.result5 = this.result5
            this.chartCData.result6 = this.result6

            this.getListD()
            this.chartDData.yearArr = this.yearArr
            this.chartDData.list1 = this.list1
            this.chartDData.list2 = this.list2
            this.chartDData.list3 = this.list3
            this.chartDData.list4 = this.list4
            this.chartDData.list5 = this.list5
            this.chartDData.list6 = this.list6
            this.chartDData.list7 = this.list7

            this.getListE()
            this.chartEData.yearArr = this.yearArr
            this.chartEData.arr1 = this.arr1
            this.chartEData.arr2 = this.arr2
            this.chartEData.arr3 = this.arr3
            console.log(this.chartEData)
        },

        async getListA () {
            this.result = []

            let data1 = []
            const data2 = []
            const sql1 = `select LEFT(b.nian_du_, 4) as niandu, LEFT(a.bi_dui_lei_xing_, 4) as leixing ,COUNT(*) AS count from t_sjzphdjhylxqb a left join t_sjzphdjhylb b on a.parent_id_ = b.id_ WHERE find_in_set(LEFT(b.nian_du_, 4), '${this.yearStr}') GROUP BY LEFT(b.nian_du_, 4), LEFT(a.bi_dui_lei_xing_, 2)`
            // const sql2 = `select LEFT(bian_zhi_shi_jian, 4) as niandu,'实验室' as leixing, COALESCE(COUNT(*), 0) AS count from t_sysbdjlb bian_zhi_shi_jian where shi_fou_guo_shen_ = '已完成' and find_in_set(LEFT(bian_zhi_shi_jian, 4), '${this.yearStr}')`

            await this.$common.request('sql', sql1).then((res) => {
                data1 = res.variables.data
            })
            // await this.$common.request('sql', sql2).then((res) => {
            //     data2 = res.variables.data
            // })

            this.result.push(['product', '能力验证', '室间质评', '其它'])
            for (var item of this.yearArr) {
                const m = data1.find((v) => { return v.niandu === item + '' && v.leixing === '能力验证' })
                const n = data1.find((v) => { return v.niandu === item + '' && v.leixing === '室间质评' })
                // const f = data2.find((v) => { return v.niandu === item + '' && v.leixing === '实验室' })
                const g = data1.find((v) => { return v.niandu === item + '' && v.leixing !== '室间质评' && v.leixing !== '能力验证' })

                const arr = []
                arr[0] = item
                arr[1] = m ? m.count : 0
                arr[2] = n ? n.count : 0
                // arr[3] = f ? f.count : 0
                arr[3] = g ? g.count : 0
                this.result.push(arr)
                console.log(this.result)
            }
        },

        async getListB () {
            this.data1 = []
            this.data2 = []
            this.data3 = []
            let data1 = []
            let data2 = []
            let data3 = []
            const sql1 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and shi_yan_shi_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql2 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and guo_can_jia_ = '✓' or sheng_can_jia_ ='✓'   GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql3 = `select LEFT(bian_zhi_shi_jian, 4) as niandu,'实验室' as leixing, COALESCE(COUNT(*), 0) AS count from t_sysbdjlb bian_zhi_shi_jian where shi_fou_guo_shen_ = '已完成' and find_in_set(LEFT(bian_zhi_shi_jian, 4), '${this.yearStr}')`

            await this.$common.request('sql', sql1).then((res) => {
                data1 = res.variables.data
            })
            await this.$common.request('sql', sql2).then((res) => {
                data2 = res.variables.data
            })
            await this.$common.request('sql', sql3).then((res) => {
                data3 = res.variables.data
            })

            for (var item of this.yearArr) {
                const m = data1.find((v) => { return v.niandu === item + '' })
                const n = data2.find((v) => { return v.niandu === item + '' })
                const f = data3.find((v) => { return v.niandu === item + '' })

                // 无室间质评计划项目数
                this.data1.push((m ? m.count : 0) - (n ? n.count : 0))
                // 实验室比对项目数
                this.data2.push(f ? f.count : 0)
                // 比对率
                this.data3.push(((m ? m.count : 0) - (n ? n.count : 0) === 0 ? 0 : (f ? f.count : 0) / ((m ? m.count : 0) - (n ? n.count : 0)) * 100).toFixed(2))
            }
        },

        async getListC () {
            this.result1 = []
            this.result2 = []
            this.result3 = []
            this.result4 = []
            this.result5 = []
            this.result6 = []
            let data1 = []
            let data2 = []

            const sql1 = `select suo_shu_nian_fen_ as niandu, can_jia_dan_wei_ as danwei, COUNT(*) AS count from v_zkjgtjb where find_in_set(suo_shu_nian_fen_, '${this.yearStr}') GROUP BY suo_shu_nian_fen_, can_jia_dan_wei_`
            const sql2 = `select suo_shu_nian_fen_ as niandu, can_jia_dan_wei_ as danwei, COALESCE(NULLIF(ke_shi_xiu_zheng_, ''), nian_du_he_ge_) AS jieguo,  COUNT(*) AS count from v_zkjgtjb where find_in_set(suo_shu_nian_fen_, '${this.yearStr}') GROUP BY suo_shu_nian_fen_, can_jia_dan_wei_, COALESCE(NULLIF(ke_shi_xiu_zheng_, ''), nian_du_he_ge_)`
            await this.$common.request('sql', sql1).then((res) => {
                data1 = res.variables.data
            })
            await this.$common.request('sql', sql2).then((res) => {
                data2 = res.variables.data
            })
            for (var item of this.yearArr) {
                const gc = data1.find((v) => { return v.niandu === item + '' && v.danwei === '国家' })
                const sc = data1.find((v) => { return v.niandu === item + '' && v.danwei === '省级' })

                const gb = data2.find((v) => { return v.niandu === item + '' && v.danwei === '国家' && v.jieguo === '不合格' })
                const sb = data2.find((v) => { return v.niandu === item + '' && v.danwei === '省级' && v.jieguo === '不合格' })
                // console.log(gc, sc, gb, sb)
                // 项目总数
                this.result1.push((gc ? gc.count : 0) + (sc ? sc.count : 0))
                // 国不合格数
                this.result2.push(gb ? gb.count : 0)
                // 省不合格数
                this.result3.push(sb ? sb.count : 0)
                // 国不合格率
                this.result4.push((gc ? gc.count : 0) === 0 ? 0 : ((gb ? gb.count : 0) / (gc ? gc.count : 0) * 100).toFixed(2))
                // 省不合格率
                this.result5.push((sc ? sc.count : 0) === 0 ? 0 : ((sb ? sb.count : 0) / (sc ? sc.count : 0) * 100).toFixed(2) || 0)
                // 总不合格率
                this.result6.push(((gc ? gc.count : 0) + (sc ? sc.count : 0)) === 0 ? 0 : (((gb ? gb.count : 0) + (sb ? sb.count : 0)) / ((gc ? gc.count : 0) + (sc ? sc.count : 0)) * 100).toFixed(2) || 0)
            }
        },

        async getListD () {
            this.list1 = []
            this.list2 = []
            this.list3 = []
            this.list4 = []
            this.list5 = []
            this.list6 = []
            this.list7 = []

            let data1 = []
            let data2 = []
            let data3 = []
            let data4 = []
            let data5 = []
            let data6 = []

            const sql1 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and guo_kai_zhan_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql2 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and guo_can_jia_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql3 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and sheng_kai_zhan_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql4 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and sheng_can_jia_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql5 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and (guo_kai_zhan_ = '✓' or sheng_kai_zhan_ = '✓') GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql6 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and (guo_can_jia_ = '✓' or sheng_can_jia_ = '✓') GROUP BY LEFT(suo_shu_nian_fen_,4)`
            await this.$common.request('sql', sql1).then((res) => {
                data1 = res.variables.data
            })
            await this.$common.request('sql', sql2).then((res) => {
                data2 = res.variables.data
            })
            await this.$common.request('sql', sql3).then((res) => {
                data3 = res.variables.data
            })
            await this.$common.request('sql', sql4).then((res) => {
                data4 = res.variables.data
            })
            await this.$common.request('sql', sql5).then((res) => {
                data5 = res.variables.data
            })
            await this.$common.request('sql', sql6).then((res) => {
                data6 = res.variables.data
            })
            for (var item of this.yearArr) {
                const gk = data1.find((v) => { return v.niandu === item + '' })
                const gc = data2.find((v) => { return v.niandu === item + '' })
                const sk = data3.find((v) => { return v.niandu === item + '' })
                const sc = data4.find((v) => { return v.niandu === item + '' })
                const zk = data5.find((v) => { return v.niandu === item + '' })
                const zc = data6.find((v) => { return v.niandu === item + '' })

                const gclv = (gk ? gk.count : 0) === 0 ? 0 : (((gc ? gc.count : 0) / (gk ? gk.count : 0)) * 100).toFixed(2)
                const sclv = (sk ? sk.count : 0) === 0 ? 0 : (((sc ? sc.count : 0) / (sk ? sk.count : 0)) * 100).toFixed(2)
                const zclv = (zk ? zk.count : 0) === 0 ? 0 : (((zc ? zc.count : 0) / (zk ? zk.count : 0)) * 100).toFixed(2)

                // 国开展
                this.list1.push(gk ? gk.count : 0)
                // 国参加
                this.list2.push(gc ? gc.count : 0)
                // 省开展
                this.list3.push(sk ? sk.count : 0)
                // 省参加
                this.list4.push(sc ? sc.count : 0)
                // 国参加率
                this.list5.push(gclv)
                // 省参加率
                this.list6.push(sclv)
                // 总参加率
                this.list7.push(zclv)
            }
        },
        async getListE () {
            this.arr1 = []
            this.arr2 = []
            this.arr3 = []
            let data1 = []
            let data2 = []

            const sql1 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and shi_yan_shi_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`
            const sql2 = `select LEFT(suo_shu_nian_fen_,4) as niandu, COUNT(*) AS count from t_zkxxtjbzb WHERE find_in_set(LEFT(suo_shu_nian_fen_,4), '${this.yearStr}') and shi_nei_zhi_kong_ = '✓' GROUP BY LEFT(suo_shu_nian_fen_,4)`

            await this.$common.request('sql', sql1).then((res) => {
                data1 = res.variables.data
            })
            await this.$common.request('sql', sql2).then((res) => {
                data2 = res.variables.data
            })

            for (var item of this.yearArr) {
                const m = data1.find((v) => { return v.niandu === item + '' })
                const n = data2.find((v) => { return v.niandu === item + '' })

                // 开展率
                this.arr1.push(((m ? m.count : 0) === 0 ? 0 : ((n ? n.count : 0) / (m ? m.count : 0)) * 100).toFixed(2))
                // 实验室开展项目数
                this.arr2.push((m ? m.count : 0))
                // 开展室内质控项目数
                this.arr3.push(n ? n.count : 0)
            }
        }

    }
}
</script>
<style lang="less" scoped>
.personView {
  width: 100%;
  //   height: calc(100vh - 100px);
  height: 100%;
  //   background-image: url("~@/assets/images/screen/bg.png");
  z-index: 999;
  #dv-full-screen-container {
      background-image: url("~@/assets/images/screen/bg.png");
      background-size: 100% 100%;
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
      color: white;
  }
}
.topView {
  overflow: hidden;
  box-sizing: border-box;
  .jbd-title {
      text-align: center;
      font-weight: bold;
      width: 100%;
      color: white;
      font-size: 18px;
      height: 50%;
  }

}

.botView {
    height: 98%;
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;

}

.viewTop{
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  height: 45%;
  width: 100%;

  .topleft{
    height: 100%;
    width: 50%;
    overflow: hidden;
    box-sizing: border-box;

  }
  .topright{
    height: 100%;
    width: 50%;
    overflow: hidden;
    box-sizing: border-box;
  }
}
.viewBot{
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  height: 47%;
  width: 100%;
  .botleft{
    height: 100%;
    width: 33%;
    overflow: hidden;
    box-sizing: border-box;

  }
  .botmidd{
    height: 100%;
    width: 33%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .botright{
    height: 100%;
    width: 33%;
    overflow: hidden;
    box-sizing: border-box;
  }
}

</style>