修改LineChart.vue位置

zmc

2023-12-01 d404f7f0ffb8b7b8b930a2b583afe2037cffc3f8

 src/sfc/InputSearch.vue

@@ -1,7 +1,10 @@
<!-- 
  远程搜索 站点名称 输入框组件
  根据输入站点的内容提供对应的输入建议

  1.向父组件传入站点名字 和 设备编码
  2.可以选择建议或者任意输入
  3.父组件可以设置输入框有无默认的站点名称
  4.父组件可以设置是否需要根据选中的异常类型来给出站点建议
  ** 
  在父组件中设置
  <InputSearch :isNeedDefaultSite="1" @submit-value="(n)=>form.name=n"> </InputSearch>
@@ -9,35 +12,100 @@
  父组件通过注入 :isNeedDefaultSite="1"或  :isNeedDefaultSite="0"来代表该输入框有无默认的站点名称
  1代表需要默认值 ，0代表不需要默认值
 -->


 
<script>
import exceptionApi from '@/api/exceptionApi.js';
export default {
  props:{
  // 0代表不需要默认值，1代表需要默认值
    isNeedDefaultSite:{
  props: {
    // 0代表不需要默认值，1代表需要默认值
    isNeedDefaultSite: {
      type: String,
      default: '0'
    },
    // 0代表不需要，1代表根据时段和异常来给出输入建议
    isNeedRealTimeAdvice:{
      type:String,
      default:'0'
    },
    exceptionType:{
      type:Array,
      default:()=>{
        return []
      }
    },
    beginTime:{
      type:String,
      default:''
    },
    endTime:{
      type:String,
      default:''
    },
    siteName:{
      type:String,
      default:'-1'
    }
  },
  emits:['submitValue','submitSiteNums'],
  emits: ['submitValue', 'submitSiteNums','submitMncode'],
  data() {
    return {
      // 用户选中的值
      state: '',
      // 站点名称
      siteNames:[],
      // 保存输入建议的站点名称
      siteNames: [],
      // 保存输入建议的站点设备编号
      siteNamesAndMnCode:[]
    }
  },

  mounted() {
      // 加载所有的站点名称
    this.loadAll()
    if(this.isNeedDefaultSite == 1){
      this.state = '金山区金山新城JSC1-0401单元1-11-01地块项目09'
      this.$emit('submitValue',this.state)
    }else if(this.isNeedDefaultSite == 0){
      this.state = ''
      this.$emit('submitValue',this.state)
  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'])
          })
        })
      }
    },
    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)
      }
    }
   
  },
  mounted() {
    // 加载所有的站点名称
    this.loadAll()
    if (this.isNeedDefaultSite == 1) {
      this.state = '金山区金山新城JSC1-0401单元1-11-01地块项目09'
      this.$emit('submitValue', this.state)
    } else if (this.isNeedDefaultSite == 0) {
      this.state = ''
      this.$emit('submitValue', this.state)
    }
  },
  methods: {
    querySearch(queryString, cb) {
@@ -56,45 +124,76 @@
    },
    // 初始化加载所有的站点名字
    loadAll() {
      this.$http.get('/dust/sitename').then(response=>{
          const sites = response.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)
          })
          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','')
  }
},
    
    // 点击选中建议项时触发
    handleSelect(item) {
      this.state = item
      this.$emit('submitValue',this.state)
      this.$emit('submitValue', this.state)
    },
    // 在点击由 clearable 属性生成的清空按钮时触发
    clearSiteName(){
      this.state=''
      this.$emit('submitValue',this.state)
    }
    clearSiteName() {
      this.state = ''
      this.$emit('submitValue', this.state)
    },

  }
}
</script>

<template>
  <div class="container">
  <span class="text">点位名称：</span>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    popper-class="my-autocomplete"
    placeholder="请输入"
    @select="handleSelect"
    clearable
    @clear="clearSiteName"
  >
    <template #default="{ item }">
      <div class="value">{{ item }}</div>
    </template>
  </el-autocomplete>
</div>
    <span class="text">点位名称：</span>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearch"
      popper-class="my-autocomplete"
      placeholder="请输入"
      @select="handleSelect"
      @change="handleSelect"
      clearable
      @clear="clearSiteName"
    >
      <template #default="{ item }">
        <div class="value">{{ item }}</div>
      </template>
    </el-autocomplete>
  </div>
</template>

<style>
@@ -104,9 +203,11 @@

.text {
  font-weight: bold;
  margin-top: 5px;
  font-size: 14px;
  color: #333333;
}
.el-autocomplete {
  margin-top: 5px;
  width: 200px;
}

</style>