修改产业大脑

jsconfig.json

@@ -6,5 +6,5 @@
     }
   },
   "exclude": ["node_modules", "dist"],
-  "include": ["src/**/*.vue", "**/*.js"]
+  "include": ["src/**/*.vue", "**/*.js", "src/views/brain/five/json/home.json"]
 }

src/views/brain/five.vue

@@ -44,40 +44,88 @@
         </div>
         <div class="thr">
           <div class="thr_1">
-            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+            <BorderBox13 class="boxall boxall_1" title="城市综合竞争力排名">
               <div class="title center">
-                <div class="titleRight">产业链图谱</div>
+                <div class="titleRight">城市综合竞争力排名</div>
+              </div>
+              <echarts1></echarts1>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_2" title="实力对标">
+              <div class="title center">
+                <div class="titleRight">实力对标</div>
+              </div>
+              <div class="select">
+                <div class="select_1">
+                  <div class="select_left">指标:</div>
+                  <div class="select_right">
+                    <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>
+                </div>
+                <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" :teleported="false" />
+                  </div>
+                </div>
               </div>
             </BorderBox13>
           </div>
           <div class="thr_2">
-            <BorderBox13 class="boxall boxall_2" title="完整性">
-              <div class="title">
-                <div class="titleRight">完整性</div>
+            <div class="boxall_3" title="新型工业化基地">
+              <map1></map1>
+            </div>
+            <BorderBox13 class="boxall boxall_4" title="产业环境">
+              <div class="title center">
+                <div class="titleRight">产业环境</div>
+              </div>
+              <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>
               </div>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_3" title="安全性">
+          </div>
+          <div class="thr_3">
+            <BorderBox13 class="boxall boxall_5" title="国家产业政策">
               <div class="title center">
-                <div class="titleRight">安全性</div>
+                <div class="titleRight">国家产业政策</div>
               </div>
+              <echarts3></echarts3>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_4" title="韧性">
+            <BorderBox13 class="boxall boxall_6" title="国家产业政策列表">
               <div class="title">
-                <div class="titleRight">韧性</div>
+                <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 class="list">
+                <div class="list_3" v-for="(item, index) in list_2" :key="index">
+                  <div class="list_title">
+                    <span>{{ item.name || '暂无' }}</span>
+                  </div>
+                  <div class="list_person" v-if="item.person">
+                    <span>{{ item.person || '暂无' }}</span>
+                  </div>
+                </div>
               </div>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_6" title="可靠性">
+            <BorderBox13 class="boxall boxall_7" title="产业舆情">
               <div class="title">
-                <div class="titleRight">可靠性</div>
+                <div class="titleRight">产业舆情</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <div class="list">
+                <div class="list_3" v-for="(item, index) in list_3" :key="index">
+                  <div class="list_title">
+                    <span>{{ item.name || '暂无' }}</span>
+                  </div>
+                  <div class="list_person" v-if="item.person">
+                    <span>{{ item.time || '暂无' }}</span>
+                  </div>
+                </div>
+              </div>
             </BorderBox13>
           </div>
         </div>
@@ -89,7 +137,10 @@
 <script setup>
 import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
-// 图片引入
+// 组件
+import echarts1 from './five/echarts1.vue'
+import map1 from './five/map.vue'
+import echarts3 from './five/echarts3.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -110,6 +161,27 @@ const list = ref([
   { label: '营商环境监测', route: '/brain/five' },
   { label: '优质企业梯度培育', route: '/brain/six' }
 ])
+const list_1 = ref([
+  { name: '新型工业基地', total: 0 },
+  { name: '国家级高新区', total: 8 },
+  { name: '国家级经开区', total: 2 },
+  { name: '省经开区', total: 257 },
+  { name: '产业集群', total: 571 },
+  { name: '政策支持', total: 37 }
+])
+// 政策
+const list_2 = ref([
+  { name: '工业和信息化部办公厅关于公布2021年度电信基础…', person: '工业和信息化部办公厅', time: '2024' },
+  { name: '工业和信息化部 财政部关于举办第七届“创客中国…', person: '工业和信息化部', time: '2024' },
+  { name: '十一部门关于开展“携手行动”促进大中小企业验…', person: '工业和信息化部 国家发展和改革委员会科学技术部', time: '2024' }
+])
+// 舆情
+const list_3 = ref([
+  { name: '潍荣动力:(1)不获帮免持续性关连交易(2)中国持…', person: '长春市政策-发改委', time: '2024-6-27' },
+  { name: '丘钛科技:建议分拆昆山丘钛微电子科技股份有限…', person: '长春市政策-发改委', time: '2024-6-27' },
+  { name: '拟定增募资不超40亿元 用于庆鼎精密高阶HDI及SL…', person: '长春市政策-发改委', time: '2024-6-27' },
+  { name: '拟定增募资不超6.47亿元 用于纸聚模塑环保餐具智…', person: '长春市政策-发改委', time: '2024-6-27' }
+])
 // 字典表
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
@@ -231,38 +303,44 @@ const toView = (item) => {
       width: 100%;
       height: 89%;
       .thr_1 {
-        width: 50%;
+        width: 25%;
         height: 100%;
         .boxall_1 {
           width: 100%;
-          height: 100%;
+          height: 65%;
+        }
+        .boxall_2 {
+          width: 100%;
+          height: 35%;
         }
       }
       .thr_2 {
-        display: flex;
-        flex-wrap: wrap;
         width: 50%;
         height: 100%;
-        .boxall_2 {
-          width: 50%;
-          height: 35%;
-        }
         .boxall_3 {
-          width: 50%;
-          height: 35%;
+          width: 100%;
+          height: 65%;
         }
         .boxall_4 {
-          width: 50%;
+          width: 100%;
           height: 35%;
         }
+      }
+      .thr_3 {
+        width: 25%;
+        height: 100%;
         .boxall_5 {
-          width: 50%;
+          width: 100%;
           height: 35%;
         }
         .boxall_6 {
           width: 100%;
           height: 30%;
         }
+        .boxall_7 {
+          width: 100%;
+          height: 35%;
+        }
       }
       .boxall {
         padding: 1.5rem 1rem;
@@ -270,7 +348,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -295,6 +374,56 @@ const toView = (item) => {
               0 1px 0 rgb(56, 201, 226);
           }
         }
+        .select {
+          margin: 0.5rem 0;
+          .select_1 {
+            display: flex;
+            align-items: center;
+            margin: 0 0 0.5rem 0;
+            .select_left {
+              width: 5rem;
+              margin: 0 0.2rem 0 0;
+            }
+          }
+        }
+        .list {
+          margin: 0.5rem 0 0 0;
+          height: 80%;
+          width: 100%;
+          .list_1 {
+            margin: 0.5rem 0 0 0;
+            background: url(/images/brain/title-bg.png);
+            background-size: 100% 100%;
+            height: 48%;
+            width: 25%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 1.4rem;
+          }
+          .list_3 {
+            margin: 0.5rem;
+            .list_title {
+              margin: 0 0 0.6rem 0;
+              font-size: 1.3rem;
+              color: #75f9fd;
+            }
+            .list_person {
+              font-size: 1rem;
+              span {
+                padding: 0.2rem;
+                background: rgba($color: #ffffff, $alpha: 0.1);
+              }
+            }
+          }
+        }
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+        }
       }
     }
   }

src/views/brain/five/echarts1.vue

