修改

src/components/Login.vue

@@ -33,7 +33,7 @@
                         </div>
                     </div>
                     <div class="loginbtn-box">
-                        <el-button @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
+                        <el-button @keyup.enter.native="Login()" @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
                     </div>
                 </div>
                 <div></div>
@@ -72,6 +72,13 @@ export default {
         },
         //登录
         Login() {
+            if(this.usernum==""||this.password==""){
+                this.$message({
+                    message: "请填写账号密码！",
+                    type: 'warning'
+                });
+                return false;
+            }
             this.fullscreenLoading=true;
             var url="/api/login"
             var that=this
@@ -85,7 +92,7 @@ export default {
             }).then(function(res){
                 console.log(res)
                 if(res.data.code==200){
-                    localStorage.setItem('token', res.data.data.token);
+                    localStorage.setItem('userinif', JSON.stringify(res.data.data));
                     that.fullscreenLoading=false;
                     that.$router.push('/home/index')
                 }else{
@@ -100,6 +107,16 @@ export default {
     },
     mounted() {
         document.querySelector(".login-all").style.height = window.innerHeight + "px";
+        let that = this
+        document.onkeydown = function (e) {
+            e = window.event || e
+            console.log(e.code)
+            //保证是在登录页面发出的enter事件
+            if (e.code === 'Enter' || e.code === 'enter'|| e.code === 'NumpadEnter') {
+                //调用登录函数
+                that.Login();
+            }
+        }
     }
 }
 </script>

src/components/child/Controltree.vue

@@ -1,78 +1,545 @@
 <template>
-    
+    <div class="controltree-box">
+        <div class="controltree-w">
+            <div class="controltree-ul" >
+                <div class="controltree-li" v-for="(item,index) in treeData" :key="index">
+                    {{item.label}}
+                    <div v-if="item.children" class="second-ul">
+                        <div class="second-ul-haed">
+                            <div>版块步骤</div>
+                            <div>管控时间</div>
+                            <div>完成时间</div>
+                        </div>
+                        <div v-if="item.panduan=='wu'">
+                            <div v-for="(seconditem,index) in item.children" :key="index"   class="li-steps-li">
+                                <div :style="filter_color(seconditem.state)">{{seconditem.label}}</div>
+                                <div>{{seconditem.date}}</div>
+                                <div>{{seconditem.enddate}}</div>
+                            </div>
+                        </div>
+                        <div v-if="item.panduan=='you'">
+                            <div v-for="(seconditem,index) in item.children" :key="index" class="second-li">
+                                <span>{{seconditem.label}}</span>
+                                <div class="li-steps-ul">
+                                    <div class="zanwu" v-if="!seconditem.children">暂无事件</div>
+                                    <div v-for="(stepsitem,index) in seconditem.children" :key="index"   class="li-steps-li">
+                                        <div :style="filter_color(stepsitem.state)">{{stepsitem.label}}</div>
+                                        <div>{{stepsitem.date}}</div>
+                                        <div>{{stepsitem.enddate}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
-
-
 <script>
 export default {
-    components: { Vue2OrgTree },
     data() {
         return {
-            treeData: {
-                id: 0,
-                label: "XXX科技有限公司",
-                children: [
+            treeData: [{
+                    id: 1,
+                    label: "团组出行",
+                },
                 {
                     id: 2,
-                    label: "产品研发部",
-                    children: [
-                    {
-                        id: 5,
-                        label: "研发-前端"
-                    },
-                    {
-                        id: 6,
-                        label: "研发-后端"
-                    },
-                    {
-                        id: 9,
-                        label: "UI设计"
-                    },
-                    {
-                        id: 10,
-                        label: "产品经理"
-                    }
-                    ]
+                    label: "确认出团",
                 },
                 {
                     id: 3,
-                    label: "销售部",
-                    children: [
-                    {
-                        id: 7,
-                        label: "销售一部"
-                    },
-                    {
-                        id: 8,
-                        label: "销售二部"
-                    }
+                    label: "经费预算",
+                    panduan:"you",
+                    children:[
+                        {
+                            id:15,
+                            label: "未开始"
+                        },
+                        {
+                            id:16,
+                            label: "进行中"
+                        },
+                        {
+                            id:17,
+                            label: "已完成"
+                        }
                     ]
                 },
                 {
                     id: 4,
-                    label: "财务部"
+                    label: " 市场部人员报价对接/反馈",
+                    panduan:"you",
+                    children:[
+                        {
+                            id:18,
+                            label: "未开始"
+                        },
+                        {
+                            id:19,
+                            label: "进行中"
+                        },
+                        {
+                            id:20,
+                            label: "已完成",
+                            children:[
+                                {
+                                    id:21,
+                                    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: "HR人事"
+                    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: "客户意见表"
                 }
-                ]
-            }
+            ]
         }
     },
     created(){
        
     },
     methods:{
-
+        filter_color(val){
+            if(val==1){
+                return "color:green"
+            }
+            if(val==3){
+                return "color:red"
+            }
+            if(val==2){
+                return "color:#8f8383"
+            }
+        }
+    },
+    filters:{
+        
     }
 }
 </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: 200px;
+    }
+    .controltree-li:not(:last-child)::after{
+        content: "";
+        display: inline-block;
+        width: 1px;
+        height: 195px;
+        position: absolute;
+        left: 50%;
+        top: 44px;
+        background-color: #F1B72C;
+    }
+    .controltree-li:nth-child(2n) .second-ul::before{
+        content: "";
+        display: inline-block;
+        width: 75px;
+        height: 1px;
+        position: absolute;
+        left: -75px;
+        top: 25px;
+        background-color: #F1B72C;
+    }
+    .controltree-li:nth-child(2n+1) .second-ul::before{
+        content: "";
+        display: inline-block;
+        width: 75px;
+        height: 1px;
+        position: absolute;
+        right: -75px;
+        top: 25px;
+        background-color: #1E5DA5;
+    }
+    .second-ul{
+        width: 480px;
+        position: absolute;
+        top: -5px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 5px;
+        padding: 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;
+    }
+    .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%;
+    }
+    .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;
     }
 </style>

src/components/child/index.vue

@@ -322,7 +322,7 @@ export default {
         }
     },
     mounted(){
-        this.token=localStorage.getItem('token');
+        this.token=JSON.parse(localStorage.getItem('userinif')).token;
         console.log(this.token)
         this.Getemployees();
     }

src/components/home.vue

@@ -26,8 +26,8 @@
                   <img src="../assets/avatar.jpg" alt="" />
                 </div>
                 <div v-if="panduan" class="avatar-text">
-                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
-                  <div class="avatar-division">职位: 后端开发</div>
+                  <div class="avatar-name">姓名: {{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
+                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                 </div>
               </div>
             </div>
@@ -159,8 +159,8 @@
                   <img src="../assets/avatar.jpg" alt="" />
                 </div>
                 <div class="avatar-text">
-                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
-                  <div class="avatar-division">职位: 后端开发</div>
+                  <div class="avatar-name">姓名:{{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
+                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                 </div>
               </div>
             </div>
@@ -188,6 +188,7 @@
           username:"雷怡",
           indexs:"1",
           pdinstrument: true,
+          userinif:'',
         };
       },
       methods: {
@@ -267,6 +268,8 @@
         this.ifIndexValue();
       },
       created() {
+        this.userinif=JSON.parse(localStorage.getItem('userinif'));
+        console.log(this.userinif)
         console.log(this.$route);
       },
     };
@@ -377,7 +380,7 @@
       z-index: 2;
       right: 20px;
       top: -300px;
-      width: 260px;
+      width: 310px;
       border-radius: 5px;
       overflow: hidden;
       box-shadow: 0 0 5px #0005;