主页

src/components/areaZz.vue

@@ -458,13 +458,27 @@ export default {
             },
           ]
         }
-      ]
+      ],
+      selectOption: [],
+
     }
   },
+  props: ['countyCode'],
   methods: {
     handleChange(value) {
       this.$emit('getCityCode', value);
+    },
+    getFilter() {
+      this.options.filter(product => {
+        product.children.some(item => item.value === this.countyCode);
+      }).map(product => product);
+      console.log(this.options);
     }
+  },
+  mounted() {
+    this.selectedOptions = [this.countyCode];
+    this.getFilter();
+    console.log(this.selectedOptions);
   }
 }
 </script>

src/views/MainLayout.vue

@@ -17,7 +17,7 @@
           <sideMenu :navIndex="selected" :defaultUrl="defaultUrl" :menuItem="menuItem"></sideMenu>
         </el-aside>
         <el-main>
-          <div class="header_title">{{title}}</div>
+<!--          <div class="header_title">{{title}}</div>-->
           <div class="overY">
             <router-view></router-view>
           </div>

src/views/pastureData/Home.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <!-- 市级   -->
-    <city v-if="!isProvince && type === 1" :cityCode="cityCode" @goFarm="goFarm" @getCountyCode="getCountyCode"></city>
+    <city v-if="!isProvince && type === 1" :cityCode="cityCode" :title="title" @goFarm="goFarm" @getCountyCode="getCountyCode" @backBtn="backBtn"></city>
     <!-- 区级   -->
-    <district v-if="!isProvince && type === 2" :distCode="distCode" @goFarm="goFarm"></district>
+    <district v-if="!isProvince && type === 2" :title="distitle" :distCode="distCode" @goFarm="goFarm" @backBtn="backBtn"></district>
     <!-- 牧场级   -->
-    <farm v-if="!isProvince && type === 4" :farmCode="farmCode"></farm>
+    <farm v-if="!isProvince && type === 4" :farmCode="farmCode" :farmName="farmName" @backBtn="backBtn"></farm>
     <!-- 省级  -->
     <proinvce v-if="isProvince" @getCountyCode="getCountyCode"></proinvce>
   </div>
@@ -41,6 +41,9 @@ export default {
       farmCode: '',
       // 先后顺序
       typeList: [],
+      title: '',
+      farmName: '',
+      distitle: '',
     }
   },
   methods: {
@@ -51,16 +54,35 @@ export default {
       this.isProvince = false;
       if(data.type === 1) {
         this.cityCode = data.countyCode;
+        this.title = data.title;
       } else if(data.type === 2){
         this.distCode = data.countyCode;
+        this.distitle = data.title;
       }
     },
     // 去牧场
     goFarm(data) {
       this.type = data.type;
+      this.farmName = data.name;
       this.typeList.push(this.type);
       this.farmCode = data.farmCode;
-    }
+    },
+    // 返回
+    backBtn(type) {
+      if(type === 1) {
+        this.isProvince = true;
+        this.typeList = [];
+      } else {
+        let str = this.typeList.indexOf(type);
+        if(str === 0) {
+          this.type = 1;
+        } else {
+          this.typeList.splice(str, 1);
+          let len = this.typeList.length;
+          this.type = this.typeList[len - 1];
+        }
+      }
+    },
   },
   created() {
     let farmCode = this.$route.query.farmCode;

src/views/pastureData/homeComponent/city.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <div class="header_title">牧场概况--{{title}}
+      <div class="right_float" @click="backBtn">回到上一页</div>
+    </div>
     <div>
       <div class="box">
         <div class="box_item">
@@ -34,7 +37,7 @@
       <div class="form_item">
         <el-form :inline="true" size="mini">
           <el-form-item label="市县">
-            <areaZz @getCityCode="getCityCode"></areaZz>
+            <areaZz :countyCode="cityCode" @getCityCode="getCityCode"></areaZz>
           </el-form-item>
           <el-form-item label="时间:"  v-if="isProvince">
             <el-date-picker
@@ -202,7 +205,7 @@ export default {
   computed: {
     ...mapState(['baseUrl'])
   },
-  props: ['cityCode'],
+  props: ['cityCode', 'title'],
   methods: {
     getCityCode(val) {
       let len = val.length;
@@ -263,11 +266,11 @@ export default {
     onSelect(row) {
       this.countyCode = row.code;
       this.type = row.type;
-      console.log(row);
+      let title = row.name;
       if(row.type === 4) {
-        this.$emit('goFarm', {farmCode: row.farmCode, type: 4});
+        this.$emit('goFarm', {farmCode: row.farmCode, type: 4, name: title});
       } else {
-        this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+        this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type, title: title});
       }
       // if (row.type === 1) {
       //   this.initCity();
@@ -287,6 +290,9 @@ export default {
               this.boxList = res.data.data;
             }
           })
+    },
+    backBtn() {
+      this.$emit('backBtn', 1);
     }
   },
   mounted() {
@@ -358,4 +364,26 @@ export default {
   color: #DA331D;
   font-size: 16px;
 }
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  position: relative;
+}
+.right_float {
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  cursor: pointer;
+}
 </style>

