neic-hefeng/src/components/control/areaCard.vue

/* 自定义tabs */
<template>
    <div class="body" :style="style">
        <img class="logo" src="../../assets/img/logo.png" alt="">
        <div class="title">{{ title }}</div>
        <div style="margin-top: 50px; height:85%;" @contextmenu="contextmenu">
            <el-scrollbar>
                <div class="scoll">
                    <div class="matrix" v-if="startList.length>0">
                        <div class="problemTitle">启动</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="startList">
                        </MatrixBlock>
                    </div>
                    <div class="matrix" v-if="stopList.length>0">
                        <div class="problemTitle">停机</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="stopList">
                        </MatrixBlock>
                    </div>
                    <div class="matrix" v-if="maintainList.length>0">
                        <div class="problemTitle">维护</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="maintainList">
                        </MatrixBlock>
                    </div>
                    <div class="matrix" v-if="unMaintainList.length>0">
                        <div class="problemTitle">取消维护</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="unMaintainList">
                        </MatrixBlock>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div v-if="current==1" class="send" @click="handleSend">发送</div>
        <!-- <div class="success" v-if="showFlag&&current===0">指令发送成功</div> -->
    </div>
    <WindturbineDetailPages v-model="dialogVisible" @close="handleClose" :windturbine="currentWindturbine">
    </WindturbineDetailPages>
    <StationSvgDetailPages v-model="svgVisible" :stationName="stationName" :svgWeb="svgWeb" @close="handleClose">
    </StationSvgDetailPages>
</template>

