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

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/components/Table/src/components/TableAction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[prefixCls, getAlign]" @click="onCellClick">
+  <div :class="[prefixCls, getAlign]" @click="onCellClick" class="setting">
     <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
       <template v-if="action.slot">
         <slot name="customButton"></slot>
@@ -19,183 +19,198 @@
 
       <Divider type="vertical" class="action-divider" v-if="divider && index < getActions.length - 1" />
     </template>
-    <Dropdown :trigger="['hover']" :dropMenuList="getDropdownList" popconfirm v-if="dropDownActions && getDropdownList.length > 0">
+    <Dropdown :trigger="['hover']" :dropMenuList="getDropdownList" popconfirm
+      v-if="dropDownActions && getDropdownList.length > 0">
       <slot name="more"></slot>
       <a-button type="link" size="small" v-if="!$slots.more"> 更多 <Icon icon="mdi-light:chevron-down"></Icon> </a-button>
     </Dropdown>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
-  import { MoreOutlined } from '@ant-design/icons-vue';
+import { MoreOutlined } from '@ant-design/icons-vue';
-  import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
+import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
+import Icon from '/@/components/Icon/index';
-  import { ActionItem, TableActionType } from '/@/components/Table';
+import { ActionItem, TableActionType } from '/@/components/Table';
-  import { PopConfirmButton } from '/@/components/Button';
+import { PopConfirmButton } from '/@/components/Button';
-  import { Dropdown } from '/@/components/Dropdown';
+import { Dropdown } from '/@/components/Dropdown';
-  import { useDesign } from '/@/hooks/web/useDesign';
+import { useDesign } from '/@/hooks/web/useDesign';
-  import { useTableContext } from '../hooks/useTableContext';
+import { useTableContext } from '../hooks/useTableContext';
-  import { usePermission } from '/@/hooks/web/usePermission';
+import { usePermission } from '/@/hooks/web/usePermission';
-  import { isBoolean, isFunction, isString } from '/@/utils/is';
+import { isBoolean, isFunction, isString } from '/@/utils/is';
-  import { propTypes } from '/@/utils/propTypes';
+import { propTypes } from '/@/utils/propTypes';
-  import { ACTION_COLUMN_FLAG } from '../const';
+import { ACTION_COLUMN_FLAG } from '../const';
-
+
-  export default defineComponent({
+export default defineComponent({
-    name: 'TableAction',
+  name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
+  components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
-    props: {
+  props: {
-      actions: {
+    actions: {
-        type: Array as PropType<ActionItem[]>,
+      type: Array as PropType<ActionItem[]>,
-        default: null,
+      default: null,
-      },
-      dropDownActions: {
-        type: Array as PropType<ActionItem[]>,
-        default: null,
-      },
-      divider: propTypes.bool.def(true),
-      outside: propTypes.bool,
-      stopButtonPropagation: propTypes.bool.def(false),
     },
-    setup(props) {
+    dropDownActions: {
-      const { prefixCls } = useDesign('basic-table-action');
+      type: Array as PropType<ActionItem[]>,
-      let table: Partial<TableActionType> = {};
+      default: null,
-      if (!props.outside) {
+    },
-        table = useTableContext();
+    divider: propTypes.bool.def(true),
-      }
+    outside: propTypes.bool,
+    stopButtonPropagation: propTypes.bool.def(false),
+  },
+  setup(props) {
+    const { prefixCls } = useDesign('basic-table-action');
+    let table: Partial<TableActionType> = {};
+    if (!props.outside) {
+      table = useTableContext();
+    }
 
-      const { hasPermission } = usePermission();
+    const { hasPermission } = usePermission();
-      function isIfShow(action: ActionItem): boolean {
+    function isIfShow(action: ActionItem): boolean {
-        const ifShow = action.ifShow;
+      const ifShow = action.ifShow;
 
-        let isIfShow = true;
+      let isIfShow = true;
 
-        if (isBoolean(ifShow)) {
+      if (isBoolean(ifShow)) {
-          isIfShow = ifShow;
+        isIfShow = ifShow;
-        }
-        if (isFunction(ifShow)) {
-          isIfShow = ifShow(action);
-        }
-        return isIfShow;
       }
+      if (isFunction(ifShow)) {
+        isIfShow = ifShow(action);
+      }
+      return isIfShow;
+    }
 
-      const getActions = computed(() => {
+    const getActions = computed(() => {
-        return (toRaw(props.actions) || [])
+      return (toRaw(props.actions) || [])
-          .filter((action) => {
+        .filter((action) => {
-            return hasPermission(action.auth) && isIfShow(action);
-          })
-          .map((action) => {
-            const { popConfirm } = action;
-            return {
-              getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
-              type: 'link',
-              size: 'small',
-              ...action,
-              ...(popConfirm || {}),
-              onConfirm: popConfirm?.confirm,
-              onCancel: popConfirm?.cancel,
-              enable: !!popConfirm,
-            };
-          });
-      });
-
-      const getDropdownList = computed((): any[] => {
-        //过滤掉隐藏的dropdown,避免出现多余的分割线
-        const list = (toRaw(props.dropDownActions) || []).filter((action) => {
           return hasPermission(action.auth) && isIfShow(action);
-        });
+        })
-        return list.map((action, index) => {
+        .map((action) => {
-          const { label, popConfirm } = action;
+          const { popConfirm } = action;
           return {
+            getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+            type: 'link',
+            size: 'small',
             ...action,
-            ...popConfirm,
+            ...(popConfirm || {}),
             onConfirm: popConfirm?.confirm,
             onCancel: popConfirm?.cancel,
-            text: label,
+            enable: !!popConfirm,
-            divider: index < list.length - 1 ? props.divider : false,
           };
         });
-      });
+    });
 
-      const getAlign = computed(() => {
+    const getDropdownList = computed((): any[] => {
-        const columns = (table as TableActionType)?.getColumns?.() || [];
+      //过滤掉隐藏的dropdown,避免出现多余的分割线
-        const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+      const list = (toRaw(props.dropDownActions) || []).filter((action) => {
-        return actionColumn?.align ?? 'left';
+        return hasPermission(action.auth) && isIfShow(action);
       });
-
+      return list.map((action, index) => {
-      function getTooltip(data: string | TooltipProps): TooltipProps {
+        const { label, popConfirm } = action;
         return {
-          getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+          ...action,
-          placement: 'bottom',
+          ...popConfirm,
-          ...(isString(data) ? { title: data } : data),
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          text: label,
+          divider: index < list.length - 1 ? props.divider : false,
         };
-      }
+      });
+    });
+
+    const getAlign = computed(() => {
+      const columns = (table as TableActionType)?.getColumns?.() || [];
+      const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+      return actionColumn?.align ?? 'left';
+    });
+
+    function getTooltip(data: string | TooltipProps): TooltipProps {
+      return {
+        getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+        placement: 'bottom',
+        ...(isString(data) ? { title: data } : data),
+      };
+    }
 
-      function onCellClick(e: MouseEvent) {
+    function onCellClick(e: MouseEvent) {
-        if (!props.stopButtonPropagation) return;
+      if (!props.stopButtonPropagation) return;
-        const path = e.composedPath() as HTMLElement[];
+      const path = e.composedPath() as HTMLElement[];
-        const isInButton = path.find((ele) => {
+      const isInButton = path.find((ele) => {
-          return ele.tagName?.toUpperCase() === 'BUTTON';
+        return ele.tagName?.toUpperCase() === 'BUTTON';
-        });
+      });
-        isInButton && e.stopPropagation();
+      isInButton && e.stopPropagation();
-      }
+    }
 
-      return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
+    return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
-    },
+  },
-  });
+});
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-action';
+@prefix-cls: ~'@{namespace}-basic-table-action';
+
+.@{prefix-cls} {
+  display: flex;
+  align-items: center;
+  /* update-begin-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
+  height: 22px;
+  /* update-end-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
 
-  .@{prefix-cls} {
+  .action-divider {
+    display: table;
+  }
+
+  &.left {
+    justify-content: flex-start;
+  }
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
+
+  button {
     display: flex;
     align-items: center;
-    /* update-begin-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
-    height: 22px;
-    /* update-end-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
-    
-    .action-divider {
-      display: table;
-    }
 
-    &.left {
+    span {
-      justify-content: flex-start;
+      margin-left: 0 !important;
     }
+  }
 
-    &.center {
+  button.ant-btn-circle {
-      justify-content: center;
+    span {
+      margin: auto !important;
     }
+  }
 
-    &.right {
+  .ant-divider,
-      justify-content: flex-end;
+  .ant-divider-vertical {
-    }
+    margin: 0 2px;
+  }
 
-    button {
+  .icon-more {
-      display: flex;
+    transform: rotate(90deg);
-      align-items: center;
 
-      span {
+    svg {
-        margin-left: 0 !important;
+      font-size: 1.1em;
-      }
+      font-weight: 700;
     }
+  }
+}
 
-    button.ant-btn-circle {
+.setting {
-      span {
-        margin: auto !important;
-      }
-    }
 
-    .ant-divider,
+  width: 100%;
-    .ant-divider-vertical {
-      margin: 0 2px;
-    }
 
-    .icon-more {
+  height: 100%;
-      transform: rotate(90deg);
 
-      svg {
+  display: flex;
-        font-size: 1.1em;
+
-        font-weight: 700;
+  flex-wrap: wrap;
-      }
+
-    }
+  align-items: center;
-  }
+
+}
 </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 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

@@ -1,203 +1,21 @@
 <template>
     <div class="workbench">
-        <div class="header">
+       <component :is="com()" />
-            <div class="card">
-                <div class="top">
-                    <div class="text">
-                        本年度已开展比赛数
-                    </div>
-                    <Icon icon="mainHome-time|svg" :size="20" />
-                </div>
-                <div class="center">
-                    <div class="text">
-                        67
-                    </div>
-                </div>
-                <div class="bottom">
-                    <div class="bot_card">国赛：12</div>
-                    <div class="bot_card">省赛：12</div>
-                    <div class="bot_card">校赛：24</div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="top">
-                    <div class="text">
-                        本年度已开展比赛数
-                    </div>
-                    <Icon icon="mainHome-time|svg" :size="20" />
-                </div>
-                <div class="center">
-                    <div class="text">
-                        67
-                    </div>
-                </div>
-                <div class="bottom">
-                    <div class="bot_card">国赛：12</div>
-                    <div class="bot_card">省赛：12</div>
-                    <div class="bot_card">校赛：24</div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="top">
-                    <div class="text">
-                        本年度已开展比赛数
-                    </div>
-                    <Icon icon="mainHome-time|svg" :size="20" />
-                </div>
-                <div class="center">
-                    <div class="text">
-                        67
-                    </div>
-                </div>
-                <div class="bottom">
-                    <div class="bot_card">国赛：12</div>
-                    <div class="bot_card">省赛：12</div>
-                    <div class="bot_card">校赛：24</div>
-                </div>
-            </div>
-            <div class="card">
-                <div class="top">
-                    <div class="text">
-                        本年度已开展比赛数
-                    </div>
-                    <Icon icon="mainHome-time|svg" :size="20" />
-                </div>
-                <div class="center">
-                    <div class="text">
-                        67
-                    </div>
-                </div>
-                <div class="bottom">
-                    <div class="bot_card">国赛：12</div>
-                    <div class="bot_card">省赛：12</div>
-                    <div class="bot_card">校赛：24</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="content">
-            <div class="con_left"></div>
-            <div class="con_right"></div>
-        </div>
-
-        <div class="footer">
-            <div class="foo_card"></div>
-            <div class="foo_card"></div>
-        </div>
     </div>
 </template>
 <script lang="ts" setup>
-
+import { ChDepartment,organizingCommittee ,student} from './components/index'
+function com(){
+    return student
+}
 </script>
 
 <style lang="less" scoped>
-.workbench {
+:deep .ant-row{
-    padding: 16px 16px 0;
+    margin-top: 30px;
-
+}
-    &>* {
+.workbench{
-        display: flex;
+    padding: 0 20px;
-        justify-content: space-between;
+    margin-bottom: 20px;
-    }
-
-    .header {
-        .card {
-            width: 405px;
-            height: 182px;
-            background: #FFFFFF;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
-            border-radius: 4px 4px 4px 4px;
-            padding: 20px 24px 0;
-
-            .top {
-                display: flex;
-                justify-content: space-between;
-
-                .text {
-                    height: 22px;
-                    font-family: Inter, Inter;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: rgba(0, 0, 0, 0.45);
-                    line-height: 22px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-
-            .center {
-                margin-top: 4px;
-                width: 357px;
-                height: 78px;
-                border-radius: 0px 0px 0px 0px;
-                display: flex;
-                align-items: center;
-
-                .text {
-                    height: 38px;
-                    font-family: Inter, Inter;
-                    font-weight: 400;
-                    font-size: 48px;
-                    color: rgba(51, 51, 51, 0.88);
-                    line-height: 38px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-
-            .bottom {
-                margin-top: 18px;
-                display: flex;
-                justify-content: space-between;
-
-                .bot_card {
-                    width: 91px;
-                    height: 22px;
-                    font-family: Inter, Inter;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: rgba(51, 51, 51, 0.88);
-                    line-height: 22px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-        }
-    }
-
-    .content {
-        margin-top: 16px;
-
-        .con_left {
-            width: 489px;
-            height: 459px;
-            background: #FFFFFF;
-            border-radius: 2px 2px 2px 2px;
-            border: 1px solid #F0F0F0;
-        }
-
-        .con_right {
-            width: 1160px;
-            height: 458px;
-            background: #FFFFFF;
-            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-            border-radius: 4px 4px 4px 4px;
-        }
-    }
-
-    .footer {
-        margin-top: 21px;
-
-        .foo_card {
-            width: 820px;
-            height: 502px;
-            background: #FFFFFF;
-            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-            border-radius: 6px 6px 6px 6px;
-        }
-    }
-
 }
 </style>