<template>
  <div>
    <!-- <dv-full-screen-container>   v-on:dblclick="isScreenFull" -->
    <div id="fullSaleScreen" v-on:dblclick="isScreenFull">
      <div class="screen-head">
        <div></div>
        <div class="title">鲸致生活销售大屏</div>
        <div class="screen-head-right">
          <div class="date-picker-wrapper">
            <el-date-picker v-model="dateSelect" value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime"
              :picker-options="{}" :clearable="false" prefix-icon="el-icon-caret-bottom"></el-date-picker>
          </div>
        </div>
      </div>
      <div class="screen-container">
        <div class="chart-board">
          <!-- 左侧 -->
          <div class="left-board">
            <div class="left-head">
              <div class="border-tag"></div>
              <div class="head-title">{{ currentMonth }}月累计派单量</div>
            </div>
            <div class="count-card-wrapper">
              <count-to :start-val="monthProvidedStart" :end-val="monthProvided" :duration="2000"
                class="card-panel-num-big" suffix="单" />
              <count-to :start-val="monthPlatformProvidedStart" :end-val="monthPlatformProvided" :duration="2000"
                class="card-panel-num" prefix="平台派" suffix="单" />
            </div>

            <div class="left-head">
              <div class="border-tag"></div>
              <div class="head-title">月派单走势</div>
            </div>
            <div class="gmv-chart-block">
              <div class="gmv-top">
                <!-- <div class="gmv-top-left">
                  <div>月销售GMV</div>
                  <div class="sub-title">销售趋势对比</div>
                </div> -->
                <!-- <div class="gmv-top-right">
                  <div :class="[currentGmvType == '2' ? 'activeGmv' : '']" @click="appointGmvSwitch('2')">月纬度</div>
                  <div :class="[currentGmvType == '1' ? 'activeGmv' : '', 'month-gmv']" @click="appointGmvSwitch('1')">日纬度</div>
                </div> -->
              </div>
              <div id="gmv-chart"></div>
            </div>
            <div class="left-head">
              <div class="border-tag"></div>
              <div class="head-title">实时销售明细</div>
            </div>
            <dv-scroll-board :config="scrollBoardConfig" class="scroll-board-chart" />

          </div>
          <!-- 中间 -->
          <div class="middle-board">
            <div style="height: 200px;"></div>
             <!-- <div class="total-gmv">
             <div class="title">日总销售额GMV</div>
              <div class="time-line">
                {{ todayDate }}
                <span v-if="moreHistory">单日销售新纪录</span>
              </div>  
            </div>
            <div class="digital-wrapper">
               <div class="chartNum">
                <div class="box-item"> 
                  <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
                    :key="index">
                    <span v-if="!isNaN(item)"> 
                      <i ref="numberItem">0123456789</i>
                    </span>
                    <span class="comma" v-else>{{ item }}</span>
                  </li>
                </div>
              </div>
              <div style="padding:20px 0 0 10px;">元</div> 
            </div>
            <div class="update-time">
              <i class="el-icon-refresh-right"></i>
              <span>更新于{{ refreshTime }}</span>
            </div>-->

            <!-- <div style="width:640px;height:550px;margin:0 auto;"> -->
            <div class="fly-chart-map">
              <!-- <dv-flyline-chart-enhanced :config="config" :dev="true" style="width:100%;height:100%;" /> -->
              <dv-flyline-chart :config="mapConfig" :dev="true" style="width:100%;height:100%;" />
            </div>
          </div>
          <!-- 右侧 -->
          <div class="right-board">
            <div class="right-head">
              <div class="border-tag"></div>
              <div class="head-title">{{ currentMonth }}月累计总GMV</div>
            </div>
            <div class="count-card-wrapper">
              <count-to :start-val="monthSalesGMVStart" :end-val="monthSalesGMV" :duration="2000"
                class="card-panel-num-big" prefix="￥" suffix="万" />
              <!-- <count-to :start-val="0" :end-val="monthVerifyGMV" :duration="2000" class="card-panel-num" prefix="已核销"  suffix="万" /> -->
              <span class="card-panel-num">{{ monthOrders }}万单</span>
            </div>
            <!-- <div class="type-wrapper">
                          <div
                  :class="[dataType=='2'?'activeGmv':'','month-gmv']"
                  @click="saleGmvSwitch('2')"
                >月度数据</div>
              <div
                  :class="[dataType=='1'?'activeGmv':'']"
                  @click="saleGmvSwitch('1')"
                >单日数据</div>
  
            </div>-->
            <div class="right-head">
              <div class="border-tag"></div>
              <div class="head-title">渠道数据</div>
            </div>
            <!-- <div class="conical-chart-wrapper">
            <dv-conical-column-chart :config="conicalChartConfig" style="width:100%;height:120px;" />
            </div>-->
            <div class="appoint-data-board">
              <div class="appoint-data-item" v-for="(item, index) in sumMonthOrDaySales " :key="index">
                <img :src="item.iconB" class="item-bg-img" />
                <div class="appoint-item-main">
                  <div class="appoint-item-left">
                    <div class="item-logo">
                      <img :src="item.iconB" />
                      <div>{{ item.channel }}</div>
                    </div>
                    <div class="item-data">
                      ¥<count-to :start-val="0" :end-val="item.amount" :duration="2000" class="item-data-num" />元
                    </div>
                  </div>
                  <!-- <div class="appoint-item-right">
                    <dv-active-ring-chart :config="item.activeRingChartConfig1" class="ring-chart-item" />
                    <dv-active-ring-chart :config="item.activeRingChartConfig2" class="ring-chart-item-2" />
                  </div> -->
                </div>

                <el-progress :percentage="item.progressRate" :text-inside="true" status="success"
                  :show-text="false"></el-progress>
                <div class="appoint-item-month">
                  <div>
                    月累计销售
                    <span>{{ item.monthSalesGMV }}</span>万元
                  </div>
                  <div>
                    月累计
                    <span>{{ item.monthOrders }}</span>单
                    <!--  {{ item.monthVerifyRate }}-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </dv-full-screen-container> -->
