销售看板调整

src/HManagement/serviceDataScreen/index.vue

@@ -41,7 +41,7 @@
         </div>
         <div class="inline-top-20">
           <!-- 销售面板 -->
-          <salesPanel></salesPanel>
+          <salesPanel ref="panelRef"></salesPanel>
         </div>
       </div>
       <div>
@@ -119,6 +119,7 @@ export default {
   watch: {
     windowWidth (val) {
       console.log("实时屏幕宽度：",val );
+      this.$refs.panelRef.progressWidth = (9.65 * document.documentElement.clientWidth) / 100
     },
     windowHeight (val) {
       console.log("实时屏幕高度：",val );

src/HManagement/serviceDataScreen/modules/salesPanel.vue

@@ -1,6 +1,53 @@
 <template>
   <div>
-    <borderTemplate borderBox="width: 31.250vw;height: 35.417vw;" title="销售面板" detailTitle="查看详情"></borderTemplate>
+    <borderTemplate borderBox="width: 31.250vw;height: 35.417vw;" title="销售面板" detailTitle="查看详情">
+      <template slot="content">
+        <div class="justify-content">
+          <div class="justify-content-left">
+            <div class="box-border">
+              <el-button v-if="typeSelect == '订单'" type="primary" class="btn-select" @click="typeChange('订单')">订单</el-button>
+              <el-button type="text" v-else class="btn-unSelect" @click="typeChange('订单')">订单</el-button>
+            </div>
+            <div class="box-border">
+              <el-button type="primary" v-if="typeSelect == '出货'" class="btn-select" @click="typeChange('出货')">出货</el-button>
+              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('出货')">出货</el-button>
+            </div>
+            <div class="box-border">
+              <el-button type="primary" v-if="typeSelect == '开票'" class="btn-select" @click="typeChange('开票')">开票</el-button>
+              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('开票')">开票</el-button>
+            </div>
+            <div class="box-border">
+              <el-button type="primary" v-if="typeSelect == '回款'" class="btn-select" @click="typeChange('回款')">回款</el-button>
+              <el-button type="text" class="btn-unSelect" v-else @click="typeChange('回款')">回款</el-button>
+            </div>
+          </div>
+          <div>
+            <el-select v-model="param.content.dateType" clearable class="inline-16" size="small" @change="listData" :popper-append-to-body="false">
+              <el-option :label="$t('去年')" value="去年"></el-option>
+              <el-option :label="$t('本年')" value="本年"></el-option>
+              <el-option :label="$t('本季')" value="本季"></el-option>
+              <el-option :label="$t('本月')" value="本月"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="content-style-pie">
+          <div style="width: 7.292vw;height: 7.292vw;margin: 0.781vw 0 0 1.042vw;">
+            <el-progress
+                color="#6395fa"
+                type="circle"
+                :percentage="50"
+                :stroke-width="15"
+                :width="progressWidth"
+                :format="format"
+            ></el-progress>
+          </div>
+          <div>
+            <div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </borderTemplate>
   </div>
 </template>
 
@@ -8,10 +55,121 @@
 import borderTemplate from '../components/borderTemplate'
 export default {
   name: "salesPanel",
-  components:{borderTemplate}
+  components:{borderTemplate},
+  data(){
+    return {
+      typeSelect:'订单',
+      param:{
+        id:20231009125304,
+        content:{
+          dataid:'',
+          datatype:'1',
+          dateType:'本年',
+          type:'',
+          where:{
+            isleave:''
+          }
+        }
+      },
+      list:'',
+      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
+      progressWidth: (9.65 * document.documentElement.clientWidth) / 100
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      console.log(this.list,'销售看板')
+    },
+    typeChange(val){
+      if (val == '订单'){
+        this.typeSelect = '订单'
+        this.param.content.datatype = 1
+      }else if (val == '出货'){
+        this.typeSelect = '出货'
+        this.param.content.datatype = 2
+      }else if (val == '开票'){
+        this.typeSelect = '开票'
+        this.param.content.datatype = 3
+      }else if (val == '回款'){
+        this.typeSelect = '回款'
+        this.param.content.datatype = 4
+      }
+      this.listData()
+    },
+    format(percentage) {
+      return this.$t("目标达成率") + "\n\n" + percentage + "%";
+    },
+  },
+  // watch:{
+  //   windowWidth (val) {
+  //     console.log("当前屏幕宽度1111：",val );
+  //   },
+  // },
+  // mounted() {
+  //   var that = this;
+  //   // <!--把window.onresize事件挂在到mounted函数上-->
+  //   window.onresize = () => {
+  //     return (() => {
+  //       window.fullWidth = document.documentElement.clientWidth;
+  //       that.windowWidth = window.fullWidth; // 宽
+  //       console.log(that.windowWidth,'333333pingm')
+  //     })();
+  //   };
+  // }
 }
 </script>
 
 <style scoped>
-
+  .justify-content{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.042vw;
+  }
+  .justify-content-left{
+    display: flex;
+    justify-content: left;
+  }
+  .justify-content-left .box-border{
+    width: 3.125vw;
+    height: 1.563vw;
+    border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
+    margin-right: 0.521vw;
+    text-align: center;
+  }
+  .justify-content-left .box-border .btn-select{
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 0.833vw;
+    color: #E6F4FF;
+    font-style: normal;
+    text-transform: none;
+  }
+  .justify-content-left .box-border .btn-unSelect{
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 0.729vw;
+    color: #CFDCE5;
+    font-style: normal;
+    text-transform: none;
+    text-align: center;
+  }
+  .content-style-pie{
+    width: 29.167vw;
+    height: 11.458vw;
+    background: #001E41;
+    box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
+    border-radius: 5.729vw 5.729vw 0.313vw 5.729vw;
+    border: 0.052vw solid #CFDCE5;
+    margin-top: 1.042vw;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+  }
+  /deep/ .el-button--primary:focus, .el-button--primary:hover {
+    background: #6090f8;
+    border-color: #6090f8;
+    color: #6090f8;
+  }
 </style>