taicangPopulation2/src/views/index.vue

<template>
  <div class="pc-container">
    <NavigationBar></NavigationBar>
    <foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
      <IndexModelLeft />
    </foldpanelLeft>
    <foldpanelRight>
      <IndexModelRight />
    </foldpanelRight>

    <LeafletMap>
      <template #select>
        <div class="select-search">
          <el-select
            v-model="community"
            placeholder="选择社区"
            clearable
            @change="handleChange"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="dict in communityList"
              :key="dict.dept_id"
              :label="dict.dept_name"
              :value="dict.dept_id"
            >
            </el-option>
          </el-select>

          <el-select
            style="margin-left: 10px"
            v-model="xiaoqu"
            placeholder="选择小区"
            clearable
            v-show="xiaoquList.length > 0"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="dict in xiaoquList"
              :key="dict.xiaoqu_id"
              :label="dict.dept_name"
              :value="dict.xiaoqu_id"
            >
            </el-option>
          </el-select>
        </div>
      </template>
    </LeafletMap>
  </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar/index.vue";
import { mapGetters } from "vuex";
import {
  foldpanelLeft,
  IndexModelLeft,
  foldpanelRight,
  IndexModelRight,
} from "@/views/components/index.js";
import LeafletMap from "@/components/LeafletMap";
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
export default {
  name: "Index",
  computed: {
    ...mapGetters(["dept", "xiaoquIntroduce"]),
  },
  components: {
    NavigationBar,
    foldpanelLeft,
    IndexModelLeft,
    foldpanelRight,
    IndexModelRight,
    LeafletMap,
  },
  data() {
    return {
      community: 100,
      communityList: [],
      xiaoqu: "",
      xiaoquList: [],
    };
  },
  mounted() {
    this.getCommunity();
    this.$store.dispatch("GetYjtotal");
    this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
    this.$store.dispatch("getThreeCell");
    this.$store.dispatch("GetcolorList");
  },
  methods: {
    handleChange(e) {
      if (!e) return;
      this.$store.dispatch("GetXiaoquInfo", e);
      this.xiaoqu = "";
      this.xiaoquList = this.communityList.filter(
        (item) => item.dept_id == e
      )[0].children;
      if (e == 100) e = undefined;
      this.$store.dispatch("GetYjtotal", {
        shequId: e,
      });
      this.$store.commit("SET_QUERY_PARAMS", { shequId: e });
      this.$store.dispatch("getThreeCell", {
        shequId: e,
      });
      this.$store.dispatch("GetcolorList", {
        shequId: e,
      });
    },

    getCommunity() {
      let community = new Promise((resolve, reject) => {
        getCommunitylist().then((res) => {
          res.data["社区list集合"].unshift({
            dept_name: "全部社区",
            dept_id: this.dept.deptId,
          });
          resolve(res.data["社区list集合"]);
        });
      });

      let xiaoqu = new Promise((resolve, reject) => {
        getXiaoqulist().then((res) => {
          resolve(res.data["小区list集合"]);
        });
      });

      Promise.all([community, xiaoqu]).then((res) => {
        this.communityList = res[0].map((item) => {
          item.children = [];
          res[1].forEach((it) => {
            if (item.dept_id == it.shequ_id) item.children.push(it);
          });
          return item;
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.pc-container {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background: url("~@/assets/images/ui/index_bg.jpg");
  background-size: 100% 100%;
  overflow: hidden;
}

::v-deep .select-search {
  position: absolute;
  left: 410px;
  top: 110px;

  .el-select {
    width: 160px;
    .el-input {
      background: transparent;
    }
    .el-input__inner {
      height: 45px;
      line-height: 45px;
      color: #fff;
      background: url("~@/assets/images/ui/img_btn_search.png");
      background-size: 100% 100%;
      border: 0px !important;
    }
    .el-input__inner::placeholder,
    .el-select__caret {
      color: #fff;
    }
  }
}
</style>