室间质控看板调整

src/views/InterLaboratory/interStatistics/chartB.vue

@@ -41,6 +41,8 @@ export default {
                             optionToContent: function (opt) {
                                 var axisData = opt.xAxis[0].data// x轴作为条件，y轴需改成yAxis[0].data;
                                 var series = opt.series
+                                console.log(opt)
+
                                 var tdHeads = '<td  style="padding:0 10px">年份</td>'
                                 series.forEach(function (item) {
                                     tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>'
@@ -62,8 +64,8 @@ export default {
                                 return table
                             }
                         },
-                        magicType: { show: true, type: ['line', 'bar'] },
-                        restore: { show: true },
+                        // magicType: { show: true, type: ['line', 'bar'] },
+                        // restore: { show: true },
                         saveAsImage: { show: true }
                     },
                     iconStyle: {
@@ -96,7 +98,7 @@ export default {
                         name: '个数',
                         min: 0,
                         // max: 100,
-                        // interval: 20,
+                        // interval: 40,
                         axisLabel: {
                             formatter: '{value}'
                         }
@@ -106,7 +108,7 @@ export default {
                         name: '百分比',
                         min: 0,
                         max: 100,
-                        // interval: 20,
+                        // interval: 10,
                         axisLabel: {
                             formatter: '{value} %'
                         }
@@ -170,13 +172,13 @@ export default {
         getMiddleLeft () {
             this.option.xAxis[0].data = this.info.yearArr
             this.option.legend.data = ['比对率', '无室间质评计划项目数', '室间比对项目数']
+            this.option.series[0].name = '比对率'
             this.option.series[1].name = '无室间质评计划项目数'
             this.option.series[2].name = '室间比对项目数'
-            this.option.series[0].name = '比对率'
             this.option.series[0].data = this.info.data3
             this.option.series[1].data = this.info.data1
             this.option.series[2].data = this.info.data2
-            // this.option.series[2].data = [1, 1, 1, 1, 1]
+
             const chartDom = document.getElementById(this.info.id)
             var myChart = echarts.init(chartDom)
             setTimeout(() => {

src/views/InterLaboratory/interStatistics/chartC.vue

@@ -62,8 +62,8 @@ export default {
                                 return table
                             }
                         },
-                        magicType: { show: true, type: ['line', 'bar'] },
-                        restore: { show: true },
+                        // magicType: { show: true, type: ['line', 'bar'] },
+                        // restore: { show: true },
                         saveAsImage: { show: true }
                     },
                     iconStyle: {

src/views/InterLaboratory/interStatistics/chartD.vue

@@ -62,8 +62,8 @@ export default {
                                 return table
                             }
                         },
-                        magicType: { show: true, type: ['line', 'bar'] },
-                        restore: { show: true },
+                        // magicType: { show: true, type: ['line', 'bar'] },
+                        // restore: { show: true },
                         saveAsImage: { show: true }
                     },
                     iconStyle: {
@@ -214,8 +214,6 @@ export default {
     },
     methods: {
         getMiddleLeft () {
-            console.log(this.info)
-
             this.option.xAxis[0].data = this.info.yearArr
             this.option.legend.data = ['国家级开展数', '国家级参加数', '省级开展数', '省级参加数', '国家级参加率', '省级参加率', '总参加率']
             this.option.series[0].name = '国家级开展数'

src/views/InterLaboratory/interStatistics/chartE.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="pieView">
+        <div style="height:14%;line-height:30px;text-align: left;padding-left: 10px;padding-top: 10px; margin-bottom: -50px; color: white;">
+            {{ info.title || "" }}
+        </div>
+        <div style="width: 100%; height: 95%; display: inline-block; overflow: hidden">
+            <div :id="info.id" style="width: 100%; height: 100%; overflow: hidden;padding-right: 10px;" />
+        </div>
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        }
+    },
+    data () {
+        return {
+            showChart: true,
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataView: { show: true, readOnly: false,
+                            optionToContent: function (opt) {
+                                var axisData = opt.xAxis[0].data// x轴作为条件，y轴需改成yAxis[0].data;
+                                var series = opt.series
+                                var tdHeads = '<td  style="padding:0 10px">年份</td>'
+                                series.forEach(function (item) {
+                                    tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>'
+                                })
+                                var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;color:#666"><tbody><tr>' + tdHeads + '</tr>'
+                                var tdBodys = ''
+                                for (var i = 0, l = axisData.length; i < l; i++) {
+                                    for (var j = 0; j < series.length; j++) {
+                                        if (typeof (series[j].data[i]) === 'object') {
+                                            tdBodys += '<td>' + series[j].data[i].value + '</td>'
+                                        } else {
+                                            tdBodys += '<td>' + series[j].data[i] + '</td>'
+                                        }
+                                    }
+                                    table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>'
+                                    tdBodys = ''
+                                }
+                                table += '</tbody></table>'
+                                return table
+                            }
+                        },
+                        // magicType: { show: true, type: ['line', 'bar'] },
+                        // restore: { show: true },
+                        saveAsImage: { show: true }
+                    },
+                    iconStyle: {
+                        borderColor: 'white'
+                    }
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'center',
+                    bottom: 'bottom',
+                    data: [],
+                    textStyle: {
+                        color: '#ffff',
+                        fontSize: 12
+                    }
+
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: [],
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '个数',
+                        min: 0,
+                        // max: 100,
+                        // interval: 40,
+                        axisLabel: {
+                            formatter: '{value}'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '百分比',
+                        min: 0,
+                        max: 100,
+                        // interval: 10,
+                        axisLabel: {
+                            formatter: '{value} %'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        barMaxWidth: 30,
+                        name: '',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' %'
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        barMaxWidth: 30,
+                        name: '',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        barMaxWidth: 30,
+                        name: '',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value
+                            }
+                        },
+                        data: []
+                    }
+
+                ]
+            }
+        }
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
+    },
+    methods: {
+        getMiddleLeft () {
+            console.log()
+
+            this.option.xAxis[0].data = this.info.yearArr
+            this.option.legend.data = ['开展率', '实验室开展项目数', '开展室内质控项目数']
+            this.option.series[0].name = '开展率'
+            this.option.series[1].name = '实验室开展项目数'
+            this.option.series[2].name = '开展室内质控项目数'
+
+            this.option.series[0].data = this.info.arr1
+            this.option.series[1].data = this.info.arr2
+            this.option.series[2].data = this.info.arr3
+
+            const chartDom = document.getElementById(this.info.id)
+            var myChart = echarts.init(chartDom)
+            setTimeout(() => {
+                myChart.setOption(this.option)
+            }, 2000)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pieView {
+width: 100%;
+height: 100%;
+overflow: hidden;
+background-color: rgba(6, 30, 93, 0.5);
+}
+</style>

src/views/InterLaboratory/interStatistics/index.vue

@@ -20,7 +20,7 @@
                                 margin-top: 10px;
                             "
                         >
-                            室间质控报表
+                            室间质控看板
                         </div>
                         <dv-decoration-5
                             style="width: 30%; height: 50%; margin: 0 auto"
@@ -84,13 +84,19 @@
                             :reverse="true"
                             style="width: 2%; height: 100%"
                         />
-                        <div class="botright">
+                        <div class="botmidd">
                             <chartD :info="chartDData" />
                         </div>
+                        <dv-decoration-2
+                            :reverse="true"
+                            style="width: 2%; height: 100%"
+                        />
+                        <div class="botright">
+                            <chartE :info="chartEData" />
+                        </div>
 
                     </div>
-                </div>
-            </dv-border-box-1>
+                </div></dv-border-box-1>
         </dv-full-screen-container>
     </div>
 </template>
@@ -105,7 +111,8 @@ export default {
         chartA: () => import('./chartA.vue'),
         chartB: () => import('./chartB.vue'),
         chartC: () => import('./chartC.vue'),
-        chartD: () => import('./chartD.vue')
+        chartD: () => import('./chartD.vue'),
+        chartE: () => import('./chartE.vue')
 
     },
     data () {
@@ -130,6 +137,9 @@ export default {
             data1: [],
             data2: [],
             data3: [],
+            arr1: [],
+            arr2: [],
+            arr3: [],
             yearValues: [new Date().getFullYear() - 4 + '', new Date().getFullYear() + ''],
             size: 'mini',
             valueFormat: 'yyyy',
@@ -150,6 +160,10 @@ export default {
             chartDData: {
                 id: 'chartD',
                 title: '检验项目参加率'
+            },
+            chartEData: {
+                id: 'chartE',
+                title: '室内质控项目开展率'
             }
 
         }
@@ -211,6 +225,10 @@ export default {
                 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(',')
@@ -243,6 +261,13 @@ export default {
             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 () {
@@ -402,7 +427,7 @@ export default {
                 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 ? gc.count : 0) / (sk ? sk.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)
 
                 // 国开展
@@ -420,6 +445,35 @@ export default {
                 // 总参加率
                 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)
+            }
         }
 
     }
@@ -489,19 +543,24 @@ export default {
   display: flex;
   overflow: hidden;
   box-sizing: border-box;
-  height: 45%;
+  height: 47%;
   width: 100%;
-
   .botleft{
     height: 100%;
-    width: 50%;
+    width: 33%;
     overflow: hidden;
     box-sizing: border-box;
 
   }
+  .botmidd{
+    height: 100%;
+    width: 33%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
   .botright{
     height: 100%;
-    width: 50%;
+    width: 33%;
     overflow: hidden;
     box-sizing: border-box;
   }