feat(dashboard): 更新图表组件并新增功能

- 统一将 echarts 导入方式改为 import * as echarts
- 新增 BrithChart、LineChart、RaddarChart 和 workcertificateChart 四个新图表组件
- 重构 PanelGroup 组件，支持动态数据展示与路由跳转
- 移除旧的 pending.vue 和 TableChart.vue 文件- 调整 ldpehome.vue 页面布局并引入新的子组件
-优化 PieChart 组件逻辑，增加年份切换功能- 样式调整：修改间距、字体大小及徽标位置等细节
- 修复部分组件中计数动画时长不一致的问题
- 添加多个下拉选择年份控件用于动态更新图表数据

ui/src/views/dashboard/BarChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
 

ui/src/views/dashboard/LineChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'

ui/src/views/dashboard/byx/PieChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'
 import {trainCount} from "@/api/common/homedataCbpb";

ui/src/views/dashboard/byx/RaddarChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'

ui/src/views/dashboard/hcq/BrithChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'
 import { trainNewstaffCount} from "@/api/training/newstaff/tnNew";

ui/src/views/dashboard/hcq/LineChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'

ui/src/views/dashboard/hcq/PieChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'
 import {trainCount} from "@/api/common/homedataCbpb";

ui/src/views/dashboard/hcq/RaddarChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'

ui/src/views/dashboard/hcq/workcertificateChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 
 require('echarts/theme/macarons') // echarts theme
 import resize from '../mixins/resize'

ui/src/views/dashboard/ldpe/BrithChart.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+import { trainNewstaffCount} from "@/api/training/newstaff/tnNew";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '210px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      dataOut: [],
+      total: null,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      trainNewstaffCount().then(res=>{
+        this.dataOut = [
+          {value: res.data.count1, name: res.data.count1Name},
+          {value: res.data.count0, name: res.data.count0Name},
+        ]
+        this.total = res.data.count1 + res.data.count0
+        this.initChart()
+      })
+    })
+    this.chart = echarts.init(this.$el, 'macarons')
+    //饼状图点击事件
+    this.chart.on('click', (param) =>{  //这里使用箭头函数代替function，this指向VueComponent
+      let index;
+      //当前扇区的dataIndex
+      index = param.name;
+      //自己的操作，这里是点击跳转路由，并携带参数
+        /*跳转路由*/
+        this.$router.push({
+          path: '/training/newstaff/tnNew',
+        })
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    changeYear(year){
+      let param = {planYear: year}
+      trainNewstaffCount(param).then(res=>{
+        this.dataOut = [
+          {value: res.data.count1, name: res.data.count1Name},
+          {value: res.data.count0, name: res.data.count0Name},
+        ]
+        this.total = res.data.count1 + res.data.count0
+        this.initChart()
+      })
+    },
+    initChart() {
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b}: {c} " + " | " + "{d}%"
+        },
+        color: [
+          '#87CA8B',
+          '#FBD44A'
+        ],
+        title: [
+          {
+            text: '总人数',
+            x: 'center',
+            top: '35%',
+          },
+          {
+            text: this.total,
+            x: 'center',
+            top: '50%',
+          },
+        ],
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            fontSize: 12,
+            padding:[0,0]
+          },
+          selectedMode: true,
+          data:['已完成','未完成']
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            selectedMode: 'single',
+            radius: ['50%', '80%'],
+            itemStyle: {
+              borderRadius: 15,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              position: 'outside',
+              fontSize: 10,
+            },
+            animationEasing: 'cubicInOut',
+            animationDuration: 1300,
+            labelLine: {
+              show: true
+            },
+            data: this.dataOut
+          }
+        ],
+      })
+    }
+  }
+}
+</script>

ui/src/views/dashboard/ldpe/LineChart.vue

