<template>
    <div class="formula realTime">
        <!-- 生态气象站 -->
        <div class="page-content new-data" v-if="deviceName == 30"
            :class="deviceName == 10 || deviceName == 30 ? 'control-page' : ''">

            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                生态气象站<span class="outline" v-if="deviceState == 0">(设备离线)</span>
            </div>
            <div class="timeNow" v-if="updateTime">
                <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
                }}</span> -->
                {{ updateTime}}
            </div>
            <div class="flex-list realTime-bottom" :class="deviceName == 30 ? 'weather' : ''">
                <div class="left-view-new">
                    <div class="list-view" v-for="item, index in list " :key="index">
                        <img :src="item.img" alt="">
                        <div>
                            <div class="text">{{ item.name }}</div>
                            <div class="number"  :style="item.num=='故障'?'color:rgba(252, 125, 106, 1)':''"> {{ getControlData(item) }}</div>
                        </div>
                    </div>
                </div>
                <div class="right" id="realTime-line"></div>
            </div>
        </div>
        <!-- 控制器/施肥机 -->
        <div class="page-content new-data" v-else :class="deviceName !=1 ? 'control-page' : ''">

            <div class="control-view" v-if="deviceName !=1">
                <div class="title" @click='weatherModel = true'>气象站:</div>
                <vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
                    <div class="list-view" v-for="item, index in controlList " :key="index">
                        <img class="icon" :src="item.img" alt="">
                        {{ item.environmentDataId
                        }}:{{ getControlData(item) }}
                    </div>
                </vue-seamless>
            </div>
            <!-- <div class="control-list" >
    <div v-for="(item, index) in controlList" :key="index">
        <img :src="item.img" alt="">
        {{ item.environmentDataId
        }}:{{ getControlData(item) }}
    </div>
