VideoSurveillance-ui/src/layout/index.vue

<template>
  <div class="app-container" style="height: 100%">
    <el-row v-if="toLivePreview===true" style="display: flex; width: 100%;height: 100%">
      <!--设备树-->
      <div class="tree-card" style="width: 220px">
        <div>
          <el-input v-model="searchWord" placeholder="请输入设备名称" clearable size="small"
                    prefix-icon="el-icon-search"
                    style="margin-bottom: 5px"
          />
        </div>
        <div class="head-container">
          <el-tabs v-model="activeName" @tab-click="handleTabClick" :stretch="true">
            <el-tab-pane label="摄像机" name="first">
              <el-tree :data="equipmentOptions" :props="defaultProps" node-key="id" :expand-on-click-node="true"
                       ref="tree1" :filter-node-method="filterNode" default-expand-all highlight-current
                       @node-click="handleNodeClick"
              >
                <span style="
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                  " @dblclick="handleNodedbClick(data)" slot-scope="{ node, data }"
                >
                  <el-row :gutter="10" :id="data.id" style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 100%;
                      height: 100%;
                    "
                  >
                    <el-col :span="4" v-if="node.isLeaf">
                      <i v-if="
                        onlinePresenceList.find((item) => item.id === data.id)
                          .onlinePresence === '1'
                      " class="el-icon-video-camera" style="
                          font-size: 26px;
                          display: inline-flex;
                          color: green;
                        "
                      ></i>
                      <i v-else class="el-icon-video-camera" style="
                          font-size: 26px;
                          display: inline-flex;
                          color: #6E7A89;
                        "
                      ></i>
                    </el-col>
                    <el-col :span="20">
                      <el-row>
<!--                        <el-tooltip :content="data.label" placement="top">-->
                          <span style="font-size: 14px; margin-left: 5px;font-weight: normal;
                              width: 150px;
                              display: inline-block;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;">{{
                              data.label
                            }}</span>
<!--                        </el-tooltip>-->
<!--                        <span style="font-size: 16px;font-weight: normal">{{ data.label }}</span>-->
                      </el-row>
                    </el-col>
                  </el-row>
                </span>
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="分组" name="second">
              <el-tree :data="groupOptions" :props="defaultProps" node-key="id" :expand-on-click-node="true"
                       ref="tree2" :filter-node-method="filterNode" default-expand-all highlight-current
                       @node-click="handleNodeClick"
              >
                <span style="
                    margin-left: -15px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                  " @dblclick="handleNodedbClick(data)" slot-scope="{ node, data }"
                >
                  <el-row :gutter="10" :id="'group' + data.id" style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 100%;
                      height: 100%;
                    "
                  >
                    <el-col :span="4" v-if="data.isLeaf">
                      <i v-if="
                        onlinePresenceList.find((item) => item.id === data.id)
                          .onlinePresence === '1'
                      " class="el-icon-video-camera" style="
                          font-size: 26px;
                          display: inline-flex;
                          color: green;
                        "
                      ></i>
                      <i v-else class="el-icon-video-camera" style="
                          font-size: 26px;
                          display: inline-flex;
                          color: #6E7A89;
                        "
                      ></i>
                    </el-col>
                    <el-col :span="20">
                      <el-row>
<!--                        <span style="font-size: 16px;font-weight: normal">{{ data.label }}</span>-->
<!--                        <el-tooltip :content="data.label" placement="top">-->
                          <span style="font-size: 14px; margin-left: 5px;font-weight: normal;
                              width: 140px;
                              display: inline-block;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;">{{
                              data.label
                            }}</span>
<!--                        </el-tooltip>-->
                      </el-row>
                    </el-col>
                  </el-row>
                </span>
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="视图" name="third">
              <el-tree :data="viewOptions" :props="defaultProps" :expand-on-click-node="true" ref="tree3"
                       :filter-node-method="filterNode" default-expand-all highlight-current
                       @node-click="handleViewNodeClick"
              >
                <span style="
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                  " @dblclick="handleViewNodedbClick(data)" slot-scope="{ node, data }"
                >
                  <div style="display: flex; align-items: center">
                    <v-icon name="md-preview-sharp" scale="1.2" fill="#ffffff"></v-icon>
<!--                    <span style="font-size: 18px; margin-left: 5px;font-weight: normal">{{-->
<!--                        data.label-->
<!--                      }}</span>-->
<!--                    <el-tooltip :content="data.label" placement="top">-->
                      <span style="font-size: 14px; margin-left: 5px;font-weight: normal;
                              width:120px;
                              display: inline-block;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;">{{
                          data.label
                        }}</span>
<!--                    </el-tooltip>-->
                  </div>
                  <span v-if="data.isLeaf" style="margin-right: 10px">
                    <el-dropdown size="mini" trigger="click">
                      <i class="el-icon-more" style="color: #ffffff; font-size: 20px"></i>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-edit" @click.native="openUpdateView = true">
                          编辑
                        </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-delete" @click.native="deleteView(data)">
                          删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </span>
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="tool-tab">
          <el-tabs v-model="activeTool" :stretch="true">
            <el-tab-pane label="工具" name="first">
              <div style="
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  justify-content: space-around;
                "
              >
                <div class="fast-button" @click="openSave = true">
                  保存当前视图
                </div>
                <!-- <div class="fast-button" v-if="activeName === 'third' && viewId" @click="beforeShare">分享当前视图
                </div> -->
                <div class="fast-button" @click="fisheye" v-if="equipmentInfo.isFishEye === '1'">
                  切换显示模式
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="灯光" v-if="
              equipmentInfo.isOutboard === '1' &&
              equipmentInfo.isLamplight === '1'
            "
            >
              <div style="
                  display: flex;
                  flex-direction: column;
                  align-items: baseline;
                "
              >
                <el-switch
                  style="color: #ffffff; zoom: 1.15; margin-top: 5px" v-model="equipmentInfo.lamplightStatus"
                  inactive-text="开启灯光" active-value="1" inactive-value="0" @change="handleOpenLight"
                />
                <div style="
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    width: 100%;
                    margin-top: 5px;
                  "
                >
                  <span style="font-size: 16px; color: #ffffff; width: 70px">亮度调节</span>
                  <el-slider v-loading.fullscreen.lock="fullscreenLoading"
                             element-loading-text="命令执行中"
                             element-loading-spinner="el-icon-loading" style="width: 60%; margin-right: 10px; margin-left: 10px" v-model="equipmentInfo.light"
                             :step="20" :min="20" @change="changeLight" show-stops
                  ></el-slider>
                </div>
                <div class="device-info">
                  <el-row type="flex" justify="space-around">
                    <el-col :span="8" class="info-item">
                      <div :class="[
                        'status-light',
                        newEquipmentInfo.overallSwitch ? 'active' : 'inactive',
                      ]"
                      ></div>
                      <span>总控</span>
                    </el-col>
                    <el-col v-if="!this.equipmentInfo.isGeneralControl" :span="8" class="info-item">
                      <div :class="[
                        'status-light',
                        newEquipmentInfo.moduleSwitch ? 'active' : 'inactive',
                      ]"
                      ></div>
                      <span>分控</span>
                    </el-col>
                    <el-col :span="8" class="info-item">
                      <div :class="[
                        'status-light',
                        newEquipmentInfo.lightSwitch ? 'active' : 'inactive',
                      ]"
                      ></div>
                      <span>照明灯</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="
              equipmentInfo.isGimbalControl === '1' &&
              equipmentInfo.isHolder === '1'
            " label="云台"
            >
              <div class="operate-panel" @dragstart.prevent>
                <div class="move-btn">
                  <div class="btn1" style="margin:45px 0 0 40px">
                    <img :src="leftUpIcon" class="btn" style="cursor: pointer"
                         @mousedown="handleMove('leftUp')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('leftUpEnter')" @mouseleave="handleMove('leave')">
<!--                    <i :class="leftUpIcon?'btn el-icon-arrow-up':'btn el-icon-arrow-down'" style="transform: rotate(-45deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('leftUp')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                  </div>
                  <div class="btn1" style="margin-bottom: 5px;margin-left: -20px; cursor: pointer">
