<template>
  <div class="contant_box">
    <div class="container-flex" tabindex="0" hidefocus="true">
      <div class="box-left">
        <div class="left-top">
          <div class="current-num">
            <div>当前到件量</div>
            <p>123,456,789</p>
          </div>
        </div>
        <div class="left-center">
          <div class="title-box">
            <h6>派件入库量占比</h6>
          </div>
          <div class="chart-box pie-chart">
            <div id="pie"></div>
            <div>
              <div class="pie-data" id="pie-data"></div>
            </div>
          </div>
        </div>
        <div class="left-bottom select">
          <div class="title-box">
            <h6>日照市莒县寄派件数据</h6>
            <img class="line-img" src="~@/assets/images/line-blue.png" alt="" />
            <button id="filBtn" @click="filtrate">
              <img src="~@/assets/images/select_icon.png" alt="" />筛选
            </button>
          </div>
          <div class="chart-box">
            <div
              class="filter-con"
              id="filCon"
              data-type="1"
              :style="{ display: isFiltrate ? 'flex' : 'none' }"
            >
              <!-- <div class="select" tabindex="0" hidefocus="true" @click="clickWay"> -->
              <!-- <div class="select-div" >
                                {{wayName}}
                            </div> -->
              <!-- <ul class="select-ul" :class="!isShowWay ? 'isSelect' : ''" :style="{display:isShowWay ? 'block' : 'none'}">
                                {{isShowWay}}
                                <li :class="isWay == 1 ? 'active' : ''" data-value="1" @click="clickisWay(1)">派件</li>
                                <li :class="isWay == 2 ? 'active' : ''" @click="clickisWay(2)" data-value="2">寄件</li>
                            </ul> -->
              <el-select v-model="wayName" placeholder="请选择" popper-class="secondPop">
                <el-option
                  v-for="item in wayOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="companyName" placeholder="请选择" popper-class="secondPop">
                <el-option
                  v-for="item in companyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="expressName" placeholder="请选择" popper-class="secondPop">
                <el-option
                  v-for="item in expressOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- </div> -->
              <!-- <div class="select" tabindex="0" hidefocus="true" @click="clickCompany">
                            <div class="select-div">
                               {{companyName}}
                            </div>
                            <ul class="select-ul company" :style="{display:isShowCom ? 'block' : 'none'}">
                                <li :class="isWay == 1 ? 'active' : ''" @click="clickCom(1)" data-value="">公司</li>
                                <li :class="isWay == 2 ? 'active' : ''" @click="clickCom(2)" data-value="1">顺丰</li>
                                <li :class="isWay == 3 ? 'active' : ''" @click="clickCom(3)" data-value="2">京东</li>
                                <li :class="isWay == 4 ? 'active' : ''" @click="clickCom(4)" data-value="2">EMS</li>
                            </ul>
                        </div> 
                        <div class="select" tabindex="0" hidefocus="true">
                            <div class="select-div">
                                快件类型
                            </div>
                            <ul class="select-ul">
                                <li class="active" data-value="">快件类型</li>
                                <li data-value="0">文件</li>
                                <li data-value="1">物品</li>
                            </ul>
                        </div> -->
            </div>
            <div id="gdMap" class="gd-map"></div>
          </div>
        </div>
      </div>
      <div class="box-center">
        <div class="center-top">
          <h1>智慧物流服务中心</h1>
        </div>
        <div class="center-center">
          <div class="weather-box">
            <div class="data">
              <p class="time" id="time">{{ time }}</p>
              <p id="date">
                <span>{{ date }}</span
                ><span>{{ ampm }}</span
                ><span>周{{ day }}</span>
              </p>
            </div>
            <div class="weather">
              <img id="weatherImg" src="~@/assets/images/weather/weather_img01.png" alt="" />
              <div id="weather">
                <p class="active">多云</p>
                <p>16-22℃</p>
                <p>日照市莒县</p>
              </div>
            </div>
          </div>
          <img src="~@/assets/images/line_bg.png" alt="" />
          <div class="select-box">
            <ul id="barType">
              <li
                :class="expressType == 1 ? 'active' : ''"
                data-value="1"
                @click="postExpressage(1)"
              >
                派件
              </li>
              <li
                :class="expressType == 2 ? 'active' : ''"
                data-value="2"
                @click="postExpressage(2)"
              >
                寄件
              </li>
            </ul>
            <div data-type="2" class="filter-con" style="margin-top: 0.32rem">
              <el-select v-model="comName" placeholder="请选择" popper-class="firstPop">
                <el-option
                  v-for="item in comOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="kjName" placeholder="请选择" popper-class="firstPop">
                <el-option
                  v-for="item in expressOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <div class="select" tabindex="0" hidefocus="true">
                            <div class="select-div">
                                公司
                            </div>
                            <ul class="select-ul company">
                                <li class="active" data-value="">公司</li>
                                <li data-value="1">顺丰</li>
                                <li data-value="2">京东</li>
                                <li data-value="2">EMS</li>
                            </ul>
                        </div>
                        <div class="select" tabindex="0" hidefocus="true">
                            <div class="select-div">
                                快件类型
                            </div>
                            <ul class="select-ul">
                                <li class="active" data-value="">快件类型</li>
                                <li data-value="0">文件</li>
                                <li data-value="1">物品</li>
                            </ul>
                        </div> -->
            </div>
          </div>
        </div>
        <div class="center-bottom">
          <!-- <iframe style="width:100%;height:99%" src="https://lcrm3.lunz.cn/LocatInfoAllPage?imei=863013180426430&KEY=2C6074D0-C8E4-4BA4-A50A-E3A46EAD394A" frameborder="0"></iframe> -->
          <iframe style="width: 100%; height: 99%" :src="iframeUrl" frameborder="0"></iframe>

          <!-- <div class="chart-box">
                    <div id="chart4" style="width:100%;height:95%;"></div>
                </div>
                <div class="city-data">
                    <div class="city-box">
                        <p id="titleQ"><span>全网</span>到珠海</p>
                        <ul class="city-btn" data-city="1">
                            <li class="active">全网</li>
                            <li>ABCDE</li>
                            <li>FGHIJ</li>
                            <li>KLMNO</li>
                            <li>PQRST</li>
                            <li>UVWXYZ</li>
                        </ul>
                        <ul class="city-div" id="city">

                        </ul>
                    </div>
                    <ul class="ranking-box">
                        <li><span></span>
                            <p>城市</p>
                            <p>派件</p>
                        </li>
                    </ul>
                    <div class="enlarge-box">
                        <button class="enlarge-btn" id="fangda"></button>
                        <ul class="modal-btn">
                            <li>
                                <div></div>1</li>
                            <li>
                                <div></div>2</li>
                            <li>
                                <div></div>3</li>
                            <li>
                                <div></div>4</li>
                            <li>
                                <div></div>5</li>
                            <li>
                                <div></div>6</li>
                        </ul>
                    </div>
                </div> -->
        </div>
      </div>
      <div class="box-right">
        <div class="full_box">
          <img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
          <img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
        </div>
        <div class="right-top">
          <div class="title-box">
            <h6 id="barTitle">派件数据</h6>
            <img class="line-img" src="~@/assets/images/line-blue.png" alt="" />
            <button data-state="1" id="tabBtn" @click="clickTable">
              <img src="~@/assets/images/chart_icon.png" alt="" /><span>{{ tableName }}</span>
            </button>
          </div>
          <p class="unit">单位：件</p>
          <div class="chart_box" :style="{ display: isTable ? 'block' : 'none' }">
            <div id="chart3" style="width: 100%; height: 100%"></div>
          </div>
          <div class="data-box" :style="{ display: !isTable ? 'block' : 'none' }">
            <table class="table1">
              <tr>
                <td>入库件</td>
                <td colspan="3" class="table-data dph-data1">{{ tableData.num1 }}</td>
              </tr>
              <tr class="bg-color">
                <td rowspan="2">在库件</td>
                <td rowspan="2" class="table-data dph-data2">{{ tableData.num2 }}</td>
                <td>正常件</td>
                <td class="table-data dph-data3">{{ tableData.num3 }}</td>
              </tr>
              <tr class="bg-color">
                <td>滞留件</td>
                <td class="table-data dph-data5">{{ tableData.num4 }}</td>
              </tr>
              <tr>
                <td rowspan="2">出库件</td>
                <td rowspan="2" class="dph-data6">{{ tableData.num5 }}</td>
                <td>派送件</td>
                <td class="table-data dph-data7">{{ tableData.num6 }}</td>
              </tr>
              <tr>
                <td>自提件</td>
                <td class="table-data dph-data8">{{ tableData.num7 }}</td>
              </tr>
              <tr class="bg-color">
                <td>退签件</td>
                <td colspan="3" class="table-data dph-data9">{{ tableData.num8 }}</td>
              </tr>
              <tr>
                <td>丢失件</td>
                <td colspan="3" class="table-data dph-data4">{{ tableData.num9 }}</td>
              </tr>
            </table>
            <table class="table1" style="display: none">
              <tr>
                <td>入库件</td>
                <td colspan="3" class="table-data mail-data1">1</td>
              </tr>
              <tr class="bg-color">
                <td rowspan="2">在库件</td>
                <td rowspan="2" class="table-data mail-data2">1</td>
                <td>正常件</td>
                <td class="table-data mail-data7">1</td>
              </tr>
              <tr class="bg-color">
                <td>滞留件</td>
                <td class="table-data mail-data4">1</td>
              </tr>

              <tr>
                <td>出库件</td>
                <td colspan="3" class="mail-data6">1</td>
              </tr>
              <tr class="bg-color">
                <td>丢失件</td>
                <td colspan="3" class="mail-data3">1</td>
              </tr>
              <tr>
                <td>撤销件</td>
                <td colspan="3" class="table-data mail-data5">1</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="right-center">
          <div class="title-box">
            <p id="switchBtn">
              <span
                :class="activeType == '1' ? 'active' : ''"
                data-dataType="income"
                @click="expendData(1)"
                >收入数据</span
              >
              <img class="line-img" src="~@/assets/images/line-blue.png" alt="" />
              <span
                data-dataType="expend"
                :class="activeType == '2' ? 'active' : ''"
                @click="expendData(2)"
                >支出数据</span
              >
            </p>
            <img class="line-img" src="~@/assets/images/line-blue.png" alt="" />
            <button id="dateBtn" @click="expendDate">
              <img src="~@/assets/images/data_icon.png" alt="" />日期
            </button>
          </div>
          <div class="data-box">
            <p class="data-number" id="totalProfit">{{ money }}元</p>
            <div class="time-box" id="timeBox" :style="{ display: isExpend ? 'block' : 'none' }">
              <div class="time-div">
                <el-date-picker
                  v-model="startTime"
                  type="date"
                  class="dataPicker"
                  :clearable="false"
                  placeholder=""
                  popper-class="startPop"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
                <!-- <input class="time-input" type="text" value="" id="startTime">
                            <img src="~@/assets/images/selsct_time.png" alt=""> -->
              </div>
              <div class="time-div end">
                <!-- <input class="time-input" type="text" value="" id="endTime">
                            <img src="~@/assets/images/selsct_time.png" alt=""> -->
                <el-date-picker
                  v-model="endTime"
                  type="date"
                  class="dataPicker"
                  :clearable="false"
                  placeholder=""
                  popper-class="startPop secondPicker"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="title-box">
            <button id="setBtn" @click="clickSet">
              <img src="~@/assets/images/settings_icon.png" alt="" />设置
            </button>
          </div>
          <div class="data-box">
            <div class="settings-box">
              <p>
                <img src="~@/assets/images/teacher_icon.png" alt="" />今日值班：<span
                  id="name_a"
                ></span
                ><span id="date_a"></span>
              </p>
              <p>
                <img src="~@/assets/images/people_iocn.png" alt="" />负责人：<span
                  id="lea_a"
                ></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="pop-up">
        <span class="close-pop"></span>
        <h2 class="title">当前到件量</h2>
        <div class="pop-data-box">
          <p>123,456,789</p>
        </div>
      </div>

      <div class="pop-up">
        <span class="close-pop"></span>
        <h2 class="title">派件入库量占比</h2>
        <div class="chart-box pie-chart">
          <div id="pie1"></div>
          <div>
            <div class="pie-data"></div>
          </div>
        </div>
      </div>

      <div class="pop-up">
        <span class="close-pop"></span>
        <h2 class="title">广东省寄派件数据</h2>
        <div class="filter-con pop-filter" style="display: flex" data-type="3">
          <div class="select" tabindex="0" hidefocus="true">
            <div class="select-div">派件</div>
            <ul class="select-ul">
              <li class="active" data-value="1">派件</li>
              <li data-value="2">寄件</li>
            </ul>
          </div>
          <div class="select" tabindex="0" hidefocus="true">
            <div class="select-div">公司</div>
            <ul class="select-ul company">
              <li class="active" data-value="">公司</li>
              <li data-value="1">顺丰</li>
              <li data-value="2">京东</li>
              <li data-value="2">EMS</li>
            </ul>
          </div>
          <div class="select" tabindex="0" hidefocus="true">
            <div class="select-div">快件类型</div>
            <ul class="select-ul">
              <li class="active" data-value="">快件类型</li>
              <li data-value="0">文件</li>
              <li data-value="1">物品</li>
            </ul>
          </div>
        </div>
        <div class="chart-box pop-chart">
          <div id="gdMaps" class="gd-map"></div>
        </div>
      </div>

      <div class="pop-up">
        <span class="close-pop"></span>
        <div class="filter-con pop-filters" style="display: flex" data-type="4">
          <div class="select-pop" tabindex="0" hidefocus="true">
            <ul id="barTypes">
              <li class="active" data-value="1">派件</li>
              <li data-value="2">寄件</li>
            </ul>
          </div>
          <div class="select" tabindex="0" hidefocus="true">
            <div class="select-div">公司</div>
            <ul class="select-ul company">
              <li class="active" data-value="">公司</li>
              <li data-value="1">顺丰</li>
              <li data-value="2">京东</li>
              <li data-value="2">EMS</li>
            </ul>
          </div>
          <div class="select" tabindex="0" hidefocus="true">
            <div class="select-div">快件类型</div>
            <ul class="select-ul">
              <li class="active" data-value="">快件类型</li>
              <li data-value="0">文件</li>
              <li data-value="1">物品</li>
            </ul>
          </div>
        </div>
        <div class="cont-div">
          <div class="chart-box pop-charts">
            <div id="chart4s" style="width: 100%; height: 95%"></div>
          </div>
        </div>
        <div class="cont-div">
          <h2 class="title" id="barTitles">派件数据</h2>
          <button class="btn-class" data-state="1" id="tabBtns">
            <img src="~@/assets/images/chart_icon.png" alt="" /><span>图表</span>
          </button>
          <div class="chart-box pop-chart">
            <div id="chart3s" style="width: 100%; height: 90%"></div>
          </div>
          <div class="data-box" style="top: 25%; width: 8.6rem; display: none">
            <table class="table2">
              <tr>
                <td>入库件</td>
                <td colspan="3" class="table-data dph-data1">0</td>
              </tr>
              <tr class="bg-color">
                <td rowspan="2">在库件</td>
                <td rowspan="2" class="table-data dph-data2">0</td>
                <td>正常件</td>
                <td class="table-data dph-data3">0</td>
              </tr>
              <tr class="bg-color">
                <td>滞留件</td>
                <td class="table-data dph-data5">0</td>
              </tr>
              <tr>
                <td rowspan="2">出库件</td>
                <td rowspan="2" class="dph-data6">0</td>
                <td>派送件</td>
                <td class="table-data dph-data7">0</td>
              </tr>
              <tr>
                <td>自提件</td>
                <td class="table-data dph-data8">0</td>
              </tr>
              <tr class="bg-color">
                <td>退签件</td>
                <td colspan="3" class="table-data dph-data9">0</td>
              </tr>
              <tr>
                <td>丢失件</td>
                <td colspan="3" class="table-data dph-data4">0</td>
              </tr>
            </table>
            <table class="table2" style="display: none">
              <tr>
                <td>入库件</td>
                <td colspan="3" class="table-data mail-data1">0</td>
              </tr>
              <tr class="bg-color">
                <td rowspan="2">在库件</td>
                <td rowspan="2" class="table-data mail-data2">0</td>
                <td>正常件</td>
                <td class="table-data mail-data7">0</td>
              </tr>
              <tr class="bg-color">
                <td>滞留件</td>
                <td class="table-data mail-data4">0</td>
              </tr>

              <tr>
                <td>出库件</td>
                <td colspan="3" class="mail-data6">0</td>
              </tr>
              <tr class="bg-color">
                <td>丢失件</td>
                <td colspan="3" class="mail-data3">0</td>
              </tr>
              <tr>
                <td>撤销件</td>
                <td colspan="3" class="table-data mail-data5">0</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="cont-div">
          <h2 class="title" id="titles"></h2>
          <button class="btn-class" id="dateBtns">
            <img src="~@/assets/images/data_icon.png" alt="" />日期
          </button>
          <div class="data-box pop-time">
            <div class="time-box" id="timeBoxs">
              <div class="time-div">
                <input class="time-input" type="text" value="" id="startTimes" />
                <img src="~@/assets/images/selsct_time.png" alt="" />
              </div>
              <div class="time-div end">
                <input class="time-input" type="text" value="" id="endTimes" />
                <img src="~@/assets/images/selsct_time.png" alt="" />
              </div>
            </div>
          </div>
          <div class="pop-data-box" id="totalProfits">
            <p></p>
          </div>
        </div>
        <div class="pop-data">
          <div class="city-data">
            <div class="city-box">
              <p id="titleQs"><span>全网</span>到珠海</p>
              <ul class="city-btn" data-city="2">
                <li class="active">全网</li>
                <li>ABCDE</li>
                <li>FGHIJ</li>
                <li>KLMNO</li>
                <li>PQRST</li>
                <li>UVWXYZ</li>
              </ul>
              <ul class="city-div" id="citys"></ul>
            </div>
            <ul class="ranking-box">
              <li>
                <span></span>
                <p>城市</p>
                <p>派件</p>
              </li>
              <!--                        <li><span>1</span><p>上海</p><p>1sss25(万件)</p></li>-->
            </ul>
          </div>
        </div>
      </div>
      <div class="pop-up" :style="{ visibility: isSet ? 'visible' : '' }">
        <span class="close-pop" @click="closeSet"></span>
        <h2 class="title">设置</h2>
        <div class="set-div">
          <div class="set-box">
            <label class="four-f" for="">排班日期</label>
            <div class="time-div">
              <el-date-picker
                v-model="scheduleTime"
                type="date"
                class="dataPicker"
                :clearable="false"
                placeholder=""
                popper-class="startPop"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <!-- <input class="time-input" type="text" value="" id="times">
                        <img src="~@/assets/images/selsct_time.png" alt=""> -->
            </div>
          </div>
          <div class="set-box">
            <label for="">值班人</label>
            <input type="text" value="" />
            <button class="plus" id="addT"></button>
            <button class="mineus" id="mineusT" style="display: none"></button>
          </div>
          <div class="set-box">
            <label for="">负责人</label>
            <input type="text" value="" />
            <button class="plus" id="addL"></button>
            <button class="mineus" id="mineusL" style="display: none"></button>
            <button class="add-btn" id="addSet">
              <img src="~@/assets/images/plus.png" alt="" />添加
            </button>
          </div>
          <table class="table3">
            <thead>
              <tr>
                <th>值班人</th>
                <th>排班日期</th>
                <th>负责人</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="tList">
              <!--
                        <tr>
                            <td colspan="4">
                                <p style="width:9.6rem;">暂无数据</p>
                            </td>
                        </tr>