@@ -0,0 +1,292 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 50vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+import 'echarts-gl'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  var data = [
+    {
+      stock: '长春市',
+      fundPost: '219'
+    },
+    {
+      stock: '吉林市',
+      fundPost: '207'
+    },
+    {
+      stock: '辽源市',
+      fundPost: '197'
+    },
+    {
+      stock: '四平市',
+      fundPost: '188'
+    },
+    {
+      stock: '通化市',
+      fundPost: '170'
+    },
+    {
+      stock: '白山市',
+      fundPost: '169'
+    },
+    {
+      stock: '松原市',
+      fundPost: '150'
+    },
+    {
+      stock: '白城市',
+      fundPost: '147'
+    },
+    {
+      stock: '梅河口市',
+      fundPost: '123'
+    }
+  ]
+
+  function contains(arr, dst) {
+    var i = arr.length
+    while ((i -= 1)) {
+      if (arr[i] == dst) {
+        return i
+      }
+    }
+    return false
+  }
+  var attackSourcesColor = [
+    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+      {
+        offset: 0,
+        color: '#ff134a'
+      },
+      {
+        offset: 1,
+        color: '#ffa995'
+      }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+      {
+        offset: 0,
+        color: '#FA8231'
+      },
+      {
+        offset: 1,
+        color: '#F7CE68'
+      }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+      {
+        offset: 0,
+        color: '#08AEEA'
+      },
+      {
+        offset: 1,
+        color: '#2AF598'
+      }
+    ]),
+    new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+      {
+        offset: 0,
+        color: '#1d7bfa'
+      },
+      {
+        offset: 1,
+        color: '#2EC7CF'
+      }
+    ])
+  ]
+  var attackSourcesColor1 = ['#ff134a', '#FA8231', '#2AF598', '#1d7bfa']
+  var attaData = []
+  var attaName = []
+  data.forEach((it, index) => {
+    //attaData[index] = parseFloat(it.fundPost).toFixed(2);//保留两位小数
+    attaData[index] = it.fundPost
+    attaName[index] = it.stock
+  })
+  var salvProMax = [] //背景按最大值
+  for (let i = 0; i < attaData.length; i++) {
+    salvProMax.push(attaData[0])
+  }
+
+  function attackSourcesDataFmt(sData) {
+    var rank = []
+    sData.forEach(function (item, i) {
+      let itemStyle = {
+        color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
+      }
+      rank.push({
+        value: item,
+        itemStyle: itemStyle
+      })
+    })
+    return rank
+  }
+  var option1 = {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '2%',
+      top: '2%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      //boundaryGap: [0, 0.01],
+      splitLine: 'none',
+      axisTick: 'none',
+      axisLine: 'none',
+      axisLabel: 'none'
+    },
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true, //坐标数据正序显示， false时为倒序
+        offset: 40,
+        axisTick: 'none',
+        axisLine: 'none',
+        axisLabel: 'none',
+        data: attaName,
+        // eslint-disable-next-line no-dupe-keys
+        axisLabel: {
+          padding: [0, 30, 0, 0], //排名与柱形间距
+          rich: {
+            nt1: {
+              color: '#fff',
+              backgroundColor: attackSourcesColor1[0],
+              width: 18,
+              height: 18,
+              fontSize: 14,
+              align: 'center',
+              borderRadius: 100,
+              padding: [2, 1, 2, 1]
+            },
+            nt2: {
+              color: '#fff',
+              backgroundColor: attackSourcesColor1[1],
+              width: 18,
+              height: 18,
+              fontSize: 14,
+              align: 'center',
+              borderRadius: 100,
+              padding: [2, 1, 2, 1]
+            },
+            nt3: {
+              color: '#fff',
+              backgroundColor: attackSourcesColor1[2],
+              width: 18,
+              height: 18,
+              fontSize: 14,
+              align: 'center',
+              borderRadius: 100,
+              padding: [2, 1, 2, 1]
+            },
+            nt: {
+              color: '#fff',
+              backgroundColor: attackSourcesColor1[3],
+              width: 18,
+              height: 18,
+              fontSize: 14,
+              align: 'center',
+              borderRadius: 100,
+              padding: [2, 1, 2, 1]
+            }
+          },
+          formatter: function (value, index) {
+            index = contains(attaName, value) + 1
+            if (index - 1 < 3) {
+              return ['{nt' + index + '|' + index + '}'].join('\n')
+            } else {
+              return ['{nt|' + index + '}'].join('\n')
+            }
+          }
+        }
+      },
+      {
+        //右侧y轴 数据
+        type: 'category',
+        inverse: true,
+        offset: -25, //位置偏移
+        axisTick: 'none',
+        axisLine: 'none',
+        axisLabel: 'none',
+        show: true,
+        // eslint-disable-next-line no-dupe-keys
+        axisLabel: {
+          formatter: '{value}个',
+          textStyle: {
+            color: '#fafafa',
+            fontSize: '16'
+          }
+        },
+        data: attaData
+      },
+      {
+        //左侧y轴 名称
+        type: 'category',
+        offset: 5, //位置偏移
+        inverse: true,
+        position: 'left',
+        axisTick: 'none',
+        axisLine: 'none',
+        axisLabel: 'none',
+        // eslint-disable-next-line no-dupe-keys
+        axisLabel: {
+          inverse: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: '16'
+          }
+        },
+        data: attaName
+      }
+    ],
+    series: [
+      {
+        //横向柱形实际数据块
+        zlevel: 2,
+        name: '',
+        type: 'bar',
+        barWidth: 12,
+        barGap: '100%',
+        animationDuration: 1500,
+        data: attackSourcesDataFmt(attaData),
+        align: 'center',
+        itemStyle: {
+          normal: {
+            barBorderRadius: 10
+          }
+        }
+      },
+      {
+        //横向柱形底色块
+        name: '',
+        type: 'bar',
+        barWidth: 12,
+        barGap: '-100%',
+        data: salvProMax,
+        itemStyle: {
+          normal: {
+            color: '#05325F',
+            barBorderRadius: 30
+          }
+        }
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/brain/five/echarts3.vue

@@ -0,0 +1,102 @@
+<template>
+  <div ref="echarts3" class="echarts3"></div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 95%;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+  const option3 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: 0,
+      top: '8%',
+      right: '3%',
+      bottom: '8%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      axisLabel: {
+        show: true, // 不显示x轴标签
+        lineStyle: { fontSize: '1.2rem', color: '#fff' }
+      },
+      axisLine: {
+        // x轴线的颜色以及宽度
+        show: true,
+        lineStyle: { fontSize: '1.2rem', color: '#fff' }
+      },
+      axisTick: {
+        show: false // x轴刻度线
+      },
+      splitLine: {
+        // x轴网格线
+        show: true,
+        lineStyle: { fontSize: '1.2rem', color: '#fff' }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisTick: { show: false }, // y轴刻度线
+      axisLabel: { fontSize: '1.2rem', color: '#fff' }, // y轴文字的配置
+      axisLine: {
+        //x轴线的颜色
+        show: true,
+        lineStyle: { color: '#fff' }
+      },
+      data: ['办公厅', '财政部', '商务局', '税务局', '国家能源局']
+    },
+    series: [
+      {
+        name: '个数',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'inside', //显示在柱子内部
+            textStyle: { color: '#fff' },
+            formatter: '{c}个' //单位
+          }
+        },
+        itemStyle: {
+          color: {
+            colorStops: [
+              //柱子的渐变色
+              {
+                offset: 0,
+                color: '#00FFFF' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#40E0D0' // 100% 处的颜色
+              }
+            ],
+            global: false
+          }
+        },
+        barWidth: '20rem', //柱子的宽度
+        data: [88, 75, 53, 39, 36]
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/brain/five/map.vue

@@ -0,0 +1,172 @@
+<template>
+  <div ref="map1" class="map1"></div>
+</template>
+<style scoped lang="scss">
+.map1 {
+  height: 80vh;
+  width: 100%;
+}
+</style>
+<script setup>
+// 图片引入
+import domImg from '/images/brain/map-bg.jpeg'
+import * as echarts from 'echarts'
+import chinaJson from '../json/china.json'
+const map1 = ref()
+onMounted(() => {
+  mapView()
+})
+function mapView() {
+  const myChartMap = echarts.init(map1.value)
+  echarts.registerMap('china', chinaJson) //注册可用的地图
+  const optionMap = {
+    tooltip: {
+      trigger: 'item'
+    },
+    geo: [
+      {
+        // 主图
+        map: 'china',
+        zlevel: 0,
+        zoom: 1.2, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderColor: 'rgba(141, 199, 255,1)',
+            borderWidth: 1,
+            areaColor: {
+              type: 'pattern',
+              image: domImg, //配置图片
+              repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+            }
+          },
+          emphasis: {
+            areaColor: '#2d9eff', //悬浮区背景
+            shadowColor: 'rgba(20, 113, 255,1)',
+            shadowOffsetX: -2,
+            shadowOffsetY: 5,
+            shadowBlur: 10
+          }
+        }
+      },
+      //第一层投影
+      {
+        map: 'china',
+        zlevel: -1,
+        zoom: 1.22, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: 'round',
+            borderColor: 'rgba(176,228,252,1)',
+            borderWidth: 3,
+            areaColor: 'rgba(133,188,232,1)',
+            shadowColor: 'rgba(133,188,232,.7)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 25
+          },
+          emphasis: {
+            show: false
+          }
+        }
+      },
+      // 第二层投影
+      {
+        map: 'china',
+        zlevel: -2,
+        zoom: 1.2, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: 'round',
+            areaColor: 'rgba(30,49,105,1)',
+            shadowColor: 'rgba(30,49,105,1)',
+            shadowOffsetX: -5,
+            shadowOffsetY: 6
+          },
+          emphasis: {
+            show: false
+          }
+        }
+      }
+    ],
+    //配置属性
+    series: [
+      {
+        data: [
+          //这是数据，500以内的随机数
+          { name: '北京', value: '100' },
+          { name: '天津', value: Math.round(Math.random() * 500) },
+          { name: '上海', value: Math.round(Math.random() * 500) },
+          { name: '重庆', value: Math.round(Math.random() * 500) },
+          { name: '河北', value: Math.round(Math.random() * 500) },
+          { name: '河南', value: Math.round(Math.random() * 500) },
+          { name: '云南', value: Math.round(Math.random() * 500) },
+          { name: '辽宁', value: Math.round(Math.random() * 500) },
+          { name: '黑龙江', value: Math.round(Math.random() * 500) },
+          { name: '湖南', value: Math.round(Math.random() * 500) },
+          { name: '安徽', value: Math.round(Math.random() * 500) },
+          { name: '山东', value: Math.round(Math.random() * 500) },
+          { name: '新疆', value: Math.round(Math.random() * 500) },
+          { name: '江苏', value: Math.round(Math.random() * 500) },
+          { name: '浙江', value: Math.round(Math.random() * 500) },
+          { name: '江西', value: Math.round(Math.random() * 500) },
+          { name: '湖北', value: Math.round(Math.random() * 500) },
+          { name: '广西', value: Math.round(Math.random() * 500) },
+          { name: '甘肃', value: Math.round(Math.random() * 500) },
+          { name: '山西', value: Math.round(Math.random() * 500) },
+          { name: '内蒙古', value: Math.round(Math.random() * 500) },
+          { name: '陕西', value: Math.round(Math.random() * 500) },
+          { name: '吉林', value: Math.round(Math.random() * 500) },
+          { name: '福建', value: Math.round(Math.random() * 500) },
+          { name: '贵州', value: Math.round(Math.random() * 500) },
+          { name: '广东', value: Math.round(Math.random() * 500) },
+          { name: '青海', value: Math.round(Math.random() * 500) },
+          { name: '西藏', value: Math.round(Math.random() * 500) },
+          { name: '四川', value: Math.round(Math.random() * 500) },
+          { name: '宁夏', value: Math.round(Math.random() * 500) },
+          { name: '海南', value: Math.round(Math.random() * 500) },
+          { name: '台湾', value: Math.round(Math.random() * 500) },
+          { name: '香港', value: Math.round(Math.random() * 500) },
+          { name: '澳门', value: Math.round(Math.random() * 500) }
+        ] //数据
+      }
+    ]
+  }
+  myChartMap.setOption(optionMap)
+  window.addEventListener('resize', function () {
+    myChartMap.resize()
+  })
+}
+</script>

