检测看板全局调整

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

@@ -4,31 +4,33 @@
             <!-- 头部内容 -->
             <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()">
+                <!-- <div :class="$style.back" @click.prevent="goBack()">
                     <dv-border-box-8>返回</dv-border-box-8>
-                </div>
+                </div> -->
             </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" />
                 <!-- bottomCard -->
@@ -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 { acceptList, colors, getRandomColor } from './data.js'
     export default {
         name: 'checkBoard',
         components: {
@@ -51,24 +53,24 @@
         data() {
             const d = new Date()
             return {
-                titleName: '检测综合信息查询',
+                titleName: '检测大数据平台',
                 year: d.toJSON().slice(0, 4),
                 month: d.toJSON().slice(0, 7),
                 today: d.toJSON().slice(0, 10),
-                label: ['委托', '受理', '任务发放', '报告'],
+                colors: [],
                 topBarData: [],
                 middleCardData: {
                     tableData: {
                         header: [
                             '检测项目',
-                            '检测类型',
-                            '计划完成时间',
-                            '当前状态',
-                            '人员'
+                            // '检测类型',
+                            '送检时间',
+                            '完成时间',
+                            '检测员'
                         ],
                         data: [],
                         rowNum: 7,
-                        columnWidth: ['300','100','150','150','100']
+                        columnWidth: ['350','100','100','90']
                     },
                     acceptData:[],
                     taskData: [],
@@ -101,7 +103,7 @@
 
             this.timer = setInterval(() => {
                 this.updateAll()
-            }, 1000 * 60)
+            }, 1000 * 10)
         },
         beforeDestroy() {
             if (screenfull.isFullscreen) {
@@ -118,6 +120,7 @@
                 this.$router.back(-1)
             },
             updateAll(e) {
+                this.colors = [...colors].sort(() => Math.random() - 0.5)
                 this.getTopBarData()
                 this.getMiddleData()
                 this.getBottomData()
@@ -133,28 +136,27 @@
                 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, 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
+                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 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 from t_mjwtsqb) wt2,
+                (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 zhuang_tai_ = '待发放' or null) as finished from t_mjjcbg where create_time_ LIKE '${this.month}%') bg`
+                (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, bgFinish } = data[0]
+                        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: quarter
+                                        label: '年度',
+                                        value: year
                                     },
                                     {
                                         label: '月度',
@@ -169,27 +171,29 @@
                                         value: today
                                     },
                                     {
-                                        label: '受理',
+                                        label: '本月受理',
                                         value: accepted
                                     }
-                                ]
+                                ],
+                                unit: '单'
                             },
                             {
-                                title: '任务分配',
+                                title: '样品分配',
                                 children: [
                                     {
                                         label: '总数',
                                         value: task
                                     },
-                                    {
-                                        label: '已完成',
-                                        value: rwFinish
-                                    },
                                     {
                                         label: '未完成',
                                         value: task - rwFinish
+                                    },
+                                    {
+                                        label: '已完成',
+                                        value: rwFinish
                                     }
-                                ]
+                                ],
+                                unit: '件'
                             },
                             {
                                 title: '检测',
@@ -198,15 +202,16 @@
                                         label: '总数',
                                         value: jcTotal
                                     },
-                                    {
-                                        label: '已完成',
-                                        value: jcFinish
-                                    },
                                     {
                                         label: '未完成',
                                         value: jcTotal - jcFinish
+                                    },
+                                    {
+                                        label: '已完成',
+                                        value: jcFinish
                                     }
-                                ]
+                                ],
+                                unit: '项'
                             },
                             {
                                 title: '报告',
@@ -216,32 +221,30 @@
                                         value: report
                                     },
                                     {
-                                        label: '已完成',
-                                        value: bgFinish
+                                        label: '待审核',
+                                        value: process
                                     },
                                     {
                                         label: '待审批',
                                         value: approval
                                     },
                                     {
-                                        label: '待审核',
-                                        value: process
+                                        label: '已发放',
+                                        value: bgFinish
                                     }
-                                ]
+                                ],
+                                unit: '份'
                             }
                         ]
-                        
                         this.topBarData = result
                     }
-                }).catch(error => {
-                    console.log(error)
                 })
             },
             // 获取中间图表数据
             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_, tm.jian_ce_lei_bie_, IFNULL(rwz.wan_cheng_shi_jia, '') as qi_wang_wan_cheng, rw.zhuang_tai_, ipe.NAME_ from t_rwfpb rw, ibps_party_employee ipe, t_mjjcnlfw tm, t_mjrwfpzb rwz where rwz.jian_ce_yuan_ = ipe.ID_ and rwz.ren_wu_bian_hao_ = 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.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.create_time_ like '${this.month}%' order by jc.create_time_ desc`
                 // 获取检测受理类型数据
                 let sqlStr = ''
                 acceptList.forEach((item, index) => {
@@ -249,17 +252,24 @@
                 })
                 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)
-                ]).then(([res1, res2]) => {
-                    const data1 = res1.variables.data
-                    const data2 = res2.variables.data
+                    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.middleCardData.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.middleCardData.tableData.data.push(Object.values(item))
                     })
 