src/views/pastureData/homeComponent/district.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <div class="header_title">牧场概况--{{title}}
+      <div class="right_float" @click="backBtn">回到上一页</div>
+    </div>
     <div>
       <div class="box">
         <div class="box_item">
@@ -186,7 +189,7 @@ export default {
   computed: {
     ...mapState(['baseUrl'])
   },
-  props: ['distCode'],
+  props: ['distCode', 'title'],
   methods: {
     getCityCode(val) {
       let len = val.length;
@@ -244,7 +247,8 @@ export default {
           })
     },
     goFarm(row) {
-      this.$emit('goFarm', {farmCode: row.farmCode, type: 4});
+      let title = row.farmName;
+      this.$emit('goFarm', {farmCode: row.farmCode, type: 4, name: title});
     },
     // 统计
     initState() {
@@ -258,6 +262,9 @@ export default {
               this.boxList = res.data.data;
             }
           })
+    },
+    backBtn() {
+      this.$emit('backBtn', 2);
     }
   },
   mounted() {
@@ -329,4 +336,26 @@ export default {
   color: #DA331D;
   font-size: 16px;
 }
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  position: relative;
+}
+.right_float {
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  cursor: pointer;
+}
 </style>

src/views/pastureData/homeComponent/farm.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <div class="header_title">牧场概况--{{farmName}}
+      <div class="right_float" @click="backBtn">回到上一页</div>
+    </div>
     <div>
       <div class="box">
         <div class="box_item">
@@ -164,7 +167,7 @@ export default {
   components: {
     TableFooter
   },
-  props: ['farmCode'],
+  props: ['farmCode', 'farmName'],
   data() {
     return {
       boxList: {},
@@ -308,6 +311,9 @@ export default {
               this.boxList = res.data.data;
             }
           })
+    },
+    backBtn() {
+      this.$emit('backBtn', 4);
     }
   },
   mounted() {
@@ -379,4 +385,26 @@ export default {
   color: #DA331D;
   font-size: 16px;
 }
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  position: relative;
+}
+.right_float {
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  cursor: pointer;
+}
 </style>

src/views/pastureData/homeComponent/proinvce.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div class="header_title">牧场概况--浙江省</div>
     <div class="box">
       <div class="box_item">
         <p>母猪总存栏</p>
@@ -33,7 +34,7 @@
     <div class="form_item">
       <el-form :inline="true" size="mini">
         <el-form-item label="市县">
-          <areaZz @getCityCode="getCityCode"></areaZz>
+          <areaZz :countyCode="'330000'" @getCityCode="getCityCode"></areaZz>
         </el-form-item>
         <el-form-item label="时间:"  v-if="isProvince">
           <el-date-picker
@@ -263,7 +264,8 @@ export default {
     onSelect(row) {
       this.countyCode = row.code;
       this.type = row.type;
-      this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type});
+      let title = row.name;
+      this.$emit('getCountyCode', {countyCode: this.countyCode, type: this.type, title: title});
     },
 
     // 统计
@@ -349,4 +351,13 @@ export default {
   color: #DA331D;
   font-size: 16px;
 }
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
 </style>