重新封装搜索组件

src/components/SideMenu.vue

@@ -2,61 +2,84 @@
   <div class="sidemenu">
     <div style="height: 100%" v-if="mode">
       <el-menu
-          :style="{width: width + 'px', display: 'inline-block', height: '100%'}"
-          background-color="#464C5B"
-          text-color="#fff"
-          :default-active="activeName"
-          :active-text-color="color">
+        :style="{
+          width: width + 'px',
+          display: 'inline-block',
+          height: '100%',
+        }"
+        background-color="#464C5B"
+        text-color="#fff"
+        :default-active="activeName"
+        :active-text-color="color"
+      >
         <el-menu-item
-            v-for="(item) in menuList"
-            :class="[item.title === activeName && activeName!== '首页' ? 'menuSet' : '']"
-            :index="item.title"
-            :key="item.id"
-            @click="jump(item)">
+          v-for="item in menuList"
+          :class="[
+            item.title === activeName && activeName !== '首页' ? 'menuSet' : '',
+          ]"
+          :index="item.title"
+          :key="item.id"
+          @click="jump(item)"
+        >
           <template slot="title">
-            <span>{{item.title}}</span>
+            <span>{{ item.title }}</span>
           </template>
         </el-menu-item>
       </el-menu>
-      <div v-show="isShow && activeName!== '首页'" class="subsidemenu">
-        <div class="menu-header">{{selectItem.title}}</div>
+      <div v-show="isShow && activeName !== '首页'" class="subsidemenu">
+        <div class="menu-header">{{ selectItem.title }}</div>
         <ul class="menu-item-children">
           <li
-              v-for="item in selectItem.children"
-              class="menuChildren"
-              :style="{color: item.url == activeUrl ? color : '#999'}"
-              @click="go(item)"
-              :key="item.id">{{item.title}}</li>
+            v-for="item in selectItem.children"
+            class="menuChildren"
+            :style="{ color: item.url == activeUrl ? color : '#999' }"
+            @click="go(item)"
+            :key="item.id"
+          >
+            {{ item.title }}
+          </li>
         </ul>
       </div>
     </div>
     <div style="height: 100%" v-else>
       <el-menu
-          router
-          :style="{width: '249px', display: 'inline-block', height: '100%'}"
-          background-color="#464C5B"
-          text-color="#fff"
-          :default-active="routerName"
-          :active-text-color="color">
-          <template v-for="item in menuList">
-            <el-submenu :key="item.id" v-if="item.children.length > 0 && item.url !== 'dashboard'" :index="item.url">
-              <span slot="title">{{item.title}}</span>
-              <el-menu-item v-for="list in item.children" :key="list.id" :index="list.url">{{list.title}}</el-menu-item>
-            </el-submenu>
-            <el-menu-item :key="item.id" v-else :index="item.url">{{item.title}}</el-menu-item>
-          </template>
+        router
+        :style="{ width: '249px', display: 'inline-block', height: '100%' }"
+        background-color="#464C5B"
+        text-color="#fff"
+        :default-active="routerName"
+        :active-text-color="color"
+      >
+        <template v-for="item in menuList">
+          <el-submenu
+            :key="item.id"
+            v-if="item.children.length > 0 && item.url !== 'dashboard'"
+            :index="item.url"
+          >
+            <span slot="title">{{ item.title }}</span>
+            <el-menu-item
+              v-for="list in item.children"
+              :key="list.id"
+              :index="list.url"
+              >{{ list.title }}</el-menu-item
+            >
+          </el-submenu>
+          <el-menu-item :key="item.id" v-else :index="item.url">{{
+            item.title
+          }}</el-menu-item>
+        </template>
       </el-menu>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { getUserMenu} from "../utils/api";