src/views/brain/four.vue

@@ -44,40 +44,119 @@
         </div>
         <div class="thr">
           <div class="thr_1">
-            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
-              <div class="title center">
-                <div class="titleRight">产业链图谱</div>
+            <div class="boxall_1">
+              <BorderBox13 class="boxall boxall_1_1" title="产业分布">
+                <div class="title center">
+                  <div class="titleRight">产业分布</div>
+                </div>
+                <div class="select">
+                  <div class="select_1">
+                    <div class="select_left">指标:</div>
+                    <div class="select_right">
+                      <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>
+                  </div>
+                  <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" :teleported="false" />
+                    </div>
+                  </div>
+                </div>
+                <echarts1></echarts1>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_1_2" title="产业人才">
+                <div class="title center">
+                  <div class="titleRight">产业人才</div>
+                </div>
+                <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>
+                </div>
+              </BorderBox13>
+            </div>
+            <div class="boxall boxall_2" title="关系图谱">
+              <div class="title">
+                <div class="titleRight">关系图谱</div>
               </div>
-            </BorderBox13>
+            </div>
+            <div class="boxall_3">
+              <BorderBox13 class="boxall boxall_3_1" title="院士">
+                <div class="title">
+                  <div class="titleRight">院士</div>
+                  <div class="titleleft">搜索</div>
+                </div>
+                <div class="list flex">
+                  <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>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_3_2" title="成果完成人">
+                <div class="title center">
+                  <div class="titleRight">成果完成人</div>
+                </div>
+              </BorderBox13>
+            </div>
           </div>
           <div class="thr_2">
-            <BorderBox13 class="boxall boxall_2" title="完整性">
+            <BorderBox13 class="boxall boxall_4" title="国内人才分布">
               <div class="title">
-                <div class="titleRight">完整性</div>
+                <div class="titleRight">国内人才分布</div>
               </div>
+              <map1></map1>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_3" title="安全性">
+            <BorderBox13 class="boxall boxall_5" title="上市公司人才">
               <div class="title center">
-                <div class="titleRight">安全性</div>
+                <div class="titleRight">上市公司人才</div>
               </div>
-            </BorderBox13>
-            <BorderBox13 class="boxall boxall_4" title="韧性">
-              <div class="title">
-                <div class="titleRight">韧性</div>
-                <div class="titleLeft">更多</div>
+              <div class="table">
+                <div class="table-head">
+                  <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+                    {{ item.name }}
+                  </div>
+                </div>
+                <div class="table-value">
+                  <div class="value" v-for="(item, index) in list_2" :key="index">
+                    <div class="table-colunm">{{ index + 1 }}</div>
+                    <div class="table-colunm textOne">{{ item.company || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.name || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.gender || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.education || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.title || '暂无' }}</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>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_5" title="稳定性">
-              <div class="title">
-                <div class="titleRight">稳定性</div>
-                <div class="titleLeft">更多</div>
+            <BorderBox13 class="boxall boxall_6" title="职业技术人才">
+              <div class="title center">
+                <div class="titleRight">职业技术人才</div>
               </div>
+              <echarts2></echarts2>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_6" title="可靠性">
+            <BorderBox13 class="boxall boxall_7" title="专家舆情">
               <div class="title">
-                <div class="titleRight">可靠性</div>
+                <div class="titleRight">专家舆情</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <div class="list">
+                <div class="list_3" v-for="(item, index) in list_3" :key="index">
+                  <div class="list_title textOne">
+                    <span>{{ item.name || '暂无' }}</span>
+                  </div>
+                  <div class="list_person" v-if="item.person">
+                    <span>{{ item.person || '暂无' }}</span>
+                  </div>
+                </div>
+              </div>
             </BorderBox13>
           </div>
         </div>
