gdy_pc_8/src/home.vue

<template>
  <div>
    <div>
      <div class="flex-box">
        <div class="flex-1" style="margin-right: 10px;">

          <div style="background-color: #fff;padding:20px;margin-bottom: 10px;" class="br-5 ">

            <div class="flex-box-ce">
                <div style="margin-right: 10px;">
                  <userImage :id="user_info.id" :img_url="user_info.img_url" :user_name="user_info.name" width="50px" height="50px"></userImage>
                </div>
                <div class="flex-1">
                  <div class="flex-box-ce" style="margin-bottom: 6px;font-size: 14px;color: #666;font-weight: 700;">
                    <div style="font-size: 16px;font-weight: 700;padding-right:15px;" class="black">你好，{{ user_info.name }}</div>
                  </div>
                  <div class="fontColorC font-flex-word" style="max-width: 180px;">{{returnDeptName()}}</div>
                </div>
                <template v-if="user_info.post_info.length>0">
                    <div class="flex-box-v flex-center-center" v-for="(item,index) in user_info.post_info" :key="index" style="border-radius: 3px;margin-left: 10px;padding: 10px;background-color: #f0f4fa;">
                      <i style="font-size: 18px;" class="el-icon-s-custom fontColorC"></i>
                      <span class="fontColorB">{{item.name}}</span>
                    </div>
                </template>
            </div>

            <div class="flex-1" style="background-color: #f7f8fa;padding: 20px;border-radius:5px;margin-top: 20px;min-height: 229px;">
                <div class="flex-box-ce" style="margin-bottom: 20px;">
                  <div><i style="font-size: 20px;margin-right: 5px;" class="el-icon-bell orange"></i></div>
                  <div class="black" style="font-size: 18px;margin-right: 10px;">企业公告</div>
                  <div class="blue cursor" @click="openUrl(1)" v-if="isAdministrator">  +发布公告</div>
                  <div class="flex-1"></div>
                  <div class="fontColorB cursor" @click="openUrl(1)">查看更多</div>
                </div>
                <ul class="flex-1" style="min-width: 550px;" v-if="gongaoList.length>0">
                  <li class="flex-box-ce item" @click="openUrl(1,item.id)" v-for="(item, index) in gongaoList" :key="index">
                    <div class="flex-1 flex-box-ce font-flex-word" style="min-width: 300px;">
                      <span style="width: 6px;height: 6px;border-radius: 50%;background-color: #ccc;margin-right: 10px;"></span>
                      {{item.name}}
                    </div>
                    <div class="fontColorC">{{item.create_time}}</div>
                  </li>
                </ul>

                <noData isSolt v-else imgW="200px" imgH="150px" imgUrl="static/images/nodata_default.png">
                    <div v-else  class="fontColorC" style="text-align: center;" v-if="isAdministrator">暂无公告，去<span class="blue cursor" @click="openUrl(1)">添加</span></div>
                </noData>
            </div>

          </div>

          <div class="raiders_box">
            <div class="flex-box-ce">
              <div class="flex-1">管理学习中心</div>
            </div>
            <div class="flex-box-ce fontColorB flex-d-center flex-d-wrap" style="text-align: center;margin: 20px 0;font-size: 16px;">
              <div @click="openCursor(item)" class="cursor" style="padding: 30px 0;background-color: #f0f4fa;width: 49%;margin-bottom: 16px;border-radius: 5px;"  v-for="(item,index) in courseList" :key="index">
                <svg-icon :icon-class="item.icon" class="blue"></svg-icon> {{item.name}}
              </div>
            </div>
            <div class="articles">
                <div class="article" v-for="(item,index) in consultAll" :key="index" @click="openContent(3,item)">
                    <div class="img-box"><img :src="item.thumb" alt="static/images/logo2.png"></div>
                    <div style="flex:1;margin-left: 10px;">
                      <div class="article-content">{{item.summary}}</div>
                      <div class="flex-box-ce" style="font-size: 12px;">
                        <div class="fontColorC">{{item.publish_date}}</div>
                      </div>
                    </div>
                </div>
            </div>
          </div>

        </div>
        <div style="width: 300px;">
          <div style="margin-bottom: 10px;" v-if="announcement.length>0">
            <CarouselContainer @confirm="openContent(2,$event)" :slide-list="announcement" currentIndex="1"></CarouselContainer>
          </div>
          <div>
            <div class="flex-box-ce title-green">
              <i class="el-icon-discount green" style="font-size: 18px;"></i>
              <div class="flex-1" style="font-size: 16px;font-weight: 600;padding-left: 10px;">系统通知</div>
              <div style="font-size: 13px;" class="fontColorC cursor" @click="openContent(1)">查看更多</div>
            </div>
            <div style="background-color: #fff;padding: 16px;">
                <div v-for="(item,index) in updataAll" :key="index" class="versions" @click="openContent(1,item)">
                    <div style="margin-bottom: 5px;">{{item.title}}</div>
                    <div class="fontColorC" style="font-size: 13px;" :v-html="item.focus"></div>
                </div>
            </div>

            <div class="blue cursor" style="background-color: #fff;padding: 16px;border-top: 1px solid #f1f1f1;text-align: center;" @click="isShowJy=true">
                有需求、建议？马上提 <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 建议 -->
    <Suggest :visible.sync="isShowJy"></Suggest>

  </div>
</template>

