web技术分享| 基于vue3实现自己的组件库第二章：Pagination组件

于 2022-07-11 11:56:47 发布
阅读量350 收藏
点赞数 1
分类专栏： 音视频 web技术分享 Pagination 文章标签： 前端 vue.js web Pagination vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anyRTC/article/details/125718501
版权
本文档详细介绍了如何使用Vue3构建一个包含分页、大小选择和跳转输入框的自定义组件库。内容涵盖组件模板、脚本、样式以及组件的属性和事件。组件包括切换按钮、分页导航、输入框等功能，支持预设每页大小、总页数、当前页数等属性，并提供了向前、向后翻页、大小变更等事件。
摘要由CSDN通过智能技术生成

大家好今天的内容是基于vue3实现自己的组件库系列第二章,本文默认你会安装和创建vue3项目，如果不会请参考vue官网；

Pagination.vue Template

  • v-select 组件可以先注释掉
  • v-input 组件可以先注释掉
<div class='v-pagination'>
    <div v-for='(item, index) in layout' :key='index'>
        <div class='v-pagination-select-box' v-if='item === "switch"'>
            <v-select 
            v-model='activePageSize' 
            :options='pageSizes'
            :disabled='disabled'
            @change='handleSizeChange'>
            </v-select>
        </div>
        <v-pages
        v-if='item === "pages"'
        ref='cpages'
        :total='total'
        :pagerCount='pagerCount'
        :pageSize='pageSize'
        v-model='cCurrentPage'
        :prependText='prependText'
        :suffixText='suffixText'
        :hideOnSinglePage='hideOnSinglePage'
        :disabled='disabled'
        :background='background'
        @prev-click='handlePrevClick'
        @next-click='handleNextClick'
        ></v-pages>
        <div :class='["v-pagination-input-box", { disabled }]' v-if='item === "jump"'>
            <span>前往</span>
            <v-input placeholder='' :disabled='disabled' v-model='jumpValue' @input='handleInput' @change='handleChange'></v-input>
            <span>页</span>
        </div>
    </div>
</div>

Pagination.vue Script

import VairPagination from '../../types/pagination';
import vPages from './components/Pages';
import vSelect from '../Select/Select';
import vInput from '../Input/Input';
import { ref, computed, watchEffect, watch } from 'vue';
export default {
    name: 'pagination',
    components: {
        vPages,
        vSelect,
        vInput
    },
    props: VairPagination,
    setup (props, ctx) {
        const reg = /^\+?[1-9][0-9]*$/;
        const activePageSize = ref('');
        const oldJumpValue = ref(props.currentPage);
        const jumpValue = ref(props.currentPage);
        const cCurrentPage = ref(props.currentPage);
        const cpages = ref(null);

        const pageSizes = computed(() => {
            if (Array.isArray(props.pageSizes)) {
                let arr = [];
                props.pageSizes.forEach((item, index) => {
                    if (!reg.test(item)) {
                        throw new Error('page-sizes the item It has to be an integer greater than or equal to 1');
                    }
                    arr.push({
                        label: `${item}条 / 页`,
                        value: index,
                        number: item
                    });
                });
                return arr;
            } else {
                throw new TypeError(`page-sizes wants to receive an array, but received a ${typeof props.pageSizes}`);
            }
        });

        const handleSizeChange = (option) => {
            ctx.emit('size-change', option.number);
        };

        const handlePrevClick = (index) => {
            ctx.emit('prev-click', index);
            setJumpValue();
        };

        const handleNextClick = (index) => {
            ctx.emit('next-click', index);
            setJumpValue();
        };

        const handleInput = (value) => {
            if (!reg.test(value) && value !== '') {
                jumpValue.value = oldJumpValue.value;
            } else {
                oldJumpValue.value = value;
            }
        };

        const handleChange = (value) => {
            const max = Math.ceil(props.total / props.pageSize);
            if (value < 1) {
                jumpValue.value = 1;
                oldJumpValue.value = 1;
            } else if (value > max) {
                jumpValue.value = max;
                oldJumpValue.value = max;
            }
            cCurrentPage.value = +jumpValue.value;
        };
        
        const setJumpValue = () => {
            jumpValue.value = cCurrentPage.value;
            oldJumpValue.value = cCurrentPage.value;
        };

        watchEffect(() => {
            activePageSize.value = pageSizes.value[0].label;
        });

        watchEffect(() => {
            if (!reg.test(props.pagerCount) || props.pagerCount < 7 || props.pagerCount > 21) {
                throw new TypeError(`pager-count value of can only be an integer greater than or equal to 7 and less than or equal to 21, but received a ${props.pagerCount}`);
            }
        });

        watchEffect(() => {
            if (!reg.test(props.pageSize)) {
                throw new Error('pager-size It has to be an integer greater than or equal to 1');
            }
        });

        watch(() => props.pageSize, () => {
            setJumpValue();
        });

        watchEffect(() => {
            if (!reg.test(props.currentPage)) {
                throw new Error('current-page It has to be an integer greater than or equal to 1');
            } else {
                cCurrentPage.value = props.currentPage;
            }
        });

        watchEffect(() => {
            if (typeof props.total !== 'number' || props.total < 0) {
                throw new Error('total must be a number greater than or equal to 0');
            }
        });

        watchEffect(() => {
            ctx.emit('current-change', cCurrentPage.value);
            setJumpValue();
        });

        return {
            handleSizeChange,
            handlePrevClick,
            handleNextClick,
            handleInput,
            handleChange,
            pageSizes,
            activePageSize,
            jumpValue,
            cCurrentPage,
            cpages
        }
    }
}

