web_sh_audit/src/views/HomeView.vue

<template>
  <div id="LayoutContent">
    <MapHolder></MapHolder>
    <Header @navSelect="navSelect"></Header>
    <!-- 左侧菜单列 -->
    <div id="leftMenus">
      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
        <template slot="top">
            <TagCard :data="tagCardData2"></TagCard>
            <TagCard :data="tagCardData2"></TagCard>
        </template>
        <template slot="bottom">主题下部插槽</template>
      </MenuCard>
      <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height">
        <template slot="top">
          <div class="displayFlex">
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
          </div>
        </template>
      </MenuCard>
      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
    </div>
    <!-- 中部菜单列 -->
    <div id="mainMenus">
      <div id="mainMenus_topLeft">所属街道</div>
      <NewSelect
        id="mainMenus_topSelect"
        v-model="streetSelectVal"
        :options="streetOptions"
        :value="streetSelectVal"
      />
      <div id="mainMenus_topRight">
        <MenuCard
          :type="menus.main[0].type"
          :title="menus.main[0].title"
          :boxWidth="menus.main[0].width"
          :boxHeight="menus.main[0].height"
          :boxBackground="menus.main[0].background"
        >
          <div class="bar-btn">
            <div
              class="btn-style"
              v-for="item in buttonData"
              :key="item"
              @click="clickEvent(item)"
              :class="{ 'button-selected': item === btnChecked }"
            >
              {{ item }}
            </div>
          </div>
          <div class="bar-content">
            <BarChart
              class="bar"
              :categoryData="categoryData"
              :soilValueData="soil"
              :waterValueData="water"
              :forestryValueData="forestry"
              :sourceType="btnChecked"
            />
          </div>
        </MenuCard>
      </div>
    </div>
    <!-- 右侧菜单列 -->
    <div id="rightMenus">
      <MenuCard
        :type="menus.right[0].type"
        :titleWidth="menus.right[0].titleWidth"
        :title="menus.right[0].title"
        :boxHeight="menus.right[0].height"
      ></MenuCard>
      <MenuCard
        :type="menus.right[1].type"
        :titleWidth="menus.right[1].titleWidth"
        :title="menus.right[1].title"
        :boxHeight="menus.right[1].height"
      ></MenuCard>
      <MenuCard
        :type="menus.right[2].type"
        :titleWidth="menus.right[2].titleWidth"
        :title="menus.right[2].title"
        :boxHeight="menus.right[2].height"
      ></MenuCard>
    </div>
  </div>
</template>
<script>
import MapHolder from "@/components/map/MapHolder.vue";
import Header from "@/components/layout/Header.vue";
import MenuCard from "@/components/layout/MenuCard";
import NewSelect from "@/components/common/NewSelect.vue";
import BarChart from "@/components/chart/BarChart.vue";
import { street, soilData, waterData, forestryData } from "@/config/common";
import TagCard from "@/components/common/TagCard";
export default {
  name: "HomeView",
  components: {
    MapHolder,
    Header,
    MenuCard,
    NewSelect,
    BarChart,
    TagCard
  },
  data() {
    return {
      tagCardData: {
        type:"tb",
        title: "土地资源",
        value: 100,
        unit: "公顷"
      },
      tagCardData2: {
        type:"lr",
        title: "土地资源",
        value: 100,
        unit: "公顷"
      },
      testTitle: "土地资源",
      activeIndex: 1,
      menus: {
        left: [
          { type: "menu", title: "土地资源" },
          { type: "menu", title: "水资源" },
          { type: "menu", title: "林地资源" },
        ],
        main: [
          {
            type: "chart",
            title: "浦东新区自然资源分布TOP10",
            width: "360",
            height: "370",
            background: "rgba(0,39,77,0.6)",
          },
        ],
        right: [
          { type: "menu", title: "资金投入情况", titleWidth: 62 },
          { type: "menu", title: "资源环境项目", titleWidth: 62 },
          { type: "menu", title: "历年频发问题TOP5", titleWidth: 82 },
        ],
      },
      buttonData: ["A", "B", "C"],
      btnChecked: "A",
      AData: {
        soil: [],
        water: [],
        forestry: [],
      },
      BData: {
        soil: [],
        water: [],
        forestry: [],
      },
      CData: {
        soil: [],
        water: [],
        forestry: [],
      },
      streetSelectVal: "全部街道",
      streetOptions: [],
    };
  },
  methods: {
    navSelect: function (data) {
      console.log(data);
    },
    clickEvent(type) {
      this.btnChecked = type;
      switch (type) {
        case "A":
          this.soil = this.AData.soil;
          this.water = this.AData.water;
          this.forestry = this.AData.forestry;
          break;
        case "B":
          this.soil = this.BData.soil;
          this.water = this.BData.water;
          this.forestry = this.BData.forestry;
          break;
        case "C":
          this.soil = this.CData.soil;
          this.water = this.CData.water;
          this.forestry = this.CData.forestry;
          break;
      }
    },
  },
  created() {
    // 目录
    this.categoryData = Object.keys(street);
    // 默认A类
    this.soil = [];
    this.water = [];
    this.forestry = [];

    for (let i in soilData) {
      this.AData.soil.push(soilData[i].A);
      this.BData.soil.push(soilData[i].B);
      this.CData.soil.push(soilData[i].C);
    }

    for (let i in waterData) {
      this.AData.water.push(waterData[i].A);
      this.BData.water.push(waterData[i].B);
      this.CData.water.push(waterData[i].C);
    }

    for (let i in forestryData) {
      this.AData.forestry.push(forestryData[i].A);
      this.BData.forestry.push(forestryData[i].B);
      this.CData.forestry.push(forestryData[i].C);
    }

    this.soil = this.AData.soil;
    this.water = this.AData.water;
    this.forestry = this.AData.forestry;

    // 街道下拉框
    for (let key in street) {
      this.streetOptions.push({
        value: street[key],
        label: street[key],
      });
    }
  },
};
</script>
<style lang="less" scoped>
#LayoutContent {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* 左侧菜单列 */
#leftMenus {
  position: absolute;
  left: 10px;
  top: 60px;
  width: 410px;
  height: calc(100% - 60px);
  z-index: 999999;
  box-sizing: border-box;
}
#mainMenus {
  position: absolute;
  left: 430px;
  top: 60px;
  width: calc(100% - 850px);
  height: calc(100% - 60px);
  box-sizing: border-box;
  &_topLeft {
    position: absolute;
    left: 20px;
    top: 30px;
    font-size: 18px;
    z-index: 99999;
    color: #fff;
  }
  &_topSelect {
    position: absolute;
    left: 100px;
    top: 30px;
    z-index: 99999;
  }
  &_topRight {
    position: absolute;
    right: 10px;
    top: 30px;
    z-index: 999999;
    .bar-btn {
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn-style {
        width: 65px;
        height: 35px;
        background: url("../assets/home/btn_unselected.png") no-repeat center;
        margin-bottom: 2px;
        cursor: pointer;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .button-selected {
        background: url("../assets/home/btn_selected.png") no-repeat center;
      }
    }
    .bar-content {
      width: 100%;
      height: 90%;
      background: rgba(100,100,100,0.3);
      .bar {
        width: 95%;
        height: 98%;
      }
    }
  }
}
#rightMenus {
  position: absolute;
  right: 10px;
  top: 60px;
  width: 410px;
  height: calc(100% - 60px);
  z-index: 999999;
  box-sizing: border-box;
}
.displayFlex {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
}
</style>