oil-station/fuintAdmin/src/views/shopowner.vue

<template>
  <div class="home-index">
    <el-carousel height="230px">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <div class="bannser">
          <img :src="imagePath+item.productImage" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="b-bs">
      <div class="left-box">
        <div class="h-tt">核心数据</div>
        <div style="display: flex;justify-content: space-between">
          <div class="san-box">
            <div class="r-title">{{ storeTotal.allAmount || 0 }}</div>
            <div class="r-size">总交易金额（元）</div>
          </div>
          <div class="san-box" style="background: #fc6464">
            <div class="r-title">{{ storeTotal.allNum || 0 }}</div>
            <div class="r-size">总交易笔数</div>
          </div>
          <div class="san-box" style="background: #fcb12c">
            <div class="r-title">{{ storeTotal.unitPrice || 0 }}</div>
            <div class="r-size">笔均单价（元/单）</div>
          </div>
          <div class="san-box" style="background: #5bc557;">
            <div class="r-title">{{ storeTotal.userBalance || 0 }}</div>
            <div class="r-size">累计会员余额（万元）</div>
          </div>
        </div>

      </div>
      <div class="right-box">
        <div class="title_">
          <div>通知中心</div>
          <div style="font-size: 12px;color: #BBBBBB;cursor: pointer; display: flex;align-items: center"
               @click="goList()">更多 <i class="el-icon-arrow-right"></i></div>
        </div>
        <!--        <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>-->
        <div class="hang_" v-for="(item,index) in noticeList" :key="index">
          【{{ item.notificationType }}】{{ item.templateContent }}
        </div>
        <div class="hang_" v-if="this.noticeList.length==0">暂无通知</div>
      </div>
    </div>
    <div class="b-bs">
      <div class="left-box-t">
        <div class="d-s">
          <div class="h-tt" style="margin-right: 15px">数据看板</div>
          <el-dropdown placement="bottom-start " @command="sjkbStoreAmount">
            <div class="h-anniu" :class="{'q-anniu' : dataTimeShow == false}" @click="dataTimeShow = false ">
              {{ sjkbTitle }} <i
              class="el-icon-arrow-down el-icon--right"></i></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="h-anniu" :class="{'q-anniu' : dataTimeShow == true}" @click="dataTimeShow = true"> 自定义
          </div>
          <div style="margin-right: 40px">
            <el-date-picker
              v-model="value1"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @blur="getStoreAmount">
            </el-date-picker>
          </div>
        </div>
        <div class="d-s" style="margin-top: 15px">
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #333">油品销售金额（元）/交易笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.oilAmount || 0 }}/{{ storeAmount.oilNum || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #333">会员充值金额（元）/充值笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.userRechargeAmount || 0 }}/{{ storeAmount.userRechargeNum || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #333">便利店销售金额（元）/交易笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.minimartAmount || 0 }}/{{ storeAmount.minimartNum || 0 }}</div>
          </div>
          <div class="k-box">
            <div class="d-s" style="font-size: 12px;color: #999999;">
              <div class="sian"></div>
              <div style="color: #333">积分商城销售金额（元）/兑换笔数</div>
            </div>
            <div class="num-size">{{ storeAmount.pointMallAmount || 0 }}/{{ storeAmount.pointMallNum || 0 }}</div>
          </div>
        </div>
        <div class="hui-hang"></div>
        <div class="d-s">
          <div style="position: relative">
            <div class="h-tt" style="position: absolute;top: 0px">数据分析</div>
            <div id="ccc" style="width: 400px;height: 200px; "></div>
          </div>
          <div>
            <div class="d-s" style="justify-content: space-between">
              <div id="cccc" style="width: 400px;height: 200px;"></div>
              <div id="ccct" style="width: 400px;height: 200px;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box-t">
        <div class="h-tt">
          <div>硬件设备</div>
          <el-popover
            placement="top-start"
            title="联系人：某某某"
            width="200"
            trigger="hover"
            content="联系电话：1352415811">
            <img slot="reference" style="width: 28px; height: 28px " src="../assets/images/telindex.png">
          </el-popover>
        </div>
        <div style="height: 90%;overflow: auto;scrollbar-width: none;">
          <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index">
            <div class="r-img">
              <img :src="imagePath + item.image" style="width: 84px;height: 70px">
            </div>
            <div style="font-size: 14px">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="b-bs">
      <div class="left-box-t">
        <div class="d-s" style="margin-bottom: 10px">
          <div class="h-tt" style="margin-right: 15px">油品交易分析</div>
          <el-dropdown placement="bottom-start" @command="editShow">
            <div class="h-anniu" :class="{'q-anniu' : showTimeShow == false}" @click="showTimeShow = false ">
              {{ ypjyTitle }} <i
              class="el-icon-arrow-down el-icon--right"></i></div>
            <el-dropdown-menu slot="dropdown">
              <!--              <el-dropdown-item command="近一周" index="2">近一周</el-dropdown-item>-->
              <!--              <el-dropdown-item command="近一月" index="2">本月</el-dropdown-item>-->
              <!--              <el-dropdown-item command="近一年" index="2">本季度</el-dropdown-item>-->
              <!--              <el-dropdown-item command="近一年" index="2">本年</el-dropdown-item>-->
              <el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="h-anniu" :class="{'q-anniu' : showTimeShow == true}" @click="showTimeShow = true"> 自定义
          </div>
          <div style="margin-right: 40px">
            <el-date-picker
              v-model="showValue"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @blur="getDataShow">
            </el-date-picker>
          </div>
        </div>
        <div id="cccf"
             style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
      </div>
      <div class="right-box-t">
        <div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span>
          <el-dropdown placement="bottom-start" @command="editColor">
            <div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">{{ ygphTitle }} <i
              class="el-icon-arrow-down el-icon--right"></i></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{ item }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="hui-box">
          <div style="width: 10%">排名</div>
          <div>员工姓名</div>
          <div style="width: 25%">会员充值金额</div>
          <div style="width: 25%">油品销售金额</div>
          <div>总销售额</div>
        </div>
        <div style="overflow: auto; scrollbar-width: none; height: 74% ">
          <div class="hang-box" v-for="(item,index) in employeList" :key="index">

            <div style="width: 10%" v-if="index == 0">
              <img src="../assets/images/one_icon.png" style="width: 22px;height: 22px">


            </div>
            <div style="width: 10%" v-if="index == 1">
              <img src="../assets/images/two_icon.png" style="width: 22px;height: 22px">
            </div>
            <div style="width: 10%" v-if="index == 2">
              <img src="../assets/images/three_icon.png" style="width: 22px;height: 22px">
            </div>
            <div style="width: 10%" v-if="index>2">{{ index + 1 }}</div>
            <div>{{ item.realName }}</div>
            <div style="width: 25%">{{ item.cardSum }}</div>
            <div style="width: 25%">{{ item.oilSum }}</div>
            <div>{{ item.totalSum }}</div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom_">
      <div class="d-s">
        <div class="h-tt" style="margin-right: 15px">数据统计</div>
        <el-dropdown placement="bottom-start" @command="editCount">
          <div class="h-anniu" :class="{'q-anniu' : countTimeShow == false}" @click="countTimeShow = false ">
            {{ sjtjTitle }} <i
            class="el-icon-arrow-down el-icon--right"></i></div>
          <el-dropdown-menu slot="dropdown">
            <!--            <el-dropdown-item command="近一周" index="1">近一周</el-dropdown-item>-->
            <!--            <el-dropdown-item command="近一月" index="1">本月</el-dropdown-item>-->
            <!--            <el-dropdown-item command="近一年" index="1">本季度</el-dropdown-item>-->
            <!--            <el-dropdown-item command="近一年" index="1">本年</el-dropdown-item>-->
            <el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{ item }}
            </el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
        <div class="h-anniu" :class="{'q-anniu' : countTimeShow == true}" @click="countTimeShow = true"> 自定义
        </div>
        <div style="margin-right: 40px">
          <el-date-picker
            v-model="countValue"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @blur="getDataCount">
          </el-date-picker>
        </div>
      </div>

      <div id="ctct"
           style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>

    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {selectStoreAmount, storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
import {getListApi} from "@/api/setting/hardware";
import {selectChildByDeptId} from "@/api/system/Site/site";
import {parseTime} from "@/utils/fuint";
import {getBannerListApi} from "@/api/sys/banner";
import {getNotificationlogList} from "@/api/sys/sysNotificationlog";
import {employeeSalesApi} from "@/api/indexStatistics";
import {
  getDataAnalysis,
  getDataBoard,
  getDataCount,
  getDataShow,
  getTotalAmount,
  getOilPercentage,
  getOilAndGoodsPercentage,
  getOilAndGoodsAndVipAndPoints
} from "@/api/allOrder";

export default
{

  props: ["accountId"],
  data() {
    return {
      amountList: [
        // "今日" ,
        // "昨日" ,
        "近一周",
        "本月",
        "本季度",
        "本年"

      ],
      sjkbTitle: "近一周",
      ypjyTitle: "近一周",
      ygphTitle: "近一周",
      sjtjTitle: "近一周",
      xShow: false,
      timeShow: false,
      dataTimeShow: false,
      showTimeShow: false,
      countTimeShow: false,
      form: {},
      timeList: [
        "今日",
        "近一周",
        "近一月",
        "近一年",
      ],

      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: [],
      showValue: [],
      countValue: [],
      value2: [],
      imagePath: process.env.VUE_APP_SERVER_URL,
      queryParams: {},
      // 店铺数量
      storeTotal: {},
      // 店铺金额
      storeAmount: {},
      // banner图列表
      bannerList: {},
      storeList: [],
      hardwareList: [],
      noticeList: [],
      employeList: [],
      dataAnalysisOilNumberList: [],
      dataAnalysisAllList: [],
      dataAnalysisIfOilList: [],
      //数据统计
      dataCount: {},
      //数据展示
      dataShows: {},
    }
  },
  created() {
    let nowDate = new Date();
    let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
    this.value1 = [parseTime(oneWeekAgo), parseTime(nowDate)]
    this.countValue = [parseTime(oneWeekAgo), parseTime(nowDate)]
    this.showValue = [parseTime(oneWeekAgo), parseTime(nowDate)]
    this.getStoreTotal()
    // this.selectChildByDeptIdApi()
    this.getStoreAmount()
    this.selectBannerList()
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
    this.getStoreList()
    this.getHardwareList()
    this.getNoticeList()
    this.getEmployeList()
    this.getDataAnalysis()
    this.getDataShow()
    this.getDataCount()
  },
  mounted() {
    setTimeout(() => {
      this.initChart();
    }, 2000);

  },
  methods: {
    sjkbStoreAmount(e) {
      console.log(e)
      this.sjkbTitle = e
      let command = e
      if (command == '今日') {
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        this.value1 = [parseTime(new Date()), parseTime(new Date())]
      } else if (command == '昨日') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
        this.value1 = [parseTime(oneWeekAgo), parseTime(oneWeekAgo)]
      } else if (command == '近一周') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.value1 = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (command == '本月') {
        const [startTime, endTime] = this.getMonthStartAndToday();
        this.value1 = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '本季度') {
        const [startTime, endTime] = this.getQuarterStartAndEnd();
        this.value1 = [parseTime(startTime), parseTime(endTime)];
      } else if (command == '本年') {
        const [startTime, endTime] = this.getYearStartAndEnd();
        this.value1 = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '自定义') {
        this.disabled = false
      }
      this.getStoreAmount()
      this.getDataAnalysis()
    },
    goList() {
      this.$router.push('/notificationList/index')
    },
    editShow(e) {
      this.disabled = true
      console.log(e)
      this.ypjyTitle = e
      let command = e
      if (command == '今日') {
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        this.showValue = [parseTime(new Date()), parseTime(new Date())]
      } else if (command == '昨日') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
        this.showValue = [parseTime(oneWeekAgo), parseTime(oneWeekAgo)]
      } else if (command == '近一周') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.showValue = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (command == '本月') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
        const [startTime, endTime] = this.getMonthStartAndToday();
        this.showValue = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '本季度') {
        const [startTime, endTime] = this.getQuarterStartAndEnd();
        this.showValue = [parseTime(startTime), parseTime(endTime)];
      } else if (command == '本年') {
        const [startTime, endTime] = this.getYearStartAndEnd();
        this.showValue = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '自定义') {
        this.disabled = false
      }
      this.getDataShow()
    },
    editCount(e) {
      this.disabled = true
      this.sjtjTitle = e
      console.log("e", e)
      let command = e
      if (command == '今日') {
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        // this.countValue = [start,new Date()]
        this.countValue = [parseTime(new Date()), parseTime(new Date())]
      } else if (command == '昨日') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
        this.countValue = [parseTime(oneWeekAgo), parseTime(oneWeekAgo)]
      } else if (command == '近一周') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.countValue = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (command == '本月') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
        const [startTime, endTime] = this.getMonthStartAndToday();
        this.countValue = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '本季度') {
        const [startTime, endTime] = this.getQuarterStartAndEnd();
        this.countValue = [parseTime(startTime), parseTime(endTime)];
      } else if (command == '本年') {
        const [startTime, endTime] = this.getYearStartAndEnd();
        this.countValue = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '自定义') {
        this.disabled = false
      }
      this.getDataCount()
    },
    editColor(command) {
      this.disabled = true
      this.ygphTitle = command
      if (command == '今日') {
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        this.value2 = [start, new Date()]
      } else if (command == '近一周') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (command == '本月') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
        const [startTime, endTime] = this.getMonthStartAndToday();
        this.value2 = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '本季度') {
        const [startTime, endTime] = this.getQuarterStartAndEnd();
        this.value2 = [parseTime(startTime), parseTime(endTime)];
      } else if (command == '本年') {
        const [startTime, endTime] = this.getYearStartAndEnd();
        this.value2 = [parseTime(startTime), parseTime(endTime)]
      } else if (command == '自定义') {
        this.disabled = false
      }
      this.getEmployeList()
    },
    getMonthStartAndToday() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();

      // 获取当前月的第一天
      const monthStart = new Date(year, month, 1);

      // 获取当前月的最后一天
      const monthEnd = new Date(year, month + 1, 0);

      // 格式化输出
      const format = (date) => {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        return `${year}-${month}-${day}`;
      };

      const startTime = format(monthStart);
      const endTime = format(monthEnd);

      return [startTime, endTime];
    },
    getQuarterStartAndEnd() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();

      // 计算当前季度的起始月份
      const quarterStartMonth = Math.floor(month / 3) * 3;

      // 获取当前季度的第一天
      const quarterStart = new Date(year, quarterStartMonth, 1);

      // 获取当前季度的最后一天
      const quarterEnd = new Date(year, quarterStartMonth + 3, 0);

      // 格式化输出
      const format = (date) => {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        return `${year}-${month}-${day}`;
      };

      const startTime = format(quarterStart);
      const endTime = format(quarterEnd);

      return [startTime, endTime];
    },
    getYearStartAndEnd() {
      const now = new Date();
      const year = now.getFullYear();

      // 获取当前年的第一天
      const yearStart = new Date(year, 0, 1);

      // 获取当前年的最后一天
      const yearEnd = new Date(year, 11, 31);

      // 格式化输出
      const format = (date) => {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        return `${year}-${month}-${day}`;
      };

      const startTime = format(yearStart);
      const endTime = format(yearEnd);

      return [startTime, endTime];
    },
    // 获取员工排行信息
    getEmployeList() {
      this.employeLoading = true
      let data = {
        startTime: this.value2[0],
        endTime: this.value2[1]
      }
      employeeSalesApi(data).then(res => {
        if (res.code == 200) {
          if (res.data.length >= 10) {
            this.employeList = res.data.slice(0, 10);
          } else {
            this.employeList = res.data
          }
          this.employeLoading = false
        }
      })
    },
    // 获取数据分析信息
    getDataAnalysis() {
      let data = {
        startTime: this.value1[0],
        endTime: this.value1[1]
      }
      //获取第一个饼状图数据
      getOilPercentage(data).then(res => {
        this.dataAnalysisOilNumberList = res.data
        console.log("饼状图一数据",this.dataAnalysisOilNumberList )
      })
      //获取第二个饼状图数据
      getOilAndGoodsPercentage(data).then(res => {
        this.dataAnalysisIfOilList = res.data
        console.log("饼状图二数据",this.dataAnalysisIfOilList)
      })
      //获取第三个饼状图数据
      getOilAndGoodsAndVipAndPoints(data).then(res => {
        this.dataAnalysisAllList = res.data
        console.log("饼状图三数据",this.dataAnalysisAllList )
      })
    },
    //油站首页数据展示
    getDataShow() {

      const data = {
        "startTime": this.showValue[0].split(' ')[0],
        "endTime": this.showValue[1].split(' ')[0]
      }
      getDataShow(data).then(res => {
        console.log('首页数据展示', res.data)
        this.dataShows = res.data
        this.initChart()
      })
    },
    //油站首页数据统计
    getDataCount() {
      const data = {
        "startTime": this.countValue[0].split(' ')[0],
        "endTime": this.countValue[1].split(' ')[0]
      }
      getDataCount(data).then(res => {
        // console.log('首页数据统计', res.data)
        if (res.code == 200) {
          this.dataCount = res.data
          this.initChart()
        }
      })
    },
    getNoticeList() {
      getNotificationlogList({pageNo: 1, pageSize: 4}).then(res => {
        this.noticeList = res.data.records
      })
    },
    getHardwareList() {
      getListApi({page: 1, pageSize: 3, status: '1'}).then(res => {
        this.hardwareList = res.data.records;
        this.hardwareList.forEach(item => {
          if (item.image.includes(",")) {
            item.image = item.image.split(",")[0]
          }
        })
      })
    },
    getStoreList() {
      selectStoreAmount(this.addDateRange({}, this.value2)).then(res => {
        this.storeList = res.data
        this.initChart()
      })
    },
    // 选择机构信息
    chooseDept() {
      this.options.forEach(item => {
        if (item.deptId == this.value) {
          this.queryParams.ancestors = item.ancestors
        }
      })
      this.getStoreAmount()
    },
    // banner图
    selectBannerList() {
      let queryParams = {
        pageNo: 1,
        pageSize: 10,
        systemPosition: "首页",
        bannerStatus: true
      }
      getBannerListApi(queryParams).then(res => {
        this.bannerList = res.data.records
      })
    },
    // 查询
    selectChildByDeptIdApi() {
      selectChildByDeptId().then(res => {
        this.options = res.data
      })
    },
    // 核心数据
    getStoreTotal() {
      getTotalAmount().then(res => {
        this.storeTotal = res.data
      })
    },
    getStoreAmount() {
      getDataBoard(this.addDateRange(this.queryParams, this.value1)).then(res => {
        this.storeAmount = res.data
        this.getDataAnalysis()
        this.initChart()
      })
    },
    countPercentage(upNum, downNum) {
      let percentage = 0;
      percentage = (upNum / downNum) * 100
      return percentage.toFixed(2)
    },
    initChart() {
      const chart = echarts.init(document.getElementById('ccc'))
      const chart1 = echarts.init(document.getElementById('cccc'))
      const chart2 = echarts.init(document.getElementById('ccct'))
      const chart3 = echarts.init(document.getElementById('ctct'))
      const chart4 = echarts.init(document.getElementById('cccf'))
      let dataList = []
      let allTotal = 0
      if (this.storeAmount.oilNameList) {
        this.storeAmount.oilNameList.forEach(item => {
          allTotal += item.countNum
        })
        this.storeAmount.oilNameList.forEach(item => {
          let data = {value: 0, name: ""}
          data.value = this.countPercentage(item.countNum, allTotal);
          data.name = item.oilName + item.oilType + "占比"
          dataList.push(data)
        })
      }

      let storeNameList = []
      let oilAmountList = []
      let noOilAmountList = []
      let rechargeBalanceList = []
      let consumeBalanceList = []
      let userBalanceList = []
      if (this.storeList.length > 0) {
        this.storeList.forEach(item => {
          storeNameList.push(item.storeName)
          oilAmountList.push(item.oilAmount)
          noOilAmountList.push(item.noOilAmount)
          rechargeBalanceList.push(item.userRechargeBalance)
          consumeBalanceList.push(item.userConsumeBalance)
          userBalanceList.push(item.userBalance)
        })
      }
      const color = ['#FF9655', '#55F3FF', '#0DC291', '#fe8c4a', '#D55F5F'];
      // 首页数据统计
      const times = this.dataCount.oilData.map(item => item.time);
      const count = [];
      let c = ['product', ...this.dataCount.oilNames]
      let countType = []
      count.push(c)
      this.dataCount.oilNames.forEach(item => {
        let type = {
          type: 'bar'
        }
        countType.push(type)
      })
      this.dataCount.oilData.forEach(item => {
        let a = [item.time, ...item.money]
        count.push(a)
      })

      // 首页数据展示
      const showTimes = this.dataShows.oilData.map(item => item.day);
      const showCount = [];
      let cshow = ['product', ...this.dataShows.oilNames]
      showCount.push(cshow)
      let showCountType = []
      console.log("看看执行")
      this.dataShows.oilNames.forEach(item => {
        let type = {
          type: 'bar'
        }
        showCountType.push(type)
      })
      console.log(this.dataShows.oilData)
      this.dataShows.oilData.forEach(item => {
        let a = [item.day, ...item.oilPrices]
        showCount.push(a)
        console.log("showCount", a)
      })
      console.log("showCount", showCount)
      console.log("showCountType", showCountType)

      const option = {
        color: [
          '#36b713',
          '#fc7150',
          '#fea500',
          '#5facfe',
          '#b7f1e2',
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '0%',
          bottom: '0%',
          left: 'right',
          size: 8
        },
        series: [
          {
            name: '',
            type: 'pie',
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 4
            },
            radius: ['40%', '80%'],
            data: this.dataAnalysisOilNumberList,
            label: {
              show: true,
              position: "inside",
              color: '#fff',
              formatter: `{d}%`,
            },
          },
        ]
      };
      const option1 = {
        color: [
          '#3B6ADE',
          '#fe8c4a',
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '0%',
          bottom: '0%',
          left: 'right',
          size: 8
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '80%',
            // ],
            data: this.dataAnalysisIfOilList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: "inside",
              color: '#fff',
              formatter: `{d}%`,
            },
          },


        ]
      };
      const option2 = {
        color: [
          '#46c2c4',
          '#6e4dd8',
          '#214790',
          '#d55f5f',
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '0%',
          bottom: '0%',
          left: 'right',
          size: 8
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [50, '80%'],
            data: this.dataAnalysisAllList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            label: {
              show: true,
              position: "inside",
              color: '#fff',
              formatter: `{d}%`,
            },
          }
        ]
      };


      const option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: this.dataCount.oilNames,
          left: 'right'
        },
        xAxis: [
          {
            type: 'category',
            // data: ['中建锦绣广场1站', '中建锦绣广场2站', '中建锦绣广场3站', '中建锦绣广场4站', '中建锦绣广场5站', '中建锦绣广场6站', '中建锦绣广场7站'],
            data: times,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              // rotate: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)',
            // min: 0,
            // max: 10000,
            // interval: 2000,
            axisLabel: {
              formatter: '{value}'
            }
          }

        ],
        dataset: {
          source: count
        },

        series: countType,
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        }
      };
      const option4 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: this.dataShows.oilNames,
          left: 'right'

        },
        xAxis: [
          {
            type: 'category',
            data: showTimes,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 0,
              // rotate: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        dataset: {
          source: showCount
        },
        series: showCountType,
        grid: {
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        }
      };
      chart.setOption(option)
      chart1.setOption(option1)
      chart2.setOption(option2)
      chart3.setOption(option3)
      chart4.setOption(option4)

    }

  }

}
</script>

