ncs_ui/src/views/ncs-screentip/index.vue

<template>
    <div>
        <ag-grid-layout
                toolbar
                :table-height="tableHeight"
                theme="ag-theme-alpine"
                :column-defs="columnDefs"
                :row-data="rowData"
                :locale-text="localeText"
                :grid-options="gridOptions"
                :default-col-def="defaultColDef"
                :animate-rows="true"
                :row-selection="rowSelection"
                :enable-cell-change-flash="true"
                @filterChanged="filterModifed"
                @sortChanged="gridSortChange"
        >
            <!--        @rowDoubleClicked="getList"-->
            <div slot="toolbar" class="inner-toolbar">
                <div class="toolbar-search">
                    <en-table-search :placeholder="this.$t('action.keywords')" @search="handlerSearch" />
                </div>
                <div class="toolbar-btns">
                    <el-button type="primary" size="mini" @click="createScreenTip">{{ this.$t('screenTip.tipAdd') }}</el-button>
                </div>
            </div>
            <el-pagination
                    v-if="pageData"
                    slot="pagination"
                    :current-page="pageData.page_no"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageData.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.data_total"
                    @size-change="handlePageSizeChange"
                    @current-change="handlePageCurrentChange"
            />
        </ag-grid-layout>
        <el-dialog :title.sync="formtitle" :visible.sync="formshow" width="35%">
            <div>
                <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel">

                    <el-row>
                        <el-col :span="24">
                            <el-form-item :label="this.$t('screenTip.showText')" prop="show_text">
                                <el-input
                                        v-model="formmodel.show_text"
                                        clearable
                                        :maxlength="100"
                                        :placeholder="this.$t('screenTip.showText')"
                                />
                            </el-form-item>
                            <el-form-item :label="this.$t('screenTip.textColor')">
                                <el-input :placeholder="this.$t('screenTip.textColor')" v-model="formmodel.text_color">
                                    <el-color-picker slot="append" color-format="hex" v-model="formmodel.text_color" size="mini"></el-color-picker>
                                </el-input>

                            </el-form-item>
                            <el-form-item prop="text_size" :label="this.$t('screenTip.textSize')">
                                <el-input v-model.number="formmodel.text_size" :placeholder="this.$t('screenTip.textSize')"><span slot="append">dp</span></el-input>
                            </el-form-item>

                            <el-form-item :label="this.$t('screenTip.screenBgColor')">
                                <el-input :placeholder="this.$t('screenTip.screenBgColor')" v-model="formmodel.screen_bg_color">
                                    <el-color-picker slot="append" color-format="hex" v-model="formmodel.screen_bg_color" size="mini"></el-color-picker>
                                </el-input>

                            </el-form-item>
                            <el-form-item prop="display_minutes" :label="this.$t('screenTip.displayLongest')">
                                <el-input v-model.number="formmodel.display_minutes" :placeholder="this.$t('screenTip.displayLongest')"><span slot="append">{{this.$t('action.minute2')}}</span></el-input>
                            </el-form-item>
                            <el-form-item prop="bool_scroll" >
                                <el-checkbox v-model="formmodel.bool_scroll" @change="scrollChange">{{this.$t('screenTip.boolScroll')}}</el-checkbox>
                            </el-form-item>
                            <el-form-item :label="this.$t('screenTip.scrollDirect')" prop="scroll_direct">
                                <el-select v-model="formmodel.scroll_direct"
                                           :placeholder="this.$t('screenTip.scrollDirect')"
                                           filterable clearable >
                                    <el-option v-for="(item,index) in animateRender" :key="index" :label="item.key" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formshow = false">{{ this.$t('action.cancel') }}</el-button>
                <el-button type="primary" @click="handlerFormSubmit('editform')">{{ this.$t('action.yes') }}</el-button>
            </div>
        </el-dialog>
<!--        <el-dialog :title.sync="subscribeTitle" :visible.sync="formSubscribe" width="50%">-->

