feat:道路数据接口

ZhangXianQiang

2024-03-15 b3d89f70b2fefd7438eec61f7662da30ff8923c1

 src/views/daoAnOffice/left-top.vue

@@ -1,93 +1,172 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ref, onMounted, onUnmounted } from "vue";
import { currentGET } from "@/api";
import CountUp from "@/components/count-up";
const duration = ref(2);
const state = reactive({
  alarmNum: 759,
  offlineNum: 44,
  onlineNum: 654,
  totalNum: 698,
});


// const getData = () => {
//   currentGET("leftTop").then((res) => {
//     console.log(res);
//     if (res.success) {
//       state.alarmNum = res.data.alarmNum;
//       state.offlineNum = res.data.offlineNum;
//       state.onlineNum = res.data.onlineNum;
//       state.totalNum = res.data.totalNum;
//     }
//   });
// };
interface dataType {
  // 近3年交通事故指数
  targetOneName: string,
  targetOneValue: number | string,
  targetOneUnit: string,
  targetOneStatus: number,
  targetOneCompareValue: number | string,
  // 立案
  targetTwoName: string,
  targetTwoValue: number | string,
  targetTwoUnit: string,
  targetTwoStatus: number,
  targetTwoCompareValue: number | string,
  // 受伤人数
  targetThreeName: string,
  targetThreeValue: number | string,
  targetThreeUnit: string,
  targetThreeStatus: number,
  targetThreeCompareValue: number | string,
  // 死亡人数
  targetFourName: string,
  targetFourValue: number | string,
  targetFourUnit: string,
  targetFourStatus: number,
  targetFourCompareValue: number | string,

}
const dataInfo = ref(<dataType>{});

const getData = () => {
  currentGET("leftTop").then((res) => {
    console.log(res);
    if (res.success) {
      state.alarmNum = res.data.alarmNum;
      state.offlineNum = res.data.offlineNum;
      state.onlineNum = res.data.onlineNum;
      state.totalNum = res.data.totalNum;
    if (res.code === 200) {
      dataInfo.value = res.data;
    }
  });
};
getData();
}
const step = 5000;
let timer: any = null;

const loop = () => {
  // 立即请求一次
  getData();
  timer = setInterval(() => {
    getData();
  }, step);
}

const stopLoop = () => {
  clearInterval(timer);
}



onMounted(() => {
  // loop();
  getData();

});

onUnmounted(() => {
  stopLoop();
})

</script>

<template>
  <ul class="user_Overview flex">
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums allnum">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <img src="@/assets/img/sgjb.png" />
        </div>
        <div class="user_Overview_nums_img_p">
            <p class="user_Overview_nums_img_p_num">{{state.totalNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
           <p>交通事故接报</p>
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetOneValue }}</span> <span
              class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetOneUnit }}</span><span
              class="user_Overview_nums_img_p_num_ss"
              :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetOneStatus === 2 }">
              {{ dataInfo.targetOneStatus === 1 ? '↑' : '↓' }}
              {{ dataInfo.targetOneCompareValue }}%</span></p>
          <p class="info-lable">{{ dataInfo.targetOneName }}</p>
        </div>
<!--        <CountUp :endVal="state.totalNum" :duration="duration" />-->
        <!--        <CountUp :endVal="state.totalNum" :duration="duration" />-->
      </div>
<!--      <p>总设备数1</p>-->
      <!--      <p>总设备数1</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums online">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <img src="@/assets/img/la.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numt">{{state.onlineNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>立案</p>
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetTwoValue }}</span> <span
              class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetTwoUnit }}</span><span
              class="user_Overview_nums_img_p_num_ss"
              :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetTwoStatus === 2 }">
              {{ dataInfo.targetTwoStatus === 1 ? '↑' : '↓' }}
              {{ dataInfo.targetTwoCompareValue }}%</span></p>
          <p class="info-lable">{{ dataInfo.targetTwoName }}</p>
        </div>

<!--        <CountUp :endVal="state.onlineNum" :duration="duration" />-->
        <!--        <CountUp :endVal="state.onlineNum" :duration="duration" />-->
      </div>
<!--      <p>在线数</p>-->
      <!--      <p>在线数</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums offline">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <img src="@/assets/img/ssrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_nums">{{state.offlineNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>受伤人数</p>
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetThreeValue }}</span> <span
              class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetThreeUnit }}</span><span
              class="user_Overview_nums_img_p_num_ss"
              :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetThreeStatus === 2 }">
              {{ dataInfo.targetThreeStatus === 1 ? '↑' : '↓' }}
              {{ dataInfo.targetThreeCompareValue }}%</span></p>
          <p class="info-lable">{{ dataInfo.targetThreeName }}</p>
        </div>

