add 图标含义功能增加

ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/Frame.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M22.8501 25H9.2781V6.48857L14.5062 6.47021V15.7296L18.3004 12.7588L22.3776 15.7296V6.47021H25L24.9979 23.1272C24.9979 24.1609 24.0343 25 22.8501 25ZM18.3004 11.5341L15.8174 13.4143V5.31347H21.0664V13.4143L18.3004 11.5341ZM5.07393 4.87281V5.80554C5.07393 6.32332 5.55263 6.74195 6.14579 6.74195L7.94609 6.47021L7.96065 25H6.14579C4.95946 25 4 24.1609 4 23.1272V4.87281C4 3.83726 4.95946 3 6.14579 3H22.8501C23.6409 3 24.3277 3.37823 24.6982 3.9364H6.14579C6.00568 3.93568 5.86678 3.95934 5.73704 4.00603C5.6073 4.05272 5.48928 4.12152 5.38972 4.2085C5.29016 4.29547 5.21103 4.39892 5.15684 4.51291C5.10265 4.6269 5.07448 4.7492 5.07393 4.87281Z" fill="white"/>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class='HomeFrame'>
+		<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
+			popper-class="global-input-search-popover">
+			<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
+				<img src="@screen/images/home-Frame/Frame.svg">
+			</Button>
+
+			<div class="body">
+				<div class="title">
+					图标含义
+				</div>
+				<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
+				<img class="image" src="@screen/images/home-Frame/logoMean.jpg">
+				<div class="footer">
+				</div>
+			</div>
+		</ElPopover>
+	</div>
+</template>
+
+<script>
+import Button from '@screen/components/Buttons/Button.vue';
+import Form from '@screen/components/FormConfig';
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash"
+
+export default {
+	name: 'HomeFrame',
+	components: {
+		Button,
+		Form
+	},
+	data() {
+		return {
+			activeIcon: null
+		}
+	},
+	methods: {
+		handleClick(type) {
+			this.activeIcon = this.activeIcon === type ? null : type;
+		},
+		filterEnd(data) {
+			this.activeIcon = null;
+			// this.filterData = data;
+			this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
+		},
+	}
+}
+</script>
+
+<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);
+	position: relative;
+	padding-top: 36px;
+	transform: translateY(24px);
+
+	.body {
+		.title {
+			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>
+.image {
+	width: 1440px;
+	height: 900px;
+}
+
+.HomeFrame {
+
+	.btn {
+		padding: 9px;
+		background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+		border-radius: 4px;
+		overflow: hidden;
+		height: unset;
+		border: 1px solid rgba(40, 144, 167, 1);
+	}
+
+	.btn-active {
+		background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+	}
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -13,7 +13,10 @@
 
       <!-- 右侧 -->
       <div class="content-r">
-        <HomeFilter class="filter" />
+        <div class="home-icons">
+          <HomeFilter class="filter" />
+          <HomeFrame class="Frame" />
+        </div>
         <ConditionStatistics class="right card-menu" />
       </div>
     </section>
@@ -37,6 +40,7 @@ import ConditionStatistics from "./components/ConditionStatistics/index.vue";
 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 InfoBoard from "./components/InfoBoard"
@@ -50,7 +54,8 @@ export default {
     RoadAndEvents,
     AMapContainer,
     Button,
-    HomeFilter
+    HomeFilter,
+    HomeFrame,
     // InfoBoard
   },
   data() {
@@ -138,11 +143,22 @@ export default {
       display: flex;
       gap: 9px;
 
-      .filter {
+      .home-icons {
         display: flex;
+        gap: 0px;
         flex-direction: column;
-        gap: 9px;
-        padding-top: 15px;
+
+        .filter {
+          display: flex;
+          gap: 9px;
+          padding-top: 15px;
+        }
+
+        .Frame {
+          display: flex;
+          gap: 9px;
+          padding-top: 15px;
+        }
       }
 
       .right {