室间质控看板

src/views/InterLaboratory/interStatistics/botChart.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ info.title || "" }}
+        </div>
+        <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div :id="info.id" style="width: 100%; height: 95%; overflow: hidden" />
+        </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: {
+                    feature: {
+                        dataView: { show: true, readOnly: false },
+                        magicType: { show: true, type: ['line', 'bar'] },
+                        restore: { show: true },
+                        saveAsImage: { show: true }
+                    }
+                },
+                legend: {
+                    data: [],
+                    textStyle: {
+                        color: '#ffff',
+                        fontSize: 12
+                    }
+
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: [],
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '个数',
+                        min: 0,
+                        // max: 100,
+                        interval: 20,
+                        axisLabel: {
+                            formatter: '{value}'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '百分比',
+                        min: 0,
+                        max: 100,
+                        interval: 20,
+                        axisLabel: {
+                            formatter: '{value} %'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value + ' %'
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '',
+                        type: 'bar',
+                        tooltip: {
+                            valueFormatter: function (value) {
+                                return value
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        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 () {
+            this.option.xAxis[0].data = this.info.yearArr
+            if (this.info.id === 'botLeftChart') {
+                this.option.legend.data = ['不合格率', '项目总数', '不合格项目数']
+                this.option.series[1].name = '项目总数'
+                this.option.series[2].name = '不合格项目数'
+                this.option.series[0].name = '不合格率'
+                this.option.series[0].data = this.info.result3
+                this.option.series[1].data = this.info.result1
+                this.option.series[2].data = this.info.result2
+            }
+            if (this.info.id === 'botMiddChart') {
+                this.option.legend.data = ['参加率', '检验项目总数', '室间质控项目数']
+                this.option.series[1].name = '检验项目总数'
+                this.option.series[2].name = '室间质控项目数'
+                this.option.series[0].name = '参加率'
+                this.option.series[0].data = this.info.list3
+                this.option.series[1].data = this.info.list1
+                this.option.series[2].data = this.info.list2
+            }
+            if (this.info.id === 'botRightChart') {
+                this.option.legend.data = ['比对率', '无室间质评计划项目数', '室间比对项目数']
+                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
+            }
+
+            const chartDom = document.getElementById(this.info.id)
+            var myChart = echarts.init(chartDom)
+            setTimeout(() => {
+                myChart.setOption(this.option)
+            }, 500)
+        }
+    }
+}
+</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

@@ -0,0 +1,498 @@
+<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="display: flex; text-align: center; height:38px; line-height: 38px;width: 25%;position: absolute; left: 30%;top:6%;">
+                        <div style="margin-right:10px;">活动名称</div>
+                        <el-select v-model="activityValue" clearable filterable placeholder="请选择">
+                            <el-option
+                                v-for="item in activityList"
+                                :key="item.value"
+                                :label="item.value"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </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: 89%;
+                    box-sizing: border-box;
+                    overflow: hidden;
+                "
+            >
+                <div style="height: 3%" />
+                <div class="botView">
+                    <div class="viewTop">
+                        <div class="topleft">
+                            <topLeftChart :info="topLeftData" />
+                        </div>
+                        <dv-decoration-2
+                            :reverse="true"
+                            style="width: 2%; height: 100%"
+                        />
+                        <div class="topright">
+                            <topRightChart :info="topRightData" />
+                        </div>
+                    </div>
+                    <dv-decoration-10
+                        style="height: 2%; width: 100%; margin: 0 auto"
+                    />
+
+                    <div class="viewBot">
+                        <div class="botleft">
+                            <botChart :info="botLeftData" />
+                        </div>
+                        <dv-decoration-2
+                            :reverse="true"
+                            style="width: 2%; height: 100%"
+                        />
+                        <div class="botmidd">
+                            <botChart :info="botMiddData" />
+                        </div>
+                        <dv-decoration-2
+                            :reverse="true"
+                            style="width: 2%; height: 100%"
+                        />
+                        <div class="botright">
+                            <botChart :info="botRightData" />
+                        </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'),
+        topLeftChart: () => import('./topLeftChart.vue'),
+        topRightChart: () => import('./topRightChart.vue'),
+        botChart: () => import('./botChart.vue')
+
+    },
+    data () {
+        return {
+            yearArr: [],
+            numArr: [],
+            result: [],
+            result1: [],
+            result2: [],
+            result3: [],
+            list1: [],
+            list2: [],
+            list3: [],
+            data1: [],
+            data2: [],
+            data3: [],
+            yearValues: [new Date().getFullYear() - 4 + '', new Date().getFullYear() + ''],
+            size: 'mini',
+            valueFormat: 'yyyy',
+            activityValue: '',
+            activityList: [],
+            topLeftData: {
+                id: 'topLeftChart',
+                title: '室间质评计划项目总数'
+            },
+            topRightData: {
+                id: 'topRightChart',
+                title: '项目验证类型统计'
+            },
+            botLeftData: {
+                id: 'botLeftChart',
+                title: '室间质评项目不合格率'
+            },
+            botMiddData: {
+                id: 'botMiddChart',
+                title: '室间质评项目覆盖率'
+            },
+            botRightData: {
+                id: 'botRightChart',
+                title: '实验室间比对率'
+            }
+
+        }
+    },
+    watch: {
+        yearValues: {
+            handler (newVal, oldVal) {
+                this.getData()
+            },
+            deep: true
+            // immediate: true
+        },
+        activityValue: {
+            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('sql', sql)
+            this.activityList = data
+        },
+        getData () {
+            this.topLeftData = {
+                id: 'topLeftChart',
+                title: '室间质评计划项目总数'
+            }
+            this.topRightData = {
+                id: 'topRightChart',
+                title: '项目验证类型统计'
+            }
+            this.botLeftData = {
+                id: 'botLeftChart',
+                title: '室间质评项目不合格率'
+            }
+            this.botMiddData = {
+                id: 'botMiddChart',
+                title: '室间质评项目覆盖率'
+            }
+            this.botRightData = {
+                id: 'botRightChart',
+                title: '实验室间比对率'
+            }
+            this.yearArr = this.getNumArr(Number(this.yearValues[0]), Number(this.yearValues[1]))
+
+            this.getList1()
+            this.topLeftData.yearArr = this.yearArr
+            this.topLeftData.numArr = this.numArr
+            this.getList2()
+            // this.topRightData.yearArr = this.yearArr
+            this.topRightData.numArr = this.result
+            this.getList3()
+            this.botLeftData.yearArr = this.yearArr
+            this.botLeftData.result1 = this.result1
+            this.botLeftData.result2 = this.result2
+            this.botLeftData.result3 = this.result3
+            this.getList4()
+            this.botMiddData.yearArr = this.yearArr
+            this.botMiddData.list1 = this.list1
+            this.botMiddData.list2 = this.list2
+            this.botMiddData.list3 = this.list3
+
+            this.getList5()
+            this.botRightData.yearArr = this.yearArr
+            this.botRightData.data1 = this.data1
+            this.botRightData.data2 = this.data2
+            this.botRightData.data3 = this.data3
+        },
+
+        async getList1 () {
+            this.numArr = []
+            const yearStr = `('${this.yearArr.join("', '")}')`
+            const activityStr = this.activityValue ? `= '${this.activityValue}'` : `is not null`
+            // const sql = `select left(zhu_biao_shi_jian, 4) as niandu, coalesce(count(*), 0) as count
+            // from t_sjzphdjhylxqb
+            // where left(zhu_biao_shi_jian, 4) in ${yearStr}
+            // group by left(zhu_biao_shi_jian, 4)`
+            const sql = `select e.ji_hua_nian_fen_ as niandu,COALESCE(COUNT(*), 0) AS count from (select a.huo_dong_ming_che,a.zu_zhi_dan_wei_,a.xu_hao_,a.shi_yan_shi_jian_,a.bi_dui_lei_xing_,b.ji_hua_nian_fen_ from t_sjzphdjhylxqb a join (select c.*, d.ji_hua_nian_fen_ from t_cjwbzlpjhdjhxqb c join  t_cjwbzlpjhdjhb d on c.parent_id_ =  d.id_ WHERE d.shi_fou_guo_shen_='已完成' and huo_dong_ming_che ${activityStr}) b on a.huo_dong_ming_che=b.huo_dong_ming_che and a.zu_zhi_dan_wei_ = b.zu_zhi_dan_wei_ and a.xu_hao_ = b.xu_hao_ and a.shi_yan_shi_jian_ = b.shi_yan_shi_jian_) e WHERE ji_hua_nian_fen_ in ${yearStr}  GROUP BY e.ji_hua_nian_fen_`
+            await this.$common.request('sql', sql).then((res) => {
+                const data = res.variables.data
+                for (var item of this.yearArr) {
+                    const m = data.find((v) => { return v.niandu === item + '' })
+
+                    if (m) {
+                        this.numArr.push(m.count)
+                    } else {
+                        this.numArr.push(0)
+                    }
+                }
+            })
+        },
+        getList2 () {
+            this.result = []
+            const yearStr = `('${this.yearArr.join("', '")}')`
+            const sql = `select LEFT(bi_dui_lei_xing_, 2) as leixing,LEFT(zhu_biao_shi_jian, 4) as niandu, COALESCE(COUNT(*), 0) as count FROM t_sjzphdjhylxqb where left(zhu_biao_shi_jian, 4) in ${yearStr} GROUP BY CONCAT(LEFT(zhu_biao_shi_jian, 4), ' ', LEFT(bi_dui_lei_xing_, 2))`
+            this.$common.request('sql', sql).then((res) => {
+                const data = res.variables.data
+                // console.log(data)
+
+                this.result.push(['product', '能力验证', '室间质评'])
+
+                for (var item of this.yearArr) {
+                    const arr = []
+
+                    arr[0] = item
+
+                    const m = data.find((v) => { return v.niandu === item + '' && v.leixing === '能力' })
+                    const n = data.find((v) => { return v.niandu === item + '' && v.leixing === '室间' })
+                    // console.log(m, n)
+
+                    if (m) {
+                        arr[1] = m.count
+                    } else {
+                        arr[1] = 0
+                    }
+                    if (n) {
+                        arr[2] = n.count
+                    } else {
+                        arr[2] = 0
+                    }
+
+                    this.result.push(arr)
+                }
+            })
+        },
+
+        getList3 () {
+            this.result1 = []
+            this.result2 = []
+            this.result3 = []
+            const yearStr = `('${this.yearArr.join("', '")}')`
+            const sql = `select 年度 as niandu,评价结果 as jieguo, COALESCE(COUNT(*), 0) AS count FROM v_sjzpjgpj WHERE 年度 IN ${yearStr} GROUP BY CONCAT(年度, ' ',评价结果)`
+            this.$common.request('sql', sql).then((res) => {
+                const data = res.variables.data
+                for (var item of this.yearArr) {
+                    const m = data.find((v) => { return v.niandu === item + '' && v.jieguo === '通过' })
+                    const n = data.find((v) => { return v.niandu === item + '' && v.jieguo === '不满意项目' })
+                    const f = data.find((v) => { return v.niandu === item + '' && v.jieguo === '不通过' })
+                    // 总数
+                    this.result1.push((m ? m.count : 0) + (n ? n.count : 0) + (f ? f.count : 0))
+                    // 不合格数
+                    this.result2.push(f ? f.count : 0)
+                    // 不合格率
+                    this.result3.push(((m ? m.count : 0) + (n ? n.count : 0) + (f ? f.count : 0)) === 0 ? 0 : (f ? f.count : 0) / ((m ? m.count : 0) + (n ? n.count : 0) + (f ? f.count : 0)) * 100)
+                    // console.log(this.result1, this.result2, this.result3)
+                }
+            })
+        },
+
+        async getList4 () {
+            this.list1 = []
+            this.list2 = []
+            this.list3 = []
+            const yearStr = `('${this.yearArr.join("', '")}')`
+            let data1 = []
+            let data2 = []
+            const sql1 = `select LEFT(zhu_biao_shi_jian, 4) as niandu, COUNT(*) AS count FROM t_sjzphdjhylxqb WHERE LEFT(zhu_biao_shi_jian, 4) IN ${yearStr} GROUP BY LEFT(zhu_biao_shi_jian, 4)`
+            const sql2 = `select e.ji_hua_nian_fen_ as niandu,COALESCE(COUNT(*), 0) AS count from (select a.huo_dong_ming_che,a.zu_zhi_dan_wei_,a.xu_hao_,a.shi_yan_shi_jian_,a.bi_dui_lei_xing_,b.ji_hua_nian_fen_ from t_sjzphdjhylxqb a join (select c.*, d.ji_hua_nian_fen_ from t_cjwbzlpjhdjhxqb c join  t_cjwbzlpjhdjhb d on c.parent_id_ =  d.id_ WHERE d.shi_fou_guo_shen_='已完成') b on a.huo_dong_ming_che=b.huo_dong_ming_che and a.zu_zhi_dan_wei_ = b.zu_zhi_dan_wei_ and a.xu_hao_ = b.xu_hao_ and a.shi_yan_shi_jian_ = b.shi_yan_shi_jian_) e WHERE ji_hua_nian_fen_ in ${yearStr}  GROUP BY e.ji_hua_nian_fen_`
+            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.list1.push(m ? m.count : 0)
+                // 计划
+                this.list2.push(n ? n.count : 0)
+                // 覆盖率率
+                this.list3.push((m ? m.count : 0) === 0 ? 0 : (n ? n.count : 0) / (m ? m.count : 0) * 100)
+            }
+        },
+
+        async getList5 () {
+            this.data1 = []
+            this.data2 = []
+            this.data3 = []
+            const yearStr = `('${this.yearArr.join("', '")}')`
+            let data1 = []
+            let data2 = []
+            let data3 = []
+            const sql1 = `select LEFT(zhu_biao_shi_jian, 4) as niandu, COUNT(*) AS count FROM t_sjzphdjhylxqb WHERE LEFT(zhu_biao_shi_jian, 4) IN ${yearStr} GROUP BY LEFT(zhu_biao_shi_jian, 4)`
+            const sql2 = `select e.ji_hua_nian_fen_ as niandu,COALESCE(COUNT(*), 0) AS count from (select a.huo_dong_ming_che,a.zu_zhi_dan_wei_,a.xu_hao_,a.shi_yan_shi_jian_,a.bi_dui_lei_xing_,b.ji_hua_nian_fen_ from t_sjzphdjhylxqb a join (select c.*, d.ji_hua_nian_fen_ from t_cjwbzlpjhdjhxqb c join  t_cjwbzlpjhdjhb d on c.parent_id_ =  d.id_ WHERE d.shi_fou_guo_shen_='已完成') b on a.huo_dong_ming_che=b.huo_dong_ming_che and a.zu_zhi_dan_wei_ = b.zu_zhi_dan_wei_ and a.xu_hao_ = b.xu_hao_ and a.shi_yan_shi_jian_ = b.shi_yan_shi_jian_) e WHERE ji_hua_nian_fen_ in ${yearStr}  GROUP BY e.ji_hua_nian_fen_`
+            const sql3 = `select LEFT(bian_zhi_shi_jian, 4) as niandu, COALESCE(COUNT(*), 0) AS count from t_sysbdjlb bian_zhi_shi_jian where shi_fou_guo_shen_ = '已完成' and LEFT(bian_zhi_shi_jian, 4) IN ${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)
+            }
+            // console.log(this.data1, this.data2, this.data3)
+        }
+
+    }
+}
+</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: 40%;
+  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: 50%;
+  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>

src/views/InterLaboratory/interStatistics/topLeftChart.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ info.title || "" }}
+        </div>
+        <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div id="topLeftChart" style="width: 100%; height: 95%; overflow: hidden" />
+        </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: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    textStyle: {
+                        color: '#ffff',
+                        fontSize: 12
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: [],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        interval: 10,
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: '计划项目',
+                        type: 'bar',
+                        barWidth: '60%',
+                        data: []
+                    }
+                ]
+            }
+        }
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
+    },
+    methods: {
+        getMiddleLeft () {
+            this.option.xAxis[0].data = this.info.yearArr
+            this.option.series[0].data = this.info.numArr
+            const chartDom = document.getElementById(this.info.id)
+            var myChart = echarts.init(chartDom)
+            console.log(this.option)
+            setTimeout(() => {
+                myChart.setOption(this.option)
+            }, 500)
+        }
+    }
+}
+</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/topRightChart.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ info.title || "" }}
+        </div>
+        <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div id="topRightChart" style="width: 100%; height: 95%; overflow: hidden" />
+        </div>
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        }
+    },
+    data () {
+        return {
+            showChart: true,
+            option: {
+                legend: {
+                    textStyle: {
+                        color: '#ffff',
+                        fontSize: 12
+                    }
+                },
+                tooltip: {},
+                dataset: {
+                    source: [
+                        ['product', '2015', '2016', '2017'],
+                        ['Matcha Latte', 43.3, 85.8, 93.7],
+                        ['Milk Tea', 83.1, 73.4, 55.1],
+                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                        ['Walnut Brownie', 72.4, 53.9, 39.1]
+                    ]
+                },
+                xAxis: { type: 'category' },
+                yAxis: {},
+                // Declare several bar series, each will be mapped
+                // to a column of dataset.source by default.
+                series: [{ type: 'bar' }, { type: 'bar' }]
+            }
+
+        }
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
+    },
+    methods: {
+        getMiddleLeft () {
+            this.option.dataset.source = this.info.numArr
+            const chartDom = document.getElementById(this.info.id)
+            var myChart = echarts.init(chartDom)
+            setTimeout(() => {
+                myChart.setOption(this.option)
+            }, 500)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pieView {
+width: 100%;
+height: 100%;
+overflow: hidden;
+background-color: rgba(6, 30, 93, 0.5);
+}
+</style>

src/views/InterLaboratory/yearrange.vue

@@ -0,0 +1,124 @@
+
+<template>
+    <div class="year-range-picker">
+        <el-date-picker
+            v-model="yearValues[0]"
+            type="year"
+            placeholder="选择开始年"
+            :size="size"
+            class="year-picker"
+            format="yyyy"
+            :value-format="valueFormat"
+            :picker-options="startDatePicker"
+        />
+        <span class="range-word"> 至 </span>
+        <el-date-picker
+            v-model="yearValues[1]"
+            type="year"
+            placeholder="选择结束年"
+            :size="size"
+            class="year-picker"
+            :value-format="valueFormat"
+            :picker-options="endDatePicker"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'yearrange',
+    // 接收父组件传入的数据
+    props: {
+        yearValues: {
+            type: Array,
+            required: true
+        },
+        size: {
+            type: String, default: 'mini'
+        },
+        valueFormat: {
+            type: String, default: 'yyyy'
+        }
+    },
+    data () {
+        return {
+            dateList: [],
+            startDatePicker: this.beginDate(),
+            endDatePicker: this.processDate()
+        }
+    },
+    watch: {
+        yearValues (v) {
+            this.dateList = v || []
+        },
+        dateList (v) {
+            this.$emit('input', v)
+        }
+    },
+    mounted () {
+    },
+    methods: {
+    // 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
+
+        // 提出开始时间必须小于提出结束时间
+        beginDate () {
+            const self = this
+            return {
+                disabledDate (time) {
+                    if (self.dateList[1] !== '') {
+                        const fixedTime = new Date(time)
+                        return fixedTime.getFullYear() > self.dateList[1]
+                    }
+                }
+            }
+        },
+        // 提出结束时间必须大于提出开始时间
+        processDate () {
+            const self = this
+            return {
+                disabledDate (time) {
+                    // let fixedTime = new Date(self.oldTime).getTime()
+                    // return time.getTime() < fixedTime
+                    const fixedTime = new Date(time)
+                    return fixedTime.getFullYear() < self.dateList[0]
+                }
+            }
+        }
+
+    }
+}
+</script>
+
+<style scoped>
+.year-range-picker {
+  background: white !important;
+  color: black;
+  text-align: center;
+  border: 1px solid #dcdfe6;
+  border-radius:4px;
+  line-height: 25px;
+  overflow: hidden;
+  display: flex;
+  margin: 4px 0;
+}
+
+ .el-input__inner{
+  border: 0;
+  /*padding: 0;*/
+  line-height: 28px;
+  height: 28px;
+  margin:0;
+}
+
+.range-word {
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+.year-range-picker .year-picker {
+  max-width: 150px;
+  margin:0;
+}
+</style>
+