<!--                    <i class="btn el-icon-arrow-down" @mousedown="handleMove('up')" @mouseup="handleMove('stop')"/>-->
                    <img :src="upIcon" class="btn" style="cursor: pointer;height: 27px"
                         @mousedown="handleMove('up')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('upEnter')" @mouseleave="handleMove('leave')">
                  </div>
                  <div class="btn1" style="margin-top: 45px;margin-left: -25px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(45deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('rightUp')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="rightUpIcon" class="btn" style="cursor: pointer;transform: rotate(15deg)"
                         @mousedown="handleMove('rightUp')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('rightUpEnter')" @mouseleave="handleMove('leave')">
                  </div>
                  <div class="btn1" style="margin-left: 23px;margin-top: 5px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(-90deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('left')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="leftIcon" class="btn" style="cursor: pointer;width: 27px"
                         @mousedown="handleMove('left')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('leftEnter')" @mouseleave="handleMove('leave')">
                  </div>
<!--                  <div class="btn" style="">-->
<!--                    <i class="btn el-icon-refresh" @click="handleMove('refresh')"/>-->
<!--                  </div>-->
                  <div style="margin-top:5px;margin-left: 70px;width: 40px;height: 35px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(90deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('right')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="rightIcon" class="btn" style="cursor: pointer;width: 27px"
                         @mousedown="handleMove('right')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('rightEnter')" @mouseleave="handleMove('leave')">
                  </div>
                  <div class="btn1" style="margin-bottom: 35px;margin-left: 45px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(225deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('leftDown')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="leftDownIcon" class="btn" style="cursor: pointer"
                         @mousedown="handleMove('leftDown')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('leftDownEnter')" @mouseleave="handleMove('leave')">
                  </div>
                  <div class="btn1" style="margin-top: 20px;margin-left: -20px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(180deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('down')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="downIcon" class="btn" style="cursor: pointer;height: 27px"
                         @mousedown="handleMove('down')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('downEnter')" @mouseleave="handleMove('leave')">
                  </div>
                  <div class="btn1" style="margin-left: -20px;margin-bottom: 40px">
<!--                    <i class="btn el-icon-arrow-up" style="transform: rotate(135deg); cursor: pointer"-->
<!--                       @mousedown="handleMove('rightDown')" @mouseup="handleMove('stop')"-->
<!--                    />-->
                    <img :src="rightDownIcon" class="btn" style="cursor: pointer"
                         @mousedown="handleMove('rightDown')"  @mouseup="handleMove('stop')"
                         @mouseenter="handleMove('rightDownEnter')" @mouseleave="handleMove('leave')">
                  </div>
                </div>
                <div class="compose-btn">
                  <div style="width: 50%;float: left">
                      <div class="div-class">
                        <div class="span-class" >变倍</div>
                      </div>
                      <div class="div-class">
                        <img :src="double" alt="倍加" style="width: 35px;height: 35px;margin-top: 3px"
                             @mousedown="handleFocusing('up')" @mouseup="handleFocusing('stop')"
                             @mouseenter="handleFocusing('upEnter')" @mouseleave="handleFocusing('leave')">
                      </div>
                  </div>
                  <div style="width: 50%;float: left">
                      <div class="div-class">
                        <div class="span-class" >变倍</div>
                      </div>
                      <div class="div-class">
                        <img :src="subtract" alt="倍减" style="width: 35px;height: 35px;margin-top: 3px"
                             @mousedown="handleFocusing('down')" @mouseup="handleFocusing('stop')"
                             @mouseenter="handleFocusing('downEnter')" @mouseleave="handleFocusing('leave')">
                      </div>
                  </div>
<!--                  <div style="width: 50%;float: left">-->
<!--                    <div class="div-class">-->
<!--                      <div class="span-class" >变焦</div>-->

<!--                    </div>-->
<!--                    <div class="div-class">-->
<!--                      <img :src="double1" alt="倍加" style="width: 35px;height: 35px;margin-top: 3px"-->
<!--                           @mousedown="handleFocusing('focusOut')" @mouseup="handleFocusing('stop')"-->
<!--                           @mouseenter="handleFocusing('focusOutEnter')" @mouseleave="handleFocusing('leave')">-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="width: 50%;float: left">-->
<!--                    <div class="div-class">-->
<!--                      <div class="span-class" >变焦</div>-->
<!--                    </div>-->
<!--                    <div class="div-class">-->
<!--                      <img :src="subtract1" alt="倍减" style="width: 35px;height: 35px;margin-top: 3px"-->
<!--                           @mousedown="handleFocusing('focusIn')" @mouseup="handleFocusing('stop')"-->
<!--                           @mouseenter="handleFocusing('focusInEnter')" @mouseleave="handleFocusing('leave')">-->
<!--                    </div>-->
<!--                  </div>-->
                  <div style="width: 100%;margin-top: 65px">
                    <div class="span-class1">速度</div>
                    <el-slider :min="0.2" :max="1" v-model="speed" :step="0.2" show-stops style="float: left;width: 43%;margin:0 10px"></el-slider>
                    <div class="span-class1">{{speed}}</div>
                  </div>
<!--                  <div class="btn2">-->
<!--                    <i class="el-icon-zoom-in" style="cursor: pointer" @click="addSpeed()"></i>-->
<!--                    <div style="display: flex">速度:{{ getSpeed }}</div>-->
<!--                    <i class="el-icon-zoom-out" style="cursor: pointer" @click="delSpeed()"></i>-->
<!--                  </div>-->
<!--                  <div class="btn2">-->
<!--                    <i class="el-icon-zoom-in" style="cursor: pointer" @mousedown="handleFocusing('up')"-->
<!--                       @mouseup="handleFocusing('stop')"-->
<!--                    ></i>-->
<!--                    <span>变倍</span>-->
<!--                    <i class="el-icon-zoom-out" style="cursor: pointer" @mousedown="handleFocusing('down')"-->
<!--                       @mouseup="handleFocusing('stop')"-->
<!--                    ></i>-->
<!--                  </div>-->
<!--                  <div class="btn2">-->
<!--                    <i class="el-icon-zoom-in" style="cursor: pointer" @mousedown="handleFocusing('focusOut')"-->
<!--                       @mouseup="handleFocusing('stop')"-->
<!--                    ></i>-->
<!--                    <span>变焦</span>-->
<!--                    <i class="el-icon-zoom-out" style="cursor: pointer" @mousedown="handleFocusing('focusIn')"-->
<!--                       @mouseup="handleFocusing('stop')"-->
<!--                    ></i>-->
<!--                  </div>-->
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!--监控预览-->
      <div class="tree-card" style="flex: 1; margin-left: 5px; flex-direction: column-reverse">
        <toolbar style="height: 45px" ref="toolbar" @startPolling="startPolling" @endPolling="endPolling"></toolbar>
        <div style="
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex: 1;
            overflow: hidden;
            margin-left: 5px;
          "
        >
          <div style="height: 100%;width: 99.9%; aspect-ratio: 16/9;">
            <videoBox ref="video" @clearTreeSelected="clearTreeSelected" @setCurrentKeyTree="setCurrentKeyTree"
                      @clickToolBar="clickToolBar"
            ></videoBox>
          </div>
        </div>
      </div>
      <el-dialog title="保存视图" :visible.sync="openSave" width="300px" append-to-body>
        <el-row type="flex" justify="center">
          <el-input v-model="viewName" placeholder="请输入视图名称"></el-input>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="openSave = false">取消</el-button>
          <el-button size="small" type="primary" @click="save">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改视图" :visible.sync="openUpdateView" width="300px" append-to-body>
        <el-row type="flex" justify="center">
          <el-input v-model="viewName" placeholder="请输入视图名称"></el-input>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="openUpdateView = false">取消</el-button>
          <el-button size="small" type="primary" @click="updateView">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="分享视图" :visible.sync="openShare" width="600px" append-to-body>
        <el-row type="flex" justify="center">
          <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="用户编号" align="center" key="userId" prop="userId"/>
            <el-table-column label="用户名称" align="center" key="userName" prop="userName"
                             :show-overflow-tooltip="true"
            />
            <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                             :show-overflow-tooltip="true"
            />
            <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"
                             :show-overflow-tooltip="true"
            />
          </el-table>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="openShare = false">取消</el-button>
          <el-button size="small" type="primary" @click="share">确定</el-button>
        </div>
      </el-dialog>
    </el-row>
    <big-video-playback v-else-if="toVideoPlayback===true" :stream-options="streamOptions"></big-video-playback>
    <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}" v-else>
      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
      <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
      <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
        <div :class="{'fixed-header':fixedHeader}">
          <navbar/>
          <tags-view v-if="needTagsView"/>
        </div>
        <app-main/>
        <right-panel>
          <settings/>
        </right-panel>
      </div>
    </div>
  </div>