Pagination.vue Props

const VairPagination = {
    background: { // 是否开启背景色
        type: Boolean,
        default: () => {
            return false;
        }
    },
    pageSize: { // 每页显示几条数据
        type: Number,
        default: () => {
            return 10;
        }
    },
    total: { // 数据总数量
        type: Number,
        default: () => {
            return 0;
        }
    },
    pagerCount: { // 当总页数超过该值时会开启折叠 最低为 7
        type: Number,
        default: () => {
            return 7;
        }
    },
    pageSizes: { // 每页显示个数选择器的选项
        type: Array,
        default: () => {
            return [10, 20, 30, 40, 50, 100];
        }
    },
    prependText: { // 后退按钮文字
        type: String,
        default: () => {
            return '';
        }
    },
    suffixText: { // 前进按钮文字
        type: String,
        default: () => {
            return '';
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: () => {
            return false;
        }
    },
    hideOnSinglePage: { // 只有一页时是否隐藏
        type: Boolean,
        default: () => {
            return false;
        }
    },
    currentPage: { // 当前页数
        type: Number,
        default: () => {
            return 1;
        }
    },
    layout: { // 组件布局显示顺序
        type: Array,
        default: () => {
            return ['switch', 'pages', 'jump'];
        }
    },
};


// Event
    // size-change (number)
    // current-change (index)
    // prev-click (index)
    // next-click (index)


export default VairPagination;

Pagination.vue Style

<style lang='less' scoped>
.v-pagination {
    display: flex;
    align-items: center;
    .v-pagination-select-box, .v-pagination-input-box {
        width: 120px;
        /deep/.v-select, /deep/.v-input {
            min-width: 0;
        }
        /deep/.v-input {
            height: 30px;
            .v-input-box, .input {
                height: 30px;
                .suffix {
                    height: 25px;
                }
            }
        }
    }
    .v-pagination-input-box {
        display: flex;
        align-items: center;
        width: 120px;
        /deep/.v-input {
            width: 50px;
            margin: 0 6px;
            .input {
                text-indent: 0px;
                text-align: center;
            }
        }
        span {
            font-size: 14px;
        }
    }
    .disabled {
        cursor: not-allowed;
        span {
            color: #c0c4cc;
        }
    }
}
</style>

Pages.vue Template

<div class='v-pages' ref='cPages'>
    <div :class='["prepend", { prependDisabled }, { disabled }]' 
        ref='prepend'
        @click='handlePrependClick'>
        <p v-if='prependText'>{{ prependText }}</p>
        <i v-if='!prependText' class='iconfont icon-zuojiantou'></i>
    </div>
    <ul class='v-pages-ul'>
        <li :class='["v-pages-li", { activeLi: modelValue === item }, { disabled }]' 
            :ref='el => {if (el) liList[index] = el}'
            v-for='(item, index) in calculatePagesButtonList' :key='index'
            @click='handlePagesLiClick(item)'>
            <span :class='[{ color: !background }]' v-if='item !== "suffix" && item !== "prepend"'>{{ item }}</span>
            <i  @mouseenter='handleMouseEnter(item)'
                @mouseleave='handleMouseLeave(item)' 
                @click='handleIClick(item)'
                v-else 
                :class='["iconfont", "icon-ellipsis2",
                { "icon-chevronsrightshuangyoujiantou": doubleRight && item === "suffix" },
                { "icon-chevronsleftshuangzuojiantou": doubleLeft && item === "prepend" }]'>
            </i>
        </li>
    </ul>
    <div 
        ref='suffix'
        :class='["suffix", { suffixDisabled }, { disabled }]' 
        @click='handleSuffixClick'>
        <p v-if='suffixText'>{{ suffixText }}</p>
        <i v-if='!suffixText' class='iconfont icon-youjiantou'></i>
    </div>
