0
0

电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统

一、作品介绍

  1. 现在农业在互联网的不断发展下，给到了农业生产带来了很多新的思路，本次毕业设计作品是在团队+自己敬爱的指导周老师+学长+本人（当然还要感谢我的母校，培养我很简单，管饱就好，哈哈哈），在诸多的指导帮助下设计出来的，设计不易，供大家码农朋友提供参考学习，本人来自于普通的农村家庭。也希望自己的作品能够为以后的乡村建设提供一份美丽的答卷。

对于我们的传统农业生产方式，对于农田的参数检测、病虫害预警、远程管控等的实时效果能力达不到，对于现在的农作物而言，我们知道，农作物最重要的生长标准环境就是农地里的光照、温湿度、病虫害等等的因素，但是我们现在的传统生产方式是远远达不到要求的，对于监管来说，达不到时效性，就没有生产性可言，而且现在的乡村，存在着农田分配不均匀、人工管理耗时费力等等，诸多的因素下，设计了本农业智能田地系统，实现的是可以通过远程操作农田设备，比如小型机器人、喷洒车等等，实现远程操作。

二、开发环境

毕业设计之Vue+WebSocket+ECharts+服务器的智能农业管理系统
开发语言：Java
框架：Vue3
数据库：mysql 5.6
数据库工具：Navicat11
开发软件：visual studio code
前端框架:vue.js+ECharts-Element-ui

三、系统功能截图

1.登录界面

当用户需要登录的时候，用户可以通过使用账号密码操作登录到系统，登录需要进行验证，当用户登录账号密码不对的时候会有错误提示。

2.设备管理

该界面给到向用户展示届满，罗列了一系列农田设备得到的数据信息，向我们用户提供数据，“搜索”button，可以由系统向数据库信息那边进行数据校验对比，在数据库得到数据索引即可对数据进行排序罗列出来。

3.配置管理界面

集体向用户展示现场农田传回来的设备的配置信息，用户可以实时监管看农田设备的数据信息，看看哪里有没有损坏什么的，比如设备运行的日期、分、设备号等等。

4.历史数据

本设计通过使用百度地图插件等处理，配合远程摄像头等操作，向用户展示地图现场传回的地理位置数据信息，该部分模块还配有温湿度折线图，采用的是ECharts可视化图表进行现场温湿度（近一周）的功能展示。

5.数据分析

用户通过点击导航栏，进入“数据分析”界面，展现界面模块数据分析现场传回病虫害图片展示、病虫害占比率以饼图展示、文本框形式展示最新病虫害信息以及未来十五天预测信息等。

6. 权限管理

智能农业管理系统权限管理界面，用户点击左边导航栏，进入“权限管理”界面，用户可以对任意模块权限进行管理；还可以进行超级管理员、管路员、用户分配权限增删改查功能。

7.远程管理

四、部分关键代码