<style scoped lang="scss">

.app-container {
  width: 100%;
  height: 100%;
  background: #f4f5f9;
}

.d-s {
  display: flex;
  align-items: center;
}

.bannser {
  width: 100%;
  height: 230px;
  border-radius: 8px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }

}

.b-bs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.left-box {
  width: 74%;
  background: #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #FFFFFF;
  height: 192px;
  //display: flex;
  //align-items: center;
  //justify-content: space-between;
  box-sizing: border-box;
  padding: 15px;
}

.left-box-t {
  width: 74%;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;
  height: 380px;

}

.right-box {
  width: 25%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;
  height: 192px;
  box-sizing: border-box;
  padding: 15px;
}

.right-box-t {
  width: 25%;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #FFFFFF;
  height: 380px;
  box-sizing: border-box;
  padding: 15px;


}

.san-box {
  width: 24%;
  height: 100px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fe8c4a;
  margin: 15px auto;

  box-sizing: border-box;
  padding: 20px 40px;
}

.r-title {
  font-weight: bold;
  font-size: 42px;
  color: #FFFFFF;
  text-align: center;
}

.r-size {
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
}

.title_ {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hang_ {
  width: 100%;
  white-space: nowrap; //不换行
  overflow: hidden; //超出部分隐藏
  text-overflow: ellipsis; //文本溢出显示省略号
  font-size: 14px;
  color: #333;
  margin: 14px auto;
}

.h-tt {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.q-anniu {
  width: 80px;
  height: 26px;
  background: #FF9655 !important;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 12px;
  cursor: pointer;
  margin-right: 20px;
}

.h-anniu {
  width: 80px;
  height: 26px;
  background: #fafafa;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 20px;
  font-weight: 400;
  font-size: 12px;
  color: #555555;
}

.k-box {
  width: 24%;
  height: 68px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #e1e0e0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px;
}

.num-size {
  font-weight: bold;
  font-size: 24px;
  color: #555555;
}

.sian {
  width: 6px;
  height: 6px;
  background: #2BBCFF;
  border-radius: 50%;
  margin-right: 5px;
}

.hui-hang {
  width: 100%;
  height: 5px;
  background: #F4F5F9;
  margin: 15px auto;
}

.h-r-ba {
  height: 170px;
  margin: 0px 50px;
  width: 5px;
  background: #f4f5f9;
}

.r-img {
  width: 84px;
  height: 70px;
  margin-right: 20px;
}

.bottom_ {
  width: 100%;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
}

.anniu-h {
  width: 80px;
  height: 26px;
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777777;
  margin-right: 20px;
}

.anniu-act {
  background: #FF9655 !important;
  border: 1px solid #FF9655 !important;
  color: #fff;
}

.la-left {
  width: 73%;
  background: #fff;
  border-radius: 10px;
}

.la-right {
  height: 25%;
  background: #fff;
  border-radius: 10px;
}

.hui-box {
  background: #F4F5F9;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin: 10px auto;

  div {
    width: 20%;
    text-align: center;
  }
}

.hang-box {
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  margin: 0px auto;

  div {
    width: 20%;
    text-align: center;
  }
}

.home-index {

}
</style>