Merge branch 'main' of http://182.92.169.222:3000/zhc077/hnjd_comp

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/components/cardList3.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="foo_card3">
-    <div class="title"> 比赛学生参赛情况分析<SvgIcon class="icon" @click="unfold" name="zhedie" /></div>
+    <div class="title"> 比赛参赛情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div>
 
     <div class="table">
       <div class="t_item t_head">
         <div class="name">比赛名称</div>
-        <div class="total">比赛状态</div>
+        <div class="total">项目数</div>
+        <div class="total">获奖人数</div>
         <div class="operate">操作</div>
       </div>
       <div class="t_item t_con" v-for="(i) in 20" :key="i">
         <div class="name">全国高级计算机大赛</div>
-        <div class="total">比赛中</div>
+        <div class="total">1212</div>
-        <div class="operate">详情</div>
+        <div class="total">321</div>
+        <div class="operate">已结束</div>
       </div>
     </div>
   </div>

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/components/cardList7.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="foo_card7">
+    <div class="title"> 比赛获奖情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div>
+
+    <div class="table">
+      <div class="t_item t_head">
+        <div class="name">获奖等级</div>
+        <div class="total">项目名称</div>
+        <div class="total">所在小队</div>
+        <div class="operate">积分</div>
+      </div>
+      <div class="t_item t_con" v-for="(i) in 20" :key="i">
+        <div class="name">一等奖</div>
+        <div class="total">项目一</div>
+        <div class="total">一路向北</div>
+        <div class="operate">121</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '/@/components/Icon';
+
+  const props = defineProps({
+    data: {
+      type: Array,
+
+    },
+  });
+  let falg = false;
+  const unfold = () => {
+    const dom: any = document.querySelector('.foo_card7') as Element;
+    falg = !falg;
+    if (falg) {
+      dom.style.height = 'auto';
+    } else {
+      dom.style.height = '500px';
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .foo_card7 {
+    width: 100%;
+    height: 500px;
+    overflow: auto;
+    background: #ffffff;
+    // box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    // border-radius: 6px 6px 6px 6px;
+
+    .title {
+      width: 100%;
+      text-align: center;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+      .icon {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        cursor: pointer;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: rgba(5, 5, 5, 0.06);
+      }
+    }
+
+    .table {
+      width: 100%;
+      padding-left: 32px;
+
+      .t_item {
+        height: 54px;
+        border-bottom: 1px solid #e7e7e7;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .ranking {
+          width: 80px;
+        }
+
+        .name {
+          flex: 1;
+        }
+
+        .total {
+          width: 74px;
+          flex: 1;
+        }
+
+        .operate {
+          width: 80px;
+        }
+      }
+
+      .t_head {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+
+      .t_con {
+        .ranking {
+          .ol {
+            width: 24px;
+            height: 24px;
+            background: #e7e7e7;
+            color: rgba(0, 0, 0, 0.9);
+            font-size: 14px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 50%;
+
+            &.ac {
+              background: #0052d9;
+              color: rgba(255, 255, 255, 0.9);
+            }
+          }
+        }
+
+        .name {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.9);
+        }
+
+        .total {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.9);
+        }
+
+        .operate {
+          font-size: 14px;
+          color: #0052d9;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+</style>

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/components/cardList8.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="foo_card8">
+    <div class="title"> 比赛获奖情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div>
+
+    <div class="table">
+      <div class="t_item t_head">
+        <div class="name">部门名称</div>
+        <div class="total">参赛人数</div>
+        <div class="operate">队伍量</div>
+      </div>
+      <div class="t_item t_con" v-for="(i) in 20" :key="i">
+        <div class="name">机电学院</div>
+        <div class="total">2121</div>
+        <div class="operate">121</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '/@/components/Icon';
+
+  const props = defineProps({
+    data: {
+      type: Array,
+
+    },
+  });
+  let falg = false;
+  const unfold = () => {
+    const dom: any = document.querySelector('.foo_card8') as Element;
+    falg = !falg;
+    if (falg) {
+      dom.style.height = 'auto';
+    } else {
+      dom.style.height = '500px';
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .foo_card8 {
+    width: 100%;
+    height: 500px;
+    overflow: auto;
+    background: #ffffff;
+    // box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    // border-radius: 6px 6px 6px 6px;
+
+    .title {
+      width: 100%;
+      text-align: center;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+      .icon {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        cursor: pointer;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: rgba(5, 5, 5, 0.06);
+      }
+    }
+
+    .table {
+      width: 100%;
+      padding-left: 32px;
+
+      .t_item {
+        height: 54px;
+        border-bottom: 1px solid #e7e7e7;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .ranking {
+          width: 80px;
+        }
+
+        .name {
+          flex: 1;
+        }
+
+        .total {
+          width: 74px;
+          flex: 1;
+        }
+
+        .operate {
+          width: 80px;
+        }
+      }
+
+      .t_head {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+
+      .t_con {
+        .ranking {
+          .ol {
+            width: 24px;
+            height: 24px;
+            background: #e7e7e7;
+            color: rgba(0, 0, 0, 0.9);
+            font-size: 14px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 50%;
+
+            &.ac {
+              background: #0052d9;
+              color: rgba(255, 255, 255, 0.9);
+            }
+          }
+        }
+
+        .name {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.9);
+        }
+
+        .total {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.9);
+        }
+
+        .operate {
+          font-size: 14px;
+          color: #0052d9;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+</style>

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/components/pillarChart.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="ec_bar" ref="ec_bar"></div>
+</template>
+
+<script lang="ts" setup>
+  import echarts from '/@/utils/lib/echarts';
+
+  import { onMounted} from 'vue';
+  onMounted(() => {
+    const myChart = echarts.init(document.getElementById('ec_bar'))
+    const option = {
+        tooltip: {
+        trigger: 'axis', // 触发类型为坐标轴触发  
+        axisPointer: {
+            type: 'line',
+            label: {
+                backgroundColor: '#6a7985' // 自定义交叉线标签的背景色  
+            }
+        },
+        formatter: function (params) {
+            let result = '<div class="bar_card">';
+            result += `<div class="title">维度名称</div>`
+            params.forEach(param => {
+                result += `<div class="item" style="color: ${param.color};">
+                    ${param.seriesName}年 ${param.value}    
+                </div>`;
+            });
+            result += '</div>';
+            return result;
+        }
+    },
+    grid: {
+        left: '0%',
+        right: '0%',
+        top: '5%',
+        bottom: '50px',
+        // 如果需要，还可以设置containLabel来控制坐标轴标签是否完全包含在grid区域内  
+        containLabel: true
+    },
+    legend: {
+        data: ['2023', '2024'],
+        bottom: '20px',
+    },
+    xAxis: {
+        data: ['维度一', '维度一', '维度一', '维度一', '维度一', '维度一', '维度一']
+    },
+    yAxis: {
+        type: 'value',
+        min: 0,
+        max: 100,
+    },
+    series: [
+        {
+            name: '2023',
+            type: 'bar',
+            data: [33, 44, 58, 85, 47, 38, 45],
+            barWidth: '20px',
+            itemStyle: {
+                color: '#0052D9',
+            }
+        },
+        {
+            name: '2024',
+            type: 'bar',
+            data: [36, 34, 48, 62, 43, 30, 37],
+            barWidth: '20px',
+            itemStyle: {
+                color: '#699EF5',
+            }
+        },
+    ]
+    }
+    myChart.setOption(option)
+  })
+</script>
+
+<style lang="less" scoped>
+#ec_bar{
+    width: 100%;
+    height: 100%;
+}
+</style>

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/comprehensiveReport.vue

@@ -20,14 +20,43 @@
       >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
     >
     <div class="year-content">
-      <div class="left border-000">
+      <div class="year-content-top">
-        <div class="border-title">年度维度分析</div>
+        <div class="left border-000">
-        <randerChart />
+          <div class="border-title">年度维度分析</div>
+          <randerChart />
+        </div>
+        <div class="right border-000">
+          <cardList />
+        </div>
       </div>
-      <div class="right border-000">
+
-        <cardList />
+      <div class="zhuzhuangtu border-000">
+        <a-tabs v-model:activeKey="activeKey">
+          <a-tab-pane key="1" tab="全校近两年维度积分">
+            <div class="zhuzhuangtu-box">
+              <div class="left">
+                <pillarChart />
+              </div>
+              <div class="right">
+                <div class="content-left">
+                  <div class="item" v-for="(item, index) in indicator.slice(0, 6)" :key="index">
+                    <div class="sort" :class="index < 3 ? 'active' : ''">{{ index + 1 }}</div>
+                    <div class="text">{{ item.text }}</div>
+                  </div>
+                </div>
+                <div class="content-right">
+                  <div class="item" v-for="(item, index) in indicator.slice(-6)" :key="index">
+                    <div class="sort">{{ index + 1 }}</div>
+                    <div class="text">{{ item.text }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
       </div>
     </div>
+
     <cardTitle title="比赛学生参赛情况分析" />
     <p class="description"
       >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
@@ -62,13 +91,13 @@
       <div class="right border-000">
         <cardList4 />
       </div>
-      <div class="left border-000" style="height: auto;;">
+      <div class="left border-000" style="height: auto">
         <!-- <div class="border-title">年度维度分析</div> -->
         <cardList5 />
       </div>
     </div>
     <div class="footer border-000">
-<cardList6 />
+      <cardList6 />
     </div>
   </div>
 </template>
@@ -85,8 +114,59 @@
   import randerChart from './components/randerChart.vue';
   import cakeChart from './components/cakeChart.vue';
   import ringChart from './components/ringChart.vue';
-
+  import pillarChart from './components/pillarChart.vue';
-  // import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+  import { ref } from 'vue';
+  const activeKey = ref('1');
+  var indicator = [
+    {
+      text: '前言探索',
+      max: 6000,
+    },
+    {
+      text: '奠定基础',
+      max: 5000,
+    },
+    {
+      text: '知识分析',
+      max: 5000,
+    },
+    {
+      text: '社会责任',
+      max: 5000,
+    },
+    {
+      text: '独立思考',
+      max: 5500,
+    },
+    {
+      text: '拓宽视野',
+      max: 5000,
+    },
+    {
+      text: '激发兴趣',
+      max: 5000,
+    },
+    {
+      text: '沟通协调',
+      max: 5000,
+    },
+    {
+      text: '设计开发',
+      max: 5000,
+    },
+    {
+      text: '研判分析',
+      max: 5000,
+    },
+    {
+      text: '创新能力',
+      max: 5000,
+    },
+    {
+      text: '团队协作',
+      max: 5000,
+    },
+  ];
 </script>
 
 <style lang="less" scoped>
@@ -140,16 +220,69 @@
     .year-content {
       width: 100%;
       height: auto;
-      display: flex;
+
-      justify-content: space-between;
+      .year-content-top {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 500px;
+          height: 500px;
+        }
+        .right {
+          flex: 1;
+          height: auto;
+          margin-left: 50px;
+        }
+      }
+    }
+    .zhuzhuangtu {
+      .zhuzhuangtu-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+      width: 100%;
+      margin: 30px 0;
+      min-height: 400px;
+      padding: 0 20px;
+
       .left {
-        width: 500px;
+        width: 70%;
-        height: 500px;
+        height: 400px;
       }
       .right {
+        width: 30%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .content-left,
+        .content-right {
+            padding-left: 40px;
+          width: 100%;
+          .item {
+            display: flex;
+            align-items: center;
+            height: 30px;
+            margin: 10px 0;
+            .sort {
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              background-color: #f6f6f6;
+              text-align: center;
+              line-height: 20px;
+              margin-right: 10px;
+            }
+            .active {
+              color: #fff;
+              background-color: #32485a;
+            }
+          }
+        }
+      }
+      .right > div {
         flex: 1;
-        height: auto;
-        margin-left: 50px;
       }
     }
     .participation-status-content {
@@ -167,9 +300,9 @@
         height: auto;
       }
     }
-    .footer{
+    .footer {
-        width: 100%;
+      width: 100%;
-        margin: 30px 0;
+      margin: 30px 0;
     }
   }
   .border-000 {

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/department.vue

@@ -1,14 +1,315 @@
 <template>
-    <div>
+  <div class="container">
-        部门
+    <div class="title">河南机电学院比赛综合报告</div>
+    <p class="description"
+      >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+    >
+    <div class="card-content">
+      <div class="item" v-for="item in 4" :key="item">
+        <div class="top-title">本年度已开展比赛数</div>
+        <div class="sum">88</div>
+        <div class="content">
+          <div>国赛：12</div>
+          <div>国赛：12</div>
+          <div>国赛：12</div>
+        </div>
+      </div>
     </div>
+    <cardTitle title="比赛学生综合能力评价分析" />
+    <p class="description"
+      >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+    >
+    <div class="year-content">
+      <div class="year-content-top">
+        <div class="left border-000">
+          <div class="border-title">年度维度分析</div>
+          <randerChart />
+        </div>
+        <div class="right border-000">
+          <cardList />
+        </div>
+      </div>
+
+      <div class="zhuzhuangtu border-000">
+        <a-tabs v-model:activeKey="activeKey">
+          <a-tab-pane key="1" tab="全校近两年维度积分">
+            <div class="zhuzhuangtu-box">
+              <div class="left">
+                <pillarChart />
+              </div>
+              <div class="right">
+                <div class="content-left">
+                  <div class="item" v-for="(item, index) in indicator.slice(0, 6)" :key="index">
+                    <div class="sort" :class="index < 3 ? 'active' : ''">{{ index + 1 }}</div>
+                    <div class="text">{{ item.text }}</div>
+                  </div>
+                </div>
+                <div class="content-right">
+                  <div class="item" v-for="(item, index) in indicator.slice(-6)" :key="index">
+                    <div class="sort">{{ index + 1 }}</div>
+                    <div class="text">{{ item.text }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </div>
+
+    <cardTitle title="比赛学生参赛情况分析" />
+    <p class="description"
+      >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+    >
+    <div class="participation-status-content">
+      <div class="right border-000">
+        <cardList2 />
+      </div>
+      <div class="left border-000">
+        <!-- <div class="border-title">年度维度分析</div> -->
+        <cakeChart />
+      </div>
+    </div>
+    <cardTitle title="比赛学生获奖情况分析" />
+    <p class="description"
+      >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+    >
+    <div class="participation-status-content">
+      <div class="right border-000">
+        <cardList3 />
+      </div>
+      <div class="left border-000">
+        <!-- <div class="border-title">年度维度分析</div> -->
+        <ringChart />
+      </div>
+    </div>
+    <cardTitle title="部门参赛情况分析" />
+    <p class="description"
+      >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+    >
+    <div class="participation-status-content">
+      <div class="right border-000">
+        <cardList7 />
+      </div>
+     
+    </div>
+    <div class="footer border-000">
+      <cardList6 />
+    </div>
+  </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+  import cardTitle from './components/cardTitle.vue';
+  import cardList from './components/cardList.vue';
+  import cardList2 from './components/cardList2.vue';
+  import cardList3 from './components/cardList3.vue';
+  import cardList7 from './components/cardList8.vue';
+  import cardList6 from './components/cardList6.vue';
 
+  import randerChart from './components/randerChart.vue';
+  import cakeChart from './components/cakeChart.vue';
+  import ringChart from './components/ringChart.vue';
+  import pillarChart from './components/pillarChart.vue';
+  import { ref } from 'vue';
+  const activeKey = ref('1');
+  var indicator = [
+    {
+      text: '前言探索',
+      max: 6000,
+    },
+    {
+      text: '奠定基础',
+      max: 5000,
+    },
+    {
+      text: '知识分析',
+      max: 5000,
+    },
+    {
+      text: '社会责任',
+      max: 5000,
+    },
+    {
+      text: '独立思考',
+      max: 5500,
+    },
+    {
+      text: '拓宽视野',
+      max: 5000,
+    },
+    {
+      text: '激发兴趣',
+      max: 5000,
+    },
+    {
+      text: '沟通协调',
+      max: 5000,
+    },
+    {
+      text: '设计开发',
+      max: 5000,
+    },
+    {
+      text: '研判分析',
+      max: 5000,
+    },
+    {
+      text: '创新能力',
+      max: 5000,
+    },
+    {
+      text: '团队协作',
+      max: 5000,
+    },
+  ];
 </script>
 
-<style lang='scss' scoped>
+<style lang="less" scoped>
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+    // height: 100vh;
+    padding-bottom: 30px;
+    .title {
+      width: 100%;
+      font-size: 36px;
+      text-align: center;
+      font-weight: 700;
+    }
+    .description {
+      text-indent: 2em;
+      margin: 30px 0;
+    }
+    .card-content {
+      display: flex;
+      .item {
+        width: 25%;
+        height: 150px;
+        border: 1px solid #000;
+        margin-right: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 10px 15px;
+        .top-title {
+          font-size: 12px;
+          color: #aaa;
+        }
+        .sum {
+          font-size: 36px;
+          font-weight: 700;
+        }
+        .content {
+          display: flex;
+          width: 100%;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 12px;
+          color: #999;
+        }
+      }
+      .item:nth-child(4) {
+        margin: 0;
+      }
+    }
+    .year-content {
+      width: 100%;
+      height: auto;
+
+      .year-content-top {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 500px;
+          height: 500px;
+        }
+        .right {
+          flex: 1;
+          height: auto;
+          margin-left: 50px;
+        }
+      }
+    }
+    .zhuzhuangtu {
+      .zhuzhuangtu-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+      width: 100%;
+      margin: 30px 0;
+      min-height: 400px;
+      padding: 0 20px;
 
+      .left {
+        width: 70%;
+        height: 400px;
+      }
+      .right {
+        width: 30%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .content-left,
+        .content-right {
+            padding-left: 40px;
+          width: 100%;
+          .item {
+            display: flex;
+            align-items: center;
+            height: 30px;
+            margin: 10px 0;
+            .sort {
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              background-color: #f6f6f6;
+              text-align: center;
+              line-height: 20px;
+              margin-right: 10px;
+            }
+            .active {
+              color: #fff;
+              background-color: #32485a;
+            }
+          }
+        }
+      }
+      .right > div {
+        flex: 1;
+      }
+    }
+    .participation-status-content {
+      width: 100%;
+      height: auto;
+      display: flex;
+      justify-content: space-between;
+      .left {
+        width: 500px;
+        height: 500px;
+        margin-left: 50px;
+      }
+      .right {
+        flex: 1;
+        height: auto;
+      }
+    }
+    .footer {
+      width: 100%;
+      margin: 30px 0;
+    }
+  }
+  .border-000 {
+    border: 1px solid #000;
+  }
+  .border-title {
+    width: 100%;
+    border-bottom: 1px solid #000;
+    height: 50px;
+    line-height: 50px;
+    font-size: 14px;
+    padding: 0 20px;
+  }
 </style>

jeecgboot-vue3-master/src/views/comprehensiveEvaluation/organizingCommittee.vue

@@ -1,14 +1,159 @@
 <template>
-    <div>
+    <div class="container">
-        组委会
+      <div class="title">河南机电学院比赛综组委会报告</div>
-    </div>
+      <p class="description"
-</template>
+        >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
-
+      >
-<script lang='ts' setup>
+      <div class="card-content">
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+        <div class="item" v-for="(item,index) in 4" :key="item">
-
+          <div class="top-title">{{ formatTitle(index) }}</div>
-</script>
+          <div class="sum">{{ index === 0 ? '第八届': '88' }}</div>
+        </div>
+      </div>
+      <cardTitle title="参赛学生综合能力评价分析" />
+      <p class="description"
+        >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+      >
+      <div class="year-content">
+        <div class="left border-000">
+          <div class="border-title">年度维度分析</div>
+          <randerChart />
+        </div>
+        <div class="right border-000">
+          <cardList />
+        </div>
+      </div>
+      <cardTitle title="比赛学生获奖情况分析" />
+      <p class="description"
+        >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+      >
+      <div class="participation-status-content">
+        <div class="right border-000">
+            <cardList7 />
 
-<style lang='scss' scoped>
+        </div>
-
+       
-</style>
+      </div>
+      <cardTitle title="部门参赛情况分析" />
+      <p class="description"
+        >我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p
+      >
+      <div class="participation-status-content">
+        <div class="right border-000">
+          <cardList8 />
+        </div>
+       
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+    import cardTitle from './components/cardTitle.vue';
+    import cardList from './components/cardList.vue';
+    import cardList7 from './components/cardList7.vue';
+    import cardList8 from './components/cardList8.vue';
+    import randerChart from './components/randerChart.vue';
+  
+    // import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+    const formatTitle = (index:number) => {
+        const arr:any = ['当前届数','参赛人数','参赛队伍数','比赛项目数']
+        return arr[index]
+    }
+  </script>
+  
+  <style lang="less" scoped>
+    .container {
+      width: 1200px;
+      margin: 0 auto;
+      // height: 100vh;
+      padding-bottom: 30px;
+      .title {
+        width: 100%;
+        font-size: 36px;
+        text-align: center;
+        font-weight: 700;
+      }
+      .description {
+        text-indent: 2em;
+        margin: 30px 0;
+      }
+      .card-content {
+        display: flex;
+        .item {
+          width: 25%;
+          height: 100px;
+          border: 1px solid #000;
+          margin-right: 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          padding: 10px 15px;
+          .top-title {
+            font-size: 12px;
+            color: #aaa;
+          }
+          .sum {
+            font-size: 36px;
+            font-weight: 700;
+          }
+          .content {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            color: #999;
+          }
+        }
+        .item:nth-child(4) {
+          margin: 0;
+        }
+      }
+      .year-content {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 500px;
+          height: 500px;
+        }
+        .right {
+          flex: 1;
+          height: auto;
+          margin-left: 50px;
+        }
+      }
+      .participation-status-content {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 500px;
+          height: 500px;
+          margin-left: 50px;
+        }
+        .right {
+          flex: 1;
+          height: auto;
+        }
+      }
+      .footer{
+          width: 100%;
+          margin: 30px 0;
+      }
+    }
+    .border-000 {
+      border: 1px solid #000;
+    }
+    .border-title {
+      width: 100%;
+      border-bottom: 1px solid #000;
+      height: 50px;
+      line-height: 50px;
+      font-size: 14px;
+      padding: 0 20px;
+    }
+  </style>
+