shujudaping/src/views/demo02.vue

<template>
  <!-- <Resize> -->
  <div class="boxx">
    <!-- 标题 -->
    <div class="title">jolijoli实时数据大屏</div>
    <div class="box">
      <!-- 图表 -->
      <div class="pic">
        <!-- 左边部分 -->
        <div class="left">
          <div class="left-top">
            <el-card
              ><div class="btn">
                <el-button
                  :class="{ bgc: activeClass == 0 }"
                  size="small"
                  type="info"
                  @click="yesterday(0)"
                  :disabled="activeClass == 0"
                  >昨天</el-button
                >
                <el-button
                  size="small"
                  type="info"
                  @click="thisWeek(1)"
                  :class="{ bgc: activeClass == 1 }"
                  :disabled="activeClass == 1"
                  >本周</el-button
                >
                <el-button
                  size="small"
                  type="info"
                  @click="thisMonth(2)"
                  :class="{ bgc: activeClass == 2 }"
                  :disabled="activeClass == 2"
                  >本月</el-button
                >
                <!-- 选择店铺 -->
                <div class="selectStore">
                  <!-- 日期选择 -->
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    @change="selectTime"
                  >
                  </el-date-picker>
                  <!-- 选择店铺 -->
                  <div>
                    <el-dropdown class="Store" @command="selectStore">
                      <el-button type="info" size="small">
                        {{ store
                        }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          :command="item.store_name"
                          v-for="(item, index) in storeList"
                          :key="index"
                          >{{ item.store_name }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                    <el-button
                      :class="{ refresh, bgc: istrue }"
                      size="small"
                      type="info"
                      @click="refresh"
                      :disabled="istrue"
                      >{{ button }}</el-button
                    >
                  </div>
                </div>
              </div></el-card
            >
          </div>
          <div class="left-center1">
            <el-card
              ><div><manage v-if="listData" :listData="listData"></manage></div
            ></el-card>
          </div>
          <div class="left-center2">
            <el-card
              ><project-data v-if="listData" :listData="listData"></project-data
            ></el-card>
          </div>
          <!-- <div class="left-bottom"><el-card></el-card></div> -->
        </div>
        <!-- 中间部分 -->
        <div class="center">
          <div class="center-top">
            <el-card
              ><programAmount
                v-if="listData"
                :listData="listData"
              ></programAmount
            ></el-card>
          </div>
          <div class="center-center">
            <el-card
              ><BprogramAmount
                v-if="listData"
                :listData="listData"
              ></BprogramAmount
            ></el-card>
          </div>
          <div class="center-bottom">
            <el-card
              ><div>
                <product-ratio
                  v-if="listData"
                  :listData="listData.product_ratio"
                ></product-ratio
                ><project-ratio
                  v-if="listData"
                  :listData="listData.project_proportion"
                ></project-ratio></div
            ></el-card>
          </div>
        </div>
        <!-- 右边部分 -->
        <div class="right">
          <div class="right-top">
            <el-card
              ><recharge-data
                v-if="listData"
                :listData="listData"
              ></recharge-data
            ></el-card>
          </div>
          <div class="right-center">
            <el-card
              ><cardExpend v-if="listData" :listData="listData"></cardExpend
            ></el-card>
          </div>
          <div class="right-bottom">
            <el-card>
              <productData v-if="listData" :listData="listData"></productData
            ></el-card>
          </div>
        </div>
      </div>
    </div>
    <!-- </Resize> -->
  </div>
</template>

<script>
import Resize from "../util/Resize.vue";
import manage from "./manage/manage.vue";
import projectData from "./projectData/projectData.vue";
import programAmount from "./programAmount/programAmount.vue";
import projectRatio from "./projectRatio/projectRatio.vue";
import productRatio from "./productRatio/productRatio.vue";
import rechargeData from "./rechargeData/rechargeData.vue";
import cardExpend from "./cardExpend/cardExpend.vue";
import productData from "./productData/productData.vue";
import BprogramAmount from "./BprogramAmount/BprogramAmount.vue";
import { getStoreList, getData } from "../api/index"; //获取店铺列表和数据大屏数据
export default {
  components: {
    Resize,
    manage,
    projectData,
    programAmount,
    projectRatio,
    productRatio,
    rechargeData,
    cardExpend,
    productData,
    BprogramAmount
  },
  data() {
    return {
      store: "全部店铺",
      storeList: "", //店铺列表
      storeId: "", //当前店铺id
      listData: "", //项目总数据
      flag: false, //获取数据开关阀
      start_time: "", //开始时间
      end_time: "", //结束时间
      value1: [new Date(), new Date()], //选择日期当前时间
      button: "刷新", //按钮提交文案
      istrue: false, //刷新禁用
      refreshInfo: "秒",
      count: 10, //点击刷新倒计时
      activeClass: 3, //按钮动态类
    };
  },
  methods: {
    // 选择店铺
    async selectStore(e) {
      this.store = e;
      this.storeList.filter((item) => {
        if (item.store_name == e) {
          this.storeId = item.id;
        }
      });
      this.getListData();
    },
    // 选择昨天
    yesterday(e) {
      this.activeClass = e;
      var startTime = this.getDay1(-1, "-") + " 00:00:00"; //    -1 代表前一天，-2前两天...
      var endTime = this.getDay1(-1, "-") + " 23:59:59"; //    -1 代表前一天，-2前两天...
      this.start_time = Date.parse(startTime) / 1000;
      this.end_time = Date.parse(endTime) / 1000;
      var startTime1 = this.getDay1(-1, "-");
      var endTime1 = this.getDay1(-1, "-");
      this.$set(this.value1, 0, startTime1);
      this.$set(this.value1, 1, endTime1);
      this.getListData();
    },
    //本周
    thisWeek(e) {
      this.activeClass = e;
      var now = new Date();
      var nowDayOfWeek = now.getDay() == 0 ? 6 : now.getDay() - 1;
      var startTime =
        this.getDateStr(
          new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000)
        ) + " 00:00:00";
      var endTime = this.getDateStr(now) + " 23:59:59";
      this.start_time = Date.parse(startTime) / 1000;
      this.end_time = Date.parse(endTime) / 1000;
      var startTime1 = this.getDateStr(
        new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000)
      );
      var endTime1 = this.getDateStr(now);
      this.$set(this.value1, 0, startTime1);
      this.$set(this.value1, 1, endTime1);
      this.getListData();
    },
    // 本月
    thisMonth(e) {
      this.activeClass = e;
      var now = new Date();
      var nowDay = now.getDate() - 1;
      var startTime =
        this.getDateStr(
          new Date(now.getTime() - nowDay * 24 * 60 * 60 * 1000)
        ) + " 00:00:00";
      var endTime = this.getDateStr(now) + " 23:59:59";
      this.start_time = Date.parse(startTime) / 1000;
      this.end_time = Date.parse(endTime) / 1000;
      var startTime1 = this.getDateStr(
        new Date(now.getTime() - nowDay * 24 * 60 * 60 * 1000)
      );
      var endTime1 = this.getDateStr(now);
      this.$set(this.value1, 0, startTime1);
      this.$set(this.value1, 1, endTime1);
      this.getListData();
    },
    // 封装获取时间
    getDateStr(now) {
      var year = now.getFullYear(); // 年
      var month = now.getMonth() + 1; // 月
      var day = now.getDate(); // 日
      if (day < 10) {
        day = "0" + day;
      }

      if (month < 10) {
        month = "0" + month;
      }
      return year + "-" + month + "-" + day;
    },
    // 封装获取昨天时间
    getDay1(num, str) {
      var today = new Date();
      var nowTime = today.getTime();
      var ms = 24 * 3600 * 1000 * num;
      today.setTime(parseInt(nowTime + ms));
      var oYear = today.getFullYear();
      var oMoth = (today.getMonth() + 1).toString();
      if (oMoth.length <= 1) oMoth = "0" + oMoth;
      var oDay = today.getDate().toString();
      if (oDay.length <= 1) oDay = "0" + oDay;
      return oYear + str + oMoth + str + oDay;
    },
    // 获取图表数据
    async getListData() {
      let res = await getData({
        store_id: this.storeId || "",
        start_time: this.start_time,
        end_time: this.end_time,
      });
      console.log(res);
      this.listData = res.data.data;
    },
    // 获取店铺列表
    async getStoreList() {
      let res = await getStoreList();
      let allStore = { id: "", store_name: "全部店铺" };
      res.data.data.unshift(allStore);
      this.storeList = res.data.data;
    },
    // 选择时间
    selectTime(e) {
      var startTime = this.getDateStr(e[0]) + " 00:00:00";
      var endTime = this.getDateStr(e[1]) + " 23:59:59";
      var start_time = Date.parse(startTime) / 1000;
      var end_time = Date.parse(endTime) / 1000;
      this.start_time = start_time;
      this.end_time = end_time;
      console.log(start_time, end_time);
      this.getListData();
    },
    // 刷新页面
    refresh() {
      this.getListData();
      this.istrue = true;
      let interval = setInterval(() => {
        this.count--;
        this.button = this.count + this.refreshInfo;
        if (this.count == 0) {
          clearInterval(interval);
          this.istrue = false;
          this.count = 10;
          this.button = "刷新";
        }
      }, 1000);
    },
  },
  async created() {
    // 获取店铺列表
    this.getStoreList();
    // 获取当天时间
    var now = new Date();
    var endTime = this.getDateStr(now) + " 23:59:59";
    var startTime = this.getDateStr(now) + " 00:00:00";
    var start_time = Date.parse(startTime) / 1000;
    var end_time = Date.parse(endTime) / 1000;
    this.start_time = start_time;
    this.end_time = end_time;
    //   获取当天所有店铺数据
    let res = await getData({
      store_id: "",
      start_time: start_time,
      end_time: end_time,
    });
    this.listData = res.data.data;
    this.flag = true;
  },
};
</script>

