parent
47c74ff7fd
commit
ef86b9c093
|
After Width: | Height: | Size: 373 B |
|
After Width: | Height: | Size: 347 B |
@ -0,0 +1,14 @@
|
||||
@font-face {
|
||||
font-family: "DingTalk JinBuTi-Regular";
|
||||
src: url("./font/YouSheBiaoTiHei-2.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "AlibabaPuHuiTi-Regular";
|
||||
src: url("./font/AlibabaSans-Regular.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "AlibabaPuHuiTi-Medium";
|
||||
src: url("./font/AlibabaSans-Medium.otf");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<!-- 我的看板 -->
|
||||
<div class="myBoard-container">
|
||||
<div class="list">
|
||||
<div class="list-item" v-for="item in boardLsit" :key="item.id" @click="previewHandle(item)">
|
||||
<div class="item-operation">
|
||||
<img @click="deleteHandle(item)" src="~@/assets/images/ai/icon-delet.png" class="operation-item" alt="" />
|
||||
<img @click="editHandle(item)" src="~@/assets/images/ai/icon-edit.png" class="operation-item" alt="" />
|
||||
</div>
|
||||
<img :src="item.indexImage" class="item-cover" alt="" />
|
||||
<div class="item-name">{{ item.projectName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<n-pagination
|
||||
:page="paginat.page"
|
||||
:page-size="paginat.limit"
|
||||
:item-count="paginat.count"
|
||||
:page-sizes="[12, 24, 36, 48]"
|
||||
@update:page="changePage"
|
||||
@update:page-size="changeSize"
|
||||
show-size-picker
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from 'vue'
|
||||
import { goDialog, httpErrorHandle } from '@/utils'
|
||||
import { openNewWindow, previewPath } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { projectListApi, deleteProjectApi } from '@/api/path'
|
||||
let boardLsit = ref([])
|
||||
const router = useRouter()
|
||||
const paginat = reactive({
|
||||
// 当前页数
|
||||
page: 1,
|
||||
// 每页值
|
||||
limit: 12,
|
||||
// 总数
|
||||
count: 10
|
||||
})
|
||||
|
||||
const fetchList = async () => {
|
||||
const res = await projectListApi(paginat)
|
||||
boardLsit.value = res.data
|
||||
paginat.count = res.data.count
|
||||
console.log(boardLsit.value)
|
||||
}
|
||||
// 修改页数
|
||||
const changePage = _page => {
|
||||
paginat.page = _page
|
||||
fetchList()
|
||||
}
|
||||
// 修改大小
|
||||
const changeSize = _size => {
|
||||
paginat.limit = _size
|
||||
fetchList()
|
||||
}
|
||||
// 删除处理
|
||||
const deleteHandle = cardData => {
|
||||
goDialog({
|
||||
type: 'delete',
|
||||
promise: true,
|
||||
onPositiveCallback: () =>
|
||||
new Promise(res => {
|
||||
res(
|
||||
deleteProjectApi({
|
||||
ids: cardData.id
|
||||
})
|
||||
)
|
||||
}),
|
||||
promiseResCallback: res => {
|
||||
if (res.code === 200) {
|
||||
window['$message'].success(window['$t']('global.r_delete_success'))
|
||||
fetchList()
|
||||
return
|
||||
}
|
||||
httpErrorHandle()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 编辑处理
|
||||
const editHandle = cardData => {
|
||||
if (!cardData) return
|
||||
router.push(`/board/` + cardData.id)
|
||||
}
|
||||
// 预览处理
|
||||
const previewHandle = cardData => {
|
||||
openNewWindow(previewPath(cardData.id))
|
||||
}
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.myBoard-container {
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding: 20px 20px 0 20px;
|
||||
.list {
|
||||
max-height: 92%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
.list-item {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
//一行三列 间隔 - 多余的平均分
|
||||
width: calc((100% / 4) - (20px * 1) + (20px / 4));
|
||||
|
||||
background: #282a31;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.item-operation {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 11px;
|
||||
.operation-item {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
.item-cover {
|
||||
display: block;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.item-name {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-family: 'AlibabaPuHuiTi-Medium';
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
height: 8%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="ai-container">
|
||||
<div class="left-menu">
|
||||
<ai-logo></ai-logo>
|
||||
<div class="menu-list">
|
||||
<div
|
||||
class="menu-item flex-box"
|
||||
:class="getCurrentRoute(item.path) ? 'active-link' : ''"
|
||||
:to="item.path"
|
||||
v-for="(item, index) in menuList"
|
||||
:key="index"
|
||||
@click="handlerPath(item.path, index)"
|
||||
>
|
||||
<n-icon size="20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
|
||||
/>
|
||||
</svg> </n-icon
|
||||
>新建{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<router-view :key="route.fullPath"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { createProjectApi, historyMessageRoom, historyMessageRoomUpdata } from '@/api/path'
|
||||
import { getUUID } from '@/utils'
|
||||
import { ResultEnum } from '@/enums/httpEnum'
|
||||
import { AiLogo } from './components'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import useMessageRoomStore from '@/store/modules/messageRoom'
|
||||
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
|
||||
|
||||
const systemStore = useSystemStore()
|
||||
const useMessageRoom = useMessageRoomStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const history = ref(null)
|
||||
|
||||
const menuList = [
|
||||
// { name: '聊天', path: '/chat' },
|
||||
{ name: '数据看板', path: 'board' }
|
||||
]
|
||||
const ehcatrsType = ['pie', 'line', 'bar']
|
||||
const getCurrentRoute = path => {
|
||||
return route.path.includes(path)
|
||||
}
|
||||
|
||||
const saveMessage = async path => {
|
||||
//聊天室存在聊天记录
|
||||
if (useMessageRoom.messageRoom.content.length > 0) {
|
||||
useMessageRoom.messageRoom.content.forEach(instance => {
|
||||
if (ehcatrsType.includes(instance.type) && instance.chartInstanceItem) {
|
||||
instance.chartInstanceItem.dispose()
|
||||
}
|
||||
})
|
||||
const jsonData = JSON.stringify(useMessageRoom.messageRoom.content)
|
||||
let res
|
||||
try {
|
||||
if (useMessageRoom.messageRoom.id) {
|
||||
res = await historyMessageRoomUpdata({ content: jsonData, id: useMessageRoom.messageRoom.id })
|
||||
} else {
|
||||
res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 })
|
||||
}
|
||||
if (res && res.code == 200) {
|
||||
useMessageRoom.resetList({ id: undefined, createUserId: undefined, content: [] }) //清空本地
|
||||
history.value.messageList()
|
||||
router.push(path + '/' + Date.now())
|
||||
}
|
||||
} catch {
|
||||
console.log('保存出错')
|
||||
router.push(path + '/' + Date.now())
|
||||
}
|
||||
} else {
|
||||
router.push(path + '/' + Date.now())
|
||||
}
|
||||
}
|
||||
|
||||
const handlerBoard = async (path='board') => {
|
||||
try {
|
||||
// 新增项目
|
||||
const res = await createProjectApi({
|
||||
// 项目名称
|
||||
projectName: getUUID(),
|
||||
// remarks
|
||||
remarks: null,
|
||||
// 图片地址
|
||||
indexImage: null
|
||||
})
|
||||
if (res && res.code === ResultEnum.SUCCESS) {
|
||||
const { id } = res.data
|
||||
router.push(`/${path}/`+ id)
|
||||
}
|
||||
} catch (error) {
|
||||
window['$message'].error(window['$t']('project.create_failure'))
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
// handlerBoard()
|
||||
})
|
||||
|
||||
const handlerPath = (path, index) => {
|
||||
history.value.fetchList()//获取看板历史记录
|
||||
chartEditStore.setComponentList()//清空看板本地数据
|
||||
chartEditStore.setEdit(false)//设置看板处于新增状态
|
||||
handlerBoard(path)//新建一个看板
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-container {
|
||||
height: 100vh;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
.left-menu {
|
||||
width: 260px;
|
||||
box-sizing: border-box;
|
||||
padding: 41px 30px;
|
||||
background: url('../../assets/images/ai/menu-bg.png');
|
||||
background-size: 100% 100%;
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.menu-item {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
height: 38px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #474d59;
|
||||
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.active-link,
|
||||
.menu-item:active {
|
||||
color: #507afc;
|
||||
border-color: #507afc;
|
||||
background: rgba(80, 122, 252, 0.2);
|
||||
}
|
||||
}
|
||||
.right-container {
|
||||
flex: 1;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue