tsg-app/pages/newAqjc/index.vue

<template>
  <view class="rain-detail-box">
    <u-status-bar></u-status-bar>
    <view class="nav-bar">
      <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
      <view class="title">
        安全监测
      </view>
    </view>
    <view class="tab-bar">
      <uni-swiper-dot  :current="current" field="content" :dotsStyles="dotsStyles">
        <swiper class="swiper-box" style="height: 30px;" @change="change">
          <swiper-item>
            <view style="display: flex;justify-content: space-between;">
              <view class="jcsj" @click="activeOne = 0" :class="{ 'active': activeOne == 0 }">
                位移监测
              </view>
              <!-- style="margin: 0 25px;" -->
              <view class="tjsj" @click="activeOne = 1" :class="{ 'active': activeOne == 1 }" style="margin: 0 4%">
                渗压监测
              </view>
              <!-- style="margin: 0 25px 0 0;" -->
              <view class="zrtx" @click="activeOne = 2" :class="{ 'active': activeOne == 2 }">
                渗流监测
              </view>
              <view class="txjc" @click="activeOne = 3" :class="{ 'active': activeOne == 3 }" style="margin-left:4%">
                白蚁监测
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

    </view>
    <view class="rain-detail-content">
      <SlTable :tableData="slData" v-if="activeOne == 2" />
      <SyView v-else-if="activeOne == 1" />
      <WyTable :tableData="zwyData" v-else-if="activeOne == 0" />
      <ByTable :tableData="byData" v-else-if="activeOne == 3" />
    </view>
  </view>
</template>

<script>
import SlTable from "./slTable.vue"
import SyView from "../aqjc/index.vue"
import WyTable from "./zwyTable.vue"
import ByTable from "./byTable.vue"
export default {
  data() {
    return {
      activeOne: 0,
      current: 0,
      slData: [],
      zwyData: [],
      byData:[],
      dotsStyles: {
        bottom: 0,
        selectedBackgroundColor: "#d9001b"
      }
    }
  },
  components: {
    SlTable,
    SyView,
    WyTable,
    ByTable
  },
  methods: {
    backTo() {
      uni.navigateBack({ delta: 1 })
    },
    change(e) {
      console.log(e.detail.current);
      this.current = e.detail.current;
    },
    async getSlData() {
      try {
        const { data } = await uni.$http.get(
          "/gunshiApp/tsg/osmoticPressR/list/value?type=2"
        );
        if (data.code == 200) {
          this.slData = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    async getZwyData() {
      try {
        const { data } = await uni.$http.get(
          "/gunshiApp/tsg/osmoticShiftR/list/value"
        );
        if (data.code == 200) {
          this.zwyData = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
     async getByData() {
      try {
        const { data } = await uni.$http.get(
          `/gunshiApp/tsg/termite/survey/listNewData`
        );
        if (data.code == 200) {
          this.byData = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
  },
  mounted() {
    this.getSlData();
    this.getZwyData();
    this.getByData();
  },
}
</script>

<style lang="scss" scoped>
.rain-detail-box {
  height: 100vh;
  overflow: hidden;
  position: relative;

  .nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    // margin-top: 30px;
    // padding-top: 20px;
    // padding-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    // box-shadow: 0 5px 10px -8px #dfdfdf inset;
  }

  .title {
    flex: 1;
    text-align: center;
    margin-right: 18px;
    font-size: 18px;
  }

  .tab-bar {
    // width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 30px;
    border-bottom: 1px solid #dfdfdf;
    // overflow-x: auto;
  }

  .active {
    color: #39a6ff;
  }

  .rain-detail-content {
    padding: 10px;
  }
}
</style>