ninglu-frontt/src/pages/monitor-dgp/monitorSystem/Monitor.vue

<template>
  <div class="monitor-container" style="cursor: default">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>监控系统</el-breadcrumb-item>
      <el-breadcrumb-item>监控</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="basicsbox_text">
      <el-button size="mini" type="primary" @click="addEquip()" class="addequip"
        >添加设备</el-button
      >
      <el-button size="mini" @click="bindingSIM()" class="addequipA">绑定SIM卡</el-button>
    </div>
    <div class="monitor_hint" v-if="longtimetf">
      <div class="monitor_hint_text">
        <img src="../../../../static/images/monitor/laba.png" alt />
        <p>您已持续观看监控很久了，长时间观看监控会耗尽物联网卡流量，请您注意</p>
      </div>
      <i class="el-icon-close" @click="guanbilong"></i>
    </div>
    <div class="monitor-wrap">
      <div class="video-box">
        <div class="video-container" ref="videoContainerRef">
          <!-- 插件播放 -->
          <div class="x" v-if="playType == 1" v-html="html" style="width: 100%; height: 100%"></div>
          <!-- 非插件播放 ，默认非插件播放-->
          <div class="v" style="width: 100%; height: 100%" v-if="playType == 0">
            <div
              :class="{
                videoItem: true,
                a1: divNum == 1,
                a4: divNum == 4,
                a9: divNum == 9,
                selected: count == selected
              }"
              v-for="count in divNum"
              :key="divNum + count"
              @click.capture="selectVideo(count)"
            >
              <div style="width: 100%; height: 100%" :id="'my-video' + count"></div>
            </div>
          </div>
        </div>
        <div v-show="false" class="split-screen">
          <div>
            <span class="sp sp01" @click="splitView(1)"></span>
            <span class="sp sp02" @click="splitView(4)"></span>
            <span class="sp sp03" @click="splitView(9)"></span>
          </div>
          <el-radio-group
            v-model="videoType"
            size="mini"
            @input="changeVideoType"
            v-if="isShowType"
          >
            <el-radio-button label="sd">标清</el-radio-button>
            <el-radio-button label="hd">高清</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="nav-box">
        <div class="view-box">
          <div class="search">
            <el-autocomplete
              style="width: 262px"
              size="mini"
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入设备ID"
              @select="handleSelect"
              @input="axiosList"
            >
            </el-autocomplete>
            <el-button style="margin-left: 8px" @click="axiosList" type="primary" size="mini"
              >查询</el-button
            >
          </div>
          <ul class="viewLists">
            <li
              v-for="(item, index) in Idlist"
              :key="index"
              :class="{ active: activeIndex == index }"
              @click="selectEquip(item.device_id, item.jktype, index)"
            >
              <span :class="['status', item.status == 1 ? 'onLine' : 'outLine']">{{
                item.status == 1 ? '在线' : '离线'
              }}</span>
              <el-tooltip class="item" effect="dark">
                <div slot="content">
                  设备名称：{{ item.device_name }}<br /><br />设备id：{{ item.device_id }}
                </div>
                <div class="titleBox">
                  <span class="device-name" :title="item.device_name">{{ item | formatName }}</span>
                  <span class="device-id">ID:{{ item.device_id }}</span>
                </div>
              </el-tooltip>

              <!--查看图片 查看回放原来逻辑 -->
              <div class="viewPhoto" v-if="false">
                <i
                  v-if="$QueryPermission(188)"
                  class="el-icon-picture"
                  @click.stop="viewPhoto(item.device_id)"
                ></i>
                <i
                  class="el-icon-video-camera-solid"
                  @click.stop="toplay(item.device_id, item.type_id, item.token, item.gb)"
                  v-if="$QueryPermission(236) && item.camera_playback == 1"
                ></i>
              </div>
              <div class="more">
                <el-popover placement="top" popper-class="hoverpopover" :width="10" trigger="click">
                  <div>
                    <p class="cursor" @click="reName(item.device_id, item.device_name)">信息修改</p>

                    <p class="cursor" style="color: #ff5951">删除设备</p>
                  </div>

                  <span slot="reference" class="yficonfont icon-gengduo"></span>
                </el-popover>
              </div>

              <!--  -->
              <!-- <span @click.stop="viewPhoto(item.device_id)" class="viewPhoto"
              >查看图片</span
            >-->
            </li>
          </ul>
          <div class="splitPage" onselectstart="return false">
            <el-pagination
              :small="true"
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currPage"
              :page-size="8"
              :pager-count="5"
              layout="prev, pager, next"
              :total="totalPage"
            >
            </el-pagination>
          </div>
        </div>
        <div class="view-box" v-show="true">
          <div class="camera-control">
            <span
              class="zoom-in el-icon-minus"
              @mousedown="configCamera('move', 9)"
              @mouseup="stopConfigCamera()"
            ></span>
            <div class="control-ring">
              <div
                @mousedown="configCamera('move', 0, 'up')"
                @mouseup="stopConfigCamera()"
                class="div-opt upCtr el-icon-arrow-up"
              ></div>
              <div
                @mousedown="configCamera('move', 1, 'down')"
                @mouseup="stopConfigCamera()"
                class="div-opt downCtr el-icon-arrow-down"
              ></div>
              <div
                @mousedown="configCamera('move', 2, 'left')"
                @mouseup="stopConfigCamera()"
                class="div-opt leftCtr el-icon-arrow-left"
              ></div>
              <div
                @mousedown="configCamera('move', 3, 'right')"
                @mouseup="stopConfigCamera()"
                class="div-opt rightCtr el-icon-arrow-right"
              ></div>
              <div class="outer-ring">
                <div class="quarter-sector" :class="'opt-active-' + optActive"></div>
              </div>
              <div class="inner-circle">
                <i @click="photograph()" class="el-icon-camera-solid camera-icon"></i>
              </div>
            </div>
            <span
              class="zoom-out el-icon-plus"
              @mousedown="configCamera('move', 8)"
              @mouseup="stopConfigCamera()"
            ></span>
          </div>

          <div class="btnBox">
            <el-button size="small" @click.stop="viewPhoto()">查看图片</el-button>
            <el-button size="small" @click.stop="toplay()">查看回放</el-button>
            <!-- <div class="zoom">

              <span
                class="addCtr"
                @mousedown="configCamera('move', 8)"
                @mouseup="stopConfigCamera()"
              ></span>
              <span
                class="reduceCtr"
                @mousedown="configCamera('move', 9)"
                @mouseup="stopConfigCamera()"
              ></span>
            </div> -->
            <!-- <div
              v-show="jktype == 1"
              class="playBack"
              @click="playBackDialogVisible = true"
              id="playBack"
            ></div> -->

            <!-- <div @click="addEquip()" class="addequip"></div>
            <div @click="bindingSIM()" class="addequipA"></div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 拍照 -->
    <el-dialog title="手动下载" :visible.sync="takePhotoDialogVisible" width="30%">
      <el-input type="textarea" id="picUrl" v-model="picUrl"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="takePhotoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="copyPicUrl">复制</el-button>
      </span>
    </el-dialog>
    <!-- 查看回放 -->
    <el-dialog
      title="查看回放"
      :visible.sync="playBackDialogVisible"
      width="600px"
      @close="palyBackClose"
    >
      <el-form ref="backFormRef" :model="backForm" :rules="backFormRules" label-width="80px">
        <el-form-item label="时间范围" prop="time">
          <el-date-picker
            v-model="backForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="通道" prop="aisle">
          <el-select
            style="width: 400px"
            v-model="backForm.aisle"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Number(jktype)"
              :key="item"
              :label="'通道' + item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-button type="default" @click="playBackDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="playBackSubmit">确定</el-button>
        </el-form-item>
      </el-form>
      <div id="videoBack">
        <div id="playWind"></div>
      </div>
    </el-dialog>

    <!-- 测试添加设备 -->
    <el-dialog
      title="添加设备"
      :visible.sync="addEquipment"
      width="575px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 测试 -->
      <div class="facility_box">
        <ul
          style="
            margin: -30px 0 0 -20px;
            width: 545px;
            display: flex;
            justify-content: space-around;
          "
        >
          <li
            v-for="(item, index) in tltArray"
            :key="index"
            :class="stepIndex == index ? 'addClass' : ''"
            @click="next(index)"
            style="padding: 10px 0 10px 0; width: 50%; text-align: center"
          >
            {{ item.name }}
          </li>
        </ul>

        <!-- 第一步 -->
        <div v-if="stepIndex == 0" class="facility_boxOne">
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 136px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> 账号：
            </span>
            <el-input placeholder="请输入账号" v-model="FluoriteClouduser" clearable></el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 136px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> 业务员名称：
            </span>
            <el-input
              placeholder="请输入账号所相关的业务员名称"
              v-model="salesman"
              clearable
            ></el-input>
          </div>
          <!-- <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 136px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> token：
            </span>
            <el-input placeholder="请输入token" v-model="tokenData" clearable></el-input>
          </div> -->
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 136px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> appkey：
            </span>
            <el-input placeholder="请输入秘钥" v-model="secretKey" clearable></el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 136px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> appSecret：
            </span>
            <el-input placeholder="请输入appSecret" v-model="furtiveData" clearable></el-input>
          </div>
          <div style="display: flex; width: 80%; margin: 15px auto">
            <span style="width: 100px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
              <span style="color: red">*</span> 设备厂家：
            </span>
            <el-radio v-model="radio" label="0" style="margin-top: 10px">海康</el-radio>
            <el-radio v-model="radio" label="1" style="margin-top: 10px">大华</el-radio>
          </div>
          <span style="margin: 0 0 0 310px" slot="footer" class="dialog-footer">
            <el-button @click="addEquipment = false">取 消</el-button>
            <el-button type="primary" @click="FluoriteClouduserAdd()">确 定</el-button>
          </span>
        </div>

        <!-- 第二步 -->
        <el-form
          label-width="150px"
          class="facility_boxTwo"
          ref="addDeviceRef"
          v-else-if="stepIndex == 1"
          :model="addDevice"
          :rules="addDeviceRules"
        >
          <el-form-item label="萤石云账号id" prop="FluoriteClouduserID">
            <el-select
              v-model="addDevice.FluoriteClouduserID"
              placeholder="请选择萤石云账号id"
              clearable
            >
              <el-option
                v-for="item in userNameID"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备id" prop="equipmentID">
            <el-input
              placeholder="请输入设备id"
              v-model="addDevice.equipmentID"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="国标id">
            <el-input placeholder="请输入国标id" v-model="addDevice.gb" clearable></el-input>
          </el-form-item> -->
          <el-form-item v-if="user_tag == 1" label="销售" prop="sale_uid">
            <el-select v-model="addDevice.sale_uid" placeholder="请选择销售" clearable>
              <el-option
                v-for="item in salesmanID"
                :key="item.uid"
                :label="item.username"
                :value="item.uid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="user_tag == 1" label="任务单号" prop="task_num">
            <el-input
              placeholder="请输入任务单号"
              v-model="addDevice.task_num"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="sim卡号" prop="iccid">
            <el-input placeholder="请输入sim卡号" v-model="addDevice.iccid" clearable></el-input>
          </el-form-item>
          <el-form-item label="通道" prop="equipmentNumber">
            <el-select v-model="addDevice.equipmentNumber" placeholder="请选择设备通道号" clearable>
              <el-option
                v-for="item in equipmentChannel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回放" prop="playback">
            <el-switch
              v-model="addDevice.playback"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="支持回放功能"
              inactive-text="不支持回放功能"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="addEquipment = false">取 消</el-button>
            <el-button type="primary" @click="addConfirm()">确 定</el-button>
          </el-form-item>
        </el-form>
        <!-- <div  class="facility_boxTwo"> -->
        <!-- <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
            >
              <span style="color: red">*</span> 萤石云账号id
            </span>
            <el-select
              style="width: 412px"
              v-model="FluoriteClouduserID"
              placeholder="请选择萤石云账号id"
              clearable
            >
              <el-option
                v-for="item in userNameID"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div> -->
        <!-- <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
            >
              <span style="color: red">*</span> 设备id
            </span>
            <el-input placeholder="请输入设备id" v-model="equipmentID" clearable></el-input>
          </div> -->
        <!-- <div style="display: flex; width: 80%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 35px;
                margin: 0 15px 0 0;
              "
            >
              <span style="color: red">*</span> 通道
            </span>
            <el-select
              style="width: 412px"
              v-model="equipmentNumber"
              placeholder="请选择设备通道号"
              clearable
            >
              <el-option
                v-for="item in equipmentChannel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div> -->
        <!-- <div style="display: flex; width: 91%; margin: 15px auto">
            <span
              style="
                width: 130px;
                text-align: right;
                line-height: 24px;
                margin: 0 15px 0 0;
              "
            >
              <span style="color: red">*</span> 回放
            </span>
            <el-switch
              style="display: block"
              v-model="playback"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="支持回放功能"
              inactive-text="不支持回放功能"
            ></el-switch>
          </div> -->
        <!-- <span style="margin: 0 0 0 310px" slot="footer" class="dialog-footer">
            <el-button @click="addEquipment = false">取 消</el-button>
            <el-button type="primary" @click="addConfirm()">确 定</el-button>
          </span>
        </div> -->
      </div>
      <!-- 测试 -->
    </el-dialog>

    <!-- 绑定SIM弹框 -->
    <el-dialog title="绑定SIM" :visible.sync="addEquipmentA" width="30%">
      <div v-loading="simloading">
        <!-- <div style="display: flex; width: 80%; margin: 15px auto">
          <span
            style="
              width: 75px;
              text-align: right;
              line-height: 35px;
              margin: 0 15px 0 0;
            "
            ><span style="color: red">*</span>搜索id
          </span>
          <el-select
            v-model="query"
            filterable
            remote
            placeholder="请输入关键词"
            :remote-method="simsearch"
            :loading="false"
            @change="simidchangae"
            style="width: 412px"
          >
            <el-option
              v-for="item in equipmentIDlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>-->
        <!-- <div style="display: flex; width: 80%; margin: 15px auto">
          <span
            style="
              width: 75px;
              text-align: right;
              line-height: 35px;
              margin: 0 15px 0 0;
            "
          >
            <span style="color: red">*</span>设备id
          </span>
          <el-select
            filterable
            style="width: 412px"
            v-model="equipmentID"
            placeholder="请选择设备id"
            @change="simidchangaeB"
          >
            <el-option
              v-for="item in equipmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>-->
        <!-- <el-select
            v-model="bangDsimId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 412px"
            @change="bangDsimIdselect"
          >
            <el-option
              v-for="item in bangDsimoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
        <div style="display: flex; width: 80%; margin: 15px auto">
          <span style="width: 75px; text-align: right; line-height: 35px; margin: 0 15px 0 0">
            <span style="color: red">*</span>ICCID
          </span>
          <el-input placeholder="请输入iccid" v-model="equipmentValue" clearable></el-input>
        </div>
        <div style="width: 50%; margin: 15px auto">
          <el-button type="primary" @click=";(addEquipment = false), addEquipmentBfirm()"
            >查 询</el-button
          >
        </div>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <div>
            <el-button @click=";(addEquipmentA = false), addCancel()">取 消</el-button>
            <el-button type="primary" @click=";(addEquipment = false), addConfirmSIM()"
              >确 定</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 查询SIM卡弹框 -->
    <!-- <el-dialog
      title="查询SIM"
      :visible.sync="addEquipmentB"
      width="30%"
    >
      <div style="display: flex; width: 80%; margin: 15px auto"  >
        <span
          style="
            width: 75px;
            text-align: right;
            line-height: 35px;
            margin: 0 15px 0 0;
          "
          ><span style="color: red">*</span> ICCID</span
        >
        <el-input placeholder="请输入iccid" v-model="equipmentICCID" clearable>
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="(addEquipmentB = false), addEquipmentBCancel()"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="(addEquipment = false), addEquipmentBfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>-->

    <!-- SIM卡数据-->
    <el-dialog title="SIM卡" :visible.sync="simCodeVisible" width="30%">
      <div class="simCodeBox">
        <div>
          <span class="simCodeTitle">ICCID：</span>
          <div>{{ sim.iccid }}</div>
        </div>
        <div>
          <span class="simCodeTitle">厂家：</span>
          <div>{{ sim.company }}</div>
        </div>
        <div>
          <span class="simCodeTitle">状态：</span>
          <div>{{ sim.status }}</div>
        </div>
        <div>
          <span class="simCodeTitle">套餐：</span>
          <span>{{ sim.total }}MB</span>
        </div>
        <div>
          <span class="simCodeTitle">已用流量：</span>
          <span>{{ sim.used }}MB</span>
        </div>
        <div>
          <span class="simCodeTitle">到期时间：</span>
          <!-- <div>{{ (sim.expiry_date * 1000) | formatTime }}</div> -->
          <div>{{ sim.expire }}</div>
        </div>
        <div class="operateBtn">
          <el-button size="mini" @click="simCodeVisible = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import ymPlayer from '../comp/videoPlayer.vue'
