功能新增

pengwei

2025-04-27 366612bd8e8b88d02a98edf508f96d7add23ff9f

 ÏîÄ¿´úÂë/¿ÉÊÓ»¯´óÆÁ/client/src/views/Index.vue

@@ -5,10 +5,12 @@
        display: flex;
        justify-content: center;
        color: #fff;
        font-size: 5rem;
        font-size: 15rem;
        letter-spacing: 5rem;
        font-weight: bold;
      "
    >
      æ£€ä¸€é“检修监控
      æ£€13道
    </div>
    <div
      style="
@@ -21,53 +23,51 @@
        margin-top: 3rem;
      "
    >
      <span>股道电源状态</span>
      <div
        style="
          width: 8rem;
          height: 8rem;
          border-radius: 50% 50%;
          margin-top: 2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          height: 3rem;
          background-color: #95f204;
          margin-top: 1rem;
          border-radius: 1.5rem;
        "
        :class="true ? 'shadow' : ''"
      >
        <img
          style="width: 8rem; height: 8rem"
          src="@/assets/TheCurrentJob/pouer.png"
          alt=""
        />
      </div>
      ></div>
    </div>
    <!-- <div

    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 20rem;
        color: #fff;
        font-size: 3rem;
       
        font-weight: bold;
        margin-top: 5rem;
        font-size: 10rem;
      "
    >
      <span>管理人员状态</span>
    </div> -->
      <span> CR400AF</span>
      <span>G7237</span>
    </div>

    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: 10%;
        margin-top: 6%;
        padding-bottom: 10%;
        border: 0.15rem solid #fff;
        height: 70%;
        box-sizing: border-box;
        border-radius: 2rem;
        background-color: rgba(39, 136, 214, 0.5);
        box-shadow: 0px 0px 1rem 0rem rgba(18, 150, 219, 0.5);
      "
    >
      <span style="color: #fff; font-size: 3rem; margin-top: 2rem"
        >检修人员状态</span
      >

      <div
        style="
          display: flex;
@@ -79,27 +79,115 @@
          margin-top: 3rem;
        "
      >
        <div style="color: #fff; font-size: 3rem; width: 90%">
          æ­£åœ¨æ£€ä¿®äººå‘˜æ•°é‡:
          <span style="font-size: 4rem">{{ totalCount }}</span
          >位
        <div style="display: flex; flex-direction: column; width: 100%">
          <div
            style="
              height: 5rem;
              font-size: 6rem;
              font-weight: bold;

              display: flex;
              align-items: center;
              padding-left: 2rem;
              box-sizing: border-box;
            "
          >
            <img
              style="width: 6rem; height: 6rem"
              src="@/assets/imgs/下一个.png"
              alt=""
            />
            <div
              style="
                width: 30%;
                text-align: justify;
                text-justify: distribute-all-lines;
                text-align-last: justify;
                margin-left: 2rem;
                color: #fff;
              "
            >
              ç™»é¡¶äººæ•°
            </div>
          </div>
          <div
            style="
              margin-left: 2rem;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-top: 5rem;
            "
          >
            <div
              style="
                width: 40%;
                font-size: 6rem;
                color: #fff;
                background-color: #058f66;
                border-radius: 1.5rem;
                padding: 0.5rem 1rem;
                text-align: center;
              "
            >
              å·²ç™»è®° <span>2人</span>
            </div>
            <div
              style="
                width: 40%;
                font-size: 6rem;
                color: #fff;
                background-color: #d9001b;
                border-radius: 1.5rem;
                padding: 0.5rem 1rem;
                text-align: center;
              "
            >
              å·²ç™»é¡¶ <span>2人</span>
            </div>
          </div>
        </div>
        <div
          style="
            color: #fff;
            font-size: 5rem;
            display: flex;
            width: 90%;
            justify-content: space-between;
            align-items: center;
            margin-top: 5rem;
          "
        >
          <div style="color: #fff">检修人员列表</div>
          <div style="color: #fff">
            æ­£åœ¨æ£€ä¿®äººå‘˜æ•°é‡:
            <span style="font-size: 4rem">{{ totalCount }}</span
            >位
          </div>
        </div>
        <div style="width: 90%; margin-top: 2rem">
          <el-table
            empty-text="暂无数据"
            :data="tableData"
            style="width: 100%"
            height="750"
            :header-cell-style="{
              height: '1.61rem',
              color: '#1AC8FE',
              background: '#0A5B91',
              fontSize: '0.88rem',
              color: '#fff',
              background: '#1860A8',
              fontSize: '2rem',
            }"
            :cell-style="{
              color: '#fff',
              background: '#147BAF',
              background: 'rgba(23, 87, 149, 0.9)',
            }"
          >
            <el-table-column
              prop="userTrueName"
              label="序号"
              align="center"
              min-width="1%"
            />
            <el-table-column
              prop="userTrueName"
              label="姓名"
@@ -135,15 +223,38 @@
              align="center"
              min-width="2%"
            />
            <el-table-column
              prop="maintenanceDate"
              label="上线时间"
              align="center"
              min-width="2%"
            />
          </el-table>
        </div>

        <div
          style="
            position: absolute;
            bottom: 4%;
            color: #fff;
            font-weight: bold;
            font-size: 3rem;
            margin-top: 2rem;
          "
        >
          {{ currentTime }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, toRef } from "vue";
import { PersonnelMonitoring } from "@/api/newapi/Maintenance";
import { onMounted, reactive, ref, toRef, onUnmounted } from "vue";
import {
  PersonnelMonitoring,
  UpstreamInspectionRoad,
} from "@/api/newapi/Maintenance";
import { formatTime } from "@/utils/index";

const tableData = ref([]);
const pageTotal = ref(0);
@@ -175,17 +286,36 @@
    ).length;
  });
};
onMounted(() => {
const currentTime = ref("");
const timer = ref(null);
onMounted(async () => {
  clearInterval(timer.value);
  initData();
  //获取当前时间
  const date = new Date();
  await UpstreamInspectionRoad();
  timer.value = setInterval(() => {
    currentTime.value = formatTime(date, "yyyy-MM-dd hh:mm:ss");
    date.setSeconds(date.getSeconds() + 1);
  }, 1000);
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
.Largescreen {
  display: flex;
  flex-direction: column;
  background-color: rgba($color: #000000, $alpha: 0.2);
  // background-color: rgba($color: #000000, $alpha: 0.2);
  .shadow {
    box-shadow: 0px 0px 1rem 0.5rem rgb(18, 150, 219);
  }
}
:deep(.el-table__empty-block) {
  background-color: rgba(23, 87, 149, 0.9);
}
:deep(.el-scrollbar__wrap) {
  background-color: rgba(23, 87, 149, 0.9);
}
</style>