24 changed files with 729 additions and 172 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 247 KiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 325 KiB |
|
After Width: | Height: | Size: 325 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 467 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 467 KiB |
@ -0,0 +1,49 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { ref, watch } from 'vue' |
||||
|
import { Card } from 'ant-design-vue' |
||||
|
import ExpandAltOutlined from '@ant-design/icons-vue/ExpandAltOutlined' |
||||
|
import Svg from './svg.vue' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => {}, |
||||
|
}, |
||||
|
}) |
||||
|
const path = ref<string>('') |
||||
|
|
||||
|
watch( |
||||
|
() => props.data, |
||||
|
(newValue, oldValue) => { |
||||
|
// 下方信息不会打印在控制台中 |
||||
|
console.log('a has changed', newValue, oldValue) |
||||
|
path.value = newValue.path |
||||
|
}, |
||||
|
) |
||||
|
|
||||
|
const svgRef: any = ref(null) |
||||
|
|
||||
|
function fullScreen() { |
||||
|
// 检查子组件实例是否已经挂载 |
||||
|
if (svgRef.value) { |
||||
|
// 通过 .value 访问子组件实例，并调用其暴露的方法 |
||||
|
svgRef.value.toggleFullscreen() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Card class="enter-y !my-1" :title="props.data.Header"> |
||||
|
<template #extra> |
||||
|
<ExpandAltOutlined style="cursor:pointer" @click="fullScreen" /> |
||||
|
</template> |
||||
|
<Svg ref="svgRef" :path="path" /> |
||||
|
</Card> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
::v-deep .ant-card-body { |
||||
|
padding: 5px; |
||||
|
height:calc(46vh - 60px); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,205 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue' |
||||
|
import { getEXANowListReal } from '@/api/alert/exa' |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
path: string |
||||
|
default: '' |
||||
|
|
||||
|
}>() |
||||
|
|
||||
|
// const { data } = toRefs(props) |
||||
|
const svgContent = ref<string>('') |
||||
|
const svgError = ref<string>('') |
||||
|
const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] }) |
||||
|
// const pointElements = ref<NodeListOf<SVGElement> | undefined>() |
||||
|
// 监听数据变化 |
||||
|
watch( |
||||
|
() => props.path, |
||||
|
(newValue, oldValue) => { |
||||
|
// 下方信息不会打印在控制台中 |
||||
|
console.log('a has changed', newValue) |
||||
|
if (newValue !== oldValue && newValue !== '' && newValue != null) |
||||
|
loadSvg() |
||||
|
}, |
||||
|
{ immediate: true }, |
||||
|
|
||||
|
) |
||||
|
// 加载SVG文件 |
||||
|
async function loadSvg() { |
||||
|
console.log('加载SVG文件...') |
||||
|
if (!props.path) { |
||||
|
svgError.value = '未提供SVG路径' |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
svgError.value = '' |
||||
|
try { |
||||
|
// 判断路径是否为完整URL |
||||
|
let url = props.path |
||||
|
if (!url.startsWith('http') && !url.startsWith('/')) { |
||||
|
// 如果是相对路径，尝试从assets加载 |
||||
|
url = new URL(`../../../../assets/${url}`, import.meta.url).href |
||||
|
} |
||||
|
|
||||
|
// 添加时间戳参数以清除浏览器缓存 |
||||
|
const timestamp = new Date().getTime() |
||||
|
if (url.includes('?')) |
||||
|
url += `&t=${timestamp}` |
||||
|
else |
||||
|
url += `?t=${timestamp}` |
||||
|
|
||||
|
const response = await fetch(url) |
||||
|
|
||||
|
if (!response.ok) |
||||
|
throw new Error(`无法加载SVG: ${response.statusText}`) |
||||
|
|
||||
|
svgContent.value = await response.text() |
||||
|
|
||||
|
// 等待DOM更新后应用实时数据 |
||||
|
await nextTick() |
||||
|
document.querySelector('.svg-container > svg')?.removeAttribute('width') |
||||
|
document.querySelector('.svg-container > svg')?.removeAttribute('height') |
||||
|
|
||||
|
// updateRealtimeValues() |
||||
|
} |
||||
|
catch (error) { |
||||
|
console.error('加载SVG失败:', error) |
||||
|
svgError.value = `加载失败: ${error instanceof Error ? error.message : String(error)}` |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 更新SVG中的实时数据 |
||||
|
async function updateRealtimeValues() { |
||||
|
if (!svgContent.value) |
||||
|
return |
||||
|
try { |
||||
|
const svgElement = document.querySelector('.svg-container > svg') |
||||
|
svgElement?.removeAttribute('width') |
||||
|
svgElement?.removeAttribute('height') |
||||
|
// 获取SVG元素 |
||||
|
if (!svgElement) |
||||
|
return |
||||
|
|
||||
|
// 处理拥有point-name属性的元素 |
||||
|
const pointElements = svgElement.querySelectorAll('[point-name]') |
||||
|
const pointList: string[] = [] |
||||
|
|
||||
|
// 使用同步方式收集point-name |
||||
|
pointElements.forEach((element) => { |
||||
|
const pointName = element.getAttribute('point-name') |
||||
|
if (pointName) |
||||
|
pointList.push(pointName) |
||||
|
}) |
||||
|
|
||||
|
point.value = { itemNameArray: pointList } |
||||
|
const res = await getEXANowListReal(point.value) |
||||
|
|
||||
|
if (res && res.ReturnValue === 1 && res.ValueArray) { |
||||
|
const dataValues = res.ValueArray |
||||
|
|
||||
|
if (pointElements) { |
||||
|
pointElements.forEach((element, index) => { |
||||
|
// 不区分大小写比较标签名 |
||||
|
const value = dataValues[index] || '' |
||||
|
|
||||
|
// 设置文本内容，不再受标签名条件限制 |
||||
|
element.textContent = String(value) |
||||
|
|
||||
|
// 同时设置data-value属性便于调试和样式控制 |
||||
|
element.setAttribute('data-value', String(value)) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
catch (error) { |
||||
|
console.error('更新实时数据失败:', error) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const updateInterval = ref<NodeJS.Timeout | null>(null) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 设置定时器并保存引用，以便在组件卸载时清除 |
||||
|
updateInterval.value = setInterval(() => { |
||||
|
console.log('定时更新数据...') |
||||
|
updateRealtimeValues() |
||||
|
}, 1000) |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
// 清理定时器等资源 |
||||
|
clearInterval(updateInterval.value!) |
||||
|
}) |
||||
|
|
||||
|
// 全屏方案 |
||||
|
function toggleFullscreen() { |
||||
|
const container = $refs.svgContainer |
||||
|
if (isFullscreen()) |
||||
|
exitFullscreen() |
||||
|
else |
||||
|
this.requestFullscreen(container) |
||||
|
} |
||||
|
// 检查当前是否处于全屏状态 |
||||
|
function isFullscreen() { |
||||
|
return document.fullscreenElement |
||||
|
|| document.mozFullScreenElement |
||||
|
|| document.webkitFullscreenElement |
||||
|
|| document.msFullscreenElement |
||||
|
} |
||||
|
// 打开全屏 |
||||
|
function requestFullscreen(element) { |
||||
|
if (element.requestFullscreen) { |
||||
|
element.requestFullscreen() |
||||
|
} |
||||
|
else if (element.mozRequestFullScreen) { // Firefox |
||||
|
element.mozRequestFullScreen() |
||||
|
} |
||||
|
else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera |
||||
|
element.webkitRequestFullscreen() |
||||
|
} |
||||
|
else if (element.msRequestFullscreen) { // IE/Edge |
||||
|
element.msRequestFullscreen() |
||||
|
} |
||||
|
} |
||||
|
// 关闭全屏 |
||||
|
function exitFullscreen() { |
||||
|
if (document.exitFullscreen) { |
||||
|
document.exitFullscreen() |
||||
|
} |
||||
|
else if (document.mozCancelFullScreen) { // Firefox |
||||
|
document.mozCancelFullScreen() |
||||
|
} |
||||
|
else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera |
||||
|
document.webkitExitFullscreen() |
||||
|
} |
||||
|
else if (document.msExitFullscreen) { // IE/Edge |
||||
|
document.msExitFullscreen() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<!-- <Card class="enter-y !my-1" :title="data.Header || 'SVG可视化'"> --> |
||||
|
<div v-if="svgError" class="h-40 flex items-center justify-center text-red-500"> |
||||
|
{{ svgError }} |
||||
|
</div> |
||||
|
<div v-else class="svg-container" v-html="svgContent" /> |
||||
|
<!-- </Card> --> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
::v-deep .ant-card-body { |
||||
|
padding: 10px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.svg-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; /* 点击时可以手动触发数据更新 */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,287 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue' |
||||
|
import { getEXANowListReal } from '@/api/alert/exa' |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
path: string |
||||
|
}>() |
||||
|
|
||||
|
// 定义SVG容器的引用 |
||||
|
const svgContainer = ref<HTMLElement>() |
||||
|
|
||||
|
// const { data } = toRefs(props) |
||||
|
const svgContent = ref<string>('') |
||||
|
const svgError = ref<string>('') |
||||
|
const point = ref<{ itemNameArray: string[] }>({ itemNameArray: [] }) |
||||
|
// const pointElements = ref<NodeListOf<SVGElement> | undefined>() |
||||
|
// 监听数据变化 |
||||
|
watch( |
||||
|
() => props.path, |
||||
|
(newValue, oldValue) => { |
||||
|
// 下方信息不会打印在控制台中 |
||||
|
console.log('a has changed', newValue) |
||||
|
if (newValue !== oldValue && newValue !== '' && newValue != null) |
||||
|
loadSvg() |
||||
|
}, |
||||
|
{ immediate: true }, |
||||
|
|
||||
|
) |
||||
|
// 加载SVG文件 |
||||
|
async function loadSvg() { |
||||
|
console.log('加载SVG文件...') |
||||
|
if (!props.path) { |
||||
|
svgError.value = '未提供SVG路径' |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
svgError.value = '' |
||||
|
try { |
||||
|
// 判断路径是否为完整URL |
||||
|
let url = props.path |
||||
|
if (!url.startsWith('http') && !url.startsWith('/')) { |
||||
|
// 如果是相对路径，尝试从assets加载 |
||||
|
url = new URL(`../../../../assets/${url}`, import.meta.url).href |
||||
|
} |
||||
|
|
||||
|
// 添加时间戳参数以清除浏览器缓存 |
||||
|
const timestamp = new Date().getTime() |
||||
|
if (url.includes('?')) |
||||
|
url += `&t=${timestamp}` |
||||
|
else |
||||
|
url += `?t=${timestamp}` |
||||
|
|
||||
|
const response = await fetch(url) |
||||
|
|
||||
|
if (!response.ok) |
||||
|
throw new Error(`无法加载SVG: ${response.statusText}`) |
||||
|
|
||||
|
svgContent.value = await response.text() |
||||
|
|
||||
|
// 等待DOM更新后应用实时数据 |
||||
|
await nextTick() |
||||
|
document.querySelector('.svg-container > svg')?.setAttribute('width', '100%') |
||||
|
document.querySelector('.svg-container > svg')?.setAttribute('height', '100%') |
||||
|
document.querySelector('.svg-container > svg')?.setAttribute('preserveAspectRatio', 'none') |
||||
|
// updateRealtimeValues() |
||||
|
} |
||||
|
catch (error) { |
||||
|
console.error('加载SVG失败:', error) |
||||
|
svgError.value = `加载失败: ${error instanceof Error ? error.message : String(error)}` |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 更新SVG中的实时数据 |
||||
|
async function updateRealtimeValues() { |
||||
|
if (!svgContent.value) |
||||
|
return |
||||
|
try { |
||||
|
const svgElement = document.querySelector('.svg-container > svg') |
||||
|
svgElement?.setAttribute('width', '100%') |
||||
|
svgElement?.setAttribute('height', '100%') |
||||
|
svgElement?.setAttribute('preserveAspectRatio', 'none') |
||||
|
|
||||
|
// 获取SVG元素 |
||||
|
if (!svgElement) |
||||
|
return |
||||
|
|
||||
|
// 处理拥有point-name属性的元素 |
||||
|
const pointElements = svgElement.querySelectorAll('[point-name]') |
||||
|
const pointList: string[] = [] |
||||
|
|
||||
|
// 使用同步方式收集point-name |
||||
|
pointElements.forEach((element) => { |
||||
|
const pointName = element.getAttribute('point-name') |
||||
|
if (pointName) |
||||
|
pointList.push(pointName) |
||||
|
}) |
||||
|
|
||||
|
point.value = { itemNameArray: pointList } |
||||
|
const res = await getEXANowListReal(point.value) |
||||
|
|
||||
|
if (res && res.ReturnValue === 1 && res.ValueArray) { |
||||
|
const dataValues = res.ValueArray |
||||
|
|
||||
|
if (pointElements) { |
||||
|
pointElements.forEach((element, index) => { |
||||
|
// 不区分大小写比较标签名 |
||||
|
const value = dataValues[index] || '' |
||||
|
|
||||
|
// 设置文本内容，不再受标签名条件限制 |
||||
|
element.textContent = String(value) |
||||
|
|
||||
|
// 同时设置data-value属性便于调试和样式控制 |
||||
|
element.setAttribute('data-value', String(value)) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
catch (error) { |
||||
|
console.error('更新实时数据失败:', error) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const updateInterval = ref<NodeJS.Timeout | null>(null) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 设置定时器并保存引用，以便在组件卸载时清除 |
||||
|
updateInterval.value = setInterval(() => { |
||||
|
console.log('定时更新数据...') |
||||
|
updateRealtimeValues() |
||||
|
}, 1000) |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
// 清理定时器等资源 |
||||
|
clearInterval(updateInterval.value!) |
||||
|
}) |
||||
|
|
||||
|
// 全屏方案 |
||||
|
function toggleFullscreen() { |
||||
|
const container = svgContainer.value |
||||
|
if (!container) |
||||
|
return |
||||
|
|
||||
|
if (isFullscreen()) |
||||
|
exitFullscreen() |
||||
|
else |
||||
|
requestFullscreen(container) |
||||
|
} |
||||
|
// 检查当前是否处于全屏状态 |
||||
|
function isFullscreen() { |
||||
|
return document.fullscreenElement |
||||
|
|| document.mozFullScreenElement |
||||
|
|| document.webkitFullscreenElement |
||||
|
|| document.msFullscreenElement |
||||
|
} |
||||
|
// 打开全屏 |
||||
|
function requestFullscreen(element) { |
||||
|
if (element.requestFullscreen) { |
||||
|
element.requestFullscreen() |
||||
|
} |
||||
|
else if (element.mozRequestFullScreen) { // Firefox |
||||
|
element.mozRequestFullScreen() |
||||
|
} |
||||
|
else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera |
||||
|
element.webkitRequestFullscreen() |
||||
|
} |
||||
|
else if (element.msRequestFullscreen) { // IE/Edge |
||||
|
element.msRequestFullscreen() |
||||
|
} |
||||
|
} |
||||
|
// 关闭全屏 |
||||
|
function exitFullscreen() { |
||||
|
if (document.exitFullscreen) { |
||||
|
document.exitFullscreen() |
||||
|
} |
||||
|
else if (document.mozCancelFullScreen) { // Firefox |
||||
|
document.mozCancelFullScreen() |
||||
|
} |
||||
|
else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera |
||||
|
document.webkitExitFullscreen() |
||||
|
} |
||||
|
else if (document.msExitFullscreen) { // IE/Edge |
||||
|
document.msExitFullscreen() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 2. 使用 defineExpose 将 greet 方法暴露给父组件 |
||||
|
defineExpose({ |
||||
|
toggleFullscreen, |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="svg-wrapper"> |
||||
|
<!-- 控制栏 |
||||
|
<div class="svg-controls"> |
||||
|
<h3 class="svg-title"> |
||||
|
SVG可视化 |
||||
|
</h3> |
||||
|
<button class="fullscreen-btn" title="切换全屏" @click="toggleFullscreen"> |
||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> |
||||
|
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /> |
||||
|
</svg> |
||||
|
</button> |
||||
|
</div> --> |
||||
|
|
||||
|
<!-- SVG内容 --> |
||||
|
<div v-if="svgError" class="h-40 flex items-center justify-center text-red-500"> |
||||
|
{{ svgError }} |
||||
|
</div> |
||||
|
<div v-else ref="svgContainer" class="svg-container" v-html="svgContent" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.svg-wrapper { |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
border: 1px solid #e8e8e8; |
||||
|
border-radius: 6px; |
||||
|
/* overflow: auto; */ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* .svg-controls { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10px 16px; |
||||
|
background-color: #f5f5f5; |
||||
|
border-bottom: 1px solid #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.svg-title { |
||||
|
margin: 0; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} */ |
||||
|
|
||||
|
.svg-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height:100%; |
||||
|
min-height: 300px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
/* 全屏状态样式 */ |
||||
|
:global(.svg-wrapper:fullscreen), |
||||
|
:global(.svg-wrapper:-webkit-full-screen), |
||||
|
:global(.svg-wrapper:-moz-full-screen), |
||||
|
:global(.svg-wrapper:-ms-fullscreen) { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
border: none; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
|
||||
|
:global(.svg-wrapper:fullscreen) .svg-container, |
||||
|
:global(.svg-wrapper:-webkit-full-screen) .svg-container, |
||||
|
:global(.svg-wrapper:-moz-full-screen) .svg-container, |
||||
|
:global(.svg-wrapper:-ms-fullscreen) .svg-container { |
||||
|
flex: 1; |
||||
|
padding: 20px; |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
} |
||||
|
|
||||
|
/* SVG内容自适应 */ |
||||
|
.svg-container { |
||||
|
/* max-width: 100%; |
||||
|
max-height: 100%; */ |
||||
|
height:100%; |
||||
|
width:100% |
||||
|
|
||||
|
} |
||||
|
|
||||
|
svg { |
||||
|
height:98%; |
||||
|
width:100%; |
||||
|
} |
||||
|
</style> |
||||
@ -1,68 +0,0 @@ |
|||||
<script lang="ts" setup> |
|
||||
import { onMounted, ref } from 'vue' |
|
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue' |
|
||||
import ProjectCard from './components/ProjectCard.vue' |
|
||||
import DynamicInfo from './components/DynamicInfo.vue' |
|
||||
import StaticImg from './components/staticImg.vue' |
|
||||
import ParameterInfo from './components/ParameterInfo.vue' |
|
||||
import Operation from './components/Operation.vue' |
|
||||
import data from './components/demo.json' |
|
||||
import { PageWrapper } from '@/components/Page' |
|
||||
|
|
||||
const loading = ref(true) |
|
||||
|
|
||||
onMounted(() => { |
|
||||
const htmlRoot = document.getElementsByClassName('workbench') |
|
||||
// let theme = window.localStorage.getItem('__APP__DARK__MODE__') |
|
||||
const theme = 'dark' |
|
||||
|
|
||||
if (htmlRoot && theme) { |
|
||||
for (let i = 0; i < htmlRoot.length; i++) |
|
||||
htmlRoot[i].setAttribute('data-theme', theme) |
|
||||
} |
|
||||
// theme = htmlRoot = null |
|
||||
}) |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
loading.value = false |
|
||||
}, 500) |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div class="workbench m-1" data-theme="light"> |
|
||||
<WorkbenchHeader class="workbench m-1" data-theme="light" :data="data" /> |
|
||||
<div class="enter-y workbench h-92 md:flex" data-theme="light"> |
|
||||
<StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp" /> |
|
||||
<ProjectCard data-theme="light" class="enter-y workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp" /> |
|
||||
<div class="enter-y w-full !mr-4 md:w-1/4"> |
|
||||
<DynamicInfo :loading="loading" data-theme="light" class="workbench enter-y m-1 h-35 w-full" :data="data.RightMidUp" /> |
|
||||
<Operation data-theme="light" class="workbench enter-y m-1 h-54 w-full" :loading="loading" :data="data.RightUp" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="enter-y workbench h-95 md:flex" data-theme="light"> |
|
||||
<StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown" /> |
|
||||
<ParameterInfo data-theme="light" class="workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.RightDown" /> |
|
||||
</div> |
|
||||
<!-- <div class="enter-y w-full !mr-4 lg:w-7/10"> |
|
||||
<StaticImg :loading="loading" :data="data.LeftUp" class="enter-y" /> |
|
||||
</div> --> |
|
||||
|
|
||||
<!-- <div class="enter-y w-full !mr-4 lg:w-7/10"> |
|
||||
<ProjectCard :loading="loading" class="enter-y" /> |
|
||||
<DynamicInfo :loading="loading" class="enter-y !my-4" /> |
|
||||
</div> |
|
||||
<div class="enter-y w-full lg:w-3/10"> |
|
||||
<QuickNav :loading="loading" class="enter-y" /> |
|
||||
|
|
||||
<Card class="enter-y !my-4" :loading="loading"> |
|
||||
<img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg"> |
|
||||
</Card> |
|
||||
|
|
||||
<SaleRadar :loading="loading" class="enter-y" /> |
|
||||
</div> --> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="less"> |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue