add:新增充电配置页面

1 month ago · 038998dcec
3 changed files with 174 additions and 50 deletions
--- a/acs/nladmin-ui/src/views/system/param/index.vue
+++ b/acs/nladmin-ui/src/views/system/param/index.vue
@ -3,7 +3,18 @@
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
-      <crudOperation :permission="permission" />
+      <crudOperation :permission="permission" >
+        <el-button
+          slot="right"
+          class="filter-item"
+          type="success"
+          icon="el-icon-position"
+          size="mini"
+          @click="divOpen"
+        >
+          配置自动充电
+        </el-button>
+      </crudOperation>
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
@ -51,6 +62,7 @@
            <udOperation
              :data="scope.row"
              :permission="permission"
+              :isVisiableDel="false"
            />
          </template>
        </el-table-column>
@ -58,16 +70,17 @@
      <!--分页组件-->
      <pagination />
    </div>
+    <tube-dialog2 :dialog-show.sync="showView2" @AddChanged="querytable" />
  </div>
 </template>

 <script>
 import crudParam from '@/views/system/param/param'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
+import TubeDialog2 from '@/views/system/param/tubeDialog2.vue'

 const defaultForm = {
  id: null,
@ -79,7 +92,7 @@ const defaultForm = {
 }
 export default {
  name: 'Param',
-  components: { pagination, crudOperation, rrOperation, udOperation },
+  components: { pagination, crudOperation, udOperation, TubeDialog2 },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '系统参数', url: 'api/param', idField: 'id', sort: 'id,desc', crudMethod: { ...crudParam },
@ -99,7 +112,7 @@ export default {
        edit: ['admin', 'param:edit'],
        del: ['admin', 'param:del']
      },
-
+      showView2: false,
      rules: {
        id: [
          { required: true, message: '不能为空', trigger: 'blur' }
@ -120,57 +133,17 @@ export default {
    }
  },
  created() {
-    // this.webSocket()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
-    webSocket() {
-      const that = this
-      if (typeof (WebSocket) === 'undefined') {
-        this.$notify({
-          title: '提示',
-          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
-          type: 'warning',
-          duration: 0
-        })
-      } else {
-        const id = '123'
-        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
-        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
-        const socketUrl = process.env.VUE_APP_WS_API + id
-        this.socket = new WebSocket(socketUrl)
-        // 监听socket打开
-        this.socket.onopen = function() {
-          console.log('浏览器WebSocket已打开')
-          that.socket.send('测试客户端发送消息')
-        }
-
-        // 监听socket消息接收
-
-        this.socket.onmessage = function(msg) {
-          console.log(msg)
-
-          // 转换为json对象
-          /*  const data = JSON.parse(msg.data);*/
-        }
-
-        // 监听socket错误
-        this.socket.onerror = function() {
-          that.$notify({
-            title: '错误',
-            message: '服务器错误，无法接收实时报警信息',
-            type: 'error',
-            duration: 0
-          })
-        }
-        // 监听socket关闭
-        this.socket.onclose = function() {
-          console.log('WebSocket已关闭')
-        }
-      }
+    querytable() {
+      this.crud.toQuery()
+    },
+    divOpen() {
+      this.showView2 = true
    }
  }
 }
--- a/acs/nladmin-ui/src/views/system/param/param.js
+++ b/acs/nladmin-ui/src/views/system/param/param.js
@ -31,4 +31,19 @@ export function getValueByCode(code) {
  })
 }

-export default { add, edit, del, getValueByCode }
+export function queryParam() {
+  return request({
+    url: '/api/param/queryParam',
+    method: 'get'
+  })
+}
+
+export function setParam(data) {
+  return request({
+    url: 'api/param/setParam',
+    method: 'post',
+    data
+  })
+}
+
+export default { add, edit, del, getValueByCode, queryParam, setParam }
--- a/acs/nladmin-ui/src/views/system/param/tubeDialog2.vue
+++ b/acs/nladmin-ui/src/views/system/param/tubeDialog2.vue
@ -0,0 +1,136 @@
+<template>
+  <el-dialog
+    append-to-body
+    title="自动充电配置"
+    :visible.sync="dialogVisible"
+    destroy-on-close
+    width="800px"
+    @close="close"
+    @open="open"
+  >
+    <el-form ref="form" :model="form" :rules="rules" size="mini" :inline-message="true" label-width="150px">
+      <el-form-item label="白班充电阈值(%):" prop="electric">
+        <el-input-number v-model="form.electric" size="medium" :min="1" :max="100" :step="1" step-strictly></el-input-number>
+      </el-form-item>
+      <el-form-item label="晚班充电阈值(%):" prop="electric2">
+        <el-input-number v-model="form.electric2" size="medium" :min="1" :max="100" step-strictly></el-input-number>
+      </el-form-item>
+      <el-form-item label="白班开始时间:" prop="electric_begin">
+        <el-time-select
+          v-model="form.electric_begin"
+          size="medium"
+          :picker-options="{
+           start: '06:00',
+          step: '00:15',
+          end: '12:00'
+           }"
+          placeholder="白班开始时间">
+        </el-time-select>
+      </el-form-item>
+      <el-form-item label="白班结束时间:" prop="electric_end">
+        <el-time-select
+          v-model="form.electric_end"
+          size="medium"
+          :picker-options="{
+           start: '18:00',
+          step: '00:15',
+          end: '23:45'
+           }"
+          placeholder="白班结束时间">
+        </el-time-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="close">取消</el-button>
+      <el-button type="primary" @click="save">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import crudParam from '@/views/system/param/param'
+import CRUD, { crud } from '@crud/crud'
+
+export default {
+  name: 'TubeDialog2',
+  components: { },
+  mixins: [crud()],
+  props: {
+    dialogShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      rules: {
+        electric: [
+          { required: true, message: '请输入白班充电阈值(%)', trigger: 'blur' }
+        ],
+        electric2: [
+          { required: true, message: '请输入晚班充电阈值(%)', trigger: 'blur' }
+        ],
+        electric_begin: [
+          { required: true, message: '请输入白班开始时间', trigger: 'blur' }
+        ],
+        electric_end: [
+          { required: true, message: '请输入白班结束时间', trigger: 'blur' }
+        ]
+      },
+      form: {
+        electric: 0,
+        electric2: 0,
+        electric_begin: '06:00',
+        electric_end: '18:00'
+      }
+    }
+  },
+  watch: {
+    dialogShow: {
+      handler(newValue) {
+        this.dialogVisible = newValue
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.queryTableDtl()
+    },
+    close() {
+      this.$emit('update:dialogShow', false)
+      this.form.electric = 0
+      this.form.electric2 = 0
+      this.form.electric_begin = '06:00'
+      this.form.electric_end = '18:00'
+      this.$emit('AddChanged')
+    },
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.save_my()
+        } else {
+          return false
+        }
+      })
+    },
+    save_my() {
+      crudParam.setParam(this.form).then(res => {
+        this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        this.close()
+      })
+    },
+    queryTableDtl() {
+      crudParam.queryParam().then(res => {
+        this.form.electric = res.electric
+        this.form.electric2 = res.electric2
+        this.form.electric_begin = res.electric_begin
+        this.form.electric_end = res.electric_end
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>