<template>
  <main class="coal_main p0_75 gap_12" style="flex-grow: 1">
    <div class="text_center">
      <h2 class="pageTitle">1#隧道窑投煤器</h2>
    </div>
    <div class="flexs items_center justify_center gap1_5 py0_375 px1 bgWhite borderAll shadows">
      <div class="flexs items_center gap0_5">
        <span>站点总数</span>
        <span class="text_sm fontw700 color_black"
          >18
          <span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>运行中</span>
        <span class="text_sm fontw700 color_green">
          16<span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>自动模式</span>
        <span class="text_sm fontw700 color_primary">
          16<span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>最高温度</span>
        <span class="text_sm fontw700 color_red">
          1000<span class="fontw400 color_base ml0_25">°C</span>
        </span>
      </div>
    </div>
    <div class="flex_1 flexs gap0_5">
      <!-- 点位列表 -->
      <ul class="flexs flex_col gap0_5 w10 borderAll bgWhite p0_5">
        <li class="text_10">点位列表
          <tiny-button type="info" :icon="iconRefresh" plain size="small" @click="getPointList">刷新</tiny-button>
        </li>
        <li
          v-for="point in pointList"
          :key="point.id"
          class="point-item"
          draggable="true"
          @dragstart="onPointDragStart($event, point)"
        >
          <span class="text_10">{{ point.name }}</span>
          <span class="text_10" v-if="point.point_monitor">-[{{ point.point_monitor.value_text }}]</span>
        </li>
      </ul>
      <!-- 数据表格 -->
      <div class="flex_1 shrink0 overflowx_auto borderAll bg_card">
        <div class="flex_1 overflowx_auto borderAll">
          <table class="w_full text_xs">
            <thead class="bg_header">
              <tr>
                <th
                  class="sticky left0 z_10 p0_5 fontw600 text_left "
                  style="background-color: #edeff3"
                >
                  参数/站号
                </th>
                <th
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_5 text_center border_r border_border0_6 min_w_6"
                >
                  <span
                    class="inline_flex items_center justify_center h1_25 min_w_6 px0_375 rounded bg_primary text_primary_color fontw700 text_11"
                    >{{ item.team }}</span
                  >
                </th>
              </tr>
            </thead>
            <tbody>
              <!-- 投煤运行设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤运行设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmyxsds }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmyxsds"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 投煤停止设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤停止设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmtzsds }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmtzsds"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 投煤累积设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤累积设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmljsds }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmljsds"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 布料运行设定 -->
              <tr class="border_border">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  布料运行设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.blyxsds }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.blyxsds"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 中间侧 -->
              <tr class="border_border bg_blue">
                <td class="sticky left0 z_10 bg_blue px0_5 text_10 fontw700 text_primary border_r border_border letter_space0_05">
                  中间侧
                </td>
                <td
                  v-for="(item,index1) in dataList"
                  :key="item.team"
                  class="py0_125 border_r border_border0_6 min_w_6"
                >
                  <div
                    v-for="(dj,index2) in item.dianji"
                    class="flexs flex_col items_center gap0_25 text_center dianji_status"
                  >
                    <div class="flexs items_center gap0_25 justify_center" :id="'unit'+index1+'_dj'+index2">
                      <div :class="['relative inline_flex items_center justify_center rounded_full border_2 Mcircle',{'border_red_M bg_red_M': dj.isStop,'border_green_M bg_green_M': !dj.isStop}]">
                        <span :class="['fontw700 leading_none text_10',{'text_red_M': dj.isStop,'text_green': !dj.isStop}]">M</span>
                      </div>
                      <div class="flexs flex_col justify_center items_center gap0_25 my0_3">
                          <span v-if="dj.isBendi" class="border w1_2 text_8 rounded h0_9 bg_yellow border_yellow text_white">本地</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yc border_green_M text_white">远程</span>
                          <span v-if="dj.isStop" class="border w1_2 text_8 rounded h0_9 bg_red border_red text_white c_pointer">停止</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yx border_green_yx text_white c_pointer">运行</span>
                      </div>
                    </div>
                    <div class="items_center">
                      <span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{dj.eqm}}</span>
                      <span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 投煤累积时间 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤累积时间
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div class="px0_25 py0_125 text_center text_xs text_foreground fontw600">
                    {{ item.tmljsjs }}
                  </div>
                </td>
              </tr>
              <!-- 2侧温度 -->
              <tr class="border_border0_5 bg_orange">
                <td class="sticky left0 z_10 px0_5 py0_5 text_11 text_orange_600 whitespace_nowrap border_r border_border fontw600">
                  2侧温度
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 border_r border_border0_6 min_w_6 text_center"
                >
                  <span class="text_xs fontw700 min_w_2_25 text_right text_red">{{item.tempera2}}</span>
                </td>
              </tr>
              <!-- 车位号 -->
              <tr class="border_border bg_temperature">
                <td class="sticky left0 z_10 bg_temperature px0_5 text_11 fontw700 text_foreground border_r border_border">
                  车位号
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="p0_25 text_center border_r border_border0_6 min_w_6"
                >
                  <span class="inline_flex items_center justify_center h1_25 min_w_1_75 px0_375 rounded_md bg_primary text_primary_color my0_3 fontw700 text_sm shadow_sm">{{ item.carNumber }}</span>
                </td>
              </tr>
              <!-- 1侧温度 -->
              <tr class="border_border0_5 bg_orange">
                <td class="sticky left0 z_10 px0_5 py0_5 text_11 text_orange_600 whitespace_nowrap border_r border_border fontw600">
                  1侧温度
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 border_r border_border0_6 min_w_6 text_center"
                >
                  <span class="text_xs fontw700 min_w_2_25 text_right text_red">{{item.tempera1}}</span>
                </td>
              </tr>
              <!-- 投煤累积时间 -->
              <tr class="border_border0_5">
                <td
                  class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500"
                >
                  投煤累积时间
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div class="px0_25 py0_125 text_center text_xs text_foreground fontw600">
                    {{ item.tmljsjx }}
                  </div>
                </td>
              </tr>
              <!-- 回车侧 -->
              <tr class="border_border bg_blue">
                <td class="sticky left0 z_10 bg_blue px0_5 text_10 fontw700 text_primary border_r border_border letter_space0_05">
                  回车侧
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="py0_125 border_r border_border0_6 min_w_6"
                >
                  <div
                    v-for="dj in item.dianji"
                    class="flexs flex_col items_center gap0_25 text_center dianji_status"
                  >
                    <div class="flexs items_center gap0_25 justify_center">
                      <div :class="['relative inline_flex items_center justify_center rounded_full border_2 Mcircle',{'border_red_M bg_red_M': dj.isStop,'border_green_M bg_green_M': !dj.isStop}]">
                        <span :class="['fontw700 leading_none text_10',{'text_red_M': dj.isStop,'text_green': !dj.isStop}]">M</span>
                      </div>
                      <div class="flexs flex_col justify_center items_center gap0_25 my0_3">
                          <span v-if="dj.isBendi" class="border w1_2 text_8 rounded h0_9 bg_yellow border_yellow text_white">本地</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yc border_green_M text_white">远程</span>
                          <span v-if="dj.isStop" class="border w1_2 text_8 rounded h0_9 bg_red border_red text_white c_pointer">停止</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yx border_green_yx text_white c_pointer">运行</span>
                      </div>
                    </div>
                    <div class="items_center">
                      <span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{dj.eqm}}</span>
                      <span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 投煤运行设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤运行设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmyxsdx }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmyxsdx"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 投煤停止设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤停止设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmtzsdx }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmtzsdx"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 投煤累积设定 -->
              <tr class="border_border0_5">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  投煤累积设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.tmljsdx }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.tmljsdx"
                    style="width: 6rem"
                  />
                </td>
              </tr>
              <!-- 布料运行设定 -->
              <tr class="border_border">
                <td class="sticky left0 z_10 bg_card px0_5 py0_375 text_11 color_base whitespace_nowrap border_r border_border fontw500">
                  布料运行设定
                </td>
                <td
                  v-for="item in dataList"
                  :key="item.team"
                  class="px0_25 py0_375 text_center border_r border_border0_6 min_w_6"
                >
                  <div v-if="item.statusAuto" class="px0_25 py0_125 text_center text_xs color_base">
                    {{ item.blyxsdx }}
                  </div>
                  <input
                    v-else
                    class="px0_25 py0_125 text_center text_xs color_base"
                    v-model="item.blyxsdx"
                    style="width: 6rem"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="settings">
          <div class="flexs justify_center gap1_5">
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第一单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit1 }"
                  @click="statusChange('1')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit1 }"
                  @click="statusAuto('1')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第二单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit2 }"
                  @click="statusChange('2')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit2 }"
                  @click="statusAuto('2')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第三单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit3 }"
                  @click="statusChange('3')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit3 }"
                  @click="statusAuto('3')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第四单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit4 }"
                  @click="statusChange('4')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit4 }"
                  @click="statusAuto('4')"
                >自动</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { IconRefresh } from "@opentiny/vue-icon";
