fix:解决父子组件通信问题

src/views/dashboard/demo/components/DynamicInfo.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { toRefs, watch } from 'vue'
+
 import { Card, List } from 'ant-design-vue'
-import { dynamicInfoItems } from './data'
-import { Icon } from '@/components/Icon'
 
 const props = defineProps({
   data: {
@@ -9,6 +9,13 @@ const props = defineProps({
     default: () => {},
   },
 })
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue, oldValue)
+  },
+)
 const ListItem = List.Item
 const ListItemMeta = List.Item.Meta
 </script>

src/views/dashboard/demo/components/Operation.vue

@@ -1,12 +1,8 @@
 <script lang="ts" setup>
 import { Card, Comment, List, ListItem } from 'ant-design-vue'
-
 import dayjs from 'dayjs'
-import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons-vue'
+import { watch } from 'vue'
-import { ref } from 'vue'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { navItems } from './data'
-import { Icon } from '@/components/Icon'
 
 const props = defineProps({
   data: {
@@ -14,6 +10,13 @@ const props = defineProps({
     default: () => {},
   },
 })
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue, oldValue)
+  },
+)
 dayjs.extend(relativeTime)
 </script>
 
@@ -21,7 +24,7 @@ dayjs.extend(relativeTime)
   <Card :title="props.data.Header" v-bind="$attrs">
     <template #extra>
       <a-button type="link">
-        {{ props.data.Content.length }} 条指导建议
+        {{ props.data.Content.length || 0 }} 条指导建议
       </a-button>
     </template>
     <List

src/views/dashboard/demo/components/ParameterInfo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Card } from 'ant-design-vue'
-import { onBeforeUpdate, onMounted, onUpdated } from 'vue'
+import { onBeforeUpdate, onMounted, onUpdated, toRefs, watch } from 'vue'
 import { BasicTable, useTable } from '@/components/Table'
 import { getExaNow } from '@/api/alert/exa'
 
@@ -10,7 +10,13 @@ const props = defineProps({
     default: () => {},
   },
 })
-
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue, oldValue)
+  },
+)
 function getInterval(record: any) {
   console.log(record)
   if (record.predictValue === '-')

src/views/dashboard/demo/components/ProjectCard.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { Card, CardGrid } from 'ant-design-vue'
-import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
-import { groupItems } from './data'
+
-import { Icon } from '@/components/Icon'
 import { getExaNow } from '@/api/alert/exa'
 
 const props = defineProps({
@@ -11,7 +10,13 @@ const props = defineProps({
     default: () => {},
   },
 })
-
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue, oldValue)
+  },
+)
 const gridData = ref<any>([])
 
 // 页面挂载时批量请求并更新数据（避免在模板中调用异步）

src/views/dashboard/demo/components/demo.json

