修改

src/components/dataV/mixin/autoResize.js

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

src/components/dataV/myMain.vue

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

src/components/dataV/util/index.js

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

src/main.js

@@ -25,12 +25,15 @@ import 'default-passive-events'
 
 import 'animate.css/animate.min.css'
 
+import DataVVue3 from '@kjgl77/datav-vue3'
+
 const app = createApp(App)
 globalComponents(app)
 setupStore(app)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
+app.use(DataVVue3)
 app.use(router)
 app.use(Antd)
 app.use(ElementPlus, { locale })

src/router/index.js

@@ -15,6 +15,12 @@ const router = createRouter({
       name: 'home',
       meta: { title: '产学研用协同创新数字化平台', keepAlive: true },
       component: () => import('@/views/home/index.vue')
+    },
+    {
+      path: '/screen',
+      name: 'screen',
+      meta: { title: '产学研用协同创新数字化平台', keepAlive: true },
+      component: () => import('@/views/screen/index.vue')
     }
   ]
 })

src/views/match/two.vue

@@ -17,7 +17,7 @@
     </el-row>
     <el-col :span="6" class="export">
       <div class="one_left" @click="toExport">导出</div>
-      <div class="one_left" :disabled="selectionList && selectionList.length > 0 ? false : true" @click="toFinals">选择初审名单</div>
+      <div class="one_left" v-if="info.ext_status == '4'" :disabled="selectionList && selectionList.length > 0 ? false : true" @click="toFinals">选择决赛名单</div>
     </el-col>
     <el-col :span="24" class="two">
       <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }" @selection-change="handleSelectionChange">

src/views/screen/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <dv-full-screen-container>
+    <div class="screen">
+      <div class="one">
+        <div class="left" style="left: 10%"></div>
+        <div class="center">
+          <span>{{ info.name }}</span>
+          <img :src="bg_1" alt="" class="ding_img" />
+        </div>
+        <div class="right" style="right: 10%">
+          <div class="head_2" id="showTime">{{ formattedTime }}</div>
+        </div>
+      </div>
+      <div class="boxnav nav03">
+        <div class="listhead listhead1">
+          <span>字段名称</span>
+          <span>字段名称</span>
+          <span>字段名称</span>
+          <span>字段名称</span>
+          <span>字段名称</span>
+          <span>字段名称</span>
+        </div>
+        <Vue3SeamlessScroll class="scroll" :limitScrollNum="9" :list="list" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
+          <div class="listnav listnav1 scrollDiv">
+            <ul>
+              <li v-for="(item, index) in list" :key="index">
+                <span>{{ item.num1 }}</span>
+                <span>{{ item.num2 }}</span>
+                <span>{{ item.num3 }}</span>
+                <span>{{ item.num4 }}</span>
+                <span>{{ item.num5 }}</span>
+                <span class="text-green">{{ item.num6 }}</span>
+              </li>
+            </ul>
+          </div>
+        </Vue3SeamlessScroll>
+      </div>
+    </div>
+  </dv-full-screen-container>
+</template>
+
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+// 图片引入
+import bg_1 from '/images/顶图.png'
+const info = ref({ name: '赛事名称' })
+// 时间
+const formattedTime = ref('')
+const list = ref([
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' },
+  { num1: '201910-01', num2: '2658/2658', num3: '2658/2658', num4: '2658/2658', num5: '2658/2658', num6: '100%' }
+])
+// 请求
+onMounted(async () => {
+  await updateTime()
+})
+// 创建一个函数来格式化时间并更新状态
+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 // 开始计时器
+})
+</script>
+<style scoped lang="scss">
+.screen {
+  position: relative;
+  background: url(/images/loginbg.gif);
+  background-size: 100% 100%;
+  width: 100%; /* 视口宽度 */
+  height: 100%; /* 视口高度 */
+  padding: 0px;
+  margin: 0px;
+  color: #fff;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .one {
+    position: relative;
+    .left {
+      display: flex;
+      position: absolute;
+      top: 20%;
+      height: 28px;
+      .button {
+        font-size: 0.7rem;
+        color: #3a86bf;
+        width: 115px;
+        height: 28px;
+        text-align: center;
+        line-height: 27px;
+        cursor: default;
+      }
+      .button_1 {
+        background: url('../assets/images/上tab默认1.png') no-repeat;
+        background-size: cover;
+      }
+      .button_2 {
+        background: url('../assets/images/上tab默认1.png') no-repeat;
+        background-size: cover;
+      }
+    }
+    .center {
+      .ding_img {
+        width: 100%;
+      }
+      span {
+        position: absolute;
+        top: 25%;
+        left: 50%;
+        font-size: 2rem;
+        transform: translate(-50%, 0);
+        color: #b2e5fa;
+      }
+    }
+    .right {
+      display: flex;
+      position: absolute;
+      top: 20%;
+      height: 28px;
+      .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;
+        width: 220px;
+      }
+      .button {
+        font-size: 0.7rem;
+        color: #3a86bf;
+        width: 115px;
+        height: 28px;
+        text-align: center;
+        line-height: 27px;
+        cursor: default;
+      }
+      .button_3 {
+        background: url('../assets/images/上tab选中2.png') no-repeat;
+        background-size: cover;
+      }
+      .button_4 {
+        background: url('../assets/images/上tab选中2.png') no-repeat;
+        background-size: cover;
+      }
+    }
+  }
+  .nav03 {
+    height: calc(100% - 5rem);
+    padding-top: 2rem;
+    .scroll {
+      overflow: hidden;
+    }
+  }
+
+  .listhead {
+    height: 5rem;
+    display: flex;
+    justify-content: space-between;
+  }
+  .listnav {
+    height: calc(100% - 5rem);
+  }
+  .listnav ul {
+    margin: 0;
+    padding: 0;
+  }
+  .listnav ul li {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .listhead span,
+  .listnav li span {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    height: 5rem;
+  }
+  .listhead1 span,
+  .listnav1 li span {
+    border: 1px solid #3486da;
+  }
+  .listnav ul li span {
+    font-size: 2rem;
+  }
+  .listnav2 ul li:nth-child(odd) {
+    background: #0c2854;
+  }
+  .listhead1 span {
+    background: #0c2854;
+    font-size: 2rem;
+    color: #3486da;
+    font-weight: bold;
+  }
+  .listhead2 span {
+    font-size: 2rem;
+    color: #3486da;
+    border-bottom: 1px solid #0c2854;
+    font-weight: bold;
+  }
+}
+</style>