bonus-ui/src/views/screen/cityScreen/components/maintenance/index.vue

<template>
  <div class="content-1">
    <div class="content-title">
      <div class="content-view-item">
        <span class="text">装备预警总数:</span>
        <span class="num">&nbsp;{{ totalNum }}</span>
        <span class="unit">台</span>
      </div>
      <span></span>
    </div>
    <div class="content-view">
      <div class="table-container">
        <div class="tableHeader">
          <div class="header" style="width: 5%">序号</div>
          <div class="header" style="width: 35%">工序</div>
          <div class="header" style="width: 30%">设备</div>
          <div class="header" style="width: 30%">维保情况</div>
        </div>
        <div class="tableBox">
          <div class="tableTr" v-for="(item, index) in tableList" :key="index">
            <div class="tableTd" style="width: 5%">
              {{ index + 1 }}
            </div>
            <div class="tableTd" style="width: 35%">
              {{ item.procedureName }}
            </div>
            <div class="tableTd" style="width: 30%">
              {{ item.deviceName }}
            </div>
            <div class="tableTd" style="width: 30%">
              <span v-if="item.situation == '已超期'" style="color: red">{{ item.situation }}</span>
              <span v-else>{{ item.situation }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { maintenanceAlarmApi } from '@/api/screen/cityScreen'

export default {
  data() {
    return {
      totalNum: 0,
      tableList: []
    }
  },
  created() {
  },
  mounted() {
    this.getMaintenanceAlarm()
  },
  methods: {
    getMaintenanceAlarm() {
      maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
        console.log(response, 'maintenanceAlarmApi')
        if (response.code == 200) {
          this.totalNum = response.data.total
          this.tableList = response.data.list
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding-left: 10%;
  letter-spacing: 2px;
  background: url('../../../../../assets/images/cityScreen/5.png') no-repeat;
  background-size: 100% 100%;
  font-size: 16px;
  font-family: 'PingFang SC';
  font-weight: 600;
  color: #78d6ff;
}

.title {
  font-size: 16px;
  position: absolute;
  top: 35%;
  left: 18%;
  letter-spacing: 2px;
  font-family: 'PingFang SC';
}

.content-view {
  width: 100%;
  height: 80%;
  flex: 1;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-view-item {
  margin-left: 215px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    height: 50px;
    margin-top: 15px;
  }
}

.text {
  color: #c0c2c6;
  font-size: 10px;
}

.num {
  color: #fcfac4;
  font-size: 20px;
  margin: 0 5px;
  font-weight: bold;
  opacity: 0.9; /* 轻微透明感 */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
}

.unit {
  font-size: 8px;
  color: #ccc;
  margin-top: 10px;
}

.icon {
  // width: 70px;
  // height: 70px;
  transform: scale(0.8);
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.tableHeader {
  width: 100%;
  height: 15%;
  background-color: #082d6e;
  opacity: 0.8;
  font-size: 10px;
  display: flex;
  align-items: center;
}

.tableBox {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.tableTr {
  width: 100%;
  height: 30%;
  font-size: 11px;
  // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
  // background-size: 100% 100%;
  border-bottom: 1px dashed rgba(238, 238, 238, 0.56);
  display: flex;
  cursor: pointer;
}

.tableTd {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header {
  color: #ccc;
  padding: 4px 0;
  width: 25%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

//定义背景颜色和圆角
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 0.3);
}

//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 0.1);
}

// @media screen and (min-width: 1080px) {
//     .title {
//         font-size: 10px;
//     }
//     .num {
//         color: #83d3f8;
//         font-size: 12px;
//         margin: 0 2px;
//     }
//     .unit {
//         font-size: 8px;
//     }
//     .icon {
//         width: 35px;
//         height: 35px;
//     }
//     .text {
//         font-size: 10px;
//     }
//     .header {
//         font-size: 10px;
//     }
//     .tableTd {
//         font-size: 8px;
//     }
// }
// @media screen and (min-width: 3000px) {
//     .title {
//         font-size: 24px;
//     }
//     .num {
//         color: #83d3f8;
//         font-size: 24px;
//         margin: 0 10px;
//     }
//     .unit {
//         font-size: 16px;
//     }
//     .icon {
//         width: 70px;
//         height: 70px;
//     }
//     .text {
//         font-size: 26px;
//     }
//     .header {
//         font-size: 26px;
//     }
//     .tableTd {
//         font-size: 24px;
//     }
// }
</style>