Vent-App/pages/home/detail/autodoor/autodoor.vue

<template>
  <view style="overflow: auto; height: 100%">
    <!-- 建议放在外层 -->
    <u-navbar
      :title="name"
      @leftClick="backPage"
      :bgImage="backPic"
      :bgStatusImage="backPic0"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20"> </u-icon>
      </view>
    </u-navbar>
    <view class="main">
      <view class="u-page container">
        <!-- <div class="button-grid flcard" v-if="this.TabCur == 'gate'">
          <u-button
            type="primary"
            text="打开前门"
            @click="showPasswordDialog('frontGateOpen_S')"
          ></u-button>
          <u-button
            type="primary"
            text="关闭前门"
            @click="showPasswordDialog('frontGateClose_S')"
          ></u-button>
          <u-button
            type="primary"
            text="打开后门"
            @click="showPasswordDialog('rearGateOpen_S')"
          ></u-button>
          <u-button
            type="primary"
            text="关闭后门"
            @click="showPasswordDialog('rearGateClose_S')"
          ></u-button>
          <u-button
            type="primary"
            text="打开前后门"
            @click="showPasswordDialog('sameTimeOpen')"
          ></u-button>
          <u-button
            type="primary"
            text="关闭前后门"
            @click="showPasswordDialog('sameTimeClose')"
          ></u-button>
        </div>
        <div
          class="button-grid flcard"
          v-if="this.TabCur == 'window' && this.nwindownum == 1"
        >
          <u-button
            type="primary"
            text="设定面积"
            @click="showPasswordDialog('frontSetValue')"
          ></u-button>
        </div>
        <div
          class="button-grid flcard"
          v-if="this.TabCur == 'window' && this.nwindownum == 2"
        >
          <u-button
            type="primary"
            text="设定前窗面积"
            @click="showPasswordDialog('frontSetValue')"
          ></u-button>
          <u-button
            type="primary"
            text="设定后窗面积"
            @click="showPasswordDialog('rearSetValue')"
          ></u-button>
        </div> -->
        <div class="flcard" v-if="this.TabCur == 'gate'">
          <doorAnimate
            :gatestate1="frontGateStatus"
            :gatestate2="midGateStatus"
            :gatestate3="rearGateStatus"
            :height="height"
            :doorcount="ndoorcount"
          >
          </doorAnimate>
        </div>
        <div class="flcard" v-if="this.TabCur == 'windrect'">
          <windrectAnimate
            :state="state"
            :title="title"
            :height="height"
            :type="deviceType"
          >
          </windrectAnimate>
        </div>
        <div class="flcard" v-if="this.TabCur == 'fanlocal'">
          <fanlocalAnimate
            :fan1State="fan1State"
            :fan2State="fan2State"
            :title="title"
            :height="height"
          >
          </fanlocalAnimate>
        </div>
        <!-- <div class="flcard" v-if="this.TabCur == 'fanmain'">
          <fanmainAnimate
            ref="fanpage"
            style="width: 100%"
            :door1="door1"
            :topdoor1="topdoor1"
            :fundoor1="fundoor1"
            :door2="door2"
            :topdoor2="topdoor2"
            :fundoor2="fundoor2"
            :nowfengji="qidongfengji"
          ></fanmainAnimate>
        </div> -->
        <div class="flcard" style="" v-if="this.TabCur == 'window'">
          <windowAnimate
            :windowAngle="windowAngle"
            :windowAngle1="windowAngle1"
            :height="height"
            :windowcount="nwindownum"
          ></windowAnimate>
        </div>
        <div v-if="this.cameraList.length > 0">
          <div class="flcard" v-for="(item, index) in cameraList" :key="index">
            <video
              style="margin-left: 20px"
              id="myVideo"
              controls
              show-loading
              autoplay
              class="r-video"
              :vslide-gesture="true"
              :vslide-gesture-in-fullscreen="true"
              :src="item.addr"
            ></video>
          </div>
        </div>
        <div class="flcard">
          <div
            class="flex-container"
            v-if="TabCur != 'fanlocal' && TabCur != 'fanmain'"
          >
            <div
              class="itemback"
              v-for="(item, index) in deviceShowList"
              :key="index"
              v-if="
                item.appShow == 1 &&
                item.monitorcode != 'strinstallpos' &&
                item.monitorcode != 'netStatus' &&
                item.monitorcode != 'warnFlag' &&
                item.monitorcode != 'readTime' &&
                item.monitorcode != ''
              "
            >
              <div class="datacard">
                <div class="left-content">
                  <view
                    v-if="item.datatype == 1 && item.monitorcode == 'doorUse'"
                    class="demo-layout bg-purple-light"
                    style="margin-top: 60rpx; color: #3787fe"
                  >
                    {{
                      tableData[item.monitorcode] == "2"
                        ? "行人"
                        : tableData[item.monitorcode] == "1"
                        ? "行车"
                        : "-"
                    }}
                  </view>
                  <view
                    v-else-if="item.datatype == 1"
                    class="demo-layout bg-purple-light"
                    style="margin-top: 60rpx; color: #3787fe"
                  >
                    {{
                      tableData[item.monitorcode] != undefined &&
                      tableData[item.monitorcode] != null
                        ? tableData[item.monitorcode]
                        : "-"
                    }}
                  </view>

                  <view
                    v-else-if="item.datatype == 2"
                    class="demo-layout bg-purple-light"
                    style="margin-top: 60rpx; color: #3787fe"
                  >
                    {{
                      tableData[item.monitorcode] != undefined &&
                      tableData[item.monitorcode] != null
                        ? tableData[item.monitorcode]
                        : "-"
                    }}
                  </view>
                  <div class="spacer"></div>
                  <!-- 间距 -->
                  <view
                    class="demo-layout bg-purple-light"
                    style="color: #677799"
                  >
                    {{ item.des }}
                  </view>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-container" v-else-if="TabCur == 'fanmain'">
            <div class="monitor-content">
              <div class="zhuji">
                <div>主机</div>
                <div
                  class="itemback"
                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
                  :key="index"
                  v-show="item.appShow == 1"
                >
                  <div
                    class="datacardtime"
                    v-if="item.monitorcode == 'readTime' && item.datatype == 1"
                  >
                    <view
                      class="demo-layout bg-purple-light"
                      style="padding: 20rpx; color: #3787fe"
                    >
                      {{ readTime }}
                    </view>
                  </div>
                  <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                    <div class="left-content">
                      <view
                        v-if="
                          item.monitorcode == 'netStatus' && item.datatype == 1
                        "
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{ doorNetStatus == "1" ? "正常" : "异常" }}
                      </view>
                      <view
                        v-else-if="item.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan1")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <view
                        v-else-if="item.datatype == 2"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan1")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <div class="spacer"></div>
                      <!-- 间距 -->
                      <view
                        class="demo-layout bg-purple-light"
                        style="color: #677799"
                      >
                        {{ item.des }}
                      </view>
                    </div>
                  </div>
                </div>
              </div>
              <div class="beiji">
                <div>备机</div>
                <div
                  class="itemback"
                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
                  :key="index"
                  v-show="item.appShow == 1"
                >
                  <div
                    class="datacardtime"
                    v-if="item.monitorcode == 'readTime' && item.datatype == 1"
                  >
                    <view
                      class="demo-layout bg-purple-light"
                      style="padding: 20rpx; color: #3787fe"
                    >
                      {{ readTime }}
                    </view>
                  </div>
                  <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                    <div class="left-content">
                      <view
                        v-if="
                          item.monitorcode == 'netStatus' && item.datatype == 1
                        "
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{ doorNetStatus == "1" ? "正常" : "异常" }}
                      </view>
                      <view
                        v-else-if="item.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan2")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <view
                        v-else-if="item.datatype == 2"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan2")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <div class="spacer"></div>
                      <!-- 间距 -->
                      <view
                        class="demo-layout bg-purple-light"
                        style="color: #677799"
                      >
                        {{ item.des }}
                      </view>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-container" v-else-if="TabCur == 'fanlocal'">
            <div class="monitor-content">
              <div class="zhuji">
                <div>主机</div>
                <div
                  class="itemback"
                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
                  :key="index"
                  v-show="item.appShow == 1"
                >
                  <div
                    class="datacardtime"
                    v-if="item.monitorcode == 'readTime' && item.datatype == 1"
                  >
                    <view
                      class="demo-layout bg-purple-light"
                      style="padding: 20rpx; color: #3787fe"
                    >
                      {{ readTime }}
                    </view>
                  </div>
                  <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                    <div class="left-content">
                      <view
                        v-if="
                          item.monitorcode == 'netStatus' && item.datatype == 1
                        "
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{ doorNetStatus == "1" ? "正常" : "异常" }}
                      </view>
                      <view
                        v-else-if="item.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan1")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <view
                        v-else-if="item.datatype == 2"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan1")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan1")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <div class="spacer"></div>
                      <!-- 间距 -->
                      <view
                        class="demo-layout bg-purple-light"
                        style="color: #677799"
                      >
                        {{ item.des }}
                      </view>
                    </div>
                  </div>
                </div>
              </div>
              <div class="beiji">
                <div>备机</div>
                <div
                  class="itemback"
                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
                  :key="index"
                  v-show="item.appShow == 1"
                >
                  <div
                    class="datacardtime"
                    v-if="item.monitorcode == 'readTime' && item.datatype == 1"
                  >
                    <view
                      class="demo-layout bg-purple-light"
                      style="padding: 20rpx; color: #3787fe"
                    >
                      {{ readTime }}
                    </view>
                  </div>
                  <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                    <div class="left-content">
                      <view
                        v-if="
                          item.monitorcode == 'netStatus' && item.datatype == 1
                        "
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{ doorNetStatus == "1" ? "正常" : "异常" }}
                      </view>
                      <view
                        v-else-if="item.datatype == 1"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan2")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <view
                        v-else-if="item.datatype == 2"
                        class="demo-layout bg-purple-light"
                        style="margin-top: 60rpx; color: #3787fe"
                      >
                        {{
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== undefined &&
                          tableData[
                            item.monitorcode.startsWith("Fan")
                              ? item.monitorcode.replace(/^Fan/, "Fan2")
                              : item.monitorcode
                          ] !== null
                            ? tableData[
                                item.monitorcode.startsWith("Fan")
                                  ? item.monitorcode.replace(/^Fan/, "Fan2")
                                  : item.monitorcode
                              ]
                            : "-"
                        }}
                      </view>
                      <div class="spacer"></div>
                      <!-- 间距 -->
                      <view
                        class="demo-layout bg-purple-light"
                        style="color: #677799"
                      >
                        {{ item.des }}
                      </view>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </view>
    </view>
    <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="false">
      <div class="containers">
        <view class="passWordName">
          <view
            class="title"
            style="margin-top: 15px"
            v-if="this.TabCur == 'window'"
            >风窗面积</view
          >
          <u-input
            class="passArea"
            style="margin-top: 15px; border-color: #2a94ff"
            v-model="windowArea"
            type="text"
            v-if="this.TabCur == 'window'"
          ></u-input>
        </view>
        <view class="passWordInput">
          <view style="margin-top: 15px" class="title">输入密码</view>
          <u-input
            style="margin-top: 15px; border-color: #2a94ff"
            v-model="password"
            type="password"
          ></u-input
        ></view>
      </div>
      <view class="btns">
        <u-button
          style="margin: 20px"
          type="primary"
          @click="confirmPassword()"
          color="linear-gradient(to right, rgb(53, 138, 254), rgb(38, 171, 244))"
          >确认</u-button
        >
        <u-button
          style="margin: 20px"
          type="primary"
          :plain="true"
          @click="cancelPassword()"
          >取消</u-button
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from "@/api/api";
import initDictOptions from "@/common/util/dictUtil.js";
import doorAnimate from "../doorAnimate/doorAnimate.vue";
import windowAnimate from "../windowAnimate/windowAnimate.vue";
import windrectAnimate from "../windrectAnimate/windrectAnimate.vue";
import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate2.vue";
import fanmainAnimate from "../fanmainAnimate/fanmainAnimate.vue";
export default {
  data() {
    return {
      tableData: {}, //监测数据
      typeList: [], //展示字段
      itemId: "", // 初始化 itemId
      name: "", // 初始化 name
      deviceid: "", //初始化设备id
      TabCur: "",
      checked: [],
      backPic0: "url(/static/topnavbar0.png)",
      backPic: "url(/static/topnavbar.png)",
      frontAngle: "", //风窗打开角度
      nwindownum: "", //风窗道数
      ndoorcount: "", //风门道数
      deviceType: "", //设备类型
      show: false, //密码弹窗是否显示
      password: "", //控制设备密码
      paramcode: "", //控制字段
      height: "200px",
      popupStyle: {
        // 弹窗样式
        "background-color": "#fff",
        padding: "20px",
        "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)",
      },
      frontGateStatus: "", //前门状态
      rearGateStatus: "", //后门状态
      midGateStatus: "", //状态
      doorNetStatus: "", //风门通信状态
      warnFlag: "", //风门报警
      readTime: "", //时间
      windowAngle: 0, //前窗打开角度
      windowAngle1: 0, //后窗打开角度
      windowArea: "", //风窗面积设定值
      sign: "",
      title: "测风设备",
      fan1State: "",
      fan2State: "",
      deviceid: "", //ID
      cameras: [], //摄像头数据
      cameraList: [], //摄像数据
      showColum: {},
      deviceShowList: [],
      isFirstRequest: true, // 是否是第一次请求
      fanMsStatus: true,
      qidongfengji: "1",
      fanMsStatus: true, //true抽风，false反风
      door1: 0, //风门1#      1打开 0 关闭
      topdoor1: 0, //水平风门1#      1打开 0 关闭
      fundoor1: 0, //蝶阀1#      1打开 0 关闭
      door2: 0, //风门2#      1打开 0 关闭
      topdoor2: 0, //水平风门2#      1打开 0 关闭
      fundoor2: 0, //蝶阀2#      1打开 0 关闭
    };
  },
  onLoad(query) {
    //保存id到 data 中 可以在整个页面中使用
    this.itemId = query.id;
    this.name = query.name;
    this.TabCur = query.type;
    this.ndoorcount = 2;
  },
  components: {
    doorAnimate,
    windowAnimate,
    windrectAnimate,
    fanlocalAnimate,
    fanmainAnimate,
  },
  created() {
    this.getShowColum();
    if (this.isFirstRequest) {
      this.getDeviceInfo(this.itemId);
    }
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        // 执行定时任务
        this.getDeviceInfo(this.itemId);
      }, 5000);
    },
    stopTimer() {
      // 停止定时器
      clearInterval(this.timer);
    },
    // 返回上一个页面
    backPage() {
      this.$destroy();
      uni.navigateBack({
        delta: 1,
      });
    },
    getShowColum() {
      new Promise((resolve, reject) => {
        api
          .getShowColum({})
          .then((response) => {
            if (response.data.code == 200) {
              var showlist = response.data.result;
              this.$store.commit("SET_SHOWCOLUM", showlist);
              this.showColum = showlist;
              const key = this.TabCur + "_monitor";
              const key1 = this.deviceType + "_monitor";
              if (this.showColum?.[key1]?.length > 0) {
                this.deviceShowList = this.showColum[key1];
              } else {
                this.deviceShowList = this.showColum[key] ?? [];
              }

              // this.deviceShowList = this.showColum[key];
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取详情数据
    getDeviceInfo(ID) {
      let IDString = String(ID); // 将 ID 转换为字符串
      new Promise((resolve, reject) => {
        api
          .getDeviceMonitor({ devicetype: this.TabCur, ids: IDString })
          .then((response) => {
            if (
              response.data.code == 200 &&
              response.data.result.msgTxt[0].datalist.length > 0
            ) {
              var result = response.data.result.msgTxt[0].datalist[0];
              let newData = { ...result, ...result.readData };
              this.tableData = newData;
              if (this.isFirstRequest) {
                this.cameras = result.cameras;
                this.getVideoUrlById(this.cameras);
                this.isFirstRequest = false; // 设置为 false，表示已经请求过数据
              }
              if (this.tableData["frontGateClose"] == "1") {
                this.tableData.frontGateOpen = "关闭";
              } else if (this.tableData["frontGateClose"] == "0") {
                this.tableData.frontGateOpen = "打开";
              } else {
                this.tableData.frontGateOpen = "关闭";
              }
              if (this.tableData["midGateClose"] == "1") {
                this.tableData.midGateOpen = "关闭";
              } else if (this.tableData["midGateClose"] == "0") {
                this.tableData.midGateOpen = "打开";
              } else {
                this.tableData.midGateOpen = "关闭";
              }
              if (this.tableData["rearGateClose"] == "1") {
                this.tableData.rearGateOpen = "关闭";
              } else if (this.tableData["rearGateClose"] == "0") {
                this.tableData.rearGateOpen = "打开";
              } else {
                this.tableData.rearGateOpen = "关闭";
              }
              this.fan1State = result.readData.Fan1StartStatus;
              this.fan2State = result.readData.Fan2StartStatus;
              this.nwindownum = result.nwindownum;
              this.ndoorcount = result.ndoorcount;
              this.deviceType = result.deviceType;
              this.state = result.readData.sign;
              this.frontGateStatus = this.tableData.frontGateOpen;
              this.midGateStatus = this.tableData.midGateOpen;
              this.rearGateStatus = this.tableData.rearGateOpen;
              this.doorNetStatus = result.netStatus;
              this.warnFlag = result.warnLevel_str;
              this.readTime = result.readTime;

              this.qidongfengji = "1";
              this.fundoor1 = 1;
              this.door1 = 1;
              this.topdoor1 = 1;
              this.fundoor2 = 0;
              this.door2 = 0;
              this.topdoor2 = 0;
              var maxarea = result.maxarea;
              this.windowAngle =
                (this.tableData.forntArea / maxarea) * 100 * 0.9;
              this.windowAngle1 =
                (this.tableData.rearArea / maxarea) * 100 * 0.9;
              this.deviceid = result.deviceID;
              this.$forceUpdate();
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //获取监控URL 通过ID获取
    getVideoUrlById(data) {
      this.cameraList = []; // 清空摄像头列表
      data.forEach((item) => {
        const isHttp =
          item.addr?.startsWith("http://") || item.addr?.startsWith("https://");
        if (isHttp) {
          this.cameraList.push(item);
        } else {
          this.getVideoUrlByCode(item.addr);
        }
      });
    },
    getVideoUrlByCode(ID) {
      new Promise((resolve, reject) => {
        api
          .getCameraByCode({ cameraCode: ID, videoType: "" })
          .then((response) => {
            if (response.data.code == 200) {
              const addr = response.data.result.url;
              this.cameraList.push({
                addr: addr,
                cameraCode: ID,
              });
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //设备控制
    ctrlDevice(pass) {
      let IDString = String(this.itemId); // 将 ID 转换为字符串
      const params = {
        deviceid: IDString,
        devicetype: this.deviceType,
        paramcode: this.paramcode,
        password: pass,
        value: this.windowArea,
      };
      new Promise((resolve, reject) => {
        api
          .controlDevice(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.getDeviceInfo(IDString);
              // console.log("操作成功");
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 显示密码输入弹窗
    showPasswordDialog(controlCode) {
      this.paramcode = controlCode;
      this.show = true;
    },
    // 取消密码输入
    cancelPassword() {
      this.show = false;
    },
    confirmPassword() {
      this.ctrlDevice(this.password);
      // 发起请求后关闭密码输入弹窗
      this.show = false;
    },
  },
  destroyed() {
    // 停止定时器
    this.stopTimer();
  },
};
</script>

<style lang="scss" scoped>
.top-nav {
  background-image: url(../../../../static/topnavbar.png);
  background-size: cover; /* 背景图片大小适应 */
  height: 100%;
}
.top-nav2 {
  background-color: #ffffff;
}
.main {
  margin-top: 80px;
}
.container {
  display: flex;
  flex-direction: column;
}
.button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px; /* 可以根据需要调整行列之间的间距 */
}
.fanContent {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.top,
.bottom {
  flex: 1; /* 各占 50% */
}
.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.additional-div {
  grid-column: span 2; /* 让附加内容跨越三列 */
  display: flex;
  align-items: center;
}
.checkbox-group {
  margin-left: 10px; /* 可以根据需要调整间距 */
}
.card {
  background-color: #ffffff;
  margin: auto;
  margin-top: 20rpx;
  width: 90%;
  height: 280rpx;
  border: 1rpx solid #000000;
  border-radius: 20rpx;
}
.flex-containe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.itemback {
  flex: 0 0 calc(33.33% - 10px); /* 使用calc函数计算每个项目的宽度，减去间距 */
  margin: 5px; /* 间距设置为5px */
}
.datacardtime {
  display: flex;
  width: 100%;
  flex: 1;
  margin: 1%;
  float: left;
  height: 50px;
  line-height: 29px;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.datacard {
  display: flex;
  width: 48%;
  flex: 1;
  margin: 1%;
  float: left;
  height: 180rpx;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.left-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.spacer {
  height: 10rpx;
}
.right-content {
  width: 50%; /* 右侧内容占据50%宽度 */
  background-image: url(../../../../static/model/Pa.png);
  background-size: 100% 125%;
}

/*风窗样式*/
div.autowindow_new {
  width: 200px;
  height: 200px;
  background-image: url(../../../../static/window/window-bk.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*风窗1 2 3 4*/

div.window_new_1 {
  margin-top: 12px;
  margin-left: 15px;
  width: 170px;
  height: 30px;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  /* transition: all 2s; */
  background-image: url(../../../../static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_2 {
  margin-top: 2px;
  margin-left: 15px;
  width: 170px;
  height: 29px;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  /* transition: all 2s; */
  background-image: url(../../../../static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_3 {
  margin-top: 2px;
  margin-left: 15px;
  width: 170px;
  height: 29px;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  /* transition: all 2s; */
  background-image: url(../../../../static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_4 {
  margin-top: 2px;
  margin-left: 15px;
  width: 170px;
  height: 29px;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  /* transition: all 2s; */
  background-image: url(../../../../static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_5 {
  margin-top: 2px;
  margin-left: 15px;
  width: 170px;
  height: 29px;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  /* transition: all 2s; */
  background-image: url(../../../../static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_1 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_2 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_3 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_4 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_5 {
  transition: all 2s ease;
  transform-origin: center center;
}
.btns {
  display: flex;
}
.containers {
  background-color: #fff;
}
.passWordName {
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.title {
  margin-right: 20px;
  line-height: 40px;
}
.passWordInput {
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.passArea {
  border-color: red;
}
.monitor-content {
  display: flex;
  flex-direction: column;
}
</style>