WxxyDeveloper/JSL_OrganizeInternalOAWeb_Archive
9
0
Fork 0
mirror of https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git synced 2025-06-08 03:33:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

管理界面完善4

Browse Source
This commit is contained in:
妖姐 2024-01-20 19:16:12 +08:00
parent e9315276d3
commit 658e6799f6
3 changed files with 156 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/manager/Data/Index.vue
View File

@ -1,36 +1,76 @@
<template>
<Grid square width="80vw">
<GridItem>1</GridItem>
<GridItem>2</GridItem>
<GridItem>3</GridItem>
<GridItem>4</GridItem>
<GridItem>5</GridItem>
<GridItem>6</GridItem>
</Grid>
<Row style="left: 800px">
<Col span="12">
<div style="background-color: #eeeeee;width: 87vw;height: 85vh">
<div style="display: flex;flex-direction: row;width: 87vw;margin-top: 20px;height: 30vh">
<Row style="background:white;padding:20px;width: 65vw;height: 200px;margin-right: 20px;border-radius: 10px">
<Col span="11" >
<Card :bordered="false" style="width: 300px;background-color: #edf4ff">
<template #title>网站设计</template>
<p>进度</p>
<Space direction="vertical" type="flex">
<Progress :percent="45" status="active" />
</Space>
<AvatarList :list="list" />
</Card>
</Col>
<Col span="11" offset="2">
<Card :bordered="false" style="width: 300px;position: relative;left:-200px; background-color: #edf4ff">
<template #title>小程序设计</template>
<p>进度</p>
<Space direction="vertical" type="flex">
<Progress :percent="60" status="active" stroke-color="orange"/>
</Space>
<AvatarList :list="list" />
</Card>
</Col>
<Col span="11" offset="2">
<Card :bordered="false" style="width: 300px;position: relative;top:-138px;left:553px;background-color: #edf4ff">
<template #title>后台设计</template>
<p>进度</p>
<Space direction="vertical" type="flex" >
<Progress :percent="80" status="active" stroke-color="green"/>
</Space>
<AvatarList :list="list" />
</Card>
</Col>
</Row>
<Row style="width:22vw ;height: 200px;background-color: paleturquoise;border-radius: 10px;">
<Col span="12" style="top:50px">
<NumberInfo sub-title="近7日活跃设备" total="12,321" sub-total="17.1" status="up" />
</Col>
<Col span="12">
<Col span="12" style="top:50px">
<NumberInfo sub-title="近30日活跃设备" total="50,193" sub-total="5.3" status="down" />
</Col>
</Row>
<div style="display: flex; flex-direction: row; ">
<Carousel autoplay v-model="value" loop style="height: 500px; width: 500px; background-color: aqua">
<CarouselItem>
<div class="demo-carousel">1</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">2</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">3</div>
</CarouselItem>
<CarouselItem>
<div class="demo-carousel">4</div>
</CarouselItem>
</Carousel>
</div>
<div style="width: 87vw;display: flex;flex-direction: row;margin-top: 15px;height:47vh;background-color: white;margin-right: 20px">
<DescriptionList title="标题" layout="vertical" style="width: 87vw; margin-top: 20px;font-size: 15px;margin-left: 10px">
<Description term="Macintosh：" style="background-color: #f5f7f9;height: 39vh;" @click="changecolor">
麦金塔电脑，是苹果电脑其中一系列的个人电脑。Macintosh 是由 Macintosh 计划发起人 Jeff Raskin（杰夫·拉斯金）根据他最爱的苹果品种 McIntosh 命名，但为了避免与音频设备制造商麦金托什实验室（McIntosh Laboratory)的名字有冲突，他故意改变了字母的拼写。
</Description>
<Description term="Lisa：" style="background-color: #f5f7f9;height: 39vh;width:22vw;">
Lisa 是一款具有划时代意义的电脑，可以说没有 Lisa 就没有 Macintosh（在Mac的开发早期，很多系统软件都是在Lisa上设计的）。她具有16位CPU，鼠标，硬盘，以及支持图形用户界面和多任务的操作系统。并且随机捆绑了7个商用软件。
</Description>
<Description term="Newton：" style="background-color: #f5f7f9;height: 39vh;width:22vw">
Apple Newton（牛顿），是世界上第一款掌上电脑（PDA），由苹果电脑公司于1993年开始制造，但是因为newton在市场上找不到其定位而需求量低而停止发展，并于1997年停止了生产。
</Description>
</DescriptionList>
<!-- <div style="width: 22vw ;height:47vh;background-color: beige;border-radius: 10px" >-->
<!--<span>在线状态预览</span>-->
<!-- </div>-->
</div>
<div style="display: flex; flex-direction: column;height: 8vh;width: 87vw;background-color: #5885a8;margin-top: 6px;">
<div style="text-align: center;display: flex;flex-direction: row;justify-content: center;align-content: center ;padding: 5px">
<span style="padding-right: 5px">帮助</span>
<Icon style="font-size: 20px;padding-right:5px " type="logo-tux" />
<span style="padding-right: 5px">条款</span>
</div>
<div style="text-align: center">Copyright © 2022 View Design All Rights Reserved'</div>
</div>
</div>
</template>
@ -39,8 +79,65 @@
<script setup>
import {Carousel, CarouselItem, GridItem, NumberInfo, Row} from "view-ui-plus";
import {ref} from "vue";
import {
AvatarList,
Card,
Carousel,
CarouselItem, Description,
DescriptionList, GlobalFooter,
GridItem, Icon,
NumberInfo,
Row,
Space,
} from "view-ui-plus";
import {reactive, ref} from "vue";
const value = ref(0)
const data = reactive({
list: [
{
src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
tip: '史蒂夫·乔布斯'
},
{
src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
tip: '斯蒂夫·沃兹尼亚克'
},
{
src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
tip: '乔纳森·伊夫'
}
],
})
const datatwo = reactive({
links: [
{
key: '帮助',
title: '帮助',
href: 'https://www.iviewui.com',
blankTarget: true
},
{
key: 'github',
icon: 'logo-github',
href: 'https://github.com/view-design/ViewUIPlus',
blankTarget: true
},
{
key: '条款',
title: '条款',
href: '',
blankTarget: true
}
],
copyright: 'Copyright © 2022 View Design All Rights Reserved'
});
</script>

