大屏

Mr.Shi

2023-08-22 961a54152717ed343a6e16e923c67ef4afc1d5f1

 screen_standard/src/views/index.vue

@@ -7,18 +7,18 @@
                    <span>当日员工产量TOP10</span>
                </div>
                <div class="content_left_item1_content">
                    <div class="content_left_item1_content_row" v-for="(item, index) in 10" :key="index">
                    <div class="content_left_item1_content_row" v-for="(item, index) in data.production" :key="index">
                        <div class="content_left_item1_content_row_name">
                            <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
                            <span>赵立{{ index }}</span>
                            <span>{{item.userName}}</span>
                        </div>
                        <div class="content_left_item1_content_row_line">
                            <el-progress
                                :show-text="false"
                                :percentage="50">
                                :percentage="item.doneNum">
                            </el-progress>
                        </div>
                        <div class="content_left_item1_content_row_num">342</div>
                        <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div>
                    </div>
                </div>
            </div>
@@ -131,7 +131,7 @@
                    </div>
                    <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
                        <div ref="scrollContainer3" class="scroll_container">
                            <div v-for="(item, index) in 15" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                            <div v-for="(item, index) in 6" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">韩伟</div>
                                <div class="scroll_item_row">电吉他</div>
                                <div class="scroll_item_row">CP003</div>
@@ -185,7 +185,13 @@
</template>

<script setup>
    import {reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue'
    import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick, computed } from 'vue'
    import { getTop, getStockList } from '@/utils/api.js'
    import { useCounterStore } from '@/stores/counter.js'

    let data = reactive({
        production: []
    })

    let timer = ref(null)
    let timer1 = ref(null)
@@ -213,6 +219,16 @@
            activeBackground: 'tab_select@2x.png'
        }
    ])

    const enterprise = useCounterStore()

    const companyId = computed(() => {
        return enterprise.companyId
    })
    const departId = computed(() => {
        return enterprise.departId
    })

    start()
    start1()
    // start2()
@@ -235,9 +251,21 @@
    //     })
    // }
    
    // onMounted(()=> {
    //     getSensorData()
    // })
    onMounted(()=> {
        // getSensorData()
        getTop(companyId.value, departId.value)
            .then(res => {
                console.log(res)
                if (res.length > 0) {
                    res.forEach((item, index) => {
                        if (index > 1) {
                            item.doneNum1 = res[0].doneNum / item.doneNum
                        }
                    })
                    data.production = res
                }
            })
    })

    onBeforeUnmount(()=>{
        clearTimeout(timer.value)
@@ -332,7 +360,7 @@
        clearTimeout(timer4.value)
        // 定时器触发周期
        let speed4 = ref(25)
        timer3.value = setInterval(ListScroll4, speed4.value)
        timer4.value = setInterval(ListScroll4, speed4.value)
    }
    function ListScroll() {
        let scrollDom = scrollContainer.value
@@ -341,14 +369,14 @@
            scrollDom = scrollContainer.value
        }else {
            // 如果列表数量过少不进行滚动
            if(scrollDom.children.length < 4) {
            if(scrollDom.children.length < 8) {
                clearTimeout(timer.value)
                return
            }
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -372,7 +400,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -396,7 +424,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -413,14 +441,14 @@
            scrollDom = scrollContainer3.value
        }else {
            // 如果列表数量过少不进行滚动
            if(scrollDom.children.length < 7) {
            if(scrollDom.children.length < 6) {
                clearTimeout(timer3.value)
                return
            }
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -444,7 +472,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -718,7 +746,7 @@
                            }
                            .scroll_item {
                                width: 100%;
                                height: 57px;
                                height: 58px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
@@ -897,7 +925,7 @@
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 34px);
                        height: calc(100% - 33px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
@@ -910,7 +938,7 @@
                            }
                            .scroll_item {
                                width: 100%;
                                height: 36px;
                                height: 37px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {