添加数据上报应用

zhangzengfei

2022-07-18 fedb07902d62aa40892a9c47ad7f3fd5ead30b37

添加数据上报应用

 public/apps.json

@@ -162,7 +162,7 @@
      "isUpgrade": false,
      "progressMsg": ""
    },
    

    {
      "id": "f45474ee-70cf-4ed2-8a06-c17429fbb70a",
      "name": "统计查询",
@@ -645,8 +645,31 @@
      "installed": true,
      "isUpgrade": false,
      "progressMsg": ""
    },
    {
      "id": "fa5674ee-70cf-4e22-2dr6-c17426fb737",
      "name": "数据交换",
      "package": "dataReport",
      "type": "2",
      "url": "/view/dataReport/",
      "title": "数据交换",
      "width": 810,
      "height": 780,
      "iconBlob": "",
      "icon": "../../images/app-mid/visual.png",
      "version": "1.0.0",
      "create_time": "2020-10-09 14:00:08",
      "create_by": "",
      "update_time": "",
      "update_by": "",
      "isDelete": 0,
      "isDefault": false,
      "remoteVersion": "",
      "installed": true,
      "isUpgrade": false,
      "progressMsg": ""
    }
  ],
  "msg": "请求处理成功",
  "success": true
}
}

 src/pages/dataReport/index/App.vue

New file
@@ -0,0 +1,369 @@
<template>
  <div class="s-system-manage">
    <div class="s-basic-setting">
      <el-tabs
        id="e-basic-setting"
        v-model="activeName"
        v-loading="loading"
        :element-loading-text="loadingText"
        type="border-card"
        @tab-click="hanleTabClick"
      >
        <el-tab-pane label="信息上报配置" name="device">
          <div class="divider">
            设备基础信息
          </div>
          <div style="width: 600px">
            <!-- 设备基础信息设置 -->
            <el-form :model="device" :rules="rules" label-width="80px" ref="device">
              <el-form-item label="设备ID" prop="devId">
                <el-input v-model="device.devId" placeholder="请输入36位UUID" size="small"></el-input>
              </el-form-item>

              <el-form-item label="设备编码" prop="code">
                <el-input v-model="device.code" placeholder="请输入设备编码" size="small"></el-input>
              </el-form-item>

              <el-form-item label="所属企业" prop="company">
                <el-input v-model="device.company" placeholder="请输入企业名称" size="small"></el-input>
              </el-form-item>
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="device.name" placeholder="请输入设备名称" size="small"></el-input>
              </el-form-item>
              <el-form-item label="设备描述">
                <el-input type="textarea" v-model="device.desc" size="small"></el-input>
              </el-form-item>

              <el-form-item style="text-align: right">
                <el-button type="primary" @click="submitDeviceInfo" size="small">保存</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="divider">
            更新频率配置
          </div>
          <div style="width: 600px">
            <!-- 更新频率配置 -->
            <el-form :model="device" ref="inteval">
              <el-form-item label="设备信息更新间隔">
                <el-input
                  v-model.number="deviceInterval"
                  size="small"
                  style="width: 60px; margin-left: -300px;"
                ></el-input>
                <el-select
                  v-model="deviceUnit"
                  placeholder="请选择"
                  size="small"
                  style="width: 80px"
                  @change="resetDevInterval"
                >
                  <el-option v-for="item in intervalOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="设备状态更新间隔" prop="code">
                <el-input
                  v-model.number="stateInterval"
                  size="small"
                  style="width: 60px; margin-left: -300px;"
                ></el-input>
                <el-select
                  v-model="stateUnit"
                  placeholder="请选择"
                  size="small"
                  style="width: 80px"
                  @change="resetStatInterval"
                >
                  <el-option v-for="item in intervalOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="primary" @click="submitIntervalConfig" size="small">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- <el-tab-pane label="上报日志查询" name="logs" > </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getDevInfo, setDevInfo, getInterval, setInterval } from "./api"

import { isPort, isIPv4 } from "@/scripts/validate"
export default {
  name: "dataReport",
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },

  data() {
    return {
      activeName: "device",
      loading: false,
      loadingText: "",
      device: {},
      deviceInterval: 0,
      stateInterval: 0,
      deviceUnit: 1,
      stateUnit: 1,
      rules: {
        devId: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "change"
          },
          { trigger: "change" }
        ],
        code: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "change"
          },
          { trigger: "change" }
        ],
        company: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "change"
          },
          { trigger: "change" }
        ],
        name: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "change"
          },
          { trigger: "change" }
        ]
      },
      intervalOptions: [
        {
          value: 1,
          label: "分钟"
        },
        {
          value: 60,
          label: "小时"
        },
        {
          value: 1440,
          label: "天"
        }
      ]
    }
  },
  watch: {
    stateInterval(val, o) {
      if (this.stateUnit == 1 && val > 60) {
        this.stateInterval = 60
      }

      if (this.stateUnit == 60 && val > 24) {
        this.stateInterval = 24
      }
    },
    deviceInterval(val, o) {
      if (this.deviceUnit == 1 && val > 60) {
        this.deviceInterval = 60
      }

      if (this.deviceUnit == 60 && val > 24) {
        this.deviceInterval = 24
      }
    }
  },
  mounted() {
    this.initConf()
  },
  methods: {
    hanleTabClick(tab, event) {
      if (this.activeName == "logs") {
      }
    },

    initConf() {
      getDevInfo().then((rsp) => {
        if (rsp && rsp.success) {
          if (rsp.data.id == "") {
            rsp.data.id = "default"
          }
          this.device = rsp.data
        }
      })

      getInterval().then((rsp) => {
        if (rsp && rsp.success) {
          let rspDevInteral = rsp.data.devInfo
          let rspStatInteral = rsp.data.DevState

          if (rspDevInteral > 1440) {
            this.deviceInterval = rspDevInteral / 1440
            this.deviceUnit = 1440
          } else if (rspDevInteral > 60) {
            this.deviceInterval = rspDevInteral / 60
            this.deviceUnit = 60
          } else {
            this.deviceInterval = rspDevInteral
            this.deviceUnit = 1
          }

          if (rspStatInteral > 1440) {
            this.stateInterval = rspStatInteral / 1440
            this.stateUnit = 1440
          } else if (rspStatInteral > 60) {
            this.stateInterval = rspStatInteral / 60
            this.stateUnit = 60
          } else {
            this.stateInterval = rspStatInteral
            this.stateUnit = 1
          }
        }
      })
    },
    submitDeviceInfo() {
      this.$refs["device"].validate((valid) => {
        if (valid) {
          setDevInfo(this.device).then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "设置保存成功"
              })
              this.initConf()
            }
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    submitIntervalConfig() {
      let infoIntervalMin = this.deviceInterval * this.deviceUnit
      let statIntervalMin = this.stateInterval * this.stateUnit

      setInterval({ id: "default", devInfo: infoIntervalMin, DevState: statIntervalMin }).then((rsp) => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "设置保存成功"
          })
          this.initConf()
        }
      })
    },

    resetStatInterval() {
      this.stateInterval = 1
    },
    resetDevInterval() {
      this.deviceInterval = 1
    }
  }
}
</script>
<style lang="scss">
.s-system-manage {
  width: 800px;
  // min-width: 800px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f8f9fb;
  .s-system-manage-breadcrumb {
    height: 5%;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    box-shadow: #e4e7ed 0px 0px 9px inset;
    box-shadow: #e4e7ed 0px 0px 9px inset;
    border-radius: 5px;
  }

  .el-tabs--border-card {
    border: 0px solid #dcdfe6;
    -webkit-box-shadow: none;
    box-shadow: none;
    .el-tabs__header {
      border: 0px solid #dcdfe6;
      .el-tabs__item {
        padding: 5px 50px;
        height: 50px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #222222;
        text-align: center;
        border: 0px solid transparent;
      }
      .el-tabs__item:nth-child(2) {
        padding-left: 50px !important;
      }
      .el-tabs__item:last-child {
        padding-right: 50px !important;
      }
      .el-tabs__item.is-active {
        color: #3d68e1;

        // border-right-color: #fff;
        // border-left-color: #fff;
      }
      .el-tabs__item:not(.is-disabled):hover {
        color: #3d68e1;
      }
    }
  }
  .el-tabs__header {
    margin-bottom: 0;
  }
  .el-tabs__content {
    height: calc(100% - 64px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 20px 40px !important;
    background: #fff;
    .el-tab-pane {
      width: 100%;
      .s-title {
        text-align: left;
        padding: 15px 0px;
        font-size: 16px;
      }
    }
  }

  .s-table {
    border: 1px solid #e8e8e9;
    margin-top: 40px;
  }

  .el-button--text {
    color: #3d68e1;
    text-decoration: underline;
  }

  .divider {
    height: 30px;
    background-color: #eceaf5;
    color: black;
    text-align: left;
    font-weight: 600;
    line-height: 30px;
    padding: 0 10px;
  }
}
</style>

 src/pages/dataReport/index/api.ts

New file
@@ -0,0 +1,32 @@
import request from "@/scripts/httpRequest"

export const getDevInfo = () => {
  return request({
    url: "/data/api-v/report/getDevInfo",
    method: "get"
  })
}

export const setDevInfo = (query: any) => {
  return request({
    url: "/data/api-v/report/setDevInfo",
    method: "post",
    data: query
  })
}

export const getInterval = (query: any) => {
  return request({
    url: "/data/api-v/report/getInterval",
    method: "get",
    params: query
  })
}

export const setInterval = (query: any) => {
  return request({
    url: "/data/api-v/report/setInterval",
    method: "post",
    data: query
  })
}

 src/pages/dataReport/index/main.ts

New file
@@ -0,0 +1,13 @@
import Vue from 'vue';
import App from './App.vue';


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})