修改孵化大脑

src/views/elevenHatch copy/index.vue

@@ -0,0 +1,343 @@
+<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">孵化基地管理驾驶舱</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>
+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 }])
+
+// 请求
+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">
+.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: $global-font-size-20;
+        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: $global-font-size-18;
+        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: $global-font-size-18;
+      }
+
+      .num {
+        padding-right: 20px;
+      }
+
+      .numbt {
+        font-size: $global-font-size-26;
+        color: #fff;
+        padding-top: 14px;
+      }
+
+      .numbt span {
+        font-size: $global-font-size-20;
+        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 copy/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 copy/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 copy/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 copy/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 copy/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 copy/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 copy/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/elevenHatch/index.vue

@@ -3,7 +3,7 @@
     <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">{{ info.name || '孵化器基地' }}管理驾驶舱</div>
           <div class="head_2" id="showTime">{{ formattedTime }}</div>
         </div>
         <div class="center">
@@ -11,21 +11,12 @@
             <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 class="alltitle">孵化基地汇总</div>
+                  <!-- <echarts3></echarts3> -->
+                  <div class="center_list">
+                    <div class="list_num" v-for="(item, index) in thrList" :key="index">
+                      {{ item.num }}<span>{{ item.name }}</span>
+                    </div>
                   </div>
                 </div>
                 <div class="boxall">
@@ -36,7 +27,7 @@
             </el-col>
             <el-col :span="12">
               <div class="center_1">
-                <div class="boxall" style="height: 170px">
+                <div class="boxall" style="height: 175px">
                   <div class="clearfix navboxall" style="height: 100%">
                     <div class="pulll_left num">
                       <div class="numbt">总体情况<span>(单位：家)</span></div>
@@ -44,36 +35,36 @@
                     </div>
                     <div class="pulll_right zhibiao">
                       <div class="zb1">
-                        <span>工研院运营</span>
+                        <span>从业人员</span>
                         <echarts5></echarts5>
                       </div>
                       <div class="zb2">
-                        <span>参股孵化基地</span>
+                        <span>高新技术企业</span>
                         <echarts6></echarts6>
                       </div>
                       <div class="zb3">
-                        <span>合作孵化基地</span>
+                        <span>专精特新企业</span>
                         <echarts7></echarts7>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="boxall">
-                  <div class="alltitle">年度项目完成对比</div>
-                  <echarts2></echarts2>
+                  <div class="alltitle">孵化基地荣誉</div>
+                  <echarts4></echarts4>
                 </div>
                 <div class="boxall">
-                  <div class="alltitle">投资收益对比</div>
-                  <echarts4></echarts4>
+                  <div class="alltitle">孵化基地企业产业占比</div>
+                  <echarts2></echarts2>
                 </div>
               </div>
             </el-col>
             <el-col :span="6">
               <div class="center_1">
                 <div class="boxall bottom">
-                  <div class="alltitle">视频监控</div>
+                  <div class="alltitle">孵化基地风采</div>
                   <div v-for="(item, index) in twoList" :key="index">
-                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-image class="image" :src="getUrl(item.uri)" fit="fill" />
                   </div>
                 </div>
               </div>
@@ -86,6 +77,15 @@
 </template>
 
 <script setup>
+// 用户信息
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 接口
+import { IncubatorStore } from '@/store/api/user/incubator'
+import { IncubatorYearStore } from '@/store/api/user/incubatorYear'
+const incubatorStore = IncubatorStore()
+const yearStore = IncubatorYearStore()
 import echarts1 from './path/echarts1.vue'
 import echarts2 from './path/echarts2.vue'
 import echarts3 from './path/echarts3.vue'
@@ -112,12 +112,34 @@ 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 thrList = ref([
+  { num: 266, name: '中试场地' },
+  { num: 266, name: '单位人数' },
+  { num: 266, name: '省级导师数' },
+  { num: 266, name: '开展活动总数' },
+  { num: 266, name: '参加活动人次' },
+  { num: 266, name: '合作孵化基地' },
+  { num: 266, name: '开展活动总数' },
+  { num: 266, name: '参加活动人次' },
+  { num: 266, name: '合作孵化基地' }
+])
+const info = ref({})
 // 请求
 onMounted(async () => {
   loading.value = true
+  await search()
   await updateTime()
   loading.value = false
 })
+const search = async () => {
+  if (user.value.id) {
+    let res = await incubatorStore.query({ user: user.value.id })
+    if (res.errcode == '0') {
+      info.value = res.data[0]
+      if (res.data[0].file && res.data[0].file.length > 0) twoList.value = res.data[0].file
+    }
+  }
+}
 // 创建一个函数来格式化时间并更新状态
 const updateTime = () => {
   const now = new Date()
@@ -142,6 +164,9 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clearInterval(timer) // 组件卸载前清除计时器
 })
