设备接口调试

src/api/Device.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+// 查询设备数据
+export function listDevice(query) {
+  return request({
+    url: '/system/device/list',
+    method: 'get',
+    params: query
+  })
+}

src/layout/components/Device/index.vue

@@ -7,17 +7,16 @@
       <el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button>
       <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button>
     </div>
-
     <div id="deviceBox">
-      <div class="deviceMsg" v-for="i in 150" :key="i">
+      <div class="deviceMsg" v-for="(item, index) in deviceData" :key="index">
-        <el-popover placement="right" width="250" trigger="click">
+        <el-popover placement="right" width="270" trigger="click">
           <el-row>
             <el-col :span="24">
               <div class="iconBox">
                 <img src="../../../assets/images/位置.png" class="iconImg" alt />
               </div>
               <span class="span1 span2">位置</span>
-              <span class="span1 span3">001</span>
+              <span class="span1 span3">{{item.location}}</span>
             </el-col>
           </el-row>
           <el-row>
@@ -26,7 +25,7 @@
                 <img src="../../../assets/images/网络.png" class="iconImg" alt />
               </div>
               <span class="span1 span4">IP地址</span>
-              <span class="span1 span5">192.168.88.88</span>
+              <span class="span1 span5">{{item.deviceIp}}</span>
             </el-col>
           </el-row>
           <el-row>
@@ -35,7 +34,7 @@
                 <img src="../../../assets/images/音符.png" class="iconImg" alt />
               </div>
               <span class="span1 span2">音符</span>
-              <span class="span1 span3">1</span>
+              <span class="span1 span3">{{item.note}}</span>
             </el-col>
           </el-row>
           <el-row>
@@ -44,7 +43,7 @@
                 <img src="../../../assets/images/音量.png" class="iconImg" alt />
               </div>
               <span class="span1 span2">音量</span>
-              <span class="span1 span3">50%</span>
+              <span class="span1 span3">{{item.volume}}</span>
             </el-col>
           </el-row>
           <el-row>
@@ -53,7 +52,11 @@
                 <img src="../../../assets/images/设置.png" class="iconImg" alt />
               </div>
               <span class="span1">设备状态</span>
-              <span class="span1">正常</span>
+              <span class="span1">{{item.status==0?'正常':'异常'}}</span>
+              <!-- <template slot-scope="scope">
+                <span class="span1" v-if="scope.row.stasus == '1'">不正常</span>
+                <span class="span1" v-else-if="scope.row.status == '0'">正常</span>
+              </template>-->
             </el-col>
           </el-row>
           <el-row>
@@ -62,7 +65,7 @@
                 <img src="../../../assets/images/时间.png" class="iconImg" alt />
               </div>
               <span class="span1">创建时间</span>
-              <span class="span1">2022.02.22</span>
+              <span class="span1">{{item.createTime}}</span>
             </el-col>
           </el-row>
           <el-row>
@@ -71,37 +74,121 @@
                 <img src="../../../assets/images/创建人.png" class="iconImg" alt />
               </div>
               <span class="span1 span6">创建人</span>
-              <span class="span1 span7">张大大</span>
+              <span class="span1 span7">{{item.createBy}}</span>
             </el-col>
           </el-row>
 
-          <div class="shadows" slot="reference"></div>
+          <div :class="item.status==0?'shadows':'active'" slot="reference"></div>
         </el-popover>
-
+        <div class="deleteIcon" @click="removeItem(index,deviceData)">
-        <div class="deleteIcon">
           <img src="../../../assets/images/删除.png" class="deleteImg" alt />
         </div>
-        <span class="deviceStatus">正常</span>
+        <span class="deviceStatus">{{item.status==0?'正常':'异常'}}</span>
-        <span class="deviceNumber">{{i}}</span>
+        <span class="deviceNumber">{{item.deviceId}}</span>
 
         <img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
       </div>
     </div>
+    <!-- 新增设备对话框-->
+    <el-dialog title :visible.sync="addDevice" width="20%" style="top:20vh" center>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="位置" prop="location">
+              <el-input placeholder="请输入位置" v-model="form.location"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="IP地址" prop="address">
+              <el-input placeholder="请输入IP地址" v-model="form.address"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="音符" prop="note">
+              <el-input placeholder="请输入音符" v-model="form.note"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="音量" prop="volume">
+              <el-input placeholder="请输入音量" v-model="form.volume"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addDevice = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+    </el-dialog>
     <div class="panel-footer"></div>
   </div>
 </template>
 
 <script>
 import flexible from "@/layout/flexible.js";
