修改

package-lock.json

@@ -28,6 +28,7 @@
         "path-to-regexp": "^6.2.1",
         "pinia": "^2.1.7",
         "postcss-px2rem": "^0.3.0",
+        "relation-graph-vue3": "^2.2.1",
         "universal-cookie": "^7.1.0",
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.1",
@@ -1902,6 +1903,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@@ -2264,6 +2273,14 @@
         "urix": "^0.1.0"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
@@ -3654,6 +3671,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -5562,6 +5591,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/relation-graph-vue3": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/relation-graph-vue3/-/relation-graph-vue3-2.2.1.tgz",
+      "integrity": "sha512-yREBv4quS3udCZeIUu8bRApZDm0RsO4jD86IfTWrQRNWftT77vD+/3YCN3o5EUpJZZKsdlPGWCAZsEe10hYVPg==",
+      "dependencies": {
+        "html2canvas": "^1.4.1",
+        "screenfull": "^5.1.0"
+      }
+    },
     "node_modules/repeat-element": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/repeat-element/-/repeat-element-1.1.4.tgz",
@@ -5766,6 +5804,17 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.31",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
@@ -6535,6 +6584,14 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -7082,6 +7139,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -8600,6 +8665,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@@ -8877,6 +8947,14 @@
         "urix": "^0.1.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
@@ -9900,6 +9978,15 @@
       "resolved": "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-2.0.1.tgz",
       "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -11313,6 +11400,15 @@
         }
       }
     },
+    "relation-graph-vue3": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/relation-graph-vue3/-/relation-graph-vue3-2.2.1.tgz",
+      "integrity": "sha512-yREBv4quS3udCZeIUu8bRApZDm0RsO4jD86IfTWrQRNWftT77vD+/3YCN3o5EUpJZZKsdlPGWCAZsEe10hYVPg==",
+      "requires": {
+        "html2canvas": "^1.4.1",
+        "screenfull": "^5.1.0"
+      }
+    },
     "repeat-element": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/repeat-element/-/repeat-element-1.1.4.tgz",
@@ -11438,6 +11534,11 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+    },
     "scroll-into-view-if-needed": {
       "version": "2.2.31",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
@@ -12042,6 +12143,14 @@
         "tslib": "^2.6.2"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -12439,6 +12548,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
     "postcss-px2rem": "^0.3.0",
+    "relation-graph-vue3": "^2.2.1",
     "universal-cookie": "^7.1.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",
@@ -53,4 +54,4 @@
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-svg-icons": "^2.0.1"
   }
-}
+}

src/views/brain/five.vue

@@ -70,6 +70,7 @@
                   </div>
                 </div>
               </div>
+              <echarts2></echarts2>
             </BorderBox13>
           </div>
           <div class="thr_2">
@@ -83,7 +84,7 @@
               <div class="list flex">
                 <div class="list_1" v-for="(item, index) in list_1" :key="index">
                   <div class="titleList">{{ item.name || '暂无' }}</div>
-                  <div class="num">{{ item.total || '暂无' }}</div>
+                  <div class="num">{{ item.total || '0' }}</div>
                 </div>
               </div>
             </BorderBox13>
@@ -140,6 +141,7 @@ import myMain from '@/components/dataV/myMain.vue'
 // 组件
 import echarts1 from './five/echarts1.vue'
 import map1 from './five/map.vue'
+import echarts2 from './five/echarts2.vue'
 import echarts3 from './five/echarts3.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'

src/views/brain/five/echarts2.vue