</div>

Pages.vue Script

import { ref, computed, watchEffect, onMounted } from 'vue';
export default {
    name: 'pages',
    props: {
        total: Number,
        pagerCount: Number,
        pageSize: Number,
        prependText: String,
        suffixText: String,
        disabled: Boolean,
        hideOnSinglePage: Boolean,
        background: Boolean || String,
        modelValue: Number
    },
    setup (props, ctx) {
        const medianButtonList = ref([]);
        const prependDisabled = ref(true);
        const suffixDisabled = ref(true);
        const doubleLeft = ref(false);
        const doubleRight = ref(false);
        const liList = ref([]);
        const prepend = ref(null);
        const suffix = ref(null);
        const cPages = ref(null);

        onMounted(() => {
            watchEffect(() => {
                liList.value.forEach(item => {
                    !props.background && (item.style.backgroundColor = 'transparent');
                });
                !props.background && (prepend.value.style.backgroundColor = 'transparent');
                !props.background && (suffix.value.style.backgroundColor = 'transparent');
            });
            watchEffect(() => {
                if (calculatePagesButtonList.value.length <= 1 && props.hideOnSinglePage) {
                    cPages.value.style.display = 'none';
                } else {
                    cPages.value.style.display = 'flex';
                }
            });
        });

        const handlePagesLiClick = (index) => {
            if (props.disabled) return
            if (typeof index === 'number' && props.modelValue !== index) {
                ctx.emit('update:modelValue', index);
                ctx.emit('current-change', index);
            }
        };

        const handleMouseEnter = (item) => {
            if (props.disabled) return
            if (item === 'prepend') {
                doubleLeft.value = true;
            } else if (item === 'suffix') {
                doubleRight.value = true;
            }
        };

        const handleMouseLeave = (item) => {
            if (props.disabled) return
            if (item === 'prepend') {
                doubleLeft.value = false;
            } else if (item === 'suffix') {
                doubleRight.value = false;
            }
        };

        const handleIClick = (item) => {
            if (props.disabled) return
            if (item === 'prepend') {
                const num = props.modelValue - 3;
                ctx.emit('update:modelValue', num < 1? 1 : num);
            } else if (item === 'suffix') {
                const maxPages = Math.ceil(props.total / props.pageSize);
                const num = props.modelValue + 3;
                ctx.emit('update:modelValue', num > maxPages? maxPages : num);
            }
            ctx.emit('current-change', props.modelValue);
        };

        const handlePrependClick = () => {
            if (props.disabled) return
            if (props.modelValue <= 1) return;
            ctx.emit('update:modelValue', props.modelValue - 1);
            ctx.emit('prev-click', props.modelValue);
        };

        const handleSuffixClick = () => {
            if (props.disabled) return
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            if (props.modelValue >= item) return;
            ctx.emit('update:modelValue', props.modelValue + 1);
            ctx.emit('next-click', props.modelValue);
        };

        const calculatePagesButtonList = computed(() => {
            const value = props.modelValue;
            const maxPages = Math.ceil(props.total / props.pageSize);
            const bool = (maxPages - props.pagerCount) > 0;
            const maxCurrentPage = (value - maxPages) > 0? maxPages : value;
            const pagerCountHalf = Math.ceil((props.pagerCount - 2) / 2);
            const a = (maxCurrentPage + pagerCountHalf) < maxPages;
            const b = (maxCurrentPage - pagerCountHalf) <= 2;
            let pagesButtonList = [];
            if (bool) {
                if (b) {
                    for(let i = 1; i < props.pagerCount; i++) {
                        pagesButtonList.push(i);
                    }
                    pagesButtonList.push('suffix');
                    pagesButtonList.push(maxPages);
                } else if (a) {
                    pagesButtonList.push(1);
                    pagesButtonList.push('prepend');
                    for(let i = (maxCurrentPage - pagerCountHalf + 1); i < (maxCurrentPage + pagerCountHalf); i++) {
                        pagesButtonList.push(i);
                    }
                    pagesButtonList.push('suffix');
                    pagesButtonList.push(maxPages);
                } else if (!a) {
                    pagesButtonList.push(1);
                    pagesButtonList.push('prepend');
                    for(let i = (maxPages - props.pagerCount + 2); i <= maxPages; i++) {
                        pagesButtonList.push(i);
                    }
                }
            } else {
                for (let i = 1; i <= maxPages; i++) {
                    pagesButtonList.push(i);
                }
            }
            return pagesButtonList;
        });

        const calculateCurrentPage = () => {
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            ctx.emit('update:modelValue', props.modelValue > item? item : props.modelValue);
        };

        watchEffect(() => {
            calculateCurrentPage();
        });

        watchEffect(() => {
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            prependDisabled.value = props.modelValue === 1;
            suffixDisabled.value = props.modelValue >= item;
        });

        return {
            calculatePagesButtonList,
            medianButtonList,
            prependDisabled,
            suffixDisabled,
            handlePagesLiClick,
            handlePrependClick,
            handleSuffixClick,
            handleMouseEnter,
            handleMouseLeave,
            handleIClick,
            doubleRight,
            doubleLeft,
            liList,
            prepend,
            cPages,
            suffix
        }
    }
}