@@ -89,7 +168,10 @@
 <script setup>
 import { BorderBox13 } from '@dataview/datav-vue3'
 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 { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -110,6 +192,45 @@ const list = ref([
   { label: '营商环境监测', route: '/brain/five' },
   { label: '优质企业梯度培育', route: '/brain/six' }
 ])
+const list_1 = ref([
+  { name: '标准专家', total: 24 },
+  { name: '获奖完成人', total: 8 },
+  { name: '院士', total: 2 },
+  { name: '项目完成人', total: 257 }
+])
+const column = ref([
+  { name: '序号', style: { width: '16.5%' }, key: 'key' },
+  { name: '公司名称', style: { width: '16.5%' }, key: 'company' },
+  { name: '姓名', style: { width: '16.5%' }, key: 'name' },
+  { name: '性别', style: { width: '16.5%' }, key: 'gender' },
+  { name: '学历', style: { width: '16.5%' }, key: 'education' },
+  { name: '职务', style: { width: '16.5%' }, key: 'title' }
+])
+// 列表
+const list_2 = ref([
+  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
+  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
+  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' },
+  { company: '长春×××公司', name: '丁建中', gender: '男', education: '硕士', title: '总经理' }
+])
+let skip = 0
+let limit = 15
+const total = ref(0)
+// 科技舆情
+const list_3 = ref([
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' }
+])
+const list_4 = ref([
+  { name: '颜德岳', school: '吉林大学' },
+  { name: '颜德岳', school: '吉林大学' },
+  { name: '颜德岳', school: '吉林大学' },
+  { name: '颜德岳', school: '吉林大学' },
+  { name: '颜德岳', school: '吉林大学' },
+  { name: '颜德岳', school: '吉林大学' }
+])
 // 字典表
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
@@ -227,41 +348,60 @@ const toView = (item) => {
       }
     }
     .thr {
-      display: flex;
       width: 100%;
       height: 89%;
       .thr_1 {
-        width: 50%;
-        height: 100%;
+        display: flex;
+        width: 100%;
+        height: 65%;
         .boxall_1 {
-          width: 100%;
+          width: 25%;
           height: 100%;
+          .boxall_1_1 {
+            width: 100%;
+            height: 60%;
+          }
+          .boxall_1_2 {
+            width: 100%;
+            height: 40%;
+          }
         }
-      }
-      .thr_2 {
-        display: flex;
-        flex-wrap: wrap;
-        width: 50%;
-        height: 100%;
         .boxall_2 {
           width: 50%;
-          height: 35%;
+          height: 100%;
         }
         .boxall_3 {
-          width: 50%;
-          height: 35%;
+          width: 25%;
+          height: 100%;
+          .boxall_3_1 {
+            width: 100%;
+            height: 50%;
+          }
+          .boxall_3_2 {
+            width: 100%;
+            height: 50%;
+          }
         }
+      }
+      .thr_2 {
+        display: flex;
+        width: 100%;
+        height: 35%;
         .boxall_4 {
-          width: 50%;
-          height: 35%;
+          width: 25%;
+          height: 100%;
         }
         .boxall_5 {
-          width: 50%;
-          height: 35%;
+          width: 35%;
+          height: 100%;
         }
         .boxall_6 {
-          width: 100%;
-          height: 30%;
+          width: 20%;
+          height: 100%;
+        }
+        .boxall_7 {
+          width: 20%;
+          height: 100%;
         }
       }
       .boxall {
@@ -270,7 +410,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -295,6 +436,112 @@ const toView = (item) => {
               0 1px 0 rgb(56, 201, 226);
           }
         }
+        .select {
+          margin: 0.5rem 0;
+          .select_1 {
+            display: flex;
+            align-items: center;
+            margin: 0 0 0.5rem 0;
+            .select_left {
+              width: 5rem;
+              margin: 0 0.2rem 0 0;
+            }
+          }
+        }
+        .list {
+          margin: 0.5rem 0 0 0;
+          height: 80%;
+          width: 100%;
+          .list_1 {
+            background: url(/images/brain/title-bg.png);
+            background-size: 100% 100%;
+            height: 45%;
+            width: 25%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 1.2rem;
+          }
+          .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;
+          }
+          .list_3 {
+            width: 100%;
+            .list_title {
+              margin: 0.5rem 0;
+              font-size: 1.2rem;
+              color: #75f9fd;
+            }
+            .list_person {
+              font-size: 1rem;
+            }
+          }
+        }
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: center;
+        }
+        .table {
+          width: 100%;
+          height: 88%;
+          margin: 0.5rem 0;
+          .table-head {
+            width: 100%;
+            height: 15%;
+            display: flex;
+            justify-content: space-between;
+            color: #fff;
+            font-size: 1.2rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 0;
+            .label {
+              text-align: center;
+            }
+          }
+          .table-value {
+            width: 100%;
+            height: 75%;
+            color: #fff;
+            font-size: 1.2rem;
+            .value {
+              display: flex;
+              justify-content: space-between;
+              padding: 0.5rem 0;
+              .table-colunm {
+                width: 16.5%;
+                text-align: center;
+              }
+            }
+            .value:nth-child(2n) {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+          }
+          .total {
+            width: 100%;
+            height: 10%;
+            display: flex;
+            justify-content: center;
+          }
+        }
       }
     }
   }
@@ -338,5 +585,17 @@ const toView = (item) => {
     color: #fff !important;
     margin: 0 0.7vh !important;
   }
+  :deep(.el-pagination.is-background .btn-prev:disabled) {
+    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+    color: #ffffff !important;
+  }
+  :deep(.el-pagination.is-background .btn-next:disabled) {
+    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+    color: #ffffff !important;
+  }
+  :deep(.el-pagination.is-background .el-pager li.is-active) {
+    background-color: #4d5b87 !important;
+    color: #ffffff !important;
+  }
 }
 </style>

src/views/brain/four/echarts1.vue

@@ -0,0 +1,86 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 20vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const labelRight = {
+    position: 'right'
+  }
+  const option1 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: '5%',
+      bottom: '10%'
+    },
+    xAxis: {
+      type: 'value',
+      position: 'bottom',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          fontSize: '1.2rem',
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisLine: { show: false },
+      axisLabel: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+    },
+    series: [
+      {
+        name: 'Cost',
+        type: 'bar',
+        stack: 'Total',
+        label: {
+          show: true,
+          formatter: '{b}'
+        },
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 12, 12],
+            /*--------设置柱形图渐变色 -------------*/
+            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)'
+              }
+            ])
+          }
+        },
+        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]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/brain/four/echarts2.vue

@@ -0,0 +1,86 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 90%;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  echarts2View()
+})
+function echarts2View() {
+  const myChart2 = echarts.init(echarts2.value)
+  const labelRight = {
+    position: 'right'
+  }
+  const option2 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: '5%',
+      bottom: '10%'
+    },
+    xAxis: {
+      type: 'value',
+      position: 'bottom',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          fontSize: '1.2rem',
+          color: '#fff'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisLine: { show: false },
+      axisLabel: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+      data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+    },
+    series: [
+      {
+        name: 'Cost',
+        type: 'bar',
+        stack: 'Total',
+        label: {
+          show: true,
+          formatter: '{b}'
+        },
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 12, 12],
+            /*--------设置柱形图渐变色 -------------*/
+            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)'
+              }
+            ])
+          }
+        },
+        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]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/four/map.vue

@@ -0,0 +1,172 @@
+<template>
+  <div ref="map1" class="map1"></div>
+</template>
+<style scoped lang="scss">
+.map1 {
+  height: 25vh;
+  width: 100%;
+}
+</style>
+<script setup>
+// 图片引入
+import domImg from '/images/brain/map-bg.jpeg'
+import * as echarts from 'echarts'
+import chinaJson from '../json/china.json'
+const map1 = ref()
+onMounted(() => {
+  mapView()
+})
+function mapView() {
+  const myChartMap = echarts.init(map1.value)
+  echarts.registerMap('china', chinaJson) //注册可用的地图
+  const optionMap = {
+    tooltip: {
+      trigger: 'item'
+    },
+    geo: [
+      {
+        // 主图
+        map: 'china',
+        zlevel: 0,
+        zoom: 1.2, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderColor: 'rgba(141, 199, 255,1)',
+            borderWidth: 1,
+            areaColor: {
+              type: 'pattern',
+              image: domImg, //配置图片
+              repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+            }
+          },
+          emphasis: {
+            areaColor: '#2d9eff', //悬浮区背景
+            shadowColor: 'rgba(20, 113, 255,1)',
+            shadowOffsetX: -2,
+            shadowOffsetY: 5,
+            shadowBlur: 10
+          }
+        }
+      },
+      //第一层投影
+      {
+        map: 'china',
+        zlevel: -1,
+        zoom: 1.22, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: 'round',
+            borderColor: 'rgba(176,228,252,1)',
+            borderWidth: 3,
+            areaColor: 'rgba(133,188,232,1)',
+            shadowColor: 'rgba(133,188,232,.7)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 25
+          },
+          emphasis: {
+            show: false
+          }
+        }
+      },
+      // 第二层投影
+      {
+        map: 'china',
+        zlevel: -2,
+        zoom: 1.2, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        center: undefined,
+        show: true,
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: 'round',
+            areaColor: 'rgba(30,49,105,1)',
+            shadowColor: 'rgba(30,49,105,1)',
+            shadowOffsetX: -5,
+            shadowOffsetY: 6
+          },
+          emphasis: {
+            show: false
+          }
+        }
+      }
+    ],
+    //配置属性
+    series: [
+      {
+        data: [
+          //这是数据，500以内的随机数
+          { name: '北京', value: '100' },
+          { name: '天津', value: Math.round(Math.random() * 500) },
+          { name: '上海', value: Math.round(Math.random() * 500) },
+          { name: '重庆', value: Math.round(Math.random() * 500) },
+          { name: '河北', value: Math.round(Math.random() * 500) },
+          { name: '河南', value: Math.round(Math.random() * 500) },
+          { name: '云南', value: Math.round(Math.random() * 500) },
+          { name: '辽宁', value: Math.round(Math.random() * 500) },
+          { name: '黑龙江', value: Math.round(Math.random() * 500) },
+          { name: '湖南', value: Math.round(Math.random() * 500) },
+          { name: '安徽', value: Math.round(Math.random() * 500) },
+          { name: '山东', value: Math.round(Math.random() * 500) },
+          { name: '新疆', value: Math.round(Math.random() * 500) },
+          { name: '江苏', value: Math.round(Math.random() * 500) },
+          { name: '浙江', value: Math.round(Math.random() * 500) },
+          { name: '江西', value: Math.round(Math.random() * 500) },
+          { name: '湖北', value: Math.round(Math.random() * 500) },
+          { name: '广西', value: Math.round(Math.random() * 500) },
+          { name: '甘肃', value: Math.round(Math.random() * 500) },
+          { name: '山西', value: Math.round(Math.random() * 500) },
+          { name: '内蒙古', value: Math.round(Math.random() * 500) },
+          { name: '陕西', value: Math.round(Math.random() * 500) },
+          { name: '吉林', value: Math.round(Math.random() * 500) },
+          { name: '福建', value: Math.round(Math.random() * 500) },
+          { name: '贵州', value: Math.round(Math.random() * 500) },
+          { name: '广东', value: Math.round(Math.random() * 500) },
+          { name: '青海', value: Math.round(Math.random() * 500) },
+          { name: '西藏', value: Math.round(Math.random() * 500) },
+          { name: '四川', value: Math.round(Math.random() * 500) },
+          { name: '宁夏', value: Math.round(Math.random() * 500) },
+          { name: '海南', value: Math.round(Math.random() * 500) },
+          { name: '台湾', value: Math.round(Math.random() * 500) },
+          { name: '香港', value: Math.round(Math.random() * 500) },
+          { name: '澳门', value: Math.round(Math.random() * 500) }
+        ] //数据
+      }
+    ]
+  }
+  myChartMap.setOption(optionMap)
+  window.addEventListener('resize', function () {
+    myChartMap.resize()
+  })
+}
+</script>

