增加头部导航栏选择农场

xiebin

2022-08-11 072f6d897bffde4d6964e117d0366b5c3af63164

增加头部导航栏选择农场

 src/page/index/top/index.vue

@@ -124,7 +124,7 @@
import { fullscreenToggel, listenfullscreen } from "@/util/util"
import topLock from "./top-lock"
import topMenu from "./top-menu"
import topSearch from "./top-search"
import topSearch from "./top-search2"
import topTheme from "./top-theme"
import topLogs from "./top-logs"
import topColor from "./top-color"

 src/page/index/top/top-search2.vue

New file
@@ -0,0 +1,88 @@
<template>
  <el-select class="top-search" v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">
    <el-option
      v-for="item in farmList"
      :key="item.id"
      :label="item.farmName"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
  import config from "../sidebar/config.js";
  import {mapGetters} from "vuex";
  import {getFarmList} from "@/api/farm/farm";

  export default {
    data() {
      return {
        config: config,
        value: "",
        farm:{id:11},
        farmList:[]
      };
    },
    created() {

      getFarmList().then(res => {
        this.farmList = res.data.data
      })
      this.$nextTick(() => {
        this.farm.id = parseInt(this.userInfo.farmId.split(',')[0])
        this.$store.commit("SET_FARMID", this.farm.id )
      })
    },

    watch: {
      // 'farm.id':{
      //   handler (newName, oldName) {
      //     console.log('obj.a changed',newName,oldName)
      //   }
      // }
    },
    computed: {
      ...mapGetters(['userInfo', '$farmId'])
    },
    methods: {

      farmChange(data) {
        this.farm.id = data
        this.$store.commit("SET_FARMID", data)
      }
    }
  };
</script>

<style lang="scss">
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .icon {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
      }

      .name {
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: middle;
      }

      .addr {
        padding-top: 5px;
        width: 100%;
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>

 src/router/views/index.js

@@ -349,4 +349,4 @@
            }
        ]
    },
]
]

 src/store/getters.js

@@ -16,6 +16,7 @@
    tagList: state => state.tags.tagList,
    tagWel: state => state.tags.tagWel,
    token: state => state.user.token,
    $farmId: state => state.user.$farmId,
    roles: state => state.user.roles,
    permission: state => state.user.permission,
    menu: state => state.user.menu,
@@ -29,4 +30,4 @@
    polygons: state => state.common.polygons,
    polygonsFarm: state => state.common.polygonsFarm,
}
export default getters
export default getters

 src/store/modules/user.js

@@ -43,6 +43,7 @@
    menuAll: getStore({name: 'menuAll'}) || [],
    token: getStore({name: 'token'}) || '',
    refreshToken: getStore({name: 'refreshToken'}) || '',
    $farmId: 0
  },
  actions: {
    //根据用户名登录
@@ -203,6 +204,9 @@
    },
  },
  mutations: {
    SET_FARMID(state, farmId) {
      state.$farmId = farmId
    },
    SET_TOKEN: (state, token) => {
      setToken(token);
      state.token = token;

 src/views/wel/index.vue

@@ -3,16 +3,16 @@
        <div class="left">
            <div class="farm-info">
              <div class="farm-title">农场概览</div>
              <div class="statis" style="padding-left: 50px">
                <el-select v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">
                  <el-option
                    v-for="item in farmList"
                    :key="item.id"
                    :label="item.farmName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
<!--              <div class="statis" style="padding-left: 50px">-->
<!--                <el-select v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">-->
<!--                  <el-option-->
<!--                    v-for="item in farmList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.farmName"-->
<!--                    :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->
              <div class="statis">
                    <div class="echarts-statis">
                        <el-progress
@@ -211,7 +211,7 @@
            stockList: [],
            isFarmingDetail: false,
            landInfo: {},
            farm:{id:11},
            farm:{},
            farmList:[],
            customColor: "#5ABF78",
            total: 0,
@@ -230,12 +230,12 @@
        }
    },
    computed: {
        ...mapGetters(["userInfo"]),
        ...mapGetters(["userInfo","$farmId"]),
    },
  created () {
        //初始化农场信息
        let farmId = parseInt(this.userInfo.farmId)
        this.farm.id = farmId
        // let farmId = this.userInfo.$farmId
        this.farm.id = this.$farmId
        this.initData(this.userInfo.tenant_id);
        //地块使用率统计
        this.getCountStatis()
@@ -247,6 +247,17 @@
        this.getFarmingStatis()
        this.StockCount()
    },
  watch: {
    '$farmId':{
      handler (newName, oldName) {
        this.farm.id = newName
          //农场概览 地块使用率
        this.getCountStatis ()
        //当前农场种养品种
        this.onLoad()
      }
    }
  },
  methods: {
      //获取农场信息
        initData(tenantId) {