import HlsPlayer from '@ezuikit/player-hls'
export default {
  comments: {
    ymPlayer
  },
  data() {
    return {
      user_tag: localStorage.getItem('user_tag'), // 用户类型
      videoType: 'sd', // hd高清 sd标清
      isShowType: true, // 视频类型是否显示
      currPage: 1, // 当前分页
      totalPage: 0, // 总分页
      id: '', // 右侧菜单选中的设备ID
      activeIndex: 0, // 控制设备列表选中状态
      jktype: '', // 为1有回放，否则无回放
      divNum: 1, // 默认分屏数量
      hlsHdSrc: '',
      rtmpHdSrc: '',
      takePhotoDialogVisible: false, // 拍照弹框
      Idlist: [], // 右侧设备列表
      divMainHeight: '', // 视频盒子高度
      selected: 1, // 默认选中第一个视频窗口
      playType: 0, // 0:直播 ; 1：插件
      html: '', // 插件播放内容
      picUrl: '', // 视频拍照地址
      playBackDialogVisible: false,
      mapTojkId: this.$route.query.id, // 四情基地监控设备id
      mapTojktype: this.$route.query.jktype, // 四情基地监控设备jktype
      newVideo: false,
      myVideo: {},
      backForm: {
        time: '',
        start: '',
        end: '',
        aisle: 1
      },
      backFormRules: {
        time: [{ required: true, message: '请选择时间范围', trigger: 'change' }],
        aisle: [{ required: true, message: '请选择通道', trigger: 'change' }]
      },
      accessToken: '',

      addEquipment: false, // 测试添加设备
      equipmentID: '', // 添加设备ID
      equipmentIDlist: [], // 搜索Id集合
      equipmentOptions: [
        // 设备id集合
      ],
      equipmentChannel: [
        {
          value: '0',
          label: '0'
        },
        {
          value: 1,
          label: 1
        },
        {
          value: 2,
          label: 2
        },
        {
          value: 3,
          label: 3
        },
        {
          value: 4,
          label: 4
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 6,
          label: 6
        },
        {
          value: 7,
          label: 7
        },
        {
          value: 8,
          label: 8
        },
        {
          value: 9,
          label: 9
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 11,
          label: 11
        },
        {
          value: 12,
          label: 12
        },
        {
          value: 13,
          label: 13
        },
        {
          value: 14,
          label: 14
        },
        {
          value: 15,
          label: 15
        },
        {
          value: 16,
          label: 16
        },
        {
          value: 17,
          label: 17
        },
        {
          value: 18,
          label: 18
        },
        {
          value: 19,
          label: 19
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 21,
          label: 21
        },
        {
          value: 22,
          label: 22
        },
        {
          value: 23,
          label: 23
        },
        {
          value: 24,
          label: 24
        },
        {
          value: 25,
          label: 25
        },
        {
          value: 26,
          label: 26
        },
        {
          value: 27,
          label: 27
        },
        {
          value: 28,
          label: 28
        },
        {
          value: 29,
          label: 29
        },
        {
          value: 30,
          label: 30
        },
        {
          value: 31,
          label: 31
        }
      ],
      equipmentNumber: '', // 设备通道
      playback: false, // 是否添加回放功能

      // 搜索
      restaurants: [],
      state: '',
      timeout: null,
      idName: '',
      addEquipmentA: false, // 绑定SIM卡弹框
      addEquipmentB: false, // 查询SIM卡弹框
      equipmentICCID: '', // 查询SIM input
      // sim卡
      sim: {
        iccid: '',
        account_status: 0, // 卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
        data_plan: 0, // 套餐大小
        data_usage: 0, // 当月用量
        data_balance: 0, // 剩余流量
        expiry_date: 0 // 到期日期
      },
      simCodeVisible: false,
      input3: '',
      value3: [],
      code: 0, // 设备型号，
      query: [],
      simloading: false,
      equipmentValue: '', // iccid

      // 添加设备
      FluoriteClouduser: '', // 萤石云账号
      salesman: '', // 萤石云账号所相关的业务员名称
      tokenData: '', // token
      secretKey: '', // appkey
      furtiveData: '', // appSecret
      addDevice: {
        FluoriteClouduserID: '', // 萤石云账号ID
        equipmentID: '', // 设备ID
        equipmentNumber: '', // 设备通道
        sale_uid: '', // 业务员ID
        task_num: '', // 任务ID
        playback: false, // 是否添加回放功能
        iccid: '', // sim卡
        gb: '' // 国标ID
      },
      salesmanID: [], // 业务员ID集合
      addDeviceRules: {
        FluoriteClouduserID: [{ required: true, message: '请选择萤石云账号id', trigger: 'change' }],
        equipmentID: [{ required: true, message: '请输入设备id', trigger: 'blur' }],
        equipmentNumber: [{ required: true, message: '请选择设备通道号', trigger: 'change' }]
      },
      // FluoriteClouduserID: '', // 萤石云账号ID
      stepIndex: 0, // 步骤下标
      tltArray: [
        {
          name: '添加账号'
        },
        {
          name: '添加监控设备'
        }
      ],
      userNameID: [
        // {
        //   value: 1,
        //   label: 1,
        // },
      ],
      bangDsimoptions: [], // 绑定sim设备id集合
      bangDsimId: null, // 当前设备ID
      VideoList: [], // 视频直播列表
      longtimetf: false,
      monthitortime: null,
      radio: '0',
      optActive: '',
      stopTimer: 0
    }
  },
  filters: {
    formatName: function (value) {
      // 设备名字
      // if (!value) return "";
      // if (value.equip_name) {
      //   if (value.equip_name.length > 5) {
      //     return value.equip_name.slice(0, 5) + "...";
      //   }
      //   return value.equip_name;
      // } else {
      //   if (value.device_id.length > 5) {
      //     return value.device_id.slice(0, 5) + "...";
      //   }
      //   return value.device_id;
      // }

      // -----------------------------------------------------------
      let name = ''
      if (!value.device_name) {
        name = '暂无名称'
      } else if (value.device_name.length > 7) {
        name = value.device_name.slice(0, 7) + '...'
      } else {
        name = value.device_name
      }
      return name
    }
  },
  computed: {
    notifyStyle() {
      if (this.$store.state.homeNotify) {
        return {
          top: '72px'
        }
      } else {
        return {
          top: '60px'
        }
      }
    }
  },
  mounted() {
    if (this.$route.query.id !== undefined) {
      this.idName = this.$route.query.id
    }
    this.getJkList()
    this.$store.dispatch('getSaleUserList')
    // this.restaurants = this.loadAll(); // 搜索数据
  },
  created() {},
  beforeDestroy() {
    for (let item in this.myVideo) {
      if ('destroy' in this.myVideo[item]) {
        this.myVideo[item].destroy()
      }
    }
  },
  destroyed() {
    // this.player.dispose()
    // console.log(this.VideoList);
    // this.VideoList.forEach(item => {
    //   if (item.hasOwnProperty('stop')) {
    //     item.stop();
    //   } else {
    //     if(item) {
    //       item.dispose();
    //     }
    //   }
    // })
  },
  methods: {
    reName(id, device_name) {
      var that = this
      let value = device_name
      this.$prompt('', '修改名字', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: function (value) {
          if (value.length > 16) {
            return '设备名称不能超过16个字符'
          }
        },
        inputPlaceholder: device_name
      })
        .then(({ value }) => {
          if (value) {
            this.$axios({
              method: 'POST',
              url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
              data: this.qs.stringify({
                device_id: id,
                device_name: value
              })
            }).then((res) => {
              if (res.data.message == '') {
                this.getJkList()
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
              }
            })
          } else {
            this.$message({
              type: 'info',
              message: '内容不能为空'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    /**
     * 更改视频清晰度
     *
     * @param type 视频清晰度 hd高清, sd标清
     * @returns 无返回值
     */
    changeVideoType(type) {
      let newUrl = ''
      if (type === 'hd') {
        let newUrlList = this.myVideo[`myPlayer${this.selected}`].url.split('live')
        newUrl = `${newUrlList[0]}hd.live`
      } else if (type === 'sd') {
        let newUrlList = this.myVideo[`myPlayer${this.selected}`].url.split('hd')
        newUrl = `${newUrlList[0]}live`
      }
      console.log(newUrl)
      this.myVideo[`myPlayer${this.selected}`].changePlayUrl({
        url: newUrl
      })
    },
    viewPhoto(id, gbId) {
      this.$router.push('/index/photoViewDgp/' + this.Idlist[this.activeIndex].device_id)
    },
    // 获取视频列表
    getJkList() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=camera.camera_manage.list_camera',
        data: this.qs.stringify({
          page: this.currPage,
          page_size: 8,
          device_id: this.idName,
          device_type_id: 44 // 多光谱设备
        })
      }).then((res) => {
        if (res.data.message == '') {
          this.Idlist = res.data.data.data
          this.accessToken = res.data.data.accessToken
          this.totalPage = res.data.data.counts
          if (this.mapTojkId && this.mapTojktype) {
            // 基地展示跳转过来
            this.selectEquip(this.mapTojkId, this.mapTojktype, 99999)
          } else {
            this.selectEquip(this.Idlist[0].device_id, this.Idlist[0].jktype, 0)
          }
        }
        // console.log(this.Idlist);
        for (var i = 0; i < this.Idlist.length; i++) {
          var obj = {
            value: i,
            label: this.Idlist[i].device_id
          }
          this.equipmentOptions.push(obj)
        }
        this.restaurants = this.loadAll() // 搜索数据
      })
    },
    // 视频分页
    splitPage(str) {
      if (str == 'jian') {
        if (this.currPage > 1) {
          this.currPage--
          this.getJkList()
        }
      } else {
        if (this.currPage < this.totalPage) {
          this.currPage++
          this.getJkList()
        }
      }
    },
    handleCurrentChange(page) {
      this.currPage = page
      this.getJkList()
    },
    // 关闭方向
    stopConfigCamera() {
      if (this.stopTimer) clearTimeout(this.stopTimer)
      this.stopTimer = setTimeout(() => {
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.mulit_stop_move',
          data: this.qs.stringify({
            device_id: this.id
          })
        })
      }, 3000)
    },
    // 上下左右
    configCamera(ctrl, movenum, action) {
      this.optActive = action
      if (ctrl == 'takephoto') {
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto',
          data: this.qs.stringify({
            device_id: this.id
          })
        }).then((res) => {
          let data = JSON.parse(res.data.data)
          if (data.code == 200) {
            this.picUrl = data.data.picUrl
            this.takePhotoDialogVisible = true
          } else {
            this.$message.error(data.msg)
          }
        })
      } else {
        // 上下左右、放大、缩小
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera',
          data: this.qs.stringify({
            device_id: this.id,
            ctrl: movenum
          })
        }).then((res) => {
          // if (res.data.message == '') {
          // 	this.$message.success('指令下发成功')
          // 	// this.stopConfigCamera() //关闭方向
          // }
        })
      }
    },
    // 拍照
    photograph() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto',
        data: this.qs.stringify({
          device_id: this.id
        })
      })
        .then((res) => {
          if (res.data.data == 'true') {
            this.picUrl = res.data.data.addr
            // this.takePhotoDialogVisible = true;
            this.$message({
              message: '拍照成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '拍照失败',
              type: 'warning',
              duration: 1500
            })
          }
        })
        .catch((err) => {
          // console.log(err);
        })
    },
    // 选中右侧菜单设备
    selectEquip(device_id, jktype, index, isStop, num) {
      this.jktype = jktype
      this.activeIndex = index // 菜单选中状态
      this.id = device_id // 保存选中的设备id
      this.$axios({
        url: '/api/api_gateway?method=camera.camera_manage.multi_addr_camera',
        method: 'POST',
        data: this.qs.stringify({ device_id: device_id })
      }).then((res) => {
        if (res.data.message == '') {
          var data = res.data.data
          console.log(data, 'data')

          let rtmpHdSrc = data.rtmp
          if (this.playType == 1) {
            // 插件
            this.html = `<div id="player" autoplay muted poster='' controls playsInline webkit-playsinline src="${rtmpHdSrc}" style="width:100%; height:100%;"></div>`
            setTimeout(() => {
              this.myVideo['xPlayer'] = new EZUIKit.EZUIKitPlayer({
                id: 'player',
                url: rtmpHdSrc
              })
              // this.myVideo['xPlayer'].play();
            }, 1000)
          } else if (this.playType == 0) {
            // 固定走非插件
            if (data.type_id == -1) {
              // 分屏的时候不销毁
              if (isStop != true) {
                if (this.myVideo[`myPlayer${this.selected}`] && this.newVideo) {
                  if ('dispose' in this.myVideo[`myPlayer${this.selected}`]) {
                    this.myVideo[`myPlayer${this.selected}`].dispose()
                  }
                  if ('stop' in this.myVideo[`myPlayer${this.selected}`]) {
                    this.myVideo[`myPlayer${this.selected}`].stop()
                  }
                }
              }
              this.myVideo[`myPlayer${this.selected}`] = null
              document.getElementById('my-video' + this.selected).innerHTML = ''
              let playHtml = `<video id="myPlayer${this.selected}"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHdSrc}"  style="width:100%; height:100%;"></video>`
              document.getElementById('my-video' + this.selected).innerHTML = playHtml
              // 非插件
              this.$nextTick(() => {
                console.log(rtmpHdSrc, '---rtmpHdSrc')
                this.myVideo[`myPlayer${this.selected}`] = videojs(
                  `myPlayer${this.selected}`,
                  {
                    controls: false,
                    autoplay: false,
                    sources: [
                      {
                        type: 'application/x-mpegURL',
                        src: rtmpHdSrc
                      }
                    ]
                  },
                  () => {
                    this.myVideo[`myPlayer${this.selected}`].play()
                    this.VideoList.push(this.myVideo[`myPlayer${this.selected}`])
                  }
                )
              })
            } else {
              if (isStop != true) {
                if (this.myVideo[`myPlayer${this.selected}`] && this.newVideo) {
                  if ('dispose' in this.myVideo[`myPlayer${this.selected}`]) {
                    this.myVideo[`myPlayer${this.selected}`].dispose()
                  }
                  if ('stop' in this.myVideo[`myPlayer${this.selected}`]) {
                    this.myVideo[`myPlayer${this.selected}`].stop()
                  }
                }
              }
              let playHtml = `<div id="myPlayer${this.selected}"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${rtmpHdSrc}"  style="width:100%; height:100%;"></div>`
              document.getElementById('my-video' + this.selected).innerHTML = playHtml
              // 非插件
              // this.$nextTick(() => {
              //   console.log(data, '走到播放了')
              //   this.myVideo[`myPlayer${this.selected}`] = new EZUIKit.EZUIKitPlayer({
              //     id: `myPlayer${this.selected}`,
              //     url: data.rtmp,
              //     accessToken: this.accessToken,
              //     handleError: (err) => {
              //       console.log('监控播放失败了！！！', err)
              //       this.myVideo[`myPlayer${this.selected}`].play()
              //     }
              //   })

              //   this.VideoList.push(this.myVideo[`myPlayer${this.selected}`])
              // })

              this.$nextTick(() => {
                const container = this.$refs.videoContainerRef
                console.log('视频宽度，高度：：', container.clientWidth, container.clientHeight)
                this.myVideo[`myPlayer${this.selected}`] = new HlsPlayer({
                  id: `myPlayer${this.selected}`, // 目标 dom 容器节点的 id
                  url: data.rtmp, // hls 取流地址
                  staticPath: '/static/hls/', // decoder静态资源文件夹 默认根目录
                  width: container.clientWidth, // 播放器宽度
                  height: container.clientHeight
                })
              })

              // this.$nextTick(() => {
              //   console.log(rtmpHdSrc, '---rtmpHdSrc')
              //   this.myVideo[`myPlayer${this.selected}`] = videojs(
              //     `myPlayer${this.selected}`,
              //     {
              //       controls: false,
              //       autoplay: false,
              //       sources: [
              //         {
              //           type: 'application/x-mpegURL',
              //           src: rtmpHdSrc
              //         }
              //       ]
              //     },
              //     () => {
              //       this.myVideo[`myPlayer${this.selected}`].play()
              //       this.VideoList.push(this.myVideo[`myPlayer${this.selected}`])
              //     }
              //   )
              // })
            }
          }
          this.newVideo = true
          this.guanbilong()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 点击分屏
    splitView(num) {
      for (let item in this.myVideo) {
        if ('stop' in this.myVideo[item]) {
          this.myVideo[item].stop()
        } else if ('dispose' in this.myVideo[item]) {
          this.myVideo[item].dispose()
        }
      }
      this.divNum = num
      this.selected = 1
      this.selectEquip(this.id, this.jktype, this.activeIndex, true, num)
    },
    // 点击视频
    selectVideo(i) {
      // console.log(i);
      this.selected = i
    },
    // 播放模式切换，插件/视频直播
    checkPlayType(i) {
      this.playType = i
      for (let item in this.myVideo) {
        this.myVideo[item].stop()
      }
      // console.log(this.myVideo);
      this.selectEquip(this.id, this.jktype, this.activeIndex)
    },
    // 复制拍照地址
    copyPicUrl() {
      document.getElementById('picUrl').select()
      this.$message({
        showClose: true,
        message: '手动复制，在浏览器打开，另存为'
      })
    },
    // 添加设备
    addConfirm() {
      this.$refs.addDeviceRef.validate((valid) => {
        if (!valid) {
          return false
        }
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.multi_add_camera',
          data: this.qs.stringify({
            device_id: this.addDevice.equipmentID,
            camera_channel: this.addDevice.equipmentNumber,
            camera_playback: this.addDevice.playback == true ? 1 : 0,
            account_id: this.addDevice.FluoriteClouduserID,
            sale_uid: this.addDevice.sale_uid,
            task_num: this.addDevice.task_num,
            iccid: this.addDevice.iccid
            // gb: this.addDevice.gb
          })
        }).then((res) => {
          if (res.data.message == '') {
            // console.log(456);
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 1500
            })
            this.$refs.addDeviceRef.resetFields()
            // this.equipmentID = '';
            // this.equipmentNumber = '';
            // this.playback = false;
            this.addEquipment = false
            this.getJkList()
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning',
              duration: 1500
            })
          }
        })
      })
      // console.log(this.equipmentNumber);
      // if (this.equipmentID == '') {
      //   this.$message({
      //     message: '设备ID不能为空',
      //     type: 'warning',
      //     duration: 1500,
      //   });
      // } else if (this.equipmentNumber == '') {
      //   this.$message({
      //     message: '通道号不能为空',
      //     type: 'warning',
      //     duration: 1500,
      //   });
      // } else if (this.FluoriteClouduserID == '') {
      //   this.$message({
      //     message: '萤石云账号ID不能为空',
      //     type: 'warning',
      //     duration: 1500,
      //   });
      // } else if (this.equipmentID !== '' && this.equipmentNumber !== '') {
      //   this.$axios({
      //     method: 'POST',
      //     url: '/api/api_gateway?method=camera.camera_manage.add_camera',
      //     data: this.qs.stringify({
      //       device_id: this.equipmentID,
      //       camera_channel: this.equipmentNumber,
      //       camera_playback: this.playback == true ? 1 : 0,
      //       account_id: this.FluoriteClouduserID,
      //     }),
      //   }).then((res) => {
      //     if (res.data.message == '') {
      //       // console.log(456);
      //       this.$message({
      //         message: '添加成功',
      //         type: 'success',
      //         duration: 1500,
      //       });
      //       this.equipmentID = '';
      //       this.equipmentNumber = '';
      //       this.playback = false;
      //       this.addEquipment = false;
      //       this.getJkList();
      //     }
      //   });
      // }
    },
    // addEquip() {
    //   this.$prompt("添加设备id", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //   })
    //     .then(({ value }) => {
    //       this.$axios({
    //         method: "POST",
    //         url: "/api/api_gateway?method=camera.camera_manage.add_camera",
    //         data: this.qs.stringify({ device_id: value }),
    //       }).then((res) => {
    //         if (res.data.message == "") {
    //           //console.log(456);
    //           this.getJkList();
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "取消添加",
    //       });
    //     });
    // },
    addEquip() {
      this.addEquipment = true
      this.salesmanID = this.$store.state.saleUserList
      this.addDevice = {
        FluoriteClouduserID: '', // 萤石云账号ID
        equipmentID: '', // 设备ID
        equipmentNumber: '', // 设备通道
        sale_uid: '', // 业务员ID
        task_num: '', // 任务ID
        playback: false, // 是否添加回放功能
        iccid: '' // sim卡
      }
      // console.log(this.$store.state.saleUserList);
    },
    handleClose() {
      this.addEquipment = false
    },
    // 确定添加
    addConfirmSIM() {
      // console.log(this.bangDsimId);
      // console.log(this.bangDsimoptions);
      // if (this.bangDsimId == null) {
      //   this.$message({
      //     message: '设备ID不能为空',
      //     type: 'warning',
      //     duration: 1500,
      //   });
      // } else
      if (this.equipmentValue == '') {
        this.$message({
          message: 'iccid不能为空',
          type: 'warning',
          duration: 1500
        })
      } else if (this.equipmentValue !== '') {
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.add_camera_sim',
          data: this.qs.stringify({
            device_id: this.id, // 设备id
            iccid: this.equipmentValue
          })
        })
          .then((res) => {
            // console.log(res);
            if (res.data.data == true) {
              this.$message({
                type: 'success',
                message: 'sim卡绑定成功',
                duration: 1500
              })
              this.bangDsimId = ''
              this.equipmentValue = ''
              this.playback = false
              this.addEquipmentA = false
            } else {
              this.$message({
                type: 'error',
                message: res.data.message,
                duration: 1500
              })
            }
          })
          .catch((err) => {
            // console.log(err);
            this.$message({
              type: 'error',
              message: 'sim卡绑定失败',
              duration: 1500
            })
          })
      }
      // console.log(this.equipmentID + '设备ID');
      // console.log(this.equipmentValue + '设备通道');
      // console.log(this.playback + '是否支持回放功能');
    },
    // 取消添加
    addCancel() {
      this.equipmentID = ''
      this.equipmentValue = ''
      this.playback = false
      this.$message({
        type: 'info',
        message: '取消添加'
      })
      this.input3 = ''
    },

    // 测试添加设备

    // 回放
    playBackSubmit() {
      this.$refs.backFormRef.validate((valid) => {
        if (!valid) {
          return false
        }
        let start = new Date(this.backForm.time[0])
        let end = new Date(this.backForm.time[1])
        let beginVal = ''
        let endVal = ''
        function checked(num) {
          if (num < 10) {
            num = '0' + num
          }
          return num
        }
        beginVal =
          beginVal +
          start.getFullYear() +
          checked(start.getMonth() + 1) +
          checked(start.getDate()) +
          checked(start.getHours()) +
          checked(start.getMinutes()) +
          checked(start.getSeconds())
        endVal =
          endVal +
          end.getFullYear() +
          checked(end.getMonth() + 1) +
          checked(end.getDate()) +
          checked(end.getHours()) +
          checked(end.getMinutes()) +
          checked(end.getSeconds())

        if (!document.getElementById('playWind')) {
          document.getElementById('videoBack').innerHTML = '<div id="playWind"></div>'
        }
        let url = `ezopen://open.ys7.com/${this.id}/${this.backForm.aisle}.local.rec?begin=${beginVal}&end=${endVal}`
        this.playback = new EZUIKit.EZUIKitPlayer({
          id: 'playWind',
          autoplay: true,
          url: url,
          accessToken: this.accessToken,
          decoderPath: 'static/js/',
          width: 560,
          height: 460
        })
      })
    },
    palyBackClose() {
      this.$refs.backFormRef.resetFields()
      this.playback.stop()
      document.getElementById('videoBack').innerHTML = ''
    },

    // 搜索
    loadAll() {
      var list = this.Idlist
      var arr = []
      for (var i = 0; i < list.length; i++) {
        var obj = {}
        obj['value'] = list[i].device_id
        obj['name'] = list[i].device_name == '' ? '暂无设备名称' : list[i].device_name
        arr.push(obj)
      }
      return arr
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    // 搜索事件
    handleSelect(item) {
      this.idName = item.value
      this.currPage = 1
      this.getJkList()
    },
    axiosList() {
      this.idName = this.state
      this.currPage = 1
      this.getJkList()
    },

    // 绑定SIM
    bindingSIM() {
      this.addEquipmentA = true
      this.equipmentValue = this.Idlist[this.activeIndex].sim
    },
    // sim卡id查询
    simsearch(query) {
      this.equipmentIDlist = []
      // console.log(query);
      if (query != '') {
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.list_camera',
          data: this.qs.stringify({
            device_id: query,
            device_type_id: 44
          })
        }).then((res) => {
          // this.equipmentID = res.data.data.data
          var list = res.data.data.data
          // console.log(list);
          // this.equipmentValue = list[0].sim
          for (var i = 0; i < list.length; i++) {
            var obj = {
              label: list[i].device_id,
              value: i
            }
            this.equipmentIDlist.push(obj)
          }
        })
      }
    },
    simsearchB(simid) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=camera.camera_manage.list_camera',
        data: this.qs.stringify({
          device_id: simid,
          device_type_id: 44
        })
      }).then((res) => {
        var list = res.data.data.data
        // console.log(list[0].sim);
        this.equipmentValue = list[0].sim
      })
    },
    simidchangae(value) {
      // 点击选择id
      // console.log(value);
      this.equipmentID = this.equipmentIDlist[value].label
      this.simsearchB(this.equipmentIDlist[value].label)
    },
    simidchangaeB(value) {
      // //console.log(this.equipmentOptions[value].label); //equipmentOptions
      // console.log(value, this.equipmentOptions);
      this.equipmentID = this.equipmentOptions[value].label
      this.simsearchB(this.equipmentOptions[value].label)
    },
    // 查询SIM
    inquireSIM() {
      this.addEquipmentB = true
    },
    // 确定
    addEquipmentBfirm() {
      if (this.equipmentValue == '') {
        this.$message({
          type: 'info',
          message: '请输入正确的iccid'
        })
      } else {
        var postData = this.qs.stringify({
          iccid: this.equipmentValue
        })
        this.simloading = true
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=forecast.send_control.sim_query_new',
          data: postData
        })
          .then((res) => {
            this.simloading = false
            // console.log(res.data);
            if (!res.data.data.code) {
              this.sim = res.data.data
              this.simCodeVisible = true
            } else {
              this.$message({
                type: 'info',
                message: res.data.data.msg
              })
            }

            // if (res.data.message == "") {
            //   let data = eval("(" + res.data.data.data + ")");
            //   // let cardInfo = data.data.card_list[0]
            //   let cardInfo = data.data;
            //   this.sim = cardInfo;
            // }
          })
          .catch((err) => {
            // console.log(err);
          })
      }
    },
    // 取消
    addEquipmentBCancel() {},

    // 添加设备-下一步
    next(index) {
      if (index == 1) {
        this.FluoriteClouduserUserID() // 请求获取萤石云账号ID接口
      }
      this.stepIndex = index
    },

    // 萤石云账号添加
    FluoriteClouduserAdd() {
      if (this.FluoriteClouduser == '') {
        this.$message({
          message: '账号不能为空，请填写！',
          type: 'warning',
          duration: 1500
        })
      } else if (this.salesman == '') {
        this.$message({
          message: '业务员不能为空，请填写！',
          type: 'warning',
          duration: 1500
        })
      } else if (this.secretKey == '') {
        this.$message({
          message: 'appkey不能为空，请填写！',
          type: 'warning',
          duration: 1500
        })
      } else if (this.furtiveData == '') {
        this.$message({
          message: 'appSecret不能为空，请填写！',
          type: 'warning',
          duration: 1500
        })
      } else {
        var postData = this.qs.stringify({
          account: this.FluoriteClouduser, // 萤石云账号
          salesman: this.salesman, // 萤石云账号所相关的业务员名称
          // app_token: this.tokenData, // 萤石云账号 token
          app_key: this.secretKey, // 萤石云账号 appkey
          app_secret: this.furtiveData, // 萤石云账号 appSecret
          account_type: this.radio
        })
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=camera.camera_manage.multi_add_camera_account',
          data: postData
        })
          .then((res) => {
            // console.log(res);
            if (res.data.data == true) {
              this.$message({
                message: '添加萤石云账号成功！',
                type: 'success',
                duration: 1500
              })
              this.addEquipment = false
            } else {
              this.$message({
                message: '添加萤石云账号失败',
                type: 'warning',
                duration: 1500
              })
            }
          })
          .catch((err) => {
            // console.log(err);
            this.$message({
              message: '添加萤石云账号失败',
              type: 'warning',
              duration: 1500
            })
          })
      }
    },

    // 萤石云账号ID接口
    FluoriteClouduserUserID() {
      var postData = this.qs.stringify({
        account: '', // 按萤石云账号名字搜索
        salesman: '' // 按业务员名称搜索
      })
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=camera.camera_manage.see_camera_account',
        data: postData
      })
        .then((res) => {
          // console.log(res.data.data);
          if (res.data.data.length !== 0) {
            var data = res.data.data
            var arr = []
            for (var i = 0; i < data.length; i++) {
              var obj = {}
              obj['value'] = data[i].id
              obj['label'] = data[i].account
              arr.push(obj)
            }
            this.userNameID = arr
          }
        })
        .catch((err) => {
          // console.log(err);
        })
    },
    remoteMethod(e) {
      // sim卡绑定 设备id查询
      this.$axios({
        url: '/api/api_gateway?method=camera.camera_manage.list_camera',
        method: 'POST',
        data: this.qs.stringify({ device_id: e, device_type_id: 44 })
      }).then((res) => {
        // console.log(res.data.data.data);
        this.bangDsimoptions = []
        var datas = res.data.data.data
        for (var i = 0; i < datas.length; i++) {
          this.bangDsimoptions.push({
            value: i,
            label: datas[i].device_id,
            iccid: datas[i].sim
          })
        }
      })
    },
    bangDsimIdselect(e) {
      // SIM卡绑定 设备id切换
      this.equipmentValue = this.bangDsimoptions[e].iccid
      if (this.bangDsimoptions[e].iccid == '') {
        this.$message({
          message: '该设备尚未绑定sim卡！',
          type: 'warning'
        })
      }
    },
    guanbilong() {
      this.longtimetf = false
      if (this.monthitortime) {
        clearTimeout(this.monthitortime)
      }
      this.monthitortime = setTimeout(() => {
        this.longtimetf = true
      }, 1800000)
    },
    toplay() {
      let { device_id: id, type_id: type, token, gb: gbId } = this.Idlist[this.activeIndex]
      // 新国标协议兼容，25.7.24
      if (gbId) {
        id = gbId + '-1'
      }
      this.$router.push(
        `/index/${type == 0 ? 'playbackDgp' : 'playbackDgp'}?id=${id}&accessKey=${token}`
      )
    }
  },
  watch: {
    // 添加设备弹框
    addEquipment(val) {
      if (val == false) {
        // 第二步
        this.equipmentID = '' // 设备ID
        this.equipmentValue = '' // iccid
        this.playback = false // 回放
        this.equipmentNumber = '' // 通道号
        this.FluoriteClouduserID = '' // 萤石云账号ID
        // 第一步
        this.FluoriteClouduser = '' // 萤石云账号
        this.salesman = '' // 萤石云账号所相关的业务员名称
        this.tokenData = '' // token
        this.secretKey = '' // appKey
        this.furtiveData = '' // appSecret
        this.stepIndex = 0 // 步骤下标
      }
    }
  }
}
</script>