27
src/manager/Data/RoleManage.vue
View File

@ -1,20 +1,29 @@
<template>
<Switch v-model="value" @on-change="change" />
<AvatarList :list="list" />
</template>
<script>
import {Switch} from "view-ui-plus";
import {AvatarList} from "view-ui-plus";
export default {
components: {Switch},
components: {AvatarList},
data () {
return {
value: false
}
},
methods: {
change (status) {
this.$Message.info('开关状态：' + status);
list: [
{
src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
tip: '史蒂夫·乔布斯'
},
{
src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
tip: '斯蒂夫·沃兹尼亚克'
},
{
src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
tip: '乔纳森·伊夫'
}
]
}
}
}
</script>

26
src/manager/LeftBar.vue
View File

@ -30,31 +30,31 @@ Submenu>MenuItem{
系统管理
</template>
<MenuItem name="1-1" @click="navigateTo('/manager/UserManage')" style="text-align: center;">用户管理</MenuItem>
<MenuItem name="1-2" @click="navigateTo('/manager/RoleManage')" style="text-align: center;left:-15px">角色管理</MenuItem>
<MenuItem name="1-3" @click="navigateTo('/manager/PermissionsManage')" style="text-align: center;left:-15px">权限管理</MenuItem>
<MenuItem name="1-4" @click="navigateTo('/manager/LogManage')" style="text-align: center;left:-15px">日志管理</MenuItem>
<MenuItem name="1-5" @click="navigateTo('/manager/DailyReportManage')" style="text-align: center;left:-15px">日报管理</MenuItem>
<MenuItem name="1-6" @click="navigateTo('/manager/MessageManage')" style="text-align: center;left:-15px">消息管理</MenuItem>
<MenuItem name="1-2" @click="navigateTo('/manager/RoleManage')" style="text-align: center;">角色管理</MenuItem>
<MenuItem name="1-3" @click="navigateTo('/manager/PermissionsManage')" style="text-align: center;">权限管理</MenuItem>
<MenuItem name="1-4" @click="navigateTo('/manager/LogManage')" style="text-align: center;">日志管理</MenuItem>
<MenuItem name="1-5" @click="navigateTo('/manager/DailyReportManage')" style="text-align: center;">日报管理</MenuItem>
<MenuItem name="1-6" @click="navigateTo('/manager/MessageManage')" style="text-align: center;">消息管理</MenuItem>
</Submenu>
<Submenu name="2">
<template #title>
<Icon type="ios-keypad"></Icon>
首页管理
</template>
<MenuItem name="2-1" @click="navigateTo('/manager/CarouselManagement')" style="text-align: center;left:-15px">轮播图管理</MenuItem>
<MenuItem name="2-2" @click="navigateTo('/manager/TeamIntroduction')" style="text-align: center;left:-15px">团队简介</MenuItem>
<MenuItem name="2-3" @click="navigateTo('/manager/ProjectRecommendations')" style="text-align: center;left:-15px">项目推荐</MenuItem>
<MenuItem name="2-4" @click="navigateTo('/manager/NewsDisplay')" style="text-align: center;left:-15px">新闻展示</MenuItem>
<MenuItem name="2-5" @click="navigateTo('/manager/UserRecommendations')" style="text-align: center;left:-15px">用户推荐</MenuItem>
<MenuItem name="2-1" @click="navigateTo('/manager/CarouselManagement')" style="text-align: center;">轮播图管理</MenuItem>
<MenuItem name="2-2" @click="navigateTo('/manager/TeamIntroduction')" style="text-align: center;">团队简介</MenuItem>
<MenuItem name="2-3" @click="navigateTo('/manager/ProjectRecommendations')" style="text-align: center;">项目推荐</MenuItem>
<MenuItem name="2-4" @click="navigateTo('/manager/NewsDisplay')" style="text-align: center;">新闻展示</MenuItem>
<MenuItem name="2-5" @click="navigateTo('/manager/UserRecommendations')" style="text-align: center;">用户推荐</MenuItem>
</Submenu>
<Submenu name="3">
<template #title>
<Icon type="ios-analytics"></Icon>
信息管理
</template>
<MenuItem name="3-1" @click="navigateTo('/manager/ProjectInformationManagement')" style="text-align: center;left:-15px" >项目信息管理</MenuItem>
<MenuItem name="3-2" @click="navigateTo('/manager/TeamInformationManagement')" style="text-align: center;left:-15px">团队信息管理</MenuItem>
<MenuItem name="3-3" @click="navigateTo('/manager/NewsInformationManagement')" style="text-align: center;left:-15px">新闻信息管理</MenuItem>
<MenuItem name="3-1" @click="navigateTo('/manager/ProjectInformationManagement')" style="text-align: center;" >项目信息管理</MenuItem>
<MenuItem name="3-2" @click="navigateTo('/manager/TeamInformationManagement')" style="text-align: center;">团队信息管理</MenuItem>
<MenuItem name="3-3" @click="navigateTo('/manager/NewsInformationManagement')" style="text-align: center;">新闻信息管理</MenuItem>
</Submenu>
</Menu>
</Sider>