labsop_mcs/frontend_web/src/views/main/index.vue

<template>
  <div>
    <!-- <el-card> -->
    <!--备用文字-->
    <!-- <p style="text-align:center" v-show="isnodata">{{ $t('message.index.isnodata') }}</p> -->
    <!--标题部分-->
    <!-- <div slot="header">
        <span>
          <img v-if="user.photo" :src="'http://'+user.host+user.photo" class="avatar-index">
          <img v-else class="avatar-index" src="../../assets/images/avatar-default.jpg" :alt="user.name"> &nbsp;[ {{user.Realname}} ]
        </span>
        <router-link :to="'/usersetting'">
          <span style="float:right;color: #6B6B6B;">{{ $t('message.index.person') }}</span>
        </router-link>
      </div> -->
    <!--单个设备单元-->
    <el-row>
      <el-col :span="6"
              v-for="(v, index) in list"
              style="min-width:253px;">
        <el-card style="margin:10px;min-width:180px;min-height:180px; padding: 5px"
                 shadow="hover">
          <!--单个设备标题-->
          <div style="margin:px;min-width:180px; padding: 5px">
            <router-link :to="'/devices/chart/'+v.Serial+'_'+v.DataItem+'?xn='+v.title">
              <div style="font-size: 14px; font-weight: 800;height:33px;overflow:hidden;color: #24313C;margin:-10px -15px -15px -15px">
                <div style="float: left;width:90%"
                     :title="v.title">传感器: &nbsp;{{v.title}}</div>
                <div style="float: right;margin-top:-20px;">
                  <!-- <i class="icon icon-stop2" style="color:#FF4949;" v-if="v.DState === 2" title="$t('message.index.offline')"></i> -->
                  <img style="weight:30px;height:25px;"
                       v-if="v.DState === 2"
                       src="../../assets/images/off.png">
                  <img style="weight:30px;height:25px;"
                       v-if="v.DState === 1"
                       src="../../assets/images/on.png">

                  <!-- <i class="icon icon-stop2" style="color:#7FFF00;" v-if="v.DState === 1" :title="$t('message.index.online')"></i> -->
                </div>
              </div>
            </router-link>
          </div>
          <el-col class="line"
                  :span="24"
                  style="background-color:lightgrey; line-height: 1px;margin-top:7px;">&nbsp;</el-col>
          <div style="height:120px; padding: 3px; margin: -18px -13px -25px -13px">
            <el-col :span="7"
                    v-if="contains(havetemp,v.DataItem)">
              <div class="indgrid-content temperaturecolcor1"
                   style="margin:5px">
                {{ $t('message.index.temperature') }}
                <!-- <hr class="indcontenthr" /> -->
                <div class="indata">{{v.Temp}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(havehum,v.DataItem)">
              <div class="indgrid-content contenthum1"
                   style="margin:5px">
                {{ $t('message.index.humidity') }}
                <!-- <hr class="indcontenthr" /> -->
                <div class="indata">{{v.Hum}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(haveo2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                O2 %
                <div class="indata">{{v.O2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(haveco2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                CO2 %
                <div class="indata">{{v.Co2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(windspeed,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.wind') }}
                <div class="indata">{{v.WindSpeed}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(pressure,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.pressure') }}
                <div class="indata">{{v.Pressure}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(Ots,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.Ots') }}
                <div class="indata">{{v.Ots}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(Doorlock,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content doorlockc">
                智能锁
                <div class="indata">{{v.Doorlock}}</div>
              </div>
            </el-col>

            <el-col :span="7"
                    v-if="contains(Displacement,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.Displacement') }}
                <div class="indata">{{v.Displacement}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(h2o,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                us/cm
                <div class="indata">{{v.H2O}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(so2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                SO2
                <div class="indata">{{v.SO2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(clo2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                ClO2
                <div class="indata">{{v.ClO2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(c2h4,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                C2H4
                <div class="indata">{{v.C2H4}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(c2h2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                C2H2
                <div class="indata">{{v.C2H2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(cl2,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                Cl2
                <div class="indata">{{v.Cl2}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(o3,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                O3
                <div class="indata">{{v.O3}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(tvoc,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                TVOC mg
                <div class="indata">{{v.TVOC}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(havepower,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.power') }}
                <div class="indata">{{v.Power}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(havesupply,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.electric') }}
                <div class="indata">{{v.Supply}}</div>
              </div>
            </el-col>
            <el-col :span="7"
                    v-if="contains(haveliquidlevel,v.DataItem)"
                    style="margin:5px">
              <div class="indgrid-content contento2c">
                {{ $t('message.index.Voltage') }}
                <div class="indata">{{v.LiquidLevel}}</div>
              </div>
            </el-col>
            <el-col class="line"
                    :span="24"
                    style="background-color:lightgrey; line-height: 1px;margin-top:7px;">&nbsp;</el-col>
            <el-col class="devplab"
                    :span="24">
              {{ $t('message.index.Update') }} {{v.Time}}
            </el-col>
            <!-- <el-col class="devplab" :span="24" >
                {{v.Time}}
              </el-col> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--分页-->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[30, 50, 100]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="currentItemCount">
    </el-pagination>
    <!-- </el-card> -->
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
export default {
  name: 'index',
  data () {
    return {
      currentItemCount: 0,
      currentPage: 1,
      size: 30,
      list: [],
      isnodata: false,
      loading: false,
      havetemp: '0,6,7,9,10,14,15,16',
      havehum: '0,7,9,14,16',
      haveo2: '7,17',
      haveco2: '9,26',
      windspeed: '18',
      pressure: '19',
      Doorlock: '31,33',
      Ots: '29',
      Displacement: '30',
      clo2: '20',
      h2o: '27',
      so2: '28',
      c2h4: '21',
      c2h2: '25',
      cl2: '22',
      o3: '23',
      tvoc: '24',
      havepower: '13',
      havesupply: '13',
      haveliquidlevel: '15',
      user: {
        photo: '',
        name: '',
        Realname: '',
        host: ''
      }
    }
  },

  created () {
    this.initData()
    let _this = this
    Window.indexinterval = setInterval(function () {
      _this.loaddataall()
    }, 120000)
    _this.user.photo = _this.session.user.Profile.Photo
    _this.user.name = _this.session.user.name
    _this.user.Realname = _this.session.user.Profile.Realname
    _this.user.host = _this.session.user.Profile.Host
  },
  computed: mapGetters({
    session: 'session'
  }),
  methods: {
    initData () {
      // toggle loading
      this.loading = true
      let _this = this
      // paginate
      const params = {
        _currentPage: this.currentPage,
        _size: this.size
      }
      // request
      this.$services.channel.get('list', {
        params
      })
        .then(res => {
          // response
          _this.list = res.data.items
          if (_this.list.length < 1) {
            _this.isnodata = true
          } else {
            _this.isnodata = false
          }
          // toggle loading
          // _this.loading = false
          _this.currentItemCount = res.data.currentItemCount
          _this.loaddataall()
        })
        .catch(err => {
          // handle error
          console.error(err)
          this.loading = false
        })
    },
    handleSizeChange (value) {
      this.size = value
      this.currentPage = 1
      this.initData()
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.initData()
    },
    loaddata (code, k) {
      let _this = this
      return _this.$services.channel.get('datavalue/' + code, null)
        .then(res => {
          _this.list[k].Temp = res.data.Temp
          _this.list[k].Hum = res.data.Hum
          _this.list[k].Vol = res.data.Vol
          _this.list[k].Rssi = res.data.Rssi
          _this.list[k].Time = res.data.Time
          _this.list[k].O2 = res.data.O2
          _this.list[k].Co2 = res.data.Co2
          _this.list[k].WindSpeed = res.data.WindSpeed
          _this.list[k].Pressure = res.data.Pressure
          _this.list[k].Ots = res.data.Ots
          if (res.data.Doorlock === '0') {
            _this.list[k].Doorlock = '关闭'
          } else {
            _this.list[k].Doorlock = '开启'
          }
          _this.list[k].Displacement = res.data.Displacement
          _this.list[k].C2H4 = res.data.C2H4
          _this.list[k].C2H2 = res.data.C2H2
          _this.list[k].Cl2 = res.data.Cl2
          _this.list[k].ClO2 = res.data.ClO2
          _this.list[k].H2O = res.data.H2O
          _this.list[k].SO2 = res.data.SO2
          _this.list[k].O3 = res.data.O3
          _this.list[k].TVOC = res.data.TVOC
          _this.list[k].Power = res.data.Power
          _this.list[k].Supply = res.data.Supply
          _this.list[k].DState = res.data.DState
          _this.list[k].Signal = res.data.Signal
          _this.list[k].LiquidLevel = res.data.LiquidLevel
        })
    },
    loaddataall () {
      for (let i = 0; i < this.list.length; i++) {
        this.loaddata(this.list[i].Serial, i)
      }
    },
    contains (strs, str) {
      let arrs = strs.split(',')
      for (let v in arrs) {
        if (arrs[v] === (str + '')) return true
      }
      return false
    }
  },
  // https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html#响应路由参数的变化
  // https://router.vuejs.org/zh-cn/advanced/data-fetching.html
  watch: {
    $route () {
      this.initData()
    }
  }
}

</script>

<style>
.el-pagination {
  margin: 1rem 0 2rem;
  text-align: right;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.indgrid-content {
  font-weight: 600;
  margin: 1px;
  font-size: 10px;
}

.contenttemp {
  background: #f4a460;
  color: white;
  text-align: center;
  padding: 5px 0 5px 0;
}

.contenthum1 {
  /* background: #5FBDB7; */
  background: url("../../assets/images/2.png") center center no-repeat;
  background-size: 100px 80px;
  border-radius: 5px;
  color: white;
  text-align: center;
  padding: 15px;
  margin: 0px 5px 5px 0px;
}

.contentpw {
  background: #eddc49;
  color: white;
  text-align: center;
  padding: 5px 0 5px 0;
}

.contentvolt {
  background: #6984e3;
  color: white;
  text-align: center;
  padding: 5px 0 5px 0;
}

.contento2c {
  /* background: #5FBDB7; */
  background: url("../../assets/images/3.png") center center no-repeat;
  background-size: 100px 80px;
  border-radius: 5px;
  color: white;
  text-align: center;
  padding: 15px;
  margin: 0px 5px 5px 0px;
}
.doorlockc {
  /* background: #5FBDB7; */
  background: url("../../assets/images/4.png") center center no-repeat;
  background-size: 100px 80px;
  border-radius: 5px;
  color: white;
  text-align: center;
  padding: 15px;
  margin: 0px 5px 5px 0px;
}

.contentwindspeed {
  background: #40e0d0;
  color: white;
  text-align: center;
  padding: 5px 0 5px 0;
}

.contentpressure {
  background: #000080;
  color: white;
  text-align: center;
  padding: 5px 0 5px 0;
}

.indcontenthr {
  height: 2px;
  border: none;
  border-top: 1px dotted white;
}

.temperaturecolcor1 {
  border-radius: 5px;
  /* background: #30c283db; */
  /* background-image:url('/assets/images/avatar-default.jpg'); */
  background: url("../../assets/images/1.png") center center no-repeat;
  background-size: 100px 80px;
  color: white;
  /* width: 60px; */
  /* height: 60px; */
  margin: 0px 5px 5px 0px;
  text-align: center;
  padding: 15px;
}
.avatar-index {
  width: 45px;
  height: 45px;
  margin-top: -15px;
  margin-bottom: -15px;
}

.indata {
  font-size: 18px;
  margin-top: 5px;
}
.devplab {
  font-size: 13px;
  color: #424242;
  font-weight: 500;
  margin-top: 15px;
}
</style>