yos_web/src/HManagement/serviceDataScreen/index.vue

<template>
  <div class="bg-img" id="fullScreen" style="box-sizing: border-box">
    <div style="padding: 0 1.042vw 0 1.042vw">
      <div class="justify-style">
        <div class="select-style">
          <el-cascader :placeholder="$t('部门')"  class="inline-16" ref="selectdep" size="small" v-model="depment" :options="deplist" :append-to-body="false"  placement="bottom"
                       :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" ></el-cascader>
          <el-select v-model="person" filterable :placeholder="$t('请选择')" size="small"  @change="selectPerson" :popper-append-to-body="false" class="inline-16">
            <el-option
                v-for="item in personnelList"
                :key="item.index"
                :label="$t(item.name)"
                :value="item.userid">
            </el-option>
          </el-select>
          <el-select v-model="isleave" clearable class="inline-16" size="small" :placeholder="$t('请选择状态')" @change="leaveChange" :popper-append-to-body="false">
            <el-option :label="$t('在职')" value="1"></el-option>
            <el-option :label="$t('离职')" value="2"></el-option>
          </el-select>
        </div>
        <div class="title-style">{{$t(`营销管理平台`)}}</div>
        <div class="time-style">
          <div>
            <span class="span">{{ymd}}</span>
            <spna class="span">{{week}}</spna>
            <span>{{nowTime}}</span>
          </div>
          <div>
            <el-button size="small" class="button" type="primary" icon="el-icon-s-home" style="background-color: #144894"  @click="$router.push('/message')">{{$t(`返回首页`)}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="content-style justify-style">
      <div>
        <div class="justify-style">
          <!-- 业务员账户 -->
          <salesmanAccount ref="accountRef" @dialog="detailClick"></salesmanAccount>
          <!-- 作业数据 -->
          <jobData ref="jobRef" @dialog="detailClick"></jobData>
        </div>
        <div class="inline-top-20">
          <!-- 销售面板 -->
          <salesPanel  ref="panelRef" style="position: relative;z-index: 900"></salesPanel>
        </div>
      </div>
      <div>
        <!-- 销售漏斗 -->
        <salesFunnel ref="funnelRef" style="position: relative;z-index: 900"></salesFunnel>
        <div class="justify-style inline-top-20">
          <!-- 营销费用 -->
          <marketingExpenses ref="expensesRef"></marketingExpenses>
          <!-- 营销费用统计 -->
          <marketingExpenseStatistics ref="exStatisticsRef"></marketingExpenseStatistics>
        </div>
      </div>
      <div>
        <!-- 应收账款 -->
        <accountsReceivable ref="receivableRef"></accountsReceivable>
        <!-- 数据概况 -->
        <dataProfile ref="profileRef" class="inline-top-20"></dataProfile>
      </div>
    </div>
    <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" style="visibility: hidden" @backFull="backFull"></fullScreen>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :showClose="false"
        width="500px"
    >
      <span>暂无权限，请开通权限</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        :title="$t('提示')"
        style="margin-top: calc(28vh)"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
    >
      <span>{{$t('当前密码为初始密码，请前往修改密码')}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="onClose">{{$t('取 消')}}</el-button>
    <el-button size="small" type="primary" @click="goPassword">{{$t('确 定')}}</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import fullScreen from "@/views/salesData/components/fullScreen";
import salesmanAccount from './modules/salesmanAccount';
import jobData from './modules/jobData'
import salesPanel from './modules/salesPanel'
import salesFunnel from './modules/salesFunnel'
import marketingExpenses from './modules/marketingExpenses'
import marketingExpenseStatistics from './modules/marketingExpenseStatistics'
import accountsReceivable from './modules/accountsReceivable'
import dataProfile from './modules/dataProfile'
export default {
  name: "index",
  components:{fullScreen,salesmanAccount,jobData,salesPanel,salesFunnel,marketingExpenses,marketingExpenseStatistics,accountsReceivable,dataProfile},
  data(){
    return {
      timer: "", // 定义一个定时器
      nowTime: "",
      ymd:"",
      week:"",
      isleave:'1',
      depment:'',
      person:'',
      departmentid:'',
      deplist:[],
      personnelList:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":'1'
        }
      },
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight,
      dialogVisible:false,
      dialogPaw:false
    }
  },
  mounted() {
    this.$refs.fullRef.enterFullscreen()
    this.departmentrtment()
    console.log(this.windowWidth,'获取宽度')
    console.log(this.windowHeight,'获取高度')
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
        window.fullHeight = document.documentElement.clientHeight;
        that.windowWidth = window.fullHeight
      })()
    };
  },
  watch: {
    windowWidth (val) {
      console.log("实时屏幕宽度：",val );
      this.$refs.panelRef.progressWidth = (9.65 * document.documentElement.clientWidth) / 100
    },
    windowHeight (val) {
      console.log("实时屏幕高度：",val );
    }

  },
  methods:{
    getTime() {
      this.timer = setInterval(() => {
        // 获取当前时间的各个部分
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        // 格式化小时
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        // 格式化分钟
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        // 格式化秒钟
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        let week = timeDate.getDay();
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
        ];

        // 将获取的时间信息赋值给nowTime
        // this.nowTime = `${year}-${mounth}-${day} ${weekArr[week]} ${hours}:${minutes}:${seconds}`;
        this.ymd = `${year}年${mounth}月${day}日`
        this.week = `${weekArr[week]}`
        this.nowTime = `${hours}:${minutes}:${seconds}`
      }, 1000); // 每隔一秒更新时间
    },
    backFull(){
      this.$router.push('/message')
      if (JSON.parse(sessionStorage.getItem('active_password')) == '1' && JSON.parse(sessionStorage.getItem('password')) != '1' && JSON.parse(sessionStorage.getItem('active_account')).usertype != 0 && JSON.parse(sessionStorage.getItem('active_account')).usertype != 1){
        this.dialogPaw = true
      }
    },
    onClose() {
      this.dialogVisible = false;
      sessionStorage.setItem("password", "1");
      sessionStorage.setItem("isPassword", "0");
    },
    handleClose() {
      this.dialogVisible = false;
      sessionStorage.setItem("password", "1");
      sessionStorage.setItem("isPassword", "0");
    },
    goPassword(){
      this.dialogPaw = false
      this.$router.push('/user_center')
      sessionStorage.setItem('password','1')
      sessionStorage.setItem('isPassword','1')
    },
    leaveChange(){
      const type = this.depment?'1':'0'
      this.person = ''
      const dataid = type == '0'?-1:this.departmentid
      this.personData()
    },
    /*获取新的业务员列表*/
    async personData(){
      let param = {
        id: 20230620102004,
        content: {
          isleave:this.isleave
        },
      }
      const res = await this.$api.requested(param)
      this.personnelList = res.data.hr
    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
      this.depment = ''
      this.departmentid = ''
      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
      this.queryAllData(userid)
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    selectDep(val) {
      if (val.length === 0){
        const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
        this.queryAllData(userid)
      }else {
        this.person = ''
        this.dataid = ''
        this.departmentid = val[val.length -1]
        this.queryAllData(this.departmentid)
      }
    },
    selectPerson(val){
      this.depment = ''
      this.departmentid = ''
      this.dataid = val
      this.queryAllData(val)
    },
    queryAllData(id){
      /*业务员账户*/
      this.$refs.accountRef.param.content.dataid = id
      this.$refs.accountRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.accountRef.param.content.where.isleave = this.isleave
      this.$refs.accountRef.listData()

      /*作业数据*/
      this.$refs.jobRef.param.content.dataid = id
      this.$refs.jobRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.jobRef.param.content.where.isleave = this.isleave
      this.$refs.jobRef.listData()

      /*销售面板*/
      this.$refs.panelRef.param.content.dataid = id
      this.$refs.panelRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.panelRef.param.content.where.isleave = this.isleave
      this.$refs.panelRef.paramChart.content.dataid = id
      this.$refs.panelRef.paramChart.content.type = this.departmentid !== ''?1:0
      this.$refs.panelRef.paramChart.content.where.isleave = this.isleave
      let year = new Date().getFullYear()
      this.$refs.panelRef.$refs.pickerRef.value = String(year)
      this.$refs.panelRef.listData(true)

      /*销售漏斗*/
      this.$refs.funnelRef.param.content.dataid = id
      this.$refs.funnelRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.funnelRef.param.content.where.isleave = this.isleave
      this.$refs.funnelRef.listData()

      /*营销费用*/
      this.$refs.expensesRef.param.content.dataid = id
      this.$refs.expensesRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.expensesRef.param.content.where.isleave = this.isleave
      this.$refs.expensesRef.listData()

      /*营销费用统计*/
      this.$refs.exStatisticsRef.param.content.dataid = id
      this.$refs.exStatisticsRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.exStatisticsRef.param.content.where.isleave = this.isleave
      this.$refs.exStatisticsRef.cusInit(true)
      this.$refs.exStatisticsRef.proInit(true)

      /*应收账款*/
      this.$refs.receivableRef.param.content.dataid = id
      this.$refs.receivableRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.receivableRef.param.content.where.isleave = this.isleave
      this.$refs.receivableRef.listData()

      /*数据概况*/
      this.$refs.profileRef.param.content.dataid = id
      this.$refs.profileRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.profileRef.param.content.where.isleave = this.isleave
      this.$refs.profileRef.listData()
      this.$refs.profileRef.$refs.proTypRef.param.content.dataid = id
      this.$refs.profileRef.$refs.proTypRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.profileRef.$refs.proTypRef.param.content.where.isleave = this.isleave
      let currentDate = new Date(); // 获取当前日期
      let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() ) // 计算起始日期
      let endDate = currentDate.getFullYear() +'-' + 12 // 计算起始日期
      this.$refs.profileRef.$refs.startRef.value = startDate
      this.$refs.profileRef.$refs.endRef.value = endDate
      this.$refs.profileRef.$refs.proTypRef.typeInit(true,'项目类型分析')
      this.$refs.profileRef.$refs.proFowRef.typeInit(true,'项目跟进情况')
      this.$refs.profileRef.$refs.cusFowRef.typeInit(true,'客户跟进情况')
      this.$refs.profileRef.$refs.analyzeRef.param.content.dataid = id
      this.$refs.profileRef.$refs.analyzeRef.param.content.type = this.departmentid !== ''?1:0
      this.$refs.profileRef.$refs.analyzeRef.param.content.where.isleave = this.isleave
      this.$refs.profileRef.$refs.analyzeDateRef.value = new Date().getFullYear() + '-' +  (new Date().getMonth() + 1) + '-' + new Date().getDate()
      this.$refs.profileRef.$refs.analyzeRef.lineInit(true)
    },
    detailClick(){
      this.dialogVisible = true
    }
  },
  created() {
    this.getTime()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
}
</script>

