oa-system/src/components/child/Controltree.vue

<template>
    <div class="controltree-box" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="controltree-w">
            <div class="controltree-ul" >
                <div class="controltree-li" v-for="(item,index) in treeData" :key="index">
                    {{item.rootName}}
                    <div v-if="item.childList!==undefined && item.childList!= null&&item.childList.length>0" class="second-ul">
                        <div class="second-ul-haed">
                            <div>版块步骤</div>
                            <div>预计完成时间</div>
                            <div>完成时间</div>
                        </div>
                        <div class="onefloors" v-if="item.childList[0].childList==undefined||item.childList[0].childList==null||item.childList[0].childList.length<=0">
                            <div v-for="(seconditem,index) in item.childList" :key="index"   class="li-steps-li">
                                <div :style="filter_color(seconditem.stepStatus)">{{seconditem.jobContent}}</div>
                                <div>{{seconditem.expectBeginDt.split(" ")[0]}}~{{seconditem.expectEndDt.split(" ")[0]}}</div>
                                <div>{{seconditem.expectEndDt.split(" ")[0]}}</div>
                            </div>
                            <div ref="btnB" @click="addfigures(item)" class="addonebtn">
                                <i class="el-icon-edit"></i>
                                编 辑
                            </div>
                        </div>
                        <div class="onefloor" v-if="item.childList[0].childList!==undefined&&item.childList[0].childList!=null&&item.childList[0].childList.length>0" style="padding:5px">
                            <div v-for="(seconditem,index) in item.childList" :key="index" class="second-li">
                                <div class="level-title">
                                    <span>{{seconditem.jobContent.split("-")[1]}}</span>
                                    <div @click="levelAddfigures(seconditem,index)" class="levelTwo-btn">
                                        <i class="el-icon-edit"></i>
                                        编 辑
                                    </div>
                                </div>
                                <div class="li-steps-ul">
                                    <div class="zanwu" v-if="!seconditem.childList">暂无事件</div>
                                    <div v-for="(stepsitem,index) in seconditem.childList" :key="index"   class="li-steps-li">
                                        <div :style="filter_color(stepsitem.stepStatus)">{{stepsitem.jobContent}}</div>
                                        <div>{{stepsitem.expectBeginDt.split(" ")[0]}}~{{stepsitem.expectEndDt.split(" ")[0]}}</div>
                                        <div>{{stepsitem.expectEndDt.split(" ")[0]}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="编 辑" :visible.sync="outerVisible">
            <el-dialog
              width="30%"
              :title="titleName"
              :visible.sync="innerVisible"
              append-to-body>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="flx-box">
                    <el-form-item label="管控编号" label-width="80px" prop="scheduleId">
                        <el-input :readonly="true" v-model="ruleForm.scheduleId"></el-input>
                      </el-form-item>
                      <el-form-item label="操作标识" label-width="80px" prop="step">
                          <el-input :readonly="true" v-model="ruleForm.step"></el-input>
                      </el-form-item>
                      <el-form-item label="节点标识" label-width="80px" prop="parentStep">
                          <el-input :readonly="true" v-model="ruleForm.parentStep"></el-input>
                      </el-form-item>
                      <el-form-item label="指派员工" prop="duty" label-width="80px">
                        <el-select v-model="ruleForm.duty" placeholder="请选择员工">
                          <el-option v-for="(item,index) in employeeColumn" :key="index" :label="item.sysUserName" :value="item.sysUserId"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="操作名称" label-width="80px" prop="JobContent">
                          <el-input v-model="ruleForm.JobContent"></el-input>
                      </el-form-item>
                      <el-form-item label="操作人ID" label-width="80px" prop="CreateUserId">
                        <el-input :readonly="true" v-model="ruleForm.CreateUserId"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间" label-width="80px" required>
                        <el-form-item prop="ExpectBeginDt">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.ExpectBeginDt" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="结束时间" label-width="80px" required>
                        <el-form-item prop="ExpectEndDt">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.ExpectEndDt" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-form-item>
                </div>
                <el-form-item label="备注" label-width="80px" prop="Remark">
                  <el-input type="textarea" v-model="ruleForm.Remark"></el-input>
                </el-form-item>
                <div>
                  <el-button class="final-btn" type="primary" @click="submitForm('ruleForm')">{{titleName}}</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </div>
              </el-form>
            </el-dialog>
            <div class="dialog-abb">
                <el-button type="primary" @click="addBtn()">添 加</el-button>
            </div>
            <el-table
            :data="educationalList"
            border
            style="width: 100%">
                <el-table-column
                prop="jobContent"
                label="步骤名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="expectBeginDt"
                :formatter="filteryear"
                label="开始时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="expectEndDt"
                :formatter="filteryears"
                width="180"
                label="结束时间">
                </el-table-column>
                <el-table-column
                prop="remark"
                label="备注">
                </el-table-column>
                <el-table-column label="操作" width="130">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row,educationalList)"><i class="el-icon-delete"></i></el-button>
                    </template>
                  </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="outerVisible = false">取 消</el-button>
              <!-- <el-button type="primary">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { el } from '@fullcalendar/core/internal-common'