login.vue

  1. <template>
  2.     <div class="login_container">
  3.         <!-- 登录模块盒子 -->
  4. <div class="login-box">
  5. <!-- 图片盒子 -->
  6. <div class="avatar_box">
  7.     <img src="../assets/1234.png" alt="">
  8.     <h3 class="text">云 智 舟</h3>
  9. </div>
  10. <!-- 登陆表单区域 -->
  11. <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
  12.     <!-- :model数据绑定对象，绑定到login from这个表单中,rules表单的验证规则对象 -->
  13.     <!-- 用户登录 -->
  14.   <el-form-item prop="username">
  15.     <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" size="mini" ></el-input>
  16.     <!-- v-model双向绑定，绑定到用户名 -->
  17.   </el-form-item>
  18.   <!-- 密码 -->
  19.   <el-form-item prop="password">
  20.     <el-input  prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" size="mini" ></el-input>
  21.      <!-- v-model双向绑定，绑定到用户登录密码,type="password可以使得密码隐藏"-->
  22.   </el-form-item>
  23.   <!-- 按钮区域 -->
  24.   <el-form-item class="btns">
  25.     <el-button type="primary" @click="login" size="mini" >登录</el-button>
  26.     <!-- 为登录绑定一个单击事件，名为login -->
  27.     <el-button type="info" @click="resetLoginForm" size="mini">重置</el-button>
  28.     <!-- click绑定单击事件，名为resetloginfrom -->
  29.   </el-form-item>
  30.   </el-form>
  31.     </div>
  32. </div>
  33. </template>
  35. <script>
  36. import {Login} from '../network/login'
  37. export default {
  38.   data () {
  39.     return {
  40.       // 登录表单的数据绑定对象
  41.       loginForm: {
  42.         username: '',
  43.         password: ''
  44.       },
  45.       // 表单的验证规则对象
  46.       loginFormRules: {
  47.         // 验证用户名是否合法
  48.         username: [
  49.           { required: true, message: '请输入登录名称', trigger: 'blur' },
  50.           { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  51.         // trigger便是失去焦点后出发这一次验证
  52.         ],
  53.         // 验证密码是否合法
  54.         password: [
  55.           { required: true, message: '请输入登录密码', trigger: 'blur' },
  56.           { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
  57.         ]
  58.       }
  59.     }
  60.   },
  61.   methods: {
  62.     // 点击重置按钮，重置表单
  63.     resetLoginForm () {
  64.       this.$refs.loginFormRef.resetFields()
  65.     },
  66.     login () {
  67.       this.$refs.loginFormRef.validate( valid => {
  68.         if (!valid) {return this.$message.error('用户名密码不正确')}
  69.       Login(this.loginForm).then( res => {
  70.         console.log(res);
  71.         if (res.code !== 0)
  72.          {return this.$message.error('登录失败')}
  74.         this.$message.success('登陆成功')
  75.         window.sessionStorage.setItem('token', res.token)
  76.         this.$router.push('/home')
  78.       }).catch( error => {
  79.         console.log(error);
  80.       })
  82.         // const { data: res } = await this..post('login', this.loginForm)
  83.         // if (res.meta.status !== 200) return this.$message.error('登录失败')
  84.         // this.$message.success('登陆成功')
  85.         // // console.log(res)
  86.         // window.sessionStorage.setItem('token', res.data.token)
  87.         // this.$router.push('/home')
  88.         // validate回调函数，完成登录表单前的预校验
  89.         // 将登陆成功以后的token,保存到客户端的sessionstorage中
  90.         // 项目中除了登陆之外的其他api接口，必须将token保存到客户端
  91.         // this.$router.push('/home)是通过编程式导航跳转到后台，路由地址为/home
  92.       })
  93.     }
  94.   }
  95. }
  96. </script>

home.vue

  1. <template>
  2.     <div class="login_container">
  3.         <!-- 登录模块盒子 -->
  4. <div class="login-box">
  5. <!-- 图片盒子 -->
  6. <div class="avatar_box">
  7.     <img src="../assets/1234.png" alt="">
  8.     <h3 class="text">云 智 舟</h3>
  9. </div>
  10. <!-- 登陆表单区域 -->
  11. <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
  12.     <!-- :model数据绑定对象，绑定到login from这个表单中,rules表单的验证规则对象 -->
  13.     <!-- 用户登录 -->
  14.   <el-form-item prop="username">
  15.     <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" size="mini" ></el-input>
  16.     <!-- v-model双向绑定，绑定到用户名 -->
  17.   </el-form-item>
  18.   <!-- 密码 -->
  19.   <el-form-item prop="password">
  20.     <el-input  prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" size="mini" ></el-input>
  21.      <!-- v-model双向绑定，绑定到用户登录密码,type="password可以使得密码隐藏"-->
  22.   </el-form-item>
  23.   <!-- 按钮区域 -->
  24.   <el-form-item class="btns">
  25.     <el-button type="primary" @click="login" size="mini" >登录</el-button>
  26.     <!-- 为登录绑定一个单击事件，名为login -->
  27.     <el-button type="info" @click="resetLoginForm" size="mini">重置</el-button>
  28.     <!-- click绑定单击事件，名为resetloginfrom -->
  29.   </el-form-item>
  30.   </el-form>
  31.     </div>
  32. </div>
  33. </template>
  35. <script>
  36. import {Login} from '../network/login'
  37. export default {
  38.   data () {
  39.     return {
  40.       // 登录表单的数据绑定对象
  41.       loginForm: {
  42.         username: '',
  43.         password: ''
  44.       },
  45.       // 表单的验证规则对象
  46.       loginFormRules: {
  47.         // 验证用户名是否合法
  48.         username: [
  49.           { required: true, message: '请输入登录名称', trigger: 'blur' },
  50.           { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  51.         // trigger便是失去焦点后出发这一次验证
  52.         ],
  53.         // 验证密码是否合法
  54.         password: [
  55.           { required: true, message: '请输入登录密码', trigger: 'blur' },
  56.           { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
  57.         ]
  58.       }
  59.     }
  60.   },
  61.   methods: {
  62.     // 点击重置按钮，重置表单
  63.     resetLoginForm () {
  64.       this.$refs.loginFormRef.resetFields()
  65.     },
  66.     login () {
  67.       this.$refs.loginFormRef.validate( valid => {
  68.         if (!valid) {return this.$message.error('用户名密码不正确')}
  69.       Login(this.loginForm).then( res => {
  70.         console.log(res);
  71.         if (res.code !== 0)
  72.          {return this.$message.error('登录失败')}
  74.         this.$message.success('登陆成功')
  75.         window.sessionStorage.setItem('token', res.token)
  76.         this.$router.push('/home')
  78.       }).catch( error => {
  79.         console.log(error);
  80.       })
  82.         // const { data: res } = await this..post('login', this.loginForm)
  83.         // if (res.meta.status !== 200) return this.$message.error('登录失败')
  84.         // this.$message.success('登陆成功')
  85.         // // console.log(res)
  86.         // window.sessionStorage.setItem('token', res.data.token)
  87.         // this.$router.push('/home')
  88.         // validate回调函数，完成登录表单前的预校验
  89.         // 将登陆成功以后的token,保存到客户端的sessionstorage中
  90.         // 项目中除了登陆之外的其他api接口，必须将token保存到客户端
  91.         // this.$router.push('/home)是通过编程式导航跳转到后台，路由地址为/home
  92.       })
  93.     }
  94.   }
  95. }
  96. </script>
  98. <style lang="less" scoped>
  99. .login_container {
  100.     background-color: #2b4b6b;
  101.     height: 100%;
  102. }
  103. .login-box {
  104.     width: 360px;
  105.     height: 240px;
  106.     background-color: #fff;
  107.     border-radius: 3px;
  108.     position: absolute;
  109.     left: 50%; //距离左侧50%
  110.     top: 50%; // 距离顶部505
  111.     transform: translate(-50%, -50%); //横轴上移动50%，纵移动50%
  112. }
  113.  .avatar_box {
  114.         height: 100px;
  115.         width: 100px;
  116.         border: 1px solid #eee;
  117.         border-radius: 50%;
  118.         padding: 10px;
  119.         box-shadow: 0 0 10px #eee;
  120.         position: absolute;
  121.         left: 50%;
  122.         top:-40%;
  123.         transform: translate(-50%);
  124.         background-color: rgb(32, 181, 201);
  125.         img {
  126.             width: 100%;
  127.             height: 100%;
  128.             border-radius: 50%;
  129.             background-color: #eee;
  130.         }
  131.     }
  133. .login_form {
  134.     position: absolute;
  135.     bottom: 0;
  136.     width: 100%;
  137.     padding: 0 20px;
  138.     box-sizing: border-box;
  139. }
  140.     .btns {
  141.         display: flex;
  142.         justify-content: flex-end;
  143.     }
  144.     .text {
  145.       text-align: center;
  146.       margin-top: 10px;
  147.       font-size: 20px;
  148.       font-family: 宋体;
  149.     }
  150. </style>

equip.vue

  2. </template>
  3. <script>
  4. import {getTable,getdetail} from '../../network/equip'
  5. // import { Login } from '../../network/login'
  6. export default {
  7.   data () {
  8.     return {
  9.       //搜索的id
  10.       id:null,
  11.       SeriesNumber:'',
  12.       queryInfo: {
  13.         formart: 'josn',
  14.         pagenum: 1,
  15.         pagesize: 3,
  16.       },
  17.       total:7,
  18.       input: '',
  19.       input2: '',
  20.       input3: '',
  21.       coordinate: '',
  22.       // 表格中的开关
  23.       // valueswitch: true,
  24.       // 定义tablelist这个为一个数组
  25.       TableList: [],
  26.     
  27.       // 控制对话框的显示与隐藏
  28.       ToMoreVisible: false,
  29.    
  30.       value: '',
  31.       value2: '',
  32.       // checked: false,
  33.       currentPage1: 5,
  34.       currentPage2: 5,
  35.       currentPage3: 5,
  36.       currentPage4: 5,
  37.     }
  38.   },
  39.   // 创建一个表格数据
  40.   created () {
  41.     this.getTableList()
  42.   },
  43.     mounted () {
  44.   },
  45.   methods: {
  46.     // 获取表格数据
  47.     getTableList(){
  48.       getTable(this.queryInfo).then(res => {
  49.         this.TableList = res.results
  50.         console.log(res);
  51.       }).catch(err => {
  52.         console.log(err);
  53.       })
  54.     },
  55.     // 搜索框获取到表格里面的数据
  56.     getssList(){
  57.       getdetail(this.SeriesNumber).then(res => {
  58.         // this.getssList.push()
  59.         // 方法为：先清空，后push出去this.tablelist = [],再this.tablelist.push(res)
  60.         this.TableList = []
  61.          this.TableList.push(res)
  62.          console.log(res)
  63.       }).catch(err => {
  64.       console.log(err);
  65.       })
  66.     },
  68.     // 监听pagesize改变的事件
  69.     handleSizeChange (newSize) {
  70.       // console.log(newSize)
  71.       this.queryInfo.pagesize = newSize
  72.       this.getTableList()
  73.     },
  74.     // 监听页码值改变的事件
  75.     handleCurrentChange (newPage) {
  76.        this.queryInfo.pagenum = newPage
  77.         this.getTableList()
  78.         console.log(newPage)
  79.     },
  80.     // 点击跳转到配置管理的事件
  81.     todeploy () {
  82.       this.$router.push('/deploy')
  83.     },
  84.     // 点击跳转到远程管理界面
  85.     toremote () {
  86.       this.$router.push('/remote')
  87.     },
  88.   }
  89. }
  90. </script>

deloy.vue

  1. <template>
  2. <div>
  3.    <el-row class="rowstyle">
  4.   <el-col :span="3"><el-button type="primary" size="medium">参数获取</el-button></el-col>
  6.   <el-col :span="3" ><el-button type="primary" size="medium">参数配置</el-button></el-col>
  7.   </el-row>
  8.   <!-- 设置一个卡片视图 -->
  9. <el-card style="width:100%;margin-top:20px">
  10.   <el-table
  11.       :data="tableData" style="width: 100%">
  12.   <el-table-column prop="date" label="日期" width="180"></el-table-column>
  13.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  14.       <el-table-column prop="address" label="地址"></el-table-column>
  15.       <el-table-column width="180">
  16.       <template>
  17.         <el-select v-model="value" placeholder="选择设备" class="select1">
  18.     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  19.        </el-select>
  20.       </template></el-table-column>
  21.       <el-table-column width="180">
  22.           <el-button type="info" size="mini"><a href="javascript:location.reload()" style="text-decoration:none">刷新</a></el-button>
  23.       </el-table-column>
  24.     </el-table>
  25. </el-card>
  26.   <!-- 表单 -->
  27.   <el-form  label-width="80px" style="margin-top:20px" :data="DataList">
  28.     <el-row :gutter="80">
  29.       <el-col :span="8">
  30.            <el-form-item label="序号：">
  31.      <el-select v-model="value" placeholder="请选择序号">
  32.     <el-option
  33.       v-for="item in options"
  34.       :key="item.value"
  35.       :label="item.label"
  36.       :value="item.value">
  37.     </el-option>
  38.   </el-select>
  39.   </el-form-item>
  40.       </el-col>
  42.       <el-col :span="8">
  43.            <el-form-item label="名称：">
  44.     <el-select v-model="value1" placeholder="请选择设备号">
  45.     <el-option
  46.       v-for="item in options1"
  47.       :key="item.value1"
  48.       :label="item.label1"
  49.       :value="item.value1">
  50.     </el-option>
  51.   </el-select>
  52.   </el-form-item>
  53.       </el-col>
  54.   </div>
  56. </template>
  58. <script>
  59. import {getData} from '../../network/deploy'
  60. export default {
  61.   data () {
  62.     return {
  63.       input: '',
  64.       options: [{
  65.       }],
  66.       value: '',
  67.       value1: '',
  68.       tableData: [{
  69.         name: '王小明',
  70.         date: '2010010',
  71.         address: '2021年5月28日'
  72.       }]
  73.     }
  74.   },
  75.   created () {
  76.     this.getDataList()
  77. },
  78. methods: {
  79.   // 获取表格数据
  80.     getDataList(){
  81.       getData().then(res => {
  82.         this.DataList = res
  83.         console.log(res);
  84.       }).catch(err => {
  85.         console.log(err);
  86.       })
  87.     }
  88. }
  89. }
  90. </script>

history.vue

  1. <template>
  2. <div>
  3.    <el-row class="rowstyle">
  4.   <el-col :span="3"><el-button type="primary" size="medium">参数获取</el-button></el-col>
  5.   <el-col :span="3" ><el-button type="primary" size="medium">参数配置</el-button></el-col>
  6.   </el-row>
  7.   <!-- 设置一个卡片视图 -->
  8. <el-card style="width:100%;margin-top:20px">
  9.   <el-table
  10.       :data="tableData" style="width: 100%">
  11.   <el-table-column prop="date" label="日期" width="180"></el-table-column>
  12.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  13.       <el-table-column prop="address" label="地址"></el-table-column>
  14.       <el-table-column width="180">
  15.       <template>
  16.         <el-select v-model="value" placeholder="选择设备" class="select1">
  17.     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  18.        </el-select>
  19.       </template></el-table-column>
  20.       <el-table-column width="180">
  21.           <el-button type="info" size="mini"><a href="javascript:location.reload()" style="text-decoration:none">刷新</a></el-button>
  22.       </el-table-column>
  23.     </el-table>
  24. </el-card>
  25.   <!-- 表单 -->
  26.   <el-form  label-width="80px" style="margin-top:20px" :data="DataList">
  27.     <el-row :gutter="80">
  28.       <el-col :span="8">
  29.            <el-form-item label="序号：">
  30.      <el-select v-model="value" placeholder="请选择序号">
  31.     <el-option
  32.       v-for="item in options"
  33.       :key="item.value"
  34.       :label="item.label"
  35.       :value="item.value">
  36.     </el-option>
  37.   </el-select>
  38.   </el-form-item>
  39.       </el-col
  40.       <el-col :span="8">
  41.            <el-form-item label="名称：">
  42.     <el-select v-model="value1" placeholder="请选择设备号">
  43.     <el-option
  44.       v-for="item in options1"
  45.       :key="item.value1"
  46.       :label="item.label1"
  47.       :value="item.value1">
  48.     </el-option>
  49.   </el-select>
  50.   </el-form-item>
  51.       </el-col>
  52.       <el-col :span="8">
  53.            <el-form-item label="类型：">
  54.     <el-select v-model="value" placeholder="请选择类型号">
  55.     <el-option
  56.       v-for="item in options"
  57.       :key="item.value"
  58.       :label="item.label"
  59.       :value="item.value"> </el-option> </el-select></el-form-item </el-col>
  60.     </el-row>
  61.   </el-form> <el-button class="save">保存</el-button><el-button class="recover">恢复默认</el-button>
  62.   </div
  63. </template>
  65. <script>
  66. import {getData} from '../../network/deploy'
  67. export default {
  68.   data () {
  69.     return {
  70.       input: '',
  71.         address: '2021年5月28日'
  72.       }]
  73.     }
  74.   },
  75.   created () {
  76.     this.getDataList()
  77. },
  78. methods: {
  79.   // 获取表格数据
  80.     getDataList(){
  81.       getData().then(res => {
  82.         this.DataList = res
  83.         console.log(res);
  84.       }).catch(err => {
  85.         console.log(err);
  86.       })
  87.     }
  88. }
  89. }
  90. </script>

power.vue

  1. <template>
  2. <div>
  3.   <el-table
  4.     :data="tableData"
  5.     style="width: 100%"
  6.     height="350" border stripe>
  7.     <el-table-column type="index"></el-table-column>
  8.     <el-table-column  prop="powername" label="权限名称" width="200"></el-table-column>
  9.     <el-table-column prop="poweraddress" label="位置" width="120"></el-table-column>
  10.     <el-table-column prop="level" label="权限等级" width="350">
  11.         <template>
  12.             <el-tag closable @click="remove">超级管理员</el-tag>
  13.             <el-tag type="success" closable @click="remove">管理员</el-tag>
  14.             <el-tag type="warning" closable @click="remove">用户</el-tag>
  15.         </template>
  16.     </el-table-column>
  17.     <el-table-column  label="操作" width="400">
  18.         <template>
  19. <el-button type="primary" icon="el-icon-edit" size="mini">查看</el-button>
  20. <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
  21. <el-button type="warning" icon="el-icon-setting" size="mini" @click="showsetpowerdialog">分配添加</el-button>
  22.         </template>
  23.     </el-table-column>
  24.   </el-table>
  26.   <!-- 添加分配对话框 -->
  27.   <el-dialog
  28.   title="添加分配"
  29.   :visible.sync="setpowerdialogVisible"
  30.   width="50%">
  31.   <span>您所要添加分配的权限</span>
  32.   <span slot="footer" class="dialog-footer">
  33.     <el-button @click="setpowerdialogVisible = false">取 消</el-button>
  34.     <el-button type="primary" @click="setpowerdialogVisible = false">确 定</el-button>
  35.   </span>
  36. </el-dialog>
  37. </div>
  38. </template>
  40. <script>
  41. export default {
  42.   data () {
  43.     return {
  44.       tableData: [{
  45.         powername: '设备管理权限',
  46.         poweraddress: 'equip',
  47.         level: ''
  48.       }, {
  49.         powername: '配置管理权限',
  50.         poweraddress: 'deploy',
  51.         level: ''
  52.       }, {
  53.         powername: '历史数据权限',
  54.         poweraddress: 'history',
  55.         level: ''
  56.       }, {
  57.         powername: '数据分析权限',
  58.         poweraddress: 'analysis',
  59.         level: ''
  60.       }, {
  61.         powername: '权限管理权限',
  62.         poweraddress: 'power',
  63.         level: ''
  64.       }, {
  65.         powername: '远程管理权限',
  66.         poweraddress: 'remote',
  67.         level: ''
  68.       }],
  69.       // 控制对话框的显示与隐藏
  70.       setpowerdialogVisible: false
  71.     }
  72.   },
  73.   created () {},
  74.   methods: {
  75.     async remove () {
  76.     // 根据弹框删除
  77.       const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  78.         confirmButtonText: '确定',
  79.         cancelButtonText: '取消',
  80.         type: 'warning'
  81.       }).catch(err => err)
  82.       if (confirmResult !== 'comfirm') {
  83.         return this.$message.info('取消删除')
  84.       }
  85.       console.log('确认了删除')
  86.     },
  87.     // 展示分配添加对话框
  88.     showsetpowerdialog () {
  89.       this.setpowerdialogVisible = true
  90.     }
  91.   }
  92. }
  93. </script>
  94. <style lang="less" scoped>
  95. </style>