<script>
    import BackgroundData from 'utils/BackgroundData'
    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
    import MatrixBlock from "../matrixBlock.vue";
    import MessageBridge from 'utils/MessageBridge'
    import api from "api/index";
    import StationSvgDetailPages from "../stationSvgDetailPages.vue";
    export default {
        name: 'gy-card',
        components: {
            MatrixBlock,
            WindturbineDetailPages,
            StationSvgDetailPages
        },
        created: function () {
            console.log(this.current)
            this.initData();
            this.suggestion();
        },
        emits: ["parentRun"],
        props: {
            title: {
                type: String,
                default: '',
                required: true,

            },
            height: {
                type: Number,
                default: 200,
            },
        },
        data() {
            return {
                current: 1,
                vss: {},
                windturbinelist: {},
                titleList: [],
                startList: [],
                stopList: [],
                maintainList: [],
                unMaintainList: [],
                chooseList: [],
                sendList: [],
                currentWindturbine: {},
                dialogVisible: false,
                svgVisible: false,
                // showFlag: false,
                postData: false,
                svgWeb: '',
                stationName: '',
                // 定时器
                timer: "",

                controlErorCodes: [
                    "控制成功",
                    "控制命令发送失败",
                    "无效的控制地址",
                    "被控设备异常",
                    "无效的控制功能",
                    "网络连接错误,检查场站通信",
                    "控制结果读取超时",
                    "未知错误",
                    "控制命令错误",
                    "收到无法识别数据",
                    "未读取到数据包",
                    "未知错误",
                    "风机操作过频繁",
                    "风机被挂牌",
                    "风机操作与风机状态不符",
                    "需要登录",
                ],
                windStation: {
                    'NG01': {
                        name: '牛首山'
                    },
                    'MG01': {
                        name: '麻黄山'
                    },
                    'QG01': {
                        name: '青山'
                    },
                    'NG01': {
                        name: '牛首山'
                    },
                    'SG01': {
                        name: '石板泉'
                    },
                    'XG01': {
                        name: '香山'
                    },
                },
                boosterStation: {
                    'MHS_SYZ': {
                        name: '麻黄山升压站'
                    },
                    'NSS_SYZ': {
                        name: '牛首山升压站'
                    },
                    'QS_SYZ': {
                        name: '青山升压站'
                    },
                    'QS3_SYZ': {
                        name: '青山三期升压站'
                    },
                    'SBQ_SYZ': {
                        name: '石板泉升压站'
                    },
                    'XS_SYZ': {
                        name: '香山升压站'
                    },
                    'DWK_SYZ': {
                        name: '大武口升压站'
                    },
                    'PL_SYZ': {
                        name: '平罗升压站'
                    },
                    'PL2_SYZ': {
                        name: '平罗二期升压站'
                    },
                    'XH_SYZ': {
                        name: '宣和升压站'
                    },
                    'MCH_SYZ': {
                        name: '马场湖升压站'
                    },
                    'HZJ_SYZ': {
                        name: '海子井升压站'
                    },
                },
                indexsss: 0,
            }
        },
        computed: {
            style() {
                return `width: 100%; height: ${this.height}vh;`
            },
        },
        methods: {
            control(current) {
                this.current = current === 0 ? current : current === 1 ? current : 1
                this.suggestion()
            },
            initData: function () {
                let mb = MessageBridge.getInstance();
                mb.unregister({ key: "/topic/suggestion" });
                let vs = [{ key: "/topic/suggestion", action: this.suggestion }];
                let vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
                this.vss = vss
                mb.register(vs);
                mb.register(vss);
            },
            suggestion(msg, headers) {
                msg ? this.$store.commit('suggestion', JSON.parse(msg)) : ''
                let bd = BackgroundData.getInstance();
                this.titleList = msg ? JSON.parse(msg) : this.$store.state.suggestion
                if (msg && JSON.parse(msg).length > 0) {
                    if (bd.LoginUser) {
                        this.postData = true
                    }
                }
                if (this.current === 0) {
                    console.log(this);
                    let dateList = []
                    this.titleList.forEach(item => {
                        if (item.windturbineId.slice(0, 2) === 'NG' || item.windturbineId.slice(0, 2) === 'MG') {
                            let arr = Object.keys(this.windturbinelist).sort()
                            this.windturbinelist = (arr.length !== 0) ? this.windturbinelist : this.$store.state.windturbinelist
                            switch (item.operateStyle) {
                                case 'Start':
                                    this.windturbinelist[item.windturbineId].controlType = 1
                                    break;
                                case 'Stop':
                                    this.windturbinelist[item.windturbineId].controlType = 2
                                    break;
                                case 'Maintain':
                                    this.windturbinelist[item.windturbineId].controlType = 6
                                    break;
                                case 'UnMaintain':
                                    this.windturbinelist[item.windturbineId].controlType = 8
                                    break;
                            }
                            dateList.push(this.windturbinelist[item.windturbineId])
                        }
                    })
                    let mss = {}
                    mss.type = 'send'
                    this.timer = setTimeout(() => {
                        this.sendCommand(mss, dateList, 'automatic')
                        // this.showFlag = true
                        clearInterval(this.timer);
                    }, 3000);
                }
            },
            windturbineMessage(msg) {
                if (this.$store.state.current === 1 || this.$store.state.current === 0) {
                    let arr = []
                    if (msg === 'CLOSE') {
                        arr.push(msg)
                    } else {
                        arr = msg.split('-')
                    }
                    this.dialogVisible = false
                    this.svgVisible = false
                    this.svgWeb = ''
                    console.log(arr);
                    if (arr[0] === 'OPEN_FJ') {
                        this.currentWindturbine = this.windturbinelist[arr[1]]
                        setTimeout(() => {
                            this.dialogVisible = true;
                        }, 500);
                    } else if (arr[0] === 'CLOSE') {
                        this.dialogVisible = false
                        this.svgVisible = false
                    } else if (arr[0] === 'OPEN_SYZ') {
                        this.showSvg = true
                        this.svgVisible = true
                        this.svgWeb = arr[1];
                        this.stationName = this.boosterStation[arr[1]].name
                    } else if (arr[0] === 'CONTROL_START' || arr[0] === 'CONTROL_STOP' || arr[0] === 'CONTROL_MAINTAIN' || arr[0] === 'CONTROL_UNMAINTAIN') {
                        let windControlList = [];
                        let mss = {}
                        arr.forEach(item => {
                            if (item === (this.windturbinelist[item] ? this.windturbinelist[item].windturbineId : '')) {
                                switch (arr[0]) {
                                    case 'CONTROL_START':
                                        this.windturbinelist[item].controlType = '1'
                                        break
                                    case 'CONTROL_STOP':
                                        this.windturbinelist[item].controlType = '2'
                                        break
                                    case 'CONTROL_MAINTAIN':
                                        this.windturbinelist[item].controlType = '6'
                                        break
                                    case 'CONTROL_UNMAINTAIN':
                                        this.windturbinelist[item].controlType = '8'
                                        break
                                }
                                windControlList.push(this.windturbinelist[item])
                            }
                        })
                        mss.type = 'send'
                        this.sendCommand(mss, windControlList)
                    } else if (arr[0] === 'CONTROL_LOCK_OVERHAUL' || arr[0] === 'CONTROL_LOCK_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_OVERHAUL' ||
                        arr[0] === 'CONTROL_LOCK_LNVOLVED_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_PG' || arr[0] === 'CONTROL_LOCK_LNVOLVED_WEATHER' || arr[0] === 'CONTROL_UNLOCK') {
                        let windturbine = this.windturbinelist[arr[1]]
                        switch (arr[0]) {
                            case 'CONTROL_LOCK':
                                this.sendLock({ value: "Lock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_OVERHAUL':
                                this.sendLock({ value: "CheckLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_MAINTAIN':
                                this.sendLock({ value: "FaultLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_OVERHAUL':
                                this.sendLock({ value: "StationCheckLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_MAINTAIN':
                                this.sendLock({ value: "StationFaulLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_PG':
                                this.sendLock({ value: "StationPowerLineLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_WEATHER':
                                this.sendLock({ value: "StationWeatherLock" }, windturbine);
                                break;
                            case 'CONTROL_UNLOCK':
                                this.sendLock({ value: "UnLock" }, windturbine);
                                break;
                        }
                    } else if (arr[0] === 'CONTROL_SART_RECOMMENDATION') {
                        let mss = {}
                        mss.type = 'send'
                        this.startList.forEach(item => {
                            item.controlType = '1'
                        })
                        this.sendCommand(mss, this.startList)
                    } else if (arr[0] === 'CONTROL_STOP_RECOMMENDATION') {
                        let mss = {}
                        mss.type = 'send'
                        this.stopList.forEach(item => {
                            item.controlType = '2'
                        })
                        this.sendCommand(mss, this.stopList)
                    } else if (arr[0] === 'CONTROL_RECOMMENDATION_ALL') {
                        let windControlList = []
                        let mss = {}
                        mss.type = 'send'
                        this.startList.forEach(item => {
                            item.controlType = '1'
                            windControlList.push(item)
                        })
                        this.stopList.forEach(item => {
                            item.controlType = '2'
                            windControlList.push(item)
                        })
                        this.maintainList.forEach(item => {
                            item.controlType = '6'
                            windControlList.push(item)
                        })
                        this.unMaintainList.forEach(item => {
                            item.controlType = '8'
                            windControlList.push(item)
                        })
                        this.sendCommand(mss, windControlList)
                    }
                }

            },
            handleClick(values) {
                if (values.active) {
                    let showIndex = null
                    this.chooseList.forEach((item, index) => {
                        if (item.windturbineId === values.windturbineId) {
                            showIndex = index
                        }
                    })
                    this.chooseList.splice(showIndex, 1);
                } else {
                    this.chooseList.push(values)
                }
                this.startList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
                this.stopList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
                this.maintainList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
                this.unMaintainList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
            },
            handleDetial(itm) {
                this.dialogVisible = true;
                this.currentWindturbine = itm;
            },
            handleClose() {
                this.dialogVisible = false
                this.svgVisible = false
            },
            handleSend() {
                if (this.chooseList.length > 0) {
                    this.chooseList.forEach(item => {
                        if (item.operateStyle === "Start") {
                            item.controlType = 1
                        } else if (item.operateStyle === "Stop") {
                            item.controlType = 2
                        } else if (item.operateStyle === "Maintain") {
                            item.controlType = 6
                        } else if (item.operateStyle === "UnMaintain") {
                            item.controlType = 8
                        }
                    })
                    let mss = {}
                    mss.type = 'send'
                    this.sendCommand(mss, this.chooseList)
                }
            },
            /* 右键菜单 */
            contextmenu() {
                const { remote } = require("electron");
                let that = this;
                const menuTemplate = [
                    {
                        label: "发送",
                        click() {
                            that.handleSend();
                        },
                    },
                    {
                        label: "挂牌",
                        submenu: [
                            {
                                label: "检修",
                                click() {
                                    that.sendLock({ value: "CheckLock" });
                                },
                            },
                            {
                                label: "故障维修",
                                click() {
                                    that.sendLock({ value: "FaultLock" });
                                },
                            },
                            {
                                label: "场内受累检修",
                                click() {
                                    that.sendLock({ value: "StationCheckLock" });
                                },
                            },
                            {
                                label: "场内受累故障",
                                click() {
                                    that.sendLock({ value: "StationFaulLock" });
                                },
                            },
                            {
                                label: "场外受累电网",
                                click() {
                                    that.sendLock({ value: "StationPowerLineLock" });
                                },
                            },
                            {
                                label: "场外受累天气",
                                click() {
                                    that.sendLock({ value: "StationWeatherLock" });
                                },
                            },
                        ],
                    },
                ];
                const menu = remote.Menu.buildFromTemplate(menuTemplate);

                menu.popup(remote.getCurrentWindow());
            },
            sendCommand(msg, windturbine) {
                let bd = BackgroundData.getInstance();
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "控制风机需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    return;
                }
                let sendList = windturbine
                if (sendList.length > 0) {
                    bd.checkout(sendList);
                    this.chooseList = []
                    let pairs = {}
                    sendList.forEach(item => {
                        let ct = {
                            windturbineId: item.windturbineId,
                            stationId: item.stationId,
                            projectId: item.projectId,
                            modelId: item.modelId,
                            controlType: item.controlType,
                            lockType: item.lockType,
                            userName: `system_${bd.LoginUser.name}`,
                            userId: 0,
                            auto: this.current === 0 ? true : false,
                        };
                        pairs[ct.windturbineId] = ct;
                    })
                    api.windturbControl(pairs).then(res => {
                        if (res) {
                            // this.showFlag = false
                            this.controlSuccess(res)
                        }
                    })
                }
            },
            sendLock(msg, windturbine) {
                let bd = BackgroundData.getInstance();
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "控制风机需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    return;
                }
                let sendList = []
                if (windturbine) {
                    windturbine.lockType = msg.value;
                    sendList.push(windturbine)
                } else {
                    this.chooseList.forEach(item => {
                        item.lockType = msg.value;
                    })
                    sendList = this.chooseList
                }
                if (sendList.length > 0) {
                    this.chooseList = []
                    let pairs = {}
                    sendList.forEach(item => {
                        let ct = {
                            windturbineId: item.windturbineId,
                            stationId: item.stationId,
                            projectId: item.projectId,
                            modelId: item.modelId,
                            controlType: item.controlType,
                            lockType: item.lockType,
                            userName: `system_${bd.LoginUser.name}`,
                            userId: 0,
                        };
                        pairs[ct.windturbineId] = ct;
                    })
                    api.windturbControlLock(pairs).then(res => {
                        if (res) {
                            this.controlSuccess(res)
                        }
                    })
                }
            },
            clearSelected() {
                this.startList.forEach(item => {
                    item.active = false
                })
                this.stopList.forEach(item => {
                    item.active = false
                })
                this.chooseList = []
            },
            /* 控制成功 */
            controlSuccess(msg) {
                let bd = BackgroundData.getInstance();
                console.log(msg);
                if (msg.data || msg.data !== {}) {
                    // if (this.current !== 0) {
                    //     let successReport = ''
                    //     let failureReport = ''
                    //     let successList = []
                    //     let failureList = []
                    //     for (let item in msg.data) {
                    //         if (msg.data[item].errorCode === '0') {
                    //             successList.push(msg.data[item])
                    //         } else {
                    //             failureList.push(msg.data[item])
                    //         }
                    //     }
                    //     successList.forEach((item, index) => {
                    //         if (index < 3) {
                    //             let wind = item.windturbineId.split('_')
                    //             successReport = successReport + this.windStation[wind[0]].name + wind[1] + '风机，'
                    //         }
                    //     })
                    //     failureList.forEach((item, index) => {
                    //         if (index < 3) {
                    //             let wind = item.windturbineId.split('_')
                    //             failureReport = failureReport + this.windStation[wind[0]].name + wind[1] + '风机，'
                    //         }
                    //     })
                    //     if (successReport !== '') {
                    //         let url1 = process.env.VUE_APP_API + '/api/voice-control/send-topic/TTS:' + successReport + (successList.length > 3 ? '等风机操作成功' : '操作成功')
                    //         this.sendMessage(url1)
                    //     }
                    //     if (failureReport !== '') {
                    //         let url1 = process.env.VUE_APP_API + '/api/voice-control/send-topic/TTS:' + failureReport + (failureList.length > 3 ? '等风机操作失败' : '操作失败')
                    //         this.sendMessage(url1)
                    //     }
                    // }
                    let mss = '';     // 信息
                    let iserror = false;// 是否有控制错误的风机
                    for (let v in msg.data) {
                        let val = msg.data[v];
                        if (val.errorCode > 0) {
                            iserror = true;
                            mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
                        }
                    }
                    let tp = iserror ? "warning" : "success";
                    if (!iserror) {
                        mss = "控制成功";
                    }
                    this.$notify({
                        title: "控制",
                        message: mss,
                        type: tp,
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                } else {
                    this.$notify({
                        title: "控制出现错误",
                        message: '控制失败，请重试',
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                }
            },

            /* 控制失败 */
            controlError(err) {
                this.$notify({
                    title: "控制出现错误",
                    message: err.message,
                    type: "warning",
                    position: "bottom-right",
                    offset: 60,
                    duration: 3000,
                });
            },
            sendMessage(url1) {
                this.messageUrl = url1
                // let link = document.createElement('a')
                // link.href = url1
                // link.click()
            }
        },
        watch: {
            "$store.getters.windturbinelist": {
                deep: true,
                handler: function (json) {
                    this.windturbinelist = json
                    let arr = Object.keys(json).sort()
                    this.stopList = []
                    this.startList = []
                    this.maintainList = []
                    this.unMaintainList = []
                    for (let id of arr) {
                        let val = json[id];
                        this.chooseList.forEach(item => {
                            if (item.windturbineId === val.windturbineId) {
                                val.active = true
                            }
                        })
                        this.titleList.forEach(item => {
                            if (item.windturbineId === val.windturbineId) {
                                val.operateStyle = item.operateStyle
                                if (item.operateStyle === "Start" && val.status === 2) {
                                    this.startList.push(val)
                                } else if (item.operateStyle === "Stop" && val.status === 4) {
                                    if(item.reasonType === 'ElectricityRestrictions'){
                                        val.reasonType = item.reasonType
                                    } 
                                    this.stopList.push(val)
                                }
                                else if (item.operateStyle === "Maintain" && val.status === 2) {
                                    this.maintainList.push(val)
                                }
                                else if (item.operateStyle === "UnMaintain" && val.status === 6) {
                                    this.unMaintainList.push(val)
                                }
                            }
                        })
                    }
                    if (this.postData && (this.current === 1)) {
                        let postList = [...this.startList, ...this.stopList]
                        api.sendRecommend(postList).then(res => {
                            if (res) {

                            }
                        })
                    }
                    this.postData = false
                    let checkoutList = BackgroundData.getInstance().checkouts;
                    checkoutList.forEach(item => {
                        let starIndex = null
                        let stopIndex = null
                        let maintainIndex = null
                        let unMaintainIndex = null
                        let starFlag = false
                        let stopFlag = false
                        let maintainFlag = false
                        let unMaintainFlag = false
                        this.startList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                starIndex = index
                                starFlag = true
                            }
                        })
                        this.stopList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                stopIndex = index
                                stopFlag = true
                            }
                        })
                        this.maintainList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                maintainIndex = index
                                maintainFlag = true
                            }
                        })
                        this.unMaintainList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                unMaintainIndex = index
                                unMaintainFlag = true
                            }
                        })
                        starFlag ? this.startList.splice(starIndex, 1) : '';
                        stopFlag ? this.stopList.splice(stopIndex, 1) : '';
                        maintainFlag ? this.maintainList.splice(maintainIndex, 1) : '';
                        unMaintainFlag ? this.unMaintainList.splice(unMaintainIndex, 1) : '';
                    })
                },
            },
            "$store.getters.current": {
                handler: function (json) {
                    this.current = json
                    if (json === 0) {
                        let dateList = []
                        this.titleList.forEach(item => {
                            if (item.windturbineId.slice(0, 2) === 'NG' || item.windturbineId.slice(0, 2) === 'MG') {
                                let arr = Object.keys(this.windturbinelist).sort()
                                this.windturbinelist = (arr.length !== 0) ? this.windturbinelist : this.$store.state.windturbinelist
                                switch (item.operateStyle) {
                                    case 'Start':
                                        this.windturbinelist[item.windturbineId].controlType = 1
                                        break;
                                    case 'Stop':
                                        this.windturbinelist[item.windturbineId].controlType = 2
                                        break;
                                    case 'Maintain':
                                        this.windturbinelist[item.windturbineId].controlType = 6
                                        break;
                                    case 'UnMaintain':
                                        this.windturbinelist[item.windturbineId].controlType = 8
                                        break;
                                }
                                dateList.push(this.windturbinelist[item.windturbineId])
                            }
                        })
                        let mss = {}
                        mss.type = 'send'
                        this.timer = setTimeout(() => {
                            this.sendCommand(mss, dateList)
                            this.showFlag = false
                            clearInterval(this.timer);
                        }, 3000);
                    }
                }
            }
        },
    }
</script>

<style scoped="scoped">
    .body {
        border: 1px solid #373737;
        width: 100%;
        margin-left: 15px;
        margin-top: 20px;
    }

    .body .scoll {
        height: 91%;
    }

    .title {
        color: #ffffff;
        font-size: 14px;
        margin-left: 32px;
        /* margin-top: 12px; */
        margin-bottom: 10px;
        /* width: 570px; */
        width: 29vw;
        height: 50px;
        display: flex;
        align-items: center;
        position: absolute;
        background-color: #000000;
    }

    .title::before {
        z-index: 1;
        content: '';
        position: absolute;
        left: -18px !important;
        /* top: 30px !important; */
        width: 5px;
        height: 5px;
        background-color: #54B75A;
        border-radius: 50%;
    }

    .logo {
        position: absolute;
        top: 12px;
        left: 12px;
    }

    .matrix {
        margin-left: 20px;
        /* margin-right: 10px; */
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(31, 31, 31, 1);
    }

    .problemTitle {
        font-size: 12px;
        color: #BFBFBF;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 12px;
    }

    .send {
        width: 86px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(84, 183, 90, 1);
        color: #ffffff;
        font-size: 14px;
        position: absolute;
        bottom: 20px;
        right: 10px;
    }

    .success {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 250px;
        height: 48px;
        position: absolute;
        bottom: 20px;
        right: 20%;
        border: 1px solid rgba(55, 55, 55, 1);
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
    }
</style>