Vent-App/pages/warndata/components/gas-detail.vue

<template>
  <view class="gas-detail">
    <u-tabs
      class="devic-box-tab"
      :current="PageCur"
      :list="tabList"
      @click="NavChange"
    ></u-tabs>
    <view class="gas-content" v-if="PageCur == 0">
      <view class="search-area">
        <view class="search-l">
          <view class="search-item" @click="getChangeJcd">
            <text class="search-label">监测点：</text>
            <u--input
              inputAlign="center"
              v-model="searchText"
              placeholder="请选择监测点"
              suffixIcon="arrow-right"
              suffixIconStyle="color: #909399"
            ></u--input>
            <u-action-sheet
              :show="showJcd"
              :actions="selectList"
              title="请选择监测点"
              @close="showJcd = false"
              @select="selectChangeJcd"
            >
            </u-action-sheet>
          </view>
        </view>
        <view class="search-r">
          <!-- <image src="/static/model/alarmTrue.svg" alt="" class="icon-style" /> -->
          <u-icon name="warning-fill" color="#0eb4fc" size="18"></u-icon>
          <text class="icon-text">低风险</text>
        </view>
      </view>
      <view class="top-area">
        <view class="top-title">
          <view style="font-weight: bold">瓦斯抽采泵信息</view>
        </view>
        <view
          class="top-content"
          v-for="(item, index) in topContentList"
          :key="index"
        >
          <view class="content-title">{{ item.strinstallpos }}</view>
          <view class="content-item-box">
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.warnLevel }}</view>
                <view class="item-label">报警状态</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{
                  item.readData.coVal || "--"
                }}</view>
                <view class="item-label">输入管道内一氧化碳(ppm)</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.gas1 || "--" }}</view>
                <view class="item-label">管路出口处瓦斯</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gas2 || "--" }}</view>
                <view class="item-label">泵站内瓦斯</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.readData.gas3 || "--" }}</view>
                <view class="item-label">输入管道内瓦斯</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gas4 || "--" }}</view>
                <view class="item-label">管道输出瓦斯</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{
                  item.readData.mixedTraffic || "--"
                }}</view>
                <view class="item-label">输入管道内工混流量</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{
                  item.readData.standardTraffic || "--"
                }}</view>
                <view class="item-label">输入管道内标况流量</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{
                  item.readData.totalGasDrainage || "--"
                }}</view>
                <view class="item-label">瓦斯抽放量</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <!-- <view class="item-value">{{ item.coVal }}</view>
                <view class="item-label">输入管道内一氧化碳(ppm)</view> -->
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bot-area">
        <view class="top-title">
          <view style="font-weight: bold">安全监测点信息</view>
        </view>
        <view
          class="top-content"
          v-for="(item, index) in botContentList"
          :key="index"
        >
          <view class="content-title">{{ item.strinstallpos || "--" }}</view>
          <view class="content-item-box">
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">瓦斯</view>
                <view class="item-label">测点类型</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readData.gasC || "--" }}</view>
                <view class="item-label">甲烷</view>
              </view>
            </view>
            <view class="content-item">
              <view class="item-l">
                <view class="item-value">{{ item.warnFlag || "--" }}</view>
                <view class="item-label">测点状态</view>
              </view>
              <view class="item-c"></view>
              <view class="item-r">
                <view class="item-value">{{ item.readTime || "--" }}</view>
                <view class="item-label">数据时间</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import moment from "moment";