src/views/brain/one.vue

@@ -94,24 +94,51 @@
               <div class="title center">
                 <div class="titleRight">安全性</div>
               </div>
+              <echarts3></echarts3>
             </BorderBox13>
             <BorderBox13 class="boxall boxall_4" title="韧性">
               <div class="title">
                 <div class="titleRight">韧性</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <div class="list flex">
+                <div class="list_5" v-for="(item, index) in list_5" :key="index">
+                  <div class="titleList">{{ item.name || '暂无' }}</div>
+                  <div class="num">{{ item.total || '暂无' }}</div>
+                </div>
+              </div>
             </BorderBox13>
             <BorderBox13 class="boxall boxall_5" title="稳定性">
               <div class="title">
                 <div class="titleRight">稳定性</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <echarts2></echarts2>
             </BorderBox13>
             <BorderBox13 class="boxall boxall_6" title="可靠性">
               <div class="title">
                 <div class="titleRight">可靠性</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <div class="list">
+                <div class="list_4" v-for="(item, index) in list_4" :key="index">
+                  <BorderBox10 class="Box10">
+                    <div class="titleList">{{ item.name || '暂无' }}</div>
+                    <div class="num">{{ item.total1 || '暂无' }}</div>
+                  </BorderBox10>
+                  <BorderBox10 class="Box10">
+                    <div class="titleList">总市值</div>
+                    <div class="num">
+                      {{ item.total2 || '暂无' }}
+                      <span>亿元</span>
+                    </div>
+                  </BorderBox10>
+                  <BorderBox10 class="Box10">
+                    <div class="titleList">参与环节</div>
+                    <div class="num">{{ item.total2 || '暂无' }}</div>
+                  </BorderBox10>
+                </div>
+              </div>
             </BorderBox13>
           </div>
         </div>
@@ -121,12 +148,12 @@
 </template>
 
 <script setup>
-import { BorderBox13 } from '@dataview/datav-vue3'
+import { BorderBox13, BorderBox10 } 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 echarts2 from './one/echarts2.vue'
+import echarts3 from './one/echarts3.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -152,12 +179,12 @@ 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 }
+  { name: '国内有厂商环节', value: 176 },
+  { name: '本地有厂商环节', value: 288 }
 ])
 const list_2 = ref([
-  { name: 'A类企业', value: 176 },
-  { name: 'B类企业', value: 288 }
+  { name: '国内有厂商环节', value: 176 },
+  { name: '本地有厂商环节', value: 288 }
 ])
 const horizontal = ref(true)
 const collapsable = ref(true)
@@ -193,6 +220,20 @@ const list_3 = ref({
     { id: 4, pid: 1, label: '业务部' }
   ]
 })
+const list_4 = ref([
+  { name: 'A股上市公司', total1: 88, total2: 17800.26, total3: '108/262' },
+  { name: '科创板上市公司', total1: 10, total2: 1210.67, total3: '34/262' }
+])
+const list_5 = ref([
+  { name: '专利', total: 14701 },
+  { name: '产业化计划', total: 8 },
+  { name: '创新平台', total: 2 },
+  { name: '制定标准', total: 257 },
+  { name: '检验检测平台', total: 571 },
+  { name: '科技成果', total: 37 },
+  { name: '认证认可平台', total: 11 },
+  { name: '重点研发计划', total: 2 }
+])
 // 请求
 onMounted(async () => {
   getCity().then((response) => {
@@ -349,7 +390,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -381,7 +423,7 @@ const toView = (item) => {
           height: 96%;
         }
         .round {
-          margin: 0.2rem 0 0 0;
+          margin: 0.5rem 0 0 0;
           padding: 0 0.5rem;
           .round_1 {
             position: relative;
@@ -405,7 +447,7 @@ const toView = (item) => {
             }
             .round_center {
               position: absolute;
-              top: -2rem;
+              top: -3.5rem;
               left: 0;
               height: 100%;
               width: 100%;
@@ -415,6 +457,52 @@ const toView = (item) => {
             }
           }
         }
+        .list {
+          margin: 0.5rem 0 0 0;
+          height: 80%;
+          width: 100%;
+          .list_4 {
+            display: flex;
+            justify-content: space-between;
+            height: 47%;
+            width: 96%;
+            margin: 0.5rem 1rem;
+            .Box10 {
+              width: 30%;
+              height: 100%;
+              padding: 1rem;
+              text-align: center;
+              font-size: 1.3rem;
+              .titleList {
+                margin: 0 0 0.5rem 0;
+              }
+              .num {
+                color: #54bcbd;
+                span {
+                  color: #ffffff;
+                  font-size: 1rem;
+                }
+              }
+            }
+          }
+          .list_5 {
+            background: url(/images/brain/title-bg.png);
+            background-size: 100% 100%;
+            height: 45%;
+            width: 25%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 1rem;
+          }
+        }
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+        }
       }
     }
   }

src/views/brain/one/echart.js

@@ -86,10 +86,11 @@ const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, op
       },
       subtextStyle: {
         color: '#fff' // 将 "Fake Data" 文字颜色设置为白色
-      }
+      },
+      show: false
     },
     legend: {
-      show: true,
+      show: false,
       data: legendData,
       orient: 'vertical',
       right: '35%',

src/views/brain/one/echarts1.vue

@@ -117,12 +117,6 @@ const initChart = () => {
     data: optionData.value,
     itemStyle: {
       opacity: 0
-    },
-    title: {
-      show: false // 不显示标题
-    },
-    legend: {
-      show: false // 不显示图例
     }
   })
   echart.value.setOption(option)

src/views/brain/one/echarts2.vue