@@ -0,0 +1,79 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 50%;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  echarts2View()
+})
+function echarts2View() {
+  const myChart2 = echarts.init(echarts2.value)
+  const option2 = {
+    tooltip: {
+      trigger: 'item'
+    },
+    grid: {
+      top: '5%',
+      bottom: '10%'
+    },
+    visualMap: {
+      show: false,
+      min: 80,
+      max: 600,
+      inRange: {
+        colorLightness: [0, 1]
+      }
+    },
+    series: [
+      {
+        name: '实力对标',
+        type: 'pie',
+        radius: '85%',
+        center: ['50%', '50%'],
+        data: [
+          { value: 335, name: '吉林市' },
+          { value: 310, name: '松原市' },
+          { value: 274, name: '辽源市' },
+          { value: 235, name: '通化市' },
+          { value: 400, name: '长春市' }
+        ].sort(function (a, b) {
+          return a.value - b.value
+        }),
+        roseType: 'radius',
+        label: {
+          color: '#fff'
+        },
+        labelLine: {
+          lineStyle: {
+            color: '#fff'
+          },
+          smooth: 0.2,
+          length: 10,
+          length2: 20
+        },
+        itemStyle: {
+          color: '#40E0D0',
+          shadowBlur: 200,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+        animationDelay: function () {
+          return Math.random() * 200
+        }
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/four.vue

@@ -68,7 +68,7 @@
                 <echarts1></echarts1>
               </BorderBox13>
               <BorderBox13 class="boxall boxall_1_2" title="产业人才">
-                <div class="title center">
+                <div class="title">
                   <div class="titleRight">产业人才</div>
                 </div>
                 <div class="list flex">
@@ -83,12 +83,15 @@
               <div class="title">
                 <div class="titleRight">关系图谱</div>
               </div>
+              <person></person>
             </div>
             <div class="boxall_3">
               <BorderBox13 class="boxall boxall_3_1" title="院士">
                 <div class="title">
                   <div class="titleRight">院士</div>
-                  <div class="titleleft">搜索</div>
+                  <div class="titleCenter">
+                    <el-input v-model="input" style="width: 14rem" placeholder="请输入名称" />
+                  </div>
                 </div>
                 <div class="list flex">
                   <div class="list_2" v-for="(item, index) in list_4" :key="index">
@@ -96,11 +99,32 @@
                     <div class="list_school">{{ item.school || '暂无' }}</div>
                   </div>
                 </div>
+                <div class="total">
+                  <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+                </div>
               </BorderBox13>
               <BorderBox13 class="boxall boxall_3_2" title="成果完成人">
                 <div class="title center">
                   <div class="titleRight">成果完成人</div>
                 </div>
+                <div class="person">
+                  <div class="person_left">
+                    <div class="person_search" v-for="(item, index) in list_5" :key="index">
+                      {{ item.name }}
+                    </div>
+                  </div>
+                  <div class="person_right">
+                    <div class="person_list">
+                      <div class="list_2" v-for="(item, index) in list_4" :key="index">
+                        <div class="list_title">{{ item.name || '暂无' }}</div>
+                        <div class="list_school">{{ item.school || '暂无' }}</div>
+                      </div>
+                    </div>
+                    <div class="total">
+                      <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+                    </div>
+                  </div>
+                </div>
               </BorderBox13>
             </div>
           </div>
@@ -172,6 +196,7 @@ import myMain from '@/components/dataV/myMain.vue'
 import echarts1 from './four/echarts1.vue'
 import echarts2 from './four/echarts2.vue'
 import map1 from './four/map.vue'
+import person from './four/person.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -231,6 +256,13 @@ const list_4 = ref([
   { name: '颜德岳', school: '吉林大学' },
   { name: '颜德岳', school: '吉林大学' }
 ])
+const list_5 = ref([
+  { name: '高级管理人才', value: '0' },
+  { name: '标准起草专家', value: '1' },
+  { name: '项目完成人', value: '2' },
+  { name: '成果完成人', value: '3' },
+  { name: '其它专家', value: '4' }
+])
 // 字典表
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
@@ -414,6 +446,9 @@ const toView = (item) => {
           font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
+          .titleCenter {
+            margin: 0 2rem 0 0;
+          }
         }
         .center {
           justify-content: center !important;
@@ -448,8 +483,60 @@ const toView = (item) => {
             }
           }
         }
+        .person {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          .person_left {
+            height: 100%;
+            width: 30%;
+            padding: 0.5rem 1rem 0 0;
+            .person_search {
+              padding: 0.5rem;
+              font-size: 1.2rem;
+            }
+            .person_search:hover {
+              background-color: #1ab7d3;
+              border-radius: 2rem;
+            }
+          }
+          .person_right {
+            width: 70%;
+            height: 100%;
+            .person_list {
+              display: flex;
+              flex-wrap: wrap;
+              width: 100%;
+              height: 70%;
+              .list_2 {
+                height: 45%;
+                width: 31.5%;
+                background-color: rgba($color: #75f9fd, $alpha: 0.3);
+                padding: 0.5rem;
+                margin: 0.5rem 0.5rem 0 0;
+                .list_title {
+                  margin: 0.5rem 0;
+                  font-size: 1.2rem;
+                  color: #75f9fd;
+                }
+                .list_school {
+                  font-size: 1rem;
+                }
+              }
+              .list_2:nth-child(3n) {
+                margin: 0.5rem 0 0 0;
+              }
+            }
+
+            .total {
+              width: 100%;
+              height: 18%;
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
         .list {
-          margin: 0.5rem 0 0 0;
           height: 80%;
           width: 100%;
           .list_1 {
@@ -498,7 +585,8 @@ const toView = (item) => {
           display: flex;
           flex-wrap: wrap;
           align-items: center;
-          justify-content: center;
+          width: 100%;
+          height: 66%;
         }
         .table {
           width: 100%;
@@ -519,7 +607,7 @@ const toView = (item) => {
           }
           .table-value {
             width: 100%;
-            height: 75%;
+            height: 70%;
             color: #fff;
             font-size: 1.2rem;
             .value {
@@ -542,6 +630,12 @@ const toView = (item) => {
             justify-content: center;
           }
         }
+        .total {
+          width: 100%;
+          height: 18%;
+          display: flex;
+          justify-content: center;
+        }
       }
     }
   }

src/views/brain/four/echarts1.vue

@@ -3,7 +3,7 @@
 </template>
 <style scoped lang="scss">
 .echarts1 {
-  height: 20vh;
+  height: 18vh;
   width: 100%;
 }
 </style>
@@ -27,7 +27,7 @@ function echarts1View() {
     },
     grid: {
       top: '5%',
-      bottom: '10%'
+      bottom: '15%'
     },
     xAxis: {
       type: 'value',
@@ -38,15 +38,18 @@ function echarts1View() {
           fontSize: '1.2rem',
           color: '#fff'
         }
+      },
+      axisLabel: {
+        color: '#fff' // 设置x轴文字颜色为白色
       }
     },
     yAxis: {
       type: 'category',
       axisLine: { show: false },
-      axisLabel: { show: false },
+      axisLabel: { show: true, color: '#fff' },
       axisTick: { show: false },
       splitLine: { show: false },
-      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+      data: ['半导体', '新材料', '智能制造', '汽车', '农业', '航空']
     },
     series: [
       {
@@ -54,7 +57,7 @@ function echarts1View() {
         type: 'bar',
         stack: 'Total',
         label: {
-          show: true,
+          show: false,
           formatter: '{b}'
         },
         itemStyle: {

src/views/brain/four/echarts2.vue

@@ -38,15 +38,24 @@ function echarts2View() {
           fontSize: '1.2rem',
           color: '#fff'
         }
+      },
+      axisLabel: {
+        color: '#fff' // 设置x轴文字颜色为白色
       }
     },
     yAxis: {
       type: 'category',
-      axisLine: { show: false },
-      axisLabel: { show: false },
+      axisLine: { show: true },
+      axisLabel: {
+        show: true,
+        color: '#fff',
+        formatter: function (value) {
+          return value.length > 5 ? value.slice(0, 5) + '...' : value
+        }
+      },
       axisTick: { show: false },
       splitLine: { show: false },
-      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+      data: ['职业学校', '高中学校', '技术学校', '其他机构']
     },
     series: [
       {
@@ -54,7 +63,7 @@ function echarts2View() {
         type: 'bar',
         stack: 'Total',
         label: {
-          show: true,
+          show: false,
           formatter: '{b}'
         },
         itemStyle: {
@@ -74,7 +83,7 @@ function echarts2View() {
             ])
           }
         },
-        data: [{ value: -0.07, label: labelRight }, { value: -0.09, label: labelRight }, 0.2, 0.44, { value: -0.23, label: labelRight }, 0.08, { value: -0.17, label: labelRight }, 0.47, { value: -0.36, label: labelRight }, 0.18]
+        data: [{ value: -20, label: labelRight }, { value: -14, label: labelRight }, 40, 29, { value: -0.23, label: labelRight }, 0.08, { value: -0.17, label: labelRight }, 0.47, { value: -0.36, label: labelRight }, 0.18]
       }
     ]
   }

src/views/brain/four/person.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div style="height: calc(55vh)">
+      <RelationGraph ref="graphRef" :options="graphOptions"> </RelationGraph>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import RelationGraph from 'relation-graph-vue3'
+const graphOptions = {
+  backgroundColor: 'transparent',
+  allowShowMiniToolBar: false,
+  defaultNodeBorderWidth: 0,
+  defaultLineColor: 'rgba(0, 186, 189, 1)',
+  defaultNodeColor: 'rgba(0, 206, 209, 1)',
+  reLayoutWhenExpandedOrCollapsed: false,
+  defaultExpandHolderPosition: 'bottom',
+  zoomToFitWhenRefresh: false,
+  useAnimationWhenExpanded: false,
+  debug: false
+}
+
+const graphRef = ref()
+
+const showHTree = async () => {
+  const __graph_json_data = {
+    rootId: '2',
+    nodes: [
+      { id: '2', text: 'ALTXX', data: null },
+      { id: '3', text: 'CH2 TTN', data: null },
+      { id: '4', text: 'CH1 AlCu', data: null },
+      { id: '5', text: 'MainFrame', data: null },
+      { id: '6', text: 'TestMainSys', data: null },
+      { id: '7', text: '汽车部件', data: null },
+      { id: '8', text: '汽车工艺', data: null },
+      { id: '9', text: '过程质检', data: null },
+      { id: '10', text: '卓立制造', data: null },
+      { id: '11', text: '压电开关', data: null },
+      { id: '12', text: '电子产品', data: null },
+      { id: '13', text: '集成电路', data: null },
+      { id: '14', text: 'ArHigh', data: null },
+      { id: '15', text: 'ArLow', data: null },
+      { id: '16', text: 'ShowerHead', data: null },
+      { id: '17', text: 'CrypoPump', data: null },
+      { id: '18', text: 'DryPump', data: null },
+      { id: '19', text: 'Ti Target', data: null },
+      { id: '20', text: 'N2', data: null },
+      { id: '21', text: 'Shutter', data: null },
+      { id: '22', text: 'Cool Chbr', data: null },
+      { id: '23', text: 'Transfer Chbr', data: null },
+      { id: '24', text: 'Alignment Unit', data: null },
+      { id: '25', text: '齿轮箱', data: null },
+      { id: '26', text: '车门内部人工涂蜡', data: null },
+      { id: '27', text: '原材料检验', data: null },
+      { id: '28', text: '地板RTV硅胶密封', data: null },
+      { id: '29', text: '热保护焊接', data: null },
+      { id: '30', text: '电热管导线焊接', data: null },
+      { id: '31', text: '温控器安装', data: null },
+      { id: '32', text: '蒸汽硅胶座配装', data: null },
+      { id: '33', text: '温度调试', data: null },
+      { id: '34', text: '压电开关的模型塑料外壳', data: null },
+      { id: '35', text: '安装开关', data: null },
+      { id: '36', text: 'ASIC IC', data: null },
+      { id: '37', text: 'SENSOR', data: null },
+      { id: '38', text: 'CON', data: null },
+      { id: '39', text: 'Flash', data: null },
+      { id: '40', text: 'Flite', data: null }
+    ],
+    lines: [
+      { from: '2', to: '5', text: '任职', data: null },
+      { from: '2', to: '6', text: '任职', data: null },
+      { from: '2', to: '3', text: '任职', data: null },
+      { from: '2', to: '4', text: '任职', data: null },
+      { from: '3', to: '21', text: '任职', data: null },
+      { from: '3', to: '20', text: '任职', data: null },
+      { from: '3', to: '19', text: '任职', data: null },
+      { from: '4', to: '18', text: '任职', data: null },
+      { from: '4', to: '17', text: '任职', data: null },
+      { from: '4', to: '16', text: '任职', data: null },
+      { from: '4', to: '15', text: '任职', data: null },
+      { from: '4', to: '14', text: '任职', data: null },
+      { from: '5', to: '24', text: '任职', data: null },
+      { from: '5', to: '23', text: '任职', data: null },
+      { from: '5', to: '22', text: '任职', data: null },
+      { from: '6', to: '13', text: '任职', data: null },
+      { from: '6', to: '12', text: '任职', data: null },
+      { from: '6', to: '11', text: '任职', data: null },
+      { from: '6', to: '10', text: '任职', data: null },
+      { from: '6', to: '9', text: '任职', data: null },
+      { from: '6', to: '8', text: '任职', data: null },
+      { from: '6', to: '7', text: '任职', data: null },
+      { from: '7', to: '25', text: '任职', data: null },
+      { from: '8', to: '26', text: '任职', data: null },
+      { from: '9', to: '27', text: '任职', data: null },
+      { from: '10', to: '33', text: '任职', data: null },
+      { from: '10', to: '32', text: '任职', data: null },
+      { from: '10', to: '31', text: '任职', data: null },
+      { from: '10', to: '30', text: '任职', data: null },
+      { from: '10', to: '29', text: '任职', data: null },
+      { from: '10', to: '28', text: '任职', data: null },
+      { from: '11', to: '35', text: '任职', data: null },
+      { from: '11', to: '34', text: '任职', data: null },
+      { from: '12', to: '39', text: '任职', data: null },
+      { from: '12', to: '38', text: '任职', data: null },
+      { from: '12', to: '37', text: '任职', data: null },
+      { from: '12', to: '36', text: '任职', data: null },
+      { from: '13', to: '40', text: '任职', data: null }
+    ]
+  }
+
+  const graphInstance = graphRef.value?.getInstance()
+  if (graphInstance) {
+    await graphInstance.setOptions(graphOptions)
+    await graphInstance.setJsonData(__graph_json_data)
+    await graphInstance.moveToCenter()
+    await graphInstance.zoomToFit()
+  }
+}
+
+onMounted(() => {
+  showHTree()
+})
+</script>
+
+<style lang="scss" scoped>
+.c-my-panel {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  border-radius: 10px;
+  z-index: 800;
+  padding: 20px;
+
+  :deep(.relation-graph .rel-map) {
+    background-color: transparent !important;
+  }
+}
+</style>

src/views/brain/one.vue

@@ -49,15 +49,24 @@
                 <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 style="height: 100%">
+                  <vue3-tree-org
+                    :data="list_3"
+                    center
+                    :toolBar="toolBar"
+                    :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>
@@ -189,35 +198,46 @@ const list_2 = ref([
 const horizontal = ref(true)
 const collapsable = ref(true)
 const onlyOneNode = ref(false)
-const disaled = ref(false)
 const style = ref({
   color: '#ffffff'
 })
+const toolBar = ref({ scale: false, restore: false, expand: false, zoom: false, fullscreen: false })
 const list_3 = ref({
   id: 1,
-  label: 'xxx科技有限公司',
+  label: '长春xxx科技有限公司',
+  style: { color: '#fff', background: '#7B68EE' },
   children: [
     {
       id: 2,
       pid: 1,
       label: '产品研发部',
-      style: { color: '#fff', background: '#108ffe' },
+      style: { color: '#fff', background: '#7B68EE' },
       children: [
-        { id: 6, pid: 2, label: '禁止编辑节点', disabled: true },
-        { id: 8, pid: 2, label: '禁止拖拽节点', noDragging: true },
-        { id: 10, pid: 2, label: '测试' }
+        { id: 6, pid: 2, label: '产品研发一部' },
+        { id: 8, pid: 2, label: '产品研发二部' },
+        { id: 10, pid: 2, label: '产品研发三部' }
       ]
     },
     {
       id: 3,
       pid: 1,
       label: '客服部',
+      style: { color: '#fff', background: '#7B68EE' },
       children: [
         { id: 11, pid: 3, label: '客服一部' },
         { id: 12, pid: 3, label: '客服二部' }
       ]
     },
-    { id: 4, pid: 1, label: '业务部' }
+    {
+      id: 4,
+      pid: 1,
+      label: '业务部',
+      style: { color: '#fff', background: '#7B68EE' },
+      children: [
+        { id: 11, pid: 3, label: '业务一部' },
+        { id: 12, pid: 3, label: '业务二部' }
+      ]
+    }
   ]
 })
 const list_4 = ref([
@@ -472,7 +492,7 @@ const toView = (item) => {
               height: 100%;
               padding: 1rem;
               text-align: center;
-              font-size: 1.3rem;
+              font-size: 1.4rem;
               .titleList {
                 margin: 0 0 0.5rem 0;
               }
@@ -495,7 +515,7 @@ const toView = (item) => {
             justify-content: space-between;
             align-items: center;
             color: #ffffff;
-            font-size: 1rem;
+            font-size: 1.2rem;
           }
         }
         .flex {

src/views/brain/thr/echarts1.vue

@@ -53,7 +53,7 @@ function echarts1View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['半导体', '新材料', '农业', '汽车行业', '航空', '其他']
     },
     yAxis: {
       axisLabel: {

src/views/brain/thr/echarts2.vue

@@ -3,7 +3,7 @@
 </template>
 <style scoped lang="scss">
 .echarts2 {
-  height: 18vh;
+  height: 20vh;
   width: 100%;
 }
 </style>

src/views/brain/thr/echarts3.vue

@@ -63,7 +63,7 @@ function echarts3View() {
           color: 'white' //坐标值得具体的颜色
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['新能源', '氢能技术', '智能机器人', '可再生技术', '重大科学仪器', '其他']
     },
     series: [
       {

src/views/brain/thr/echarts4.vue

@@ -71,7 +71,7 @@ function echarts4View() {
         itemStyle: {
           normal: {
             /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
-            borderRadius: [12, 12, 0, 0],
+            borderRadius: [100, 100, 0, 0],
             /*--------设置柱形图渐变色 -------------*/
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {

src/views/brain/thr/echarts5.vue

@@ -3,7 +3,7 @@
 </template>
 <style scoped lang="scss">
 .echarts5 {
-  height: 17.5vh;
+  height: 20.5vh;
   width: 100%;
 }
 </style>
@@ -65,13 +65,13 @@ function echarts5View() {
     },
     series: [
       {
-        data: [12421, 2549],
+        data: [19421, 12549],
         type: 'bar',
         barWidth: '48%', //调整柱状图宽度
         itemStyle: {
           normal: {
             /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
-            borderRadius: [12, 12, 0, 0],
+            borderRadius: [100, 100, 0, 0],
             /*--------设置柱形图渐变色 -------------*/
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {

src/views/brain/thr/echarts6.vue

@@ -3,7 +3,7 @@
 </template>
 <style scoped lang="scss">
 .echarts6 {
-  height: 18vh;
+  height: 20vh;
   width: 100%;
 }
 </style>
@@ -53,7 +53,7 @@ function echarts6View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['半导体', '新材料', '农业', '汽车行业', '航空', '其他']
     },
     yAxis: {
       axisLabel: {

src/views/brain/two.vue

@@ -109,11 +109,9 @@
                 </div>
               </div>
             </div>
-            <BorderBox13 class="boxall boxall_5" title="上市公司区域分布">
-              <div class="title center">
-                <div class="titleRight">上市公司区域分布</div>
-              </div>
-            </BorderBox13>
+            <div class="boxall_5" title="上市公司区域分布">
+              <map1></map1>
+            </div>
             <div class="boxall_6">
               <BorderBox13 class="boxall boxall_6_1" title="上市公司上市板块分布">
                 <div class="title center">
@@ -150,6 +148,32 @@
               <div class="title center">
                 <div class="titleRight">金融指标详细KPI</div>
               </div>
+              <div class="money">
+                <div class="money_left">
+                  <div class="money_1">
+                    <div class="money_one">盈利</div>
+                    <div class="money_two"><span>72</span></div>
+                  </div>
+                  <div class="money_2">
+                    <div class="money_one">亏损</div>
+                    <div class="money_two"><span>15</span></div>
+                  </div>
+                </div>
+                <div class="money_right">
+                  <div class="money_1">
+                    <div class="money_one">总利润</div>
+                    <div class="money_two"><span>463.48</span></div>
+                    <div class="money_one">同比</div>
+                    <div class="money_two"><span>44.94%</span></div>
+                  </div>
+                  <div class="money_1">
+                    <div class="money_one">总营收</div>
+                    <div class="money_two"><span>7057.63</span></div>
+                    <div class="money_one">同比</div>
+                    <div class="money_two"><span>45.87</span></div>
+                  </div>
+                </div>
+              </div>
             </BorderBox13>
             <BorderBox13 class="boxall boxall_8" title="各区域【总利润】">
               <div class="title center">
@@ -202,6 +226,7 @@ import echarts7 from './two/echarts7.vue'
 import echarts8 from './two/echarts8.vue'
 import echarts9 from './two/echarts9.vue'
 import echarts10 from './two/echarts10.vue'
+import map1 from './two/map.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -510,6 +535,78 @@ const toView = (item) => {
           flex-wrap: wrap;
           align-items: center;
         }
+        .money {
+          display: flex;
+          width: 100%;
+          height: 90%;
+          padding: 1rem;
+          .money_left {
+            width: 30%;
+            height: 98%;
+            .money_1 {
+              border-left: 1rem solid #006eff;
+              width: 98%;
+              height: 50%;
+              text-align: center;
+              .money_one {
+                font-size: 1.3rem;
+              }
+              .money_two {
+                font-size: 1.5rem;
+                span {
+                  background: linear-gradient(to top, #ffffff, #006eff);
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                }
+              }
+            }
+            .money_2 {
+              border-left: 1rem solid #00d9ff;
+              width: 98%;
+              height: 50%;
+              margin: 0.5rem 0 0 0;
+              text-align: center;
+              .money_one {
+                font-size: 1.3rem;
+              }
+              .money_two {
+                font-size: 1.5rem;
+                span {
+                  background: linear-gradient(to top, #ffffff, #00d9ff);
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                }
+              }
+            }
+          }
+          .money_right {
+            width: 70%;
+            height: 100%;
+            display: flex;
+            justify-content: space-around;
+            .money_1 {
+              text-align: center;
+              width: 49%;
+              height: 100%;
+              border: 0.2rem solid #00d9ff;
+              padding: 0.2rem 0;
+              font-size: 1rem;
+              .money_two {
+                width: 100%;
+                height: 20%;
+                margin: 0.3rem 0 0 0;
+                color: #00d9ff;
+              }
+              .money_one {
+                width: 100%;
+                height: 20%;
+                margin: 0.3rem 0 0 0;
+              }
+            }
+          }
+        }
       }
     }
   }

src/views/brain/two/echarts1.vue

@@ -53,7 +53,7 @@ function echarts1View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['半导体', '新材料', '农业', '汽车行业', '航空', '其他']
     },
     yAxis: {
       axisLabel: {

src/views/brain/two/echarts10.vue

@@ -53,7 +53,7 @@ function echarts10View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司', '长春×××公司']
     },
     yAxis: {
       axisLabel: {
@@ -65,7 +65,7 @@ function echarts10View() {
     },
     series: [
       {
-        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        data: [2549, 12421, 2637, 3146, 15189, 9562, 2637, 3146, 15189, 9562],
         type: 'bar',
         barWidth: '48%', //调整柱状图宽度
         itemStyle: {

src/views/brain/two/echarts5.vue

@@ -36,8 +36,8 @@ function echarts5View() {
           show: true
         },
         data: [
-          { value: 1048, name: '占比30%' },
-          { value: 735, name: '占比40%' }
+          { value: 1048, name: '占比80%' },
+          { value: 735, name: '占比20%' }
         ]
       }
     ]

src/views/brain/two/echarts7.vue

@@ -53,7 +53,7 @@ function echarts7View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['半导体', '新材料', '农业', '汽车行业', '航空', '其他']
     },
     yAxis: {
       axisLabel: {

src/views/brain/two/echarts8.vue

@@ -53,7 +53,7 @@ function echarts8View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['南关区', '朝阳区', '净月区', '绿园区', '高新区', '宽城区']
     },
     yAxis: {
       axisLabel: {

src/views/brain/two/echarts9.vue

@@ -53,7 +53,7 @@ function echarts9View() {
           fontSize: '10'
         }
       },
-      data: ['A', 'B', 'C', 'D', 'E', 'F']
+      data: ['2019', '2020', '2021', '2022', '2023', '2024']
     },
     yAxis: {
       axisLabel: {