<!--  <div  lass="app-container">-->
<!---->
<!--  </div>-->

</template>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters, mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
import BigLivePreview from '@/views/livePreview/bigLivePreview.vue'
import { isRelogin } from '@/utils/request'
import Cookies from 'js-cookie'
import { login } from '@/api/login'
import { getToken, setToken } from '@/utils/auth'
import store from '@/store'
import NProgress from 'nprogress'
import toolbar from '@/views/livePreview/components/toolBar1.vue'
import videoBox from '@/views/livePreview/components/videoBox1.vue'
import { cameraSelect, listCamera } from '@/api/equipment/camera'
import { cameraGroupSelect } from '@/api/equipment/group'
import { deletePreview, savePreview, selectViewList, sharePreview, updatePreview } from '@/api/livePreview'
import { lamplightInfo } from '@/api/equipment/lamplight'
import { listUser } from '@/api/system/user'
import { dim, power } from '@/api/outBoard/keyControl'
import {
  downFocalLength, focusIn, focusOut,
  leftDown,
  leftUp,
  rightDown,
  rightUp,
  shotDown,
  shotLeft,
  shotRight,
  shotUp,
  stopMove, upFocalLength
} from '@/api/livePreview/monitor'
import BigVideoPlayback from '@/views/videoPlayback/bigVideoPlayback.vue'
import leftUpImg from '../assets/images/ptz_btn_left_up.png'
import leftUpImg1 from '../assets/images/ptz_btn_left_up1.png'
import upImg from '../assets/images/ptz_btn_up.png'
import upImg1 from '../assets/images/ptz_btn_up1.png'
import rightUpImg from '../assets/images/ptz_btn_right_up.png'
import rightUpImg1 from '../assets/images/ptz_btn_right_up1.png'
import leftImg from '../assets/images/ptz_btn_left.png'
import leftImg1 from '../assets/images/ptz_btn_left1.png'
import rightImg from '../assets/images/ptz_btn_right.png'
import rightImg1 from '../assets/images/ptz_btn_right1.png'
import leftDownImg from '../assets/images/ptz_btn_left_down.png'
import leftDownImg1 from '../assets/images/ptz_btn_left_down1.png'
import downImg from '../assets/images/ptz_btn_down.png'
import downImg1 from '../assets/images/ptz_btn_down1.png'
import rightDownImg from '../assets/images/ptz_btn_right_down.png'
import rightDownImg1 from '../assets/images/ptz_btn_right_down1.png'
import doubleImg from '../assets/images/a5.png'
import doubleImg1 from '../assets/images/a5-1.png'
import subtractImg from '../assets/images/a6.png'
import subtractImg1 from '../assets/images/a6-1.png'
import kuang1 from '../assets/images/kuang-1.png'
import kuang2 from '../assets/images/kuang-2.png'
import { configPage } from '/public/config'
import { selectStreamProxyItem } from '@/api/service/streamProxy'