<style lang="less" scoped>
.facility_boxTwo {
  margin-top: 15px;
  width: 405px;
}
.monitor-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  /deep/.el-breadcrumb {
    margin-bottom: 12px;
  }
  .el-select {
    width: 100%;
  }
  .monitor_hint {
    position: fixed;
    top: 105px;
    left: 200px;
    height: 30px;
    line-height: 30px;
    color: #eb6767;
    width: 89%;
    background-color: #fff;
    padding: 0 20px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    z-index: 1999999;
    .monitor_hint_text {
      height: 25px;
      display: flex;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 5px;
      }
    }
    .el-icon-close {
      line-height: 30px;
    }
  }
  .monitor-wrap {
    display: flex;
    justify-content: space-between;
    // background: #323a47;
    flex: 1;
    .video-box {
      position: relative;
      flex: 1;
      padding-right: 10px;
      .video-container {
        width: 100%;
        height: calc(100% - 16px);
        background: rgb(97, 93, 93);
        & > div {
          display: flex;
          flex-wrap: wrap;
          .videoItem {
            border: 1px solid #000;
            box-sizing: border-box;
          }
          .videoItem:hover {
            border-color: aquamarine;
          }
          .selected {
            border: 1px solid aquamarine;
          }
          .a1 {
            width: 100%;
            height: 100%;
          }
          .a4 {
            width: 50%;
            height: 50%;
          }
          .a9 {
            width: 33.3%;
            height: 33.3%;
          }
        }
      }
      .split-screen {
        display: flex;
        justify-content: space-between;
        padding: 15px 24px;
        align-items: center;
        width: calc(100% - 12px);
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 17px;
        left: 1px;
        box-sizing: border-box;
        .sp {
          width: 17px;
          height: 17px;
          display: inline-block;
          margin-right: 10px;
          cursor: pointer;
        }
        .sp01 {
          background: url(../../../assets/images/forecasting/monitor/sp1.png);
        }
        .sp02 {
          background: url(../../../assets/images/forecasting/monitor/sp2.png);
        }
        .sp03 {
          background: url(../../../assets/images/forecasting/monitor/sp3.png);
        }
        .sp01:hover {
          background: url(../../../assets/images/forecasting/monitor/sp1-active.png);
        }
        .sp02:hover {
          background: url(../../../assets/images/forecasting/monitor/sp2-active.png);
        }
        .sp03:hover {
          background: url(../../../assets/images/forecasting/monitor/sp3-active.png);
        }
      }
    }
    .nav-box {
      .view-box {
        width: 364px;
        background: #fff;
        color: #333;
        font-size: 14px;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 4px;
        height: 550px;
        // height: calc(100% - 16px);
      }
      .view-box:last-child {
        margin-top: 16px;
        height: calc(100% - 583px);
        overflow-y: hidden;
        padding: 10px 26px 26px 26px;
      }
      .search {
        padding: 8px;
        border-radius: 4px;
        margin-bottom: 8px;
        background: #f5f7fa;
      }
      .viewLists {
        // height: 50%;
        height: calc(100% - 94px);
        overflow: auto;
        padding: 0;
        li {
          display: flex;
          align-items: center;
          padding: 0 15px;
          cursor: pointer;
          overflow: hidden;
          height: 53px;
          background: #f5f7fa;
          border-radius: 4px;
          margin-bottom: 8px;
          .titleBox {
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 210px;
            // height: 30px;
            // line-height: 30px;
            .device-id {
              color: #999;
              font-size: 12px;
              margin-left: 8px;
            }
          }
          .viewPhoto {
            color: #eba219;
            float: right;
            font-size: 18px;
            cursor: pointer;
            margin: 0 0 0 10px;
          }
          // .viewPhoto:hover {
          //   text-decoration: underline;
          // }
          .more {
            margin-left: auto;
            display: none;
          }
          .status {
            font-size: 12px;
            border-radius: 4px;
            padding: 2px 8px;
            margin-right: 16px;
          }
          .onLine {
            color: rgba(20, 164, 120, 1);
            background: rgba(20, 164, 120, 0.1);
          }
          .outLine {
            color: rgba(255, 89, 81, 1);
            background: rgba(255, 89, 81, 0.15);
          }
        }
        li.active {
          background: linear-gradient(90deg, rgba(20, 164, 120, 0.08) 64%, #f5f7fa);
          .more {
            display: block;
          }
        }
        li:hover {
          background: linear-gradient(90deg, rgba(20, 164, 120, 0.08) 64%, #f5f7fa);
        }
        li:last-child {
          margin-bottom: 0;
        }
      }
      .splitPage {
        height: 3%;
        margin-top: 2%;
        text-align: center;
        color: #15bb88;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        .arrow {
          font-size: 20px;
          cursor: pointer;
        }
      }
      .camera-control {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .zoom-in,
        .zoom-out {
          display: inline-block;
          width: 40px;
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          background: #f5f7fa;
          box-shadow: 6px 8px 14px 0 #00000014;
          border-radius: 4px;
          text-align: center;
          font-size: 22px;
          color: #666;
          font-weight: 600;
        }
      }
      .control-ring {
        position: relative;
        width: 180px;
        height: 180px;
        .div-opt {
          position: absolute;
          width: 42px;
          height: 42px;
          line-height: 42px;
          cursor: pointer;
          font-size: 24px;
          text-align: center;
          z-index: 100;
          color: #666;
          font-weight: 600;
        }
        .upCtr {
          top: 0px;
          left: 50%;
          margin-left: -21px;
        }
        .downCtr {
          bottom: 0px;
          left: 50%;
          margin-left: -21px;
        }
        .leftCtr {
          top: 50%;
          left: 0px;
          margin-top: -21px;
        }
        .rightCtr {
          top: 50%;
          right: 0px;
          margin-top: -21px;
        }
      }

      .outer-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(132deg, #e7edf0 15.24%, #f9fbfc 85.9%);
        box-shadow: -9px -5px 18.6px 0 rgba(255, 255, 255, 0.97),
          13px 19px 34.5px -18px rgba(0, 0, 0, 0.15);
      }

      .quarter-sector {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .inner-circle {
        position: absolute;
        width: 96px;
        height: 96px;
        background: white;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06), inset 0 0 10px rgba(0, 0, 0, 0.03);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .camera-icon {
        font-size: 33px;
        color: #666;
      }
      // .upCtr:hover ~ .outer-ring .quarter-sector {
      //   background: conic-gradient(
      //     from 0deg at center,
      //     #cfdce6 0deg,
      //     #dfe4e8 90deg,
      //     transparent 0% 100%
      //   );
      //   transform: rotate(-45deg);
      // }
      // .downCtr:hover ~ .outer-ring .quarter-sector {
      //   background: conic-gradient(
      //     from 0deg at center,
      //     #cfdce6 0deg,
      //     #dfe4e8 90deg,
      //     transparent 0% 100%
      //   );
      //   transform: rotate(135deg);
      // }
      // .leftCtr:hover ~ .outer-ring .quarter-sector {
      //   background: conic-gradient(
      //     from 0deg at center,
      //     #cfdce6 0deg,
      //     #dfe4e8 90deg,
      //     transparent 0% 100%
      //   );
      //   transform: rotate(-135deg);
      // }
      // .rightCtr:hover ~ .outer-ring .quarter-sector {
      //   background: conic-gradient(
      //     from 0deg at center,
      //     #cfdce6 0deg,
      //     #dfe4e8 90deg,
      //     transparent 0% 100%
      //   );
      //   transform: rotate(45deg);
      // }
      .opt-active-up {
        background: conic-gradient(
          from 0deg at center,
          #cfdce6 0deg,
          #dfe4e8 90deg,
          transparent 0% 100%
        );
        transform: rotate(-45deg);
      }
      .opt-active-down {
        background: conic-gradient(
          from 0deg at center,
          #cfdce6 0deg,
          #dfe4e8 90deg,
          transparent 0% 100%
        );
        transform: rotate(135deg);
      }
      .opt-active-left {
        background: conic-gradient(
          from 0deg at center,
          #cfdce6 0deg,
          #dfe4e8 90deg,
          transparent 0% 100%
        );
        transform: rotate(-135deg);
      }
      .opt-active-right {
        background: conic-gradient(
          from 0deg at center,
          #cfdce6 0deg,
          #dfe4e8 90deg,
          transparent 0% 100%
        );
        transform: rotate(45deg);
      }
      .direc {
        text-align: center;
        width: 100%;
        height: 100%;
        // margin: 5% 0 5% 0;
        position: relative;
        background: url(../../../assets/images/forecasting/monitor/direction-btn.png) no-repeat
          center;
        background-size: contain;
        & > div {
          position: absolute;
          width: 50px;
          height: 50px;
          cursor: pointer;
        }
        .upCtr {
          top: 10px;
          left: 50%;
          margin-left: -25px;
        }
        .downCtr {
          bottom: 10px;
          left: 50%;
          margin-left: -25px;
        }
        .leftCtr {
          top: 50%;
          left: 28px;
          margin-top: -25px;
        }
        .rightCtr {
          top: 50%;
          right: 28px;
          margin-top: -25px;
        }
        .cameraCtr {
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      .btnBox {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        .el-button {
          width: 50%;
        }
      }
    }
  }
}

// SIM
.simCodeBox {
  > div {
    line-height: 40px;
    display: flex;
    align-content: center;
    .simCodeTitle {
      width: 100px;
      text-align: right;
      font-size: 14px;
      color: #333;
    }
    > div {
      flex: 1;
      .el-progress {
        margin-top: 17px;
      }
    }
    span {
      width: 85px;
      font-size: 12px;
      padding-left: 3px;
      color: #909090;
    }
    .el-input {
      width: 60%;
    }
  }
  .operateBtn {
    display: block;
    text-align: right;
  }
}
.siminput {
  position: relative;
  height: 36px;
  .simgather {
    position: absolute;
    top: 36px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 9999;
  }
}

.addClass {
  // background: rgb(122, 121, 121);
  background: #c1bfbf;
  color: #fff;
}
.custom-ffffff .el-pagination {
  text-align: right;
  margin-top: 16px;
}
.basicsbox_text {
  display: flex;
  // margin-top: 30px;
  position: absolute;
  top: -4px;
  // height: 44px;
  padding: 15px 10px;
  z-index: 1110;
  right: 24px;
  span {
    margin-right: 25px;
    font-size: 14px;
    line-height: 1;
    color: #909399;
  }
}
</style>