Pages.vue Style

<style lang='less' scoped>
.v-pages {
    display: flex;
    align-items: center;
    margin: 0 14px;
    .prepend, .suffix {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        min-height: 28px;
        box-sizing: border-box;
        padding: 0 6px;
        margin: 0 5px;
        background-color:#F4F4F5;
        cursor: pointer;
        p, i {
            font-size: 12px;
            color: #333;
            font-weight: 600;
        }
        &:hover {
            p, i {
                color: #409EFF;
            }
        }
    }
    .prependDisabled, .suffixDisabled {
        p, i {
            color: #CDC9CC !important;
        }
        cursor: not-allowed;
    }
    .v-pages-ul {
        display: flex;
        align-items: center;
        .v-pages-li {
            margin: 0 5px;
            background-color:#F4F4F5;
            cursor: pointer;
            span, i {
                display: block;
                min-width: 30px;
                box-sizing: border-box;
                padding: 0 6px;
                line-height: 28px;
                text-align: center;
                font-size: 12px;
                color: #333;
                font-weight: 600;
            }
            &:hover {
                span, i {
                    color: #409EFF;
                }
            }
        }
        .activeLi {
            background-color:#409EFF;
            span {
                color: #fff;
            }
            .color {
                color: #409EFF !important;
            }
            &:hover {
                span {
                    color: #fff;
                }
            }
        }
    }
    .disabled {
        p, i, span {
            color: #c0c4cc !important;
        }
        cursor: not-allowed !important;
    }
}
</style>

index.js 出口文件中引入组件

// Pagination 分页
import Pagination from './components/Pagination/Pagination.vue';
import Pages from './components/Pagination/components/Pages.vue';

const Vair = function(Vue) {
    Vue.component(`v-${Pagination.name}`, Pagination);
    Vue.component(`v-${Pages.name}`, Pages);
}

export default Vair;

使用组件

  • 在main.js中引入
import { createApp } from 'vue'; 
import App from './App.vue'; 
import Vair from './libs/vair/index.js'; 
const app = createApp(App); 
app.use(Vair).mount('#app');

App.vue中调用