@@ -0,0 +1,128 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+import {getLine} from "@/api/common/homedataCbpb";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      nextEdit: [],
+      nextReview: [],
+      monthList: [],
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      getLine().then(res => {
+        for (const item of res.data.nextEdit) {
+          this.monthList.push(item.dataMonth);
+          this.nextEdit.push(item.dataCount);
+        }
+        for (const item of res.data.nextReview) {
+          this.nextReview.push(item.dataCount);
+        }
+        this.initChart()
+      })
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption(
+        {
+          xAxis: {
+            data: this.monthList,
+            axisTick: {
+              show: false
+            }
+          },
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 40,
+            top: 30,
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow' // 修改为柱状图的显示方式
+            },
+          },
+          yAxis: {
+            axisTick: {
+              show: false
+            }
+          },
+          legend: {
+            data: ['下次修订日期', '下次回顾日期']
+          },
+          series: [
+            {
+              name: '下次修订日期',
+              type: 'bar', // 将类型修改为柱状图
+              barWidth: '20%', // 设置柱状图的宽度
+              itemStyle: {
+                normal: {
+                  borderRadius: 15,
+                }
+              },
+              data: this.nextEdit // 确保数据适用于柱状图
+            },
+            {
+              name: '下次回顾日期',
+              type: 'bar', // 将类型修改为柱状图
+              barWidth: '20%', // 设置柱状图的宽度
+              itemStyle: {
+                normal: {
+                  borderRadius: 15,
+                }
+              },
+              data: this.nextReview // 确保数据适用于柱状图
+            }
+          ]
+        }
+
+
+      )
+    }
+  }
+}
+</script>

ui/src/views/dashboard/ldpe/PanelGroup.vue

@@ -1,54 +1,62 @@
 <template>
   <el-row :gutter="40" class="panel-group">
-    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('/ehs/approval/safetyapproval')">
         <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon class-name="card-panel-icon" icon-class="dev"/>
+          <svg-icon icon-class="anquan" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            总设备数
+              安全
+            <el-badge v-if="safeWarnNum > 0" :value="safeWarnNum" :max="99" class="item" >
+            </el-badge>
           </div>
-          <count-to :duration="3000" :end-val="devNum" :start-val="0" class="card-panel-num"/>
+          <count-to :start-val="0" :end-val="safeNum" :duration="2600" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
-    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('/ehs/approval/environapproval')">
         <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon class-name="card-panel-icon" icon-class="uncheck"/>
+          <svg-icon icon-class="huanbao" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            本月未完成计划
+            环保
+            <el-badge v-if="envWarnNum > 0" :value="envWarnNum" :max="99" class="item" >
+            </el-badge>
           </div>
-          <count-to :duration="3000" :end-val="uncheckPlanNum" :start-val="0" class="card-panel-num"/>
+          <count-to :start-val="0" :end-val="envNum" :duration="3000" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
-    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('/ehs/approval/fireapproval')">
         <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon class-name="card-panel-icon" icon-class="checked"/>
+          <svg-icon icon-class="xiaofang" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            本月已完成计划
+            消防
+            <el-badge v-if="fireWarnNum > 0" :value="fireWarnNum" :max="99" class="item" >
+            </el-badge>
           </div>
-          <count-to :duration="3000" :end-val="checkedPlanNum" :start-val="0" class="card-panel-num"/>
+          <count-to :start-val="0" :end-val="fireNum" :duration="3200" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
-    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-      <div class="card-panel">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('/ehs/approval/healthapproval')">
         <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon class-name="card-panel-icon" icon-class="issue"/>
+          <svg-icon icon-class="weisheng" class-name="card-panel-icon"/>
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            未处理问题数量
+            卫生
+            <el-badge v-if="healthWarnNum > 0" :value="healthWarnNum" :max="99" class="item" >
+            </el-badge>
           </div>