remote.vue

  1. <script>
  2. // 引入video样式
  3. import 'video.js/dist/video-js.css'
  4. import 'vue-video-player/src/custom-theme.css'
  5. export default {
  6.   data () {
  7.     const self = this
  8.     return {
  9.       //喷杀控制显示隐藏
  10.       PS:true,
  11.       // 摄像头部分的显示与隐藏
  12.       camera:false,
  13.       
  15.       // 视频流
  16.       playerOptions: {
  17.         playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  18.         autoplay: false, // 如果true,浏览器准备好时开始回放。
  19.         controls: true, // 控制条
  20.         preload: 'auto', // 视频预加载
  21.         muted: false, // 默认情况下将会消除任何音频。
  22.         loop: false, // 导致视频一结束就重新开始。
  23.         language: 'zh-CN',
  24.         aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  25.         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  26.         sources: [{
  27.           type: 'video/mp4',
  28.           src: ''// 你所放置的视频的地址，最好是放在服务器上
  29.         }],
  30.         poster: 'http://192.168.1.2:8081/', // 你的封面地址（覆盖在视频上面的图片）
  31.         width: document.documentElement.clientWidth,
  32.         notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  33.       },
  34.       input: '',
  35.       // 地图部分代码
  36.       center: [121.59996, 31.197646],
  37.       lng: 0,
  38.       lat: 0,
  39.       loaded: false,
  40.       plugin: [
  41.         {
  42.           enableHighAccuracy: true,
  43.           timeout: 100,
  44.           maximumAge: 0,
  45.           convert: true,
  46.           showButton: true,
  47.           buttonPosition: 'RB',
  48.           showMarker: true,
  49.           showCircle: true,
  50.           panToLocation: true,
  51.           zoomToAccuracy: true,
  52.           extensions: 'all',
  54.           pName: 'Geolocation',
  55.           events: {
  56.             init (o) {
  57.               // o 是高德地图定位插件实例
  58.               o.getCurrentPosition((status, result) => {
  59.                 console.log(result)
  60.                 if (result && result.position) {
  61.                   self.lng = result.position.lng
  62.                   self.lat = result.position.lat
  63.                   self.center = [self.lng, self.lat]
  64.                   self.loaded = true
  65.                   self.$nextTick()
  66.                 }
  67.               })
  68.             }
  69.           }
  70.         }
  71.       ]
  72.     }
  73.   },
  74. methods:{
  75.   PsIsShow(){
  76.     this.PS = true
  77.   },
  78.   cameraisshow(){
  79.     this.camera = !this.camera
  80.   }
  82. }
  83. }
  84. </script>

总结：工程我会放在“资源”一栏，大家可以供参考，谢谢！

标签： 服务器 javascript 运维
本文转载自: https://blog.csdn.net/Lushengshi/article/details/126084648
版权归原作者 丘比特惩罚陆 所有， 如有侵权，请联系我们删除。
登录后发布评论

“电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？