<template>
    <div>
        <v-pagination
        :page-sizes='pageSizes'
        :pager-count='pagerCount'
        :total='total'
        :page-size='pageSize'
        :current-page='currentPage'
        :background='background'
        :hideOnSinglePage='false'
        :disabled='disabled'
        @current-change='handleCurrentChange'
        @prev-click='handlePrevClick'
        @next-click='handleNextClick'
        @size-change='handleSizeChange'
        ></v-pagination>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    setup () {
        const pageSizes = ref([10, 20, 30, 40, 50, 100]);
        const pageSize = ref(10);
        const total = ref(50500);
        const currentPage = ref(10);
        const pagerCount = ref(7);
        const background = ref(true);
        const prependText = ref('prepre');
        const suffixText = ref('nextnext');
        const disabled = ref(false);

        const handleCurrentChange = (index) => {
            console.log(index)
        };

        const handlePrevClick = (index) => {
            console.log('handlePrevClick 触发了', index);
        };

        const handleNextClick = (index) => {
            console.log('handleNextClick 触发了', index);
        };

        const handleSizeChange = (number) => {
            pageSize.value = number;
        };

        return {
            pageSizes,
            pageSize,
            total,
            disabled,
            currentPage,
            pagerCount,
            handleCurrentChange,
            handlePrevClick,
            handleNextClick,
            handleSizeChange,
            background,
            prependText,
            suffixText
        }
    }
}
</script>

<style lang='less' scoped>
div {
    margin-top: 20px;
}
</style>

效果展示

在这里插入图片描述
在这里插入图片描述

