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"
        >
        <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",
      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, cb) {
      try {
        let params = {
          keyword: queryString,
          pageSize: 20,
          pageNo: 1
        }
        console.log(this.searchUrl);
        const { data } = await requestGet(this.searchUrl, params);
        const suggestions = data.map(item => ({ label: item.id, value: item.content }));
        console.log(suggestions);
        cb(suggestions)
      } catch (error) {
        console.error('Error fetching suggestions:', error);
      }
    },
    getData(item) {
      this.$http
        .get(
          "/actual/base/streetOverview/mapOrgSum?level=" +
          item.orgLevel +
          "&orgId=" +
          item.orgId
        )
        .then(({ data: { data } }) => {
          this.numData = data;
        });
    },
  },
  computed: {

    searchPlaceholder() {
      const mapArr = new Map([
        ['1', '可按需求人、需求内容关键词搜索'],
        ['2', '可按联系人、问题描述关键词搜索'],
        ['3', '可按单位名称、负责人、负责人联系电话关键词搜索'],
        ['4', '可按姓名、联系电话、问题描述关键词搜索']
      ]);

      const a = mapArr.get(this.searchSelect);
      return a;
    },

    searchUrl() {

      const mapArrs = new Map([
        ['1', '/governance/dataBoard/demand/search'],
        ['2', '/governance/dataBoard/event/search'],
        ['3', '/actual/base/dataBoard/resource/search'],
        ['4', '/governance/dataBoard/satisfaction/search']
      ]);


      const a = mapArrs.get(this.searchSelect)

      return a
    }

  }
};
</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>