新增学生和组委会工作台页面

jeecgboot-vue3-master/src/assets/icons/content.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720490595862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20690" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M105.54838701 557v275.80645195c0 47.90322597 43.54838701 88.54838701 98.70967793 88.54838701h621.29032207c53.70967705 0 98.70967705-39.19354805 98.70967793-88.54838701V555.54838701L105.54838701 557z" fill="#D3EAFF" p-id="20691"></path><path d="M514.90322597 684.74193506c-10.16129004 0-21.77419394-4.35483896-29.032258-11.61290303l-127.74193594-127.74193505c-15.967742-15.967742-15.967742-42.09677402 0-58.06451602s42.09677402-15.967742 58.06451602 0l98.70967792 98.70967704 149.51612901-149.51612899c15.967742-15.967742 42.09677402-15.967742 58.06451601 0s15.967742 42.09677402 0 58.06451601L543.93548398 673.12903203c-7.25806494 7.25806494-17.41935498 11.61290302-29.032258 11.61290303z" fill="#FFC13D" p-id="20692"></path><path d="M845.87096797 149.09677403H700.70967705V91.03225801c0-15.967742-13.06451602-29.032258-29.03225801-29.03225801s-29.032258 13.06451602-29.032258 29.032258v58.06451602H381.35483896V91.03225801c0-15.967742-13.06451602-29.032258-29.032258-29.03225801s-29.032258 13.06451602-29.03225801 29.032258v58.06451602H178.12903203c-63.87096797 0-116.12903203 52.25806494-116.12903203 116.12903203v580.64516192c0 63.87096797 52.25806494 116.12903203 116.12903203 116.12903203h667.74193594c63.87096797 0 116.12903203-52.25806494 116.12903203-116.12903203V265.22580605c0-63.87096797-52.25806494-116.12903203-116.12903203-116.12903203z m58.06451601 696.77419394c0 31.93548398-26.12903203 58.06451602-58.06451601 58.06451601H178.12903203c-31.93548398 0-58.06451602-26.12903203-58.06451601-58.06451601V265.22580605c0-31.93548398 26.12903203-58.06451602 58.06451601-58.06451602h145.16129092v43.54838702c0 15.967742 13.06451602 29.032258 29.03225801 29.03225801s29.032258-13.06451602 29.032258-29.03225801v-43.54838702h261.29032208v43.54838702c0 15.967742 13.06451602 29.032258 29.032258 29.03225801s29.032258-13.06451602 29.03225801-29.03225801v-43.54838702h145.16129092c31.93548398 0 58.06451602 26.12903203 58.06451601 58.06451602v580.64516192z" fill="#1890FF" p-id="20693"></path></svg>

jeecgboot-vue3-master/src/views/annualCompPoint/superAdmin/AnnualCompPointListPass.vue

@@ -2,23 +2,17 @@
   <div>
     <!--查询区域-->
     <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
-              :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24"> </a-row>
-        <a-row :gutter="24">
-        </a-row>
       </a-form>
     </div>
     <!--引用表格-->
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
-        </a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls"> 导入 </j-upload-button>
-        </a-button>
-        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
-          导入
-        </j-upload-button>
         <a-dropdown v-if="selectedRowKeys.length > 0">
           <template #overlay>
             <a-menu>
@@ -28,28 +22,27 @@
               </a-menu-item>
             </a-menu>
           </template>
-          <a-button>批量操作
+          <a-button
+            >批量操作
             <Icon icon="mdi:chevron-down"></Icon>
           </a-button>
         </a-dropdown>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)"/>
+        <TableAction :actions="getTableAction(record)" />
       </template>
       <!--字段回显插槽-->
-      <template #htmlSlot="{text}">
+      <template #htmlSlot="{ text }">
         <div v-html="text"></div>
       </template>
       <!--省市区字段回显插槽-->
-      <template #pcaSlot="{text}">
+      <template #pcaSlot="{ text }">
         {{ getAreaTextByCode(text) }}
       </template>
-      <template #fileSlot="{text}">
+      <template #fileSlot="{ text }">
-        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
-        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载 </a-button>
-                  size="small" @click="downloadFile(text)">下载
-        </a-button>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
@@ -58,33 +51,26 @@
 </template>
 
 <script lang="ts" name="AnnualCompPoint-annualCompPoint" setup>