@@ -0,0 +1,90 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 90%;
+  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 = {
+    title: {
+      text: 'Funnel',
+      show: false
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c}%'
+    },
+    toolbox: {
+      feature: {
+        dataView: { readOnly: false },
+        restore: {},
+        saveAsImage: {}
+      }
+    },
+    color: ['#8A2BE2', '#7B68EE', '#6495ED', '#00BFFF', '#00FFFF', '#40E0D0'],
+    legend: {
+      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
+      show: false
+    },
+    series: [
+      {
+        name: 'Funnel',
+        type: 'funnel',
+        left: '10%',
+        top: '5%',
+        bottom: '5%',
+        width: '80%',
+        min: 0,
+        max: 100,
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'ascending',
+        gap: 1,
+        label: {
+          show: true,
+          position: 'inside',
+          color: '#fff'
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+            color: '#fff'
+          }
+        },
+        data: [
+          { value: 60, name: '中国战略性创新企业' },
+          { value: 40, name: '中国企业500强' },
+          { value: 20, name: '上市企业' },
+          { value: 80, name: '单项冠军' },
+          { value: 100, name: '高新技术企业' }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/one/echarts3.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="echarts3" class="echarts3"></div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 25vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+
+  var data = [
+    {
+      name: '国内自主供奉率',
+      value: 84
+    },
+    {
+      name: '吉林省参与率',
+      value: 40
+    }
+  ]
+
+  var seriesArr = []
+  var colors = [
+    ['#389af4', '#dfeaff'],
+    ['#ff8c37', '#ffdcc3']
+  ]
+  data.forEach(function (item, index) {
+    seriesArr.push({
+      name: item.name,
+      type: 'pie',
+      clockWise: false,
+      radius: ['55%', '65%'],
+      itemStyle: {
+        normal: {
+          color: colors[index][0],
+          shadowColor: colors[index][0],
+          shadowBlur: 0,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          }
+        }
+      },
+      hoverAnimation: false,
+      center: [index * 40 + 30 + '%', '50%'],
+      data: [
+        {
+          value: item.value,
+          label: {
+            normal: {
+              formatter: function (params) {
+                return item.name + '\n\n' + params.value + '%'
+              },
+              position: 'center',
+              show: true,
+              textStyle: {
+                fontSize: '1.2rem',
+                color: colors[index][0]
+              }
+            }
+          }
+        },
+        {
+          value: 100 - item.value,
+          name: 'invisible',
+          itemStyle: {
+            normal: {
+              color: colors[index][1]
+            },
+            emphasis: {
+              color: colors[index][1]
+            }
+          }
+        }
+      ]
+    })
+  })
+
+  var option3 = {
+    series: seriesArr
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/brain/six.vue

@@ -44,41 +44,69 @@
         </div>
         <div class="thr">
           <div class="thr_1">
-            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+            <BorderBox13 class="boxall boxall_1" title="产业分布">
               <div class="title center">
-                <div class="titleRight">产业链图谱</div>
+                <div class="titleRight">产业分布</div>
               </div>
+              <echarts1></echarts1>
             </BorderBox13>
           </div>
           <div class="thr_2">
-            <BorderBox13 class="boxall boxall_2" title="完整性">
+            <BorderBox13 class="boxall boxall_2" title="重点培育企业">
               <div class="title">
-                <div class="titleRight">完整性</div>
+                <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 class="table">
+                <div class="table-head">
+                  <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+                    {{ item.name }}
+                  </div>
+                </div>
+                <div class="table-value">
+                  <div class="value" v-for="(item, index) in list_1" :key="index">
+                    <div class="table-colunm">{{ index + 1 }}</div>
+                    <div class="table-colunm textOne">{{ item.name || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.type || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.money || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.project || '暂无' }}</div>
+                    <div class="table-colunm textOne">{{ item.industry || '暂无' }}</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>
             </BorderBox13>
+            <div class="boxall_3">
+              <BorderBox13 class="boxall boxall_3_1" title="实力对标">
+                <div class="title center">
+                  <div class="titleRight">实力对标</div>
+                </div>
+                <div class="select">
+                  <div class="select_1">
+                    <div class="select_left">实力侧面：</div>
+                    <div class="select_right">
+                      <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>
+                  </div>
+                  <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" :teleported="false" />
+                    </div>
+                  </div>
+                </div>
+                <echarts3></echarts3>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_3_2" title="优质企业结构">
+                <div class="title center">
+                  <div class="titleRight">优质企业结构</div>
+                </div>
+                <echarts2></echarts2>
+              </BorderBox13>
+            </div>
           </div>
         </div>
       </div>
@@ -90,6 +118,10 @@
 import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
 // 图片引入
+// 组件
+import echarts1 from './six/echarts1.vue'
+import echarts2 from './six/echarts2.vue'
+import echarts3 from './six/echarts3.vue'
 import { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -110,6 +142,29 @@ const list = ref([
   { label: '营商环境监测', route: '/brain/five' },
   { label: '优质企业梯度培育', route: '/brain/six' }
 ])
+const column = ref([
+  { name: '序号', style: { width: '16.5%' }, key: 'key' },
+  { name: '公司名称', style: { width: '16.5%' }, key: 'name' },
+  { name: '上市板块', style: { width: '16.5%' }, key: 'type' },
+  { name: '市值', style: { width: '16.5%' }, key: 'money' },
+  { name: '重大项目数', style: { width: '16.5%' }, key: 'project' },
+  { name: '产业化项目数', style: { width: '16.5%' }, key: 'industry' }
+])
+// 列表
+const list_1 = ref([
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' },
+  { name: '长春×××公司', type: '高新技术企业', plate: '深交所主板', money: '1134.28', project: '5', industry: '56' }
+])
+let skip = 0
+let limit = 15
+const total = ref(0)
 // 字典表
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
@@ -120,6 +175,7 @@ onMounted(async () => {
     cityList.value = response.address
   })
 })
+const search = async (query = { skip: 0, limit }) => {}
 // 查看
 const toView = (item) => {
   router.push({ path: item.route }).then(() => {
@@ -127,6 +183,16 @@ const toView = (item) => {
     location.reload()
   })
 }
+const currentPage = ref(1)
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .brainOne {
@@ -239,29 +305,24 @@ const toView = (item) => {
         }
       }
       .thr_2 {
-        display: flex;
-        flex-wrap: wrap;
         width: 50%;
         height: 100%;
         .boxall_2 {
-          width: 50%;
-          height: 35%;
+          width: 100%;
+          height: 55%;
         }
         .boxall_3 {
-          width: 50%;
-          height: 35%;
-        }
-        .boxall_4 {
-          width: 50%;
-          height: 35%;
-        }
-        .boxall_5 {
-          width: 50%;
-          height: 35%;
-        }
-        .boxall_6 {
+          display: flex;
           width: 100%;
-          height: 30%;
+          height: 45%;
+          .boxall_3_1 {
+            width: 50%;
+            height: 100%;
+          }
+          .boxall_3_2 {
+            width: 50%;
+            height: 100%;
+          }
         }
       }
       .boxall {
@@ -270,7 +331,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -295,6 +357,61 @@ const toView = (item) => {
               0 1px 0 rgb(56, 201, 226);
           }
         }
+        .select {
+          width: 100%;
+          height: 20%;
+          .select_1 {
+            display: flex;
+            align-items: center;
+            margin: 0 0 0.5rem 0;
+            .select_left {
+              width: 5rem;
+              margin: 0 0.2rem 0 0;
+            }
+          }
+        }
+        .table {
+          width: 100%;
+          height: 88%;
+          margin: 0.5rem 0;
+          .table-head {
+            width: 100%;
+            height: 10%;
+            display: flex;
+            justify-content: space-between;
+            color: #fff;
+            font-size: 1.2rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 0;
+            .label {
+              text-align: center;
+            }
+          }
+          .table-value {
+            width: 100%;
+            height: 86%;
+            color: #fff;
+            font-size: 1.2rem;
+            .value {
+              display: flex;
+              justify-content: space-between;
+              padding: 0.5rem 0;
+              .table-colunm {
+                width: 16.5%;
+                text-align: center;
+              }
+            }
+            .value:nth-child(2n) {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+          }
+          .total {
+            width: 100%;
+            height: 5%;
+            display: flex;
+            justify-content: center;
+          }
+        }
       }
     }
   }
@@ -338,5 +455,17 @@ const toView = (item) => {
     color: #fff !important;
     margin: 0 0.7vh !important;
   }
+  :deep(.el-pagination.is-background .btn-prev:disabled) {
+    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+    color: #ffffff !important;
+  }
+  :deep(.el-pagination.is-background .btn-next:disabled) {
+    background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+    color: #ffffff !important;
+  }
+  :deep(.el-pagination.is-background .el-pager li.is-active) {
+    background-color: #4d5b87 !important;
+    color: #ffffff !important;
+  }
 }
 </style>

src/views/brain/six/echarts2.vue

