修改

package-lock.json

@@ -19,6 +19,7 @@
         "dayjs": "^1.11.10",
         "default-passive-events": "^2.0.0",
         "echarts": "^5.5.0",
+        "echarts-gl": "^2.0.9",
         "element-plus": "^2.5.6",
         "lodash-es": "^4.17.21",
         "moment": "^2.30.1",
@@ -31,7 +32,8 @@
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.1",
         "vue-router": "^4.2.5",
-        "vue3-seamless-scroll": "^2.0.1"
+        "vue3-seamless-scroll": "^2.0.1",
+        "vue3-tree-org": "^4.2.2"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -2113,6 +2115,11 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
@@ -2599,6 +2606,18 @@
         "zrender": "5.5.0"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
@@ -7304,6 +7323,17 @@
         "throttle-debounce": "5.0.0"
       }
     },
+    "node_modules/vue3-tree-org": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-tree-org/-/vue3-tree-org-4.2.2.tgz",
+      "integrity": "sha512-AG2SykyD6dw0jIyqBm8iuF9j9GWli6KrwudxR1RjULCCBTDFsoNm7MmP/weKT7wowN/sPk+e2RsnvEJMw2OJMw==",
+      "dependencies": {
+        "core-js": "^3.6.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
@@ -8733,6 +8763,11 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
@@ -9103,6 +9138,15 @@
         }
       }
     },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "element-plus": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.6.2.tgz",
@@ -12533,6 +12577,14 @@
         "throttle-debounce": "5.0.0"
       }
     },
+    "vue3-tree-org": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-tree-org/-/vue3-tree-org-4.2.2.tgz",
+      "integrity": "sha512-AG2SykyD6dw0jIyqBm8iuF9j9GWli6KrwudxR1RjULCCBTDFsoNm7MmP/weKT7wowN/sPk+e2RsnvEJMw2OJMw==",
+      "requires": {
+        "core-js": "^3.6.5"
+      }
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",

package.json

@@ -22,6 +22,7 @@
     "dayjs": "^1.11.10",
     "default-passive-events": "^2.0.0",
     "echarts": "^5.5.0",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.5.6",
     "lodash-es": "^4.17.21",
     "moment": "^2.30.1",
@@ -34,7 +35,8 @@
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.2.5",
-    "vue3-seamless-scroll": "^2.0.1"
+    "vue3-seamless-scroll": "^2.0.1",
+    "vue3-tree-org": "^4.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -51,4 +53,4 @@
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-svg-icons": "^2.0.1"
   }
-}
+}

src/main.js

@@ -23,6 +23,9 @@ import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import 'default-passive-events'
 
+import vue3TreeOrg from 'vue3-tree-org'
+import 'vue3-tree-org/lib/vue3-tree-org.css'
+
 const app = createApp(App)
 globalComponents(app)
 setupStore(app)
@@ -31,6 +34,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 app.use(router)
 app.use(Antd)
+app.use(vue3TreeOrg)
 app.use(ElementPlus, { locale })
 app.use(vue3SeamlessScroll, { name: 'vue3SeamlessScroll' })
 InitCheckResult(app)

src/views/brain/five.vue

@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,28 +36,49 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </div>
         </div>
         <div class="thr">
-          <div class="left">
-            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+              <div class="title center">
+                <div class="titleRight">产业链图谱</div>
+              </div>
+            </BorderBox13>
           </div>
-          <div class="right">
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
-            </div>
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
-            </div>
-            <div class="right_2">
-              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
-            </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_2" title="完整性">
+              <div class="title">
+                <div class="titleRight">完整性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_3" title="安全性">
+              <div class="title center">
+                <div class="titleRight">安全性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="韧性">
+              <div class="title">
+                <div class="titleRight">韧性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="稳定性">
+              <div class="title">
+                <div class="titleRight">稳定性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_6" title="可靠性">
+              <div class="title">
+                <div class="titleRight">可靠性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
           </div>
         </div>
       </div>
@@ -66,7 +87,7 @@
 </template>
 
 <script setup>
-import { BorderBox11 } from '@dataview/datav-vue3'
+import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
 // 图片引入
 import { UserStore } from '@/store/user'
