修改

src/api/menuDataApi/deskTop.js

+import { post, postform, get, postJson } from '@/utils/http.js'
+export let baseUrl = '/api'
+
+export const getWorkDogTotal = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogTotal`, params)
+export const getWorkDogDogSource = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogDogSource`, params)
+export const getWorkDogSpeciesAndClassificationId = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogSpeciesAndClassificationId`, params)
+export const getWorkDogAgeAndGender = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogAgeAndGender`, params)
+export const getWorkDogAgeAndTrainingLevelId = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogAgeAndTrainingLevelId`, params)
+export const getWorkDogSpecies = params =>
+  postJson(`${baseUrl}/homePage/getWorkDogSpecies`, params)
+
+
+export const getStuDogAgeAndGender = params =>
+  postJson(`${baseUrl}/homePage/getStuDogAgeAndGender`, params)
+export const getStuDogDogSource = params =>
+  postJson(`${baseUrl}/homePage/getStuDogDogSource`, params)
+export const getStuDogSpecies = params =>
+  postJson(`${baseUrl}/homePage/getStuDogSpecies`, params)
+export const getStuDogBirthDateTimePeriod = params =>
+  postJson(`${baseUrl}/homePage/getStuDogBirthDateTimePeriod`, params)
+
+

src/utils/util.js

@@ -38,19 +38,19 @@ export default {
    * @param {Object} arr
    * @param {Object} i
    */
-  inArray: function(elem, arr) {
+  inArray: function (elem, arr) {
     return arr == null ? -1 : arr.indexOf(elem);
   },
   /**
    * 获取某天日期
    * @param {Object} day
    */
-  getDay: function(day) {
+  getDay: function (day) {
     var today = new Date();
     var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
     today.setTime(targetday_milliseconds);
 
-    const doHandleMonth = function(month) {
+    const doHandleMonth = function (month) {
       var m = month;
       if (month.toString().length == 1) {
         m = "0" + month;
@@ -80,7 +80,7 @@ export default {
    * @param {Object} obj
    */
   deepClone(obj) {
-    const isObject = function(obj) {
+    const isObject = function (obj) {
       return typeof obj == "object";
     };
 
@@ -95,5 +95,15 @@ export default {
       cloneObj[key] = isObject(obj[key]) ? this.deepClone(obj[key]) : obj[key];
     }
     return cloneObj;
+  },
+
+  objectOrder(obj) {//排序的函数
+    var newkey = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组，这行是最重要的代码！
+    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
+    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
+      newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
+    }
+    return newObj;//返回排好序的新对象
+
   }
 };

src/views/dataJq/deskTop.vue

@@ -5,35 +5,101 @@
         <el-date-picker
           size="small"
           v-model="value1"
-          type="daterange"
+          type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
         >
         </el-date-picker>
       </div>
       <div class="header_logo">
         <img src="@/assets/img/logoTile.png" alt="" />
       </div>
-      <div class="header_weather">2023-05-01 | 19℃-25℃</div>
+      <div class="header_weather"></div>
     </div>
     <div class="content">
-      <JobDog></JobDog>
+      <JobDog :timeArr="value1" v-if="active == '工作犬分析'"></JobDog>
+      <StudDog :timeArr="value1" v-if="active == '犬种分析'"></StudDog>
+      <DataV :timeArr="value1" v-if="active == '桌面'"></DataV>
+    </div>
+    <div class="footer">
+      <div
+        class="footerMenu"
+        :style="{
+          backgroundImage: `url(${
+            active == item.name ? item.activeImg : item.img
+          })${active == item.name ? '!important' : ''}`,
+        }"
+        v-for="item in menuArr"
+        :key="item.name"
+        @click="active = item.name"
+        :class="{ active: active == item.name }"
+      >
+        <img
+          v-if="item.name == '桌面' && active != item.name"
+          src="@/assets/img/computer1.png"
+        />
+        <img
+          v-else-if="item.name == '桌面' && active == item.name"
+          src="@/assets/img/computer2.png"
+        />
+        <p v-else>{{ item.name }}</p>
+      </div>
     </div>
-    <div class="footer"></div>
   </div>
 </template>
 <script>
-import JobDog from './components/JobDog.vue'
+import JobDog from "./components/JobDog.vue";
+import StudDog from "./components/StudDog.vue";
+import DataV from "./dataV.vue";
+import zoom from "@/utils/autosize";
 export default {
   components: {
-    JobDog
+    JobDog,
+    DataV,
+    StudDog,
   },
   data() {
     return {
+      menuArr: [
+        {
+          name: "工作犬分析",
+          img: require("@/assets/img/left.png"),
+          activeImg: require("@/assets/img/left2.png"),
+        },
+        {
+          name: "犬种分析",
+          img: require("@/assets/img/left.png"),
+          activeImg: require("@/assets/img/left2.png"),
+        },
+        {
+          name: "桌面",
+          img: require("@/assets/img/zhong.png"),
+          activeImg: require("@/assets/img/zhong2.png"),
+        },
+        {
+          name: "退役犬分析",
+          img: require("@/assets/img/right.png"),
+          activeImg: require("@/assets/img/right2.png"),
+        },
+        {
+          name: "带犬人分析",
+          img: require("@/assets/img/right.png"),
+          activeImg: require("@/assets/img/right2.png"),
+        },
+      ],
+      active: "工作犬分析",
       value1: [],
     };
   },
+  mounted() {
+    this.$nextTick(() => {});
+    zoom("deskBox");
+    window.addEventListener("resize", function () {
+      zoom("deskBox");
+    });
+  },
 };
 </script>
 
@@ -45,6 +111,7 @@ export default {
   flex-flow: nowrap column;
   background: url("~@/assets/img/bgImg.png") 100% 100%;
   .content {
+    flex: 1;
   }
   .header {
     height: 80px;
@@ -63,11 +130,13 @@ export default {
     .header_date {
       .el-date-editor /deep/ {
         background-color: #001235;
-        border: 1px solid #073E62;
+        border: 1px solid #073e62;
         .el-input__icon {
-          color: #2276FC;
+          color: #2276fc;
+        }
+        .el-range-separator {
+          color: #3f5580;
         }
-        .el-range-separator { color:  #3F5580;}
         .el-range-input {
           background-color: #001235;
           color: #fff;
@@ -80,10 +149,51 @@ export default {
     }
   }
   .footer {
-    height: 55px;
+    height: 60px;
     box-shadow: 0px 0px 26px 0px #000000;
     opacity: 1;
+    box-sizing: border-box;
+    padding: 5px 0;
     background: url("~@/assets/img/footerBg.png") 100% 100% / cover;
+    display: flex;
+    justify-content: center;
+    .footerMenu {
+      background-size: cover;
+      background-repeat: no-repeat;
+      color: #44cef6;
+      width: 195px;
+      text-align: center;
+      font-size: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 -10px;
+      cursor: pointer;
+
+      &:nth-of-type(1),
+      &:nth-of-type(2) {
+        &:hover {
+          background-image: url("~@/assets/img/left1.png") !important;
+        }
+      }
+      &:nth-of-type(4),
+      &:nth-of-type(5) {
+        &:hover {
+          background-image: url("~@/assets/img/right1.png") !important;
+        }
+      }
+      &:nth-of-type(3) {
+        width: 120px;
+        background-size: 100% 100%;
+        &:hover {
+          background-image: url("~@/assets/img/zhong1.png") !important;
+        }
+      }
+    }
+    .active {
+      // background: linear-gradient(180deg, #37b7ff 0%, #083baa 100%);
+      color: #f1f2f5;
+    }
   }
 }
 </style>
\ No newline at end of file