优化代码
This commit is contained in:
parent
1dbfcfd0f2
commit
7d4b63f393
@ -10,6 +10,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="./src/main.js"></script>
|
<script type="module" src="./src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
0
frontend/src/data-public/preview/index.vue
Normal file
0
frontend/src/data-public/preview/index.vue
Normal file
69
frontend/src/data-visualization/api/chart.ts
Normal file
69
frontend/src/data-visualization/api/chart.ts
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 通过图表对象获取数据
|
||||||
|
export const getData = async (data:any) => {
|
||||||
|
delete data.data
|
||||||
|
return request.post('/chartData/getData', data).then((res:any) => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
return res?.data
|
||||||
|
} else {
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const innerExportDetails = async (data: any) => {
|
||||||
|
return request.post('/chartData/innerExportDetails', data, {
|
||||||
|
method: 'post',
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const innerExportDataSetDetails = async (data: any) => {
|
||||||
|
return request.post('/chartData/innerExportDataSetDetails', data, {
|
||||||
|
method: 'post',
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过图表id获取数据
|
||||||
|
export const getChart = async (id: string) => {
|
||||||
|
return request.post(`/chart/getChart/${id}`, {}).then(res => {
|
||||||
|
return res?.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个图表保存测试
|
||||||
|
export const saveChart = async (data: any) => {
|
||||||
|
delete data.data
|
||||||
|
return request.post('/chart/save', data).then(res => {
|
||||||
|
return res?.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取单个字段枚举值
|
||||||
|
export const getFieldData = async ({ fieldId, fieldType, data }: { fieldId: string, fieldType: string, data: any }) => {
|
||||||
|
delete data.data
|
||||||
|
return request
|
||||||
|
.post(`/chartData/getFieldData/${fieldId}/${fieldType}`, data)
|
||||||
|
.then(res => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取下钻字段枚举值
|
||||||
|
export const getDrillFieldData = async ({ fieldId, data }: { fieldId: string, data: any }) => {
|
||||||
|
delete data.data
|
||||||
|
return request.post(`/chartData/getDrillFieldData/${fieldId}`, data).then(res => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getChartDetail = async (id: string) => {
|
||||||
|
return request.post(`chart/getDetail/${id}`, {}).then(res => {
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const checkSameDataSet = async (viewIdSource: string, viewIdTarget: string) =>
|
||||||
|
request.get('/chart/checkSameDataSet/' + viewIdSource + '/' + viewIdTarget)
|
||||||
95
frontend/src/data-visualization/index.vue
Normal file
95
frontend/src/data-visualization/index.vue
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, reactive,nextTick,onBeforeMount } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import DvPreview from './DvPreview.vue'
|
||||||
|
|
||||||
|
// import { initCanvasData } from '@/utils/canvasUtils'
|
||||||
|
// import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
|
const state = reactive({
|
||||||
|
canvasDataPreview: null,
|
||||||
|
canvasStylePreview: null,
|
||||||
|
canvasViewInfoPreview: null,
|
||||||
|
dvInfo: null,
|
||||||
|
curPreviewGap: 0
|
||||||
|
})
|
||||||
|
const dataInitState = ref(true)
|
||||||
|
const downloadStatus = ref(false)
|
||||||
|
const dvPreviewRef = ref(null)
|
||||||
|
const showPosition = ref("preview")
|
||||||
|
const route = useRoute()
|
||||||
|
const applicationId:any = ref('')
|
||||||
|
const busiFlag = ref('dataV')
|
||||||
|
onMounted(() => {
|
||||||
|
applicationId.value = route.query.id
|
||||||
|
loadCanvasData("1927640677370306561",9,0)
|
||||||
|
})
|
||||||
|
const loadCanvasData = (dvId, weight?, ext?) => {
|
||||||
|
const initMethod = initCanvasData
|
||||||
|
dataInitState.value = false
|
||||||
|
initMethod(
|
||||||
|
dvId,
|
||||||
|
busiFlag.value,
|
||||||
|
function ({
|
||||||
|
canvasDataResult,
|
||||||
|
canvasStyleResult,
|
||||||
|
dvInfo,
|
||||||
|
canvasViewInfoPreview,
|
||||||
|
curPreviewGap
|
||||||
|
}) {
|
||||||
|
dvInfo['weight'] = weight
|
||||||
|
dvInfo['ext'] = ext || 0
|
||||||
|
state.canvasDataPreview = canvasDataResult
|
||||||
|
state.canvasStylePreview = canvasStyleResult
|
||||||
|
state.canvasViewInfoPreview = canvasViewInfoPreview
|
||||||
|
state.dvInfo = dvInfo
|
||||||
|
state.curPreviewGap = curPreviewGap
|
||||||
|
dataInitState.value = true
|
||||||
|
dvMainStore.updateCurDvInfo(dvInfo)
|
||||||
|
nextTick(() => {
|
||||||
|
dvPreviewRef.value?.restore()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
dvMainStore.canvasDataInit()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="project-box">
|
||||||
|
<dv-preview
|
||||||
|
ref="dvPreviewRef"
|
||||||
|
class="dvPreviewRef"
|
||||||
|
v-if="state.canvasStylePreview && dataInitState"
|
||||||
|
:show-position="showPosition"
|
||||||
|
:canvas-data-preview="state.canvasDataPreview"
|
||||||
|
:canvas-style-preview="state.canvasStylePreview"
|
||||||
|
:canvas-view-info-preview="state.canvasViewInfoPreview"
|
||||||
|
:dv-info="state.dvInfo"
|
||||||
|
:cur-preview-gap="state.curPreviewGap"
|
||||||
|
:download-status="downloadStatus"
|
||||||
|
></dv-preview>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.project-box{
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(21, 21, 21, 1);
|
||||||
|
.project-content{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.Leftmenu{
|
||||||
|
position: relative;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
.dvPreviewRef{
|
||||||
|
position: relative;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,7 +3,7 @@ import App from './App.vue'
|
|||||||
import router from './router'
|
import router from './router'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
import FcDesigner from '@/fcDesignerPro/index.es.js'
|
import FcDesigner from '@/data-collect/index.es.js'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
import './styles/index.scss'
|
import './styles/index.scss'
|
||||||
@ -2,15 +2,16 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||||||
import { useUserStore } from '@/store/user'
|
import { useUserStore } from '@/store/user'
|
||||||
|
|
||||||
// 路由配置
|
// 路由配置
|
||||||
const routes = [
|
const routes:any = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/dashboard'
|
redirect: '/dashboard'
|
||||||
},
|
},
|
||||||
|
// 登录页面路由配置
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
component: () => import('@/views/Login.vue'),
|
component: () => import('@/data-public/Login.vue'), // 使用标准组件路径
|
||||||
meta: {
|
meta: {
|
||||||
title: '登录',
|
title: '登录',
|
||||||
requiresAuth: false
|
requiresAuth: false
|
||||||
@ -19,7 +20,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
component: () => import('@/views/Dashboard.vue'),
|
component: () => import('@/data-public/Dashboard.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '仪表板',
|
title: '仪表板',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -28,7 +29,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/users',
|
path: '/users',
|
||||||
name: 'Users',
|
name: 'Users',
|
||||||
component: () => import('@/views/Users.vue'),
|
component: () => import('@/data-public/Users.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '用户管理',
|
title: '用户管理',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -37,7 +38,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/roles',
|
path: '/roles',
|
||||||
name: 'Roles',
|
name: 'Roles',
|
||||||
component: () => import('@/views/Roles.vue'),
|
component: () => import('@/data-public/Roles.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '角色管理',
|
title: '角色管理',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -46,7 +47,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/organizations',
|
path: '/organizations',
|
||||||
name: 'Organizations',
|
name: 'Organizations',
|
||||||
component: () => import('@/views/Organizations.vue'),
|
component: () => import('@/data-public/Organizations.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '组织管理',
|
title: '组织管理',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -55,7 +56,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/dictionaries',
|
path: '/dictionaries',
|
||||||
name: 'Dictionaries',
|
name: 'Dictionaries',
|
||||||
component: () => import('@/views/Dictionaries.vue'),
|
component: () => import('@/data-public/Dictionaries.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '字典管理',
|
title: '字典管理',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -64,7 +65,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/FormCreateDesigner',
|
path: '/FormCreateDesigner',
|
||||||
name: 'FormCreateDesigner',
|
name: 'FormCreateDesigner',
|
||||||
component: () => import('@/views/FormCreateDesigner.vue'),
|
component: () => import('@/data-public/FormCreateDesigner.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '字典管理',
|
title: '字典管理',
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
@ -73,7 +74,7 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)*',
|
path: '/:pathMatch(.*)*',
|
||||||
name: '404',
|
name: '404',
|
||||||
component: () => import('@/views/error-page/404.vue'),
|
component: () => import('@/data-public/error-page/404.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '页面未找到',
|
title: '页面未找到',
|
||||||
requiresAuth: false
|
requiresAuth: false
|
||||||
6
frontend/src/shims-vue.d.ts
vendored
Normal file
6
frontend/src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
// 类型声明文件
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
@ -2,11 +2,9 @@ import axios from 'axios'
|
|||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { useUserStore } from '@/store/user'
|
import { useUserStore } from '@/store/user'
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
console.log( import.meta.env.VITE_API_BASE_URL)
|
|
||||||
|
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
baseURL: (import.meta as any).env?.VITE_API_BASE_URL || '/api',
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json;charset=UTF-8'
|
'Content-Type': 'application/json;charset=UTF-8'
|
||||||
0
frontend/src/views/preview/index.vue
Normal file
0
frontend/src/views/preview/index.vue
Normal file
20
frontend/tsconfig.json
Normal file
20
frontend/tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es6",
|
||||||
|
"module": "esnext",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"importHelpers": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "./dist",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"types": ["vite-plugin-vue-type-imports", "vue"],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"]
|
||||||
|
}
|
||||||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./frontend/src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user