dvcp_v2_webapp/packages/tutelage/AppWristband/components/Monitor.vue

<template>
  <ai-detail class="statistics">
    <template slot="title">
      <ai-title title="监测数据" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template slot="content">
      <div class="statistics-wrapper">
        <div class="statistics-wrapper__title">
          <span :class="[currIndex === 0 ? 'active' : '']" @click="search.current = 1, currIndex = 0, getList()">体温</span>
          <span :class="[currIndex === 1 ? 'active' : '']" @click="search.current = 1, currIndex = 1, getList()">心率</span>
          <span :class="[currIndex === 2 ? 'active' : '']" @click="search.current = 1, currIndex = 2, getList()">血压</span>
          <span :class="[currIndex === 3 ? 'active' : '']" @click="search.current = 1, currIndex = 3, getList()">血氧</span>
        </div>
        <div class="statistics-wrapper__body">
          <div style="padding: 16px;">
            <ai-search-bar>
              <template #left>
                <el-date-picker
                  @change="search.current = 1, getList()"
                  v-model="search.createTimeRange"
                  type="daterange"
                  size="small"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </template>
            </ai-search-bar>
            <ai-table
              class="detail-table__table"
              :border="true"
              style="margin-top: 4px;"
              :tableData="tableData"
              :col-configs="colConfigs"
              :total="total"
              :stripe="false"
              :current.sync="search.current"
              :size.sync="search.size"
              @getList="getList">
            </ai-table>
          </div>
        </div>
      </div>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Statistics',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },

    data () {
      return {
        currIndex: 0,
        search: {
          name: '',
          current: 1,
          size: 10,
          createTimeRange: []
        },
        tableData: [],
        total: 0
      }
    },

    computed: {
      colConfigs () {
        return [
          {prop: 'deviceName', label: '姓名', align: 'center' },
          {prop: 'deviceMID', label: '设备号', width: 280, align: 'center' },
          {prop: 'itemValue', label: this.getLabel(), align: 'center' },
          {prop: 'sampleTime', label: '更新时间', align: 'center' },
          {
            prop: 'abnormalStatus',
            align: 'center',
            label: '是否异常',
            render: (h, { row }) => {
              return h('span', {
                style: {
                  color: this.getStatusColor(row.abnormalStatus)
                }
              }, this.getStatus(row.abnormalStatus))
            }
          }
        ]
      }
    },

    mounted () {
      this.getList()
    },
    methods: {
      getList () {
        this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?deviceId=${this.params.id}&item=${this.currIndex}`, null, {
          params: {
            ...this.search,
            createTimeRange: (this.search.createTimeRange && this.search.createTimeRange.length) ? this.search.createTimeRange.join(',') : ','
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      getStatusColor (status) {
        if (!status && status !== '0') return ''

        return {
          '0': '#2EA222',
          '1': '#F46',
          '2': '#F46'
        }[status]
      },

      getStatus (status) {
        if (!status && status !== '0') return ''

        return {
          '0': '正常',
          '1': '异常',
          '2': '异常'
        }[status]
      },

      getLabel () {
        return ['体温(℃)', '心率', '血压', '血氧'][this.currIndex]
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .statistics {
    * {
      box-sizing: border-box;
      font-weight: normal;
      font-style: normal;
    }
    .statistics-wrapper {
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
      border-radius: 2px;

      .statistics-wrapper__title {
        display: flex;
        align-items: center;
        height: 56px;
        padding: 0 16px;
        border-bottom: 1px solid #EEEEEE;

        span {
          height: 56px;
          line-height: 56px;
          margin-right: 32px;
          color: #888888;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          user-select: none;
          border-bottom: 3px solid transparent;

          &:last-child {
            margin-right: 0;
          }

          &.active {
            color: #222222;
            border-color: #2266FF;
          }
        }
      }

      .statistics-wrapper__body--list {
        padding: 0 40px 20px;
    }
    }
  }
</style>