feat:交通事故指数接口对接

ZhangXianQiang

2024-03-15 9a5ad4f42f936fa5b36cd039a670d36e6f70a568

 src/views/daoAnOffice/left-top.vue

@@ -1,27 +1,84 @@
<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>
@@ -32,10 +89,13 @@
          <img src="@/assets/img/sgjb.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ state.totalNum }}</span> <span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">交通事故接报</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" />-->
      </div>
@@ -47,10 +107,13 @@
          <img src="@/assets/img/la.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numt"><span class="info-num">{{ state.onlineNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">立案</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" />-->
@@ -63,10 +126,13 @@
          <img src="@/assets/img/ssrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_nums"><span class="info-num">{{ state.offlineNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">受伤人数</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" />-->
@@ -79,10 +145,13 @@
          <img src="@/assets/img/swrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numf"><span class="info-num">{{ state.alarmNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">死亡人数</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" />-->
@@ -215,6 +284,11 @@
          font-size: 14px;
          color: #D44233;
        }

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

      .user_Overview_nums_img_p_numf {
@@ -264,8 +338,8 @@
.info-num {
  font-family: 'PangMenZhengDao';
}

.info-lable {
  font-family: 'PingFang SC';
}

</style>