-import {ref, reactive} from 'vue';
+  import { ref, reactive } from 'vue';
-import {BasicTable, useTable, TableAction} from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import {useListPage} from '/@/hooks/system/useListPage';
+  import { useListPage } from '/@/hooks/system/useListPage';
-import {columns} from './AnnualCompPoint.data';
+  import { columns } from './AnnualCompPoint.data';
-import {
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, updateApply } from './AnnualCompPoint.api';
-  list,
+  import { downloadFile } from '/@/utils/common/renderUtils';
-  deleteOne,
+  import AnnualCompPointModal from './components/AnnualCompPointModal.vue';
-  batchDelete,
+  import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
-  getImportUrl,
+  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
-  getExportUrl,
+  import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-  updateApply
+  import { router } from '/@/router';
-} from './AnnualCompPoint.api';
+  import { useRouter } from 'vue-router';
-import {downloadFile} from '/@/utils/common/renderUtils';
+  import { award } from '/@/views/award/AwardManagement.api.ts';
-import AnnualCompPointModal from './components/AnnualCompPointModal.vue'
-import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
-import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
-import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
-import {router} from "/@/router";
-import {useRouter} from "vue-router";
-import {award} from "/@/views/award/AwardManagement.api.ts";
 
-const formRef = ref();
+  const formRef = ref();
-const queryParam = reactive<any>({});
+  const queryParam = reactive<any>({});
-const toggleSearchStatus = ref<boolean>(false);
+  const toggleSearchStatus = ref<boolean>(false);
-const registerModal = ref();
+  const registerModal = ref();
-//注册table数据
+  //注册table数据
-const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
       title: '年度比赛项目管理',
       api: list,
@@ -97,161 +83,150 @@ const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
         fixed: 'right',
       },
       beforeFetch: (params) => {
-      queryParam.annualCompState=2;
+        queryParam.annualCompState = 2;
         return Object.assign(params, queryParam);
       },
     },
     exportConfig: {
-    name: "年度比赛项目管理",
+      name: '年度比赛项目管理',
       url: getExportUrl,
       params: queryParam,
     },
     importConfig: {
       url: getImportUrl,
-    success: handleSuccess
+      success: handleSuccess,
     },
-});
+  });
-const [registerTable, {
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
-  reload,
+    tableContext;
-  collapseAll,
+  const labelCol = reactive({
-  updateTableDataRecord,
+    xs: { span: 24 },
-  findTableDataRecord,
+    sm: { span: 7 },
-  getDataSource
+  });
-}, {rowSelection, selectedRowKeys}] = tableContext;
+  const wrapperCol = reactive({
-const labelCol = reactive({
+    xs: { span: 24 },
-  xs: {span: 24},
+    sm: { span: 16 },
-  sm: {span: 7},
+  });
-});
-const wrapperCol = reactive({
-  xs: {span: 24},
-  sm: {span: 16},
-});
 
-/**
+  /**
    * 新增事件
    */
-function handleAdd() {
+  function handleAdd() {
     registerModal.value.disableSubmit = false;
     registerModal.value.add();
-}
+  }
 
-/**
+  /**
    * 编辑事件
    */
-function handleEdit(record: Recordable) {
+  function handleEdit(record: Recordable) {
     registerModal.value.disableSubmit = false;
     registerModal.value.edit(record);
-}
+  }
 
-/**
+  /**
    * 详情
    */
-function handleDetail(record: Recordable) {
+  function handleDetail(record: Recordable) {
     registerModal.value.disableSubmit = true;
     registerModal.value.edit(record);
-}
+  }
 
-/**
+  /**
    * 年度项目管理 评奖
    */
