<template>
  <div id="bigScreen" class="bigScreen" :class="[isSystem?'form_mac':'']" >
    <div class="bigScreen_one flex">
      <!-- 累计完单量 -->
      <div class="countList">
        <div class="countCon">
          <el-tooltip :content="tipsList['累计完单量']" effect="dark" placement="top-start">
            <h2>累计完单量<img :src="explainIcon" ></h2>
          </el-tooltip>
          <div class="numCon flex">
            <h3>{{ numFormat(screenData.mianData.cntOrderDone) }}</h3>
            <dl>
              <dd>日环比:
                <i :style="{color:setColor(screenData.mianData.cntOrderDoneRt)}" :class="[Number(screenData.mianData.cntOrderDoneRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                <span :style="{color:setColor(screenData.mianData.cntOrderDoneRt)}">{{ screenData.mianData.cntOrderDoneRt }}%</span>
              </dd>
              <dd>周同比:
                <i :style="{color:setColor(screenData.mianData.cntOrderDoneWow)}" :class="[Number(screenData.mianData.cntOrderDoneWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                <span :style="{color:setColor(screenData.mianData.cntOrderDoneWow)}">{{ screenData.mianData.cntOrderDoneWow }}%</span>
              </dd>
            </dl>
          </div>
          <div class="proge">
            <el-progress  :percentage="screenData.isShowTarget?screenData.mianData.rateOrderTarget:0" :show-text="false"/>
            <p>
              <span v-if="screenData.isShowTarget">目标：{{ screenData.mianData.cntOrderDoneTarget > 0 ? screenData.mianData.cntOrderDoneTarget :'未设置' }}</span>
              <span v-if="screenData.isShowTarget">完成率：{{ screenData.mianData.rateOrderTarget >0 ?screenData.mianData.rateOrderTarget+"%":'--' }}</span>
            </p>
          </div>
        </div>
        <div class="ulList">
          <ul>
            <li>
              <el-tooltip :content="tipsList['累计实际里程费']" effect="dark" placement="top-start">
                <h2>累计实际里程费<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{numFormat(screenData.mianData.priceGMV) }}<span>元</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.priceGMVRt)}" :class="[Number(screenData.mianData.priceGMVRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.priceGMVRt)}">{{ screenData.mianData.priceGMVRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.priceGMVWow)}" :class="[Number(screenData.mianData.priceGMVWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.priceGMVWow)}">{{ screenData.mianData.priceGMVWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计发单量']" effect="dark" placement="top">
                <h2>累计发单量<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{numFormat(screenData.mianData.cntOrderCall) }}<span>单</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderCallRt)}" :class="[Number(screenData.mianData.cntOrderCallRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderCallRt)}">{{ screenData.mianData.cntOrderCallRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderCallWow)}" :class="[Number(screenData.mianData.cntOrderCallWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderCallWow)}">{{ screenData.mianData.cntOrderCallWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计匹配量']" effect="dark" placement="top">
                <h2>累计匹配量<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{numFormat(screenData.mianData.cntOrderDsp) }}<span>单</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderDspRt)}" :class="[Number(screenData.mianData.cntOrderDspRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderDspRt)}">{{ screenData.mianData.cntOrderDspRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderDspWow)}" :class="[Number(screenData.mianData.cntOrderDspWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderDspWow)}">{{ screenData.mianData.cntOrderDspWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计应答量']" effect="dark" placement="top">
                <h2>累计应答量<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{ numFormat(screenData.mianData.cntOrderAnswer)}}<span>单</span></h3>
                <dl>
                  <dd>日环比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderAnswerRt)}" :class="[Number(screenData.mianData.cntOrderAnswerRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderAnswerRt)}">{{ screenData.mianData.cntOrderAnswerRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntOrderAnswerWow)}" :class="[Number(screenData.mianData.cntOrderAnswerWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntOrderAnswerWow)}">{{ screenData.mianData.cntOrderAnswerWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 累计匹配司机数 -->
      <div class="countList">
        <div class="countCon">
          <el-tooltip :content="tipsList['累计匹配司机数']" effect="dark" placement="top">
            <h2>累计匹配司机数<img :src="explainIcon" ></h2>
          </el-tooltip>
          <div class="numCon flex">
            <h3>{{ numFormat(screenData.mianData.cntDriDsp)}}</h3>
            <dl>
              <dd>
                日环比:
                <i :style="{color:setColor(screenData.mianData.cntDriDspRt)}" :class="[Number(screenData.mianData.cntDriDspRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                <span :style="{color:setColor(screenData.mianData.cntDriDspRt)}">{{ screenData.mianData.cntDriDspRt }}%</span>
              </dd>
              <dd>
                周同比:
                <i :style="{color:setColor(screenData.mianData.cntDriDspWow)}" :class="[Number(screenData.mianData.cntDriDspWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                <span :style="{color:setColor(screenData.mianData.cntDriDspWow)}">{{ screenData.mianData.cntDriDspWow }}%</span>
              </dd>
            </dl>
          </div>
          <div class="proge">
            <el-progress  :percentage="screenData.isShowTarget?screenData.mianData.rateDriTarget:0" :show-text="false"/>
            <p>
              <span v-if="screenData.isShowTarget">目标：{{ screenData.mianData.cntDriDspTarget > 0 ?screenData.mianData.cntDriDspTarget:'未设置' }}</span>
              <span v-if="screenData.isShowTarget">完成率：{{ screenData.mianData.rateDriTarget > 0 ? screenData.mianData.rateDriTarget+"%":'--' }}</span>
            </p>
          </div>
        </div>
        <div class="ulList">
          <ul>
            <li>
              <el-tooltip :content="tipsList['出车中司机数']" effect="dark" placement="top">
                <h2>出车中司机数<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{numFormat(screenData.mianData.cntDriWorking)}}<span>人</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntDriWorkingRt)}" :class="[Number(screenData.mianData.cntDriWorkingRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriWorkingRt)}">{{ screenData.mianData.cntDriWorkingRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntDriWorkingWow)}" :class="[Number(screenData.mianData.cntDriWorkingWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriWorkingWow)}">{{ screenData.mianData.cntDriWorkingWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['听单中司机数']" effect="dark" placement="top">
                <h2>听单中司机数<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{numFormat(screenData.mianData.cntDriReady)}}<span>人</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntDriReadyRt)}" :class="[Number(screenData.mianData.cntDriReadyRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriReadyRt)}">{{ screenData.mianData.cntDriReadyRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntDriReadyWow)}" :class="[Number(screenData.mianData.cntDriReadyWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriReadyWow)}">{{ screenData.mianData.cntDriReadyWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计出车司机数']" effect="dark" placement="top">
                <h2>累计出车司机数<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{ numFormat(screenData.mianData.cntDriWork)}}<span>人</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntDriWorkRt)}" :class="[Number(screenData.mianData.cntDriWorkRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriWorkRt)}">{{ screenData.mianData.cntDriWorkRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntDriWorkWow)}" :class="[Number(screenData.mianData.cntDriWorkWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriWorkWow)}">{{ screenData.mianData.cntDriWorkWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计应答司机数']" effect="dark" placement="top">
                <h2>累计应答司机数<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{ numFormat(screenData.mianData.cntDriAnswer) }}<span>人</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntDriAnswerRt)}" :class="[Number(screenData.mianData.cntDriAnswerRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriAnswerRt)}">{{ screenData.mianData.cntDriAnswerRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntDriAnswerWow)}" :class="[Number(screenData.mianData.cntDriAnswerWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriAnswerWow)}">{{ screenData.mianData.cntDriAnswerWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
            <li>
              <el-tooltip :content="tipsList['累计完单司机数']" effect="dark" placement="top">
                <h2>累计完单司机数<img :src="explainIcon" ></h2>
              </el-tooltip>
              <div class="numCon">
                <h3>{{ numFormat(screenData.mianData.cntDriDone) }}<span>人</span></h3>
                <dl>
                  <dd>
                    日环比:
                    <i :style="{color:setColor(screenData.mianData.cntDriDoneRt)}" :class="[Number(screenData.mianData.cntDriDoneRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriDoneRt)}">{{ screenData.mianData.cntDriDoneRt }}%</span>
                  </dd>
                  <dd>
                    周同比:
                    <i :style="{color:setColor(screenData.mianData.cntDriDoneWow)}" :class="[Number(screenData.mianData.cntDriDoneWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.cntDriDoneWow)}">{{ screenData.mianData.cntDriDoneWow }}%</span>
                  </dd>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="bigScreen_two">
      <!-- 订单分时 -->
      <div id="faOrderBox" class="bigScreen_orderTime">
        <h2>订单分时
          <el-select v-model="screenData.orderValue" :popper-append-to-body="false" placeholder="请选择" size="mini" @change="changeOrder">
            <el-option v-for="(item,index) in screenData.selectOptions.orderOptions" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </h2>
        <!-- 订单分时 -->
        <orderTime v-if="screenData.orderTimeData" ref="orderTime" :key="`orderTime${screenData.boxId}`" :boxId="screenData.boxId" :order-time-data="screenData.orderTimeData"/>
      </div>
      <!-- 运力分时 -->
      <div id="faMeansBox" class="bigScreen_meansTime">
        <h2>运力分时
          <el-select v-model="screenData.meansValue" :popper-append-to-body="false" placeholder="请选择" size="mini" @change="changeMeans">
            <el-option v-for="(item,index) in screenData.selectOptions.meansOptions" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </h2>
        <!-- 运力分时 -->
        <meansTime v-if="screenData.meansTimeData" ref="meansTime" :key="`meansTime${screenData.boxId}`" :boxId="screenData.boxId" :means-time-data="screenData.meansTimeData"/>
      </div>
    </div>

    <div class="bigScreen_three">
      <!-- 订单漏斗 -->
      <div class="bigScreen_funnel" style="width:29%">
        <h2>订单漏斗</h2>
        <el-tooltip :content="tipsList['完单率']" effect="dark" placement="top">
          <h3>完单率{{ screenData.mianData.rateOrderCallDone }}%<img style="margin-left: 8px;" :src="explainIcon" ></h3>
        </el-tooltip>
        <div class="listItem">
          <div class="itemL">
            <span>累计发单量</span>
            <p class="star">
              <span :style="{width:'100%'}"/>
              <strong>{{numFormat(screenData.mianData.cntOrderCall) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_one">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['匹配率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">匹配率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">{{ screenData.mianData.rateOrderDsp }}%</span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow"><span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderDspRt)}" :class="[Number(screenData.mianData.rateOrderDspRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderDspRt)}">{{ screenData.mianData.rateOrderDspRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderDspWow)}" :class="[Number(screenData.mianData.rateOrderDspWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderDspWow)}">{{ screenData.mianData.rateOrderDspWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计匹配量</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntOrderDsp,screenData.mianData.cntOrderCall)}"/>
              <strong>{{ numFormat(screenData.mianData.cntOrderDsp) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_one">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['匹配应答率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">匹配应答率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">
                      {{ screenData.mianData.rateOrderDspAnswer }}%
                    </span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow"><span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderDspAnswerRt)}" :class="[Number(screenData.mianData.rateOrderDspAnswerRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderDspAnswerRt)}">{{ screenData.mianData.rateOrderDspAnswerRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderDspAnswerWow)}" :class="[Number(screenData.mianData.rateOrderDspAnswerWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderDspAnswerWow)}">{{ screenData.mianData.rateOrderDspAnswerWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计应答量</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntOrderAnswer,screenData.mianData.cntOrderCall)}"/>
              <strong>{{numFormat(screenData.mianData.cntOrderAnswer) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_one">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['应答后完成率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">应答后完成率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">
                      {{ screenData.mianData.rateOrderAnswerDone }}%
                    </span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow">
                    <span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderAnswerDoneRt)}" :class="[Number(screenData.mianData.rateOrderAnswerDoneRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderAnswerDoneRt)}">{{ screenData.mianData.rateOrderAnswerDoneRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateOrderAnswerDoneWow)}" :class="[Number(screenData.mianData.rateOrderAnswerDoneWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateOrderAnswerDoneWow)}">{{ screenData.mianData.rateOrderAnswerDoneWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计完单量</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntOrderDone,screenData.mianData.cntOrderCall)}"/>
              <strong>{{numFormat(screenData.mianData.cntOrderDone) }}</strong>
            </p>
          </div>
        </div>
      </div>
      <div id="faMeansBox" class="bigScreen_funnel" style="width:40%">
        <!-- 中间图表 -->
        <amongTime v-if="screenData.amongTimeData" ref="amongTime" :key="`amongTime${screenData.boxId}`"  :boxId="screenData.boxId" :among-time-data="screenData.amongTimeData"/>
      </div>
      <!-- 运力漏斗 -->
      <div class="bigScreen_funnel" style="width:29%">
        <h2>运力漏斗</h2>
        <el-tooltip :content="tipsList['出车司机完单率']" effect="dark" placement="top">
          <h3>出车司机完单率：{{ screenData.mianData.rateDriWorkDone }}%<img style="margin-left: 8px;" :src="explainIcon" ></h3>
        </el-tooltip>
        <div class="listItem">
          <div class="itemL">
            <span>累计出车司机数</span>
            <p class="star">
              <span :style="{width:'100%'}"></span>
              <strong>{{ numFormat(screenData.mianData.cntDriWork) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_two">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['出车司机匹配率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">出车司机匹配率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">
                      {{ screenData.mianData.rateDriDsp }}%
                    </span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow"><span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriDspRt)}" :class="[Number(screenData.mianData.rateDriDspRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriDspRt)}">{{ screenData.mianData.rateDriDspRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriDspWow)}" :class="[Number(screenData.mianData.rateDriDspWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriDspWow)}">{{ screenData.mianData.rateDriDspWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计匹配司机数</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntDriDsp,screenData.mianData.cntDriWork)}"/>
              <strong>{{ numFormat(screenData.mianData.cntDriDsp) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_two">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['匹配司机应答率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">匹配司机应答率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">
                      {{ screenData.mianData.rateDriAnswer }}%
                    </span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow">
                    <span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriAnswerRt)}" :class="[Number(screenData.mianData.rateDriAnswerRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriAnswerRt)}">{{ screenData.mianData.rateDriAnswerRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriAnswerWow)}" :class="[Number(screenData.mianData.rateDriAnswerWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriAnswerWow)}">{{ screenData.mianData.rateDriAnswerWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计应答司机数</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntDriAnswer,screenData.mianData.cntDriWork)}"/>
              <strong>{{numFormat(screenData.mianData.cntDriAnswer) }}</strong>
            </p>
          </div>
          <div class="itemR itemR_two">
            <ul>
              <li>
                <img :src="arrowRateIcon" >
                <dl class="dl-wrap">
                  <dd>
                    <el-tooltip :content="tipsList['应答司机完单率']" effect="dark" placement="top">
                      <label class="label-wrap">
                        <span class="label-tip">应答司机完单率</span>
                        <img :src="explainIcon" >
                      </label>
                    </el-tooltip>
                  </dd>
                  <dd>
                    <span class="num-tip">
                      {{ screenData.mianData.rateDriAnswerDone }}%
                    </span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dd class="bigscreen_rtwow">
                    <span>日环比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriAnswerDoneRt)}" :class="[Number(screenData.mianData.rateDriAnswerDoneRt)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriAnswerDoneRt)}">{{ screenData.mianData.rateDriAnswerDoneRt }}%</span>
                  </dd>
                  <dd class="bigscreen_rtwow">
                    <span>周同比：</span>
                    <i :style="{color:setColor(screenData.mianData.rateDriAnswerDoneWow)}" :class="[Number(screenData.mianData.rateDriAnswerDoneWow)<0?'el-icon-caret-bottom':'el-icon-caret-top']"/>
                    <span :style="{color:setColor(screenData.mianData.rateDriAnswerDoneWow)}">{{ screenData.mianData.rateDriAnswerDoneWow }}%</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="listItem">
          <div class="itemL">
            <span>累计完单司机数</span>
            <p class="star">
              <span :style="{width:setWidth(screenData.mianData.cntDriDone,screenData.mianData.cntDriWork)}"/>
              <strong>{{ numFormat(screenData.mianData.cntDriDone) }}</strong>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bigScreen_four">
      <!-- 订单排行指标对比 -->
      <div class="bigScreen_fourOne_father" v-if="!(screenData.boxId == '1' && screenData.Iscity !== 999999)">
        <h2 v-if="showCityLabel()">城市排行指标对比<span>（按第一个指标排序）</span></h2>
        <h2 v-if="showTenantLabel()">品牌排行指标对比<span>（按第一个指标排序）</span></h2>
        <h2 v-if="showOtherLabel()">运力公司排行指标对比<span>（按第一个指标排序）</span></h2>
        <div class="bigScreen_fourOne">
          <ul>
            <li class="bigScreen_fourColomn">
              <span style="width:16%;min-width:120px" v-if="showCityLabel()">排名/城市</span>
              <span style="width:16%;min-width:120px" v-if="showTenantLabel()">排名/品牌</span>
              <span style="width:16%;min-width:120px" v-if="showOtherLabel()">排名/运力公司</span>
              <span style="display:block;min-width:120px;width:20%;">
                <el-dropdown trigger="click" @command="handleCommandOrder">
                  <span class="el-dropdown-link">{{ screenData.orderOptionsLabel }}<i slot="reference" class="el-icon-caret-bottom" style="color:#1677FF;cursor: pointer;"/>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="margin-top:20px;border:none" >
                    <el-dropdown-item v-for="(item,index) in screenData.selectOptions.cityOptions" :key="index" :command="item.id">{{ item.name }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
              <span style="width:11%;min-width:80px">日环比</span>
              <span style="width:11%;min-width:80px">周同比</span>
              <span style="display:block;min-width:120px; width:20%;">
                <el-dropdown trigger="click" @command="handleCommandDropMenas">
                  <span class="el-dropdown-link">{{ screenData.meansOptionsLabel }}<i slot="reference" class="el-icon-caret-bottom" style="color:#1677FF;cursor: pointer;" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style="margin-top:20px;border:none" >
                    <el-dropdown-item v-for="(item,index) in screenData.selectOptions.cityOptions" :key="index" :command="item.id">{{ item.name }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
              <span style="width:11%;min-width:80px">日环比</span>
              <span style="width:11%;min-width:80px">周同比</span>
            </li>
          </ul>
          <template v-if="screenData.cityData">
            <ul v-for="(item, index) in screenData.cityData" :key="index">
              <li class="bigScreen_info">
                <span style="width:16%;min-width:120px;pxcursor: pointer;" @click="getCompany(item)" v-if="showCityLabel()">{{ item.city }}</span>
                <span style="width:16%;min-width:120px;pxcursor: pointer;" @click="getCompany(item)" v-if="showTenantLabel()">{{ item.city }}</span>
                <span style="width:16%;min-width:120px;" v-if="showOtherLabel()">{{ item.city }}</span>
                <span style="min-width:120px;width:20%;">{{ item[cityDropOne] === -1 ?'/':item[cityDropOne]}}</span>
                <span style="width:11%;min-width:80px;" :style="{color:setColor(item[cityDropTwo])}">{{item[cityDropTwo]}}%</span>
                <span style="width:11%;min-width:80px;" :style="{color:setColor(item[cityDropThree])}">{{ item[cityDropThree] }}%</span>
                <span style="width:20%;min-width:120px;">{{ item[cityDropFour] }}</span>
                <span style="width:11%;min-width:80px;" :style="{color:setColor(item[cityDropFive])}">{{ item[cityDropFive] }}%</span>
                <span style="width:11%;min-width:80px;" :style="{color:setColor(item[cityDropSix])}">{{ item[cityDropSix] }}%</span>
              </li>
              <div v-if="index===0"/>
              <div v-if="index>0" :style="{width:setWidth(item[cityDropOne],screenData.cityData[0][cityDropOne])}"/>
            </ul>
          </template>
      </div>
    </div>
      <!-- 订单运力明细表 -->
      <div class="bigScreen_scrollbar">
        <h2>订单运力明细表<img :src="explainTwoIcon" @click="exportOrder()" style="width:14px;height:14px"></h2>
        <el-table  :data="virtualRows" :cell-style="{ background: ' #212948' }" ref="orderMeansTable" style="width: 100%" height="400">
          <el-table-column :show-overflow-tooltip="true" align="left" width="100" prop="city" label="排名/城市" fixed="left" v-if="showCityLabel()">
            <template  slot-scope="scope" >
              <span >{{ `${scope.row.rankIndex} ${scope.row.city}` }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" align="left" width="100" prop="city" label="排名/品牌" fixed="left" v-if="showTenantLabel()">
            <template slot-scope="scope">
              <span  >{{ `${scope.row.rankIndex} ${scope.row.city}` }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" align="left" width="160" prop="city" label="排名/运力公司" fixed="left" v-if="showOtherLabel()">
            <template slot-scope="scope">
              <span >{{ `${scope.row.rankIndex} ${scope.row.city}` }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="cntOrderCall" label="累计发单量" width="130" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.cntOrderCall === -1 ?'/':scope.row.cntOrderCall}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="cntOrderDsp" label="累计匹配量" width="130" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.cntOrderDsp === -1 ?'/':scope.row.cntOrderDsp}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="cntOrderAnswer" label="累计应答量" width="130" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntOrderDone" label="累计完单量" width="130" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="priceGMV" label="累计实际里程费" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="rateOrderDsp" label="匹配率" width="110" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.rateOrderDsp === -1 ?'/':scope.row.rateOrderDsp+'%'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="rateOrderDspAnswer" label="匹配应答率" width="130" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.rateOrderDspAnswer === -1 ?'/':scope.row.rateOrderDspAnswer+'%'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="rateOrderAnswer" label="应答率" width="120" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.rateOrderAnswer === -1 ?'/':scope.row.rateOrderAnswer+'%'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="rateOrderAnswerDone" label="完成率" width="110" sortable>
            <template slot-scope="scope">
              <span>{{ `${scope.row.rateOrderAnswerDone}%` }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="rateOrderCallDone" label="完单率" width="110" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.rateOrderCallDone === -1 ?'/':scope.row.rateOrderCallDone+'%'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriWorking" label="出车中司机数" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriReady" label="听单中司机数" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriWork" label="累计出车司机数" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriDsp" label="累计匹配司机数" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriAnswer" label="累计应答司机数" width="160" sortable/>
          <el-table-column align="center" :render-header="renderHeader" prop="cntDriDone" label="累计完单司机数" width="160" sortable/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import explainIcon from './assets/icon_explain@2x.png'
import explainTwoIcon from './assets/icon_daochu@2x.png'
import daochuIcon from './assets/icon_daochu@3x.png'
import arrowRateIcon from './assets/icon_arrow_rate@2x.png'
import tipsList from './tipsList'
import { debounce } from '../help-center-sidebar/utils'
// 订单分时
import orderTime from './charts/orderTime'
// 运力分时
import meansTime from './charts/meansTime'
// 漏斗图表
import amongTime from './charts/amongTime'

export default {
  name: 'ScreenPlat',
  components: { orderTime, meansTime, amongTime },
  props: {
    screenData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      scrollTop: 0,
      startIndex: 0,
      virtualRows: [],
      orderMeansDataList: [],
      tipsList: tipsList,
      cityDropOne: 'cntOrderCall',
      cityDropTwo: 'cntOrderCallRt',
      cityDropThree: 'cntOrderCallWow',
      cityDropFour: 'cntDriWorking',
      cityDropFive: 'cntDriWorkingRt',
      cityDropSix: 'cntDriWorkingWow',
      explainTwoIcon:explainTwoIcon,
      explainIcon: explainIcon,
      daochuIcon: daochuIcon,
      arrowRateIcon: arrowRateIcon,
      isSystem: true // true 代表MAC
    }
  },
  watch:{
    scrollTop(top) {
      this.calcList(top)
    },
    'screenData.orderMeansData'(val) {
      this.orderMeansDataList = val.map((item, index) => {
        item.rankIndex = index + 1
        return item
      })
      // 切换数据需要重置表格滚动数据
      this.scrollTop = 0
      this.startIndex = 0
      this.virtualRows = []
      this.$refs.orderMeansTable.bodyWrapper.scrollTop = 0
      this.calcList();
    },
    'screenData.orderOptionsLabel'(val){
      this.screenData.selectOptions.cityOptions.map(item => {
        if (item.name === val) {
          this.cityDropOne = item.eng
          this.cityDropTwo = item.eng + 'Rt'
          this.cityDropThree = item.eng + 'Wow'
        }
      })
    },
    'screenData.meansOptionsLabel'(val){
      this.screenData.selectOptions.cityOptions.map(item => {
        if (item.name === val) {
          this.cityDropFour = item.eng
          this.cityDropFive = item.eng + 'Rt'
          this.cityDropSix = item.eng + 'Wow'
        }
      })
    }
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#1a213e')
  },
  beforeDestroy() {
    document.querySelector('body').setAttribute('style', 'background:#FFFFFF')
  },
  mounted() {
    this.selfAdaption()
    this.getSystem()
    this.$nextTick(() => {
      this.debounceFn = debounce(() => {
        this.scrollTop = this.$refs.orderMeansTable.bodyWrapper.scrollTop;
      }, 100);
      this.$refs.orderMeansTable.bodyWrapper.addEventListener("scroll", this.debounceFn);
    });
  },
  methods: {
    // 虚拟滚动渲染
    calcList(scrollTop = this.scrollTop) {
      this.startIndex = Math.floor(scrollTop / 39)
      this.virtualRows = this.orderMeansDataList.slice(
        this.startIndex,
        this.startIndex + 20
      )

      let height = this.orderMeansDataList.length * 39
      let mainTable = this.$refs.orderMeansTable.$el.querySelectorAll('.el-table__body')

      Array.from(mainTable).forEach((v) => {
        v.style.height = height + "px";
        if (this.startIndex + 20 >= this.orderMeansDataList.length) {
          v.style.paddingTop = scrollTop - 39 + "px";
          v.style.paddingBottom = 0;
        } else {
          v.style.paddingTop = scrollTop + "px";
          v.style.paddingBottom = height - 20 * 39 - scrollTop + "px";
        }
      })
    },
    showCityLabel() {
      if(this.screenData.boxId === '3') {
        // 城市为全部、品牌为单个 显示城市
        if(this.screenData.IsTenantId !== 999999 && this.screenData.Iscity === 999999) return true
        // 城市为单个、品牌为单个 显示城市
        if(this.screenData.IsTenantId !== 999999 && this.screenData.Iscity !== 999999) return true
        return false
      }else if(this.screenData.boxId === '2'){

        if(this.screenData.Iscity === 999999) return true
        return false
      }
       else {
        return this.screenData.Iscity === 999999
      }
    },
    showTenantLabel() {
      if(this.screenData.boxId === '3') {
        // 品牌为全部、城市为全部 显示品牌
        if(this.screenData.IsTenantId === 999999 && this.screenData.Iscity === 999999) return true
        // 品牌为全部、城市为单个 显示品牌
        if(this.screenData.IsTenantId === 999999 && this.screenData.Iscity !== 999999) return true
        return false
      }
      return false
    },
    showOtherLabel() {
      if (this.screenData.boxId === '2') {
        if(this.screenData.Iscity !== 999999) return true
        return false
      }
      return false
    },
    // 窗口大小改变 图表自适应
    selfAdaption() {
      const _this = this
      setTimeout(() => {
        window.addEventListener('resize', function() {
          if(_this.$refs.orderTime){
            _this.$refs.orderTime.init()
          }
          if(_this.$refs.meansTime){
            _this.$refs.meansTime.init()
          }
          if(_this.$refs.amongTime){
            _this.$refs.amongTime.init()
          }
        })
      }, 400)
    },
    renderHeader(h, { column }) {
      return h('el-tooltip', {
        props: {
          content: (function() {
            const label = column.label
            return tipsList[label]
          })(),
          placement: 'top'
        },
        domProps: {
          innerHTML: column.label + '<img style="margin-left:5px;" src="' + explainIcon + '" />'
        }
      }, [h('span')])
    },
    // 订单分时 下拉事件
    changeOrder(val) {
      this.$emit('changeOrder', val, 'orderChange')
    },
    // 运力分时 下拉事件
    changeMeans(val) {
      this.$emit('changeMeans', val, 'meansChange')
    },
    // 订单运力明细 导出
    exportOrder() {
      this.$emit('exportOrder')
    },
    // 城市排行 第一个下拉菜单
    handleCommandOrder(command) {
      // 取出 选择对应的名称
      this.screenData.selectOptions.cityOptions.map(item => {
        if (item.id === command) {
          this.screenData.orderOptionsLabel = item.name
          // 动态拼接 字段
          this.cityDropOne = item.eng
          this.cityDropTwo = item.eng + 'Rt'
          this.cityDropThree = item.eng + 'Wow'
        }
      })
      this.$emit('handleCommandDrop', command, 'cityOne')
    },
    // 城市排行 第二个下拉菜单
    handleCommandDropMenas(command) {
      this.screenData.selectOptions.cityOptions.map(item => {
        if (item.id === command) {
          this.screenData.meansOptionsLabel = item.name
          this.cityDropFour = item.eng
          this.cityDropFive = item.eng + 'Rt'
          this.cityDropSix = item.eng + 'Wow'
        }
      })
      this.$emit('handleCommandDrop', command, 'cityTwo')
    },
    // 动态计算 漏斗的比率
    setWidth(num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : (Math.round(num / total * 10000) / 100.00) + '%'
    },
    setCityWidth(num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : (Math.round(num / total * 10000) / 100.00) - 20 + '%'
    },
    setColor(num) {
      if (Number(num) > 0) {
        return '#02a394'
      } else {
        if(num === '--'){
          return '#02a394'
        }else{
          return '#e82222' 
        }
      }
    },
    getCompany(item){
      this.$emit('getCompany', item)
    },
    // 千位符号
    numFormat(num) {
      if(num >= 1000){
        var res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
          return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
            return $1 + ','
          })
        })
        return res
      }
      return num || 0
    },
    getSystem() {
      const userAgent = navigator.userAgent.toLowerCase();
      // 哈勃系统
      if (this.screenData.boxId !== '2') {
        // 判断是Windows还是Mac
        this.isSystem = userAgent.indexOf('mac') > -1 ? true : false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
display: flex;
}
dl,
ul,
dd {
padding: 0;
margin: 0;
}

h2,
h3,
p {
padding: 0;
margin: 0;
}
.bigScreen {
width: 100%;
color: #ffffff;
height: 100%;
padding-bottom: 100px;
background-color: #1a213e;
}
.bigScreen_one {
justify-content: space-around;
margin-bottom: 16px;
}
.bigScreen_info span:nth-child(1) {
  text-align: left;
  padding-left: 10px;
}
.countList {
width: 49%;
display: flex;
flex-wrap: wrap;
justify-content: center;
background: #212948;
border-radius: 8px;
padding: 20px 0;
}
/deep/ .el-progress-bar__outer {
background: #4e546d !important;
}
.countList .countCon {
width: 50%;
}
.countCon h2 {
font-size: 18px;
color: #fff !important;
}
li {
list-style: none;
}
h2 {
font-size: 12px;
margin-bottom: 10px;
color: #fff !important;
}
h2 img {
margin-left: 5px;
color: orange;
}
.numCon {
align-items: center;
justify-content: space-between;
}
.numCon h3 {
font-size: 32px;
color: #f57c58 !important;
font-weight: bold;
}
.ulList h3 {
font-size: 16px;
color: #407bf2 !important;
}
.numCon dl {
margin-top: 10px;
}
.count dl {
margin-left: 10px;
}
.numCon dl dd {
font-size: 10px;
}
.numCon dl dd:first-child {
margin-bottom: 5px;
}

.numCon dl dd i {
color: #e82222;
}
.numCon dl dd:first-child i {
color: #02a394;
}
.numCon dl dd:first-child span {
color: #02a394;
font-weight: 500;
}
.numCon dl dd:nth-child(2) span {
font-weight: 500;
color: #e82222;
}
.proge p {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.el-progress {
margin-top: 10px;
}
.proge p span {
font-size: 14px;
}
.ulList {
width: 100%;
}
.ulList ul {
display: flex;
justify-content: space-around;
}
.ulList .numCon h2 {
color: #fff !important;
margin-bottom: 0;
}
.ulList .numCon h3 {
font-size: 18px;
font-weight: normal;
// color: #fff !important;
}
.ulList .numCon h3 span {
font-size: 10px;
margin-left: 5px;
}
.bigScreen_two {
display: flex;
justify-content: space-around;
margin-top: 16px;
}
.bigScreen_orderTime {
height:400px;
// height:100%;
width: 49%;
text-align: center;
background: #212948;
border-radius: 8px;
}
.bigScreen_two h2 {
display: flex;
justify-content: space-between;
font-size: 18px;
color: #ff9b00 !important;
padding: 20px 20px 0 20px;
}
.bigScreen_meansTime {
height: 400px;
// height:100%;
width: 49%;
text-align: center;
background: #212948;
border-radius: 8px;
}

.bigScreen_three {
display: flex;
justify-content: space-around;
margin-top: 16px;
}
.bigScreen_three > div {
height: 400px;
// height:100%;

text-align: center;
/* width: 29%; */
background: #212948;
border-radius: 8px;
}
.bigScreen_three .bigScreen_funnel {
border: none;
background: #212948;
border-radius: 8px;
padding: 10px;
}
.bigScreen_three .bigScreen_funnel .bigscreen_rtwow{
display: flex;
}
.bigScreen_three .bigScreen_funneltwo {
background: none;
}
.bigScreen_three .tooltip_label {
  margin-right: 5px;
}
.bigScreen_funnel > h2 {
font-size: 18px;
color: #ff9b00 !important;
text-align: left;
// margin-bottom: 20px;
// padding-bottom: 10px;
/* border-bottom: 1px solid #ff9b00; */
}
.bigScreen_funnel > h3 {
font-size: 14px;
text-align: center;
font-weight: normal;
color: #ffffff !important;
}
.bigScreen_funnel li i {
// color: blue;
}
.bigScreen_funnel dl dd:first-child i {
// color: #02a394;
}
.bigScreen_funnel dl dd:first-child span {
// color: #02a394;
font-size: 10px;
}

.bigScreen_funnel dl dd:nth-child(2) span {
// color: #e82222;
font-size: 10px;

}
.bigScreen_funnel dl dd:nth-child(2) i {
// color: #e82222;
}

.listItem {
  display: flex;
  flex-direction: column;
}
.listItem .itemL {
display: flex;
font-size: 10px;
color: #ffffff;
}

.listItem .itemL >span {
  flex-shrink: 0;
}

.itemR {

}
.star {
display: flex;
flex: 1;
margin-left: 5px;
align-items: center;
margin-bottom: 10px;
}
.star >span {
margin-right: 10px;
display: flex;
height: 5px;
background-image: linear-gradient(270deg, #31afff 0%, #1677ff 100%);
border-radius: 8px;
}
.star strong {
flex-shrink: 0;
font-size: 10px;
}
.itemR {
  display: flex;
}
.itemR ul {
display: flex;
flex: 1;
align-items: center;
margin-bottom: 10px;
justify-content: flex-end;
}
.itemR ul li {
  display: flex;
}

.itemR ul li:first-child {
  margin-left: 35px;
  flex-grow: 1;
  justify-content: center;
}

.itemR ul li >img {
  width: 12px;
  height: 26px;
  align-self: center;
  margin-right: 5px;
}

.itemR ul li:nth-child(2) {
font-size: 16px;
color: #ffffff;
width: 136px;
flex-shrink: 0;
}
.bigScreen_four {
display: flex;
justify-content: space-around;
margin-top: 16px;
}
.bigScreen_four div {
text-align: center;
flex: 1;
justify-content: space-between;
background: #212948;
}
.bigScreen_four h2 {
font-size: 18px;
color: #ff9b00 !important;
text-align: left;
padding-bottom: 10px;
/* border-bottom: 1px solid #ff9b00; */
}
.bigScreen_four h2 span {
font-size: 10px;
}
// .bigScreen_fourUl {
// overflow: auto;
// width: 100% !important;
// height: 329px !important;
// }
.bigScreen_four li {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 10px 0px 10px 0px;
}
.bigScreen_four li > span {
/* flex: 1; */
font-size: 14px;
}
.bigScreen_fourColomn {
font-size: 14px;
font-weight: 500;
margin-top: 20px !important;
}
.bigScreen_fourColomn span:nth-child(1){
  text-align: left;
  padding-left: 10px;
}
.bigScreen_four ul div {
width: 100%;
// margin-left: 40px;
height: 3px;
background-image: linear-gradient(270deg, #31afff 0%, #1677ff 100%);
border-radius: 8px;
}
.bigScreen_fourOne_father {
  width: 49%;
  margin-left: 6px;
  margin-right: 15px;
  padding: 16px 20px 20px 20px;
  border-radius: 8px;
}
.bigScreen_fourOne {
width: 100%;
height: 89.4%;
max-height: 406px;
border-radius: 8px;
min-width: 400px;
overflow-x: auto ;
}
.bigScreen_scrollbar {
margin-right: 6px;
width: 49%;
overflow-x: auto;
padding: 20px;
border-radius: 8px;
}
.bigScreen_scrollbar h2 {
display: flex;
justify-content: space-between;
color: #ff9b00 !important;

}
.bigScreen_scrollbar h2 img {
cursor: pointer;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-button{
background: rgba(255, 255, 255, 0.3) !important;
}
::-webkit-scrollbar-track-piece{
background: #212948;

}
::-webkit-scrollbar-corner {
background: #212948;
}
::-webkit-resizer {
background: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.3) !important;
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5) !important;
}
// ::-webkit-scrollbar-thumb:window-inactive {
// background: rgba(255, 255, 255, 0.3) !important;
// -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3) !important;
// }
/deep/ .el-table .cell{
font-size: 14px;
}
/* // 滚动条的宽度 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-button {
background: rgba(255, 255, 255, 0.3) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
background: #212948 !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
background: #212948 !important;
}
/deep/ .el-table__body-wrapper::-webkit-resizer {
background: rgba(255, 255, 255, 0.3) !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3) !important;
border-radius: 3px;
}

/deep/.el-table td,
.el-table th {
border: none;
}
/deep/.el-table td {
border: none;
}
/deep/.el-table th.is-leaf {
border: none;
}
/deep/.el-table th,
tr {
background: #212948;
}
/deep/.el-table tr {
background: #212948;
}
/deep/ .el-table__row > td {
border: none !important;
}
/deep/.el-table--border,
/deep/ .el-table--group {
border: none;
}
/deep/.el-table__body,
.el-table__footer,
.el-table__header {
color: #fff;
}
/deep/ .el-table th > .cell {
color: #fff;
}
/deep/ .el-table::before {
height: 0px;
}
/deep/.el-table tbody tr:hover > td {
background-color: #212948 !important;
}
/deep/ .el-table__fixed {
border: none !important;
/* background-color: #212948 !important; */
}
/deep/.el-table__fixed-right::before,
/deep/.el-table__fixed::before {
height: 0 !important;
}
/deep/ .el-dropdown {
color: #fff;
background-image: none !important;
margin-left: 0 !important;
}
/deep/ .el-dropdown-menu {
margin-top: 20px !important;
}
/deep/ .el-popper {
margin-top: 20px !important;
}
/deep/ .el-dropdown-menu,
/deep/ .el-menu--collapse,
/deep/ .el-submenu,
/deep/ .el-menu {
margin-top: 20px !important;
}
/deep/.el-input--mini,
/deep/.el-input__inner {
border-color: #1677ff;
background: #212948;
color: #BABCC5 !important;
}
/deep/ .el-select .el-input.is-focus .el-input__inner {
border-color: #1677ff;
}
/deep/ .el-select .el-input .el-select__caret {
border-color: #1677ff;
}
/deep/ .el-select /deep/.el-input /deep/.el-select__caret {
color: #1677ff;
}
/deep/.el-select-dropdown__list {
padding: 0;
background-color: #2d3865 !important;
}
/deep/ .el-select-dropdown {
background-color: #2d3865;
margin: 0px;
border: 0px;
border-radius: 0px;
}
/deep/ .el-select-dropdown__item {
background-color: transparent;
color: #fff;
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
color: #1677ff;
background-color: rgba(0, 0, 0, 0.2);
}
/deep/ .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
display: none;
}

/deep/ .el-popper {
margin-top: 10px !important;
}
/deep/ .el-dropdown-menu__item {
background-color: #2d3865 !important;
color: #fff;
}
/deep/ .el-dropdown-menu {
/* background-color: #2d3865 !important; */
border-radius: 0;
border-color: #1677ff !important;
}

/deep/.popper__arrow {
display: none !important;
}
.label-wrap {
  text-align: center;
}

.dl-wrap {
  width: 106px;
}

.label-tip {
  margin-right: 8px;
}

.num-tip {
  margin: 8px;
}
.form_mac {
  /deep/ .el-select-dropdown__wrap {
      margin-right: 0px !important;
      margin-bottom: 0px !important;
    }

  /deep/ .el-select-dropdown__wrap::-webkit-scrollbar-track{
      background:#2d3865 !important;
  }
  /deep/ .el-select-dropdown__wrap::-webkit-scrollbar {
      height: 0px !important;
  }
} 

</style>