export default {
    data() {
        return {
            token:'',
            treeData: [{
                    id: 1,
                    label: "团组出行",
                },
                {
                    id: 2,
                    label: "确认出团",
                },
                {
                    id: 3,
                    label: "经费预算",
                    panduan:"wu",
                    children:[
                        {
                            id:15,
                            label: "完成经费预算",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        }
                    ]
                },
                {
                    id: 4,
                    label: " 市场部人员报价对接/反馈",
                    panduan:"wu",
                    children:[
                        {
                            id:18,
                            label: "完成报价对接/反馈",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        },
                        {
                            id:19,
                            label: "录入最终总经费预算",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        },
                        {
                            id:20,
                            label: "上传明细单",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10'
                        }
                    ]
                },
                {
                    id: 5,
                    label: "报批流程"
                },
                {
                    id: 6,
                    label: "护照/签证",
                    panduan:"wu",
                    children:[
                        {
                            id:22,
                            label: "签证费用录入",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:23,
                            label: "归还护照",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:2
                        },
                        {
                            id:24,
                            label: "出签＋取护照",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:3
                        },
                        {
                            id:25,
                            label: "送签",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:3
                        },
                        {
                            id:26,
                            label: "填资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:27,
                            label: "取护照资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:28,
                            label: "收集资料",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 7,
                    label: "各版块操作",
                    panduan:"you",
                    children:[
                        {
                            id:29,
                            label: "机票",
                            children:[
                                {
                                    id:42,
                                    label: "询价并导入黑屏代码",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:1
                                },
                                {
                                    id:43,
                                    label: "机票已占位",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:1
                                },
                                {
                                    id:44,
                                    label: "已出票",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10',
                                    state:2
                                },
                                {
                                    id:45,
                                    label: "机票费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'',
                                    state:3
                                }
                            ]
                        },
                        {
                            id:30,
                            label: "酒店",
                            children:[
                                {
                                    id:46,
                                    label: "酒店费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:31,
                            label: "OP",
                            children:[
                                {
                                    id:47,
                                    label: "OP费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:32,
                            label: "商邀",
                            children:[
                                {
                                    id:48,
                                    label: "报批/商邀费用录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        },
                        {
                            id:33,
                            label: "其他",
                            children:[
                                {
                                    id:49,
                                    label: "增减款项录入",
                                    date:"2023-01-12 ~ 2023-02-10",
                                    enddate:'2023-02-10'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 8,
                    label: "费用审批",
                    panduan:"wu",
                    children:[
                        {
                            id:34,
                            label: "机票费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:35,
                            label: "酒店费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:36,
                            label: "OP费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:37,
                            label: "商邀费用审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:38,
                            label: "增减款项审批",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 9,
                    label: "付款给供应商",
                    panduan:"wu",
                    children:[
                        {
                            id:39,
                            label: "OP费用付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:40,
                            label: "商邀费用付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        },
                        {
                            id:41,
                            label: "增减款项付款",
                            date:"2023-01-12 ~ 2023-02-10",
                            enddate:'2023-02-10',
                            state:1
                        }
                    ]
                },
                {
                    id: 10,
                    label: "开行前会"
                },
                {
                    id: 11,
                    label: "送机"
                },
                {
                    id: 12,
                    label: "数据/附件归档"
                },
                {
                    id: 13,
                    label: "接机"
                },
                {
                    id: 14,
                    label: "客户意见表"
                }
            ],
            educationalList:[

            ],
            outerVisible: false,
            innerVisible: false,
            //添加表单数据
            ruleForm: {
                scheduleId: '',
                step: '',
                parentStep: '',
                duty: '',
                JobContent: '',
                CreateUserId: '',
                ExpectBeginDt: '',
                ExpectEndDt: '',
                SLevel:'',
                Remark: ''
            },
            //表单数据非空验明
            rules: {
                duty: [
                    { required: true, message: '请选择员工', trigger: 'change' }
                ],
                ExpectBeginDt: [
                    { required: true, message: '请选择开始日期', trigger: 'change' }
                ],
                ExpectEndDt: [
                    { required: true, message: '请选择结束日期', trigger: 'change' }
                ],
                JobContent: [
                    { required: true, message: '请输入操作名称', trigger: 'blur' },
                ]
            },
            //员工列
            employeeColumn:[],
            //添加参数
            addArgument:{},
            //标题名称
            titleName:'',
            stepID:'',
            OPid:"",
            fullscreenLoading:false
        }
    },
    created(){
       
    },
    methods:{
        filter_color(val){
            if(val==0){
                return "color:red"
            }
            if(val==1){
                return "color:#159bfb"
            }
            if(val==2){
                return "color:#green"
            }
        },
        getControl(){
            var url="/api/Groups/PostSearchGrpSchedule";
            var that=this;
            that.fullscreenLoading = true;
            var data = JSON.stringify({
                "paras": "{\"PortType\":\"1\",\"SearchType\":\"1\",\"ScheduleId\":\"24\"}"
            });
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+that.token,
                    'Content-Type':'application/json;charset=UTF-8'
                },
                data:data
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    that.treeData=res.data.data.rootList
                    console.log(that.treeData)
                    console.log(res.data.data)
                    that.ruleForm.scheduleId=res.data.data.primary.id;
                    that.employeeColumn=res.data.data.personList;
                    that.employeeColumn=res.data.data.personList;
                    // that.$message({
                    //     message: res.data.msg,
                    //     type: 'success',
                    //     offset:50
                    // });
                    that.fullscreenLoading = false;
                }else{
                    // that.$message({
                    //     message:res.data.msg,
                    //     type: 'warning',
                    //     offset:50
                    // });
                    that.fullscreenLoading = false;
                }
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        addBtn(){
            this.titleName="添 加"
            this.innerVisible = true;
            this.ruleForm.parentStep=this.addArgument.parentStep;
            this.ruleForm.step=this.addArgument.step;
            this.ruleForm.SLevel=this.addArgument.SLevel;
            this.ruleForm.duty="";
            this.ruleForm.JobContent="";
            this.ruleForm.ExpectBeginDt="";
            this.ruleForm.ExpectEndDt="";
            this.ruleForm.Remark="";
        },
        addfigures(val){
            console.log(val.childList);
            this.outerVisible = true;
            this.addArgument.parentStep=val.root,
            this.addArgument.SLevel=val.childList[0].level,
            this.addArgument.step=val.root+"01",
            this.educationalList=val.childList;
        },
        levelAddfigures(val,index){
            console.log(val.childList);
            console.log(index);
            this.outerVisible = true;
            this.educationalList=val.childList;
            this.addArgument.parentStep=60+((index+1)+"");
            this.addArgument.SLevel=val.childList[0].level,
            this.addArgument.step=val.step+"1";
            console.log(this.addArgument)
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //修改详情
        reviseInfo(){
            var url="/api/Groups/PostUpdateGrpScheduleDetail";
            var that=this;
            that.fullscreenLoading = true;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+that.token,
                    'Content-Type':'application/json;charset=UTF-8'
                },
                data:{
                    id:Number(that.stepID),
                    duty:Number(that.ruleForm.duty),
                    stepStatus:0,
                    jobContent:that.ruleForm.JobContent,
                    expectBeginDt:that.disposeTime(that.ruleForm.ExpectBeginDt) +' '+ "09:00:00",
                    expectEndDt:that.disposeTime(that.ruleForm.ExpectEndDt) +' '+ "18:00:00",
                    remark:that.ruleForm.Remark,
                }
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                    that.getControl()
                    that.innerVisible = false;
                    that.outerVisible = false;
                    that.fullscreenLoading = false;
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning',
                        offset:50
                    });
                    that.fullscreenLoading = false;
                }
            })
        },
        //新增详情
        addopinfo(){
            var url="/api/Groups/PostInsertGrpScheduleDetail";
            var that=this;
            that.fullscreenLoading = true;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+that.token,
                    'Content-Type':'application/json;charset=UTF-8'
                },
                data:{
                    scheduleId:that.ruleForm.scheduleId,
                    step:Number(that.ruleForm.step),
                    parentStep:that.ruleForm.parentStep,
                    duty:that.ruleForm.duty,
                    jobContent:that.ruleForm.JobContent,
                    expectBeginDt:that.disposeTime(that.ruleForm.ExpectBeginDt) +' '+ "09:00:00",
                    expectEndDt:that.disposeTime(that.ruleForm.ExpectEndDt) +' '+ "18:00:00",
                    createUserId:that.ruleForm.CreateUserId,
                    remark:that.ruleForm.Remark,
                    SLevel:that.ruleForm.SLevel
                }
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                    that.getControl()
                    that.educationalList.push(res.data.data);
                    that.innerVisible = false;
                    that.fullscreenLoading = false;
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning',
                        offset:50
                    });
                    that.fullscreenLoading = false;
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.titleName=="添 加"){
                    this.addopinfo();
                }else if(this.titleName=="修 改"){
                    this.reviseInfo();
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        filteryear(val){
            let gstime=val.expectBeginDt.split(' ')[0]
            return gstime;
        },
        filteryears(val){
            let gstime=val.expectEndDt.split(' ')[0]
            return gstime;
        },
        //编辑
        handleEdit(index, row) {
            console.log(index, row);
            this.stepID=row.detailId;
            this.titleName="修 改";
            this.innerVisible = true;
            this.ruleForm.parentStep=row.root;
            this.ruleForm.step=row.step;
            this.ruleForm.JobContent=row.jobContent;
            this.ruleForm.duty=row.duty;
            this.ruleForm.ExpectEndDt=row.expectEndDt.split(' ')[0];
            this.ruleForm.ExpectBeginDt=row.expectBeginDt.split(' ')[0];
            this.ruleForm.Remark=row.remark;
        },
        //删除
        handleDelete(index, row,rows) {
            console.log(index, row.step);
            var url="/api/Groups/PostDeleteGrpScheduleDetail";
            var that=this;
            that.fullscreenLoading = true;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+that.token,
                    'Content-Type':'application/json;charset=UTF-8'
                },
                data:{
                    id:row.detailId,
                    duty:that.ruleForm.CreateUserId,
                    StepStatus:-1,
                    JobContent:'',
                    ExpectBeginDt:'',
                    ExpectEndDt:'',
                    Remark:''
                }
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                    rows.splice(index, 1);
                    that.getControl()
                    that.fullscreenLoading = false;
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning',
                        offset:50
                    });
                    that.fullscreenLoading = false;
                }
            })
        }
    },
    filters:{
        
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.OPid=JSON.parse(localStorage.getItem('OPid'));
        this.ruleForm.CreateUserId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getControl()
    }
}
</script>
<style>
    ul li{
        list-style: none;
    }
    .controltree-box{
        background-color: #fff;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        padding: 100px 0;
    }
    .controltree-ul{
        display: flex;
        flex-direction: column;
    }
    .controltree-w{
        display: inline-block;
        margin: 0 auto;

    }
    .controltree-li{
        display: inline-block;
        padding: 10px 20px;
        box-shadow: 0 0 5px #0005;
        border-radius: 5px;
        text-align: center;
        position: relative;
    }
    .controltree-li:not(:last-child){
        margin-bottom: 250px;
    }
    .controltree-li:not(:last-child)::after{
        content: "";
        display: inline-block;
        width: 1px;
        height: 245px;
        position: absolute;
        left: 50%;
        top: 44px;
        background-color: #F1B72C;
    }
    .controltree-li:nth-child(2n) .second-ul::before{
        content: "";
        display: inline-block;
        width: 115px;
        height: 1px;
        position: absolute;
        left: -115px;
        top: 20px;
        background-color: #F1B72C;
    }
    .controltree-li:nth-child(2n+1) .second-ul::before{
        content: "";
        display: inline-block;
        width: 115px;
        height: 1px;
        position: absolute;
        right: -115px;
        top: 20px;
        background-color: #1E5DA5;
    }
    .second-ul{
        width: 480px;
        position: absolute;
        top: 0px;
        box-shadow: 0 0 5px #0005;
        border-radius: 5px;
    }
    .second-li{
        text-align: left;
        position: relative;
        margin-bottom: 10px;
    }
    .controltree-li:nth-child(2n+1) .second-ul{
        flex-direction: row-reverse;
        color: #1E5DA5;
    }
    .controltree-li:nth-child(2n+1) .second-ul .second-ul-haed{
        background-color: #1E5DA5;
    }
    .controltree-li:nth-child(2n) .second-ul .second-ul-haed{
        background-color: #F1B72C;
    }
    .second-ul-haed{
        display: flex;
        justify-content: space-between;
        color: #fff;
        border-radius: 5px 5px 0px 0px;
    }
    .second-ul-haed>div{
        padding: 10px 0;
    }
    .second-ul-haed>div:nth-child(1){
        width: 30%;
    }
    .second-ul-haed>div:nth-child(2){
        border-left: 1px solid #fff;
        border-right:1px solid #fff ;
        width: 50%;
    }
    .second-ul-haed>div:nth-child(3){
        width: 20%;
    }
    /*.controltree-li:nth-child(2n+1) .second-ul .second-li::after{
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        position: absolute;
        left: 21px;
        top: 10px;
        background-color: #1E5DA5;
    }*/
    .controltree-li:nth-child(2n) .second-ul{
        left: 300px;
        color: #F1B72C;
    }
    .controltree-li:nth-child(2n+1) .second-ul{
        right: 300px;
        color: #1E5DA5;
    }
    .controltree-li:nth-child(2n){
        background-color: #F1B72C;
        color: #fff;
    }
    .controltree-li:nth-child(2n+1){
        background-color: #1E5DA5;
        color: #fff;
    }
    /*.controltree-li:nth-child(2n) .second-ul .second-li::after{
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        position: absolute;
        right: 21px;
        top: 10px;
        background-color: #F1B72C;
    }*/
    .second-li span{
        display: inline-block;
        width: 30%;
        color: #555;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .li-steps-li{
        display: flex;
        align-items: center;
        color: #8f8383;
    }
    .li-steps-li>div{
        font-size: 13px;
        padding: 5px 0;
        text-align: center;
        height: 100%;
        padding: 11px 0;
    }
    .li-steps-li{
        border: 1px solid #f7f7f7;
    }
    .li-steps-li:not(:first-child){
        border-top: none;
    }
    .li-steps-li>div:not(:first-child){
        border-left:1px solid #f7f7f7 ;
    }
    .li-steps-li>div:nth-child(1){
        width: 30%;
    }
    .li-steps-li>div:nth-child(2){
        width: 50%;
    }
    .li-steps-li>div:nth-child(3){
        width: 20%;
    }
    .zanwu{
        font-size: 12px;
        color: #8f8383;
        width: 30%;
        text-align: center; 
        padding: 5px;
    }
    .onefloors{
        position: relative;
    }
    .addonebtn{
        font-size: 14px;
        color: #606266;
        position: absolute;
        padding: 5px 10px;
        box-shadow: 0 0 5px #0005;
        border-radius:5px ;
        cursor: pointer;
    }
    .level-title{
        display: flex;
        justify-content: space-between;
    }
    .levelTwo-btn{
        font-size: 14px;
        color: #606266;
        padding: 5px 10px;
        box-shadow: 0 0 5px #0005;
        border-radius:5px ;
        cursor: pointer;
    }
    .controltree-box .el-dialog{
        border-radius:5px;
    }
    .controltree-box .el-dialog__body{
        padding-top: 10px;
    }
    .dialog-abb{
        text-align: right;
        padding-bottom: 5px;
    }
    .controltree-li:nth-child(2n+1) .addonebtn{
        top: -76px;
        right: 0px;
    }
    .controltree-li:nth-child(2n) .addonebtn{
        top: -76px;
        left: 0px;
    }
    .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .flx-box>.el-form-item{
        width: 48%;
    }
    .el-dialog{
        border-radius:  5px; ;
    }
    .onefloor{
        max-height: 460px;
        overflow-y: auto;
    }
    .onefloor::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
        border-radius: 2px;
    }
    .onefloor::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        width: 4px;
        height: 80px;
        border-radius: 2px;
        background: rgba(48, 47, 47, 0.2);
    }
    .onefloor::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
    }
</style>