<!--        <CountUp :endVal="state.offlineNum" :duration="duration" />-->
        <!--        <CountUp :endVal="state.offlineNum" :duration="duration" />-->
      </div>
<!--      <p>掉线数</p>-->
      <!--      <p>掉线数</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums laramnum">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <img src="@/assets/img/swrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numf">{{state.alarmNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>死亡人数</p>
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetFourValue }}</span> <span
              class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetFourUnit }}</span><span
              class="user_Overview_nums_img_p_num_ss"
              :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetFourStatus === 2 }">
              {{ dataInfo.targetFourStatus === 1 ? '↑' : '↓' }}
              {{ dataInfo.targetFourCompareValue }}%</span></p>
          <p class="info-lable">{{ dataInfo.targetFourName }}</p>
        </div>

<!--        <CountUp :endVal="state.alarmNum" :duration="duration" />-->
        <!--        <CountUp :endVal="state.alarmNum" :duration="duration" />-->
      </div>
<!--      <p>告警次数</p>-->
      <!--      <p>告警次数</p>-->
    </li>
  </ul>
</template>

<style scoped lang="scss">
.user_Overview-item{
  background-color: #11223A;
.user_Overview-item {
  background-color: rgba(17, 34, 58, 0.6);

}

.left-top {
  width: 100%;
  height: 100%;
@@ -99,10 +178,19 @@
    margin: 0 20px;
    padding: 15px 0;
    border: 1px solid #29466A;

    p {
      text-align: left;
      //height: 16px;
      font-size: 16px;
    }

    &:first-of-type {
      margin-left: 0;
    }

    &:last-of-type {
      margin-right: 0;
    }

    .user_Overview_nums {
@@ -120,26 +208,28 @@
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      // &::before {
      //   content: "";
      //   position: absolute;
      //   width: 100%;
      //   height: 100%;
      //   top: 0;
      //   left: 0;
      // }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }
    .user_Overview_nums_img{

    .user_Overview_nums_img {
      //background-color: floralwhite;
      //padding: 6px;
      border-radius: 8px;
      width: 72px;
    }
    .user_Overview_nums_img_p{

    .user_Overview_nums_img_p {
      //display: flex;
      flex-direction: column;
      justify-content: space-around;
@@ -147,59 +237,77 @@
      //height: 90px;
      //line-height: 40px;
      margin-left: 10px;
      .user_Overview_nums_img_p_numt{

      .user_Overview_nums_img_p_numt {
        color: #0071F8;
        font-size: 25px;
        font-weight: 400;
        .user_Overview_nums_img_p_num_nan{
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan {
          font-size: 14px;
          color: #fff;
        }
        .user_Overview_nums_img_p_num_ss{

        .user_Overview_nums_img_p_num_ss {
          font-size: 14px;
          color: #D44233;
        }
      }
      .user_Overview_nums_img_p_num{

      .user_Overview_nums_img_p_num {
        color: #F96FF8;
        font-size: 25px;
        font-weight: 400;
        .user_Overview_nums_img_p_num_nan{
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan {
          font-size: 14px;
          color: #fff;
        }
        .user_Overview_nums_img_p_num_ss{

        .user_Overview_nums_img_p_num_ss {
          font-size: 14px;
          color: #D44233;
        }
      }
      .user_Overview_nums_img_p_nums{

      .user_Overview_nums_img_p_nums {
        color: #FE3146;
        font-size: 25px;
        font-weight: 400;
        .user_Overview_nums_img_p_num_nan{
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan {
          font-size: 14px;
          color: #fff;
        }
        .user_Overview_nums_img_p_num_ss{

        .user_Overview_nums_img_p_num_ss {
          font-size: 14px;
          color: #D44233;
        }

        .user_Overview_nums_img_p_num_ss_d {
          font-size: 14px;
          color: #22db69;
        }
      }
      .user_Overview_nums_img_p_numf{

      .user_Overview_nums_img_p_numf {
        color: #EA7039;
        font-size: 25px;
        font-weight: 400;
        .user_Overview_nums_img_p_num_nan{
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan {
          font-size: 14px;
          color: #fff;
        }
        .user_Overview_nums_img_p_num_ss{

        .user_Overview_nums_img_p_num_ss {
          font-size: 14px;
          color: #D44233;
        }
      }
    }

    .allnum {
      //background-image: url("@/assets/img/bbiao.png");
      //&::before {
@@ -226,4 +334,12 @@
    }
  }
}

.info-num {
  font-family: 'PangMenZhengDao';
}

.info-lable {
  font-family: 'PingFang SC';
}
</style>