-          <count-to :duration="3000" :end-val="issueNum" :start-val="0" class="card-panel-num"/>
+          <count-to :start-val="0" :end-val="healthNum" :duration="3600" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -57,6 +65,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {countNum} from "@/api/common/homedataCbps";
 
 export default {
   components: {
@@ -64,27 +73,48 @@ export default {
   },
   data() {
     return {
-      devNum: 0,
-      uncheckPlanNum: 0,
-      checkedPlanNum: 0,
-      issueNum: 0,
+      healthNum: 0,
+      envNum: 0,
+      fireNum: 0,
+      safeNum: 0,
+      healthWarnNum: 0,
+      envWarnNum: 0,
+      fireWarnNum: 0,
+      safeWarnNum: 0,
     }
   },
   created() {
-      this.devNum = 1000;
-      this.uncheckPlanNum = 1000;
-      this.checkedPlanNum = 1000;
-      this.issueNum = 1000;
+    countNum().then(res => {
+      this.healthNum = res.data.healthNum;
+      this.envNum = res.data.envNum;
+      this.fireNum = res.data.fireNum;
+      this.safeNum = res.data.safeNum;
+
+      this.healthWarnNum = res.data.healthWarnNum;
+      this.envWarnNum = res.data.envWarnNum;
+      this.fireWarnNum = res.data.fireWarnNum;
+      this.safeWarnNum = res.data.safeWarnNum;
+    })
   },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$router.push(type);
+
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .panel-group {
-  margin-top: 18px;
+  margin-top: -12px;
 
   .card-panel-col {
-    margin-bottom: 32px;
+    margin-bottom: 16px;
+  }
+  .item {
+    margin-bottom: 0px;
+    margin-top: -40px;
   }
 
   .card-panel {
@@ -158,8 +188,9 @@ export default {
       .card-panel-text {
         line-height: 18px;
         color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
+        font-size: 22px;
         margin-bottom: 12px;
+        width: 90px;
       }
 
       .card-panel-num {

ui/src/views/dashboard/ldpe/PieChart.vue

@@ -1,15 +1,14 @@
 <template>
-    <div  :style="{height:height,width:width,borderRadius:'10px'}"/>
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
-import * as echarts from 'echarts';
-import resize from "@/views/patrol/home/dashboard/mixins/resize";
-
+import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+import {trainCount} from "@/api/common/homedataCbpb";
 
 export default {
-  name: "PieChart",
   mixins: [resize],
   props: {
     className: {
@@ -22,16 +21,45 @@ export default {
     },
     height: {
       type: String,
-      default: '610px'
+      default: '210px'
     }
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      trainData:[],
+      dataOut: [],
+      trainingType:[],
+      trainTotal: null,
     }
   },
   mounted() {
-    this.initChart();
+    this.$nextTick(() => {
+      trainCount().then(res=>{
+        this.trainTotal = res.data.count1 + res.data.count0 + res.data.count2
+        this.dataOut = [
+          {value: res.data.count1, name: res.data.count1Name},
+          {value: res.data.count0, name: res.data.count0Name},
+          {value: res.data.count2, name: res.data.count2Name},
+        ]
+        this.initChart()
+      })
+    })
+    this.chart = echarts.init(this.$el, 'macarons')
+    //饼状图点击事件
+    this.chart.on('click', (param) =>{  //这里使用箭头函数代替function，this指向VueComponent
+      let index;
+      //当前扇区的dataIndex
+      index = param.name;
+      //自己的操作，这里是点击跳转路由，并携带参数
+          /*跳转路由*/
+          this.$router.push({
+            path: '/training/tracking/training',
+            query: {
+              status: index,
+            }
+          })
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -41,57 +69,78 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {// 在项目中运行以下代码，查看控制台输出
-      console.log('ECharts version:', echarts.version);
-      this.chart = echarts.init(this.$el, 'macarons')
-
+    changeYear(year){
+      let param = {year: year}
+        trainCount(param).then(res=>{
+          this.trainTotal = res.data.count1 + res.data.count0 + res.data.count2
+          this.dataOut = [
+            {value: res.data.count1, name: res.data.count1Name},
+            {value: res.data.count0, name: res.data.count0Name},
+            {value: res.data.count2, name: res.data.count2Name},
+          ]
+          this.initChart()
+        })
+    },
+    initChart() {
+      console.log("----------")
+      var total = this.trainTotal
       this.chart.setOption({
+        title: [
+          {
+            text: '总数',
+            x: 'center',
+            top: '35%',
+          },
+          {
+            text: this.trainTotal,
+            x: 'center',
+            top: '50%',
+          },
+        ],
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
+        color: [
+          '#87CA8B',
+          '#FBD44A',
+          '#fb4a4a'
+        ],
         legend: {
-          top: '5%',
-          left: 'center'
+          orient: 'vertical',
+          left: 'left',
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            fontSize: 12,
+            padding:[0,0]
+          },
+          selectedMode: true,
+          data:['已完成','未完成','未参培']
         },
         series: [
           {
-            name: 'Access From',
+            name: '',
             type: 'pie',
-            radius: ['40%', '70%'],
+            selectedMode: 'single',
+            radius: ['50%', '80%'],
             avoidLabelOverlap: false,
-            padAngle: 5,
             itemStyle: {
-              borderRadius: 10
-            },
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 40,
-                fontWeight: 'bold'
-              }
+              borderRadius: 15,
+              borderColor: '#fff',
+              borderWidth: 2
             },
+            animationEasing: 'cubicInOut',
+            animationDuration: 1300,
             labelLine: {
-              show: false
+              show: true
             },
-            data: [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
+            data: this.dataOut,
           }
-        ]
+        ],
+
       })
     }
-
   }
-};
+}
 </script>
-
-<style scoped>
-</style>

ui/src/views/dashboard/ldpe/RaddarChart.vue

@@ -0,0 +1,131 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+import {procedureCount} from "@/api/common/homedataCbpb";
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '210px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartData: {},
+      color: [
+        '#87CA8B',
+        '#58B1FF',
+        '#FBD44A',
+        '#7485E5',
+        '#AEE5B1',
+        '#81C4FF',
+        '#AAD7FF',
+        '#FFE791',
+        '#9AA6EA',
+      ],
+      dataIn: [
+        // 外层数据
+      ],
+      dataOut: []
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.$nextTick(() => {
+      procedureCount().then(res => {
+        this.dataOut = [
+          {value: res.data.appNum, name: res.data.app},
+          {value: res.data.trainNum, name: res.data.train},
+          {value: res.data.excelNum, name: res.data.excel},
+          {value: res.data.fileNum, name: res.data.file},
+          {value: res.data.guideNum, name: res.data.guide},
+          {value: res.data.fingerpostNum, name: res.data.fingerpost}
+        ]
+        this.initChart()
+      })
+
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        color: this.color,
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b}: {c} " + " | " + "{d}%"
+        },
+        title:
+          {
+            text: '',
+          }
+        ,
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            fontSize: 12,
+            padding:[0,0]
+          },
+          selectedMode: true,
+          data: ['程序总汇', '指南总汇', '指导书总汇', '附件总汇', '表格总汇', '培训材料'],
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            selectedMode: 'single',
+            radius: ['20%', '80%'],
+            itemStyle: {
+              borderRadius: 15,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              position: 'outside',
+              fontSize: 10,
+            },
+            animationEasing: 'cubicInOut',
+            animationDuration: 1300,
+            labelLine: {
+              show: true
+            },
+            data: this.dataOut
+          }
+        ],
+      })
+    }
+  }
+}
+</script>

