You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.5 KiB
97 lines
3.5 KiB
<script lang="ts" setup>
|
|
import { onBeforeMount, onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { message } from 'ant-design-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 StaticSvg from './components/staticSvg.vue'
|
|
|
|
import ParameterInfo from './components/ParameterInfo.vue'
|
|
import Operation from './components/Operation.vue'
|
|
import data1 from './components/demo.json'
|
|
import { PageWrapper } from '@/components/Page'
|
|
import { getDeviceInfo } from '@/api/device'
|
|
import { getExaNow } from '@/api/alert/exa'
|
|
|
|
const loading = ref(true)
|
|
const route = useRoute()
|
|
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 500)
|
|
// 为了解决系统不支持传参的问题，改为从路由参数中获取id，不是最终解决办法，带系统commitbug
|
|
const id = route.path.split('/').pop() || ''
|
|
const data = ref<any>(data1)
|
|
|
|
onMounted(async () => {
|
|
console.log(route.path)
|
|
const res = await getDeviceInfo(id)
|
|
console.log(res)
|
|
if (res)
|
|
data.value = JSON.parse(res.Page_Content)
|
|
// getColor(data.value)
|
|
})
|
|
|
|
// async function getColor(data: any) {
|
|
// const rows = data.LeftMidUp.Content || []
|
|
// const gridData = [] as any[]
|
|
// for (const item of rows) {
|
|
// try {
|
|
// const param = item.Point
|
|
// const res = await getExaNow(param)
|
|
|
|
// let ifColor: boolean = false
|
|
// if (res != null)
|
|
// ifColor = res === '1'
|
|
|
|
// gridData.push(Object.assign({}, item, { ifColor }))
|
|
|
|
// console.log(gridData)
|
|
// }
|
|
// catch (e) {
|
|
// }
|
|
// }
|
|
// data.LeftMidUp.Content = gridData
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<PageWrapper v-if="id != null && id !== undefined" class="m-1">
|
|
<!-- <template #headerContent>
|
|
<WorkbenchHeader class="m-1" :data="data" />
|
|
</template> -->
|
|
<div class="h-[calc(91vh)] bg-[#f5f5f5]">
|
|
<div class="enter-y h-[calc(91vh/2)] md:flex">
|
|
<StaticImg class="m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp || {}" />
|
|
<ProjectCard class="enter-y m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp || {}" />
|
|
<div class="enter-y h-[calc(91vh/2)] w-full md:w-1/4">
|
|
<DynamicInfo :loading="loading" class="enter-y m-1 h-[calc(17vh)] w-full" :data="data.RightMidUp || {}" />
|
|
<Operation class="enter-y m-1 h-[calc(27vh)] w-full" :loading="loading" :data="data.RightUp || {}" />
|
|
</div>
|
|
</div>
|
|
<div class="enter-y h-[calc(91vh/2)] md:flex">
|
|
<StaticSvg class="m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown || {}" />
|
|
<ParameterInfo class="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>
|
|
</pagewrapper>
|
|
</template>
|
|
|