@@ -0,0 +1,90 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 90%;
+  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 = {
+    title: {
+      text: 'Funnel',
+      show: false
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c}%'
+    },
+    toolbox: {
+      feature: {
+        dataView: { readOnly: false },
+        restore: {},
+        saveAsImage: {}
+      }
+    },
+    color: ['#8A2BE2', '#7B68EE', '#6495ED', '#00BFFF', '#00FFFF', '#40E0D0'],
+    legend: {
+      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
+      show: false
+    },
+    series: [
+      {
+        name: 'Funnel',
+        type: 'funnel',
+        left: '10%',
+        top: '5%',
+        bottom: '5%',
+        width: '80%',
+        min: 0,
+        max: 100,
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'ascending',
+        gap: 1,
+        label: {
+          show: true,
+          position: 'inside',
+          color: '#fff'
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+            color: '#fff'
+          }
+        },
+        data: [
+          { value: 60, name: '中国战略性创新企业' },
+          { value: 40, name: '中国企业500强' },
+          { value: 20, name: '上市企业' },
+          { value: 80, name: '单项冠军' },
+          { value: 100, name: '高新技术企业' }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/six/echarts3.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="echarts3" class="echarts3"></div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 75%;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+  const option3 = {
+    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+    radar: [
+      {
+        indicator: [{ text: '中国战略性创新企业' }, { text: '中国企业500强' }, { text: '单项冠军' }, { text: '高新技术企业' }, { text: '上市企业' }],
+        center: ['50%', '50%'],
+        radius: '80%',
+        startAngle: 90,
+        splitNumber: 4,
+        shape: 'circle',
+        axisName: {
+          formatter: '【{value}】',
+          color: '#fff'
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+            shadowColor: 'rgba(0, 0, 0, 0.2)',
+            shadowBlur: 10
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 4
+          }
+        },
+        data: [
+          {
+            value: [100, 8, 0.4, -80, 2000],
+            name: 'Data A'
+          }
+        ]
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/brain/thr.vue

@@ -205,7 +205,7 @@
                 <div class="titleLeft">更多</div>
               </div>
               <div class="list" v-for="(item, index) in list_5" :key="index">
-                <div class="list_4">
+                <div class="list_4 textOne">
                   <span>{{ item.name || '暂无' }}</span>
                 </div>
                 <div class="list_3" v-if="item.person">
@@ -492,7 +492,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -522,7 +523,7 @@ const toView = (item) => {
           .select_1 {
             display: flex;
             align-items: center;
-            margin: 0.5rem 0;
+            margin: 0 0 0.5rem 0;
             .select_left {
               width: 5rem;
               margin: 0 0.2rem 0 0;

src/views/brain/two.vue

@@ -20,64 +20,166 @@
         </div>
         <div class="two">
           <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' }" :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="请选择" :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>
+            <BorderBox13 class="boxall boxall_1" title="重点产业链分布">
+              <div class="title center">
+                <div class="titleRight">重点产业链分布</div>
+              </div>
+              <div class="select">
+                <div class="select_1">
+                  <div class="select_left">指标:</div>
+                  <div class="select_right">
+                    <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>
+                </div>
+                <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" :teleported="false" />
+                  </div>
+                </div>
+              </div>
+              <echarts1></echarts1>
+            </BorderBox13>
+            <div class="boxall_2">
+              <BorderBox13 class="boxall boxall_2_1" title="GDP与总营收比值">
+                <div class="title center">
+                  <div class="titleRight">GDP与总营收比值</div>
+                </div>
+                <echarts2></echarts2>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_2_2" title="融资统计">
+                <div class="title center">
+                  <div class="titleRight">融资统计</div>
+                </div>
+                <echarts3></echarts3>
+              </BorderBox13>
             </div>
+            <BorderBox13 class="boxall boxall_3" title="监管异动">
+              <div class="title center">
+                <div class="titleRight">监管异动</div>
+              </div>
+              <div class="list flex">
+                <div class="list_5" v-for="(item, index) in list_1" :key="index">
+                  <div class="titleList">{{ item.name || '暂无' }}</div>
+                  <div class="num">{{ item.total || '0' }}</div>
+                </div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="百强市指标对比">
+              <div class="title center">
+                <div class="titleRight">百强市指标对比</div>
+              </div>
+              <div class="select">
+                <div class="select_1">
+                  <div class="select_left">对比目标:</div>
+                  <div class="select_right">
+                    <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>
+                </div>
+              </div>
+              <echarts4></echarts4>
+            </BorderBox13>
           </div>
-          <div class="two_1">
-            <div class="two_left">产业链：</div>
-            <div class="two_right">
-              <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 class="two_2">
+            <div class="search">
+              <div class="search_1">
+                <div class="two_left">当前区域：</div>
+                <div class="two_right">
+                  <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :teleported="false" :options="cityList" style="width: 14rem" />
+                </div>
+              </div>
+              <div class="search_1">
+                <div class="two_left">当前产业：</div>
+                <div class="two_right">
+                  <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>
+              </div>
+              <div class="search_1">
+                <div class="two_left">产业链：</div>
+                <div class="two_right">
+                  <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>
-        </div>
-        <div class="thr">
-          <div class="thr_1">
-            <BorderBox13 class="boxall boxall_1" title="产业链图谱">
+            <BorderBox13 class="boxall boxall_5" title="上市公司区域分布">
               <div class="title center">
-                <div class="titleRight">产业链图谱</div>
+                <div class="titleRight">上市公司区域分布</div>
               </div>
             </BorderBox13>
+            <div class="boxall_6">
+              <BorderBox13 class="boxall boxall_6_1" title="上市公司上市板块分布">
+                <div class="title center">
+                  <div class="titleRight">上市公司上市板块分布</div>
+                </div>
+                <div class="select">
+                  <div class="select_1">
+                    <div class="select_left">市值:</div>
+                    <div class="select_right">
+                      <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>
+                  </div>
+                </div>
+                <echarts5></echarts5>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_6_2" title="产业与所有制形式分布">
+                <div class="title center">
+                  <div class="titleRight">产业与所有制形式分布</div>
+                </div>
+                <echarts6></echarts6>
+              </BorderBox13>
+              <BorderBox13 class="boxall boxall_6_3" title="上市公司规模分布">
+                <div class="title center">
+                  <div class="titleRight">上市公司规模分布</div>
+                </div>
+                <echarts7></echarts7>
+              </BorderBox13>
+            </div>
           </div>
-          <div class="thr_2">
-            <BorderBox13 class="boxall boxall_2" title="完整性">
-              <div class="title">
-                <div class="titleRight">完整性</div>
+          <div class="two_3">
+            <BorderBox13 class="boxall boxall_7" title="金融指标详细KPI">
+              <div class="title center">
+                <div class="titleRight">金融指标详细KPI</div>
               </div>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_3" title="安全性">
+            <BorderBox13 class="boxall boxall_8" title="各区域【总利润】">
               <div class="title center">
-                <div class="titleRight">安全性</div>
+                <div class="titleRight">各区域【总利润】</div>
               </div>
+              <echarts8></echarts8>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_4" title="韧性">
-              <div class="title">
-                <div class="titleRight">韧性</div>
-                <div class="titleLeft">更多</div>
+            <BorderBox13 class="boxall boxall_9" title="【总利润】年度增加值与同比增长率">
+              <div class="title center">
+                <div class="titleRight">【总利润】年度增加值与同比增长率</div>
               </div>
+              <echarts9></echarts9>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_5" title="稳定性">
-              <div class="title">
-                <div class="titleRight">稳定性</div>
-                <div class="titleLeft">更多</div>
+            <BorderBox13 class="boxall boxall_10" title="【总利润】top10企业及占比">
+              <div class="title center">
+                <div class="titleRight">【总利润】top10企业及占比</div>
               </div>
+              <echarts10></echarts10>
             </BorderBox13>
-            <BorderBox13 class="boxall boxall_6" title="可靠性">
+            <BorderBox13 class="boxall boxall_11" title="关键舆作">
               <div class="title">
-                <div class="titleRight">可靠性</div>
+                <div class="titleRight">关键舆作</div>
                 <div class="titleLeft">更多</div>
               </div>
+              <div class="list">
+                <div class="list_3 textOne" v-for="(item, index) in list_3" :key="index">
+                  <span>{{ item.time || '暂无' }}</span>
+                  <span>{{ item.name || '暂无' }}</span>
+                </div>
+              </div>
             </BorderBox13>
           </div>
         </div>
@@ -89,7 +191,17 @@
 <script setup>
 import { BorderBox13 } from '@dataview/datav-vue3'
 import myMain from '@/components/dataV/myMain.vue'
-// 图片引入
+// 组件
+import echarts1 from './two/echarts1.vue'
+import echarts2 from './two/echarts2.vue'
+import echarts3 from './two/echarts3.vue'
+import echarts4 from './two/echarts4.vue'
+import echarts5 from './two/echarts5.vue'
+import echarts6 from './two/echarts6.vue'
+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 { UserStore } from '@/store/user'
 import { getCity } from '@/utils/city'
 const userStore = UserStore()
@@ -110,6 +222,18 @@ const list = ref([
   { label: '营商环境监测', route: '/brain/five' },
   { label: '优质企业梯度培育', route: '/brain/six' }
 ])
+const list_1 = ref([
+  { name: '行政处罚', total: 0 },
+  { name: '警示函', total: 0 },
+  { name: '拟退市', total: 0 }
+])
+// 科技舆情
+const list_3 = ref([
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' },
+  { name: '长春市发展改革委关于长春慧天云网新能源开始实时改革…', person: '长春市政策-发改委', time: '2024-06-27' }
+])
 // 字典表
 const cityList = ref([])
 const industryList = ref([{ label: '智能网联汽车', value: '0' }])
@@ -213,55 +337,100 @@ const toView = (item) => {
         letter-spacing: 0.2em;
       }
     }
+
     .two {
-      width: 100%;
-      height: 5%;
-      display: flex;
-      align-items: center;
-      color: #ffffff;
-      font-size: 1.2rem;
-      .two_1 {
-        display: flex;
-        align-items: center;
-        margin: 0 0 0 1rem;
-      }
-    }
-    .thr {
       display: flex;
       width: 100%;
-      height: 89%;
-      .thr_1 {
-        width: 50%;
+      height: 94%;
+      .two_1 {
+        width: 25%;
         height: 100%;
         .boxall_1 {
           width: 100%;
-          height: 100%;
+          height: 30%;
         }
-      }
-      .thr_2 {
-        display: flex;
-        flex-wrap: wrap;
-        width: 50%;
-        height: 100%;
         .boxall_2 {
-          width: 50%;
-          height: 35%;
+          display: flex;
+          width: 100%;
+          height: 25%;
+          .boxall_2_1 {
+            width: 50%;
+            height: 100%;
+          }
+          .boxall_2_2 {
+            width: 50%;
+            height: 100%;
+          }
         }
         .boxall_3 {
-          width: 50%;
-          height: 35%;
+          width: 100%;
+          height: 20%;
         }
         .boxall_4 {
-          width: 50%;
-          height: 35%;
+          width: 100%;
+          height: 25%;
+        }
+      }
+      .two_2 {
+        width: 50%;
+        height: 100%;
+        .search {
+          width: 100%;
+          height: 5%;
+          display: flex;
+          align-items: center;
+          color: #ffffff;
+          font-size: 1.2rem;
+          .search_1 {
+            display: flex;
+            align-items: center;
+            margin: 0 0 0 1rem;
+          }
         }
         .boxall_5 {
-          width: 50%;
-          height: 35%;
+          width: 100%;
+          height: 65%;
         }
         .boxall_6 {
+          display: flex;
           width: 100%;
           height: 30%;
+          .boxall_6_1 {
+            width: 30%;
+            height: 100%;
+          }
+          .boxall_6_2 {
+            width: 30%;
+            height: 100%;
+          }
+          .boxall_6_3 {
+            width: 40%;
+            height: 100%;
+          }
+        }
+      }
+      .two_3 {
+        width: 25%;
+        height: 100%;
+        .boxall_7 {
+          width: 100%;
+          height: 20%;
+        }
+        .boxall_8 {
+          width: 100%;
+          height: 20%;
+        }
+        .boxall_9 {
+          width: 100%;
+          height: 20%;
+        }
+        .boxall_10 {
+          width: 100%;
+          height: 20%;
+        }
+        .boxall_11 {
+          width: 100%;
+          height: 20%;
         }
       }
       .boxall {
@@ -270,7 +439,8 @@ const toView = (item) => {
           display: flex;
           justify-content: space-between;
           background-color: rgba($color: #18459d, $alpha: 0.3);
-          padding: 0.8rem;
+          padding: 0.4rem;
+          font-size: 1.2rem;
           border-bottom: 0.3rem solid #18459d;
           -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
         }
@@ -295,6 +465,51 @@ const toView = (item) => {
               0 1px 0 rgb(56, 201, 226);
           }
         }
+        .select {
+          margin: 0.5rem 0;
+          .select_1 {
+            display: flex;
+            align-items: center;
+            margin: 0 0 0.5rem 0;
+            .select_left {
+              width: 5rem;
+              margin: 0 0.2rem 0 0;
+            }
+          }
+        }
+        .list {
+          margin: 0.5rem 0 0 0;
+          height: 80%;
+          width: 100%;
+          .list_3 {
+            width: 100%;
+            height: 18%;
+            border-left: 0.5rem solid#0b3571;
+            margin: 0.5rem 0 0 0;
+            font-size: 1.2rem;
+            span {
+              margin: 0 0.2rem;
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+          }
+          .list_5 {
+            background: url(/images/brain/title-bg.png);
+            background-size: 100% 100%;
+            height: 100%;
+            width: 33%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            color: #ffffff;
+            font-size: 1.3rem;
+          }
+        }
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+        }
       }
     }
   }

src/views/brain/two/echarts1.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 12vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    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'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        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)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/brain/two/echarts10.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts10" class="echarts10"></div>
+</template>
+<style scoped lang="scss">
+.echarts10 {
+  height: 13vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts10 = ref()
+onMounted(() => {
+  echarts10View()
+})
+function echarts10View() {
+  const myChart10 = echarts.init(echarts10.value)
+  const option10 = {
+    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'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        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)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart10.setOption(option10)
+  window.addEventListener('resize', function () {
+    myChart10.resize()
+  })
+}
+</script>

src/views/brain/two/echarts2.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 18vh;
+  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 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        avoidLabelOverlap: false,
+        color: ['#1E90FF', '#00FFFF'],
+        label: {
+          position: 'center',
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '占比30%' },
+          { value: 735, name: '占比40%' }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/two/echarts3.vue

@@ -0,0 +1,54 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 18vh;
+  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 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        color: ['#1E90FF', '#00FFFF', '#B0E0E6', '#00BFFF'],
+        avoidLabelOverlap: false,
+        label: {
+          alignTo: 'labelLine',
+          lineHeight: 15,
+          edgeDistance: 10,
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '软件' },
+          { value: 735, name: '互联网' },
+          { value: 1048, name: '大数据' },
+          { value: 735, name: '通信' }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/two/echarts4.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="echarts4" class="echarts4"></div>
+</template>
+<style scoped lang="scss">
+.echarts4 {
+  height: 65%;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  echarts4View()
+})
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+    radar: [
+      {
+        indicator: [{ text: '总利润(亿)' }, { text: '总营收(亿)' }, { text: '员工数' }, { text: '投入研发(亿)' }, { text: '总利税(亿)' }],
+        center: ['50%', '50%'],
+        radius: '80%',
+        startAngle: 90,
+        splitNumber: 4,
+        shape: 'circle',
+        axisName: {
+          formatter: '【{value}】',
+          color: '#fff'
+        },
+        splitArea: {
+          areaStyle: {
+            color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+            shadowColor: 'rgba(0, 0, 0, 0.2)',
+            shadowBlur: 10
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(211, 253, 250, 0.8)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'radar',
+        emphasis: {
+          lineStyle: {
+            width: 4
+          }
+        },
+        data: [
+          {
+            value: [100, 8, 0.4, -80, 2000],
+            name: 'Data A'
+          }
+        ]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/brain/two/echarts5.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="echarts5" class="echarts5"></div>
+</template>
+<style scoped lang="scss">
+.echarts5 {
+  height: 13vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts5 = ref()
+onMounted(() => {
+  echarts5View()
+})
+function echarts5View() {
+  const myChart5 = echarts.init(echarts5.value)
+  const option5 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['75%', '90%'],
+        avoidLabelOverlap: false,
+        color: ['#1E90FF', '#00FFFF'],
+        label: {
+          position: 'center',
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '占比30%' },
+          { value: 735, name: '占比40%' }
+        ]
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+  window.addEventListener('resize', function () {
+    myChart5.resize()
+  })
+}
+</script>

src/views/brain/two/echarts6.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="echarts6" class="echarts6"></div>
+</template>
+<style scoped lang="scss">
+.echarts6 {
+  height: 22vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts6 = ref()
+onMounted(() => {
+  echarts6View()
+})
+function echarts6View() {
+  const myChart6 = echarts.init(echarts6.value)
+  const option6 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        color: ['#1E90FF', '#00FFFF', '#B0E0E6', '#00BFFF'],
+        avoidLabelOverlap: false,
+        label: {
+          alignTo: 'labelLine',
+          lineHeight: 15,
+          edgeDistance: 10,
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '其他产业' },
+          { value: 735, name: '第一产业' },
+          { value: 1048, name: '第二产业' }
+        ]
+      }
+    ]
+  }
+  myChart6.setOption(option6)
+  window.addEventListener('resize', function () {
+    myChart6.resize()
+  })
+}
+</script>

src/views/brain/two/echarts7.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts7" class="echarts7"></div>
+</template>
+<style scoped lang="scss">
+.echarts7 {
+  height: 22vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts7 = ref()
+onMounted(() => {
+  echarts7View()
+})
+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'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        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)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart7.setOption(option7)
+  window.addEventListener('resize', function () {
+    myChart7.resize()
+  })
+}
+</script>

src/views/brain/two/echarts8.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts8" class="echarts8"></div>
+</template>
+<style scoped lang="scss">
+.echarts8 {
+  height: 13vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts8 = ref()
+onMounted(() => {
+  echarts8View()
+})
+function echarts8View() {
+  const myChart8 = echarts.init(echarts8.value)
+  const option8 = {
+    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'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        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)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart8.setOption(option8)
+  window.addEventListener('resize', function () {
+    myChart8.resize()
+  })
+}
+</script>

src/views/brain/two/echarts9.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts9" class="echarts9"></div>
+</template>
+<style scoped lang="scss">
+.echarts9 {
+  height: 13vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts9 = ref()
+onMounted(() => {
+  echarts9View()
+})
+function echarts9View() {
+  const myChart9 = echarts.init(echarts9.value)
+  const option9 = {
+    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'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        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)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart9.setOption(option9)
+  window.addEventListener('resize', function () {
+    myChart9.resize()
+  })
+}
+</script>