数据大屏

.env.development

@@ -1,5 +1,6 @@
 NODE_ENV=development
 VITE_APP_TITLE='数字乡村云平台'
-VITE_APP_API_URL='http://192.168.34.155:1024'
+# VITE_APP_API_URL='http://192.168.34.155:1024'
+VITE_APP_API_URL='http://jxjzw.zhgdyun.com:10248/village'
 # VITE_APP_API_URL='http://jxjzw.zhgdyun.com:11026'
 VITE_MQTT_URL='ws://jxj.zhgdyun.com:8083/mqtt'

.env.production

@@ -1,4 +1,5 @@
 NODE_ENV=production
 VITE_APP_TITLE='数字乡村云平台'
-VITE_APP_API_URL='http://jxjzw.zhgdyun.com:11026'
+# VITE_APP_API_URL='http://jxjzw.zhgdyun.com:11026'
+VITE_APP_API_URL='http://jxjzw.zhgdyun.com:10248/village'
 VITE_MQTT_URL='ws://jxj.zhgdyun.com:8083/mqtt'

src/views/business/bigdata/components/alarm-info.vue

@@ -300,14 +300,21 @@
     alarmTabValue.value = value;
   };
 
+  const initHeight = () => {
+    let height = document.querySelector('.bigdata-right').clientHeight;
+    let height1 = document.querySelector('.bigdata-right-1').clientHeight;
+    let height3 = document.querySelector('.bigdata-right-3').clientHeight;
+    let otherHeight = 76;
+    let gapHeight = 40;
+    contentMaxHeight.value = `${height - otherHeight - gapHeight - height1 - height3}px`;
+  };
+
   onMounted(async () => {
     await getTableList();
     await queryConfigPage();
-    nextTick(() => {
+    initHeight();
-      let height = document.querySelector('.bigdata-right-2').clientHeight;
+
-      let otherHeight = 76;
+    window.addEventListener('resize', initHeight);
-      contentMaxHeight.value = `${height - otherHeight}px`;
-    });
   });
   const handleEdit = () => {
     alarmInfoDialogRef.value.showModal(isEdit.value ? alarmInfoData.value : null);

src/views/business/bigdata/components/bigdata-left.vue

@@ -21,15 +21,21 @@
   const left1Height = ref();
   const left2Height = ref();
   const left3Height = ref();
-  onMounted(() => {
+
+  const initHeight = () => {
     let height = document.documentElement.clientHeight;
     let topHeight = 170;
     let bottomHeight = 30;
     contentHeight.value = height - topHeight - bottomHeight;
-
     left1Height.value = Number(contentHeight.value * 0.3189).toFixed(2);
     left2Height.value = Number(contentHeight.value * 0.2054).toFixed(2);
     left3Height.value = Number(contentHeight.value * 0.4245).toFixed(2);
+  };
+
+  onMounted(() => {
+    initHeight();
+
+    window.addEventListener('resize', initHeight);
   });
 </script>
 

src/views/business/bigdata/components/bigdata-right.vue

@@ -3,10 +3,10 @@
     <div class="bigdata-right-1" style="width: 100%" :style="{ height: left1Height + 'px', minHeight: '250px' }">
       <Weather />
     </div>
-    <div class="bigdata-right-2" style="width: 100%" :style="{ height: left2Height + 'px'}">
+    <div class="bigdata-right-2" style="width: 100%" :style="{ height: left2Height + 'px' }">
       <AlarmInfo />
     </div>
-    <div class="bigdata-right-3" style="width: 100%" :style="{ height: left3Height + 'px', minHeight: '180px'  }">
+    <div class="bigdata-right-3" style="width: 100%" :style="{ height: left3Height + 'px', minHeight: '180px' }">
       <VillageNews />
     </div>
   </div>
@@ -21,7 +21,8 @@
   const left1Height = ref();
   const left2Height = ref();
   const left3Height = ref();
-  onMounted(() => {
+
+  const initHeight = () => {
     let height = document.documentElement.clientHeight;
     let topHeight = 170;
     let bottomHeight = 30;
@@ -30,6 +31,13 @@
     left1Height.value = Number(contentHeight.value * 0.3189).toFixed(2);
     left2Height.value = Number(contentHeight.value * 0.4245).toFixed(2);
     left3Height.value = Number(contentHeight.value * 0.2054).toFixed(2);
+    console.log(left1Height.value, left2Height.value, left3Height.value);
+  };
+
+  onMounted(() => {
+    initHeight();
+
+    window.addEventListener('resize', initHeight);
   });
 </script>
 

src/views/business/bigdata/components/party-member.vue

@@ -104,14 +104,20 @@
     }
   };
 
+  const initHeight = () => {
+    let height = document.querySelector('.bigdata-left').clientHeight;
+    let height1 = document.querySelector('.bigdata-left-1').clientHeight;
+    let height2 = document.querySelector('.bigdata-left-2').clientHeight;
+    let otherHeight = 76;
+    let gapHeight = 40;
+    contentMaxHeight.value = `${height - otherHeight - height1 - height2 - gapHeight}px`;
+  };
+
   onMounted(async () => {
     // await getPartyMember();
     await queryConfigPage();
-    nextTick(() => {
+    initHeight();
-      let height = document.querySelector('.bigdata-left-3').clientHeight;
+    window.addEventListener('resize', initHeight);
-      let otherHeight = 76;
-      contentMaxHeight.value = `${height - otherHeight}px`;
-    });
   });
   const handleEdit = () => {
     partyMemberDialogRef.value.showModal(isEdit.value ? partyMemberData.value : null);

src/views/business/bigdata/components/village-info-small.vue

@@ -56,11 +56,18 @@
     const res = await bigdataApi.queryVillage();
     villageInfo.value = res.data;
   };
-  onMounted(async () => {
+
-    await getVillageInfo();
+  const initHeight = () => {
     let height = document.querySelector('.bigdata-left-1').clientHeight;
     let otherHeight = 76;
     contentMaxHeight.value = `${height - otherHeight}px`;
+  };
+
+  onMounted(async () => {
+    await getVillageInfo();
+    initHeight();
+
+    window.addEventListener('resize', initHeight);
   });
   const handleEdit = () => {
     villageInfoDialogRef.value.showModal(villageInfo.value);

src/views/business/bigdata/components/village-info.vue

@@ -68,14 +68,21 @@
     villageInfo.value = res.data;
     villageInfo.value.villageImageList = villageInfo.value?.imageUrl?.split(',') || [];
   };
-  onMounted(async () => {
+
-    await getVillageInfo();
+  const initHeight = () => {
     let height = document.documentElement.clientHeight;
     let topHeight = 170;
     let bottomHeight = 30;
     let otherHeight = 76;
     contentHeight.value = `${height - topHeight - bottomHeight}px`;
     contentMaxHeight.value = `${height - topHeight - bottomHeight - otherHeight}px`;
+  };
+
+  onMounted(async () => {
+    await getVillageInfo();
+    initHeight();
+
+    window.addEventListener('resize', initHeight);
   });
   const handleEdit = () => {
     villageInfoDialogRef.value.showModal(villageInfo.value);

src/views/business/bigdata/components/village-news.vue

@@ -2,7 +2,17 @@
   <div class="bigdata-village-news">
     <BCard title="乡村新闻" :isEdit="false" style="height: 100%">
       <div class="info-content" :style="{ maxHeight: contentMaxHeight }">
-        <a-carousel :autoplay="true">
+        <a-carousel :autoplay="true" :dots="false" arrows>
+          <template #prevArrow>
+            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+              <left-circle-outlined />
+            </div>
+          </template>
+          <template #nextArrow>
+            <div class="custom-slick-arrow" style="right: 10px">
+              <right-circle-outlined />
+            </div>
+          </template>
           <div class="news" v-for="(item, index) in newsList" :key="item.id">
             <div class="news-title">
               <span class="index">{{ index + 1 }}</span>
@@ -15,9 +25,7 @@
               </div>
             </div>
           </div>
-          <div class="empty-news" v-if="newsList.length === 0">
+          <div class="empty-news" v-if="newsList.length === 0">暂无乡村新闻</div>
-            暂无乡村新闻
-          </div>
         </a-carousel>
       </div>
     </BCard>
@@ -33,7 +41,7 @@
     () => useUserStore().getCurrentVillageId,
     (value) => {
       getList();
-    },
+    }
   );
 
   const newsList = ref([]);
@@ -138,4 +146,26 @@
     font-size: 16px;
     color: #ffffff;
   }
+
+  :deep(.slick-arrow.custom-slick-arrow) {
+    width: 25px;
+    height: 25px;
+    font-size: 25px;
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    transition: ease all 0.3s;
+    opacity: 0.3;
+    z-index: 1;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:before) {
+    display: none;
+  }
+  :deep(.slick-arrow.custom-slick-arrow:hover) {
+    color: #fff;
+    opacity: 0.5;
+  }
+
+  :deep(.slick-slide h3) {
+    color: #fff;
+  }
 </style>

src/views/business/bigdata/components/weather.vue

@@ -182,14 +182,18 @@
     }
   };
 
+  const initHeight = () => {
+    let height = document.querySelector('.bigdata-right-1').clientHeight;
+    let otherHeight = 76;
+    contentMaxHeight.value = `${height - otherHeight}px`;
+  };
+
   onMounted(async () => {
     await queryCapacity();
     await queryConfigPage();
-    nextTick(() => {
+    initHeight();
-      let height = document.querySelector('.bigdata-right-1').clientHeight;
+
-      let otherHeight = 76;
+    window.addEventListener('resize', initHeight);
-      contentMaxHeight.value = `${height - otherHeight}px`;
-    });
   });
   const handleEdit = () => {
     weatherDialogRef.value.showModal(isEdit.value ? weatherData.value : null);