Sfoglia il codice sorgente

Merge branch 'master' of http://39.106.184.70:3000/ctop/adsp-vue

zhuxinbo 5 anni fa
parent
commit
910f6b0b60

+ 169 - 130
src/components/DatePicker.vue

@@ -1,148 +1,187 @@
 <template>
-<!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
+  <!-- 组件使用时 需要传入属性 openOptions:true|false 控制是否打开
     left :string|0  left为侧边的按钮的定位 0 表示不改变 或者传入字符串 如-100px 表示css中left:-100px
- -->
-    <div class="datePicker">
-        <a-range-picker
-            v-model="dateValue"
-            style="width:250px;height:150px"
-            :open='openOptions'
-             :disabled-date="disabledDate"
-             :openChange='openChange'
-            @change="onChange" />
-        <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 class="datePicker" v-clickoutside="handleClose">
+    <a-range-picker
+      v-model="dateValue"
+      style="width:250px;height:150px"
+      :open="openOptions"
+      :disabled-date="disabledDate"
+      :openChange="openChange"
+      @change="onChange"
+    />
+    <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>
 </template>
 
 
 <script>
-import moment from 'moment';
-let pickOptions=[
-    {
-        title:'今天',
-        key:'1',
-        value:1,
-        dateValue:[moment(),moment()]
-        
-    },
-    {
-        title:'昨天',
-        key:'2',
-        value:2,
-        dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
-        
-    },
-    {
-        title:'一周',
-        key:'3',
-        value:3,
-        dateValue:[moment().subtract(7,'days'),moment().subtract(1,'days')]
-        
-    },
-    {
-        title:'一个月',
-        key:'5',
-        value:5,
-        dateValue:[moment().subtract(1,'days').subtract(1,'months'),moment().subtract(1,'days')]
-        
-    },
-    {
-        title:'三个月',
-        key:'6',
-        value:6,
-        dateValue:[moment().subtract(1,'days').subtract(3,'months'),moment().subtract(1,'days')]
-        
+const clickoutside = {
+  // 初始化指令
+  bind(el, binding, vnode) {
+    function documentHandler(e) {
+      // 这里判断点击的元素是否是本身,是本身,则返回
+      if (el.contains(e.target)) {
+        return false
+      }
+      // 判断指令中是否绑定了函数
+      if (binding.expression) {
+        // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
+        binding.value(e)
+      }
+    }
+    // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('click', documentHandler)
+  },
+  update() {},
+  unbind(el, binding) {
+    // 解除事件监听
+    document.removeEventListener('click', el.__vueClickOutside__)
+    delete el.__vueClickOutside__
+  }
+}
+import moment from 'moment'
+let pickOptions = [
+  {
+    title: '今天',
+    key: '1',
+    value: 1,
+    dateValue: [moment(), moment()]
+  },
+  {
+    title: '昨天',
+    key: '2',
+    value: 2,
+    dateValue: [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
+  },
+  {
+    title: '一周',
+    key: '3',
+    value: 3,
+    dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
+  },
+  {
+    title: '一个月',
+    key: '5',
+    value: 5,
+    dateValue: [
+      moment()
+        .subtract(1, 'days')
+        .subtract(1, 'months'),
+      moment().subtract(1, 'days')
+    ]
+  },
+  {
+    title: '三个月',
+    key: '6',
+    value: 6,
+    dateValue: [
+      moment()
+        .subtract(1, 'days')
+        .subtract(3, 'months'),
+      moment().subtract(1, 'days')
+    ]
+  },
+  {
+    title: '六个月',
+    key: '7',
+    value: 7,
+    dateValue: [
+      moment()
+        .subtract(1, 'days')
+        .subtract(6, 'months'),
+      moment().subtract(1, 'days')
+    ]
+  },
+  {
+    title: '一年',
+    key: '8',
+    value: 8,
+    dateValue: [
+      moment()
+        .subtract(1, 'days')
+        .subtract(1, 'years'),
+      moment().subtract(1, 'days')
+    ]
+  }
+]
+
+export default {
+  props: ['openOptions', 'left'],
+  data() {
+    return {
+      moment,
+      dateValue: [],
+      type: 0,
+      pickOptions
+      // pickOptions:JSON.parse(JSON.stringify(pickOptions))
+    }
+  },
+  directives: { clickoutside },
+  methods: {
+    //日期改变事件
+    onChange(date, dateString) {
+      this.dateValue = date
+      // console.log(this.dateValue)
+      if (dateString.length == 2) {
+        this.$parent.opendate()
+        this.$parent.type = 9
+        this.$parent.dateValue = date
+      }
     },
-    {
-        title:'六个月',
-        key:'7',
-        value:7,
-        dateValue:[moment().subtract(1,'days').subtract(6,'months'),moment().subtract(1,'days')]
-        
+    //侧边的按钮点击事件
+    changeDate(val) {
+      this.type = val.value
+      this.dateValue = val.dateValue
+      //  console.log(this.dateValue)
+      this.$parent.type = val.value
+      this.$parent.dateValue = val.dateValue
     },
-    {
-        title:'一年',
-        key:'8',
-        value:8,
-        dateValue:[moment().subtract(1,'days').subtract(1,'years'),moment().subtract(1,'days')]
+    handleClose() {
+      this.$parent.opendate()
     },
-]
-
-    export default {
-        props:['openOptions','left'],
-        data() {
-            return {
-                moment,
-                dateValue:[],
-                type:0,
-                pickOptions
-                // pickOptions:JSON.parse(JSON.stringify(pickOptions))
-            }
-        },
-        
-        methods: {
-            //日期改变事件
-            onChange(date,dateString){
-                this.dateValue=date;
-                // console.log(this.dateValue)
-                if(dateString.length==2){
-                    this.$parent.opendate();
-                    this.$parent.type=9
-                    this.$parent.dateValue=date
-                };
-
-            },
-            //侧边的按钮点击事件
-            changeDate(val){
-                this.type=val.value
-                this.dateValue=val.dateValue;
-                //  console.log(this.dateValue)
-                this.$parent.type=val.value
-                this.$parent.dateValue=val.dateValue
-            },
-            
-            disabledDate(current) {
-            // console.log(current)
-
-                return current && current > moment().subtract(1, 'day')
-            },
-            openChange(open){
-                // console.log(open)
-            },
+    disabledDate(current) {
+      // console.log(current)
 
-        },
-        mounted() {
-            this.dateValue=[moment(),moment()]
-            if(this.left){
-                this.$refs.pickOptions.style.left=this.left
-            }
-            
-            // console.log(this.$refs.pickOptions.style.left)
-        },
+      return current && current > moment().subtract(1, 'day')
+    },
+    openChange(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>
 
 <style lang="scss" scoped>
-.datePicker{
-    position: relative;
-    .pickOptions{
-        width: 100px;
-        background-color: #FFF;
-        height: 302px;
-        position: absolute;
-        top: -2px;
-        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;
-            box-sizing: border-box;
-            
-        }
+.datePicker {
+  position: relative;
+  .pickOptions {
+    width: 100px;
+    background-color: #fff;
+    height: 302px;
+    position: absolute;
+    top: -2px;
+    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;
+      box-sizing: border-box;
     }
+  }
 }
 </style>

+ 14 - 13
src/views/modules/Statistics/CompareData.vue

@@ -41,10 +41,10 @@
               <span v-if="(costcompare.next-costcompare.prev)/costcompare.prev">{{(costcompare.next-costcompare.prev)/costcompare.prev| toPercentage}}</span> 
               <span v-else>{{'-'}}</span>
                 <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="(costcompare.next-costcompare.prev)/costcompare.prev >0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
             </span>
             
             </p>
@@ -62,10 +62,10 @@
                 <span v-if="(clickcompare.next-clickcompare.prev)/clickcompare.prev">{{(clickcompare.next-clickcompare.prev)/clickcompare.prev| toPercentage}}</span>
                 <span v-else>{{'-'}}</span>
                  <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="(clickcompare.next-clickcompare.prev)/clickcompare.prev >0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
                 </span>
                
             </p>
@@ -83,10 +83,10 @@
               <span v-if="(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev">{{(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev| toPercentage}}</span> 
               <span v-else>{{'-'}}</span>
                 <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="(showNumcompare.next-showNumcompare.prev)/showNumcompare.prev>0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
             </span>
             
               </p>
@@ -663,12 +663,13 @@ export default {
   position: relative;
   top: 0px;
   left: 0px;
+  margin-bottom: 10px;
   .selectDate {
     margin-left: 2rem;
   }
   .searchBtn {
     position: absolute;
-    top: 5px;
+   
     right: 0;
   }
 }
@@ -693,34 +694,34 @@ export default {
       padding: 15px 15px 5px;
       margin-bottom: 0;
       span{
-          font-weight: 500;
+          font-weight: 550;
           font-size: 16px;
           margin-left: 15px;
       }
       .huanbi{
-          font-weight: 500;
+          font-weight: 550;
           font-size: 16px;
           margin-left: 0;
           position: relative;
           display: inline-block;
           padding: 0 15px  0;
       }
-      .greenIcon {
+      .redIcon {
       width: 0;
       height: 0;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-bottom: 8px solid green;
+      border-bottom: 8px solid red;
       position: absolute;
       top: 40%;
       right: 0;
     }
-    .redIcon {
+    .greenIcon {
       width: 0;
       height: 0;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-top: 8px solid red;
+      border-top: 8px solid green;
       position: absolute;
       top: 40%;
       right: 0;

+ 16 - 1
src/views/modules/Statistics/accountReport.vue

@@ -36,7 +36,22 @@
       
     </div>
     <div class="show">
-        
+        <a-row :gutter="16">
+          <a-col :sm="24" :md="12" :xl="6" :xxl="6" class="topBox">
+            <div class="showBox">
+              <div class="title">
+                <span>总消耗</span>
+                <a-tooltip>
+                  <template slot="title">点之前所有数据对比</template>
+                  <span class="icon">
+                    <a-icon type="exclamation-circle" />
+                  </span>
+                </a-tooltip>
+              </div>
+              <span>¥ <span></span></span>
+            </div>
+          </a-col>
+        </a-row>
         
     </div>
   </div>

+ 1 - 1
src/views/modules/Statistics/chuanshanjia/realTimeData.vue

@@ -328,7 +328,7 @@ export default {
                this.option.series[4].data.push(item[this.dateStr[1]]);
             }
         })
-        
+        this.getEchartData()
         console.log(this.option.series)
     },
     HttpPost(){

+ 35 - 33
src/views/modules/Statistics/newHome.vue

@@ -31,15 +31,15 @@
             </div>
             <div id="costChart" style="width:100%;height:70px" ref="costChart"></div>
             <div class="footerInfo">
-              周
+              周
               <span class="num">
                 <span v-if="cost.weekCostSumLink">{{cost.weekCostSumLink|toPercentage}}</span>
                 <span v-else>{{'-'}}</span>
                 <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="cost.weekCostSumLink>0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
               </span>
             </div>
           </div>
@@ -58,16 +58,16 @@
             </div>
             <div id="clickChart" style="width:100%;height:70px" ref="clickChart"></div>
             <div class="footerInfo">
-              周
+              周
               <span class="num">
                 <span v-if="click.weekClickSumLink">{{click.weekClickSumLink|toPercentage}}</span>
                 <span v-else>{{'-'}}</span>
                 
                 <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="click.weekClickSumLink>0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
               </span>
             </div>
           </div>
@@ -86,16 +86,16 @@
             </div>
             <div id="showChart" style="width:100%;height:70px" ref="showChart"></div>
             <div class="footerInfo">
-              周
+              周
               <span class="num">
                 <span v-if="showNum.weekShowNumSumLink">{{showNum.weekShowNumSumLink | toPercentage}}</span>
                 <span v-else>{{'-'}}</span>
                 
                 <span
-                  class="greenIcon"
+                  class="redIcon"
                   v-if="showNum.weekShowNumSumLink>0"
                 ></span>
-                <span class="redIcon" v-else></span>
+                <span class="greenIcon" v-else></span>
               </span>
             </div>
           </div>
@@ -114,7 +114,7 @@
         </a-tabs>
         <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">
+        <div class="time"  @click="opendate" >
             <DatePicker :openOptions='openOptions' :left='0' />
         </div>
     </div>
@@ -441,26 +441,28 @@ export default {
           if (res.success) {
             this.loading = false
 
-            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)
+              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.costWeek.forEach((ele)=>{
+                this.costOption.xAxis[0].data.push(ele.statDate)
+                this.costOption.series[0].data.push(ele.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)
-            }
+            res.result.clickWeek.forEach((ele)=>{
+                this.clickOption.xAxis[0].data.push(ele.statDate)
+                this.clickOption.series[0].data.push(ele.click)
+            })
+            res.result.showNumWeek.forEach((ele)=>{
+                this.showOption.xAxis[0].data.push(ele.statDate)
+              this.showOption.series[0].data.push(ele.showNum)
+            })
+           
+            
 
             this.getEchartData('topChart', this.topOption)
             this.getEchartData('costChart', this.costOption)
@@ -829,22 +831,22 @@ export default {
       position: relative;
       font-weight: 500;
     }
-    .greenIcon {
+    .redIcon {
       width: 0;
       height: 0;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-bottom: 8px solid green;
+      border-bottom: 8px solid red;
       position: absolute;
       top: 40%;
       right: 0;
     }
-    .redIcon {
+    .greenIcon {
       width: 0;
       height: 0;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-top: 8px solid red;
+      border-top: 8px solid green;
       position: absolute;
       top: 40%;
       right: 0;