1.飞行巡检和审核辅助页面中的对话框写成组件 2.增加了数据请求和异常分析配置参数的可视化页面 3.修改了站点输入框，使能够模糊匹配

zmc

2023-12-14 b8b2820d1a0a55a5555434a3ec95f8bbec1db06d

 src/views/data_management/components/CompEditRequest.vue

@@ -1,41 +1,32 @@
<script>
import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue'
import OnlyTimePick from '@/sfc/OnlyTimePick.vue'
import requestTaskSetting from '@/api/setting/requestTaskSetting.js'
import { useCommonFunction } from '@/utils/common.js'
export default {
  components: {
    TimeSinglePicker
    TimeSinglePicker,
    OnlyTimePick
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Object,
      default: {}
    userName: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],

  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
    formDataAfterCal() {
      return {
        user: this.form.user,
        updateTime: this.form.updateTime,
        user: this.userName,
        region: this.form.region,
        version: this.form.version,
        // 是修改状态-->该记录的版本号  是新增状态--> 配置表表最大的版本号
        version: this.modify ? this.form.version : this.maxVersion,

        requestStartTime: this.form.requestStartTime,
        requestEndTime: this.form.requestEndTime,

        requestIntervalSeconds: this.form.requestIntervalSeconds * 3600,
        requestIntervalSeconds: this.requestIntervalSeconds,
        requestRangeHour: this.form.requestRangeHour,
        requestRangeIntervalSeconds: this.form.requestRangeIntervalSeconds,
        requestFailWaitSeconds: this.form.requestFailWaitSeconds,
@@ -51,121 +42,131 @@
    }
  },

  watch: {
    'form.requestIntervalSeconds': function (val, oldVal) {
      if (this.form.requestIntervalSeconds != '' && this.form.requestIntervalSeconds != null) {
        this.requestIntervalSeconds = this.form.requestIntervalSeconds / 3600
      }
    }
  },
  setup() {
    const { findMaxValue } = useCommonFunction()
    return { findMaxValue }
  },
  data() {
    return {
      form: {
        user: 'admin',
        updateTime: '2023-10-10 09:16:41',
        region: '金山区',
        version: '1.0',
        requestStartTime: '2023-10-12 08:43:00',
        requestEndTime: null,
        requestIntervalSeconds: 12,
        requestRangeHour: 8,
        requestRangeIntervalSeconds: 5,
        requestFailWaitSeconds: 120,
        requestRetryTimes: 4,
        requestCookieValidDuration: 48,
        staticsDailyTime: '2023-10-11 09:00:00',
        staticsMonthlyTime: '2023-10-01 10:00:00',
        loginFailWaitSeconds: 5,
        loginRetryTimes: 5,
        taskRetryWaitSeconds: 120,
        firstRequestOffsetDays: 30
      },
      rules: {
        requestIntervalSeconds: [{ validator: this.checkRequestIntervalSeconds, trigger: 'blur' }],
        requestRangeHour: [
          { type: 'number', pattern: '/^\d+$/', message: '请输入数字', trigger: 'blur' }
          // {pattern:'/^[0-9]+$/'}
        ]
        // requestRangeIntervalSeconds: [{ validator: this.checkRequestRangeIntervalSeconds, trigger: 'blur' }],
        // requestFailWaitSeconds: [{ validator: this.checkRequestFailWaitSeconds, trigger: 'blur' }],
        // requestRetryTimes: [{ validator: this.checkRequestRetryTimes, trigger: 'blur' }],
        // loginFailWaitSeconds: [{ validator: this.checkLoginFailWaitSeconds, trigger: 'blur' }],
        // loginRetryTimes: [{ validator: this.checkLoginRetryTimes, trigger: 'blur' }],
        // taskRetryWaitSeconds: [{ validator: this.checkTaskRetryWaitSeconds, trigger: 'blur' }],
        // firstRequestOffsetDays: [{ validator: this.checkFirstRequestOffsetDays, trigger: 'blur' }],
      }
      form: {},
      requestIntervalSeconds: null,
      maxVersion: null,
      loading: false,
      // 修改状态
      modify: false,
      // // 表单数据是否被修改
      // isFormModify:false,
    }
  },

  mounted() {
    // const { ...temp } = this.tableData
    // this.form = temp
    this.queryRequest()
  },
  methods: {
    // 提交
    /*   submitForm() {
      // 发送修改的请求
      requestTaskSetting.submitRequestSetting(this.form)
    /**
     * 提交
     * @param：
     * @returns：
     */
    async submitForm() {
        await requestTaskSetting.submitRequestSetting(this.formDataAfterCal)

      this.$message.success('提交成功')
      
      
      this.value = false
        this.$message.success('提交成功')

      
        // 数据提交后刷新表单
        this.queryRequest()

    }, */
        // 置 表单修改结束标记
        this.isFormModify = false

    async submitForm(formEl) {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
    },

    // 回退到默认配置
    async defaultSetting() {
      if (this.form.version == '1.0') {
        this.$message.info('当前已经是默认的版本')
        return
      }
      this.loading = true
      await requestTaskSetting.queryDefaultSetting().then((Response) => {
        this.form = Response.data.data[0]
      })
      this.modify = true
      // 设置请求配置表版本1.0 的更新时间
      requestTaskSetting.alertRequestSetting(this.formDataAfterCal)
      this.modify = false
      this.loading = false

      this.$message.success('回退成功')
    },

    /**
     * 查询请求设置的数据
     * @param：
     * @returns：
     */
    queryRequest() {
      this.loading = true
      requestTaskSetting.queryRequestSetting().then((Response) => {
        this.loading = false
        this.form = Response.data.data[0]

        // 找到最大的版本
        const versions = Response.data.data.map((item) => item.version)
        this.maxVersion = this.findMaxValue(versions)
      })
    },

    // 取消
    cancel_1() {
      this.value = false
    },

    checkRequestIntervalSeconds(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入有效值'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字'))
        } else {
          if (value < 2 || value > 24) {
            callback(new Error('范围在2~24'))
          } else {
            callback()
          }
        }
      }, 300)
    /**
     * 取消按钮
     * @param：
     * @returns：
     */
    cancelEvent() {
      this.$message.info('已取消')
    }
  }
}
</script>

