axwen-test31 2.0.0

package/src/views/market/market-event-detail-pro/event-canvas-detail.vue

@@ -0,0 +1,826 @@
+<template>
+<div class="event-detail-canvas-area">
+    <fullscreen v-model="fullscreen" style="height:100%;">
+        <div class="event-detail-canvas">
+            <div
+                class="event-container"
+                ref="container"
+                dropable="true"
+                @dragover.prevent
+                @dragleave.prevent
+                v-loading="canvasLoading"
+            ></div>
+            <div class=tool-bar-list>
+                <span @click=changeExpandState() :style="{cursor: canvasLoading ? 'not-allowed' : 'pointer'}">
+                <span :class="['expand', { fold: hasNodeExpand }]"><i class='el-icon-arrow-up' v-if="hasNodeExpand"></i><i class=el-icon-arrow-down v-else> </i></span>
+                    {{ hasNodeExpand ? '折叠':'展开'}}
+                </span>
+                <span @click="downloadPicture" :style="{cursor:canvasLoading ? 'not-allowed' : 'pointer'}"><i class="el-icon-download"></i>导出</span>
+                 <span @click="toggleFullScreen" :style="{cursor: canvasLoading ? 'not-allowed' : 'pointer'}"><i :class="fullscreen ? 'i-icon-park-outline:off-screen' : 'el-icon-full-screen'" style='width:22px;'></i>{{ fullscreen ?'还原':'全屏'}}</span>
+                <el-tooltip placement="top" effect="light" v-if="isMoz">
+                    <div slot="content"><span style="display:inline-block;font-size:17px;padding-bottom:5px;">火狐浏览器点击全屏按钮会有黑屏过渡的解决方法：</span><br/><span style="display:inline-block;padding:0 0 5px 0;">打开一个空白页面，地址栏输入about:config，回车进入配置页面，分别搜索下面三项：</span><br/>(1) full-screen-api.warning.timeout 设置为0（关闭进入全屏时的提示）<br/>(2) full-screen-api.transition-duration.enter 设置为 ‘0 0’（去除全屏模式的过渡动画–进入）<br/>(3) full-screen-api.transition-duration.leave 设置为 ‘0 0’（去除全屏模式的过渡动画–退出）</div>
+                    <i class="el-icon-warning-outline"></i>
+                </el-tooltip>
+            </div>
+        </div>
+    </fullscreen>
+</div>
+</template>
+
+<script>
+import G6Pro from '@g6-pro'
+import {reDefineG6Readonly} from '@g6-config'
+import { Grid, Minimap, ZoomToolBar } from '@g6-config/plugins'
+import { listToTree, getImage, tryToFitview, downloadPng,getMenuNameByKey } from '@market-event-edit-pro/util'
+import { getReponseDist } from '@/api/channel'
+import { getCmpItems } from '@/api/market'
+import { mapState } from 'vuex'
+import dayjs from 'dayjs'
+import { getAllocationRuleList } from '@/api/allocation-rule'
+
+import generateHtmlCode from './htmlGenerator'
+import { throttle,debounce } from '@antv/util'
+import {
+    getEbankAppOptions,
+    getIntligCallOptions,
+    getTeleSalesPlatOptions,
+    getWaitEventOptions,
+    getEvtRespF1owBranchOptions,
+    getGroupOrLabelList,
+    getActivityOptions
+} from './htmlGenerator/optionsApi'
+
+
+const fitViewPadding = 20
+
+function functionWithLoading (fn) {
+    return function (...args) {
+        try {
+            this.canvasLoading = true
+            fn.apply(this, args)
+            this.canvasLoading = false
+        } catch(e) {
+            this.canvasLoading = false
+        }
+    }
+}
+
+export default {
+    props: {
+        readonly: {
+            type:Boolean,
+            default: false
+        },
+        //是否是只有客户节点能编辑,暂时没有作用
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        //是否是节点计数模式(测试模式),此处尚未完成...
+        isTestMode: {
+            type:Boolean,
+            default:false
+        },
+        data:{
+            type:Object,
+            default:()=>({})
+        },
+        zoom: {
+            type: Boolean,
+            default:true
+        },
+        //是否展示线上面的数字
+        showEdgeLabel: {
+            type: Boolean,
+            default: false
+        },
+        // 禁用的节点,不会在页面上显示出来
+        diabledKey: {
+            type: String,
+            default: ''
+        },
+        versionNo: {
+            type: String
+        },
+        actName: {
+            type: String,
+            default: ''
+        }
+    },
+    data(){
+        return {
+            heightMap:{},
+            menuTree: [],
+            graph: null,
+            // graphImageName:'',
+            fullscreen: false,
+            isTriggerByToolBar:true,//是否是右上角一键折叠被点击
+            hasNodeExpand:true,// 是否存在展开的节点
+            canvasLoading: false,
+            isDeactivated:false,
+            isMoz: false
+        }
+    },
+    activated () {
+        this.initExplorer()
+        reDefineG6Readonly(this)
+    },
+    beforeDestroy () {
+        this.heightMap = {}
+    },
+
+    async mounted () {
+        await this.getDragMenu()
+        reDefineG6Readonly(this)
+        this.init()
+    },
+
+    computed:{
+        ...mapState(['layoutsideShow','profile','config']),
+        layoutSideShow1() {
+            return this.layoutsideShow
+        }
+    },
+
+    watch:{
+        cstonly (){
+            this.refresh()
+        },
+        layoutSideShow1(newData, oldData) {
+            this.graphChangesize()
+        }
+    },
+    methods:{
+        initExplorer() {
+            const explorer = window.navigator.userAgent
+            this.isMoz = explorer.indexOf('Firefox') === -1 ? false : true
+        },
+        graphChangeSize () {
+            const container =this.$refs.container
+            if (!container) {
+                return
+            }
+            this.graph.changeSize(container.offsetWidth, container.offsetHeight)
+        },
+        init: functionWithLoading(function() {
+                const el = this.$refs.container
+                const elWidth = el.offsetWidth
+                const elHeight = el.offsetHeight
+                const plugins = this.initPlugins({
+                    graphWidth: elWidth,
+                    graphHeight: elHeight,
+                });
+                const graph = new G6Pro.Graph({
+                    container: el,
+                    plugins,
+                    renderer: 'svg',
+                    width: elWidth,
+                    height: elHeight,
+                    layout:{
+                        type:'dagre',
+                        rankdir: 'LR',
+                        nodesepFunc: (node) => 5,
+                        ranksep: 10
+                    },
+                    modes:{
+                        default: ['custom-drag-canvas', { type: 'custom-zoom-canvas', sensitivity: 1}],
+                    },
+                    defaultNode:{
+                        shape:'round-rect',
+                        labelCfg: {
+                            style: {
+                                fill: '#000000A6',
+                                fontSize:10
+                            },
+                        },
+                        style:{
+                            stroke: '#720C4A',
+                            width: 220 * 1.3
+                        },
+                    },
+                    defaultEdge: {
+                        shape: 'fund-polyline',
+                    },
+                    minZoom:0.001,
+                });
+                graph.on('afterrender',()=>{
+                     const ob = new ResizeObserver(debounce(entries=>{
+                        for(let entry of entries){
+                            const cr = entry.contentRect
+                            this.graph.changeSize(cr.width, cr.height)
+                            this.$nextTick(()=>{
+                                tryToFitview(this.graph, fitViewPadding)
+                            })
+                        }
+                    }),100)
+                    ob.observe(el)
+                })
+                this.graph = graph
+                setTimeout(n=>this.setData())
+        }),
+
+        initPlugins({
+            graphWidth,
+            graphHeight
+        }){
+            const grid = new Grid()
+            const miniMap = new Minimap({
+                padding:200,
+                position:{
+                    x: -5,
+                    y: -50,
+                },
+                // container: minimapContainer,
+                // 通过zoomToolBar的长度计算
+                size:[220, Math.round(220/ graphWidth * graphHeight)],
+            })
+            const zoomToolBar = new ZoomToolBar({
+                position: {
+                    x:-5,
+                    y:-5
+                },
+                hideClearBtn:true,
+                fitViewPadding
+            })
+            return [
+                grid,
+                miniMap,
+                zoomToolBar
+            ]
+        },
+
+        // 获取画布左侧组件(请保留,menuTree需要被使用)
+        getDragMenu(){
+            return getCmpItems(this.versionNo).then(res => {
+                const atData = listToTree({ data: res.data, valueKey: 'cmpType', rootValue: 'root', parentKey: 'parentCmpType'})
+                let menuArr = []
+                let tData = []
+
+                atData.forEach(item => {
+                    if (item.cmpName === '渠道'){
+                        item.children.push({ cmpType: 'mgcAppPush', cmpName:'掌银App推送',levelType: '02', parentCmpType: 'channelGroup', dataStat:"01", nodeOrder:"8"})
+                    }
+                    tData.push(item)
+                })
+
+                tData.sort((a,b)=> a.nodeOrder - b.nodeOrder)
+                tData.forEach(v1 =>{
+                    let parentInfo = {}
+                    parentInfo.label = v1.cmpName
+                    parentInfo.key = v1.cmpType
+                    parentInfo.children = []
+                    parentInfo.order=v1.nodeOrder
+                    if (v1.children && v1.children.length> 0) {
+                        v1.children.forEach(v2 => {
+                            const options = {
+                                custGroup: {
+                                    color: 'sky',
+                                    activeColor:'#08B1CF',
+                                    activeBackgroundColor:'#d0f8ff',
+                                },
+                                reorgGroup: {
+                                    color:'#2985E7',
+                                    activeColor: '#2985E7',
+                                    activeBackgroundColor:'#ACD0F4'
+                                },
+                                channelGroup1: {
+                                    color: 'orange',
+                                    activeColor:'#FF852E',
+                                    activeBackgroundColor:'#ffe1cc'
+                                },
+                                timerEventGroup: {
+                                    color: 'green',
+                                    activeColor: '#00B893',
+                                    activeBackgroundColor: '#cafff4',
+                                },
+                                resGroup: {
+                                    color: 'orangered',
+                                    activeColor: '#E6320B',
+                                    activeBackgroundColor:'#fdd4cb'
+                                }
+                            }
+                            const {color,activeColor,activeBackgroundColor } = options[v2.parentCmpType]|| {}
+                            parentInfo.children.push({
+                                item:v2,
+                                label:v2.cmpName,
+                                key: v2.cmpType,
+                                icon: v2.cmpType.includes('Beta') ? v2.cmpType.replace('Beta', ''): v2.сmpTуре,
+                                order: v2.nodeOrder,
+                                color,
+                                activeColor,
+                                activeBackgroundColor
+                            })
+                        })
+                        parentInfo.children.sort((a,b) => a.order-b.order)
+                    }
+                    menuArr.push(parentInfo)
+                })
+                this.menuTree =menuArr
+            })
+        },
+        // 根据code值menu信息
+        getMenuByKey(key){
+            let allMenuList = this.menuTree.flatMap(e => e.children)
+            let filterMenu=allMenuList.find(menu => menu.key === key)
+            if(filterMenu ==undefined) {
+                filterMenu =allMenuList.find(menu =>key.includes(menu.key))
+            }
+            return filterMenu || {}
+        },
+
+        getOptionsByChannelId(channelId) {
+            return getReponseDist({pageNum: 1,pageSize: 30, search: {channelId}}).then(res => {
+                let options = []
+                if (res.data.list && res.data.list.length > 0) {
+                    res.data.list.forEach(e => {
+                        options.push({
+                            label: e.cfgName,
+                            value: e.stage.trim(),
+                            cfgContent: e.cfgContent,
+                            disabled: e.status === '01' ? false : true
+                        })
+                    })
+                } else {
+                    options = [
+                        { label: '执行', value: '1' },
+                        { label: '触达', value: '2' },
+                        { label: '响应', value: '3' }
+                    ]
+                }
+                return options
+            })
+        },
+
+        // 设置画布数据
+        setData: functionWithLoading(async function(data) {
+            // data = data || mockData
+
+            // this.graphImageName = data.graphImageName
+            if (!data) return
+            let vm = this
+            let graph = this.graph
+            let cavans = {
+                edges: data.edges || [],
+                nodes:(data.nodes || []).map(node => {
+                    return {
+                        ...node,
+                        cstonly: this.cstonly,
+                        isTestMode:this.isTestMode
+                    }
+                })
+            }
+            if(!cavans.nodes.length) {
+                cavans=this.data
+            }
+            const renderData = cavans//{edges:[],nodes:[cavans.nodes[0],cavans.nodes[1],cavans.nodes[2]]}
+            //处理下拉请求
+            const allOptionsApi = {
+                ebankApp: getEbankAppOptions,
+                intligCall: getIntligCallOptions,
+                teleSalesPlat: getTeleSalesPlatOptions,
+                waitEvent: getWaitEventOptions,
+                evtRespFlow: getWaitEventOptions,
+                evtRespFlowBranch: getEvtRespF1owBranchOptions,
+                cst:getGroupOrLabelList,
+                labelFlowBranch:getGroupOrLabelList,
+                act:getActivityOptions,
+                channel:getAllocationRuleList
+            }
+            const needRequestApi = new Map()
+            const needGenSelectOptionsList = [] //需要生成selectoptions的请求列表和节点信息list
+            cavans.nodes.forEach(node=> {
+                const menuKey = node.menuKey
+                // 从缓存中获取,没有获取就收集需要发送的请求,除了名单组件和按标签分流组件
+                let req = needRequestApi.get(menuKey)
+                const keys = Object.keys(allOptionsApi)
+                if (!req && keys.includes(menuKey) || ['cst','labelFlowBranch'].includes(menuKey)) {
+                    //有些下拉需要查询参数
+                    let params = {
+                        teleSalesPlat:this.$route.query.id,
+                        extAct: 'OPPT_EXT_ACT_SRC',
+                        cst: node,
+                        labelFlowBranch: node,
+                        act: node
+                    }[menuKey] || undefined
+                    if(['channel'].includes(menuKey)) params = {}
+                    req = allOptionsApi[menuKey](params)
+                    needRequestApi.set(menuKey,req)
+                }
+                req && needGenSelectOptionsList.push({node,req})
+            })
+            // 不在nodes-forEach中处理请求，因为无法控制异步的处理顺序，会导致在渲染卡片时请求其实还未生成的情况
+            if(needGenSelectOptionsList) {
+                const needGenSelectOptionsReqs = needGenSelectOptionsList.map(item => item.req)
+                const needGenSelectOptionsRespones =  await Promise.all(needGenSelectOptionsReqs)
+                needGenSelectOptionsList.forEach((item,index) => {
+                    const { node } = item
+                    const { menuKey, id } = node
+                    const options = needGenSelectOptionsRespones[index]
+                    const targetNode = cavans.nodes.find(i => i.id === id)
+
+                    if(menuKey === "channel"){
+                        targetNode.selectoptions = options.data
+                        return;
+                    }
+                    if (Array.isArray(options)) {
+                        if(menuKey !== "cst" && menuKey !== "labelFlowBranch"){
+                            const o = {}
+                            options.forEach(i => { o[i.value] = i.label })
+                            targetNode.selectoptions = o
+                        }else{
+                            targetNode.selectoptions = options
+                        }
+                    }else{
+                        targetNode.selectoptions = options
+                    }
+                })
+            }
+            Promise.all(needRequestApi.values()).then(() => {
+                return new Promise((resolve, reject) => {
+                    const p = cavans.nodes.map(node => {
+                        node.menuName = getMenuNameByKey(node.menuKey)
+                        if(!['start','end'].includes(node.menuKey)) {
+                            const menu = this.getMenuByKey(node.uniquekey || node.channelGroup || node.menuKey)
+                            return generateHtmlCode(node, menu, vm.versionNo,cavans.nodes, this.config)
+                            .then( ({ html,expandHeight,unexpandHeight }) => {
+                                if (!expandHeight) expandHeight = 120
+                                node.html = html
+                                node.expandHeight = expandHeight
+                                node.unexpandHeight = unexpandHeight
+                                node.size = [220,expandHeight]
+                            })
+                        }else{
+                            return Promise.resolve()
+                        }
+                    })
+                    return Promise.all(p).then(resolve)
+                })
+            }).then(() => {
+                this.$nextTick(() => {
+                    graph.data(renderData)
+                    graph.render()
+                    graph.setMode('view')
+                    tryToFitview(graph,fitViewPadding)
+                })
+            }).finally(() => {
+                this.canvasLoading = false
+            })
+        }),
+
+            //刷新画布
+            refresh (){
+                let graph= this.graph
+                let data = graph.save()
+                let cavans = {
+                    edges: data.edges,
+                    nodes: data.nodes.map(node => {
+                            return {
+                                ...node,
+                                cstonly: this.cstonly,
+                                isTestMode:this.isTestMode
+                            }
+                        })
+                }
+                graph.data(cavans)
+                graph.render()
+                this.$nextTick(() => {
+                    graph.fitView(fitViewPadding)
+                    graph.setMode('view')
+                })
+            },
+
+            /*右上角工具条*/
+            // 折叠/展开 forceExpand是否强制展开
+            changeExpandState(forceExpand = false) {
+                if(this.canvasLoading) {
+                    return
+                }
+                if (this.graph === null) {
+                    return
+                }
+                this.isTriggerByToolBar = true
+                const nodes=this.graph.getNodes()
+                const expand = forceExpand ? false : this.hasNodeExpand
+                for (let i = 0; i < nodes.length; i++) {
+                    this.graph.setItemState(nodes[i],'expand',!expand)
+                    //更新锚点连线
+                    this.graph.updateItem(nodes[i],{anchorPoints: [[0,0.5], [1,0.5]]})
+                }
+                this.hasNodeExpand = !expand
+            },
+
+            //下载
+            downloadPicture () {
+                if (this.canvasLoading) {
+                    return
+                }
+                //展开后再导出
+                this.changeExpandState(true)
+                const date =this.$util.formatFullDateTime(new Date()) 
+                const title =`${this.actName}_${date}`
+                const { realName, id } = this.$store.state.profile
+                const watermark =`${realName}_${id}_${dayjs().format('YYYY-MM-DD')}`
+                downloadPng(this.graph, title,watermark).finally(()=>{
+                    this.canvasLoading=false
+                })
+            },
+
+            // 全屏
+            toggleFullScreen () {
+                if (this.canvasLoading) {
+                    return
+                }
+                this.fullscreen = !this.fullscreen
+                const _this = this
+                // window.setTimeout(() => { _this.graphChangeSize() }, 0)
+                const position = this.fullscreen ? 'fixed' : 'absolute'
+                this.$refs.container.querySelector('.g6-minimap').style.position = position
+                this.$refs.container.querySelector('.g6-component-zoom-toolbar').style.position = position
+            },
+            bindListener() {
+                window.addEventListener('resize', this.resizeCallback)
+            },
+            unbindListener() {
+                window.removeEventListener('resize', this.resizeCallback)
+            },
+            resizeCallback: throttle(function (e) {
+                let container = this.$refs.container
+                if(container) {
+                    let width = container.offsetWidth
+                    let height = container.offsetWidth 
+                    let graph = this.graph
+                    graph && graph.changeSize(width, height)
+                }
+            },300),
+            activated() {
+                if(this.isDeactivated){
+                    this.isDeactivated = false
+                    this.bindListener()
+                }
+            },
+            deactivated() {
+                this.isDeactivated = true
+                this.unbindListener()
+            },
+        }
+}
+
+</script>
+
+<style lang="less" scoped>
+.show-msg-content:hover {
+    height: 150px !important;
+    word-break: break-all !important;
+    overflow: hidden scroll !important;
+    white-space: unset !important;
+    text-overflow: unset !important;
+    -o-text-overflow: unset !important;
+}
+.icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+::v-deep.event-detail-canvas-area {
+    height: 100%;
+    position: relative;
+    // background-image: url("~@/assets/images/canvas-icon/canvas-bg.png");
+    .event-detail-canvas{
+        height: 100%;
+        position: relative;
+    }
+    .fullscreen{
+        .event-container {
+            height: 100%;
+        }
+    }
+    .event-container {
+        width:100%;
+        height:500px;
+        z-index: 10;
+        background-color: #f4f5f6;
+        user-select: none;
+        &>svg{
+            width: 100%!important;
+            height: 100%!important;
+        }
+    }
+    .tool-bar-list{
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        z-index: 999;
+        padding: 10px;
+        background: rgba(176,196,222,0.3);
+        color: steelblue;
+        border-radius: 5px;
+        &>span{
+            margin: 0px 3px;
+        }
+        i{
+            padding: 5px;
+        }
+    }
+
+    .html-node-ct{
+        color:#444;
+        padding:20px;
+        h5{
+            color:#333;
+            font-size:15px;
+            margin:0 0 10px 0;
+        }
+        .node-li-tag{
+                color:#fff;
+                background: lightseagreen;
+                padding: 0 10px;
+                display:inline-block;
+                line-height: 24px;
+            }
+        .html-node-li{
+            margin:5px 0;
+            &::before{
+                content:"● ";
+                color:orange;
+            }
+        }
+    }
+    @import url('./htmlGenerator/canvas.less');
+
+
+
+
+    // .folding {
+    //     width: 70px;
+    //     height: min-content;
+    //     margin-top: 8px;
+    //     border-top-right-radius: 8px;
+    //     border-bottom-right-radius: 8px;
+
+    //     .toggle {
+    //         transform: rotateY(180deg);
+    //     }
+
+    //     .menu-bar-title {
+    //         height: 40px;
+    //         border-bottom: none;
+    //     }
+
+    //     .menu-bar-content {
+    //         display: none;
+    //     }
+    // }
+
+    // .graph-item {
+    //     width: 100%;
+    //     height: 100%;
+    //     border-radius: 5px;
+    //     user-select: none;
+    //     color: #fff;
+    //     padding: 7px;
+    //     .flex();
+
+    //     .iconfont {
+    //         font-size: @space3;
+    //         pointer-events: none;
+    //     }
+    // }
+
+    // .item-branch {
+    //     justify-content: flex-start;
+    //     padding: 0;
+
+    //     .iconfont {
+    //         width: 30%;
+    //         height: 100%;
+    //         margin: 0;
+    //         padding: 2px;
+    //     }
+    // }
+
+    // .item-branch2 {
+    //     justify-content: flex-start;
+    //     padding: 0;
+
+    //     .iconfont {
+    //         width: 35%;
+    //         height: 100%;
+    //         margin: 0;
+    //         padding: 2px;
+    //     }
+    // }
+
+    // .icon-merge {
+    //     width: 24px;
+    //     height: 24px;
+    //     background-image: url('~@/assets/images/icon-svg/biaoqian.svg')
+    // }
+
+    // .icon-maincontent {
+
+    //     width: 24px;
+    //     height: 24px;
+    //     background-image: url('~@/assets/images/icon-svg/biaoqian.svg')
+    // }
+
+    // .graph-node-label {
+    //     color: #fff;
+    //     font-size: 12px;
+    //     pointer-events: none;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    //     display: -webkit-box;
+    //     -webkit-line-clamp: 2;
+    //     -webkit-box-orient: vertical;
+    //     word-break: break-all;
+    // }
+
+    // .node-main {
+    //     text-align: center;
+    //     color: #777;
+    // }
+
+    // .node-branch,
+    // .node-branch2 {
+    //     -webkit-line-clamp: 1;
+    //     white-space: nowrap;
+    //     text-overflow: ellipsis;
+    //     line-height: 2;
+    // }
+
+    // .node-branch2 {
+    //     padding-left: 20px;
+    // }
+
+    // .graph-edge-label {
+    //     line-height: 1;
+    //     border-radius: (@space / 2);
+    //     font-size: 10px;
+    //     color: @primary;
+    //     .flex();
+    //     cursor: pointer;
+    // }
+
+    // .event-delete {
+    //     font-size: 16px;
+    //     border-radius: 50%;
+    //     color: #9FABC2;
+    //     background-color: #fff;
+    //     cursor: pointer;
+    // }
+
+    // .graph-node-status {
+    //     width: 100%;
+    //     height: 100%;
+    //     // .border(#f06);
+    //     text-align: center;
+    // }
+
+    // .status-content {
+    //     border-radius: (@space / 2);
+    //     padding: (@space / 2) @space;
+    //     background-color: #fff;
+    //     display: inline-block;
+    //     // position: relative;
+    //     font-size: 8px;
+    //     color: rgba(0, 0, 0, .65);
+    //     box-shadow: 0px 2px 6px 0px rgba(175, 175, 175, 1);
+    // }
+
+    // .status-text {
+    //     // z-index: 2;
+    //     // position: relative;
+    //     vertical-align: middle;
+    //     font-size: inherit;
+    //     display: inline-block;
+    // }
+
+    // .status-red {
+    //     color: #FF1A2E;
+    // }
+
+    // .status-green {
+    //     color: #5CB85C;
+    // }
+
+    // .status-blue {
+    //     color: #4A7FF6;
+    // }
+
+    // .status-opacity {
+    //     // animation: status-opacity 2s linear infinite;
+    // }
+    // @keyframes status-opacity {
+    //     0% {
+    //         opacity: 0;
+    //     }
+
+    //     100% {
+    //         opacity: 1;
+    //     }
+    // }
+}
+
+</style>