postdischarge-ui/src/views/system/specialDiseaseNode/index.vue

<template>
    <div class="app-container">
        <el-descriptions title="编辑主路径" />
        <div class="title">
            <el-tag>主路径</el-tag>
            <div>
                {{ updata.routeName }}
            </div>
            <div class="select">
                <span>
                    适用范围
                </span>
                <el-select v-model="updata.suitRange">
                    <el-option label="在院" value="IN_THE_HOSPITAL" />
                    <el-option label="出院" value="DISCHARGE" />
                    <el-option label="门诊" value="OUTPATIENT_SERVICE" />
                    <el-option label="门诊+出院" value="OUTPATIENT_SERVICE_DISCHARGE" />
                </el-select>
            </div>
        </div>
        <div class="list">
            <div class="timelist">
                <div class="timetitle">
                    管理路径节点({{ lists.length }})
                    <i class="el-icon-circle-plus-outline" @click="addlist"></i>
                </div>
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in lists" :key="index"
                        :color="listindex == index ? '#409EFF' : ''">
                        <div class="top">
                            <div class="toptop">
                                <el-select v-model="item.routeNodeName" style="width:87px">
                                    <el-option label="出院后" value="AFTER_DISCHARGE" />
                                    <el-option label="入院后" value="AFTER_ADMISSION" />
                                    <el-option label="就诊后" value="AFTER_CONSULTATION" />
                                    <el-option label="就诊/出院后" value="AFTER_VISIT_DISCHARGE" />
                                    <el-option label="术前" value="PREOPERATIVE" />
                                    <el-option label="术后" value="POSTOPERATIVE" />
                                </el-select>
                                <el-input v-model="item.routeNodeDay" style="width: 50px;"></el-input>
                                <span>天</span>
                            </div>
                            <div>
                                <i class="el-icon-delete" @click="delitem(item, index)"></i>
                                <i class="el-icon-circle-plus-outline" @click="additem(item)"></i>
                            </div>
                        </div>
                        <el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
                            @click.native='bottomclickevent(uitem, index, uindex)'
                            :class="listindex == index && itemindex == uindex ? 'cards' : ''">
                            <h3 style="height: 20px;">{{ uitem.taskTypeName }}</h3>
                            <el-tag v-if="uitem.routeCheckStatus == 'AGREE'" class="routeCheckStatus">已审核</el-tag>
                            <el-tag v-else type="warning" class="routeCheckStatus">未审核</el-tag>
                            <p style="height: 16px;">{{ uitem.taskSubdivisionName }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="texts">
                <div class="topform">
                    <el-form ref="form" :inline="true" :model="form" class="form">
                        <el-form-item label="任务类型" prop="">
                            <el-select v-model="form.taskType" style="width:110px" @change="changeTaskType">
                                <el-option v-for="item in selectTaskTypeList" :key="item.taskTypeCode"
                                    :label="item.taskTypeName" :value="item.taskTypeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务细分" prop="">
                            <el-select v-model="form.taskSubdivision" style="width:110px"
                                @change="changetaskSubdivision">
                                <el-option v-for="item in taskPartitionList" :key="item.taskPartitionCode"
                                    :label="item.taskPartitionName" :value="item.taskPartitionCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务状态" prop="">
                            <el-select v-model="form.taskStatus" style="width:110px">
                                <el-option v-for="item in taskStatusDictList" :key="item.id"
                                    :label="item.taskStatusName" :value="item.taskStatusCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类描述" prop="">
                            <el-input v-model="form.secondClassifyDescribe" style="width:110px"></el-input>
                        </el-form-item>
                        <el-form-item label="执行时间" prop="">
                            <el-time-select v-model="form.executionTime" style="width:120px" placeholder="选择时间">
                            </el-time-select>
                        </el-form-item>
                        <el-form-item label="问卷库模板选择" prop=""
                            v-if="form.taskSubdivisiontemplateType == 'QUESTIONNAIRE'">
                            <question @on-template="questionontemplate" :templateId="form.templateId"
                                :templateName="form.templateName"></question>
                        </el-form-item>
                        <el-form-item label="宣教库模板选择" prop="" v-if="form.taskSubdivisiontemplateType == 'PROPAGANDA'">
                            <propaganda @on-template="propagandaontemplate" :templateId="form.templateId"
                                :templateName="form.templateName"></propaganda>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="bottomform">
                    <wangeditor style="width:100%;" :nodeContent="form.nodeContent" @on-nodeContent="onNodeContent"
                        ref="wangeditor" />
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    短信
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <message @on-template="messageontemplate" :templateId="form.messageTemplateId"
                                    :templateName="form.messageTemplateName"></message>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.messagePushSign" active-color="#13ce66" active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信预览：
                            </div>
                            <el-input class="textarea" v-model="form.messagePreview" disabled></el-input>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    公众号
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <officialAccount @on-template="officialAccountontemplate"
                                        :templateId="form.officialTemplateId" :templateName="form.officialTemplateName">
                                    </officialAccount>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.officialPushSign" active-color="#13ce66" active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提醒内容：
                            </div>
                            <el-input v-model="form.officialRemindContent" class="textarea" disabled></el-input>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    小程序
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <miniProgram @on-template="miniProgramtemplate" :templateId="form.appletTemplateId"
                                        :templateName="form.appletTemplateName">
                                    </miniProgram>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.appletPushSign" active-color="#13ce66" active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提醒内容：
                            </div>
                            <el-input v-model="form.appletRemindContent" class="textarea" disabled></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提示说明：
                            </div>
                            <el-input v-model="form.appletPromptDescription" class="textarea" disabled></el-input>
                        </div>
                    </div>
                    <!-- <div class="card" style="height: 250px;">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    AI电话
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66"  active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                机构名称：
                            </div>
                            <div class="text">
                                我是
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:150px;padding:0 10px"></el-input>
                            <div class="text">
                                的工作人员
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                重播次数：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                            <div class="text" style="padding-left: 100px;">
                                时间间隔：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信提醒：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="text" style="padding-left: 100px;">
                                短信模板：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="TemporaryStorage">暂 存</el-button>
            <el-button type="primary" @click="dialogVisible = true" v-if="form.specialDiseaseNodeId">审核完成 {{ agreeNumber
                    ? agreeNumber :
                    '0' }} / {{
                    totalNumber ? totalNumber : '0' }}</el-button>
        </div>
        <el-dialog title="提交审核完成" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="routeform" :model="routeform" label-width="120px" :rules="rules">
                <el-form-item label="节点审核状态" prop="routeCheckStatus">
                    <el-radio v-model="routeform.routeCheckStatus" label="AGREE">同意</el-radio>
                    <el-radio v-model="routeform.routeCheckStatus" label="DISAGREE">不同意</el-radio>
                </el-form-item>
                <el-form-item label="节点审核备注">
                    <el-input type="textarea" :rows="2" placeholder="请输入节点审核备注" v-model="routeform.routeCheckRemark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="auditing">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import wangeditor from '../components/wangEditor.vue'
import question from '../components/question.vue'
import message from '../components/message.vue'
import propaganda from '../components/propaganda.vue'
import officialAccount from '../components/officialAccount.vue'
import miniProgram from '../components/miniProgram.vue'
import {
    selectTaskTypeList, taskPartitionList, taskStatusDictList, specialDiseaseNode, selectSpecialDisease, updateRouteCheckStatus
} from '@/api/system/specialDiseaseNode'
export default {
    components: { wangeditor, question, propaganda, message, officialAccount, miniProgram },
    name: "specialDiseaseNode",
    data() {
        return {
            dialogVisible: false,
            routeform: {
                routeCheckStatus: null,
                routeCheckRemark: "",
            },
            rules: {
                routeCheckStatus: [
                    { required: true, message: '请选择节点审核状态', trigger: 'change' }
                ],
            },
            totalNumber: 0,
            agreeNumber: 0,
            updata: {
                specialDiseaseRouteId: '',
                suitRange: '',
                routeName: '',
                specialDiseaseNodeList: [],
            },
            form: {
                nodeContent: '<p></p>',
                templateId: '',
                templateName: '',
                taskType: '',
                taskSubdivision: '',
                taskSubdivisionName: '',
                taskStatus: '',
                secondClassifyDescribe: '',
                executionTime: '',
                appletPushSign: '0',
                officialPushSign: '0',
                messagePushSign: '0',
                taskSubdivisiontemplateType: '',
                officialRemindContent: '',
                messagePreview: '',
                appletRemindContent: '',
                appletPromptDescription: '',
            },
            itemindex: 0,
            listindex: 0,
            lists: [],
            value: '',
            input: '',
            //任务类型
            selectTaskTypeList: [],
            //任务状态
            taskStatusDictList: [],
            //任务细分
            taskPartitionList: [],
        };
    },
    created() {
        this.taskinfo();
    },
    beforeDestroy() { },
    watch: {},
    mounted() {
    },
    methods: {
        info() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.lists = []
            if (this.$route.query) {
                this.updata.suitRange = this.$route.query.suitRange
                this.updata.routeName = this.$route.query.routeName
                this.updata.specialDiseaseRouteId = this.$route.query.id
                selectSpecialDisease(this.$route.query.id).then(res => {
                    loading.close();
                    this.agreeNumber = res.data.agreeNumber
                    this.totalNumber = res.data.totalNumber
                    res.data.specialDiseaseNodeList.forEach(e => {
                        e.messagePushSign = '' + e.messagePushSign
                        e.officialPushSign = '' + e.officialPushSign
                        e.appletPushSign = '' + e.appletPushSign
                    })
                    this.lists = this.handleData(res.data.specialDiseaseNodeList, 'routeNodeDay', 'routeNodeName')
                    this.form = this.lists[0].list[0]
                    if (this.form.taskType) {
                        this.changeTaskType(this.form.taskType, this.form.taskSubdivision)
                    }
                })
            } else {
                loading.close();
                this.lists.push({
                    routeNodeName: "",
                    routeNodeDay: '',
                    list: [
                        {
                            nodeContent: '<p></p>',
                            templateId: '',
                            templateName: '',
                            taskType: '',
                            taskSubdivision: '',
                            taskSubdivisionName: '',
                            taskStatus: '',
                            secondClassifyDescribe: '',
                            executionTime: '',
                            appletPushSign: '0',
                            officialPushSign: '0',
                            messagePushSign: '0',
                            messagePreview: '',
                            officialRemindContent: '',
                            taskSubdivisiontemplateType: '',
                            appletRemindContent: '',
                            appletPromptDescription: '',
                        },
                    ],
                })
                this.form = this.lists[0].list[0]
            }
        },
        handleData(list, key, keytwo) {
            //得到数据的主键列表
            let keysArr = list.map(item => {
                return {
                    routeNodeDay: item[key],
                    routeNodeName: item[keytwo],
                }
            })
            let keys = [...new Set(keysArr)]
            let newList = keys.map(item => {
                return {
                    //这里写新的 数据结构 如下是整体复制
                    routeNodeDay: item[key],
                    routeNodeName: item[keytwo],
                    list: list.filter(i => i[key] == item[key] && i[keytwo] == item[keytwo])
                }
            })
            return newList;
        },
        //wangeditor传值
        onNodeContent(item) {
            this.form.nodeContent = item.nodeContent
        },
        //小程序传值
        miniProgramtemplate(item) {
            this.form.appletTemplateId = item.templateId
            this.form.appletTemplateName = item.templateName
            this.form.appletRemindContent = item.templateContent
        },
        //短信传值
        messageontemplate(item) {
            this.form.messageTemplateId = item.templateId
            this.form.messageTemplateName = item.templateName
            this.form.messagePreview = item.templateContent
        },
        //公众号传值
        officialAccountontemplate(item) {
            this.form.officialTemplateId = item.templateId
            this.form.officialTemplateName = item.templateName
            this.form.officialRemindContent = item.templateContent
        },
        //暂存
        TemporaryStorage() {
            this.$refs.wangeditor.emit()
            this.$confirm('确认暂存时将过滤掉部分内容未填写完成的子节点,是否确认暂存？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '暂存中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.updata.specialDiseaseNodeList = []
                this.lists.forEach(e => {
                    e.list.length > 0 ? e.list.forEach(el => {
                        el.routeNodeDay = e.routeNodeDay
                        el.routeNodeName = e.routeNodeName
                        this.updata.specialDiseaseNodeList.push(el)
                    }) : ""
                })
                this.updata.specialDiseaseNodeList = this.updata.specialDiseaseNodeList.filter(e => e.routeNodeDay && e.routeNodeName && e.taskType && e.taskSubdivision && e.taskStatus)
                specialDiseaseNode(this.updata).then(res => {
                    this.info();
                    loading.close();
                    this.$modal.msgSuccess("暂存成功!");
                })
            })
        },
        //问卷传值
        questionontemplate(item) {
            this.form.templateId = item.templateId
            this.form.templateName = item.templateName
        },
        //宣教传值
        propagandaontemplate(item) {
            this.form.templateId = item.templateId
            this.form.templateName = item.templateName
        },
        bottomclickevent(uitem, index, uindex) {
            this.$refs.wangeditor.emit()
            this.form = uitem
            if (this.form.taskType) {
                this.changeTaskType(this.form.taskType, this.form.taskSubdivision)
            }
            this.listindex = index
            this.itemindex = uindex
        },
        handleStep() {
            this.active = 2
        },
        //任务类型 任务状态
        taskinfo() {
            selectTaskTypeList().then(res => {
                this.selectTaskTypeList = res.data
                this.info();
            })
            taskStatusDictList().then(res => {
                this.taskStatusDictList = res.data
            })
        },
        //任务类型
        changeTaskType(code, taskSubdivision) {
            let id = this.selectTaskTypeList?.find(e => e.taskTypeCode == code)?.id
            this.form.taskTypeName = this.selectTaskTypeList?.find(e => e.taskTypeCode == code)?.taskTypeName
            taskPartitionList(id).then(res => {
                this.taskPartitionList = res.data
                this.form.taskSubdivision = ''
                this.form.taskSubdivisionName = ''
                this.form.taskSubdivisiontemplateType = ''
                if (taskSubdivision) {
                    this.form.taskSubdivision = taskSubdivision
                    this.changetaskSubdivision(taskSubdivision, 1)
                }
            })
        },
        //点击任务细分
        changetaskSubdivision(code, type) {
            this.form.taskSubdivisionName = this.taskPartitionList?.find(e => e.taskPartitionCode == code).taskPartitionName
            this.taskPartitionList.forEach(el => {
                if (code == el.taskPartitionCode) {
                    this.form.executionTime = el.executionTime
                    this.form.taskSubdivisiontemplateType = el.templateType
                    if (!type) {
                        this.form.templateId = ''
                        this.form.templateName = ''
                    }
                }
            })
        },
        addlist() {
            this.lists.push({
                routeNodeName: "",
                routeNodeDay: '',
                list: [
                    {
                        nodeContent: '<p></p>',
                        templateId: '',
                        templateName: '',
                        taskType: '',
                        officialRemindContent: '',
                        taskSubdivision: '',
                        taskSubdivisionName: '',
                        appletRemindContent: '',
                        appletPromptDescription: '',
                        taskStatus: '',
                        secondClassifyDescribe: '',
                        executionTime: '',
                        appletPushSign: '0',
                        officialPushSign: '0',
                        messagePushSign: '0',
                        messagePreview: '',
                        taskSubdivisiontemplateType: '',
                    },
                ]
            })
        },
        additem(item) {
            item.list.push({
                nodeContent: '<p></p>',
                templateId: '',
                templateName: '',
                taskType: '',
                officialRemindContent: '',
                taskSubdivision: '',
                taskSubdivisionName: '',
                taskStatus: '',
                secondClassifyDescribe: '',
                executionTime: '',
                appletPushSign: '0',
                officialPushSign: '0',
                messagePushSign: '0',
                appletRemindContent: '',
                appletPromptDescription: '',
                messagePreview: '',
                taskSubdivisiontemplateType: '',
            })
        },
        delitem(item, index) {
            item.list.splice(this.itemindex, 1)
            if (item.list.length == 0) {
                this.lists.splice(index, 1)
            }
        },
        //取消
        handleClose() {
            this.dialogVisible = false
            this.routeform = {
                routeCheckStatus: '',
                routeCheckRemark: "",
            }
            this.resetForm("routeform");
        },
        //审核
        auditing() {
            this.$refs["routeform"].validate(valid => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '审核中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    if (!this.routeform.routeNodeDay) {
                        this.$message.error('请输入节点时间段天数');
                        return
                    }
                    if (!this.routeform.routeNodeName) {
                        this.$message.error('请选择节点时间段');
                        return
                    }
                    if (!this.routeform.taskType) {
                        this.$message.error('请选择任务类型');
                        return
                    }
                    if (!this.routeform.taskSubdivision) {
                        this.$message.error('请选择任务细分');
                        return
                    }
                    if (!this.routeform.taskStatus) {
                        this.$message.error('请选择任务状态');
                        return
                    }
                    updateRouteCheckStatus({
                        routeCheckStatus: this.routeform.routeCheckStatus,
                        id: this.form.specialDiseaseNodeId,
                        routeCheckRemark: this.routeform.routeCheckRemark,
                        routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName
                    }).then(res => {
                        loading.close();
                        if (res.data == 1) {
                            this.info();
                            this.handleClose()
                            this.$modal.msgSuccess("审核成功!");
                        }
                    })
                }
            })
        },
    }
};
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
    position: relative;
}

