fix: 首页添加定时请求功能

src/views/index.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="home-container">
-    <title-nav />
-    <div class="home-page">
+    <title-nav/>
+    <div class="home-page" v-if="refreshTime">
       <!--    <top-scroll-bar />-->
       <div class="content-top">
         <div class="column-row">
-          <access-error />
-          <alarm-ranking />
+          <access-error :refreshTime="refreshTime" />
+          <alarm-ranking :refreshTime="refreshTime" />
         </div>
-        <app-health />
+        <app-health :refreshTime="refreshTime"/>
         <div class="column-row">
-          <top-scroll-bar />
-          <run-result />
+          <top-scroll-bar :refreshTime="refreshTime"/>
+          <run-result :refreshTime="refreshTime"/>
         </div>
       </div>
       <div class="content-chart">
-        <health-tendency />
-        <run-tendency />
+        <health-tendency :refreshTime="refreshTime"/>
+        <run-tendency :refreshTime="refreshTime"/>
       </div>
     </div>
   </div>
@@ -30,6 +30,15 @@ import accessError from "./index/widget/accessError.vue"
 import alarmRanking from "./index/widget/alarmRanking.vue"
 import runTendency from "./index/widget/runTendency.vue"
 import healthTendency from "./index/widget/healthTendency.vue"
+import {onMounted} from "vue";
+
+const {proxy} = getCurrentInstance()
+const refreshTime = ref(null)
+onMounted(()=>{
+  proxy.getConfigKey("index.refresh.time").then(response => {
+    refreshTime.value = Number(response.msg) * 60000
+  });
+})
 </script>
 <style lang="scss">
 @import "./index/css/style.scss";

src/views/index/css/style.scss

