chenrui 2 vuotta sitten
vanhempi
commit
750e09fd09

+ 27 - 26
src/components/item-wrap/item-wrap.vue

@@ -7,18 +7,16 @@
 -->
 <template>
   <dv-border-box-13 class="lr_titles">
-    <div class="item_title" v-if="title !== ''&&mode=='center'">
+    <div class="item_title" v-if="title !== '' && mode == 'center'">
       <div class="zuo"></div>
       <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
       <div class="you"></div>
     </div>
-	<div class="item_title_left" v-if="title !== ''&&mode=='left'">
-	  <div>⋙</div>
-	  <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
-	</div>
-    <div
-      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
-    >
+    <div class="item_title_left" v-if="title !== '' && mode == 'left'">
+      <div>⋙</div>
+      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
+    </div>
+    <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
       <slot></slot>
     </div>
   </dv-border-box-13>
@@ -34,14 +32,14 @@ export default {
       type: String,
       default: () => "",
     },
-	mode:{
-		type: String,
-		default: () => "center",
-	}
+    mode: {
+      type: String,
+      default: () => "center",
+    }
   },
-  created() {},
+  created() { },
 
-  mounted() {},
+  mounted() { },
   methods: {},
 };
 </script>
@@ -52,12 +50,13 @@ $item_title_content-height: calc(100% - 38px);
 .lr_titles {
   box-sizing: border-box;
 
-:deep(.border-box-content)  {
+  :deep(.border-box-content) {
     box-sizing: border-box;
     padding: 6px 16px 0px;
   }
 
-  .item_title,.item_title_left {
+  .item_title,
+  .item_title_left {
     height: $item-title-height;
     line-height: $item-title-height;
     width: 100%;
@@ -68,7 +67,8 @@ $item_title_content-height: calc(100% - 38px);
     display: flex;
     align-items: center;
     justify-content: center;
-	margin-top: 5px;
+    margin-top: 5px;
+
     .zuo,
     .you {
       width: 58px;
@@ -79,25 +79,26 @@ $item_title_content-height: calc(100% - 38px);
     .you {
       transform: rotate(180deg);
     }
+
     .title-inner {
       font-weight: 900;
       letter-spacing: 2px;
-      background: linear-gradient(
-        92deg,
-        #0072ff 0%,
-        #00eaff 48.8525390625%,
-        #01aaff 100%
-      );
+      background: linear-gradient(92deg,
+          #0072ff 0%,
+          #00eaff 48.8525390625%,
+          #01aaff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
   }
-  .item_title_left{
-	  justify-content: flex-start;
+
+  .item_title_left {
+    justify-content: flex-start;
   }
+
   .item_title_content {
     height: $item_title_content-height;
-	position: relative;
+    position: relative;
   }
 
   .item_title_content_def {

+ 5 - 4
src/mock/mock.js

@@ -139,15 +139,16 @@ function ssyj() {
                 salesAmount: "@float(60, 10000)",
                 "saleNums|+1": "@integer(1000, 1000)",
 				name: "周"
-            },{
-                salesAmount: "@float(60, 5000)",
-                "saleNums|+1": "@integer(1000, 500)",
-				name: "日"
             }],
         }
     })
     return a
 }
+// ,{
+//     salesAmount: "@float(60, 5000)",
+//     "saleNums|+1": "@integer(1000, 500)",
+//     name: "日"
+// }
 Mock.mock(new RegExp('ssyj'), 'get', ssyj)
 
 // 销售数量金额 排名

+ 1 - 0
src/views/analyse/right-top.vue

@@ -72,6 +72,7 @@ export default {
       this.pageflag = true
       // this.pageflag =false
       currentGET('big9', { limitNum: 50 }).then(res => {
+        console.log('采购金额',res);
         if (res.success) {
           this.list = res.data.list
           let timer = setTimeout(() => {

+ 97 - 35
src/views/indexs/index.vue

@@ -15,30 +15,41 @@
         <LeftTop />
       </ItemWrap>
       <ItemWrap class="contetn_left-bottom contetn_lr-bitem" title="销售金额TOP15">
-		<LeftBottom />
+        <LeftBottom />
       </ItemWrap>
     </div>
     <div class="contetn_center">
-	  <dv-border-box-8 class="contetn_center-top">
-		  <CenterTop />
-	  </dv-border-box-8>
+      <dv-border-box-8 class="contetn_center-top">
+        <CenterTop />
+      </dv-border-box-8>
       <CenterMap class="contetn_center_topMap" />
       <ItemWrap class="contetn_center-bottom" title="品类销售分布">
         <CenterBottom />
       </ItemWrap>
     </div>
     <div class="contetn_right">
-      <ItemWrap
-        class="contetn_right-top contetn_lr-item"
-        title="销售趋势分析"
-      >
-        <RightTop style="height: 94%;"/>
+      <ItemWrap class="contetn_right-top contetn_lrr-item" title="销售趋势分析">
+        <RightTop style="height: 94%;" />
       </ItemWrap>
-      <ItemWrap
+      <!-- <ItemWrap
         class="contetn_right-bottom contetn_lr-bitem"
-        title="本月/周/日销售"
+        title="本月/周销售"
       >
         <RightBottom />
+      </ItemWrap> -->
+      <ItemWrap class="contetn_right-bottom contetn_right_bottom" title="本月/周销售">
+        <RightBottom />
+      </ItemWrap>
+      <ItemWrap class="contetn_center-bottom" title="今日销售">
+        <div class="table-head">
+          <div class="col-1">排名</div>
+          <div class="col-2">加盟商</div>
+          <div class="col-3">级别</div>
+          <div class="col-4">采购金额(元)</div>
+        </div>
+        <div style="padding-bottom: 20px;">
+          <AnalyseRightTop />
+        </div>
       </ItemWrap>
     </div>
   </div>
@@ -52,20 +63,21 @@ import CenterMap from "./center-map.vue";
 import CenterBottom from "./center-bottom.vue";
 import RightTop from "./right-top.vue";
 import RightBottom from "./right-bottom.vue";
-
+import AnalyseRightTop from "../analyse/right-top.vue";
 export default {
   components: {
     LeftTop,
     LeftBottom,
-	CenterTop,
+    CenterTop,
     CenterMap,
     RightTop,
     RightBottom,
     CenterBottom,
+    AnalyseRightTop
   },
   data() {
     return {
-    
+
     };
   },
   filters: {
@@ -76,17 +88,18 @@ export default {
   created() {
   },
 
-  mounted() {},
+  mounted() { },
   methods: {
-	toPage(){
-		this.$router.push({name:'analyse'})
-	}
+    toPage() {
+      this.$router.push({ name: 'analyse' })
+    }
   },
 };
 </script>
 <style lang="scss" scoped>
 // 内容
 .contents {
+
   .contetn_left,
   .contetn_right {
     width: 540px;
@@ -99,17 +112,29 @@ export default {
   }
 
   //左右两侧 三个块
-  .contetn_left-top, .contetn_right-top{
-	  margin-top: 15px;
+  .contetn_left-top,
+  .contetn_right-top {
+    margin-top: 15px;
   }
+
   .contetn_lr-item {
     height: 400px;
   }
+
+  .contetn_lrr-item {
+    height: 350px;
+  }
+
   .contetn_lr-bitem {
     height: 560px;
   }
 
-  .contetn_center_top, .contetn_center_topMap {
+  .contetn_right_bottom {
+    height: 270px;
+  }
+
+  .contetn_center_top,
+  .contetn_center_topMap {
     width: 100%;
   }
 
@@ -119,10 +144,12 @@ export default {
     flex-direction: column;
     justify-content: space-around;
   }
-  .contetn_center-top{
-	height: 110px;
-	margin-top: 10px;
+
+  .contetn_center-top {
+    height: 110px;
+    margin-top: 10px;
   }
+
   .contetn_center-bottom {
     height: 310px;
   }
@@ -135,21 +162,56 @@ export default {
     justify-content: space-between;
     position: relative;
   }
-}
 
+  .table-head {
+    display: flex;
+    align-items: center;
 
-@keyframes rotating {
-    0% {
-        -webkit-transform: rotate(0) scale(1);
-        transform: rotate(0) scale(1);
+    .col-1 {
+      width: 10%;
     }
-    50% {
-        -webkit-transform: rotate(180deg) scale(1.1);
-        transform: rotate(180deg) scale(1.1);
+
+    .col-2 {
+      width: 30%;
     }
-    100% {
-        -webkit-transform: rotate(360deg) scale(1);
-        transform: rotate(360deg) scale(1);
+
+    .col-3 {
+      width: 30%;
+    }
+
+    .col-4 {
+      width: 30%;
+    }
+
+    >div {
+      text-align: center;
+      padding: 5px 0;
+      color: rgba(0, 170, 255, 0.8);
     }
+  }
+
+  .right_center_wrap {
+    overflow: hidden;
+    width: 100%;
+    height: 220px !important;
+  }
+}
+
+
+@keyframes rotating {
+  0% {
+    -webkit-transform: rotate(0) scale(1);
+    transform: rotate(0) scale(1);
+  }
+
+  50% {
+    -webkit-transform: rotate(180deg) scale(1.1);
+    transform: rotate(180deg) scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg) scale(1);
+    transform: rotate(360deg) scale(1);
+  }
 }
 </style>

+ 76 - 44
src/views/indexs/right-bottom.vue

@@ -7,33 +7,44 @@
 -->
 <template>
   <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
-     <ul class="right_center ">
-       <li class="right_center_item" v-for="(item, i) in list" :key="i">
-		 <div class="dibu" v-if="i<2"></div>
-         <span class="orderNum">{{item.name}}</span>
-         <div class="inner_right">
-           <div class="flex">
-             <div class="info">
-			   <span class="nums zhuyao"> {{ item.saleNums }}</span>
-               <span class="labels">销售数量</span>
-             </div>
-             <div class="info">
-               <span class="nums warning"> {{ item.salesAmount | montionFilter }}</span>
-			   <span class="labels">销售金额</span>
-             </div>
-           </div>
-         </div>
-       </li>
-     </ul>
+    <ul class="right_center ">
+      <li class="right_center_item" v-for="(item, i) in list" :key="i">
+        <div class="dibu" v-if="i < 1"></div>
+        <span class="orderNum">{{ item.name }}</span>
+        <div class="inner_right">
+          <div class="flex">
+            <div class="info">
+              <span class="nums zhuyao"> {{ item.saleNums }}</span>
+              <span class="labels">销售数量</span>
+            </div>
+            <div class="info">
+              <span class="nums warning"> {{ item.salesAmount | montionFilter }}</span>
+              <span class="labels">销售金额</span>
+            </div>
+          </div>
+        </div>
+      </li>
+      <!-- <li>
+        <div class="tit flex">
+          <img src="@/assets/img/titles/zuo.png" width="58" height="14" alt="图片走丢啦">
+          <span>今日销售</span>
+          <img src="@/assets/img/titles/you.png" width="58" height="14" alt="图片走丢啦">
+        </div>
+        <div class="day_box">
+          <RightBottom/>
+        </div>
+      </li> -->
+    </ul>
   </div>
   <Reacquire v-else @onclick="getData" style="line-height:200px" />
 
 </template>
 
 <script>
+import RightBottom from "../analyse/right-top.vue";
 import { currentGET } from 'api/modules'
 export default {
-  components: {},
+  components: {RightBottom},
   data() {
     return {
       list: [],
@@ -74,28 +85,28 @@ export default {
     align-items: center;
     justify-content: center;
     height: auto;
-    padding: 42px 15px;
+    padding: 11px 15px;
     font-size: 14px;
     color: #fff;
-	position: relative;
-	
-	.dibu {
-	  position: absolute;
-	  height: 2px;
-	  width: 104%;
-	  background-image: url("../../assets/img/zuo_xuxian.png");
-	  bottom: 0;
-	  left: -2%;
-	  background-size: cover;
-	}
-	
+    position: relative;
+
+    .dibu {
+      position: absolute;
+      height: 2px;
+      width: 104%;
+      background-image: url("../../assets/img/zuo_xuxian.png");
+      bottom: 0;
+      left: -2%;
+      background-size: cover;
+    }
+
     .orderNum {
       margin: 0 20px;
-	  font-size: 35px;
-	  border:3px solid rgba(0, 170, 255, 0.5);
-	  border-radius: 200px;
-	  padding: 15px;
-	  color: rgba(0, 170, 255, 0.5);
+      font-size: 25px;
+      border: 3px solid rgba(0, 170, 255, 0.5);
+      border-radius: 200px;
+      padding: 15px;
+      color: rgba(0, 170, 255, 0.5);
     }
 
     .inner_right {
@@ -106,38 +117,59 @@ export default {
     }
 
     .info {
-	  width: 45%;
+      width: 45%;
       margin-right: 10px;
       display: flex;
       align-items: center;
-	  flex-direction: column;
-	  justify-content: center;
+      flex-direction: column;
+      justify-content: center;
+
       .labels {
         flex-shrink: 0;
         font-size: 16px;
         color: rgba(255, 255, 255, 0.6);
       }
-	  .nums{
-		  font-size: 40px;
-	  }
+
+      .nums {
+        font-size: 32px;
+      }
+
       .zhuyao {
         color: #00aaff;
       }
+
       .ciyao {
         color: rgba(255, 255, 255, 0.8);
       }
+
       .warning {
         color: #E6A23C;
       }
     }
 
   }
+  .tit{
+    align-items: center;
+    justify-content: center;
+    color: #31abe3;
+    font-weight: 900;
+    letter-spacing: 2px;
+    margin-top:10px;
+    span{
+      display: inline-block;
+      padding:10px 16px;
+    }
+  }
+  .day_box{
+    margin-bottom: 10px;
+  }
+  
 }
 
 .right_center_wrap {
   overflow: hidden;
   width: 100%;
-  height: 500px;
+  height: 485px;
 }
 
 .overflow-y-auto {