</template>

 
<script>
import * as echarts from "echarts";
import CountTo from "vue-count-to";
import moment from "moment";
import screenfull from "screenfull";
import Pagination from "./common/Pagination";
import Service from "../script/api/service";
import url from "@/script/baseUrl.js";
import userAuthDataApi from "@/script/api/userAuthData.js";
import globalData from "@/components/common/globaldata/global.data.vue";
var formatter = function (number) {
  const numbers = number
    .toString()
    .split("")
    .reverse();
  const segs = [];

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

  return segs
    .join(",")
    .split("")
    .reverse()
    .join("");
};

// import addTrainHisDia from './components/addTrainHisDia';
export default {
  props: {
    value: {
      type: Number, // 具体数值
      default() {
        return 0;
      }
    },
    time: {
      type: Number, // 滚动开始时间
      default() {
        return 1;
      }
    }
  },

  components: {
    Pagination,
    CountTo
  },
  data() {
    return {
      moreHistory: false,
      refreshTimer: null,//面板刷新定时器
      timeTimer: null,//时间定时器
      onceTimer: null,
      flylineTimer: null,
      refreshTime: "",
      monthSalesGMV: 0,//月销售GMV
      monthSalesGMVStart: 0,//月销售GMV
      monthOrders: 0,//月销售订单量 
      monthVerifyGMV: 0,
      monthProvided: 0,//月派单
      monthProvidedStart: 0,
      monthPlatformProvidedStart: 0,//其中平台派单
      monthPlatformProvided: 0,//其中平台派单
      sumMonthOrDaySales: [],
      screenTime: moment(new Date()).format("HH:mm:ss"),
      currentMonth: moment(new Date()).format("M"),
      todayDate: moment(new Date()).format("YYYY-MM-DD"),
      dateSelect: moment(new Date()).format("YYYY-MM-DD"),
      currentGmvType: "2",
      dataType: "2",
      scrollBoardConfig: {
        headerBGC: "transparent",
        oddRowBGC: "#0A5A8A",
        evenRowBGC: "transparent",
        waitTime: 1500,
        header: ["订单时间", "商品名称", "订单金额", "渠道"],
        data: [],
        columnWidth: [100, 80, 50],
        align: ["center", "center", "center", "center"]
      },

      capsuleChartConfig: {
        data: [],
        colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
        unit: "单",
        showValue: true
      },
      conicalChartConfig: {},
      activeRingChartConfig: {
        radius: "70%",
        activeRadius: "80%",
        lineWidth: 8,
        data: [
          {
            name: "抖音",
            value: 55
          },
          {
            name: "盒马",
            value: 120
          },
          {
            name: "微信",
            value: 78
          }
        ],
        digitalFlopStyle: {
          fontSize: 13
        },
        color: ["#65F7E4", "#FFAB4C", "#969696"]
      },
      orderNum: ["0", "0", "0", ",", "0", "0", "0", ",", "0", "0", "0"],
      provinceList: [
        { name: "上海市", point: [0.87, 0.59] },
        { name: "北京市", point: [0.75, 0.37] },
        { name: "广东省", point: [0.73, 0.81] },
        { name: "江苏省", point: [0.83, 0.54] },
        { name: "浙江省", point: [0.84, 0.67] },
        { name: "山东省", point: [0.79, 0.47] },
        { name: "湖北省", point: [0.72, 0.63] },
        { name: "四川省", point: [0.52, 0.63] },
        { name: "重庆市", point: [0.6, 0.66] },
        { name: "内蒙古自治区", point: [0.66, 0.34] },
        { name: "河北省", point: [0.73, 0.4] },
        { name: "福建省", point: [0.81, 0.75] },
        { name: "江西省", point: [0.77, 0.7] },
        { name: "黑龙江省", point: [0.91, 0.14] },
        { name: "海南省", point: [0.65, 0.94] },
        { name: "安徽省", point: [0.79, 0.59] },
        { name: "吉林省", point: [0.9, 0.25] },
        { name: "云南省", point: [0.48, 0.8] },
        { name: "甘肃省", point: [0.54, 0.51] },
        { name: "广西省", point: [0.63, 0.82] },
        { name: "河南省", point: [0.71, 0.54] },
        { name: "辽宁省", point: [0.86, 0.32] },
        { name: "山西省", point: [0.68, 0.45] },
        { name: "天津市", point: [0.77, 0.38] },
        { name: "新疆维吾尔自治区", point: [0.22, 0.3] },
        { name: "湖南省", point: [0.69, 0.71] },
        { name: "陕西省", point: [0.63, 0.51] },
        { name: "宁夏回族自治区", point: [0.56, 0.47] },
        { name: "青海省", point: [0.39, 0.48] },
        { name: "贵州省", point: [0.6, 0.73] }
      ],
      mapConfig: {
        centerPoint: [0.87, 0.59],
        points: [
          {
            position: [0.75, 0.37]
          }
        ],
        text: {
          color: "orange",
          fontSize: 10
        },
        k: 0.5,
        bgImgUrl: "https://mall.zhaijieshi.cc/file/jzreport/report-map.png",
        centerPointImg: {
          url: "http://datav.jiaminghi.com/img/flylineChart/mapCenterPoint.png"
        },
        pointsImg: {
          url: "http://datav.jiaminghi.com/img/flylineChart/mapPoint.png"
        }
      },
      elementFull: false
    };
  },
  mounted() {
    let that = this;
    this.getMonthGmv();
    this.getYearServiceGMV();//月派单柱状图
    // this.getMapFlylineData();

    //时间按秒变更
    this.timeTimer = setInterval(() => {
      that.dateSelect = new Date();
      that.todayDate = moment(new Date()).format("YYYY-MM-DD");
    }, 1000);

    //定时触发30秒一次 刷新面板数据
    this.refreshTimer = setInterval(() => {
      that.getMonthGmv();
      // that.getMapFlylineData();
    }, 1000 * 30);

    this.screenFull();
  },
  destroyed() {
    clearInterval(this.timeTimer);
    clearInterval(this.refreshTimer);
  },
  methods: {
    getMonthGmv() {
      Service.$axiosMonthGmv({
        date: moment(this.dateSelect).format("YYYY-MM-DD")
      }).then(res => {
        if (res.data.errno == 0) {
          this.currentMonth = res.data.data.month;
          let monthSalesGMV = res.data.data.monthSalesGMV;
          let monthVerifyGMV = res.data.data.monthVerifyGMV;
          //月销售及订单量
          this.monthOrders = (res.data.data.monthOrders / 10000).toFixed(2);
          if (this.monthSalesGMV != monthSalesGMV && this.monthSalesGMV != 0) {
            this.monthSalesGMVStart = this.monthSalesGMV;
          }
          this.monthSalesGMV = Number((monthSalesGMV / 10000).toFixed(0));
          this.monthVerifyGMV = Number((monthVerifyGMV / 10000).toFixed(0));

          //月派单量--因为派单可能会减少 所以这里加个必须大于才赋值
          if (res.data.data.monthProvided > this.monthProvided) {
            if (this.monthProvided != res.data.data.monthProvided && this.monthProvided != 0) {
              this.monthProvidedStart = this.monthProvided;
              this.monthPlatformProvidedStart = this.monthPlatformProvided;
            }
            this.monthProvided = res.data.data.monthProvided;
            this.monthPlatformProvided = res.data.data.monthPlatformProvided;
          }

          //日销售汇总 
          let sumDaySalesGMV = res.data.data.sumDaySalesGMV;
          this.toOrderNum(sumDaySalesGMV);
          clearTimeout(this.onceTimer);//开始动效
          this.onceTimer = setTimeout(() => {
            this.setNumberTransform();
          }, 500);

          //地图及滚动销售赋值
          this.getMapFlylineData(res.data.data.nowDate, res.data.data.orderSalesInfo, res.data.data.countProvinceSalesNumber);

          //渠道数据赋值
          let sumMonthOrDaySales = res.data.data.channelData;

          let chartList = [];
          let chartImg = [];
          let appointList = [];
          sumMonthOrDaySales.forEach(item => {
            let chartObj = {
              name: item.channel,
              value: item.amount
            };
            chartList.push(chartObj);
            chartImg.push(item.iconA);
            let appointItem = item;
            appointItem.monthSalesGMV = Number(
              (item.monthSalesGMV / 10000).toFixed(0)
            );
            appointItem.monthVerifyGmv = Number(
              (item.monthVerifyGmv / 10000).toFixed(0)
            );
            //appointItem.monthVerifyRate = item.monthVerifyRate;
            //appointItem.progressRate = Number(
            //  item.monthVerifyRate.replace("%", "")
           // );

            appointItem.activeRingChartConfig1 = {
              radius: "70%",
              activeRadius: "80%",
              lineWidth: 8,
              data: [],
              digitalFlopStyle: {
                fontSize: 12
              },
              digitalFlopToFixed: 2,
              color: ["#65F7E4", "#969696"]
            };
            appointItem.activeRingChartConfig2 = {
              radius: "70%",
              activeRadius: "80%",
              lineWidth: 8,
              data: [],
              digitalFlopStyle: {
                fontSize: 12
              },
              digitalFlopToFixed: 0,
              color: ["#FFAB4C", "#969696"]
            };
            appointList.push(appointItem);
          });
          this.conicalChartConfig = {
            data: chartList,
            img: chartImg,
            showValue: false
          };
          this.sumMonthOrDaySales = appointList;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getMapFlylineData(refreshTime, orderSalesInfo, countProvinceSalesNumber) {
      let that = this;
      //this.refreshTime = res.data.data.nowDate;
      this.refreshTime = refreshTime;

      //let orderSalesInfo = res.data.data.orderSalesInfo;
      let saleList = [];
      orderSalesInfo.forEach(item => {
        let saleObj = [
          item.createTime,
          item.actualPrice,
          item.channel,
          item.goodsName
        ];
        saleList.push(saleObj);
      });

      this.scrollBoardConfig = {
        hoverPause: false,
        headerBGC: "transparent",
        oddRowBGC: "#0A5A8A",
        evenRowBGC: "transparent",
        waitTime: 1500,
        header: ["订单时间", "金额", "渠道", "商品名称"],
        data: saleList,
        columnWidth: [140, 45, 60],
        align: ["center", "center", "center", "center"]
      };
      //let countProvinceSalesNumber = res.data.data.countProvinceSalesNumber;
      let pointList = [];
      countProvinceSalesNumber.forEach(item => {
        let provinceItem = this.provinceList.filter(item1 => {
          return item.province == item1.name;
        });
        let pointItem = {
          position: provinceItem[0].point,
          text: item.value + "单"
        };
        pointList.push(pointItem);
      });

      let newProvinceSalesNumber = countProvinceSalesNumber.filter(item => item.newPay > 0);
      if (newProvinceSalesNumber.length > 0) {
        let newPointList = [];
        newProvinceSalesNumber.forEach(item => {
          let provinceItem = this.provinceList.filter(item1 => {
            return item.province == item1.name && item.newPay > 0;
          });
          let pointItem = {
            position: provinceItem[0].point,
            text: "+" + item.newPay + "单"
          }; 
          newPointList.push(pointItem);
        });
        // console.log(newPointList);
        this.mapConfig = {
          centerPoint: [0.87, 0.59],
          duration: [50, 50],
          // flylineColor:"transparent",
          points: newPointList,
          text: {
            color: "orange",
            fontSize: 10
          },

          k: 0.5,
          bgImgUrl:
            "https://mall.zhaijieshi.cc/file/jzreport/report-map.png",
          centerPointImg: {
            url:
              "https://mall.zhaijieshi.cc/file/jzreport/mapCenterPoint.png"
          },
          pointsImg: {
            url: "https://mall.zhaijieshi.cc/file/jzreport/mapPoint.png"
          },
          halo: {
            duration: 50
          }
        };

        clearTimeout(this.flylineTimer);
        this.flylineTimer = setTimeout(() => {
          this.mapConfig = {
            centerPoint: [0.87, 0.59],
            flylineColor: "transparent",
            orbitColor: "transparent",
            duration: [50, 50],
            points: pointList,
            text: {
              color: "orange",
              fontSize: 10
            },

            k: 0.5,
            bgImgUrl:
              "https://mall.zhaijieshi.cc/file/jzreport/report-map.png",
            centerPointImg: {
              url:
                "https://mall.zhaijieshi.cc/file/jzreport/mapCenterPoint.png"
            },
            pointsImg: {
              url: "https://mall.zhaijieshi.cc/file/jzreport/mapPoint.png"
            },
            halo: {
              show: false
            }
          };
        }, 4800);
      } else {
        this.mapConfig = {
          centerPoint: [0.87, 0.59],
          flylineColor: "transparent",
          orbitColor: "transparent",
          duration: [50, 50],
          points: pointList,
          text: {
            color: "orange",
            fontSize: 10
          },

          k: 0.5,
          bgImgUrl:
            "https://mall.zhaijieshi.cc/file/jzreport/report-map.png",
          centerPointImg: {
            url:
              "https://mall.zhaijieshi.cc/file/jzreport/mapCenterPoint.png"
          },
          pointsImg: {
            url: "https://mall.zhaijieshi.cc/file/jzreport/mapPoint.png"
          },
          halo: {
            show: false
          }
        };
      }
    },
    getYearServiceGMV() {//派单量柱状图
      Service.$axiosYearServiceGMV({
        date: moment(this.dateSelect).format("YYYY-MM-DD"),
        type: this.currentGmvType
      }).then(res => {
        // console.log(res);
        if (res.data.errno == 0) {
          let days = res.data.data.days;
          let echLiss = res.data.data.echLiss;
          let legend = echLiss.map(item => {
            return item.name;
          });
          this.initGmvChart(days, legend, echLiss);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    initGmvChart(days, legend, echLiss) {//派单柱状图
      var chartDom = document.getElementById("gmv-chart");
      var myChart = this.$echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        // color:['#5397EE','#FF3E00'],
        legend: {
          data: legend,
          top: 0,
          textStyle: {
            color: "#8C8C8C"
          }
        },

        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: days
            // axisLabel: { interval: 0, rotate: 30 }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                fontSize: 7,
                inside: false
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#001737",
                width: 0.5
              }
            }
          }
        ],
        series: [
          {
            //name: echLiss[0].name,
            type: "bar",
            // barWidth: '20px',
            data: echLiss[0].data,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5397EE" },
                { offset: 1, color: "#3DCCD8" }
              ]),
              // barBorderRadius: [200, 200, 0, 0]
              borderRadius: [200, 200, 0, 0]
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item));
      // 结合CSS 对数字字符进行滚动显示
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        // 每位数字对应偏移量
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
    // 处理传过来的具体值value
    toOrderNum(num) {
      num = num.toString();
      // 把具体值value变成字符串
      if (num.length < 9) {
        num = "0" + num; // 如未满八位数，添加"0"补位
        this.toOrderNum(num); // 递归添加"0"补位
      } else if (num.length === 9) {
        // 具体值value中加入逗号
        num = num.slice(0, 3) + "," + num.slice(3, 6) + "," + num.slice(6, 9);
        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 具体值value数字超过八位显示异常
        // this.$message.warning("xxx数量过大，显示异常，请联系后台管理员");
      }
    },
    appointGmvSwitch(type) {
      this.currentGmvType = type;
      this.getYearServiceGMV();
    },
    screenFull() {
      //监听f11事件
      window.addEventListener("keydown", this.KeyDown, true);
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
      // document.addEventListener("fullscreenchange", () => {
      //   this.isFullscreen = !this.isFullscreen;//你要切换得图标使用得属性
      // });
      // document.addEventListener("mozfullscreenchange", () => {
      //   this.isFullscreen = !this.isFullscreen;
      // });
      // document.addEventListener("webkitfullscreenchange", () => {
      //   this.isFullscreen = !this.isFullscreen;
      // });
      // document.addEventListener("msfullscreenchange", () => {
      //   this.isFullscreen = !this.isFullscreen;
      // });
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        console.log("f11");
        event.returnValue = false;
        this.isScreenFull(); //触发全屏的方法
      }
    },
    isScreenFull() {
      // if (!screenfull.isEnabled) {
      //   return false;
      // }
      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // screenfull.toggle();
      const element = document.getElementById("fullSaleScreen"); // 指定全屏元素
      if (screenfull.isEnabled) {
        screenfull.request(element);
        this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏
        if (this.elementFull) {
          screenfull.toggle(); //全屏/退出全屏切换
        }
      }
    }
  }
};
</script>
<style  scoped lang='scss'>
#fullSaleScreen {
  min-width: 1380px;
  display: flex;
  flex-direction: column;
  overflow-x: scroll;
  scrollbar-width: none;
}

.screen-container {
  background: #001737;
  border-radius: 8px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: AlibabaPuHuiTiM;
  flex: 1;
}

.screen-head {
  height: 38px;
  background: #033379;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  line-height: 38px;
}

.screen-head>div {
  flex: 1;
}

.screen-head .title {
  color: rgba(186, 225, 255, 0.9);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.screen-head-right {
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
  height: 38px;
}

.date-picker-wrapper {
  background: #033379;
  cursor: pointer;
  height: 38px;
  overflow: hidden;
}

.date-picker-wrapper>>>.el-input__inner {
  background: #033379;
  color: #2dcdf7;
  font-size: 14px;
  border: none;
  height: 38px;
  line-height: 38px;
  padding-right: 0px;
  cursor: pointer;
}

// .date-picker-wrapper>>>.el-input__prefix {
//   color: #fff;
// }

.date-picker-wrapper>>>.el-date-editor.el-input {
  width: 210px;
}

.screen-time {
  color: #2dcdf7;
  font-size: 14px;
  // padding-right: 16px;
  width: 90px;
  text-align: left;
}

.chart-board {
  display: flex;
  justify-content: space-between;
  background: url("https://mall.zhaijieshi.cc/file/jzreport/screen-bg.png") no-repeat;
  background-size: cover;
  padding: 20px 10px;
  // align-items: center;
}

.left-board {
  flex: 1;
}

.left-board>>>.dv-scroll-board .header {
  font-size: 13px;
}

.left-board>>>.dv-scroll-board .rows .row-item {
  font-size: 12px;
}

.left-head {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin: 42px 0 10px;
}

.left-head .head-title {
  letter-spacing: 6px;
  font-size: 24px;
  font-weight: 500
}

.left-head .border-tag {
  width: 6px;
  height: 14px;
  background: #00c2f5;
  margin-right: 12px;
}

.gmv-chart-block {
  background: linear-gradient(90deg, #063171 0%, rgba(27, 61, 99, 0.34) 100%);
  border-radius: 4px;
  padding: 10px 0 0 10px;
}

#gmv-chart {
  height: 240px;
  // padding: 10px;
}

.gmv-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 6px;
  // height: 50px;
  padding-right: 20px;
}

.gmv-top-left {
  color: #fff;
  font-size: 14px;
  padding-bottom: 4px;
}

.gmv-top-left .sub-title {
  color: #e7e7e7;
  font-size: 8px;
  opacity: 0.8;
  line-height: 20px;
}

.gmv-top-right {
  display: flex;
  width: 112px;
  height: 26px;
  line-height: 26px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  cursor: pointer;
}

.gmv-top-right div {
  flex: 1;
  text-align: center;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}

.gmv-top-right .month-gmv {
  border-left: 1px solid #d9d9d9;
}

.gmv-top-right .activeGmv {
  color: #1890ff;
}

>>>.dv-scroll-board .row-item {
  border-radius: 4px;
}

.middle-board {
  flex: 1.3;
  margin: 0 40px;
  padding: 20px 0 0;
}

.total-gmv .title {
  height: 60px;
  font-size: 40px;
  line-height: 60px;
  letter-spacing: 12px;
  text-align: center;
}

.time-line {
  height: 24px;
  font-size: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  line-height: 17px;
  letter-spacing: 4px;
  margin: 4px 0 12px 0;
}

.time-line span {
  color: #e89c00;
  font-size: 16px;
  letter-spacing: 0;
  margin-left: 6px;
}

.digital-wrapper {
  margin: 12px 0 18px;
  display: flex;
  padding-left: 16px;
  justify-content: center;
}

.counter-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.counter-container .num-item {
  position: relative;
  margin-right: 4px;
  padding: 8px;
  width: 34px;
  height: 47px;
  background: linear-gradient(142deg, #32dbf7 0%, #1677ff 100%);
  border-radius: 8px;
  margin-right: 4px;
  line-height: 47px;

  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.right-board {
  flex: 1;
}

.box-item {
  position: relative;
  height: 66px;
  font-size: 34px;
  line-height: 58px;
  text-align: center;
  list-style: none;
  color: #fff;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
}

/* 默认逗号设置 */
.mark-item {
  width: 10px;
  height: 48px;
  margin: 4px 8px 0;
  line-height: 10px;
  font-size: 30px;
  position: relative;

  &>span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/*滚动数字设置*/
.number-item {
  width: 42px;
  height: 58px;
  list-style: none;
  margin-right: 5px;
  background: linear-gradient(142deg, #32dbf7 0%, #1677ff 100%);
  border-radius: 8px;

  &>span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: tb-rl; // writing-mode 改变文字排列方向
    text-orientation: upright; // 文字方向
    overflow: hidden;

    &>i {
      font-style: normal;
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 2s ease-in-out;
      letter-spacing: 10px;
    }
  }
}

.number-item:last-child {
  margin-right: 0;
}

.update-time {
  display: flex;
  justify-content: center;
  color: rgba(212, 212, 212, 0.9);
  font-size: 10px;
  height: 20px;
  margin: 20px 0;
  align-items: center;
  margin: 0 0 20px;
}

// 右侧
.right-head {
  display: flex;
  align-items: center;
  font-size: 24px;
  // font-weight: bold;
  margin: 42px 0 10px;
  letter-spacing: 6px;
}

.right-head .border-tag {
  width: 8px;
  height: 20px;
  background: #00c2f5;
  margin-right: 18px;
}

.count-card-wrapper {
  display: flex;
  // align-items: flex-end;
  height: 60px;
  margin: 20px 0 0 0;
}

.card-panel-num-big {
  color: #fd632e;
  font-size: 36px;
  letter-spacing: 4px;
}

.card-panel-num {
  color: #fd632e;
  font-size: 20px;
  letter-spacing: 1px;
  margin-left: 30px;
  line-height: 60px;
}

.type-wrapper {
  margin: 8px 0 10px;
  border-radius: 4px;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.type-wrapper>div {
  flex: 1;
  text-align: center;
  letter-spacing: 4px;
  color: #0d274c;
  height: 40px;
  line-height: 40px;
  background: #fff;
}

.type-wrapper>div.activeGmv {
  background: #1f99fc;
  color: #fff;
}

.type-wrapper>>>.el-radio-button--small .el-radio-button__inner {
  padding: 12px 50px;
}

.conical-chart-wrapper {
  background: #001737;
  padding: 8px 12px 20px;
  margin-bottom: 8px;
}

.appoint-data-item {
  // height: 136px;
  background: linear-gradient(90deg, #063171 0%, rgba(27, 61, 99, 0.34) 100%);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-bottom: 8px;
  padding: 10px 16px;
  min-height: 150px;
}

.appoint-item-month {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #fafafa;
}

.appoint-item-month span {
  font-size: 16px;
  margin: 0 2px;
}

.appoint-item-main {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.appoint-item-right {
  display: flex;
}

.item-data {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.item-data-num {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  white-space: nowrap;
}

.appoint-item-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-logo {
  display: flex;
  align-items: center;
  // padding: 10px 0;
  font-size: 16px;
}

.item-logo img {
  width: 30px;
  height: 30px;
  margin-right: 14px;
}

.appoint-data-item {
  position: relative;
}

.item-bg-img {
  width: 120px;
  height: 120px;
  opacity: 0.1;
  position: absolute;
  left: 30%;
  // left: calc(50% - 60px);
}

.screen-container>>>.dv-scroll-board .header .header-item {
  padding: 0;
}

.screen-container>>>.dv-scroll-board .rows .ceil {
  padding: 0 2px;
}

.appoint-data-board {
  width: 100%;
}

.ring-chart-item {
  width: 80px;
  height: 80px;
}

.ring-chart-item-2 {
  width: 80px;
  height: 80px;
  margin-left: 10px;
}

.scroll-board-chart {
  width: 100%;
  height: 200px;
}

.capsule-chart {
  width: 100%;
  height: 220px;
  background: #001737;
  padding: 10px;
}

.fly-chart-map {
  width: 574px;
  height: 492px;
  margin: 0 auto;
}

@media (max-width: 1800px) {
  .left-board {
    max-width: 420px !important;
  }
}

@media (min-width: 1800px) {
  #fullSaleScreen::-webkit-scrollbar {
    display: none;
  }

  .scroll-board-chart {
    width: 100%;
    height: 240px;
  }

  .capsule-chart {
    width: 100%;
    height: 260px;
    background: #001737;
    padding: 10px;
  }

  .chart-board {
    min-height: 100%;
  }

  .appoint-data-item {
    padding: 20px 40px;
  }

  .ring-chart-item {
    width: 100px;
    height: 100px;
  }

  .ring-chart-item-2 {
    width: 100px;
    height: 100px;
    margin-left: 20px;
  }

  .middle-board {
    flex: 1.4;
  }

  .fly-chart-map {
    width: 716px;
    height: 614px;
    margin: 0 auto;
  }

  #gmv-chart {
    height: 280px;
  }
}
</style>