<template>
  <el-dialog v-model="value" title="数据获取配置参数修改" close-delay="200" align-center>
    <el-form :model="form" ref="ruleFormRef" label-width="210px" status-icon :rules="rules">

    <div class="my-header">
      <el-text tag="b"> 正在使用的版本：{{ form.version }}</el-text>
    </div>
    <el-form :model="form" label-width="210px" status-icon v-loading="loading" >
      <el-form-item label="用户名">
        <el-input v-model="form.user" disabled />
        <el-input :value="userName" disabled />
      </el-form-item>

      <el-form-item label="区县">
        <el-input :value="form.region" disabled />
      </el-form-item>

      <el-form-item label="开始时间">
        <TimeSinglePicker
          :selectedTime="form.requestStartTime"
          :selected-time="form.requestStartTime"
          :isUTC="true"
          @submit-time="(n) => (form.requestStartTime = n)"
        ></TimeSinglePicker>
      </el-form-item>

      <el-form-item label="结束时间">
        <TimeSinglePicker
          @submit-time="(n) => (form.requestEndTime = n)"
          :selected-time="form.requestEndTime"
          :isUTC="true"
          @submit-time="(n) => (form.requestEndTime = n)"
        ></TimeSinglePicker>
      </el-form-item>

      <!-- ---------------------------------------------------------- -->
      <el-form-item label="获取频率" prop="requestIntervalSeconds">
        <el-input v-model.number="form.requestIntervalSeconds">
        <el-input v-model.number="requestIntervalSeconds">
          <template #append>小时/次</template>
        </el-input>
      </el-form-item>
@@ -190,15 +191,24 @@
          <template #append>次数</template>
        </el-input>
      </el-form-item>

      <el-form-item label="cookie有效时长" prop="requestCookieValidDuration">
        <el-input v-model.number="form.requestCookieValidDuration" :min="1" :max="10">
          <template #append>小时</template>
        </el-input>
      </el-form-item>

      <el-form-item label="日统计">
        <TimeSinglePicker
        <OnlyTimePick
          @submit-time="(n) => (form.staticsDailyTime = n)"
          :isUTC="true"
          :selected-time="form.staticsDailyTime"
        />
      </el-form-item>
      <el-form-item label="月统计">
        <TimeSinglePicker
        <OnlyTimePick
          @submit-time="(n) => (form.staticsMonthlyTime = n)"
          :isUTC="true"
          :selected-time="form.staticsMonthlyTime"
        />
      </el-form-item>
@@ -224,25 +234,47 @@
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="cancel_1">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
  <el-popconfirm
    confirm-button-text="确定"
    cancel-button-text="取消"
    icon-color="#626AEF"
    title="确认回退吗？"
    @confirm="defaultSetting"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button  :disabled="form.version=='1.0'">回退到默认设置</el-button>
    </template>
  </el-dialog>
  </el-popconfirm>

  <el-popconfirm
    confirm-button-text="确定"
    cancel-button-text="取消"
    icon-color="#626AEF"
    title="确认修改吗？"
    @confirm="submitForm"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button type="primary">修改</el-button>
    </template>
  </el-popconfirm>
</template>

<style scoped>
/* .el-form {
    display: flex;
    flex-direction: column;
  }
   */
/* .el-form-item {
    display: flex;
    margin-top: 5px;
  } */
/* .el-input {
    width: 700px;
  }
   */
.my-header {
  margin-bottom: 20px;
}
span {
  font-size: 16px;
  color: #0a0a0a;
}
.version-text {
  margin-left: 20px;
}
.el-input {
  width: 50%;
}
</style>