up

src/views/dashboard/components/PanelGroup copy.vue

@@ -0,0 +1,252 @@
+<template>
+
+
+
+  <el-row class="panel-group">
+
+    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
+      style="background: #FDC830;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            预约参观人次
+          </div>
+          <div class="card-panel-text">
+            <p>总人数：{{totaldata.visit_total.total}}</p>
+            <p>今 日：{{totaldata.visit_total.today}}</p>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
+      style="background: #FFB75E;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px">
+            入场参观人次
+          </div>
+          <div class="card-panel-text">
+            <p>总人数：{{totaldata.visit_enter.total}}</p>
+            <p>今 日：{{totaldata.visit_enter.today}}</p>
+            <p>当日核销比：{{totaldata.visit_enter.per}}</p>
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
+      style="background: #ffe259;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" @click="handleRoute('tool')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            预约活动人次
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            <p>总人数：{{totaldata.activity_total.total}}</p>
+            <p>今 日：{{totaldata.activity_total.today}}</p>
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
+      style="background: #fe8c00;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" @click="handleRoute('user')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            预约活动人次
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            <p>总人数：{{totaldata.activity_enter.total}}</p>
+            <p>今 日：{{totaldata.activity_enter.today}}</p>
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
+        </div>
+
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import CountTo from 'vue-count-to'
+
+  export default {
+    props: {
+      countsData: {
+        type: Object
+      },
+      totaldata: {
+        type: Object,
+        default: {
+          "visit_total": {
+            "total": 0,
+            "today": 0
+          },
+          "visit_enter": {
+            "total": 0,
+            "today": 0,
+            "per": 0
+          },
+          "activity_total": {
+            "total": 0,
+            "today": 0
+          },
+          "activity_enter": {
+            "total": 0,
+            "today": 0
+          }
+        }
+      }
+    },
+    components: {
+      CountTo
+    },
+    methods: {
+      handleRoute(type) {
+        this.$emit('handleRoute', type)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .panel-group {
+    // margin-top: 18px;
+    margin-left: -2% !important;
+    margin-right: -3% !important;
+
+    .card-panel-col {
+      margin: 0 2%;
+
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 130px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      text-align: center;
+      // background: #fff;
+      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      // border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        // .icon-people {
+        //   background: #40c9c6;
+        // }
+
+        // .icon-message {
+        //   background: #36a3f7;
+        // }
+
+        // .icon-money {
+        //   background: #f4516c;
+        // }
+
+        // .icon-shopping {
+        //   background: #34bfa3
+        // }
+      }
+
+      .icon-people {
+        color: #fff;
+      }
+
+      .icon-message {
+        color: #fff;
+      }
+
+      .icon-money {
+        color: #fff;
+      }
+
+      .icon-shopping {
+        color: #fff
+      }
+
+      .card-panel-icon-wrapper {
+        float: right;
+        margin: 22px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 42px;
+      }
+
+      .card-panel-description {
+        // float: right;
+        font-weight: bold;
+        margin: 16px 12px;
+
+        .card-panel-text {
+          line-height: 25px;
+          color: rgb(255, 255, 255);
+          font-size: 26px;
+          margin-bottom: 20px;
+          width: 70%;
+          text-align: left;
+        }
+
+        p {
+          text-align: left;
+          font-size: 19px;
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
+</style>

src/views/dashboard/components/PanelGroup.vue

@@ -1,91 +1,101 @@
-<template>
-
-
-
-  <el-row class="panel-group">
-
-    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
-      style="background: #FDC830;  /* fallback for old browsers */
-background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
-background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
-      <div class="card-panel">
-        <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+<template>
+  <div>
+    <div class="boxlist">
+      <div class="box box1">
+        <div class="boxtitle">
+          预约参观人数
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text" style="font-family: '微软雅黑'">
-            预约参观人次
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.visit_total.total" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">总人数</div>
           </div>
-          <div class="card-panel-text">
-            <p>总人数：{{totaldata.visit_total.total}}</p>
-            <p>今 日：{{totaldata.visit_total.today}}</p>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.visit_total.today" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">今日</div>
           </div>
         </div>
+        <div class="boxfooter"></div>
+        <img src="../../../assets/imgs/index_icon_1.png" class="index_icon" />
+        <img src="../../../assets/imgs/index_icon_bg_1.png" class="index_bg" />
       </div>
-    </el-col>
-    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
-      style="background: #FFB75E;  /* fallback for old browsers */
-background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);  /* Chrome 10-25, Safari 5.1-6 */
-background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
-      <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+      <div class="box box2">
+        <div class="boxtitle">
+          入场参观人次
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px">
-            入场参观人次
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.visit_enter.total" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">总人数</div>
           </div>
-          <div class="card-panel-text">
-            <p>总人数：{{totaldata.visit_enter.total}}</p>
-            <p>今 日：{{totaldata.visit_enter.today}}</p>
-            <p>当日核销比：{{totaldata.visit_enter.per}}</p>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+
+              <count-to :start-val="0" :end-val="totaldata.visit_enter.today" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">今日</div>
           </div>
-          <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
         </div>
+        <div class="boxfooter">当日核销比：{{totaldata.visit_enter.per}}</div>
+        <img src="../../../assets/imgs/index_icon_2.png" class="index_icon" />
+        <img src="../../../assets/imgs/index_icon_bg_1-21.png" class="index_bg" />
       </div>
-    </el-col>
-    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
-      style="background: #ffe259;  /* fallback for old browsers */
-background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
-background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
-      <div class="card-panel" @click="handleRoute('tool')">
-        <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+      <div class="box box3">
+        <div class="boxtitle">
+          预约活动人次
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text" style="font-family: '微软雅黑'">
-            预约活动人次
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.activity_total.total" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">总人数</div>
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            <p>总人数：{{totaldata.activity_total.total}}</p>
-            <p>今 日：{{totaldata.activity_total.today}}</p>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.activity_total.today" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">今日</div>
           </div>
-          <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
         </div>
+        <div class="boxfooter"></div>
+        <img src="../../../assets/imgs/index_icon_3.png" class="index_icon" />
+        <img src="../../../assets/imgs/index_icon_bg_3.png" class="index_bg" />
       </div>
-    </el-col>
-    <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
-      style="background: #fe8c00;  /* fallback for old browsers */
-background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
-background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
-      <div class="card-panel" @click="handleRoute('user')">
-        <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+      <div class="box box4">
+        <div class="boxtitle">
+          参加活动人次
         </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text" style="font-family: '微软雅黑'">
-            预约活动人次
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.activity_enter.total" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">总人数</div>
           </div>
-          <div class="card-panel-text" style="color: #fff;font-size:16px">
-            <p>总人数：{{totaldata.activity_enter.total}}</p>
-            <p>今 日：{{totaldata.activity_enter.today}}</p>
+          <div class="boxline"></div>
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              <count-to :start-val="0" :end-val="totaldata.activity_enter.today" :duration="3600" />
+            </div>
+            <div class="boxcontentitem-small">今日</div>
           </div>
-          <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
         </div>
-
+        <div class="boxfooter">当日核销比：{{totaldata.activity_enter.per}}</div>
+        <img src="../../../assets/imgs/index_icon_4.png" class="index_icon" />
+        <img src="../../../assets/imgs/index_icon_bg_4.png" class="index_bg" />
       </div>
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -114,7 +124,8 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
           },
           "activity_enter": {
             "total": 0,
-            "today": 0
+            "today": 0,
+            "per": 0
           }
         }
       }
@@ -131,6 +142,104 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
 </script>
 
 <style lang="scss" scoped>
+  .boxlist {
+    display: flex;
+  }
+
+  .index_icon {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 3.5625rem;
+  }
+
+  .index_bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .box {
+    position: relative;
+    width: 24%;
+    margin-left: 0.5%;
+    margin-right: 0.5%;
+    margin-bottom: 2.375rem;
+    box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 1.25rem;
+    opacity: 0.8;
+
+    .boxfooter {
+      font-size: 1.0625rem;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+
+    .boxtitle {
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+
+    .boxcontent {
+      display: flex;
+      //justify-content: space-around;
+      align-items: center;
+
+      .boxline {
+        width: 1px;
+        height: 4.0625rem;
+        background: #FFFFFF;
+        opacity: 0.3;
+        margin-left: 2.0625rem;
+        margin-right: 2.0625rem;
+      }
+
+      .boxcontentitem {
+        display: flex;
+        flex-direction: column;
+        font-size: 19px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        text-align: center;
+        min-width: 30%;
+
+        .boxcontentitem-big {
+          font-size: 2.625rem;
+          font-family: Arial;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+
+
+    }
+  }
+
+  .box1 {
+    background: linear-gradient(134deg, #D1AC7B, #DFC69C);
+  }
+
+  .box2 {
+    background: linear-gradient(134deg, #9193BC, #B7B9D4);
+  }
+
+  .box3 {
+
+    background: linear-gradient(-55deg, #F6A868, #F4C59E);
+  }
+
+  .box4 {
+
+    background: linear-gradient(-55deg, #64A48E, #9ECABB);
+  }
+
   .panel-group {
     // margin-top: 18px;
     margin-left: -2% !important;

src/views/dashboard/index.vue

@@ -170,6 +170,8 @@
         totalRpt().then(res => {
           res.visit_enter.per = ((res.visit_enter.today / (res.visit_total.today == 0 ? 1 : res.visit_total
             .today)) * 100).toFixed(2) + "%"
+          res.activity_enter.per = ((res.activity_enter.today / (res.activity_total.today == 0 ? 1 : res.activity_total
+            .today)) * 100).toFixed(2) + "%"
           this.totaldata = res;
         })
 

src/views/report/visit/sexRpt.vue

@@ -7,18 +7,14 @@
           <div slot="content"></div>
           <slot>
             <div>
-             <el-date-picker
-                   v-model="daterange"
-                   type="daterange"
-                   range-separator="至"
-                   start-placeholder="开始日期"
-                   end-placeholder="结束日期">
-                 </el-date-picker>
+              <el-date-picker v-model="daterange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" @change="daterangeChange">
+              </el-date-picker>
 
               <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
-              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
-              <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>
-              
+              <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
+              <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>
+
             </div>
           </slot>
         </LxHeader>
@@ -46,8 +42,10 @@
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
-  import PieChart from '../components/PieChart'
-  import { ElMapExportTable } from "table-excel";
+  import PieChart from '../components/PieChart'
+  import {
+    ElMapExportTable
+  } from "table-excel";
   import {
     sexRpt
   } from "@/api/report/visit.js";
@@ -62,38 +60,60 @@
     },
     mounted() {},
     data() {
-      return {
-        daterange:"",
+      return {
+        daterange: "",
         showData: false,
-        searchFields: {},
+        searchFields: {
+          start_date: "",
+          end_date: ""
+        },
         tableData: [],
-        tableHeight: 0,
-        btnText:"数据展示",
-        chartHeight:"",
+        tableHeight: 0,
+        btnText: "数据展示",
+        chartHeight: "",
         rptData: {
           yArr: [],
           radiusArr: "50%"
         }
       }
     },
-    methods: {
-      /** 导出按钮操作 */
-      handleGo(){
-        var data = this.tableData; // 这里面是数据列表
-        const column = [
-          { title: "性别", dataIndex: "sex_name" }, // dataIndex为数据列表中的数据字段
-          { title: "预约人数", dataIndex: "plan_total" },
-          { title: "入场人数", dataIndex: "use_total" },
-          { title: "核销比", dataIndex: "per" },
-        ];
-        const instance = new ElMapExportTable(
-          { column, data },
-          { progress: progress => console.log(progress) }// 进度条回调
-        );
-        instance.download("性别分析报表"); // 导出的文件名
+    methods: {
+      daterangeChange(e) {
+        console.log(e);
+        this.searchFields.start_date = this.$moment(e[0]).format("yyyy-MM-DD");
+        this.searchFields.end_date = this.$moment(e[1]).format("yyyy-MM-DD");
+      },
+      /** 导出按钮操作 */
+      handleGo() {
+        var data = this.tableData; // 这里面是数据列表
+        const column = [{
+            title: "性别",
+            dataIndex: "sex_name"
+          }, // dataIndex为数据列表中的数据字段
+          {
+            title: "预约人数",
+            dataIndex: "plan_total"
+          },
+          {
+            title: "入场人数",
+            dataIndex: "use_total"
+          },
+          {
+            title: "核销比",
+            dataIndex: "per"
+          },
+        ];
+        const instance = new ElMapExportTable({
+            column,
+            data
+          }, {
+            progress: progress => console.log(progress)
+          } // 进度条回调
+        );
+        instance.download("性别分析报表"); // 导出的文件名
       },
       viewPart() {
-        this.showData = !this.showData;
+        this.showData = !this.showData;
         this.btnText = this.showData ? "图表展示" : "数据展示"
       },
       initLoad() {
@@ -103,13 +123,13 @@
         var paginationHeight = 37; //分页的高度
         var topHeight = 50; //页面 头部
         let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
-        that.tableHeight = tableHeight;
-        that.chartHeight = tableHeight+"px";
+        that.tableHeight = tableHeight;
+        that.chartHeight = tableHeight + "px";
       },
       load() {
         // this.showData = true;
         var arr = [];
-        sexRpt().then((res) => {
+        sexRpt(this.searchFields).then((res) => {
           for (var m of res) {
             m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%"