From e8044223045075a1c679a68b7630aff7f2b959cc Mon Sep 17 00:00:00 2001
From: zhangzhang <1747194829@qq.com>
Date: Fri, 8 Mar 2024 15:16:53 +0800
Subject: [PATCH] =?UTF-8?q?bug=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Home/components/HomeFilter/index.vue      | 96 +++++++++++--------
 .../views/JiHeExpressway/pages/Home/index.vue | 62 +++++++-----
 2 files changed, 98 insertions(+), 60 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
index 49ce8765..f6272928 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
@@ -1,24 +1,38 @@
 <template>
-  <div class='HomeFilter'>
-    <ElPopover trigger="manual" :value="activeIcon === 'filter'" :visibleArrow="false" placement="left"
-      popper-class="global-input-search-popover">
-      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('filter')">
-        <img src="@screen/images/home-filter/filter.svg">
+  <div class="HomeFilter">
+    <ElPopover
+      trigger="manual"
+      :value="activeIcon === 'filter'"
+      :visibleArrow="false"
+      placement="left"
+      popper-class="global-input-search-popover"
+    >
+      <Button
+        :class="['btn', { 'btn-active': activeIcon }]"
+        slot="reference"
+        @click.native="handleClick('filter')"
+      >
+        <img src="@screen/images/home-filter/filter.svg" />
       </Button>
 
       <div class="body">
-        <div class="title">
-          设备筛选
-        </div>
-        <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" />
+        <div class="title">设备筛选</div>
+        <Form
+          labelWidth="90px"
+          column="1"
+          class="form"
+          ref="FormConfigRef"
+          :formList="formList"
+        />
 
         <div class="footer">
-          <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm">
+          <Button
+            style="background-color: rgba(0, 179, 204, 0.3)"
+            @click.native="handleResetForm"
+          >
             重置
           </Button>
-          <Button @click.native="handleSearch">
-            搜索
-          </Button>
+          <Button @click.native="handleSearch"> 搜索 </Button>
         </div>
       </div>
     </ElPopover>
@@ -26,17 +40,18 @@
 </template>
 
 <script>
-import Button from '@screen/components/Buttons/Button.vue';
-import Form from '@screen/components/FormConfig';
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
 import * as PresetFormItems from "@screen/common/PresetFormItems.js";
-import { merge, cloneDeep } from "lodash"
+import { merge, cloneDeep } from "lodash";
 import request from "@/utils/request";
