labsop_mcs/frontend_weixin/src/views/history.vue

<template>
  <div class="search-bar">
    <!-- <div v-for="device in devices"
         class="bo">
      <div class="bo-top">
        <div class="top-co1">
          <img src="../assets/images/on.png"
               width="20"
               v-if="device.DState == 1">
          <img src="../assets/images/off.png"
               width="20"
               v-else>
        </div>
        <div class="top-co2">
          <div class="row">
            <span class="t-font power ">操作人: {{device.SendTo}}</span>
          </div>
          <div class="row">
            <span class="t-font power">操作时间: {{jstimehandl(device.CreateOn)}}</span>
          </div>
        </div>

      </div>

    </div> -->
    <el-table ref="singleTable"
              :data="devices"
              highlight-current-row
              width="100%">
      <el-table-column type="index"
                       width="36">
      </el-table-column>
      <el-table-column property="SendTo"
                       label="开锁人"
                       align="center">
      </el-table-column>
      <el-table-column property="CreateOn"
                       label="开锁时间"
                       width="160"
                       align="center">
        <template scope="scope">
          {{jstimehandl(scope.row.CreateOn)}}
        </template>
      </el-table-column>
      <el-table-column property="IsSend"
                       label="开锁状态"
                       align="center">
        <template scope="scope">
          <el-tag size="mini"
                  type="success">{{'成功'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination small
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page.sync="currentPage"
                   :page-size="size"
                   layout="total, prev, pager, next"
                   :total="currentItemCount">
    </el-pagination>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Loading,
  Datetime,
  Box,
  XButton,
  Popup,
  Group,
  Cell
} from 'vux'
import axios from 'axios'
import DataChart from '../components/datachart.vue'
// import moment from 'moment'

export default {
  name: 'devicedetail',
  components: {
    Tab,
    TabItem,
    Loading,
    Datetime,
    Box,
    XButton,
    Popup,
    Group,
    Cell,
    DataChart
  },
  data () {
    return {
      isLoading: false,
      loadingText: '',
      devices: [],
      currentItemCount: 0,
      currentPage: 1,
      size: 20,
      cid: ''
    }
  },
  created () {
    let routeparams = this.$route.params.cid.split('_')
    this.cid = routeparams[0]
    this.initData(this.cid)
    // this.dataItem = routeparams[1]
    // this.cname = routeparams[2]
    // if (this.contains(this.items1, this.dataItem)) {
    //   this.seriesData = [{name: '温度', unit: '℃'}, {name: '湿度', unit: '%'}]
    // } else if (this.contains(this.items2, this.dataItem)) {
    //   this.seriesData = [{name: '温度', unit: '℃'}]
    // } else if (this.contains(this.itemo2Alone, this.dataItem)) {
    //   this.seriesData = [{name: '氧气', unit: '%'}]
    // } else if (this.contains(this.itemo2, this.dataItem)) {
    //   this.seriesData = [{name: '温度', unit: '℃'}, {name: '湿度', unit: '%'}, {name: '氧气', unit: '%'}]
    // } else if (this.contains(this.itemco2, this.dataItem)) {
    //   this.seriesData = [{name: '温度', unit: '℃'}, {name: '湿度', unit: '%'}, {name: '二氧化碳', unit: '%'}]
    // } else if (this.contains(this.itemco2Alone, this.dataItem)) {
    //   this.seriesData = [{name: '二氧化碳', unit: '%'}]
    // } else if (this.contains(this.itempower, this.dataItem)) {
    //   this.seriesData = [{name: '功率', unit: 'W'}, {name: '电量', unit: 'V'}]
    // }
    // this.$services.channel.get('datavalue/' + this.cid, null)
    //   .then(res => {
    //     this.lastdata = res.data
    //     this.lasttimeutc = this.getDate(this.lastdata.Time).getTime() / 1000 + ''
    //     this.getChartData()
    //   })
  },
  methods: {
    initData (code) {
      let _this = this
      // request
      axios.request({
        method: 'get',
        url: 'http://iot.labsop.cn:12001/api/remote_control/gettriggerhistory?current=' + this.currentPage + '&size=' + this.size + '&code=' + code
      }).then(res => {
        _this.devices = res.data.data.records
        _this.currentItemCount = res.data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    jstimehandl (val) {
      val = val.replace('T', ' ')
      return val.substring(0, 19)
    },
    handleSizeChange (value) {
      this.size = value
      this.currentPage = 1
      this.initData(this.cid)
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.initData(this.cid)
    },
    formatLongString (str, len) {
      return str.length > len ? str.substring(0, len) + '...' : str;
    }

  }
}
</script>

<style type="text/css">
html,
body {
  background-color: #eeeeee;
  color: #424242;
}

.loadmore {
  text-align: center;
  padding: 10px;
  color: #9e9e9e;
}

.search-bar {
  border-bottom: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  display: block;
  padding: 10px;
}

.search-input {
  padding: 4px 0;
  border-radius: 6px;
  background-color: white;
  height: 10px;
}

.bo {
  background-color: white;
  margin: 10px;
  border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}

.bo-top {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.top-co1 {
  width: 10%;
  display: table-cell;
  vertical-align: middle;
}

.top-co2 {
  width: 90%;
  display: table-cell;
  vertical-align: middle;
}

.top-co3 {
  width: 10%;
  display: table-cell;
  vertical-align: middle;
}

.top-co3 img {
  display: block;
}

.bo-bottom {
  text-align: left;
  padding: 10px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.bo-cell {
  text-align: center;
  border-right: 1px solid #f5f5f5;
  display: inline-block;
  width: 32%;
}

.bo-cell:last-child {
  border: none;
}

.t-time {
  font-size: 14px;
  font-weight: light;
  color: #9e9e9e;
}

.t-font {
  display: block;
  font-size: 14px;
  font-weight: lighter;
  font-family: "Oswald";
}

.temperature {
  color: #ef5350;
}
.el-pagination {
  margin: 1rem 0 2rem;
  text-align: right;
}
.humidity {
  color: #29b6f6;
}

.co2 {
  color: #ffa726;
}

.o2 {
  color: #673ab7;
}

.power {
  color: #4caf50;
}

.t-desc {
  display: block;
  font-size: 11px;
  color: #9e9e9e;
}

.t-desc > img {
  margin-left: 4px;
}

.t-dot {
  color: #f44336;
}

.row {
  display: inline-block;
  width: 100%;
  height: 24px;
  line-height: 24px;
}

.row img {
  margin-top: 2px;
  margin-right: 4px;
  float: left;
}

.status-box {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  margin-right: 8px;
}

.right-align {
  text-align: right;
}
</style>