加功能

src/pages/shells/config-modal.vue

@@ -36,22 +36,35 @@
           <el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>{{$t('Save')}}</p></button></el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane :label="$t('Shutdownrestart')" name="second">
-        <el-row type="flex" justify="center" align="middle" class="tab_wraper">
-          <div class="reset" @click="toReboot"></div>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('Synchronizemap')" name="third">
-        <el-row type="flex" justify="center" align="middle" class="tab_wraper">
-          <button class="button_control" @click="synchronizedMapConfirm"><p>{{ $t('Synchronizemap') }}</p></button>
-        </el-row>
+      <el-tab-pane :label="$t('Systemsettings')" name="second">
+        <div class="tab_wraper">
+          <div class="contorl_title">AGV</div>
+          <el-row type="flex" class="contorl_box">
+            <button class="agv_button" @click="toReboot">
+              <img src="../../images/new/RF5.png" alt="">
+              <p>{{ $t('Shutdownrestart') }}</p>
+            </button>
+            <button class="agv_button" @click="synchronizedMapConfirm">
+              <img src="../../images/new/RF6.png" alt="">
+              <p>{{ $t('Synchronizemap') }}</p>
+            </button>
+          </el-row>
+          <div class="contorl_title">{{$t('Control')}}</div>
+          <el-row type="flex" class="contorl_box">
+            <p class="contorl_title_2">{{$t('Workshopstatus')}}</p>
+            <div class="switch_button" :class="{'switch_button_on': backIoStatus}">
+              <div class="switch_on_off"></div>
+              <input type="checkbox" @click="_backIoStatus">
+          </div>
+          </el-row>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
 </template>
 
 <script>
-import { rebootVehicle, synchronizedMap } from '../../config/getData.js'
+import { rebootVehicle, synchronizedMap, backIoStatus } from '../../config/getData.js'
 import { mapGetters, mapActions } from 'vuex'
 export default {
   data () {
@@ -80,7 +93,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['serverUrl']),
+    ...mapGetters(['serverUrl', 'backIoStatus']),
   },
   watch: {
     serverUrl (newVal) {
@@ -98,6 +111,7 @@ export default {
         this.dataForm.selectedLanguage = 'en-us'
       }
       this.dataForm.serverIp = this.serverUrl
+      this.activeName = 'first'
       this.dialogVisible = true
     },
     exitUser () {
@@ -174,14 +188,32 @@ export default {
         })
         let res = await synchronizedMap()
         if (res) {
-          this.$message('同步成功')
+          this.$message(this.$t('Syncsuccessfully'))
         }
         this.loading.close()
       } catch (e) {
         this.$message.error(e)
         this.loading.close()
       }
-    }
+    },
+    async _backIoStatus () {
+      try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
+        let res = await backIoStatus(this.backIoStatus)
+        if (res) {
+          this.dialogVisible = false
+          this.$message(res.message)
+        }
+        this.loading.close()
+      } catch (e) {
+        this.$message.error(e)
+        this.loading.close()
+      }
+    },
   }
 }
 </script>
@@ -202,6 +234,60 @@ export default {
   width .72rem
   height .71rem
   background center / 100% auto url(../../images/new/reset.png) no-repeat
+.contorl_title
+  width 2rem
+  height .4rem
+  padding-left .4rem
+  font-size .24rem
+  color #fff
+  line-height .4rem
+  margin-bottom .2rem
+  background center / 100% 100% url(../../images/new/state_title_bg.png) no-repeat
+.agv_button
+  min-width .9rem
+  height .9rem
+  padding: 0.05rem;
+  font-size: .16rem;
+  color: #fff;
+  border 1px solid #3D93F0
+  background linear-gradient(0deg, #3483DA, #1E59CD)
+  img
+    width .5rem
+    height .5rem
+  +.agv_button
+    margin-left .2rem
+.contorl_box
+  padding 0 .4rem
+  margin-bottom .2rem
+.contorl_title_2
+  font-size: .2rem;
+  line-height: .4rem;
+  color: #fff;
+  padding-right: 0.1rem;
+.switch_button
+  position relative
+  width .9rem
+  height .4rem
+  border 1px solid #357ED1
+  background linear-gradient(0deg, #286495, #0F294D)
+  box-sizing border-box
+  input[type="checkbox"]
+    position absolute
+    width 100%
+    height 100%
+    opacity: 0;
+    margin: 0;
+.switch_on_off
+  position absolute
+  width .4rem
+  height 100%
+  left 0
+  background #4380AF
+.switch_button_on
+  border-color #3D93F0
+  background linear-gradient(0deg, #3483DA, #1E59CD)
+  .switch_on_off
+    background #A2FAFE
 .enClass
   .el-tabs__item
     font-size .2rem