.routeCheckStatus {
    position: absolute;
    right: 10px;
    top: 30px;
}

.dialog-footer {
    padding: 0 20px 0;
    text-align: right;
}

.bottomform {
    background-color: #f2f4f5;
    margin-top: 10px;

    .card {
        background-color: #fff;
        width: 100%;
        height: 200px;
        margin: 20px 0 0;
        padding: 20px 50px 0px 20px;

        .flextwo {
            display: flex;
            align-items: center;
            margin-top: 20px;

            .text {
                font-size: 13px;
                color: #64666A;
            }

            ::v-deep .el-input__inner {
                color: black !important;
                background-color: #fff !important;
                cursor: default !important
            }

            .textarea {
                width: 90%;
                padding: 0 10px;
                height: 50px;
                line-height: 50px;
                // border: 1px solid #DCDFE6;
                border-radius: 5px;
                display: flex;
                align-items: center;

                ::v-deep .el-input {
                    padding: 0 10px;
                    width: 50%;
                    color: black;
                    font-size: 13px;
                    height: 40px;
                    line-height: 40px;
                }

                ::v-deep .el-input__inner {
                    color: black;
                    font-size: 13px;
                }
            }
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .pushMethod {
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                color: #64666A;

                ::v-deep .el-input__inner {
                    color: black;
                    font-size: 13px;
                }

                span {
                    color: black;
                    font-size: 13px;
                }
            }
        }
    }
}