ui/src/views/dashboard/ldpe/TableChart.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :style="{height:height,width:width}">
-    <h3>******</h3>
-    <div class="text-container">
-      <el-table border>
-
-      </el-table>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'tableChart',
-  props: {
-    height: {
-      type: String,
-      default: '610px'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  mounted() {
-  }
-}
-</script>

ui/src/views/dashboard/ldpe/pending.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :style="{height:height,width:width}">
-    <h3>我的待办</h3>
-    <div class="text-container">
-      <el-table border>
-
-      </el-table>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'pendingChart',
-  props: {
-    height: {
-      type: String,
-      default: '610px'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  mounted() {
-  }
-}
-</script>

ui/src/views/dashboard/ldpe/workcertificateChart.vue

@@ -0,0 +1,136 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import resize from '../mixins/resize'
+import {getWorkcetificate} from "@/api/common/homedataCbpb";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      nextEdit: [],
+      nextReview: [],
+      monthList: [],
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      getWorkcetificate().then(res => {
+          let CERALL = res.data.cerAll;
+          this.nextEdit= [CERALL.CONTAINER ,CERALL.PIPE ,CERALL.WORKER ,CERALL.FOREMAN ,CERALL.AC ,CERALL.FIREFIGHTER ,CERALL.SAFETY ,CERALL.TDS]
+        let CERWARN = res.data.cerWarn;
+          this.nextReview= [CERWARN.CONTAINER ,CERWARN.PIPE ,CERWARN.WORKER ,CERWARN.FOREMAN ,CERWARN.AC ,CERWARN.FIREFIGHTER ,CERWARN.SAFETY ,CERWARN.TDS]
+        this.initChart()
+      })
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption(
+        {
+          xAxis: {
+            data: [
+              '压力\n容器',
+              '压力\n管道',
+              '技术\n工人\n上岗证',
+              '班组长\n安全\n培训',
+              '制冷与\n空调',
+              '消防员\n证',
+              '安全\n管理',
+              'TDS'
+            ],
+            axisTick: {
+              show: true
+            }
+          },
+          grid: {
+            left: 10,
+            right: 30,
+            bottom: 40,
+            top: 30,
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow' // 修改为柱状图的显示方式
+            },
+          },
+          yAxis: {
+            axisTick: {
+              show: false
+            },
+          },
+          legend: {
+            data: ['总数', '预警数']
+          },
+          series: [
+            {
+              name: '总数',
+              type: 'bar', // 将类型修改为柱状图
+              barWidth: '20%', // 设置柱状图的宽度
+              itemStyle: {
+                normal: {
+                  borderRadius: 15,
+                  color: '#60c6fc' // 设置第二个序列为红色
+                }
+              },
+              data: this.nextEdit // 确保数据适用于柱状图
+            },
+            {
+              name: '预警数',
+              type: 'bar', // 将类型修改为柱状图
+              barWidth: '20%', // 设置柱状图的宽度
+              itemStyle: {
+                normal: {
+                  borderRadius: 15,
+                  color: '#fd806e' // 设置第二个序列为红色
+                }
+              },
+              data: this.nextReview // 确保数据适用于柱状图
+            }
+          ]
+        }
+
+
+      )
+    }
+  }
+}
+</script>