import api from "../api";
const iconRefresh = IconRefresh()
const pointList = ref<PointItem[]>([]);
const ws = ref<WebSocket | null>(null);
const error = ref(null);
type PointItem = {
  id?: string | number;
  name: string;
  point_monitor?: {
    value_text: string;
  };
};
const dataList = [
  {
    team: "第一单元",
    tmyxsds: 3,
    tmyxsdx: 3,
    tmtzsds: 55,
    tmtzsdx: 55,
    tmljsds: 55,
    tmljsdx: 58,
    blyxsds: 3,
    blyxsdx: 3,
    tmljsjs: 49,
    tmljsjx: 50,
    tempera1: 103,
    tempera2: 50,
    carNumber: 14,
    statusAuto: false,
    dianji: [
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第一组",
    tmyxsds: 2,
    tmyxsdx: 3,
    tmtzsds: 120,
    tmtzsdx: 120,
    tmljsds: 57,
    tmljsdx: 57,
    blyxsds: 40,
    blyxsdx: 40,
    tmljsjs: 39,
    tmljsjx: 23,
    tempera1: 70,
    tempera2: 44,
    carNumber: 15,
    statusAuto: true,
    dianji: [
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第二组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 480,
    tmtzsdx: 480,
    tmljsds: 58,
    tmljsdx: 58,
    blyxsds: 40,
    blyxsdx: 40,
    tmljsjs: 12,
    tmljsjx: 9,
    tempera1: 131,
    tempera2: 91,
    carNumber: 16,
    statusAuto: true,
    dianji: [
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
      { isStop: true, isBendi: true, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第三组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 240,
    tmtzsdx: 240,
    tmljsds: 59,
    tmljsdx: 59,
    blyxsds: 38,
    blyxsdx: 38,
    tmljsjs: 12,
    tmljsjx: 27,
    tempera1: 274,
    tempera2: 359,
    carNumber: 17,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第四组",
    tmyxsds: 3,
    tmyxsdx: 3,
    tmtzsds: 120,
    tmtzsdx: 120,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 38,
    blyxsdx: 38,
    tmljsjs: 41,
    tmljsjx: 36,
    tempera1: 292,
    tempera2: 60,
    carNumber: 18,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第五组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 240,
    tmtzsdx: 240,
    tmljsds: 57,
    tmljsdx: 57,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 32,
    tmljsjx: 22,
    tempera1: 395,
    tempera2: 368,
    carNumber: 19,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第二单元第六组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 180,
    tmtzsdx: 180,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 21,
    tmljsjx: 25,
    tempera1: 558,
    tempera2: 477,
    carNumber: 20,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第三单元第一组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 90,
    tmtzsdx: 90,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 30,
    tmljsjx: 48,
    tempera1: 683,
    tempera2: 652,
    carNumber: 21,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第三单元第二组",
    tmyxsds: 3,
    tmyxsdx: 3,
    tmtzsds: 90,
    tmtzsdx: 90,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 58,
    tmljsjx: 31,
    tempera1: 916,
    tempera2: 905,
    carNumber: 22,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第三单元第三组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 180,
    tmtzsdx: 180,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 6,
    tmljsjx: 6,
    tempera1: 939,
    tempera2: 898,
    carNumber: 23,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第三单元第四组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 480,
    tmtzsdx: 480,
    tmljsds: 60,
    tmljsdx: 60,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 46,
    tmljsjx: 37,
    tempera1: 1000,
    tempera2: 995,
    carNumber: 24,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第三单元第五组",
    tmyxsds: 3,
    tmyxsdx: 3,
    tmtzsds: 90,
    tmtzsdx: 90,
    tmljsds: 59,
    tmljsdx: 59,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 3,
    tmljsjx: 41,
    tempera1: 967,
    tempera2: 950,
    carNumber: 25,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "故障" },
    ],
  },
  {
    team: "第三单元第六组",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 60,
    tmtzsdx: 60,
    tmljsds: 63,
    tmljsdx: 63,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 41,
    tmljsjx: 26,
    tempera1: 919,
    tempera2: 920,
    carNumber: 26,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
  {
    team: "第四单元",
    tmyxsds: 2,
    tmyxsdx: 2,
    tmtzsds: 90,
    tmtzsdx: 90,
    tmljsds: 65,
    tmljsdx: 65,
    blyxsds: 36,
    blyxsdx: 36,
    tmljsjs: 34,
    tmljsjx: 41,
    tempera1: 716,
    tempera2: 755,
    carNumber: 27,
    statusAuto: true,
    dianji: [
      { isStop: false, isBendi: false, eqm: "正常" },
      { isStop: false, isBendi: false, eqm: "正常" },
    ],
  },
];
const unit1 = ref(false);
const unit2 = ref(true);
const unit3 = ref(true);
const unit4 = ref(true);
// 清除错误信息
const clearError = () => {
  error.value = null;
};
const onPointDragStart = (event: DragEvent, point: PointItem) => {
  // 可以使用 event.dataTransfer.setData() 来设置拖拽数据
  if (event.dataTransfer) {
    event.dataTransfer.setData('text/plain', JSON.stringify(point));
  }
};

// 初始化WebSocket连接
const initWebSocket = () => {
  ws.value = new WebSocket(`ws://10.0.11.74:60309/ws/public`);
  
  ws.value.onmessage = (event) => {
    const data = JSON.parse(event.data);
     console.log('WebSocketdata:', data);
    if (data.type === "PointNewValue") {
      pointList.value.forEach(item => {
        if (item.id === data.data.point_id) {
          item.point_monitor = data.data;
        }
      });
    }
  };
  
  ws.value.onclose = () => {
    console.log('WebSocket连接关闭');
    // 5秒后尝试重连
    setTimeout(initWebSocket, 5000);
  };
  
  ws.value.onerror = (err) => {
    console.error('WebSocket错误:', err);
  };
};
const getPointList = async () => {
  clearError();
  try {
    const res = await api.pointList({});
    pointList.value = res.data || [];
  } catch (err) {
    console.error("获取点位列表失败:", err);
  }
};
// 组件挂载时初始化WebSocket
onMounted(() => {
  initWebSocket();
  getPointList();
});
// 组件卸载时关闭WebSocket
onUnmounted(() => {
  if (ws.value) {
    ws.value.close();
  }
});
const statusChange = (unit: string) => {
  if (unit == "1") {
    unit1.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第一单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "2") {
    unit2.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第二单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "3") {
    unit3.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第三单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "4") {
    unit4.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第四单元") > -1) {
        item.statusAuto = false;
      }
    });
  }
};
const statusAuto = (unit: string) => {
  if (unit == "1") {
    unit1.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第一单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "2") {
    unit2.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第二单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "3") {
    unit3.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第三单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "4") {
    unit4.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第四单元") > -1) {
        item.statusAuto = true;
      }
    });
  }
};
</script>
<style scoped>
.point-list {
  max-height: 400px;
  overflow-y: auto;
}
.hover:bg_gray_100:hover {
  background-color: #f5f5f5;
}
.cursor-pointer {
  cursor: pointer;
}
th.sticky.left0,
td.sticky.left0 {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}
</style>