.topform {
    padding: 15px 0 0 15px;

    .form {
        ::v-deep .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
        }

        ::v-deep .el-form-item__label {
            font-size: 12px !important;
        }
    }
}

.title {
    display: flex;
    align-items: center;

    div {
        display: flex;
        padding-left: 10px;
        font-weight: 600;
        align-items: center;
    }

    .select {
        font-weight: 550;
        margin-left: 20%;
        font-size: 12px;

        .el-input {
            width: 200px;
            height: 30px !important;
            line-height: 30px !important;
        }
    }
}


.list {
    margin: 20px auto;
    width: 100%;
    background-color: #f2f4f5;
    display: flex;
    padding-top: 15px;
    justify-content: space-evenly;

    .timelist {
        width: 22%;
        background-color: #fff;
        padding: 0 20px 20px;
        // height: 680px;
        height: calc(100vh - 294px);
        overflow: scroll;

        .timetitle {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        ::v-deep .el-timeline {
            width: 100%;
            padding: 15px 0 0 !important;
        }
    }

    .texts {
        width: 75%;
        // height: 680px;
        height: calc(100vh - 294px);
        overflow: scroll;
        background-color: #fff;
    }
}

.cards {
    border: 1px solid #409EFF;
    border-left: 5px solid #409EFF;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toptop {
        display: flex;
        align-items: center;
    }

    span {
        padding: 0 4px;
    }

    i {
        font-size: 17px;
    }

    i:nth-child(2) {
        padding-left: 12px;
    }
}

::v-deep .el-timeline-item__timestamp {
    margin: 0 !important;
    padding: 0 !important;
}

::v-deep .el-timeline-item__wrapper {
    padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
    transform: translateY(-2%);
}

::v-deep .el-card {
    margin-top: 20px !important;
}
</style>