Ver Fonte

'首页'

魏志佳 há 5 anos atrás
pai
commit
a66aa8a0e9

+ 14 - 4
src/components/DatePicker.vue

@@ -1,4 +1,7 @@
 <template>
+<!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
+    left :string|0  left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left:-100px
+ -->
     <div class="datePicker">
         <a-range-picker
             v-model="dateValue"
@@ -7,7 +10,7 @@
              :disabled-date="disabledDate"
              :openChange='openChange'
             @change="onChange" />
-        <div class="pickOptions" v-show='openOptions'>
+        <div class="pickOptions" v-show='openOptions' ref="pickOptions">
             <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
         </div>
     </div>
@@ -68,7 +71,7 @@ let pickOptions=[
 ]
 
     export default {
-        props:['openOptions'],
+        props:['openOptions','left'],
         data() {
             return {
                 moment,
@@ -78,11 +81,12 @@ let pickOptions=[
                 // pickOptions:JSON.parse(JSON.stringify(pickOptions))
             }
         },
+        
         methods: {
             //日期改变事件
             onChange(date,dateString){
                 this.dateValue=date;
-                console.log(this.dateValue)
+                // console.log(this.dateValue)
                 if(dateString.length==2){
                     this.$parent.opendate();
                     this.$parent.type=9
@@ -105,12 +109,17 @@ let pickOptions=[
                 return current && current > moment().subtract(1, 'day')
             },
             openChange(open){
-                console.log(open)
+                // console.log(open)
             },
 
         },
         mounted() {
             this.dateValue=[moment(),moment()]
+            if(this.left){
+                this.$refs.pickOptions.style.left=this.left
+            }
+            
+            // console.log(this.$refs.pickOptions.style.left)
         },
     }
 </script>
@@ -127,6 +136,7 @@ let pickOptions=[
         left: -402px;
         border-right: 1px solid #999;
         box-shadow: 0 0 15px rgba(0,0,0,0.1);
+        cursor: pointer;
         div{
             height: 43px;           
             padding: 10px 15px;

+ 64 - 44
src/views/modules/Statistics/accountReport.vue

@@ -5,7 +5,7 @@
           <span>项目选择:</span>
           <a-tree-select
             v-model="treeValue"
-            style="width: 30%"
+            style="width: 50%"
             :tree-data="treeData"
             tree-checkable
             :show-checked-strategy="SHOW_PARENT"
@@ -14,23 +14,29 @@
             @change="treeChange"
           />
      
-      <div class="optItem">
-          <span>折扣:</span>
-          <a-input-number :min="0" :max="10" :step="0.1" v-model="discount" />
-      </div>
-      <div class="optItem">
-          <span>返点比例:</span>
-          <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" />
+     
+      <div style="float:right"   @click="opendate">
+            <DatePicker :openOptions='openOptions' :left=left />
       </div>
-      <div class="time"  @click="opendate">
-            <DatePicker :openOptions='openOptions'/>
+      <div class="optionTow">
+          <div class="optItem">
+              <span>折扣:</span>
+              <a-input-number :min="0" :max="10" :step="0.1" v-model="discount" />
+          </div>
+          <div class="optItem">
+              <span>返点比例:</span>
+              <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" />
+          </div>
+          <div class="btn">
+            <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
+            <a-button type="primary" @click="refreshgetData" :disabled='refreshDisabled' class="mybtn">刷新</a-button>
+            <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
+          </div>
       </div>
+      
+    </div>
+    <div class="show">
         
-      <div class="btn">
-        <a-button type="primary" @click="searchgetData" :disabled='searchDisabled'>查询</a-button>
-        <a-button type="primary" @click="refreshgetData" :disabled='refreshDisabled'>刷新</a-button>
-        <a-button type="primary" @click="resetgetData" :disabled='resetDisabled'>重置</a-button>
-      </div>
     </div>
   </div>
 </template>
@@ -60,6 +66,7 @@ export default {
     },
   data() {
     return {
+      left:0,
       //treeselect的参数
       treeValue: [],
       treeData: [],
@@ -150,28 +157,28 @@ export default {
             this.cost = res.result.costWeekLink
             this.click = res.result.clickWeekLink
             this.showNum = res.result.showNumWeekLink
-            res.result.top.top7.forEach((element, index) => {
-              this.topOption.xAxis[0].data.push(element.authName)
-              this.topOption.series[0].data.push(element.cost)
-            })
+            // res.result.top.top7.forEach((element, index) => {
+            //   this.topOption.xAxis[0].data.push(element.authName)
+            //   this.topOption.series[0].data.push(element.cost)
+            // })
 
-            for (let [key, value] of Object.entries(res.result.costWeek)) {
-              this.costOption.xAxis[0].data.push(key)
-              this.costOption.series[0].data.push(value)
-            }
-            for (let [key, value] of Object.entries(res.result.clickWeek)) {
-              this.clickOption.xAxis[0].data.push(key)
-              this.clickOption.series[0].data.push(value)
-            }
-            for (let [key, value] of Object.entries(res.result.showNumWeek)) {
-              this.showOption.xAxis[0].data.push(key)
-              this.showOption.series[0].data.push(value)
-            }
+            // for (let [key, value] of Object.entries(res.result.costWeek)) {
+            //   this.costOption.xAxis[0].data.push(key)
+            //   this.costOption.series[0].data.push(value)
+            // }
+            // for (let [key, value] of Object.entries(res.result.clickWeek)) {
+            //   this.clickOption.xAxis[0].data.push(key)
+            //   this.clickOption.series[0].data.push(value)
+            // }
+            // for (let [key, value] of Object.entries(res.result.showNumWeek)) {
+            //   this.showOption.xAxis[0].data.push(key)
+            //   this.showOption.series[0].data.push(value)
+            // }
 
-            this.getEchartData('topChart', this.topOption)
-            this.getEchartData('costChart', this.costOption)
-            this.getEchartData('clickChart', this.clickOption)
-            this.getEchartData('showChart', this.showOption)
+            // this.getEchartData('topChart', this.topOption)
+            // this.getEchartData('costChart', this.costOption)
+            // this.getEchartData('clickChart', this.clickOption)
+            // this.getEchartData('showChart', this.showOption)
             
           }
         })
@@ -196,26 +203,39 @@ export default {
 <style lang="scss" scoped>
 .accountReport {
   .optionLine {
-    
+    padding: 0  15px;
     position: relative;
     margin-top: 20px;
     margin-bottom: 15px;
     // border: 1px solid #ccc;
-    .optItem{
-      display: inline-block;
-      margin-left: 15px;
-        span {
-        display: inline-block;
-        padding: 0 3px;
+    
+    .optionTow{
+      margin-top: 15px;
+      position: relative;
+        .optItem{
+          display: inline-block;
+          margin-right: 15px;
+            span {
+            display: inline-block;
+            padding: 0 3px;
+            }
         }
     }
-    
 
     .btn {
       position: absolute;
-      right: 10px;
+      right: 0px;
       top: 0px;
+      .mybtn{
+        margin-left: 10px;
+      }
     }
   }
+  .show{
+    background-color: #fff;
+    padding: 15px 15px;
+    
+  }
+ 
 }
 </style>

+ 1 - 1
src/views/modules/Statistics/newHome.vue

@@ -115,7 +115,7 @@
         <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart"></div>
         <a-button class="duibi" @click="comparehandle" type='default' >对比</a-button>
         <div class="time"  @click="opendate">
-            <DatePicker :openOptions='openOptions'/>
+            <DatePicker :openOptions='openOptions' :left='0' />
         </div>
     </div>