hsz-app/pages/yj/detail/wyyj.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="安全监测预警" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
    <view class="" style="margin-top: 44px;border-top: 1px solid #f0f0f0;">
      <u-tabs class="tabsClass" :list="tabs" :scrollable="true" :activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}" :inactiveStyle="{color: '#606266',fontSize: '16px'}" lineColor="transparent" itemStyle="height: 44px" @click="onTab"></u-tabs>
      <div class="tableHead">
        <div class="td t1">测点</div>
        <div class="td t2">监测值{{ unitLabel }}</div>
        <div class="td t3">告警级别</div>
      </div>
      <div class="tableBody">
        <div class="tableRow" v-for="(item, index) in currentList" :key="index">
          <div class="td t1">{{ item.stationCode || '-' }}</div>
          <div class="td t2">{{ displayValue(item) }}</div>
          <div class="td t3">{{ item.warnLevel || '-' }}</div>
        </div>
        <div :style="{height:'80px'}"></div>
      </div>
    </view>
    <u-calendar :show="show" mode="range" @confirm="confirm" @cancel='cancel'></u-calendar>
	</view>
</template>

<script>
	import moment from 'moment'

export default {
  data() {
			return {
				show: false,
				model: {
					stm: '',
					etm: ''
				},
				customStyle: {
					background: '#000'
				},
        tabs: [
          { name: '位移监测预警', key: 'shiftWarn' },
          { name: '渗压监测预警', key: 'pressWarn' },
          { name: '渗流监测预警', key: 'flowWarn' }
        ],
        cur: 0,
        map: {}
      };
    },
    computed: {
      currentList(){
        if (!this.tabs || !this.tabs.length || !this.tabs[this.cur]) return []
        const k = this.tabs[this.cur].key
        const arr = this.map[k]
        return Array.isArray(arr) ? arr : []
      },
      unitLabel(){
        if (!this.tabs || !this.tabs.length || !this.tabs[this.cur]) return ''
        const k = this.tabs[this.cur].key
        console.log("k",k);
        
        if(k === 'shiftWarn') return '(mm)'
        if(k === 'pressWarn') return '(m)'
        if(k === 'flowWarn') return '(L/s)'
        return ''
      }
    },
    onLoad(options){
      const { map } = options || {}
      this.map = map ? JSON.parse(decodeURIComponent(map)) : {}
    },
    methods: {
      onTab(item, index){
        this.cur = item.index
      },
      displayValue(item){
        const v = item.value ?? item.val
        const val = (v === 0 || v) ? v : '-'
        const isShift = this.tabs && this.tabs[this.cur] && this.tabs[this.cur].key === 'shiftWarn'
        const dir = item.direction
        if(isShift && val !== '-' && dir){
          return `${val}（${dir}方向）`
        }
        return val
      },
      confirm(e) {
        console.log(e);
        this.model.stm = e[0]
        this.model.etm = e[1]
        this.show = false
			},
			cancel() {
				this.show = false
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/wtcl/detail/index'
				})
			}
    }
  }
</script>

<style lang="scss" scoped>
	.myTitleStyle {
		font-size: 30px;
		background-color: red;
		height: 200px;
	}

	.tabsClass {
		margin-top: 44px;
		height: 44px;
		padding: 0 40px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.item {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-between;

		.title {
			border-width: 0px;
			font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 15px;
			color: #666666
		}

		.titleRight {
			display: flex;

		}

	}
	.contentItem{
		display: flex;
		flex-wrap: wrap;
		.itemC{
			display: flex;
			justify-content: space-between;
			display: flex;
			color: #666666;
			padding: 10px;
		}
	}
.tabsClass{
  margin-top: 0;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.tabsClass /deep/ .u-tabs__wrapper__nav__item__text{ white-space: nowrap; }
.tableHead{
  width: 97%;
  margin: 5px auto 0;
  height: 50px;
  background-color: #e4f2fe;
  display: flex;
  color: #208FEE;
}
.tableBody{
  width: 97%;
  height: calc(100vh - 180px);
  background-color: #f7f7f7;
  overflow-y: auto;
}
.tableRow{
  width: 100%;
  height: 46px;
  display: flex;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
}
.td{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.t1{width: 40%}
.t2{width: 30%}
.t3{width: 30%}
</style>