jg_app/src/pages/newTwoHome/zjq.vue

<template>
  <div class="" style="padding-top: 13vw">
    <TopNav navTitle="总警情分类" :showRight="false" :showLeft="true" />
    <div class="jq_box">
      <div class="jq_item left_item" style="padding: 0">
        <div class="jq_total_item" v-for="(item, index) in Tabslist" :class="index == 0 || index == 1 ? 'jrjqzs_total' :
          index == 2 || index == 3 ? 'zdjqzs_total' : 'wffzzs_total'" :key="index"
          @click="onClickJqTotal(item.type)">
          <span class="jmsfjq_total_title">{{ item.name }}</span>
          <div style="margin: 1vw 0">
            <span class="jq_num">{{ item.count }} </span>件
            <span style="display: inline-block; margin-left: 6vw">环比<br />
              <span style="display: inline-block; margin-top: 1vw">
                <img src="../../assets/images/leader/arrow-up@2x.png" class="bl_img" v-if="item.hb > 0" />
                <img src="../../assets/images/leader/arrow-down@2x.png" class="bl_img" v-else />
                <span :class="item.hb > 0 ? 'red' : 'green1'">{{ item.hb }}%</span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>
<script setup>
import TopNav from "../../components/topNav.vue";
import { ref, onMounted, onUnmounted, onActivated, reactive } from "vue";
import { dateFormat } from "../../utils/tools.js";
import { baseUrl2 } from "../../utils/request";
import router from "../../router";
import axios from "axios";
import { onBeforeRouteLeave } from "vue-router";
const jqTotal = ref({}); //今日警情统计
const zrjqTotal = ref(0); //昨日警情数据
const QWLX = ref([]); //勤务类型
const Tabslist = ref([
  { name: "刑事", count: 0, hb: 0, type: 5 },//4
  { name: "行政", count: 0, hb: 0, type: 4 },//3
  { name: "纠纷", count: 0, hb: 0, type: 13 },//12
  { name: "求助", count: 0, hb: 0, type: 14 },//13
  { name: "其他", count: 0, hb: 0, type: 15 },//14
])
onMounted(() => {
  getCount()//// 获取统计
  _getJqTotal();
  _getJqTotal(true);
});

// 获取统计
function getCount() {
  let data = {
    orgId: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode,
    startTime: `${dateFormat("z")} 16:00:00`,
    endTime: `${dateFormat()} 16:00:00`,
    type: 1,
    keyword: "",
  };
  axios.post(`${baseUrl2}/xz1Api/api/alarm/count`, data).then((res) => {
    if (res.data) {
      Tabslist.value[0].count = res.data.data.xsCount //刑事
      Tabslist.value[0].hb = res.data.data.xsHb //刑事环比
      Tabslist.value[1].count = res.data.data.xzCount //行政
      Tabslist.value[1].hb = res.data.data.xzHb //行政环比
      Tabslist.value[2].count = res.data.data.jfCount //纠纷
      Tabslist.value[2].hb = res.data.data.jfHb //纠纷环比
      Tabslist.value[3].count = res.data.data.qzCount //求助
      Tabslist.value[3].hb = res.data.data.qcHb //求助环比
      Tabslist.value[4].count = res.data.data.qtCount //其他
      Tabslist.value[4].hb = res.data.data.qtHb //其他环比
    }
  });
}

//点击警情统计查看列表
function onClickJqTotal(status) {
  router.push(`/newTwoHome/jq/xzjqlist?status=${status}`);
}
//获取警情统计  type 是否是昨日
function _getJqTotal(type) {
  let data = {
    orgId: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0]
      .deptCode,
    startTime: `${dateFormat("z")} 16:00:00`,
    endTime: `${dateFormat()} 16:00:00`,
    type: 1,
    keyword: "",
  };
  if (type) {
    data.startTime = `${dateFormat("z2")} 16:00:00`;
    data.endTime = `${dateFormat("z")} 16:00:00`;
  }
  axios.post(`${baseUrl2}/xz1Api/api/alarm/count`, data).then((res) => {
    if (res.data) {
      if (type) {
        let num =
          res.data.data.lqCount +
          res.data.data.qcCount +
          res.data.data.ccCount +
          res.data.data.pqCount +
          res.data.data.dqscCount;
        zrjqTotal.value = jqTotal.value.jmsfTotal - num;
      } else {
        jqTotal.value = res.data.data;
        jqTotal.value.jmsfTotal =
          res.data.data.lqCount +
          res.data.data.qcCount +
          res.data.data.ccCount +
          res.data.data.pqCount +
          res.data.data.dqscCount;
      }
    }
  });
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.jq_box {
  display: flex;
  justify-content: space-between;
  @include font_size($font_medium_s);
  margin: 0 3vw 3vw 3vw;

  .jmsfjq_box {
    background: linear-gradient(0deg, #f4f8fb 35%, #e1eeff 100%);
  }

  .left_item {
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
  }

  .jq_item {
    // flex-shrink: 0;
    flex-wrap: wrap;
    border-radius: 2vw;
    padding: 1.5vw;

    .mk_jq_total_box {
      margin: 5vw 0;

      .jq_total {
        @include font_size($font_medium);
        display: flex;
        justify-content: space-between;

        .jq_total_unit {
          @include font_size($font_medium_s);
        }
      }

      .jqhb {
        display: inline-block;
        margin-top: 1vw;
        color: #999;
      }
    }

    .jq_total_item {
      width: 37vw;
      padding: 2.5vw;
      border-radius: 2vw;
      margin: 2vw;
    }

    .dxzp_item {
      background: rgba(81, 193, 242, 0.1);
    }

    .zdjqzs_total {
      background: url("../../assets/images/new/zdjqzs.png");
      background-size: 100%;
    }

    .jrjqzs_total {
      background: #7d9ef8;
    }

    .wffzzs_total {
      background: #fae9e1;

      .xz_xs_total {
        display: flex;
        justify-content: space-between;
        color: #7c4e19;

        .sx {
          width: 1px;
          background: #7c4e19;
        }
      }
    }
  }
}

.topM {
  padding-top: 2vw;
}

.bl_img {
  width: 2vw;
  height: 2.5vw;
  margin-right: 1vw;
}

.jq_num {
  font-size: 6vw;
  font-weight: 700;
  margin: 2vw 0;
}

.green1 {
  color: #57fc48;
}
</style>