liyuezong
/
SmartPDCode


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691
							<!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>总功率(W)</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();
                    }

                }, 1000);
            },
            // 总体监控赋值
            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>