alert-front/src/views/dashboard/demo/index.vue

<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 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">
        <StaticImg 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>