+import { listDevice } from "@/api/Device";
 export default {
   data() {
-    return {};
+    return {
+      //查询参数
+      queryParams: {
+        pageNum: 1
+      },
+      address: null,
+      note: null,
+      volume: null,
+      location: null,
+      addDevice: false,
+
+      form: {},
+      forms: {},
+      rules: {},
+      deviceData: []
+    };
+  },
+  created() {
+    this.getList();
   },
   methods: {
+    //查询设备数据
+    getList() {
+      this.loading = true;
+      listDevice(this.queryParams).then(result => {
+        this.deviceData = result.rows;
+        this.loading = false;
+      });
+    },
     //新增按钮
-    editDevice() {},
+    editDevice() {
+      this.addDevice = true;
+    },
+    //确定按钮
+    submitForm() {
+      this.addDevice = false;
+    },
     //删除按钮
-    deleteDevice() {}
+    deleteDevice() {},
+    //删除对应的喇叭
+    removeItem(index, deviceData) {
+      this.$modal
+        .confirm("确认要删除吗")
+        .then(function() {
+          deviceData.splice(index, 1);
+        })
+        .then(() => {
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {
+         
+        });
+    }
   }
 };
 </script>
@@ -181,6 +268,7 @@ export default {
   border-radius: 0;
   background: none;
 }
+/* 设备正常时的遮罩层 */
 .shadows {
   position: absolute;
   top: 0px;
@@ -188,8 +276,19 @@ export default {
   width: 79px;
   height: 90px;
   cursor: pointer;
-  /* background:grey; 
+  /* background:red; 
-  opacity: 0.4; */
+  opacity: 0.4;  */
+}
+/* 设备异常时的遮罩层 */
+.active {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 79px;
+  height: 90px;
+  cursor: pointer;
+  background: red;
+  opacity: 0.4;
 }
 .deviceStatus {
   color: white;
@@ -215,6 +314,7 @@ export default {
 }
 .deleteIcon {
   width: 8px;
+  height: 5px;
   position: absolute;
   top: 2px;
   right: 5px;

src/layout/components/MusicManage/index.vue

@@ -2,12 +2,7 @@
   <div class="panel bar1">
     <div class="titleBg">
       <h2>
-        <el-form
+        <el-form :inline="true" :model="queryParams" ref="queryForm" label-width="1.7rem">
-          :inline="true"
-          :model="queryParams"
-          ref="queryForm"
-          label-width="1.7rem"
-        >
           <el-form-item label prop="musicManage">
             <el-select
               class="selectNav"
@@ -29,7 +24,7 @@
         </el-form>
       </h2>
     </div>
-  <!-- 音乐管理表格数据 -->
+    <!-- 音乐管理表格数据 -->
     <div class="musicManagement" v-show="musicShow">
       <el-table :data="musicManagementList" style="width: 100%">
         <el-table-column prop="location" label="位置" width="50" height="25" align="center"></el-table-column>
@@ -57,13 +52,52 @@
         </el-table-column>
       </el-table>
     </div>
-    <!-- 用户管理 -->
-     <div class="userManagement" v-show="userShow">
 
+    <!-- 编辑音乐管理对话框 -->
+     <el-dialog title :visible.sync="musicHandle" width="20%" style="top:20vh" center>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item  label="位置" prop="location">
+          <el-input placeholder="请输入位置" v-model="form.location" class="el-input1"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item  label="IP地址" prop="address">
+          <el-input placeholder="请输入IP地址" v-model="form.address" class="el-input1"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+           <el-form-item  label="音符" prop="note">
+          <el-input placeholder="请输入音符" v-model="form.note" class="el-input1"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+         <el-form-item  label="音量" prop="volume">
+          <el-input placeholder="请输入音量" v-model="form.volume" class="el-input1"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="musicHandle = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 用户管理 -->
+    <div class="userManagement" v-show="userShow">
+      <user />
     </div>
     <div class="panel-footer"></div>
 
-    
     <!-- <pagination
         v-show="total>0"
         :total="total"
@@ -75,9 +109,14 @@
 </template>
 
 <script>
+import User from "@/layout/components/User";
 import flexible from "@/layout/flexible.js";
 
 export default {
+  components: {
+    User
+  },
+
   data() {
     return {
       musicManagementList: [
@@ -111,41 +150,43 @@ export default {
       ],
       musicManageArr: [
         {
-          
           value: 1,
           label: "音乐管理"
         },
         {
-          
           value: 2,
           label: "用户管理"
         }
       ],
       // 音乐管理显示隐藏
-      musicShow:true,
+      musicShow: true,
       // 用户管理显示隐藏
-      userShow:false,
+      userShow: false,
+      //编辑对话框
+      musicHandle: false,
+      form:{},
+      rules:{},
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 7,
-        musicManage: undefined,
+        musicManage: undefined
-      
       }
     };
   },
 
+  created() {},
+
   methods: {
     // 下拉菜单页面切换
-    pageShow(e){
+    pageShow(e) {
-      console.log(e,8888888888888)
+      console.log(e, 8888888888888);
-      if(e==2){
+      if (e == 2) {
-         this.musicShow=false;
+        this.musicShow = false;
-         this.userShow=true;
+        this.userShow = true;
-      }
+      } else {
-      else{
+        this.musicShow = true;
-         this.musicShow=true;
+        this.userShow = false;
-         this.userShow=false;
       }
     },
     // 取消按钮
@@ -153,7 +194,9 @@ export default {
       this.open = false;
     },
     //确定按钮
-    submitForm() {},
+    submitForm() {
+      this.musicHandle=false;
+    },
 
     //删除按钮操作
     deleteMusic(index, musicManagementList) {
@@ -161,39 +204,66 @@ export default {
         .confirm("确认要删除吗")
         .then(function() {
           musicManagementList.splice(index, 1);
+         
         })
         .then(() => {
           this.$modal.msgSuccess("删除成功");
         })
         .catch(() => {});
+    },
+    //编辑按钮
+    edit() {
+      this.musicHandle = true;
     }
   }
 };
 </script>
 <style scoped>
-.userManagement{
+.userManagement {
   margin: 0.125rem 0 0.125rem;
-  border:1px solid rgba(25, 186, 139, 0.17);
+  border: 1px solid rgba(25, 186, 139, 0.17);
-  height: 3rem;
 }
- ::v-deep .el-input {
+::v-deep .el-input {
   margin-left: 6px !important;
+  line-height: 0px!important;
+
+}
+::v-deep  .el-form-item__label{
+  color:white!important;
 }
- ::v-deep .el-input__suffix {
+::v-deep .el-input1 {
+  background: cornflowerblue!important;
+}
+::v-deep .el-input__suffix {
   right: 0.8rem !important;
 }
- ::v-deep .el-input--small {
+::v-deep .el-input--small {
   font-size: 0.25rem !important;
   color: white !important;
 }
- ::v-deep .el-input__inner {
+::v-deep .el-input__inner {
   background: transparent !important;
   border: none !important;
   color: white !important;
   text-align: center !important;
   letter-spacing: 4px !important;
 }
+/* ::v-deep .el-input1 .el-input__inner {
+  border:1px solid rgba(25, 186, 139, 0.17) !important;
+  border-radius: 4px!important;
+  
+} */
 ::v-deep input::-webkit-input-placeholder {
   color: white !important ;
 }
+::v-deep .el-input1::-webkit-input-placeholder {
+  color: gray !important ;
+}
+::v-deep .el-dialog {
+  background: #111658 !important;
+  border:1px solid gray;
+}
+::v-deep .el-dialog__body {
+  color: white !important;
+}
 </style>

src/layout/components/User/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="userBox">
+    <el-form
+        :inline="true"
+        :model="queryParams"
+        ref="queryForm"
+        class="demo-form-inline"
+        label-width="68px"
+      >
+        <el-form-item label prop="roleType">
+          <el-select
+            class="input2"
+            v-model="queryParams.roleType"
+            placeholder="角色类型"
+            clearable
+            size="small"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="dict in roleTypeArr"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+          </el-form-item>
+          </el-form>
+  </div>
+</template>
+
+
+<style  scoped>
+.userBox {
+  width: 100%;
+  height: 100%;
+}
+::v-deep .el-input__inner {
+  background: #111658 !important;
+  border: 1px solid rgba(25, 186, 139, 0.17) !important;
+  color: white !important;
+  text-align: center !important;
+  letter-spacing: 4px !important;
+}
+::v-deep .el-input--small {
+  font-size:14px !important;
+  color: white !important;
+}
+</style>
+<script>
+import flexible from "@/layout/flexible.js";
+export default {
+  data() {
+    return {
+      //查询参数
+      queryParams:{
+        roleType:null,
+
+      },
+          roleTypeArr:[
+             {
+          value: 1,
+          label: "管理员"
+        },
+        {
+          value: 2,
+          label: "操作员"
+        },
+          ]
+    };
+  },
+
+  methods: {}
+};
+</script>

src/layout/index.vue

@@ -27,7 +27,8 @@ import {
   CarMsg,
   TrackManagement,
   MusicManage,
-  Device
+  Device,
+ 
 } from "./components";
 import flexible from "@/layout/flexible.js";
 export default {
@@ -37,7 +38,8 @@ export default {
     CarMsg,
     TrackManagement,
     MusicManage,
-    Device
+    Device,
+
   },
   methods: {},
   data() {

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.31.99:8080`,
+        target: `http://192.168.31.27:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''