<template>
  <div class="table-box">
    <div class="card container-box">
      <div>站台概况</div>
      <div class="container-main mt15">
        <div class="container-item container__label">站号：
          <el-select v-model="queryParams.name" filterable placeholder="请选择自动站" clearable style="width: 150px">
          <el-option label="固定站1" value="1" />
          <el-option label="站2" value="2" />
        </el-select></div>
        <div class="container-item container__label">名称：固定站1</div>
        <div class="container-item container__label">通信模块状态：</div>
        <div class="container-item container__label">观测时间：2024-09-19 23:00</div>
        <div class="container-item container__label">自动站状态：<el-tag type="danger" size="default" hit>故障</el-tag></div>
        <div class="container-item container__label">站址：未命名29号</div>
      </div>
<!--      <div class="container-main mt15">-->
<!--        <div class="container-item container__label">自动站状态：<el-tag type="danger" size="default" hit>故障</el-tag></div>-->
<!--        <div class="container-item container__label">站址：未命名29号</div>-->
<!--        <div class="container-item container__label"></div>-->
<!--        <div class="container-item container__label"></div>-->
<!--      </div>-->
    </div>
    <div class="card table-main">
      <div>站台状况</div>
      <div class="container-device-main mt15">
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
        <div class="container-device-item">
          <div class="container-text-box">
            <div class="container-title">超声风传感器</div>
            <div class="container-name mt15 mb15">传感器状态:</div>
            <div class="container-name">证书剩余时间:536天</div>
          </div>
          <div class="device-img"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const queryParams = ref({
  name: "1"
});
</script>

<style scoped>

</style>
