liyuezong
/
SmartPDCode


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--<meta http-equiv="refresh" content="0; url=/src/index2.html">-->
  <!-- 0表示立即跳转 -->
  <script src="api/petite-vue.min.js" defer></script>
  <!--<script src="./api/axios.min.js"></script>-->
  <script src="api/data.js"></script>
  <script src="api/ws.js"></script>
  <script src="api/display_data.js"></script>
  <script src="api/operation.js"></script>
  <script src="api/channel_display.js"></script>
  <!--<script src="./api/pagination.js"></script>-->
  <!--<script src="./api/Threshold_Adjust.js"></script>-->
  <!--<script src="./api/system_alarm.js"></script>-->
  <script src="api/sys_paras.js"></script>
  <!-- CSS 文件 -->
  <link rel="stylesheet" href="css/index.css">


</head>
<body>
<div class="tab-container">
  <div class="tab-header">
    <button class="tab-btn active" style="margin-left: 30%;" data-tab="tab1">状态监控</button>
    <button class="tab-btn" data-tab="tab2">⽹络配置</button>
    <button class="tab-btn" data-tab="tab3">485配置</button>
    <button class="tab-btn" data-tab="tab4">SNMP</button>
    <button class="tab-btn" data-tab="tab5">设备信息</button>
    <span style="text-align: center;line-height: 50px;margin-left: 20%;">{{dateTime}}</span>
  </div>

  <div class="tab-content active" id="tab1">
    <!--<iframe class="tab-iframe" src="/src/pdu.html"></iframe>-->
    <div id="app" @vue:mounted="fetchData"   class="container">
      <!-- 上部：总设备信息 -->

      <div class="summary-section">
          <div  class="left-buttons">
            <button  v-show="showExternal" @click="toggleThreeDevices(1)" class="btn  btn-energy">L1</button>
            <button  v-show="showExternal" @click="toggleThreeDevices(2)" class="btn btn-threshold">L2</button>
            <button  v-show="showExternal" @click="toggleThreeDevices(3)" class="btn btn-delay">L3</button>
          </div>
          <div  class="button-container">
            <div class="left-buttons">
              <button @click="showFzszModal = true;" class="btn btn-threshold">阈值设置</button>
              <button @click="showysszModal=true" class="btn btn-delay">延时设置</button>
              <button @click=" hdlsz()" class="btn btn-energy">耗电量重置</button>
            </div>
            <div  class="right-buttons">
              <button @click="toggleAllDevices(true)" class=" btn btn-energy">总开</button>
              <button @click="toggleAllDevices(false)" class="btn btn-close">总关</button>
            </div>
          </div>


        <table class="summary-table">
          <thead>
          <tr>
            <th>总电压(V)</th>
            <th>总电流(A)</th>
            <th>总功率(KW)</th>
            <!--<th>总频率(HZ)</th>-->
            <th>总耗电量(Kwh)</th>
          </tr>
          </thead>
          <tbody style="height: 50px;">
          <tr>
            <td>{{ summary.totalVoltage }}</td>
            <td>{{ summary.totalCurrent }}</td>
            <td >{{ summary.totalPower }}</td>
            <!--<td >{{ summary.totalFrequency }}</td>-->
            <td >{{ summary.totalEnergy }}</td>
          </tr>
          </tbody>
        </table>
        <div class="summary-actions">


        </div>
      </div>

      <!-- 中部：设备管理列表 -->
      <div class="table-container">
        <div class="scrollable-table">
          <table class="device-table">
            <thead>
            <tr>
              <th>通道名称</th>
              <th>相序</th>
              <th>电压(V)</th>
              <th>电流(A)</th>
              <th>功率(W)</th>
              <th>频率(HZ)</th>
              <th>耗电量(Kwh)</th>
              <th>开启延时(S)</th>
              <th>关闭延时(S)</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="device in channelList">
              <td >{{ device.productChName }}</td>
              <td >{{ device.productPhOrder }}</td>
              <td v-if="device.colorStyledy!=''" :style="device.colorStyledy">{{ device.productChVoltage }}</td>
              <td v-else  :style="device.colorStyledy2">{{ device.productChVoltage }}</td>
              <td :style="device.colorStyledl">{{ device.productChCurrent }}</td>
              <td  :style="device.colorStylegl">{{ device.productChPower }}</td>
              <td>{{ device.productChPowerFreq }}</td>
              <td :style="device.colorStylehdl">{{ device.productChConsumption }}</td>
              <td >{{ device.firingInterval }}</td>
              <td >{{ device.closeInterval }}</td>
              <td :class="device.productChStatus ? 'status-active' : 'status-inactive'">
                {{ device.productChStatus==1 ? '接通' : '断开' }}
              </td>
              <td>
                <button @click="toggleDeviceStatus(device)"
                        :class="device.productChStatus ? 'btn  btn-close' : 'btn btn-on'">
                  {{ device.productChStatus==1 ? '关闭' : '开启' }}
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>

      <!-- 下部：状态显示 -->
      <div class="status-section">
        <div class="status-boxes">
          <div class="status-box">
            <h3>温度</h3>
            <p v-if="statusData.temperatureStatus==0" style="color: red">{{ statusData.temperature }}</p>
            <p v-else :style="statusData.tempcolorStyle">{{ statusData.temperature }} </p>
          </div>
          <div class="status-box">
            <h3>湿度</h3>
            <p v-if="statusData.temperatureStatus==0" style="color: red">{{ statusData.humidity }}</p>
            <p v-else :style="statusData.humcolorStylesx">{{ statusData.humidity }} </p>

          </div>
          <div class="status-box">
            <h3>烟雾</h3>
            <p v-if="statusData.waterLeakStatus==0" style="color: red">{{ statusData.waterLeak }}</p>
            <p v-else>{{ statusData.waterLeak }} </p>
          </div>
          <div class="status-box">
            <h3>CO2</h3>
            <p v-if="statusData.smokeStatus==0" style="color: red">{{ statusData.smoke }}</p>
            <p v-else :style="statusData.smokecolorStylesx">{{ statusData.smoke }} </p>
          </div>
          <div class="status-box"  @click="showFzszModalgj=true" style=" cursor: pointer;  position: relative;    ">
            <h3>报警</h3>
            <p>{{ statusData.alarm1 }}</p>
          </div>
        </div>
      </div>
      <!-- 耗电量设置弹窗内容 -->
      <div v-if="showFormModal" class="modal-overlay"  >
        <div class="modal-content">
          <h2>耗电量重置</h2>
          <!-- 下拉选择 -->
          <div class="form-group" >
            <label>通道:</label>
            <div class="select-header">
              <p class="hint">提示：使用Ctrl/Cmd键进行多选</p>
              <button class="select-all" @click="toggleSelectAll2">
                {{ formData.productChIds.length === Object.keys(channelList1).length  ? '取消全选' : '全选' }}
              </button>
            </div>
            <select v-model="formData.productChIds" multiple  >
              <option    v-for="option in  channelList1" :value="option.productChId">{{ option.productChName }}</option>
            </select>

            <div class="selected-items">
              <h3>已选通道：</h3>
              <div class="selected-tags">
                <span v-if="formData.productChIds.length === 0" class="no-selection">暂无选择</span>
                <div v-for="id in formData.productChIds" :key="id" class="tag">
                  {{ getOptionName2(id) }}
                  <button @click="removeOption2(id)">×</button>
                </div>
              </div>
            </div>
            <!--<label>通道:</label>-->
            <!--<select   v-model="formData.channel_power_infro"  class="custom-select">-->
              <!--<option :value="null" disabled selected hidden style="color: #aaa;">请选择耗电量复位通道...</option>-->
              <!--<option   v-for="option in  channelList1" :value="option.channel_power_infro">{{ option.productChName }}</option>-->
            <!--</select>-->
          </div>
          <!-- 表单按钮 -->
          <div class="form-actions">
            <button type="button"  class="btn  btn-energy" @click="hdlczClickClose()">取消</button>
            <button  class="btn  btn-energy" @click="hdlczClick()"  >提交</button>
          </div>
        </div>
      </div>

      <!-- 阈值设置弹窗内容 -->
      <div @vue:mounted="fzszData"  v-if="showFzszModal" class="modal-overlay"  >
        <div class="modal-content" style="max-width: 100%;overflow-y: hidden">
          <h2>阈值设置</h2>
          <button @click="handleUpdateList()" style="margin: 10px;" :class="   'btn btn-on'">批量设置 </button>
          <div class="scrollable-table" style="    max-height: 60vh; ">
            <table class="device-table">
              <thead>
              <tr>
                <th>通道名称</th>
                <th>通道号</th>
                <th>电流上限</th>
                <th>电压上限</th>
                <th>电压下限</th>
                <th>功率上限</th>
                <th>耗电量上限</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="power in powerThresholdList" :key="power.productChId">
                <td>{{ power.productChName }}</td>
                <td>{{ power.productChId }}</td>
                <td>{{ power.currentUpperAction }}</td>
                <td>{{ power.voltageUpperAction }}</td>
                <td>{{ power.voltageDownAction }}</td>
                <td>{{ power.powerUpperAction }}</td>
                <td>{{ power.alarmContentUpperAction }}</td>
                <td>
                  <button @click="handleUpdate(power)" :class="   'btn btn-on'">
                    {{   '设置'   }}
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- 表单按钮 -->
          <div class="button-footer form-actions">
            <button type="button"  class="btn  btn-energy" @click="fzscClickClose()">取消</button>
          </div>
        </div>
      </div>

      <!-- 阈值设置单设备弹窗内容 -->
      <div v-if="showFzszModal2" class="modal-overlay"  >
        <div class="modal-content">
          <div class="form-group" v-if="fzscData.list=='1'" >
            <label>通道:</label>
            <div class="select-header">
              <p class="hint">提示：使用Ctrl/Cmd键进行多选</p>
              <button class="select-all" @click="toggleSelectAll">
                {{ fzscData.productChIds.length === Object.keys(channelList1).length  ? '取消全选' : '全选' }}
              </button>
            </div>
            <select v-model="fzscData.productChIds" multiple  >
              <option    v-for="option in  channelList1" :value="option.productChId">{{ option.productChName }}</option>
            </select>

            <div class="selected-items">
              <h3>已选通道：</h3>
              <div class="selected-tags">
                <span v-if="fzscData.productChIds.length === 0" class="no-selection">暂无选择</span>
                <div v-for="id in fzscData.productChIds" :key="id" class="tag">
                  {{ getOptionName(id) }}
                  <button @click="removeOption(id)">×</button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group"  v-if="fzscData.list==''">
            <label>通道号:</label>
            <input type="text" v-model="fzscData.productChId"  readonly >
          </div>
          <div class="form-group" >
            <label>电流上限:</label>
            <input type="text" v-model="fzscData.currentUpperAction">
          </div>
          <div class="form-group" >
            <label>电压上限:</label>
            <input type="text" v-model="fzscData.voltageUpperAction">
          </div>
          <div class="form-group" >
            <label>电压下限:</label>
            <input type="text" v-model="fzscData.voltageDownAction">
          </div>
          <div class="form-group" >
            <label>功率上限:</label>
            <input type="text" v-model="fzscData.powerUpperAction">
          </div>
          <div class="form-group" >
            <label>耗电量上限:</label>
            <input type="text" v-model="fzscData.alarmContentUpperAction">
          </div>
          <!-- 表单按钮 -->
          <div class="form-actions">
            <button  class="btn  btn-energy" @click="fzscClick()"  >提交</button>
            <button type="button"  class="btn  btn-energy" @click="fzscClickClose2()">取消</button>
          </div>
        </div>
      </div>

      <!-- 延时设置列表 -->
      <div @vue:mounted="ysszData"  v-if="showysszModal" class="modal-overlay"  >
        <div class="modal-content" style="max-width: 100%;overflow-y: hidden">
          <h2>延时设置</h2>
          <div class="scrollable-table" style="    max-height: 60vh; ">
            <table class="device-table">
              <thead>
              <tr>
                <th>通道名称</th>
                <th>通道号</th>
                <th>开启时间</th>
                <th>关闭时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="power in ysszList" :key="power.productChId">
                <td>{{ power.productChName }}</td>
                <td>{{ power.productChId }}</td>
                <td>{{ power.firingInterval }}</td>
                <td>{{ power.closeInterval }}</td>
                <td>
                  <button @click="ysszhandleUpdate(power)" :class="   'btn btn-on'">
                    {{   '设置'   }}
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- 表单按钮 -->
          <div class="button-footer form-actions">
            <button type="button"  class="btn  btn-energy" @click="ysszClickClose()">取消</button>
          </div>
        </div>
      </div>
      <!-- 延时设置内容  -->
      <div v-if="showysszModal2" class="modal-overlay2"   >
        <div class="modal-content">
          <div class="form-group" >
            <label>通道号:</label>
            <input type="text" v-model="ysszData2.productChId"  readonly >
          </div>
          <div class="form-group" >
            <label>开启时间(S):</label>
            <input type="text" v-model="ysszData2.firingInterval">
          </div>
          <div class="form-group" >
            <label>关闭时间(S):</label>
            <input type="text" v-model="ysszData2.closeInterval">
          </div>

          <!-- 表单按钮 -->
          <div class="form-actions">
            <button  class="btn  btn-energy" @click="ysszClick()"  >提交</button>
            <button type="button"  class="btn  btn-energy" @click="ysszClickClose2()">取消</button>
          </div>
        </div>
      </div>

      <!--告警信息弹窗-->
      <div    v-if="showFzszModalgj" class="modal-overlay"  >
        <div class="modal-content" style="max-width: 100%;overflow-y: hidden">
          <div class="scrollable-table" style="    max-height: 60vh; ">
            <table class="device-table">
              <thead>
              <tr>
                <th>序号</th>
                <th>报警时间</th>
                <th>报警类型</th>
                <th>报警信息</th>
              </tr>
              </thead>
              <tbody>
              <tr  v-for="(item, index) in his_alarmd" :key="index">
                <td>{{  item.number   }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.waning_context }}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- 表单按钮 -->
          <div class="button-footer form-actions">
            <button type="button"  class="btn  btn-energy" @click="fzscClickClosegj()">取消</button>
          </div>
        </div>
      </div>

    </div>

  </div>