export default {
  name: 'Layout',
  components: {
    BigVideoPlayback,
    videoBox, toolbar,
    BigLivePreview,
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  data(){
    return {
      double:doubleImg,
      double1:doubleImg,
      subtract:subtractImg,
      subtract1:subtractImg,
      cellCount: 1, //分屏数
      speed: 0.4, //速度
      marks:{
        0:'0',
        0.2:'0.2',
        0.4:'0.4',
        0.6:'0.6',
        0.8:'0.8',
        1:'1',
      },
      userId: undefined,
      searchWord: '',
      activeName: 'first', //tab页
      activeTool: 'first',
      equipmentOptions: [],
      onlinePresenceList: [],
      groupOptions: [],
      viewOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      equipmentInfo: {
        lamplightId: undefined,
        lamplightOnline: '',
        lamplightStatus: '',
        cameraName: '',
        light: '',
        lightSwitch: true,
        overallSwitch: true,
        moduleSwitch: true,
        id: '',
        app: '',
        isGeneralControl: true
      },
      newEquipmentInfo: {
        lamplightId: undefined,
        lamplightOnline: '',
        lamplightStatus: '',
        cameraName: '',
        light: '',
        lightSwitch: true,
        overallSwitch: true,
        moduleSwitch: true,
        id: '',
        app: '',
        isGeneralControl: true
      },
      viewId: undefined,
      viewName: '',
      openSave: false,
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      userList: [],
      openShare: false,
      openSeize: false,
      seizeTime: undefined,
      selectedTree: [],
      //
      showLightCard: false,
      timer: null,
      cameraList: [],
      autoplay: false,
      interval: 10000,
      pollingInterval: null,
      openUpdateView: false,
      fishEyeType: '鱼眼',
      onlinePresenceInterval: null, //定时器id
      messages: [],
      eventSource: null,
      fullscreenLoading: false,
      loginForm: {
        username: "hfdz",
        password: "hfdz123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      toLivePreview:false,
      toVideoPlayback:false,
      leftUpIcon:leftUpImg,
      upIcon:upImg,
      rightUpIcon:rightUpImg,
      leftIcon:leftImg,
      rightIcon:rightImg,
      leftDownIcon:leftDownImg,
      downIcon:downImg,
      rightDownIcon:rightDownImg,
      streamOptions: [],
    }
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables;
    },
    ...mapGetters(['selectedTreeData', 'selectedMonitor', 'boxList', 'active']),
    getSpeed() {
      return this.speed.toFixed(1)
    }
  },
  watch: {
    // 根据名称筛选树
    searchWord(val) {
      switch (this.activeName) {
        case 'first':
          this.$refs.tree1.filter(val)
          return
        case 'second':
          this.$refs.tree2.filter(val)
          return
        case 'third':
          this.$refs.tree3.filter(val)
          return
      }
    }

  },
  created() {
    this.toLivePreview=false
    this.toVideoPlayback=false
    console.log(Cookies.get('Admin-Token'),2222)
    console.log(new URLSearchParams(window.location.search),"new URLSearchParams(window.location.search)")
    let toLivePreview=new URLSearchParams(window.location.search).get('toLivePreview')
    let toVideoPlayback=new URLSearchParams(window.location.search).get('toVideoPlayback')
    if(toVideoPlayback){
      this.toLivePreview=false
      this.toVideoPlayback=true
    }
    if(toLivePreview){
      this.toVideoPlayback=false
      this.toLivePreview = true;
    }
    console.log(toLivePreview,2222)
    console.log(toVideoPlayback==='true',2222)
    // 确保在token验证后再初始化预览
    if (toLivePreview||toVideoPlayback) {

      // 未登录则执行自动登录
      const autoLogin = async () => {
        try {
          const loginForm = {
            username: "hfdz",
            password: "hfdz123".split('').map(char => {
              const charCode = char.charCodeAt(0);
              return (charCode >= 32 && charCode <= 126)
                ? String.fromCharCode(32 + (charCode - 32 + 10) % 95)
                : char;
            }).join(''),
            rememberMe: false,
            code: "",
            uuid: ""
          };
          const res = await login(loginForm.username, loginForm.password, loginForm.code, loginForm.uuid);
          setToken(res.token)
          this.$nextTick(() => {
            // this.toLivePreview=false
            // this.toVideoPlayback=false
            console.log(getToken(),2222)
            if (getToken()) {
              store.dispatch('GetInfo').catch(err => console.error("用户信息获取失败", err));
              // if(toVideoPlayback){
              //   this.toVideoPlayback=true
              // }
              // if(toLivePreview){
              //   this.toLivePreview = true;
              // }
              this.initData();
              // this.login(); // 执行组件内的登录方法确保状态同步
            }
          });
        } catch (error) {
          console.error("自动登录失败", error);
        }
      };

      autoLogin();


    }

    this.userId = this.$store.getters.userId
    console.log(this.toLivePreview,777)
  },
  mounted() {
    // 启动在线轮询
    this.initSSE()
  },
  beforeDestroy() {
    // 在组件销毁之前清除定时器，防止内存泄漏
    this.closeSSE()
    this.toLivePreview=false
    this.toVideoPlayback=false
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    login(){
      let password = this.loginForm.password;
      this.loginForm.password = this.encrypt(this.loginForm.password, 10);
      this.$store.dispatch("Login", this.loginForm).then(() => {
        this.loginForm.password = password;
        console.log(123123)
        // this.$router.push({ path: this.redirect || "/" }).catch(() => { });
        // this.$router.push({ path: '/bigLivePreview' || "/" }).catch(() => { });
      }).catch(() => {
        this.loginForm.password = password;
        this.loading = false;
        if (this.captchaEnabled) {
          this.getCode();
        }
      });
    },
    // 加密方法
    encrypt(text, shift) {
      const ASCII_PRINTABLE_START = 32;
      const ASCII_PRINTABLE_END = 126;
      const ASCII_PRINTABLE_RANGE = ASCII_PRINTABLE_END - ASCII_PRINTABLE_START + 1;
      return text.split('').map(char => {
        let charCode = char.charCodeAt(0);
        if (charCode >= ASCII_PRINTABLE_START && charCode <= ASCII_PRINTABLE_END) {
          charCode = ASCII_PRINTABLE_START + (charCode - ASCII_PRINTABLE_START + shift) % ASCII_PRINTABLE_RANGE;
        }
        return String.fromCharCode(charCode);
      }).join('');
    },

    initData() {
      this.getEquipmentOptions();
      this.getGroupOptions();
      this.getViewOptions();
      this.initSSE();

      if(this.toVideoPlayback===true){
        this.getStreamOptions();
      }
    },

    getStreamOptions() {
      selectStreamProxyItem({ recordShow: '1' }).then((response) => {
        const children = response.data.map((item) => ({
          ...item,
          isLeaf: true,
          label: item.app,
          key: item.id,
        }));
        this.streamOptions = children;
      });
    },


    getEquipmentOptions() {
      cameraSelect().then((response) => {
        this.cameraList = response.rows
        const children = response.rows.map((item) => ({
          ...item,
          isLeaf: true,
          label: item.cameraName,
          key: item.id
        }))
        this.equipmentOptions = children
        this.onlinePresenceList = children
      })
    },
    getGroupOptions() {
      // 获取分组
      cameraGroupSelect().then((res) => {
        this.groupOptions = res.map((item) => ({
          ...item,
          children: [],
          isLeaf: false,
          label: item.groupName,
          key: item.id
        }))
      })
    },
    // 获取设备分组下的设备
    handleTabClick(tab) {
      if (tab.name === 'second') {
        this.groupOptions.forEach(function(item) {
          listCamera({ groupId: item.id }).then((res) => {
            const children = res.rows.map((item) => ({
              ...item,
              isLeaf: true,
              label: item.cameraName
            }))
            item.children = children
          })
        })
      }
    },
    getViewOptions() {
      selectViewList().then((response) => {
        // 去除item为空的项
        const children = response.data
          .filter((item) => item)
          .map((item) => ({
            ...item,
            isLeaf: true,
            label: item.viewName,
            key: item.id
          }))
        this.viewOptions = children
      })
    },
    // startPollingOnlinePresence() {
    //   // 每隔一定时间执行轮询任务
    //   this.onlinePresenceInterval = setInterval(() => {
    //     this.pollOnlinePresence();
    //   }, 3000); // 3秒钟轮询一次，根据需要调整间隔时间
    // },
    // stopPollingOnlinePresence() {
    //   // 清除定时器，停止轮询任务    ！！！！重要，防止内存泄露
    //   clearInterval(this.onlinePresenceInterval);
    // },
    // pollOnlinePresence() {
    //   // 在这里执行轮询的任务，可以是发送请求或执行其他操作
    //   listCameraOnlinePresence().then((response) => {
    //     this.cameraList = response.data;
    //     const children = response.data.map((item) => ({
    //       ...item,
    //       isLeaf: true,
    //       label: item.cameraName,
    //       key: item.id,
    //     }));
    //     this.onlinePresenceList = children;
    //   });
    // },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    setCurrentKeyTree(id) {
      if (this.activeName === 'first' || this.activeName === 'third') {
        this.$nextTick().then(() => {
          this.$refs.tree1.setCurrentKey(id)
          // console.log(this.$refs.tree1.getCurrentNode(id))
          this.equipmentInfo = this.$refs.tree1.getCurrentNode(id)
          const node = document.getElementById(id) // 通过Id获取到对应的dom元素
          setTimeout(() => {
            if (node) {
              this.$nextTick(() => {
                node.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
              })
            }
          }, 100)
        })
      } else if (this.activeName === 'second') {
        this.$nextTick().then(() => {
          this.$refs.tree2.setCurrentKey(id)
          this.equipmentInfo = this.$refs.tree2.getCurrentNode(id)
          var selected = this.$refs.tree2.getCurrentNode()
          if (
            this.$refs.tree2.getNode(selected) &&
            this.$refs.tree2.getNode(selected).parent
          ) {
            this.expandParents(this.$refs.tree2.getNode(selected).parent)
          }
          const node = document.getElementById('group' + id) // 通过Id获取到对应的dom元素
          setTimeout(() => {
            if (node) {
              this.$nextTick(() => {
                node.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
              })
            }
          }, 100)
        })
      }
    },

    expandParents(node) {
      node.expanded = true
      if (node.parent) {
        this.expandParents(node.parent)
      }
    },
    handleNodeClick(node) {
      this.fishEyeType = '鱼眼'
      this.activeTool = 'first'
      const debounceTimer = this.timer
      if (debounceTimer) {
        window.clearTimeout(debounceTimer)
        this.timer = null
      }

      this.timer = window.setTimeout(() => {
        console.log(node)
        // 判断是否是设备
        if (node.isLeaf) {
          this.equipmentInfo = node
          // 判断灯光状态
          if (this.equipmentInfo.isOutboard === '1') {
            // 判断灯光状态
            lamplightInfo({ id: this.equipmentInfo.lamplightEquipment }).then(
              (res) => {
                if (res.total === 0) {
                  return
                } else {
                  this.equipmentInfo.lamplightId = res.data.id
                  this.equipmentInfo.lamplightOnline = res.data.lamplightOnline
                  this.equipmentInfo.lamplightStatus = res.data.lamplightStatus
                  this.newEquipmentInfo.lightSwitch = res.data.lightSwitch
                  this.equipmentInfo.light = Number(res.data.light) * 20
                  this.newEquipmentInfo.overallSwitch = res.data.overallSwitch
                  this.newEquipmentInfo.moduleSwitch = res.data.moduleSwitch
                  this.equipmentInfo.isGeneralControl = res.data.isGeneralControl
                }
              }
            )
          }

          this.$nextTick(() => {
            // 设置当前选中设备
            this.$store.commit('updateSelectedTreeData', node)
            this.$store.commit('updateSelectedMonitor', {})
            let isplaying = false
            this.boxList.forEach((item) => {
              if (item.cameraId === node.id) {
                this.$store.commit('updateSelectedMonitor', item)
                isplaying = true
              }
            })
          })
        } else {
          //点击了父节点
          this.$nextTick(() => {
          })
        }
      }, 300)
    },
    // 节点双击事件
    handleNodedbClick(node) {
      console.log('dbclick')
      this.fishEyeType = '鱼眼'
      const debounceTimer = this.timer
      if (debounceTimer) {
        window.clearTimeout(debounceTimer)
        this.timer = null
      }

      // 判断是否是设备
      if (node.isLeaf) {
        this.equipmentInfo = node
        this.$nextTick(() => {
          // 设置当前选中设备
          this.$store.commit('updateSelectedTreeData', node)
          this.$refs.video.setShowBorder(true)
          // 遍历寻找空屏
          let findBox = false
          this.boxList.slice(0, this.active).forEach((item) => {
            if (!findBox && !item.cameraId) {
              findBox = true
              this.$store.commit('updateSelectedMonitor', item)
            }
          })
          // 遍历完了还没找到
          if (!findBox) {
            this.$store.commit(
              'updateSelectedMonitor',
              this.boxList[this.active - 1]
            )
          }
          // 判断设备是否停用
          if (
            this.onlinePresenceList.find(
              (item) => item.id === this.selectedTreeData.id
            ).onlinePresence === '1'
          ) {
            // 获取流
            this.getPlayUrl(this.selectedMonitor)
          } else {
            this.$message.warning('当前设备已离线！')
            this.clearTreeSelected()
          }
        })

        if (this.equipmentInfo.isOutboard === '1') {
          // 判断灯光状态
          lamplightInfo({ id: this.equipmentInfo.lamplightEquipment }).then(
            (res) => {
              if (res.total === 0) {
                return
              } else {
                this.equipmentInfo.lamplightId = res.data.id
                this.equipmentInfo.lamplightOnline = res.data.lamplightOnline
                this.equipmentInfo.lamplightStatus = res.data.lamplightStatus
                this.newEquipmentInfo.lightSwitch = res.data.lightSwitch
                this.equipmentInfo.light = Number(res.data.light) * 20
                this.newEquipmentInfo.overallSwitch = res.data.overallSwitch
                this.newEquipmentInfo.moduleSwitch = res.data.moduleSwitch
                this.equipmentInfo.isGeneralControl = res.data.isGeneralControl
              }
            }
          )
        }
      } else {
        //双击了父节点
        this.$nextTick(() => {
          // 设置当前选中设备
          this.boxList.forEach((item, index) => {
            setTimeout(() => {
              if (node.children[index]) {
                this.$store.commit('updateSelectedMonitor', item)
                this.$store.commit(
                  'updateSelectedTreeData',
                  node.children[index]
                )
                // 判断设备是否停用
                if (
                  this.onlinePresenceList.find(
                    (item) => item.id === this.selectedTreeData.id
                  ).onlinePresence === '1'
                ) {
                  // 获取流
                  this.getPlayUrl(this.selectedMonitor)
                } else {
                  // this.$message.warning('当前设备已离线！')
                  this.clearTreeSelected()
                }
              }
            }, index * 600)
          })
        })
      }
    },
    handleViewNodeClick(node) {
      this.equipmentInfo = {}
      this.viewId = node.id
    },
    handleViewNodedbClick(node) {
      console.log(node)
      this.equipmentInfo = {}
      this.viewId = node.id
      let data = JSON.parse(node.viewPreviewJson)
      this.$store.commit('updateActive', data.active)
      this.$store.commit('updateBoxList', data.boxList)
    },
    updateView() {
      updatePreview({ id: this.viewId, viewName: this.viewName }).then(
        (res) => {
          this.viewName = ''
          this.getViewOptions()
          this.openUpdateView = false
          this.$message.success('修改成功！')
        }
      )
    },
    deleteView(data) {
      this.$modal
        .confirm('是否确认删除名称为"' + data.label + '"的视图？')
        .then(function() {
          return deletePreview(data.id)
        })
        .then(() => {
          this.getViewOptions()
          this.$modal.msgSuccess('删除成功！')
        })
        .catch(() => {
        })
    },
    getPlayUrl(item) {
      // 清空流地址
      this.$store.commit('updateSelectedMonitor', {
        ...item,
        mainUrl: '',
        auxiliaryUrl: ''
      })

      // 获取流
      const isFishEye = this.selectedTreeData.isFishEye === '1'
      // const bitstreamType = this.active === 1 ? "0" : "1";

      const appCondition = isFishEye ? '鱼眼' : ''

      // 找所有符合条件的流
      let info = this.equipmentInfo.streamProxyList.filter((item) =>
        item.app.includes(appCondition)
      )
      console.log(info)

      // 找不到的后续操作
      if (info.length === 0) {
        item.cameraId = this.selectedTreeData.id
        item.name = this.selectedTreeData.cameraName
        let object = JSON.parse(
          this.equipmentInfo.streamProxyList[0].urlObject
        )
        item.code = object.codec_id_name
        item.rtc = object.rtc
        item.rtsp = object.rtsp

        const isH264 = object.codec_id_name === 'H264'
        const isH265 = object.codec_id_name === 'H265'

        // item.mainUrl =
        //   location.protocol === "https:"
        //     ? isH264 || isH265
        //       ? isH264
        //         ? object.rtcs
        //         : object.https_flv
        //       : object.rtcs
        //     : isH264 || isH265
        //       ? isH264
        //         ? object.rtc
        //         : object.flv
        //       : object.rtc;
        // item.auxiliaryUrl = item.mainUrl;
        info = this.equipmentInfo.streamProxyList
        if (info[0].typeOfBitstream === '0') {
          item.mainUrl =
            location.protocol === 'https:'
              ? isH264 || isH265
                ? isH264
                  ? object.rtcs
                  : object.https_flv
                : object.rtcs
              : isH264 || isH265
                ? isH264
                  ? object.rtc
                  : object.flv
                : object.rtc
          if (info.length > 1) {
            let object1 = JSON.parse(info[1].urlObject)
            item.auxiliaryUrl =
              location.protocol === 'https:'
                ? isH264 || isH265
                  ? isH264
                    ? object1.rtcs
                    : object1.https_flv
                  : object1.rtcs
                : isH264 || isH265
                  ? isH264
                    ? object1.rtc
                    : object1.flv
                  : object1.rtc
          } else {
            item.auxiliaryUrl = item.mainUrl
          }
        } else {
          item.auxiliaryUrl =
            location.protocol === 'https:'
              ? isH264 || isH265
                ? isH264
                  ? object.rtcs
                  : object.https_flv
                : object.rtcs
              : isH264 || isH265
                ? isH264
                  ? object.rtc
                  : object.flv
                : object.rtc
          if (info.length > 1) {
            let object1 = JSON.parse(info[1].urlObject)
            item.mainUrl =
              location.protocol === 'https:'
                ? isH264 || isH265
                  ? isH264
                    ? object1.rtcs
                    : object1.https_flv
                  : object1.rtcs
                : isH264 || isH265
                  ? isH264
                    ? object1.rtc
                    : object1.flv
                  : object1.rtc
          } else {
            item.mainUrl = item.auxiliaryUrl
          }
        }
      } else {
        item.cameraId = this.selectedTreeData.id
        item.name = this.selectedTreeData.cameraName
        let object = JSON.parse(info[0].urlObject)
        item.code = object.codec_id_name
        item.rtc = object.rtc
        item.rtsp = object.rtsp

        const isH264 = object.codec_id_name === 'H264'
        const isH265 = object.codec_id_name === 'H265'
        if (info[0].typeOfBitstream === '0') {
          item.mainUrl =
            location.protocol === 'https:'
              ? isH264 || isH265
                ? isH264
                  ? object.rtcs
                  : object.https_flv
                : object.rtcs
              : isH264 || isH265
                ? isH264
                  ? object.rtc
                  : object.flv
                : object.rtc
          if (info.length > 1) {
            let object1 = JSON.parse(info[1].urlObject)
            item.auxiliaryUrl =
              location.protocol === 'https:'
                ? isH264 || isH265
                  ? isH264
                    ? object1.rtcs
                    : object1.https_flv
                  : object1.rtcs
                : isH264 || isH265
                  ? isH264
                    ? object1.rtc
                    : object1.flv
                  : object1.rtc
          } else {
            item.auxiliaryUrl = item.mainUrl
          }
        } else {
          item.auxiliaryUrl =
            location.protocol === 'https:'
              ? isH264 || isH265
                ? isH264
                  ? object.rtcs
                  : object.https_flv
                : object.rtcs
              : isH264 || isH265
                ? isH264
                  ? object.rtc
                  : object.flv
                : object.rtc
          if (info.length > 1) {
            let object1 = JSON.parse(info[1].urlObject)
            item.mainUrl =
              location.protocol === 'https:'
                ? isH264 || isH265
                  ? isH264
                    ? object1.rtcs
                    : object1.https_flv
                  : object1.rtcs
                : isH264 || isH265
                  ? isH264
                    ? object1.rtc
                    : object1.flv
                  : object1.rtc
          } else {
            item.mainUrl = item.auxiliaryUrl
          }
        }
      }
      console.log('item', item)
    },
    clearTreeSelected() {
      this.$store.commit('updateSelectedTreeData', {})
      this.$store.commit('updateSelectedMonitor', {})
      // this.selectedTree = []
    },
    clickToolBar(value) {
      if (value === 1) {
        this.$refs.toolbar.one()
      }
    },
    // 开始轮询
    startPolling(duration, interval) {
      // 时间到了停止轮询
      setTimeout(() => {
        this.endPolling()
      }, duration * 1000 * 60)
      // 清空boxList 只留boxId
      this.$store.commit(
        'updateBoxList',
        this.boxList.map((item) => ({ boxId: item.boxId }))
      )

      let viewCount = this.active

      console.log('viewCount', viewCount)
      // 页面足够不需要切换页面
      if (this.cameraList.length <= viewCount) {
        this.$nextTick(() => {
          // 设置当前选中设备
          this.boxList.forEach((item, index) => {
            setTimeout(() => {
              if (this.cameraList[index]) {
                this.equipmentInfo = this.cameraList[index]
                this.$store.commit('updateSelectedMonitor', item)
                this.$store.commit(
                  'updateSelectedTreeData',
                  this.cameraList[index]
                )
                this.$refs.video.setShowBorder(true)
                // 判断设备是否停用
                if (
                  this.onlinePresenceList.find(
                    (item) => item.id === this.selectedTreeData.id
                  ).onlinePresence === '1'
                ) {
                  // 获取流
                  this.getPlayUrl(this.selectedMonitor)
                } else {
                  this.$message.warning(
                    this.selectedTreeData.cameraName + '设备已离线！'
                  )
                  this.clearTreeSelected()
                }
              }
            }, index * 600)
          })
        })
      } else {
        let cameraIndex = 0
        this.pollingInterval = setInterval(() => {
          if (cameraIndex >= this.cameraList.length) {
            cameraIndex = 0
          }
          this.$nextTick(() => {
            // 设置当前选中设备
            this.boxList.slice(0, viewCount).forEach((item, index) => {
              setTimeout(() => {
                if (cameraIndex < this.cameraList.length) {
                  this.equipmentInfo = this.cameraList[cameraIndex]
                  this.$store.commit('updateSelectedMonitor', item)
                  this.$store.commit(
                    'updateSelectedTreeData',
                    this.cameraList[cameraIndex]
                  )
                  this.$refs.video.setShowBorder(true)
                  cameraIndex++
                  // 判断设备是否停用
                  if (
                    this.onlinePresenceList.find(
                      (item) => item.id === this.selectedTreeData.id
                    ).onlinePresence === '1'
                  ) {
                    // 获取流
                    this.getPlayUrl(this.selectedMonitor)
                  } else {
                    this.$message.warning(
                      this.selectedTreeData.cameraName + '设备已离线！'
                    )
                    this.clearTreeSelected()
                  }
                }
              }, index * 600)
            })
          })
        }, interval * 1000)
      }
    },
    endPolling() {
      clearInterval(this.pollingInterval)
      this.pollingInterval = null
      this.$refs.toolbar.changePollingStatus()
    },
    save() {
      savePreview({
        viewName: this.viewName,
        viewPreviewJson: {
          active: this.$store.getters.active,
          boxList: this.$store.getters.boxList
        },
        userId: this.$store.getters.userId
      }).then((res) => {
        this.viewName = ''
        this.getViewOptions()
        this.openSave = false
        this.$message.success('保存成功！')
      })
    },
    beforeShare() {
      this.openShare = true
      this.loading = true
      listUser().then((response) => {
        this.userList = response.rows
        // this.total = response.total;
        this.loading = false
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    share() {
      sharePreview({ userId: this.ids, viewId: this.viewId }).then((res) => {
        this.ids = []
        this.openShare = false
        this.$message.success('分享成功！')
      })
    },
    // seize() {
    //   seize({ userId: this.$store.getters.userId, equId: this.equipmentInfo.id, seizeTime: this.seizeTime }).then(res => {
    //     this.$message.success('抢占成功！')
    //   })
    // },
    fisheye() {
      this.boxList.forEach((item) => {
        if (item.cameraId === this.equipmentInfo.id) {
          this.$store.commit('updateSelectedMonitor', item)
          if (this.fishEyeType === '鱼眼') {
            this.$nextTick(() => {
              // // 获取流
              // fishEyeChange({ id: this.equipmentInfo.id, mode: "全景" }).then(
              //   (res) => {
              //     if (res.data !== "" && res.data.success) {
              //       if (
              //         res.data.data.tracks[0].codec_id_name === "H264" ||
              //         res.data.data.tracks[0].codec_id_name !== "H265"
              //       ) {
              //         item.url =
              //           location.protocol === "https:"
              //             ? res.data.data.rtcs
              //             : res.data.data.rtc;
              //       } else {
              //         item.url =
              //           location.protocol === "https:"
              //             ? res.data.data.https_flv
              //             : res.data.data.flv;
              //       }
              //       this.$message.success("切换成功！");
              //       console.log(this.boxList);
              //     } else {
              //       this.$message.warning(
              //         this.selectedTreeData.cameraName + "获取播放链接失败！"
              //       );
              //     }
              //   }
              // );
              // 找所有符合条件的流
              let info = this.equipmentInfo.streamProxyList.filter((item) =>
                item.app.includes('全景')
              )
              // 找不到的后续操作
              if (info.length === 0) {
                let object = JSON.parse(
                  this.equipmentInfo.streamProxyList[0].urlObject
                )
                const isH264 = object.codec_id_name === 'H264'
                const isH265 = object.codec_id_name === 'H265'

                item.mainUrl =
                  location.protocol === 'https:'
                    ? isH264 || isH265
                      ? isH264
                        ? object.rtcs
                        : object.https_flv
                      : object.rtcs
                    : isH264 || isH265
                      ? isH264
                        ? object.rtc
                        : object.flv
                      : object.rtc
                item.auxiliaryUrl = item.mainUrl
              } else {
                let object = JSON.parse(info[0].urlObject)

                const isH264 = object.codec_id_name === 'H264'
                const isH265 = object.codec_id_name === 'H265'
                if (info[0].typeOfBitstream === '0') {
                  item.mainUrl =
                    location.protocol === 'https:'
                      ? isH264 || isH265
                        ? isH264
                          ? object.rtcs
                          : object.https_flv
                        : object.rtcs
                      : isH264 || isH265
                        ? isH264
                          ? object.rtc
                          : object.flv
                        : object.rtc
                  if (info.length > 1) {
                    let object1 = JSON.parse(info[1].urlObject)
                    item.auxiliaryUrl =
                      location.protocol === 'https:'
                        ? isH264 || isH265
                          ? isH264
                            ? object1.rtcs
                            : object1.https_flv
                          : object1.rtcs
                        : isH264 || isH265
                          ? isH264
                            ? object1.rtc
                            : object1.flv
                          : object1.rtc
                  } else {
                    item.auxiliaryUrl = item.mainUrl
                  }
                } else {
                  item.auxiliaryUrl =
                    location.protocol === 'https:'
                      ? isH264 || isH265
                        ? isH264
                          ? object1.rtcs
                          : object1.https_flv
                        : object1.rtcs
                      : isH264 || isH265
                        ? isH264
                          ? object1.rtc
                          : object1.flv
                        : object1.rtc
                  if (info.length > 1) {
                    let object1 = JSON.parse(info[1].urlObject)
                    item.mainUrl =
                      location.protocol === 'https:'
                        ? isH264 || isH265
                          ? isH264
                            ? object1.rtcs
                            : object1.https_flv
                          : object1.rtcs
                        : isH264 || isH265
                          ? isH264
                            ? object1.rtc
                            : object1.flv
                          : object1.rtc
                  } else {
                    item.mainUrl = item.auxiliaryUrl
                  }
                }
              }
              this.$message.success('切换成功')
              this.fishEyeType = '全景'
            })
          } else {
            this.$nextTick(() => {
              // // 获取流
              // fishEyeChange({ id: this.equipmentInfo.id, mode: "鱼眼" }).then(
              //   (res) => {
              //     if (res.data !== "" && res.data.success) {
              //       if (
              //         res.data.data.tracks[0].codec_id_name === "H264" ||
              //         res.data.data.tracks[0].codec_id_name !== "H265"
              //       ) {
              //         item.url =
              //           location.protocol === "https:"
              //             ? res.data.data.rtcs
              //             : res.data.data.rtc;
              //       } else {
              //         item.url =
              //           location.protocol === "https:"
              //             ? res.data.data.https_flv
              //             : res.data.data.flv;
              //       }
              //       this.$message.success("切换成功！");
              //       console.log(this.boxList);
              //     } else {
              //       this.$message.warning(
              //         this.selectedTreeData.cameraName + "获取播放链接失败！"
              //       );
              //     }
              //   }
              // );
              // 找所有符合条件的流
              let info = this.equipmentInfo.streamProxyList.filter((item) =>
                item.app.includes('鱼眼')
              )
              // 找不到的后续操作
              if (info.length === 0) {
                let object = JSON.parse(
                  this.equipmentInfo.streamProxyList[0].urlObject
                )
                const isH264 = object.codec_id_name === 'H264'
                const isH265 = object.codec_id_name === 'H265'

                item.mainUrl =
                  location.protocol === 'https:'
                    ? isH264 || isH265
                      ? isH264
                        ? object.rtcs
                        : object.https_flv
                      : object.rtcs
                    : isH264 || isH265
                      ? isH264
                        ? object.rtc
                        : object.flv
                      : object.rtc
                item.auxiliaryUrl = item.mainUrl
              } else {
                let object = JSON.parse(info[0].urlObject)

                const isH264 = object.codec_id_name === 'H264'
                const isH265 = object.codec_id_name === 'H265'
                if (info[0].typeOfBitstream === '0') {
                  item.mainUrl =
                    location.protocol === 'https:'
                      ? isH264 || isH265
                        ? isH264
                          ? object.rtcs
                          : object.https_flv
                        : object.rtcs
                      : isH264 || isH265
                        ? isH264
                          ? object.rtc
                          : object.flv
                        : object.rtc
                  if (info.length > 1) {
                    let object1 = JSON.parse(info[1].urlObject)
                    item.auxiliaryUrl =
                      location.protocol === 'https:'
                        ? isH264 || isH265
                          ? isH264
                            ? object1.rtcs
                            : object1.https_flv
                          : object1.rtcs
                        : isH264 || isH265
                          ? isH264
                            ? object1.rtc
                            : object1.flv
                          : object1.rtc
                  } else {
                    item.auxiliaryUrl = item.mainUrl
                  }
                } else {
                  item.auxiliaryUrl =
                    location.protocol === 'https:'
                      ? isH264 || isH265
                        ? isH264
                          ? object1.rtcs
                          : object1.https_flv
                        : object1.rtcs
                      : isH264 || isH265
                        ? isH264
                          ? object1.rtc
                          : object1.flv
                        : object1.rtc
                  if (info.length > 1) {
                    let object1 = JSON.parse(info[1].urlObject)
                    item.mainUrl =
                      location.protocol === 'https:'
                        ? isH264 || isH265
                          ? isH264
                            ? object1.rtcs
                            : object1.https_flv
                          : object1.rtcs
                        : isH264 || isH265
                          ? isH264
                            ? object1.rtc
                            : object1.flv
                          : object1.rtc
                  } else {
                    item.mainUrl = item.auxiliaryUrl
                  }
                }
              }
              this.$message.success('切换成功')
              this.fishEyeType = '鱼眼'
            })
          }
        }
      })
    },
    // 灯光开关
    handleOpenLight() {
      let text = this.equipmentInfo.lamplightStatus === '1' ? '启用' : '停用'
      this.$modal
        .confirm('确认要"' + text + '"吗？')
        .then(() => {
          if (text === '启用') {
            return power({
              deviceId: this.equipmentInfo.lamplightId,
              powerOn: true
            })
          } else {
            return power({
              deviceId: this.equipmentInfo.lamplightId,
              powerOn: false
            })
          }
        })
        .then(() => {
          this.$modal.msgSuccess(text + '成功')
          lamplightInfo({ id: this.equipmentInfo.lamplightEquipment }).then(
            (res) => {
              if (res.total === 0) {
                return
              } else {
                this.equipmentInfo.lamplightId = res.data.id
                this.equipmentInfo.lamplightOnline = res.data.lamplightOnline
                this.equipmentInfo.lamplightStatus = this.equipmentInfo.lamplightStatus === '1' ? '1' : '0'
                this.newEquipmentInfo.lightSwitch = !this.newEquipmentInfo.lightSwitch
                this.equipmentInfo.light = Number(res.data.light) * 20
                this.newEquipmentInfo.overallSwitch = res.data.overallSwitch
                this.newEquipmentInfo.moduleSwitch = res.data.moduleSwitch
                this.equipmentInfo.isGeneralControl = res.data.isGeneralControl
                console.log(this.newEquipmentInfo.lightSwitch)
                console.log(this.equipmentInfo.lamplightStatus)
              }
            }
          )
        })
        .catch(() => {
          this.equipmentInfo.lamplightStatus =
            this.equipmentInfo.lamplightStatus === '0' ? '1' : '0'
        })
    },
    changeLight() {
      if (this.equipmentInfo.lamplightStatus != '1') {
        this.$modal.msgError('请先开启灯光')
        return
      }
      this.fullscreenLoading = true
      dim({
        deviceId: this.equipmentInfo.lamplightId,
        dimLevel: this.equipmentInfo.light / 20
      }).then(() => {
        this.fullscreenLoading = false
        this.$modal.msgSuccess('调光成功')
      }).catch(() => {
        this.fullscreenLoading = false
      })

    },
    handleMove(val) {
      switch (val) {
        case 'up':
          this.upIcon=upImg1
          shotUp({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'upEnter':
          this.upIcon=upImg1
          break
        case 'left':
          this.leftIcon=leftImg1
          shotLeft({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'leftEnter':
          this.leftIcon=leftImg1
          break
        case 'right':
          this.rightIcon=rightImg1
          shotRight({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'rightEnter':
          this.rightIcon=rightImg1
          break
        case 'down':
          this.downIcon=downImg1
          shotDown({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'downEnter':
          this.downIcon=downImg1
          break
        case 'leftUp':
          this.leftUpIcon=leftUpImg1
          leftUp({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'leftUpEnter':
          this.leftUpIcon=leftUpImg1
          break
        case 'rightUp':
          this.rightUpIcon=rightUpImg1
          rightUp({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'rightUpEnter':
          this.rightUpIcon=rightUpImg1
          break
        case 'leftDown':
          this.leftDownIcon=leftDownImg1
          leftDown({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'leftDownEnter':
          this.leftDownIcon=leftDownImg1
          break
        case 'rightDown':
          this.rightDownIcon=rightDownImg1
          rightDown({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'rightDownEnter':
          this.rightDownIcon=rightDownImg1
          break
        case 'stop':
          this.upIcon=upImg
          this.leftUpIcon=leftUpImg
          this.rightUpIcon=rightUpImg
          this.leftIcon=leftImg
          this.rightIcon=rightImg
          this.leftDownIcon=leftDownImg
          this.downIcon=downImg
          this.rightDownIcon=rightDownImg
          stopMove({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'leave':
          this.upIcon=upImg
          this.leftUpIcon=leftUpImg
          this.rightUpIcon=rightUpImg
          this.leftIcon=leftImg
          this.rightIcon=rightImg
          this.leftDownIcon=leftDownImg
          this.downIcon=downImg
          this.rightDownIcon=rightDownImg
          break
      }
    },
    addSpeed() {
      const speed = (this.speed * 10 + 1) / 10
      if (speed > 1) {
        this.speed = 1
      } else {
        this.speed = speed
      }
    },
    delSpeed() {
      const speed = (this.speed * 10 - 1) / 10
      if (speed < 0.1) {
        this.speed = 0.1
      } else {
        this.speed = speed
      }
    },
    handleFocusing(val) {
      switch (val) {
        case 'up':
          this.double=doubleImg1
          upFocalLength({ id: this.equipmentInfo.id, speed: this.speed }).then(
            (res) => {
            }
          )
          break
        case 'upEnter':
          this.double=doubleImg1
          break
        case 'down':
          this.subtract=subtractImg1
          downFocalLength({
            id: this.equipmentInfo.id,
            speed: this.speed
          }).then((res) => {
          })
          break
        case 'downEnter':
          this.subtract=subtractImg1
          break
        case 'stop':
          this.double=doubleImg
          this.subtract=subtractImg
          this.double1=doubleImg
          this.subtract1=subtractImg
          stopMove({ id: this.equipmentInfo.id }).then((res) => {
          })
          break
        case 'focusIn':
          this.subtract1=subtractImg1
          focusIn({ id: this.equipmentInfo.id, speed: this.speed }).then((res) => {
          })
          break
        case 'focusInEnter':
          this.subtract1=subtractImg1
          break
        case 'focusOut':
          this.double1=doubleImg1
          focusOut({ id: this.equipmentInfo.id, speed: this.speed }).then((res) => {
          })
          break
        case 'focusOutEnter':
          this.double1=doubleImg1
          break
        case 'leave':
          this.double=doubleImg
          this.subtract=subtractImg
          this.double1=doubleImg
          this.subtract1=subtractImg
          break
      }
    },
    initSSE() {
      const url = `${configPage.httpServe}/sse/stream`
      this.eventSource = new EventSource(url)
      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data)
        if (Array.isArray(data)) {
          console.log('jsonData is an array.')
          console.log(data)
          this.cameraList = data
          const children = data.map((item) => ({
            ...item,
            isLeaf: true,
            label: item.cameraName,
            key: item.id
          }))
          // 遍历onlinePresenceList
          console.log(this.onlinePresenceList)
          this.$nextTick(() => {
            this.onlinePresenceList.forEach((item) => {
              if (item.onlinePresence === '0') {
                let node = children.find((child) => child.id === item.id)
                if (node.onlinePresence === '1') {
                  // 遍历boxList
                  this.boxList.forEach((box) => {
                    if (box.cameraId === item.id) {
                      this.$store.commit('updateSelectedMonitor', box)
                      this.$refs.video.setShowBorder(true)
                      let boxTemp = JSON.parse(JSON.stringify(box))
                      this.$refs.video.close(box.boxId)
                      console.log(this.boxList)
                      setTimeout(() => {
                        this.boxList[box.boxId - 1] = boxTemp
                        console.log(this.boxList)
                        this.$store.commit('updateSelectedMonitor', box)
                        this.$refs.video.setShowBorder(true)
                        this.$store.commit('updateBoxList', this.boxList)
                      }, 1000)
                    }
                  })
                }
              }
            })
            this.onlinePresenceList = children
          })

        } else if (typeof data === 'object' && data !== null) {
          console.log(this.userId === Number(data.userId))
          if (this.userId === Number(data.userId)) {
            this.$message({
              type: 'error',
              message:
                '名称为：' +
                data.name +
                '的云台已被' +
                data.newUserId +
                '抢占!'
            })
          }
        } else {
          console.log('jsonData is neither an array nor an object.')
        }
      }
      // 监听错误事件
      this.eventSource.onerror = (err) => {
        console.error('SSE error:', err)
        this.handleReconnect(err)
      }

      // 监听关闭事件
      this.eventSource.onclose = () => {
        console.error('SSE connection closed.')
        this.handleReconnect()
      }
    },
    closeSSE() {
      if (this.eventSource) {
        this.eventSource.close()
        this.eventSource = null // Clear the reference to prevent accidental reuse
      }
    },
    handleReconnect(error) {
      // 清除旧的EventSource实例
      if (this.eventSource) {
        this.eventSource.close()
      }

      // 重连间隔时间（毫秒）
      const reconnectInterval = 5000

      // 重连逻辑
      setTimeout(() => {
        console.log('Attempting to reconnect...')
        this.initSSE()
      }, reconnectInterval)
    },

  },

  beforeRouteLeave(to, from, next) {
    // 检查是否在录像
    if (this.boxList.some((item) => item.recording === true)) {
      this.$message.warning('正在录像中，请先结束录像！')
      // const answer = window.confirm('你确定要离开这个页面吗？你可能有未保存的更改。');
      //取消导航
      next(false)
    } else {
      // 如果没有，直接继续导航
      // this.stopPollingOnlinePresence()
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$base-sidebar-width});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px);
  }

  .sidebarHide .fixed-header {
    width: 100%;
  }

  .mobile .fixed-header {
    width: 100%;
  }
  .app-container {
    min-height: 100%;
    padding: 5px 5px;
    //background: #1a1a2e;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
  }

  ::v-deep .el-tree {
    background-color: transparent;
  }

  ::v-deep .el-tree-node__content {
    margin: 3px;
    background-color: #030c18;
    color: #ffffff;
    height: 40px;
  }
  ::v-deep .el-tree-node__children{
    margin: 3px;
  }
  ::v-deep .el-tree__empty-block {
    background-color: #1a2c43;
    color: #ffffff;
  }

  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background-image: linear-gradient(to right, #acb3bb, #304156 100%);
    font-weight: bold;
  }

  ::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }

  ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: transparent;
  }

  ::v-deep .el-carousel__container {
    height: 100%;
  }

  ::v-deep .el-carousel__arrow {
    display: none !important;
  }

  ::v-deep .el-carousel__indicator {
    display: none !important;
  }

  ::v-deep .el-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #1a2c43;
  }

  ::v-deep .el-tabs__header {
    margin: 0 0 0px;
    //background-color: #032046;
  }
  .head-container{
    margin-bottom: 5px;
    .el-tabs{
      background: none;
    }
    background-image: url("../assets/images/kuang-2.png") !important;
    background-repeat: no-repeat !important;
    background-size: 220px 100% !important;
  }
  ::v-deep .head-container .el-tabs__content {
    height: 40.5vh;
    flex-grow: 1;
    //background-color: #030c18;
    overflow-y: auto;

    /* 滚动槽 */

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }
  ::v-deep .tool-tab .el-tabs__content {
    height: 30vh;
    flex-grow: 1;
    //background-color: #030c18;
    overflow-y: auto;

    /* 滚动槽 */

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }

  ::v-deep .el-tabs__item {
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  ::v-deep .tool-tab {
    .el-tabs{
      background: none;
    }
    background-image: url("../assets/images/kuang-2.png") !important;
    background-repeat: no-repeat !important;
    background-size: 220px 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    //margin-top:20%;
    ::v-deep .el-tabs__content {
      flex: 1 !important;
    }
  }

  ::v-deep .el-tab-pane{
    margin: 3px;
  }
  ::v-deep .el-slider__button {
    border: none;
  }

  .el-button {
    background-color: #6e7a89 !important;
    color: #ffffff;
  }

  .tree-card {
    display: flex;
    flex-direction: column;
    border: none;
    min-height: calc(100vh - 84px);
    padding: 0px 0px;
    background-color: transparent;
  }

  ::v-deep .el-input__inner {
    border: none;
    //background-color: #6e7a89;
    background-color: #0d1a2b;
    color: #ffffff;
  }

  ::v-deep .el-switch__label {
    color: #ffffff;
  }

  .fast-button {
    border-radius: 5px;
    border: 2px solid #043f92;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #032554;
    color: #ffffff;
    font-size: 14px;
    height: 35px;
    width: 45%;
    min-width: 100px;
    margin: 15px 0px 0px 0px;
  }

  .operate-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    padding: 10px;
    background: transparent;
    position: relative;
  }

  .move-btn {
    background-size: 225px;
    background-image: url("../assets/images/ptz-bg.png") ;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px 5px 5px 3px;
    width: 220px;
    height: 210px;
    //background-color: #6e7a89;
    //color: #ffffff;
    //border-radius: 65px;
    //box-shadow: 0px 0px 2px 4px #a7a6a6;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .btn {
    //margin: 10px;
    width: 30px;
    height: 30px;
  }

  ::v-deep .el-icon-arrow-up {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .compose-btn {
    margin-top: 10px;
    width: 100%;
    //display: flex;
    //flex-direction: column;
    //align-items: center;
    //justify-content: space-around;
  }

  .btn2 {
    height: 23px;
    width: 90%;
    margin-top: 8px;
    padding: 6px 4px;
    border-radius: 15px;
    background: #6e7a89;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  ///* 滚动槽 */
  //&::-webkit-scrollbar-track {
  //  background-color: transparent;
  //}

  .device-info {
    margin-top: 20px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    width: 80px;
  }

  .status-light {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .status-light.active {
    background-color: green;
  }

  .status-light.inactive {
    background-color: grey;
  }

  .info-item span {
    color: white;
  }
  .btn1{
    width: 60px;
    height: 35px;
  }
  .div-class{
    width: 45px;
    height: 45px;
    float: left;
  }
  .span-class{
    background-color: #031e43;
    width: 40px;
    height: 40px;
    border: 1px solid black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center
  }
  .span-class1{
    background-color: #031e43;
    width: 40px;
    height: 40px;
    border: 1px solid black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
  }
  ::v-deep .el-dialog .el-dialog__header{
    background-color: #032046 !important;
  }
  ::v-deep .el-dialog .el-dialog__body{
    background-color: #032046 !important;
  }
  ::v-deep .el-dialog .el-dialog__footer{
    background-color: #032046 !important;
  }

  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon{
    padding: 3px !important;
  }
</style>