ui/src/views/ldpehome.vue

@@ -1,42 +1,162 @@
 <template>
   <div class="dashboard-editor-container">
-    <PanelGroup/>
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('程序数量') }}</span>
+          </div>
+        </div>
         <div class="chart-wrapper">
-          <pie-chart/>
+          <raddar-chart />
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">装置年度培训完成情况</span>
+            <el-dropdown style="float: right ;cursor: pointer" placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                年份 {{trainingYear}}
+                <i class="el-icon-date"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="chooseYear(-1)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                <el-dropdown-item @click.native="chooseYear(0)">{{this.searchFormField.year}}</el-dropdown-item>
+                <el-dropdown-item @click.native="chooseYear(1)">{{this.searchFormField.year + 1}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
         <div class="chart-wrapper">
-          <table-chart/>
+          <pie-chart ref="piechart" />
         </div>
       </el-col>
+      <!--      <el-col :xs="24" :sm="24" :lg="8">-->
+      <!--        <div class="chart-wrapper">-->
+      <!--          <bar-chart />-->
+      <!--        </div>-->
+      <!--      </el-col>-->
       <el-col :xs="24" :sm="24" :lg="8">
+        <div>
+          <div class="card-head">
+            <span class="card-name">{{ $t('新员工培训完成率') }}</span>
+            <el-dropdown style="float: right ;cursor: pointer" placement="bottom" trigger="click" class="card-time">
+              <span class="el-dropdown-link">
+                年份 {{trainingYearNew}}
+                <i class="el-icon-date"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="chooseYearNew(-1)">{{this.searchFormField.year - 1}}</el-dropdown-item>
+                <el-dropdown-item @click.native="chooseYearNew(0)">{{this.searchFormField.year}}</el-dropdown-item>
+                <el-dropdown-item @click.native="chooseYearNew(1)">{{this.searchFormField.year + 1}}</el-dropdown-item>              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
         <div class="chart-wrapper">
-          <pending-chart/>
+          <birth-chart ref="newchart"/>
         </div>
       </el-col>
     </el-row>
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <el-col :xs="24" :sm="24" :lg="10">
+        <div>
+          <div class="card-head">
+            <span class="card-name">程序清单到期提醒</span>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <line-chart :chart-data="lineChartData" />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="14">
+        <div>
+          <div class="card-head">
+            <span class="card-name">员工证书统计</span>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <workcertificate-chart :chart-data="lineChartData" />
+        </div>
+      </el-col>
+
+    </el-row>
+
   </div>
 </template>
 
 <script>
-import PanelGroup from "@/views/dashboard/ldpe/PanelGroup.vue";
-import PieChart from "@/views/dashboard/ldpe/PieChart.vue";
-import PendingChart from "@/views/dashboard/ldpe/pending.vue";
-import TableChart from "@/views/dashboard/ldpe/TableChart.vue";
+import PanelGroup from './dashboard/ldpe/PanelGroup'
+import LineChart from './dashboard/ldpe/LineChart'
+import RaddarChart from './dashboard/ldpe/RaddarChart'
+import PieChart from './dashboard/ldpe/PieChart'
+import WorkcertificateChart from "./dashboard/ldpe/workcertificateChart";
+import BirthChart from './dashboard/ldpe/BrithChart'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+}
 
 export default {
-  name: 'ldpehome',
+  name: 'Index',
   components: {
-    TableChart,
-    PendingChart,
+    WorkcertificateChart,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
     PieChart,
-    PanelGroup
+    BirthChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis,
+      // 获取当前年份
+      searchFormField: {
+        year: parseInt(this.getNowTime()),
+      },
+      trainingYear: null,
+      trainingYearNew: null,
+    }
+  },
+  created() {
+    this.trainingYear = new Date().getFullYear();
+    this.trainingYearNew = new Date().getFullYear();
+  },
+  methods: {
+    /** 获取当前年份 */
+    getNowTime() {
+      var now = new Date();
+      var year = now.getFullYear(); //得到年份
+      var defaultDate = `${year}`;
+      defaultDate = `${year}`
+      return defaultDate;
+      this.$set(this.searchFormField, "year", defaultDate);
+    },
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    },
+    //变换年份
+    chooseYear (index) {
+      console.log(index + "nian")
+      this.trainingYear = this.searchFormField.year + index
+      this.$refs.piechart.changeYear(this.searchFormField.year + index)
+    },
+
+    chooseYearNew (index) {
+      this.trainingYearNew = this.searchFormField.year + index
+      this.$refs.newchart.changeYear(this.searchFormField.year + index)
+    }
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .dashboard-editor-container {
   padding: 32px;
@@ -46,7 +166,7 @@ export default {
   .chart-wrapper {
     background: #fff;
     padding: 16px 16px 0;
-    //margin-bottom: 32px;
+    margin-bottom: 32px;
   }
 }