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

zmc

2023-12-14 b8b2820d1a0a55a5555434a3ec95f8bbec1db06d

 src/sfc/InputSearch.vue

@@ -1,6 +1,10 @@
<!-- 
  远程搜索 站点名称 输入框组件
  根据输入站点的内容提供对应的输入建议
  1.向父组件传入站点名字 和 设备编码
  2.可以选择建议或者任意输入
  3.父组件可以设置输入框有无默认的站点名称
  4.父组件可以设置是否需要根据选中的异常类型来给出站点建议
  ** 
  在父组件中设置
  <InputSearch :isNeedDefaultSite="1" @submit-value="(n)=>form.name=n"> </InputSearch>
@@ -9,10 +13,8 @@
  1代表需要默认值 ，0代表不需要默认值
 -->


 
<script>
import exceptionApi from '@/api/exceptionApi.js';
import exceptionApi from '@/api/exceptionApi.js'
export default {
  props: {
    // 0代表不需要默认值，1代表需要默认值
@@ -21,66 +23,77 @@
      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'],
  emits: ['submitValue', 'submitSiteNums', 'submitMncode'],
  data() {
    return {
      // 用户选中的值
      state: '',
      // 保存输入建议的站点名称
      siteNames: []
      siteNames: [],
      // 保存输入建议的站点设备编号
      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) {
        // 查找对应的设备编号
        this.onSiteNameSelected(this.state)
      }
    }
  },
@@ -96,42 +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'])
      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'){
      this.$http.get('/dust/sitename').then((response) => {
        const sites = response.data.data
        sites.filter((item) => {
          this.siteNames.push(item['name'])
        })
        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', '')
      }
    },

    // 点击选中建议项时触发
    handleSelect(item) {
      this.state = item
@@ -141,7 +178,8 @@
    clearSiteName() {
      this.state = ''
      this.$emit('submitValue', this.state)
    }
    },
  
  }
}
</script>
@@ -155,6 +193,7 @@
      popper-class="my-autocomplete"
      placeholder="请输入"
      @select="handleSelect"
      @change="handleSelect"
      clearable
      @clear="clearSiteName"
    >
@@ -178,5 +217,4 @@
.el-autocomplete {
  width: 200px;
}

</style>