<!--网络配置-->
  <div   class="tab-content" id="tab2"  @vue:mounted="wkszQuery">
    <div   >
      <div class="modal-content">
        <div class="form-group" >
          <label>选择模式:</label>
            <select   v-model="wlszForm.mode"  class="custom-select">
              <option :value="null" disabled selected hidden style="color: #aaa;">请选择...</option>
              <option   v-for="option in  modes" :value="option.id">{{ option.name }}</option>
            </select>
          </div>
        <div class="form-group" >
          <label>IP:</label>
          <input type="text" v-model="wlszForm.ipaddr"        >
        </div>
        <div class="form-group" >
          <label>掩码:</label>
          <input type="text" v-model="wlszForm.mask"  >
        </div>
        <div class="form-group" >
          <label>网关:</label>
          <input type="text" v-model="wlszForm.gateway" >
        </div>
        <div class="form-group" >
          <label>DNS1:</label>
          <input type="text" v-model="wlszForm.dns1" >
        </div>
        <div class="form-group" >
          <label>DNS2:</label>
          <input type="text" v-model="wlszForm.dns2"  >
        </div>
        <!--<div class="form-group" >-->
          <!--<label>DHCP:</label>-->
          <!--<input type="text" v-model="wlszForm.dhcp"  >-->
        <!--</div>-->
        <!-- 表单按钮 -->
        <div class="form-actions">
          <button  class="btn  btn-energy" @click="submitForm('wksz')" >确定</button>
        </div>
      </div>
    </div>
  </div>
  <!--485配置-->
  <div class="tab-content" id="tab3" @vue:mounted="rsQuery">
    <div class="modal-content">
        <div class="form-group" >
          <select   v-model="wlszForm2.mode"  class="custom-select">
            <option :value="null" disabled selected hidden style="color: #aaa;">请选择耗电量复位通道...</option>
            <option   v-for="option in  modes2" :value="option.id">{{ option.name }}</option>
          </select>
        </div>
        <div class="form-group" >
        <label>地址:</label>
        <input type="text" v-model="wlszForm2.addr"      >
      </div>
      <div class="form-group" >
        <label>波特率:</label>
        <input type="text" v-model="wlszForm2.baud"  >
      </div>

      <!-- 表单按钮 -->
      <div class="form-actions">
        <button  class="btn  btn-energy" @click="submitForm('rs')" >确定</button>
      </div>
    </div>
  </div>
  <!--SNMP配置-->
  <div class="tab-content" id="tab4" >
    <div class="modal-content">
      <div class="form-group" >
        <label>社团项:</label>
        <input type="text" v-model="wlszForm3.publics"    >
      </div>
        <!--<div class="form-group" >-->
          <!--<label>Trap IP:</label>-->
          <!--<select   v-model="wlszForm3.version" @change="handleChange"   class="custom-select">-->
            <!--<option :value="null" disabled selected hidden style="color: #aaa;">请选择...</option>-->
            <!--<option   v-for="option in  SNMPs" :value="option.id">{{ option.name }}</option>-->
          <!--</select>-->
        <!--</div>-->
      <div class="form-group"  >
        <label>Trap IP:</label>
        <input type="text" v-model="wlszForm3.trap_ip"  >
      </div>
      <!--<div class="form-group"  v-if="snmpShow">-->
        <!--<label>用户名:</label>-->
        <!--<input type="text" v-model="wlszForm3.yhm"  >-->
      <!--</div>-->
      <!--<div class="form-group" v-if="snmpShow">-->
        <!--<label>认证协议:</label>-->
        <!--<select   v-model="wlszForm3.mode"  class="custom-select">-->
          <!--<option :value="null" disabled selected hidden style="color: #aaa;">请选择...</option>-->
          <!--<option   v-for="option in  rzxys" :value="option.id">{{ option.name }}</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--<div class="form-group" v-if="snmpShow">-->
        <!--<label>认证密码:</label>-->
        <!--<input type="text" v-model="wlszForm3.rzmm"  >-->
      <!--</div>-->
      <!--<div class="form-group" v-if="snmpShow">-->
        <!--<label>加密协议:</label>-->
        <!--<select   v-model="wlszForm3.trapmode"  class="custom-select">-->
          <!--<option :value="null" disabled selected hidden style="color: #aaa;">请选择...</option>-->
          <!--<option   v-for="option in  jmxys" :value="option.id">{{ option.name }}</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--<div class="form-group" v-if="snmpShow">-->
        <!--<label>加密密码:</label>-->
        <!--<input type="text" v-model="wlszForm3.jmmm"   >-->
      <!--</div>-->
      <!-- 表单按钮 -->
      <div class="form-actions">
        <button  class="btn  btn-energy" @click="submitForm('snmp')" >确定</button>
      </div>
    </div>
  </div>
  <!--设备信息-->
  <div class="tab-content" id="tab5" >
    <!--<iframe class="tab-iframe" src="/src/sbsz.html"></iframe>-->
    <div class="divAll" >
      <!--设备信息-->
      <div class="modal-content" @vue:mounted="sbxxQuery">
        <div class="form-group" >
          <label>系统时间:</label>
          <input type="text" style="width: 70%" v-model="wlszForm4.sys_time"  >
          <button style="margin-left: 10px;" class="btn  btn-energy"  @click="showXtsjModalClick()">设置</button>
        </div>
        <div class="form-group" >
          <label>固件版本:</label>
          <input type="text" style="width: 70%" v-model="wlszForm4.ver"  >
          <!--<button style="margin-left: 10px;" class="btn  btn-energy" @click="showFjscModalClick()" >升级</button>-->
        </div>

      </div>

      <!--设备系统时间设置-->
      <div v-if="showXtsjModal" class="modal-overlay2"   >
        <div class="modal-content"   >
          <h2>时间设置</h2>
          <!-- 下拉选择 -->
          <div class="form-group" >
            <label>时区:</label>
            <select   v-model="wlszForm4.tzone"  class="custom-select">
              <option :value="null" disabled selected hidden style="color: #aaa;">请选择...</option>
              <option   v-for="option in  sqs" :value="option.id">{{ option.name }}</option>
            </select>
          </div>
          <div class="form-group" >
            <label for="selectedDate">选择日期:</label>
            <div class="date-input-container">
              <input
                      v-model="wlszForm4.sys_time"
                      type="text"
                      id="selectedDate"
                      class="date-input"
                      placeholder="点击选择日期"
                      @click="showPicker"
              >
              <div class="calendar-icon">
                <i class="fas fa-calendar-alt"></i>
              </div>
            </div>

            <!--<div class="datetime-modal" v-if="isPickerVisible">-->
            <div class="modal-overlay2" v-if="isPickerVisible">
              <div class="modal-content">
                <div class="form-group" >
                  <label>日期:</label>
                  <select   v-model="dateForm.year" style="width: 25%"  >
                    <option   v-for="option in  years" :value="option.id">{{ option.name }}</option>
                  </select>
                  <select   v-model="dateForm.month" @change="updateDays"  style="width: 25%"  >
                    <option   v-for="option in  months" :value="option.id">{{ option.name }}</option>
                  </select>
                  <select   v-model="dateForm.day"  style="width: 25%" >
                    <option   v-for="option in  dayAll" :value="option.id">{{ option.name }}</option>
                  </select>
                </div>
                <div class="form-group" >
                  <label>时间:</label>
                  <select   v-model="dateForm.hour" style="width: 25%"  >
                    <option   v-for="option in  hours" :value="option.id">{{ option.name }}</option>
                  </select>
                  <select   v-model="dateForm.minute"  style="width: 25%"  >
                    <option   v-for="option in  minutes" :value="option.id">{{ option.name }}</option>
                  </select>
                  <select   v-model="dateForm.second"  style="width: 25%" >
                    <option   v-for="option in  minutes" :value="option.id">{{ option.name }}</option>
                  </select>
                </div>
                <button class="btn  btn-energy" @click="confirmSelection"> 确认 </button>
                <button class="btn  btn-energy" @click="isPickerVisible = false">取消 </button>
              </div>
            </div>
          </div>
          <!-- 表单按钮 -->
          <div class="form-actions"  >
            <button  class="btn  btn-energy" @click="stxjClick()"  >提交</button>
            <button type="button"  class="btn  btn-energy" @click="showXtsjModal=false">取消</button>
          </div>
        </div>
      </div>

      <!--附件上传-->
      <div v-if="showScfjModal" class="modal-overlay2"   >
        <div class="upload-container" style="    background: white;width: 400px">
          <div class="form-group" >
            <label>固件版本:</label>
            <input type="text" style="width: 100%" v-model="wlszForm5.ver"  >
          </div>
          <div class="upload-area"
               :class="{ dragover: isDragover }"
               @click="selectFiles"
               @dragover.prevent="isDragover = true"
               @dragleave="isDragover = false"
               @drop.prevent="handleDrop">

            <div class="upload-text">
              <h3>拖放文件到此处上传或选择文件</h3>
              <!--<p>支持单个或多个文件上传，最大支持200MB</p>-->
            </div>

            <input type="file" class="file-input" multiple @change="handleFileSelect" ref="fileInput">

          </div>

          <div class="files-list" v-if="files.length > 0">
            <h3>已选择文件 ({{ files.length }})</h3>

            <div class="file-item" v-for="file in files" :key="file.id">

              <div class="file-info">
                <div class="file-name">{{ file.name }}</div>
              </div>

            </div>
          </div>
          <div class="actions">
            <button class="btn" @click="uploadFiles" :disabled="files.length === 0 || isUploading || wlszForm5.ver==''">
              <i class="fas fa-upload"></i> 保存
            </button>
            <button class="btn btn-secondary" @click="clearFiles" >
              <i class="fas fa-times"></i> 取消
            </button>
          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- 保存确认弹框 -->
  <div class="modal-overlay2" v-if="showSaveModal">
    <div class="modal-content">
      <h2>系统提示</h2>
      <p>{{popMessage}}</p>
      <div class="form-actions">
        <button class="btn  btn-energy" @click="showSaveModal = false">取消</button>
        <button class="btn  btn-energy" @click="saveData12()">确定</button>
      </div>
    </div>
  </div>
