设备管理

.env.development

@@ -1,7 +1,7 @@
 ENV = 'development'
 
 # 本地接口地址
-VUE_APP_BASE_API = '/dev-api'
+#VUE_APP_BASE_API = '/dev-api'
 #VUE_APP_BASE_API  = 'http://192.168.99.103:7000'
 #VUE_APP_WS_API = 'ws://192.168.99.103:7000'
 

package.json

@@ -41,6 +41,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qiniu-js": "^3.4.0",
     "qs": "^6.9.1",
     "sass": "1.32.12",
     "screenfull": "4.2.0",

src/api/device/startUpList.js

@@ -0,0 +1,19 @@
+// 开关机配置的接口
+import request from '@/utils/request'
+
+export function reqStartUpList(parameter) {
+    return request({
+        url: 'api/device/switchlist',
+        method: 'get',
+        params: parameter
+    })
+}
+
+// 修改配置开关机
+export function reqEditStartUp(parameter) {
+    return request({
+        url: 'api/device/switchSetting',
+        method: 'post',
+        data: parameter
+    })
+}

src/views/device/deviceConfig.vue

@@ -71,48 +71,48 @@
               <span>设置时间：</span>
               <div>
                 <el-form-item
-                  prop="ontime"
+                  prop="open_setting"
                   :rules="[
                     { required: true, message: '请选择开机时间', trigger: 'change' },
                   ]"
-                  :class="{'no_margin': form.ontime === 2}"
+                  :class="{'no_margin': form.open_setting === 2}"
                 >
-                  <el-radio-group v-model="form.ontime" @change="clearCheckbox()">
+                  <el-radio-group v-model="form.open_setting" @change="clearCheckbox()">
                     <el-radio :label="1" value="everyday">每天</el-radio>
                     <el-radio :label="2" value="weekly">每周</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item
-                  v-if="form.ontime === 2"
-                  :class="{'weekly_margin': form.ontime === 2}"
-                  prop="onweek"
+                  v-if="form.open_setting === 2"
+                  :class="{'weekly_margin': form.open_setting === 2}"
+                  prop="openweekly"
                   :rules="[
                     { required: true, message: '请选择每周开机时间', trigger: 'change' },
                   ]"
                 >
-                  <el-checkbox-group v-model="onweek">
-                    <el-checkbox label="周一" name="onweek" />
-                    <el-checkbox label="周二" name="onweek" />
-                    <el-checkbox label="周三" name="onweek" />
-                    <el-checkbox label="周四" name="onweek" />
-                    <el-checkbox label="周五" name="onweek" />
-                    <el-checkbox label="周六" name="onweek" />
-                    <el-checkbox label="周日" name="onweek" />
+                  <el-checkbox-group v-model="openweekly">
+                    <el-checkbox label="周一" name="openweekly" />
+                    <el-checkbox label="周二" name="openweekly" />
+                    <el-checkbox label="周三" name="openweekly" />
+                    <el-checkbox label="周四" name="openweekly" />
+                    <el-checkbox label="周五" name="openweekly" />
+                    <el-checkbox label="周六" name="openweekly" />
+                    <el-checkbox label="周日" name="openweekly" />
                   </el-checkbox-group>
                 </el-form-item>
                 <el-form-item
-                  prop="ontimeValue"
+                  prop="open_time"
                   :rules="[
-                    { type: 'date', required: true, message: '请选择具体开机时间', trigger: 'change' },
+                    {type: 'string', required: true, message: '请选择具体开机时间', trigger: 'change' },
                   ]"
                 >
                   <el-time-picker
-                    v-model="form.ontimeValue"
+                    v-model="form.open_time"
                     :picker-options="{
                       selectableRange: '00:00:00 - 23:59:59'
                     }"
                     placeholder="任意时间点"
-                    value-format="HH:MM:SS"
+                    value-format="hh:mm:ss"
                   />
                 </el-form-item>
               </div>
@@ -124,48 +124,48 @@
               <span>设置时间：</span>
               <div>
                 <el-form-item
-                  prop="offtime"
+                  prop="close_setting"
                   :rules="[
                     {required: true, message: '请选择关机时间', trigger: 'change' },
                   ]"
-                  :class="{'no_margin': form.offtime === 2}"
+                  :class="{'no_margin': form.close_setting === 2}"
                 >
-                  <el-radio-group v-model="form.offtime" @change="clearCheckbox()">
+                  <el-radio-group v-model="form.close_setting" @change="clearCheckbox()">
                     <el-radio :label="1" value="everyday">每天</el-radio>
                     <el-radio :label="2" value="weekly">每周</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item
-                  v-if="form.offtime === 2"
-                  :class="{'weekly_margin': form.offtime === 2}"
-                  prop="offweek"
+                  v-if="form.close_setting === 2"
+                  :class="{'weekly_margin': form.close_setting === 2}"
+                  prop="closeweekly"
                   :rules="[
-                    { required: true, message: '请选择每周关机时间', trigger: 'change' },
+                    { type: 'array', required: true, message: '请选择每周关机时间', trigger: 'change' },
                   ]"
                 >