-const  router = useRouter()
+  const router = useRouter();
-function pingjiang(record: Recordable) {
+  function pingjiang(record: Recordable) {
     // console.log(record.id)
-  award({annualCompid:record.id})
+    award({ annualCompid: record.id });
     router.push({
       path: '/award/AwardManagementList',
-    query: {id: record.id}
+      query: { id: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 报名管理
    */
-function applicationManage(record: Recordable) {
+  function applicationManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 选题管理
    */
-function topicManage(record: Recordable) {
+  function topicManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
 
-/**
+  /**
    * 年度项目管理 作品管理
    */
-function workManage(record: Recordable) {
+  function workManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
 
-/**
+  /**
    * 年度项目管理 评分管理
    */
-function scoreManage(record: Recordable) {
+  function scoreManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
 
-/**
+  /**
    * 年度项目管理 评奖管理
    */
-function awardManage(record: Recordable) {
+  function awardManage(record: Recordable) {
     router.push({
       path: '/workManage/works',
-    query: {annualCompPointId: record.id}
+      query: { annualCompPointId: record.id },
     });
-}
+  }
-
-
-
 
-/**
+  /**
    * 年度项目管理 提交审核按钮
    */
-function handleSubmitandApply(record: Recordable) {
+  function handleSubmitandApply(record: Recordable) {
-  updateApply({id: record.id, annualCompState: record.annualCompState}, handleSuccess);
+    updateApply({ id: record.id, annualCompState: record.annualCompState }, handleSuccess);
-}
+  }
 
-/**
+  /**
    * 删除事件
    */
-async function handleDelete(record) {
+  async function handleDelete(record) {
-  await deleteOne({id: record.id}, handleSuccess);
+    await deleteOne({ id: record.id }, handleSuccess);
-}
+  }
-
 
-/**
+  /**
    * 批量删除事件
    */
-async function batchHandleDelete() {
+  async function batchHandleDelete() {
-  await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
-}
+  }
 
-/**
+  /**
    * 成功回调
    */
-function handleSuccess() {
+  function handleSuccess() {
     (selectedRowKeys.value = []) && reload();
-}
+  }
 
-/**
+  /**
    * 操作栏
    */
-function getTableAction(record) {
+  function getTableAction(record) {
     const actions = [
       {
         label: '报名',
@@ -276,49 +251,47 @@ function getTableAction(record) {
       {
         label: '详情',
         onClick: handleDetail.bind(null, record),
-    }, {
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
           confirm: handleDelete.bind(null, record),
-      }
+        },
       },
     ];
     return actions;
-}
+  }
-
 
-/**
+  /**
    * 查询
    */
-function searchQuery() {
+  function searchQuery() {
     reload();
-}
+  }
 
-/**
+  /**
    * 重置
    */
-function searchReset() {
+  function searchReset() {
     formRef.value.resetFields();
     selectedRowKeys.value = [];
     //刷新数据
     reload();
-}
+  }
 
-/**
+  /**
    *  popup组件值改变事件
    */
-function setFieldsValue(map) {
+  function setFieldsValue(map) {
     Object.keys(map).map((key) => {
       queryParam[key] = map[key];
     });
-}
+  }
-
-
 </script>
 
 <style lang="less" scoped>
-.jeecg-basic-table-form-container {
+  .jeecg-basic-table-form-container {
     .table-page-search-submitButtons {
       display: block;
       margin-bottom: 24px;
@@ -333,10 +306,10 @@ function setFieldsValue(map) {
     .query-group-split-cust {
       width: 30px;
       display: inline-block;
-    text-align: center
+      text-align: center;
+    }
   }
-}
+  ::v-deep(.ant-table-row) {
-::v-deep(.ant-table-row) {
     height: 120px !important;
   }
 </style>

jeecgboot-vue3-master/src/views/depart/workbench/components/components/cardList.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="foo_card">
+    <!-- <div class="title"> 部门学生积分排名 </div> -->
+
+    <div class="table">
+      <div class="t_item t_head">
+        <div class="ranking">排名</div>
+        <div class="name">参赛院系</div>
+        <div class="total">报名人数</div>
+        <div class="operate">操作</div>
+      </div>
+      <div class="t_item t_con" v-for="(i,index) in props.data" :key="i">
+        <div class="ranking">
+          <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
+        </div>
+        <div class="name">{{ i.name }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="operate">详情</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          name: '机电学院',
+          sum: 100,
+          id:1,
+        },
+        {
+          name: '机电学院',
+          sum: 100,
+          id:2,
+        },
+        {
+          name: '机电学院',
+          sum: 100,
+          id:3,
+        },
+        {
+          name: '机电学院',
+          sum: 100,
+          id:1,
+        },
+        {
+          name: '机电学院',
+          sum: 100,
+          id:2,
+        },
+        {
+          name: '机电学院',
+          sum: 100,
+          id:3,
+        },
+      ],
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .foo_card {
+    width: 100%;
+    height: calc(502px - 58px);
+    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%;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+
+      &::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/depart/workbench/components/components/cardListFive.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="foo_card">
+    <!-- <div class="title"> 部门学生积分排名 </div> -->
+
+    <div class="table">
+      <div class="t_item t_head">
+        <!-- <div class="ranking">排名</div> -->
+        <div class="name">所有奖项</div>
+        <div class="total">比赛名称</div>
+        <div class="operate">积分</div>
+      </div>
+      <div class="t_item t_con" v-for="(i,index) in props.data" :key="i">
+        <!-- <div class="ranking">
+          <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
+        </div> -->
+        <div class="name">{{ i.name }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="operate">{{ i.id }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:1,
+        },
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:2,
+        },
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:3,
+        },
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:4,
+        },
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:5,
+        },
+        {
+          name: '一等奖',
+          sum: '全国计算机高级大赛',
+          id:6,
+        },
+      ],
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .foo_card {
+    width: 100%;
+    height: calc(502px - 58px);
+    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%;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+
+      &::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/depart/workbench/components/components/cardListFour.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="foo_card">
+    <!-- <div class="title"> 部门学生积分排名 </div> -->
+
+    <div class="table">
+      <div class="t_item t_head">
+        <!-- <div class="ranking">排名</div> -->
+        <div class="name">比赛名称</div>
+        <div class="total">比赛状态</div>
+        <div class="operate">操作</div>
+      </div>
+      <div class="t_item t_con" v-for="(i,index) in props.data" :key="i">
+        <!-- <div class="ranking">
+          <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
+        </div> -->
+        <div class="name">{{ i.name }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="operate">详情</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:1,
+        },
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:2,
+        },
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:3,
+        },
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:4,
+        },
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:5,
+        },
+        {
+          name: '全国计算机高级大赛',
+          sum: '比赛中',
+          id:6,
+        },
+      ],
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .foo_card {
+    width: 100%;
+    height: calc(502px - 58px);
+    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%;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+
+      &::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/depart/workbench/components/components/cardListThree.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="foo_card">
+    <!-- <div class="title"> 部门学生积分排名 </div> -->
+
+    <div class="table">
+      <div class="t_item t_head">
+        <!-- <div class="ranking">排名</div> -->
+        <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,index) in props.data" :key="i">
+        <!-- <div class="ranking">
+          <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
+        </div> -->
+        <div class="name">{{ i.name }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="operate">胡辣汤学院</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          name: '项目名称',
+          sum: 100,
+          id:1,
+        },
+        {
+          name: '项目名称',
+          sum: 100,
+          id:2,
+        },
+        {
+          name: '项目名称',
+          sum: 100,
+          id:3,
+        },
+        {
+          name: '项目名称',
+          sum: 100,
+          id:4,
+        },
+        {
+          name: '项目名称',
+          sum: 100,
+          id:5,
+        },
+        {
+          name: '项目名称',
+          sum: 100,
+          id:6,
+        },
+      ],
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .foo_card {
+    width: 100%;
+    height: calc(432px - 58px);
+    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%;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+
+      &::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/depart/workbench/components/components/cardListtow.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="foo_card">
+    <!-- <div class="title"> 部门学生积分排名 </div> -->
+
+    <div class="table">
+      <div class="t_item t_head">
+        <!-- <div class="ranking">排名</div> -->
+        <div class="name">报名学生</div>
+        <div class="total">学生号码</div>
+        <div class="operate">所在院系</div>
+      </div>
+      <div class="t_item t_con" v-for="(i,index) in props.data" :key="i">
+        <!-- <div class="ranking">
+          <div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div>
+        </div> -->
+        <div class="name">{{ i.name }}</div>
+        <div class="total">{{ i.sum }}</div>
+        <div class="operate">胡辣汤学院</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          name: '无糖',
+          sum: 100,
+          id:1,
+        },
+        {
+          name: '无糖',
+          sum: 100,
+          id:2,
+        },
+        {
+          name: '无糖',
+          sum: 100,
+          id:3,
+        },
+        {
+          name: '无糖',
+          sum: 100,
+          id:4,
+        },
+        {
+          name: '无糖',
+          sum: 100,
+          id:5,
+        },
+        {
+          name: '无糖',
+          sum: 100,
+          id:6,
+        },
+      ],
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .foo_card {
+    width: 100%;
+    height: calc(502px - 58px);
+    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%;
+      padding-left: 23px;
+      height: 57px;
+      line-height: 57px;
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+      position: relative;
+
+      &::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/depart/workbench/components/index.ts

@@ -1 +1,5 @@
 export {default as ChDepartment } from './chDepartment/index.vue'
+export {default as organizingCommittee } from './organizingCommittee.vue'
+export {default as student } from './student.vue'
+
+

jeecgboot-vue3-master/src/views/depart/workbench/components/organizingCommittee.vue

@@ -0,0 +1,488 @@
+<template>
+  <a-row :gutter="[24, 32]">
+    <a-col :lg="12" :xxl="6">
+      <div class="item">
+        <div class="card1">
+          <div class="title">
+            <div class="left">比赛届数</div>
+            <div class="right"><SvgIcon size="20" name="shizhong" /></div>
+          </div>
+          <div class="name">第三十届电子科技大赛</div>
+          <div class="total">共12届，当前第12届</div>
+        </div>
+      </div>
+    </a-col>
+    <a-col :lg="12" :xxl="6"
+      ><div class="item">
+        <div class="card2">
+          <div class="title">
+            <div class="left">参加比赛队伍数</div>
+            <div class="right"><SvgIcon size="20" name="content" /></div>
+          </div>
+          <div id="chart-content"></div>
+          <div class="total">本月比赛：0</div>
+        </div> </div
+    ></a-col>
+    <a-col :lg="12" :xxl="6"><div class="item">
+      <div class="card3">
+          <div class="title">
+            <div class="left">参赛人数</div>
+            <div class="right"><SvgIcon size="20" name="content" /></div>
+          </div>
+          <div class="name">1314</div>
+          <div class="total">
+            <div class="one">一等：11</div>
+            <div class="two">二等：1</div>
+            <div class="three">三等：1</div>
+          </div>
+        </div>
+    </div></a-col>
+    <a-col :lg="12" :xxl="6"><div class="item">
+      <div class="card4">
+          <div class="title">
+            <div class="left">比赛项目数</div>
+            <div class="right"><SvgIcon size="20" name="content" /></div>
+          </div>
+          <div class="name">12</div>
+          <div class="total">报名最多的项目是：项目三 地三十届电子科技大赛</div>
+        </div>
+    </div></a-col>
+  </a-row>
+
+  <a-row :gutter="[24, 32]">
+    <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
+      ><div class="Participation">
+        <a-card title="参赛院系人数排名" style="width: 100%; height: 100%">
+          <cardList />
+        </a-card> </div
+    ></a-col>
+    <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
+      ><div class="Participation">
+        <a-card title="报名学生列表" style="width: 100%; height: 100%">
+          <cardListTow />
+        </a-card> </div
+    ></a-col>
+  </a-row>
+  <a-row :gutter="[24, 32]">
+    <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
+      ><div class="content-card">
+        <a-card title="各项积分情况" style="width: 100%; height: 100%">
+          <div class="content-chart">
+            <div id="chart"></div>
+            <div class="content-list">
+              <div class="item" v-for="(item, index) in 6" :key="index">
+                <div class="sort" :class="index < 3 ? 'bgc' : ''">{{ index + 1 }}</div>
+                <div class="name">项目名{{ item }}</div>
+                <div class="code">1234分</div>
+              </div>
+            </div>
+          </div>
+        </a-card>
+      </div></a-col
+    >
+    <a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24"
+      ><div class="content-card">
+        <a-card title="各项详细数据" style="width: 100%; height: 100%">
+          <cardListThree />
+        </a-card> </div
+    ></a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '/@/components/Icon';
+  import { onMounted } from 'vue';
+  import cardList from './components/cardList.vue';
+  import cardListTow from './components/cardListtow.vue';
+  import cardListThree from './components/cardListThree.vue';
+  import echarts from '/@/utils/lib/echarts';
+  const throttle = (fn: any) => {
+    let timer: any;
+    return function () {
+      if (timer) {
+        return;
+      }
+      timer = setTimeout(() => {
+        fn();
+        clearTimeout(timer);
+        timer = null;
+      }, 1000);
+    };
+  };
+  const initContent = () => {
+    const myChart = echarts.init(document.getElementById('chart-content'));
+    const option = {
+      backgroundColor: 'transparent',
+      title: [
+        {
+          text: '111',
+        },
+      ],
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            color: '#57617B',
+          },
+        },
+      },
+      grid: {
+        left: '20px',
+        right: '0',
+        bottom: '0',
+        top: '20px',
+        containLabel: false,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          show: false,
+          axisLine: {
+            lineStyle: {
+              color: '#44607C',
+            },
+          },
+          axisLabel: {
+            show: false,
+            margin: 10,
+            textStyle: {
+              fontSize: 14,
+              color: '#D5CBE8',
+              fontWeight: 700,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ['一月','二月','三月','四月','五月'],
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name: '单位（%）',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'none',
+            },
+          },
+          axisLabel: {
+            margin: 10,
+            show: false,
+            textStyle: {
+              fontSize: 14,
+              color: '#3681B5',
+              fontWeight: 700,
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: '比赛队伍',
+          type: 'line',
+          smooth: true,
+          stack: '总量',
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          animationDelay: 2000,
+          animationDuration: 1000,
+          // markPoint: {
+          //   symbol:
+          //     'path://M783.136 180.064C771.872 168.832 757.152 160 742.4 160L281.6 160C266.848 160 252.128 168.832 240.864 180.064 229.632 191.328 224 209.248 224 224l0 460.8c0 14.752 5.632 26.272 16.864 37.536C252.128 733.568 266.848 736 281.6 736l115.2 0 115.2 115.2 115.2-115.2 115.2 0c14.752 0 29.472-2.432 40.736-13.664C794.368 711.072 800 699.552 800 684.8L800 224C800 209.248 794.368 191.328 783.136 180.064z',
+          //   symbolOffset: [0, '-100%'],
+          //   symbolSize: 35, //这里可以改变大小
+          //   data: [
+          //     {
+          //       type: 'max',
+          //       name: '最大值',
+          //     },
+          //   ],
+          //   label: {
+          //     offset: [0, -3],
+          //   },
+          //   animationDelay: 3000,
+          //   animationDuration: 1000,
+          // },
+          lineStyle: {
+            normal: {
+              width: 3,
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#5eb2ff', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#5eb2ff', // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺省为 false
+              },
+              opacity: 0.9,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: '#5eb2ff',
+                  },
+                  {
+                    offset: 0.8,
+                    color: '#5eb2ff',
+                  },
+                ],
+                false
+              ),
+              shadowColor: '#5eb2ff',
+              shadowBlur: 10,
+            },
+          },
+          // itemStyle: {
+          //   normal: {
+          //     color: '#3A5493',
+          //     borderColor: '',
+          //     borderWidth: 12,
+          //   },
+          // },
+          data: [23,12,45,9,30],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    let resize = throttle(() => {
+      myChart.resize();
+    });
+    window.addEventListener('resize', resize);
+  };
+  onMounted(() => {
+    initContent();
+    const myChart = echarts.init(document.getElementById('chart'));
+    const option = {
+      tooltip: {},
+      xAxis: {
+        type: 'category',
+        data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: [120, 200, 150, 80, 70, 110],
+          type: 'bar',
+        },
+      ],
+    };
+    myChart.setOption(option);
+    let resize = throttle(() => {
+      myChart.resize();
+    });
+    window.addEventListener('resize', resize);
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep .ant-row {
+    background-color: pink;
+    margin-top: 30px;
+  }
+  .item {
+    width: 100%;
+    height: 182px;
+    background-color: #fff;
+    border-radius: 15px;
+    overflow: hidden;
+    .card1 {
+      width: 100%;
+      height: 100%;
+      background-color: #018ffb;
+      padding: 20px;
+      .title {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .left {
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+      .name {
+        font-size: 32px;
+        color: #fff;
+        margin-top: 10px;
+      }
+      .total {
+        font-size: 12px;
+        color: #fff;
+        margin-top: 40px;
+      }
+      #chart {
+        width: 100%;
+        height: 80px;
+      }
+    }
+    .card2 {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+      .title {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .left {
+          font-size: 14px;
+          color: #fff;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      #chart-content {
+        width: 100%;
+        height: 80px;
+      }
+      .total{
+        margin-top: 10px;
+        font-size: 12px;
+        color: #000;
+      }
+    }
+    .card3 {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+      .title {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .left {
+          font-size: 14px;
+          color: #fff;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .name {
+        font-size: 42px;
+        font-weight: 500;
+        color: #000;
+        margin-top: 10px;
+      }
+      .total{
+        margin-top: 20px;
+        font-size: 12px;
+        color: #000;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+    .card4 {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+      .title {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .left {
+          font-size: 14px;
+          color: #fff;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .name {
+        font-size: 42px;
+        font-weight: 500;
+        color: #000;
+        margin-top: 10px;
+      }
+      .total{
+        margin-top: 20px;
+        font-size: 12px;
+        color: #000;
+
+      }
+    }
+  }
+  .Participation {
+    width: 100%;
+    height: 502px;
+    background-color: #fff;
+  }
+  .content-card {
+    width: 100%;
+    height: 432px;
+    background-color: #fff;
+    .content-chart {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      #chart {
+        flex: 1;
+        height: 100%;
+      }
+      .content-list {
+        width: 230px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 20px;
+        .item {
+          height: 45px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .sort {
+            width: 30px;
+            height: 30px;
+            background-color: #f5f5f5;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 30px;
+            font-weight: 700;
+          }
+          .bgc {
+            background-color: #314659;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  :deep .ant-card-body {
+    padding: 0;
+    width: 100%;
+    height: calc(100% - 58px);
+  }
+</style>

jeecgboot-vue3-master/src/views/depart/workbench/components/student.vue

@@ -0,0 +1,430 @@
+<template>
+  <div class="container-box">
+    <a-row :gutter="[24, 24]">
+      <a-col :xxl="12" :xl="12" :lg="24">
+        <a-row :gutter="[24, 24]" style="margin-top: 0">
+          <a-col :span="12">
+            <div class="card1">
+              <div class="title">
+                <div class="left">参赛人数</div>
+                <div class="right"><SvgIcon size="20" name="content" /></div>
+              </div>
+              <div class="name">1314</div>
+              <div class="total">
+                <div class="one">一等：11</div>
+                <div class="two">二等：1</div>
+                <div class="three">三等：1</div>
+              </div>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="card1">
+              <div class="title">
+                <div class="left">参赛人数</div>
+                <div class="right"><SvgIcon size="20" name="content" /></div>
+              </div>
+              <div class="name">1314</div>
+              <div class="total">
+                <div class="one">一等：11</div>
+                <div class="two">二等：1</div>
+                <div class="three">三等：1</div>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[0, 0]" style="margin-top: 24px">
+          <a-col :span="24">
+            <div class="render">
+              <a-card title="各维度积分" style="width: 100%; height: 100%">
+                <div class="render-box">
+                  <div class="left">
+                    <div id="render-chart"></div>
+                  </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-card>
+            </div>
+          </a-col>
+        </a-row>
+      </a-col>
+      <a-col :xxl="12" :xl="12" :lg="24">
+        <div class="right-list">
+          <a-card title="报名比赛" style="width: 100%; height: 100%">
+            <cardListFour />
+          </a-card>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[24, 24]">
+      <a-col :xxl="12" :xl="12" :lg="24"
+        ><div class="huojiangqingkuang">
+          <a-card title="获奖情况" style="width: 100%; height: 100%">
+            <div id="chart-huojiang"></div>
+          </a-card>
+        </div>
+      </a-col>
+      <a-col :xxl="12" :xl="12" :lg="24">
+        <div class="all-jiangxiang">
+          <a-card title="所有奖项" style="width: 100%">
+            <cardListFive />
+          </a-card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { SvgIcon } from '/@/components/Icon';
+  import cardListFour from './components/cardListFour.vue';
+  import cardListFive from './components/cardListFive.vue';
+  import echarts from '/@/utils/lib/echarts';
+
+  import { onMounted } from 'vue';
+  const throttle = (fn: any) => {
+    let timer: any;
+    return function () {
+      if (timer) {
+        return;
+      }
+      timer = setTimeout(() => {
+        fn();
+        clearTimeout(timer);
+        timer = null;
+      }, 1000);
+    };
+  }
+  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,
+    },
+  ];
+  const initChart = () => {
+    const myChart = echarts.init(document.getElementById('render-chart'));
+
+    var dataArr = [
+      {
+        value: [4000, 700, 3600, 3900, 1800, 4200, 700, 3600, 4200, 700, 3600, 4200, 700, 3600],
+        name: '1',
+        itemStyle: {
+          normal: {
+            lineStyle: {
+              color: '#55d7f2',
+            },
+            shadowColor: '#4A99FF',
+            shadowBlur: 10,
+          },
+        },
+        areaStyle: {
+          normal: {
+            // 单项区域填充样式
+            color: {
+              type: 'linear',
+              x: 1, //右
+              y: 0, //下
+              x2: 1, //左
+              y2: 1, //上
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#f0a223',
+                },
+                {
+                  offset: 1,
+                  color: '#093138',
+                },
+              ],
+              globalCoord: false,
+            },
+            opacity: 1, // 区域透明度
+          },
+        },
+      },
+    ];
+    var colorArr = ['#fff', '#fff']; //颜色
+    const option = {
+      backgroundColor: 'transparent',
+      color: colorArr,
+      tooltip: {
+        trigger: 'item',
+      },
+      radar: {
+        // shape: 'circle',
+        name: {
+          textStyle: {
+            color: '#9ca4a6',
+            fontSize: 12,
+          },
+        },
+        indicator: indicator,
+        splitArea: {
+          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+          show: true,
+          areaStyle: {
+            // 分隔区域的样式设置。
+            color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+          },
+        },
+        axisLine: {
+          //指向外圈文本的分隔线样式
+          lineStyle: {
+            color: '#2a5f61',
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#2a5f61', // 分隔线颜色
+            width: 1, // 分隔线线宽
+          },
+        },
+      },
+      series: [
+        {
+          type: 'radar',
+          symbolSize: 6,
+          symbol: 'circle',
+          data: dataArr,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    let resize = throttle(() => {
+      myChart.resize();
+    });
+    window.addEventListener('resize', resize);
+  };
+  const initHuojiangChart = () => {
+    const myChart = echarts.init(document.getElementById('chart-huojiang'));
+    const option = {
+      tooltip: {
+        trigger: 'item',
+      },
+    //   grid: {
+    //     left: '20px',
+    //     containLabel: false,
+    //   },
+      legend: {
+        type:"scroll",
+        orient: 'vertical',
+        left:'70%',
+        align:'left',
+        top:'middle',
+        textStyle: {
+            color:'#8C8C8C'
+        },
+        height:250
+      },
+      series: [
+        {
+          name: '获奖情况',
+          type: 'pie',
+          center: ['35%', '50%'],
+            radius: '80%',
+            label: {
+                normal: {
+                    show: false,
+                    position: 'outter',
+                     formatter:function (parms){
+                         return parms.data.value
+                     }
+                }
+            },
+            labelLine: {
+                show:false
+
+            },
+          data: [{ value: 1048, name: '一等奖' }, { value: 735, name: '二等奖' }, { value: 580, name: '三等奖' }],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    };
+    myChart.setOption(option);
+    let resize = throttle(() => {
+      myChart.resize();
+    });
+    window.addEventListener('resize', resize);
+  };
+  onMounted(() => {
+    initChart();
+    initHuojiangChart();
+  });
+</script>
+
+<style lang="less" scoped>
+  .container-box {
+    // padding: 20px;
+    .card1 {
+      width: 100%;
+      height: 182px;
+      background-color: #fff;
+      padding: 20px;
+      .title {
+        display: flex;
+        width: 100%;
+
+        justify-content: space-between;
+        .left {
+          font-size: 14px;
+          color: #fff;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .name {
+        font-size: 42px;
+        font-weight: 500;
+        color: #000;
+        margin-top: 10px;
+      }
+      .total {
+        margin-top: 20px;
+        font-size: 12px;
+        color: #000;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+    .render {
+      width: 100%;
+      height: 451px;
+      background-color: #fff;
+      .render-box {
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .left {
+          flex: 1;
+          #render-chart {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .right {
+          width: 300px;
+          display: flex;
+          align-items: center;
+          .content-left,
+          .content-right {
+            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;
+        }
+      }
+    }
+    .right-list {
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+    }
+    .huojiangqingkuang {
+      width: 100%;
+      height: 500px;
+      background-color: #fff;
+      #chart-huojiang {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .all-jiangxiang {
+      width: 100%;
+      height: 500px;
+      background-color: #fff;
+    }
+  }
+  :deep .ant-col {
+    // background-color: pink;
+    // margin-top: 30px;
+  }
+  :deep .ant-card-body {
+    padding: 0;
+    width: 100%;
+    height: calc(100% - 58px);
+  }
+</style>

jeecgboot-vue3-master/src/views/depart/workbench/index.vue

@@ -4,11 +4,18 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ChDepartment } from './components/index'
+import { ChDepartment,organizingCommittee ,student} from './components/index'
 function com(){
-    return ChDepartment
+    return student
 }
 </script>
 
 <style lang="less" scoped>
+:deep .ant-row{
+    margin-top: 30px;
+}
+.workbench{
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
 </style>