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

<template>
  <view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="ai告警" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
    <view class="" style="margin-top: 44px;">
      <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">告警时间</div>
      </div>
      <div class="tableBody">
        <div class="tableRow" v-for="(item, index) in currentList" :key="index">
          <div class="td t1">{{ item.stnm || '-' }}</div>
          <div class="td t2">{{ item.warningTime || '-' }}</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: ''
        },
        tabs: [],
        cur: 0,
        map: {}
    };
  },
  computed: {
    currentList(){
      if (!this.tabs.length) return []
      const k = this.tabs[this.cur].key
      const arr = this.map[k]
      return Array.isArray(arr) ? arr : []
    }
  },
  onLoad(options){
      const { map } = options || {}
      this.map = map ? JSON.parse(decodeURIComponent(map)) : {}
      this.tabs = Object.keys(this.map).map(k => ({ name: k, key: k }))
    },
    methods: {
      onTab(item, index){
        this.cur = item.index
      },
      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;
	}

.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;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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: 60%}
.t2{width: 40%}
</style>