mj_firm_former/src/views/system/jbdHome/board/checkBoard.vue

<template>
    <div :class="$style.content">
        <dv-full-screen-container>
            <!-- 头部内容 -->
            <div :class="$style.header">
                <dv-decoration-8 :class="$style.left" />
                <dv-decoration-5 :class="$style.center" :dur="5"/>
                <dv-decoration-8 :class="$style.right" :reverse="true" />
                <div :class="$style.title">{{ titleName }}</div>
                <div :class="$style.time">
                    <!-- <span>月份：</span> -->
                    <dv-border-box-8>
                        <el-date-picker
                            v-model="month"
                            type="month"
                            value-format="yyyy-MM"
                            format="yyyy-MM"
                            placeholder="日期选择"
                            style="width: 120px"
                            :readonly="false"
                            :editable="true"
                            :clearable="false"
                            @change="updateAll"
                        />
                    </dv-border-box-8>
                </div>
                <!-- <div :class="$style.back" @click.prevent="goBack()">
                    <dv-border-box-8>返回</dv-border-box-8>
                </div> -->
            </div>
            <dv-border-box-1>
                <!-- topBar -->
                <top-bar v-if="topBarData.length" :info="topBarData" :color="colors"/>
                <!-- middleCard -->
                <middle-card v-if="middleCardData.flag" :info="middleCardData" :list="tableData"/>
                <!-- bottomCard -->
                <bottom-card v-if="bottomCardData.flag" :info="bottomCardData" />
            </dv-border-box-1>
        </dv-full-screen-container>
    </div>