</div>
<script type="module">
    let activePageIntervalId1 = null;
    let activePageIntervalId2= null;
    let activePageIntervalId3 = null;
    let activePageIntervalId4 = null;
    let activePageIntervalId5 = null;
    let tabId = 'tab1';
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有按钮和内容的active类
                tabBtns.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));

                // 为当前按钮添加active类
                this.classList.add('active');

                // 显示对应的内容
                tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
                if(tabId=='tab1'){
                    function1();
                }else if(tabId=='tab2'){
                    function2();
                }else if(tabId=='tab3'){
                    function3();
                }else if(tabId=='tab4'){
                    function4();
                }else if(tabId=='tab5'){
                    function5();
                }
            });
        });

        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const app =  PetiteVue.createApp({
            snmpShow:false,
            showXtsjModal:false,
            productType:"",
            productId:"",
            productNumber:"",
            channelList1:[],
            ysszList:[],
            ysszData2:{},
            timeData:{},
            popMessage:'',
            dateTime:'',
            systemTime:'',
            wlszForm:{
                mode:'',
                ipaddr:'',
                mask:'',
                gateway:'',
                dns1:'',
                dns2:'',
                dhcp:'',
                type:''
            },
            wlszForm2:{
                mode:'',
                addr:'',
                baud:''
            },
            wlszForm3:{
                mode:'',
                publics:'',
                version:'',
                yhm:'',
                rzmm:'',
                trapmode:'',
                jmmm:'',
                trap_ip:'',
            },

            readonlyvalidate: false,
            showSaveModal: false,
            showDeleteModal: false,
            message: '',
            messageType: '',
            popType: '',
            popMessage:'',
            modes:[{"id":0,"name":"自动"},{"id":1,"name":"手动"}],
            modes2:[{"id":0,"name":"主机模式"},{"id":1,"name":"从机模式"}],
            SNMPs:[{"id":"SNMP V1","name":"SNMP V1"},{"id":"SNMP V2c","name":"SNMP V2c"},{"id":"SNMP V3","name":"SNMP V3"}],
            rzxys:[{"id":"MD5","name":"MD5"},{"id":"SHA","name":"SHA"},{"id":"SHA-224","name":"SHA-224"},{"id":"SHA-256","name":"SHA-256"},{"id":"SHA-384","name":"SHA-384"},{"id":"SHA-512","name":"SHA-512"}],
            jmxys:[{"id":"0","name":"无"},{"id":"DES","name":"DES"},{"id":"AES","name":"AES"}],
            async stxjClickClose(){
                this.showXtsjModal=false
            },

            async wkszQuery(){

            },
            async rsQuery(){

            },

            async  submitForm(type){
                this.showSaveModal = true
                this.popMessage="确认要提交吗？";
                if(type=='wksz'){
                    this.saveDataAll=this.wlszForm;
                    this.popType='wksz';
                    this.saveDataAll.len=241
                }else if(type=='rs'){
                    this.saveDataAll=this.wlszForm2;
                    this.saveDataAll.len=6;
                    this.popType='rs';
                }else if(type=='snmp'){
                    this.saveDataAll=this.wlszForm3;
                    this.saveDataAll.len=45
                    this.popType='snmp';
                }

            },

            async saveData12(){
                if(this.popType=='wksz'){
                    network_settings(this.saveDataAll)
                }else if(this.popType=='rs'){
                    modbus_settings(this.saveDataAll)
                }else if(this.popType=='snmp'){
                    snmp_settings(this.saveDataAll)
                }else if(this.popType=='zkzg'){
                    if(  this.saveDataAll.type=='close'){
                        all_close();

                    }else if( this.saveDataAll.type=='open'){
                        all_open();

                    }
                }else if(this.popType=='yssz'){
                    delay_update(this.saveDataAll.channel_power_infro)
                    this.ysszClickClose2()
                }else if(this.popType=='hdlcz'){
                    for(const ket in this.saveDataAll.channel_power_infros){
                        power_reset(this.saveDataAll.channel_power_infros[ket])
                    }
                    this.hdlczClickClose()
                }else if(this.popType=='fzsz'){
                    if(this.saveDataAll.list=='1'){
                        for(const ket in this.saveDataAll.channel_power_infros){
                            threshold_update(this.saveDataAll.channel_power_infros[ket])
                        }
                    }else{
                        threshold_update(this.saveDataAll.channel_power_infro)
                    }

                    this.fzscClickClose2()
                }else if(this.popType=='tdkg'){

                    if(  this.saveDataAll.type=='close'){
                        single_close({...j_data},{...channel_power_infro},this.saveDataAll.productChId);

                    }else if( this.saveDataAll.type=='open'){
                        single_open({...j_data},{...channel_power_infro},this.saveDataAll.productChId);
                    }

                }else if(this.popType=='sjsz'){
                    sys_settings(this.saveDataAll)
                    this.showSaveModal = false
                    this.showXtsjModal=false
                }
                this.showSaveModal=false
                this.saveDataAll={};
                this.popType='';
                // alert("操作成功")
            },
            handleChange(value){
                if(this.wlszForm3.version=='SNMP V3'){
                    this.snmpShow=true;
                }else{
                    this.snmpShow=false;
                    this.wlszForm3.yhm='';
                    this.wlszForm3.mode='';
                    this.wlszForm3.rzmm='';
                    this.wlszForm3.jmxy='';
                    this.wlszForm3.jmmm='';
                    this.wlszForm3.trapmode='' ;
                }
            },
            showSaveModal: false,
            showDeleteModal: false,
            message: '',
            messageType: '',


            // 消息和UI状态
            message: '',
            messages: [],


            // 状态
            showExternal:false,
            // 耗电量设置
            showFormModal:false,
            // 阈值设置
            showFzszModal:false,
            //告警
            showFzszModalgj:false,
            showFzszModal2:false,
            showysszModal:false,
            showysszModal2:false,
            formData:{productChName:null,productChId:null,channel_power_infro:null,productChIds:[]},
            powerThresholdList:[],
            fzscData:{
                productChIds:[]
            },
            items: [],
            newItem: '',
            loading: false,
            error: null,
            summary: {...initialFormData},
            channelList: [
                {
                    productChName: '通道1',
                    productPhOrder: 'A相',
                    productChVoltage: '220V',
                    productChCurrent: '10A',
                    productChPower: '2.2kW',
                    productChPowerFreq: '50Hz',
                    productChConsumption: '15kWh',
                    firingInterval: '5s',
                    closeInterval: '3s',
                    productChId: '3221',
                    status: true
                },

            ],
            statusData: {
                temperatureStatus:1,
                temperature: '',
                humidity: '',
                waterLeak: '',
                waterLeakStatus: 1,
                smoke: '',
                smokeStatus: 1,
                alarm1: ''
            },
            productType:"",
            threeType:"1",
            productId:"",
            productNumber:"",
            channelList1:[],
            ysszList:[],
            totalFormList:[],
            his_alarmd:[],
            ysszData2:{},
            popMessage:'',
            popType:'',

            saveDataAll:null,

            // 计算属性
            get connectionStatus() {
                if (this.isConnected) return 'connected';
                if (this.isConnecting) return 'connecting';
                return 'disconnected';
            },

            get statusText() {
                if (this.isConnected) return '已连接到 WebSocket 服务器';
                if (this.isConnecting) return '正在连接...';
                return '未连接';
            },


            async  toggleDeviceStatus(device) {
                var command="";
                const params={};
                params.productChId=device.productChId;
                // if(device.productChStatus=='1'){
                //     command='channelclose';
                //     this.popMessage="确认要关闭此通道吗？";
                //     params.type="close";
                // }else{
                //     command='channelopen';
                //     this.popMessage="确认要打开此通道吗？";
                //     params.type="open";
                // }
                if(device.productChStatus=='1'){
                    single_close({...j_data},{...channel_power_infro},device.productChId);
                }else{
                    single_open({...j_data},{...channel_power_infro},device.productChId);
                }
                // const result = await confirmAction({
                //     title: message
                // });

                // this.showSaveModal = true
                // this.saveDataAll=params;
                // this.popType='tdkg';


            },
            /** 阈值设置按钮操作 */
            handleUpdate(row) {
                this.fzscData = JSON.parse(JSON.stringify(row));
                this.fzscData.list='';
                this.showFzszModal2 = true;
                // this.title = this.$t('pz');
            },
            getOptionName(id) {
                for(const key in   this.channelList1){
                    if(this.channelList1[key].productChId===id){
                        return this.channelList1[key].productChName
                        break
                    }
                }
                ;
            },
            removeOption(id) {
                this.fzscData.productChIds = this.fzscData.productChIds.filter(optId => optId !== id);
            },
            toggleSelectAll() {

                if (this.fzscData.productChIds.length === Object.keys(this.channelList1).length ) {
                    this.fzscData.productChIds = [];
                } else {
                    for(const key in   this.channelList1){
                        this.fzscData.productChIds.push(this.channelList1[key].productChId)
                    }

                   // this.fzscData.productChIds = this.channelList1.map(option => option.productChId);
                }
            },

            getOptionName2(id) {
                for(const key in   this.channelList1){
                    if(this.channelList1[key].productChId===id){
                        return this.channelList1[key].productChName
                        break
                    }
                }
                ;
            },
            removeOption2(id) {
                this.formData.productChIds = this.formData.productChIds.filter(optId => optId !== id);
            },
            toggleSelectAll2() {
                if (this.formData.productChIds.length === Object.keys(this.channelList1).length ) {
                    this.formData.productChIds = [];
                } else {
                    for(const key in   this.channelList1){
                        this.formData.productChIds.push(this.channelList1[key].productChId)
                    }

                   // this.fzscData.productChIds = this.channelList1.map(option => option.productChId);
                }
            },
  /** 阈值设置按钮操作 */
            handleUpdateList() {
                this.fzscData.list='1';
                this.fzscData.productChIds=[];
                this.fzscData.currentUpperAction='';
                this.fzscData.voltageUpperAction='';
                this.fzscData.voltageDownAction='';
                this.fzscData.powerUpperAction='';
                this.fzscData.alarmContentUpperAction='';

                this.showFzszModal2 = true;
                // this.title = this.$t('pz');
            },

            ysszhandleUpdate(row) {
                this.ysszData2 = JSON.parse(JSON.stringify(row));
                this.showysszModal2 = true;
                // this.title = this.$t('pz');
            },
            // 查询阈值设置列表
            async  fzszData(){

            },
            // 查询延时设置列表
            async  ysszData(){

            },
            hdlczClickClose(){
                this.showFormModal = false
                this.formData.channel_power_infro=null;
            },

            fzscClickClose(){
                this.showFzszModal = false;
                this.powerThresholdList=[];
                //    this.formData.productChId=null;
            },
            fzscClickClosegj(){
                this.showFzszModalgj = false;
            },

            fzscClickClose2(){
                this.showFzszModal2 = false
                //    this.formData.productChId=null;
            },

            ysszClickClose(){
                this.showysszModal = false;
                this.ysszList=[];
            },
            ysszClickClose2(){
                this.showysszModal2 = false;
            },

            hdlsz(){
                this.formData.productChIds=[]
                this.showFormModal = true
            },

            // 耗电量重置
            async hdlczClick(){
                const params={};
                let lists=[]
                console.log( this.formData.productChIds)
                for( const id in  this.formData.productChIds){
                    for( const key in  this.powerThresholdList ){
                        if(this.formData.productChIds[id]== this.powerThresholdList[key].productChId){
                            lists.push(this.powerThresholdList[key].channel_power_infro);
                            break
                        }
                    }
                }
                params.channel_power_infros= lists;

              //  params.channel_power_infro=this.formData.channel_power_infro;
                this.popMessage="确认要重置此通道吗？";
                // const result = await confirmAction({
                //     title: message
                // });

                this.showSaveModal = true
                this.saveDataAll=params;
                this.popType='hdlcz';


            },
            // 阈值设置保存
            async fzscClick(){
                const params={};
                params.list=this.fzscData.list;
                if(this.fzscData.list=='1'){
                    if(this.fzscData.productChIds.length==0){
                        alert("请选择通道")
                        return
                    }
                    if(this.fzscData.alarmContentUpperAction=='' || this.fzscData.currentUpperAction=='' || this.fzscData.voltageDownAction==''  || this.fzscData.voltageUpperAction==''){
                        alert("存在未设置项，请重试")
                        return
                    }
                    if(this.fzscData.voltageUpperAction!=0 && this.fzscData.voltageDownAction !=0 && this.fzscData.voltageUpperAction* 10<=this.fzscData.voltageDownAction* 10){
                        alert("电压上限需要大于下限")
                        return
                    }
                    let lists=[]
                    for( const id in  this.fzscData.productChIds){
                        for( const key in  this.powerThresholdList ){
                               if(this.fzscData.productChIds[id]== this.powerThresholdList[key].productChId){
                                   let param=this.powerThresholdList[key].channel_power_infro;
                                   param.thr.w_upper=this.fzscData.alarmContentUpperAction* 1000;
                                   param.thr.c_upper=this.fzscData.currentUpperAction* 10;
                                   param.thr.p_upper=this.fzscData.powerUpperAction* 1000;
                                   param.thr.v_lower=this.fzscData.voltageDownAction* 10;
                                   param.thr.v_upper=this.fzscData.voltageUpperAction* 10;
                                   lists.push(param);
                                      break
                               }
                        }
                    }
                    params.channel_power_infros= lists;

                }else{
                    params.channel_power_infro=this.fzscData.channel_power_infro;
                    params.channel_power_infro.thr.w_upper=this.fzscData.alarmContentUpperAction* 1000;
                    params.channel_power_infro.thr.c_upper=this.fzscData.currentUpperAction* 10;
                    params.channel_power_infro.thr.p_upper=this.fzscData.powerUpperAction* 1000;
                    params.channel_power_infro.thr.v_lower=this.fzscData.voltageDownAction* 10;
                    params.channel_power_infro.thr.v_upper=this.fzscData.voltageUpperAction* 10;

                }

                this.popMessage="确认要保存吗？";
                // const result = await confirmAction({
                //     title: message
                // });

                this.showSaveModal = true
                this.saveDataAll=params;
                this.popType='fzsz';

            },

            // 延时设置保存
            async ysszClick(){
                const params={};
                params.channel_power_infro=this.ysszData2.channel_power_infro;
                params.channel_power_infro.info.start_delay=this.ysszData2.firingInterval;
                params.channel_power_infro.info.stop_delay=this.ysszData2.closeInterval;
                this.popMessage="确认要保存吗？";
                this.showSaveModal = true
                this.saveDataAll=params;
                this.popType='yssz';

            },


            // 总开总关
            async  toggleAllDevices(status) {
                const params={};
                params.productId=this.productId;
                params.type= "open"
                this.popMessage="确认要开启设备下所有通道吗？";
                if(status){
                    params.type= "open"
                    this.popMessage="确认要开启设备下所有通道吗？";
                }else{
                    params.type= "close"
                    this.popMessage="确认要关闭设备下所有通道吗？";
                }
                // const result = await confirmAction({
                //     title: message
                // });

                this.showSaveModal = true;
                this.saveDataAll=params;
                this.popType='zkzg';
            },

            // 获取数据方法
            async fetchData() {
         
                function5();
                this.queryTotalStatus5();
                if (activePageIntervalId1 != null) {
                    clearInterval(activePageIntervalId1);
                };
                activePageIntervalId1 = setInterval(() => {
                    if(tabId=='tab1'){
                         function1();
                        this.queryTotalStatus();
                        if(this.wlszForm4.sys_time=='' || this.wlszForm4.sys_time==null){
                            this.queryTotalStatus5();
                        }

                    }else if(tabId=='tab2'){
                        this.queryTotalStatus2();
                    }else if(tabId=='tab3'){
                        this.queryTotalStatus3();
                    }else if(tabId=='tab4'){
                        this.queryTotalStatus4();
                    }else if(tabId=='tab5'){
                        this.queryTotalStatus5();
                        var js={};
                        on_ws_msg(js);
                    }

                }, 100);
            },
            // 总体监控赋值
            async queryTotalStatus(){
               this.productType={... productTypeData}.productType;
               if( this.productType=='1'){
                   this.showExternal=true;
                   this.totalFormList= {... initialTotalFormList}
                   if(this.threeType=='1'){
                       this.summary= this.totalFormList[0];
                   }else if(this.threeType=='2'){
                       this.summary= this.totalFormList[1];
                   }else if(this.threeType=='3'){
                       this.summary= this.totalFormList[2];
                   }

               }else{
                   this.summary={... initialFormData};
               }
                this.channelList={...channelAllList};
                this.channelList1 = {...channelAllList1};
                this.powerThresholdList = {...initialYzFormList};
                this.ysszList = {...channelAllList1};
                if({...his_alarm}!=null){
                    this.statusData.alarm1 =  Object.keys({...his_alarm}).length;
                    var alarmds={...his_alarm};
                    this.his_alarmd=[]
                    for(var i=0;i<Object.keys({...his_alarm}).length ;i++){
                        var open=alarmds[i];
                            open.number=i+1;
                        open.date= (open.date.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                        open.waning_context= (open.waning_context.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                        if(open.type==0){
                            open.type='电量信息报警'
                        }else if(open.type==1){
                            open.type='传感器报警'
                        }
                        this.his_alarmd.push(open)
                    }

                }
                if({...sensorc_list}!=null && Object.keys({...sensorc_list}).length>0){
                   let sencorList={...sensorc_list};
                   for(const key in   sencorList){
                       if(sencorList[key].info.type==0){  // 温湿度
                           if(sencorList[key].info.status==1){ // 在线
                               try{
                                   let sensor_val =sencorList[key].sensor_val
                                   this.statusData.temperature=sensor_val[1].val.toFixed(2)

                                   if(sensor_val[1].s_alarm  & 0x1){ // 上限
                                       this.statusData.tempcolorStyle='color: red;font-weight: bold;'
                                   }else if(sensor_val[1].s_alarm & 0x2){ // 下限
                                       this.statusData.tempcolorStyle='color:  #ff00ff;font-weight: bold;'
                                   }else{
                                       this.statusData.tempcolorStyle=''
                                   }

                                   this.statusData.humidity=sensor_val[0].val.toFixed(2)

                                   if(sensor_val[0].s_alarm  & 0x1){ // 上限
                                       this.statusData.humcolorStylesx='color: red;font-weight: bold;'
                                   }else if(sensor_val[0].s_alarm & 0x2){ // 下限
                                       this.statusData.humcolorStylesx='color:  #ff00ff;font-weight: bold;'
                                   }else{
                                       this.statusData.humcolorStylesx=''
                                   }
                               }catch (e) {
                                   console.log("温湿度传感器赋值失败")
                               }
                           }else{
                               this.statusData.temperatureStatus=0;
                               this.statusData.temperature='离线'
                               this.statusData.humidity='离线'
                           }


                       }else if(sencorList[key].info.type==1){  // 烟雾
                           if(sencorList[key].info.status==1) { // 在线
                               try{
                                   let sensor_val =sencorList[key].sensor_val
                                   this.statusData.waterLeak=sensor_val[0].s_alarm.act
                               }catch (e) {
                                   console.log("烟雾传感器赋值失败")
                               }
                           }else {
                               this.statusData.waterLeakStatus=0;
                               this.statusData.waterLeak='离线'
                           }

                       }else if(sencorList[key].info.type==4){ // C02
                           if(sencorList[key].info.status==1) {
                               // 在线
                               try{
                                   let sensor_val =sencorList[key].sensor_val
                                   this.statusData.smoke=sensor_val[0].val.toFixed(2)
                                   if(sensor_val[0] & 0x1 ){ // 上限
                                       this.statusData.smokecolorStylesx='color: red;font-weight: bold;'
                                   }else if(sensor_val[0] & 0x2){ // 下限
                                       this.statusData.smokecolorStylesx='color:  #ff00ff;font-weight: bold;'
                                   }else{
                                       this.statusData.smokecolorStylesx=''
                                   }
                               }catch (e) {
                                   console.log("CO2传感器赋值失败")
                               }
                           }else{
                               this.statusData.smokeStatus=0;
                               this.statusData.smoke='离线'
                           }

                       }
                   }
                }


            },

            //网络设置
            wlszForm_vack:null,
            async queryTotalStatus2(){
               if(this.wlszForm_vack==null && {...network_data}!=null && Object.keys({...network_data}).length>0){
                   this.wlszForm =  {...network_data};
                   this.wlszForm.ipaddr=  (this.wlszForm.ipaddr.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                   this.wlszForm.mask=  (this.wlszForm.mask.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                   this.wlszForm.gateway=  (this.wlszForm.gateway.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                   this.wlszForm.dns1=  (this.wlszForm.dns1.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                   this.wlszForm.dns2=  (this.wlszForm.dns2.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                   this.wlszForm_vack =  {...network_data};
               }
            },

            //485
            wlszForm2_vack:null,
            async queryTotalStatus3(){
                if( this.wlszForm2_vack==null && {...cas_data}!=null  && Object.keys({...cas_data}).length>0){
                    this.wlszForm2 =  {...cas_data};
                    this.wlszForm2_vack =  {...cas_data};
                }
            },
            // snmp
             wlszForm3_back:null,
            async queryTotalStatus4(){
                if(this.wlszForm3_back==null){
                    if(  {...snmp_data}!=null && Object.keys({...snmp_data}).length>0){
                       this.wlszForm3 =  {...snmp_data};
                        this.wlszForm3.publics=  (this.wlszForm3.publics.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                        this.wlszForm3.trap_ip=  (this.wlszForm3.trap_ip.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                        this.wlszForm3.mode=   this.wlszForm3.mode ;
                        this.wlszForm3.version=   this.wlszForm3.version ;
                        this.wlszForm3.trapmode=   this.wlszForm3.trapmode ;
                        this.wlszForm3_back =  {...snmp_data};
                        // if(this.wlszForm3!=null && this.wlszForm3.version=='SNMP V3'){
                        //     this.snmpShow=true;
                        // }else{
                        //     this.snmpShow=false;
                        //    // this.wlszForm3={}
                        // }
                    }
                }


            },
            // 设备信息
            wlszForm4_back:null,
            async queryTotalStatus5(){
                if(this.wlszForm4_back==null &&  {...lang_data}!=null && Object.keys({...lang_data}).length>0){
                    this.wlszForm4 =  {...lang_data};
                    this.wlszForm4_back =  {...lang_data};
                    this.wlszForm4.ver=  (this.wlszForm4.ver.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                    this.wlszForm5.ver=  (this.wlszForm4.ver.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                    this.wlszForm4.sys_time=  (this.wlszForm4.sys_time.replace(/\\u0000/g, '\u0000')).replace(/\u0000/g, '');
                    this.systemTime=new Date(this.wlszForm4.sys_time);
                    // 计时器为空，操作
                    setInterval(() => {
                        var date= this.systemTime ;
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                        this.dateTime= year + '-' + month + '-' + day + ' ' + hours+ ':' + minutes + ':' + seconds;
                        this.systemTime=new Date(date.getTime()+1000);
                    }, 1000);
                }
            },
            // 三相切换赋值
            async toggleThreeDevices(type){
                this.threeType=type;
               if(type=='1'){
                   this.summary= this.totalFormList[0];
               }else if(type=='2'){
                   this.summary= this.totalFormList[1];
               }else if(type=='3'){
                   this.summary= this.totalFormList[2];
               }
            },


            // 传感器查询
            async sensorStatusMonitoring(){
                const params={};
                params.type="listMapQuery";
                params.productId=this.productId;


            },
            async channelStatusMonitoring(){
                const params={};
                params.type="listQuery";
                params.productId=this.productId;


            },

            showXtsjModal:false,
            showScfjModal:false,
            popMessage:'',
            wlszForm4:{
                "lang": "",
                "tzone": "",
                "route": "",
                "ver": "",
                "sys_time":"",
                "len": 52
            },
            wlszForm5:{
                "lang": "",
                "tzone": "",
                "route": "",
                "ver": "",
                "sys_time":"",
                "len": 52
            },
            showSaveModal: false,
            popType: '',
            popMessage:'',
            sqs:[{"id":8,"name":"东8区"},{"id":-8,"name":"西8区"},{"id":0,"name":"任意时区"}],
            currentDate: new Date(),
            selectedDate: null,
            selectedHour: 12,
            selectedMinute: 0,
            selectedSecond: 0,
            isPickerVisible: false,
            files: [],
            isDragover: false,
            isUploading: false,
            nextFileId: 1,
            years:[],
            months:[],
            dayAll:[],
            hours:[],
            minutes:[],
            dateForm:{},
            // 日期新方法
            get daysNew() {
                const currentYear = new Date().getFullYear();
                for (let i = currentYear - 20; i <= currentYear + 5; i++) {
                    this.years.push({
                        id:i,
                        name:i+'年'
                    })
                };
                // 初始化月份
                for (let i = 1; i <= 12; i++) {
                    this.months.push({
                        id:i,
                        name:i+'月'
                    })
                }
                this.updateDays();

                for (let i = 0; i < 24; i++) {
                    this.hours.push({
                        id:i,
                        name:i
                    })
                }

                // 初始化分钟
                for (let i = 0; i < 60; i++) {
                    this.minutes.push({
                        id:i,
                        name:i
                    })
                }
            },
            updateDays(){
                if(this.dateForm.year==null || this.dateForm.month==null){
                    return
                }
                const year = parseInt(this.dateForm.year);
                const month = parseInt(this.dateForm.month);

                // 如果年月未选择，默认显示31天
                let daysInMonth = 1;

                if (year && month) {
                    // 计算所选年月有多少天
                    daysInMonth = new Date(year, month, 0).getDate();
                }
                this.dayAll=[];
                // 添加日期选项
                for (let i = 1; i <= daysInMonth; i++) {
                    this.dayAll.push({
                        id:i,
                        name:i
                    })
                }
                this.dateForm.day=null;
            },


            // 日期选择方法

            showPicker() {
                // this.dateForm.year='';
                // this.dateForm.month='';
                // this.dateForm.day='';
                // this.dateForm.hour='';
                // this.dateForm.minute='';
                // this.dateForm.second='';
                this.isPickerVisible = true;
                // 如果没有选择日期，默认使用今天
                if (!this.selectedDate) {
                  this.selectedDate = new Date();
                }
                var  date=new Date(this.wlszForm4.sys_time);
                this.dateForm.year = date.getFullYear();
                this.dateForm.month = date.getMonth() + 1 < 10 ?  (date.getMonth() + 1) : date.getMonth() + 1;
                if(  this.dateForm.month !=null){
                    this.updateDays();
                }
                this.dateForm.day = date.getDate() < 10 ? date.getDate() : date.getDate();
                this.dateForm.hour = date.getHours() < 10 ?   date.getHours() : date.getHours();
                this.dateForm.minute= date.getMinutes() < 10 ?   date.getMinutes() : date.getMinutes();
                this.dateForm.second= date.getSeconds() < 10 ?   date.getSeconds() : date.getSeconds();


                // 设置当前时间为选择的时间
                const now = new Date();
                this.selectedHour = now.getHours();
                this.selectedMinute = now.getMinutes();
                this.selectedSecond = now.getSeconds();
            },


            clearSelection() {
                this.selectedDate = null;
                this.selectedHour = 0;
                this.selectedMinute = 0;
                this.selectedSecond = 0;
            },

            confirmSelection() {
                var month=this.dateForm.month<10?'0'+this.dateForm.month:this.dateForm.month
                var day=this.dateForm.day<10?'0'+this.dateForm.day:this.dateForm.day
                var hour=this.dateForm.hour<10?'0'+this.dateForm.hour:this.dateForm.hour
                var minute=this.dateForm.minute<10?'0'+this.dateForm.minute:this.dateForm.minute
                var second=this.dateForm.second<10?'0'+this.dateForm.second:this.dateForm.second
                this.wlszForm4.sys_time=this.dateForm.year+'-'+month+'-'+day+' '+ hour+':'+ minute+':'+ second;
                this.isPickerVisible = false;
            },


            async sbxxQuery(){

               // this.wlszForm4= await this.data.data
            },

            async stxjClick(){
                this.showSaveModal = true
                this.popMessage="确认要提交吗？";
                this.wlszForm4.type="NtpSave";
                this.saveDataAll=this.wlszForm4;
                this.popType='sjsz';
            },

            showXtsjModalClick(){
                this.clearSelection();
                this.showXtsjModal=true;
            },


            // 上传附件方法
            showFjscModalClick(){
                this.showScfjModal=true;
                this.wlszForm5=JSON.parse(JSON.stringify( this.wlszForm4));
            },

            selectFiles() {
                this.$refs.fileInput.click();
            },

            handleFileSelect(e) {
                const selectedFiles = Array.from(e.target.files);
                this.files = [];
                this.addFiles(selectedFiles);
                // 清空input，允许重复选择相同文件
                e.target.value = '';
            },

            handleDrop(e) {
                this.isDragover = false;
                const droppedFiles = Array.from(e.dataTransfer.files);
                this.addFiles(droppedFiles);
            },

            addFiles(fileList) {
                fileList.forEach(file => {
                    this.files.push({
                        id: this.nextFileId++,
                        file: file,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'pending', // pending, uploading, success, error
                        progress: 0
                    });
                });
            },


            clearFiles() {
                this.files = [];
                this.showScfjModal=false;
            },

            async uploadFiles() {
                if (this.files.length === 0) return;
                if(this.wlszForm5.ver=='' || this.wlszForm5.ver==null){
                    return
                }
                this.isUploading = true;

                for (const fileObj of this.files) {
                    if (fileObj.status === 'success') continue;
                    sys_up_settings(this.wlszForm5.ver,fileObj.file)
                    this.clearFiles()
                }

                this.isUploading = false;
            },

            // 初始化事件监听
            initEventListeners() {
                document.addEventListener('vue-command', (event) => {
                    if (event.detail.type === 'process') {
                        this.processData(event.detail.source);
                    } else if (event.detail.type === 'update') {
                        this.updateData(event.detail.data);
                    }
                });
            }

        }).mount();

        // 将方法暴露到全局
        window.externalIncrement = () => {
            app.externalIncrement();
        };
    });
</script>
</body>

</html>