@@ -112,9 +133,12 @@ const toView = (item) => {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #17171d;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
   padding: 0rem;
   margin: 0rem;
+  color: #ffffff;
   font-family: '微软雅黑';
   cursor: default; /* 将鼠标样式更改为箭头 */
   .menu_1 {
@@ -167,81 +191,152 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 30%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
   }
   .content {
+    width: 100%;
+    height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
         display: flex;
         align-items: center;
         margin: 0 0 0 1rem;
-        .two_right {
-          //select 选择器
-          :deep(.el-input__wrapper) {
-            font-size: 1rem;
-            padding: 0.1rem 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-          :deep(.el-select__wrapper) {
-            font-size: 1rem;
-            padding: 0 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-        }
       }
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 100%;
-      .left {
-        width: 49%;
+      height: 89%;
+      .thr_1 {
+        width: 50%;
         height: 100%;
-        .thr_1 {
+        .boxall_1 {
           width: 100%;
-          height: 86vh;
+          height: 100%;
         }
       }
-      .right {
-        width: 61%;
+      .thr_2 {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
         height: 100%;
-        .right_1 {
+        .boxall_2 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_3 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_4 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_5 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_6 {
           width: 100%;
+          height: 30%;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
           display: flex;
-          .thr_2 {
-            width: 100%;
-            height: 31vh;
-          }
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.3rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
-        .right_2 {
-          width: 100%;
-          .thr_3 {
-            width: 100%;
-            height: 24vh;
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #612bdf;
+            box-shadow:
+              0 0 10px rgba(97, 43, 223, 0.2),
+              inset 0 0 10px rgba(97, 43, 223, 0.1),
+              0 1px 0 rgb(97, 43, 223);
+          }
+          100% {
+            border-color: rgb(56, 201, 226);
+            box-shadow:
+              0 0 25px rgba(56, 201, 226, 0.6),
+              inset 0 0 15px rgba(56, 201, 226, 0.4),
+              0 1px 0 rgb(56, 201, 226);
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
 }
 </style>

src/views/brain/four.vue

@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,28 +36,49 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </div>
         </div>
         <div class="thr">
-          <div class="left">
-            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+              <div class="title center">
+                <div class="titleRight">产业链图谱</div>
+              </div>
+            </BorderBox13>
           </div>
-          <div class="right">
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
-            </div>
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
-            </div>
-            <div class="right_2">
-              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
-            </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_2" title="完整性">
+              <div class="title">
+                <div class="titleRight">完整性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_3" title="安全性">
+              <div class="title center">
+                <div class="titleRight">安全性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="韧性">
+              <div class="title">
+                <div class="titleRight">韧性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="稳定性">
+              <div class="title">
+                <div class="titleRight">稳定性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_6" title="可靠性">
+              <div class="title">
+                <div class="titleRight">可靠性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
           </div>
         </div>
       </div>
@@ -66,7 +87,7 @@
 </template>
 
 <script setup>
-import { BorderBox11 } from '@dataview/datav-vue3'
+import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
 // 图片引入
 import { UserStore } from '@/store/user'
@@ -112,9 +133,12 @@ const toView = (item) => {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #17171d;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
   padding: 0rem;
   margin: 0rem;
+  color: #ffffff;
   font-family: '微软雅黑';
   cursor: default; /* 将鼠标样式更改为箭头 */
   .menu_1 {
@@ -167,81 +191,152 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 30%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
   }
   .content {
+    width: 100%;
+    height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
         display: flex;
         align-items: center;
         margin: 0 0 0 1rem;
-        .two_right {
-          //select 选择器
-          :deep(.el-input__wrapper) {
-            font-size: 1rem;
-            padding: 0.1rem 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-          :deep(.el-select__wrapper) {
-            font-size: 1rem;
-            padding: 0 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-        }
       }
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 100%;
-      .left {
-        width: 49%;
+      height: 89%;
+      .thr_1 {
+        width: 50%;
         height: 100%;
-        .thr_1 {
+        .boxall_1 {
           width: 100%;
-          height: 86vh;
+          height: 100%;
         }
       }
-      .right {
-        width: 61%;
+      .thr_2 {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
         height: 100%;
-        .right_1 {
+        .boxall_2 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_3 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_4 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_5 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_6 {
           width: 100%;
+          height: 30%;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
           display: flex;
-          .thr_2 {
-            width: 100%;
-            height: 31vh;
-          }
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.3rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
-        .right_2 {
-          width: 100%;
-          .thr_3 {
-            width: 100%;
-            height: 24vh;
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #612bdf;
+            box-shadow:
+              0 0 10px rgba(97, 43, 223, 0.2),
+              inset 0 0 10px rgba(97, 43, 223, 0.1),
+              0 1px 0 rgb(97, 43, 223);
+          }
+          100% {
+            border-color: rgb(56, 201, 226);
+            box-shadow:
+              0 0 25px rgba(56, 201, 226, 0.6),
+              inset 0 0 15px rgba(56, 201, 226, 0.4),
+              0 1px 0 rgb(56, 201, 226);
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
 }
 </style>

src/views/brain/one.vue

@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,28 +36,83 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </div>
         </div>
         <div class="thr">
-          <div class="left">
-            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+              <div class="title center">
+                <div class="titleRight">产业链图谱</div>
+              </div>
+              <div class="image1">
+                <div style="display: flex; padding: 10px">
+                  <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
+                  <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
+                  <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
+                  <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
+                  <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
+                </div>
+                <div style="height: 92%">
+                  <vue3-tree-org :data="list_3" center :horizontal="horizontal" :collapsable="collapsable" :label-style="style" :only-one-node="onlyOneNode" :clone-node-drag="cloneNodeDrag" :before-drag-end="beforeDragEnd" @on-node-drag="nodeDragMove" @on-node-drag-end="nodeDragEnd" @on-contextmenu="onMenus" @on-expand="onExpand" @on-node-dblclick="onNodeDblclick" @on-node-click="onNodeClick" />
+                </div>
+              </div>
+            </BorderBox13>
           </div>
-          <div class="right">
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
-            </div>
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
-            </div>
-            <div class="right_2">
-              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
-            </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_2" title="完整性">
+              <div class="title">
+                <div class="titleRight">完整性</div>
+              </div>
+              <div class="round">
+                <div class="round_1">
+                  <div class="round_left">
+                    <div class="title_1">国内有厂商环节</div>
+                    <div class="title_2">225</div>
+                  </div>
+                  <div class="round_center">
+                    <echarts1 :data="list_1"></echarts1>
+                  </div>
+                  <div class="round_right">占比：85.88%</div>
+                </div>
+                <div class="round_1">
+                  <div class="round_left">
+                    <div class="title_1">本地有厂商环节</div>
+                    <div class="title_3">176</div>
+                  </div>
+                  <div class="round_center">
+                    <echarts1 :data="list_2"></echarts1>
+                  </div>
+                  <div class="round_right">占比：63.74%</div>
+                </div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_3" title="安全性">
+              <div class="title center">
+                <div class="titleRight">安全性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="韧性">
+              <div class="title">
+                <div class="titleRight">韧性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="稳定性">
+              <div class="title">
+                <div class="titleRight">稳定性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_6" title="可靠性">
+              <div class="title">
+                <div class="titleRight">可靠性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
           </div>
         </div>
       </div>
@@ -66,9 +121,12 @@
 </template>
 
 <script setup>
-import { BorderBox11 } from '@dataview/datav-vue3'
+import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
+// 组件
+import echarts1 from './one/echarts1.vue'
 // 图片引入
+import car from '/images/brain/car.png'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -93,6 +151,48 @@ const list = ref([
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
 const chainList = ref([{ label: '新能源汽车', value: '0' }])
+const list_1 = ref([
+  { name: 'A类企业', value: 176 },
+  { name: 'B类企业', value: 288 }
+])
+const list_2 = ref([
+  { name: 'A类企业', value: 176 },
+  { name: 'B类企业', value: 288 }
+])
+const horizontal = ref(true)
+const collapsable = ref(true)
+const onlyOneNode = ref(false)
+const disaled = ref(false)
+const style = ref({
+  color: '#ffffff'
+})
+const list_3 = ref({
+  id: 1,
+  label: 'xxx科技有限公司',
+  children: [
+    {
+      id: 2,
+      pid: 1,
+      label: '产品研发部',
+      style: { color: '#fff', background: '#108ffe' },
+      children: [
+        { id: 6, pid: 2, label: '禁止编辑节点', disabled: true },
+        { id: 8, pid: 2, label: '禁止拖拽节点', noDragging: true },
+        { id: 10, pid: 2, label: '测试' }
+      ]
+    },
+    {
+      id: 3,
+      pid: 1,
+      label: '客服部',
+      children: [
+        { id: 11, pid: 3, label: '客服一部' },
+        { id: 12, pid: 3, label: '客服二部' }
+      ]
+    },
+    { id: 4, pid: 1, label: '业务部' }
+  ]
+})
 // 请求
 onMounted(async () => {
   getCity().then((response) => {
@@ -112,9 +212,12 @@ const toView = (item) => {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #17171d;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
   padding: 0rem;
   margin: 0rem;
+  color: #ffffff;
   font-family: '微软雅黑';
   cursor: default; /* 将鼠标样式更改为箭头 */
   .menu_1 {
@@ -167,81 +270,196 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 30%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
   }
   .content {
+    width: 100%;
+    height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
         display: flex;
         align-items: center;
         margin: 0 0 0 1rem;
-        .two_right {
-          //select 选择器
-          :deep(.el-input__wrapper) {
-            font-size: 1rem;
-            padding: 0.1rem 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-          :deep(.el-select__wrapper) {
-            font-size: 1rem;
-            padding: 0 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-        }
       }
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 100%;
-      .left {
-        width: 49%;
+      height: 89%;
+      .thr_1 {
+        width: 50%;
         height: 100%;
-        .thr_1 {
+        .boxall_1 {
           width: 100%;
-          height: 86vh;
+          height: 100%;
         }
       }
-      .right {
-        width: 61%;
+      .thr_2 {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
         height: 100%;
-        .right_1 {
+        .boxall_2 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_3 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_4 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_5 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_6 {
           width: 100%;
+          height: 30%;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
           display: flex;
-          .thr_2 {
-            width: 100%;
-            height: 31vh;
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.3rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
+        }
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #612bdf;
+            box-shadow:
+              0 0 10px rgba(97, 43, 223, 0.2),
+              inset 0 0 10px rgba(97, 43, 223, 0.1),
+              0 1px 0 rgb(97, 43, 223);
+          }
+          100% {
+            border-color: rgb(56, 201, 226);
+            box-shadow:
+              0 0 25px rgba(56, 201, 226, 0.6),
+              inset 0 0 15px rgba(56, 201, 226, 0.4),
+              0 1px 0 rgb(56, 201, 226);
           }
         }
-        .right_2 {
+        .image1 {
+          background: url(/images/brain/car.png);
+          background-size: 100% 100%;
           width: 100%;
-          .thr_3 {
-            width: 100%;
-            height: 24vh;
+          height: 96%;
+        }
+        .round {
+          margin: 0.2rem 0 0 0;
+          padding: 0 0.5rem;
+          .round_1 {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 0 0 4rem 0;
+            .round_left {
+              font-size: 1.5rem;
+              .title_1 {
+                margin: 0 0 0.5rem 0;
+              }
+              .title_2 {
+                color: #75f9fd;
+                font-weight: bold;
+              }
+              .title_3 {
+                color: #2785f2;
+                font-weight: bold;
+              }
+            }
+            .round_center {
+              position: absolute;
+              top: -2rem;
+              left: 0;
+              height: 100%;
+              width: 100%;
+            }
+            .round_right {
+              font-size: 1.3rem;
+            }
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  :deep(.zm-tree-org) {
+    background-color: transparent !important;
+  }
 }
 </style>

src/views/brain/one/echart.js

@@ -0,0 +1,258 @@
+/**
+ * 绘制3d图
+ * @param pieData 总数据
+ * @param internalDiameterRatio:透明的空心占比
+ * @param distance 视角到主体的距离
+ * @param alpha 旋转角度
+ * @param pieHeight 立体的高度
+ * @param opacity 饼或者环的透明度
+ */
+const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => {
+  const series = []
+  let sumValue = 0
+  let startValue = 0
+  let endValue = 0
+  let legendData = []
+  let legendBfb = []
+  const k = 1 - internalDiameterRatio //设置是否镂空
+  pieData.sort((a, b) => {
+    return b.value - a.value
+  })
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    // 判断所有数据是否均为0，如果是0，则设置一个最小值，防止出现扇形的面积为0的情况
+    if (pieData.every((item) => item.value === 0)) {
+      sumValue += 1
+    } else {
+      sumValue += pieData[i].value
+    }
+    const seriesItem = {
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+      type: 'surface',
+      parametric: true,
+      wireframe: {
+        show: false
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: k
+      }
+    }
+    if (typeof pieData[i].itemStyle !== 'undefined') {
+      const itemStyle = {}
+      itemStyle.color = typeof pieData[i].itemStyle.color !== 'undefined' ? pieData[i].itemStyle.color : opacity
+      itemStyle.opacity = typeof pieData[i].itemStyle.opacity !== 'undefined' ? pieData[i].itemStyle.opacity : opacity
+      seriesItem.itemStyle = itemStyle
+    }
+    series.push(seriesItem)
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  legendData = []
+  legendBfb = []
+  for (let i = 0; i < series.length; i++) {
+    if (pieData.every((item) => item.value === 0)) {
+      endValue = startValue + 1
+    } else {
+      endValue = startValue + series[i].pieData.value
+    }
+    series[i].pieData.startRatio = startValue / sumValue
+    series[i].pieData.endRatio = endValue / sumValue
+    series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value)
+    startValue = endValue
+    const bfb = fomatFloat(series[i].pieData.value / sumValue, 4)
+    legendData.push({
+      name: series[i].name,
+      value: bfb
+    })
+    legendBfb.push({
+      name: series[i].name,
+      value: bfb
+    })
+  }
+  const boxHeight = getHeight3D(series, pieHeight) // 通过pieHeight设定3d饼/环的高度，单位是px
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  const option = {
+    title: {
+      text: 'Referer of a Website',
+      subtext: 'Fake Data',
+      left: 'center',
+      top: '10%',
+      textStyle: {
+        color: '#fff' // 将文字颜色设置为白色
+      },
+      subtextStyle: {
+        color: '#fff' // 将 "Fake Data" 文字颜色设置为白色
+      }
+    },
+    legend: {
+      show: true,
+      data: legendData,
+      orient: 'vertical',
+      right: '35%',
+      top: 'center',
+      itemGap: 10,
+      icon: 'circle',
+      formatter: function (param) {
+        const item = legendBfb.filter((item) => item.name === param)[0]
+        return ` ${item.name}`
+      },
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    labelLine: {
+      show: true,
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    label: {
+      show: true,
+      position: 'outside',
+      formatter: '{b} \n{c} {d}%'
+    },
+    tooltip: {
+      backgroundColor: '#033b77',
+      borderColor: '#21f2c4',
+      textStyle: {
+        color: '#fff',
+        fontSize: 13
+      },
+      formatter: (params) => {
+        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== '信用评价') {
+          const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2)
+          return `${params.seriesName}<br/>` + `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + `${bfb}%`
+        }
+      }
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1
+    },
+    grid3D: {
+      show: false,
+      boxHeight: boxHeight, // 圆环的高度
+      viewControl: {
+        // 3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha, // 角度
+        distance: 250, // 调整视角到主体的距离，类似调整zoom
+        rotateSensitivity: 0, // 设置为0无法旋转
+        zoomSensitivity: 0, // 设置为0无法缩放
+        panSensitivity: 0, // 设置为0无法平移
+        autoRotate: false // 自动旋转
+      }
+    },
+    series: series
+  }
+  return option
+}
+
+/**
+ * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ */
+const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => {
+  startRatio = startRatio !== undefined ? startRatio : 0
+  endRatio = endRatio !== undefined ? endRatio : 1
+  // 计算
+  const midRatio = (startRatio + endRatio) / 2
+  const startRadian = startRatio * Math.PI * 2
+  const endRadian = endRatio * Math.PI * 2
+  const midRadian = midRatio * Math.PI * 2
+  // 如果只有一个扇形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false
+  }
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== 'undefined' ? k : 1 / 3
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  const hoverRate = isHovered ? 1.05 : 1
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32
+    },
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20
+    },
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+    },
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+    },
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u)
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+    }
+  }
+}
+
+/**
+ * 获取3d丙图的最高扇区的高度
+ */
+const getHeight3D = (series, height) => {
+  series.sort((a, b) => {
+    return b.pieData.value - a.pieData.value
+  })
+  return (height * 25) / series[0].pieData.value
+}
+
+/**
+ * 格式化浮点数
+ */
+const fomatFloat = (num, n) => {
+  let f = parseFloat(num)
+  if (isNaN(f)) {
+    return false
+  }
+  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+  let s = f.toString()
+  let rs = s.indexOf('.')
+  // 判定如果是整数，增加小数点再补0
+  if (rs < 0) {
+    rs = s.length
+    s += '.'
+  }
+  while (s.length <= rs + n) {
+    s += '0'
+  }
+  return s
+}
+
+export { getPie3D, getParametricEquation }

src/views/brain/one/echarts1.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="chart" ref="echartRef" style="width: 100%; height: 20vh"></div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import 'echarts-gl'
+import { getPie3D, getParametricEquation } from './echart.js'
+import { ref, shallowRef, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  },
+  internalDiameterRatio: {
+    type: Number,
+    default: 0.6
+  },
+  distance: {
+    type: Number,
+    default: 180
+  },
+  alpha: {
+    type: Number,
+    default: 26
+  },
+  pieHeight: {
+    type: Number,
+    default: 18
+  },
+  opacity: {
+    type: Number,
+    default: 0.5
+  }
+})
+
+const color = ['#0000FF', '#00FFFF', '#124fb7', '#383893']
+const optionData = ref(props.data)
+
+let option = {}
+const echartRef = shallowRef()
+const echart = shallowRef()
+
+onMounted(() => {
+  nextTick(() => {
+    setLabel()
+    initChart()
+  })
+  window.onresize = changeSize
+})
+
+const setLabel = () => {
+  optionData.value.forEach((item, index) => {
+    item.itemStyle = {
+      color: color[index]
+    }
+    item.label = {
+      normal: {
+        show: false,
+        color: color[index],
+        position: 'right',
+        offset: [0, 3],
+        formatter: ['{d|{d}%}', '————', '{b|{b}}'].join('\n'),
+        rich: {
+          b: {
+            lineHeight: 25,
+            align: 'left',
+            color: color[index]
+          },
+          c: {
+            fontSize: 22,
+            textShadowColor: '#1c90a6',
+            textShadowOffsetX: 0,
+            textShadowOffsetY: 2,
+            textShadowBlur: 5,
+            color: color[index]
+          },
+          d: {
+            color: color[index],
+            align: 'left'
+          }
+        }
+      }
+    }
+    item.labelLine = {
+      normal: {
+        length2: 30,
+        lineStyle: {
+          width: 1,
+          color: color[index]
+        }
+      }
+    }
+  })
+}
+
+const initChart = () => {
+  echart.value = echarts.init(echartRef.value)
+
+  option = getPie3D(optionData.value, props.internalDiameterRatio, props.distance, props.alpha, props.pieHeight, props.opacity)
+
+  echart.value.setOption(option)
+
+  option.series.push({
+    name: '信用评价',
+    backgroundColor: 'transparent',
+    type: 'pie',
+    label: {
+      opacity: 1,
+      fontSize: 13,
+      lineHeight: 20,
+      show: false
+    },
+    startAngle: -40,
+    clockwise: false,
+    data: optionData.value,
+    itemStyle: {
+      opacity: 0
+    },
+    title: {
+      show: false // 不显示标题
+    },
+    legend: {
+      show: false // 不显示图例
+    }
+  })
+  echart.value.setOption(option)
+
+  bindListen(echart.value)
+}
+
+const bindListen = (myChart) => {
+  let hoveredIndex = -1
+
+  myChart.on('mouseover', (params) => {
+    let isSelected
+    let isHovered
+    let startRatio
+    let endRatio
+    let k
+
+    if (hoveredIndex === params.seriesIndex) {
+      // Do nothing
+    } else {
+      if (hoveredIndex !== '' && hoveredIndex !== -1) {
+        isSelected = option.series[hoveredIndex].pieStatus.selected
+        isHovered = false
+        startRatio = option.series[hoveredIndex].pieData.startRatio
+        endRatio = option.series[hoveredIndex].pieData.endRatio
+        k = option.series[hoveredIndex].pieStatus.k
+
+        if (typeof startRatio !== 'undefined' && typeof endRatio !== 'undefined' && typeof k !== 'undefined') {
+          option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value)
+        }
+
+        option.series[hoveredIndex].pieStatus.hovered = isHovered
+        hoveredIndex = ''
+      }
+
+      if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== '信用评价') {
+        isSelected = option.series[params.seriesIndex].pieStatus.selected
+        isHovered = true
+        startRatio = option.series[params.seriesIndex].pieData.startRatio
+        endRatio = option.series[params.seriesIndex].pieData.endRatio
+        k = option.series[params.seriesIndex].pieStatus.k
+
+        if (typeof startRatio !== 'undefined' && typeof endRatio !== 'undefined' && typeof k !== 'undefined') {
+          option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[params.seriesIndex].pieData.value + 60)
+          option.series[params.seriesIndex].pieStatus.hovered = isHovered
+          hoveredIndex = params.seriesIndex
+        }
+      }
+
+      myChart.setOption(option)
+    }
+  })
+
+  myChart.on('globalout', () => {
+    let isSelected
+    let isHovered
+    let startRatio
+    let endRatio
+    let k
+
+    if (hoveredIndex !== '' && hoveredIndex !== -1) {
+      isSelected = option.series[hoveredIndex].pieStatus.selected
+      isHovered = false
+      k = option.series[hoveredIndex].pieStatus.k
+      startRatio = option.series[hoveredIndex].pieData.startRatio
+      endRatio = option.series[hoveredIndex].pieData.endRatio
+
+      if (typeof startRatio !== 'undefined' && typeof endRatio !== 'undefined' && typeof k !== 'undefined') {
+        option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value)
+      }
+
+      option.series[hoveredIndex].pieStatus.hovered = isHovered
+      hoveredIndex = ''
+    }
+
+    myChart.setOption(option)
+  })
+}
+
+const changeSize = () => {
+  echart.value && echart.value.resize()
+}
+</script>

src/views/brain/six.vue

@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,28 +36,49 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </div>
         </div>
         <div class="thr">
-          <div class="left">
-            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+              <div class="title center">
+                <div class="titleRight">产业链图谱</div>
+              </div>
+            </BorderBox13>
           </div>
-          <div class="right">
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
-            </div>
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
-            </div>
-            <div class="right_2">
-              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
-            </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_2" title="完整性">
+              <div class="title">
+                <div class="titleRight">完整性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_3" title="安全性">
+              <div class="title center">
+                <div class="titleRight">安全性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="韧性">
+              <div class="title">
+                <div class="titleRight">韧性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="稳定性">
+              <div class="title">
+                <div class="titleRight">稳定性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_6" title="可靠性">
+              <div class="title">
+                <div class="titleRight">可靠性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
           </div>
         </div>
       </div>
@@ -66,7 +87,7 @@
 </template>
 
 <script setup>
-import { BorderBox11 } from '@dataview/datav-vue3'
+import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
 // 图片引入
 import { UserStore } from '@/store/user'
@@ -112,9 +133,12 @@ const toView = (item) => {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #17171d;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
   padding: 0rem;
   margin: 0rem;
+  color: #ffffff;
   font-family: '微软雅黑';
   cursor: default; /* 将鼠标样式更改为箭头 */
   .menu_1 {
@@ -167,81 +191,152 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 30%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
   }
   .content {
+    width: 100%;
+    height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
         display: flex;
         align-items: center;
         margin: 0 0 0 1rem;
-        .two_right {
-          //select 选择器
-          :deep(.el-input__wrapper) {
-            font-size: 1rem;
-            padding: 0.1rem 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-          :deep(.el-select__wrapper) {
-            font-size: 1rem;
-            padding: 0 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-        }
       }
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 100%;
-      .left {
-        width: 49%;
+      height: 89%;
+      .thr_1 {
+        width: 50%;
         height: 100%;
-        .thr_1 {
+        .boxall_1 {
           width: 100%;
-          height: 86vh;
+          height: 100%;
         }
       }
-      .right {
-        width: 61%;
+      .thr_2 {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
         height: 100%;
-        .right_1 {
+        .boxall_2 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_3 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_4 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_5 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_6 {
           width: 100%;
+          height: 30%;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
           display: flex;
-          .thr_2 {
-            width: 100%;
-            height: 31vh;
-          }
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.3rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
-        .right_2 {
-          width: 100%;
-          .thr_3 {
-            width: 100%;
-            height: 24vh;
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #612bdf;
+            box-shadow:
+              0 0 10px rgba(97, 43, 223, 0.2),
+              inset 0 0 10px rgba(97, 43, 223, 0.1),
+              0 1px 0 rgb(97, 43, 223);
+          }
+          100% {
+            border-color: rgb(56, 201, 226);
+            box-shadow:
+              0 0 25px rgba(56, 201, 226, 0.6),
+              inset 0 0 15px rgba(56, 201, 226, 0.4),
+              0 1px 0 rgb(56, 201, 226);
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
 }
 </style>

src/views/brain/thr.vue

@@ -1,6 +1,6 @@
 <template>
   <myMain>
-    <div class="brainOne">
+    <div class="brainThr">
       <div class="menu_1" v-if="is_show">
         <div class="left">
           <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" clearable :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" :teleported="false" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,7 +36,7 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -53,7 +53,7 @@
                 <div class="select_1">
                   <div class="select_left">指标:</div>
                   <div class="select_right">
-                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem" :teleported="false">
                       <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
                     </el-select>
                   </div>
@@ -61,7 +61,7 @@
                 <div class="select_1">
                   <div class="select_left">对比对象:</div>
                   <div class="select_right">
-                    <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+                    <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" :teleported="false" />
                   </div>
                 </div>
               </div>
@@ -89,6 +89,7 @@
               <div class="title center">
                 <div class="titleRight">全国产业化项目</div>
               </div>
+              <echarts7></echarts7>
             </BorderBox13>
             <BorderBox13 class="boxall boxall_5" title="全国科技成果">
               <div class="title center">
@@ -154,7 +155,7 @@
                 <div class="select_1">
                   <div class="select_left">TOP:</div>
                   <div class="select_right">
-                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem" :teleported="false">
                       <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
                     </el-select>
                   </div>
@@ -229,7 +230,7 @@ import echarts3 from './thr/echarts3.vue'
 import echarts4 from './thr/echarts4.vue'
 import echarts5 from './thr/echarts5.vue'
 import echarts6 from './thr/echarts6.vue'
-// 图片引入
+import echarts7 from './thr/echarts7.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -311,7 +312,7 @@ const toView = (item) => {
 }
 </script>
 <style scoped lang="scss">
-.brainOne {
+.brainThr {
   width: 100%;
   height: 100%;
   position: relative;
@@ -373,7 +374,7 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 35%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
@@ -382,20 +383,25 @@ const toView = (item) => {
     width: 100%;
     height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem 0;
       span {
         letter-spacing: 0.2em;
       }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
+      // margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
@@ -406,19 +412,18 @@ const toView = (item) => {
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 80%;
+      height: 89%;
       .thr_1 {
         width: 24%;
         height: 100%;
         .boxall_1 {
           width: 100%;
-          height: 50vh;
+          height: 60%;
         }
         .boxall_2 {
           width: 100%;
-          height: 36vh;
+          height: 40%;
         }
       }
       .thr_2 {
@@ -426,15 +431,15 @@ const toView = (item) => {
         height: 100%;
         .boxall_3 {
           width: 100%;
-          height: 36vh;
+          height: 40%;
         }
         .boxall_4 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
         .boxall_5 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
       }
       .thr_3 {
@@ -442,15 +447,15 @@ const toView = (item) => {
         height: 100%;
         .boxall_6 {
           width: 100%;
-          height: 36vh;
+          height: 40%;
         }
         .boxall_7 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
         .boxall_8 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
       }
       .thr_4 {
@@ -458,15 +463,15 @@ const toView = (item) => {
         height: 100%;
         .boxall_9 {
           width: 100%;
-          height: 36vh;
+          height: 40%;
         }
         .boxall_10 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
         .boxall_11 {
           width: 100%;
-          height: 25vh;
+          height: 30%;
         }
       }
       .thr_5 {
@@ -474,11 +479,11 @@ const toView = (item) => {
         height: 100%;
         .boxall_12 {
           width: 100%;
-          height: 50vh;
+          height: 60%;
         }
         .boxall_13 {
           width: 100%;
-          height: 36vh;
+          height: 40%;
         }
       }
       .boxall {
@@ -631,21 +636,49 @@ const toView = (item) => {
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+
   //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
   :deep(.el-input__wrapper) {
-    font-size: 1rem;
-    padding: 0.1rem 1rem;
-    background-color: rgba(17, 43, 73, 1) !important;
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
   }
-  :deep(.el-select__wrapper) {
-    font-size: 1rem;
-    padding: 0 1rem;
-    background-color: rgba(17, 43, 73, 1) !important;
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
   }
 }
 </style>

src/views/brain/thr/echarts7.vue

@@ -1,96 +1,156 @@
 <template>
-  <div ref="echarts4" class="echarts4"></div>
+  <div ref="echarts7" class="echarts7"></div>
 </template>
 <style scoped lang="scss">
-.echarts4 {
+.echarts7 {
   height: 18vh;
   width: 100%;
 }
 </style>
 <script setup>
 import * as echarts from 'echarts'
-const echarts4 = ref()
+const echarts7 = ref()
 onMounted(() => {
-  echarts4View()
+  echarts7View()
 })
-function echarts4View() {
-  const myChart4 = echarts.init(echarts4.value)
-  const option4 = {
+function echarts7View() {
+  const myChart7 = echarts.init(echarts7.value)
+  const option7 = {
     tooltip: {
-      // 鼠标悬浮提示数据
-      trigger: 'axis',
-      backgroundColor: 'rgba(32, 33, 36,.7)',
-      borderColor: 'rgba(32, 33, 36,0.20)',
-      borderWidth: 15,
-      textStyle: {
-        // 文字提示样式
-        color: '#fff',
-        fontSize: '12'
-      },
-      axisPointer: {
-        // 坐标轴虚线
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
+      //类似于hover效果鼠标放上显示弹框
+      borderColor: '#EBEEF5',
+      borderWidth: 1,
+      padding: [5, 16, 5, 14],
+      trigger: 'axis', //触发类型为坐标轴
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      formatter: (params) => {
+        return (
+          '<span style="color:#818693;font-size:12px;margin-right:17px;margin-bottom:4px;display:inline-block">日期：</span>' +
+          '<span style="color:#20232A;font-size:12px;display:inline-block">' +
+          params[0].name +
+          '</span>' +
+          '<br />' +
+          ('<span style="color:#818693;font-size:12px;margin-bottom:4px;display:inline-block">订单总量：</span>' + '<span style="color:#20232A;font-size:12px;display:inline-block;float:right">' + params[0].data + '笔' + '</span>')
+        )
       }
     },
-
-    // },
     grid: {
-      // 控制图表的位置
-      left: '5%',
-      right: '5%',
-      top: '10%',
-      bottom: '5%',
-      containLabel: true
+      //图表位置
+      top: '5%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true // 是否预留坐标轴宽度
     },
     xAxis: {
+      type: 'category', //x轴类型
+      boundaryGap: true, // 坐标轴两边留白
+      data: ['2019', '2020', '2021`', '2022', '2023', '2024'], //x轴数据折线图下面数据
       axisLabel: {
-        // X轴线 标签修改
+        // 坐标轴刻度标签的相关设置。
+        show: true, //显示x轴
+        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
         textStyle: {
-          color: 'white', //坐标值得具体的颜色
-          fontSize: '10'
+          color: '#ffffff',
+          fontStyle: 'normal',
+          fontFamily: '微软雅黑',
+          fontSize: 12
+        },
+        margin: 17
+      },
+      axisTick: {
+        // 坐标轴刻度相关设置。
+        show: false, //不显示刻度
+        alignWithLabel: true // 刻度与标签对齐
+      },
+      axisLine: {
+        //坐标轴轴线相关设置 --x轴
+        // 坐标轴轴线相关设置
+        lineStyle: {
+          // x轴样式
+          color: '#ffffff' // x轴字体颜色
+          // opacity:0.2
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
-    },
-    yAxis: {
-      axisLabel: {
-        // y轴线 标签修改
-        textStyle: {
-          color: 'white' //坐标值得具体的颜色
+      splitLine: {
+        //splitLine的作用是将坐标轴上的数值分隔开来，splitLine通常是水平或垂直的，
+        // 坐标轴在 grid 区域中的分隔线。
+        show: false, // 不显示x轴
+        lineStyle: {
+          //x轴样式
+          color: '#ffffff'
+          //  opacity:0.1
         }
       }
     },
+    yAxis: [
+      {
+        type: 'value', //y轴类型
+        // splitNumber: 5,  //刻度的数量
+        axisLabel: {
+          //axisLabel指的是坐标轴上的标签，用于标识坐标轴上每个刻度所代表的具体数值。axisLabel通常包括数值的单位和数值的格式等信息，以帮助读者更好地理解数据。
+          textStyle: {
+            color: '#a8aab0',
+            fontStyle: 'normal',
+            fontFamily: '微软雅黑',
+            fontSize: 12
+          }
+        },
+        axisLine: {
+          //坐标抽轴线相关设置
+          show: false //不显示
+        },
+        axisTick: {
+          //是否显示坐标轴刻度
+          show: false //不显示
+        },
+        splitLine: {
+          //网格线
+          show: true,
+          lineStyle: {
+            //网格线样式
+            color: '#E5E9ED'
+            //    opacity:0.1
+          }
+        }
+      }
+    ],
     series: [
       {
-        data: [2549, 12421, 2637, 3146, 15189, 9562],
-        type: 'bar',
-        barWidth: '48%', //调整柱状图宽度
+        symbol: 'circle', //类型
+        symbolSize: 6, //拐点大小
+        name: '2019',
+        type: 'line',
         itemStyle: {
+          //拐点颜色
           normal: {
-            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
-            borderRadius: [12, 12, 0, 0],
-            /*--------设置柱形图渐变色 -------------*/
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: 'rgba(0,244,255,1)'
-              },
-              {
-                offset: 1,
-                color: 'rgba(0,77,167,1)'
-              }
-            ])
+            color: '#0000CD',
+            lineStyle: {
+              //线条颜色
+              color: '#0000CD', //线条颜色
+              width: 1
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: 'rgba(0,0,205,0.21)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(0,0,205,0.00)'
+                }
+              ])
+            }
           }
-        }
+        },
+        data: [2432, 7442, 1224, 1331, 1413, 1553] //数据
       }
     ]
   }
-  myChart4.setOption(option4)
+  myChart7.setOption(option7)
   window.addEventListener('resize', function () {
-    myChart4.resize()
+    myChart7.resize()
   })
 }
 </script>

src/views/brain/two.vue

@@ -22,13 +22,13 @@
           <div class="two_1">
             <div class="two_left">当前区域：</div>
             <div class="two_right">
-              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
             </div>
           </div>
           <div class="two_1">
             <div class="two_left">当前产业：</div>
             <div class="two_right">
-              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.industry" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
@@ -36,28 +36,49 @@
           <div class="two_1">
             <div class="two_left">产业链：</div>
             <div class="two_right">
-              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+              <el-select v-model="form.chain" clearable placeholder="请选择" :popper-append-to-body="false" style="width: 14rem" :teleported="false">
                 <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </div>
         </div>
         <div class="thr">
-          <div class="left">
-            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+              <div class="title center">
+                <div class="titleRight">产业链图谱</div>
+              </div>
+            </BorderBox13>
           </div>
-          <div class="right">
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
-            </div>
-            <div class="right_1">
-              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
-              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
-            </div>
-            <div class="right_2">
-              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
-            </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_2" title="完整性">
+              <div class="title">
+                <div class="titleRight">完整性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_3" title="安全性">
+              <div class="title center">
+                <div class="titleRight">安全性</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="韧性">
+              <div class="title">
+                <div class="titleRight">韧性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="稳定性">
+              <div class="title">
+                <div class="titleRight">稳定性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_6" title="可靠性">
+              <div class="title">
+                <div class="titleRight">可靠性</div>
+                <div class="titleLeft">更多</div>
+              </div>
+            </BorderBox13>
           </div>
         </div>
       </div>
@@ -66,7 +87,7 @@
 </template>
 
 <script setup>
-import { BorderBox11 } from '@dataview/datav-vue3'
+import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
 // 图片引入
 import { UserStore } from '@/store/user'
@@ -112,9 +133,12 @@ const toView = (item) => {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #17171d;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
   padding: 0rem;
   margin: 0rem;
+  color: #ffffff;
   font-family: '微软雅黑';
   cursor: default; /* 将鼠标样式更改为箭头 */
   .menu_1 {
@@ -167,81 +191,152 @@ const toView = (item) => {
     position: absolute;
     left: 0;
     top: 35%;
-    height: 22rem;
+    height: 30%;
     padding: 0 0.3rem;
     border-radius: 0 1.5rem 1.5rem 0;
     z-index: 10000;
   }
   .content {
+    width: 100%;
+    height: 100%;
     .one {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 6%;
       background: url(/images/brain/titleBg.svg);
       background-size: 100% 100%;
       font-size: 2.4rem;
-      text-align: center;
       color: #53befe;
-      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
     }
     .two {
+      width: 100%;
+      height: 5%;
       display: flex;
       align-items: center;
-      margin: 0.8rem 0 0 0;
       color: #ffffff;
       font-size: 1.2rem;
       .two_1 {
         display: flex;
         align-items: center;
         margin: 0 0 0 1rem;
-        .two_right {
-          //select 选择器
-          :deep(.el-input__wrapper) {
-            font-size: 1rem;
-            padding: 0.1rem 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-          :deep(.el-select__wrapper) {
-            font-size: 1rem;
-            padding: 0 1rem;
-            background-color: rgba(17, 43, 73, 1) !important;
-          }
-        }
       }
     }
     .thr {
       display: flex;
-      padding: 0.8rem 0;
       width: 100%;
-      height: 100%;
-      .left {
-        width: 49%;
+      height: 89%;
+      .thr_1 {
+        width: 50%;
         height: 100%;
-        .thr_1 {
+        .boxall_1 {
           width: 100%;
-          height: 86vh;
+          height: 100%;
         }
       }
-      .right {
-        width: 61%;
+      .thr_2 {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
         height: 100%;
-        .right_1 {
+        .boxall_2 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_3 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_4 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_5 {
+          width: 50%;
+          height: 35%;
+        }
+        .boxall_6 {
           width: 100%;
+          height: 30%;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
           display: flex;
-          .thr_2 {
-            width: 100%;
-            height: 31vh;
-          }
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.3rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
-        .right_2 {
-          width: 100%;
-          .thr_3 {
-            width: 100%;
-            height: 24vh;
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #612bdf;
+            box-shadow:
+              0 0 10px rgba(97, 43, 223, 0.2),
+              inset 0 0 10px rgba(97, 43, 223, 0.1),
+              0 1px 0 rgb(97, 43, 223);
+          }
+          100% {
+            border-color: rgb(56, 201, 226);
+            box-shadow:
+              0 0 25px rgba(56, 201, 226, 0.6),
+              inset 0 0 15px rgba(56, 201, 226, 0.4),
+              0 1px 0 rgb(56, 201, 226);
           }
         }
       }
-      :deep(.dv-border-box-11-title) {
-        font-size: 1.4rem;
-      }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
 }
 </style>