<script>
import CarouselContainer from '@/components/CarouselContainer.vue'
import Suggest from '@/components/Suggest';
import { mapGetters, mapState } from 'vuex';
export default {
  components:{CarouselContainer,Suggest},
  data() {
    return {
      // 7.0
      time: this.$moment().format('HH'),
      isAdministrator:this.$getIsAdministrator(),


      isShowJy:false,
      noticeLoad:false,

      gongaoList:[],//客户公告

      updataAll:[],//版本更新
      announcement:[],//系统版本

      consultAll:[],//管理咨询
      functionAll:[],//功能预告

      courseList:[
        {name:'OKR目标管理-帮助手册',icon:'#icon-zhiyeshengyamubiao',id:1},
        {name:'绩效考核与管理-帮助手册',icon:'#icon-jixiao',id:2},
        {name:'积分制管理-帮助手册',icon:'#icon-PC_gongzuotai_ABfen',id:3},
        {name:'巡检、现场管理-帮助手册',icon:'#icon-tongxunlu_tianjiabumen',id:4},
      ]
    };
  },
  computed: {
    ...mapGetters(['user_info','site_info'])
  },
  methods: {
    openCursor(item){
      let urls=['https://www.yuque.com/xbddba/usmcgl?#','https://www.yuque.com/xbddba/qmvgbb?#','https://www.yuque.com/xbddba/pea8fp?#','https://www.yuque.com/xbddba/rtl7hs?#']

      window.open(urls[item.id-1],'_blank');
    },
		getGongaoList() {
			let params = {page: 1,page_size: 5};
			this.$axiosUser('get', '/api/pro/information/list/page', params).then(res => {
					let list = res.data.data.list;
					this.gongaoList =list;
			});
		},
    openContent(index,item){
      let data=item? {id:item.id}:{}
      this.$router.push({ path: '/update_notice',query:data})
    },
    openUrl(index,id){
      if(index==1){
         this.$router.push({ path: '/inform',query:{id:id}})
      }
    },
    noticeList() {
      this.noticeLoad = true;
      let http1=this.$axiosUser('get', '/api/pro/announcement/list', {page: 1,page_size: 10,type:0});//版本更新
      // let http2=this.$axiosUser('get', '/api/pro/article/list', {page: 1,page_size: 5,type:2});//系统公告
      // let http3=this.$axiosUser('get', '/api/pro/article/list', {page: 1,page_size: 6,type:3});//管理资讯
      // let http4=this.$axiosUser('get', '/api/pro/article/list', {page: 1,page_size: 1,type:4});//版本预告
      Promise.all([http1]).then(res => {
        this.updataAll=res[0].data.data.list;//
        // this.announcement=res[1].data.data.list;//
        // this.consultAll=res[2].data.data.list;//
        // this.functionAll=res[3].data.data.list;//
      }).finally(()=>{
        this.noticeLoad = false;
      })
    },
    returnDeptName(){
      let str='';
      let dept_list=this.user_info.employee_detail.dept_list;
      dept_list.forEach((e,index)=>{
          if(dept_list.length-index>1){
             str+=e.dept_name+'，'
          }else{
             str+=e.dept_name
          }
      })
      return str
    },
  },
  created() {
    this.noticeList();
    this.getGongaoList();
  },
};
</script>

<style scoped>
.menu-item2{
  background-color: #F7F7F7;
  width: 170px;
  position: relative;
  height: 34px;
  line-height: 34px;
  border: 1px solid #F7F7F7;
  padding: 0 16px;
  margin-bottom: 12px;
  transition: all .3s;
  cursor: pointer;
  margin-right: 20px;
}
.isSelect{
  background-color: #fff;
  color: #005bea;
  border: 1px solid #005bea;
}
.menu-item{
  background-color: #fff;
  width: 170px;
  position: relative;
  height: 36px;
  line-height: 36px;
  padding: 0px 16px;
  transition: all .3s;
  cursor: move;
  margin-bottom: 12px;
  margin-right: 17px;
}
.menu-item:hover i{
  display: block !important;
  color: #f56c6c !important;
}
.versions{
  position: relative;
  padding:6px 0;
  padding-left:24px;
  cursor: pointer;
}
.versions::after{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #64CBBA;
  border-radius: 100%;
  left: 0px;
  top: 10px;
  z-index: 2;
}
.versions2{
  position: relative;
  padding-left:24px;
  margin-bottom: 16px;
  cursor: pointer;
}
.versions2::after{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #F5C37B;
  border-radius: 100%;
  left: 0px;
  top: 5px;
  z-index: 2;
}
.versions:hover {
  color: #409eff;
  background-color: #f5f7fa;
}
.title-green{
  background-image: linear-gradient(to right, #CAEDEF 0%, #fff 100%);
  padding: 12px;
}
.title-orange{
  background-image: linear-gradient(to right, #FEF9F1 0%, #fff 100%);
  padding: 12px;
}
.articles{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article{
  width:49%;
  display: flex;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all .3s;
}
.img-box img{
  width: 100px;
  height: 70px;
  display: block;
}
.article-content{
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 40px;
  margin-bottom: 12px;
  padding-top: 3px;
}
.article:hover .article-content{
  color: #409eff;
}
.item {
  font-size: 14px;
  cursor: pointer;
  padding: 5px;
}
.item:hover {
  color: #409eff;
}
.raiders_box{
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
}
.inCommonUseStyle {
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  text-align: center;
  margin-right: 16px;
  margin-bottom: 20px;
}
.inCommonUseStyle:hover {
  color: #409eff;
  background-color: #f5f7fa;
}
</style>