web_sh_audit/src/views/HomeView.vue

<template>
  <div id="LayoutContent">
    <MapHolder ref="mapLoaderRef"></MapHolder>
    <Header @navSelect="navSelect"></Header>
    <!-- 左侧菜单列 1 -- 首页 -->
    <div id="leftMenus" v-if="$ifMenu('1', '')">
      <MenuCard :menuData="menus.left[0]">
        <template slot="top">
          <TagTableCard :data="tagCardData2" />
        </template>
        <template slot="bottom">
          <ChartCard :title="'近三年农田面积变化'" />
        </template>
      </MenuCard>
      <MenuCard :menuData="menus.left[1]">
        <template slot="top">
          <div class="menuCardFlex">
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
          </div>
        </template>
        <template slot="bottom">
          <ChartCard :title="'近三年水域面积变化'" />
        </template>
      </MenuCard>
      <MenuCard :menuData="menus.left[2]">
        <template slot="top">
          <div class="menuCardFlex">
            <TagCard :data="tagCardData3"></TagCard>
            <TagCard :data="tagCardData3"></TagCard>
          </div>
        </template>
        <template slot="bottom">
          <ChartCard :title="'近三年林地面积变化'" />
        </template>
      </MenuCard>
    </div>
    <!-- 左侧菜单列 2 -- 疑点筛查 -->
    <div id="leftMenus" v-if="$ifMenu('2', '1')">
      <MenuCard :menuData="menus.left[3]"> </MenuCard>
      <MenuCard :menuData="menus.left[4]"> </MenuCard>
      <MenuCard :menuData="menus.left[5]"> </MenuCard>
    </div>
    <!-- 中部菜单列 -->
    <div id="mainMenus" v-if="$ifMenu('1', '')">
      <div id="mainMenus_topLeft">所属街道</div>
      <NewSelect
        id="mainMenus_topSelect"
        v-model="streetSelectVal"
        :options="streetOptions"
        :value="streetSelectVal"
        @selectEvent="selectEvent"
      />
      <div id="mainMenus_topRight">
        <MenuCard :menuData="menus.main[0]">
          <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 class="legend-line"></div>
      <MenuCard id="mainMenus_bottomLegend" :menuData="{ type: 'chart', title: '图例', boxWidth: '150', boxHeight: '180' }"
        ><div class="legend-container">
          <div class="left-container">
            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
          </div>
          <div class="right-container">
            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
          </div>
        </div>
      </MenuCard>
    </div>
    <!-- 右侧菜单列 -->
    <div id="rightMenus">
      <MenuCard :menuData="menus.right[0]" v-if="$ifMenu('1', '')">
        <template slot="top">
          <div class="menuCardFlex" style="justify-content: center">
            <TagCard :data="tagCardData3"></TagCard>
          </div>
        </template>
        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
      ></MenuCard>
      <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
        <template slot="top">
          <div class="menuCardFlex">
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
            <TagCard :data="tagCardData"></TagCard>
          </div>
        </template>
        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
      ></MenuCard>
      <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
        <template slot="top">
          <TopCard />
        </template>
      </MenuCard>
      <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '')">
        <template slot="top">
          <div class="menuCardFlex" style="justify-content: center">
            <TagCard :data="tagCardData3"></TagCard>
          </div>
        </template>
        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
      ></MenuCard>
      <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '')">
        <template slot="top">
          <TopCard />
        </template>
      </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,
  streetLocation,
  soilData,
  waterData,
  forestryData,
} from "@/config/common";
import TagCard from "@/components/common/TagCard";
import ChartCard from "@/components/common/ChartCard.vue";
import TagTableCard from "@/components/common/TagTableCard";
import TopCard from "@/components/common/TopCard";
export default {
  name: "HomeView",
  components: {
    MapHolder,
    Header,
    MenuCard,
    NewSelect,
    BarChart,
    TagCard,
    ChartCard,
    TagTableCard,
    TopCard,
  },
  data() {
    return {
      tagCardData: {
        type: "tb",
        title: "土地资源",
        value: 100,
        unit: "公顷"
      },
      tagCardData2: {
        type: "tb",
        title: "土地资源面积",
        value: 172,
        unit: "公顷"
      },
      tagCardData3: {
        type: "lr",
        title: "林地面积",
        value: 654,
        unit: "公顷"
      },
      testTitle: "土地资源",
      activeIndex: 1,
      menus: {
        left: [
          { type: "menu", title: "土地资源" },
          { type: "menu", title: "水资源" },
          { type: "menu", title: "林地资源" },
          { type: "imageMenu", title: "基本农田被违规占用", titleWidth: 81 },
          { type: "imageMenu", title: "基本农田种林", titleWidth: 81 },
          { type: "imageMenu", title: "基本农田抛荒", titleWidth: 81 },
          { type: "imageMenu", title: "一般耕地被违规占用", titleWidth: 81 }
        ],
        main: [
          {
            type: "chart",
            title: "浦东新区自然资源分布TOP10",
            boxWidth: "360",
            boxHeight: "370",
            boxBackground: "rgba(0,39,77,0.6)"
          }
        ],
        right: [
          { type: "menu", title: "资金投入情况", titleWidth: 64 },
          { type: "menu", title: "资源环境项目", titleWidth: 64 },
          { type: "menu", title: "历年频发问题TOP5", titleWidth: 81 },
          { type: "menu", title: "土地类问题", titleWidth: 60 },
          { type: "menu", title: "土地类问题TOP5", titleWidth: 81 }
        ]
      },
      buttonData: ["A", "B", "C"],
      legendData: ["#E565FF", "#0055FF", "#00FFD5"],
      btnChecked: "A",
      AData: {
        soil: [],
        water: [],
        forestry: []
      },
      BData: {
        soil: [],
        water: [],
        forestry: []
      },
      CData: {
        soil: [],
        water: [],
        forestry: []
      },
      streetSelectVal: "全部街道",
      streetOptions: []
    };
  },
  methods: {
    navSelect: function (data) {
      console.log(data);
      this.$store.commit("changeNavSelect", 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;
      }
    },
    selectEvent(val) {
      console.log(val, "current street");
      this.$refs.mapLoaderRef.setView(streetLocation[val],11);
    },
  },
  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: 414px;
  padding-right: 10px;
  margin-right: 10px;
  height: calc(100% - 60px);
  z-index: 999;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
#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;
  }
  .legend-line {
    position: absolute;
    left: 20px;
    bottom: 211px;
    width: 104px;
    height: 20px;
    background: url("../assets/home/legend_line.png") no-repeat center;
    z-index: 99999;
  }
  &_bottomLegend {
    position: absolute;
    left: 20px;
    bottom: 30px;
    color: #fff;
    z-index: 99999;
    .legend-container {
      margin: 0 auto;
      width: 70%;
      height: 100%;
      position: relative;
      .left-container {
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .legend-icon {
          width: 25px;
          height: 15px;
          background: #00aaff;
          border-radius: 2px;
        }
      }
      .right-container {
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .legend-title {
          width: 30px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }
      }
    }
  }
  &_topSelect {
    position: absolute;
    left: 100px;
    top: 30px;
    z-index: 3;
  }
  &_topRight {
    position: absolute;
    right: 10px;
    top: 30px;
    z-index: 3;
    overflow: hidden;
    .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);
      .bar {
        width: 100%;
        height: 98%;
      }
    }
  }
}
#rightMenus {
  position: absolute;
  right: 10px;
  top: 60px;
  width: 414px;
  height: calc(100% - 60px);
  z-index: 999999;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.menuCardFlex {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  .borders {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 110px;
    height: 100px;
    background: linear-gradient(to left, #00aaff, #00aaff) left top no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) left top no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right top no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) right top no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) left bottom no-repeat,
      linear-gradient(to bottom, #00aaff, #00aaff) left bottom no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat,
      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  }
}
</style>