</template>
<script>
    import screenfull from 'screenfull'
    import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
    import { colors, getRandomColor } from './data.js'
    export default {
        name: 'checkBoard',
        components: {
            topBar: () => import('./component/testing/topBar'),
            middleCard: () => import('./component/testing/middleCard'),
            bottomCard: () => import('./component/testing/bottomCard')
        },
        data() {
            const d = new Date()
            return {
                titleName: '检测大数据平台',
                year: d.toJSON().slice(0, 4),
                month: d.toJSON().slice(0, 7),
                today: d.toJSON().slice(0, 10),
                colors: [],
                topBarData: [],
                tableData: {
                    header: [
                        '检测项目',
                        // '检测类型',
                        '送检时间',
                        '完成时间',
                        '检测员'
                    ],
                    data: [],
                    rowNum: 7,
                    columnWidth: ['350','100','100','90'],
		            waitTime: 1500
                },
                middleCardData: {
                    acceptData:[],
                    taskData: [],
                    flag: false
                },
                bottomCardData: {
                    flag: false
                },
                timer: null
            }
        },
        // beforeRouteEnter(to, from, next){
        //     Promise.all([  ]).done(([ res ]) => {
        //         console.log(res)
        //     }).then(err => {
        //         window.observer.trigger('error', err)
        //         next()
        //     })
        // },
        created() {
            if (screenfull.isEnabled && !screenfull.isFullscreen) {
                this.allView()
            }

            const sql = 'select lei_xing_ming_che from t_mjjclx'
            curdPost('sql', sql).then(res => {
                const { data = [] } = res.variables || {}
                this.acceptList = data.map(i => i.lei_xing_ming_che)
                this.updateAll()
    
                if (this.timer){
                    clearInterval(this.timer)
                }
                
    
                this.timer = setInterval(() => {
                    this.updateAll()
                }, 1000 * 10)
            })
        },
        beforeDestroy() {
            if (screenfull.isFullscreen) {
                screenfull.toggle()
            }
            clearInterval(this.timer)
        },
        methods: {
            allView() {
                // 默认显示全屏
                screenfull.request()
            },
            goBack() {
                this.$router.back(-1)
            },
            updateAll(e) {
                this.colors = [...colors].sort(() => Math.random() - 0.5)
                this.getTopBarData()
                this.getMiddleData()
                this.getBottomData()
            },
            // 获取topBar数据
            /**
             *  委托——t_mjwtsqb
             *  检测——t_jchzb
             *  任务——t_rwfpb
             *  报告——t_mjjcbg
             */
            getTopBarData() {
                let quarter = this.getDateRange('quarter')
                let week = this.getDateRange('week')
                // 获取委托数及受理数
                const sql = `select wt.month as month, wt.accepted as accepted, wt2.today as today, wt2.week as week, wt2.quarter as quarter, wt2.year as year, jc.total as jcTotal, jc.finished as jcFinish, rw.task as task, rw.finished as rwFinish, bg.report as report, bg.process as process, bg.approval as approval, bg.finished as bgFinish
                from
                (select count(id_) as month, count(zhuang_tai_ = '委托结束' or zhuang_tai_ = '已完成' or null) as accepted from t_mjwtsqb where create_time_ LIKE '${this.month}%') wt,
                (select count(create_time_ like '${this.today}' or null) as today, count(create_time_ between '${week.start}' and '${week.end}' or null) as week, count(create_time_ between '${quarter.start}' and '${quarter.end}' or null) as quarter, count(create_time_ like '${this.year}%' or null) as year from t_mjwtsqb) wt2,
                (select count(id_) as total, count(jian_ce_zhuang_ta = '已完成' or null) as finished from t_jchzb where create_time_ LIKE '${this.month}%') jc,
                (select count(id_) as task, count(zhuang_tai_ = '已完成' or null) as finished from t_rwfpb where create_time_ LIKE '${this.month}%') rw,
                (select count(id_) as report, count(zhuang_tai_ = '报告待审核' or null) as process, count(zhuang_tai_ = '报告待审批' or null) as approval, count(zhuang_tai_ = '完成' or null) as finished from t_mjjcbg where create_time_ LIKE '${this.month}%') bg`
                // console.log(sql)
                curdPost('sql', sql).then(res => {
                    const data = res.variables.data
                    // console.log(data)
                    if ( data && data.length ) {
                        const { month, accepted, approval, jcFinish, jcTotal, process, report, rwFinish, task, today, week, quarter, year, bgFinish } = data[0]
                        this.middleCardData.taskData = [month, jcTotal, task, report]
                        let result = [
                            // {
                            //     title: '委托',
                            //     children: [
                            //         {
                            //             label: '年度',
                            //             value: year
                            //         },
                            //         {
                            //             label: '月度',
                            //             value: month
                            //         },
                            //         {
                            //             label: '本周',
                            //             value: week
                            //         },
                            //         {
                            //             label: '本日',
                            //             value: today
                            //         },
                            //         {
                            //             label: '本月受理',
                            //             value: accepted
                            //         }
                            //     ],
                            //     unit: '单'
                            // },
                            {
                                title: '样品分配',
                                children: [
                                    {
                                        label: '总数',
                                        value: task
                                    },
                                    {
                                        label: '未完成',
                                        value: task - rwFinish
                                    },
                                    {
                                        label: '已完成',
                                        value: rwFinish
                                    }
                                ],
                                unit: '件'
                            },
                            {
                                title: '检测',
                                children: [
                                    {
                                        label: '总数',
                                        value: jcTotal
                                    },
                                    {
                                        label: '未完成',
                                        value: jcTotal - jcFinish
                                    },
                                    {
                                        label: '已完成',
                                        value: jcFinish
                                    }
                                ],
                                unit: '项'
                            },
                            {
                                title: '报告',
                                children: [
                                    {
                                        label: '总数',
                                        value: report
                                    },
                                    {
                                        label: '待审核',
                                        value: process
                                    },
                                    {
                                        label: '待审批',
                                        value: approval
                                    },
                                    {
                                        label: '已发放',
                                        value: bgFinish
                                    }
                                ],
                                unit: '份'
                            }
                        ]
                        this.topBarData = result
                    }
                })
            },
            // 获取中间图表数据
            getMiddleData() {
                // 获取检测数据
                // const sql1 = `select tm.jian_ce_xiang_mu_, tm.jian_ce_lei_bie_, IFNULL(rw.qi_wang_wan_cheng, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_rwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm where rw.jian_ce_yuan_ = ipe.ID_ and rw.jian_ce_xiang_mu_ = tm.id_ and rw.create_time_ like '${this.month}%'`
                const sql1 = `select tm.jian_ce_xiang_mu_, IFNULL(jc.jian_ce_shi_jian_, '') as startDate, IFNULL(jc.update_time_, '') as endDate, ipe.NAME_ as names from ibps_party_employee ipe, t_mjjcnlfw tm, t_jchzb jc where jc.jian_ce_yuan_ = ipe.ID_ and jc.jian_ce_xiang_mu_ = tm.id_ and jc.jian_ce_zhuang_ta = '已完成' and jc.jian_ce_shi_jian_ like '${this.month}%' order by jc.jian_ce_shi_jian_ desc`
                // 获取检测受理类型数据
                let sqlStr = ''
                this.acceptList.forEach((item, index) => {
                    sqlStr += `count(tm.jian_ce_lei_bie_ = '${item}' or null) as r${index}${index === this.acceptList.length - 1 ? '' : ', '}`
                })
                const sql2 = `select ${sqlStr} from t_jchzb tj, t_mjjcnlfw tm where tj.jian_ce_xiang_mu_ = tm.id_ and tj.create_time_ like '${this.month}%'`
                // console.log(sqlStr, sql2)
                // 获取检测月度年度任务完成情况数据
                const sql3 = `select rw.zhuang_tai_ as state, DATE_FORMAT(rw.create_time_, '%Y-%m-%d %H:%i:%s') as time from t_rwfpb rw where rw.create_time_ like '${this.year}%'`

                Promise.all([
                    curdPost('sql', sql1),
                    curdPost('sql', sql2),
                    curdPost('sql', sql3)
                ]).then(([res1, res2, res3]) => {
                    const data1 = res1.variables.data || []
                    const data2 = res2.variables.data || []
                    const data3 = res3.variables.data || []
                    // console.log(data1, data2)

                    this.tableData.data = []
                    data1.forEach(item => {
                        item.startDate = item.startDate ? item.startDate.slice(0, 10) : ''
                        item.endDate = item.endDate ? item.endDate.slice(0, 10) : ''
                        item.names = item.names ? this.replaceSecondLetter(item.names) : ''
                        this.tableData.data.push(Object.values(item))
                    })

                    let result = []
                    let tempRes = Object.values(data2[0])
                    this.acceptList.forEach((item, index) => {
                        let o = {
                            name: item,
                            value: tempRes[index] ? tempRes[index] : null
                        }
                        result.push(o)
                    })
                    // 对数据进行排序
                    result.sort((a, b) => b.value - a.value)
                    // 根据排序后数据重新生成图例
                    const newRes = result.slice(0, 6).map(i => i.name)

                    let task = new Array(12).fill(0)
                    let complete = new Array(12).fill(0)
                    data3.forEach(item => {
                        const index = parseInt(item.time.slice(5,7)) - 1
                        if (item.state === '已完成') {
                            complete[index]++
                        }
                        task[index]++
                    })
                    let taskCount = task.reduce((pre, cur) => pre + cur)
                    let completeCount = complete.reduce((pre, cur) => pre + cur)
                    let year = [
                        {
                            name: '未完成',
                            value: taskCount - completeCount
                        },
                        {
                            name: '已完成',
                            value: completeCount
                        }
                    ]
                    this.middleCardData.acceptData = result.slice(0, 6)
                    this.middleCardData.config = this.getOptions(newRes)
                    this.middleCardData.task = task
                    this.middleCardData.complete = complete
                    this.middleCardData.year = year
                    this.middleCardData.flag = true
                })
            },
            // 获取底部图表数据
            getBottomData() {
                // 获取检测委托受理情况数据
                const sql1 = `select tm.zhuang_tai_ as state, DATE_FORMAT(tm.create_time_, '%Y-%m-%d %H:%i:%s') as time from t_mjwtsqb tm where tm.create_time_ like '${this.year}%'`
                // 获取报告发放数据
                const sql2 = `select zhuang_tai_ as state, DATE_FORMAT(create_time_, '%Y-%m-%d %H:%i:%s') as time from t_mjjcbg where create_time_ LIKE '${this.year}%'`
                // 获取样品 收样/留样/不合格数量
                const sql4 = `select count(a.id_) as receive, count(a.shi_fou_liu_yang_ = '是' or null) as keep, count(a.yan_shou_zhuang_t = '残缺' or null) as incomplete, count(a.jie_yang_zhuang_t = '待确认' or null) as unReceive from (select id_, shi_fou_liu_yang_, yan_shou_zhuang_t, jie_yang_zhuang_t from t_mjypdjb where create_time_ like '${this.month}%' group by yang_pin_bian_hao) as a`
                const sql5 = `select count( CASE WHEN jie_yang_zhuang_t != '已确认' THEN 1 END ) AS unReceive FROM 	t_mjypb WHERE create_time_ LIKE '${this.month}%'`
                Promise.all([
                    curdPost('sql', sql1),
                    curdPost('sql', sql2),
                    curdPost('sql', sql4),
                    curdPost('sql',sql5)
                ]).then(([ res1, res2, res4,res5]) => {
                    this.bottomCardData.flag = false
                    const data1 = res1.variables && res1.variables.data
                    const data2 = res2.variables && res2.variables.data
                    const data4 = res4.variables && res4.variables.data
                    const data5 = res5.variables && res5.variables.data
                    // console.log(data1, data2, data3, data4,data5)

                    let trust = new Array(12).fill(0)
                    let accepted = new Array(12).fill(0)
                    let reports = new Array(12).fill(0)
                    let compile = new Array(12).fill(0)
                    // let task = new Array(12).fill(0)
                    // let complete = new Array(12).fill(0)
                    data1.forEach(item => {
                        const index = parseInt(item.time.slice(5,7)) - 1
                        if (item.state === '委托结束' || item.state === '已完成') {
                            accepted[index]++
                        }
                        trust[index]++
                    })
                    data2.forEach(item => {
                        const index = parseInt(item.time.slice(5,7)) - 1
                        if (item.state && item.state.includes('完成')) {
                            reports[index]++
                        }
                        compile[index]++
                    })
                    // let taskCount = task.reduce((pre, cur) => pre + cur)
                    // let completeCount = complete.reduce((pre, cur) => pre + cur)
                    // let year = [
                    //     {
                    //         name: '未完成',
                    //         value: taskCount - completeCount
                    //     },
                    //     {
                    //         name: '已完成',
                    //         value: completeCount
                    //     }
                    // ]
                    let sample = [data5[0].unReceive, data4[0].receive, data4[0].incomplete, data4[0].keep]
                    this.bottomCardData.trust = trust
                    this.bottomCardData.accepted = accepted
                    this.bottomCardData.reports = reports
                    this.bottomCardData.compile = compile
                    // this.bottomCardData.task = task
                    // this.bottomCardData.complete = complete
                    // this.bottomCardData.year = year
                    this.bottomCardData.sample = sample
                    this.bottomCardData.flag = true
                    // console.log(this.bottomCardData)
                })
            },
            // 获取本周和本季度的开始和结束日期，以对象形式返回
            getDateRange(type) {
                let current = new Date()
                if (!['year', 'quarter', 'week'].includes(type)) {
                    console.log('type is error')
                    return
                }
                if (type === 'year') { 
                    return current.getFullYear()
                }
                if (type === 'quarter') {
                    let year = current.getFullYear()
                    let month = current.getMonth()
                    const dateList = [
                        {
                            start: `${year}-01-01`,
                            end: `${year}-03-31`
                        },
                        {
                            start: `${year}-04-01`,
                            end: `${year}-06-31`
                        },
                        {
                            start: `${year}-07-01`,
                            end: `${year}-09-31`
                        },
                        {
                            start: `${year}-10-01`,
                            end: `${year}-12-31`
                        }
                    ]
                    let quarter = dateList[parseInt(month / 3)]
                    return quarter
                }
                if (type === 'week') {
                    let week = {}
                    let currentWeek = current.getDay() === 0 ? 7 : current.getDay()
                    let temp = new Date(current - (currentWeek - 1) * 86400000)
                    week.start = new Date(current - (currentWeek - 1) * 86400000).toJSON().slice(0, 10)
                    week.end = new Date((temp / 1000 + 6 * 86400) * 1000).toJSON().slice(0, 10)
                    return week
                }
            },
            // 隐藏人员名字
            replaceSecondLetter (name) {
                if (!name || name.length < 2) {
                    return name
                }
                const [firstLetter, secondLetter, ...rest] = name
                return `${firstLetter}*${rest.join('')}`
            },
            getOptions (data) {
                let res = {
                    option: [],
                    colorList: []
                }
                const colorGenerator = getRandomColor(this.colors)
                data.forEach(item => {
                    let color = colorGenerator.next().value
                    let obj = {
                        name: item,
                        textStyle: {
                            color
                        }
                    }
                    res.option.push(obj)
                    res.colorList.push(color)
                })
                return res
            }
        }
    }
