zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

yangws_ws #33

Merged
yangws merged 2 commits from yangws_ws into main 2024-11-12 17:34:00 +08:00
Conversation 0 Commits 2 Files Changed 10 +531 -5
10 changed files with 531 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/router/index.js
View File

@ -56,6 +56,12 @@ export const constantRoutes = [
name: 'examination-analysis',
meta: { title: '考试分析' }
},
{
path: 'management',
component: () => import('@/views/job-management/index.vue'),
name: 'job-management',
meta: { title: '作业管理' }
},
]
},

4
src/renderer/src/views/classManage/index.vue
View File

@ -286,7 +286,9 @@
}
onMounted(() => {
getClassInfo()
// 没有加入学校之前的处理
if(userStore.deptId)
getClassInfo()
nextTick(() => {
viewportHeight.value = getViewportHeight()
})

27
src/renderer/src/views/job-management/Header/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="mb-4">
<div>
<el-button type="danger" disabled>批量删除</el-button>
<el-button type="primary" disabled>批量推送</el-button>
</div>
<CustomSelect
:options="options"
placeholder="设计新作业"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CustomSelect from '../components/customSelect.vue';
const options = ref(['自主搜题', '校本题库', '个人题库', '智能推荐', '课堂展示', '常规作业', 'AI作业设计']);
</script>
<style lang="scss" scoped>
.mb-4{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #fff;
padding: 10px;
}
</style>

108
src/renderer/src/views/job-management/Left/index.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="list-container">
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
<div class="item-content">
<el-checkbox v-model="item.checked"/>
<div class="item-text">
<div class="title-header">
<div class="item-title">{{ item.title }}</div>
<CustomButton :item="{ type: item.type, text: item.text, plain: true }" />
</div>
<div class="item-description" :title="item.description">{{ item.description }}</div>
</div>
<el-icon class="item-icon"><ArrowRight /></el-icon>
</div>
</div>
</div>
</template>
<script setup>
import { ref,markRaw } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import CustomButton from '../components/button.vue'
const items = ref([
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'primary',text:'课堂练习' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'danger',text:'常规作业' },
{ title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
]);
const handleClick = (item) => {
console.log('Clicked on:', item.title);
};
</script>
<style scoped>
/* 样式部分保持不变 */
.list-container {
width: 100%;
max-width: 400px; /* 可以根据需要调整宽度 */
margin: 0 auto;
padding: 16px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.content-list {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 16px;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.content-list:last-child {
margin-bottom: 0;
}
.content-list:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}
.item-content {
display: flex;
align-items: center;
}
.item-icon {
font-size: 24px;
color: #409eff;
}
.item-text {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 5px;
}
.title-header{
display: flex;
justify-content: space-between;
align-items: center;
}
.item-title {
font-size: 14px;
font-weight: 500;
color: #303133;
text-align: left;
}
.item-description {
font-size: 12px;
color: #333;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 设置最大行数 */
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
</style>

84
src/renderer/src/views/job-management/Right/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div class="list-container">
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
<div class="item-content">
<div class="item-text">
<div class="item-title">{{ item.title }}</div>
<div class="item-description">{{ item.description }}</div>
</div>
<el-icon class="item-icon"><component :is="item.icon" /></el-icon>
</div>
</div>
</div>
</template>
<script setup>
import { shallowRef } from 'vue';
import { Plus, ArrowDown, Document, User, Setting } from '@element-plus/icons-vue';
const items = shallowRef([
{ title: '自主搜题', description: '1111111', icon: Document },
{ title: '校本题库', description: '222222', icon: User },
{ title: '个人题库', description: '333333', icon: Setting },
{ title: '智能推荐', description: '444444', icon: Plus },
{ title: '课堂展示', description: '555555', icon: ArrowDown },
{ title: '常规作业', description: '555555', icon: ArrowDown },
{ title: 'AI设计作业', description: '555555', icon: ArrowDown },
]);
const handleClick = (item) => {
console.log('Clicked on:', item.title);
};
</script>
<style scoped>
.list-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
background-color: #f5f5f5;
}
.content-list {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 16px;
width: calc(33.333% - 32px); /* 3列布局，每列减去gap */
cursor: pointer;
transition: all 0.3s ease;
}
.content-list:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}
.item-content {
display: flex;
align-items: center;
}
.item-icon {
font-size: 24px;
color: #409eff;
margin-right: 16px;
}
.item-text {
flex: 1;
}
.item-title {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 4px;
}
.item-description {
font-size: 14px;
color: #909399;
}
</style>

148
src/renderer/src/views/job-management/components/button.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<button :class="['custom-button', `custom-button--${item.type}`, { 'is-plain': item.plain }]">
{{ item.text }}
</button>
</template>
<script setup>
defineProps({
item: {
type: Object,
required: true,
default: () => ({ type: 'default', text: '', plain: false })
}
});
</script>
<style scoped>
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 2px 2px;
font-size: 12px;
border-radius: 2px;
}
.custom-button.is-plain {
background: transparent;
background-color: rgba(220, 223, 230, 0.5);
color: #606266;
}
/* .custom-button.is-plain:hover {
background: rgba(245, 247, 250, 0.5);
background-color: rgba(198, 226, 255, 0.5);
color: #409eff;
} */
.custom-button--primary {
color: #fff;
background-color: rgba(64, 158, 255, 0.5);
}
.custom-button--primary.is-plain {
color: #409eff;
background: transparent;
background-color: rgba(64, 158, 255, 0.5);
}
/*
.custom-button--primary.is-plain:hover {
background: rgba(236, 245, 255, 0.5);
background-color: rgba(179, 216, 255, 0.5);
color: #409eff;
} */
.custom-button--success {
color: #fff;
background-color: rgba(103, 194, 58, 0.5);
}
.custom-button--success.is-plain {
color: #67c23a;
background: transparent;
background-color: rgba(103, 194, 58, 0.5);
}
/* .custom-button--success.is-plain:hover {
background: rgba(240, 249, 235, 0.5);
background-color: rgba(194, 231, 176, 0.5);
color: #67c23a;
} */
.custom-button--info {
color: #fff;
background-color: rgba(144, 147, 153, 0.5);
}
.custom-button--info.is-plain {
color: #909399;
background: transparent;
background-color: rgba(144, 147, 153, 0.5);
}
/* .custom-button--info.is-plain:hover {
background: rgba(244, 244, 245, 0.5);
background-color: rgba(211, 212, 214, 0.5);
color: #909399;
} */
.custom-button--warning {
color: #fff;
background-color: rgba(230, 162, 60, 0.5);
}
.custom-button--warning.is-plain {
color: #e6a23c;
background: transparent;
background-color: rgba(230, 162, 60, 0.5);
}
/* .custom-button--warning.is-plain:hover {
background: rgba(253, 246, 236, 0.5);
background-color: rgba(245, 218, 177, 0.5);
color: #e6a23c;
} */
.custom-button--danger {
color: #fff;
background-color: rgba(245, 108, 108, 0.5);
}
.custom-button--danger.is-plain {
color: #f56c6c;
background: transparent;
background-color: rgba(245, 108, 108, 0.5);
}
/* .custom-button--danger.is-plain:hover {
background: rgba(254, 240, 240, 0.5);
background-color: rgba(250, 179, 179, 0.5);
color: #f56c6c;
} */
/*
.custom-button:hover {
color: #409eff;
background-color: rgba(198, 226, 255, 0.5);
} */
.custom-button:active {
color: #3a8ee6;
background-color: rgba(58, 142, 230, 0.5);
outline: none;
}
</style>

114
src/renderer/src/views/job-management/components/customSelect.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="custom-select" @mouseenter="toggleDropdown" @mouseleave="toggleDropup">
<div class="selected-option">
<el-icon><Plus /></el-icon>
{{ selectedOption }}
<el-icon><ArrowDown /></el-icon>
</div>
<transition name="dropdown">
<ul v-if="isDropdownOpen" class="options-list">
<li
v-for="(option, index) in options"
:key="index"
class="option-item"
@click="selectOption(option)">
{{ option }}
</li>
</ul>
</transition>
</div>
</template>
<script setup>
import { Plus, ArrowDown } from '@element-plus/icons-vue'
import { ref, computed, defineProps } from 'vue';
const props = defineProps({
options: {
type: Array,
required: true,
},
placeholder: {
type: String,
default: '请选择',
},
});
const isDropdownOpen = ref(false);
const selectedOption = ref(props.placeholder);
const toggleDropdown = () => {
isDropdownOpen.value = true;
};
const toggleDropup = () => {
isDropdownOpen.value = false;
};
const selectOption = (option) => {
selectedOption.value = option;
isDropdownOpen.value = false;
};
</script>
<style scoped>
.custom-select {
position: relative;
width: auto;
cursor: pointer;
user-select: none;
font-size: 14px;
border-radius: 4px;
}
.selected-option {
padding: 10px;
background-color: #fff;
padding: 5px 10px;
background: rgb(64, 158, 255);
color: #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.options-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
border: 1px solid #dcdfe6;
border-top: none;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 1000;
max-height: 200px;
overflow-y: auto;
margin: 0;
padding: 0;
list-style: none;
}
.option-item {
padding: 0 16px;
height: 34px;
line-height: 34px;
white-space: nowrap;
cursor: pointer;
color: #606266;
font-size: 14px;
}
.option-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
/* 动画效果 */
.dropdown-enter-active, .dropdown-leave-active {
transition: all 0.3s ease;
}
.dropdown-enter-from, .dropdown-leave-to {
opacity: 0;
transform: translateY(-10px);
}
</style>

31
src/renderer/src/views/job-management/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="page-template flex">
<Header/>
<el-row :gutter="20" class="tempalte-main">
<el-col :span="6">
<!--左侧列表-->
<Left/>
</el-col>
<el-col :span="18">
<!--右侧-->
<Right/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import Header from './Header/index.vue'
import Right from './Right/index.vue'
import Left from './Left/index.vue'
</script>
<style lang="scss" scoped>
.page-template {
flex-direction: column;
height: 100%;
.tempalte-main {
flex: 1;
}
}
</style>

1
src/renderer/src/views/model/index.vue
View File

@ -2,6 +2,7 @@
<div>
<div class="mb-4">
<el-button type="primary" @click="onchange('/model/curriculum')">课标研读</el-button>
<el-button type="primary" @click="onchange('/model/management')">作业管理</el-button>
<!-- <el-button type="success" @click="onchange('/model/teaching')">教材研读</el-button> -->
<!-- <el-button type="info" @click="onchange('/model/examination')">考试分析</el-button> -->
</div>

13
src/renderer/src/views/profile/userInfo.vue
View File

@ -8,7 +8,7 @@
</el-form-item>
<el-form-item label="所属学校" prop="identity">
<div style="display: flex;">
<div>{{ user.deptName }}</div>
<div>{{ userStore.DeptInfo.register.schoolName }}</div>
<div>
<el-button type="primary" link>更改学校</el-button>
</div>
@ -249,8 +249,13 @@ function groupByCondition(arr, condition) {
}
}
onMounted(() => {
getSubject()
getClassInfo()
getTheSection()
console.log(userStore.DeptInfo,'DeptInfo');
// 没有加入学校前不能执行以下接口
if(userStore.user.deptId){
getSubject()
getClassInfo()
getTheSection()
}
})
</script>