<!--            <div>-->
<!--                <fieldset v-for="(item,index) in channelSubscribers" v-if="item.roleName!=='管理员'" :key="index" style="margin-top: 10px">-->
<!--                    <legend><span style="margin-right: 10px">{{ item.roleName }} </span><el-checkbox v-model="item.allCkeck" style="float: right;" :indeterminate="item.indeterminate" @change="(checked)=>{handleCheckAll(checked,item)}">{{ choiceAll }}</el-checkbox></legend>-->
<!--                    <el-row :gutter="20" type="flex" style="padding: 10px">-->
<!--                        <el-col :span="24">-->
<!--                            <el-checkbox v-for="(clerk,_index) in item.clerks" :key="_index" v-model="clerk.checked" @change="handleCheckboxChanged(item)">{{ clerk.clerk_name }}</el-checkbox>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                </fieldset>-->
<!--            </div>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="formSubscribe = false">{{ this.$t('action.cancel') }}</el-button>-->
<!--                <el-button type="primary" @click="handlerSubscribeSubmit">{{ this.$t('action.yes') }}</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
    import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
    import ButtonCellRender from '../../components/AgGridCellRender/ButtonCellRender'
    import * as API_ScreenTip from '@/api/ncs_screentip'
    import { unix2Date } from '@/utils/Foundation'
    import * as API_Clerk from '@/api/ncs_clerk'
    import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
    import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
    import ButtonCellRenderList from "@/components/AgGridCellRender/ButtonCellRenderList";
    export default {
        name: "index",
        components: { ButtonCellRenderList, ButtonCellRender, ListFilter, RadioFilter },
        data() {
            return {
                tableData: [],
                /** 列表参数 */
                params: {
                    page_size: 20,
                    page_no: 1,
                    fixedCondition: ' part_id = ' + this.$store.getters.partId
                },
                /** 新建组织弹出参数 **/
                formtitle: this.$t('screenTip.tipAdd'),
                formshow: false,
                /** 频道订阅设置 */
                // formSubscribe: false,
                formmodel: {},
                // frameGroups: [],
                rules: {
                    show_text: [
                        { required: true, message: this.$t('screenTip.showTextRequired'), trigger: 'blur' }
                    ],
                    scroll_direct:[{ required: false, message: this.$t('screenTip.scrollDirectRequired'), trigger: 'blur' }],
                    display_minutes:[{ required: true, message: this.$t('screenTip.displayMinutesRequired'), trigger: 'blur' },{ type: 'number', message: this.$t('screenTip.numberRequired')}],
                    text_size:[{ required: true, message: this.$t('screenTip.textSizeRequired'), trigger: 'blur' },{ type: 'number', message: this.$t('screenTip.numberRequired')}]
                },
                // timeRange: [new Date(2020, 11, 11, 7, 0), new Date(2020, 11, 11, 8, 0)],
                // checkWeek: [],
                /** ag-grid参数 **/
                pageData: [],
                loading: false,
                errorId: null,
                shopVisible: false,
                columnDefs: null,
                rowData: null,
                defaultColDef: null,
                gridOptions: null,
                gridApi: null,
                columnApi: null,
                localeText: AG_GRID_LOCALE_CN,
                filterState: null,
                rowSelection: null,
                frameworkComponents: null,
                /** 频道订阅者情况数组 */
                // channelSubscribers: [],
                // subscribeTitle: '',
                choiceAll: this.$t('action.choiceAll'),
                booleanRender: [
                    { key: this.$t('entraceguardUser.yes'), value: true, color: 'green' },
                    { key: this.$t('entraceguardUser.nop'), value: false, color: 'red' }
                ],
                animateRender:[
                    {key:this.$t('screenTip.leftToRight'),value:1},
                    {key:this.$t('screenTip.rightToLeft'),value:2},
                    {key:this.$t('screenTip.upToDown'),value:3},
                    {key:this.$t('screenTip.downToUp'),value:4}
                ]
            }
        },
        computed: {
            tableHeight() {
                return this.mainAreaHeight - 130
            }

        },
        beforeMount() {
            this.gridOptions = {}
            this.columnDefs = [
                {
                    headerName: '#',
                    headerCheckboxSelection: true,
                    headerCheckboxSelectionFilteredOnly: true,
                    checkboxSelection: true,
                    sortable: false, filter: false,
                    width: 100,
                    resizable: false,
                    valueGetter: this.hashValueGetter
                },
                { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 130 },
                {
                    headerName: this.$t('screenTip.showText'), field: 'show_text', sortable: true, filter: 'agTextColumnFilter', flex: 1,
                    cellRenderer: (para) => {
                        return this.textShow(para)
                    }
                },
                {
                    headerName: this.$t('screenTip.textColor'), field: 'text_color', sortable: true, filter: 'agTextColumnFilter',  width: 130,
                    cellRenderer: (para) => {
                        return this.colorFormatter(para)
                    }
                },
                {
                    headerName: this.$t('screenTip.textSize'), field: 'text_size', sortable: true, filter: 'agNumberColumnFilter',  width: 130
                },
                {
                    headerName: this.$t('screenTip.screenBgColor'), field: 'screen_bg_color', sortable: true, filter: 'agTextColumnFilter',  width: 130,
                    cellRenderer: (para) => {
                        return this.colorFormatter(para)
                    }
                },
                {
                    headerName: this.$t('screenTip.displayMinutes'), field: 'display_minutes', sortable: true, filter: 'agNumberColumnFilter',  width: 180
                },
                {
                    headerName: this.$t('screenTip.boolScroll'), field: 'bool_scroll', sortable: true, filterFramework: 'RadioFilter', filterParams: {
                        listData: this.booleanRender
                    }, width: 150,
                    cellRenderer: (para) => {
                        return this.radioFilterFormatter(para, this.booleanRender)
                    }
                },

                {
                    headerName: this.$t('screenTip.scrollDirect'), field: 'scroll_direct', sortable: true, filterFramework: 'ListFilter', filterParams: {
                        listData: this.animateRender
                    }, width: 150,
                    cellRenderer: (para) => {
                        return this.scrollDirectFormatter(para, this.animateRender)
                    }
                },
                // {
                //     headerName: this.$t('screenTip.boolScroll'), field: 'bool_scroll', sortable: true, filter: 'agTextColumnFilter',  width: 130
                // },

                // lockPosition 锁定位置，会在第一列
                // lockPinned = true 不能拖动然后固定
                // resizeable 单元个大小是否可以调整

                { headerName: this.$t('action.handle'), field: 'id',
                    cellRendererFramework: 'ButtonCellRenderList',
                    cellRendererParams: param => {
                        return {
                            list: [
                                {
                                    onClick: this.handleEdit,
                                    label: this.$t('action.edit'),
                                    buttonType: 'primary',
                                    buttonSize: 'mini'
                                },
                                // {
                                //     onClick: this.manageSubscribe,
                                //     label: this.$t('channel.subscribeManage'),
                                //     buttonType: 'warning',
                                //     buttonSize: 'mini',
                                // },
                                // {
                                //     onClick: this.channelImHistory,
                                //     label: this.$t('channel.channelImHistory'),
                                //     buttonType: 'success',
                                //     buttonSize: 'mini',
                                // },
                                {
                                    onClick: this.deleteSingle,
                                    label: this.$t('action.delete'),
                                    buttonType: 'danger',
                                    buttonSize: 'mini',
                                }
                            ]}
                    },
                    filter: false,
                    pinned: 'right',
                    lockPinned: true,
                    minWidth: this.$i18n.locale === 'zh' ? 200 : 300,
                    resizable: false,
                    sortable: false
                }
                // {
                //   headerName: this.$t('action.edit'), field: 'id',
                //   cellRendererFramework: 'ButtonCellRender',
                //   cellRendererParams: {
                //     onClick: this.handEdit,
                //     label: this.$t('action.edit'),
                //     buttonType: 'primary',
                //     buttonSize: 'mini'
                //   },
                //   filter: false,
                //   pinned: 'right',
                //   lockPinned: true,
                //   width: 100,
                //   resizable: false,
                //   sortable: false
                // },
                //
                // {
                //   headerName: this.$t('channel.subscribeManage'), field: 'id',
                //   cellRendererFramework: 'ButtonCellRender',
                //   cellRendererParams: {
                //     onClick: this.manageSubscribe,
                //     label: this.$t('channel.subscribeManage'),
                //     buttonType: 'success',
                //     buttonSize: 'mini'
                //   },
                //   filter: false,
                //   pinned: 'right',
                //   lockPinned: true,
                //   width: 100,
                //   resizable: false,
                //   sortable: false
                // },
                //
                // {
                //   headerName: "留言历史", field: 'id',
                //   cellRendererFramework: 'ButtonCellRender',
                //   cellRendererParams: {
                //     onClick: this.channelImHistory,
                //     label: "留言历史",
                //     buttonType: 'success',
                //     buttonSize: 'mini'
                //   },
                //   filter: false,
                //   pinned: 'right',
                //   lockPinned: true,
                //   width: 100,
                //   resizable: false,
                //   sortable: false
                // },
                //
                // {
                //   headerName: this.$t('action.delete'), field: 'id',
                //   cellRendererFramework: 'ButtonCellRender',
                //   cellRendererParams: param => {
                //     return {
                //       onClick: this.deleteSingle,
                //       label: this.$t('action.delete'),
                //       buttonType: 'danger',
                //       buttonSize: 'mini'
                //     }
                //   },
                //   pinned: 'right',
                //   lockPinned: true,
                //   width: 100,
                //   resizable: false,
                //   filter: false,
                //   sortable: false
                // }
            ]
            this.defaultColDef = {
                sortable: true,
                resizable: true,
                comparator: this.dateCustomComparator,
                filterParams: {
                    debounceMs: 200,
                    newRowsAction: 'keep',
                    textCustomComparator: this.textCustomComparator,
                    comparator: this.dateCustomComparator
                }
            }
            this.rowSelection = 'multiple'
        },
        mounted() {
            window.onresize = this.windowResize
            this.gridApi = this.gridOptions.api
            this.gridColumnApi = this.gridOptions.columnApi
            // 设置默认排序字段，应用列状态之后会触发 gridSortChange 函数，会调用getlist，后面不需要再调用this.getlist
            this.gridColumnApi.applyColumnState({
                state: [
                    {
                        colId: 'id',
                        sort: 'asc'
                    }
                ]
            })
            // this.getEmployees()
        },
        methods: {
            windowResize() {
                this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
            },
            handlerDelete(ids) {
                this.$confirm(this.$t('action.sureDelete'), this.$t('action.waring'), {
                    confirmButtonText: this.$t('action.yes'),
                    cancelButtonText: this.$t('action.cancel'),
                    type: 'warning'
                }).then(() => {
                    API_ScreenTip.remove(ids).then(
                        response => {
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: this.$t('action.deleted')
                            })
                        }
                    ).catch(response => {
                        this.$message({
                            type: 'info',
                            message: response.message
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('action.cancelDelete')
                    })
                })
            },
            deleteSingle(row) {
                this.handlerDelete(row.id)
            },

            /**
             * 创建频道
             */
            createScreenTip() {
                this.formshow = true
                this.formmodel = {
                    text_color: '#FFFFFF',
                    screen_bg_color:'#409EFF',
                    part_id: this.$store.getters.partId
                }
            },
            /** 分页大小发生改变 */
            handlePageSizeChange(size) {
                this.params.page_size = size
                this.getList()
            },

            /** 分页页数发生改变 */
            handlePageCurrentChange(page) {
                this.params.page_no = page
                this.getList()
            },
            /** 加载列表数据 */
            getList() {
                this.loading = true
                const param = this.MixinClone(this.params)
                this.gridApi.showLoadingOverlay()
                API_ScreenTip.getList(param).then(response => {
                    this.loading = false
                    // this.tableData = [...response.data]
                    this.pageData = {
                        page_no: response.page_no,
                        page_size: response.page_size,
                        data_total: response.data_total
                    }
                    this.$nextTick(() => {
                        const node = this.gridApi.getDisplayedRowAtIndex(0)
                        if (node !== null && node !== undefined) {
                            node.setSelected(true)
                        }
                    })
                    this.rowData = [...response.data]
                    this.refreshPlayStatus()
                }).catch(() => {
                    this.loading = false
                })
            },
            /** 处理搜索 */
            handlerSearch(keywords) {
                this.params.query = keywords
                this.getList()
            },
            /** 处理字段排序 */
            tableSort(column) {
                if (column.order !== null) {
                    this.params.sort = column.prop
                    this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
                } else {
                    this.params.sort = null
                    this.params.dir = null
                }
                this.getList()
            },
            /**
             * 格式化unix时间戳
             **/
            unixDateFormatter(param) {
                if (!param.value) return ''
                return unix2Date(param.value * 1000)
            },

            gridSortChange(param) {
                const columnState = param.columnApi.getColumnState()
                // 排序状态
                const sortState = columnState.filter(function(s) {
                    return s.sort != null
                }).map(function(s) {
                    return {
                        colId: s.colId,
                        sort: s.sort,
                        sortIndex: s.sortIndex
                    }
                }).sort(function(a, b) {
                    return a.sortIndex - b.sortIndex
                })
                if (sortState.length > 0) {
                    if (sortState.length === 1) {
                        this.params.sort = sortState[0].colId
                        this.params.dir = sortState[0].sort
                    } else {
                        let sortstring = ''
                        sortState.forEach(function(item) {
                            sortstring += item.colId + ' ' + item.sort + ','
                        })
                        this.params.sort = sortstring.substring(0, sortstring.length - 1)
                        this.params.dir = ' '
                    }
                } else {
                    delete this.params.sort
                    delete this.params.dir
                }
                this.getList()
            },

            filterModifed(param) { // todo 通过转换后的数值过滤，需要转回原始数值
                var model = param.api.getFilterModel()
                this.params.filter = JSON.stringify(model)
                this.getList()
            },

            handleEdit(row) {
                this.formmodel = {
                    ...row
                }
                this.formtitle=this.$t('screenTip.tipEdit')
                this.formshow = true
            },
            /**
             * 提交新增表单
             * @param formname
             */
            handlerFormSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (!this.formmodel.id) {
                            /** 新增 */
                            this.formmodel.part_id = this.$store.getters.partId

                            API_ScreenTip.add(this.formmodel).then(() => {
                                this.formshow = false
                                this.$message.success(this.$t('action.addSuccess'))
                                this.getList()
                            })
                        } else {
                            API_ScreenTip.update(this.formmodel.id, this.formmodel).then(() => {
                                this.formshow = false
                                this.$message.success(this.$t('action.editSuccess'))
                                this.getList()
                            })
                        }
                    } else {
                        this.$message.error(this.$t('action.fromError'))
                    }
                })
            },
            radioFilterFormatter(params, array) {
                const item = array.filter(p => p.value === params.value)[0]
                if (item) {
                    if (item.color) {
                        return '<span style="color:' + item.color + '">' + item.key + '</span>'
                    } else {
                        return item.key
                    }
                } else {
                    return ''
                }
            },
            scrollDirectFormatter(params,array){
                const item = array.filter(p => p.value === params.value)[0]
                if (item) {
                        return item.key
                } else {
                    return ''
                }
            },
            colorFormatter(params){
                return '<div  style="background:' + params.value+ ';width:100%;height: 100%;"></div>'
            },

            textShow(params){
                console.log('pms',params)
                return '<div  style="background:' + params.data.screen_bg_color+ ';color:'+params.data.text_color+';width:100%;height: 100%;overflow: hidden;text-align: center;"><div class="'+(params.data.bool_scroll?('animate'+params.data.scroll_direct):'')+'">'+params.value+'</div></div>'
            },

            scrollChange(val){
              this.rules.scroll_direct[0].required=val
            },

            // handlerSubscribeSubmit() {
            //     let subscribeIds = []
            //     this.channelSubscribers.forEach(item => {
            //         subscribeIds = [...item.clerks.filter(p => p.checked).map(p => p.member_id), ...subscribeIds]
            //     })
            //     API_ScreenTip.setChannelSubscribers({ channel_id: this.formmodel.id, member_ids: subscribeIds.length === 0 ? null : [...subscribeIds] }).then(() => {
            //         this.formSubscribe = false
            //         this.$message.success(this.$t('action.editSuccess'))
            //     })
            // },
            // manageSubscribe(row) {
            //     this.formmodel = { ...row }
            //     API_ScreenTip.getChannelSubscribers(row.id).then(res => {
            //         this.channelSubscribers.forEach(item => {
            //             item.clerks.map(k => {
            //                 k.checked = res.map(p => p.member_id).includes(k.member_id)
            //                 return k
            //             })
            //             const checkedLength = item.clerks.filter(p => p.checked).length
            //             this.$set(item, 'allCkeck', item.clerks.length === checkedLength)
            //             this.$set(item, 'indeterminate', (checkedLength !== 0) && (item.clerks.length !== checkedLength))
            //         })
            //     })
            //     this.subscribeTitle = row.channel_name + this.$t('channel.subscribeManage')
            //     this.formSubscribe = true
            // },
            // channelImHistory(row) {
            //     this.$router.push({ name: 'channelImHistory', params: { id: row.id, callback: this.getList() }})
            // },
            // getEmployees() {
            //     const _this = this
            //     _this.nurses = []
            //     API_Clerk.listByPartRoleId({ partId: this.$store.getters.partId }).then(res => {
            //         _this.clerks = res
            //         const groupBy = (arr, func) =>
            //             arr.map(typeof func === 'function' ? func : val => val[func]).reduce((acc, val, i) => {
            //                 acc[val] = (acc[val] || []).concat(arr[i])
            //                 return acc
            //             }, {})
            //         const groupData = groupBy(res, item => item.role_name)
            //         _this.nurses = Object.entries(groupData)
            //
            //         _this.nurses.forEach(item => {
            //             this.channelSubscribers.push({ 'roleName': item[0], 'clerks': item[1].map(i => { return { ...i, 'checked': false } }), 'allCheck': false, 'indeterminate': false })
            //         })
            //
            //     })
            // },
            handleCheckboxChanged(item) {
                this.countAllRole(item)
            },
            /** 计算传入角色组的选择情况 */
            countAllRole(role) {
                const _list = []
                if (!Array.isArray(role)) {
                    if (role.clerks) _list.push(...this.countAllRole(role.clerks))
                } else {
                    role.forEach(item => {
                        _list.push(item)
                    })
                }
                const length = _list.length
                const length_checked = _list.filter(_item => _item.checked).length
                this.$set(role, 'allCkeck', length === _list.filter(_item => _item.checked).length)
                this.$set(role, 'indeterminate', (length_checked !== 0) && (length !== length_checked))
                return _list
            },
            handleCheckAll(checked, item) {
                this.$set(item, 'indeterminate', false)
                this.setFrameCheck(item, checked)
            },
            /** 设置选择状态 */
            setFrameCheck(item, checked) {
                const perm = this.MixinClone(item)
                if (!Array.isArray(perm)) {
                    this.$set(item, 'checked', checked)
                    if (item.clerks && item.clerks.length) {
                        this.$set(item, 'clerks', this.setFrameCheck(item.clerks, checked))
                    }
                } else {
                    perm.map(item => {
                        item.checked = checked
                        this.$set(item, 'checked', checked)
                        if (item.clerks && item.clerks.length) {
                            this.$set(item, 'clerks', this.setFrameCheck(item.clerks, checked))
                        }
                    })
                }
                return perm
            }
        }
    }
</script>

<style >

    .animate1 {
         white-space: nowrap;
         animation: 10s wordsLoop1 linear infinite normal;
     }
    .animate2 {
        white-space: nowrap;
        animation: 10s wordsLoop2 linear infinite normal;
    }
    .animate3 {
        white-space: nowrap;
        animation: 10s wordsLoop3 linear infinite normal;
    }
    .animate4 {
        white-space: nowrap;
        animation: 10s wordsLoop4 linear infinite normal;
    }

    @keyframes wordsLoop1 {
        0% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
        }
    }

    @-webkit-keyframes wordsLoop1 {
        0% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
        }
    }

    @keyframes wordsLoop2 {
        0% {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    @-webkit-keyframes wordsLoop2 {
        0% {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    @keyframes wordsLoop4 {
        0% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
        100% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
    }

    @-webkit-keyframes wordsLoop4 {
        0% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
        100% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
    }

    @keyframes wordsLoop3 {
        0% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
        100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }

    @-webkit-keyframes wordsLoop3 {
        0% {
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
        }
        100% {
            transform: translateY(100%);
            -webkit-transform: translateY(100%);
        }
    }
</style>