Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

首页部分

This commit is contained in:
hh 2024-03-26 17:33:19 +08:00
parent c7569fcfa9
commit e1f887e055
3 changed files with 241 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

389
src/layouts/default/header/index.vue
View File

@ -3,15 +3,11 @@
<!-- left start --> <!-- left start -->
<div :class="`${prefixCls}-left`"> <div :class="`${prefixCls}-left`">
<!-- logo --> <!-- logo -->
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" /> <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme"
<LayoutTrigger :style="getLogoWidth" />
v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile" <LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
:theme="getHeaderTheme" :theme="getHeaderTheme" :sider="false" />
:sider="false"
/>
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" /> <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
<!-- 欢迎语 -->
<span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> 欢迎进入 {{ title }} </span>
</div> </div>
<!-- left end --> <!-- left end -->
@ -26,214 +22,223 @@
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" /> <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" /> <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
<UserDropDown :theme="getHeaderTheme" /> <UserDropDown :theme="getHeaderTheme" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
</div> </div>
</Header> </Header>
<LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect> <LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue'; import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
import { useGlobSetting } from '/@/hooks/setting'; import { useGlobSetting } from '/@/hooks/setting';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
import { Layout } from 'ant-design-vue'; import { Layout } from 'ant-design-vue';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '/@/components/Application';
import LayoutMenu from '../menu/index.vue'; import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue'; import LayoutTrigger from '../trigger/index.vue';
import { AppSearch } from '/@/components/Application'; import { AppSearch } from '/@/components/Application';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { SettingButtonPositionEnum } from '/@/enums/appEnum'; import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { AppLocalePicker } from '/@/components/Application'; import { AppLocalePicker } from '/@/components/Application';
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components'; import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale'; import { useLocale } from '/@/locales/useLocale';
import LoginSelect from '/@/views/sys/login/LoginSelect.vue'; import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export default defineComponent({ export default defineComponent({
name: 'LayoutHeader', name: 'LayoutHeader',
components: { components: {
Header: Layout.Header, Header: Layout.Header,
AppLogo, AppLogo,
LayoutTrigger, LayoutTrigger,
LayoutBreadcrumb, LayoutBreadcrumb,
LayoutMenu, LayoutMenu,
UserDropDown, UserDropDown,
AppLocalePicker, AppLocalePicker,
FullScreen, FullScreen,
Notify, Notify,
AppSearch, AppSearch,
ErrorAction, ErrorAction,
LockScreen, LockScreen,
LoginSelect, LoginSelect,
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), { SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
loading: true, loading: true,
}), }),
}, },
props: { props: {
fixed: propTypes.bool, fixed: propTypes.bool,
}, },
setup(props) { setup(props) {
const { prefixCls } = useDesign('layout-header'); const { prefixCls } = useDesign('layout-header');
const userStore = useUserStore(); const userStore = useUserStore();
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting(); const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting(); const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
const { title } = useGlobSetting(); const { title } = useGlobSetting();
const { const {
getHeaderTheme, getHeaderTheme,
getShowFullScreen, getShowFullScreen,
getShowNotice, getShowNotice,
getShowContent, getShowContent,
getShowBread, getShowBread,
getShowHeaderLogo, getShowHeaderLogo,
getShowHeader, getShowHeader,
getShowSearch, getShowSearch,
getUseLockPage, getUseLockPage,
getShowBreadTitle, getShowBreadTitle,
} = useHeaderSetting(); } = useHeaderSetting();
const { getShowLocalePicker } = useLocale(); const { getShowLocalePicker } = useLocale();
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const getHeaderClass = computed(() => { const getHeaderClass = computed(() => {
const theme = unref(getHeaderTheme); const theme = unref(getHeaderTheme);
return [ return [
prefixCls,
{
[`${prefixCls}--fixed`]: props.fixed,
[`${prefixCls}--mobile`]: unref(getIsMobile),
[`${prefixCls}--${theme}`]: theme,
},
];
});
const getShowSetting = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return unref(getShowHeader);
}
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
});
const getLogoWidth = computed(() => {
if (!unref(getIsMixMode) || unref(getIsMobile)) {
return {};
}
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
return { width: `${width}px` };
});
const getSplitType = computed(() => {
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
});
const getMenuMode = computed(() => {
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
});
/**
* 首页多租户部门弹窗逻辑
*/
const loginSelectRef = ref();
function showLoginSelect() {
//update-begin---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
//判断是否是登陆进来
const loginInfo = toRaw(userStore.getLoginInfo) || {};
if (!!loginInfo.isLogin) {
loginSelectRef.value.show(loginInfo);
}
//update-end---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
}
function loginSelectOk() {
console.log('成功。。。。。');
}
onMounted(() => {
showLoginSelect();
});
return {
prefixCls, prefixCls,
getHeaderClass, {
getShowHeaderLogo, [`${prefixCls}--fixed`]: props.fixed,
getHeaderTheme, [`${prefixCls}--mobile`]: unref(getIsMobile),
getShowHeaderTrigger, [`${prefixCls}--${theme}`]: theme,
getIsMobile, },
getShowBreadTitle, ];
getShowBread, });
getShowContent,
getSplitType, const getShowSetting = computed(() => {
getSplit, if (!unref(getShowSettingButton)) {
getMenuMode, return false;
getShowTopMenu, }
getShowLocalePicker, const settingButtonPosition = unref(getSettingButtonPosition);
getShowFullScreen,
getShowNotice, if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
getUseErrorHandle, return unref(getShowHeader);
getLogoWidth, }
getIsMixSidebar, return settingButtonPosition === SettingButtonPositionEnum.HEADER;
getShowSettingButton, });
getShowSetting,
getShowSearch, const getLogoWidth = computed(() => {
getUseLockPage, if (!unref(getIsMixMode) || unref(getIsMobile)) {
loginSelectOk, return {};
loginSelectRef, }
title const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
}; return { width: `${width}px` };
}, });
});
const getSplitType = computed(() => {
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
});
const getMenuMode = computed(() => {
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
});
/**
* 首页多租户部门弹窗逻辑
*/
const loginSelectRef = ref();
function showLoginSelect() {
//update-begin---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
//判断是否是登陆进来
const loginInfo = toRaw(userStore.getLoginInfo) || {};
if (!!loginInfo.isLogin) {
loginSelectRef.value.show(loginInfo);
}
//update-end---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
}
function loginSelectOk() {
console.log('成功。。。。。');
}
onMounted(() => {
showLoginSelect();
});
return {
prefixCls,
getHeaderClass,
getShowHeaderLogo,
getHeaderTheme,
getShowHeaderTrigger,
getIsMobile,
getShowBreadTitle,
getShowBread,
getShowContent,
getSplitType,
getSplit,
getMenuMode,
getShowTopMenu,
getShowLocalePicker,
getShowFullScreen,
getShowNotice,
getUseErrorHandle,
getLogoWidth,
getIsMixSidebar,
getShowSettingButton,
getShowSetting,
getShowSearch,
getUseLockPage,
loginSelectOk,
loginSelectRef,
title,
t
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@import './index.less'; @import './index.less';
//update-begin---author:scott ---date:2022-09-30 for：默认隐藏顶部菜单面包屑----------- //update-begin---author:scott ---date:2022-09-30 for：默认隐藏顶部菜单面包屑-----------
//顶部欢迎语展示样式 //顶部欢迎语展示样式
@prefix-cls: ~'@{namespace}-layout-header'; @prefix-cls: ~'@{namespace}-layout-header';
.ant-layout .@{prefix-cls} { .ant-layout .@{prefix-cls} {
display: flex; display: flex;
padding: 0 8px; padding: 0 8px;
height: 48px; height: 48px;
align-items: center; align-items: center;
.headerIntroductionClass {
margin-right: 4px;
margin-bottom: 2px;
border-bottom: 0px;
border-left: 0px;
}
&--light {
.headerIntroductionClass { .headerIntroductionClass {
margin-right: 4px; color: @breadcrumb-item-normal-color;
margin-bottom: 2px;
border-bottom: 0px;
border-left: 0px;
} }
}
&--light {
.headerIntroductionClass { &--dark {
color: @breadcrumb-item-normal-color; .headerIntroductionClass {
} color: rgba(255, 255, 255, 0.6);
} }
&--dark { .anticon,
.headerIntroductionClass { .truncate {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.8);
}
.anticon, .truncate {
color: rgba(255, 255, 255, 0.8);
}
} }
//update-end---author:scott ---date::2022-09-30 for：默认隐藏顶部菜单面包屑--------------
} }
//update-end---author:scott ---date::2022-09-30 for：默认隐藏顶部菜单面包屑--------------
}
</style> </style>

