数据分析 上方统计

src/api/menuDataApi/sjfxApi.js

+import { post, postform, get, postJson } from '@/utils/http.js'
+export let baseUrl = '/api'
+
+// 数据分析--顶部（统计总数）
+export const getDataAnalysis = params =>
+  postJson(`${baseUrl}/policeDogScreen/dataAnalysis`, params)

src/views/sjfx/components/topContent.vue

@@ -3,12 +3,21 @@
     <li class="titleLi spaceBetween">
       <div class="leftCon">
         <p class="top01 ellipsis1">工作犬总数</p>
-        <p class="top02 ellipsis1">30000</p>
+        <p class="top02 ellipsis1">{{ gzqObj.count1 }}</p>
         <p class="top03 ellipsis1">
-          <span class="span01 upColor">240</span>
+          <span
+            class="span01"
+            :class="gzqObj.Tbzt1 === 'up' ? 'upColor' : 'downColor'"
+          >{{ gzqObj.Tb1 ? gzqObj.Tb1 : '0.00%' }}</span>
           <img
             src="../images/up@2x.png"
             class="img01"
+            v-if="gzqObj.Tbzt1 === 'up'"
+          />
+          <img
+            src="../images/down@2x.png"
+            class="img01"
+            v-else
           />
           <span class="span02">同比去年</span>
         </p>
@@ -23,12 +32,21 @@
     <li class="titleLi spaceBetween">
       <div class="leftCon">
         <p class="top01 ellipsis1">退役犬数</p>
-        <p class="top02 ellipsis1">30000</p>
+        <p class="top02 ellipsis1">{{ tyqObj.count2 }}</p>
         <p class="top03 ellipsis1">
-          <span class="span01 downColor">240</span>
+          <span
+            class="span01"
+            :class="tyqObj.Tbzt2 === 'up' ? 'upColor' : 'downColor'"
+          >{{ tyqObj.Tb2 ? tyqObj.Tb2 : '0.00%' }}</span>
+          <img
+            src="../images/up@2x.png"
+            class="img01"
+            v-if="tyqObj.Tbzt2 === 'up'"
+          />
           <img
             src="../images/down@2x.png"
             class="img01"
+            v-else
           />
           <span class="span02">同比去年</span>
         </p>
@@ -43,12 +61,23 @@
     <li class="titleLi spaceBetween">
       <div class="leftCon">
         <p class="top01 ellipsis1">种犬总数</p>
-        <p class="top02 ellipsis1">30000</p>
+        <p class="top02 ellipsis1">{{ zqObj.count3 }}</p>
         <p class="top03 ellipsis1">
-          <span class="span01 downColor">240</span>
+          <span
+            class="span01"
+            :class="zqObj.Tbzt3 === 'up' ? 'upColor' : 'downColor'"
+          >
+            {{ zqObj.Tb3 ? zqObj.Tb3 : '0.00%' }}
+          </span>
+          <img
+            src="../images/up@2x.png"
+            class="img01"
+            v-if="zqObj.Tbzt3 === 'up'"
+          />
           <img
             src="../images/down@2x.png"
             class="img01"
+            v-else
           />
           <span class="span02">同比去年</span>
         </p>
@@ -63,12 +92,21 @@
     <li class="titleLi spaceBetween">
       <div class="leftCon">
         <p class="top01 ellipsis1">技术人员总数</p>
-        <p class="top02 ellipsis1">30000</p>
+        <p class="top02 ellipsis1">{{ jsryObj.count4 }}</p>
         <p class="top03 ellipsis1">
-          <span class="span01 upColor">240</span>
+          <span
+            class="span01"
+            :class="jsryObj.Tbzt4 === 'up' ? 'upColor' : 'downColor'"
+          >{{ jsryObj.Tb4 ? jsryObj.Tb4 : '0.00%' }}</span>
           <img
             src="../images/up@2x.png"
             class="img01"
+            v-if="jsryObj.Tbzt4 === 'up'"
+          />
+          <img
+            src="../images/down@2x.png"
+            class="img01"
+            v-else
           />
           <span class="span02">同比去年</span>
         </p>
@@ -84,12 +122,33 @@
 </template>
 
 <script>
+import { getDataAnalysis } from "@/api/menuDataApi/sjfxApi.js";
+
 export default {
   data() {
-    return {};
+    return {
+      gzqObj: {},
+      tyqObj: {},
+      zqObj: {},
+      jsryObj: {},
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getDataAnalysis().then((res) => {
+        if (res.code === 200 && res.success && res.data) {
+          let datas = res.data || {};
+          this.gzqObj = datas.工作犬总数 || {};
+          this.tyqObj = datas.退役犬数 || {};
+          this.zqObj = datas.种犬总数 || {};
+          this.jsryObj = datas.技术人员总数 || {};
+        }
+      });
+    },
   },
-  mounted() {},
-  methods: {},
 };
 </script>