<template>
  <div class="container"
       :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div style="background-color:#fff;">
            <img src="@/assets/元利流体.png" alt="元利logo" @click="clareData()"/>
          </div>
        </div>
        <div class="left-content">
          <div class="main">
            <dv-border-box-12 style="padding: 10px; width: 95%; height: 95%">
              <div style="margin: 5px 0 5px 10px">
                <span style="
                    width: 20px;
                    height: 10px;
                    background: #016ce9;
                    display: inline-block;
                  "></span>
                <span style="color: #fff">订单看板</span>
              </div>
              <div class="box" style="width: 100%">
                <div class="top" style="width: 100%">
                  <div class="roll-table" style="height: 14rem;width: 44.5rem">
                    <div class="roll-table-box" style="display: flex;">
                      <div style="flex: 1.7">内部合同号</div>
                      <div style="flex: 1.7">交货日期</div>
                      <div>工艺</div>
                      <div>采购部</div>
                      <div>生产部</div>
                      <div>装配</div>
                    </div>
                    <vue-seamless-scroll
                      ref="seamlessScroll"
                      :class-option="leftTop"
                      :data="orderDataInfo"
                      style="overflow: hidden;height: 77%"
                    >
                      <div
                        v-for="(item, index) in orderDataInfo"
                        :key="index"
                        :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                        class="roll-box">
                        <div v-text="item.内部合同号" style="flex: 1.7"></div>
                        <div v-text="item.交货日期" style="flex: 1.7"></div>
                        <div :class="{'red2Color' : item.工艺部 < 50,'greenColor': item.工艺部 >= 50}"
                             v-text="(item.工艺部? item.工艺部 : 0) + '%'"></div>
                        <div :class="{'red2Color' : item.采购部 < 50,'greenColor': item.采购部 >= 50}"
                             v-text="(item.采购部? item.采购部 : 0) + '%'"></div>
                        <div :class="{'red2Color' : item.生产部 < 50,'greenColor': item.生产部 >= 50}"
                             v-text="(item.生产部? item.生产部 : 0) + '%'"></div>
                        <div :class="{'red2Color' : item.装配部 < 50,'greenColor': item.装配部 >= 50}"
                             v-text="(item.装配部? item.装配部 : 0) + '%'"></div>
                      </div>
                    </vue-seamless-scroll>
                  </div>
                  <div id="leftTopCurve" style="width: 100%; height: 150px;margin-top: 20px"></div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div class="main2">
            <dv-border-box-12
              style="padding: 5px 10px; width: 95%; height: 95%"
            >
              <div style="margin: 5px 0 5px 10px">
                <span
                  style="
                    width: 20px;
                    height: 10px;
                    background: #016ce9;
                    display: inline-block;
                  "
                ></span>
                <span style="color: #fff"> 装配看板</span>
              </div>
              <div class="roll-table" style="height: 16rem;width: 44.5rem">
                <div class="roll-table-box" style="display: flex;">
                  <div>内部合同号</div>
                  <div style="flex: 2">产品名称</div>
                  <div>要求发货时间</div>
                  <div>出库状态</div>
                </div>
                <vue-seamless-scroll
                  ref="seamlessScroll"
                  :class-option="leftTop"
                  :data="workDataInfo"
                  style="overflow: hidden;height: 77%"
                >
                  <div
                    v-for="(item, index) in workDataInfo"
                    :key="index"
                    :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                    class="roll-box">
                    <div v-text="item.内部合同号"></div>
                    <div v-text="item.产品名称" style="flex: 2"></div>
                    <div v-text="item.要求发货时间"></div>
                    <div :class="{'redColor' : item.出库状态 != '已出库','greenColor': item.出库状态 == '已出库'}"
                         v-text="item.出库状态"></div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </dv-border-box-12>
          </div>
          <div class="main3">
            <dv-border-box-12
              style="padding: 5px 10px; width: 95%; height: 95%"
            >
              <div style="margin: 5px 0 5px 10px">
                <span
                  style="
                    width: 20px;
                    height: 10px;
                    background: #016ce9;
                    display: inline-block;
                  "
                ></span>
                <span style="color: #fff"> 未完成工序看板</span>
              </div>
              <div class="roll-table" style="height: 14rem;width: 44.5rem">
                <div class="roll-table-box" style="display: flex;">
                  <div style="flex: 1.3">内部合同号</div>
                  <div>零件名称</div>
                  <div style="flex: 1.3">要求完工日</div>
                  <div>工序名称</div>
                  <div style="flex: 0.5">性质</div>
                  <div>完工工时</div>
                  <div style="flex: 1.2">未完工工时</div>
                </div>
                <vue-seamless-scroll
                  ref="seamlessScroll"
                  :class-option="leftTop"
                  :data="unfinishedDataInfo"
                  style="overflow: hidden;height: 77%"
                >
                  <div
                    v-for="(item, index) in unfinishedDataInfo"
                    :key="index"
                    :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                    class="roll-box">
                    <div v-text="item.内部合同号" style="flex: 1.3"></div>
                    <div v-text="item.零件名称"></div>
                    <div v-text="item.要求完工日" style="flex: 1.3"></div>
                    <div v-text="item.工序名称"></div>
                    <div
                      :class="{'red2Color' : item.性质 == '采购','greenColor': item.性质 == '自制','yellowColor': item.性质 == '外派' }"
                      v-text="item.性质" style="flex: 0.5"></div>
                    <div class="greenColor" v-text="item.完工工时"></div>
                    <div class="redColor" v-text="item.未完工工时" style="flex: 1.2"></div>
                  </div>
                </vue-seamless-scroll>
              </div>
              <div style="display: flex">
                <div id="leftBottomPie" style="width: 40%; height: 280px"></div>
                <div id="leftBottomColumnar" style="width: 60%; height: 280px"></div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
      </div>

      <div class="c-center">
        <div class="center-header">智能生产监控系统</div>
        <div class="center-content" v-if="refreshTab">
          <dv-border-box-12 class="items">
            <div class="item-head">
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>当前计划/台</span>
                  <span style="color: #0678b4" class="data-value">{{
                      planCountInfo[0]
                    }}</span>
                </div>
              </div>
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>当前产量/台</span>
                  <span style="color: #68b720" class="data-value">{{
                      planCountInfo[1]
                    }}</span>
                </div>
              </div>
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>计划完成</span>
                  <span style="color: #e97378" class="data-value"
                  >{{ planCountInfo[2] }} %</span
                  >
                </div>
              </div>
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>工时消耗</span>
                  <span style="color: #9d6dd5" class="data-value"
                  >{{ planCountInfo[3] }} h</span
                  >
                </div>
              </div>
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>当前齐套率</span>
                  <span style="color: #dc7e86" class="data-value"
                  >{{ planCountInfo[4] }} %</span
                  >
                </div>
              </div>
              <div>
                <img src="@/assets/time.png"/>
                <div class="data">
                  <span>当前合格率</span>
                  <span style="color: #fafc80" class="data-value">{{
                      planCountInfo[5]
                    }} %</span>
                </div>
              </div>
            </div>
            <div class="border-animation"></div>
            <div class="item-content">
              <div class="btns">
                <div>加工中心1</div>
                <!-- <div>GF9装配线</div> -->
                <div>加工中心2</div>
                <!-- <div>375机加线</div> -->
              </div>
              <dv-border-box-12 class="center-tab">
                <table class="diyTab" cellspacing="0">
                  <thead>
                  <tr>
                    <td style="font-weight: 700">加工设备</td>
                    <td>OEE</td>
                    <td>时间利用率</td>
                    <td>性能利用率</td>
                    <td>合格率</td>
                    <td>设备状态</td>
                    <td>进度</td>
                  </tr>
                  </thead>
                  <tbody v-scroll>
                  <tr>
                    <td style="font-weight: 700">{{ lineInfo[0].产品名称 }}</td>
                    <td>
                      {{ lineInfo[0].OEE }}
                      <span v-if="lineInfo[0].OEE">%</span>
                    </td>
                    <td>
                      {{ lineInfo[0].时间利用率 }}
                      <span v-if="lineInfo[0].时间利用率">%</span>
                    </td>
                    <td>
                      {{ lineInfo[0].性能利用率 }}
                      <span v-if="lineInfo[0].性能利用率">%</span>
                    </td>
                    <td>
                      {{ lineInfo[0].合格率 }}
                      <span v-if="lineInfo[0].合格率">%</span>
                    </td>
                    <td>{{ lineInfo[0].设备状态 }}</td>
                    <td>
                      {{ lineInfo[0].进度 }}
                      <span v-if="lineInfo[0].进度">%</span>
                    </td>
                  </tr>
                  <tr>
                    <td style="font-weight: 700">{{ lineInfo[1].产品名称 }}</td>
                    <td>
                      {{ lineInfo[1].OEE }}
                      <span v-if="lineInfo[1].OEE">%</span>
                    </td>
                    <td>
                      {{ lineInfo[1].时间利用率 }}
                      <span v-if="lineInfo[1].时间利用率">%</span>
                    </td>
                    <td>
                      {{ lineInfo[1].性能利用率 }}
                      <span v-if="lineInfo[1].性能利用率">%</span>
                    </td>
                    <td>
                      {{ lineInfo[1].合格率 }}
                      <span v-if="lineInfo[1].合格率">%</span>
                    </td>
                    <td>{{ lineInfo[1].设备状态 }}</td>
                    <td>
                      {{ lineInfo[1].进度 }}
                      <span v-if="lineInfo[1].进度">%</span>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </dv-border-box-12>
              <dv-border-box-12 class="middle-bottom">
                <div v-show="mainShowIndex == 'jd'" class="roll-table"
                     style="height: 79rem;border: 0px solid #22405c;width: 98%;margin: 0 auto">

                  <div class="roll-table-box" style="display: flex;">
                    <div>合同号</div>
                    <!--<div>外部合同号</div>-->
                    <div>签订日期</div>
                    <div>交货日期</div>
                    <div>工艺</div>
                    <div>采购部</div>
                    <div>生产部</div>
                    <div>装配</div>
                  </div>
                  <vue-seamless-scroll
                    ref="seamlessScroll"
                    :class-option="Middle"
                    :data="contractMainDataInfo"
                    style="overflow: hidden;height: 77%"
                  >
                    <div
                      v-for="(item, index) in contractMainDataInfo"
                      @click="getContractMainDataInfoDetail(item)"
                      :key="index"
                      :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                      class="roll-box">
                      <div v-text="item.内部合同号"></div>
                      <!--<div v-text="item.外部合同号"></div>-->
                      <div v-text="item.签订日期"></div>
                      <div v-text="item.交货日期"></div>
                      <div :class="{'red2Color' : item.工艺部 < 50,'greenColor': item.工艺部 >= 50}"
                           v-text="(item.工艺部? item.工艺部 : 0) + '%'"></div>
                      <div :class="{'red2Color' : item.采购部 < 50,'greenColor': item.采购部 >= 50}"
                           v-text="(item.采购部? item.采购部 : 0) + '%'"></div>
                      <div :class="{'red2Color' : item.生产部 < 50,'greenColor': item.生产部 >= 50}"
                           v-text="(item.生产部? item.生产部 : 0) + '%'"></div>
                      <div :class="{'red2Color' : item.装配部 < 50,'greenColor': item.装配部 >= 50}"
                           v-text="(item.装配部? item.装配部 : 0) + '%'"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
                <div v-show="mainShowIndex === 'jd-detail'" class="roll-table"
                     style="height: 79rem;border: 0px solid #22405c;width: 98%;margin: 0 auto">
                  <div style="position: absolute;top: -20px;font-weight: 700;font-size: 13px">
                    产品编码：<span style="color: #75b348">{{
                      contractMainDataInfoDetail.length > 0 ? contractMainDataInfoDetail[0].产品编码 : ''
                    }}</span>&nbsp;&nbsp;&nbsp;&nbsp; |
                    数量：<span
                    style="color: #75b348">{{
                      contractMainDataInfoDetail.length > 0 ? contractMainDataInfoDetail.length : ''
                    }}</span>台&nbsp;&nbsp;&nbsp;&nbsp;|
                    合同号：<span
                    style="color: #75b348">{{
                      contractMainDataInfoDetail.length > 0 ? contractMainDataInfoDetail[0].合同号 : ''
                    }}</span>
                  </div>
                  <div class="roll-table-box" style="display: flex;">
                    <div style="flex: 1.5">名称</div>
                    <div style="flex: 2.2">规格型号</div>
                    <div>零件属性</div>
                    <div>额定数量</div>
                    <div>总需求</div>
                    <div>库存数量</div>
                    <div>待出数量</div>
                    <div>可用库存</div>
                    <div>满足情况</div>
                    <div>占用数量</div>
                    <div>在购数量</div>
                    <div>满足二</div>
                    <div>满足三</div>
                  </div>
                  <vue-seamless-scroll
                    ref="seamlessScroll"
                    :class-option="leftTop"
                    :data="contractMainDataInfoDetail"
                    style="overflow: hidden;height: 77%"
                  >
                    <div
                      v-for="(item, index) in contractMainDataInfoDetail"
                      :key="index"
                      :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                      class="roll-box">
                      <div v-text="item.名称" style="flex: 1.5"></div>
                      <div v-text="item.规格型号" style="flex: 2.2"></div>
                      <div v-text="item.零件属性"></div>
                      <div :class="{'redColor' : item.额定数量 < 0}" v-text="item.额定数量"></div>
                      <div :class="{'redColor' : item.总需求 < 0}" v-text="item.总需求"></div>
                      <div :class="{'redColor' : item.库存数量 < 0}" v-text="item.库存数量"></div>
                      <div :class="{'redColor' : item.待出数量 < 0}" v-text="item.待出数量"></div>
                      <div :class="{'redColor' : item.可用库存 < 0}" v-text="item.可用库存"></div>
                      <div :class="{'redColor' : item.满足情况 < 0}" v-text="item.满足情况"></div>
                      <div :class="{'redColor' : item.占用数量 < 0}" v-text="item.占用数量"></div>
                      <div :class="{'redColor' : item.在购数量 < 0}" v-text="item.在购数量"></div>
                      <div :class="{'redColor' : item.满足二 < 0}" v-text="item.满足二"></div>
                      <div :class="{'redColor' : item.满足三 < 0}" v-text="item.满足三"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </dv-border-box-12>
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
          <div class="main">
            <div class="top">
              <dv-border-box-12 style="padding: 5px 10px; width: 95%; height: 95%">
                <div style="margin: 5px 0 5px 10px">
                  <span
                    style="
                      width: 20px;
                      height: 10px;
                      background: #016ce9;
                      display: inline-block;
                    "
                  ></span>
                  <span style="color: #fff">合同看板</span>
                </div>
                <div class="roll-table" style="height: 20rem;width: 43.8rem">
                  <div class="roll-table-box" style="display: flex;">
                    <div style="flex: 1.6">交货期</div>
                    <div style="flex: 1.3">合同号</div>
                    <div style="flex: 1.3">产品名称</div>
                    <!--<div>BOM</div>-->
                    <div>工艺</div>
                    <div>采购</div>
                    <div>加工</div>
                    <div>备料</div>
                    <div>装配</div>
                    <div style="flex: 1.2">成品入库</div>
                    <div style="flex: 1.2">合同发货</div>
                  </div>
                  <vue-seamless-scroll
                    ref="seamlessScroll"
                    :class-option="leftTop"
                    :data="contract2DataInfo"
                    style="overflow: hidden;height: 77%"
                  >
                    <div
                      v-for="(item, index) in contract2DataInfo"
                      :key="index"
                      :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                      class="roll-box">
                      <div v-text="item.交货期" style="flex: 1.6"></div>
                      <div v-text="item.合同号" style="flex: 1.3"></div>
                      <div v-text="item.产品名称" style="flex: 1.3"></div>
                      <!--<div :class="{'redColor' : item.BOM == '未开始','greenColor': item.BOM == '已完成','yellowColor': item.BOM == '进行中'}" v-text="item.BOM"></div>-->
                      <div
                        :class="{'redColor' : item.工艺 == '未开始','greenColor': item.工艺 == '已完成','yellowColor': item.工艺 == '进行中'}"
                        v-text="item.工艺"></div>
                      <div
                        :class="{'redColor' : item.采购 == '未开始','greenColor': item.采购 == '已完成','yellowColor': item.采购 == '进行中'}"
                        v-text="item.采购"></div>
                      <div
                        :class="{'redColor' : item.加工 == '未开始','greenColor': item.加工 == '已完成','yellowColor': item.加工 == '进行中'}"
                        v-text="item.加工"></div>
                      <div
                        :class="{'redColor' : item.备料 == '未开始','greenColor': item.备料 == '已完成','yellowColor': item.备料 == '进行中'}"
                        v-text="item.备料"></div>
                      <div
                        :class="{'redColor' : item.装配 == '未开始','greenColor': item.装配 == '已完成','yellowColor': item.装配 == '进行中'}"
                        v-text="item.装配"></div>
                      <div
                        :class="{'redColor' : item.成品入库 == '未入库','greenColor': item.成品入库 == '完全入库','yellowColor': item.成品入库 == '部分入库'}"
                        v-text="item.成品入库" style="flex: 1.2"></div>
                      <div
                        :class="{'redColor' : item.合同发货 == '未开始','greenColor': item.合同发货 == '已完成','yellowColor': item.合同发货 == '进行中'}"
                        v-text="item.合同发货" style="flex: 1.2"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </dv-border-box-12>
            </div>
            <div class="center">
              <dv-border-box-12 style="padding: 5px 10px; width: 95%; height: 95%">
                <div style="margin: 5px 0 5px 10px">
                  <span
                    style="
                      width: 20px;
                      height: 10px;
                      background: #016ce9;
                      display: inline-block;
                    "
                  ></span>
                  <span style="color: #fff"> 设备参数</span>
                  <span style="color: #75b348; margin-left: 10px">{{ currentZoneName }}</span>
                  <!-- <span @click="prevZonePage" style="color: #fff; float: right; cursor: pointer">&lt;</span>
                  <span style="color: #fff; float: right; margin: 0 8px">{{ zonePageCount > 0 ? (currentZonePageIndex + 1) : 0 }}/{{ zonePageCount }}</span>
                  <span @click="nextZonePage" style="color: #fff; float: right; cursor: pointer">&gt;</span> -->
                </div>
                <div class="roll-table" style="height: 90%;width: 43.8rem;position: relative;overflow: hidden;">
                  <div class="roll-table-box" style="display: flex;">
                    <div style="flex: .7;">区域</div>
                    <div style="flex: 1;">参数名称</div>
                    <div style="flex: 1.5; text-align: left;">值</div>
                    <div style="flex: .7;">单位</div>
                  </div>
                  <transition :name="zoneTransitionName" mode="out-in">
                    <vue-seamless-scroll
                      ref="seamlessScrollLack"
                      :key="currentZonePageIndex"
                      :class-option="rightMiddle"
                      :data="currentZoneItems"
                      style="overflow: hidden;height: 90%"
                    >
                      <div
                        v-for="(item, index) in currentZoneItems"
                        :key="index"
                        :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                        class="roll-box">
                        <div style="flex: .7" v-text="item.Zone"></div>
                        <div style="flex: 1" v-text="item.TagName"></div>
                        <div v-text="item.TagValue" style="flex: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: left;" :title="item.TagValue"></div>
                        <div style="flex: .7" v-text="item.TagUnit"></div>
                      </div>
                    </vue-seamless-scroll>
                  </transition>
                </div>
              </dv-border-box-12>
            </div>
            <div class="bottom">
              <dv-border-box-12 style="padding: 5px 10px; width: 95%; height: 95%">
                <div style="margin: 5px 0 5px 10px">
                  <span
                    style="
                      width: 20px;
                      height: 10px;
                      background: #016ce9;
                      display: inline-block;
                    "
                  ></span>
                  <span style="color: #fff"> 质量看板</span>
                </div>
                <div class="roll-table" style="height: 14rem;width: 43.8rem">
                  <div class="roll-table-box" style="display: flex;">
                    <div style="flex: 1.5">出库单号</div>
                    <div>加工总时/套</div>
                    <div>有无异常</div>
                    <div>缺陷类型</div>
                    <div>检验人</div>
                    <div>检验时间</div>
                  </div>
                  <vue-seamless-scroll
                    ref="seamlessScroll"
                    :class-option="leftTop"
                    :data="qualityDataInfo"
                    style="overflow: hidden;height: 77%"
                  >
                    <div
                      v-for="(item, index) in qualityDataInfo"
                      :key="index"
                      :style="{ backgroundColor : (index % 2 == 1) ? 'rgba(255,255,255,.0)' : '#142b54'}"
                      class="roll-box">
                      <div v-text="item.出库单号" style="flex: 1.5"></div>
                      <div v-text="item.加工总时"></div>
                      <div :class="{'redColor' : item.有无异常 == '有','greenColor': item.有无异常 == '无'}"
                           v-text="item.有无异常"></div>
                      <div v-text="item.缺陷类型"></div>
                      <div v-text="item.检验人"></div>
                      <div v-text="item.检验时间"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex">
                  <div id="rightBottomPie" style="width: 50%; height: 200px"></div>
                  <div id="rightBottomColumnar" style="width: 50%; height: 200px"></div>
                </div>
              </dv-border-box-12>
            </div>
          </div>
        </div>
        <!--<index />-->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dt_IframeUrl: '',
      timer1: null,
      refreshTab: true,
      planCountInfo: [4624, 2696, 58.3, 1252, 50, 96],
      config: {},
      config2: {},
      config3: {},
      data: [],
      data2: [],
      data3: [],
      energyAll: [0, 0, 0],
      lineInfo: [
        {
          产品名称: '',
          OEE: '',
          时间利用率: '',
          性能利用率: '',
          合格率: '',
          设备状态: '',
          进度: ''
        },
        {
          产品名称: '',
          OEE: '',
          时间利用率: '',
          性能利用率: '',
          合格率: '',
          设备状态: '',
          进度: ''
        }
      ],
      mainShowIndex: 'jd',
      contractMainDataInfo: [
        {
          内部合同号: 'IT240211-1',
          外部合同号: 'IT240211',
          签订日期: '2024-06-05 ',
          交货日期: '2024-06-05',
          工艺部: '80',
          采购部: '80',
          生产部: '80',
          装配部: '80'
        },
        {
          内部合同号: 'IT240211-2',
          外部合同号: 'IT240211',
          签订日期: '2024-06-05 ',
          交货日期: '2024-06-05',
          工艺部: '80',
          采购部: '80',
          生产部: '80',
          装配部: '80'
        },
        {
          内部合同号: 'IT240211-3',
          外部合同号: 'IT240211',
          签订日期: '2024-06-05 ',
          交货日期: '2024-06-05',
          工艺部: '80',
          采购部: '80',
          生产部: '80',
          装配部: '80'
        },
        {
          内部合同号: 'IT240211-4',
          外部合同号: 'IT240211',
          签订日期: '2024-06-05 ',
          交货日期: '2024-06-05',
          工艺部: '80',
          采购部: '80',
          生产部: '80',
          装配部: '80'
        }
      ],
      contractMainDataInfoDetail: [
        {
          名称: '左端盖',
          规格型号: 'YQZF-10V2.0-1',
          零件属性: '自制',
          额定数量: '1',
          总需求: '3',
          库存数量: '80',
          待出数量: '80',
          可用库存: '80',
          满足情况: '80',
          占用数量: '80',
          在购数量: '80',
          满足二: '80',
          满足三: '80'
        }
      ],
      // 订单看板
      orderDataInfo: [
        {内部合同号: 'IT240211-1', 交货日期: '2024-06-05', 工艺部: '80', 采购部: '80', 生产部: '80', 装配部: '80'},
        {内部合同号: 'IT240211-2', 交货日期: '2024-06-05', 工艺部: '80', 采购部: '80', 生产部: '80', 装配部: '80'},
        {内部合同号: 'IT240211-3', 交货日期: '2024-06-05', 工艺部: '80', 采购部: '80', 生产部: '80', 装配部: '80'},
        {内部合同号: 'IT240211-4', 交货日期: '2024-06-05', 工艺部: '80', 采购部: '80', 生产部: '80', 装配部: '80'},
        {内部合同号: 'IT240211-5', 交货日期: '2024-06-05', 工艺部: '80', 采购部: '80', 生产部: '80', 装配部: '80'}
      ],
      // 装配看板
      workDataInfo: [
        {
          内部合同号: 'IT240211-1',
          产品名称: '限压阀插装组件1（执行部分）',
          要求发货时间: '2024-07-05',
          出库状态: '部分出库'
        },
        {
          内部合同号: 'IT240211-2',
          产品名称: '限压阀插装组件2（执行部分）',
          要求发货时间: '2024-07-05',
          出库状态: '部分出库'
        },
        {
          内部合同号: 'IT240211-3',
          产品名称: '限压阀插装组件3（执行部分）',
          要求发货时间: '2024-07-05',
          出库状态: '部分出库'
        },
        {
          内部合同号: 'IT240211-4',
          产品名称: '限压阀插装组件4（执行部分）',
          要求发货时间: '2024-07-05',
          出库状态: '部分出库'
        },
        {
          内部合同号: 'IT240211-5',
          产品名称: '限压阀插装组件5（执行部分）',
          要求发货时间: '2024-07-05',
          出库状态: '部分出库'
        }
      ],
      // 未完工
      unfinishedDataInfo: [
        {
          内部合同号: 'IT240211-1',
          零件名称: '转接板',
          要求完工日: '2024-07-05',
          工序名称: '转接板',
          性质: '自制',
          完工工时: '108',
          未完工工时: '120'
        },
        {
          内部合同号: 'IT240211-2',
          零件名称: '转接板',
          要求完工日: '2024-07-05',
          工序名称: '转接板',
          性质: '自制',
          完工工时: '108',
          未完工工时: '120'
        },
        {
          内部合同号: 'IT240211-3',
          零件名称: '转接板',
          要求完工日: '2024-07-05',
          工序名称: '转接板',
          性质: '自制',
          完工工时: '108',
          未完工工时: '120'
        },
        {
          内部合同号: 'IT240211-4',
          零件名称: '转接板',
          要求完工日: '2024-07-05',
          工序名称: '转接板',
          性质: '自制',
          完工工时: '108',
          未完工工时: '120'
        },
        {
          内部合同号: 'IT240211-5',
          零件名称: '转接板',
          要求完工日: '2024-07-05',
          工序名称: '转接板',
          性质: '自制',
          完工工时: '108',
          未完工工时: '120'
        }
      ],
      // 合同看板 右上
      contract2DataInfo: [
        {
          交货期: '2024-06-05',
          产品名称: '同轴阀组',
          BOM: '已创建',
          工艺: '已完成',
          采购: '已完成',
          加工: '进行中',
          备料: '已完成',
          装配: '进行中',
          成品入库: '完全入库',
          合同发货: '已完成'
        },
        {
          交货期: '2024-06-06',
          产品名称: '同轴阀组',
          BOM: '已创建',
          工艺: '已完成',
          采购: '已完成',
          加工: '进行中',
          备料: '已完成',
          装配: '进行中',
          成品入库: '完全入库',
          合同发货: '已完成'
        },
        {
          交货期: '2024-06-07',
          产品名称: '同轴阀组',
          BOM: '已创建',
          工艺: '已完成',
          采购: '已完成',
          加工: '进行中',
          备料: '已完成',
          装配: '进行中',
          成品入库: '完全入库',
          合同发货: '已完成'
        },
        {
          交货期: '2024-06-08',
          产品名称: '同轴阀组',
          BOM: '已创建',
          工艺: '已完成',
          采购: '已完成',
          加工: '进行中',
          备料: '已完成',
          装配: '进行中',
          成品入库: '完全入库',
          合同发货: '已完成'
        }
      ],
      lackDataInfo: [],
      qualityDataInfo: [
        {
          出库单号: 'OUT20240626_014',
          加工总时: '230',
          有无异常: '无',
          缺陷类型: '加工问题',
          检验人: '王海明',
          检验时间: '2024-07-05'
        },
        {
          出库单号: 'OUT20240626_015',
          加工总时: '230',
          有无异常: '无',
          缺陷类型: '加工问题',
          检验人: '王海明',
          检验时间: '2024-07-05'
        },
        {
          出库单号: 'OUT20240626_016',
          加工总时: '230',
          有无异常: '无',
          缺陷类型: '加工问题',
          检验人: '王海明',
          检验时间: '2024-07-05'
        },
        {
          出库单号: 'OUT20240626_017',
          加工总时: '230',
          有无异常: '无',
          缺陷类型: '加工问题',
          检验人: '王海明',
          检验时间: '2024-07-05'
        },
        {
          出库单号: 'OUT20240626_018',
          加工总时: '230',
          有无异常: '无',
          缺陷类型: '加工问题',
          检验人: '王海明',
          检验时间: '2024-07-05'
        }
      ],
      开始日期: '',
      // 左上滚动
      leftTop: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        openWatch: true,
        hoverStop: true
      },
      // 左中滚动
      leftMiddle: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        openWatch: true,
        hoverStop: true
      },
      // 左下滚动
      leftBottom: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        openWatch: true,
        hoverStop: true
      },
      // 中间滚动
      Middle: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 20,
        openWatch: true,
        hoverStop: true
      },
      // 右上滚动
      rightTop: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        openWatch: true,
        hoverStop: true
      },
      // 右中滚动
      rightMiddle: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 11,
        openWatch: true,
        hoverStop: true
      },
      // 右下滚动
      rightBottom: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        openWatch: true,
        hoverStop: true
      },
      leftTopCurve: null, // 左上曲线
      leftBottomPie: null, // 左下饼图
      leftBottomColumnar: null, // 左下柱状
      rightMiddlePie: null, // 右中饼图
      rightMiddleCurve: null, // 右中曲线
      rightBottomPie: null, // 右下饼图
      rightBottomColumnar: null, // 右下柱状

      leftTopCurveOption: null, // 左上曲线配置
      leftBottomPieOption: null, // 左下饼图配置
      leftBottomColumnarOption: null, // 左下柱状配置
      rightMiddlePieOption: null, // 右中饼图配置
      rightMiddleCurveOption: null, // 右中曲线配置
      rightBottomPieOption: null, // 右下饼图配置
      rightBottomColumnarOption: null, // 右下柱状配置
      leftTopCurveX: [],
      leftTopCurveXData1: [],
      leftTopCurveXData2: [],
      leftTopCurveXData3: [],
      leftTopCurveXData4: [],
      leftBottomPieData: {
        外派: '0',
        采购: '0',
        自制: '0'
      },
      leftBottomColumnarX: [],
      leftBottomColumnarXData1: [],
      leftBottomColumnarXData2: [],
      leftBottomColumnarXData3: [],
      rightMiddlePieData: {
        外派: '0',
        采购: '0',
        自制: '0'
      },
      rightMiddleCurveX: [],
      rightMiddleCurveXData1: [],
      rightMiddleCurveXData2: [],
      rightMiddleCurveXData3: [],
      rightBottomPieDataColor: ['#49a9ee', '#98d87d', '#ffd86e', '#f3857b', '#8996e6'],
      rightBottomPieData: [
        {value: 70, name: '设备问题', itemStyle: {color: '#49a9ee'}},
        {value: 56, name: '物料问题', itemStyle: {color: '#98d87d'}},
        {value: 40, name: '工艺问题', itemStyle: {color: '#ffd86e'}},
        {value: 20, name: '加工问题', itemStyle: {color: '#f3857b'}},
        {value: 12, name: '人员问题', itemStyle: {color: '#8996e6'}}
      ],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      timer: '',
      time: '111',
      timeTimer: null,
      refreshTimer: null,
      zonePageTimer: null,
      currentZonePageIndex: 0,
      zoneTransitionName: 'slide-right'
    }
  },
  computed: {
    zonePages () {
      const pages = []
      const map = Object.create(null)
      if (!Array.isArray(this.lackDataInfo)) {
        return pages
      }
      this.lackDataInfo.forEach((item) => {
        const zone = item && item.Zone != null ? String(item.Zone) : ''
        if (!map[zone]) {
          map[zone] = {zone, items: []}
          pages.push(map[zone])
        }
        map[zone].items.push(item)
      })
      return pages
    },
    zonePageCount () {
      return this.zonePages.length
    },
    currentZonePage () {
      return this.zonePages[this.currentZonePageIndex] || null
    },
    currentZoneName () {
      return this.currentZonePage ? this.currentZonePage.zone : ''
    },
    currentZoneItems () {
      return this.currentZonePage ? this.currentZonePage.items : []
    }
  },
  created () {
    this.dt_IframeUrl = window.ConnectConfig.dt_IframeUrl
  },
  mounted () {
    const that = this

    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })

    // 数据库读取部分
    this.getMainPlanCountInfoData()
    this.getmidddlelist()
    this.getOrderDataInfo()
    this.getWorkDataInfo()
    this.getUnfinishedDataInfo()
    this.getContract2DataInfo()
    this.getLackDataInfo()
    this.getQualityDataInfo()
    this.getContractMainDataInfo()

    // echarts图表绘制部分
    this.initEchartDom()
    this.setEchartData()

    // 定时器部分
    this.timeTimer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    this.refreshTimer = setInterval(() => {
      this.getMainPlanCountInfoData()
      this.getmidddlelist()
      this.getOrderDataInfo()
      this.getWorkDataInfo()
      this.getUnfinishedDataInfo()
      this.getContract2DataInfo()
      this.getLackDataInfo()
      this.getQualityDataInfo()
      this.getContractMainDataInfo()
      this.setEchartData()
    }, 10000)
    this.startZonePaging()
  },
  beforeDestroy () {
    clearInterval(this.timeTimer)
    clearInterval(this.refreshTimer)
    this.stopZonePaging()
  },
  methods: {
    ensureZonePageIndexValid () {
      const count = this.zonePages.length
      if (count <= 0) {
        this.currentZonePageIndex = 0
        return
      }
      if (this.currentZonePageIndex >= count) {
        this.currentZonePageIndex = 0
      }
      if (this.currentZonePageIndex < 0) {
        this.currentZonePageIndex = count - 1
      }
    },
    nextZonePage () {
      const count = this.zonePages.length
      if (count <= 1) {
        return
      }
      this.zoneTransitionName = 'slide-left'
      this.currentZonePageIndex = (this.currentZonePageIndex + 1) % count
    },
    prevZonePage () {
      const count = this.zonePages.length
      if (count <= 1) {
        return
      }
      this.zoneTransitionName = 'slide-right'
      this.currentZonePageIndex = (this.currentZonePageIndex - 1 + count) % count
    },
    startZonePaging () {
      this.stopZonePaging()
      const interval = window.ConnectConfig && window.ConnectConfig.zonePageInterval ? window.ConnectConfig.zonePageInterval : 10000
      this.zonePageTimer = setInterval(() => {
        this.nextZonePage()
      }, interval)
    },
    stopZonePaging () {
      if (this.zonePageTimer) {
        clearInterval(this.zonePageTimer)
        this.zonePageTimer = null
      }
    },
    getMainPlanCountInfoData () {
      let data = this.CreateData1('11', '主页六个关键数据_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.planCountInfo = []
        this.planCountInfo.push(this.num(res.data[0].当前计划))
        this.planCountInfo.push(this.num(res.data[0].当前产量))
        this.planCountInfo.push(this.num(res.data[0].计划完成))
        this.planCountInfo.push(this.num(res.data[0].工时消耗))
        this.planCountInfo.push(this.num(res.data[0].当前齐套率))
        this.planCountInfo.push(this.num(res.data[0].当前合格率))
      })
    },
    getOrderDataInfo () {
      let data = this.CreateData1('11', '左上订单看板_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        res.data.forEach((ele) => {
          ele.工艺部 = this.num(ele.工艺部)
          ele.采购部 = this.num(ele.采购部)
          ele.生产部 = this.num(ele.生产部)
          ele.装配部 = this.num(ele.装配部)
        })
        this.orderDataInfo = res.data
      })
    },
    getWorkDataInfo () {
      let data = this.CreateData1('11', '左中装配看板_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.workDataInfo = res.data
      })
    },
    getUnfinishedDataInfo () {
      let data = this.CreateData1('11', '左下未完成看板_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.unfinishedDataInfo = res.data
      })
    },
    getContract2DataInfo () {
      let data = this.CreateData1('11', '右上合同看板_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.contract2DataInfo = res.data
      })
    },
    getLackDataInfo () {
      const autMap = {
        1: '自动',
        3: 'EDIT（编辑模式）',
        0: 'MDI（手动数据输入模式）',
        10: 'REMOTE（远程模式）',
        9: 'REF（参考点返回模式 / 回零模式）',
        5: 'JOG（手动连续进给模式 / 点动模式）',
        8: 'INC（增量进给模式 / 步进模式）'
      }
      const statusMap = {
        '-1': '关机',
        '0': '待机',
        '1': '运行',
        '2': '报警'
      }
      let data = this.CreateData1('11', 'Event_CaChe_Var_看板查询')
      this.ExecDatabase2(data).then((res) => {
        if (res.data.length <= 0) {
          console.log('缺件数据为空');
          return
        }
        res.data.forEach((item) => {
          if (item.TagName === '操作模式') {
            item.TagValue = autMap[item.TagValue] || item.TagValue
          }
          if (item.TagName === '设备状态') {
            item.TagValue = statusMap[String(item.TagValue)] || item.TagValue
          }
        })
        this.lackDataInfo = res.data
        this.ensureZonePageIndexValid()
      })
    },
    getQualityDataInfo () {
      let data = this.CreateData1('11', '右下质量看板_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.qualityDataInfo = res.data
      })
    },
    getContractMainDataInfo () {
      let data = this.CreateData1('11', '中间主体订单_表格_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        res.data.forEach((ele) => {
          ele.工艺部 = this.num(ele.工艺部)
          ele.采购部 = this.num(ele.采购部)
          ele.生产部 = this.num(ele.生产部)
          ele.装配部 = this.num(ele.装配部)
        })
        this.contractMainDataInfo = res.data
      })
    },
    getContractMainDataInfoDetail (row) {
      let param = []
      param[0] = ['合同号', row.内部合同号]
      let data = this.CreateData1('11', '中间主体订单详情_表格_查询', param)
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        if (res.data.length > 0) {
          // res.data.forEach((ele) => {
          //   ele.工艺部 = this.num(ele.工艺部)
          //   ele.采购部 = this.num(ele.采购部)
          //   ele.生产部 = this.num(ele.生产部)
          //   ele.装配部 = this.num(ele.装配部)
          // })
          this.contractMainDataInfoDetail = res.data
          this.mainShowIndex = 'jd-detail'
        }
      })
    },
    getScale () {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return {x: w, y: h}
    },
    setScale () {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    initEchartDom () {
      this.leftTopCurve = this.$echarts.init(document.getElementById('leftTopCurve'))
      this.leftBottomPie = this.$echarts.init(document.getElementById('leftBottomPie'))
      this.leftBottomColumnar = this.$echarts.init(document.getElementById('leftBottomColumnar'))
      // this.rightMiddlePie = this.$echarts.init(document.getElementById('rightMiddlePie'))
      // this.rightMiddleCurve = this.$echarts.init(document.getElementById('rightMiddleCurve'))
      this.rightBottomPie = this.$echarts.init(document.getElementById('rightBottomPie'))
      this.rightBottomColumnar = this.$echarts.init(document.getElementById('rightBottomColumnar'))
    },
    setEchartData () {
      this.getLeftTopCurveData()
      this.getLeftBottomPieData()
      this.getLeftBottomColumnar()
      // this.getRightMiddlePieData()
      // this.getrightMiddleCurveData()
      this.getRightBottomPieData()
      this.rightBottomColumnarOptionSet()
    },
    getRightBottomPieData () {
      let data = this.CreateData1('11', '右下质量看板_饼图_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.rightBottomPieData = []
        for (let i = 0; i < res.data.length; i++) {
          let ele = res.data[i]
          this.rightBottomPieData.push({
            value: ele.数量,
            name: ele.缺陷类型,
            itemStyle: {
              color: this.rightBottomPieDataColor[i]
            }
          })
        }
        this.rightBottomPieOptionSet()
      })
    },
    getrightMiddleCurveData () {
      let data = this.CreateData1('11', '右中缺件看板_曲线_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.rightMiddleCurveX = []
        this.rightMiddleCurveXData1 = []
        this.rightMiddleCurveXData2 = []
        this.rightMiddleCurveXData3 = []
        res.data.forEach((ele) => {
          this.rightMiddleCurveX.push(ele.交货期)
          this.rightMiddleCurveXData1.push(this.num(ele.外派))
          this.rightMiddleCurveXData2.push(this.num(ele.采购))
          this.rightMiddleCurveXData3.push(this.num(ele.自制))
        })
        this.rightMiddleCurveOptionSet()
      })
    },
    getRightMiddlePieData () {
      let data = this.CreateData1('11', '右中缺件看板_饼图_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.rightMiddlePieData.外派 = '0'
        this.rightMiddlePieData.采购 = '0'
        this.rightMiddlePieData.自制 = '0'
        this.rightMiddlePieData.外派 = res.data[0].外派
        this.rightMiddlePieData.采购 = res.data[0].采购
        this.rightMiddlePieData.自制 = res.data[0].自制
        this.rightMiddlePieOptionSet()
      })
    },
    getLeftBottomColumnar () {
      let data = this.CreateData1('11', '左下未完成工序_柱状_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.leftBottomColumnarX = []
        this.leftBottomColumnarXData1 = []
        this.leftBottomColumnarXData2 = []
        this.leftBottomColumnarXData3 = []
        res.data.forEach((ele) => {
          this.leftBottomColumnarX.push(ele.内部合同号)
          this.leftBottomColumnarXData1.push(this.num(ele.外派数量))
          this.leftBottomColumnarXData2.push(this.num(ele.自制数量))
          this.leftBottomColumnarXData3.push(this.num(ele.采购数量))
        })
        this.leftBottomColumnarOptionSet()
      })
    },
    getLeftBottomPieData () {
      let data = this.CreateData1('11', '左下未完成工序_饼图_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.leftBottomPieData.外派 = '0'
        this.leftBottomPieData.采购 = '0'
        this.leftBottomPieData.自制 = '0'
        this.leftBottomPieData.外派 = res.data[0].外派
        this.leftBottomPieData.采购 = res.data[0].采购
        this.leftBottomPieData.自制 = res.data[0].自制
        this.leftBottomPieOptionSet()
      })
    },
    getLeftTopCurveData () {
      let data = this.CreateData1('11', '左上计划执行情况_曲线_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) {
          return
        }
        this.leftTopCurveX = []
        this.leftTopCurveXData1 = []
        this.leftTopCurveXData2 = []
        this.leftTopCurveXData3 = []
        this.leftTopCurveXData4 = []
        res.data.forEach((ele) => {
          this.leftTopCurveX.push(ele.交货日期)
          this.leftTopCurveXData1.push(this.num(ele.工艺部))
          this.leftTopCurveXData2.push(this.num(ele.采购部))
          this.leftTopCurveXData3.push(this.num(ele.生产部))
          this.leftTopCurveXData4.push(this.num(ele.装配部))
        })
        this.leftTopCurveOptionSet()
      })
    },
    leftTopCurveOptionSet () {
      this.leftTopCurveOption = {
        title: {
          text: '计划执行情况',
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#007175',
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工艺', '采购部', '生产部', '装配'],
          orient: 'vertical', // 设置图例为竖向排列
          right: 10, // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            color: '#a2a7b3',
            fontSize: 12
          }
        },
        grid: {
          top: '25%',
          left: '3%',
          right: '16%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.leftTopCurveX, // ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12', '09-13', '09-14', '09-15', '09-16', '09-17', '09-18', '09-19'],
          axisLabel: {
            color: '#747c8c'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          axisLabel: {
            color: '#747c8c'
          }
        },
        series: [
          {
            name: '工艺',
            type: 'line',
            data: this.leftTopCurveXData1, // [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
            itemStyle: {
              color: '#f48491' // 设置线条颜色
            }
          },
          {
            name: '采购部',
            type: 'line',
            data: this.leftTopCurveXData2, // [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
            itemStyle: {
              color: '#f4f400' // 设置线条颜色
            }
          },
          {
            name: '生产部',
            type: 'line',
            data: this.leftTopCurveXData3, // [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190],
            itemStyle: {
              color: '#7b44bb' // 设置线条颜色
            }
          },
          {
            name: '装配',
            type: 'line',
            data: this.leftTopCurveXData4, // [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
            itemStyle: {
              color: '#00b273' // 设置线条颜色
            }
          }
        ]
      }
      this.leftTopCurve.setOption(this.leftTopCurveOption)
    },
    leftBottomPieOptionSet () {
      this.leftBottomPieOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          orient: 'vertical',
          right: 0, // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemGap: 10,
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 12,
            color: function (params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '85%'],
            center: ['43%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: 'rgba(9, 26, 54,1)',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.leftBottomPieData.外派, name: '外派', itemStyle: {color: '#e6ad00'}},
              {value: this.leftBottomPieData.采购, name: '采购', itemStyle: {color: '#ad4846'}},
              {value: this.leftBottomPieData.自制, name: '自制', itemStyle: {color: '#489765'}}
            ]
          }
        ]
      }
      this.leftBottomPie.setOption(this.leftBottomPieOption)
    },
    leftBottomColumnarOptionSet () {
      this.leftBottomColumnarOption = {
        legend: {
          top: '5%',
          right: '5%', // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 12,
            color: function (params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '0%',
          bottom: '25%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: this.leftBottomColumnarX, // ['1T240211-1', '1T240211-2', '1T240211-3', '1T240211-4'],
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 10, // 设置x轴文字的大小
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '外派',
            data: this.leftBottomColumnarXData1, // [40, 22, 47, 39],
            type: 'bar',
            itemStyle: {color: '#e7ad00'},
            barMaxWidth: 10
          },
          {
            name: '采购',
            data: this.leftBottomColumnarXData3, // [21, 45, 32, 46],
            type: 'bar',
            itemStyle: {color: '#b04946'},
            barMaxWidth: 10
          },
          {
            name: '自制',
            data: this.leftBottomColumnarXData2, // [57, 36, 49, 44],
            type: 'bar',
            itemStyle: {color: '#489968'},
            barMaxWidth: 10
          }
        ]
      }
      this.leftBottomColumnar.setOption(this.leftBottomColumnarOption)
    },
    rightMiddlePieOptionSet () {
      this.rightMiddlePieOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '0%',
          orient: 'vertical',
          right: 0, // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemGap: 10,
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 12,
            color: function (params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: 'rgba(9, 26, 54,1)',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.rightMiddlePieData.外派, name: '外派', itemStyle: {color: '#e6ad00'}},
              {value: this.rightMiddlePieData.采购, name: '采购', itemStyle: {color: '#ad4846'}},
              {value: this.rightMiddlePieData.自制, name: '自制', itemStyle: {color: '#489765'}}
            ]
          }
        ]
      }
      this.rightMiddlePie.setOption(this.rightMiddlePieOption)
    },
    rightMiddleCurveOptionSet () {
      this.rightMiddleCurveOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['外派', '采购', '自制'],
          right: 10, // 将图例放置在右侧
          bottom: 10,
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            color: '#a2a7b3',
            fontSize: 12
          }
        },
        grid: {
          top: '5%',
          left: '6%',
          right: '4%',
          bottom: '18%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.rightMiddleCurveX, // ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12', '09-13', '09-14', '09-15', '09-16', '09-17', '09-18', '09-19'],
          axisLabel: {
            color: '#747c8c',
            fontSize: 9 // 设置x轴文字的大小
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            color: '#747c8c'
          }
        },
        series: [
          {
            name: '外派',
            type: 'line',
            data: this.rightMiddleCurveXData1, // [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
            itemStyle: {
              color: '#e6ad00' // 设置线条颜色
            }
          },
          {
            name: '采购',
            type: 'line',
            data: this.rightMiddleCurveXData2, // [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
            itemStyle: {
              color: '#ad4846' // 设置线条颜色
            }
          },
          {
            name: '自制',
            type: 'line',
            data: this.rightMiddleCurveXData3, // [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190],
            itemStyle: {
              color: '#489765' // 设置线条颜色
            }
          }
        ]
      }
      this.rightMiddleCurve.setOption(this.rightMiddleCurveOption)
    },
    rightBottomPieOptionSet () {
      this.rightBottomPieOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: -5,
          top: '25%',
          itemGap: 5,
          icon: 'circle',
          formatter: function (name) {
            var total = 0
            var targetValue
            // 直接使用rightBottomPieOption，而不是this
            this.rightBottomPieOption.series[0].data.forEach(function (item) {
              total += item.value
              if (item.name === name) {
                targetValue = item.value
              }
            })
            var percentage = ((targetValue / total) * 100).toFixed(2) + '%'
            return name + ' ' + targetValue + '个 ' + percentage
          }.bind(this), // 使用bind(this)确保this指向正确的上下文
          textStyle: {
            fontSize: 8,
            color: '#fff'
          }
        },
        series: [
          {
            name: '问题分类',
            type: 'pie',
            radius: '100%',
            right: '50%',
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
            data: this.rightBottomPieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.rightBottomPie.setOption(this.rightBottomPieOption)
    },
    rightBottomColumnarOptionSet () {
      this.rightBottomColumnarOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '6%',
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['加工中心', '数控车', '普车', '磨床', '钻床', '锯床', '电火花'],
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 7, // 设置x轴文字的大小
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '设备问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: '#49a9ee'
            },
            data: [5, 5, 5, 5, 5, 5, 7],
            barMaxWidth: 10
          },
          {
            name: '物料问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: '#98d87d'
            },
            data: [2, 4, 1, 3, 2, 5, 7]
          },
          {
            name: '工艺问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: '#ffd86e'
            },
            data: [5, 5, 5, 5, 5, 5, 7]
          },
          {
            name: '加工问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: '#f3857b'
            },
            data: [5, 5, 5, 5, 5, 5, 7]
          },
          {
            name: '人员问题',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: '#8996e6'
            },
            data: [5, 5, 5, 5, 5, 5, 7]
          }
        ]
      }
      this.rightBottomColumnar.setOption(this.rightBottomColumnarOption)
    },
    num (num) {
      return (num + '').indexOf('.') == -1 ? num : num.toFixed(1)
      // return num
    },
    getmidddlelist () {
      let data = this.CreateData1(
        '11',
        '中间实时OEE数据展示_查询'
      )
      this.ExecDatabase(data).then((res) => {
        // res.data.forEach((ele) => {
        //   ele.OEE = this.num(ele.OEE)
        //   ele.合格率 = this.num(ele.合格率)
        //   ele.性能利用率 = this.num(ele.性能利用率)
        //   ele.时间利用率 = this.num(ele.时间利用率)
        // })
        this.lineInfo = res.data
      })
    },
    clareData () {
      this.contractMainDataInfoDetail = []
      this.mainShowIndex = 'jd'
    },
    // 查询中间订单 工时 能源 出勤等信息
    getPlanCountInfo () {
      const params = []
      var data = this.CreateData1(
        11,
        'visualization_中间产线实时信息_查询',
        params
      )
      this.ExecDatabase(data).then((res) => {
        this.planCountInfo = []
        if (res.data.length > 0) {
          this.planCountInfo[0] = res.data[0]['当前计划']
          this.planCountInfo[1] = res.data[0]['当前产量']
          this.planCountInfo[2] = res.data[0]['计划完成']
          this.planCountInfo[3] = res.data[0]['工时消耗']
          this.planCountInfo[4] = res.data[0]['能源消耗']
          this.planCountInfo[5] = res.data[0]['生产出勤']
        }
      })
    },
    zeroFill (i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime () {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      )
    }
  },
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind (
        el,
        {
          value: {delay, speed} = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll () {
          let scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s ease-out;
}

.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #091a36;
  color: white;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    // display: grid;
    // grid-template-columns: 25% 50% 25%;
    // grid-template-rows: 100%;

    .c-left {
      width: 25%;
      height: 100%;
      background-color: #091a36;
      border-right: 1px solid #3d4a61;

      .left-header {
        background-color: #091a36;
        height: 8.1%;
        display: flex;
        align-items: center;
        //padding: 0 2rem;

        img {
          margin: 10px;
          height: 5rem;
          width: 20rem;
        }

        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }

      .left-content {
        height: 90%;

        .main {
          height: 37.0%;
        }

        .main2 {
          height: 21.04%;
        }

        .main3 {
          height: 44.3%;
        }

        .box {
          display: flex;
          justify-content: space-between;
          height: 90%;
          width: 100%;
        }

        .left {
          width: 50%;
          height: 100%;
        }

        .right {
          width: 44.5%;
          height: 100%;
        }

        .box2 {
          display: flex;
          justify-content: space-between;
          height: 53%;
        }

        .left1 {
          width: 45%;
        }

        .right1 {
          width: 100%;
        }

        .row-item {
          height: 20px !important;
          line-height: 20px !important;
          font-size: 12px;
        }

        .header-item {
          height: 24px;
          line-height: 24px;
        }

        .dv-scroll-board .header {
          font-size: 12px;
        }

        .hezi1 {
          position: absolute;
          top: 10%;
          left: 23%;
        }

        .n1 {
          color: #fff;
        }

        .n2 {
          color: #fff;
          font-size: 12px;
        }

        .n3 {
          color: #fff;
          font-size: 12px;
        }

        .n4 {
          color: #fff;
          font-size: 12px;
        }

        .n5 {
          color: #fff;
          font-size: 12px;
        }
      }
    }

    .c-center {
      width: 50%;
      background-color: #091a36;
      box-sizing: border-box;

      .center-header {
        background-color: #091a36;
        height: 8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
        font-weight: bold;
      }

      .center-content {
        height: calc(100% - 8rem);
        padding: 1rem;
        box-sizing: border-box;

        .items {
          height: 100%;
          padding: 1rem;
          box-sizing: border-box;

          .item-head {
            height: 10rem;
            // outline: 5px solid #081f48;
            // border-bottom: 1rem dotted #043079;
            display: grid;
            grid-template-columns: repeat(3, 33.3%);
            grid-template-rows: repeat(2, 50%);
            justify-items: center;
            align-content: center;
            box-sizing: border-box;
            padding-bottom: 1rem;

            background: linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
            background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
            background-position: 0 0, 0 100%, 0 0, 100% 0;

            animation: linearGradientMove 0.3s infinite linear;
          }

          // .item-head:hover {}

          @keyframes linearGradientMove {
            100% {
              background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
            }
          }

          .item-content {
            background-color: #091a36;
            height: calc(100% - 12rem);
            box-sizing: border-box;
            margin-top: 1rem;
            box-sizing: border-box;

            .bg {
              width: 100%;
              height: 100%;
              background-image: url('../assets/bg1.png');
              background-size: 100% 100%;
            }

            .btns {
              position: absolute;
              margin-left: 1rem;
              z-index: 999;

              div {
                border: 2px solid #244d71;
                background-color: #091a36;
                color: #ffffff;
                padding: 0.5rem 2rem;
                margin: 0.5rem 0;
                font-size: 1.2rem;
              }
            }

            .center-tab {
              position: absolute;
              margin-left: calc(50% - 22.5rem);
              margin-top: 0rem;
              width: 45rem;
              height: 10rem;

              box-sizing: border-box;
              box-shadow: inset 0 0 3rem rgb(24 78 135);
            }

            .middle-bottom {
              position: absolute;
              width: 99%;
              margin-left: calc(50% - 45.4rem);
              margin-top: 12rem;
              height: 65rem;
              box-sizing: border-box;
              padding-top: 5px;
              //box-shadow: inset 0 0 3rem rgb(24 78 135);

              .diyTab {
                td {
                  font-size: 1.3rem;
                }
              }

              .roll-box div {
                font-size: 13px;
              }

              .roll-table-box div {
                font-size: 14px;
              }
            }
          }

          .item-head > div {
            display: flex;
            align-items: center;
            width: 15rem;

            img {
              height: 4.5rem;
              width: 4.5rem;
              object-fit: cover;
            }

            .data {
              display: flex;
              flex-direction: column;

              // span {}

              .data-value {
                font-size: 1.5rem;
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    .c-right {
      width: 25%;
      background-color: #091a36;

      border-left: 1px solid #3d4a61;

      .right-header {
        background-color: #091a36;
        height: 7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
      }

      .right-content {
        height: calc(100% - 8rem);
      }
    }

    .items {
      height: 30%;
      width: 100%;
      box-sizing: border-box;
      /*右下*/
      box-shadow: inset 0 0 3rem rgb(24 78 135);

      .title {
        height: 15%;
        display: flex;
        align-items: center;
        padding-left: 10%;
        box-sizing: border-box;

        .sign {
          height: 60%;
          width: 1rem;
          background-color: #016eea;
        }

        .text {
          color: white;
          font-size: 1.7rem;
          box-sizing: border-box;
          margin-left: 1.2rem;
        }
      }
    }

    .items > div:last-child {
      height: 85%;
      width: 100%;
    }
  }
}

.right {
  width: 100%;
  height: 100%;
  background-color: #091a37;
  padding-left: 1.5%;
  // padding: 0 2rem;
  box-sizing: border-box;

  .right-head {
    height: 8.2%;
    display: flex;
    justify-content: flex-end;

    span {
      margin: 25px;
      font-weight: 700;
      font-size: 30px;
      color: #fff;
    }
  }

  .main {
    height: 90%;

    .top {
      width: 100%;
      height: 25.93%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;

        // .cook-item {
        //   width: 33.33%;
        //   height: 50%;
        //   position: relative;

        //   [class*="cook"] {
        //     width: 100%;
        //     height: 100%;
        //   }
        //   > span {
        //     position: absolute;
        //     bottom: 0;
        //     left: 50%;
        //     transform: translate(-50%);
        //     z-index: 999999999;
        //     font-size: 6px;
        //     color: #5bb7c0;
        //   }
        // }
      }
    }

    .center {
      width: 100%;
      height: 39.04%;

      .center-main {
        width: 100%;
        height: 90%;

        .center-left {
          height: 100%;

          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }

          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          // background-color: red;
          > span {
            color: #fff;
          }

          /deep/ .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 37.04%;

      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;

        .andong-left {
          width: 60%;
          height: 100%;

          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;

          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }

      .bottom-bottom {
        width: 100%;
        height: 44.5%;
        // margin-top: 5px;

        /deep/ .header-item {
          font-size: 6px;
          padding: 0;
        }

        /deep/ .row-item {
          font-size: 4px;
          padding: 0;

          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}

.roll-table {
  margin-left: 5px;
  border: 1px solid #22405c;
  width: 99%;
}

.roll-table-box, .roll-box {
  display: flex;
  justify-content: space-around;
}

.roll-table-box div,
.roll-box div {
  //border: 1px solid #7b8eb4;
  //border-collapse: collapse;
  //width: 70px;
  flex: 1;
  text-align: center;
  height: 28px;
  line-height: 28px;
  font-size: 10px;
  overflow: hidden;
}

.roll-table-box div {
  overflow: auto;
  word-wrap: break-word; /* 允许在长单词内部换行 */
  word-break: break-all; /* 允许在任意位置换行 */
  white-space: normal; /* 处理空白符，自动换行 */
  //background-color: #082d91;
  height: 30px;
  line-height: 30px;
  //border: 1px solid #7b8eb4;
  font-size: 11px;
  font-weight: 700;
}

.roll-box {
  display: flex;
}

.diyTab {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-color: #fff;
  border-width: 0.1px;

  thead {
    width: 100%;
    border-bottom: 1px solid #2c3e4c;
  }

  tbody {
    width: 100%;
    overflow: auto;
  }

  tbody::-webkit-scrollbar {
    width: 0 !important;
  }

  tr {
    width: 100%;
    display: flex;
  }

  td {
    font-size: 1rem;
    width: 25%;
    line-height: 3rem;
    text-align: center;
    height: 3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}

.redColor {
  color: #ae021a !important;
}

.red2Color {
  color: #e44035 !important;
}

.yellowColor {
  color: #b89112 !important;
}

.greenColor {
  color: #00b153 !important;
}

</style>
