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

zmc

2023-12-14 b8b2820d1a0a55a5555434a3ec95f8bbec1db06d

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

 src/api/index.js

@@ -1,9 +1,9 @@
import axios from 'axios'
import { setInterceptors } from './config'

// const url = 'http://localhost:8081/';
const url = 'http://localhost:8081/'
// éƒ¨ç½²
const url = 'http://114.215.109.124:8803/';
// const url = 'http://114.215.109.124:8803/';
// const url = 'http://192.168.0.123:8081/'

//飞羽监管

 src/api/setting/exceptionSetting.js

@@ -1,14 +1,39 @@
import { $http } from '@/api/index.js';
import { $http } from '@/api/index.js'

export default {
    /**
     * æäº¤ æ•°æ®èŽ·å–的配置参数修改
     * @param： é…ç½®è¡¨å¯¹åº”的字段对象
     * @returns：
     */
    submitExceptionSetting(params){
        console.log('异常配置提交的参数为：',params);
        return $http.post('/dust/requestSetting/modify',params)
    }   
  /**
   * æäº¤ æ•°æ®èŽ·å–的配置参数修改
   * @param： é…ç½®è¡¨å¯¹åº”的字段对象
   * @returns：
   */
  submitExceptionSetting(params) {
    return $http.post('/dust/exception/addSetting', params)
  },

}
  /**
   * æŸ¥è¯¢å¼‚常数据配置
   * @param：
   * @returns：
   */
  queryExceptionSetting() {
    return $http.get('/dust/exception/querySetting')
  },

  /**
   * æäº¤ æ•°æ®èŽ·å–的配置参数修改
   * @param： é…ç½®è¡¨å¯¹åº”的字段对象
   * @returns：
   */
  alertExceptionSetting(params) {
    return $http.post('/dust/exception/alertSetting', params)
  },

  /**
   * æŸ¥è¯¢æ•°æ®è¯·æ±‚的默认配置 1.0版本
   * @param：
   * @returns：
   */
  queryDefaultSetting() {
    return $http.get('/dust/exception/byVersion', { params: { version: '1.0' } })
  }
}

 src/api/setting/requestTaskSetting.js

@@ -1,14 +1,47 @@
import { $http } from '@/api/index.js';
import { $http } from '@/api/index.js'

export default {
    /**
     * æäº¤ æ•°æ®èŽ·å–的配置参数修改
     * @param： é…ç½®è¡¨å¯¹åº”的字段对象
     * @returns：
     */
    submitRequestSetting(params){
        console.log('请求配置提交的参数为：',params);
        // return $http.post('/dust/requestSetting/modify',params)
    }   
  /**
   * æäº¤ æ•°æ®èŽ·å–的配置参数修改
   * @param： é…ç½®è¡¨å¯¹åº”的字段对象
   * @returns：
   */
  submitRequestSetting(params) {
    return $http.post('/dust/request/addSetting', params)
  },

}
  /**
   * æŸ¥è¯¢æ•°æ®è¯·æ±‚配置
   * @param：
   * @returns：
   */
  queryRequestSetting() {
    return $http.get('/dust/request/querySetting')
  },


  /**
   * æäº¤ æ•°æ®èŽ·å–的配置参数修改
   * @param： é…ç½®è¡¨å¯¹åº”的字段对象
   * @returns：
   */
  alertRequestSetting(params) {
    return $http.post('/dust/request/alertSetting', params)
  },


  /**
   * æŸ¥è¯¢æ•°æ®è¯·æ±‚的默认配置 1.0版本
   * @param： 
   * @returns：
   */
  queryDefaultSetting(){
    return $http.get('/dust/request/byVersion',{params:{version:'1.0'}})
  }



}




 src/sfc/InputSearch.vue

@@ -13,10 +13,8 @@
  1代表需要默认值 ï¼Œ0代表不需要默认值
 -->


 