@@ -1,12 +1,12 @@
 {
   "title": "示例设备展示",
   "LeftUp": {
-    "Header": "设备静态图",
+    "Header": "1设备静态图",
-    "path": "svg/illustration.svg",
+    "path": "",
     "Content": ""
   },
   "LeftMidUp": {
-    "Header": "故障诊断",
+    "Header": "2故障诊断",
     "Content": [{ "FaultDesc": "失速", "Point": "YFJ_A_GZ001" }, { "FaultDesc": "喘振", "Point": "YFJ_A_GZ002" }, { "FaultDesc": "动调故障", "Point": "YFJ_A_GZ003" }, { "FaultDesc": "风机动调机构漏油", "Point": "YFJ_A_GZ004" }, { "FaultDesc": "风机动调伺服连杆轴脱开", "Point": "YFJ_A_GZ005" }, { "FaultDesc": "电机前轴(驱动端)承润滑异常", "Point": "YFJ_A_GZ006" }, { "FaultDesc": "电机后轴(非驱动端)承润滑异常", "Point": "YFJ_A_GZ007" }, { "FaultDesc": "风机润滑油冷却系统异常", "Point": "YFJ_A_GZ008" }, { "FaultDesc": "电机前轴(驱动端)承瓦面磨损", "Point": "YFJ_A_GZ009" }, { "FaultDesc": "电机后轴(非驱动端)承瓦面磨损", "Point": "YFJ_A_GZ010" }, { "FaultDesc": "轴承箱轴承(润滑)冷却异常", "Point": "YFJ_A_GZ011" }, { "FaultDesc": "轴承箱前轴(驱动端)承损坏", "Point": "YFJ_A_GZ012" }, { "FaultDesc": "轴承箱中轴(推力轴承)承损坏", "Point": "YFJ_A_GZ013" }, { "FaultDesc": "轴承箱后轴(非驱动端)承损坏", "Point": "YFJ_A_GZ014" }, { "FaultDesc": "油站油箱内油温异常", "Point": "YFJ_A_GZ015" }, { "FaultDesc": "油站油泵1泵体损坏", "Point": "YFJ_A_GZ016" }, { "FaultDesc": "油站油泵2泵体损坏", "Point": "YFJ_A_GZ017" }, { "FaultDesc": "油站控制油外漏", "Point": "YFJ_A_GZ018" }, { "FaultDesc": "油站润滑油外漏", "Point": "YFJ_A_GZ019" }, { "FaultDesc": "电动机电源一相断线", "Point": "YFJ_A_GZ020" }, { "FaultDesc": "电动机定子绕组匝间短路", "Point": "YFJ_A_GZ021" }, { "FaultDesc": "油站油泵1电动机电源一相断线", "Point": "YFJ_A_GZ022" }, { "FaultDesc": "油站油泵1电动机定子绕组匝间短路", "Point": "YFJ_A_GZ023" }, { "FaultDesc": "油站油泵2电动机电源一相断线", "Point": "YFJ_A_GZ024" }, { "FaultDesc": "油站油泵2电动机定子绕组匝间短路", "Point": "YFJ_A_GZ025" }, { "FaultDesc": "风机电动机冷却装置故障", "Point": "YFJ_A_GZ026" }, { "FaultDesc": "风机电动机电流异常变大", "Point": "YFJ_A_GZ027" }, { "FaultDesc": "油站油泵1电动机风扇坏", "Point": "YFJ_A_GZ028" }, { "FaultDesc": "油站油泵2电动机风扇坏", "Point": "YFJ_A_GZ029" }, { "FaultDesc": "油站油泵1电动机机械卡死", "Point": "YFJ_A_GZ030" }, { "FaultDesc": "油站油泵2电动机机械卡死", "Point": "YFJ_A_GZ031" }, { "FaultDesc": "油站油泵1电动机过载", "Point": "YFJ_A_GZ032" }, { "FaultDesc": "油站油泵2电动机过载", "Point": "YFJ_A_GZ033" }, { "FaultDesc": "油泵1和其电机靠背轮脱落", "Point": "YFJ_A_GZ034" }, { "FaultDesc": "油泵2和其电机靠背轮脱落", "Point": "YFJ_A_GZ035" }, { "FaultDesc": "冷却/密封风机1叶轮磨损", "Point": "YFJ_A_GZ036" }, { "FaultDesc": "冷却/密封风机2叶轮磨损", "Point": "YFJ_A_GZ037" }, { "FaultDesc": "油站控制油过滤器堵", "Point": "YFJ_A_GZ038" }, { "FaultDesc": "油站润滑油过滤器堵", "Point": "YFJ_A_GZ039" }
     ]
   },

src/views/dashboard/demo/components/staticImg.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Card, CardGrid } from 'ant-design-vue'
+import { ref, toRefs, watch } from 'vue'
 
 const props = defineProps({
   data: {
@@ -7,9 +8,22 @@ const props = defineProps({
     default: () => {},
   },
 })
-const imgUrl = getAssetsFile(props.data.path)
+
-// ../assets/imgs为图片公共路径
+// const { data } = toRefs(props)
-function getAssetsFile(url: string) {
+const imgUrl = ref('')
+
+watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    // 下方信息不会打印在控制台中
+    console.log('a has changed', newValue, oldValue)
+    // ../assets/imgs为图片公共路径
+    // imgUrl.value = getAssetsFile()
+    // imgUrl.value = '/111.gif'
+  },
+)
+function getAssetsFile() {
+  const url = props.data.path
   console.log(url)
   return new URL(`../../../../assets/${url}`, import.meta.url).href
 }
@@ -17,6 +31,6 @@ function getAssetsFile(url: string) {
 
 <template>
   <Card class="enter-y !my-1" :title="props.data.Header">
-    <img class="mx-auto h-70 w-full" :src="imgUrl">
+    <img class="mx-auto h-70 w-full" :src="props.data.path">
   </Card>
 </template>

src/views/dashboard/demo/index.vue

@@ -19,11 +19,11 @@ const route = useRoute()
 setTimeout(() => {
   loading.value = false
 }, 500)
-
-const data = ref<any>(data1)
 // 为了解决系统不支持传参的问题，改为从路由参数中获取id，不是最终解决办法，带系统commitbug
 const id = route.path.split('/').pop() || ''
-onBeforeMount(async () => {
+const data = ref<any>(data1)
+
+onMounted(async () => {
   console.log(route.path)
   const res = await getDeviceInfo(id)
   console.log(res)
@@ -62,16 +62,16 @@ onBeforeMount(async () => {
     </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" />
+        <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" />
+        <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" />
+          <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" />
+          <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" />
+        <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" />
+        <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" />