大方人员与培训看板

src/api/platform/spectaculars/lab.js

@@ -5,32 +5,54 @@ import { DATA_URL } from '@/api/baseUrl'
  * 实验室看板
  * @param {*} params
  */
-export function labsDashBoard(params) {
-  return request({
-    url: DATA_URL() + '/report/statistic/labsDashBoard',
-    method: 'get',
-    params: params
-  })
+export function labsDashBoard (params) {
+    return request({
+        url: DATA_URL() + '/report/statistic/labsDashBoard',
+        method: 'get',
+        params: params
+    })
 }
 /**
  * 培训看板
  * @param {*} params
  */
- export function trainingDashBoard(params) {
-  return request({
-    url: DATA_URL() + '/report/statistic/trainingDashBoard',
-    method: 'get',
-    params: params
-  })
+export function trainingDashBoard (params) {
+    return request({
+        url: DATA_URL() + '/report/statistic/trainingDashBoard',
+        method: 'get',
+        params: params
+    })
+}
+/**
+ * 病理科培训看板
+ * @param {*} params
+ */
+export function trainingDashBoardBlk (params) {
+    return request({
+        url: DATA_URL() + '/report/statistic/trainingDashBoardBlk',
+        method: 'get',
+        params: params
+    })
+}
+/**
+ * 外部培训统计
+ * @param {*} params
+ */
+export function externalTrainByDfx (params) {
+    return request({
+        url: DATA_URL() + '/report/statistic/externalTrainByDfx',
+        method: 'get',
+        params: params
+    })
 }
 /**
  *设备看板
  * @param {*} params
  */
- export function equipDashBoard(params) {
-  return request({
-    url: DATA_URL() + '/report/statistic/equipDashBoard',
-    method: 'get',
+export function equipDashBoard (params) {
+    return request({
+        url: DATA_URL() + '/report/statistic/equipDashBoard',
+        method: 'get'
     // params: params
-  })
+    })
 }

src/views/business/trainManagement/indexDaFang.vue

@@ -0,0 +1,688 @@
+<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">{{ title }}</div>
+                <div :class="$style.daterange">
+                    <el-row style="display:flex">
+                        <el-button type="text" size="mini">部门</el-button>
+                    </el-row>
+                    <dv-border-box-8>
+                        <el-select v-model="deptVal" :clearable="false" placeholder="请选择部门" @change="updateAll">
+                            <el-option
+                                v-for="item in chooseDept"
+                                :key="item.positionId"
+                                :label="item.positionName"
+                                :value="item.positionId"
+                            />
+                        </el-select>
+                    </dv-border-box-8>
+                </div>
+                <div :class="$style.daterange" style="right:65%;">
+                    <el-row style="display:flex">
+                        <!-- <el-button :class="hoverClassAdd === 'w'? 'hoverClass' : ''" type="text" @click="changeDate('week')" size="mini">本周</el-button> -->
+                        <el-button :class="hoverClassAdd === 'm'? 'hoverClass' : ''" type="text" size="mini" @click="changeDate('month')">月</el-button>
+                        <el-button :class="hoverClassAdd === 'y'? 'hoverClass' : ''" type="text" size="mini" @click="changeDate('year')">年</el-button>
+                    </el-row>
+                    <!-- <el-row style="display:flex">
+                        <el-button type="text" size="mini">日期</el-button>
+                    </el-row> -->
+                    <dv-border-box-8>
+                        <!-- <el-cascader v-model="dateVal" :options="options" :show-all-levels="false"></el-cascader> -->
+                        <!-- <el-date-picker
+                            v-model="daterange"
+                            type="daterange"
+                            format="yyyy-MM-dd"
+                            value-format="yyyy-MM-dd"
+                            range-separator="~"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            @change="changeDate"
+                        /> -->
+                        <el-date-picker
+                            v-show="hoverClassAdd === 'm'"
+                            v-model="dateValM"
+                            type="month"
+                            format="yyyy-MM"
+                            value-format="yyyy-MM"
+                            placeholder="选择月"
+                            :clearable="false"
+                            @change="updateAll"
+                        />
+                        <el-date-picker
+                            v-show="hoverClassAdd === 'y'"
+                            v-model="dateValY"
+                            type="year"
+                            format="yyyy"
+                            value-format="yyyy"
+                            placeholder="选择年"
+                            :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>
+                <!-- <div class="vessel" v-if="show">
+                    <job-plan-chart class="merge" :title="mergeData[1].title" v-model="nowWeekData" :data="mergeData[1].numData" :width="'58%'" :height="'44%'" :id="1" />
+                    <dv-decoration-2 :key="`line1`" :reverse="true" :dur="5" style="width:1%;height:44%;" />
+                    <pie-chart class="tabular" :title="mergeData[0].title" v-model="mergeData[0].numData" :width="'37%'" :height="'44%'" :id="1"/>
+                    <dv-decoration-10 style="width:100%;height:0.5%" />
+                    <training-staff-chart class="merge"  :title="mergeData[2].title" v-model="mergeData[2].numData" :data="mergeData[2].perList" :width="'58%'" :height="'44%'" :id="1" />
+                    <dv-decoration-2 :key="`line2`" :reverse="true" :dur="5" style="width:1%;height:44%;" />
+                    <pie-chart class="tabular" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'37%'" :height="'44%'" :id="2"/>
+                </div>
+                <div class="vessel" style="align-content: normal;" v-else>
+                    <pre-work-chart class="merge" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'58%'" :height="'44%'" :id="1" />
+                    <dv-decoration-2 :key="`line3`" :reverse="true" :dur="5" style="width:1%;height:44%;" />
+                    <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'37%'" :height="'44%'" :id="3"/>
+                </div> -->
+                <!-- <div class="vessel">
+                    <job-plan-chart class="merge" :title="mergeData[1].title" v-model="nowWeekData" :data="mergeData[1].numData" :width="'63%'" :height="'29%'" :id="1" />
+                    <dv-decoration-2 :key="`line1`" :reverse="true" :dur="6" style="width:1%;height:33%;" />
+                    <pie-chart class="tabular" :title="mergeData[0].title" v-model="mergeData[0].numData" :width="'32%'" :height="'29%'" :id="1"/>
+                    <dv-decoration-10 style="width:100%;height:1%" />
+                    <training-staff-chart class="merge"  :title="mergeData[2].title" v-model="mergeData[2].numData" :data="mergeData[2].perList" :width="'63%'" :height="'29%'" :id="1" />
+                    <dv-decoration-2 :key="`line2`" :reverse="true" :dur="6" style="width:1%;height:33%;" />
+                    <pie-chart class="tabular" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'32%'" :height="'29%'" :id="2"/>
+                    <dv-decoration-10 style="width:100%;height:1%" />
+                    <pre-work-chart class="merge" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'63%'" :height="'29%'" :id="1" />
+                    <dv-decoration-2 :key="`line3`" :reverse="true" :dur="6" style="width:1%;height:33%;" />
+                    <pie-chart class="tabular" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'32%'" :height="'29%'" :id="3"/>
+                </div> -->
+                <div class="vessel">
+                    <dv-border-box-12 class="areaTop" :color="dvColor" :background-color="dvBackColor">
+                        <div class="area">
+                            <job-plan-chart :id="1" v-model="nowWeekData" class="merge" :title="mergeData[1].title" :data="mergeData[1].numData" :width="'63%'" :height="'85%'" />
+                            <dv-decoration-2 :key="`line1`" :color="dvLineColor" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
+                            <pie-chart :id="1" v-model="mergeData[0].numData" class="tabular" :title="mergeData[0].title" :total="mergeData[0].total" :width="'32%'" :height="'85%'" />
+                        </div>
+                        <dv-decoration-2 :key="`line4`" :color="dvLineColor" :dur="6" style="width:98%;height:4%;margin: auto;" />
+                        <div class="area">
+                            <training-staff-chart :id="1" v-model="mergeData[2].numData" class="merge" :title="mergeData[2].title" :data="mergeData[2].perList" :width="'63%'" :height="'85%'" />
+                            <dv-decoration-2 :key="`line2`" :color="dvLineColor" :reverse="true" :dur="6" style="width:1%;height:85%;margin: auto;" />
+                            <pie-chart :id="2" v-model="mergeData[3].numData" class="tabular" :title="mergeData[3].title" :total="mergeData[3].total" :width="'32%'" :height="'85%'" />
+                        </div>
+                    </dv-border-box-12>
+                    <div style="width:100%;height:2.64%" />
+                    <dv-border-box-12 class="areaBottom" :color="dvColor" :background-color="dvBackColor">
+                        <div class="area" style="height:100%">
+                            <pre-work-chart :id="1" v-model="mergeData[5].numData" class="merge" :title="mergeData[5].title" :width="'63%'" :height="'87%'" />
+                            <dv-decoration-2 :key="`line3`" :color="dvLineColor" :reverse="true" :dur="6" style="width:1%;height:87%;margin: auto;" />
+                            <pie-chart :id="3" v-model="mergeData[4].numData" class="tabular" :title="mergeData[4].title" :total="mergeData[4].total" :width="'32%'" :height="'87%'" />
+                        </div>
+                    </dv-border-box-12>
+                </div>
+            </dv-border-box-1>
+        </dv-full-screen-container>
+    </div>
+</template>
+<script>
+import screenfull from 'screenfull'
+import data from './constants/simulated.js'
+import { getFormatDate } from './utils/config.js'
+import { trainingDashBoard, externalTrainByDfx } from '@/api/platform/spectaculars/lab'
+export default {
+    components: {
+        JobPlanChart: () => import('./components/jobPlanChart.vue'),
+        TrainingStaffChart: () => import('./components/trainingStaffChart.vue'),
+        PieChart: () => import('./components/pieChart.vue'),
+        PreWorkChart: () => import('./components/preWorkChart.vue')
+    },
+    data () {
+        const d = new Date()
+        const { deptList = [] } = this.$store.getters || {}
+        const chooseDept = deptList.filter(e => e.depth == 4 && e.positionName.indexOf('质量') == -1)
+        chooseDept.unshift({ positionId: ' ', positionName: '全科室' })
+        return {
+            deptList,
+            chooseDept,
+            deptVal: ' ',
+            level: '',
+            title: '培训统计看板',
+            year: d.toJSON().slice(0, 4),
+            cycleList: [],
+            initData: {},
+            fontSize: 18,
+            itemIndex: 0,
+            chartIndex: 0,
+            autoPlay: true,
+            tabularArr1: [],
+            tabularArr2: [],
+            daterange: [],
+            dateValM: '',
+            dateValY: '',
+            nowWeekData: [],
+            dvColor: ['rgb(22,47,98)', 'rgba(116, 142, 194, 1)'],
+            dvLineColor: ['rgba(255, 255, 255, 0.5)'],
+            dvBackColor: 'rgba(6, 30, 93, 0)',
+            dateVal: ['week', 'nowWeek'],
+            show: true,
+            options: data.options,
+            hoverClassAdd: 'm',
+            mergeData: [
+                {
+                    title: '在岗培训类别占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: '在岗培训计划',
+                    numData: data.jobPlanObjPie
+                },
+                {
+                    title: '在岗培训人员统计情况',
+                    numData: data.staffWeek,
+                    perList: data.personList
+                },
+                {
+                    title: '在岗培训对象占比',
+                    numData: data.dataObj,
+                    total: 0
+                },
+                {
+                    title: '岗前培训类别占比',
+                    numData: data.dataObj,
+                    total: 0
+                },
+                {
+                    title: '岗前培训',
+                    numData: data.preData
+                }
+            ]
+        }
+    },
+    computed: {
+        selectedCycle () {
+            return this.cycleList[this.itemIndex] || '每月'
+        },
+        size () {
+            return this.sizeMap[this.selectedCycle]
+        }
+    },
+    created () {
+        // 默认全屏展示
+        if (screenfull.isEnabled && !screenfull.isFullscreen) {
+            screenfull.request()
+        }
+        this.dateValM = this.getYearMonth('m')
+        this.dateValY = this.getYearMonth('y')
+        this.updateAll()
+    },
+    beforeDestroy () {
+        if (screenfull.isFullscreen) {
+            screenfull.toggle()
+        }
+        this.clenUp()
+    },
+    methods: {
+        initializeData () {
+            const w = window.innerWidth
+            const { first = '', second = '' } = this.$store.getters.level || {}
+            const annual = this.hoverClassAdd === 'm' ? this.dateValM.substring(0, 4) : this.dateValY
+            this.nowWeekData = []
+            this.initData = {}
+            this.itemIndex = 0
+            this.chartIndex = 0
+            this.level = second || first
+            this.fontSize = w >= 1600 ? 20 : w > 1366 && w < 1600 ? 18 : 16
+            this.tabularArr1 = []
+            this.tabularArr2 = []
+            this.mergeData = [
+                {
+                    title: '内部培训类别占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: '内部培训计划',
+                    numData: {}
+                },
+                {
+                    title: '内部培训人员统计情况',
+                    numData: [],
+                    perList: []
+                },
+                {
+                    title: '内部培训对象占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: annual + '年度外部培训类别占比',
+                    numData: [],
+                    total: 0
+                },
+                {
+                    title: annual + '年度外部培训',
+                    numData: []
+                }
+            ]
+        },
+        async updateAll (val) {
+            const loading = this.$loading({
+                lock: true,
+                // text: 'Loading',
+                // spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            })
+            this.initializeData()
+            const tData = await trainingDashBoard(
+                {
+                    dept: this.deptVal,
+                    date: this.hoverClassAdd === 'm' ? this.dateValM : this.dateValY
+                }
+            ).then(res => {
+                const data = res.data[0] || {}
+                return data
+            })
+            const eData = await externalTrainByDfx(
+                {
+                    dept: this.deptVal,
+                    date: this.hoverClassAdd === 'm' ? this.dateValM : this.dateValY
+                }
+            ).then(res => {
+                const data = res.data || {}
+                return data
+            })
+            this.nowWeekData = tData.weekDtoList
+            this.mergeData[1].numData = tData.planDto
+            this.mergeData[0].numData = tData.typeDto.typeDtoList
+            this.mergeData[0].title = tData.typeDto.remark
+            this.mergeData[0].total = tData.typeDto.typeTotal
+            this.mergeData[3].numData = tData.objectDto.objectDtoList
+            this.mergeData[3].total = tData.objectDto.objectTotal
+            this.mergeData[2].numData = tData.pxrytjqkDtoList
+            this.mergeData[2].perList = tData.userRankList
+            this.mergeData[5].numData = eData.yearList
+            this.mergeData[4].total = eData.externalType.total
+            this.mergeData[4].numData = eData.externalType.ndwbpxTypeList || []
+            loading.close()
+        },
+        async fetchData () {
+        },
+        goBack () {
+            this.$router.back(-1)
+        },
+        changeDate (val) {
+            switch (val) {
+                case 'week':
+                    this.hoverClassAdd = 'w'
+                    const w = this.getCurrentWeek()
+                    this.daterange = w
+                    this.updateAll()
+                    break
+                case 'month':
+                    this.hoverClassAdd = 'm'
+                    // let m = this.getCurrentMonth()
+                    // let m = this.getYearMonth('m')
+                    // this.dateValM = m
+                    this.updateAll()
+                    break
+                case 'year':
+                    this.hoverClassAdd = 'y'
+                    // let y = this.getCurrentYear()
+                    // let y = this.getYearMonth('y')
+                    // this.dateValY = y
+                    this.updateAll()
+                    break
+                default:
+                    this.hoverClassAdd = 'A'
+                    this.updateAll()
+                    break
+            }
+        },
+        getNowWeek () {
+            return this.getAllDatesBetween(this.getCurrentWeek())
+        },
+        getCurrentWeek () {
+            const now = new Date()
+            const dayOfWeek = now.getDay() // 0-6, 0是周日
+            const dayOfWeekMonday = dayOfWeek || 7 // 如果是周日，使用7
+            const startDate = new Date(now)
+            startDate.setDate(now.getDate() - (dayOfWeekMonday - 1))
+            const endDate = new Date(now)
+            endDate.setDate(now.getDate() + (7 - dayOfWeekMonday))
+            return [getFormatDate('string', 0, 10, startDate), getFormatDate('string', 0, 10, endDate)]
+        },
+        getCurrentMonth () {
+            const now = new Date()
+            const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
+            const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
+            return [getFormatDate('string', 0, 10, startDate), getFormatDate('string', 0, 10, endDate)]
+        },
+        getCurrentYear () {
+            const currentYear = new Date().getFullYear()
+            const startDate = new Date(currentYear, 0, 1)
+            const endDate = new Date(currentYear, 11, 31)
+            return [getFormatDate('string', 0, 10, startDate), getFormatDate('string', 0, 10, endDate)]
+        },
+        getAllDatesBetween (d) {
+            const startDate = new Date(d[0])
+            const endDate = new Date(d[1])
+            const dates = []
+            const currentDate = new Date(startDate)
+            while (currentDate <= endDate) {
+                const obj = { week: this.getWeekOfDay(currentDate), date: getFormatDate('string', 0, 10, new Date(currentDate)) }
+                dates.push(obj)
+                currentDate.setDate(currentDate.getDate() + 1)
+            }
+            return dates
+        },
+        getWeekOfDay (d) {
+            const date = new Date(d)
+            const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+            const dayOfWeek = weekDays[date.getDay()]
+            return dayOfWeek
+        },
+        getYearMonth (val) {
+            const currentDate = new Date()
+            const currentYear = currentDate.getFullYear()
+            const currentMonth = currentDate.getMonth() + 1
+            const mon = currentMonth > 9 ? currentMonth : '0' + currentMonth
+            const currentYearMonth = currentYear + '-' + mon
+            return val === 'm' ? currentYearMonth : currentYear + ''
+        },
+        toggleAutoPlay () {
+            this.autoPlay ? this.stopAutoPlay() : this.startAutoPlay()
+        },
+        startAutoPlay () {
+            this.autoPlay = true
+            if (this.autoPlayTimer) {
+                clearInterval(this.autoPlayTimer)
+            }
+            this.autoPlayTimer = setInterval(() => {
+                this.show = !this.show
+            }, 5000)
+        },
+        stopAutoPlay () {
+            this.autoPlay = false
+            clearInterval(this.autoPlayTimer)
+        },
+        clenUp () {
+            // clearInterval(this.dataFetchTimer)
+            clearInterval(this.autoPlayTimer)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+// ::v-deep .el-button--text.is-active,
+//     .el-button--text:active {
+//         background: #1892ea;
+//         border-color: #1892ea;
+//         color: #FFFFFF;
+//     }
+
+//     ::v-deep .el-button--text:focus,
+//     .el-button--text:hover {
+//         background: #1892ea;
+//         border-color: #1892ea;
+//         color: #FFFFFF;
+//     }
+
+    ::v-deep .el-button--text {
+        color: #FFFFFF;
+        padding: 5px 5px;
+        border-radius: 4px;
+    }
+    .hoverClass{
+        background: #1892ea;
+        border-color: #1892ea;
+        color: #FFFFFF;
+    }
+</style>
+<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('~@/assets/images/screen/bg.png');
+                background-size: 100% 100%;
+                box-shadow: 0 0 3px blue;
+                display: flex;
+                flex-direction: column;
+            }
+            .dv-border-box-1 .border-box-content{
+                // height: calc(100vh - 90px);
+                height: 100%;
+                .vessel{
+                    width: 98%;
+                    height: 96%;
+                    padding: 1%;
+                    // display: flex;
+                    // flex-flow: wrap;
+                    // justify-content: space-evenly;
+                    // align-content: space-between;
+                    .tabular{
+                        width: 40%;
+                    }
+                    .merge{
+                        width: 80%;
+                    }
+                    .area{
+                        width: 100%;
+                        height: 48%;
+                        display: flex;
+                        flex-flow: wrap;
+                    }
+                    .areaTop{
+                        width: 100%;
+                        height: 66%;
+                    }
+                    .areaBottom{
+                        width: 100%;
+                        height: 31%;
+                    }
+                }
+            }
+            .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: 90px;
+            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%);
+            }
+            .daterange, .cycle, .back, .parse {
+                width: 8%;
+                // max-width: 180px;
+                cursor: pointer;
+                height: 2.825rem;
+                line-height: 2.825rem;
+                text-align: center;
+                margin-top: 2%;
+                flex: 1;
+                position: absolute;
+                color: #ffffff;
+            }
+            .daterange {
+                width: 10%;
+                right: 80%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                :global {
+                    .el-input--small{
+                        width: 100% !important;
+                        // background: rgba(255, 255, 255, 0);
+                        // border: none;
+                        // color: #fff;
+                        // font-size: 14px;
+                        // cursor: pointer;
+                        // // padding-left: 0;
+                        // padding-right: 0;
+                    }
+                    .el-input--small .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        color: #fff;
+                        font-size: 14px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                    }
+                    .el-select--small .el-input .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        color: #fff;
+                        font-size: 12px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                    }
+                    .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        font-size: 16px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                        .el-range-input {
+                            background: rgba(255, 255, 255, 0);
+                            color: #fff;
+                        }
+                        .el-input__icon {
+                            color: #fff;
+                        }
+                        .el-range-separator{
+                            color: #fff;
+                        }
+                    }
+                    .el-cascader .el-input--suffix .el-input__inner{
+                        font-size: 12px;
+                        color: #fff;
+                    }
+                }
+            }
+            .cycle {
+                display: flex;
+                min-width: 150px;
+                justify-content: flex-end;
+                // width: 125px;
+                right: 75%;
+                padding-left: 10px;
+                color: #fff;
+                font-size: 22px;
+                font-weight: 400;
+                :global {
+                    .el-dropdown {
+                        width: calc(100% - 52px);
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        .el-dropdown-link {
+                            text-align: center;
+                        }
+                    }
+                }
+            }
+            .back {
+                width: 5%;
+                left: calc(75% + 80px);
+            }
+            .parse {
+                width: 2%;
+                left: 75%;
+                align-items: center;
+                padding: 5px;
+                > img {
+                    height: calc(100% - 10px);
+                }
+            }
+            @media only screen and (max-width: 1680px) {
+                .daterange, .cycle, .back, .parse {
+                    height: 2.5rem;
+                    line-height: 2.5rem;
+                    margin-top: 2.5%;
+                }
+                .daterange {
+                    right: 79%;
+                }
+                .cycle {
+                    width: 5%;
+                    min-width: 120px;
+                    font-size: 18px;
+                    font-weight: normal;
+                }
+                .back {
+                    left: calc(75% + 60px);
+                }
+            }
+            @media only screen and (max-width: 1366px) {
+                .daterange {
+                    right: 78%;
+                }
+                .cycle {
+                    right: 70%;
+                    min-width: 140px;
+                    font-size: 16px;
+                    font-weight: normal;
+                }
+                .back {
+                    left: calc(75% + 50px);
+                }
+            }
+        }
+    }
+</style>