-->
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
            </tbody>
          </table>
          <div class="pages-div mineus">
            <button class="prev"></button>
            <p id="page"><span>0</span>/<span>0</span></p>
            <button class="next"></button>
            <input type="number" />
            <button class="skip">跳转</button>
          </div>
        </div>
        <div class="tishi">日期已存在!</div>
        <div class="edit-div" style="display: none">
          <h4>编辑</h4>
          <span class="close-edit"></span>
          <div class="set-box">
            <label for="">值班人</label>
            <input class="input-edit" id="editT" type="text" value="" />
          </div>
          <div class="set-box">
            <label for="">负责人</label>
            <input class="input-edit" id="editL" type="text" value="" />
          </div>
          <div class="set-box edit-box">
            <button id="qxEdit">取消</button>
            <button id="qdEdit">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import china from "@/assets/json/china.json";
import prefecture from "@/assets/json/prefecture.json"
import isFullscreen  from "@/assets/js/full.js"
import screenfull from "screenfull";
// import prefecture from "@/assets/json/data.json";
export default {
  name: "DashBoard",
  data() {
    return {
      isFullFlag:false,
      isSupport:false,
      time: "00:00:00",
      timer: null,
      isTable: true,
      ampm: "am",
      date: "2022/12/09",
      day: "2",
      money: "123,456.5",
      activeType: "1",
      expressType: "1",
      isExpend: false,
      isFiltrate: false,
      isSet: false,
      tableName: "图表",
      isWay: 1,
      imei: "",
      key: "",
      iframeUrl: "",
      charData: [
        {
          name: "顺丰",
          value: 192581,
          percent: "30.8721",
        },
        {
          name: "京东",
          value: 215635,
          percent: "34.076",
        },
        {
          name: "EMS",
          value: 224585,
          percent: "35.49",
        },
      ],
      myChart: null,
      myChart1: null,
      xData: [],
      yData: [],
      RealData: [],
      borderData: [],
      startColor: [
        "#0e94eb",
        "#c440ef",
        "#efb013",
        "#2fda07",
        "#d8ef13",
        "#2e4af8",
        "#0eebc4",
        "#f129b1",
        "#17defc",
        "#f86363",
      ],
      borderStartColor: [
        "#0077c5",
        "#a819d7",
        "#c99002",
        "#24bc00",
        "#b6cb04",
        "#112ee2",
        "#00bd9c",
        "#ce078f",
        "#00b2cd",
        "#ec3c3c",
      ],
      // chardata1:[
      //     {name: '广州市',value: 120057.34},{name: '韶关市',value: 15477.48},{name: '深圳市',value: 131686.1},{name: '珠海市',value: 6992.6},
      //     {name: '汕头市',value: 44045.49},{name: '佛山市',value: 40689.64},{name: '江门市',value: 37659.78},{name: '湛江市',value: 45180.97},
      //     {name: '茂名市',value: 5204.26},{name: '肇庆市',value: 21900.9},{name: '惠州市',value: 4918.26},{name: '梅州市',value: 5881.84},
      //     {name: '汕尾市',value: 4178.01},{name: '河源市',value: 2227.92},{name: '阳江市',value: 2180.98},{name: '清远市',value: 9172.94},
      //     {name: '东莞市',value: 3368},{name: '中山市',value: 306.98},{name: '潮州市',value: 810.66},{name: '揭阳市',value: 542.2},
      //     {name: '云浮市',value: 256.38}
      // ],
      chardata1: [
        { name: "夏庄镇", value: 120057.34 },
        { name: "库山乡", value: 15477.48 },
        { name: "棋山镇", value: 131686.1 },
        { name: "安庄镇", value: 6992.6 },
        { name: "果庄乡", value: 44045.49 },
        { name: "洛河镇", value: 40689.64 },
        { name: "招贤镇", value: 37659.78 },
        { name: "桑园镇", value: 45180.97 },
        { name: "阎庄镇", value: 5204.26 },
        { name: "城阳街道", value: 21900.9 },
        { name: "莒县经济开发区", value: 4918.26 },
        { name: "峤山镇", value: 5881.84 },
        { name: "浮来山镇", value: 4178.01 },
        { name: "店子集镇", value: 2227.92 },
        { name: "龙山镇", value: 2180.98 },
        { name: "刘官庄镇", value: 9172.94 },
        { name: "陵阳镇", value: 3368 },
        { name: "长岭镇", value: 306.98 },
        { name: "寨里河镇", value: 810.66 },
        { name: "东莞镇", value: 542.2 },
        { name: "小店镇", value: 256.38 },
      ],
      myChart1: null,
      myCharts1: null,
      myChart2: null,
      myCharts2: null,
      tableData: {
        num1: 0,
        num2: 0,
        num3: 0,
        num4: 0,
        num5: 0,
        num6: 0,
        num7: 0,
        num8: 0,
        num9: 0,
      },
      isShowWay: false,
      companyName: "1",
      isShowCom: false,
      wayOptions: [
        {
          value: "1",
          label: "派件",
        },
        {
          value: "2",
          label: "寄件",
        },
      ],
      wayName: "1",
      companyOptions: [
        { value: "1", label: "公司" },
        { value: "2", label: "顺丰" },
        { value: "3", label: "京东" },
        { value: "4", label: "EMS" },
      ],
      expressName: "0",
      expressOptions: [
        { value: "0", label: "文件" },
        { value: "2", label: "物品" },
      ],
      comName: "1",
      comOptions: [
        { value: "1", label: "公司" },
        { value: "2", label: "顺丰" },
        { value: "3", label: "京东" },
        { value: "4", label: "EMS" },
      ],
      kjName: "0",
      startTime: "",
      endTime: "",
      scheduleTime: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    this.getTime();
    this.$nextTick(() => {
      this.createCharts();
      this.createCharts1();
      this.createCharts2(1, "");
    });
  },
  mounted() {
    this.isSupport=document.fullscreenEnabled
    // 监听页面全屏
		window.addEventListener("fullscreenchange", (e)=> {
		  	if (this.isSupport) {
          document.fullscreenElement ? this.isFullFlag = true : this.isFullFlag = false
        }
        console.log(this.isSupport)
		})
    window.addEventListener('keydown', this.handleKeyDown, true)
    this.imei = "41000002503";
    this.key = "266843ed-5d4f-472c-beec-e5e50a114d47";
    // this.iframeUrl =
    //   "https://gatewayapi.lunz.cn/api/ApiPlat/LocatInfoAllPage?imei=" +
    //   this.imei +
    //   "&KEY=" +
    //   this.key;
  },
  methods: {
    handleKeyDown(e) {
      console.log('ces')
    		if (e.keyCode === 122) {
          console.log(1111)
        		e.preventDefault() // 阻止默认事件
            		e.stopPropagation() // 阻止冒泡事件
            		this.clickFun()
        	}
    	},
    //   isScreenFull() {
    //   if (!screenfull.isEnabled) {
    //     return false;
    //   }
    //   // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
    //   // 无需自己再判断当前屏幕状态
    //     screenfull.toggle();
    // },
    clickFun(){
      if (this.isSupport) {
        if (document.fullscreenElement) {
          //document.exitFullscreen()退出全屏模式的方法
          document.exitFullscreen();
          this.isFullFlag = false;
        } else {
          //requestFullscreen(),请求全屏的方法
          document.documentElement.requestFullscreen();
          this.isFullFlag = true;
        }
	    }
      console.log(this.isFullFlag)
      // this.isFullFlag =!this.isFullFlag
			// if (!screenfull.enabled) {
			// 	this.$message({
			// 		 message: 'Your browser does not work',
			// 		 type: 'warning'
			// 	})
			// 	return false
			// }
			// screenfull.toggle()
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.ampm = hours < 12 ? "am" : "pm";
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
        // $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
        // $('#date').html('')
      }, 1000);
    },
    createCharts() {
      this.myChart = this.$echarts.init(document.getElementById("pie"));
      this.myChart1 = this.$echarts.init(document.getElementById("pie1"));
      window.addEventListener("resize",  ()=> {
        this.myChart.resize();
        this.myChart1.resize();
      });
      var str = "";
      for (var i = 0; i < this.charData.length; i++) {
        str +=
          '<p><span><i class="legend" style="background:' +
          this.startColor[i] +
          '"></i></span>' +
          this.charData[i].name +
          '<span class="pie-number" style="color:' +
          this.startColor[i] +
          '">' +
          this.charData[i].value +
          "</span>" +
          Number(this.charData[i].percent).toFixed(2) +
          "%</p>";
      }
      document.getElementById("pie-data").innerHTML += str;
      this.charData.map((a, b) => {
        this.xData.push(a.name);
        this.yData.push(a.value);
      });
      this.charData.map((item, index) => {
        var newobj = this.deepCopy(item);
        var newobj1 = this.deepCopy(item);
        this.RealData.push(newobj);
        this.borderData.push(newobj1);
      });
      this.RealData.map((item, index) => {
        item.itemStyle = {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.startColor[index], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.startColor[index], // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        };
      });
      this.borderData.map((item, index) => {
        item.itemStyle = {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.borderStartColor[index], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.borderStartColor[index], // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        };
      });
      var option = {
        tooltip: {
          trigger: "item",
          //            position: ['30%', '50%'],
          confine: true,
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          // 主要展示层的
          {
            radius: ["50%", "85%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            name: "派件入库量占比内容",
            data: this.RealData,
          },
          // 边框的设置
          {
            radius: ["45%", "50%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: this.borderData,
          },
        ],
      };

      this.myChart.setOption(option);
      this.myChart1.setOption(option);
    },
    createCharts1() {
      this.myChart1 = this.$echarts.init(document.getElementById("gdMap"));
      this.myCharts1 = this.$echarts.init(document.getElementById("gdMaps"));
      // this.$echarts.registerMap("莒县", prefecture, {});
      // this.$echarts.registerMap("莒县", china, {});
      this.$echarts.registerMap("莒县", prefecture, {});
      window.addEventListener("resize", ()=> {
        this.myChart1.resize();
        this.myCharts1.resize();
      });
      var yMax = 0;
      for (var j = 0; j < this.chardata1.length; j++) {
        if (yMax < this.chardata1[j].value) {
          yMax = this.chardata1[j].value;
        }
      }
      this.myChart1.hideLoading();
      this.myCharts1.hideLoading();
      var option = {
        animation: true,
        tooltip: {
          show: true,
        },
        visualMap: {
          min: 0,
          max: yMax,
          text: ["高", "低"],
          orient: "horizontal",
          itemWidth: 15,
          itemHeight: 200,
          right: 0,
          bottom: 30,
          inRange: {
            color: ["#75ddff", "#0e94eb"],
          },
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: "数据名称",
            type: "map",
            mapType: "莒县",
            label: {
              show: true,
            },
            selectedMode: "multiple",
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>{c} (件)",
            },
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "#0e94eb",
                label: {
                  show: false,
                },
              },
              emphasis: {
                // 也是选中样式
                borderWidth: 1,
                borderColor: "#fff",
                backgroundColor: "red",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            data: this.chardata1,
          },
        ],
      };
      console.log(option.series)

      this.myChart1.setOption(option);
      this.myCharts1.setOption(option);
    },
    createCharts2(type, chartType) {
      this.myChart2 = this.$echarts.init(document.getElementById("chart3"));
      this.myCharts2 = this.$echarts.init(document.getElementById("chart3s"));
      window.addEventListener("resize", ()=> {
        this.myChart2.resize();
        this.myCharts2.resize();
      });
      //    设置背景阴影的参数，获取数据的最大值
      var data; //横坐标数据，不动
      var data_; //模拟数据
      if (type == 1) {
        data_ = [
          {
            name: "入库件",
            value: 584,
          },
          {
            name: "滞留件",
            value: 152,
          },
          {
            name: "丢失件",
            value: 100,
          },
          {
            name: "正常件",
            value: 689,
          },
          {
            name: "派送件",
            value: 200,
          },
          {
            name: "自提件",
            value: 121,
          },
          {
            name: "退签件",
            value: 92,
          },
        ];
      } else if (type == 2) {
        data_ = [
          {
            name: "入库件",
            value: 568,
          },
          {
            name: "丢失件",
            value: 287,
          },
          {
            name: "滞留件",
            value: 120,
          },
          {
            name: "撤销件",
            value: 152,
          },
          {
            name: "出库件",
            value: 125,
          },
          {
            name: "正常件",
            value: 122,
          },
        ];
      }
      var series_data; //绘制图表的数据
      //绘制图表
      var yMax = 0;
      for (var j = 0; j < data_.length; j++) {
        if (yMax < data_[j].value) {
          yMax = data_[j].value;
        }
      }
      var dataShadow = [];
      for (var i = 0; i < 10; i++) {
        dataShadow.push(yMax * 2);
      }
      if (type == 1) {
        data = ["入库件", "在库件", "出库件", "退签件", "丢失件"];
        this.tableData.num1 = data_[0].value;
        this.tableData.num2 = data_[1].value + data_[3].value;
        this.tableData.num3 = data_[3].value;
        this.tableData.num4 = data_[2].value;
        this.tableData.num5 = data_[1].value;
        this.tableData.num6 = data_[4].value + data_[5].value;
        this.tableData.num7 = data_[4].value;
        this.tableData.num8 = data_[5].value;
        this.tableData.num9 = data_[6].value;

        series_data = [
          {
            // For shadow
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(14, 148, 235, 0.102)",
              },
            },
            data: dataShadow,
            animation: false,
          },
          {
            name: "入库件",
            type: "bar",
            barGap: "-100%",
            barWidth: "40%",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#0e94eb",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [data_[0], 0, 0, 0, 0],
          },
          {
            name: "滞留件",
            type: "bar",
            stack: "在库件",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,.9)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, data_[1], 0, 0, 0],
          },
          {
            name: "丢失件",
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,0.4)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, 0, 0, data_[2]],
          },
          {
            name: "正常件",
            type: "bar",
            stack: "在库件",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,0.3)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, data_[3], 0, 0, 0],
          },
          {
            name: "派送件",
            type: "bar",
            stack: "出库件",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(196,64,239,0.8)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, data_[4], 0, 0],
          },
          {
            name: "自提件",
            type: "bar",
            stack: "出库件",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(196,64,239,0.4)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, data_[5], 0, 0],
          },
          {
            name: "退签件",
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(219,44,44,0.8)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, 0, data_[6], 0],
          },
        ];
      } else if (type == 2) {
        data = ["入库件", "在库件", "出库件", "丢失件", "撤销件"];
        this.tableData.num1 = data_[0].value;
        this.tableData.num2 = data_[1].value + data_[3].value;
        this.tableData.num3 = data_[3].value;
        this.tableData.num4 = data_[2].value;
        this.tableData.num5 = data_[1].value;
        this.tableData.num6 = data_[4].value + data_[5].value;
        this.tableData.num7 = data_[4].value;
        this.tableData.num8 = data_[5].value;
        this.tableData.num9 = data_[6].value;
        series_data = [
          {
            // For shadow
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(14, 148, 235, 0.102)",
              },
            },
            data: dataShadow,
            animation: false,
          },
          {
            name: "入库件",
            barGap: "-100%",
            barWidth: "40%",
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#0e94eb",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [data_[0], 0, 0, 0, 0],
          },
          {
            name: "正常件",
            type: "bar",
            stack: "在库件",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,.9)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, data_[5], 0, 0, 0, 0],
          },
          {
            name: "丢失件",
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,.9)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, 0, data_[1], 0],
          },
          {
            name: "滞留件",
            type: "bar",
            xAxisIndex: 1,
            stack: "在库件",
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,0.4)",
              },
              emphasis: {
                opacity: 1,
              },
            },

            data: [0, data_[2], 0, 0, 0],
          },
          {
            name: "撤销件",
            type: "bar",
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(239,176,19,0.3)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, 0, 0, data_[3]],
          },
          {
            name: "出库件",
            type: "bar",
            xAxisIndex: 1,
            stack: "退签件",
            itemStyle: {
              normal: {
                color: "rgba(196,64,239,0.8)",
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [0, 0, data_[4], 0, 0],
          },
        ];
      }
      var option = {
        title: "",
        grid: {
          bottom:"8%"
          // top: "10%",
          // containLabel: true,
        },
        tooltip: {
          show: true,
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: data,
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            type: "category",
            position: "bottom",
            data: data,
            boundaryGap: true,
            // offset: 40,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            show: false,
            data: dataShadow,
            axisLabel: {
              inside: true,
              textStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            z: 10,
          },
        ],
        yAxis: [
          {
            show: true,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#0e94eb",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#0e94eb",
            },
          },
          {
            show: false,
            type: "value",
            nameTextStyle: {
              color: "#0e94eb",
            },
            axisLabel: {
              color: "#0e94eb",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#999",
              },
            },
          },
        ],
        //        color: ['#e54035'],
        series: series_data,
      };
      if (chartType === "") {
        this.myChart2.clear();
        this.myCharts2.clear();
        this.myChart2.setOption(option);
        this.myCharts2.setOption(option);
      } else if (chartType === 0) {
        this.myChart2.clear();
        this.myChart2.setOption(option);
      } else if (chartType === 1) {
        this.myCharts2.clear();
        this.myCharts2.setOption(option);
      }
    },
    expendData(type) {
      this.activeType = type;
      this.money = type == 1 ? "123456.5" : "32,111.4";
    },
    expendDate() {
      this.isExpend = !this.isExpend;
    },
    postExpressage(type) {
      this.expressType = type;
      this.$nextTick(() => {
        this.createCharts2(type, "");
      });
    },
    filtrate() {
      console.log(this.isFiltrate);
      this.isFiltrate = !this.isFiltrate;
    },
    clickTable() {
      console.log(this.isTable);
      this.isTable = !this.isTable;
      this.tableName = this.isTable ? "图表" : "表格";
    },
    clickSet() {
      this.isSet = !this.isSet;
    },
    closeSet() {
      this.isSet = false;
      console.log(this.isSet);
    },
    clickWay() {
      this.isShowWay = !this.isShowWay;
    },
    clickisWay(way) {
      this.isShowWay = false;
      this.isWay = way;
      this.wayName = way == 1 ? "派件" : "寄件";
      console.log(this.isShowWay);
    },
    clickCompany() {
      this.isShowCom = true;
    },
    clickCom(way) {
      this.companyName = way == 1 ? "公司" : way == 2 ? "顺丰" : way == 3 ? "京东" : "EMS";
      this.isShowCom = false;
    },
    deepCopy(obj) {
      if (typeof obj !== "object") {
        return obj;
      }
      var newobj = {};
      for (var attr in obj) {
        newobj[attr] = obj[attr];
      }
      return newobj;
    },
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown)
    window.removedEventListener('fullscreenchange',  (e)=> {
		  	if (this.isSupport) {
          document.fullscreenElement ? this.isFullFlag = true : this.isFullFlag = false
        }
        console.log(this.isSupport)
		})
  },
};
</script>