<script>
import exceptionApi from '@/api/exceptionApi.js';
import exceptionApi from '@/api/exceptionApi.js'
export default {
  props: {
    // 0代表不需要默认值，1代表需要默认值
@@ -25,30 +23,30 @@
      default: '0'
    },
    // 0代表不需要，1代表根据时段和异常来给出输入建议
    isNeedRealTimeAdvice:{
      type:String,
      default:'0'
    isNeedRealTimeAdvice: {
      type: String,
      default: '0'
    },
    exceptionType:{
      type:Array,
      default:()=>{
    exceptionType: {
      type: Array,
      default: () => {
        return []
      }
    },
    beginTime:{
      type:String,
      default:''
    beginTime: {
      type: String,
      default: ''
    },
    endTime:{
      type:String,
      default:''
    endTime: {
      type: String,
      default: ''
    },
    siteName:{
      type:String,
      default:'-1'
    siteName: {
      type: String,
      default: '-1'
    }
  },
  emits: ['submitValue', 'submitSiteNums','submitMncode'],
  emits: ['submitValue', 'submitSiteNums', 'submitMncode'],
  data() {
    return {
      // ç”¨æˆ·é€‰ä¸­çš„值
@@ -56,41 +54,44 @@
      // ä¿å­˜è¾“入建议的站点名称
      siteNames: [],
      // ä¿å­˜è¾“入建议的站点设备编号
      siteNamesAndMnCode:[]
      siteNamesAndMnCode: []
    }
  },
  watch:{
    beginTime(val,oldVal){
      
      if(this.isNeedRealTimeAdvice =='1' && oldVal != ''){
        exceptionApi.getExceptionName(this.exceptionType,this.beginTime,this.endTime).then( res=>{
          this.siteNames = []
          const sites = res.data.data
          sites.filter((item) => {
          this.siteNames.push(item['name'])
  watch: {
    beginTime(val, oldVal) {
      if (this.isNeedRealTimeAdvice == '1' && oldVal != '') {
        exceptionApi
          .getExceptionName(this.exceptionType, this.beginTime, this.endTime)
          .then((res) => {
            this.siteNames = []
            const sites = res.data.data
            sites.filter((item) => {
              this.siteNames.push(item['name'])
            })
          })
        })
      }
    },
    exceptionType(){
      if(this.isNeedRealTimeAdvice =='1' ){
        exceptionApi.getExceptionName(this.exceptionType,this.beginTime,this.endTime).then( res=>{
          this.siteNames = []
          const sites = res.data.data
          sites.filter((item) => {
          this.siteNames.push(item['name'])
    exceptionType() {
      if (this.isNeedRealTimeAdvice == '1') {
        exceptionApi
          .getExceptionName(this.exceptionType, this.beginTime, this.endTime)
          .then((res) => {
            this.siteNames = []
            const sites = res.data.data
            sites.filter((item) => {
              this.siteNames.push(item['name'])
            })
          })
        })
      }
    },
    siteName(){
      if(this.siteName != '-1' && this.siteName != ''){
    siteName() {
      if (this.siteName != '-1' && this.siteName != '') {
        this.state = this.siteName
        this.$emit('submitValue', this.state)
      }
    },
    state(){
      if(this.state != '' && this.state != null){
    state() {
      if (this.state != '' && this.state != null) {
        // æŸ¥æ‰¾å¯¹åº”的设备编号
        this.onSiteNameSelected(this.state)
      }
@@ -108,59 +109,66 @@
    }
  },
  methods: {
    obscureMatch(a, b) {
      const pattern = new RegExp(a, 'i')
      // 'i' è¡¨ç¤ºä¸åŒºåˆ†å¤§å°å†™
      return pattern.test(b)
    },

    querySearch(queryString, cb) {
      const results = queryString
        ? this.siteNames.filter(this.createFilter(queryString))
        : this.siteNames
      cb(results)
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          // toLowerCase() æ–¹æ³•ç”¨äºŽæŠŠå­—符串转换为小写。
          restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          this.obscureMatch(queryString,restaurant)
        )
      }
    },
    // åˆå§‹åŒ–加载所有的站点名字
    loadAll() {
      if(this.isNeedRealTimeAdvice == '1'){
        exceptionApi.getExceptionName(this.exceptionType,this.beginTime,this.endTime).then( res=>{
          this.siteNames = []
          const sites = res.data.data
          sites.filter((item) => {
          this.siteNames.push(item['name'])
          let temp = {}
          temp.name = item.name
          temp.mnCode = item.mnCode
          this.siteNamesAndMnCode.push(temp)
      if (this.isNeedRealTimeAdvice == '1') {
        exceptionApi
          .getExceptionName(this.exceptionType, this.beginTime, this.endTime)
          .then((res) => {
            this.siteNames = []
            const sites = res.data.data
            sites.filter((item) => {
              this.siteNames.push(item['name'])
              let temp = {}
              temp.name = item.name
              temp.mnCode = item.mnCode
              this.siteNamesAndMnCode.push(temp)
            })
          })
      } else if (this.isNeedRealTimeAdvice == '0') {
        exceptionApi.getSitesNum().then((response) => {
          const sites = response.data.data
          sites.filter((item) => {
            this.siteNames.push(item['name'])
            let temp = {}
            temp.name = item.name
            temp.mnCode = item.mnCode
            this.siteNamesAndMnCode.push(temp)
          })
          this.$emit('submitSiteNums', this.siteNames.length)
        })

    }else if(this.isNeedRealTimeAdvice == '0'){
      exceptionApi.getSitesNum().then((response) => {
        const sites = response.data.data
        sites.filter((item) => {
          this.siteNames.push(item['name'])
          let temp = {}
          temp.name = item.name
          temp.mnCode = item.mnCode
          this.siteNamesAndMnCode.push(temp)
        })
        this.$emit('submitSiteNums', this.siteNames.length)
      })
    }
      }
    },
    // æ ¹æ®é€‰ä¸­çš„站点查询设备编号
    onSiteNameSelected(siteName) { 
      const selectedSite = this.siteNamesAndMnCode.find((site) => site.name == siteName); 
  if (selectedSite) { 
    this.$emit('submitMncode',selectedSite.mnCode)
  }else{
    this.$emit('submitMncode','')
  }
},
    
    onSiteNameSelected(siteName) {
      const selectedSite = this.siteNamesAndMnCode.find((site) => site.name == siteName)
      if (selectedSite) {
        this.$emit('submitMncode', selectedSite.mnCode)
      } else {
        this.$emit('submitMncode', '')
      }
    },

    // ç‚¹å‡»é€‰ä¸­å»ºè®®é¡¹æ—¶è§¦å‘
    handleSelect(item) {
      this.state = item
@@ -171,7 +179,7 @@
      this.state = ''
      this.$emit('submitValue', this.state)
    },

  
  }
}
</script>
@@ -209,5 +217,4 @@
.el-autocomplete {
  width: 200px;
}

</style>

 src/sfc/OnlyTimePick.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<!-- æ—¶é—´é€‰æ‹©å™¨ç»„件 

    å¼€å§‹æ—¶é—´ï¼šæ•°æ®åº“最新一条数据时间、
    ç»“束时间：当前时间
    ä¼šå°†èµ·å§‹æ—¶é—´å’Œæ”¹å˜çš„时间通过事件‘submitTime’传递给父组件
  
  åˆå§‹æ¸²æŸ“时就将时间传递给父组件：
  ** 
  åœ¨çˆ¶ç»„件中设置
  <TimeSelectCrawling @submit-time="giveTime"></TimeSelectCrawling>
   giveTime(val) {
        //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
        this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
        this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      },
  ***
-->

<script>
import time from '@/utils/time.js'
export default {
  props: {
    // çˆ¶ç»„件传入的时间
    selectedTime: {
      type: String,
      default: ''
    },
    // æ˜¯å¦è®¾ç½®åªè¯»å±žæ€§
    readOnly: {
      type: Boolean,
      default: false
    },
    isUTC: {
      type: Boolean,
      default: false
    }
  },
  emits: ['submitTime'],
  data() {
    return {
      time: ''
    }
  },
  watch: {
    selectedTime(newVal) {
      if (newVal != '') {
        this.time = this.selectedTime
      }
    }
  },
  mounted() {
    this.time = this.selectedTime
  },
  methods: {
    change() {
      let t = time.utcTime(this.time)
      console.log('isUTC', this.isUTC)
      console.log('时间', t)
      this.isUTC ? this.$emit('submitTime', t) : this.$emit('submitTime', this.time)
    }
  }
}
</script>

<template>
  <el-time-picker v-model="time" placeholder="选择时间" editable @change="change" />
</template>

<style scoped></style>

 src/sfc/TimeSinglePicker.vue

@@ -1,7 +1,5 @@
<!-- å•ä¸ª æ—¥æœŸæ—¶é—´é€‰æ‹©å™¨ç»„件   å¸¦æ—¥å‘¨æœˆå¿«æ·é€‰é¡¹
  å‰ä¸€å¤©æ˜¯å½“前时间的前一天的00点到23：59：59
  å‰ä¸ƒå¤© å’Œ ä¸Šä¸€ä¸ªæœˆåŒæ ·
  ä¼šå°†åˆå§‹é»˜è®¤æ—¶é—´ï¼ˆä¸€å‘¨å‰ï¼‰å’Œæ”¹å˜çš„时间通过事件‘submitTime’传递给父组件
<!-- å•ä¸ª æ—¥æœŸæ—¶é—´é€‰æ‹©å™¨ç»„件  
  å°†åˆå§‹é»˜è®¤æ—¶é—´ï¼ˆä¸€å‘¨å‰ï¼‰å’Œæ”¹å˜çš„时间通过事件‘submitTime’传递给父组件
  
  åˆå§‹æ¸²æŸ“时就将时间传递给父组件：
  ** 
@@ -11,16 +9,24 @@
-->

<script>
import dayjs from 'dayjs'
import time from '@/utils/time.js'
export default {
  props: {
    // çˆ¶ç»„件传入的时间
    selectedTime: {
      type: String,
      // type: [String,null],
      default: ''
    },
    // æ˜¯å¦è®¾ç½®åªè¯»å±žæ€§
    readOnly: {
      type: Boolean,
      default: false
    },
    isUTC: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
@@ -28,38 +34,37 @@
  emits: ['submitTime'],
  data() {
    return {
      time: '',
      shortcuts: []
      time: ''
    }
  },
  // watch: {
  //   selectedTime(newVal) {
  //     console.log('time', this.selectedTime)
  //     if (newVal != '') {
  //       this.time = this.selectedTime
  //     }
  //   }
  // },
  mounted() {
    console.log('time', this.selectedTime)

    this.time = this.selectedTime
  watch: {
    selectedTime(newVal) {
      if (newVal != '') {
        // this.time = time.utcToStr(this.selectedTime)
        this.time = this.selectedTime
      }
    }
  },

  mounted() {
    this.time = time.utcToStr(this.selectedTime)
  },

  methods: {
    
    change() {
      if (this.time != null) {
        let t = time.utcTime(this.time)
        this.isUTC ? this.$emit('submitTime', t) : this.$emit('submitTime', this.time)
      } else {
        this.$emit('submitTime', this.time)
      }
    }
  }
}
</script>

<template>
  <el-date-picker
    v-model="time"
    type="datetime"
    placeholder="选择时间"
    :shortcuts="shortcuts"
    value-format="YYYY-MM-DD HH:mm:ss"
    @change="$emit('submitTime', time)"
  />
  <el-date-picker v-model="time" type="datetime" placeholder="选择时间" @change="change" />
</template>

<style scoped></style>

 src/stores/user.js

@@ -1,8 +1,9 @@
// åŠ è½½çŠ¶æ€çš„逻辑管理

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useLoginUserStore = defineStore('loginUser',() => {
export const useLoginUserStore = defineStore('loginUser', () => {
  // å½“前登陆的用户名
  const currentLoginUser = ref('-1')
  // ä¿®æ”¹
@@ -10,12 +11,10 @@
    currentLoginUser.value = user
  }


  
  const getUserName = computed(()=>{
    return currentLoginUser.value == '-1' ? localStorage.getItem('currentUserName'): currentLoginUser.value
  const getUserName = computed(() => {
    return currentLoginUser.value == '-1'
      ? localStorage.getItem('currentUserName')
      : currentLoginUser.value
  })
  return {currentLoginUser,setUser,getUserName}
  return { currentLoginUser, setUser, getUserName }
})



 src/utils/common.js

@@ -115,5 +115,16 @@
    return Math.round(v * 100, 2) + '%'
  }

  return { isExceedOneMonth, cmpp, exportToExcel, descFiftyTime, percentFormatter }
   /**
     * æ‰¾å‡ºå­—符串数字的最大值
     * @param： 
     * @returns：
     */
   function findMaxValue(values) {
    const numbers = values.map((value) => parseFloat(value))
    const max = Math.max(...numbers)
    return max.toString()
  }
  
  return { isExceedOneMonth, cmpp, exportToExcel, descFiftyTime, percentFormatter,findMaxValue }
}

 src/utils/test.js

ÎļþÒÑɾ³ý

 src/utils/time.js

@@ -239,5 +239,22 @@
      }
    }
    return r
  },
  /**
   * æ ¹æ®æ—¶é—´å­—符串返回UTC时间
   * @param： 
   * @returns：
   */
  utcTime(timeStr){
    return dayjs(timeStr).format()
  },
  /**
   * å°†utc时间转为时间字符串
   * @param： 
   * @returns：
   */
  utcToStr(dateTime){
    const r = dateTime ? dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss') :false
    return r
  }
}

 src/views/data_management/HistoryData.vue

@@ -1,15 +1,15 @@
<script>
import TimeShortCuts from '@/sfc/TimeShortCuts.vue';
import ScenarioType from '@/sfc/ScenarioType.vue';
import InputSearch from '@/sfc/InputSearch.vue';
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import ScenarioType from '@/sfc/ScenarioType.vue'
import InputSearch from '@/sfc/InputSearch.vue'
import { ElMessage } from 'element-plus'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'

import { useCommonFunction } from '../../utils/common.js';
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import dayjs from 'dayjs';
import dayjs from 'dayjs'

export default {
  components: {
@@ -33,7 +33,7 @@
        endTime: ''
      },
      // æœç´¢æ¡†ä¼ é€’上来的设备编号
      tempMnCode :'',
      tempMnCode: '',
      // è¿”回的数据
      tableData: [],
      // è¡¨æ ¼æ•°æ®
@@ -46,7 +46,7 @@
      // åŠ è½½ä¸­
      loading: false,
      queryButton: false,
      exportButton:false,
      exportButton: false,
      // ç©ºçŠ¶æ€
      isNoData: false,
      // å·²é€‰ä¸­çš„场景类型
@@ -54,36 +54,35 @@
      // è¡¨æ ¼é«˜åº¦
      tableHeight: '500',
      // ç«™ç‚¹æ€»æ•°é‡
      siteNums:0
    };
      siteNums: 0
    }
  },
  setup() {
    const { isExceedOneMonth, exportToExcel } = useCommonFunction()
    return { isExceedOneMonth, exportToExcel }
  },
  mounted() {
    this.backMinuteDataAWeekAgo();
    this.calTableHeight();
    this.backMinuteDataAWeekAgo()
    this.calTableHeight()
  },

  methods: {
    exportDom() {

      let params = {
        'beginTime': this.form.beginTime,
        'endTime': this.form.endTime,
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      }
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.number) {
        params['mnCode'] = this.form.numbe;
        params['mnCode'] = this.form.numbe
      }
      if (this.scenarioType.length != 0) {
        params['scenarioType'] = this.scenarioType;
        params['scenarioType'] = this.scenarioType
      }
      this.exportButton = true
      requetsApi.fetchAlSiteData(params).then(res => {
      requetsApi.fetchAlSiteData(params).then((res) => {
        const data = res.data.data
        if (data.length != 0) {
          const tableColumns = [
@@ -96,15 +95,22 @@
            'noiseValue',
            'lst',
            'quality',
            'groupName',

            'groupName'
          ]
          const excelColumns = [['A1', '站点名称'],
          ['B1', '地址'], ['C1', '供应商'], ['D1', '设备编号'],
          ['E1', '类型'], ['F1', '扬尘浓度(mg/m³)'], ['G1', '噪声(dB)'],
          ['H1', '采集时间'], ['I1', '等级'], ['J1', '所在区县']]
          const excelColumns = [
            ['A1', '站点名称'],
            ['B1', '地址'],
            ['C1', '供应商'],
            ['D1', '设备编号'],
            ['E1', '类型'],
            ['F1', '扬尘浓度(mg/m³)'],
            ['G1', '噪声(dB)'],
            ['H1', '采集时间'],
            ['I1', '等级'],
            ['J1', '所在区县']
          ]
          this.exportToExcel(data, tableColumns, excelColumns, '历史数据表.xlsx')
        }else{
        } else {
          ElMessage('无数据需要导出')
        }
        this.exportButton = false
@@ -112,198 +118,260 @@
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight;
      const h2 = this.$refs.h2.$el.offsetHeight;
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 40px - var(--el-main-padding) * 2`
    },
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageSize = val

      // æ”¹å˜æ¯é¡µæ˜¾ç¤ºæ•°ç›®æ—¶è·³åˆ°å½“前页
      this.handleCurrentChange(1);
      this.handleCurrentChange(1)
    },

    // é¡µå·æ”¹å˜æ—¶è§¦å‘
    handleCurrentChange(val) {
      // å°†å½“前页号给currentPage
      this.currentPage = val;
      this.currentPage = val

      // é¡µé¢å˜åŒ–时调用 æŸ¥è¯¢æ•°æ®å‡½æ•°
      this.handleSubmit();
      this.handleSubmit()
    },
    //序号递增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },

    // æŸ¥è¯¢æ•°æ®
    handleSubmit() {

      this.loading = true;
      this.loading = true
      this.queryButton = true
      let params = {};
      params['page'] = this.currentPage;
      params['pageSize'] = this.pageSize;
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.number) {
        params['mnCode'] = this.form.number;
        params['mnCode'] = this.form.number
      }
      params['beginTime'] = this.form.beginTime;
      params['endTime'] = this.form.endTime;
      params['beginTime'] = this.form.beginTime
      params['endTime'] = this.form.endTime
      if (this.scenarioType.length != 0) {
        params['scenarioType'] = this.scenarioType.join();
        params['scenarioType'] = this.scenarioType.join()
      }
      this.$http.get('/dust/history1', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        this.tableData = response.data.data.rows;
        this.displayData = this.tableData;
        this.loading = false;
        this.tableData = response.data.data.rows
        this.displayData = this.tableData
        this.loading = false
        this.queryButton = false
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据');
          this.loading = false;
          ElMessage('该时段无数据')
          this.loading = false
          this.queryButton = false
          this.isNoData = true;
          return;
          this.isNoData = true
          return
        }
        this.total = response.data.data.total;
        this.total = response.data.data.total
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
        this.isNoData = false;
      });
        this.isNoData = false
      })
    },
    backMinuteDataAWeekAgo() {
      // æ‰“开页面加载最近一周的数据
      this.loading = true;
      this.loading = true
      // ç»™è¾“入框设置默认的选择项

      let params = {};
      params['siteName'] = this.form.name;
      params['beginTime'] = this.form.beginTime;
      params['endTime'] = this.form.endTime;
      let params = {}
      params['siteName'] = this.form.name
      params['beginTime'] = this.form.beginTime
      params['endTime'] = this.form.endTime

      this.$http.get('/dust/history1', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        this.tableData = response.data.data.rows;
        this.displayData = this.tableData;
        this.tableData = response.data.data.rows
        this.displayData = this.tableData

        if (response.data.data.total == 0) {
          ElMessage('该时段无数据');
          this.isNoData = true;
          return;
          ElMessage('该时段无数据')
          this.isNoData = true
          return
        }
        this.total = response.data.data.total;
        this.loading = false;
      });
    }
        this.total = response.data.data.total
        this.loading = false
      })
    } 
  }
};
}
</script>

<template>
  <div class="history-container"> 
  <el-row>
    <el-col ref="h1" class="head-row">
      <el-card>
        <el-form :inline="true">
          <div class="demo-form-inline">
            <el-row>
              <el-col>
                <el-form-item>
                  <AreaAndmonitorType></AreaAndmonitorType>
                </el-form-item>
  <div class="history-container">
    <el-row>
      <el-col ref="h1" class="head-row">
        <el-card>
          <el-form :inline="true">
            <div class="demo-form-inline">
              <el-row>
                <el-col>
                  <el-form-item>
                    <AreaAndmonitorType></AreaAndmonitorType>
                  </el-form-item>

                <el-form-item>
                  <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" @submit-site-nums="(n)=>(siteNums=n)">
                  </InputSearch>
                </el-form-item>
                
                <el-form-item>
                  <template #label>
                    <span class="font-label">设备编号:</span>
                  </template>
                  <el-input v-model="form.number" clearable placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
                  <el-form-item>
                    <InputSearch
                      isNeedDefaultSite="1"
                      @submit-value="(n) => (form.name = n)"
                      @submit-site-nums="(n) => (siteNums = n)"
                    >
                    </InputSearch>
                  </el-form-item>

              <el-col> 
                <el-form-item>
                <TimeShortCuts time-type="week"  @submit-time="giveTime"></TimeShortCuts>
                  <el-form-item>
                    <template #label>
                      <span class="font-label">设备编码:</span>
                    </template>
                    <el-input v-model="form.number" clearable placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>

                <el-col>
                  <el-form-item>
                    <TimeShortCuts time-type="week" @submit-time="giveTime"></TimeShortCuts>
                  </el-form-item>

                  <el-form-item>
                    <ScenarioType @submitScenarioType="(val) => (scenarioType = val)">
                    </ScenarioType>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="button-and-export">
              <el-form-item>
                <el-tag class="ml-2" type="success" size="large">点位总数</el-tag>
                <span class="tag-text">{{ siteNums }}</span>
              </el-form-item>

              <el-form-item>
                  <ScenarioType @submitScenarioType="(val) => (scenarioType = val)">
                  </ScenarioType>
                </el-form-item>
                <ButtonClick
                  style="margin-right: 12px"
                  content="搜索"
                  type="primary"
                  :loading="queryButton"
                  @do-search="handleSubmit"
                ></ButtonClick>
                <ButtonExportExcel
                  content="导出数据"
                  type="success"
                  :loading="exportButton"
                  @do-export="exportDom"
                ></ButtonExportExcel>
              </el-form-item>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col> </el-col>
    </el-row>

              </el-col>

              
            </el-row>
          </div>
          <div class="button-and-export">
            <el-form-item>
              <el-tag class="ml-2" type="success" size="large">站点总数</el-tag>
              <span class="tag-text">{{ siteNums }}</span>
            </el-form-item>
            
            <el-form-item>
              <ButtonClick style="margin-right: 12px;" content="搜索" type="primary" :loading="queryButton" @do-search="handleSubmit"></ButtonClick>
              <ButtonExportExcel  content="导出数据" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel>
            </el-form-item>
          </div>
        </el-form>
           
      </el-card>
    </el-col>
    <el-col>
     
    </el-col>
  </el-row>

  <el-row>
    <el-col v-show="!isNoData">

      <el-table border size="default" :highlight-current-row="true" :data="displayData" :height="tableHeight"
        v-loading="loading">
        <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
        <el-table-column type="index" label="序号" align="center" fixed :index="indexMethod"></el-table-column>
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="typeName" label="类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dustValue" label="TSP(mg/m³)" align="center" sortable
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="noiseValue" label="噪声(dB)" align="center" sortable show-overflow-tooltip></el-table-column>
        <el-table-column prop="lst" label="采集时间" sortable align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="quality" label="等级" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="groupName" label="所在区县" align="center" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <!--size-change æ˜¯pageSize æ”¹å˜æ—¶ä¼šè§¦å‘的事件,handleSizeChange是事件处理函数
    <el-row>
      <el-col v-show="!isNoData">
        <el-table
          border
          size="default"
          :highlight-current-row="true"
          :data="displayData"
          :height="tableHeight"
          v-loading="loading"
        >
          <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
          <el-table-column
            type="index"
            label="序号"
            align="center"
            fixed
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="name" label="点位名称" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="dutyCompany"
            label="运维商"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="typeName"
            label="类型"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="dustValue"
            label="TSP(mg/m³)"
            align="center"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="noiseValue"
            label="噪声(dB)"
            align="center"
            sortable
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="lst"
            label="采集时间"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="quality"
            label="等级"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="groupName" label="所在区县" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <!--size-change æ˜¯pageSize æ”¹å˜æ—¶ä¼šè§¦å‘的事件,handleSizeChange是事件处理函数
     current-change æ˜¯currentPage æ”¹å˜æ—¶ä¼šè§¦å‘的事件    -->

      <el-pagination ref="h2" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
        layout="total,sizes, prev, pager, next, jumper" :current-page="currentPage"></el-pagination>

    </el-col>
    <el-empty v-show="isNoData" :image-size="200" />

  </el-row>
</div>
        <el-pagination
          ref="h2"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total,sizes, prev, pager, next, jumper"
          :current-page="currentPage"
        ></el-pagination>
      </el-col>
      <el-empty v-show="isNoData" :image-size="200" />
    </el-row>
  </div>
</template>

<style  scoped>
<style scoped>
.history-container {
  min-width: 1200px;
}
@@ -340,12 +408,12 @@

.el-table {
  /* color: #303133 */
  color: rgb(59, 60, 63)
  color: rgb(59, 60, 63);
}
.el-pagination {
  margin: 10px 10px;
}
.tag-text{
.tag-text {
  margin-left: 10px;
  font-size: 14px;
}

 src/views/data_management/ParameterConfiguration.vue

@@ -2,6 +2,10 @@
import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue'
import CompEditRequest from '@/views/data_management/components/CompEditRequest.vue'
import CompEditException from '@/views/data_management/components/CompEditException.vue'
import dayjs from 'dayjs'
import exceptionSetting from '@/api/setting/exceptionSetting.js'
import requestTaskSetting from '@/api/setting/requestTaskSetting.js'
import { useLoginUserStore } from '@/stores/user'
export default {
  components: {
    TimeSinglePicker,
@@ -12,53 +16,14 @@
    return {
      activeName: 'first',
      // å¯¹è¯æ¡†æ˜¾ç¤º
      dialog:{
      dialog: {
        formRequestVisible: false,
        formExceptionVisible: false
      },
      request: [
        {
          user: 'admin',
          updateTime: '2023-10-10 09:16:41',
          region: '金山区',
          version: '1.0',
          requestStartTime: '2023-10-12 08:43:00',
          requestEndTime: null,
          requestIntervalSeconds: 43200,
          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
        }
      ],
      exceptionSetting: [{
        user: 'admin',
        updateTime: '2023-10-10 09:16:41',
        region: '金山区',
        version: '1.0',
        missDataMinutes: 45,
        dataLow: 0.02,
        longTimeNoChange: 5,
        mutationNum: 2,
        mutationRate: 1,
        nearExceedLowValue: 0.7,
        nearExceedHighValue: 1,
        nearExceedNum: 4,
        dayExceedBorderlineLowNum: 6,
        dayExceedBorderlineHighNum: 7,
        changeTrendGroup: 12,
        changeTrendInterval: 12,
        changeTrendRate: 1,
        changeTrendTimes: 3,
        exceedingStandard: 1
      }],
      // è¯·æ±‚任务配置数据
      requestData: [],
      // å¼‚常分析配置数据
      exceptionSettingData: [],
      form_1: {
        user: '11',
        requestStartTime: '',
@@ -66,118 +31,50 @@
        staticsDailyTime: '',
        staticsMonthlyTime: ''
      },
      loading:false,
   
      // åŠ è½½ä¸­
      loading: {
        request: '',
        exception: ''
      }
    }
  },
  setup() {
    const userName = useLoginUserStore()
    return {
      userName
    }
  },
  watch: {

  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    fetchData(){
      console.log('获取表格数据');
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 700);
    },
    // å–消
    cancel_1() {
      this.dialogTableVisible = false
    },
    // æäº¤
    submit() {
      this.dialogTableVisible = false
    },
    render() {
      ElMessageBox.alert(
        h('div', ['this is', h('em', { style: { color: 'teal', fontSize: '14px' } }, 'Vnode')])
      )
    },

    /**
     * å–消按钮
     * @param：
     * @returns：
     */
    cancelEvent() {
      this.$message.info('已取消')
    }
  }
}
</script>


<template>
  <el-row>
    <el-col>
      <em>参数配置</em>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="数据获取"  name="first" >
          <div>展示</div>
          <div>修改</div>
          <el-table :data="request" border>
            <el-table-column prop="user" label="用户名"> </el-table-column>
            <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
            <el-table-column prop="region" label="区域"> </el-table-column>
            <el-table-column prop="version" label="版本"> </el-table-column>
            <el-table-column prop="requestStartTime" label="数据获取开始时间"> </el-table-column>
            <el-table-column prop="requestEndTime" label="数据获取结束时间"> </el-table-column>
            <el-table-column prop="requestIntervalSeconds" label="数据获取频率"> </el-table-column>
            <el-table-column prop="requestRangeHour" label="任务分段时长"> </el-table-column>
            <el-table-column prop="requestRangeIntervalSeconds" label="分段执行时的每段的间隔时间"> </el-table-column>
            <el-table-column prop="requestFailWaitSeconds" label="获取数据任务异常时再次尝试间隔"> </el-table-column>
            <el-table-column prop="requestRetryTimes" label="获取数据失败时再次尝试的总次数"> </el-table-column>
            <el-table-column prop="requestCookieValidDuration" label="cookie有效时常长"> </el-table-column>
            <el-table-column prop="staticsDailyTime" label="日统计执行时间"> </el-table-column>
            <el-table-column prop="staticsMonthlyTime" label="月统计执行时间"> </el-table-column>
            <el-table-column prop="loginFailWaitSeconds" label="登录失败等待时长"> </el-table-column>
            <el-table-column prop="loginRetryTimes" label="登录失败尝试次数"> </el-table-column>
            <el-table-column prop="taskRetryWaitSeconds" label="数据获取任务重新开始尝试等待时间"> </el-table-column>
            <el-table-column prop="firstRequestOffsetDays" label=" æ•°æ®èŽ·å–开始时间相对当日往前偏移"> </el-table-column>
          </el-table>
          <el-button type="primary" size="small" @click="dialog.formRequestVisible = !dialog.formRequestVisible">
            ä¿®æ”¹é…ç½®</el-button
          >
          
          <CompEditRequest v-model="dialog.formRequestVisible" :tableData="request[0]">
          </CompEditRequest> 

      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="数据获取" name="first">
          <CompEditRequest :user-name="userName.getUserName"></CompEditRequest>
        </el-tab-pane>


        <el-tab-pane label="异常分析" name="second"  
          ><div>展示</div>
          <el-table :data="exceptionSetting" border>
            <el-table-column prop="user" label="用户名"> </el-table-column>
            <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
            <el-table-column prop="region" label="区域"> </el-table-column>
            <el-table-column prop="version" label="版本"> </el-table-column>

            <el-table-column prop="missDataMinutes" label="数据获取开始时间"> </el-table-column>
            <el-table-column prop="dataLow" label="数据获取结束时间"> </el-table-column>
            <el-table-column prop="longTimeNoChange" label="数据获取频率"> </el-table-column>
            <el-table-column prop="mutationNum" label="任务分段时长"> </el-table-column>
            <el-table-column prop="mutationRate" label="分段执行时的每段的间隔时间"> </el-table-column>
            <el-table-column prop="nearExceedLowValue" label="获取数据任务异常时再次尝试间隔"> </el-table-column>
            <el-table-column prop="nearExceedHighValue" label="获取数据失败时再次尝试的总次数"> </el-table-column>
            <el-table-column prop="nearExceedNum" label="cookie有效时常长"> </el-table-column>
            <el-table-column prop="dayExceedBorderlineLowNum" label="日统计执行时间"> </el-table-column>
            <el-table-column prop="dayExceedBorderlineHighNum" label="月统计执行时间"> </el-table-column>
            <el-table-column prop="changeTrendGroup" label="登录失败等待时长"> </el-table-column>
            <el-table-column prop="changeTrendInterval" label="登录失败尝试次数"> </el-table-column>
            <el-table-column prop="changeTrendRate" label="数据获取任务重新开始尝试等待时间"> </el-table-column>
            <el-table-column prop="changeTrendTimes" label=" æ•°æ®èŽ·å–开始时间相对当日往前偏移"> </el-table-column>
            <el-table-column prop="exceedingStandard" label=" æ•°æ®èŽ·å–开始时间相对当日往前偏移"> </el-table-column>
          </el-table>


          <div>修改</div>

          <CompEditException  v-model="dialog.formExceptionVisible" ></CompEditException>

          <el-button type="primary" size="small" @click="dialog.formExceptionVisible = !dialog.formExceptionVisible">
            ä¿®æ”¹é…ç½®</el-button
          >
        <el-tab-pane label="异常分析" name="second">
          <CompEditException :user-name="userName.getUserName"></CompEditException>
        </el-tab-pane>
      </el-tabs>

      <!-- <el-button @click="render"> æ¸²æŸ“html</el-button> -->
      <!-- <el-button @click="addObj"> å¢žåŠ å¯¹è±¡</el-button> -->
    </el-col>
  </el-row>
</template>
@@ -190,26 +87,10 @@
  font-size: 30px;
  color: #333333;
}
</style>

<!-- <script>
  export default {
    data() {
      return{
        inputValue:null
      }
    },
    mounted() {

    },
    methods: {

     }
.el-button {
  margin-top: 20px;
}
</script>

<template>
  {{inputValue}}
  è¾“å…¥<el-input v-model.number="inputValue" maxlength="10">
     </el-input>
</template> -->
.el-table {
  color: #333333;
}
</style>

 src/views/data_management/components/CompEditException.vue

@@ -1,157 +1,264 @@
<script>
import TimeSinglePicker from '@/sfc/TimeSinglePicker.vue'
import exceptionSetting from '@/api/setting/exceptionSetting.js'
import { useCommonFunction } from '@/utils/common.js'
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  components: {
    TimeSinglePicker
  props: {
    userName: {
      type: String,
      default: ''
    }
  },

  computed: {
    visible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
    formDataAfterCal() {
      return {
        user: this.userName,
        region: this.form.region,
        // æ˜¯ä¿®æ”¹çŠ¶æ€-->该记录的版本号  æ˜¯æ–°å¢žçŠ¶æ€--> é…ç½®è¡¨è¡¨æœ€å¤§çš„版本号
        version: this.modify ? this.form.version : this.maxVersion,

        missDataMinutes: this.form.missDataMinutes,
        dataLow: this.form.dataLow,
        longTimeNoChange: this.form.longTimeNoChange,
        mutationNum: this.form.mutationNum,
        mutationRate: this.form.mutationRate,
        nearExceedLowValue: this.form.nearExceedLowValue,
        nearExceedHighValue: this.form.nearExceedHighValue,
        nearExceedNum: this.form.nearExceedNum,
        dayExceedBorderlineLowNum: this.form.dayExceedBorderlineLowNum,
        dayExceedBorderlineHighNum: this.form.dayExceedBorderlineHighNum,
        changeTrendGroup: this.form.changeTrendGroup,
        changeTrendInterval: this.form.changeTrendInterval,
        changeTrendRate: this.form.changeTrendRate,
        changeTrendTimes: this.form.changeTrendTimes,
        exceedingStandard: this.form.exceedingStandard
      }
    }
  },
  watch: {
    formData: {
      handler() {
        if (Object.keys(this.formData).length != 0)
          this.form = JSON.parse(JSON.stringify(this.formData))
      },
      deep: true
    }
  },
  data() {
    return {
      form: {
        user: 'admin',
        updateTime: '2023-10-10 09:16:41',
        region: '金山区',
        version: '1.0',

        missDataMinutes: 45,
        dataLow: 0.02,
        longTimeNoChange: 5,
        mutationNum: 2,
        mutationRate: 1,
        nearExceedLowValue: 0.7,
        nearExceedHighValue: 1,
        nearExceedNum: 4,
        dayExceedBorderlineLowNum: 6,
        dayExceedBorderlineHighNum: 7,
        changeTrendGroup: 12,
        changeTrendInterval: 12,
        changeTrendRate: 1,
        changeTrendTimes: 3,
        exceedingStandard: 1
      },
      describe: null
      form: {},
      // æœ€é«˜çš„版本号
      maxVersion: null,
      loading: false,
      // ä¿®æ”¹çŠ¶æ€
      modify: false
    }
  },

  mounted() {
    this.operation()
  setup() {
    const { findMaxValue } = useCommonFunction()
    return { findMaxValue }
  },
  mounted() {
    this.queryException()
  },

  methods: {
    // æäº¤
    submit() {
      this.visible = false
    async submitForm() {
      // å‘送修改的请求
      await exceptionSetting.submitExceptionSetting(this.formDataAfterCal)

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

      // æ•°æ®æäº¤åŽåˆ·æ–°è¡¨å•
      this.queryException()
    },
    // å–消
    cancel_1() {
      this.visible = false
    },
    // å¯¹è±¡å¤„理
    operation() {
      // console.log(Object.keys(this.form));
      // console.log(Object.values(this.form));
      console.log(Object.entries(this.form))
      let temp = []
      let arr = Object.entries(this.form)
      for (let item of arr) {
        let obj = {}
        obj.label = item[0]
        obj.value = item[1]
        temp.push(obj)

    /**
     * å›žé€€åˆ°é»˜è®¤é…ç½®
     * @param：
     * @returns：
     */
    async defaultSetting() {
      if (this.form.version == '1.0') {
        this.$message.info('当前已经是默认的版本')
        return
      }
      this.describe = temp
      console.log(temp)
      this.loading = true
      await exceptionSetting.queryDefaultSetting().then((Response) => {
        this.form = {}
        this.form = Response.data.data[0]
      })

      this.modify = true
      // è®¾ç½®ç‰ˆæœ¬1.0 çš„更新时间
      exceptionSetting.alertExceptionSetting(this.formDataAfterCal)
      this.modify = false
      this.loading = false

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

    /**
     * æŸ¥è¯¢è¯·æ±‚设置的数据
     * @param：
     * @returns：
     */
    queryException() {
      this.loading = true
      exceptionSetting.queryExceptionSetting().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)
      })
    },
    /**
     * å–消按钮
     * @param：
     * @returns：
     */
    cancelEvent() {
      this.$message.info('已取消')
    }

  }
}
</script>
<template>
  <el-dialog v-model="visible" title="请求数据" align-center>
    <el-form :model="form" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="form.user" disabled />
      </el-form-item>
      <el-form-item label="开始时间">
        <TimeSinglePicker @submit-time="(n) => (form.requestStartTime = n)"></TimeSinglePicker>
      </el-form-item>
      <el-form-item label="结束时间">
        <TimeSinglePicker @submit-time="(n) => (form.requestEndTime = n)"></TimeSinglePicker>
      </el-form-item>
      <el-form-item label="获取频率">
        <el-input-number v-model="num" :min="1" :max="24" @change="handleChange" />
      </el-form-item>
      <el-form-item label="分段时长">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="分段执行时的每段的间隔时间">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="获取数据任务异常时再次尝试间隔">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="获取数据失败时再次尝试的总次数">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="日统计">
        <TimeSinglePicker @submit-time="(n) => (form.staticsDailyTime = n)" />
      </el-form-item>
      <el-form-item label="月统计">
        <TimeSinglePicker @submit-time="(n) => (form.staticsMonthlyTime = n)" />
      </el-form-item>
      <el-form-item label="登录失败等待时长">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="登录失败尝试次数">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="任务重新开始尝试等待时间">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item label="数据获取开始时间相对当日往前偏移">
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="cancel_1">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
  <div class="my-header">
    <el-text tag="b"> æ­£åœ¨ä½¿ç”¨çš„版本：{{ form.version }}</el-text>
  </div>
  <el-form :model="form" label-width="230px" v-loading="loading">
    <el-form-item label="用户名">
      <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="(数据缺失)缺失的分钟数">
      <el-input v-model.number="form.missDataMinutes">
        <template #append>分钟</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(数据超低)颗粒物浓度值小于X">
      <el-input v-model="form.dataLow">
        <template #append>mg/m³</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(数据长时间无波动)连续X个值相等">
      <el-input v-model.number="form.longTimeNoChange">
        <template #append>个</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(量级突变)连续N个15分钟">
      <el-input v-model.number="form.mutationNum">
        <template #append>分钟</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(量级突变)变化率超过X">
      <el-input v-model="form.mutationRate">
        <template #append>比率</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(临近超标异常)处于[a,b]的左边界">
      <el-input v-model="form.nearExceedLowValue">
        <template #append>mg/m³</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(临近超标)处于[a,b]的右边界">
      <el-input v-model="form.nearExceedHighValue">
        <template #append>mg/m³</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(临近超标)次数超过X个">
      <el-input v-model.number="form.nearExceedNum">
        <template #append>次</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(单日超标次数临界)超标次数达X次">
      <el-input v-model.number="form.dayExceedBorderlineLowNum">
        <template #append>次</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(单日超标次数临界)但未达到Y次">
      <el-input v-model.number="form.dayExceedBorderlineHighNum">
        <template #append>次</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(变化趋势异常)N个一组">
      <el-input v-model.number="form.changeTrendGroup">
        <template #append>个</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(变化趋势异常)间隔M">
      <el-input v-model.number="form.changeTrendInterval">
        <template #append>个</template>
      </el-input>
    </el-form-item>
    <el-form-item label="(变化趋势异常)平均值相差Y">
      <el-input v-model="form.changeTrendRate">
        <template #append>mg/m³</template>
      </el-input>
    </el-form-item>

    <el-form-item label="(变化趋势异常)连续的次数">
      <el-input v-model.number="form.changeTrendTimes">
        <template #append>次</template>
      </el-input>
    </el-form-item>

    <el-form-item label="(超标)超过标准值">
      <el-input v-model="form.exceedingStandard">
        <template #append>mg/m³</template>
      </el-input>
    </el-form-item>
  </el-form>

  <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-button @click="operation">对象处理</el-button> -->

  <el-descriptions title="异常分析配置" :column="4" size="large" border>
    <el-descriptions-item
      v-for="item in describe"
      :key="item.label"
      :label="item.label"
      label-align="left"
      align="center"
      class-name="content-text"
      label-class-name="label-text"
    >
      {{ item.value }}
    </el-descriptions-item>
  </el-descriptions>
  <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>
:deep(.label-text) {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333333 !important;
.my-header {
  margin-bottom: 20px;
}
:deep(.content-text) {
  color: #333333 !important;
span {
  font-size: 16px;
  color: #0a0a0a;
}
.version-text {
  margin-left: 20px;
}
.el-input {
  width: 50%;
}
</style>

 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>