export default {
  name: "gasDetail",
  props: {},
  watch: {},
  data() {
    return {
      timeRan: Number(new Date()),
      timer: "",
      PageCur: "0",
      tabList: [{ name: "预警监测" }, { name: "预警指标" }],
      // isShowSelect: true,
      showJcd: false,
      searchText: "",
      selectList: [],
      topContentList: [],
      botContentList: [],
    };
  },
  beforeDestroy() {
    this.timer = null;
    clearTimeout(this.timer);
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    NavChange: function (item) {
      clearTimeout(this.timer);
      this.PageCur = item.index;
      if (this.PageCur == 0) {
        this.getMonitor(this.selectList[this.PageCur].deviceID, true);
      }
    },

    getChangeJcd() {
      this.showJcd = true;
    },
    selectChangeJcd(e) {
      clearTimeout(this.timer);
      this.searchText = e.name;
      this.getMonitor(e.deviceID, true);
    },
    getMonitor(deviceID, flag) {
      let than = this;
      than.timer = setTimeout(
        async () => {
          await than.getSysWarnList(deviceID, "gas");
          if (than.timer) {
            than.timer = null;
          }
          than.getMonitor(deviceID);
        },
        flag ? 0 : 3000
      );
    },
    //获取顶部tab选项数据
    getTabList() {
      new Promise((resolve, reject) => {
        api
          .sysTypeWarn({ type: "gas" })
          .then((response) => {
            if (response.data.code == 200 && response.data.result.length != 0) {
              let result = response.data.result;
              this.selectList = result.map((el) => {
                //lxh
                return {
                  name: el.systemname,
                  deviceID: el.id,
                };
              });
              this.searchText = this.selectList[0].name;
              this.getMonitor(this.selectList[0].deviceID, true);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //获取瓦斯详情数据
    getSysWarnList(id, type) {
      new Promise((resolve, reject) => {
        api
          .sysWarn({ sysid: id, type: type })
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result;
              this.topContentList = data.pump;
              this.botContentList = data.gas;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.gas-detail {
  position: relative;
  box-sizing: border-box;

  .devic-box-tab {
    padding: 0px 10px !important;
  }

  .gas-content {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    .search-area {
      width: 100%;
      padding: 10px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;

      .search-l {
        width: calc(100% - 100px);
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 10px;

        .search-item {
          display: flex;
          align-items: center;

          .search-label {
            text-align: right;
          }
        }
      }

      .search-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80px;
        padding: 4px 10px;
        border-radius: 5px;
        background: #d4ecff;

        .icon-style {
          width: 14px;
          height: 14px;
        }

        .icon-text {
          font-size: 14px;
          font-weight: bold;
          color: #0eb4fc;
        }
      }
    }

    .top-area {
      width: 100%;
      padding: 0px 10px;
      background-color: #fff;
      margin-bottom: 2px;
      box-sizing: border-box;
    }

    .bot-area {
      width: 100%;
      padding: 0px 10px;
      background-color: #fff;
      margin-bottom: 2px;
      box-sizing: border-box;
    }

    .top-title {
      height: 28px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top-content {
      .content-title {
        height: 26px;
        line-height: 26px;
        padding: 0px 20px;
        font-size: 12px;
        background: url("/static/warndata/title.png") no-repeat;
        background-size: 100% 100%;
      }

      .content-item-box {
        padding: 10px 0px;

        .content-item {
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(
            to right,
            rgba(55, 135, 254, 0.08),
            rgba(4, 184, 255, 0.08),
            rgba(60, 161, 237, 0.08)
          );
          border-radius: 10px;
          margin-bottom: 5px;

          .item-l {
            width: calc(50% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .item-c {
            width: 4px;
            height: 70%;
            border-left: 2px solid;
            border-image: linear-gradient(
                to bottom,
                transparent,
                rgba(140, 203, 254, 1),
                transparent
              )
              1 1 1;
          }

          .item-r {
            width: calc(50% - 2px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .item-value {
      height: 20px;
      line-height: 20px;
      color: #0eb4fc;
      font-weight: bold;
    }

    .item-label {
      font-size: 12px;
    }

    .top-dialog-area,
    .center-dialog-area,
    .bottom-dialog-area {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;
    }

    .top-gas-list {
      width: 100%;
      padding: 10px 40px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;
    }

    .bot-gas-list {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 2px;
    }

    .dialog-btn {
      display: flex;
      width: 100%;
      padding: 8px 10px;
      box-sizing: border-box;
      background-color: #fff;

      // margin-bottom: 2px;
      .u-button {
        margin: 0px 10px;
      }
    }

    .dialog-title {
      height: 26px;
      line-height: 26px;
      padding: 0px 20px;
      margin-bottom: 10px;
      font-size: 12px;
      background: url("/static/warndata/title.png") no-repeat;
      background-size: 100% 100%;
    }

    .dialog-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      .dialog-label {
        width: 120px;
        text-align: right;
      }
    }

    .search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      .dialog-label {
        width: 80px;
        text-align: right;
      }
    }

    .content-title-gas {
      position: relative;
      height: 26px;
      line-height: 26px;
      padding-left: 20px;
      font-size: 12px;
      background: url("/static/warndata/title.png") no-repeat;
      background-size: 100% 100%;
    }

    .icon-gas-edit {
      position: absolute;
      right: 35px;
      top: 0;
      cursor: pointer;
    }

    .icon-gas-del {
      position: absolute;
      right: 10px;
      top: 0;
      cursor: pointer;
    }
  }
}

::v-deep .u-input {
  padding: 2px 6px !important;
}

::v-deep .u-popup {
  flex: 0;
}
</style>