指示灯显示，高温报警，设备总览界面

 横向展示：通过设置div的宽度及display:inline行内元素展示，从而实现先横向，再纵向的分布

v-for： v-for="(item, index) in list" ，迭代对象数组，list是进行迭代的数组，(item, index)是迭代出的数组，数组中的每一个元素都是类的对象，item为数值，index为索引

<template>
  <div class="app-container">
    <div class="filter-container">
      <div style="width: 1200px">
        //设置的单个列表大小及显示方式，通过inline横向展示
        <fieldset
          style="width: 200px; display: inline"
          v-for="(item, index) in list"
          :key="item"
          :label="item"
          :value="item"
        >
          <legend>
            //通过v-if判断数值对比，设置颜色状态
            <el-tooltip
              effect="dark"
              placement="top"
              v-if="
                list[index].nowTemp >= list[index].temp ||
                list[index].nowHum >= list[index].hum
              "
            >
               //鼠标移动到指示灯时可以看见的对应信息
              <div slot="content">
                设备名称:{{ list[index].name }}
                <br />
                预警温度:{{ list[index].temp }}
                <br />
                预警湿度:{{ list[index].hum }}
                <br />
                位置:{{ list[index].position }}
              </div>
              //设置指示灯的位置及颜色
              <div
                style="float: left; margin-left: 80px"
                :class="stateColor[2]"
              ></div>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              placement="top"
              v-else-if="
                list[index].nowTemp == null || list[index].nowHum == null
              "
            >
              <div slot="content">
                设备名称:{{ list[index].name }}
                <br />
                预警温度:{{ list[index].temp }}
                <br />
                预警湿度:{{ list[index].hum }}
                <br />
                位置:{{ list[index].position }}
              </div>
              <div
                style="float: left; margin-left: 80px"
                :class="stateColor[0]"
              ></div>
            </el-tooltip>
            <el-tooltip effect="dark" placement="top" v-else>
              <div slot="content">
                设备名称:{{ list[index].name }}
                <br />
                预警温度:{{ list[index].temp }}
                <br />
                预警湿度:{{ list[index].hum }}
                <br />
                位置:{{ list[index].position }}
              </div>
              <div
                style="float: left; margin-left: 80px"
                :class="stateColor[1]"
              ></div>
            </el-tooltip>
          </legend>
          <el-form
            :model="renew"
            label-width="100px"
            style="border-radius: 0px; margin: 0"
          >
            <el-form-item
              label-width="60px"
              label="编号:"
              prop="no"
              style="background-color: #b4b5b529"
            >
              <span>{{ list[index].no }}</span>
              <!-- <el-input
                v-model="list[index].no"
                style="width: 80px"
                :disabled="true"
              /> -->
            </el-form-item>
            <el-form-item
              label-width="60px"
              label="温度:"
              prop="temp"
              style="background-color: #b4b5b529"
            >
              <span v-if="list[index].nowTemp != null"
                >{{ list[index].nowTemp }}℃</span
              >
              <span v-else>空值</span>
              <!-- <el-input
                v-model="list[index].nowTemp"
                style="width: 80px"
                :disabled="true"
              /> -->
            </el-form-item>
            <el-form-item
              label-width="60px"
              label="湿度:"
              prop="hum"
              style="background-color: #b4b5b529"
            >
              <span v-if="list[index].nowHum != null"
                >{{ list[index].nowHum }}%</span
              >
              <span v-else>空值</span>
            </el-form-item>
          </el-form>
        </fieldset>
      </div>
    </div>
  </div>
</template>

//设置警示灯的大小样式
<style>
.el-form-item {
  margin-bottom: 0px;
}
#group {
  display: flex;
  justify-content: space-around;
  width: 800px;
}
.green {
  width: 20px;
  height: 20px;
  background: #009405;
  border: 1px solid #009405;
  border-radius: 50%;
  margin: 0 auto;
}
.red {
  width: 20px;
  height: 20px;
  background: #be1508;
  border: 1px solid #be1508;
  border-radius: 50%;
  margin: 0 auto;
}
.yellow {
  width: 20px;
  height: 20px;
  background: #e7ff13d7;
  border: 1px solid #e7ff13d7;
  border-radius: 50%;
  margin: 0 auto;
}
</style>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Cookies from "js-cookie";

const calendarTypeOptions = [
  { key: "CN", display_name: "China" },
  { key: "US", display_name: "USA" },
  { key: "JP", display_name: "Japan" },
  { key: "EU", display_name: "Eurozone" },
];

const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "MainTable",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      list: [],
      url: process.env.VUE_APP_BASE_API,
      no: [],
      temp: "",
      hum: "",
      tempList: [],
      humList: [],
      count: "",
      countList: [],
      stateColor: ["yellow", "green", "red"],
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    // 获取总数
    getAll() {
      var self = this;
      request({
        url: self.url + "/api/Main/GetAll",
        method: "get",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((response) => {
        self.list = response;
      });
    },
    // 获取温度
    getTemp() {
      var self = this;
      request({
        url:self.url + "/api/Main/GetTemp",
        method: "get",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((response) => {
        self.tempList = response;
      });
    },
    // 获取湿度
    getHum() {
      var self = this;
      request({
        url: self.url + "/api/Main/GetHum",
        method: "get",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((response) => {
        self.humList = response;
      });
    },
    //得到机器编号
    getCount() {
      var self = this;
      request({
        url: self.url + "/api/Main/GetCount",
        method: "get",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((response) => {
        self.countList = response;
      });
    },
  },
};
</script>

效果展示