暂存

src/HManagement/serviceDataScreen/components/borderTemplate.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="border-box-style">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "borderTemplate"
+}
+</script>
+
+<style scoped>
+  .border-box-style{
+    width: 290px;
+    height: 240px;
+    background: linear-gradient( 180deg, #00244D 0%, #001E41 100%);
+    box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.15);
+    border-radius: 4px 4px 4px 4px;
+    border: 2px solid #3D73BA;
+    opacity: 0.8;
+  }
+</style>

src/HManagement/serviceDataScreen/index.vue

@@ -1,30 +1,97 @@
 <template>
   <div class="bg-img" id="fullScreen">
-    <div style="display: flex;justify-content: space-between">
-      <div></div>
-      <div class="time-style">
-
+    <div style="padding: 0 20px 0 20px">
+      <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>
+        <borderTemplate></borderTemplate>
       </div>
     </div>
-    <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" v-show="false" @backFull="backFull"></fullScreen>
+    <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" style="visibility: hidden" @backFull="backFull"></fullScreen>
   </div>
 </template>
 
 <script>
 import fullScreen from "@/views/salesData/components/fullScreen";
+import borderTemplate from './components/borderTemplate'
 export default {
   name: "index",
-  components:{fullScreen},
+  components:{fullScreen,borderTemplate},
   data(){
     return {
       timer: "", // 定义一个定时器
       nowTime: "",
       ymd:"",
-      week:""
+      week:"",
+      isleave:'1',
+      depment:'',
+      person:'',
+      departmentid:'',
+      deplist:[],
+      personnelList:[],
+      depmentParam:{
+        "id": 20230620102004,
+        "content": {
+          "isleave":'1'
+        }
+      },
+      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
+      windowHeight: document.documentElement.clientHeight
     }
   },
   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 );
+    },
+    windowHeight (val) {
+      console.log("实时屏幕高度：",val );
+    }
+
   },
   methods:{
     getTime() {
@@ -63,7 +130,104 @@ export default {
     },
     backFull(){
       this.$router.push('/message')
-    }
+    },
+    leaveChange(){
+      const type = this.depment?'1':'0'
+      this.person = ''
+      const dataid = type == '0'?-1:this.departmentid
+      this.otherModel(dataid,type,this.isleave,'状态')
+      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
+    },
+    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.otherModel(userid,'0')
+      }else {
+        this.person = ''
+        this.dataid = ''
+        this.departmentid = val[val.length -1]
+        this.otherModel(this.departmentid,'1',this.isleave)
+      }
+    },
+    selectPerson(val){
+      this.depment = ''
+      this.departmentid = ''
+      this.dataid = val
+      this.otherModel(val,'0',this.isleave)
+    },
   },
   created() {
     this.getTime()
@@ -79,24 +243,164 @@ export default {
 <style scoped>
 .bg-img {
   background: url("../../assets/icons/bgScreen.jpg") no-repeat;
-  min-height:810px ;
-  min-width: 1440px;
-  overflow: auto;
+  /*height:810px ;*/
+  /*width: 1440px;*/
   background-size: 100% 100%;
-  width: 100%;
-  height: calc(100vh - 130px);
+  width: 100vh;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+.select-style{
+  width: 30%;
+  padding-top: 12px;
+}
+@media (min-height: 866px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 15px;
+  }
+}
+@media (min-height: 1092px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 20px;
+  }
 }
+@media (min-height: 1206px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 20px;
+  }
+}
+@media (min-height: 1134px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 25px;
+  }
+}
+@media (min-height: 1391px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 30px;
+  }
+}
+@media (min-height: 1506px) {
+  .title-style {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 44px;
+    color: #E6F4FF;
+    text-shadow: 0px 2px 4px #A9D7F9;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    padding-top: 40px;
+  }
+}
+/*.title-style {*/
+/*  font-family: Microsoft YaHei, Microsoft YaHei;*/
+/*  font-weight: bold;*/
+/*  font-size: 44px;*/
+/*  color: #E6F4FF;*/
+/*  text-shadow: 0px 2px 4px #A9D7F9;*/
+/*  text-align: left;*/
+/*  font-style: normal;*/
+/*  text-transform: none;*/
+/*  padding-top: 20px;*/
+/*}*/
 .time-style{
   font-family: Microsoft YaHei, Microsoft YaHei;
+  width: 30%;
   font-weight: 400;
   font-size: 18px;
   color: #E6F4FF;
-  text-align: left;
+  text-align: right;
   font-style: normal;
   text-transform: none;
-  margin: 18px 20px 0 0 ;
+  padding-top: 18px;
 }
 .time-style .span {
   margin-right: 20px;
 }
+.time-style .button {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 18px;
+  color: #E6F4FF;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 20px;
+  border-radius: 6px 6px 6px 6px;
+  border: none;
+}
+.justify-style{
+  display: flex;
+  justify-content: space-between
+}
+.content-style{
+  margin: 90px 20px 20px 20px;
+  border: 1px solid #5daf34;
+  height: calc(100vh - 220px);
+}
+/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>