+const getUrl = (item) => {
+  if (item) return `${import.meta.env.VITE_APP_HOST}${item}`
+}
 </script>
 <style scoped lang="scss">
 .elevenHatch {
@@ -197,6 +222,64 @@ onBeforeUnmount(() => {
         position: relative;
         margin-bottom: 10px;
         z-index: 10;
+        .center_list {
+          display: flex;
+          flex-wrap: wrap;
+          .list_num {
+            position: relative;
+            width: 120px;
+            height: 120px;
+            line-height: 100%;
+            margin: 5px auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            font-size: 32px;
+            font-family: electronicFont;
+            color: #fef000;
+            span {
+              color: #fff !important;
+              font-size: 16px !important;
+            }
+          }
+          .list_num:before {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            content: '';
+            background: url(../elevenHatch/images/img1.png) center center;
+            border-radius: 100px;
+            background-size: 100% 100%;
+            opacity: 0.1;
+            left: 0;
+            top: 0;
+            animation: myfirst2 15s infinite linear;
+          }
+          .list_num:after {
+            position: absolute;
+            width: 86%;
+            background: url(../elevenHatch/images/img2.png) center center;
+            border-radius: 100px;
+            background-size: 100% 100%;
+            opacity: 0.1;
+            height: 86%;
+            content: '';
+            left: 7%;
+            top: 7%;
+            animation: myfirst 15s infinite linear;
+          }
+          @keyframes myfirst {
+            to {
+              transform: rotate(-360deg);
+            }
+          }
+          @keyframes myfirst2 {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        }
       }
       .bottom {
         margin-bottom: 0;

src/views/elevenHatch/path/echarts1.vue

@@ -3,7 +3,7 @@
 </template>
 <style scoped lang="scss">
 .echarts1 {
-  height: 250px;
+  height: 296px;
   width: 100%;
 }
 </style>
@@ -23,7 +23,7 @@ function echarts1View() {
     legend: {
       right: 0,
       top: 20,
-      height: 160,
+      height: 180,
       itemWidth: 10,
       itemHeight: 10,
       itemGap: 10,
@@ -32,27 +32,13 @@ function echarts1View() {
         fontSize: 12
       },
       orient: 'vertical',
-      data: ['制造业', '服务业', '农业', '金融行业', '电子商务行业']
+      data: ['生物医药', '化工新材料', '先进装备制造', '高端服务', '光电子', '电子信息']
     },
     calculable: true,
     series: [
       {
         name: ' ',
-        color: [
-          '#62c98d',
-          '#2f89cf',
-          '#4cb9cf',
-          '#53b666',
-          '#62c98d',
-          '#205acf',
-          '#c9c862',
-          '#c98b62',
-          '#c962b9',
-          '#7562c9',
-          '#c96262',
-          '#c25775',
-          '#00b7be'
-        ],
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
         type: 'pie',
         radius: [30, 70],
         center: ['35%', '50%'],
@@ -76,23 +62,27 @@ function echarts1View() {
         data: [
           {
             value: 10,
-            name: '制造业'
+            name: '生物医药'
           },
           {
             value: 5,
-            name: '服务业'
+            name: '化工新材料'
           },
           {
             value: 15,
-            name: '农业'
+            name: '先进装备制造'
           },
           {
             value: 25,
-            name: '金融行业'
+            name: '高端服务'
           },
           {
             value: 20,
-            name: '电子商务行业'
+            name: '光电子'
+          },
+          {
+            value: 20,
+            name: '电子信息'
           }
         ]
       }

src/views/elevenHatch/path/echarts2.vue

@@ -17,180 +17,107 @@ onMounted(() => {
 })
 function drawEcharts2() {
   var myChart2 = echarts.init(echarts2.value)
+  var vdata = [
+    [4, 3, 5, 9, 3, 8, 3, 7, 2, 4, 6, 4],
+    [5, 5, 7, 3, 6, 8, 9, 4, 3, 7, 2, 2],
+    [4, 3, 5, 9, 5, 8, 3, 7, 2, 4, 6, 4]
+  ]
+  var xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+  var ydata = [
+    { color1: '#8bd46e', color2: '#09bcb7', name: '预计营业收入' },
+    { color1: '#248ff7', color2: '#6851f1', name: '预计收入' },
+    { color1: '#fccb05', color2: '#f5804d', name: '预计税金收入' }
+  ]
+  var series = []
+  vdata.forEach((value, index) => {
+    var series_option = {
+      name: ydata[index].name,
+      type: 'bar',
+      itemStyle: {
+        normal: {
+          barBorderRadius: 15,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: ydata[index].color1
+            },
+            {
+              offset: 1,
+              color: ydata[index].color2
+            }
+          ])
+        }
+      },
+      barWidth: '20',
+      data: value
+    }
+    series.push(series_option)
+  })
   var option2 = {
+    legend: {
+      data: ydata,
+      type: 'scroll',
+      textStyle: { color: '#fff' },
+      top: '0'
+    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        lineStyle: {
-          color: '#57617B'
-        }
+        type: 'shadow'
       }
     },
-    legend: {
-      data: [
-        {
-          name: '省重点'
-        },
-        {
-          name: '市重点'
-        },
-        {
-          name: '完成率'
-        }
-      ],
-      top: '0%',
-      textStyle: {
-        color: 'rgba(255,255,255,0.9)'
-      }
+    color: ['#62c98d', '#2f89cf', '#f5804d'],
+    grid: {
+      top: '14%',
+      left: '15',
+      right: '35',
+      bottom: '12%',
+      containLabel: true
     },
+
     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'
-          }
-        }
+        axisLabel: { textStyle: { color: 'rgba(255,255,255,.6)' } },
+        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
+        data: xdata
       }
     ],
     yAxis: [
       {
+        name: '',
         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)'
-          }
-        },
+        axisTick: { show: false },
         splitLine: {
           show: true,
           lineStyle: {
-            color: '#001e94'
+            color: '#2f2a7a'
           }
-        }
+        }, //x轴线
+        axisLabel: { textStyle: { color: 'rgba(255,255,255,.6)' } },
+        axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }
       }
     ],
-    grid: {
-      top: '20%',
-      right: '30',
-      bottom: '30',
-      left: '30'
-    },
-    series: [
+    dataZoom: [
       {
-        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
-          }
+        show: true,
+        height: 12,
+        xAxisIndex: [0],
+        bottom: 5,
+        start: 10,
+        end: 80,
+        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+        handleSize: '110%',
+        handleStyle: {
+          color: '#d3dee5'
         },
-        itemStyle: {
-          normal: {
-            color: '#cdba00'
-          }
+        textStyle: {
+          color: '#fff'
         },
-        smooth: true
+        borderColor: 'rgba(255,255,255,.3)'
       }
-    ]
+    ],
+    series: series
   }
   myChart2.setOption(option2)
 }