修改查看全省孵化器情况

src/App.vue

@@ -15,4 +15,9 @@ const appStore = useAppStore()
   width: 100%;
   height: 100%;
 }
+.textOne {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

src/lang/package/zh-cn/menus.js

@@ -34,6 +34,8 @@ export default {
   support: '服务管理',
   journal: '行研产研管理',
   notes: '期刊管理',
+  incubator: '全省孵化器情况',
+  elevenHatch: '孵化器情况',
   log: '日志管理',
   log_opera: '操作日志'
 }

src/layout/index.vue

@@ -32,15 +32,37 @@
 import cHeader from './parts/Header.vue'
 import cAside from './parts/Sidebar.vue'
 import tagsBar from './parts/Tagsbar.vue'
-const viewStyle = ref({
-  width: '98.8%',
-  height: '86vh',
-  background: '#ffffff',
-  'overflow-x': 'hidden',
-  'overflow-y': 'auto',
-  border: '1px solid #f0f0f0',
-  padding: '10px'
+// 路由
+const route = useRoute()
+const viewStyle = ref({})
+// 请求
+onMounted(async () => {
+  await updateStyle()
 })
+// 多选
+const updateStyle = () => {
+  if (route.name == 'incubator' || route.name == 'elevenHatch') viewStyle.value = {}
+  else {
+    viewStyle.value = {
+      width: '98.8%',
+      height: '86vh',
+      background: '#ffffff',
+      'overflow-x': 'hidden',
+      'overflow-y': 'auto',
+      border: '1px solid #f0f0f0',
+      padding: '10px'
+    }
+  }
+}
+watch(
+  route,
+  () => {
+    updateStyle()
+  },
+  {
+    deep: true
+  }
+)
 </script>
 
 <style scoped lang="scss">

src/layout/site.js

@@ -1,7 +1,7 @@
 // 网站基本设置
 export const siteInfo = {
   display: false,
-  zhTitle: '新一代信息技术孵化平台',
+  zhTitle: '产学研用协同创新数字化平台',
   logo_url: `${import.meta.env.VITE_BASE_URL}/src/assets/logo-jilinbai.png`
 }
 // 目录设置

src/router/index.js

@@ -27,18 +27,6 @@ export const constantRoutes = [
     meta: { title: '系统登录' },
     component: () => import('@/views/login/index.vue')
   },
-  {
-    path: '/hatch',
-    name: 'Hatch',
-    meta: { title: '孵化大脑' },
-    component: () => import('@/views/hatch/index.vue')
-  },
-  {
-    path: '/video',
-    name: 'Video',
-    meta: { title: '视频播放' },
-    component: () => import('@/views/video/index.vue')
-  },
   {
     path: '/',
     name: 'Layout',
@@ -60,6 +48,12 @@ export const constantRoutes = [
         meta: { title: i18n.global.t('menus.center') },
         component: () => import('@/views/account/center/index.vue')
       },
+      {
+        path: '/elevenHatch',
+        name: 'elevenHatch',
+        meta: { title: i18n.global.t('menus.elevenHatch') },
+        component: () => import('@/views/elevenHatch/index.vue')
+      },
       {
         path: '401',
         component: () => import('@/views/error-page/401.vue'),

src/views/elevenHatch/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <div class="elevenHatch">
+    <el-row>
+      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+        <div class="head">
+          <div class="head_1">{{ name }}孵化器管理驾驶舱</div>
+          <div class="head_2" id="showTime">{{ formattedTime }}</div>
+        </div>
+        <div class="center">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div class="center_1">
+                <div class="boxall">
+                  <div class="alltitle">孵化进度</div>
+                  <echarts3></echarts3>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">孵化项目列表</div>
+                  <div class="wraptit"><span>项目名称</span><span>金额</span><span>风险概率</span><span>时间</span></div>
+                  <div class="one">
+                    <vue3-seamless-scroll :list="oneList" :hover="true" :step="0.2" :wheel="true" :isWatch="true" class="scroll">
+                      <div class="wrap" v-for="(item, index) in oneList" :key="index">
+                        <div class="other">{{ item.name }}</div>
+                        <div class="other">{{ item.money }}</div>
+                        <div class="other">{{ item.number }}</div>
+                        <div class="other">{{ item.time }}</div>
+                      </div>
+                    </vue3-seamless-scroll>
+                  </div>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">行业领域占比情况</div>
+                  <echarts1></echarts1>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="center_1">
+                <div class="boxall" style="height: 170px">
+                  <div class="clearfix navboxall" style="height: 100%">
+                    <div class="pulll_left num">
+                      <div class="numbt">总体情况<span>(单位：家)</span></div>
+                      <div class="numtxt">190</div>
+                    </div>
+                    <div class="pulll_right zhibiao">
+                      <div class="zb1">
+                        <span>工研院运营</span>
+                        <echarts5></echarts5>
+                      </div>
+                      <div class="zb2">
+                        <span>参股孵化器</span>
+                        <echarts6></echarts6>
+                      </div>
+                      <div class="zb3">
+                        <span>合作孵化器</span>
+                        <echarts7></echarts7>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">年度项目完成对比</div>
+                  <echarts2></echarts2>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">投资收益对比</div>
+                  <echarts4></echarts4>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="center_1">
+                <div class="boxall bottom">
+                  <div class="alltitle">视频监控</div>
+                  <div v-for="(item, index) in twoList" :key="index">
+                    <el-image class="image" :src="item.url" fit="fill" />
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+
+import echarts1 from './path/echarts1.vue'
+import echarts2 from './path/echarts2.vue'
+import echarts3 from './path/echarts3.vue'
+import echarts4 from './path/echarts4.vue'
+import echarts5 from './path/echarts5.vue'
+import echarts6 from './path/echarts6.vue'
+import echarts7 from './path/echarts7.vue'
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+const oneList = ref([
+  { name: '鱿鱼卤制品的研究', money: '110万', number: '10%', time: '2023-4-22' },
+  { name: '一种快速装置自净系统', money: '190万', number: '20%', time: '2023-6-15' },
+  { name: '玻璃表面清洁技术', money: '90万', number: '33%', time: '2023-5-30' },
+  { name: '网上信息安全处理', money: '180万', number: '14%', time: '2023-7-12' },
+  { name: '视觉检测', money: '119万', number: '10%', time: '2023-5-14' },
+  { name: '无纺布气味去除', money: '120万', number: '20%', time: '2023-6-15' },
+  { name: '功能性色母开发', money: '160万', number: '10%', time: '2023-5-30' }
+])
+import video_1 from './images/video_1.jpg'
+import video_2 from './images/video_2.jpg'
+import video_3 from './images/video_3.jpg'
+import video_4 from './images/video_4.jpg'
+const twoList = ref([{ url: video_1 }, { url: video_2 }, { url: video_3 }, { url: video_4 }])
+const name = ref('长春市')
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await updateTime()
+  if (route.query.name) name.value = route.query.name
+  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">
+.elevenHatch {
+  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: 70px;
+    background: url(./images/head_bg.png) no-repeat center center;
+    background-size: 100% 100%;
+    .head_1 {
+      color: #fff;
+      text-align: center;
+      font-size: 38px;
+      line-height: 38px;
+      margin: 20px 0;
+    }
+    .head_2 {
+      position: absolute;
+      right: 10px;
+      top: 5px;
+      line-height: 20px;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 20px;
+      padding-right: 10px;
+      font-family: electronicFont;
+    }
+  }
+  .center {
+    margin: 0 10px;
+    .center_1 {
+      .navboxall {
+        height: calc(100% - 30px);
+      }
+      .boxall {
+        padding: 15px;
+        background: rgba(0, 0, 0, 0.2);
+        position: relative;
+        margin-bottom: 10px;
+        z-index: 10;
+      }
+      .bottom {
+        margin-bottom: 0;
+      }
+
+      .alltitle {
+        font-size: 20px;
+        color: #fff;
+        position: relative;
+        padding-left: 12px;
+        margin-bottom: 10px;
+      }
+
+      .alltitle:before {
+        width: 5px;
+        height: 20px;
+        top: 2px;
+        position: absolute;
+        content: '';
+        background: #49bcf7;
+        border-radius: 20px;
+        left: 0;
+      }
+      .image {
+        width: 100%;
+        height: 187px;
+      }
+      .wraptit span {
+        display: inline-block;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .wraptit {
+        text-align: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 0 0 10px 0;
+        margin-bottom: 10px;
+      }
+      .wraptit span:nth-child(1) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(2) {
+        width: 20%;
+      }
+
+      .wraptit span:nth-child(3) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(4) {
+        width: 20%;
+      }
+
+      .clearfix {
+        display: flex;
+        align-items: center;
+      }
+      .num,
+      .zhibiao {
+        height: 100%;
+        width: 50%;
+      }
+
+      .zb1,
+      .zb2,
+      .zb3 {
+        float: left;
+        width: 33.3333%;
+        height: 100%;
+      }
+
+      #zb1,
+      #zb2,
+      #zb3 {
+        height: calc(100% - 30px);
+      }
+
+      .zhibiao span {
+        padding-top: 20px;
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+      }
+
+      .num {
+        padding-right: 20px;
+      }
+
+      .numbt {
+        font-size: 26px;
+        color: #fff;
+        padding-top: 14px;
+      }
+
+      .numbt span {
+        font-size: 20px;
+        padding-left: 10px;
+        color: #fff;
+      }
+
+      .numtxt {
+        color: #fef000;
+        font-size: 40px;
+        font-family: arial;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 10px 0;
+        margin: 18px 0;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+      .one {
+        height: 72px;
+        overflow: hidden;
+        .scroll {
+          width: 100%;
+          .wrap {
+            display: flex;
+            justify-content: space-between;
+            border: 1px solid rgba(25, 186, 139, 0.17);
+            padding: 10px;
+            margin: 0 0 10px 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: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/elevenHatch/path/echarts1.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 250px;
+  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: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 160,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      },
+      orient: 'vertical',
+      data: ['制造业', '服务业', '农业', '金融行业', '电子商务行业']
+    },
+    calculable: true,
+    series: [
+      {
+        name: ' ',
+        color: [
+          '#62c98d',
+          '#2f89cf',
+          '#4cb9cf',
+          '#53b666',
+          '#62c98d',
+          '#205acf',
+          '#c9c862',
+          '#c98b62',
+          '#c962b9',
+          '#7562c9',
+          '#c96262',
+          '#c25775',
+          '#00b7be'
+        ],
+        type: 'pie',
+        radius: [30, 70],
+        center: ['35%', '50%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: [
+          {
+            value: 10,
+            name: '制造业'
+          },
+          {
+            value: 5,
+            name: '服务业'
+          },
+          {
+            value: 15,
+            name: '农业'
+          },
+          {
+            value: 25,
+            name: '金融行业'
+          },
+          {
+            value: 20,
+            name: '电子商务行业'
+          }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/elevenHatch/path/echarts2.vue

@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2"></div>
+  </div>
+</template>
+<style scoped>
+.echarts2 {
+  height: 260px;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+function drawEcharts2() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: [
+        {
+          name: '省重点'
+        },
+        {
+          name: '市重点'
+        },
+        {
+          name: '完成率'
+        }
+      ],
+      top: '0%',
+      textStyle: {
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ],
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '14'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '金额',
+        min: 0,
+        max: 50,
+        interval: 10,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '完成率',
+        show: true,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#001e94'
+          }
+        }
+      }
+    ],
+    grid: {
+      top: '20%',
+      right: '30',
+      bottom: '30',
+      left: '30'
+    },
+    series: [
+      {
+        name: '省重点',
+        type: 'bar',
+        data: [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#609db8'
+                },
+                {
+                  offset: 1,
+                  color: '#609db8'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        }
+      },
+      {
+        name: '市重点',
+        type: 'bar',
+        data: [4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#66b8a7'
+                },
+                {
+                  offset: 1,
+                  color: '#66b8a7'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        },
+        barGap: '0'
+      },
+      {
+        name: '完成率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00'
+          }
+        },
+        smooth: true
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+}
+</script>

src/views/elevenHatch/path/echarts3.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div ref="echarts3" class="echarts3"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 250px;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  var myChart3 = echarts.init(echarts3.value)
+  var option3 = {
+    tooltip: {
+      show: false
+    },
+    grid: {
+      top: '0%',
+      left: '90',
+      right: '14%',
+      bottom: '0%'
+    },
+    xAxis: {
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      axisLabel: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 14,
+        width: 85, //将内容的宽度固定
+        overflow: 'truncate', //超出的部分截断
+        ellipsis: '...' //截断的部分用...代替
+      },
+      data: [
+        '鱿鱼卤制品的研究',
+        '一种快速装置自净系统',
+        '玻璃表面清洁技术',
+        '网上信息安全处理',
+        '视觉检测',
+        '无纺布气味去除',
+        '功能性色母开发'
+      ],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        label: {
+          show: true,
+          zlevel: 10000,
+          position: 'right',
+          padding: 10,
+          color: '#49bcf7',
+          fontSize: 14,
+          formatter: '{c}%'
+        },
+        itemStyle: {
+          color: '#49bcf7'
+        },
+        barWidth: '15',
+        data: [49, 80, 67, 99, 12, 19, 39, 84],
+        z: 10
+      },
+      {
+        type: 'bar',
+        barGap: '-100%',
+        itemStyle: {
+          color: '#fff',
+          opacity: 0.1
+        },
+        barWidth: '15',
+        data: [100, 100, 100, 100, 100, 100, 100, 100],
+        z: 5
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/elevenHatch/path/echarts4.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <div ref="echarts4" class="echarts4"></div>
+  </div>
+</template>
+<style scoped>
+.echarts4 {
+  height: 242px;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  drawEcharts4()
+})
+function drawEcharts4() {
+  var myChart4 = echarts.init(echarts4.value)
+  var option4 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: ['销售额', '利润'],
+      top: '0',
+      textStyle: {
+        color: '#fff'
+      },
+      itemGap: 20
+    },
+    grid: {
+      left: '0',
+      right: '20',
+      top: '10',
+      bottom: '20',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ]
+      },
+      {}
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 163, 64, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(24, 163, 64, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00',
+            borderColor: 'rgba(137,189,2,0.27)',
+            borderWidth: 12
+          }
+        },
+        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+      },
+      {
+        name: '利润',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(39, 122,206, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(39, 122,206, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#277ace',
+            borderColor: 'rgba(0,136,212,0.2)',
+            borderWidth: 12
+          }
+        },
+        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+}
+</script>

src/views/elevenHatch/path/echarts5.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div ref="echarts5" class="echarts5"></div>
+  </div>
+</template>
+<style scoped>
+.echarts5 {
+  height: 110px;
+  width: 150px;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts5 = ref()
+onMounted(() => {
+  drawEcharts5()
+})
+function drawEcharts5() {
+  var myChart5 = echarts.init(echarts5.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option5 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#49bcf7',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+}
+</script>

src/views/elevenHatch/path/echarts6.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div ref="echarts6" class="echarts6"></div>
+  </div>
+</template>
+<style scoped>
+.echarts6 {
+  height: 110px;
+  width: 150px;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts6 = ref()
+onMounted(() => {
+  drawEcharts6()
+})
+function drawEcharts6() {
+  var myChart6 = echarts.init(echarts6.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option6 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#cdba00',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: b + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((b / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart6.setOption(option6)
+}
+</script>

src/views/elevenHatch/path/echarts7.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div ref="echarts7" class="echarts7"></div>
+  </div>
+</template>
+<style scoped>
+.echarts7 {
+  height: 110px;
+  width: 150px;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts7 = ref()
+onMounted(() => {
+  drawEcharts7()
+})
+function drawEcharts7() {
+  var myChart7 = echarts.init(echarts7.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option7 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#62c98d',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart7.setOption(option7)
+}
+</script>

src/views/hatch/index.vue

@@ -4,18 +4,18 @@
       <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_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="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>
+                      <span class="textOne">{{ i.label }}</span>
                     </div>
                   </div>
                   <div class="boxfoot"></div>
@@ -35,15 +35,12 @@
                   </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="titleall">孵化器数量</div>
                   <div class="list">
-                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                    <div class="list_1" v-for="i in listFive" :key="i.value">
                       <h2>{{ i.value }}</h2>
                       <span>{{ i.label }}</span>
                     </div>
@@ -55,7 +52,7 @@
             <ul class="clearfix">
               <li>
                 <div class="boxall">
-                  <div class="titleall">模块标题</div>
+                  <div class="titleall">孵化器行业领域数量</div>
                   <div class="list thr">
                     <div class="list_1" v-for="i in listThr" :key="i.value">
                       <h2>{{ i.value }}</h2>
@@ -65,10 +62,14 @@
                   <div class="boxfoot"></div>
                 </div>
               </li>
-              <li></li>
+              <li>
+                <div class="mapbox">
+                  <map1 class="map"></map1>
+                </div>
+              </li>
               <li>
                 <div class="boxall">
-                  <div class="titleall">优质企业</div>
+                  <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">
@@ -85,7 +86,7 @@
             <ul class="clearfix" style="display: flex; justify-content: space-between">
               <li style="width: 49.5%">
                 <div class="boxall">
-                  <div class="titleall">模块标题</div>
+                  <div class="titleall">孵化器信息完成度</div>
                   <div class="five">
                     <echarts1></echarts1>
                   </div>
@@ -94,7 +95,7 @@
               </li>
               <li style="width: 49.5%">
                 <div class="boxall">
-                  <div class="titleall">模块标题</div>
+                  <div class="titleall">孵化器比例</div>
                   <div class="six">
                     <echarts2></echarts2>
                   </div>
@@ -105,7 +106,7 @@
           </div>
         </el-col>
       </el-row>
-      <div class="copyright">版权所有：Copyright©2007-2024 吉林省华欣数字科技股份有限公司 │ 吉ICP备14005689号</div>
+      <div class="copyright">Copyright ©2022 吉林省工业技术研究院集团有限公司 All Rights Reserved</div>
     </div>
   </myMain>
 </template>
@@ -119,26 +120,32 @@ const loading = ref(false)
 // 时间
 const formattedTime = ref('')
 const listOne = ref([
-  { value: '1824', label: '华东地区' },
-  { value: '1920', label: '华南地区' },
-  { value: '19%', label: '华西地区' },
-  { value: '1824', label: '华北地区' }
+  { value: '24', label: '长春市' },
+  { value: '20', label: '吉林市' },
+  { value: '20', label: '四平市' },
+  { value: '18', label: '辽源市' }
+])
+const listFive = ref([
+  { value: '24', label: '通化市' },
+  { value: '20', label: '白山市' },
+  { value: '19', label: '松原市' },
+  { value: '18', label: '白城市' }
 ])
 const listTwo = ref([
-  { value: '1942', label: '字段名称' },
-  { value: '98612', label: '字段名称' },
-  { value: '2091', label: '字段名称' }
+  { value: '194', label: '工研院运营' },
+  { value: '112', label: '参股孵化器' },
+  { value: '82', 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: '字段名称' }
+  { value: '942', label: '先进制造' },
+  { value: '612', label: '电子信息' },
+  { value: '91', label: '新材料' },
+  { value: '142', label: '新能源与节能' },
+  { value: '912', label: '核应用技术' },
+  { value: '291', label: '环境保护' },
+  { value: '142', label: '现代交通' },
+  { value: '9612', label: '现代农业' },
+  { value: '209', label: '其他' }
 ])
 const listFour = ref([
   { name: '深圳腾讯科技有限公司', number: '100', time: '2023-4-22' },
@@ -185,7 +192,7 @@ onBeforeUnmount(() => {
 </script>
 <style scoped lang="scss">
 .main {
-  min-height: 100%;
+  min-height: 88vh;
   width: 100%;
   position: relative;
   background: url('./images/bg.jpg');

src/views/hatch/path/echarts1.vue

@@ -10,7 +10,7 @@
 .round {
   display: flex;
   justify-content: space-between;
-  height: 120px;
+  height: 220px;
   width: 100%;
   .pie {
     width: 25%;
@@ -59,7 +59,7 @@ function bt01() {
         }
       },
       {
-        text: '字段名称4',
+        text: '光电信息产业园',
         x: 'center',
         y: '20',
         textStyle: {
@@ -148,7 +148,7 @@ function bt02() {
         }
       },
       {
-        text: '字段名称1',
+        text: '芯光产业园',
         x: 'center',
         y: '20',
         textStyle: {
@@ -237,7 +237,7 @@ function bt03() {
         }
       },
       {
-        text: '字段名称2',
+        text: '吉兴产业园辅园',
         x: 'center',
         y: '20',
         textStyle: {
@@ -314,7 +314,7 @@ function bt04() {
         }
       },
       {
-        text: '字段名称3',
+        text: '珩光汽车电子产业园',
         x: 'center',
         y: '20',
         textStyle: {

src/views/hatch/path/echarts2.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="echarts2" class="echarts2" style="height: 120px; width: 100%"></div>
+    <div ref="echarts2" class="echarts2" style="height: 220px; width: 100%"></div>
   </div>
 </template>
 <style scoped></style>
@@ -21,7 +21,7 @@ function drawEcharts2() {
       }
     },
     legend: {
-      data: ['字段名称1', '字段名称2'],
+      data: ['省级', '市级'],
       top: '5%',
       textStyle: {
         color: '#fff',
@@ -95,7 +95,7 @@ function drawEcharts2() {
     ],
     series: [
       {
-        name: '字段名称1',
+        name: '省级',
         type: 'line',
         smooth: true,
         data: [5, 2, 6, 4, 5, 12, 20],
@@ -110,7 +110,7 @@ function drawEcharts2() {
         }
       },
       {
-        name: '字段名称2',
+        name: '市级',
         type: 'line',
         smooth: true,
         data: [7, 11, 8, 13, 10, 13, 10],

src/views/hatch/path/map.vue

@@ -12,6 +12,7 @@
 import * as echarts from 'echarts'
 import jilinJson from '../json/jilin.json'
 const chinaMap = ref()
+const router = useRouter()
 onMounted(() => {
   drawChina()
 })
@@ -32,25 +33,25 @@ var chinaDatas = [
   [
     {
       name: '长春市',
-      value: 0
+      value: 1
     }
   ],
   [
     {
       name: '延边朝鲜族自治州',
-      value: 0
+      value: 2
     }
   ],
   [
     {
       name: '白山市',
-      value: 0
+      value: 1
     }
   ],
   [
     {
       name: '白城市',
-      value: 2
+      value: 3
     }
   ],
   [
@@ -62,13 +63,13 @@ var chinaDatas = [
   [
     {
       name: '辽源市',
-      value: 0
+      value: 2
     }
   ],
   [
     {
       name: '松原市',
-      value: 0
+      value: 3
     }
   ],
   [
@@ -80,7 +81,7 @@ var chinaDatas = [
   [
     {
       name: '四平市',
-      value: 1
+      value: 2
     }
   ]
 ]
@@ -306,5 +307,10 @@ function drawChina() {
     series: series
   }
   myChart.setOption(option)
+  myChart.on('click', function (params) {
+    if (params.componentType === 'series') {
+      router.push({ path: '/elevenHatch', query: { name: params.name } })
+    }
+  })
 }
 </script>

src/views/video/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
-          <video ref="videoElement" width="100%" height="630px" controls @timeupdate="onTimeUpdate">
-            <source :src="video" type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-          <p>观看时长: {{ watchedDuration }} 秒</p>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup>
-// 图片引入
-import video from '/images/video.mp4'
-// 加载中
-const loading = ref(false)
-const videoElement = ref(null)
-const watchedDuration = ref(0)
-// 请求
-onMounted(async () => {
-  loading.value = true
-  // 监听播放结束事件，如果需要的话
-  videoElement.value.addEventListener('ended', () => {
-    console.log('视频播放结束')
-  })
-  loading.value = false
-})
-const onTimeUpdate = () => {
-  // 获取当前视频的播放时间（以秒为单位）
-  const currentTime = videoElement.value.currentTime
-  // 更新观看时长
-  watchedDuration.value = currentTime
-}
-
-onUnmounted(() => {
-  // 组件卸载时移除事件监听器
-  videoElement.value.removeEventListener('ended', onTimeUpdate)
-})
-</script>
-<style scoped lang="scss"></style>