cxyy-web/src/views/elevenHatch/index.vue

<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: 430px;
        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>