@@ -202,18 +202,22 @@
 
     .item-cq {
       top: 63%;
-      left: 17%;
+      left: 20%;
     }
 
     .item-js {
       top: 4%;
-      left: 50%;
-      margin-left: -65px;
+      left: 20%;
+    }
+
+    .item-yw{
+      top: 4%;
+      left: 58%;
     }
 
     .item-hg {
       top: 63%;
-      left: 62%;
+      left: 58%;
     }
 
     .item-fb {

src/views/index/widget/accessError.vue

@@ -10,38 +10,53 @@
       <span><span class="tab-yellow"/>访问错误次数</span>
     </div>
     <div class="access-row" v-for="item in accessData">
-      <div class="a-r-label">{{item.name}}</div>
+      <div class="a-r-label">{{ item.name }}</div>
       <div class="a-r-progress">
         <div class="p-total">
           <span class="progress" :style="`width: calc(${(item.total/maxValue)*100}% - 40px)`"/>
-          {{item.total}}
+          {{ item.total }}
         </div>
         <div class="p-total p-error">
           <span class="progress" :style="`width: ${(item.error/item.total)*100}%`"/>
-          {{item.error}}
+          {{ item.error }}
         </div>
-<!--        <el-progress :percentage="item.total" :format="(percentage) => (percentage)"/>-->
-<!--        <el-progress :percentage="item.error" :format="(percentage) => (percentage)"/>-->
+        <!--        <el-progress :percentage="item.total" :format="(percentage) => (percentage)"/>-->
+        <!--        <el-progress :percentage="item.error" :format="(percentage) => (percentage)"/>-->
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import {bizAccess} from "@/api/index/hl"
-import {onMounted} from "vue";
+import {onMounted, onUnmounted} from "vue";
 import {useRouter} from "vue-router";
 
+const props = defineProps(["refreshTime"])
 const accessData = ref([])
 const maxValue = ref(0)
 const router = useRouter()
-onMounted(async ()=>{
+const interval = ref(null)
+onMounted(() => {
+  getBiz()
+  interval.value = setInterval(() => {
+    getBiz()
+  }, props.refreshTime)
+})
+
+
+onUnmounted(() => {
+  clearInterval(interval.value)
+})
+
+const getBiz = async () => {
   const res = await bizAccess()
   accessData.value = res.data
-  maxValue.value = Math.max(...accessData.value.map(item=>item.total))+20
-})
+  maxValue.value = Math.max(...accessData.value.map(item => item.total)) + 20
+}
+
 
-function target(){
-  router.push({path:"/alarm/bizAccess",query:{today:"true"}})
+function target() {
+  router.push({path: "/alarm/bizAccess", query: {today: "true"}})
 }
 
 </script>

src/views/index/widget/alarmRanking.vue

@@ -24,16 +24,27 @@
 </template>
 <script setup lang="ts">
 import {objAlarm} from "@/api/index/hl"
-import {onMounted} from "vue";
+import {onMounted,onUnmounted} from "vue";
 import {useRouter} from "vue-router";
 
+const props = defineProps(["refreshTime"])
+
 const alarm = ref(false)
 const alarmData = ref([])
 const maxValue = ref(0)
 const router = useRouter()
+const interval = ref(null)
 onMounted(()=>{
   getAlarm()
+  interval.value = setInterval(() => {
+    getAlarm()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
 })
+
 async function getAlarm(){
   const res = await objAlarm()
   alarmData.value = res.data.data.sort((a,b)=>b.num - a.num)

src/views/index/widget/appHealth.vue

@@ -16,15 +16,28 @@
 <script setup lang="ts">
 import itemImg from "@/assets/images/health-mini.png"
 import {hlCurr} from "@/api/index/hl"
-import {onMounted} from "vue";
+import {onMounted,onUnmounted} from "vue";
 import {useRouter} from "vue-router"
+const props = defineProps(["refreshTime"])
 const router = useRouter()
 const currData= ref([])
-const itemClass = ["","item-cq","item-js","item-hg","item-fb"]
-onMounted(async ()=>{
+const itemClass = ["","item-cq","item-js","item-hg","item-fb","item-yw"]
+const interval = ref(null)
+onMounted( ()=>{
+  getHl()
+  interval.value = setInterval(() => {
+    getHl()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
+})
+
+async function getHl(){
   const res = await hlCurr()
   currData.value = res.data
-})
+}
 
 function handleDetails(item){
   const {modelId,hlScoreId} = item

src/views/index/widget/healthTendency.vue

@@ -20,10 +20,12 @@
 import * as echarts from "echarts";
 import {parseTime} from "@/utils/ruoyi"
 import {hlMonthDay} from "@/api/index/hl"
-import {onMounted} from "vue";
+import {onMounted,onUnmounted} from "vue";
+const props = defineProps(["refreshTime"])
 const today = new Date();
 const yesterday = new Date(today);
-yesterday.setDate(today.getDate() - 1);
+const interval = ref(null)
+yesterday.setDate(today.getDate());
 const monthDay = ["按年","按月","按日"]
 const dateType = ref("按日")
 const dateValue = ref(yesterday)
@@ -31,6 +33,13 @@ const chartSort = ref(null)
 const pickerType = ref("data")
 onMounted(()=>{
   changeDate()
+  interval.value = setInterval(() => {
+    changeDate()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
 })
 async function changeDate(){
   if(dateType.value=="按月"){

src/views/index/widget/runResult.vue

@@ -17,13 +17,22 @@
 </template>
 <script setup lang="ts">
 import {riskList} from "@/api/index/hl"
-import {onMounted} from "vue";
+import {onMounted,onUnmounted} from "vue";
+const props = defineProps(["refreshTime"])
 const risk = ref(false)
 const riskData = ref([])
 const riskNum = ref(0)
+const interval = ref(null)
 
 onMounted(()=>{
   getRisk()
+  interval.value = setInterval(() => {
+    getRisk()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
 })
 
 async function getRisk(){

src/views/index/widget/runTendency.vue

@@ -33,12 +33,22 @@ import {msTrend,msTrendDetail} from "@/api/index/hl"
 import {formatDate} from "@/utils/index.js"
 import indexConfig from "./indexConfig.vue"
 import * as echarts from "echarts";
+import {onUnmounted} from "vue";
+const props = defineProps(["refreshTime"])
 const trendData = ref([])
 const active = ref(0)
 const chartSort = ref(null)
 const visible = ref(false)
+const interval = ref(null)
 onMounted(() => {
   getMsTrend()
+  interval.value = setInterval(() => {
+    getMsTrend()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
 })
 
 async function getMsTrend(){

src/views/index/widget/topScrollBar.vue

@@ -4,30 +4,46 @@
       <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>最近巡检</span>
       <span class="t-span">
         <span class="t-time">{{ result.time }}</span> |
-        <span class="text-a"  @click="nowCheck(false)">查看详情 </span></span>
+        <span class="text-a" @click="nowCheck(false)">查看详情 </span></span>
       <span class="right-btn" @click="nowCheck(true)">立即巡检</span>
     </div>
     <div class="column-content scroll-text">
-      巡检结果：本次自动巡检共{{result.model}}个模块，共发现{{result.problem}}问题
+      巡检结果：本次自动巡检共{{ result.model }}个模块，共发现{{ result.problem }}问题
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import {hlCheck} from "@/api/index/hl"
-import {onMounted, ref} from "vue";
+import {onMounted,onUnmounted} from "vue";
 import {useRouter} from "vue-router"
+
+const props = defineProps(["refreshTime"])
 const router = useRouter()
+const interval = ref(null)
 
 const nowCheck = (query) => {
-  if(query){
-    router.push({path: '/hl/check',query:{check:'true'}})
-  }else{
+  if (query) {
+    router.push({path: '/hl/check', query: {check: 'true'}})
+  } else {
     router.push({path: '/hl/check'})
   }
 }
 const result = ref({})
-onMounted(async () => {
+onMounted(() => {
+  getHl()
+  interval.value = setInterval(() => {
+    getHl()
+  }, props.refreshTime)
+})
+
+onUnmounted(() => {
+  clearInterval(interval.value)
+})
+
+const getHl = async () => {
   const res = await hlCheck()
   result.value = res.data
-})
+}
+
+
 </script>