dev/dcp-web-gate/src_old/views/interactivemsg/Interacivemessage.vue

<!-- 委员会申请列表 -->
<template>
    <div class="autoBox box1" style="position: relative; background: #f5f5f5">
        <div class="center" style="margin-top: 20px">
            <div class="left">
                <div class="centerLeft1">
                    <div class="top">
                        <div class="top1"></div>
                        <div class="top2"></div>
                        <div class="allApplication">
              <span v-if="!isDistinguish">{{
                $t("common.interactiveMessage")
              }}</span>
                            <span v-else>{{ $t("common.myApplication") }}</span>
                        </div>
                        <div @click="back" class="more">
                            <span>{{ "<" }}{{ $t("common.return") }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content1">
                            <div class="left_top">
                                <div :class="[message_flat?'l_t_left':'l_t_right']"  @click="message_click">
                                    <img v-if="message_flat" src="@/assets/img/nationaIntorduction/xiaoxi.png" alt="" style=" margin-left:10px;width: 15px;margin-left:40px;margin-right:4px">
                                    <img v-else src="@/assets/img/nationaIntorduction/xiaoxi1.png" alt="" style=" margin-left:10px;width: 15px;margin-left:40px;margin-right:4px">

                                  {{ $i18n.locale == 'en' ? 'Message ' : '消息' }}
                                </div>
                                <div :class="[message_flat?'l_t_right':'l_t_left']" @click="Organizational_click" >
                                    <img v-if="message_flat" src="@/assets/img/nationaIntorduction/zuzhi.png" alt=""  style="width: 15px;margin-left:38px;margin-right:4px">
                                    <img v-else src="@/assets/img/nationaIntorduction/zuzhi1.png" alt=""  style="width: 15px;margin-left:38px;margin-right:4px">

                                  {{ $i18n.locale == 'en' ? 'Organization ' : '组织架构' }}
                                </div>
                            </div>
                            <div v-if="message_flat" class="left_bottom">
                                <div v-for="(item,i) in page"  @click="changecolor(item,i)" :class="[msg_click[i]?'l_b_div1':'l_b_div']" >
                                    <div  style=" padding-top:22px;padding-left:22px" class="message2">
                                        <div style="margin-right:20px;width:auto">
                                            {{item.sendPeopleName}}
                                        </div>
                                        <div v-if="item.unReadCount&&flag[i]" >
                                            <span style="" class="people_num">{{item.unReadCount}}</span>
                                        </div>
                                        <div class="msg2_time" style="width:auto">{{item.sendTime}}</div>

                                    </div>
                                    <div  style="padding-left:22px;margin-top:10px;font-weight: 300;">
                                        <div class="msg2_msg">{{item.content}}</div>


                                    </div>
                                </div>

                            </div>
                            <div v-if="zuzhi_flat" class="left_bottom" style="overflow-y: auto;height: 740px;" >
                                <!--                    <div style="padding:20px;padding-left:20px;width:100%;">-->
                                <!--                        <input placeholder="请输入" style="width:90%"></input>-->
                                <!--                    </div>-->
                                <div style="overflow-y:auto">
                                    <el-card>
                                        <el-tree
                                                style="font-size: 18px"
                                                :default-expand-all="true"
                                                :data="treeList"
                                                :props="defaultProps"
                                                @node-click="handleNodeClick"

                                        >

                                          <span
                                                  class="custom-tree-node"
                                                  slot-scope="{ node, data }"
                                                  @mouseover="mouseover(data)"
                                                  @mouseleave="mouseout(data)"
                                          >
                                               <span
                                                       style="margin-right: 3px"
                                                       v-if="data.types"
                                                       class="group"
                                               ></span>
                                            <!-- 父级icon -->
                                            <span
                                                    style="margin-right: 3px"
                                                    v-if="data.param"

                                            ></span>
                                              <!-- 子集icon -->
                                            <span
                                                    v-else
                                                    class="renwu"
                                            ></span>
                                            <span>{{ node.label }}</span>

                                            <span v-if="data.type === '3'">
                                              <span v-show="data.dropdownShow">
                                                <i
                                                        @click="toInformation()"
                                                        style="margin-left: 10px; font-size: 22px"
                                                        class="el-icon-s-home"
                                                ></i>
                                                <i
                                                        @click="toInformation()"
                                                        style="margin: 0 3px; font-size: 22px"
                                                        class="el-icon-user"
                                                ></i>
                                                <i
                                                        @click="edit1(data)"
                                                        style="margin: 0 3px; font-size: 22px"
                                                        class="el-icon-edit-outline"
                                                ></i>
                                                <i style="font-size: 22px" class="el-icon-delete"></i>
                                              </span>
                                            </span>
                                          </span>
                                        </el-tree>
                                    </el-card>
                                </div>

                            </div>
                        </div>

                        <div class="content2">
                            <div class="right_one">{{card.name}}</div>
                            <div style="height:calc(100% - 65px);" >
                                <div class="right_two" id="chatdiv"  v-if="refresh" style="overflow-y: auto;overflow-x:hidden">
                                    <div v-for="(item,i) in message" >
                                        <div class="r_two_time" style="">{{item.sendTime}}</div>
                                        <div class="r_two_content" v-if="item.sendBySelf==0">
                                            <div class="r_t_c_tx">

                                            </div>
                                            <div class="r_t_c_msg">
                                                {{item.content}}

                                            </div>
                                        </div>
                                        <div class="r_two2_content"  v-if="item.sendBySelf==1" >

                                            <div class="r_t_c_msg" >
                                                {{item.content}}

                                            </div>
                                            <div class="r_t_c_tx" style="margin-left:20px">

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div style="height:188px;" >
                                    <div class="inputDeep">
                                        <el-input
                                                type="textarea"
                                                :rows="5"
                                                :placeholder="$i18n.locale == 'zh'?'请输入内容':'Please enter content'"
                                                style="resize: none"
                                                v-model="textarea">
                                        </el-input>
                                    </div>
                                    <div class="send"  style="cursor:pointer" @click="sendContent"> {{ $i18n.locale == 'en' ? 'Send ' : '发送' }}</div>
                                </div>
                            </div>
                        </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Screen from "@/components/screen";
    import {getAccept,getOrganize,sendcontent,getMessage} from '@/api/committee/interactive';

    export default {
        name: "Interacivemessage",
        props: ["isDistinguish"],
        components: {
            Screen,
        },
        data() {
            return {
                statusflag:0,//是否定时刷新左侧消息列表以及留言框
                timer:null,//定时器
                textarea:'',
                defaultProps: {
                    children: "param",
                    label: "name",
                },
                card:{
                    name:'',
                    englishname:'',
                    belongCommittee:'',
                    work:'',
                    isoffice:'',
                    nameid:'',
                },
                zuzhi_flat:false,
                defaultShowNodes:[],
                refresh:1,
                flag:[],
                message:[


                ],
                page:[
                ],
                message_flat:true,
                // page1: [
                //     {
                //         id: "01b68b502ebf11eb97968cec4bc03c2d",
                //         committeeName: "非洲区域委员会",
                //         committeeType: "区域委员会",
                //         committeeTypeDict: "2",
                //         committeeProfile: "非洲联盟委员会是<a href=\"https://baike.so.com/doc/3587325-3772124.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">非洲联盟的权力执行机构。该组织由许多处理不同事务的委员组成。总部设于<a href=\"https://baike.so.com/doc/263985-279449.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">埃塞俄比亚首都<a href=\"https://baike.so.com/doc/6318700-6532299.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">亚的斯亚贝巴。",
                //         committeeProfileUe: "<p><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">非洲联盟委员会是</span><a href=\"https://baike.so.com/doc/3587325-3772124.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">非洲联盟</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">的权力执行机构。该组织由许多处理不同事务的委员组成。总部设于</span><a href=\"https://baike.so.com/doc/263985-279449.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">埃塞俄比亚</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">首都</span><a href=\"https://baike.so.com/doc/6318700-6532299.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">亚的斯亚贝巴</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">。</span></p>",
                //         regional: "非洲",
                //         regionalDict: "1",
                //         nationalFlag: "",
                //         orderNumber: "200003",
                //         entityZh: "1",
                //         entityEn: "1",
                //         sonList: [
                //             {
                //                 id: "2da19c16360c11eb97968cec4bc03c2d",
                //                 committeeName: "非洲",
                //                 committeeType: "国家委员会",
                //                 committeeTypeDict: "1",
                //                 committeeProfile: "非洲委员会主要聚焦撒哈拉以南非洲区域，覆盖49个国家和地区，秘书处设立在位于埃塞俄比亚的合作组织非洲办公室。首届委员会主席为埃塞俄比亚能源部部长塞拉西·贝克莱，副主席为非洲电力公用事业协会秘书长阿贝尔·泰拉。非洲委员会工作主要是凝聚区域内各方面力量，协调推动本区域能源互联网发展，组织区域内会员发展和服务等活动。",
                //                 committeeProfileUe: "<p>非洲委员会主要聚焦撒哈拉以南非洲区域，覆盖49个国家和地区，秘书处设立在位于埃塞俄比亚的合作组织非洲办公室。首届委员会主席为埃塞俄比亚能源部部长塞拉西·贝克莱，副主席为非洲电力公用事业协会秘书长阿贝尔·泰拉。非洲委员会工作主要是凝聚区域内各方面力量，协调推动本区域能源互联网发展，组织区域内会员发展和服务等活动。</p>",
                //                 regional: "非洲",
                //                 regionalDict: "1",
                //                 nationalFlag: "committee/2020/12/04/b0c8cfbc73f34f3ebcb3505a2a2e0c00.jpeg",
                //                 orderNumber: "100001",
                //                 entityZh: "1",
                //                 entityEn: "1",
                //                 entityFr: "0",
                //                 entityDe: "0",
                //                 entityEs: "0",
                //                 entityJa: "0",
                //                 entityAr: "0",
                //                 entityRu: "0",
                //                 sort: "99",
                //                 mainLanguage: "",
                //                 spareOne: "",
                //                 nrcCommitteeUserList: [
                //                     {
                //                         id: "6da6b7bd-ee1b-4a0d-bfdb-d788c4675854",
                //                         name: "罗乾宜",
                //                         nameEn: "111",
                //                         correlationId: "101",
                //                         userType: "区域秘书处人员",
                //                         userTypeDict: "A",
                //                         committeName: "非洲",
                //                         committeeId: "2da19c16360c11eb97968cec4bc03c2d",
                //                         committeeType: "",
                //                         committeeTypeDict: "",
                //                         duty: "主席",
                //                         dutyDict: "1",
                //                         userUid: "guoyue-liu",
                //                         isInOffice: "1",
                //                         status: "",
                //                         createBy: "",
                //                         createDate: 1652165398000,
                //                         updateBy: "修改人",
                //                         updateDate: 1653040679000
                //                     }
                //                 ]
                //             },
                //             {
                //                 id: "48f8be2abafe11ec88718cec4bc03c2d",
                //                 committeeName: "测试委员会1111",
                //                 committeeType: "国家委员会",
                //                 committeeTypeDict: "1",
                //                 committeeProfile: "阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁",
                //                 committeeProfileUe: "<p>阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁</p>",
                //                 regional: "非洲",
                //                 regionalDict: "1",
                //                 nationalFlag: "committee/2020/12/04/a53c7471c55c4828a32b9d03bbace526.jpg",
                //                 orderNumber: "200009",
                //                 sort: "99",
                //                 createDate: 1649836184000,
                //                 updateDate: 1649916147000,
                //                 isDelete: "1"
                //             },
                //             {
                //                 id: "7bd78bfebaff11ec88718cec4bc03c2d",
                //                 committeeName: "测试委员会1",
                //                 committeeType: "国家委员会",
                //                 committeeTypeDict: "1",
                //                 committeeProfile: "阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁",
                //                 committeeProfileUe: "<p>阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁</p>",
                //                 regional: "非洲",
                //                 regionalDict: "1",
                //                 nationalFlag: "committee/2020/12/04/a53c7471c55c4828a32b9d03bbace526.jpg",
                //                 orderNumber: "100011",
                //                 sort: "99",
                //                 createDate: 1649836699000,
                //                 updateDate: 1649836699000,
                //                 isDelete: "1"
                //             }
                //         ],
                //         nrcCommitteeUserList: [
                //             {
                //                 id: "007e9fb7-e6be-4b51-a080-cd67f4f03a2c",
                //                 name: "F010006",
                //                 nameEn: "F010006",
                //                 correlationId: "954192698283314",
                //                 userType: "委员会人员",
                //                 userTypeDict: "U",
                //                 committeName: "非洲区域委员会",
                //                 committeeId: "01b68b502ebf11eb97968cec4bc03c2d",
                //                 committeeType: "",
                //                 committeeTypeDict: "",
                //                 duty: "秘书",
                //                 dutyDict: "5",
                //                 userUid: "F010006",
                //                 isInOffice: "1",
                //                 status: "1",
                //                 createBy: "",
                //                 createDate: 1652165031000,
                //                 updateBy: "修改人",
                //                 updateDate: 1652169921000
                //             }
                //
                //         ]
                //     },
                //
                //
                //
                // ],
                msg_click:[],
                search: "",
                screen1s: {
                    value: "common.type",
                    item: [],
                },
                screen1def: null,
                screen2Item: null,
                treeList:[],
                treeData:[]
            };
        },
        watch: {
            "$i18n.locale"() {},
            CountryId() {},
            /*statusflag(){//自动刷新-消息列表以及留言框
                if(this.statusflag==1){
                    this.timer = setInterval(() => {
                        setTimeout(this.refreshmessage, 0)
                    }, 1000*5)
                }
            }*/
        },

        updated(){
            let div=document.getElementById("chatdiv")
            div.scrollTop=div.scrollHeight
        },
        mounted() {
            let params={
                frontOrBack:2
            }
            getAccept(params).then(res=>{
                if(res.status=='200'){
                    this.page=res.data.page
                    this.card.name=res.data.page[0].sendPeopleName
                    this.card.nameid=res.data.page[0].sendPeople
                    this.page.forEach((item,index)=>{
                        if(item.unReadCount!=0){
                            this.flag[index]=1
                        }
                        else{
                            this.flag[index]=0
                        }
                    })
                    let params2={
                        sendPeople:res.data.page[0].sendPeople,
                        frontOrBack:2
                    }
                    getMessage(params2).then(res=>{
                        this.message=res.data.page
                        this.statusflag=1

                    })
                }
            })
            getOrganize(params).then(res=>{
                let treelist=res.data.page
                treelist.forEach((item,index)=>{
                    item.id=item.id
                    item.name=item.committeeName
                    if(item.committeeType){
                        item.committeeType=item.committeeType
                    }

                    /*if(item.nrcCommitteeUserList){
                        item.nrcCommitteeUserList=item.nrcCommitteeUserList
                        item.nameid=item.id
                    }*/

                    let obj = {};
                    obj.param=[]

                    if(item.nrcCommitteeUserList){
                        item.nrcCommitteeUserList.forEach(item4=>{
                            let param1={}
                            param1.id=item4.id
                            param1.type=1
                            param1.name=item4.name
                            param1.nameEn=item4.nameEn
                            param1.isInOffice=item4.isInOffice
                            param1.committeeName=item.committeeName
                            param1.duty=item4.duty
                            if(item4.committeeType){
                                param1.committeeType=item4.committeeType
                            }
                            (obj.param).push(param1)
                        })
                    }

                    item.type=0
                    item.types=0
                    item.param=[]
                    item.param = (obj.param)
                    if(item.sonList.length>0){
                        item.sonList.forEach(item2=>{
                            let param={}
                            param.id=item2.id
                            param.type=0

                            if(item2.committeeName){
                                param.name=item2.committeeName
                            }
                            if(item2.committeeType){
                                param.committeeType=item2.committeeType
                            }
                            param.param=[]

                            if(item2.nrcCommitteeUserList){

                                item2.nrcCommitteeUserList.forEach(item3=>{
                                    let param1={}
                                    param1.id=item3.id
                                    param1.type=1
                                    param1.types=0
                                    param1.name=item3.name
                                    param1.nameEn=item3.nameEn
                                    param1.isInOffice=item3.isInOffice
                                    param1.committeeName=item2.committeeName
                                    param1.duty=item3.duty
                                    if(item3.committeeType){
                                        param1.committeeType=item3.committeeType
                                    }

                                    (param.param).push(param1)
                                })
                            }
                            else{
                                param.types=1
                            }
                            (item.param).push(param)

                        })

                    }
                })

                this.treeList=treelist
                console.log(this.treeList)
            })
            console.log(this.isDistinguish);
            this.$set(this.msg_click,0,true)
            for(let i=1;i<10;i++){
                this.$set(this.msg_click,i,false)
            }
            console.log(this.statusflag)
            // if(this.statusflag==1){//自动刷新-消息列表以及留言框
            //     console.log('hahahah')
            //     var _this = this;
            //     this.timer = setInterval(() => {
            //         _this.refreshmessage()
            //         console.log('hahah')
            //     }, 1000*5)
            // }

            this.timer = setInterval(()=>{
                // 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
                this.refreshmessage();
            }, 5000) // 每五秒执行1次

        },
        destroyed() {
            //清除多次执行定时器
            clearInterval(this.timer)
        },
        // beforeDestroy(){//销毁定时器
        //     clearInterval(this.timer);
        //     this.timer = null;
        // },
        methods: {
            refreshmessage(){
                let params={
                    frontOrBack:2
                }
                getAccept(params
                ).then(res=>{
                    this.page=res.data.page
                    this.page.forEach((item,index)=>{
                        if(item.unReadCount!=0){
                            this.flag[index]=1
                        }
                        else{
                            this.flag[index]=0
                        }
                    })

                })
                let params2={
                    sendPeople:this.card.nameid,
                    frontOrBack:2,
                }
                getMessage(params2).then(res=>{
                    this.message=res.data.page

                })

            },

            // 点击组织的人员
            handleNodeClick(data) {
                console.log(data)
                if(data.type){
                    this.right_card=true;
                    this.card.name=data.name
                    this.card.nameid=data.id
                    this.card.englishname=data.nameEn
                    this.card.belongCommittee=data.committeeName
                    this.card.work=data.duty
                    if(data.isInOffice){
                        this.card.isoffice='在任'
                    }else{
                        this.card.isoffice='不在任'
                    }
                }else{
                    this.right_card=false;
                }
                let params={
                    sendPeople:this.card.nameid,
                    frontOrBack:2
                }
                getMessage(params).then(res=>{
                    this.message=res.data.page

                })


                this.right_chat=false;
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            mouseover(data) {
                // 移入
                this.$set(data, "dropdownShow", true);
            },
            mouseout(data) {
                // 移除
                this.$set(data, "dropdownShow", false);
            },
            //点击消息
            changecolor(data,i){
                console.log(data)
                this.flag[i]=0
                this.right_card=false;
                this.right_chat=true;
                for(let a=0;a<this.msg_click.length;a++){
                    if(a==i){
                        this.msg_click[a]=true;
                        this.$set(this.msg_click,a,true)
                    }
                    else{
                        this.msg_click[a]=false;
                        this.$set(this.msg_click,a,false)
                    }
                }
                this.card.name=data.sendPeopleName
                this.card.nameid=data.sendPeople
                let params={
                    sendPeople:data.sendPeople,
                    frontOrBack:2
                }
                getMessage(params).then(res=>{
                    this.message=res.data.page

                })
            },
            //start:点击组织架构
            Organizational_click(){
                this.message_flat=false;
                this.zuzhi_flat=true;
            },
            //end:点击组织架构
            //start:点击消息
            message_click(){
                this.message_flat=true;
                this.zuzhi_flat=false;

            },
            //end:点击消息

            handleCurrentChange() {},
            back() {
                var params = {
                    name: "workspace",
                    type: false,
                };
                this.$emit("applicationType", params);
            },
            screenBack() {},
            //发送消息
            sendContent(){
                this.textarea = this.textarea.trim();
                if(this.textarea =='' || this.textarea == null || this.textarea == undefined){
                    if(this.$i18n.locale == "en"){
                        this.$message.error('Not send empty messages');
                        return
                    }else {
                        this.$message.error('不可发空消息');
                        return
                    }

                }
                let params={
                    acceptPeople:this.card.nameid,
                    content:this.textarea,
                    frontOrBack:2,
                }
                sendcontent(params).then(res=>{
                    if(res.data=='发送成功'){
                        this.refresh++
                        this.textarea=''
                        let params2={
                            sendPeople:this.card.nameid,
                            frontOrBack:2,
                        }
                        getMessage(params2).then(res=>{
                            this.message=res.data.page
                        })
                    }
                })

            },
        },
    };
</script>
<style scoped>
    /* 利用穿透，设置input边框隐藏 */
    .inputDeep>>>.el-input__inner {
        border: 0;
    }
    /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
    .inputDeep>>>.el-textarea__inner {
        border: 0;
        resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
    }
    .send{
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 9px 32px;
        position: absolute;
        width: 96px;
        height: 40px;
        right:33px;
        background: #3A8EE6;
        border: 1px solid #3A8EE6;
        border-radius: 4px;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #FFFFFF;


    }
    .box1 {
        padding: 0 0 20px 0;
        position: absolute;
    }
    .center {
        display: flex;
    }
    .topImg img {
        display: inline-block;
        width: 1200px;
        height: 324px;
    }
    .centerLeft1 {
        border-radius: 0px;

        width: 1198px;
        height: 877px;
        left: 360px;
        top: 317px;

        background: #FFFFFF;
    }
    .left {
        position: relative;
    }
    .message2{
        display:flex;
        width:100%;
        padding-left:20px;
    }
    .msg2_msg{
        width:55%;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .msg2_time{
        width:30%;
        position:absolute;
        right:4px
    }
    .people_num{
        padding-left:5px;
        padding-right:5px;
        color:white;
        border:1px solid #F56C6C;
        background: #F56C6C;
        border-radius: 24px;
        width: 7px;
        height: 18px;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
    }
    .top .top1 {
        position: absolute;
        width: 5.5px;
        height: 10.5px;
        left: 20px;
        top: 35px;
        background: #376ac7;
        z-index: 1;
    }
    .top .top2 {
        position: absolute;
        width: 5.5px;
        height: 15px;
        left: 20px;
        top: 35px;
        background: #83bd50;
    }
    .top .allApplication {
        position: absolute;
        height: 22px;
        left: 34px;
        top: 31px;
    }
    .top .allApplication span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #375586;
    }
    .top .notice {
        position: absolute;
        height: 22px;
        left: 160px;
        top: 32px;
    }
    .top .notice span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: rgba(10, 10, 10, 0.85);
    }
    .top .more {
        position: absolute;
        height: 16px;
        right: 21px;
        top: 31px;
    }
    .top .more span {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #4790f7;
    }
    .content .content1 {
        box-sizing: border-box;
        position: absolute;
        width: 314px;
        height: 799px;
        left: 0px;
        top: 78px;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .content .content2 {
        box-sizing: border-box;
        position: absolute;
        width: 888px;
        height: 799px;
        left: 314px;
        top: 78px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .right_one{
        width: 864px;
        height:70px;
        background-color:white;
        color:black;
        font-size:20px;
        padding-left:20px;
            font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        display: flex;
        align-items: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        border: 1px solid rgba(0, 0, 0, 0.15);
        color: #000000;
    }
    .right_two{
        box-sizing: border-box;
        width: 888px;
        height: 536px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .r_two_content{
        height:auto;width:350px;
        padding:18px;
        display:flex;
        margin-left:20px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;

    }
    .r_two2_content{
        height:auto;width:350px;
        padding:18px;
        margin-left:480px;
        display:flex;
        background: #cde4fc;
        border-radius: 4px;

    }
    .r_two_time{
        height:60px;width:100%;text-align:center;padding-top:40px;font-size:15px;
    }
    .left_top{
        display:flex;
        width:302px;
        height:58px;
        padding-left:10px;
        background: rgba(0, 0, 0, 0.05);
    }
    .l_t_left{
        width: 146px;
        height: 34px;

        margin-top:10px;
        background: #51A1F0;
        border: 1px solid #51A1F0;
        border-radius: 4px 0px 0px 4px;
        cursor:pointer;
        /* Bold/Body */
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        /* or 157% */
        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #FFFFFF;


    }
    .l_t_right{
        margin-top:10px;
        width: 146px;
        background: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 0px 4px 4px 0px;
        cursor:pointer;
        height: 34px;
        /* Bold/Body */

        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        /* or 157% */

        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: rgba(0, 0, 0, 0.85);
    }
    .l_b_div{
        width: 292px;
        height: 85px;
        background: white;
        cursor:pointer;
        font-family: 'PingFang SC';
        font-style: normal;
        margin-left:10px;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        align-items: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        border-bottom:1px solid #d9d9d9;
        border-left-width:8px;
    }
    .l_b_div1{
        padding-left:10px;
        width: 302px;
        height: 85px;
        color:white;
        background: linear-gradient(270deg, #57AAF2 -3.87%, #3C83E8 105.81%);
        cursor:pointer;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        align-items: center;
        font-feature-settings: 'tnum' on, 'lnum' on;
        color: #FFFFFF;
    }
    .content .title {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 16px;
        right: 14px;
        bottom: 113px;
    }
    .content .time {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.65);
        position: absolute;
        left: 16px;
        top: 61px;
    }
    .content .type {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 89px;
    }

    .progress {
        position: absolute;
        left: -70px;
        bottom: 0;
        height: 34px;
        width: 246px;
        border-radius: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .detail {
        position: absolute;
        bottom: 0;
        height: 34px;
        width: 246px;
        border-radius: 0px;
        background: rgba(217, 217, 217, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content .toView {
        margin-left: 100px;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .content .toProgress {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .centerLeft2 {
        position: relative;
        margin-top: 20px;
        height: 177px;
        width: 850px;
        border-radius: 0px;
        background: #fff;
    }
    .content .audit {
        position: absolute;
        right: 5%;
    }
    .area {
        position: absolute;
        top: 100px;
    }
    .pag {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    /deep/ .el-tree .el-tree-node__expand-icon.expanded
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .renwu{
        background: url("../../assets/img/nationaIntorduction/renwu.png") no-repeat 0 3px;
        content: '';
        display: inline-block;
        width: 18px;
        height: 20px;
        font-size: 18px;
        background-size: 18px;
    }
    .group{
        background: url("../../assets/img/nationaIntorduction/group.png") no-repeat 0 3px;
        content: '';
        display: inline-block;
        width: 18px;
        height: 20px;
        font-size: 18px;
        background-size: 18px;
    }
   /deep/ .el-tree .el-icon-caret-right:before
    {
       background: url("../../assets/img/nationaIntorduction/zhankai.png") no-repeat 0 3px;
        content: '';
        display: block;
        width: 18px;
        height: 23px;
        font-size: 18px;
        background-size: 18px;
    }
    /deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
    {
        background: url("../../assets/img/nationaIntorduction/shousuo.png") no-repeat 0 3px;
        /*content: '';*/
        display: block;
        width: 18px;
        height: 23px;
        font-size: 18px;
        background-size: 18px;
    }
    /deep/ .el-tree-node__expand-icon.is-leaf::before
    {
        display: none;
    }
</style>