From d2a445b36c59193ab3f06a27b3fa3c53cc3f7071 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Fri, 15 Nov 2024 11:03:30 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A4=A7=E5=B1=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/big-screen/index.vue | 285 ++++++++++++++++++++++++++++++++-
 1 file changed, 279 insertions(+), 6 deletions(-)

diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index af79fd6..6dde523 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-14 17:26:53
+ * @LastEditTime: 2024-11-15 10:52:41
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -110,11 +110,12 @@
           <!-- 图背景下选择框 -->
           <div class="map-image-select">
             病害类型筛选：
-            <el-select
+            <!-- <el-select
               :popper-append-to-body="false"
               v-model="mapCareSelect"
               placeholder="请选择"
               @change="getMapCare"
+              clearable
             >
               <el-option
                 v-for="item in dieaseTypeList"
@@ -122,7 +123,15 @@
                 :label="item.label"
                 :value="item.value"
               />
-            </el-select>
+            </el-select> -->
+            <el-cascader
+              v-model="mapCareSelect"
+              popper-class="screen-index-cascader"
+              :options="dieaseOptions"
+              :props="{ checkStrictly: true, emitPath: false }"
+              @change="getMapCare"
+              clearable
+            ></el-cascader>
           </div>
           <div class="map-care">
             <div
@@ -360,6 +369,227 @@ export default {
       mapCareSelect: "",
       // 图片背景下病害类型下拉选择数据
       dieaseTypeList: [],
+      dieaseOptions: [
+        {
+          value: "zhinan",
+          label: "指南",
+          children: [
+            {
+              value: "shejiyuanze",
+              label: "设计原则",
+              
+            },
+            {
+              value: "daohang",
+              label: "导航",
+              
+            },
+          ],
+        },
+        {
+          value: "zujian",
+          label: "组件",
+          children: [
+            {
+              value: "basic",
+              label: "Basic",
+              
+            },
+            {
+              value: "form",
+              label: "Form",
+              children: [
+                {
+                  value: "radio",
+                  label: "Radio 单选框",
+                },
+                {
+                  value: "checkbox",
+                  label: "Checkbox 多选框",
+                },
+                {
+                  value: "input",
+                  label: "Input 输入框",
+                },
+                {
+                  value: "input-number",
+                  label: "InputNumber 计数器",
+                },
+                {
+                  value: "select",
+                  label: "Select 选择器",
+                },
+                {
+                  value: "cascader",
+                  label: "Cascader 级联选择器",
+                },
+                {
+                  value: "switch",
+                  label: "Switch 开关",
+                },
+                {
+                  value: "slider",
+                  label: "Slider 滑块",
+                },
+                {
+                  value: "time-picker",
+                  label: "TimePicker 时间选择器",
+                },
+                {
+                  value: "date-picker",
+                  label: "DatePicker 日期选择器",
+                },
+                {
+                  value: "datetime-picker",
+                  label: "DateTimePicker 日期时间选择器",
+                },
+                {
+                  value: "upload",
+                  label: "Upload 上传",
+                },
+                {
+                  value: "rate",
+                  label: "Rate 评分",
+                },
+                {
+                  value: "form",
+                  label: "Form 表单",
+                },
+              ],
+            },
+            {
+              value: "data",
+              label: "Data",
+              children: [
+                {
+                  value: "table",
+                  label: "Table 表格",
+                },
+                {
+                  value: "tag",
+                  label: "Tag 标签",
+                },
+                {
+                  value: "progress",
+                  label: "Progress 进度条",
+                },
+                {
+                  value: "tree",
+                  label: "Tree 树形控件",
+                },
+                {
+                  value: "pagination",
+                  label: "Pagination 分页",
+                },
+                {
+                  value: "badge",
+                  label: "Badge 标记",
+                },
+              ],
+            },
+            {
+              value: "notice",
+              label: "Notice",
+              children: [
+                {
+                  value: "alert",
+                  label: "Alert 警告",
+                },
+                {
+                  value: "loading",
+                  label: "Loading 加载",
+                },
+                {
+                  value: "message",
+                  label: "Message 消息提示",
+                },
+                {
+                  value: "message-box",
+                  label: "MessageBox 弹框",
+                },
+                {
+                  value: "notification",
+                  label: "Notification 通知",
+                },
+              ],
+            },
+            {
+              value: "navigation",
+              label: "Navigation",
+              children: [
+                {
+                  value: "menu",
+                  label: "NavMenu 导航菜单",
+                },
+                {
+                  value: "tabs",
+                  label: "Tabs 标签页",
+                },
+                {
+                  value: "breadcrumb",
+                  label: "Breadcrumb 面包屑",
+                },
+                {
+                  value: "dropdown",
+                  label: "Dropdown 下拉菜单",
+                },
+                {
+                  value: "steps",
+                  label: "Steps 步骤条",
+                },
+              ],
+            },
+            {
+              value: "others",
+              label: "Others",
+              children: [
+                {
+                  value: "dialog",
+                  label: "Dialog 对话框",
+                },
+                {
+                  value: "tooltip",
+                  label: "Tooltip 文字提示",
+                },
+                {
+                  value: "popover",
+                  label: "Popover 弹出框",
+                },
+                {
+                  value: "card",
+                  label: "Card 卡片",
+                },
+                {
+                  value: "carousel",
+                  label: "Carousel 走马灯",
+                },
+                {
+                  value: "collapse",
+                  label: "Collapse 折叠面板",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: "ziyuan",
+          label: "资源",
+          children: [
+            {
+              value: "axure",
+              label: "Axure Components",
+            },
+            {
+              value: "sketch",
+              label: "Sketch Templates",
+            },
+            {
+              value: "jiaohu",
+              label: "组件交互文档",
+            },
+          ],
+        },
+      ],
       // 路段下拉绑定
       roadList: [],
       // 地图打点-路段绑定
@@ -484,7 +714,8 @@ export default {
     },
 
     /* 获取图片背景下坐标数据 */
-    getMapCare() {
+    getMapCare(value) {
+      console.log(value, "获取图片背景下坐标数据");
       comppanyImg({ type: this.mapCareSelect }).then(({ code, data }) => {
         if (code === 200) {
           this.mapCareList = data;
@@ -882,7 +1113,7 @@ export default {
           // 地图右上角多选按钮隐藏
           this.showIconList = false;
           // 图层恢复
-          this.mapZoom="";
+          this.mapZoom = "";
         } else if (item.component === "RoadScreen") {
           this.leftModuleList = [
             {
@@ -1490,4 +1721,46 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+
+// 修改级联样式
+::v-deep .el-cascader {
+  width: 8rem;
+
+  .el-input--medium .el-input__inner {
+    height: 1.5rem;
+    background-color: transparent;
+    color: #89c5e8;
+    border-color: #6991cd;
+  }
+}
+</style>
+<style lang="scss">
+.screen-index-cascader {
+  background-color: #102649;
+  border-color: #08204f;
+  
+  .el-cascader-node__label {
+    color: #aaabb8;
+  }
+  
+  .el-cascader-node:hover {
+    background-color: #2b4c7e;
+  }
+  
+  .el-cascader-node:active {
+    background-color: #2b4c7e;
+  }
+  
+  .el-cascader-node:focus {
+    background-color: #2b4c7e;
+  }
+}
+
+input[aria-hidden="true"] {
+  display: none !important;
+}
+
+.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+  box-shadow: none;
+}
+</style>