生物安防

src/utils/api.js

@@ -27,6 +27,15 @@ export function getFarm(data) {
   })
 }
 
+// 根据id 修改 默认样式 导航
+export function findUpdate(data) {
+  return axios({
+    url: '/admin/accountMultilevel/update',
+    method: 'post',
+    data: data
+  })
+}
+
 // 选择牧场
 export function getFarmId(data) {
   return axios({

src/views/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="MainLayout">
-    <div class="main-title" @click="isShow = true ">{{title}}</div>
+    <div class="main-title">{{title}}</div>
     <div class="main-left">
       <!--  天气    -->
       <div v-show="isHome" class="main-home" @click="showWeather = true">
@@ -70,21 +70,31 @@
         <iframe style="width: 800px; height: 800px; z-index: 9999" src="static/weather/index.html" frameborder="0"></iframe>
       </div>
     </transition>
-    <div class="bio-dialog" v-show="isShow" @click="isShow = false">
-      <div class="dialog-content">
-        <h2>牧场列表</h2>
-        <div class="div-text" v-for="item in xList" :key="item.id" @click="jumps(item.url)">{{item.name}}</div>
-      </div>
+<!--    <div class="bio-dialog" v-show="isShow" @click="isShow = false">-->
+<!--      <div class="dialog-content">-->
+<!--        <h2>牧场列表</h2>-->
+<!--        <div class="div-text" v-for="item in farmList" :key="item.id" @click="jumps(item.url)">{{item.name}}</div>-->
+<!--      </div>-->
+<!--    </div>-->
+    <div class="farm">
+      <label>当前牧场：</label>
+      <el-select @change="onChange" v-model="farmId" size="mini" style="width: 150px;">
+        <el-option v-for="item in getFarmList" :key="item.id" :label="item.farmName" :value="item.id"></el-option>
+      </el-select>
     </div>
   </div>
 </template>
 
 <script>
-import {getFarmId, getWeather, getXFarm} from "@/utils/api";
-import { mapActions } from 'vuex'
+import {getFarmId, getWeather, findUpdate} from "@/utils/api";
+import { mapActions, mapState } from 'vuex';
+import { Select } from "element-ui";
 
 export default {
   name: "MainLayout",
+  components: {
+    'el-select': Select
+  },
   data() {
     return {
       title: '',
@@ -96,7 +106,8 @@ export default {
       // 天气报警
       weatherInfo: {},
       xList: [],
-      isShow: false
+      isShow: false,
+      getFarmList: [],
     }
   },
   watch: {
@@ -111,8 +122,26 @@ export default {
           clearInterval(this.timer4);
         }
       }
+    },
+    farmList: {
+      handler(newVal) {
+        console.log(1111)
+        if(newVal.length > 0) {
+          console.log(newVal)
+          this.getFarmList = []
+          newVal.forEach(item => {
+            if(item.rowStatus) {
+              this.getFarmList.push(item)
+            }
+          })
+        }
+      },
+      deep: true
     }
   },
+  computed: {
+    ...mapState(['farmList', 'farmId'])
+  },
   methods: {
     ...mapActions(['GetFarm', 'setFarmIdAsync']),
     initTime() {
@@ -154,11 +183,6 @@ export default {
           this.refresh()
         }
       })
-      getXFarm({id: 0}).then(res => {
-        if(res.code === 10000) {
-          this.xList = res.data
-        }
-      })
     },
     // 刷新拿到数据
     refresh() {
@@ -170,8 +194,20 @@ export default {
         }
       })
     },
-    jumps(url) {
-      location.href = url;
+    // 选择牧场
+    onChange(val) {
+      let params = {
+        id: localStorage.getItem('UserId'),
+        lastFarmId: val
+      }
+      localStorage.setItem('lastFarmId', val)
+      findUpdate(params).then(res => {
+        console.log(res)
+      })
+      this.setFarmIdAsync(val);
+      setTimeout(() => {
+        location.reload();
+      }, 100)
     },
   },
   mounted() {
@@ -456,4 +492,16 @@ export default {
     color: #53bafd;
     cursor: pointer;
   }
+  .farm {
+    /*width: 200px;*/
+    height: 40px;
+    /*background-color: red;*/
+    position: absolute;
+    bottom: 40px;
+    left: 60px;
+    line-height: 40px;
+    text-align: left;
+    color: #fff;
+    font-size: 16px;
+  }
 </style>