epmet-work-pc-chengyang/src/views/dataBoard/overview/components/map-top.vue

<template>
  <div :class="['m-per', { 'm-l77': level != 'street' }]">
    <el-autocomplete
      v-model="keyWord"
      :fetch-suggestions="querySearch"
      :placeholder="searchPlaceholder"
      class="input-with-select"
      popper-class="selectPopClass"
      :value-key="'value'"
    >
      <el-select
        v-model="searchSelect"
        slot="prepend"
        placeholder="请选择"
        popper-class="selectPopClass"
        @change="handleSelect"
      >
        <el-option label="需求" value="1"></el-option>
        <el-option label="问题" value="2"></el-option>
        <el-option label="资源" value="3"></el-option>
        <el-option label="不满意事项" value="4"></el-option>
      </el-select>
      <el-button slot="append" type="primary">搜索</el-button>
    </el-autocomplete>
  </div>
</template>
<script>
import { requestGet } from "@/js/dai/request";

export default {
  name: "map-top",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
    level: {
      type: String,
      default: "",
    },
    peopleType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectIndex: "",
      numData: {},
      searchSelect: "1",

      searchPlaceholder:"可按需求人、需求内容关键词搜索",

      keyWord: "",
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(val);
      }
    },
    peopleType(val) {
      if (val) {
        this.selectIndex = val;
      }
    },
    level(val) {
      console.log(val);
      if (val === "grid") {
        this.selectIndex = "unit";
      } else {
        this.selectIndex = "staffAgency";
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getData(this.currentLevelData);
    }
  },
  methods: {
    selectIcon(type) {
      this.selectIndex = type;
      this.$emit("changeType", type);
    },
    async querySearch(queryString) {
      try {
        let params={
          keyword: queryString,
          pageSize:20,
          pageNo:1
        }
        const {data} = await requestGet('/governance/dataBoard/demand/search', params);
        const suggestions = data.map(item => ({ label: item.content, value: item.id }));
        console.log(suggestions);
        return suggestions
      } catch (error) {
        console.error('Error fetching suggestions:', error);
        return [];
      }
    },
    getData(item) {
      this.$http
        .get(
          "/actual/base/streetOverview/mapOrgSum?level=" +
            item.orgLevel +
            "&orgId=" +
            item.orgId
        )
        .then(({ data: { data } }) => {
          this.numData = data;
        });
    },
    handleSelect(val){
    if(val == 1){
      this.searchPlaceholder = '可按需求人、需求内容关键词搜索'
    }else if(val == 2){
      this.searchPlaceholder = '可按联系人、问题描述关键词搜索'

    }else if(val == 3){
      this.searchPlaceholder = '可按单位名称、负责人、负责人联系电话关键词搜索'

    }else if(val == 4){
      this.searchPlaceholder = '可按姓名、联系电话、问题描述关键词搜索'
    }
    }

  },
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
<style lang="scss" scoped>
.m-l77 {
  margin-left: 77px;
}
::v-deep .el-autocomplete {
  width: 100%;
}

::v-deep .el-input {
  .el-input-group__prepend {
    background: #001c44;
    border: 1px solid #007ff1;
    border-right: none;
    position: relative;
    width: 131px;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      height: 15px;
      background-color: #007ff1;
      width: 1px;
      transform: translateY(-7px);
    }
  }
  .el-input__inner {
    background: #001c44;
    border: 1px solid #007ff1;
    border-left: none;
    border-right: none;
  }
  .el-input-group__append {
    background: #0058ac;
    border: 1px solid #007ff1;
  }
}
</style>