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)

const data = ref<any>(data1)
const id = ref<any>(route.query.id)
onBeforeMount(async () => {
  const res = await getDeviceInfo(id.value)
  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="bg-[#f5f5f5]">
      <div class="enter-y h-95 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 w-full md:w-1/4">
          <DynamicInfo :loading="loading" class="enter-y m-1 h-35 w-full" :data="data.RightMidUp" />
          <Operation class="enter-y m-1 h-57 w-full" :loading="loading" :data="data.RightUp" />
        </div>
      </div>
      <div class="enter-y h-98 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>