</div> -->
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                实时数据<span class="outline" v-if="deviceState == 0">(设备离线)</span>
            </div>
            <div class="timeNow" v-if="updateTime">
                <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
    }}</span> -->
    {{ updateTime}}
            </div>
            <div class="flex-view border-none warning-btn">
                <div class="input-btn ">
                    <div class="btn blue" @click='openDataModel'>
                        查看全部实时数据
                    </div>
                    <div class="btn green" @click="openWarn">
                        <img src="../../assets/image/real-time-icon2.png" alt="" />短信报警
                    </div>
                </div>
            </div>
            <div class="realTime-list" v-if="list.length">
                <vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
                    <div class="list-view" v-for="item, index in list " :key="index">
                        <img :src="item.img" alt="">
                        <div>
                            <div class="text">{{ item.name }}</div>
                            <div class="number"  :style="item.num=='故障'?'color:rgba(252, 125, 106, 1)':''"> {{ getControlData(item) }}</div>
                        </div>
                    </div>
                </vue-seamless>

            </div>
            <div class="flex-list realTime-bottom">
                <div class="left-view" v-if="deviceName != 30">
                    <div ref="monitor" class="monitor" id="monitor">
                        <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                        <img  style="width: 100%;height: 100%;" :src="imgUrl" alt="">
                        <!-- <div v-else ref="videoPlayer" class="video-js" id="video-js"></div> -->
                    </div>
                </div>
                <div class="right" id="realTime-line"></div>
            </div>
        </div>
        <!-- 控制器 -->
        <div class="page-content" v-if="deviceName == 10">
            <div class="table-title">
                <img src="../../assets/image/status.png" alt="" />
                设备运行状态
                <div class="title-text" v-if="sunrise"><img src="../../assets/img/sunrise.png" alt="">日出:{{ sunrise }}
                </div>
                <div class="title-text" v-if="sunset"><img src="../../assets/img/sunset.png" alt="">日落:{{ sunset }}
                </div>
                <div class="input-btn ">
                    <div class="btn blue" @click="openVolt">
                        无线电池电压
                    </div>
                </div>
            </div>
            <div class="flex-view border-none">
                <div class="status-view" v-for="item, index in statusList" :key="index">
                    <div class="status-view-top">
                        <div class="status-view-top-left">{{ item.name }}</div>
                        <el-popover placement="top" width="140" v-model="item.deltrue">
                            <div class="set-status-red" @click="delStatus(item, index)">删除</div>

                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
                        </el-popover>
                        <!-- <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt=""> -->
                    </div>
                    <!-- 风机 -->
                    <div class="status-view-content" v-if="item.type == 1">
                        <div v-if="item.open != 0" class="status-true">
                            <div class="status-true-sel">
                                <div class="sel-auto">
                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    自动控制
                                </div>
                                <div class="sel-phone">
                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    手机控制
                                </div>
                            </div>
                            <div class="status-fan">
                                <div class="btn" :class="item.status[0] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="item.status[0] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>1#风机</span>
                                </div>
                                <div class="btn" :class="item.status[1] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="item.status[1] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
                                </div>
                                <div class="btn" :class="item.status[2] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="item.status[2] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
                                </div>
                                <div class="btn" :class="item.status[3] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="item.status[3] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
                                </div>
                                <div class="btn" :class="item.status[4] == 1 ? 'blue' : 'off'">
                                    <img class="fan-img" v-if="item.status[4] == 1" src="../../assets/img/fan-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
                                </div>
                                <div style="display: none;"></div>
                            </div>
                        </div>
                        <div v-else class="status-noTrue">
                            <img src="../../assets/img/status-no.png" alt="">
                            <div>当前设备无效</div>
                        </div>
                    </div>
                    <!-- 补光灯 -->
                    <div class="status-view-content" v-else-if="item.type == 8">
                        <div v-if="item.open != 0" class="status-true">
                            <div class="status-true-sel">
                                <div class="sel-auto">
                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    自动控制
                                </div>
                                <div class="sel-phone">
                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    手机控制
                                </div>
                            </div>
                            <div class="status-fan">
                                <div class="btn" :class="item.status[0] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[0] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>1#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[1] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[1] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>2#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[2] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[2] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>3#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[3] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[3] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>4#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[4] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[4] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>5#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[5] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[5] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>6#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[6] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[6] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>7#补光灯</span>
                                </div>
                                <div class="btn" :class="item.status[7] == 1 ? 'blue' : 'off'">
                                    <img class="light-img" v-if="item.status[7] == 1" src="../../assets/img/LED-on.png"
                                        alt="">
                                    <img v-else src="../../assets/img/fan-off.png" alt="">
                                    <span>8#补光灯</span>
                                </div>
                                <div style="display: none;"></div>
                            </div>
                        </div>
                        <div v-else class="status-noTrue">
                            <img src="../../assets/img/status-no.png" alt="">
                            <div>当前设备无效</div>
                        </div>
                    </div>
                    <!-- 顶卷膜及其他 -->
                    <div class="status-view-content" v-else>
                        <div v-if="item.open != 0" class="status-true">
                            <div class="status-true-sel">
                                <div class="sel-auto">
                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    自动控制
                                </div>
                                <div class="sel-phone">
                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
                                    手机控制
                                </div>
                            </div>
                            <div class="status-true-charts"
                                v-if="item.type == 6 || item.type == 5 || item.type == 2 || item.type == 15 || item.type == 14 || item.type == 13 || item.type == 12|| item.type == 16">
                                <img src="../../assets/img/status-true-charts-icon.png" alt="">
                                <div :id="'statusCharts' + index"></div>
                            </div>
                            <div class="status-true-charts" style="background: unset;height: 50px;" v-else>

                            </div>
                            <div class="status-true-text" v-if="item.type == 2 || item.type == 5 || item.type == 6 || item.type == 12
            || item.type == 13 || item.type == 14 || item.type == 15 || item.type == 16">
                                <div class="status-true-text-left">{{ getNumberStatus(item) }}</div>
                                <div class="status-true-text-right"
                                    v-if="item.type == 6 || item.type == 5 || item.type == 2 || item.type == 15|| item.type == 16 || item.type == 14 || item.type == 13 || item.type == 12">
                                    {{ item.progress }}%</div>
                            </div>

                            <div class="status-fan status-btn" v-else>
                                <div class="btn" :class="item.index == 1 ? 'blue' : 'off'">
                                    <img class="light-img" :src="getIcon(item)" alt="">
                                    <!-- <img v-else src="../../assets/img/fan-off.png" alt=""> -->
                                    <span>{{ item.index == 1 ? '开启' : '关闭' }}</span>
                                </div>
                            </div>
                            <div class="status-true-text" v-if="item.type == 15">
                                <div class="status-true-text-left">计算结果</div>
                                <div class="status-true-text-right">
                                    {{ item.count }}</div>
                            </div>
                        </div>
                        <div v-else class="status-noTrue">
                            <img src="../../assets/img/status-no.png" alt="">
                            <div>当前设备无效</div>
                        </div>
                    </div>
                </div>

                <div class="status-view">
                    <div class="status-view-top">
                        <div class="status-view-top-left">添加设备</div>
                    </div>
                    <div class="status-view-content">
                        <div class="status-noTrue status-add" @click="addModel = true">
                            <img src="../../assets/img/status-add.png" alt="">
                            <div>点击添加设备</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="气象站" class="vrcode-model" :append-to-body="true" :visible.sync="weatherModel" width="1030px">
            <el-button class="model-return-btn" type="primary" @click="weatherModel = false">返 回</el-button>
            <div class="vrcode-model-title vrcode-model-title-282">气象站</div>
            <div class="dataModel">
                <div class="view-new">
                    <div class="list-view" v-for="item, index in controlList " :key="index">
                        <img class="icon" :src="item.img" alt="">
                        <div>
                            <div class="text">{{ item.environmentDataId }}</div>
                            <div class="number"> {{ getControlData(item) }}</div>
                        </div>

                    </div>
                </div>
            </div>

        </el-dialog>
        <el-dialog title="实时数据" class="vrcode-model" :append-to-body="true" :visible.sync="dataModel" width="1030px">
            <el-button class="model-return-btn" type="primary" @click="dataModel = false">返 回</el-button>
            <div class="vrcode-model-title vrcode-model-title-282">实时数据</div>
            <div class="dataModel">
                <div class="view-new">
                    <div class="list-view" v-for="item, index in list " :key="index">
                        <img :src="item.img" alt="">
                        <div>
                            <div class="text">{{ item.name }}</div>
                            <div class="number" :style="item.num=='故障'?'color:rgba(252, 125, 106, 1)':''"> {{ getControlData(item) }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </el-dialog>

        <el-dialog title="请选择要显示的设备" :append-to-body="true" :visible.sync="addModel" width="70%">
            <div class="model-title">请选择要显示的设备</div>
            <div class="model-sel scroll">
                <div v-for="item, index in selDevicestatus" :key="index">
                    <div @click="selClick(item)" :class="item.select ? 'sel' : 'no-sel'"></div>
                    {{ item.statePermissions }}
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addModel = false">确 认</el-button>
            </span>
        </el-dialog>

        <el-dialog title="控制器短信报警规则" class="vrcode-model" top="5vh" :append-to-body="true" :visible.sync="warnModel"
            width="1200px">
            <el-button class="model-return-btn" type="primary" @click="returnWarn">返 回</el-button>
            <div class="vrcode-model-title vrcode-model-title-282">控制器短信报警规则</div>
            <div class="warning-model ">
                <div class="title-tips">新建报警规则</div>
                <div class="flex-view border-none">
                    <div class="input-main">
                        <div>设备code码</div>
                        <input disabled type="text" v-model="warnForm.deviceId">
                    </div>
                </div>
                <div class="flex-view">
                    <div class="input-main">
                        <div>用户1手机号</div>
                        <input type="text" v-model="warnForm.phonenumber">
                        <span></span>
                    </div>
                    <div class="input-main">
                        <div>用户2手机号</div>
                        <input type="text" v-model="warnForm.phonenumber2">
                    </div>
                </div>
                <div class="flex-view">
                    <div class="input-sel">
                        <span>判断条件</span>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="warnModelSel1" type="text" class="input-input" placeholder="请选择">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu class="warning-sel" slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
            item.name
        }}</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="input-sel">
                        <el-dropdown @command="handleCommand1">
                            <div class="el-dropdown-link">
                                <input v-model="warnModelSel2" type="text" class="input-input" placeholder="请选择">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu class="warning-sel" slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeSelList1" :key="index" :command="index">{{
            item.name
        }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="input-main">
                        <input type="text" v-model="warnForm.environmentData" style="width: 200px;"
                            placeholder="请输入设定值">
                        <span></span>
                    </div>
                    <div class="input-btn ">
                        <div class="btn blue" @click="addMessage">
                            <img src="../../assets/img/add.png" alt="" />添加
                        </div>
                    </div>
                </div>
                <div class="title-tips">原有报警规则</div>
                <div class="vrcode-table">
                    <div class="vrcode-table-view table-view">
                        <el-table :data="tableData" :row-class-name="tableRowClassName" height="520"
                            style="width: 100%">

                            <el-table-column prop="environmentName" label="报警名称">
                            </el-table-column>
                            <el-table-column prop="environmentId" label="判断条件">
                                <template slot-scope="scope">
                                    <div>
                                        {{ typeSelList1[scope.row.unit - 1].name }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="environmentData" label="数值"></el-table-column>
                            <el-table-column prop="phonenumber" label="手机号1"></el-table-column>
                            <el-table-column prop="phonenumber2" label="手机号2"></el-table-column>
                            <el-table-column label="操作" width="100">

                                <template slot-scope="scope">
                                    <div class="vrcode-table-btn">
                                        <div class="vrcode-btn red-btn" @click="delMessage(scope.row)">
                                            删除
                                        </div>
                                    </div>
                               </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

            </div>
        </el-dialog>

        <el-dialog :close-on-click-modal="false" title="提示" top="15vh" :visible.sync="voltModel" width="564px"
      class="vrcode-model manage-model" :append-to-body="true">
      <div class="vrcode-model-title">
        编辑
      </div>
      <div class="vrcode-content">
        <div class="manage-left">
          <div class="manage-input">
            <div class="input-title">1#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1208']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">2#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1210']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">3#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1212']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">4#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1214']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">5#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1216']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">6#无线传感器电池电压</div>
            <input type="text" disabled v-model="voltData['1218']"  placeholder="">
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-input">
            <div class="input-title">1#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1209']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">2#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1211']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">3#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1213']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">4#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1215']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">5#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1217']"  placeholder="">
          </div>
          <div class="manage-input">
            <div class="input-title">6#无线传感器信号质量</div>
            <input type="text" disabled v-model="voltData['1219']"  placeholder="">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="voltModel=false">确定</div>
        <div class="vrcode-btn cancle-btn w-100" @click="voltModel = false">取消</div>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import EZUIKit from 'ezuikit-js';
import { getnowtime } from '../../assets/js/nowTime'
import { realTimeLine, statusCharts } from '@/assets/js/charts'
import videojs from 'video.js';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import vueSeamless from 'vue-seamless-scroll'

export default {
    components: { vueSeamless },
    computed: {
        defaultOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        },
        defaultOption1() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    data() {
        return {
            sunrise: "00:00",
            sunset: "00:00",
            statusList: [],
            dataModel: false,//全部实时数据弹窗
            weatherModel: false,
            updateTime:'',
            time: null,//右上角时间
            list: [],
            inputData: [],
            indexs: 1,
            player: null,
            url: '',
            imgUrl: '',
            timer: null,
            deviceName: 1,
            deviceState: 1,
            controlList: [],
            statusInterval: null,//status状态的Interval
            statusTime: 2,//status状态的秒数

            allDevicestatus: [],//所有权限
            nowDevicestatus: [],//当前设备权限
            selDevicestatus: [],//重叠上面数组 判断选择弹窗是否打勾
            addModel: false,//添加弹窗

            warnModelSel1: '',
            warnModelSel2: '',
            warnModel: false,//短信报警弹窗
            deviceId: '',//当前打开的设备id
            warnForm: {
                "deviceId": '',
                "userId": '',
                "environmentData": '',
                "environmentId": '',
                "unit": '',
                "phonenumber": '',
                "phonenumber2": ''
            },
            tableData: [],
            //选择内容
            typeSelList: [],
            typeSelList1: [{ name: '大于(>)', value: 1, },
            { name: '小于(<)', value: 2, },
            { name: '大于等于(>=)', value: 3, },
            { name: '小于等于(<=)', value: 4, },],

            voltModel:false,//无线电池电压弹窗
            voltData:{},
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state
            this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
            this.deviceName = store.equipmentList[this.indexs - 1].deviceName
            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
            clearInterval(this.statusInterval) && this.statusInterval
            setTimeout(() => {

                if (this.player) {
                    this.player.stop()
                    that.player.destroy()
                    that.player = null
                }
                that.dataInit();


            }, 0);
        },
    },
    mounted() {
        const that = this;
        const store = this.$store.state
        this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
        this.deviceName = store.equipmentList[this.indexs - 1].deviceName
        this.deviceState = store.equipmentList[this.indexs - 1].deviceState
        // this.getTime()
       
      
        setTimeout(() => {
            that.dataInit();
            that.timer && clearInterval(that.timer)
            that.timer = setInterval(() => {
                that.dataInit();
            }, 60000);
        }, 0);

    },
    beforeDestroy() {
        const that = this;
        // 销毁播放器
        if (this.player) {
            // this.player.dispose();
            this.player.stop()
            this.player.destroy()
            this.player = null
        }
        clearInterval(this.statusInterval) && this.statusInterval
        that.timer && clearInterval(that.timer)
        this.$bus.$off('refreshTime')
    },
    methods: {
        openVolt(){
            this.voltModel=true
        },
        openDataModel() {
            this.dataModel = true
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'warning-row';
            } else if (rowIndex % 2 == 0) {
                return 'success-row';
            }
            return '';
        },
        delMessage(item) {
            var data = {
                messageId: item.id
            }
            this.api.delMessage(data).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '删除成功',
                        type: "success",
                    });
                    this.getMessageList()
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        getMessageList() {
            var data = {
                deviceId: this.warnForm.deviceId
            }
            this.api.messageList(data).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        addMessage() {
            this.api.addWarnMessage(this.warnForm).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '添加成功',
                        type: "success",
                    });
                    this.warnForm = {
                        'deviceId': this.warnForm.deviceId,
                        "userId": '',
                        "environmentData": '',
                        "environmentId": '',
                        "unit": '',
                        "phonenumber": '',
                        "phonenumber2": ''
                    }
                    this.warnModelSel1 = ''
                    this.warnModelSel2 = ''
                    this.getMessageList()
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        returnWarn() {
            this.warnForm = {
                'deviceId': this.warnForm.deviceId,
                "userId": '',
                "environmentData": '',
                "environmentId": '',
                "unit": '',
                "phonenumber": '',
                "phonenumber2": ''
            }
            this.warnModel = false
        },
        //打开短信告警弹窗
        openWarn() {
            this.warnForm = {
                'deviceId': '',
                "userId": '',
                "environmentData": '',
                "environmentId": '',
                "unit": '',
                "phonenumber": '',
                "phonenumber2": ''
            }
            var store = this.$store.state
            var userid = JSON.parse(localStorage.getItem('userInfo')).userid
            this.warnForm.userId = userid
            this.warnForm.deviceId = store.equipmentList[this.indexs - 1].deviceId
            this.getMessageList()
            this.warnModel = true
        },
        //类型选择
        handleCommand(index) {
            this.warnModelSel1 = this.typeSelList[index].name
            this.warnForm.environmentId = this.typeSelList[index].environmentId
            this.warnForm.equipmentNumber = this.typeSelList[index].equipmentNumber
            //   this.TypeSel = this.typeSelList[index].name
            //   this.TypeSelIndex = this.typeSelList[index].value
            //   var dataNum = {
            //     target: {
            //       value: this.TypeSelIndex,
            //     },
            //   };
            //   this.changeBtn(21657 + (this.indexs - 1), dataNum);
        },
        //类型选择1
        handleCommand1(index) {
            this.warnModelSel2 = this.typeSelList1[index].name
            this.warnForm.unit = this.typeSelList1[index].value
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        createVideoNew(accessToken) {
            // divW和divH是获取了父级宽高 使播放容器能铺满div
            let divW = this.$refs.monitor.clientWidth
            let divH = this.$refs.monitor.clientHeight
            this.player = new EZUIKit.EZUIKitPlayer({
                id: 'video-js', // 视频容器ID
                accessToken: accessToken,
                url: this.url,
                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
                template: 'security',
                useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
                plugin: ["talk"], // 加载插件，talk-对讲 非必填
                width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
            })
            
        },
        getIcon(item) {
            var index = item.index
            if (item.type == 3) {
                //加温水泵
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon3.png')
                } else {
                    return ''
                }

            } else if (item.type == 10) {
                //环流风扇
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon1.png')
                } else {
                    return ''
                }
            } else if (item.type == 4) {
                //地热风机
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon1.png')
                } else {
                    return ''
                }
            } else if (item.type == 9) {
                //高压微雾
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon.png')
                } else {
                    return ''
                }
            }
            else if (item.type == 11) {
                //湿帘泵
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon5.png')
                } else {
                    return ''
                }
            }
            else if (item.type == 7) {
                //除雪
                if (index == 0) {
                    return require('../../assets/img/fan-off.png')
                } else if (index == 1) {
                    return require('../../assets/img/status-icon2.png')
                } else {
                    return ''
                }
            }

        },
        getNumberStatus(item) {
            var index = item.index
            if (item.type == 2 || item.type == 5 || item.type == 6 || item.type == 12
                || item.type == 13 || item.type == 14 || item.type == 15 || item.type == 16) {
                //顶卷膜
                if (index == 0) {
                    return '静止状态'
                } else if (index == 1) {
                    return '正向打开中'
                } else if (index == 2) {
                    return '反向关闭中'
                } else {
                    return ''
                }
            }
            //  else if (item.type == 7) {
            //     //地热风机
            //     if (index == 0) {
            //         return '除雪关闭'
            //     } else if (index == 1) {
            //         return '除雪打开'
            //     } else {
            //         return ''
            //     }
            // }  else {
            //     //初始化
            //     if (index == 0) {
            //         return '关闭'
            //     } else if (index == 1) {
            //         return '打开'
            //     } else {
            //         return ''
            //     }
            // }

        },
        createVideo() {

            // 创建视频播放器
            videojs.addLanguage('zh-CN', video_zhCN)
            this.player = videojs(this.$refs.videoPlayer, {
                techOrder: ['html5', 'hls'], // 优先使用HTML5播放器，如果不支持，则使用HLS
                sources: [{
                    src: this.url, // 替换为您的.m3u8链接
                    type: 'application/x-mpegURL'
                }],
                autoplay: true, // 自动播放
                controls: true, // 显示控制条
                language: 'zh-CN'
            });
        },
        countData100(data) {
            var num = 0
            if (data) {
                num = data / 100
            } else {
                num = 0
            }
            return num
        },

        //16进制转为时间 16位无符号高字节是时，低字节是分
        convertToTimeMinutes(hexValue) {
            // 将十进制数转换为16进制字符串
            let hexString = hexValue.toString(16);

            // 补零，确保结果是4位16进制数
            while (hexString.length < 4) {
                hexString = "0" + hexString;
            }

            return hexString;
        },
        insertColonEveryTwoDigits(inputString) {
            // 使用正则表达式将字符串每两位切割
            const chunks = inputString.match(/.{1,2}/g);
            return chunks.join(":");
            // 使用join方法将切割后的数组元素用冒号连接起来
        },
        //countType计算类型 
        //0是原数据 
        //1是原数据-400 
        //2是原数据/10 
        //3是(原数据-400) / 10
        //4是(原数据-1000) / 10
        countType1(data) {
            var num = data - 400
            return num.toFixed(2)
        },
        countType2(data) {
            var num = data / 10
            return num.toFixed(2)
        },
        countType3(data) {

            var num = (data - 400) / 10
            return num.toFixed(2)
        },
        countType4(data) {
            var num = (data - 1000) / 10
            return num.toFixed(2)
        },
        //右上角数据过滤
        getControlData(item) {
            var x = item.environmentData
            var num = item.num
            if (item.formula == '12') {
                if (x < 22 || x > 337) {
                    return '北'
                } else if (x >= 22 && x <= 67) {
                    return '东北'
                } else if (x > 67 && x < 112) {
                    return '东'
                } else if (x >= 112 && x <= 157) {
                    return '东南'
                } else if (x > 157 && x < 202) {
                    return '南'
                } else if (x >= 202 && x <= 247) {
                    return '西南'
                } else if (x > 247 && x < 292) {
                    return '西'
                } else if (x >= 292 && x <= 337) {
                    return '西北'
                }
            } else {
                return num
            }
        },
        dataInit() {
            var store = this.$store.state
            var equipmentId = store.equipmentList[this.indexs - 1].deviceId
            // var data = {
            //     equipmentId: store.equipmentList[this.indexs - 1].deviceId,
            //     // pattern: 0, //需要根据文档填写 //6目标ph-数值
            //     // regNum: 73,
            // };
            var formData = {
                equipmentId: store.equipmentList[this.indexs - 1].deviceId
            }
            var selData={
                messageId:store.equipmentList[this.indexs - 1].deviceId
            }
            this.api.selnowmes(selData).then(res=>{
        
            if(res.data.code==200){
                this.typeSelList=res.data.data
            }
        })
            var list = store.typeList
            if (this.deviceName == 1) {
                this.api.postRtdata(equipmentId).then((res) => {
                    if (res.data.code == 200) {
                        this.inputData = res.data.data;
                        this.list = []
                
                        this.updateTime=res.data.data[0].updateTime
                        
                        this.inputData.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    var num = 0
                                    var name = ''
                                    //    if(el1.countType==1){
                                    //     num=this.countType1(el.environmentData)+el1.unit
                                    //    }else if(el1.countType==2){
                                    //     num=this.countType2(el.environmentData)+el1.unit
                                    //    }else if(el1.countType==3){
                                    //     num=this.countType3(el.environmentData)+el1.unit
                                    //    }else{
                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }
                                    //    }
                                    // if (el.equipmentNumber == 0) {
                                    //     if (el.targetValue == 1) {
                                    //         name = '1#目标' + el.environmentDataId
                                    //     } else {
                                    //         name = '1#平均' + el.environmentDataId
                                    //     }
                                    // } else if (el.equipmentNumber == 15) {
                                    //     if (el.targetValue == 1) {
                                    //         name = '2#目标' + el.environmentDataId
                                    //     } else {
                                    //         name = '2#平均' + el.environmentDataId
                                    //     }
                                    // } else {
                                    //     if (el.targetValue == 1) {
                                    //         name = el.equipmentNumber + '#目标' + el.environmentDataId
                                    //     } else {
                                    //         name = el.equipmentNumber + '#' + el.environmentDataId
                                    //     }
                                    // }
                                    // if (el.targetValue == 1) {
                                    //     name = '目标' + el.environmentDataId
                                    // } else {
                                    //     if (el.equipmentNumber == 0) {
                                    //         name = '1#平均' + el.environmentDataId
                                    //     } else if (el.equipmentNumber == 15) {
                                    //         name = '2#平均' + el.environmentDataId
                                    //     } else {
                                    //         name = el.equipmentNumber + '#' + el.environmentDataId
                                    //     }
                                    // }
                                    if (el.targetValue == 1) {
                                        if (el.equipmentNumber == 0) {
                                            name = '目标' + el.environmentDataId
                                        } else {
                                            name = '目标' + el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    } else {
                                        if (el.equipmentNumber == 0) {
                                            name = '1#平均' + el.environmentDataId
                                        } else if (el.equipmentNumber == 15) {
                                            name = '2#平均' + el.environmentDataId
                                        } else {
                                            name = el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    }


                                    this.list.push({
                                        ...el,
                                        name: name,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)

                                    })

                                }
                            })
                        })
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                });
                var data1 = store.equipmentList[this.indexs - 1].deviceId

                this.api.postFsdata(data1).then(res => {
                    if (res.data.code == 200) {
                        var chartsData = res.data.data
                        realTimeLine('realTime-line', chartsData, data1)
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                })
                var nowDevice = store.equipmentList[this.indexs - 1]
                var data2 = {
                    cameraid: nowDevice.cameraSerialNumber,
                    channelid: nowDevice.cameraChannelNumber
                }
                this.imgUrl = nowDevice.hls
                //当前没有设备 默认写死 后续有数据需要改回去
                // var data2 = {
                //     cameraid: 'L18357958',
                //     channelid: '1'
                // }
                if (!this.player) {
                 
                    // this.api.getGethls(data2).then(res => {
                    //     if (res.data.code == 200) {
                    //         this.url = res.data.data.ezopen
                    //         this.createVideoNew(res.data.data.accesstoken)
                    //     } else {
                        // this.imgUrl = nowDevice.hls
                    //     }
                    // })
                }

            } else if (this.deviceName == 10) {
                this.api.getControlRtdata(equipmentId).then((res) => {
                    if (res.data.code == 200) {
                        this.inputData = res.data.data;
                        this.list = []
                       
                        this.updateTime=res.data.data[0].updateTime
                        this.inputData.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    var num = 0
                                    var name = ''
                                    //    if(el1.countType==1){
                                    //     num=this.countType1(el.environmentData)+el1.unit
                                    //    }else if(el1.countType==2){
                                    //     num=this.countType2(el.environmentData)+el1.unit
                                    //    }else if(el1.countType==3){
                                    //     num=this.countType3(el.environmentData)+el1.unit
                                    //    }else{

                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }
                                    //    }
                                    if (el.targetValue == 1) {
                                        if (el.equipmentNumber == 0) {
                                            name = '目标' + el.environmentDataId
                                        } else {
                                            name = '目标' + el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    } else {
                                        if (el.equipmentNumber == 0) {
                                            name = '1#平均' + el.environmentDataId
                                        } else if (el.equipmentNumber == 15) {
                                            name = '2#平均' + el.environmentDataId
                                        } else {
                                            name = el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    }
                                    this.list.push({
                                        ...el,
                                        name: name,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)

                                    })

                                }
                            })
                        })
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                });
                this.api.getControlRtDatastation(formData).then(res => {
                    this.controlList = []
                    if (res.data.code == 200) {
                        res.data.data.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    // console.log(el1);
                                    var num = 0
                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }
                                    this.controlList.push({
                                        ...el,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
                                    })
                                }
                            })
                        })
                    }
                    // console.log(this.controlList);
                })

                this.getStatus()
                this.getStatePermissionStatus()
                clearInterval(this.statusInterval) && this.statusInterval
                this.statusInterval = setInterval(() => {
                    if (this.deviceName == 10) {
                        this.getStatus()
                    }
                }, this.statusTime * 1000);
                var data1 = store.equipmentList[this.indexs - 1].deviceId

                this.api.getControlFsdata(data1).then(res => {
                    if (res.data.code == 200) {
                        var chartsData = res.data.data
                        realTimeLine('realTime-line', chartsData, data1)
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                })
                var nowDevice = store.equipmentList[this.indexs - 1]
                var data2 = {
                    cameraid: nowDevice.cameraSerialNumber,
                    channelid: nowDevice.cameraChannelNumber
                }
                this.imgUrl = nowDevice.hls
                //当前没有设备 默认写死 后续有数据需要改回去
                // var data2 = {
                //     cameraid: 'L18357958',
                //     channelid: '1'
                // }
                if (!this.player) {
                    // this.imgUrl = nowDevice.hls
                    // this.api.getGethls(data2).then(res => {
                    //     // console.log(res.data, 11);
                    //     if (res.data.code == 200) {
                    //         this.url = res.data.data.ezopen
                    //         this.createVideoNew(res.data.data.accesstoken)
                    //     } else {
                    //         this.imgUrl = nowDevice.hls
                    //     }
                    // })
                }
            } else if (this.deviceName == 30) {
                this.api.getControlRtDatastation(formData).then(res => {
                    this.controlList = []
                      this.list = []
                    this.updateTime=res.data.data[0].updateTime
                    if (res.data.code == 200) {
                        res.data.data.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    // console.log(el1);
                                    var num = 0
                                    var name = ''
                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }

                                    this.list.push({
                                        ...el,
                                        name: el.environmentDataId,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
                                    })
                                    this.controlList.push({
                                        ...el,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
                                    })
                                }
                            })
                        })
                    }
                    // console.log(this.controlList);
                })
                this.api.getControlChartdata(equipmentId).then(res => {
                    if (res.data.code == 200) {
                        res.data.data.forEach((el, index) => {
                            var chartsData = res.data.data
                            realTimeLine('realTime-line', chartsData, equipmentId)
                        })
                    }
                })

            }else if(this.deviceName==20){
                this.api.getFi_rtdata(formData).then(res=>{
                    if (res.data.code == 200) {
                        this.inputData = res.data.data;
                        this.list = []
                
                        this.updateTime=res.data.data[0].updateTime
                        
                        this.inputData.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    var num = 0
                                    var name = ''
                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }
                                 
                                    if (el.targetValue == 1) {
                                        if (el.equipmentNumber == 0) {
                                            name = '目标' + el.environmentDataId
                                        } else {
                                            name = '目标' + el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    } else {
                                        if (el.equipmentNumber == 0) {
                                            name = '1#平均' + el.environmentDataId
                                        } else if (el.equipmentNumber == 15) {
                                            name = '2#平均' + el.environmentDataId
                                        } else {
                                            name = el.equipmentNumber + '#' + el.environmentDataId
                                        }
                                    }


                                    this.list.push({
                                        ...el,
                                        name: name,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)

                                    })

                                }
                            })
                        })
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                })
                this.api.getControlRtDatastation(formData).then(res => {
                    this.controlList = []
                    if (res.data.code == 200) {
                        res.data.data.forEach((el, index) => {
                            list.forEach((el1, index1) => {
                                if (el.formula == el1.value) {
                                    // console.log(el1);
                                    var num = 0
                                    if (el.equipmentStart == 0) {
                                        num = '故障'
                                    } else {
                                        num = el.environmentData + el1.unit
                                    }
                                    this.controlList.push({
                                        ...el,
                                        num: num,
                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
                                    })
                                }
                            })
                        })
                    }
                    // console.log(this.controlList);
                })
                var nowDevice = store.equipmentList[this.indexs - 1]
                // var data2 = {
                //     cameraid: nowDevice.cameraSerialNumber,
                //     channelid: nowDevice.cameraChannelNumber
                // }
                this.imgUrl = nowDevice.hls
                
                this.api.chart_fidata(equipmentId).then(res=>{
                    if (res.data.code == 200) {
                        var chartsData = res.data.data
                        realTimeLine('realTime-line', chartsData, data1)
                    } else {
                        // this.$message.error(res.data.msg);
                    }
                })
            }

        },
        //获取全部status数据
        getStatePermissionStatus() {
            this.api.getStatePermissionStatus().then(res => {
                if (res.data.code == 200) {
                    this.allDevicestatus = res.data.data
                    this.getPermissionStatus()
                }
            })
        },
        //获取当前设备的权限
        getPermissionStatus() {
            var store = this.$store.state
            var TargetValue = {
                deviceId: store.equipmentList[this.indexs - 1].deviceId
            }
            this.api.getPermissionStatus(TargetValue).then(res => {
                if (res.data.code == 200) {
                    this.nowDevicestatus = res.data.data
                    var list1 = this.allDevicestatus
                    var list2 = this.nowDevicestatus
                    var resultArray = []
                    // 遍历 list1
                    for (const item1 of list1) {
                        // 查找在 list2 中是否有相同 id 的对象
                        const matchingItem = list2.find(item2 => item2.id === item1.id);

                        // 如果找到匹配的对象，则在 list1 对应的对象中添加 select 属性
                        if (matchingItem) {
                            item1.select = true;
                        } else {
                            // 如果没找到匹配的对象，则添加 select 属性并设置为 false
                            item1.select = false;
                        }

                        // 将处理后的对象添加到结果数组中
                        resultArray.push(item1);
                    }
                    this.selDevicestatus = resultArray
                }
            })
        },
        selClick(item) {
            var store = this.$store.state
            var deviceId = store.equipmentList[this.indexs - 1].deviceId
            var statusId = item.id
            if (item.select) {
                item.select = false
                this.$forceUpdate();
                this.api.delPermissionStatus(deviceId, statusId).then((res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: "success",
                        });
                        this.getPermissionStatus()
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: "warning",
                        });
                    }
                }))
            } else {
                item.select = true
                this.$forceUpdate();
                this.api.addPermissionStatus(deviceId, statusId).then((res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: "success",
                        });
                        this.getPermissionStatus()
                    }
                }))
            }
        },
        //删除设备
        delStatus(item, index) {
            this.statusList[index].deltrue = false
            var store = this.$store.state
            var deviceId = store.equipmentList[this.indexs - 1].deviceId
            var statusId = item.id
            this.api.delPermissionStatus(deviceId, statusId).then((res => {
                if (res.data.code == 200) {
                    this.getPermissionStatus()
                }
            }))
        },
        //获取当前权限能看到的
        getStatus() {
            var store = this.$store.state
            var TargetValue = {
                deviceId: store.equipmentList[this.indexs - 1].deviceId
            }
            this.api.getControlGetState(TargetValue).then(res => {
                if (res.data.code == 200) {
                    this.voltData=res.data.data
                    this.voltData['1208']=this.countType2(res.data.data['1208'])
                    this.voltData['1209']=this.countType1(res.data.data['1209'])
                    this.voltData['1210']=this.countType2(res.data.data['1210'])
                    this.voltData['1211']=this.countType1(res.data.data['1211'])
                    this.voltData['1212']=this.countType2(res.data.data['1212'])
                    this.voltData['1213']=this.countType1(res.data.data['1213'])
                    this.voltData['1214']=this.countType2(res.data.data['1214'])
                    this.voltData['1215']=this.countType1(res.data.data['1215'])
                    this.voltData['1216']=this.countType2(res.data.data['1216'])
                    this.voltData['1217']=this.countType1(res.data.data['1217'])
                    this.voltData['1218']=this.countType2(res.data.data['1218'])
                    this.voltData['1219']=this.countType1(res.data.data['1219'])
                    if (res.data.data["1119"]) {
                        this.sunrise = this.insertColonEveryTwoDigits(
                            this.convertToTimeMinutes(res.data.data["1119"])
                        );
                    } else {
                        this.sunrise = ''
                    }
                    if (res.data.data["1120"]) {
                        this.sunset = this.insertColonEveryTwoDigits(
                            this.convertToTimeMinutes(res.data.data["1120"])
                        );
                    } else {
                        this.sunset = ''
                    }

                    const statusList = []
                    this.nowDevicestatus.forEach((el, index) => {
                        if (el.id == 1) {
                            //风机
                            var fandata = {}
                            fandata.open = res.data.data['1023']
                            fandata.id = el.id
                            fandata.type = 1
                            fandata.name = el.nickName
                            fandata.status = []
                            var num = res.data.data['1024'] ? res.data.data['1024'] : 0
                            var num1 = this.padString(num.toString(2), 5)
                            var openListNew = []
                            openListNew = num1.split("")
                            fandata.status = openListNew.reverse()
                            statusList.push(fandata)
                        } else if (el.id == 17) {
                            //风机
                            var fandata = {}
                            fandata.open = res.data.data['1078']
                            fandata.id = el.id
                            fandata.type = 1
                            fandata.name = el.nickName
                            fandata.status = []
                            var num = res.data.data['1079'] ? res.data.data['1079'] : 0
                            var num1 = this.padString(num.toString(2), 5)
                            var openListNew = []
                            openListNew = num1.split("")
                            fandata.status = openListNew.reverse()
                            statusList.push(fandata)
                        } else if (el.id == 12) {
                            //补光灯
                            var fandata = {}
                            fandata.open = res.data.data['1068']
                            fandata.id = el.id
                            fandata.type = 8
                            fandata.name = el.nickName
                            fandata.status = []
                            var num = res.data.data['1069'] ? res.data.data['1069'] : 0
                            var num1 = this.padString(num.toString(2), 8)
                            var openListNew = []
                            openListNew = num1.split("")
                            fandata.status = openListNew.reverse()
                            statusList.push(fandata)
                        } else if (el.id == 2 || el.id == 3 || el.id == 4 || el.id == 5) {
                            //顶卷膜
                            var statusData = { name: el.nickName, type: 2, id: el.id, open: res.data.data[(1025 + ((el.id - 2) * 3))], progress: res.data.data[(1027 + ((el.id - 2) * 3))], index: res.data.data[(1026 + ((el.id - 2) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 6) {
                            //加温水泵
                            var statusData = { name: el.nickName, type: 3, id: el.id, open: res.data.data['1000'], progress: 0, index: res.data.data['1001'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 7) {
                            //地热风机
                            var statusData = { name: el.nickName, type: 4, id: el.id, open: res.data.data['1002'], progress: 0, index: res.data.data['1003'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 8) {
                            //上风口
                            var statusData = { name: el.nickName, type: 5, id: el.id, open: res.data.data['1004'], progress: res.data.data['1006'], index: res.data.data['1005'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 9) {
                            //下风口
                            var statusData = { name: el.nickName, type: 5, id: el.id, open: res.data.data['1007'], progress: res.data.data['1009'], index: res.data.data['1008'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 10) {
                            //卷被
                            var statusData = { name: el.nickName, type: 6, id: el.id, open: res.data.data['1010'], progress: res.data.data['1012'], index: res.data.data['1011'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 11) {
                            //除雪
                            var statusData = { name: el.nickName, type: 7, id: el.id, open: res.data.data['1013'], progress: 0, index: res.data.data['1014'], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 13 || el.id == 14) {
                            //高压微雾
                            var statusData = { name: el.nickName, type: 9, id: el.id, open: res.data.data[(1070 + ((el.id - 13) * 2))], progress: 0, index: res.data.data[(1071 + ((el.id - 13) * 2))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 15 || el.id == 16) {
                            //环流风扇
                            var statusData = { name: el.nickName, type: 10, id: el.id, open: res.data.data[(1074 + ((el.id - 15) * 2))], progress: 0, index: res.data.data[(1075 + ((el.id - 15) * 2))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 18 || el.id == 19) {
                            //湿帘泵
                            var statusData = { name: el.nickName, type: 11, id: el.id, open: res.data.data[(1080 + ((el.id - 18) * 2))], progress: 0, index: res.data.data[(1081 + ((el.id - 18) * 2))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 20 || el.id == 21) {
                            //湿帘外翻窗
                            var statusData = { name: el.nickName, type: 12, id: el.id, open: res.data.data[(1084 + ((el.id - 20) * 3))], progress: res.data.data[(1086 + ((el.id - 20) * 3))], index: res.data.data[(1085 + ((el.id - 20) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 22 || el.id == 23) {
                            //内遮阳
                            var statusData = { name: el.nickName, type: 13, id: el.id, open: res.data.data[(1090 + ((el.id - 22) * 3))], progress: res.data.data[(1092 + ((el.id - 22) * 3))], index: res.data.data[(1091 + ((el.id - 22) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 24 || el.id == 25) {
                            //外遮阳
                            var statusData = { name: el.nickName, type: 14, id: el.id, open: res.data.data[(1096 + ((el.id - 24) * 3))], progress: res.data.data[(1098 + ((el.id - 24) * 3))], index: res.data.data[(1097 + ((el.id - 24) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 26 || el.id == 27 || el.id == 28 || el.id == 29) {
                            //通风窗1234
                            var statusData = { name: el.nickName, type: 15, id: el.id, open: res.data.data[(1102 + ((el.id - 26) * 3))], progress: res.data.data[(1104 + ((el.id - 26) * 3))], index: res.data.data[(1103 + ((el.id - 26) * 3))], count: res.data.data[1115 + (el.id - 26)] }
                            statusList.push(statusData)
                        } else if (el.id == 30 || el.id == 31) {
                            //内保温
                            var statusData = { name: el.nickName, type: 16, id: el.id, open: res.data.data[(1182 + ((el.id - 30) * 3))], progress: res.data.data[(1184 + ((el.id - 30) * 3))], index: res.data.data[(1183 + ((el.id - 30) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id == 32 || el.id == 33) {
                            //通风窗56
                            var statusData = { name: el.nickName, type: 15, id: el.id, open: res.data.data[(1188 + ((el.id - 32) * 3))], progress: res.data.data[(1190 + ((el.id - 32) * 3))], index: res.data.data[(1189 + ((el.id - 32) * 3))], count: res.data.data[1194 + (el.id - 32)] }
                            statusList.push(statusData)
                        } else if (el.id == 34 || el.id == 35|| el.id == 36|| el.id == 37) {
                            //立面保温1234
                            var statusData = { name: el.nickName, type: 16, id: el.id, open: res.data.data[(1196 + ((el.id - 34) * 3))], progress: res.data.data[(1198 + ((el.id - 34) * 3))], index: res.data.data[(1197 + ((el.id - 34) * 3))], count: 0 }
                            statusList.push(statusData)
                        } else if (el.id ==38) {
                            //空调
                            var statusData = { name: el.nickName, type:11, id: el.id, open: res.data.data['1160'], progress: 0, index: res.data.data['1161'], count: res.data.data['1162'] }
                            statusList.push(statusData)
                        }

                    })

                    this.statusList = statusList
                    this.$forceUpdate();

                    setTimeout(() => {

                        this.statusList.forEach((el, index) => {
                            if (el.open != 0 && (el.type == 6 || el.type == 5 || el.type == 2 || el.type == 15 || el.type == 14 ||el.type == 16 || el.type == 13 || el.type == 12)) {

                                setTimeout(() => {
                                    statusCharts(`statusCharts${index}`, el.progress)
                                }, 0);
                            }
                        })
                    }, 10);

                } else {
                    this.statusList = []

                    this.$forceUpdate();
                    // this.$message.error(res.data.msg);
                }
            })
        },
        getTime() {
            this.time = getnowtime()
            const that = this
            setInterval(() => {
                that.time = getnowtime()
            }, 1000);
        },
    },

}
</script>

<style lang="scss">
.video-js-select-quality-item {
    color: rgba(0, 0, 0, 0.85) !important;
}

.set-status-blue {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 0;
}

.set-status-red {
    color: red;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 0;
}

.del-text {
    color: #000;
    font-size: 14px;
}

.color-blue {
    span {
        color: #409eff;
        font-size: 14px;
    }
}

.status-save {
    width: 45px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
}
</style>