<style lang="scss">
@import "@/styles/style.css";
.contant_box {
  width: 100%;
  height: 100%;
}

.filter-con {
  .el-select {
    width: 1.6rem;
    height: 100%;

    .el-input {
      width: 100%;
      height: 100%;
      font-size: 0.18rem;

      .el-input__inner {
        font-size: 0.18rem;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 1px solid #0e94ea;
        background: transparent;
        color: #fff;

        &:focus {
          border: 1px solid #0e94ea;
        }
      }
      .el-input__icon {
        line-height: 0;
        font-size: 0.25rem;
      }
    }
  }
}
.el-select-dropdown {
  border: none !important;
  width: 1.6rem !important;
  border-radius: 0 !important;
  .el-select-dropdown__list {
    padding: 0 !important;
    .el-select-dropdown__item {
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.18rem;
    }
    .el-select-dropdown__item.hover {
      background: #0e94eb;
      color: #fff;
    }
    .el-select-dropdown__item.selected {
      background: #0e94eb;
      font-weight: 500;
      color: #fff;
    }
  }
  .popper__arrow {
    display: none !important;
  }
}
.firstPop {
  top: 1.8rem !important;
}
.secondPop {
  top: 6.2rem !important;
}
// .time-box .set-box{
.time-div {
  border: 1px solid #0e94ea;
  height: 0.36rem;
  width: 1.8rem;

  .dataPicker {
    width: 100% !important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0;
    color: #fff;

    .el-input__inner {
      border-radius: 0;
      border: 0;
      background: transparent;
      font-size: 0.18rem;
      height: 100%;
      margin-top: 0;
      width: 100%;
      position: absolute;
      top: 0;
      color: #fff;
      background: rgba(14, 148, 234, 0.2);
      padding: 0 0.4rem;
    }

    .el-input__prefix {
      font-size: 0.18rem;
      color: #fff;

      .el-input__icon {
        line-height: 0;
        text-align: left;
      }
    }
  }
}
// }
.secondPicker {
  left: 15.54rem !important;
}
.startPop {
  width: 3.5rem !important;
  height: 4rem;
  margin-top: 0.2rem;
  line-height: 0.2rem !important;
  margin-top: 0.12rem !important;

  .el-picker-panel__body-wrapper {
    width: 100%;
    height: 100%;
    line-height: 0.2rem;

    .el-picker-panel__body {
      width: 100%;
      height: 100%;

      .el-date-picker__header {
        margin: 0 0.28rem;
        line-height: 0.1rem;
        height: 0.8rem;

        .el-date-picker__header-label {
          font-size: 0.18rem;
          position: relative;
          top: -0.72rem;
        }
        .el-date-picker__header-label:last-child {
          margin-left: 1rem !important;
        }

        .el-picker-panel__icon-btn {
          font-size: 0.2rem;
        }
      }
      .el-picker-panel__content {
        width: 100% !important;
        margin: 0rem;

        .el-date-table {
          font-size: 0.18rem;

          .el-date-table__row {
            td {
              height: 0.2rem;

              div {
                height: 0.2rem;

                span {
                  width: 0.4rem;
                  height: 0.4rem;
                  line-height: 0.4rem;
                }
              }
            }
          }
        }
      }
    }

    .popper__arrow {
      display: none !important;
    }
  }
  .el-date-picker {
    width: 100% !important;
  }
}
.el-popper .popper__arrow {
  display: none !important;
}
</style>