-                  <el-checkbox-group v-model="offweek">
-                    <el-checkbox label="周一" name="offweek" />
-                    <el-checkbox label="周二" name="offweek" />
-                    <el-checkbox label="周三" name="offweek" />
-                    <el-checkbox label="周四" name="offweek" />
-                    <el-checkbox label="周五" name="offweek" />
-                    <el-checkbox label="周六" name="offweek" />
-                    <el-checkbox label="周日" name="offweek" />
+                  <el-checkbox-group v-model="closeweekly">
+                    <el-checkbox label="周一" name="closeweekly" />
+                    <el-checkbox label="周二" name="closeweekly" />
+                    <el-checkbox label="周三" name="closeweekly" />
+                    <el-checkbox label="周四" name="closeweekly" />
+                    <el-checkbox label="周五" name="closeweekly" />
+                    <el-checkbox label="周六" name="closeweekly" />
+                    <el-checkbox label="周日" name="closeweekly" />
                   </el-checkbox-group>
                 </el-form-item>
                 <el-form-item
-                  prop="offtimeValue"
+                  prop="close_time"
                   :rules="[
                     { required: true, message: '请选择具体关机时间', trigger: 'change' },
                   ]"
                 >
                   <el-time-picker
-                    v-model="form.offtimeValue"
+                    v-model="form.close_time"
                     :picker-options="{
                       selectableRange: '00:00:00 - 23:59:59'
                     }"
                     placeholder="任意时间点"
-                    value-format="HH:MM:SS"
+                    value-format="hh:mm:ss"
                   />
                 </el-form-item>
               </div>
@@ -178,7 +178,7 @@
               <el-form-item
                 prop="orientation"
                 :rules="[
-                  { required: true, message: '请选择具体关机时间', trigger: 'change' },
+                  { required: true, message: '请选择具体设备方向', trigger: 'change' },
                 ]"
               >
                 <el-select v-model="form.orientation" size="small" class="filter-item">
@@ -189,14 +189,16 @@
           </div>
           <div class="setting_item">
             <h4>启动画面</h4>
+            <!--   action="https://jsonplaceholder.typicode.com/posts/" -->
             <div class="setting_cont upload_img">
-              <el-form-item prop="file">
-                <el-upload action="#" list-type="picture-card" :auto-upload="false">
-                  <!-- <i slot="default" class="el-icon-plus"></i> -->
-                  <img src="@/assets/images/t-sc.png" alt />
-                  <div slot="file" slot-scope="{file}">
-                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />              
-                  </div>
+              <el-form-item prop="startup_screen">
+               <el-upload
+                class="avatar-uploader"
+                action=""
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+                <img v-if="form.startup_screen" :src="form.startup_screen" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
               <!-- <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt />
@@ -215,7 +217,7 @@
 </template>
 
 <script>
-import {reqStartUpList} from '@/api/device/startUpList.js'
+import {reqStartUpList,reqEditStartUp} from '@/api/device/startUpList.js'
 import {parseTime} from '@/utils/index.js'
 export default {
   name: 'DeviceConfig',
@@ -235,14 +237,18 @@ export default {
       // 开关机列表的数据
       startUpList:[],
       form:{
-         ontime: null,  //开机状态的每天和每周
-         offtime: null,  //关机状态的每天和每周      
+         device_id:'',
+         open_setting: null,  //开机状态的每天和每周
+         close_setting: null,  //关机状态的每天和每周      
          orientation: null,  //设备方向
-         ontimeValue: '',  //具体的开机时间
-         offtimeValue: ''  //具体的关机时间
+         open_time: '',  //具体的开机时间
+         close_time: ''  ,//具体的关机时间
+         startup_screen:''  ,//启动画面的图片   
+         open_weekly:[],
+         close_weekly:[]
       },
-      offweek: [],  //关机下每周的状态
-      onweek: [],  //开机下每周的状态
+      openweekly:[],
+      closeweekly:[],
        addFromVisible: false,
        selectedList: [],
        clearBtnDisabled: true,
@@ -275,21 +281,23 @@ export default {
     editFormData(index, row) {
       console.log(row)
       this.addFromVisible = true
-     this.form={
-       ontime:row.open_setting ,
-       offtime:row.close_setting,
-       ontimeValue:row.open_time,
-       offtimeValue:row.close_time,
-     }
+      this.form={ ...row }
+    //  this.form={
+    //    ontime:row.open_setting ,
+    //    offtime:row.close_setting,
+    //    ontimeValue:row.open_time,
+    //    offtimeValue:row.close_time,
+    //  }
     //  this.offweek=row.close_weekly
     //  this.onweek=row.open_weekly
+    
     },
     clearCheckbox() {
-      if (this.form.ontime == 1) {
-        this.onweek = []
+      if (this.form.open_setting == 1) {
+        this.openweekly = []
       }
-      if (this.form.offtime == 1) {
-        this.offweek = []
+      if (this.form.close_setting == 1) {
+        this.closeweekly = []
       }
     },
     resetForm(formName) {
@@ -297,16 +305,29 @@ export default {
       this.$refs[formName].resetFields()
     },
     submitForm(formName) {
-      console.log(this.form)
       this.$refs[formName].validate(valid => {
         if (valid) {
-          alert('submit!')
+          const params =this.form
+          reqEditStartUp(params).then(res=>{
+             if(res.code==200) {
+            this.$message({
+              type: "success",
+              message: '修改设备成功'
+            });
+             this.addFromVisible = false
+              this.getStartUpList()
+         }
+          })
         } else {
           console.log('error submit!!')
           return false
         }
       })
     },
+    handleAvatarSuccess(res, file){
+      this.form.startup_screen=res.data
+    },
+    
     handleSelectionChange(val) {
       this.selectedList = val
       if (val.length > 0) {
@@ -315,6 +336,7 @@ export default {
         this.clearBtnDisabled = true
       }
       console.log(val)
+    
     }
   }
 }
@@ -375,3 +397,29 @@ export default {
 }
 
 </style>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>