</script>
<style lang="scss" module>
    .content {
        width: 100%;
        height: 100%;
        background-color: #030409;
        position: absolute;
        color: #fff;
        z-index: 999;
        :global {
            #dv-full-screen-container {
                background-image: url('./img/bg.png');
                background-size: 100% 100%;
                box-shadow: 0 0 3px blue;
                display: flex;
                flex-direction: column;
            }
            .main-content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .block-left-right-content {
                flex: 1;
                display: flex;
                margin-top: 0.8%;
            }

            .block-top-bottom-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                padding-left: 0.8%;
            }

            .block-top-content {
                height: 55%;
                display: flex;
                flex-grow: 0;
                box-sizing: border-box;
                padding-bottom: 0.8%;
            }
        }
        .header {
            position: relative;
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            flex-shrink: 0;
            .left, .right {
                width: 25%;
                height: 60px;
            }
            .center {
                width: 40%;
                height: 60px;
                margin-top: 30px;
            }
            .title {
                position: absolute;
                font-size: 30px;
                font-weight: bold;
                left: 50%;
                top: 15px;
                transform: translateX(-50%);
            }
            .time, .back {
                width: 8%;
                cursor: pointer;
                height: 2.825rem;
                line-height: 2.825rem;
                text-align: center;
                margin-top: 2.5%;
                flex: 1;
                position: absolute;
                color: #ffffff;
            }
            .time {
                display: flex;
                // justify-content: flex-end;
                // width: 20%;
                left: 75%;
                :global {
                    .el-input--small .el-input__inner {
                        width: 100% !important;
                        background: rgba(255, 255, 255, 0);
                        border: none;
                        color: #fff;
                        font-size: 16px;
                    }
                }
            }
            .back {
                left: 75%;
            }
        }
    }
</style>