<template>
  <div>
    <div class="home">
      <div id="dlxt">
        <div class="dlxt-change">
          <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{
            statusNames[0].name
          }}</span>
          <span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{
            statusNames[1].name
          }}</span>
        </div>
        <div class="dlxt-bg dlxt-bg1" v-show="showBtn === 1">
          <!--电柜布局-->
          <div
            v-for="(item, index) in dgList"
            :key="'item1-' + index"
            class="dlxt-tit"
            :class="`dlxt-tit${index + 1}`"
          >
            <div :class="index <= 2 ? 'dlxt-dg' : 'dlxt-dg2'"></div>
            <p>
              <span>{{ item.dgname }}</span>
            </p>
            <div class="dlxt-list" :class="`dlxt-list${index + 1}`">
              <p
                v-for="param in item.dataList"
                :key="param.name + 'param.value'"
              >
                <span>{{ param.name }}</span
                >:<span>{{ param.value }}</span
                ><span>{{ param.unit }}</span>
              </p>
            </div>
          </div>
          <!--电表布局-->
          <div
            v-for="(item, index) in dbList"
            :key="'item-' + index"
            class="dlxt-tit-db"
            :class="`dlxt-tit-db${index + 1}`"
          >
            <p>
              <span>{{ item.dgname }}</span>
            </p>
            <div class="dlxt-db"></div>
            <div class="dlxt-list" :class="`dlxt-list${index + 1}`">
              <p v-for="param in item.dataList" :key="param.name">
                <span>{{ param.name }}</span
                >:<span>{{ param.value }}</span
                ><span>{{ param.unit }}</span>
              </p>
            </div>
          </div>
          <!--温度-->
          <div class="dlxt-wd">
            <p>温度:{{ Temper }}℃</p>
            <p>湿度:{{ Humidity }}%RH</p>
          </div>
        </div>
        <div class="dlxt-bg dlxt-bg2" v-show="showBtn === 2">
          <!--电柜布局-->
          <div
            class="for-box"
            :class="`pos${index + 1}`"
            v-for="(item, index) in dgList"
            :key="index + 'for-box'"
          >
            <div class="for-box-content"></div>
            <div class="for-box-tit">
              <p>
                <span>{{ item.dgname }}</span>
              </p>
            </div>
            <div class="for-box-list">
              <p v-for="param in item.dataList" :key="param.name">
                <span>{{ param.name }}</span
                >:<span>{{ param.value }}</span
                ><span>{{ param.unit }}</span>
              </p>
            </div>
          </div>
          <!--电表布局-->
          <div
            class="for-box-db"
            :class="`db-pos${index + 1}`"
            v-for="(item, index) in dbList"
            :key="index"
          >
            <div class="for-box-db-status">
              <span>
                {{ item.dgname }}
              </span>
            </div>
            <div class="for-box-db-content"></div>
            <div class="for-box-db-list">
              <p v-for="param in item.dataList" :key="param.name">
                <span>{{ param.name }}</span
                >:<span>{{ param.value }}</span
                ><span>{{ param.unit }}</span>
              </p>
            </div>
          </div>
          <!--温度-->
          <div class="dlxt-wd">
            <p>温度:{{ Temper }}℃</p>
            <p>湿度:{{ Humidity }}%RH</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  updateSelectEleHistoryData,
  getTemperAndHumidityData,
} from "@/api/tyler/dlxt";
export default {
  name: "dlxt",
  dicts: ["power_val"],
  data() {
    return {
      showBtn: 1,
      eleName: [],
      colors: [
        {
          status: "遥控指示",
          color: "#20F09F",
          icon: "icon5",
        },
        {
          status: "就地指示",
          color: "#00FCFF",
          icon: "icon6",
        },
        {
          status: "故障复位",
          color: "#FFC411",
          icon: "icon10",
        },
      ],
      eleAllData: [],
      substations: [],
      formattedParameters: [],
      statusNames: [
        {
          name: "35变电所",
          dglist: [
            {
              dgname: "35KV进线柜",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                  units: "",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "就地指示",
              dgname: "35KVPT",
              type: "dg",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "故障复位",
              dgname: "35KV主变",
              type: "dg",
              dataList: [
                {
                  name: "UA",
                  value: "0.00KV",
                },
                {
                  name: "UB",
                  value: "0.00KV",
                },
                {
                  name: "UC",
                  value: "0.00KV",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "遥控指示",
              dgname: "16AH电容",
              type: "dg",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "就地指示",
              dgname: "15AH金沙",
              type: "dg",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "故障复位",
              dgname: "14AH金沙",
              type: "dg",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
            {
              status: "故障复位",
              dgname: "13AH金采",
              type: "dg",
              dataList: [
                {
                  name: "COS",
                  value: "0.00",
                },
                {
                  name: "Ep",
                  value: "86003048kWh",
                },
                {
                  name: "Eq",
                  value: "86003048kVarh",
                },
                {
                  name: "la",
                  value: "86003048A",
                },
                {
                  name: "lc",
                  value: "86003048A",
                },
                {
                  name: "P",
                  value: "86003048KW",
                },
                {
                  name: "Q",
                  value: "86003048kVarh",
                },
              ],
            },
          ],
          dblist: [
            {
              status: "",
              dgname: "5AHPT计量",
              type: "db",
              dataList: [
                {
                  name: "UA",
                  value: "0.00KV",
                },
                {
                  name: "UB",
                  value: "0.00KV",
                },
                {
                  name: "UC",
                  value: "0.00KV",
                },
              ],
            },
            {
              status: "",
              dgname: "1AH站用",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
              ],
            },
            {
              status: "",
              dgname: "2AH金西",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "3AH金磨1",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "4AH金磨2",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "6AH进线",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "7AH新金采",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "8AH金选",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "9AH金修",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "10AH金碎",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "11AH备1",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
            {
              status: "",
              dgname: "12AH朱金",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "0.00A",
                },
                {
                  name: "lc",
                  value: "0.00A",
                },
                {
                  name: "P",
                  value: "0.0KW",
                },
                {
                  name: "Q",
                  value: "0.0KVAR",
                },
                {
                  name: "COS",
                  value: "0.000",
                },
              ],
            },
          ],
        },
        {
          name: "小高尖开关室",
          dglist: [
            {
              status: "遥控指示",
              dgname: "1AH主电源",
              type: "dg",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "25341000KVarh",
                },
              ],
            },
            {
              status: "就地指示",
              dgname: "10AH双电源",
              type: "dg",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "25341000KVarh",
                },
              ],
            },
            {
              status: "故障复位",
              dgname: "15AH金银联",
              type: "dg",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "25341000KVarh",
                },
              ],
            },
          ],
          dblist: [
            {
              status: "",
              dgname: "2AHPT计量",
              type: "db",
              dataList: [],
            },
            {
              status: "",
              dgname: "3AH二中西",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "4AH五中出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "5AH地变出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "6AH备用出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "7AH电容出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "8AH备用出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "9AH备用1",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "11AH备用2",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "12AH二中东",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "13AH卷扬出",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
            {
              status: "",
              dgname: "14AH原风变",
              type: "db",
              dataList: [
                {
                  name: "la",
                  value: "64.22A",
                },
                {
                  name: "lc",
                  value: "63.53A",
                },
                {
                  name: "P",
                  value: "1107.20KW",
                },
                {
                  name: "Q",
                  value: "288.00KVAR",
                },
                {
                  name: "COS",
                  value: "0.972",
                },
                {
                  name: "Ep",
                  value: "53879640KWh",
                },
                {
                  name: "Eq",
                  value: "53879640KVarh",
                },
              ],
            },
          ],
        },
      ], // 用于存储 eleboxStatusName

      dgList: [],
      dbList: [],
      timer: null, // 新增定时器引用
      Temper: 0,
      Humidity: 0,
    };
  },
  created() {
    this.init();
  },
  mounted() {
    // // 初始化定时器
    // this.timer = setInterval(() => {
    //   this.init();
    // }, 10000);
  },
  activated() {
    // 组件激活时
    this.timer = setInterval(() => {
      this.init();
    }, 10000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.clearTimer();
  },
  deactivated() {
    // 组件离开时
    this.clearTimer();
  },
  methods: {
    init() {
      this.getdata(this.showBtn - 1);
    },
    getdata(index = 0) {
      updateSelectEleHistoryData({ name: this.statusNames[index].name })
        .then((res) => {
          if (res.code == 200) {
            // 创建字段映射表
            const fieldMapping = {
              功率因数: "COS",
              正向有功电能: "Ep",
              正向无功电能: "Eq",
              A相电压: "UA",
              B相电压: "UB",
              C相电压: "UC",
              A相电流: "la",
              C相电流: "lc",
              有功功率: "P",
              无功功率: "Q",
            };

            // 处理原始数据
            const rawData = res.data.reduce((acc, cur) => {
              const targetName = fieldMapping[cur.eleboxParameter];
              if (targetName) {
                const deviceName = cur.eleboxName;
                acc[deviceName] = acc[deviceName] || {};
                acc[deviceName][targetName] = `${cur.parameterData}${
                  cur.dataUnits || ""
                }`;
              }
              return acc;
            }, {});
            console.log(rawData);

            // 合并到statusNames结构
            this.statusNames[index].dglist = (
              this.statusNames[index].dglist || []
            ).map((device) => {
              return {
                ...device,
                dataList: (device.dataList || []).map((item) => ({
                  ...item,
                  value: rawData[device.dgname]?.[item.name] || item.value,
                })),
              };
            });
            this.statusNames[index].dblist = (
              this.statusNames[index].dblist || []
            ).map((device) => {
              return {
                ...device,
                dataList: (device.dataList || []).map((item) => ({
                  ...item,
                  value: rawData[device.dgname]?.[item.name] || item.value,
                })),
              };
            });
            console.log(this.statusNames);

            this.dgList = [...this.statusNames[index].dglist];
            this.dbList = [...(this.statusNames[index].dblist || [])];
          }
        })
        .catch((error) => {
          this.dgList = [...this.statusNames[index].dglist];
          this.dbList = [...(this.statusNames[index].dblist || [])];
        });
      getTemperAndHumidityData({
        name: this.statusNames[index].name,
      }).then((res) => {
        if (res.code == 200) {
          this.Temper = res.data.温度 || "-";
          this.Humidity = res.data.湿度 || "-";
        }
      });
    },
    changeBtn(index) {
      this.showBtn = index;
      this.getdata(index - 1);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
p {
  margin: 0;
  padding: 0;
}
.home {
  width: 100%;
  height: 100%;
  pointer-events: auto; // 允许整个容器接收事件
  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
  background-size: 100%;
  padding-top: 160px;
  overflow: hidden;
  pointer-events: auto;
  font-family: "fangsong";
  #dlxt {
    pointer-events: auto;
    .dlxt-change {
      pointer-events: auto; // 允许整个容器接收事件
      z-index: 999;
      width: 100%;
      height: 36px;
      display: flex;
      justify-content: center;
      color: #fff;
      align-items: center;
      margin-bottom: 32px;
      span {
        pointer-events: auto;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 124px;
        height: 36px;
        font-size: 20px;
        font-weight: bold;
        background-color: rgba(10, 30, 54, 0.5);
        border: 1px solid #00fcff;
        cursor: pointer;
        &.active {
          background: linear-gradient(0deg, #1679b6 0%, #00dee9 100%);
          border: 1px solid #00fcff;
        }
      }
    }
    .dlxt-bg {
      width: 1830px;
      height: 792px;
      margin: 0 auto;

      color: #fff;
      position: relative;
      .dlxt-tit {
        position: absolute;
        top: 20px;
        width: 181px;
        padding-top: 38px;
        .dlxt-val {
          text-align: center;
          i {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 5px;
            margin-bottom: -1px;
          }
        }
        .dlxt-dg {
          width: 181px;
          height: 202px;
          background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
          background-size: 100%;
          margin-bottom: 10px;
        }
        .dlxt-dg2 {
          width: 181px;
          height: 202px;
          background: url("~@/assets/images/screen/dlxt/4.png") no-repeat center;
          background-size: 100%;
          margin-bottom: 10px;
        }

        p {
          font-weight: bold;
          font-size: 20px;
          color: #ffffff;
          line-height: 38px;
          text-align: center;
          background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
            center;
          background-size: 100%;
          span {
            background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .dlxt-list {
          border: 2px solid #00ccff;
          box-sizing: border-box;
          padding: 10px;
          margin-top: 5px;
          p {
            background: none;
            margin: 0px;
            padding: 0px;
            font-weight: 400;
            font-size: 18px;
            color: #11e0ff;
            line-height: 25px;
            text-align: left;
          }
        }
      }
      .dlxt-tit-db {
        position: absolute;
        top: 560px;
        width: 122px;

        .dlxt-db {
          width: 96px;
          height: 123px;
          background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
          background-size: 100%;
        }

        p {
          font-weight: bold;
          font-size: 18px;
          color: #ffc411;
          text-align: center;
          background-size: 100%;
          margin-bottom: -10px;
          margin-top: 5px;
        }
        .dlxt-list {
          padding: 10px;
          p {
            background: none;
            margin: 0px;
            padding: 0px;
            font-weight: 400;
            font-size: 18px;
            color: #11e0ff;
            text-align: left;
          }
        }
      }
      .dlxt-tit-db1 {
        position: absolute;
        top: 250px;
        width: 122px;
        height: 38px;
        left: 730px;
        .dlxt-val {
          text-align: center;
        }
        .dlxt-db {
          width: 113px;
          height: 133px;
          background: url("~@/assets/images/screen/dlxt/2.png") no-repeat center;
          background-size: 100%;
          margin-bottom: 10px;
          margin: auto;
        }
        .dlxt-list {
          border: 2px solid #00ccff;
          box-sizing: border-box;
          padding: 10px;
          margin-top: 5px;
          p {
            background: none;
            margin: 0px;
            padding: 0px;
            font-weight: 400;
            font-size: 18px;
            color: #11e0ff;
            line-height: 25px;
            text-align: left;
          }
        }
        .dlxt-list1 {
          position: absolute;
          top: 141px;
          left: -57px;
        }
      }
      .dlxt-tit-db2 {
        left: 0px;
      }
      .dlxt-tit-db3 {
        left: 175px;
      }
      .dlxt-tit-db4 {
        left: 350px;
      }
      .dlxt-tit-db5 {
        left: 524px;
      }
      .dlxt-tit-db6 {
        left: 695px;
      }
      .dlxt-tit-db7 {
        left: 865px;
      }
      .dlxt-tit-db8 {
        left: 1035px;
      }
      .dlxt-tit-db9 {
        left: 1205px;
      }
      .dlxt-tit-db10 {
        left: 1375px;
      }
      .dlxt-tit-db11 {
        left: 1545px;
      }
      .dlxt-tit-db12 {
        left: 1715px;
      }
      .dlxt-tit-db13 {
        left: 1915px;
      }
      .dlxt-wd {
        width: 285px;
        height: 130px;
        background: url("~@/assets/images/screen/dlxt/wd-bg2.png") no-repeat
          center;
        background-size: 100%;
        position: absolute;
        top: 30px;
        left: 620px;
        /* 新增以下居中样式 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          font-weight: 400;
          font-size: 24px;
          color: #f0ff01;
          /* 原text-align可以移除，因为flex容器已控制对齐 */
          width: 100%; /* 确保文本容器宽度充满父元素 */
          text-align: center; /* 双重保障 */
        }
      }
    }
    .dlxt-bg1 {
      background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
      background-size: 100%;
      background-position-y: 0;
      .dlxt-tit1 {
        left: 6px;
      }
      .dlxt-tit2 {
        left: 240px;
      }
      .dlxt-tit3 {
        left: 460px;
      }
      .dlxt-tit4 {
        left: 925px;
      }
      .dlxt-tit5 {
        left: 1155px;
      }
      .dlxt-tit6 {
        left: 1400px;
      }
      .dlxt-tit7 {
        left: 1630px;
      }
    }
    .dlxt-bg2 {
      background: url("~@/assets/images/screen/dlxt/bg1.png") no-repeat center;
      background-size: 100%;
      background-position-y: 260px;
    }
    .for-box {
      width: 170px;
      position: absolute;
      top: -10px;
      padding-top: 25px;
      .for-box-content {
        width: 181px;
        height: 202px;
        background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
        background-size: 100%;
        margin-bottom: 10px;
      }
      .for-box-tit {
        p {
          font-weight: bold;
          font-size: 20px;
          color: #ffffff;
          line-height: 38px;
          text-align: center;
          background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
            center;
          background-size: 100%;
          span {
            background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
      .for-box-list {
        border: 2px solid #00ccff;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 5px;
        position: absolute;
        top: 25px;
        left: 200px;
        p {
          background: none;
          margin: 0px;
          padding: 0px;
          font-weight: 400;
          font-size: 18px;
          color: #11e0ff;
          line-height: 25px;
          text-align: left;
        }
      }
      &.pos1 {
        left: 165px;
      }
      &.pos2 {
        left: 915px;
      }
      &.pos3 {
        left: 1385px;
      }
    }

    .for-box-db {
      width: 96;
      position: absolute;
      padding-top: 10px;
      .for-box-db-status {
        width: 96;
        text-align: center;
        font-weight: 400;
        font-size: 18px;
        color: #ffc411;
      }
      .for-box-db-content {
        width: 96px;
        height: 123px;
        background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
        background-size: 100%;
        margin: auto;
        margin-bottom: 10px;
      }

      .for-box-db-list {
        margin-top: 5px;
        position: absolute;
        p {
          background: none;
          margin: 0px;
          padding: 0px;
          font-weight: 400;
          font-size: 18px;
          color: #11e0ff;
          line-height: 25px;
          text-align: left;
        }
      }
      &.db-pos1 {
        top: 320px;
        left: 10px;
      }
      &.db-pos2 {
        top: 470px;
        left: 185px;
      }
      &.db-pos3 {
        top: 320px;
        left: 320px;
      }
      &.db-pos4 {
        top: 470px;
        left: 500px;
      }
      &.db-pos5 {
        top: 320px;
        left: 630px;
      }
      &.db-pos6 {
        top: 470px;
        left: 810px;
      }
      &.db-pos7 {
        top: 320px;
        left: 945px;
      }
      &.db-pos8 {
        top: 470px;
        left: 1120px;
      }
      &.db-pos9 {
        top: 320px;
        left: 1260px;
      }
      &.db-pos10 {
        top: 470px;
        left: 1430px;
      }
      &.db-pos11 {
        top: 320px;
        left: 1565px;
      }
      &.db-pos12 {
        top: 470px;
        left: 1740px;
      }
    }
  }
  .icon5 {
    background: url("~@/assets/images/screen/dlxt/5.png") no-repeat center;
    background-size: 100%;
  }
  .icon6 {
    background: url("~@/assets/images/screen/dlxt/6.png") no-repeat center;
    background-size: 100%;
  }
  .icon10 {
    background: url("~@/assets/images/screen/dlxt/10.png") no-repeat center;
    background-size: 100%;
  }
}
</style>