@@ -272,86 +282,110 @@
                         }
                         result.push(o)
                     })
-                    this.middleCardData.acceptData = result
+                    // 对数据进行排序
+                    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
-                }).catch(error => {
-                    console.log(error)
                 })
             },
             // 获取底部图表数据
             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 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}%'`
                 // 获取已委托样品数量
                 const sql3 = `select count(yp.id_) as unReceive from t_mjypb yp, t_mjwtsqb wt where yp.wai_jian_ = wt.id_ and yp.create_time_ like '${this.month}%'`
                 // 获取样品 收样/留样/不合格数量
                 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 from (select id_, shi_fou_liu_yang_, yan_shou_zhuang_t from t_mjypdjb where create_time_ like '${this.month}%' group by yang_pin_bian_hao) as a`
                 Promise.all([
                     curdPost('sql', sql1),
-                    curdPost('sql', sql2),
                     curdPost('sql', sql3),
                     curdPost('sql', sql4),
-                ]).then(([ res1, res2, res3, res4]) => {
+                ]).then(([ res1, 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
                     // console.log(data1, data2, data3, data4)
 
                     let trust = new Array(12).fill(0)
                     let accepted = new Array(12).fill(0)
-                    let task = new Array(12).fill(0)
-                    let complete = 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 === '委托结束') {
+                        if (item.state === '委托结束' || item.state === '已完成') {
                             accepted[index]++
                         }
                         trust[index]++
                     })
-                    data2.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
-                        }
-                    ]
+                    // data2.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
+                    //     }
+                    // ]
                     let sample = [data3[0].unReceive - data4[0].receive, data4[0].receive, data4[0].incomplete, data4[0].keep]
                     this.bottomCardData.trust = trust
                     this.bottomCardData.accepted = accepted
-                    this.bottomCardData.task = task
-                    this.bottomCardData.complete = complete
-                    this.bottomCardData.year = year
+                    // this.bottomCardData.task = task
+                    // this.bottomCardData.complete = complete
+                    // this.bottomCardData.year = year
                     this.bottomCardData.sample = sample
                     this.bottomCardData.flag = true
-
                     // console.log(this.bottomCardData)
-                }).catch(error => {
-                    console.log(error)
                 })
             },
             // 获取本周和本季度的开始和结束日期，以对象形式返回
             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()
@@ -384,6 +418,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
             }
         }
     }
@@ -469,9 +530,17 @@
             }
             .time {
                 display: flex;
-                justify-content: flex-end;
-                width: 20%;
-                right: 75%;
+                // 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;
+                    }
+                }
             }
             .back {
                 left: 75%;

src/views/system/jbdHome/board/component/testing/bottomCard.vue

@@ -16,19 +16,26 @@
                 <div id="sample"></div>
             </div>
             <dv-decoration-2 :reverse="true" :dur="6" style="width:5px;height:100%;" />
-            <div :class="$style.item">
+            <!-- <div :class="$style.item">
                 <div id="month"></div>
             </div>
             <dv-decoration-2 :reverse="true" :dur="8" style="width:5px;height:100%;" />
             <div :class="$style.item">
                 <div id="year"></div>
+            </div> -->
+            <div :class="$style.item">
+                <div id="satisfied"></div>
+            </div>
+            <dv-decoration-2 :reverse="true" :dur="8" style="width:5px;height:100%;" />
+            <div :class="$style.item">
+                <div id="observe"></div>
             </div>
         </div>
     </div>
 </template>
 <script>
     import echarts from 'echarts'
-    import { trustOption, sampleOption, monthOption, yearOption } from '../../data'
+    import { trustOption, sampleOption, monthOption, yearOption, satisfaction, contract } from '../../data'
     export default {
         name: 'topBar',
         props: {
@@ -59,22 +66,22 @@
             init() {
                 const trust = echarts.init(document.getElementById('trust'))
                 const sample = echarts.init(document.getElementById('sample'))
-                const month = echarts.init(document.getElementById('month'))
-                const year = echarts.init(document.getElementById('year'))
+                const satisfied = echarts.init(document.getElementById('satisfied'))
+                const observe = echarts.init(document.getElementById('observe'))
 
                 // 设置图表数据
                 trustOption.series[0].data = this.info.trust
                 trustOption.series[1].data = this.info.accepted
-                monthOption.series[0].data = this.info.task
-                monthOption.series[1].data = this.info.complete
                 sampleOption.series[0].data = this.info.sample
-                yearOption.series[0].data = this.info.year
+                // monthOption.series[0].data = this.info.task
+                // monthOption.series[1].data = this.info.complete
+                // yearOption.series[0].data = this.info.year
 
                 // 渲染
                 trust.setOption(trustOption)
                 sample.setOption(sampleOption)
-                month.setOption(monthOption)
-                year.setOption(yearOption)
+                satisfied.setOption(satisfaction)
+                observe.setOption(contract)
             }
         }
     }

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

@@ -8,11 +8,11 @@
                 <div id="accept" style="width: 100%; height: 100%"></div>
             </div>
             <dv-decoration-2 :reverse="true" style="width:5px;height:100%;" />
-            <div :class="$style.item">
-                <!-- <div :class="$style.title">
-                    <span>检测任务情况</span>
-                </div> -->
+            <!-- <div :class="$style.item">
                 <div id="task" style="min-width: 300px; height: 100%"></div>
+            </div> -->
+            <div :class="$style.item">
+                <div id="month" style="min-width: 300px; height: 100%"></div>
             </div>
             <dv-decoration-2 :reverse="true" :dur="10" style="width:5px;height:100%;" />
             <div :class="$style.item">
@@ -29,7 +29,7 @@
 </template>
 <script>
     import echarts from 'echarts'
-    import { acceptOption, taskOption } from '../../data'
+    import { acceptOption, monthOption, taskOption } from '../../data'
     export default {
         name: 'topBar',
         props: {
@@ -61,16 +61,22 @@
         methods: {
             init() {
                 const accept = echarts.init(document.getElementById('accept'))
-                const task = echarts.init(document.getElementById('task'))
+                const month = echarts.init(document.getElementById('month'))
+                // const task = echarts.init(document.getElementById('task'))
                 
                 // 设置图表数据
                 acceptOption.series[0].data = this.info.acceptData
-                taskOption.series[0].data = this.info.taskData
+                acceptOption.legend.data = this.info.config.option
+                acceptOption.color = this.info.config.colorList
+                monthOption.series[0].data = this.info.task
+                monthOption.series[1].data = this.info.complete
+                // taskOption.series[0].data = this.info.taskData
                 this.tableData = JSON.parse(JSON.stringify(this.info.tableData))
 
                 //渲染
                 accept.setOption(acceptOption)
-                task.setOption(taskOption)
+                month.setOption(monthOption)
+                // task.setOption(taskOption)
             }
         }
     }
@@ -94,6 +100,11 @@
                 text-align: center;
                 margin-top: 20px;
             }
+            :global {
+                .header {
+                    background-color: #08153e !important;
+                }
+            }
         }
     }
     :global {

src/views/system/jbdHome/board/component/testing/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))

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

@@ -138,7 +138,7 @@ export const acceptList = [
     '其他检测'
 ]
 
-const colors = [
+export const colors = [
     '#d20962',
     '#f47721',
     '#7ac143',
@@ -148,11 +148,21 @@ const colors = [
     '#037ef3',
     '#f85a40',
     '#00c16e',
-    '#ffd900',
-    '#0cb9c1',
-    '#7552cc'
+    '#12CBC4',
+    '#b4a996',
+    '#7552cc',
+    '#67809f',
+    '#f19066'
 ]
 
+export function* getRandomColor (shuffledColors) {
+    let index = 0
+    while (index < shuffledColors.length) {
+        yield shuffledColors[index]
+        index++
+    }
+}
+
 let colorList = []
 
 const getOptions = () => {
@@ -160,14 +170,15 @@ const getOptions = () => {
     colorList = []
     acceptList.forEach(item => {
         let random =  parseInt(Math.random() * 12)
+        let color = colors[random]
         let obj = {
             name: item,
             textStyle: {
-                color: colors[random]
+                color
             }
         }
         res.push(obj)
-        colorList.push(colors[random])
+        colorList.push(color)
     })
     return res
 }
@@ -193,28 +204,35 @@ export const acceptOption = {
         // bottom: 10,
         right: 10,
         top: 50,
-        formatter: ['{a|{name}}'].join('\n'),
-        textStyle: {
-            rich: {
-                a: {
-                    width: 80,
-                    overflow: 'break',
-                    lineHeight: 12
-                }
-            }
-        },
+        formatter (params) {
+            let l = 7
+            if (params.length > l) {
+                return params.substring(0, l) + '\n' + params.substring(l)
+            }
+            return params
+        },
+        // formatter: ['{a|{name}}'].join('\n'),
+        // textStyle: {
+        //     rich: {
+        //         a: {
+        //             width: 80,
+        //             overflow: 'break',
+        //             lineHeight: 12
+        //         }
+        //     }
+        // },
         z: 3,
         itemWidth: 25,
         itemHeight: 14,
         itemGap: 10,
-        data: getOptions()
+        data: []
     },
     series: [
         {
             name: '任务完成情况',
             type: 'pie',
             radius: '55%',
-            center: ['35%', '50%'],
+            center: ['45%', '60%'],
             data: [],
             itemStyle: {
                 emphasis: {
@@ -797,4 +815,167 @@ export const yearOption = {
         trigger: 'item',
         formatter: '任务情况<br/>{b}：{c}<br/>占比：{d}%'
     }
+}
+
+// 假数据
+export const satisfaction = {
+    title: {
+        show: true,
+        text: '客户满意度',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    legend: {
+        orient: 'horizontal',
+        show: true,
+        left: 'center',
+        bottom: 10,
+        z: 3,
+        itemWidth: 25,
+        itemHeight: 14,
+        itemGap: 10,
+        data: [
+            {
+                name: '不满意',
+                textStyle: {
+                    color: '#d20962'
+                }
+            },
+            {
+                name: '满意',
+                textStyle: {
+                    color: '#00a78e'
+                }
+            }
+        ]
+    },
+    series: [
+        {
+            name: '满意度占比',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '50%'],
+            data: [
+                {
+                    name: '不满意',
+                    value: 5
+                },
+                {
+                    name: '满意',
+                    value: 995
+                }
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                normal: {
+                    label: {
+                        show: true,
+                        position: 'outer',
+                        formatter: `占比：{d}%`,
+                        fontSize: 14
+                    },
+                    labelLine: {
+                        show: true
+                    }
+                }
+            }
+        }
+    ],
+    color: ['#d20962', '#00a78e'],
+    tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: '统计情况<br/>{b}：{c}<br/>占比：{d}%'
+    }
+}
+
+export const contract = {
+    title: {
+        show: true,
+        text: '合同履约率',
+        textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            fontWeight: '600'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '20px'
+    },
+    legend: {
+        orient: 'horizontal',
+        show: true,
+        left: 'center',
+        bottom: 10,
+        z: 3,
+        itemWidth: 25,
+        itemHeight: 14,
+        itemGap: 10,
+        data: [
+            {
+                name: '未履约',
+                textStyle: {
+                    color: '#f85a40'
+                }
+            },
+            {
+                name: '已履约',
+                textStyle: {
+                    color: '#0cb9c1'
+                }
+            }
+        ]
+    },
+    series: [
+        {
+            name: '任务完成情况',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '50%'],
+            data: [
+                {
+                    name: '未履约',
+                    value: 0
+                },
+                {
+                    name: '已履约',
+                    value: 100
+                }
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                normal: {
+                    label: {
+                        show: true,
+                        position: 'outer',
+                        formatter: `占比：{d}%`,
+                        fontSize: 14
+                    },
+                    labelLine: {
+                        show: true
+                    }
+                }
+            }
+        }
+    ],
+    color: ['#f85a40', '#0cb9c1'],
+    tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: '统计情况<br/>{b}：{c}<br/>占比：{d}%'
+    }
 }