修改

src/components/HeaderElement.vue

@@ -7,8 +7,16 @@
       <el-col :span="4" style="height: 100%">
         <span class="title">数智牧场管理系统</span>
       </el-col>
-      <el-col :span="7" :offset="12" style="height: 100%">
+      <el-col :span="10" :offset="9" style="height: 100%">
         <div class="flex">
+          <div class="user" style="width: 180px;">
+            <div>
+              <el-select @change="onChange" size="mini" v-model="farmId">
+                <el-option v-for="item in farmList" :key="item.id" :label="item.farmName" :value="item.id"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <el-divider direction="vertical"></el-divider>
           <div class="user" style="width: 250px;">
             <div>
               <el-switch
@@ -23,7 +31,7 @@
             </div>
           </div>
           <el-divider direction="vertical"></el-divider>
-          <div class="user">
+          <div class="user" style="width: 150px;">
             <div>
               <i class="el-icon-user-solid" style="font-size: 28px"></i>
             </div>
@@ -85,11 +93,11 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import { findUpdate } from '../utils/api';
+import { findUpdate, getFarmId } from '../utils/api';
 export default {
   name: "HeaderElement",
   computed: {
-    ...mapState(['color'])
+    ...mapState(['color', 'farmList', 'farmId'])
   },
   data() {
     return {
@@ -127,11 +135,11 @@ export default {
           id: 8,
           color: '#C1374A'
         },
-      ]
+      ],
     }
   },
   methods: {
-    ...mapActions(['setModeAsync', 'setColorAsync']),
+    ...mapActions(['setModeAsync', 'setColorAsync', 'GetFarm', 'setFarmIdAsync']),
     cut(data) {
       this.setColorAsync(data)
       let params = {
@@ -156,8 +164,37 @@ export default {
       localStorage.removeItem('UserName');
       localStorage.removeItem('accessToken');
       localStorage.removeItem('UserId');
+      localStorage.removeItem('lastFarmId')
       this.$router.replace('/login');
-    }
+    },
+    // 拿到farmid
+    init() {
+      getFarmId().then(res => {
+        if(res.code === 10000) {
+          this.setFarmIdAsync(res.data);
+          localStorage.setItem('lastFarmId', res.data);
+        }
+      })
+    },
+    // 选择牧场
+    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() {
+    this.init();
+    this.GetFarm()
   }
 }
 </script>

src/components/SideMenu.vue

@@ -73,9 +73,9 @@ export default {
     $route(newVal) {
       // 标题名称
       let name = newVal.meta.title;
-      this.$emit('setRouterName', name);
       let parentName = newVal.meta.parentName;
       let routerName = newVal.meta.permission;
+      this.$emit('setRouterName', {name: name, router: routerName});
       if(this.mode) {
         this.activeName = parentName;
         this.activeUrl = routerName

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { getMyButton } from '../utils/api'
+import { getMyButton, getFarm } from '../utils/api'
 
 Vue.use(Vuex)
 
@@ -11,6 +11,9 @@ export default new Vuex.Store({
     // 按钮权限
     buttons: [],
     ip: 'http://192.168.1.165:8010',
+    // 所选择的farmId
+    farmId: '',
+    farmList: [],
   },
   mutations: {
     setColor(state, data) {
@@ -21,6 +24,12 @@ export default new Vuex.Store({
     },
     SET_BUTTONS(state, data) {
       state.buttons = data
+    },
+    SET_FARMID(state, data) {
+      state.farmId = data;
+    },
+    SET_FARMLIST(state, data) {
+      state.farmList = data;
     }
   },
   actions: {
@@ -30,6 +39,9 @@ export default new Vuex.Store({
     setColorAsync(context, data) {
       context.commit('setColor', data)
     },
+    setFarmIdAsync(context,data) {
+      context.commit('SET_FARMID', data)
+    },
     // 获取用户按钮权限
     GetButtons({ commit }) {
       return new Promise((resolve, reject) => {
@@ -44,6 +56,21 @@ export default new Vuex.Store({
             reject(error)
           })
       })
+    },
+    // 获取牧场列表
+    GetFarm({ commit }){
+      return new Promise((resolve, reject) => {
+        getFarm().then(res => {
+          if (res.code === 10000) {
+            commit('SET_FARMLIST', res.data);
+            resolve(res.data);
+          } else {
+            reject(new Error(res.message))
+          }
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   },
   modules: {

src/utils/api.js

@@ -221,7 +221,44 @@ export function getFarm(data) {
   return axios({
     url: '/admin/farm/getFarm',
     method: 'get',
-    params: (data)
+    params: data
+  })
+}
+
+// 牧场添加
+export function addFarm(data) {
+  return axios({
+    url: 'admin/farm/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 牧场编辑
+export function editFarm(data) {
+  return axios({
+    url: 'admin/farm/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 牧场删除
+
+export function delFarm(data) {
+  return axios({
+    url: 'admin/farm/remove',
+    method: 'get',
+    params: data
+  })
+}
+
+// 选择牧场
+export function getFarmId(data) {
+  return axios({
+    url: 'admin/accountMultilevel/getLastFarmId',
+    method: 'get',
+    params: data,
   })
 }
 

src/utils/http.js

@@ -26,12 +26,16 @@ instance.interceptors.request.use(
     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
     const token = localStorage.getItem('accessToken')
+    const lastFarmId = Number(localStorage.getItem('lastFarmId'));
     token && (config.headers.accessToken = token)
     removePending(config); //在一个ajax发送前执行一下取消操作
     config.cancelToken = new cancelToken((c)=>{
       // 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
       pending.push({ u: config.url + '&' + config.method, f: c });
     });
+
+    let data = config.data || config.params || {}
+    data.farmId = lastFarmId
     return config
   },
   error => Promise.error(error)

src/views/MainLayout.vue

@@ -16,7 +16,13 @@
           </div>
         </div>
         <div class="operant">
-          <router-view></router-view>
+          <!--  没有绑定不让其进去  -->
+          <template v-if="hasPerm(routerSite + ':look')">
+            <router-view></router-view>
+          </template>
+          <template v-else>
+            <el-empty :image-size="200" description="暂无权限查看，请联系管理员"></el-empty>
+          </template>
         </div>
       </el-main>
     </el-container>
@@ -38,13 +44,14 @@ export default {
     return {
       menuList: [],
       routerName: '',
+      routerSite: '',
     }
   },
   computed: {
     ...mapState(['color'])
   },
   methods: {
-    ...mapActions(['setModeAsync', 'setColorAsync', 'GetButtons']),
+    ...mapActions(['setModeAsync', 'setColorAsync', 'GetButtons', 'GetFarm']),
     init() {
       let params = {
         id: localStorage.getItem('UserId'),
@@ -57,7 +64,9 @@ export default {
       })
     },
     setRouterName(data) {
-      this.routerName = data;
+      this.routerName = data.name;
+      this.routerSite = data.router;
+      console.log(this.routerSite);
     },
     refresh() {
       location.reload();
@@ -65,7 +74,9 @@ export default {
   },
   mounted() {
     this.routerName = this.$route.meta.title;
+    this.routerSite = this.$route.meta.permission;
     this.GetButtons();
+    this.GetFarm();
     this.init();
   }
 }

src/views/SystemAdmin/FarmAdmin.vue

@@ -1,25 +1,199 @@
 <template>
-  <div>1111</div>
+  <div>
+    <new-table :height="600" :title="title" :listData="farmList" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
+      <template #right>
+        <el-button  size="mini" type="primary" v-if="hasPerm('farmAdmin:add')" style="margin-right: 10px" @click="addFarm">添加牧场</el-button>
+        <el-button size="mini" type="danger" v-if="hasPerm('farmAdmin:del')" style="margin-right: 10px" @click="delAll">批量删除</el-button>
+      </template>
+      <template #handler="scope">
+        <el-button type="primary" size="mini" style="margin-right: 10px" @click="edit(scope.row)" v-if="hasPerm('farmAdmin:edit')">编辑</el-button>
+        <el-popconfirm
+            title="是否删除这个牧场"
+            @confirm="del(scope.row)"
+        >
+          <el-button size="mini" slot="reference" v-if="hasPerm('farmAdmin:del')" type="danger">删除</el-button>
+        </el-popconfirm>
+      </template>
+    </new-table>
+    <el-dialog
+        :title=" showType ? '编辑牧场' : '新增牧场'"
+        :visible.sync="dialogVisible"
+        width="30%">
+        <div>
+          <el-form :rules="rules" ref="ruleForm" size="mini" :model="form" label-width="80px">
+            <el-form-item label="牧场名称" prop="farmName">
+              <el-input v-model="form.farmName"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="reset">取 消</el-button>
+          <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
+         </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { getFarm } from '@/utils/api.js';
+import { addFarm, editFarm, delFarm } from '@/utils/api.js';
+import NewTable from "@/components/newTable/NewTable";
+import { mapState, mapActions } from 'vuex';
 export default {
   name: "FarmAdmin",
+  components: {
+    NewTable
+  },
+  computed: {
+    ...mapState(['farmList'])
+  },
   data() {
     return {
-
+      title: '牧场列表',
+      tableItems: [
+        {
+          prop: 'farmName',
+          label: '牧场名称',
+          minWidth: '100',
+          slotName: 'farmName'
+        },
+        {
+          label: '操作',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: true,
+        showSelect: true,
+      },
+      showType: false,
+      dialogVisible: false,
+      form: {
+        farmName: '',
+      },
+      rules: {
+        farmName: [{  required: true, message: '请输入牧场名称', trigger: 'blur' }]
+      },
+      select: [],
     }
   },
   methods: {
+    ...mapActions(['GetFarm']),
     init() {
-      getFarm().then(res => {
-        console.log(res)
+      this.GetFarm();
+    },
+    addFarm() {
+      this.dialogVisible = true;
+      this.showType = false;
+    },
+    edit(row) {
+      this.form.farmName = row.farmName;
+      this.form.id = row.id;
+    },
+    // 批量选择
+    selectionChange(data) {
+      this.select = [];
+      if(data.length > 0) {
+        data.forEach(item => {
+          this.select.push(item.id)
+        })
+      } else {
+        this.select = []
+      }
+    },
+    delAll() {
+      if(this.select.length > 0) {
+        let str = this.select.toString();
+        let params = {
+          ids: str
+        }
+        this.$confirm('此操作将永久删除这些牧场, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log(111);
+          delFarm(params).then(res => {
+            if(res.code === 10000) {
+              this.$message.success('删除成功!');
+              this.init();
+              this.select = [];
+            } else {
+              this.$message.error('删除失败!');
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      } else {
+        this.$message.error('请先选择要删除的牧场');
+      }
+    },
+    del(row) {
+      let params = {
+        ids: row.id
+      }
+      delFarm(params).then(res => {
+        if(res.code === 10000) {
+          this.$message.success('删除成功')
+          this.init()
+        } else {
+          this.$message.error('删除失败')
+        }
       })
+    },
+    // 确认
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if(this.showType) {
+            let params = {
+              id: this.form.id,
+              farmName: this.form.farmName
+            }
+            editFarm(params).then(res => {
+              this.reset();
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success('编辑成功！')
+              } else {
+                this.$message.error('编辑失败');
+              }
+            })
+          } else {
+            let params = {
+              farmName: this.form.farmName
+            }
+            addFarm(params).then(res => {
+              this.reset();
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success('添加成功！')
+              } else {
+                this.$message.error('添加失败');
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 重置
+    reset() {
+      this.dialogVisible = false;
+      this.showType = false;
+      this.form = {
+        farmName: '',
+      }
     }
   },
   mounted() {
-    this.init()
+    // this.init()
   }
 }
 </script>

src/views/SystemAdmin/UserAdmin.vue

@@ -175,12 +175,16 @@
 
 <script>
 import TableFooter from '../../components/TableFooter';
-import {getUserList, addUser, editUser, isUser, delUser, getFarm} from '../../utils/api';
+import {getUserList, addUser, editUser, isUser, delUser,} from '../../utils/api';
+import { mapState } from 'vuex';
 export default {
   name: "UserAdmin",
   components: {
     TableFooter
   },
+  computed: {
+    ...mapState(['farmList'])
+  },
   data() {
     return {
       dialogVisible: false,
@@ -206,7 +210,7 @@ export default {
         userName: [ { required: true, message: '请输入用户姓名', trigger: 'blur' },]
       },
       dialogFarm: false,
-      farmList: [],
+      // farmList: [],
       // 选中牧场的id
       selectFarm: '',
     };
@@ -245,14 +249,14 @@ export default {
             }
           })
     },
-    getFarm() {
-      getFarm().then(res => {
-        console.log(res)
-        if(res.code === 10000) {
-          this.farmList = res.data;
-        }
-      })
-    },
+    // getFarm() {
+    //   getFarm().then(res => {
+    //     console.log(res)
+    //     if(res.code === 10000) {
+    //       this.farmList = res.data;
+    //     }
+    //   })
+    // },
     // 添加用户
     addUser() {
       this.dialogVisible = true;
@@ -466,7 +470,7 @@ export default {
   mounted() {
     this.init();
     // 获取牧场列表
-    this.getFarm();
+    // this.getFarm();
   }
 }
 </script>

src/views/Video/AreaAdmin.vue

@@ -37,6 +37,9 @@
             <el-form-item label="区域名称" prop="areaName">
               <el-input v-model="form.areaName"></el-input>
             </el-form-item>
+            <el-form-item label="绑定IP" prop="publicUrl">
+              <el-input v-model="form.publicUrl"></el-input>
+            </el-form-item>
             <el-form-item label="备注">
               <el-input v-model="form.remark"></el-input>
             </el-form-item>
@@ -91,6 +94,12 @@ export default {
           slotName: 'areaName'
         },
         {
+          prop: 'publicUrl',
+          label: '绑定IP',
+          minWidth: '150',
+          slotName: 'publicUrl'
+        },
+        {
           prop: 'remark',
           label: '备注',
           minWidth: '150',
@@ -114,11 +123,13 @@ export default {
       showType: false,
       dialogVisible: false,
       rules: {
-        areaName: [ { required: true, message: '请输入区域名称', trigger: 'blur' } ]
+        areaName: [ { required: true, message: '请输入区域名称', trigger: 'blur' } ],
+        publicUrl: [ { required: true, message: '请输入绑定IP', trigger: 'blur' } ],
       },
       form: {
         areaName: '',
         remark: '',
+        publicUrl: '',
       }
     }
   },
@@ -157,6 +168,7 @@ export default {
       this.form.areaName = row.areaName;
       this.form.remark = row.remark;
       this.form.id = row.id;
+      this.form.publicUrl = row.publicUrl;
       this.dialogVisible = true;
     },
     // 删除
@@ -213,6 +225,7 @@ export default {
       this.dialogVisible = false;
       this.form ={
         areaName: '',
+        publicUrl: '',
         remark: '',
       }
       this.showType = false;
@@ -225,6 +238,7 @@ export default {
             let params = {
               id: this.form.id,
               areaName: this.form.areaName,
+              publicUrl: this.form.publicUrl,
               remark: this.form.remark
             }
             editArea(params).then(res => {
@@ -240,6 +254,7 @@ export default {
             // 新增
             let params = {
               areaName: this.form.areaName,
+              publicUrl: this.form.publicUrl,
               remark: this.form.remark
             }
             addArea(params).then(res => {