<style scoped lang='less'>
.title {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  background-color: #f0f0f0;
  color: #fa7d22;
  height: 60px;
  line-height: 60px;
  width: 100%;
}
.box {
  width: 100%;
  height: 93%;
  background-color: #f0f0f0;
  .pic {
    width: 100%;
    height: 87%;
    display: flex;
    .left {
      width: 22%;
      height: 100%;
      margin-right: 15px;
      margin-left: 15px;
      .left-top {
        width: 100%;
        height: 24%;
        .el-card {
          .btn {
            button.el-button.el-button--info.el-button--small {
              background-color: #fa7d22;
              border: #fa7d22;
            }
            .selectStore {
              margin-top: 14px;
              /deep/.el-range-editor--mini.el-input__inner {
                height: 30px;
                width: 290px;
                border: 1px solid #fa7d22;
              }
              .Store {
                margin-top: 14px;
                margin-right: 14px;
              }
              .refresh {
                margin-top: 14px;
              }
            }
          }
        }
      }
      .left-center1 {
        width: 100%;
        height: 43%;
        margin-top: 15px;
      }
      .left-center2 {
        width: 100%;
        height: 43%;
        margin-top: 15px;
      }
      //   .left-bottom {
      //     width: 100%;
      //     height: 25%;
      //     margin-top: 15px;
      //   }
    }
    .center {
      width: 50%;
      height: 100%;
      margin-right: 15px;
      .center-top {
        height: 38%;
        width: 100%;
      }
      .center-center {
        margin-top: 15px;
        height: 33%;
        width: 100%;
      }
      .center-bottom {
        height: 39%;
        width: 100%;
        margin-top: 15px;
        .el-card {
          div {
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
    .right {
      width: 28%;
      height: 100%;
      margin-right: 15px;
      .right-top {
        width: 100%;
        height: 39%;
      }
      .right-center {
        height: 39%;
        width: 100%;
        margin-top: 15px;
      }
      .right-bottom {
        height: 32%;
        width: 100%;
        margin-top: 15px;
      }
    }
  }
}
.el-card {
  width: 100%;
  height: 100%;
}
// 点击选中后背景颜色
.bgc {
  background-color: #9fa0a6 !important;
}
.boxx {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>