src/views/peopleManages/personComcont/BarChart.vue

@@ -30,11 +30,11 @@
             v-else
             style="
         width: 100%;
-        height: 90%;
+        height: 95%;
         display: inline-block;
         overflow: hidden;
         box-sizing: border-box;
-        margin-top:5%;
+        margin-top:0%;
       "
         >
             <div

src/views/peopleManages/personComcont/GetPieView.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="pieView">
-        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+        <div style="  height:12%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
             {{ info.config.title || "" }}
         </div>
         <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
             <div :id="info.config.idSelector" style="width: 100%; height: 95%; overflow: hidden" />
         </div>
         <!-- <div v-if="!showChart" style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;">
-            <div style="color: #c7c7c7">目前无数据</div>
-        </div> -->
+          <div style="color: #c7c7c7">目前无数据</div>
+      </div> -->
     </div>
 </template>
 
@@ -75,26 +75,71 @@ export default {
                     formatter: '{d}%'
                 },
                 label: {
-                    formatter: '{b}\n({d}%)',
+                    formatter: function (name) {
+                        const text = name.name + '(' + name.value + '%)'
+                        let result = ''// 拼接加\n返回的类目项
+                        const maxLength = 7// 每项显示文字个数
+                        const valLength = text.length// X轴类目项的文字个数
+                        const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                        if (rowNumber > 1) { // 如果文字大于3,
+                            for (var i = 0; i < rowNumber; i++) {
+                                let temp = ''// 每次截取的字符串
+                                const start = i * maxLength// 开始截取的位置
+                                const end = start + maxLength// 结束截取的位置
+                                temp = text.substring(start, end) + '\n'
+                                result += temp // 拼接生成最终的字符串
+                            }
+                            return result
+                        } else {
+                            return text
+                        }
+                    },
                     edgeDistance: '20%',
                     color: '#fff',
                     fontSize: '12px'
                 },
                 legend: {
+                    // show: this.info.hasOwnProperty('legend') ? this.info.legend : true,
                     show: true,
                     // orient: 'vertical',
                     itemGap: 6,
                     z: 3,
-                    left: 'center',
+                    type: this.info.hasOwnProperty('legend') && this.info.legend === false ? 'scroll' : 'plain',
+                    orient: this.info.hasOwnProperty('legend') && this.info.legend === false ? 'vertical' : 'horizontal',
+                    left: this.info.hasOwnProperty('legend') && this.info.legend === false ? 'left' : 'center',
                     textStyle: {
                         color: '#fff'
+                    },
+                    pageIconColor: '#fff',
+                    pageIconInactiveColor: '#fff',
+                    pageTextStyle: {
+                        color: '#fff'
+                    },
+                    formatter: function (name) {
+                        const text = name
+                        let result = ''// 拼接加\n返回的类目项
+                        const maxLength = 5// 每项显示文字个数
+                        const valLength = text.length// X轴类目项的文字个数
+                        const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                        if (rowNumber > 1) { // 如果文字大于3,
+                            for (var i = 0; i < rowNumber; i++) {
+                                let temp = ''// 每次截取的字符串
+                                const start = i * maxLength// 开始截取的位置
+                                const end = start + maxLength// 结束截取的位置
+                                temp = text.substring(start, end) + '\n'
+                                result += temp // 拼接生成最终的字符串
+                            }
+                            return result
+                        } else {
+                            return text
+                        }
                     }
                 },
                 series: [
                     {
                         type: 'pie',
                         radius: radius,
-                        center: ['50%', '50%'],
+                        center: this.info.hasOwnProperty('legend') && this.info.legend === false ? ['60%', '50%'] : ['50%', '50%'],
                         data: this.info.data,
                         emphasis: {
                             itemStyle: {
@@ -116,9 +161,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pieView {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: rgba(6, 30, 93, 0.5);
+width: 100%;
+height: 100%;
+overflow: hidden;
+background-color: rgba(6, 30, 93, 0.5);
 }
 </style>

src/views/peopleManages/taskStatistics/indexDaFang.vue

@@ -193,7 +193,7 @@ export default {
     },
     data () {
         const { level } = this.$store.getters
-        const colorGroup1 = ['#d20962', '#f47721', '#00bce4', '#7552cc']
+        const colorGroup1 = ['#d20962', '#f47721', '#00bce4', '#7552cc', '#00a78e', '#AFEEEE', '#FFB6C1', '	#FFFFE0', '#6495ED']
         const colorGroup2 = ['#00a78e', '#7d3f98', '#f85a40']
         return {
             depth3: '',
@@ -437,7 +437,11 @@ export default {
                 // 学位学历
                 data: [],
                 color: colorGroup1,
-                config: { title: '证书统计', idSelector: 'zsId' }
+                legend: false,
+                config: {
+                    title: '证书统计',
+                    idSelector: 'zsId'
+                }
             },
             // 职称统计图配置
             ranksPieData: {
@@ -475,6 +479,7 @@ export default {
                 },
 
                 legend: {
+                    top: 0,
                     textStyle: {
                         color: '#fff'
                     }
@@ -483,7 +488,8 @@ export default {
                 grid: {
                     left: '3%',
                     right: '4%',
-                    bottom: '3%',
+                    top: '35%',
+                    bottom: '2%',
                     containLabel: true
                 },
                 xAxis: [
@@ -498,7 +504,26 @@ export default {
                                 color: '#fff'
                             },
                             interval: 0,
-                            rotate: 50
+                            rotate: 50,
+                            formatter: function (name) {
+                                const text = name
+                                let result = ''// 拼接加\n返回的类目项
+                                const maxLength = 5// 每项显示文字个数
+                                const valLength = text.length// X轴类目项的文字个数
+                                const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                                if (rowNumber > 1) { // 如果文字大于3,
+                                    for (var i = 0; i < rowNumber; i++) {
+                                        let temp = ''// 每次截取的字符串
+                                        const start = i * maxLength// 开始截取的位置
+                                        const end = start + maxLength// 结束截取的位置
+                                        temp = text.substring(start, end) + '\n'
+                                        result += temp // 拼接生成最终的字符串
+                                    }
+                                    return result
+                                } else {
+                                    return text
+                                }
+                            }
                         }
                     }
                 ],
@@ -545,7 +570,7 @@ export default {
                 grid: {
                     left: '3%',
                     right: '4%',
-                    bottom: '3%',
+                    bottom: '0%',
                     containLabel: true
                 },
                 xAxis: [
@@ -560,7 +585,26 @@ export default {
                                 color: '#fff'
                             },
                             interval: 0,
-                            rotate: 50
+                            rotate: 50,
+                            formatter: function (name) {
+                                const text = name
+                                let result = ''// 拼接加\n返回的类目项
+                                const maxLength = 5// 每项显示文字个数
+                                const valLength = text.length// X轴类目项的文字个数
+                                const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                                if (rowNumber > 1) { // 如果文字大于3,
+                                    for (var i = 0; i < rowNumber; i++) {
+                                        let temp = ''// 每次截取的字符串
+                                        const start = i * maxLength// 开始截取的位置
+                                        const end = start + maxLength// 结束截取的位置
+                                        temp = text.substring(start, end) + '\n'
+                                        result += temp // 拼接生成最终的字符串
+                                    }
+                                    return result
+                                } else {
+                                    return text
+                                }
+                            }
                         }
                     }
                 ],
@@ -698,7 +742,7 @@ export default {
                 grid: {
                     left: '3%',
                     right: '4%',
-                    bottom: '3%',
+                    bottom: '0%',
                     containLabel: true
                 },
                 xAxis: [
@@ -713,7 +757,26 @@ export default {
                                 color: '#fff'
                             },
                             interval: 0,
-                            rotate: 50
+                            rotate: 50,
+                            formatter: function (name) {
+                                const text = name
+                                let result = ''// 拼接加\n返回的类目项
+                                const maxLength = 5// 每项显示文字个数
+                                const valLength = text.length// X轴类目项的文字个数
+                                const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                                if (rowNumber > 1) { // 如果文字大于3,
+                                    for (var i = 0; i < rowNumber; i++) {
+                                        let temp = ''// 每次截取的字符串
+                                        const start = i * maxLength// 开始截取的位置
+                                        const end = start + maxLength// 结束截取的位置
+                                        temp = text.substring(start, end) + '\n'
+                                        result += temp // 拼接生成最终的字符串
+                                    }
+                                    return result
+                                } else {
+                                    return text
+                                }
+                            }
                         }
                     }
                 ],
@@ -1010,9 +1073,25 @@ export default {
                             color: '#fff'
                         },
                         formatter: function (name) {
-                            return name.value === 0
+                            const text = name.value === 0
                                 ? ''
-                                : name + ':' + name.value
+                                : name.seriesName + ':' + name.value
+                            let result = ''// 拼接加\n返回的类目项
+                            const maxLength = 5// 每项显示文字个数
+                            const valLength = text.length// X轴类目项的文字个数
+                            const rowNumber = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
+                            if (rowNumber > 1) { // 如果文字大于3,
+                                for (var i = 0; i < rowNumber; i++) {
+                                    let temp = ''// 每次截取的字符串
+                                    const start = i * maxLength// 开始截取的位置
+                                    const end = start + maxLength// 结束截取的位置
+                                    temp = text.substring(start, end) + '\n'
+                                    result += temp // 拼接生成最终的字符串
+                                }
+                                return result
+                            } else {
+                                return text
+                            }
                         }
                     }
                 })
@@ -1127,7 +1206,6 @@ export default {
             await curdPost('sql', sql).then((res) => {
                 data = res.variables.data
             })
-            console.log(data, 'aaaaaa')
             this.employeeNum = data.length
             if (this.initOnLoad === 0) {
                 this.initOnLoad = 1
@@ -1464,6 +1542,14 @@ export default {
             await curdPost('sql', sql).then((res) => {
                 data = res.variables.data
             })
+            if (data.length > 0 && data[0]) {
+                console.log(data[0])
+                this.zsPieData.data.forEach((item, i) => {
+                    item.value = data[0]['zsb' + i]
+                        ? data[0]['zsb' + i]
+                        : 0
+                })
+            }
         },
         async zsInfoDataPos () {
             const a = 'SELECT 1 AS n UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL SELECT 5 UNION ALL SELECT 6 UNION ALL SELECT 7'
@@ -1559,15 +1645,20 @@ export default {
                 })
                 if (data.length !== 0) {
                 //     // 跟《部门信息统计配置表》排列顺序一致
-                    for (let t = 0; t < data.length; t++) {
-                        this.zsOption.xAxis[0].data.push(
-                            data[t].enName
-                        )
-                        for (let i = 0; i < degreeSeriesDatas.length; i++) {
-                            degreeSeriesDatas[i].data[t] =
-                                data[t][shuZuList[i]]
+                    // for (let t = 0; t < data.length; t++) {
+
+                    // }
+                    data.forEach((item, t) => {
+                        if (item) {
+                            this.zsOption.xAxis[0].data.push(
+                                item.enName
+                            )
+                            for (let i = 0; i < degreeSeriesDatas.length; i++) {
+                                degreeSeriesDatas[i].data[t] =
+                                item[shuZuList[i]]
+                            }
                         }
-                    }
+                    })
                     this.zsOption.series = degreeSeriesDatas
                 }
             })
@@ -1824,7 +1915,7 @@ export default {
     overflow: hidden;
     box-sizing: border-box;
     .viewLeft {
-        width: 58%;
+        width: 63%;
         height: 100%;
         overflow: hidden;
         box-sizing: border-box;
@@ -1839,7 +1930,7 @@ export default {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        width: 40%;
+        width: 35%;
         height: 100%;
         overflow: hidden;
         // padding-bottom: 10px;
@@ -1858,13 +1949,13 @@ export default {
     box-sizing: border-box;
     display: flex;
     .midViewLeft {
-        width: 40%;
+        width: 45%;
         height: 100%;
         overflow: hidden;
         box-sizing: border-box;
     }
     .midViewRight {
-        width: 60%;
+        width: 55%;
 
         height: 100%;
         overflow: hidden;