anyRTC
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
ARChatRoom功能介绍手册
09-28 2886
随着音视频行业的不断发展，从语音聊天，语音通话等软件逐渐衍生出了语音开黑，聊天房，和类似狼人杀这种语音类游戏。因为操作简单，受众面广，所以收到了很多人的喜欢。ARChatRoom 是anyRTC模仿语音开黑的示例项目，演示了如何通过 anyRTC云服务，并配合 anyRTC RTC SDK、anyRTC RTM SDK，快速实现语音社交的场景。下载地址：https://github.com/anyRTC-UseCase/ARChatRoom支持场景ARChatRoom 示例项目提供上麦、下麦、排麦
博客
anyRTC 融合音视频能力底座：助力企业数字化转型
11-28 1135
打造一体化融合音视频能力底座的目标，以实时音视频技术能力为基础，拓展协议融合网关，让RTC 跟国标GB28181、H.323、PSTN、模拟对讲机等进行互通互联。
博客
技术分享| gcc版本升级到5.2
11-22 748
GCC（GNU Compiler Collection）是一套广泛使用的开源编译器集合，用于编译多种编程语言，包括C、C++、Objective-C、Fortran等。GCC 的不同版本提供了许多新功能、改进和修复，其中包括从 GCC 4.8.5 升级到 GCC 5.2.0 所带来的一些变化。
博客
技术分享| anyRTC之RTN网络
11-21 465
RTN(Real-time Network)中文名：实时音视频传输网络。
博客
技术分享| anyRTC低延时直播优化
10-27 528
直播系统就是把活动现场的音频或视频信号经数字压缩后，传送到直播多媒体服务器(CDN)上，在互联网上供广大网友或授权特定人群收听或收看。
博客
技术分享| 二进制部署MySQL
10-12 706
​MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。​MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。​。
博客
技术分享| anyRTC音视频混流技术解析
09-22 540
在视频通讯场景中，比如会议、直播等经常能看到图像合成的场景。图像合成是在指定的一块画面区域，在这个区域内，按画面的位置(坐标)布局，将区域中的每个视频画面的像素混合计算成一个像素（RGB）。
博客
解决方案| anyRTC远程检修应用场景
09-15 426
一站式远程检修方案，让检修得到最专业、最快速的的维护和修复，它不仅能够节省您的时间和精力，还能让您的设备在最短的时间内恢复正常运行
博客
技术分享| WebRTC之SDP详解
08-18 663
SDP(Session Description Protocol) 是一种会话描述协议，基于文本，其本身并不属于传输协议，需要依赖其它的传输协议（比如 SIP， HTTP，自定义的信令等）来交换必要的媒体信息，用于两个会话实体之间的媒体协商，同时SDP也不是只为WebRTC使用，其他的传输比如RTSP，SIP通话也是通过SDP进行媒体协商。
博客
快对讲| 融合视频会议
07-20 367
融合会议是一种新型的会议形式，它通过会议连接器的形式和其他视频会议厂商进行互通互联，帮助企业客户实现高效率沟通和协作。
博客
实例分享| anyRTC 部署安徽某市应急实战指挥平台
07-11 300
在当前的社会环境下，应对各种突发事件和危机管理是各级政府和企事业单位的重要职责，为了提高应急指挥的效率和效果，充分利用现代信息技术为突发事件的应急处理服务是当前的大趋势，整合相关资源，应对各种自然灾害等突发紧急事件，第一时间应对突发紧急事件、实现快速反应、减少损失的目标。
博客
技术分享| 融合通讯的架构介绍
07-04 1169
通过上面的介绍，我们了解了关于流媒体服务的这么多架构，anyRTC融合通讯系统，可以根据用户的实际需求交付不同的解决方案，这样才能更好的贴合实际的需求。
博客
小程序技术分享| 小程序集成 pixi 渲染引擎
06-27 880
开发小程序时一些特殊场景需要使用canvas,但canvas渲染一些特效时太过耗费性能造成页面卡顿并且展示效果也不好(拖动卡顿不连贯等)，因此使用渲染引擎来满足需求。本文在小程序中使用 pixi 渲染引擎。
博客
行业分析| 无人机电力巡检技术的应用
06-26 629
无人机电力巡检是指利用无人机进行巡检，利用人工智能技术和高清晰度数码变焦技术等成熟技术，对电力设备进行无盲区覆盖的全面巡检，从而大大提高巡检效率和精度。
博客
技术分享| 融合会议协议大解密
05-26 581
H.323定义的主要组件有：网守（GK：Gatekeeper）、网关（Gateway）、终端（Terminal）和多点控制单元（Multipoint Control Unit）。
博客
公网对讲SDK——对讲应用场景
05-25 925
对讲SDK 可以应用于多种场景，但同时还有更多的场景有待挖掘。随着智能硬件以及网络的升级和普及， 音视频已经成为人们日常工作的需要。使用anyRTC SDK，开发者只需要少量的工作即可将强大音视频通话通信加入到已有系统之中，轻松拥有音视频能力。
博客
行业分析| 快对讲-融合会议的应用
05-18 784
融合会议为企业提供一种“轻模式”的信息沟通和管理服务。支持语音、视频和数据多媒体通信，实现了语音与数据的无缝融合。用户无需任何软、硬件方面的会议投入，不受时间、地点等因素的限制，使用任何终端召开会议，有效节约企业的成本消耗，给企业员工和客户带来更多的便利。
博客
IOS技术分享| 快对讲2.0会议场景实现
05-11 270
快对讲2.0，全新升级，新增多人音视频会议模块，让沟通更高效！会议模块包含会控、成员管理、聊天、屏幕共享、音视频相关、AI降噪等实用功能，支持iOS、Android 和 Web等多终端接入，让远程协作更加轻松自如。
博客
行业分析| 视频监控——AI自动巡检
04-25 1537
随着视频监控的普及，现在很多社区、工地、车间、厂区、超市、商铺、酒店、餐馆等场所都安装了视频监控系统。当安装的视频监控出现故障时，我们该如何进行简单的视频故障识别呢？如果只依靠人工对视频故障识别排查，工作量是相当大的，尤其是在大规模的视频监控系统中，集成了几千甚至上万路摄像头的画面，使用人工巡检的工作量非常大，同时存在着耗时久、盲区多、主观判断为主、隐性问题大，巡检手抄记录存在不准确、利用价值低等问题。现在我们可以利用AI技术实现自动巡检，不仅可以应对大规模的监控系统，而且可以突破不同的场景限制。
博客
行业分析| 新的学习方式——在线自习室
04-21 683
在线自习室如何更好拥抱新技术的同时，给用户带来更安全良好的体验是未来需要解决的方向。在线自习室可基于“虚拟自习室”平台进行多重核心功能设计，面向学生、家长和老师分设不同角色的入口。例如家长端可设置主账号模式与亲子账号关联，灵活设置学习监督模式；教师端可了解学生自习状态，监督学生学习进展，还可以提供“一键专注”和“计时模式”的效率提升工具，打造浓厚的学习氛围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值