3
src/layouts/default/sider/MixSider.vue
View File

@ -49,8 +49,7 @@
}, },
]" ]"
> >
<span class="text"> {{ title }}</span> <span class="text" style="margin-left: 15px;"> {{ title }}</span>
<Icon :size="16" :icon="getMixSideFixed ? 'ri:pushpin-2-fill' : 'ri:pushpin-2-line'" class="pushpin" @click="handleFixedMenu" />
</div> </div>
<ScrollContainer :class="`${prefixCls}-menu-list__content`"> <ScrollContainer :class="`${prefixCls}-menu-list__content`">
<SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menuClick="handleMenuClick" /> <SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menuClick="handleMenuClick" />

58
src/views/dashboard/Analysis/index.vue
View File

@ -1,25 +1,45 @@
<template> <template>
<div> <div style="background: #ececec; padding: 25px">
<p class="title">中英足球联赛上座情况</p> <a-card title="四六级总通过率查询" :bordered="false">
<a-row :gutter="24"> <template #extra>
<a-col :xl="12" :style="{ marginBottom: '24px' }"> <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select>
<div class="container"> <a-select v-model:value="entrydate" style="margin-left: 15px;width: 100px"
<div id="map1" style="width: 660px; height: 400px"></div> :options="entrydateOptions"></a-select>
</div> </template>
</a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }"> <a-row :gutter="24">
<div class="container"> <a-col :xl="12" :style="{ marginBottom: '24px' }">
<div id="map2" style="width: 660px; height: 400px"></div> <div class="container">
</div> <div id="map1" style="width: 660px; height: 400px"></div>
</a-col> </div>
</a-row> </a-col>
<a-col :xl="12" :style="{ marginBottom: '24px' }">
<div class="container">
<div id="map2" style="width: 660px; height: 400px"></div>
</div>
</a-col>
</a-row>
</a-card>
</div> </div>
</template> </template>
<script> <script>
import { defHttp } from '/@/utils/http/axios';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: "Analysis",
data() {
return {
Url: {
getGradeAndCollegeData: '/cet/getGradeAndCollege',
},
collegeOptions: [],
entrydateOptions: [],
college: null,
entrydate: null
};
},
methods: { methods: {
map1Chart() { map1Chart() {
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 // 基于准备好的dom，初始化echarts实例 这个和上面的main对应
@ -119,8 +139,17 @@ export default {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(option);
}, },
// 获取年级和学院数据
async getGradeAndCollegeData() {
const data = await defHttp.get({ url: this.Url.getGradeAndCollegeData });
this.collegeOptions = data.colleges;
this.college= this.collegeOptions[0].value;
this.entrydateOptions = data.entrydates;
this.entrydate = this.entrydateOptions[0].value;
}
}, },
mounted() { mounted() {
this.getGradeAndCollegeData();
this.map1Chart(); this.map1Chart();
this.map2Chart(); this.map2Chart();
} }
@ -142,5 +171,4 @@ export default {
color: rgb(8, 8, 8); color: rgb(8, 8, 8);
font-weight: bold; font-weight: bold;
} }
</style> </style>