修改孵化大脑

src/layout/index.vue

@@ -263,7 +263,7 @@ provide('selectMenu', selectMenu)
     }
   }
   .center {
-    min-height: 77vh;
+    min-height: 67.7vh;
   }
   .bottom {
     width: 100%;

src/views/hatch/index.vue

@@ -1,122 +1,122 @@
 <template>
-  <!-- <myMain> -->
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <div class="head">
-          <div class="head_1">产学研用平台孵化大脑</div>
-          <div class="head_2" id="showTime">{{ formattedTime }}</div>
-        </div>
-        <div class="center">
-          <ul class="clearfix">
-            <li>
-              <div class="boxall">
-                <div class="titleall">模块标题</div>
-                <div class="list">
-                  <div class="list_1" v-for="i in listOne" :key="i.value">
-                    <h2>{{ i.value }}</h2>
-                    <span>{{ i.label }}</span>
+  <myMain>
+    <div class="main">
+      <el-row>
+        <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+          <div class="head">
+            <div class="head_1">产学研用平台孵化大脑</div>
+            <div class="head_2" id="showTime">{{ formattedTime }}</div>
+          </div>
+          <div class="center">
+            <ul class="clearfix">
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
                   </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-            <li>
-              <div class="barnav">
-                <div class="top">
-                  <div class="list" v-for="i in listTwo" :key="i.value">
-                    <div class="value">{{ i.value }}</div>
+              </li>
+              <li>
+                <div class="barnav">
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="value">{{ i.value }}</div>
+                    </div>
                   </div>
-                </div>
-                <div class="top">
-                  <div class="list" v-for="i in listTwo" :key="i.value">
-                    <div class="label">{{ i.label }}</div>
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="label">{{ i.label }}</div>
+                    </div>
                   </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-              <div class="mapbox">
-                <map1 class="map"></map1>
-              </div>
-            </li>
-            <li>
-              <div class="boxall">
-                <div class="titleall">模块标题</div>
-                <div class="list">
-                  <div class="list_1" v-for="i in listOne" :key="i.value">
-                    <h2>{{ i.value }}</h2>
-                    <span>{{ i.label }}</span>
-                  </div>
+                <div class="mapbox">
+                  <map1 class="map"></map1>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-          </ul>
-          <ul class="clearfix">
-            <li>
-              <div class="boxall">
-                <div class="titleall">模块标题</div>
-                <div class="list thr">
-                  <div class="list_1" v-for="i in listThr" :key="i.value">
-                    <h2>{{ i.value }}</h2>
-                    <span>{{ i.label }}</span>
+              </li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
                   </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-            <li></li>
-            <li>
-              <div class="boxall">
-                <div class="titleall">优质企业</div>
-                <div class="list four">
-                  <vue3-seamless-scroll
-                    :list="listFour"
-                    :hover="true"
-                    :step="0.2"
-                    :wheel="true"
-                    :isWatch="true"
-                    class="scroll"
-                  >
-                    <div class="wrap" v-for="(item, index) in listFour" :key="index">
-                      <div class="other">{{ item.name }}</div>
-                      <div class="other">{{ item.number }}人</div>
-                      <div class="other">{{ item.time }}</div>
+              </li>
+            </ul>
+            <ul class="clearfix">
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list thr">
+                    <div class="list_1" v-for="i in listThr" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
                     </div>
-                  </vue3-seamless-scroll>
+                  </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-          </ul>
-          <ul class="clearfix" style="display: flex; justify-content: space-between">
-            <li style="width: 49.5%">
-              <div class="boxall">
-                <div class="titleall">模块标题</div>
-                <div class="five">
-                  <echarts1></echarts1>
+              </li>
+              <li></li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">优质企业</div>
+                  <div class="list four">
+                    <vue3-seamless-scroll
+                      :list="listFour"
+                      :hover="true"
+                      :step="0.2"
+                      :wheel="true"
+                      :isWatch="true"
+                      class="scroll"
+                    >
+                      <div class="wrap" v-for="(item, index) in listFour" :key="index">
+                        <div class="other">{{ item.name }}</div>
+                        <div class="other">{{ item.number }}人</div>
+                        <div class="other">{{ item.time }}</div>
+                      </div>
+                    </vue3-seamless-scroll>
+                  </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-            <li style="width: 49.5%">
-              <div class="boxall">
-                <div class="titleall">模块标题</div>
-                <div class="six">
-                  <echarts2></echarts2>
+              </li>
+            </ul>
+            <ul class="clearfix" style="display: flex; justify-content: space-between">
+              <li style="width: 49.5%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="five">
+                    <echarts1></echarts1>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li style="width: 49.5%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="six">
+                    <echarts2></echarts2>
+                  </div>
+                  <div class="boxfoot"></div>
                 </div>
-                <div class="boxfoot"></div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </el-col>
-    </el-row>
-    <!-- <div class="copyright">
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- <div class="copyright">
       版权所有：Copyright©2007-2024 吉林省华欣数字科技股份有限公司 │ 吉ICP备14005689号
     </div> -->
-  </div>
-  <!-- </myMain> -->
+    </div>
+  </myMain>
 </template>
 
 <script setup>

src/views/main/eight.vue

@@ -63,7 +63,7 @@ const onSearch = () => {
   }
 
   .two {
-    margin: 10px 0;
+    margin: 20px 0 0 0;
     .list {
       text-align: center;
       padding: 20px;

src/views/main/eleven.vue

@@ -1,10 +1,14 @@
 <template>
-  <hatch1></hatch1>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one"> </el-col>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
-// 组件
-import hatch1 from '@/views/hatch/index.vue'
 // 加载中
 const loading = ref(false)
 // 请求
@@ -15,4 +19,17 @@ onMounted(async () => {
 })
 const search = async () => {}
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  .one {
+    .image {
+      width: 100%;
+      height: 200px;
+    }
+  }
+
+  .two {
+    margin: 10px 0;
+  }
+}
+</style>

src/views/main/hatch/components/echarts1.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="round">
+    <div ref="chartDom" class="pie"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.round {
+  display: flex;
+  justify-content: space-between;
+  height: 270px;
+  width: 100%;
+  .pie {
+    width: 100%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const chartDom = ref()
+onMounted(() => {
+  chartDomAvitve()
+})
+function chartDomAvitve() {
+  const myChart1 = echarts.init(chartDom.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '5%',
+      left: 'center'
+    },
+    series: [
+      {
+        name: '用户构成',
+        type: 'pie',
+        radius: ['30%', '60%'],
+        data: [
+          { value: 1048, name: '普通用户' },
+          { value: 735, name: '专家' },
+          { value: 735, name: '企业' },
+          { value: 580, name: '第三方' },
+          { value: 484, name: '院校' },
+          { value: 300, name: '科技局' }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/main/hatch/components/echarts2.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="echarts2">
+    <el-col :span="24" class="top">
+      <el-image class="image" :src="map" fit="fill" />
+    </el-col>
+    <el-col :span="24" class="button">
+      <el-button type="primary" @click="toSearch">地图查询</el-button>
+    </el-col>
+  </div>
+</template>
+<script setup>
+// 图片引入
+import map from '/images/map.jpeg'
+// 查询
+const toSearch = async () => {}
+</script>
+<style scoped lang="scss">
+.echarts2 {
+  height: 300px;
+  .top {
+    height: 245px;
+    padding: 0 0 5px 0;
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .button {
+    border-top: 1px solid #f1f1f1;
+    padding: 10px 0;
+    text-align: center;
+  }
+}
+</style>

src/views/main/hatch/components/echarts3.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="round">
+    <div ref="chartDom" class="pie"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.round {
+  display: flex;
+  justify-content: space-between;
+  height: 300px;
+  width: 100%;
+  .pie {
+    width: 100%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const chartDom = ref()
+onMounted(() => {
+  chartDomAvitve()
+})
+function chartDomAvitve() {
+  const myChart1 = echarts.init(chartDom.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '5%',
+      left: 'center'
+    },
+    series: [
+      {
+        name: '资源分布',
+        type: 'pie',
+        radius: ['30%', '60%'],
+        data: [
+          { value: 1048, name: '成果' },
+          { value: 735, name: '专家' },
+          { value: 735, name: '团队' },
+          { value: 580, name: '院校' },
+          { value: 484, name: '需求' },
+          { value: 300, name: '企业' },
+          { value: 300, name: '服务' }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/main/hatch/components/echarts4.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="round">
+    <div ref="chartDom2" class="pie"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.round {
+  display: flex;
+  justify-content: space-between;
+  height: 300px;
+  width: 100%;
+  .pie {
+    width: 100%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const chartDom2 = ref()
+onMounted(() => {
+  chartDomAvitve()
+})
+function chartDomAvitve() {
+  const myChart1 = echarts.init(chartDom2.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      boundaryGap: [0, 0.01]
+    },
+    yAxis: {
+      type: 'category',
+      data: [
+        '吉林市',
+        '长春市',
+        '榆树市',
+        '通化市',
+        '白山市',
+        '辽源市',
+        '松原市',
+        '白城市',
+        '四平市',
+        '梅河口市'
+      ]
+    },
+    series: [
+      {
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1, // 渐变方向：从上到下
+            [
+              { offset: 0, color: '#83bff6' }, // 柱图顶部颜色
+              { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
+              { offset: 1, color: '#188df0' } // 柱图底部颜色
+            ]
+          )
+        },
+        data: [69325, 73438, 81000, 91594, 184141, 291807, 321594, 434141, 589007, 689007]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/main/hatch/dataV/mixin/autoResize.js

@@ -0,0 +1,85 @@
+import { debounce, observerDomResize } from '../util/index'
+
+export default {
+  data () {
+    return {
+      dom: '',
+
+      width: 0,
+      height: 0,
+
+      debounceInitWHFun: '',
+
+      domObserver: ''
+    }
+  },
+  methods: {
+    async autoResizeMixinInit () {
+      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
+
+      await initWH(false)
+
+      getDebounceInitWHFun()
+
+      bindDomResizeCallback()
+
+      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
+    },
+    initWH (resize = true) {
+      const { $nextTick, $refs, ref, onResize } = this
+
+      return new Promise(resolve => {
+        $nextTick((_) => {
+          const dom = (this.dom = $refs[ref])
+          // this.width = dom ? dom.clientWidth : 0
+          // this.height = dom ? dom.clientHeight : 0
+          this.width = window.innerWidth
+          this.height = window.innerHeight
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
+
+          if (typeof onResize === 'function' && resize) onResize()
+
+          resolve()
+        })
+      })
+    },
+    getDebounceInitWHFun () {
+      const { initWH } = this
+
+      this.debounceInitWHFun = debounce(100, initWH)
+    },
+    bindDomResizeCallback () {
+      const { dom, debounceInitWHFun } = this
+
+      this.domObserver = observerDomResize(dom, debounceInitWHFun)
+
+      window.addEventListener('resize', debounceInitWHFun)
+    },
+    unbindDomResizeCallback () {
+      let { domObserver, debounceInitWHFun } = this
+
+      if (!domObserver) return
+
+      domObserver.disconnect()
+      domObserver.takeRecords()
+      domObserver = null
+
+      window.removeEventListener('resize', debounceInitWHFun)
+    }
+  },
+  mounted () {
+    const { autoResizeMixinInit } = this
+
+    autoResizeMixinInit()
+  },
+  beforeDestroy () {
+    const { unbindDomResizeCallback } = this
+
+    unbindDomResizeCallback()
+  }
+}

src/views/main/hatch/dataV/myMain.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="dv-full-screen-container" :ref="ref">
+    <template v-if="ready">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import autoResize from './mixin/autoResize.js'
+
+export default {
+  name: 'DvFullScreenContainer',
+  mixins: [autoResize],
+  data() {
+    return {
+      ref: 'full-screen-container',
+      allWidth: 0,
+      allHeight: 0,
+      scale: 0,
+      datavRoot: '',
+      ready: false
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit() {
+      const { initConfig, setAppScale } = this
+
+      initConfig()
+
+      setAppScale()
+
+      this.ready = true
+    },
+    initConfig() {
+      const { dom } = this
+      // const { width } = screen
+      let width = window.innerWidth
+      let height = window.innerHeight
+      this.allWidth = width
+      this.allHeight = height
+
+      dom.style.width = `${width - 17}px`
+      dom.style.height = `${height}px`
+    },
+    setAppScale() {
+      const { allWidth, allHeight, dom } = this
+      const currentWidth = window.outerWidth
+      const currentHeight = window.innerHeight
+      // dom.style.transform = `scale(${currentWidth / allWidth})`
+      dom.style.transform = `scaleY(${currentHeight / allHeight}) scaleX(${currentWidth / allWidth})`
+    },
+    onResize() {
+      const { setAppScale } = this
+
+      setAppScale()
+    }
+  }
+}
+</script>

src/views/main/hatch/dataV/util/index.js

@@ -0,0 +1,47 @@
+export function randomExtend(minNum, maxNum) {
+  if (arguments.length === 1) {
+    return parseInt(Math.random() * minNum + 1, 10)
+  } else {
+    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+  }
+}
+
+export function debounce(delay, callback) {
+  let lastTime
+
+  return function () {
+    clearTimeout(lastTime)
+
+    const [that, args] = [this, arguments]
+
+    lastTime = setTimeout(() => {
+      callback.apply(that, args)
+    }, delay)
+  }
+}
+
+export function observerDomResize(dom, callback) {
+  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+
+  const observer = new MutationObserver(callback)
+
+  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+
+  return observer
+}
+
+export function getPointDistance(pointOne, pointTwo) {
+  const minusX = Math.abs(pointOne[0] - pointTwo[0])
+
+  const minusY = Math.abs(pointOne[1] - pointTwo[1])
+
+  return Math.sqrt(minusX * minusX + minusY * minusY)
+}
+
+export function uuid(hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}

src/views/main/hatch/path/echarts1.vue

@@ -0,0 +1,376 @@
+<template>
+  <div class="round">
+    <div ref="bt011" class="pie"></div>
+    <div ref="bt022" class="pie"></div>
+    <div ref="bt033" class="pie"></div>
+    <div ref="bt044" class="pie"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.round {
+  display: flex;
+  justify-content: space-between;
+  height: 120px;
+  width: 100%;
+  .pie {
+    width: 25%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const bt011 = ref()
+const bt022 = ref()
+const bt033 = ref()
+const bt044 = ref()
+onMounted(() => {
+  bt01()
+  bt02()
+  bt03()
+  bt04()
+})
+function bt01() {
+  const myChart1 = echarts.init(bt011.value)
+  const data1 = 104 //己完成
+  const data2 = 18 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option1 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称4',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function bt02() {
+  const myChart2 = echarts.init(bt022.value)
+  const data1 = 14 //己完成
+  const data2 = 18 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option2 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称1',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+function bt03() {
+  const myChart3 = echarts.init(bt033.value)
+  const data1 = 104 //己完成
+  const data2 = 108 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option3 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称2',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: { show: false },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+function bt04() {
+  const myChart4 = echarts.init(bt044.value)
+  const data1 = 1000 //己完成
+  const data2 = 552 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option4 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称3',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/main/hatch/path/echarts2.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2" style="height: 120px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+function drawEcharts2() {
+  var myChart5 = echarts.init(echarts2.value)
+  var option5 = {
+    //  backgroundColor: '#00265f',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['字段名称1', '字段名称2'],
+      top: '5%',
+      textStyle: {
+        color: '#fff',
+        fontSize: '12'
+      }
+
+      //itemGap: 35
+    },
+    grid: {
+      left: '0%',
+      top: '40px',
+      right: '0%',
+      bottom: '0',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1', '2', '3', '4', '5', '6', '7'],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+          // rotate:50,
+          show: true,
+          //  splitNumber: 2,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          //formatter: '{value} %'
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1	)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '字段名称1',
+        type: 'line',
+        smooth: true,
+        data: [5, 2, 6, 4, 5, 12, 20],
+        barWidth: '15',
+        // barGap: 1,
+        itemStyle: {
+          normal: {
+            color: '#62c98d',
+            opacity: 1,
+            barBorderRadius: 5
+          }
+        }
+      },
+      {
+        name: '字段名称2',
+        type: 'line',
+        smooth: true,
+        data: [7, 11, 8, 13, 10, 13, 10],
+
+        itemStyle: {
+          normal: {
+            color: '#ffc000',
+            opacity: 1,
+
+            barBorderRadius: 5
+          }
+        }
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+}
+</script>

src/views/main/hatch/path/map.vue

@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <div ref="chinaMap" class="chinaMap" style="height: 600px; width: 100%"></div>
+  </div>
+</template>
+<style scoped>
+.chinaMap {
+  transform: rotate3d(1, 0, 0, 35deg);
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+import jilinJson from '../json/jilin.json'
+const chinaMap = ref()
+onMounted(() => {
+  drawChina()
+})
+/**************************** series start ************************************/
+//中国地理坐标图
+var chinaGeoCoordMap = {
+  长春市: [125.3245, 43.886841],
+  白城市: [122.841114, 45.619026],
+  松原市: [124.823608, 45.118243],
+  吉林市: [126.55302, 43.843577],
+  四平市: [124.370785, 43.170344],
+  辽源市: [125.145349, 42.902692],
+  白山市: [126.427839, 41.942505],
+  延边朝鲜族自治州: [129.513228, 42.904823],
+  通化市: [125.936501, 41.721177]
+}
+var chinaDatas = [
+  [
+    {
+      name: '长春市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '延边朝鲜族自治州',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '白山市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '白城市',
+      value: 2
+    }
+  ],
+  [
+    {
+      name: '通化市',
+      value: 1
+    }
+  ],
+  [
+    {
+      name: '辽源市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '松原市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '吉林市',
+      value: 1
+    }
+  ],
+  [
+    {
+      name: '四平市',
+      value: 1
+    }
+  ]
+]
+//设置投射点
+const scatterPos = [125.3245, 43.886841]
+
+var convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var dataItem = data[i]
+    var fromCoord = chinaGeoCoordMap[dataItem[0].name]
+    var toCoord = scatterPos
+    if (fromCoord && toCoord) {
+      res.push([
+        {
+          coord: fromCoord,
+          value: dataItem[0].value
+        },
+        {
+          coord: toCoord
+        }
+      ])
+    }
+  }
+  return res
+}
+
+var series = []
+;[['长春市', chinaDatas]].forEach(function (item, i) {
+  series.push(
+    // {
+    //   //绘制一个新地图
+    //   type: 'map',
+    //   map: 'china',
+    //   zoom: 4,
+    //   center: [125.593273, 44.290795],
+    //   z: -1,
+    //   aspectScale: 0.75, //
+    //   itemStyle: {
+    //     normal: {
+    //       areaColor: '#f00',
+    //       borderColor: '#090438',
+    //       borderWidth: '2',
+    //       shadowColor: '#090438',
+    //       shadowOffsetX: 0,
+    //       shadowOffsetY: 15
+    //     }
+    //   }
+    // },
+    //设置指向箭头信息
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 8 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#adffd0',
+          width: 1, //尾迹线条宽度
+          opacity: 1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: convertData(item[1])
+    },
+    // 发射点位置涟漪等效果
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      zlevel: 2,
+      rippleEffect: {
+        //涟漪特效
+        period: 4, //动画时间，值越小速度越快
+        brushType: 'stroke', //波纹绘制方式 stroke, fill
+        scale: 4 //波纹圆环最大限制，值越大波纹越大
+      },
+      label: {
+        normal: {
+          show: true,
+          position: 'right', //显示位置
+          offset: [5, 0], //偏移设置
+          formatter: function (params) {
+            //圆环显示文字
+            return params.data.name
+          },
+          fontSize: 13
+        },
+        emphasis: {
+          show: true
+        }
+      },
+      symbol: 'circle',
+      symbolSize: function (val) {
+        return 5 + val[2] * 5 //圆环大小
+      },
+      itemStyle: {
+        normal: {
+          show: false,
+          color: '#f8f9f5'
+        }
+      },
+      data: item[1].map(function (dataItem) {
+        return {
+          name: dataItem[0].name,
+          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
+        }
+      })
+    },
+    //被攻击点
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      zlevel: 2,
+      rippleEffect: {
+        //涟漪相关
+        period: 2,
+        brushType: 'stroke',
+        scale: 5
+      },
+      label: {
+        normal: {
+          show: true,
+          position: 'right',
+          // offset:[5, 0],
+          color: '#0f0',
+          formatter: '{b}',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        emphasis: {
+          show: true,
+          color: '#f60'
+        }
+      },
+      itemStyle: {
+        normal: {
+          color: '#f00'
+        }
+      },
+      symbol: 'circle',
+      symbolSize: 10, //圆圈大小
+      data: [
+        {
+          name: item[0],
+          value: chinaGeoCoordMap[item[0]].concat([10])
+        }
+      ]
+    }
+  )
+})
+
+/****************************************************************/
+function drawChina() {
+  var myChart = echarts.init(chinaMap.value)
+  echarts.registerMap('china', jilinJson) //注册可用的地图
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(166, 200, 76, 0.82)',
+      borderColor: '#FFFFCC',
+      showDelay: 0,
+      hideDelay: 0,
+      enterable: true,
+      transitionDuration: 0,
+      extraCssText: 'z-index:100',
+      formatter: function (params, ticket, callback) {
+        //根据业务自己拓展要显示的内容
+        var res = ''
+        var name = params.name
+        var value = params.value[params.seriesIndex + 1]
+        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
+        return res
+      }
+    },
+    geo: {
+      show: true,
+      center: [125.593273, 44.290795],
+      map: 'china',
+      roam: true, //是否允许缩放，拖拽
+      zoom: 4, //初始化大小
+      //缩放大小限制
+      scaleLimit: {
+        min: 0.1, //最小
+        max: 12 //最大
+      },
+      //设置中心点
+      //center: [95.97, 29.71],
+      //省份地图添加背景
+      //regions: regions,
+      itemStyle: {
+        normal: {
+          areaColor: '#4c60ff',
+          borderColor: '#002097'
+        },
+        emphasis: {
+          areaColor: '#293fff'
+        }
+      },
+      label: {
+        color: 'rgba(255,255,255,0.5)',
+        show: false
+      },
+      //高亮状态
+      emphasis: {
+        itemStyle: {
+          areaColor: '#ffc601'
+        },
+        label: {
+          show: true,
+          color: '#fff'
+        }
+      },
+      z: 10
+    },
+    //配置属性
+    series: series
+  }
+  myChart.setOption(option)
+}
+</script>

src/views/main/hatch/twelve_1.vue

@@ -0,0 +1,325 @@
+<template>
+  <div id="twelve_1">
+    <el-row :gutter="4" class="twelve_1">
+      <el-col :span="5" class="left">
+        <el-col :span="24" class="left_1">
+          <el-col :span="24" class="name"> 产业大脑</el-col>
+          <el-col :span="24" class="remark" @click="toChange"> 立体展示平台运行成效</el-col>
+        </el-col>
+        <el-col :span="24" class="left_2">
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="name">
+              <el-image class="image" :src="yonghu" fit="fill" />
+              用户数据
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">用户总量</el-col>
+              <el-col :span="12" class="otherRight">96593个</el-col>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">本月新增</el-col>
+              <el-col :span="12" class="otherRight">43个</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="name">
+              <el-image class="image" :src="ziyuan" fit="fill" />
+              资源数据
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">资源总量</el-col>
+              <el-col :span="12" class="otherRight">100514个</el-col>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">本月新增</el-col>
+              <el-col :span="12" class="otherRight">430个</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="name">
+              <el-image class="image" :src="duijie" fit="fill" />
+              对接数据
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">对接总量</el-col>
+              <el-col :span="12" class="otherRight">11445个</el-col>
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="otherLeft">本月新增</el-col>
+              <el-col :span="12" class="otherRight">16个</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="19" class="right">
+        <el-row :gutter="20" class="right_1">
+          <el-col :span="10">
+            <el-col :span="24" class="right_1_1">
+              <el-col :span="24" class="title"> 最新事件 </el-col>
+              <el-col :span="24" class="value">
+                <vue3-seamless-scroll
+                  :list="list"
+                  :hover="true"
+                  :step="0.5"
+                  :wheel="true"
+                  :isWatch="true"
+                >
+                  <el-col
+                    :span="24"
+                    class="list"
+                    v-for="(item, index) in list"
+                    :key="index"
+                    @click="toView(item)"
+                  >
+                    <el-col :span="24" class="name textOver">
+                      <div>
+                        <span>{{ item.name || '暂无名称' }}</span
+                        >发布 <span>「{{ item.type || '暂无' }}」</span>
+                      </div>
+                      <div>{{ item.time || '暂无时间' }}</div>
+                    </el-col>
+                    <el-col :span="24" class="other textOver">
+                      {{ item.brief }}
+                    </el-col>
+                  </el-col>
+                </vue3-seamless-scroll>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="14">
+            <el-col :span="24" class="right_1_2">
+              <el-col :span="24" class="title"> 用户构成 </el-col>
+              <echarts1></echarts1>
+            </el-col>
+          </el-col>
+        </el-row>
+        <el-row :span="24" :gutter="20" class="right_2">
+          <el-col :span="6">
+            <el-col :span="24" class="right_2_1">
+              <el-col :span="24" class="title"> 创新地图 </el-col>
+              <echarts2></echarts2>
+            </el-col>
+          </el-col>
+          <el-col :span="18">
+            <el-col :span="24" class="right_2_2">
+              <div class="other_1">
+                <el-col :span="24" class="title"> 资源分布 </el-col>
+                <echarts3></echarts3>
+              </div>
+              <div class="other_1">
+                <el-col :span="24" class="title"> 对接排名 </el-col>
+                <echarts4></echarts4>
+              </div>
+            </el-col>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const toChange = inject('toChange')
+import echarts1 from './components/echarts1.vue'
+import echarts2 from './components/echarts2.vue'
+import echarts3 from './components/echarts3.vue'
+import echarts4 from './components/echarts4.vue'
+// 图片引入
+import ziyuan from '/images/ziyuan.png'
+// 图片引入
+import yonghu from '/images/yonghu.png'
+// 图片引入
+import duijie from '/images/duijie.png'
+const list = ref([
+  {
+    name: '工研院',
+    type: '需求',
+    time: '12/14 02:45',
+    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
+  },
+  { name: '工研院', type: '需求', time: '12/14 02:45', brief: '滚动轴承材料热处理加工工艺研究' },
+  {
+    name: '工研院',
+    type: '需求',
+    time: '12/14 02:45',
+    brief: '全透-全黑低压快速切换智能窗户遮光膜2、高电热辐射转化率石墨'
+  },
+  { name: '工研院', type: '需求', time: '12/14 02:45', brief: '多目标高速图像模板匹配' },
+  {
+    name: '工研院',
+    type: '需求',
+    time: '12/14 02:45',
+    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
+  },
+  {
+    name: '工研院',
+    type: '需求',
+    time: '12/14 02:45',
+    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
+  },
+  {
+    name: '工研院',
+    type: '需求',
+    time: '12/14 02:45',
+    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
+  }
+])
+</script>
+<style scoped lang="scss">
+.twelve_1 {
+  padding: 10px 0;
+  .left {
+    .left_1 {
+      .name {
+        text-align: center;
+        font-family: PingFangSC-Medium;
+        font-size: 20px;
+        color: #121834;
+        line-height: 20px;
+        font-weight: 700;
+        margin-bottom: 8px;
+      }
+      .remark {
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+    .left_2 {
+      margin: 10px 0;
+      .list {
+        padding: 20px !important;
+        margin: 15px;
+        border-radius: 4px;
+        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
+        .name {
+          display: flex;
+          align-items: center;
+          font-family: PingFangSC-Medium;
+          font-size: 18px;
+          color: #121834;
+          line-height: 18px;
+          font-weight: 700;
+          margin-bottom: 8px;
+          .image {
+            width: 25px;
+            height: 25px;
+            margin: 0 10px 0 0;
+          }
+        }
+        .other {
+          display: flex;
+          justify-content: space-between;
+          font-family: PingFangSC-Medium;
+          font-size: 14px;
+          color: #63a9e2;
+          line-height: 14px;
+          margin: 15px 0;
+          .otherRight {
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    .right_1 {
+      display: flex;
+      margin: 0 0 20px 0;
+      .right_1_1 {
+        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
+        border-radius: 4px;
+
+        .title {
+          text-align: center;
+          font-family: PingFangSC-Medium;
+          font-size: 16px;
+          color: #121834;
+          line-height: 16px;
+          font-weight: 700;
+          margin-bottom: 8px;
+          padding: 10px;
+        }
+        .value {
+          max-height: 270px;
+          overflow: hidden;
+          .list {
+            padding: 10px;
+            font-size: 14px;
+            background: #fff;
+            .name {
+              display: flex;
+              justify-content: space-between;
+              margin: 0 0 10px 0;
+              span {
+                color: #4f8bf3;
+              }
+            }
+
+            .content {
+              text-align: center;
+            }
+
+            .content:hover {
+              color: #2374ff;
+            }
+          }
+
+          .list:nth-child(2n) {
+            background: #f4f4f4;
+          }
+        }
+      }
+      .right_1_2 {
+        border-radius: 4px;
+        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
+        .title {
+          text-align: center;
+          font-family: PingFangSC-Medium;
+          font-size: 16px;
+          color: #121834;
+          line-height: 16px;
+          font-weight: 700;
+          margin-bottom: 8px;
+          padding: 10px;
+        }
+      }
+    }
+    .right_2 {
+      display: flex;
+      .right_2_1 {
+        border-radius: 4px;
+        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
+        .title {
+          text-align: center;
+          font-family: PingFangSC-Medium;
+          font-size: 16px;
+          color: #121834;
+          line-height: 16px;
+          font-weight: 700;
+          margin-bottom: 8px;
+          padding: 10px;
+        }
+      }
+      .right_2_2 {
+        display: flex;
+        justify-content: space-between;
+        border-radius: 4px;
+        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
+        .other_1 {
+          width: 50%;
+          .title {
+            text-align: center;
+            font-family: PingFangSC-Medium;
+            font-size: 16px;
+            color: #121834;
+            line-height: 16px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            padding: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/main/hatch/twelve_2.vue

@@ -0,0 +1,481 @@
+<template>
+  <myMain>
+    <div class="hatch">
+      <el-row>
+        <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+          <div class="head">
+            <div class="head_1">产学研用平台孵化大脑</div>
+            <div class="head_2" id="showTime">{{ formattedTime }}</div>
+          </div>
+          <div class="center">
+            <ul class="clearfix">
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li>
+                <div class="barnav">
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="value">{{ i.value }}</div>
+                    </div>
+                  </div>
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="label">{{ i.label }}</div>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+                <div class="mapbox">
+                  <map1 class="map"></map1>
+                </div>
+              </li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+            </ul>
+            <ul class="clearfix">
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list thr">
+                    <div class="list_1" v-for="i in listThr" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li></li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">优质企业</div>
+                  <div class="list four">
+                    <vue3-seamless-scroll
+                      :list="listFour"
+                      :hover="true"
+                      :step="0.2"
+                      :wheel="true"
+                      :isWatch="true"
+                      class="scroll"
+                    >
+                      <div class="wrap" v-for="(item, index) in listFour" :key="index">
+                        <div class="other">{{ item.name }}</div>
+                        <div class="other">{{ item.number }}人</div>
+                        <div class="other">{{ item.time }}</div>
+                      </div>
+                    </vue3-seamless-scroll>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+            </ul>
+            <ul class="clearfix" style="display: flex; justify-content: space-between">
+              <li style="width: 49.5%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="five">
+                    <echarts1></echarts1>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li style="width: 49.5%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="six">
+                    <echarts2></echarts2>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- <div class="copyright">
+      版权所有：Copyright©2007-2024 吉林省华欣数字科技股份有限公司 │ 吉ICP备14005689号
+    </div> -->
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import myMain from './dataV/myMain.vue'
+import map1 from './path/map.vue'
+import echarts1 from './path/echarts1.vue'
+import echarts2 from './path/echarts2.vue'
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+const listOne = ref([
+  { value: '1824', label: '华东地区' },
+  { value: '1920', label: '华南地区' },
+  { value: '19%', label: '华西地区' },
+  { value: '1824', label: '华北地区' }
+])
+const listTwo = ref([
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' }
+])
+const listThr = ref([
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' },
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' },
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' }
+])
+const listFour = ref([
+  { name: '深圳腾讯科技有限公司', number: '100', time: '2023-4-22' },
+  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
+  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
+  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
+  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' },
+  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
+  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
+  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
+  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' }
+])
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await updateTime()
+  loading.value = false
+})
+// 创建一个函数来格式化时间并更新状态
+const updateTime = () => {
+  const now = new Date()
+  const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }
+  formattedTime.value = now.toLocaleString('zh-CN', options)
+}
+
+const timer = setInterval(updateTime, 1000)
+
+onMounted(() => {
+  timer // 开始计时器
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer) // 组件卸载前清除计时器
+})
+</script>
+<style scoped lang="scss">
+.hatch {
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  background: url('./images/bg.jpg');
+  background-size: 100% 100%;
+  padding: 0px;
+  margin: 0px;
+  color: #222;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  @font-face {
+    font-family: electronicFont;
+    src: url(./font/DS-DIGIT.TTF);
+  }
+  a:hover {
+    color: #06c;
+    text-decoration: none !important;
+  }
+  .head {
+    position: relative;
+    height: 4.5rem;
+    background: url('./images/head_bg.png') no-repeat center center;
+    background-size: 100% 100%;
+    .head_1 {
+      color: #fff;
+      text-align: center;
+      font-size: 2.3rem;
+      line-height: 2.3rem;
+      margin: 1rem 0;
+    }
+    .head_2 {
+      position: absolute;
+      right: 1rem;
+      top: 0.2rem;
+      line-height: 1.5rem;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 1.5rem;
+      padding-right: 0.5rem;
+      font-family: electronicFont;
+    }
+  }
+  .clearfix {
+    display: flex;
+    padding: 0 0.5rem;
+    list-style-type: none;
+    margin: 0.5rem 0;
+  }
+  .center {
+    .titleall {
+      font-size: 0.9rem;
+      color: #fff;
+      line-height: 0.9rem;
+      padding: 0 0 0.7rem 0;
+      border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
+    }
+    .boxall {
+      border: 1px solid rgba(25, 186, 139, 0.17);
+      padding: 0.8rem;
+      background: rgba(255, 255, 255, 0.04) url('./images/line.png');
+      background-size: 100% auto;
+      position: relative;
+      z-index: 10;
+      .list {
+        display: flex;
+        align-items: center;
+        .list_1 {
+          position: relative;
+          width: 10rem;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          h2 {
+            margin: 0.8rem 0;
+            font-size: 1.5rem;
+            font-weight: bold;
+            font-family: electronicFont;
+            color: #46b8ff;
+          }
+          span {
+            font-size: 1rem;
+            color: #fff;
+            opacity: 0.5;
+          }
+        }
+        .list_1:before {
+          position: absolute;
+          content: '';
+          height: 25%;
+          width: 0.1rem;
+          background: rgba(255, 255, 255, 0.1);
+          right: 0;
+          top: 25%;
+        }
+        .list_1:last-child:before {
+          width: 0;
+        }
+      }
+      .thr {
+        flex-wrap: wrap;
+        justify-content: center;
+        .list_1 {
+          width: 8rem;
+          h2 {
+            color: #2ad08a;
+          }
+        }
+        .list_1:nth-child(3n):before {
+          width: 0;
+        }
+      }
+      .four {
+        height: 13.2rem;
+        overflow: hidden;
+        .scroll {
+          width: 100%;
+          .wrap {
+            display: flex;
+            justify-content: space-between;
+            border: 1px solid rgba(25, 186, 139, 0.17);
+            padding: 0.2rem;
+            margin: 0 0 0.5rem 0;
+            .other:first-child {
+              width: 40%;
+            }
+            .other {
+              width: 30%;
+              color: rgba(255, 255, 255, 0.6);
+              text-align: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
+      .boxfoot {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+      }
+    }
+    .boxall:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .boxall:before {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .boxall:after,
+    .boxfoot:after {
+      border-right: 2px solid #02a6b5;
+      right: 0;
+    }
+    .boxall:before,
+    .boxall:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .boxfoot:before,
+    .boxfoot:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-bottom: 2px solid #02a6b5;
+      bottom: 0;
+    }
+    .boxall:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .barnav {
+      margin: 0 0.5rem;
+      position: relative;
+      background: hsla(225, 68%, 64%, 0.1);
+      .top {
+        display: flex;
+        border: 1px solid rgba(25, 186, 139, 0.17);
+        padding: 0.3rem;
+
+        .list {
+          width: 33%;
+          text-align: center;
+          .value {
+            font-size: 2.5rem;
+            color: #ffeb7b;
+            padding: 0.5rem 0;
+            font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
+            font-weight: bold;
+            font-family: electronicFont;
+          }
+          .label {
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+    .boxfoot {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      left: 0;
+    }
+    .barnav:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .barnav:before {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .barnav:after,
+    .boxfoot:after {
+      border-right: 2px solid #02a6b5;
+      right: 0;
+    }
+    .barnav:before,
+    .barnav:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .boxfoot:before,
+    .boxfoot:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-bottom: 2px solid #02a6b5;
+      bottom: 0;
+    }
+    .barnav:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .map {
+      position: absolute;
+      top: 0;
+      left: -4%;
+      width: 100%;
+    }
+  }
+  .center > ul > li {
+    float: left;
+    height: 100%;
+    width: 30%;
+  }
+  .center > ul > li:nth-child(2) {
+    width: 40%;
+  }
+  .copyright {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.7rem;
+    width: 100%;
+  }
+}
+</style>

src/views/main/one.vue

@@ -9,7 +9,7 @@
           <el-col :span="24" class="one">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">政策信息</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('news')">查看政策信息</el-col>
+              <el-col :span="12" class="right" @click="selectMenu('brain')">查看政策信息</el-col>
             </el-col>
             <el-col :span="24" class="one_2">
               <el-col
@@ -39,7 +39,7 @@
           <el-col :span="24" class="one">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">新闻通知</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('news')">查看新闻通知</el-col>
+              <el-col :span="12" class="right" @click="selectMenu('brain')">查看新闻通知</el-col>
             </el-col>
             <el-col :span="24" class="one_2">
               <el-col
@@ -69,7 +69,7 @@
           <el-col :span="24" class="one">
             <el-col :span="24" class="one_1">
               <el-col :span="12" class="left">工作动态</el-col>
-              <el-col :span="12" class="right" @click="selectMenu('news')">查看工作动态</el-col>
+              <el-col :span="12" class="right" @click="selectMenu('brain')">查看工作动态</el-col>
             </el-col>
             <el-col :span="24" class="one_2">
               <el-col

src/views/main/seven.vue

@@ -32,9 +32,7 @@
               <a-table :columns="columns" :data-source="data" bordered>
                 <template #bodyCell="{ column, text, record }">
                   <template v-if="column.dataIndex === 'operation'">
-                    <a-popconfirm>
-                      <a @click="toView(record.key)">查看</a>
-                    </a-popconfirm>
+                    <a @click="toView(record.key)">查看</a>
                   </template>
                 </template>
               </a-table>

src/views/main/six.vue

@@ -316,7 +316,7 @@ const sizeChange = (limits) => {
           font-size: 18px;
           font-weight: bold;
           display: inline-block;
-          margin: 0 0 10px 0;
+          margin: 0 0 8px 0;
         }
 
         .name:hover {
@@ -324,20 +324,17 @@ const sizeChange = (limits) => {
           cursor: pointer;
         }
 
-        .other {
-          padding: 5px 0;
-
-          .other_1 {
-            font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
-              sans-serif;
-            font-size: 12px;
-            font-weight: normal;
-          }
+        .other_1 {
+          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
+            sans-serif;
+          font-size: 14px;
+          font-weight: normal;
+          color: #666;
+        }
 
-          .other_1:hover {
-            color: #2374ff;
-            cursor: pointer;
-          }
+        .other_1:hover {
+          color: #2374ff;
+          cursor: pointer;
         }
       }
     }

src/views/main/ten.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script setup>
+// 路由
+const router = useRouter()
 // 图片引入
 import news from '/images/news.png'
 import xinxi from '/images/xinxi.png'
@@ -70,6 +72,13 @@ onMounted(async () => {
   loading.value = false
 })
 const search = async () => {}
+// 查看
+const toView = (item) => {
+  if (item.value == '0') router.push({ path: '/expert' })
+  if (item.value == '1') router.push({ path: '/demand' })
+  if (item.value == '2') router.push({ path: '/company' })
+  if (item.value == '3') router.push({ path: '/project' })
+}
 </script>
 <style scoped lang="scss">
 .main {

src/views/main/twelve.vue

@@ -2,11 +2,11 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
-          <el-image class="image" :src="news" fit="fill" />
+        <el-col :span="24" class="one" v-if="is_show">
+          <twelve1></twelve1>
         </el-col>
-        <el-col :span="24" class="two">
-          <div class="w_1200">创新中心</div>
+        <el-col :span="24" class="two" v-else>
+          <twelve2></twelve2>
         </el-col>
       </el-col>
     </el-row>
@@ -14,10 +14,12 @@
 </template>
 
 <script setup>
-// 图片引入
-import news from '/images/news.png'
+// 组件
+import twelve1 from './hatch/twelve_1.vue'
+import twelve2 from './hatch/twelve_2.vue'
 // 加载中
 const loading = ref(false)
+const is_show = ref(true)
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -25,18 +27,19 @@ onMounted(async () => {
   loading.value = false
 })
 const search = async () => {}
+// 转化
+const toChange = async () => {
+  is_show.value = !is_show.value
+}
+// provide
+provide('toChange', toChange)
 </script>
 <style scoped lang="scss">
 .main {
+  background: rgb(248, 248, 248);
   .one {
-    .image {
-      width: 100%;
-      height: 200px;
-    }
-  }
-
-  .two {
-    margin: 10px 0;
+    margin: 10px;
+    background: #ffffff;
   }
 }
 </style>