首页改版

package.json

@@ -23,7 +23,7 @@
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",
     "clipboard": "2.0.11",
-    "echarts": "5.5.1",
+    "echarts": "^5.5.1",
     "element-china-area-data": "6.1.0",
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",

src/views/approvalConfiguration/index.vue

@@ -62,7 +62,7 @@
         </span>
       </div>
 
-      <el-table v-loading="loading" :data="tableDataList.value" border  >
+      <el-table v-loading="loading" :data="tableDataList.value" border style="margin-bottom: 60px">
         <el-table-column label="序号" align="center" type="index" width="90"/>
 
         <el-table-column label="审批流程名称" align="center" prop="approvalName" />

src/views/index.vue

@@ -64,31 +64,31 @@
         <div class="right-div-top">
           <div class="right-div-top-left">
             <div style="padding: 29px 23px 29px 23px;display: flex;align-items: center;justify-content: space-between">
-              <span style="font-size: 18px;color: #303133">任务统计</span>
+              <span style="font-size: 18px;color: #303133">工时统计</span>
               <el-radio-group v-model="radio1" >
                 <el-radio-button label="本周" value="本周" />
                 <el-radio-button label="本月" value="本月" />
               </el-radio-group>
             </div>
 <!--             任务统计3个item整体div-->
-            <div class="tack-div">
-              <div class="tack-div-item" v-for="item in jinduList">
-                <div><el-progress :stroke-width="11" :width="70" type="circle" :percentage="item.percentage" /></div>
-                <div class="item2">
-                  <span style="font-size: 14px;color: #606266">本周任务总数</span>
-                  <span style="font-size: 18px;color: #303133">{{item.lastWeekTime}}</span>
-                </div>
-                <div class="item2">
-                  <span  style="font-size: 14px;color: #606266">已完成任务</span>
-                  <span style="font-size: 18px;color:#2165F8;">{{item.finishTask}}</span>
-                </div>
-              </div>
+            <div class="tack-div" id="tack-div">
+<!--              <div class="tack-div-item" v-for="item in jinduList">-->
+<!--                <div><el-progress :stroke-width="11" :width="70" type="circle" :percentage="item.percentage" /></div>-->
+<!--                <div class="item2">-->
+<!--                  <span style="font-size: 14px;color: #606266">本周任务总数</span>-->
+<!--                  <span style="font-size: 18px;color: #303133">{{item.lastWeekTime}}</span>-->
+<!--                </div>-->
+<!--                <div class="item2">-->
+<!--                  <span  style="font-size: 14px;color: #606266">已完成任务</span>-->
+<!--                  <span style="font-size: 18px;color:#2165F8;">{{item.finishTask}}</span>-->
+<!--                </div>-->
+<!--              </div>-->
             </div>
           </div>
 <!--          代办信息整体div-->
           <div class="right-div-top-right">
             <div style="padding: 29px 0 29px 23px;font-size: 18px;color: #303133">
-              代办信息
+              消息提示
             </div>
 <!--            一个个的代办信息整体div-->
             <div class="daiban-div">
@@ -146,7 +146,8 @@
 </template>
 
 <script setup>
-import {ref,reactive} from 'vue'
+import {ref,reactive,onMounted} from 'vue'
+import * as echarts from 'echarts';
 import control from "@/assets/icons/common/control.png";
 import control2 from "@/assets/icons/common/control2.png";
 const calendarValue = ref(new Date())
@@ -212,9 +213,93 @@ const isShowDot = (data)=>{
   return data === '2025-03-05' || data === '2025-03-24' || data === '2025-03-30' || data === '2025-03-11' || data === '2025-03-12';
 }
 
+//工时统计的echarts图
+const drawManHour = ()=>{
+  const div = document.getElementById('tack-div');
+  const myChart = echarts.init(div);
+
+  // 数据
+  const data = [
+    {value: 20, name: '东风本田'},
+    {value: 14, name: 'Psa'},
+    {value: 24, name: '师大管理'},
+    {value: 40, name: '顺丰快递'}
+  ];
+  // 计算 data 里 value 属性的总和
+  let total = 0;
+  for (let i = 0; i < data.length; i++) {
+    total += data[i].value;
+  }
+
+  let option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      top: 'center',
+      left: '70%',
+      align: 'left',
+      itemGap: 30
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: function () {
+            return '总工时\n' + total;
+          },
+          fontSize: 13,
+          fontWeight: 'bold'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 13,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  };
 
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option);
 
+  // 监听鼠标移入事件
+  myChart.on('mouseover', function (params) {
+    let option = myChart.getOption();
+    option.series[0].label.show = false;
+    option.series[0].emphasis.label.show = true;
+    option.series[0].emphasis.label.formatter = function () {
+      return params.name +"\n"+params.value;
+    };
+    myChart.setOption(option);
+  });
 
+  // 监听鼠标移出事件
+  myChart.on('mouseout', function () {
+    let option = myChart.getOption();
+    option.series[0].label.show = true;
+    option.series[0].emphasis.label.show = false;
+    option.series[0].label.formatter = function () {
+      return '总工时\n' + total;
+    };
+    myChart.setOption(option);
+  });
+}
+onMounted(()=>{
+  drawManHour()
+})
 </script>
 
 <style scoped lang="scss">
@@ -308,10 +393,7 @@ const isShowDot = (data)=>{
         padding-bottom: 20px;
         .tack-div{
           height: 76.5%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-between;
+
           .tack-div-item{
             height: 32%;
             display: flex;