Skip to content

C
cesium-frame
Commit 9d8dbdca by jlc
Options

update：界面基本功能实现

parent 3fc30bb2
Showing with 241 additions and 72 deletions
jsconfig.json
{ {
"compilerOptions": { "compilerOptions": {
"baseUral": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"] // 配置@符号指向src目录及其子目录 "@/*": ["src/*"] // 配置@符号指向src目录及其子目录
} }
......
src/App.vue
<template> <template>
<CodeAndCesium /> <router-view />
<!-- <router-view /> -->
</template> </template>
<script setup> <script setup>
import CodeAndCesium from './pages/CodeAndCesium.vue';
</script> </script>
\ No newline at end of file
src/AppLayout.vue
<template> <template>
<div class="w-screen h-screen"> <div class="app-continer">
<el-container> <el-container>
<AsideMenuBar :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" /> <AsideMenuBar :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" />
<el-container class="header-and-main"> <el-container class="header-and-main">
...@@ -27,6 +27,10 @@ const handleCollapseUpdate = (newCollapseState) => { ...@@ -27,6 +27,10 @@ const handleCollapseUpdate = (newCollapseState) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
.header-and-main{ .header-and-main{
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
......
src/components/AsideMenuBar.vue
...@@ -3,62 +3,62 @@ ...@@ -3,62 +3,62 @@
<el-scrollbar> <el-scrollbar>
<el-menu router unique-opened :collapse="isCollapse"> <el-menu router unique-opened :collapse="isCollapse">
<a href="/" class="logo"> <a href="/" class="logo">
<img src="../assets/vue.svg" alt=""> <img src="@/assets/vue.svg" alt="">
<h1>Cesium</h1> <h1>Cesium</h1>
</a> </a>
<el-sub-menu index="1"> <el-sub-menu index="1">
<template #title> <template #title>
<el-icon><Edit /></el-icon> <el-icon><MapLocation /></el-icon>
<span>点的案例</span> <span>点的案例</span>
</template> </template>
<el-menu-item index="/code"> <el-menu-item @click="indexBtn('pointOne')">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>one</span> <span>one</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item @click="indexBtn('firstTwo')">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>two</span> <span>two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item @click="indexBtn('firstThree')">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>three</span> <span>three</span>
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
<el-sub-menu index="2"> <el-sub-menu index="2">
<template #title> <template #title>
<el-icon><Edit /></el-icon> <el-icon><SemiSelect /></el-icon>
<span>线的案例</span> <span>线的案例</span>
</template> </template>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>one</span> <span>one</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>two</span> <span>two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>three</span> <span>three</span>
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
<el-sub-menu index="3"> <el-sub-menu index="3">
<template #title> <template #title>
<el-icon><Edit /></el-icon> <el-icon><Grid /></el-icon>
<span>面的案例</span> <span>面的案例</span>
</template> </template>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>one</span> <span>one</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>two</span> <span>two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/code"> <el-menu-item index="/code">
<el-icon><Edit /></el-icon> <el-icon><View /></el-icon>
<span>three</span> <span>three</span>
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
...@@ -68,14 +68,20 @@ ...@@ -68,14 +68,20 @@
</template> </template>
<script setup> <script setup>
import { Edit } from "@element-plus/icons-vue" import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue"
import { ref } from "vue"; import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({ const props = defineProps({
isCollapse: { isCollapse: {
type: Boolean, type: Boolean,
} }
}); });
function indexBtn(id) {
router.push(`/CodeAndCesium/?id=${id}`)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/components/HeaderMenuBar.vue
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
<script setup> <script setup>
import { Expand, Fold } from "@element-plus/icons-vue" import { Expand, Fold } from "@element-plus/icons-vue"
import { ref } from "vue";
const props = defineProps({ const props = defineProps({
isCollapse: { isCollapse: {
......
src/components/constant.js 0 → 100644
export const menuMap = {
}
\ No newline at end of file
src/examples/CodeMap.js 0 → 100644
import { vueCode as vueCodeOne } from '@/examples/first-one.js'
import { vueCode as vueCodeTwo } from '@/examples/first-two.js'
const vueCodeMap = {
pointOne: vueCodeOne,
pointTwo: vueCodeTwo
}
export function findVueCodeById(id){
if(!vueCodeMap.hasOwnProperty(id)){
throw new Error(`${id}不存在`);
}
return vueCodeMap[id]
}
\ No newline at end of file
src/examples/first-one.js 0 → 100644
export const vueCode = `<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
});
<${'/'}script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
\ No newline at end of file
src/examples/first-two.js 0 → 100644
export const vueCode = `<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
<${'/'}script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
\ No newline at end of file
src/main.js
...@@ -10,16 +10,16 @@ const app = createApp(App) ...@@ -10,16 +10,16 @@ const app = createApp(App)
app.use(ElementPlus) app.use(ElementPlus)
app.use(router) app.use(router)
router.beforeEach((to, from, next) => { // router.beforeEach((to, from, next) => {
console.log("to:", to) //即将进入的路由信息 // console.log("to:", to) //即将进入的路由信息
console.log("from:", from) //当前即将离开的路由信息 // console.log("from:", from) //当前即将离开的路由信息
next() // 继续执行，如果注释掉，首页都不会显示 // next() // 继续执行，如果注释掉，首页都不会显示
// 设置条件拦截 // // 设置条件拦截
// if(to.name == 'codeandcesium'){ // // if(to.name == 'codeandcesium'){
// next(false) // // next(false)
// }else{ // // }else{
// next() // // next()
// } // // }
}) // })
app.mount('#app') app.mount('#app')
\ No newline at end of file
src/pages/CodeAndCesium.vue
<template> <template>
<SandpackProvider template="vue3" class="w-screen h-screen" :files="files"> <div class="app-continer">
<SandpackProvider template="vue3" style="width: 100%; height: 100%;" :files="files">
<SandpackLayout class="h-[80%] w-full"> <SandpackLayout class="h-[80%] w-full">
<SandpackCodeEditor showLineNumbers style="height: 100%;" /> <SandpackCodeEditor showLineNumbers style="height: 100%;" />
<SandpackPreview style="height: 100%;" /> <SandpackPreview style="height: 100%;" />
...@@ -8,43 +9,17 @@ ...@@ -8,43 +9,17 @@
<SandpackConsole style="height: 100%;" class="bg-zinc-100" /> <SandpackConsole style="height: 100%;" class="bg-zinc-100" />
</SandpackLayout> </SandpackLayout>
</SandpackProvider> </SandpackProvider>
</div>
</template> </template>
<script setup> <script setup>
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3'; import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3';
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const vueCode = `<template> import { findVueCodeById } from '@/examples/CodeMap.js';
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const viewer = new window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
});
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
});
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
const route = useRoute()
const vueCode = ref()
const files = ref({ const files = ref({
"src/App.vue": { "src/App.vue": {
code: vueCode, code: vueCode,
...@@ -53,7 +28,15 @@ const files = ref({ ...@@ -53,7 +28,15 @@ const files = ref({
hidden: false hidden: false
} }
}); });
onMounted(() =>{
vueCode.value = findVueCodeById(route.query.id)
})
</script> </script>
<style scoped> <style scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
</style> </style>
\ No newline at end of file
src/router/index.js
...@@ -13,8 +13,7 @@ const routes = [ ...@@ -13,8 +13,7 @@ const routes = [
] ]
}, },
{ {
path: '/CodeAndCesium/:id/title/:title?', path: '/CodeAndCesium',
alias: ["/code", "/cesium"],
name: 'codeandcesium', name: 'codeandcesium',
component: () => import('@/pages/CodeAndCesium.vue'), component: () => import('@/pages/CodeAndCesium.vue'),
}, },
......
src/views/ElementMap.js 0 → 100644
export const elementPointMap = {
One: {
title: 'One',
pngUrl: '/src/assets/PointOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/PointOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/PointOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/PointOne.png'
}
}
export const elementLineMap = {
One: {
title: 'One',
pngUrl: '/src/assets/LineOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/LineOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/LineOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/LineOne.png'
}
}
export const elementPlaneMap = {
One: {
title: 'One',
pngUrl: '/src/assets/PlaneOne.png'
},
Two: {
title: 'Two',
pngUrl: '/src/assets/PlaneOne.png'
},
Three: {
title: 'Three',
pngUrl: '/src/assets/PlaneOne.png'
},
Four: {
title: 'Four',
pngUrl: '/src/assets/PlaneOne.png'
}
}
\ No newline at end of file
src/views/indexView.vue
<template> <template>
<h1>默认显示的首页</h1> <div class="app-continer">
<div class="mt-5">
<span class="text-base font-bold">点的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`point${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
<div class="mt-10">
<span class="text-base font-bold">线的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`line${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
<div class="mt-10">
<span class="text-base font-bold">面的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`plane${item.title}`)" class="item-container">
<span>{{item.title}}</span>
<img :src="item.pngUrl" width="250">
</div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { elementPointMap, elementLineMap, elementPlaneMap } from './ElementMap';
const router = useRouter()
const elementPointData = ref()
const elementLineData = ref()
const elementPlaneData = ref()
elementPointData.value = elementPointMap;
elementLineData.value = elementLineMap;
elementPlaneData.value = elementPlaneMap;
function indexBtn(id) {
router.push(`/CodeAndCesium/?id=${id}`)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.item-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment