检测管理看板调整

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

@@ -4,23 +4,25 @@
             <!-- 头部内容 -->
             <div :class="$style.header">
                 <dv-decoration-8 :class="$style.left" />
-                <dv-decoration-5 :class="$style.center" />
+                <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>
-                    <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"
-                    />
+                    <!-- <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>
@@ -28,9 +30,9 @@
             </div>
             <dv-border-box-1>
                 <!-- topBar -->
-                <top-bar v-if="topBarData.length" :info="topBarData" />
+                <top-bar v-if="topBarData.length" :info="topBarData" :color="colors"/>
                 <!-- middleCard -->
-                <middle-card v-if="middleCardData.flag" :info="middleCardData" />
+                <middle-card v-if="middleCardData.flag" :info="middleCardData" :list="tableData"/>
                 <!-- bottomCard -->
                 <bottom-card v-if="bottomCardData.flag" :info="bottomCardData" />
             </dv-border-box-1>
@@ -40,7 +42,7 @@
 <script>
     import screenfull from 'screenfull'
     import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
-    import { acceptList } from './data.js'
+    import { colors, getRandomColor } from './data.js'
     export default {
         name: 'checkBoard',
         components: {
@@ -55,23 +57,23 @@
                 year: d.toJSON().slice(0, 4),
                 month: d.toJSON().slice(0, 7),
                 today: d.toJSON().slice(0, 10),
-                label: ['委托', '受理', '任务发放', '报告'],
+                colors: [],
                 topBarData: [],
+                tableData: {
+                    header: [
+                        '检测项目',
+                        '送检时间',
+                        '完成时间',
+                        // '状态',
+                        '检测员'
+                    ],
+                    data: [],
+                    rowNum: 7,
+                    // columnWidth: ['300','100','150','150','100']
+                    columnWidth: ['350','100','100','90'],
+                    waitTime: 1500
+                },
                 middleCardData: {
-                    tableData: {
-                        header: [
-                            '检测项目',
-                            '送检时间',
-                            '完成时间',
-                            // '状态',
-                            '检测员'
-                        ],
-                        data: [],
-                        rowNum: 7,
-                        // columnWidth: ['300','100','150','150','100']
-                        columnWidth: ['400','150','150','100'],
-                        waitTime: 1500
-                    },
                     acceptData:[],
                     taskData: [],
                     flag: false
@@ -95,15 +97,21 @@
                 this.allView()
             }
 
-            this.updateAll()
-
-            if (this.timer){
-                clearInterval(this.timer)
-            }
-
-            this.timer = setInterval(() => {
+            const sql = 'select lei_xing_ming_che from t_lhjclx'
+            curdPost('sql', sql).then(res => {
+                const { data = [] } = res.variables || {}
+                this.acceptList = data.map(i => i.lei_xing_ming_che)
                 this.updateAll()
-            },10 * 1000)
+    
+                if (this.timer){
+                    clearInterval(this.timer)
+                }
+                
+    
+                this.timer = setInterval(() => {
+                    this.updateAll()
+                }, 1000 * 30)
+            })
         },
         beforeDestroy() {
             if (screenfull.isFullscreen) {
@@ -120,6 +128,7 @@
                 this.$router.back(-1)
             },
             updateAll(e) {
+                this.colors = [...colors].sort(() => Math.random() - 0.5)
                 this.getTopBarData()
                 this.getMiddleData()
                 this.getBottomData()
@@ -137,7 +146,7 @@
                 // 获取委托数及受理数
                 const sql = `select wt.month as month, wt.accepted as accepted, wt2.today as today, wt2.week as week, wt2.quarter as quarter, 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(wei_tuo_zhuang_ta = '已结束' or null) as accepted from t_lhwtsqb where create_time_ LIKE '${this.month}%') wt,
+                (select count(id_) as month, count(wei_tuo_zhuang_ta = '已结束' or wei_tuo_zhuang_ta = '已完成' or null) as accepted from t_lhwtsqb 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 from t_lhwtsqb) wt2,
                 (select count(id_) as total, count(zhuang_tai_ = '已完成' or null) as finished from t_lhjczb where create_time_ LIKE '${this.month}%') jc,
                 (select count(id_) as task, count(zhuang_tai_ = '已完成' or null) as finished from t_lhrwfpb where create_time_ LIKE '${this.month}%') rw,
@@ -171,10 +180,11 @@
                                         value: today
                                     },
                                     {
-                                        label: '受理',
+                                        label: '本月受理',
                                         value: accepted
                                     }
-                                ]
+                                ],
+                                unit: '单'
                             },
                             {
                                 title: '任务分配',
@@ -191,7 +201,8 @@
                                         label: '未完成',
                                         value: task - rwFinish
                                     }
-                                ]
+                                ],
+                                unit: '件'
                             },
                             {
                                 title: '检测',
@@ -208,7 +219,8 @@
                                         label: '未完成',
                                         value: jcTotal - jcFinish
                                     }
-                                ]
+                                ],
+                                unit: '项'
                             },
                             {
                                 title: '报告',
@@ -229,7 +241,8 @@
                                         label: '待审核',
                                         value: process
                                     }
-                                ]
+                                ],
+                                unit: '份'
                             }
                         ]
                         
@@ -244,11 +257,11 @@
                 // 获取检测数据
                 // 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_, tm.jian_ce_lei_bie_, IFNULL(rwz.create_time_, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_lhrwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm, t_mjrwfpzb rwz where rwz.jian_ce_yuan_ = ipe.ID_ and rwz.jian_ce_xiang_mu_ = tm.id_ and rw.id_ = rwz.wai_jian_ and rw.create_time_ like '${this.month}%'`
-                const sql1 = `select tm.jian_ce_xiang_mu_, IFNULL(jc.wan_cheng_shi_jia, '') as wan_cheng_shi_jia, IFNULL(jc.fu_he_ri_qi_, '') as fu_he_ri_qi_, ipe.NAME_ from ibps_party_employee ipe, t_mjjcnlfw tm, t_lhjczb jc where jc.jian_ce_yuan_ = ipe.ID_ and jc.jian_ce_xiang_mu_ = tm.id_ and jc.zhuang_tai_ = '已完成' and jc.create_time_ like '${this.month}%' order by jc.create_time_ desc`
+                const sql1 = `select tm.jian_ce_xiang_mu_, IFNULL(jc.wan_cheng_shi_jia, '') as startDate, IFNULL(jc.fu_he_ri_qi_, '') as endDate, ipe.NAME_ as names from ibps_party_employee ipe, t_mjjcnlfw tm, t_lhjczb jc where jc.jian_ce_yuan_ = ipe.ID_ and jc.jian_ce_xiang_mu_ = tm.id_ and jc.zhuang_tai_ = '已完成' and jc.create_time_ like '${this.month}%' order by jc.create_time_ desc`
                 // 获取检测受理类型数据
                 let sqlStr = ''
-                acceptList.forEach((item, index) => {
-                    sqlStr += `count(tm.jian_ce_lei_bie_ = '${item}' or null) as r${index}${index === acceptList.length - 1 ? '' : ', '}`
+                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_lhjczb tj, t_mjjcnlfw tm where tj.jian_ce_xiang_mu_ = tm.id_ and tj.create_time_ like '${this.month}%'`
                 // console.log(sqlStr, sql2)
@@ -261,21 +274,29 @@
                     const data2 = res2.variables.data
                     // console.log(data1, data2)
 
-                    this.middleCardData.tableData.data = []
+                    this.tableData.data = []
                     data1.forEach(item => {
-                        this.middleCardData.tableData.data.push(Object.values(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])
-                    acceptList.forEach((item, index) => {
+                    this.acceptList.forEach((item, index) => {
                         let o = {
                             name: item,
                             value: tempRes[index] ? tempRes[index] : null
                         }
                         result.push(o)
                     })
-                    this.middleCardData.acceptData = result
+		            // 对数据进行排序
+                    result.sort((a, b) => b.value - a.value)
+                    // 根据排序后数据重新生成图例
+                    const newRes = result.slice(0, 12).map(i => i.name)
+                    this.middleCardData.config = this.getOptions(newRes)
+                    this.middleCardData.acceptData = result.slice(0, 12)
                     this.middleCardData.flag = true
                 }).catch(error => {
                     console.log(error)
@@ -298,10 +319,10 @@
                     curdPost('sql', sql4)
                 ]).then(([ res1, res2, res3, res4]) => {
                     this.bottomCardData.flag = false
-                    const data1 = res1.variables.data
-                    const data2 = res2.variables.data
-                    const data3 = res3.variables.data
-                    const data4 = res4.variables.data
+                    const data1 = res1.variables.data || []
+                    const data2 = res2.variables.data || []
+                    const data3 = res3.variables.data || []
+                    const data4 = res4.variables.data || []
                     // console.log(data1, data2, data3, data4)
 
                     let trust = new Array(12).fill(0)
@@ -351,10 +372,13 @@
             // 获取本周和本季度的开始和结束日期，以对象形式返回
             getDateRange(type) {
                 let current = new Date()
-                if (type !== 'week' && type !== 'quarter') {
+                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()
@@ -387,6 +411,33 @@
                     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
             }
         }
     }
@@ -473,8 +524,17 @@
             .time {
                 display: flex;
                 justify-content: flex-end;
-                width: 20%;
+                // width: 20%;
                 right: 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%;

src/views/system/jbdHome/board/component/middleCard.vue

@@ -21,7 +21,7 @@
                     :config="tableData"
                     style="width: 100%; height: 100%"
                 />
-                <div v-else :class="$style.no_data">本月暂无已完成的检测项目数据</div>
+                <div v-else :class="$style.no_data">当前月份暂无已完成的检测项目数据</div>
             </div>
         </div>
         <dv-decoration-10 :dur="15"/>
@@ -36,6 +36,10 @@
             info: {
                 type: Object,
                 default: {}
+            },
+            list: {
+                type: Object,
+                default: {}
             }
         },
         components: {},
@@ -45,6 +49,19 @@
                     this.init()
                 },
                 deep: true
+            },
+            list: {
+                handler(value) {
+                    console.log(value)
+                    if ((!this.tableData.data || (value.data.length !== this.tableData.data.length))) {
+                        if (this.tableData.data) {
+                            console.log(value.data.length, this.tableData.data.length)
+                        }
+                        this.tableData = JSON.parse(JSON.stringify(value))
+                    }
+                },
+                immediate: true,
+                deep: true
             }
         },
         data() {
@@ -65,8 +82,10 @@
                 
                 // 设置图表数据
                 acceptOption.series[0].data = this.info.acceptData
+                acceptOption.legend.data = this.info.config.option
+                acceptOption.color = this.info.config.colorList
                 taskOption.series[0].data = this.info.taskData
-                this.tableData = JSON.parse(JSON.stringify(this.info.tableData))
+                // this.tableData = JSON.parse(JSON.stringify(this.tableData))
 
                 //渲染
                 accept.setOption(acceptOption)
@@ -94,6 +113,11 @@
                 text-align: center;
                 margin-top: 20px;
             }
+            :global {
+                .header {
+                    background-color: #08153e !important;
+                }
+            }
         }
     }
     :global {

src/views/system/jbdHome/board/component/topBar.vue

@@ -27,54 +27,38 @@
     </div>
 </template>
 <script>
+    import { getRandomColor } from '../data.js'
     export default {
         name: 'topBar',
         props: {
             info: {
                 type: Array,
                 default: []
+            },
+            color: {
+                type: Array,
+                default: []
             }
         },
         components: {},
         watch: {
             info(v) {
-                console.log(v)
                 this.update()
             }
         },
         data() {
             return {
-                topBarData: [],
-                fontColor: [
-                    '#d20962',
-                    '#f47721',
-                    '#7ac143',
-                    '#00a78e',
-                    '#00bce4',
-                    '#7d3f98',
-                    '#037ef3',
-                    '#f85a40',
-                    '#00c16e',
-                    '#ffd900',
-                    '#0cb9c1',
-                    '#7552cc'
-                ]
+                topBarData: []
             }
         },
         created() {
             this.update()
         },
         methods: {
-            //随机颜色
-            getRandom(minNum, maxNum) {
-                if (arguments.length === 1) {
-                    return parseInt(Math.random() * minNum + 1, 10)
-                } else {
-                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
-                }
-            },
             // 数据更新
             update() {
+                const fontColor = [...this.color].sort(() => Math.random() - 0.5)
+                const colorGenerator = getRandomColor(fontColor)
                 this.info.forEach(item => {
                     item.children.forEach(i => {
                         i.data = {
@@ -82,11 +66,11 @@
                             content: '{nt}',
                             textAlign: 'right',
                             style: {
-                                fill: this.fontColor[this.getRandom(0, 11)],
+                                fill: colorGenerator.next().value,
                                 fontWeight: 'bold'
                             }
                         }
-                        i.unit = '件'
+                        i.unit = item.unit
                     })
                 })
                 this.topBarData = JSON.parse(JSON.stringify(this.info))
@@ -124,7 +108,7 @@
             }
             .title {
                 text-align: center;
-                font-size: 18px;
+                font-size: 20px;
                 font-weight: bold;
                 margin-bottom: 20px;
             }

src/views/system/jbdHome/board/data.js

@@ -39,6 +39,9 @@ export const acceptOption1 = {
         left: '50%',
         top: '20px'
     },
+    grid: {
+        top: '80px'
+    },
     xAxis: {
         type: 'category',
         data: ['理化', '微生物', '细胞活率', '残留检测', '细胞鉴别'],
@@ -125,30 +128,7 @@ export const acceptOption1 = {
     }
 }
 
-export const acceptList = [
-    '无菌检查',
-    '支原体检查',
-    '内毒素',
-    '细胞计数与活率',
-    '免疫评估',
-    '细胞标志蛋白检测',
-    '干细胞三项诱导分化',
-    '细胞外源病毒因子检测',
-    '干细胞生物学效力检测',
-    'CAR-T',
-    '残留物检测',
-    '干细胞成瘤性检测',
-    '干细胞的免疫学反应检测',
-    '核型分析',
-    '细胞形态',
-    '感染八项',
-    '衣原体检查',
-    '结核杆菌',
-    '新项目与方法',
-    '基础科研'
-]
-
-const colors = [
+export const colors = [
     '#d20962',
     '#f47721',
     '#7ac143',
@@ -158,30 +138,23 @@ const colors = [
     '#037ef3',
     '#f85a40',
     '#00c16e',
-    '#ffd900',
-    '#0cb9c1',
-    '#7552cc'
+    '#12CBC4',
+    '#b4a996',
+    '#7552cc',
+    '#67809f',
+    '#f19066'
 ]
 
-let colorList = []
-
-const getOptions = () => {
-    let res = []
-    colorList = []
-    acceptList.forEach(item => {
-        let random =  parseInt(Math.random() * 12)
-        let obj = {
-            name: item,
-            textStyle: {
-                color: colors[random]
-            }
-        }
-        res.push(obj)
-        colorList.push(colors[random])
-    })
-    return res
+export function* getRandomColor (shuffledColors) {
+    let index = 0
+    while (index < shuffledColors.length) {
+        yield shuffledColors[index]
+        index++
+    }
 }
 
+let colorList = []
+
 export const acceptOption = {
     title: {
         show: true,
@@ -202,12 +175,18 @@ export const acceptOption = {
         // left: 'center',
         // bottom: 10,
         right: 10,
-        top: 50,
+        formatter (params) {
+            let l = 7
+            if (params.length > l) {
+                return params.substring(0, l) + '\n' + params.substring(l)
+            }
+            return params
+        },
         z: 3,
         itemWidth: 25,
         itemHeight: 14,
         itemGap: 10,
-        data: getOptions()
+        data: []
     },
     series: [
         {
@@ -373,6 +352,9 @@ export const trustOption = {
         left: '50%',
         top: '20px'
     },
+    grid: {
+        top: '80px'
+    },
     xAxis: {
         type: 'category',
         data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
@@ -493,6 +475,9 @@ export const sampleOption = {
         left: '50%',
         top: '20px'
     },
+    grid: {
+        top: '80px'
+    },
     xAxis: {
         type: 'category',
         data: ['已委托未收样', '已收样', '已收不合格', '留样'],
@@ -590,6 +575,9 @@ export const monthOption = {
         left: '50%',
         top: '20px'
     },
+    grid: {
+        top: '80px'
+    },
     xAxis: {
         type: 'category',
         data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],