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

<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-navbar :title="name" @leftClick="backPage" :bgImage="backPic">
      <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" shape="circle" text="打开前门"></u-button>
          <u-button type="primary" shape="circle" text="关闭前门"></u-button>
          <u-button type="primary" shape="circle" text="打开后门"></u-button>
          <u-button type="primary" shape="circle" text="关闭后门"></u-button>
          <u-button type="primary" shape="circle" text="打开前后门"></u-button>
          <u-button type="primary" shape="circle" text="关闭前后门"></u-button>
          <!-- <div class="additional-div">
            <span>控制模式：</span>
            <u-checkbox-group
              v-model="checked"
              iconPlacement="left"
              placement="row"
            >
              <u-checkbox
                type="primary"
                shape="circle"
                label="就地"
                style="margin-right: 20rpx"
              ></u-checkbox>
              <u-checkbox
                type="primary"
                shape="circle"
                label="远程"
              ></u-checkbox>
            </u-checkbox-group>
          </div> -->
        </div>
        <div class="button-grid flcard" v-if="this.TabCur == 'window'">
          <u-button type="primary" shape="circle" text="设定面积"></u-button>
        </div>
        <div class="flcard door-container" v-if="this.TabCur == 'gate'">
          <div class="door">
            <div class="left_door" id="leftdoor"></div>
            <div class="right_door" id="rightdoor"></div>
            <div
              style="
                position: absolute;
                top: 30%;
                left: 25%;
                transform: translate(-50%);
                z-index: 5;
                font-weight: 900px;
                color: #00ff00;
              "
            >
              <span style="font-size: 30px">前门</span>
            </div>
          </div>
          <div class="door">
            <div class="left_door" id="leftdoor1"></div>
            <div class="right_door" id="rightdoor2"></div>
            <div
              style="
                position: absolute;
                top: 30%;
                right: 13%;
                transform: translate(-50%);
                z-index: 5;
                font-weight: 900px;
                color: #00ff00;
              "
            >
              <span style="font-size: 30px">后门</span>
            </div>
          </div>
        </div>
        <div class="flcard door-container" v-if="this.TabCur == 'window'">
          <div class="autowindow_new">
            <div
              class="window_new_1"
              id="subwindowpic11"
              :style="`transform: rotateX(${frontAngle}deg)`"
            ></div>
            <div
              class="window_new_2"
              id="subwindowpic12"
              :style="`transform: rotateX(${frontAngle}deg)`"
            ></div>
            <div
              class="window_new_3"
              id="subwindowpic13"
              :style="`transform: rotateX(${frontAngle}deg)`"
            ></div>
            <div
              class="window_new_4"
              id="subwindowpic14"
              :style="`transform: rotateX(${frontAngle}deg)`"
            ></div>
            <div
              class="window_new_5"
              id="subwindowpic15"
              :style="`transform: rotateX(${frontAngle}deg)`"
            ></div>
          </div>
          <div
            style="
              position: absolute;
              top: 34%;
              left: 25%;
              transform: translate(-50%);
              z-index: 5;
              color: #6a7a9b;
            "
          >
            <span style="font-size: 15px; font-weight: 50px">风窗动画</span>
          </div>
        </div>
        <div class="flcard">
          <div class="flex-container">
            <div
              class="itemback"
              v-for="(item, index) in typeList"
              :key="index"
              v-show="item.appShow == 1"
            >
              <div class="datacardtime" v-if="item.monitorcode == 'readTime'">
                <view
                  class="demo-layout bg-purple-light"
                  style="margin-top: 10rpx; color: #3787fe"
                >
                  {{ tableData[item.monitorcode] }}
                </view>
              </div>
              <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                <div class="left-content">
                  <view
                    class="demo-layout bg-purple-light"
                    style="margin-top: 10rpx; color: #3787fe"
                  >
                    {{ tableData[item.monitorcode] }}
                  </view>
                  <div class="spacer"></div>
                  <!-- 间距 -->
                  <view
                    class="demo-layout bg-purple-light"
                    style="color: #677799"
                  >
                    {{ item.des }}
                  </view>
                </div>
                <div
                  class="right-content"
                  :style="{
                    backgroundImage:
                      item.monitorcode === 'frontRearDP' ||
                      item.monitorcode === 'frontRearDifference'
                        ? 'url(\'../../../../static/model/Pa.png\')'
                        : item.monitorcode === 'sourcePressure'
                        ? 'url(\'../../../../static/model/MPa.png\')'
                        : item.monitorcode === 'frontGateOpen'
                        ? 'url(\'../../../../static/model/doorNet.png\')'
                        : item.monitorcode === 'rearGateOpen'
                        ? 'url(\'../../../../static/model/doorNet.png\')'
                        : item.monitorcode === 'warnFlag'
                        ? 'url(\'../../../../static/model/9432.png\')'
                        : item.monitorcode === 'netStatus'
                        ? 'url(\'../../../../static/model/9431.png\')'
                        : item.monitorcode === 'm3'
                        ? 'url(\'../../../../static/model/windM3.png\')'
                        : item.monitorcode === 'fsectarea'
                        ? 'url(\'../../../../static/model/duanArea.png\')'
						:item.monitorcode === 'incipientWindSpeed1' || item.monitorcode === 'incipientWindSpeed2' || item.monitorcode === 'incipientWindSpeed3'|| item.monitorcode === 'va'
						? 'url(\'../../../../static/model/fengsu.png\')'
                        : 'url(\'\')',
                    backgroundSize: '100% 100%',
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      tableData: [], //监测数据
      typeList: [], //展示字段
      itemId: "", // 初始化 itemId
      name: "", // 初始化 name
      TabCur: "",
      checked: [],
      backPic: "url(../../../../static/topnavbar.png)",
      frontAngle: "", //风窗打开角度
    };
  },
  onLoad(query) {
    // query 中包含传递过来的id
    const id = query.id;
    const name = query.name;
    const type = query.type;
    //保存id到 data 中 可以在整个页面中使用
    this.itemId = id;
    this.name = name;
    this.TabCur = type;
    this.getShowList();
  },
  components: {},
  watch: {},
  created() {
    this.getDeviceInfo(this.itemId);
  },
  methods: {
    getShowList() {
      const params = {
        devicekind: this.TabCur,
        pagetype: "detail",
        pageNo: 1,
        pageSize: 100,
      };
      new Promise((resolve, reject) => {
        api
          .getShowColumList(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.typeList = response.data.result.records;
              console.log(this.typeList, "返回内容");
            } 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) {
              this.tableData =
                response.data.result.msgTxt[0].datalist[0].readData;
              if (this.tableData.frontGateOpen == 1) {
                this.tableData.frontGateOpen = "打开";
              } else {
                this.tableData.frontGateOpen = "关闭";
              }
              if (this.tableData.rearGateOpen == 1) {
                rearGateOpen = "打开";
              } else {
                this.tableData.rearGateOpen = "关闭";
              }
              this.tableData.push(
                response.data.result.msgTxt[0].datalist[0].readTime
              );
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    backPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style>
.top-nav {
  background-image: url(../../../../static/topnavbar.png);
  background-size: cover; /* 背景图片大小适应 */
  height: 100%;
}
.top-nav2 {
  background-color: #ffffff;
}
.main {
  margin-top: 100rpx;
}
.container {
  display: flex;
  flex-direction: column;
  height: 90vh; /* 设置容器高度为视窗高度 */
}
.button-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px; /* 可以根据需要调整行列之间的间距 */
}

.flcard {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
}
.door-container {
  display: flex;
}
.door {
  background-image: url(../../../../static/door.png);
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: top;
  height: 24vh;
  flex: 1;
  margin-right: 10px; /* 可以根据需要调整间距 */
}
.left_door {
  margin-left: 8%;
  margin-top: 15%;
  width: 42%;
  height: calc(19.5vh + 3px);
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 4s ease;
  background-image: url(../../../../static/left.png);
  background-size: 100% 100%;
}
.right_door {
  margin-top: 15%;
  width: 42%;
  height: calc(19.5vh + 3px);
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 4s ease;
  background-image: url(../../../../static/right.png);
  background-size: 100% 100%;
}
.left_door {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
.right_door {
  transform-origin: right center;
  border-left: 1px solid rgb(8, 8, 8);
}
.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: 50rpx;
  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: 100rpx;
  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: 50%;
  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;
}
</style>