+import { mapState } from "vuex";
+import { getUserMenu } from "../utils/api";
 export default {
   name: "SideMenu",
   computed: {
-    ...mapState(['color', 'mode'])
+    ...mapState(["color", "mode"]),
   },
   data() {
     return {
@@ -64,10 +87,10 @@ export default {
       width: 249,
       isShow: false,
       selectItem: {},
-      activeUrl: '',
-      activeName: '首页',
-      routerName: 'dashboard'
-    }
+      activeUrl: "",
+      activeName: "首页",
+      routerName: "dashboard",
+    };
   },
   watch: {
     $route(newVal) {
@@ -75,21 +98,20 @@ export default {
       let name = newVal.meta.title;
       let parentName = newVal.meta.parentName;
       let routerName = newVal.meta.permission;
-      this.$emit('setRouterName', {name: name, router: routerName});
-      if(this.mode) {
+      this.$emit("setRouterName", { name: name, router: routerName });
+      if (this.mode) {
         this.activeName = parentName;
-        this.activeUrl = routerName
+        this.activeUrl = routerName;
         var that = this;
 
         that.selectItem = that.getFilter(that.menuList, parentName)[0];
-          if (that.selectItem.children.length > 0) {
-            that.isShow = true;
-          } else {
-            that.isShow = false;
-          }
-
+        if (that.selectItem.children.length > 0) {
+          that.isShow = true;
+        } else {
+          that.isShow = false;
+        }
       } else {
-        this.routerName = routerName
+        this.routerName = routerName;
       }
     },
     mode(newVal) {
@@ -97,7 +119,7 @@ export default {
       let routerName = this.$route.meta.permission;
       // 上级菜单名字
       let parentName = this.$route.meta.parentName;
-      if(newVal) {
+      if (newVal) {
         this.selectItem = this.getFilter(this.menuList, parentName)[0];
         this.activeUrl = routerName;
         this.activeName = parentName;
@@ -111,8 +133,8 @@ export default {
       }
     },
     isShow(newVal) {
-      if(newVal) {
-        if(this.activeName === '首页') {
+      if (newVal) {
+        if (this.activeName === "首页") {
           this.width = 249;
         } else {
           this.width = 100;
@@ -125,11 +147,11 @@ export default {
   methods: {
     init() {
       let params = {
-        userId: localStorage.getItem('UserId')
-      }
+        userId: localStorage.getItem("UserId"),
+      };
       let parentName = this.$route.meta.parentName;
-      getUserMenu(params).then(res => {
-        if(res.code === 10000) {
+      getUserMenu(params).then((res) => {
+        if (res.code === 10000) {
           this.menuList = res.data;
           this.selectItem = this.getFilter(this.menuList, parentName)[0];
           if (this.selectItem.children.length > 0) {
@@ -138,61 +160,63 @@ export default {
             this.isShow = false;
           }
         }
-      })
+      });
     },
     jump(item) {
       this.activeName = item.title;
-      if(item.children.length > 0 && item.url !== "dashboard") {
+      if (item.children.length > 0 && item.url !== "dashboard") {
         this.isShow = true;
         this.selectItem = item;
         this.$router.push({
-          path: '/' + item.children[0].url
-        })
+          path: "/" + item.children[0].url,
+        });
       } else {
         this.isShow = false;
         this.$router.push({
-          path: '/' + item.url
-        })
+          path: "/" + item.url,
+        });
       }
     },
     go(item) {
       this.activeUrl = item.url;
       this.$router.push({
-        path: '/' + item.url
-      })
+        path: "/" + item.url,
+      });
     },
     // 过滤找到自己上级
     getFilter(list, name) {
-     let childrenList = [];
-     const targetList = list.filter((item) => {
-        if(item.title == name) {
-            return true
-        } else if(item.children && item.children.length) {
-          childrenList = childrenList.concat(this.getFilter(item.children, name));
-          return false
+      let childrenList = [];
+      const targetList = list.filter((item) => {
+        if (item.title == name) {
+          return true;
+        } else if (item.children && item.children.length) {
+          childrenList = childrenList.concat(
+            this.getFilter(item.children, name)
+          );
+          return false;
         } else {
           return false;
         }
-     })
+      });
       return targetList.concat(childrenList);
-    }
+    },
   },
   created() {
-    this.init()
+    this.init();
   },
   mounted() {
     // // 路由地址
     let routerName = this.$route.meta.permission;
     // 上级菜单名字
     let parentName = this.$route.meta.parentName;
-    if(this.mode) {
+    if (this.mode) {
       this.activeUrl = routerName;
       this.activeName = parentName;
     } else {
       this.routerName = routerName;
     }
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
@@ -225,7 +249,7 @@ export default {
 .menu-item-children {
   width: 100%;
   height: calc(100% - 52px);
-  background-color: #EAEDF1;
+  background-color: #eaedf1;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -237,20 +261,19 @@ export default {
   border-bottom: 1px solid #ddd;
   font-size: 14px;
   cursor: pointer;
-  color: #BCBCBC;
+  color: #bcbcbc;
 }
 .menuSet {
   position: relative;
 }
 .menuSet:after {
-  content: '';
+  content: "";
   position: absolute;
   width: 18px;
   height: 18px;
   top: 20px;
   left: 92px;
   transform: rotate(45deg);
-  background-color: #EAEDF1;
-
+  background-color: #eaedf1;
 }
 </style>

src/components/search-cpn/SearchCpn.vue

@@ -0,0 +1,142 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-06 13:53:10
+ * @LastEditTime: 2022-01-06 16:40:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 搜索组件
+ * @FilePath: \goldenPig\src\components\search-cpn\SearchCpn.vue
+-->
+<template>
+  <div class="search-cpn">
+    <el-form :label-width="formStyle.labelWidth" :size="formStyle.size">
+      <el-row :gutter="formStyle.gutter">
+        <template v-for="item in formItemProp">
+          <el-col v-bind="formStyle.colLayout" :key="item.label">
+            <el-form-item :label="item.label">
+              <el-input v-if="item.type === 'input'" v-model="form[item.field]">
+              </el-input>
+
+              <el-select
+                v-else-if="item.type === 'select'"
+                v-model="form[item.field]"
+                style="width: 100%"
+              >
+                <el-option v-for="option in item.options" :key="option.value">
+                </el-option>
+              </el-select>
+
+              <el-date-picker
+                v-else-if="item.type === 'datePicker'"
+                type="daterange"
+                range-separator="至"
+                :start-placeholder="item.placeholder[0]"
+                :end-placeholder="item.placeholder[1]"
+                value-format="yyyy-MM-dd"
+                v-model="form[item.field]"
+                style="width: 100%"
+              >
+              </el-date-picker>
+
+              <!-- 具名插槽，element ui 的表单元素无法包括的 -->
+              <slot
+                v-else-if="item.type === 'custom'"
+                :name="item.slotName"
+                :form="form"
+                :item="item"
+              >
+              </slot>
+            </el-form-item>
+          </el-col>
+        </template>
+
+        <el-col v-for="i in needBlanks" :key="i" v-bind="formStyle.colLayout">
+          <div class="blank"></div>
+        </el-col>
+
+        <el-col v-bind="formStyle.colLayout">
+          <div :class="{ 'btns-bottom': btnsBottom, btns: true }">
+            <el-button
+              :size="formStyle.size"
+              type="primary"
+              @click="handleSearch"
+              >查询</el-button
+            >
+            <el-button :size="formStyle.size">重置</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    formStyle: {
+      // el-form 的样式
+      type: Object,
+      default: () => ({
+        labelWidth: "140px",
+        size: "small",
+        gutter: 30,
+        colLayout: {
+          lg: 8,
+          md: 12,
+          sm: 24,
+        },
+      }),
+    },
+    formItemProp: {
+      // el-form-item 的限定
+      type: Array,
+      required: true,
+    },
+    searchForm: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      form: {},
+      needBlanks: 0,
+      btnsBottom: false,
+    };
+  },
+  watch: {
+    formItemProp: {
+      handler(newVal) {
+        this.needBlanks = 3 - ((newVal.length + 1) % 3);
+        if (this.needBlanks === 2) {
+          this.btnsBottom = true;
+        }
+        this.form = { ...this.searchForm };
+        console.log("123");
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    handleSearch() {
+      this.$emit("handleSearch", this.form);
+    },
+  },
+};
+</script>
+<style scoped>
+.search-cpn {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 25px 20px 5px 10px;
+}
+.blank {
+  height: 1px;
+}
+.btns {
+  text-align: right;
+}
+.btns-bottom {
+  margin-bottom: 22px;
+}
+</style>

src/components/search-cpn/index.js

@@ -0,0 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-06 13:56:13
+ * @LastEditTime: 2022-01-06 13:56:14
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \goldenPig\src\components\search-cpn\index.js
+ */
+import SearchCpn from './SearchCpn.vue'
+
+export default SearchCpn

src/components/table-cpn/TableCpn.vue

@@ -0,0 +1,15 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-06 16:46:18
+ * @LastEditTime: 2022-01-06 16:46:18
+ * @LastEditors: Please set LastEditors
+ * @Description: 表格
+ * @FilePath: \goldenPig\src\components\table-cpn\TableCpn.vue
+-->
+<template>
+  <div class="table-cpn"></div>
+</template>
+<script>
+export default {};
+</script>
+<style scoped></style>

src/main.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-04 15:14:05
+ * @LastEditTime: 2022-01-06 13:59:38
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \goldenPig\src\main.js
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
@@ -18,7 +26,7 @@ Vue.prototype.$echarts = echart
 router.beforeEach((to, from, next) => {
   next();
   document.body.scrollTop = 0;
-  document.getElementById('operant').scrollTop = 0;
+  document.getElementById('operant') && (document.getElementById('operant').scrollTop = 0);
   document.documentElement.scrollTop = 0;
   // 兼容ie
   window.scrollTo(0 ,0);

src/router/ChildrenRouters.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-04 15:14:05
+ * @LastEditTime: 2022-01-06 14:56:16
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \goldenPig\src\router\ChildrenRouters.js
+ */
 const childrenRouters = [
   /* 首页 */
   {
@@ -20,336 +28,25 @@ const childrenRouters = [
       parentName: '首页',
     },
   },
-  /*
-    生物安全
-   */
-
-  /* 人员管理 */
-  {
-    path: '/personAdmin',
-    name: 'PersonAdmin',
-    component: () => import('../views/BioSafety/PersonAdmin.vue'),
-    meta: {
-      title: '人员管理',
-      permission: 'personAdmin',
-      parentName: '生物安全',
-    }
-  },
-  /* 车辆管理 */
-  {
-    path: '/carAdmin',
-    name: 'CarAdmin',
-    component: () => import('../views/BioSafety/CarAdmin.vue'),
-    meta: {
-      title: '车辆管理',
-      permission: 'carAdmin',
-      parentName: '生物安全',
-    }
-  },
-  // {
-  //   path: '/stiflingAdmin',
-  //   name: 'StiflingAdmin',
-  //   component: () => import('../views/BioSafety/StiflingAdmin.vue'),
-  //   meta: {
-  //     title: '熏蒸监管',
-  //     permission: 'stiflingAdmin',
-  //     parentName: '生物安全'
-  //   }
-  // },
-  {
-    path: '/deadPig',
-    name: 'DeadPig',
-    component: () => import('../views/BioSafety/DeadPig.vue'),
-    meta: {
-      title: '死猪管理',
-      permission: 'deadPig',
-      parentName: '生物安全'
-    }
-  },
-  {
-    path: '/doorAdmin',
-    name: 'DoorAdmin',
-    component: () => import('../views/BioSafety/DoorAdmin.vue'),
-    meta: {
-      title: '大门事件',
-      permission: 'doorAdmin',
-      parentName: '生物安全'
-    }
-  },
-  {
-    path: '/benconAdmin',
-    name: 'BenconAdmin',
-    component: () => import('../views/BioSafety/BenconAdmin.vue'),
-    meta: {
-      title: '熏蒸事件',
-      permission: 'benconAdmin',
-      parentName: '生物安全'
-    }
-  },{
-    path: '/saleAdmin',
-    name: 'SaleAdmin',
-    component: () => import('../views/BioSafety/SaleAdmin.vue'),
-    meta: {
-      title: '卖猪事件',
-      permission: 'saleAdmin',
-      parentName: '生物安全'
-    }
-  },
 
   /*
   *
-  * 环境监测
+  * 汇总数据
   *
   * */
-
-  {
-    path: '/pigHouseEnv',
-    name: 'PigHouseEnv',
-    component: () => import('../views/Env/PigHouseEnv.vue'),
-    meta: {
-      title: '猪舍环境',
-      permission: 'pigHouseEnv',
-      parentName: '环境监测'
-    }
-  },
-  {
-    path: '/drinkWater',
-    name: 'DrinkWater',
-    component: () => import('../views/Env/DrinkWater.vue'),
-    meta: {
-      title: '饮水监测',
-      permission: 'drinkWater',
-      parentName: '环境监测'
-    }
-  },
-  {
-    path: '/electro',
-    name: 'Electro',
-    component: () => import('../views/Env/Electro.vue'),
-    meta: {
-      title: '用电监测',
-      permission: 'electro',
-      parentName: '环境监测'
-    }
-  },
-  {
-    path: '/stark',
-    name: 'Stark',
-    component: () => import('../views/Env/Stark.vue'),
-    meta: {
-      title: '料塔检测',
-      permission: 'stark',
-      parentName: '环境监测'
-    }
-  },
-  {
-    path: '/salePig',
-    name: 'salePig',
-    component: () => import('../views/Env/SalePig.vue'),
-    meta: {
-      title: '卖猪计量',
-      permission: 'salePig',
-      parentName: '生产数据'
-    }
-  },
-
-  /**
-   *
-   * 生产数据
-   *
-   * **/
-
-  {
-    path: '/checkPig',
-    name: 'CheckPig',
-    component: () => import('../views/PdcData/CheckPig.vue'),
-    meta: {
-      title: '智能盘猪',
-      permission: 'checkPig',
-      parentName: '生产数据'
-    }
-  },
-  {
-    path: '/checkLog',
-    name: 'CheckLog',
-    component: () => import('../views/PdcData/CheckLog.vue'),
-    meta: {
-      title: '盘猪记录',
-      permission: 'checkLog',
-      parentName: '生产数据'
-    }
-  },
-  {
-    path: '/analysis',
-    name: 'Analysis',
-    component: () => import('../views/PdcData/Analysis.vue'),
-    meta: {
-      title: 'ERP数据分析',
-      permission: 'analysis',
-      parentName: '生产数据'
-    }
-  },
-  /**
-   *
-   * 生态监测
-   *
-   * **/
-
-
-  {
-    path: '/sewage',
-    name: 'Sewage',
-    component: () => import('../views/Zoology/Sewage.vue'),
-    meta: {
-      title: '污水排放',
-      permission: 'sewage',
-      parentName: '生态监测'
-    }
-  },
-
-  /**
-   *
-   * 违规报警
-   *
-   * **/
-
-  {
-    path: '/alarmWarn',
-    name: 'AlarmWarn',
-    component: () => import('../views/Alarm/AlarmWarn.vue'),
-    meta: {
-      title: '报警信息',
-      permission: 'alarmWarn',
-      parentName: '违规报警'
-    }
-  },
-  {
-    path: '/eventRem',
-    name: 'EventRem',
-    component: () => import('../views/Alarm/EventRem.vue'),
-    meta: {
-      title: '事件提醒',
-      permission: 'eventRem',
-      parentName: '违规报警'
-    }
-  },
-  // {
-  //   path: '/outage',
-  //   name: 'Outage',
-  //   component: () => import('../views/Alarm/Outage.vue'),
-  //   meta: {
-  //     title: '断电报警',
-  //     permission: 'outage',
-  //     parentName: '违规报警'
-  //   }
-  // },
-  {
-    path: '/violationUser',
-    name: 'ViolationUser',
-    component: () => import('../views/Alarm/ViolationUser.vue'),
-    meta: {
-      title: '人员违规报警',
-      permission: 'violationUser',
-      parentName: '违规报警'
-    }
-  },
-  {
-    path: '/envWarn',
-    name: 'EnvWarn',
-    component: () => import('../views/Alarm/EnvWarn.vue'),
-    meta: {
-      title: '环境监测报警',
-      permission: 'envWarn',
-      parentName: '违规报警'
-    }
-  },
-  {
-    path: '/sewageWarn',
-    name: 'SewageWarn',
-    component: () => import('../views/Alarm/SewageWarn.vue'),
-    meta: {
-      title: '污水排放报警',
-      permission: 'sewageWarn',
-      parentName: '违规报警'
-    }
-  },
-  {
-    path: '/alarmSet',
-    name: 'AlarmSet',
-    component: () => import('../views/Alarm/AlarmSet.vue'),
-    meta: {
-      title: '报警阈值设置',
-      permission: 'alarmSet',
-      parentName: '违规报警'
-    }
-  },
-
-  /**
-   *
-   * 视频监控
-   *
-   * **/
-
-  {
-    path: '/videoLook',
-    name: 'VideoLook',
-    component: () => import('../views/Video/VideoLook.vue'),
-    meta: {
-      title: '大屏监控设置',
-      permission: 'videoLook',
-      parentName: '视频监控'
-    }
-  },
-  {
-    path: '/areaAdmin',
-    name: 'AreaAdmin',
-    component: () => import('../views/Video/AreaAdmin.vue'),
-    meta: {
-      title: '监控区域',
-      permission: 'areaAdmin',
-      parentName: '视频监控'
-    }
-  },
-  {
-    path: '/cameraBrand',
-    name: 'CameraBrand',
-    component: () => import('../views/Video/CameraBrand.vue'),
-    meta: {
-      title: '摄像头品牌',
-      permission: 'cameraBrand',
-      parentName: '视频监控'
-    }
-  },
-
-  {
-    path: '/videoAdmin',
-    name: 'VideoAdmin',
-    component: () => import('../views/Video/VideoAdmin.vue'),
+ {
+    path: '/individualData',
+    name: 'IndividualData',
+    component: () => import('../views/summary-data/individual-data/IndividualData.vue'),
     meta: {
-      title: '监控管理',
-      permission: 'videoAdmin',
-      parentName: '视频监控'
+      title: '个体数据',
+      permission: 'individualData',
+      parentName: '汇总数据'
     }
   },
 
   /*
   *
-  * 设备管理
-  *
-  * */
- {
-  path: '/device',
-  name: 'device',
-  component: () => import('../views/DeviceMana/Device.vue'),
-  meta: {
-    title: '设备详情',
-    permission: 'device',
-    parentName: '设备管理'
-  }
- },
-
-  /*
-  *
   * 系统管理
   *
   * */
@@ -383,36 +80,6 @@ const childrenRouters = [
       parentName: '系统管理'
     }
   },
-  {
-    path: '/farmAdmin',
-    name: 'FarmAdmin',
-    component: () => import('../views/SystemAdmin/FarmAdmin.vue'),
-    meta: {
-      title: '牧场管理',
-      permission: 'farmAdmin',
-      parentName: '系统管理'
-    }
-  },
-  {
-    path: '/ErpFarm',
-    name: 'ErpFarm',
-    component: () => import('../views/SystemAdmin/ErpFarm.vue'),
-    meta: {
-      title: 'erp牧场管理',
-      permission: 'ErpFarm',
-      parentName: '系统管理'
-    }
-  },
-  {
-    path: '/farmOne',
-    name: 'FarmOne',
-    component: () => import('../views/SystemAdmin/FarmOne.vue'),
-    meta: {
-      title: '牧场1.0地址',
-      permission: 'farmOne',
-      parentName: '系统管理'
-    }
-  }
 ]
 
 export default childrenRouters;

src/store/index.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-04 15:14:05
+ * @LastEditTime: 2022-01-06 14:03:03
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \goldenPig\src\store\index.js
+ */
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { getMyButton, getFarm } from '../utils/api'
@@ -68,11 +76,11 @@ export default new Vuex.Store({
     GetFarm({ commit }){
       return new Promise((resolve, reject) => {
         getFarm().then(res => {
-          if (res.code === 10000) {
+          if (res && res.code === 10000) {
             commit('SET_FARMLIST', res.data);
             resolve(res.data);
           } else {
-            reject(new Error(res.message))
+            res && reject(new Error(res.message))
           }
         }).catch(error => {
           reject(error)

src/utils/http.js

@@ -15,8 +15,7 @@ let removePending = (ever) => {
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://120.27.234.126:8010'
-  // baseURL: 'http://192.168.1.165:8010'
+  baseURL: 'http://192.168.1.165:8010'
 })
 
 // 请求拦截器

src/views/summary-data/individual-data/IndividualData.vue

@@ -0,0 +1,93 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-01-06 13:37:14
+ * @LastEditTime: 2022-01-06 16:37:43
+ * @LastEditors: Please set LastEditors
+ * @Description: 汇总数据 - 个体数据页面
+ * @FilePath: \goldenPig\src\views\SummaryData\IndividualData.vue
+-->
+<template>
+  <div class="individual-data">
+    <search-cpn v-bind="searchConfig" @handleSearch="handleSearchEvent">
+      <!-- 耳根温度 -->
+      <template #earTemp="scope">
+        <el-input
+          v-model="searchForm2[scope.item.field1]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+        &nbsp;—&nbsp;
+        <el-input
+          v-model="searchForm2[scope.item.field2]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+      </template>
+
+      <!-- 环境温度 -->
+      <template #envTemp="scope">
+        <el-input
+          v-model="searchForm2[scope.item.field1]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+        &nbsp;—&nbsp;
+        <el-input
+          v-model="searchForm2[scope.item.field2]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+      </template>
+
+      <!-- 信号强度 -->
+      <template #signal="scope">
+        <el-input
+          v-model="searchForm2[scope.item.field1]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+        &nbsp;—&nbsp;
+        <el-input
+          v-model="searchForm2[scope.item.field2]"
+          style="width: calc(50% - 16px)"
+        ></el-input>
+      </template>
+    </search-cpn>
+  </div>
+</template>
+<script>
+// 搜索
+import SearchCpn from "@/components/search-cpn";
+import { formItemProp } from "./config/search.config";
+export default {
+  components: {
+    SearchCpn,
+  },
+  data() {
+    return {
+      searchConfig: {},
+      searchForm1: {
+        farmId: "",
+        date: [],
+        eartag: "",
+        deviceCode: "",
+      },
+      searchForm2: {
+        earTemp1: "",
+        earTemp2: "",
+        envTemp1: "",
+        envTemp2: "",
+        signal1: "",
+        signal2: "",
+      },
+    };
+  },
+  created() {
+    this.searchConfig = { formItemProp, searchForm: this.searchForm1 };
+  },
+  methods: {
+    handleSearchEvent(params) {
+      console.log("点击了查询按钮，获得的参数", {
+        ...params,
+        ...this.searchForm2,
+      });
+    },
+  },
+};
+</script>
+<style scoped></style>

src/views/summary-data/individual-data/config/search.config.js

@@ -0,0 +1,59 @@
+/*
+ * @Author: your name
+ * @Date: 2022-01-06 14:44:20
+ * @LastEditTime: 2022-01-06 16:11:52
+ * @LastEditors: Please set LastEditors
+ * @Description: 搜索组件的配置
+ * @FilePath: \goldenPig\src\views\summary-data\individual-data\search.config.js
+ */
+export const formItemProp = [
+  {
+    label: '牧场：',
+    type: 'select',
+    field: 'farmId',
+    placeholder: '请选择牧场',
+    options: [],
+  },
+  {
+    label: '采集时间：',
+    type: 'datePicker',
+    field: 'date',
+    placeholder: ['开始日期', '结束日期']
+  },
+  {
+    label: '耳标号：',
+    type: 'input',
+    field: 'eartag',
+    placeholder: '请输入耳标号'
+  },
+  {
+    label: '耳根温度(℃)：',
+    type: 'custom',
+    field1: 'earTemp1',
+    field2: 'earTemp2',
+    placeholder: ['请输入数字', '请输入数字'],
+    slotName: 'earTemp'
+  },
+  {
+    label: '环境温度(℃)：',
+    type: 'custom',
+    field1: 'envTemp1',
+    field2: 'envTemp2',
+    placeholder: ['请输入数字', '请输入数字'],
+    slotName: 'envTemp'
+  },
+  {
+    label: '信号强度(-db)：',
+    type: 'custom',
+    field1: 'signal1',
+    field2: 'signal2',
+    placeholder: ['请输入数字', '请输入数字'],
+    slotName: 'signal'
+  },
+  {
+    label: '采集器编码：',
+    type: 'input',
+    field: 'deviceCode',
+    placeholder: '请输入编码'
+  }
+]