<template>
  <div class="lighting-img" style="overflow: hidden">
    <div class="lighting-img-box">
      <img src="../image/bg.jpg" />
      <div class="bulbBox">
        <div
          v-for="(bulb, index) in bulbs"
          :key="index"
          :class="['wh100', bulb.className]"
          v-show="bulb.visible">
          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button class="F1">1F</button><br />
      <button class="F2">2F</button><br />
      <button class="platform">站台</button>
    </div>
    <div class="light-tag" style="border: 1px solid red">
      <div class="light-tag-tit">
        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
        <span
          class="tagtext"
          :style="{
            fontSize: '16px',
            fontWeight: 700,
            color: 'rgba(255, 255, 255, 1)',
          }"
          >站厅照明 1区</span
        >
        <button
          :style="{
            width: ' 50px',
            height: '24px',
            opacity: 1,
            background: 'rgba(57, 215, 187, 0.1)',
            border: '1px solid rgba(57, 215, 187, 1)',
            fontSize: '12px',
            fontWeight: 400,
            lineHeight: ' 17.38px',
            color: 'rgba(57, 215, 187, 1)',
            marginLeft: '180px',
          }"
          >正常</button
        >
      </div>
      <div class="light-tag-box">
        <img src="/asset/image//bulbLogo/22496.png" alt="" />
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
          >控制模式</span
        >
        <span
          :style="{
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '16px',
            fontWeight: '700',
            marginRight: '20px',
          }"
          >自动</span
        >
        <img src="/asset/image//bulbLogo/22546.png" alt="" />
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
        <span
          :style="{
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '16px',
            fontWeight: '700',
            marginLeft: '20px',
          }"
          >1000lux</span
        >
        <img src="/asset/image//bulbLogo/22554.png" alt="" />
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
          >控制场景</span
        >
        <span
          :style="{
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '16px',
            fontWeight: '700',
            marginRight: '20px',
          }"
          >舒适</span
        >
        <img src="/asset/image//bulbLogo/22553.png" alt="" />
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
        <span
          :style="{
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '16px',
            fontWeight: '700',
            marginLeft: '20px',
          }"
          >4200k</span
        >
      </div>
    </div>
  </div>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    width="496"
    height="1080"
    placement="right"
    :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
    :closable="false"
    id="Odrawer"
    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
    <div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="控制面板">
          <!-- 照明区域 -->
          <div>
            <div class="lightarea">
              <div class="lightareatab"></div>
              <span class="lightareatext"> 照明区域 </span>
              <button
                class="plan"
                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
                @click="togglePlan">
                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
              </button>
            </div>
            <!-- 照明区域按钮部分 -->
            <div class="area">
              <template v-if="!showAllButtonsarea">
                <button
                  v-for="(button, index) in buttons1"
                  :key="index"
                  :class="{ btn: true, selected: button === selectedButton }"
                  @click="selectButton(button)">
                  {{ button.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtonsarea = true" class="openzm"
                    ><down-outlined />展开</span
                  >
                </div>
              </template>
              <template v-else>
                <button
                  v-for="(button, index) in buttons"
                  :key="index"
                  :class="{ btn: true, selected: button === selectedButton }"
                  @click="selectButton(button)">
                  {{ button.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtonsarea = false" class="openzm"
                    ><up-outlined />回缩</span
                  >
                </div>
              </template>
            </div>
          </div>
          <!-- 照明回路部分 -->
          <div>
            <div class="circuitarea" v-if="selectedButton">
              <div class="circuittab"></div>
              <span class="circuittext">照明回路</span>
              <div class="btn2">
                <button
                  class="openplan"
                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
                  @click="togglePlan2">
                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
                </button>
                <a-switch
                  v-model:checked="selectAllCheckbox"
                  :class="{
                    'blue-background': selectAllCheckbox,
                    'grey-background': !selectAllCheckbox,
                  }"
                  @change="toggleAllSelection" />
                <button @click="allbtn1" class="allbtn">全选</button>
                <button class="both" @click="selectAll">
                  {{ isAllchoose ? '多选' : '单选' }}
                </button>
              </div>
            </div>
            <div class="btnarea" v-if="selectedButton">
              <template v-if="!showAllButtons">
                <button
                  v-for="(button2, index) in limitedButtons"
                  :key="index"
                  :class="{ btn: true, selected: button2.selected }"
                  class="zmhlbtn"
                  @click="toggleSelection(button2)">
                  <stop-outlined v-if="button2.zmhld" />
                  {{ button2.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
                </div>
              </template>
              <template v-else>
                <button
                  v-for="(button2, index) in buttons2"
                  :key="index"
                  :class="{ btn: true, selected: button2.selected }"
                  @click="toggleSelection(button2)">
                  {{ button2.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
                </div>
              </template>
            </div>
          </div>
          <!-- 控制模式 -->
          <div>
            <div class="controlarea" v-show="showControlMode">
              <div class="controltab"></div>
              <span class="controltext"> 控制模式 </span>
            </div>
            <!-- 控制模式按钮部分 -->
            <div class="controlmodebtnarea" v-show="showControlMode">
              <button
                v-for="(button3, index) in controlbutton"
                :key="index"
                :class="{ btn: true, selected: button3.label === selectedButton3 }"
                @click="selectButton3(button3)">
                {{ button3.label }}
              </button>
            </div>
          </div>
          <!-- 控制场景 -->
          <div>
            <div class="controlscenearea" v-show="showControlScene">
              <div class="controlscenetab"></div>
              <span class="controlscenetext"> 控制场景 </span>
            </div>
            <!-- 控制场景按钮部分 -->
            <div class="controlscenebtnarea" v-show="showControlScene">
              <button
                v-for="(button4, index) in controlscenebuttons"
                :key="index"
                :class="{ btn: true, selected: button4.label === selectedButton4 }"
                @click="selectButton4(button4)">
                {{ button4.label }}
              </button>
            </div>
          </div>
          <!-- 灯具参数 -->
          <div>
            <div class="lightparametersarea" v-if="selectedButton4">
              <div class="lightparameterstab"></div>
              <span class="lightparameterstext"> 灯具参数 </span>
            </div>
            <div class="lightparameterstextarea" v-if="selectedButton4">
              <table class="custom-table table1">
                <thead>
                  <tr :style="{ background: 'rgba(35,45,69)' }">
                    <th>开启数量</th>
                    <th>亮度(lux)</th>
                    <th>色温</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(row, index) in lightSource"
                    :key="index"
                    @click="handleRowClick(row.num)"
                    :style="{ height: '50px' }">
                    <td>{{ row.num }}</td>
                    <td>{{ row.light }}</td>
                    <td>{{ row.tempruter }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="bottom">
            <button class="flushed" @click="refresh">刷新</button>
            <button class="execute" @click="showModal">执行</button>
          </div>
          <a-modal
            :v-if="cxlist.length === 0"
            v-model:visible="executevisible"
            width="500px"
            height="792px"
            okText="执行"
            :closable="false"
            @ok="handleOk2"
            :mask="false"
            :bodyStyle="{
              opacity: 1,
              background: ' rgba(0,0,0)',
              color: 'rgba(255,83,0)',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
              position: 'fixed',
              right: '496px',
              top: '0',
            }">
            <div :v-if="cxlist.length === 0" style="height: 792px">
              <div>
                <div class="div-operation"></div>
                <span class="text-operation">变更内容 </span>
              </div>
              <div class="jbox" v-for="item in cxlist" :key="item.id">
                <div class="journal" style="margin-top: 20px">
                  <div class="imgText">
                    <div class="zjzm">
                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
                      <span
                        class="titletext"
                        style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                        >{{ item.name }}</span
                      >
                    </div>
                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
                  </div>
                  <div class="control-btn">
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      "
                      >自动</span
                    >
                  </div>
                  <div class="light-btn">
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(243, 97, 99, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                      "
                      >30lux</span
                    >
                  </div>
                  <div class="controlarea-btn">
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      "
                      >自动</span
                    >
                  </div>
                  <div class="temp-btn">
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );
                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                      "
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render>
          <div class="divadd">
            <button class="add" @click="addModal">添加</button>
          </div>
          <table class="custom-table table1">
            <thead>
              <tr :style="{ background: 'rgba(35,45,69)' }">
                <th>序号</th>
                <th>执行时间</th>
                <th>计划名称</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in dataSource" :key="index">
                <td>{{ row.key }}</td>
                <td>{{ row.data }}</td>
                <td>{{ row.planname }}</td>
                <td v-if="row.status === '待执行'">
                  <button
                    style="
                      font-size: 12px;
                      background: rgba(57, 215, 187, 0.1);
                      color: rgba(57, 215, 187, 1);
                      border: 1px solid rgba(57, 215, 187, 1);
                    ">
                    {{ row.status }}
                  </button>
                </td>
                <td v-if="row.status !== '待执行'">
                  <button
                    style="
                      font-size: 12px;
                      background: rgba(243, 97, 99, 0.1);
                      border: 1px solid rgba(243, 97, 99, 1);
                      color: rgba(243, 97, 99, 1);
                    ">
                    {{ row.status }}
                  </button>
                </td>
                <td>
                  <button class="tabreboot" @click="handlerefClick1">重启</button>
                  <button class="tabdelete">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <a-modal
            v-model:visible="addvisible"
            width="500px"
            height="792px"
            :closable="false"
            :mask="false"
            :bodyStyle="{
              opacity: 1,
              background: ' rgba(0,0,0)',
              color: 'rgba(255,83,0)',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
              height: '100vh',
              maxHeight: '100vh',
              position: 'fixed',
              right: '496px',
              top: '0',
            }">
            <div>
              <div class="div-operation"></div>
              <span class="text-operation">计划库</span>
            </div>
            <div style="margin-top: 20px">
              <a-transfer
                v-model:target-keys="targetKeys"
                :data-source="mockData"
                show-search
                :filter-option="filterOption"
                :render="(item) => item.title"
                @change="handleChange"
                :style="{ color: 'rgba(255,255,255,1)' }"
                @search="handleSearch"
                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
            </div>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="3" tab="日志">
          <table class="custom-table table1">
            <thead>
              <tr :style="{ background: 'rgba(35,45,69)' }">
                <th>序号</th>
                <th>执行时间</th>
                <th>操作内容</th>
                <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(row, index) in dataSource1"
                :key="index"
                @click="handleRowClick(row.key)"
                :class="row.key === trindex ? 'istrindex' : ''">
                <td>{{ row.key }}</td>
                <td>{{ row.data }}</td>
                <td>{{ row.planname }}</td>
                <td>{{ row.status }}</td>
              </tr>
            </tbody>
          </table>
          <a-modal
            width="500px"
            v-model:visible="logModalVisible"
            :closable="false"
            @cancel="closeLogModal"
            :footer="null"
            :mask="false"
            :bodyStyle="{
              marginLeft: 200,
              background: 'rgba(0, 0, 0, 1)',
              opacity: 0.8,
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
              position: 'fixed',
              right: '496px',
              top: '0',
            }">
            <div style="height: calc(100vh - 96px)">
              <div>
                <div class="div-operation"></div>
                <span class="text-operation">操作日志</span>
              </div>
              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" :key="item.id">
                <div class="imgText">
                  <div class="zjzm">
                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
                    <span
                      style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                      >{{ item.name }}</span
                    >
                  </div>
                </div>

                <div class="gird22">
                  <div class="control-btn">
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >{{ item.manual }}</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      "
                      >{{ item.automatic }}</span
                    >
                  </div>
                  <div class="light-btn">
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >{{ item.brightness }}</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                      "
                      >{{ item.brightness2 }}</span
                    >
                  </div>
                  <div class="controlarea-btn">
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >{{ item.manual2 }}</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      "
                      >{{ item.automatic2 }}</span
                    >
                  </div>
                  <div class="temp-btn">
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );
                        border: 1px solid rgba(95, 154, 251, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 12px;
                        margin-right: 8px;
                      "
                      >{{ item.brightness3 }}</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span
                      style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                      "
                      >{{ item.brightness4 }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </a-modal>
          <!-- <div class="divadd">
            <button class="add">刷新</button>
          </div> -->
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-drawer>
  <div class="drawer-title1" v-if="!visible">
    <a-button @click="toggleDrawer" class="arrowbtn">
      <double-left-outlined style="color: rgba(255, 255, 255, 1)" />
    </a-button>
  </div>
  <div class="drawer-title2" v-if="visible">
    <a-button @click="toggleDrawer" class="arrowbtn">
      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
    </a-button>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import {
    DownOutlined,
    UpOutlined,
    DoubleLeftOutlined,
    DoubleRightOutlined,
    StopOutlined,
  } from '@ant-design/icons-vue';

  const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
  const toggleDrawer = () => {
    visible.value = !visible.value;
  };
  const handleOk2 = (e: MouseEvent) => {
    console.log(e);
    console.log('ok2');
    executevisible.value = false;
  };
  const cxlist = ref([
    {
      id: '1',
      name: '站厅照明  1区',
      manual: '手动',
      automatic: '自动',
      brightness: '100lux',
      brightness2: '30lux',
      manual2: '手动',
      automatic2: '自动',
      brightness3: '4000k',
      brightness4: '3800k',
    },
    {
      id: '2',
      name: '站厅照明  2区',
      manual: '手动',
      automatic: '自动',
      brightness: '100lux',
      brightness2: '30lux',
      manual2: '手动',
      automatic2: '自动',
      brightness3: '4000k',
      brightness4: '3800k',
    },
    {
      id: '3',
      name: '站厅照明  3区',
      manual: '手动',
      automatic: '自动',
      brightness: '100lux',
      brightness2: '30lux',
      manual2: '手动',
      automatic2: '自动',
      brightness3: '4000k',
      brightness4: '3800k',
    },
  ]);

  const bulbs = ref([
    {
      className: 'bulbLogo1',
      imageUrl: '/asset/image/bulbLogo/22419.png',
      visible: true,
    },
    {
      className: 'bulbLogo2',
      imageUrl: '/asset/image/bulbLogo/22419.png',
      visible: true,
    },
    {
      className: 'bulbLogo3',
      imageUrl: '/asset/image/bulbLogo/22419.png',
      visible: true,
    },
    {
      className: 'bulbLogo4',
      imageUrl: '/asset/image/bulbLogo/22419.png',
      visible: true,
    },
    {
      className: 'bulbLogo5',
      imageUrl: '/asset/image/bulbLogo/22394.png',
      visible: true,
    },
    {
      className: 'bulbLogo6',
      imageUrl: '/asset/image/bulbLogo/22394.png',
      visible: true,
    },
    {
      className: 'bulbLogo7',
      imageUrl: '/asset/image/bulbLogo/22394.png',
      visible: true,
    },
    {
      className: 'bulbLogo8',
      imageUrl: '/asset/image/bulbLogo/22394.png',
      visible: true,
    },
    {
      className: 'bulbLogo9',
      imageUrl: '/asset/image/bulbLogo/22396.png',
      visible: true,
    },
    {
      className: 'bulbLogo10',
      imageUrl: '/asset/image/bulbLogo/22396.png',
      visible: true,
    },
    {
      className: 'bulbLogo11',
      imageUrl: '/asset/image/bulbLogo/22396.png',
      visible: true,
    },
    {
      className: 'bulbLogo12',
      imageUrl: '/asset/image/bulbLogo/22396.png',
      visible: true,
    },
    {
      className: 'bulbLogo13',
      imageUrl: '/asset/image/bulbLogo/22400.png',
      visible: true,
    },
    {
      className: 'bulbLogo14',
      imageUrl: '/asset/image/bulbLogo/22400.png',
      visible: true,
    },
    {
      className: 'bulbLogo15',
      imageUrl: '/asset/image/bulbLogo/22400.png',
      visible: true,
    },
    {
      className: 'bulbLogo16',
      imageUrl: '/asset/image/bulbLogo/22400.png',
      visible: true,
    },
  ]);

  // 照明区域按钮单选
  const isPlanEnabled = ref(true); // 初始状态是启用
  // 启用面板
  const togglePlan = () => {
    isPlanEnabled.value = !isPlanEnabled.value;
  };
  const showAllButtonsarea = ref(false);
  // 最多展示八个按钮
  const buttons1 = computed(() => buttons.value.slice(0, 8));
  const buttons = ref([
    { label: 'A区', selected: false, id: 1 },
    { label: 'B区', selected: false, id: 2 },
    { label: 'C区', selected: false, id: 3 },
    { label: 'D区', selected: false, id: 4 },
    { label: '计划启用', selected: false, id: 5 },
    { label: 'A区', selected: false, id: 6 },
    { label: 'B区', selected: false, id: 7 },
    { label: 'C区', selected: false, id: 8 },
    { label: 'D区', selected: false, id: 4 },
    { label: '计划启用', selected: false, id: 5 },
    { label: 'A区', selected: false, id: 6 },
    { label: 'B区', selected: false, id: 7 },
    { label: 'C区', selected: false, id: 8 },
  ]);
  const selectedButton = ref(null);
  const selectButton = (button) => {
    selectedButton.value = button;
    const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
    const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
    bulbs.value.forEach((bulb, index) => {
      bulb.visible = index >= startIndex && index < endIndex;
    });
  };

  // 照明回路按钮
  const isAllchoose = ref(true);
  let singleSelection = ref(true); // 默认为单选
  const selectAllCheckbox = ref(false);
  const showControlMode = ref(false);
  const showAllButtons = ref(false);
  // 默认展示八个
  const limitedButtons = computed(() => buttons2.value.slice(0, 8));
  const buttons2 = ref([
    { id: 1, label: '1区', selected: false, zmhld: true },
    { id: 2, label: '2区', selected: false, zmhld: false },
    { id: 3, label: '3区', selected: false, zmhld: false },
    { id: 4, label: '4区', selected: false, zmhld: false },
    { id: 5, label: '5区', selected: false, zmhld: false },
    { id: 6, label: '6区', selected: false, zmhld: false },
    { id: 7, label: '7区', selected: false, zmhld: false },
    { id: 8, label: '1区', selected: false, zmhld: false },
    { id: 9, label: '2区', selected: false, zmhld: false },
    { id: 10, label: '3区', selected: false, zmhld: false },
  ]);
  const zmhlid = ref();
  const isPlanEnabled2 = ref(true);
  const togglePlan2 = () => {
    isPlanEnabled2.value = !isPlanEnabled2.value;
    if (selectAllCheckbox.value) {
      buttons2.value.forEach((button) => {
        button.zmhld = true;
        button.selected = false;
      });
    } else {
      const item = buttons2.value.find((button) => button.id === zmhlid.value);
      if (item) {
        item.zmhld = !item.zmhld;
        item.selected = false;
      }
    }
  };
  const selectAll = () => {
    if (isAllchoose.value === false) {
      isPlanEnabled2.value = limitedButtons.value[0].zmhld;
    }
    singleSelection.value = !singleSelection.value;
    isAllchoose.value = !isAllchoose.value;
    if (singleSelection.value) {
      // 单选
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
    } else {
      // 多选
      buttons2.value.forEach((button) => {
        button.selected = true;
      });
    }
    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
  };
  const allbtn1 = () => {
    buttons2.value.forEach((button) => {
      if (!button.zmhld) {
        button.selected = true;
      }
    });
    selectAllCheckbox.value = true;
  };
  const toggleAllSelection = () => {
    if (selectAllCheckbox.value) {
      // 如果全选开关被打开，实现多选模式
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
      singleSelection.value = false;
    } else {
      // 如果全选开关被关闭，实现单选模式
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
      singleSelection.value = true;
    }
  };

  const toggleSelection = (button) => {
    console.log(button);
    zmhlid.value = button.id;
    console.log(zmhlid.value);
    isPlanEnabled2.value = button.zmhld;
    if (button.zmhld) {
      return;
    } else {
      if (singleSelection.value) {
        // 单选模式
        buttons2.value.forEach((b) => {
          if (b !== button) {
            b.selected = false;
          }
        });
      }
      button.selected = !button.selected;
      // 如果当前处于多选模式，更新全选开关的状态
      if (!singleSelection.value) {
        selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
      } else {
        // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
        selectAllCheckbox.value = false;
      }
      showControlMode.value = button;
    }
  };

  // 控制模式按钮 vv
  const selectedButton3 = ref('');
  const showControlScene = ref(false);
  const controlbutton = ref([
    { label: '托管', selected: false },
    { label: 'AI', selected: false },
    { label: '手动', selected: false },
  ]);
  // 控制场景按钮
  const selectedButton4 = ref('');
  const controlscenebuttons = ref([
    { label: '检修', selected: false },
    { label: '午休', selected: false },
    { label: '疏散', selected: false },
    { label: '客流高峰', selected: false },
  ]);
  const selectButton3 = (button3) => {
    selectedButton3.value = button3.label;
    showControlScene.value = button3.label === '手动';
    selectedButton4.value = ''; // 清空选中的控制场景按钮
  };
  const selectButton4 = (button4) => {
    selectedButton4.value = button4.label;
  };

  const dataSource = ref([
    {
      key: '1',
      data: '2024-05-01',
      planname: '劳动节',
      status: '暂停中',
    },
    {
      key: '2',
      data: '2024-05-01',
      planname: '国庆节',
      status: '待执行',
    },
    {
      key: '3',
      data: '2024-05-01',
      planname: '元旦',
      status: '待执行',
    },
  ]);
  const dataSource1 = ref([
    {
      key: '1',
      data: '2024-05-01',
      planname: '计划再开',
      status: '张三111',
    },
    {
      key: '2',
      data: '2024-05-01',
      planname: '检修模式',
      status: '李四12',
    },
    {
      key: '3',
      data: '2024-05-01',
      planname: '设备变更',
      status: '王五33',
    },
  ]);
  // 抽屉默认显示
  const visible = ref(true);
  const activeKey = ref('1');

  const refresh = () => {
    selectedButton.value = null;
    showControlMode.value = false;
    showControlScene.value = false;
    selectedButton3.value = '';
    selectedButton4.value = '';
  };

  

  let trindex = ref('-1');
  const handleRowClick = (index: any) => {
    trindex.value = index;
    if (index === trindex.value) {
      console.log('tri');
    }
    // 显示模态框
    logModalVisible.value = true;
  };
  const closeLogModal = () => {
    logModalVisible.value = false;
  };
  // 执行确认
  const executevisible = ref<boolean>(false);
  const showModal = () => {
    executevisible.value = true;
  };
  // 添加模态框
  const addvisible = ref<boolean>(false);
  
  // 穿梭框
  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }
  const mockData = ref([
    {
      key: '1',
      title: '计划再开',
    },
    {
      key: '2',
      title: '检修模式',
    },
    {
      key: '3',
      title: '设备变更',
    },
  ]);
  const targetKeys = ref<string[]>([]);
  const filterOption = (inputValue: string, option: MockData) => {
    console.log(option.description);

    return option.description.indexOf(inputValue) > -1;
  };
  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };

  //撤销
  const delbtn = (id: any) => {
    console.log(id);
    cxlist.value.pop(id);
    console.log(cxlist.value.length);

    if (cxlist.value.length === 0) {
      executevisible.value = false;
    }
  };
</script>
<style lang="less" scoped>
  :deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
    background-color: rgba(20, 41, 76, 1);
    color: rgb(29, 83, 172);
  }
  :deep(.ant-transfer-list-header-selected) {
    color: rgba(255, 83, 0);
  }

  :deep(.ant-transfer-list-header > *:not(:last-child)) {
    color: rgba(255, 83, 0);
  }

  .tagtext {
    margin-left: 8px;
  }

  .light-tag {
    position: fixed;
    bottom: 135px;
    left: 450px;
    width: 396px;
    height: 200px;
    opacity: 0.8;
    border-radius: 8px;
    background: rgba(0, 0, 0, 1);
  }

  .light-tag-tit {
    display: flex;
    margin-top: 18px;
    margin-left: 18px;
  }

  .light-tag-box {
    padding: 15px 15px;
  }

  .light-tag-box > img {
    width: 120px;
    height: 51px;
    margin-bottom: 10px;
  }

  .light-tag-box > span {
    color: #fff;
  }

  .titleimg,
  .titletext {
    display: inline-block;
    align-items: center;
    justify-content: center;
  }

  .control-btn,
  .light-btn {
    display: inline-block;
    margin-top: 10px;
  }

  .controlarea-btn,
  .temp-btn {
    display: inline-block;
    margin-top: 16px;
  }

  :deep(.ant-drawer-content) {
    background-color: rgba(0, 0, 0, 1);
    opacity: 0.8;
  }

  :deep(.ant-modal-content) {
    background-color: rgba(0, 0, 0, 1);
    opacity: 0.8;
  }

  :deep(.ant-transfer-list) {
    width: 230px;
    height: 450px;
  }

  :deep(.ant-transfer-list-header) {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
  }

  .bulbLogo1 {
    margin-top: 40%;
    margin-left: 12%;
  }

  .bulbLogo2 {
    margin-top: 35%;
    margin-left: 20%;
  }

  .bulbLogo3 {
    margin-top: 23%;
    margin-left: 10%;
  }

  .bulbLogo4 {
    margin-top: 10%;
    margin-left: 15%;
  }

  .bulbLogo5 {
    margin-top: 8%;
    margin-left: 13%;
  }

  .bulbLogo6 {
    margin-top: 8%;
    margin-left: 15%;
  }

  .bulbLogo7 {
    margin-top: 0%;
    margin-left: 12%;
  }

  .bulbLogo9 {
    margin-top: 35%;
    margin-left: 20%;
  }

  .bulbLogo10 {
    margin-top: 35%;
    margin-left: 20%;
  }

  .bulbLogo11 {
    margin-top: 35%;
    margin-left: 20%;
  }

  .bulbLogo12 {
    margin-top: 35%;
    margin-left: 20%;
  }

  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 60px;
    color: rgba(255, 255, 255, 1);
  }

  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }

  .table1 {
    margin-top: 20px;
    width: 100%;
    cellspacing: 0;
    cellpadding: 0;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
  }

  .lightarea,
  .circuitarea,
  .controlarea,
  .controlscenearea,
  .lightparametersarea {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .lightareatab,
  .circuittab,
  .controltab,
  .controlscenetab,
  .lightparameterstab {
    width: 5px;
    height: 23px;
    opacity: 1;
    background: rgba(26, 174, 251, 1);
    margin-right: 4px;
  }

  .lightareatext,
  .circuittext,
  .controltext,
  .controlscenetext,
  .lightparameterstext {
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    line-height: 19px;
    width: 110px;
    height: 23px;
    opacity: 1;
    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
  }

  .lightareatab,
  .lightareatext {
    display: inline-block;
    justify-content: center;
  }

  .plan.enabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .plan.disabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .plan:disabled {
    cursor: not-allowed;
  }

  .openplan.enabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .openplan.disabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .openplan:disabled {
    cursor: not-allowed;
  }

  .btn2 {
    display: flex;
    align-items: center;
    margin-left: 80px;
  }

  .openzm {
    color: rgba(34, 183, 255, 1);
    margin-left: 20px;
    font-size: 14px;
  }

  .custom-checkbox {
    width: 13px;
    height: 13px;
  }

  .both {
    width: 59.79px;
    height: 32px;
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(255, 187, 0, 1) 0%,
      rgba(255, 112, 3, 1) 91.21%,
      rgba(255, 129, 3, 1) 100%
    );
    margin-left: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 5px;
  }

  .btn2 {
    button {
      margin: 0 5px;
    }
  }

  .allbtn {
    border: 0;
    width: 40px;
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
  }

  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }

  p {
    color: rgba(255, 255, 255, 1);
  }

  .area,
  .btnarea,
  .controlmodebtnarea,
  .controlscenebtnarea {
    margin-left: -17px;

    button {
      width: 21%;
      padding: 0 2%;
    }
  }

  .btn {
    width: 92px;
    height: 40px;
    border-radius: 4px;
    opacity: 1;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
    border: 1px solid rgba(207, 212, 219, 1);
    line-height: 20.27px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .selected {
    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
    color: rgba(0, 61, 90, 1);
    border: 1px solid rgba(255, 255, 255, 1);
  }

  .btn:hover {
    background-color: rgba(207, 212, 219, 1);
  }

  .btn:active {
    background-color: rgba(102, 102, 102, 1);
    color: white;
  }

  .circuitarea,
  .controlscenearea,
  .lightparametersarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .circuittab,
  .circuittext {
    display: inline-block;
  }

  .batch {
    width: 60px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(67, 136, 251, 1);
    color: rgba(67, 136, 251, 1);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-left: 11px;
  }

  .controlarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .controltab,
  .controltext {
    display: inline-block;
  }

  :deep(.cell) {
    text-align: center;
  }

  :deep(#pane-first) {
    height: 100%;
  }

  .controlscenetab,
  .controlscenetext {
    display: inline-block;
  }

  .lightparameterstab,
  .lightparameterstext {
    display: inline-block;
  }

  .lightparameterstextarea > p {
    height: 100%;
    display: flex;
    border: 1px solid rgba(236, 239, 245, 1);
    justify-content: center;
    align-items: center;
  }

  .bottom {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
  }

  .execute {
    margin-right: 20px;
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    border: 0;
    margin-left: 10px;
  }

  .flushed {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(193, 197, 204, 1);
  }

  .tabreboot,
  .tabdelete {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    color: rgba(67, 136, 251, 1);
  }

  .tabreboot {
    margin-right: 8px;
  }

  .add {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .divadd {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
    margin-right: 20px;
  }

  .atable {
    margin-top: 20px;
  }

  :deep(.ant-table-pagination) {
    visibility: hidden;
  }

  .drawer-content {
    margin-left: 20px;
  }

  .arrow-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .drawer-title1 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    z-index: 99999;
  }

  .drawer-title2 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 495px;
    margin: auto;
    z-index: 99999;
  }

  .arrowbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
    border: none;
  }

  :deep(.ant-tabs-tab-btn) {
    color: white;
  }

  :deep(.ant-table) {
    background-color: transparent;
  }

  :deep(.ant-table-bordered) {
    background-color: transparent;
  }

  :deep(.ant-table-thead) {
    background-color: transparent;
  }

  :deep(.ant-table-cell) {
    background-color: transparent;
    color: #fff;
  }
  .lighting-img-box {
    width: 100%;
    max-height: calc(100% - 79px);
  }
  .lighting-img-box > img {
    width: 100%;
    height: calc(100vh - 96px);
    object-fit: cover;
  }
  .F1 {
    width: 120px;
    height: 50.72px;
    border-radius: 4px;
    background: rgba(39, 120, 255, 1);
    border: 1px solid rgba(51, 199, 255, 1);
    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
    font-size: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
  .F2,
  .platform {
    width: 120px;
    height: 50.72px;
    border-radius: 4px;
    background: rgba(7, 72, 116, 1);
    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
    font-size: 24px;
    font-weight: 400;
    color: rgba(146, 187, 255, 1);
    border: 1px solid rgba(39, 120, 255, 1);
    margin-top: 20px;
  }

  .btn-box {
    position: fixed;
    top: 100px;
    left: 250px;
  }

  .lighting-img-box > .bulbBox > .wh100 {
    width: 38px;
    height: calc(38px + 19px);
  }

  .lighting-img-box > .bulbBox > .bulbLogo1 {
    position: absolute;
    top: 10%;
    left: 10%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo2 {
    position: absolute;
    top: 9%;
    left: 15%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo3 {
    position: absolute;
    top: 34%;
    left: 25%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo4 {
    position: absolute;
    top: 45%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo5 {
    position: absolute;
    top: 45%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo6 {
    position: absolute;
    top: 55%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo7 {
    position: absolute;
    top: 60%;
    left: 40%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo8 {
    position: absolute;
    top: 55%;
    left: 70%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo9 {
    position: absolute;
    top: 10%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo10 {
    position: absolute;
    top: 10%;
    left: 40%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo11 {
    position: absolute;
    top: 15%;
    left: 50%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo12 {
    position: absolute;
    top: 15%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo13 {
    position: absolute;
    top: 55%;
    left: 70%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo14 {
    position: absolute;
    top: 45%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo15 {
    position: absolute;
    top: 45%;
    left: 80%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo16 {
    position: absolute;
    top: 45%;
    left: 90%;
    display: flex;
    align-items: center;
  }

  .editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      margin-top: 4px;
      display: none;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .div-operation {
    width: 3px;
    height: 13px;
    opacity: 1;
    border-radius: 1px;
    background: rgba(67, 136, 251, 1);
  }

  .text-operation {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 700;
    margin-left: 5px;
  }

  .div-operation,
  .text-operation {
    display: inline-block;
  }

  .jbox {
    background-color: #000;
    opacity: 1;
    z-index: 99999;
  }

  .journal {
    padding: 3% 5%;
    background-size: 450px 177px;
    width: 482px;
    height: 177px;
    background-color: rgba(0, 0, 0);
    border-radius: 12px;
    border: 2px solid transparent;
    border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
  }

  .imgText {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ztzm {
      display: flex;
      align-items: center;
    }

    .cxbtn {
      color: rgba(255, 255, 255, 1);
      border: none;
      border-radius: 6px;
      width: 59.79px;
      height: 32px;
      opacity: 1;
      background: linear-gradient(
        180deg,
        rgba(255, 187, 0, 1) 0%,
        rgba(255, 112, 3, 1) 91.21%,
        rgba(255, 129, 3, 1) 100%
      );
    }
  }

  :deep(.ant-modal-content) {
    width: 555px;
    height: 792px;
  }

  :deep(.ant-modal-body) {
    width: 555px;
    max-height: 792px !important;
    box-sizing: border-box;
  }

  .text-change {
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
  }

  .excuno {
    width: 150px;
    height: 40px;
    margin-top: 30px;
  }

  .excuok {
    width: 150px;
    height: 40px;
    margin-top: 30px;
  }

  .excubtn {
    display: flex;
    justify-content: space-between;
  }

  .addok {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-top: 440px;
    margin-left: 350px;
  }

  .zmhlbtn {
    position: relative;
  }

  .anticon-stop {
    position: absolute;
    right: 3px;
    bottom: 3px;
  }

  .istrindex {
    background: rgba(67, 136, 251, 1);
  }

  :deep(.ant-modal-mask.ant-modal-content) {
    height: 100vh;
    position: fixed;
    right: 496px;
    top: 0%;
  }
  :deep(.ant-modal-content) {
    position: fixed;
    bottom: 20px;
    right: 500px;
  }
</style>
