rightBottom.vue

<template>
  <div class="live_item  acea-column" style="height:100%">
    <div class="ctit">
      <div class="title_dianpu">
        <p class="tit">设备在线情况</p>
        <div>
          <span @click="clickDevice(1)" style="cursor:pointer">在线{{deviceNum.online?deviceNum.online:''}}</span>
          <span>|</span>
          <span style="color:#E02020;cursor:pointer" @click="clickDevice(2)">离线{{deviceNum.offline?deviceNum.offline:''}}</span>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="all">

      <!-- <table class="all_table">
        <thead class="all_thead">
          <tr>
            <th>序号</th>
            <th>状态</th>
            <th>序列号</th>
            <th>本地IP</th>
          </tr>
        </thead>
        <tbody class="all_tbody">
          <tr :class="`color_bgc_${index%2} basee`" v-for="(item,index) in dataList" :key="item.id">
            <td>0{{index+1}}</td>
            <td :class="`${item.status==1?'color_line':'color_outline'}`">{{item.status==1?'在线':'离线'}}</td>
            <td class="serialnum" :title="item.serialnum">{{item.serialnum}}</td>
            <td>{{item.localIp}}</td>
          </tr>
        </tbody>
      </table> -->
      <div class="all_table">
        <div class="all_thead row_all">
          <span style="width:12%">序号</span>
          <span style="width:13%">状态</span>
          <span style="width:39%">心跳时间</span>
          <span style="width:35%">本地IP</span>
        </div>
        <div class="ops">
          <div :class="`color_bgc_${index%2} row_all row_table`" v-for="(item,index) in dataList" :key="item.id">
            <span style="width:12%">0{{index+1}}</span>
            <span style="width:13%" :class="`${item.status==1?'color_line':'color_outline'}`">{{item.status==1?'在线':'离线'}}</span>
            <span style="width:39%" class="serialnum" :title="item.lastAliveTime">{{item.lastAliveTime}}</span>
            <span style="width:35%">{{item.localIp}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { optionFormatter } from "@/utils/dealChart";
import echarts from "@/third-party/echart_lib";
import "echarts-liquidfill";
export default {
  inject: ["addModule"],
  props: {
    mallId: Number,
  },
  data() {
    return {
      type: 1,
      dataList: [],
      deviceNum: {},
    };
  },
  components: {},
  watch: {
    mallId: {
      handler(newVal) {
        if (newVal) {
          this.type = 1;
          this.loadData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    clickDevice(type) {
      this.type = type;
      this.loadData();
    },
    loadData() {
      let dateStr = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
      // let params = {
      //   chartIds: 471,
      //   orgType: "mall",
      //   orgIds: this.mallId,
      //   dateType: "day",
      //   startDate: dateStr,
      //   endDate: dateStr,
      // };
      let params = {
        mallId: this.mallId,
        status: this.type == 1 ? 1 : 0,
        page: 1,
        pageSize: 9,
      };
      this.$api.bigScreen.getDeviceInfo(params).then((res) => {
        this.dataList = res.data.data.pageInfo.list;
        this.deviceNum = {
          online: res.data.data && res.data.data.online,
          offline: res.data.data && res.data.data.offline,
        };
      });
    },
  },
  created() {
    this.addModule(this);
  },

  mounted() {
    // this.initChart();
  },
};
</script>

<style lang="less" scoped>
.row_table {
  height: 11.1111%;
}
.ops {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
.row_all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.ul_all {
  // margin-bottom: 10px;
  height: calc(100% - 155px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ul_li_top {
  .progress {
    /deep/.el-progress-bar__outer {
      background-color: #353f5c;
    }
  }

  .ul_li_top_div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    .ul_li_top_div_title {
      display: flex;
      align-items: center;
      > div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        width: 16px;
        height: 16px;
        background-color: #fd6400;
        font-size: 10px;
        border-radius: 50%;
      }
      > span {
        color: #fff;
      }
    }
    .color_title {
      color: #fd6400;
      font-size: 14px;
    }
  }
}
.title_dianpu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    span {
      &:first-child {
        font-size: 14px;
        color: #00ecff;
      }
      &:nth-child(2) {
        color: #74787f;
      }
      &:last-child {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
.all {
  width: 100%;

  table {
    border-collapse: collapse;
    border-spacing: 0;
    // tbody {
    //   td {
    //     border: 1px solid transparent;
    //     &:hover {
    //       border-color: #0fc8f3;
    //     }
    //   }
    // }
  }
  margin-top: 5px;
  font-size: 14px !important;
  width: 100%;
  height: calc(100% - 40px);
  .all_table {
    width: 100%;
    height: 100%;
    text-align: center;
    .all_thead {
      height: 40px;
      color: #fff;
      background-image: linear-gradient(to right, #4c4a53, #313d61, #4c4a53);
      th {
        font-weight: normal;
      }
    }
    .all_tbody {
      color: #fff;
      font-size: 14px;
    }
  }
}
.background-color_1 {
  background-color: #fd6400 !important;
}
.background-color_2 {
  background-color: #e7da36 !important;
}
.background-color_3 {
  background-color: #18d2da !important;
}
.background-color_4 {
  background-color: #fff !important;
}
.color_text_1 {
  color: #fd6400 !important;
}
.color_text_2 {
  color: #e7da36 !important;
}
.color_text_3 {
  color: #18d2da !important;
}
.color_text_4 {
  color: #fff !important;
}
.color_line {
  color: #6dd400;
}
.color_outline {
  color: #e02020;
}
.color_bgc_0 {
  background-color: #07101c;
}
.color_bgc_1 {
  background-color: #353438;
}
.basee {
  // display: flex;
  // width: 100%;
  // justify-content: space-between;
}
.serialnum {
  // display: inline-block;
  // margin-top: 7px;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>