+import { log } from "mathjs";
 
 export default {
-  name: 'HomeFilter',
+  name: "HomeFilter",
   components: {
     Button,
-    Form
+    Form,
   },
   data() {
     return {
@@ -49,7 +64,7 @@ export default {
           key: "deviceType",
           type: "select",
           options: {
-            options: []
+            options: [],
           },
           // visible: data => {
           //   if (data.searchType == 1) {
@@ -57,29 +72,32 @@ export default {
           //   }
           // },
         },
-      ]
-    }
+      ],
+    };
   },
   methods: {
     handleClick(type) {
+      console.log("type: ", type);
       this.activeIcon = this.activeIcon === type ? null : type;
+      console.log("this.activeIcon", this.activeIcon);
     },
     filterEnd(data) {
-      this.activeIcon = null;
-      // this.filterData = data;
       this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
     },
     async handleResetForm() {
       this.$refs.FormConfigRef?.reset();
-      this.filterEnd(null)
+      this.activeIcon = "filter";
+      this.filterEnd(null);
     },
     async handleSearch() {
       const data = await this.$refs.FormConfigRef.validate();
 
-      if (!data.startStakeMark[0] || !data.startStakeMark[1]) delete data.startStakeMark;
-      if (!data.endStakeMark[0] || !data.endStakeMark[1]) delete data.endStakeMark;
-
-      this.filterEnd(data)
+      if (!data.startStakeMark[0] || !data.startStakeMark[1])
+        delete data.startStakeMark;
+      if (!data.endStakeMark[0] || !data.endStakeMark[1])
+        delete data.endStakeMark;
+      this.activeIcon = null;
+      this.filterEnd(data);
     },
     async getDeviceTypeOptions() {
       // try {
@@ -90,15 +108,15 @@ export default {
       // });
       // } catch (e) { console.error(e); }
       // return ;
-    }
+    },
   },
   async created() {
     // await this.getDeviceTypeOptions();
-  }
-}
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 div.el-popper.global-input-search-popover {
   background: rgba(6, 66, 88, 0.8);
   border: 1px solid rgba(42, 217, 253, 0.6);
@@ -108,23 +126,25 @@ div.el-popper.global-input-search-popover {
 
   .body {
     .title {
-      background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
+      background: linear-gradient(
+        90deg,
+        #237e9b 0%,
+        rgba(23, 145, 184, 0) 100%
+      );
       padding: 3px 9px;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
-
     }
   }
 }
 </style>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .HomeFilter {
-
   .btn {
     padding: 9px;
-    background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
     border-radius: 4px;
     overflow: hidden;
     height: unset;
@@ -132,7 +152,7 @@ div.el-popper.global-input-search-popover {
   }
 
   .btn-active {
-    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
   }
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 2e0435c8..e4c81b64 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class='Home'>
-    <AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }" />
+  <div class="Home">
+    <AMapContainer
+      ref="AMapContainerRef"
+      @update:isGisCompleted="
+        (data) => {
+          this.isGisCompleted = data;
+        }
+      "
+    />
     <section class="content">
       <!-- 左侧 -->
       <div class="content-l">
@@ -8,7 +15,11 @@
         <FocusedMonitoring class="card-menu" />
 
         <!-- 下 -->
-        <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
+        <RoadAndEvents
+          ref="RoadAndEventsRef"
+          :isGisCompleted="isGisCompleted"
+          class="content-l-b card-menu"
+        />
       </div>
 
       <!-- 右侧 -->
@@ -24,7 +35,11 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
+        <i
+          class="el-icon-s-fold"
+          style="color: #2ad9fd; transform: rotate(-90deg)"
+          @click.stop="handleShrink"
+        />
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -41,12 +56,12 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
 import HomeFilter from "./components/HomeFilter/index.vue";
 import HomeFrame from "./components/HomeFrame/index.vue";
-import Button from '@screen/components/Buttons/Button.vue';
+import Button from "@screen/components/Buttons/Button.vue";
 
 // import InfoBoard from "./components/InfoBoard"
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
     FocusedMonitoring,
     ConditionStatistics,
@@ -63,34 +78,37 @@ export default {
       isShowInfoBoard: false,
       selectedDevice: null,
       isGisCompleted: false,
-    }
+    };
   },
   provide() {
     return {
-      getMap: () => this.$refs.AMapContainerRef.getMapInstance()
-    }
+      getMap: () => this.$refs.AMapContainerRef.getMapInstance(),
+    };
   },
   methods: {
     handleShrink(e) {
       const translateXElement = e.target.parentElement.parentElement;
 
-      const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
+      const result =
+        (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1;
 
       e.target.style.transform = `rotate(${result}deg)`;
-      if (translateXElement.style.transform !== `translateY(calc(100% - 36px))`) {
-        translateXElement.style.transform = `translateY(calc(100% - 36px))`
+      if (
+        translateXElement.style.transform !== `translateY(calc(100% - 36px))`
+      ) {
+        translateXElement.style.transform = `translateY(calc(100% - 36px))`;
         translateXElement.style.position = `absolute`;
         translateXElement.style.bottom = `0px`;
       } else {
-        translateXElement.style.transform = `translateY(0)`
+        translateXElement.style.transform = `translateY(0)`;
         translateXElement.style.position = `relative`;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Home {
   height: 100%;
   z-index: 6;
@@ -101,7 +119,7 @@ export default {
   justify-content: center;
 
   .card-menu {
-    transition: all .24s linear;
+    transition: all 0.24s linear;
   }
 
   .content {
@@ -113,7 +131,7 @@ export default {
     height: min-content;
     pointer-events: none;
 
-    >div {
+    > div {
       pointer-events: auto;
     }
 
@@ -127,7 +145,7 @@ export default {
       overflow: hidden;
       height: 100%;
 
-      >div {
+      > div {
         pointer-events: all;
         flex: 1;
       }
@@ -176,7 +194,7 @@ export default {
     will-change: height;
     bottom: 0;
 
-    >div {
+    > div {
       pointer-events: all;
     }
 
@@ -205,7 +223,7 @@ export default {
       }
 
       i {
-        transition: all .24s linear;
+        transition: all 0.24s linear;
         cursor: pointer;
       }