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

ZhangXianQiang

2024-03-15 9a5ad4f42f936fa5b36cd039a670d36e6f70a568

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

 src/api/api.ts

@@ -13,6 +13,11 @@
let baseUrl = UtilVar.baseUrl

const CancelToken = axios.CancelToken;





// 测试header请求头

const tempAuthorization = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiIyWnpQMDFwZkhLbTdjb2lodDFLZm1IOU5kemhEcEtsbCIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwiZGVwdElkIjoxMDN9.9_nKgt_eQ3V9b0_HrD488QYVTKzF4lRA8CyrWb_e0KQ';

const tempClientid = 'e5cd7e4891bf95d1d19206ce24a7b32e';



export { baseUrl };

// axios.defaults.withCredentials = true;

// 添加请求拦截器

@@ -26,6 +31,11 @@
    // @ts-ignore

    config.headers['Content-Type'] = "application/json;charset=utf-8";



    config.headers = {

        'Authorization': tempAuthorization,

        'Clientid': tempClientid

    }



    return config;

}, function (error: any) {

    // 对请求错误做些什么


 src/api/modules/index.ts

@@ -1,5 +1,20 @@
// export default {

//     'leftTop':'/bigscreen/countDeviceNum',//左上

//     'leftCenter':'/bigscreen/countUserNum',//左中

//     "centerMap":"/bigscreen/centerMap",

//     "centerBottom":"/bigscreen/installationPlan",



//     'leftBottom':"/bigscreen/leftBottom", //坐下

//     'rightTop':"/bigscreen/alarmNum", //报警次数

//     'rightBottom':'/bigscreen/rightBottom',//右下 
//     'rightCenter':'/bigscreen/ranking',// 报警排名

// }





// 请求地址统一规划

export default {

    'leftTop':'/bigscreen/countDeviceNum',//左上

    'leftTop':'/dataDashboard/trafficIndex',//近3年交通事故指数

    'subgrade': '/dataDashboard/pcrData',

    'leftCenter':'/bigscreen/countUserNum',//左中

    "centerMap":"/bigscreen/centerMap",

    "centerBottom":"/bigscreen/installationPlan",


 src/config/UtilVar.ts

@@ -6,7 +6,7 @@
}



const UtilVar:UtilVarType = {

    baseUrl:"",

    baseUrl:"/api",

    code:401, //登陆过期

    noContentCode:204, //请求成功但没有内容

    ENC:false,

@@ -15,11 +15,12 @@
const runtimeType:any = {



    production: () => {



        UtilVar.baseUrl = '';

    },

    //开发环境

    development: () => {

        // UtilVar.baseUrl= `http://www.xihuanmantou.cn:19527`

        UtilVar.baseUrl = '/api';



    },

    hash:()=>{


 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>

 vite.config.ts

@@ -31,7 +31,13 @@
      port: 8112,
      open: false,
      strictPort: false,
      // proxy: {}
      proxy: {
        '/api': {
          target: 'http://192.168.3.87:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      alias: {