<style scoped>
.bg-img {
  background: url("../../assets/icons/bgScreen.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.select-style{
  width: 30%;
  padding-top: 0.625vw;
}
.title-style {
  width: 30%;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 2.292vw;
  color: #E6F4FF;
  text-shadow: 0.000vw 0.104vw 0.208vw #A9D7F9;
  margin: auto;
  font-style: normal;
  text-transform: none;
  padding-top: 1.042vh
}
.time-style{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.938vw;
  color: #E6F4FF;
  text-align: right;
  font-style: normal;
  text-transform: none;
  padding-top: 0.938vw;
}
.time-style .span {
  margin-right: 1.042vw;
}
.time-style .button {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 0.938vw;
  color: #E6F4FF;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 0.538vw;
  border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
  border: none;
}
.justify-style{
  display: flex;
  justify-content: space-between
}
.content-style{
  margin: 1.804vw 1.042vw 1.042vw 1.042vw;
  /*border: 0.052vw solid #5daf34;*/
  height: calc(100vh - 7.458vw);
}
.inline-left-20{
  margin-left: 1.042vw;
}
.inline-top-20{
  margin-top: 1.042vw;
}
/deep/ .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 140px;
}
/deep/ .el-input__inner {
  -webkit-appearance: none;
  background-color: #061a31;
  background-image: none;
  box-sizing: border-box;
  color: #c6d6e4;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #CFDCE5;
}
</style>