web_sh_audit/src/views/HomeView.vue

<template>
  <div id="LayoutContent">
    <MapHolder ref="mapLoaderRef"></MapHolder>
    <Header @navSelect="navSelect"></Header>

    <!-- 全流程管理 4 -->
    <div id="stepsBox" v-if="$ifMenu('4', '')">
      <WholeProcessManagement />
    </div>

    <!-- 底部菜单 2 -- 疑点筛查 -->
    <div id="leftMenusB" v-show="$ifMenu('3', '')">
      <BottomMenus />
    </div>

    <!-- 镇域专题 -->
    <div id="TownContainer" v-if="$ifMenu('2', '5')">
      <Legend
        id="TownContainer_bottomLegend"
        :legendData="{
          boxWidth: '150',
          boxHeight: '180',
          menuIndex: '2',
          subMenuIndex: '5',
          legendIcon: legendIcon,
          legendTitle: legendTitle,
        }"
      />
      <div class="select-title">所属街道</div>
      <NewSelect
        class="select-container"
        @selectEvent="specialTownSelect"
        v-model="streetSelectVal"
        :options="streetOptions"
        :value="streetSelectVal"
      />
      <div class="town-problems">
        <div class="town-problems-top">
          <MenuCard
            :menuData="{
              type: 'card',
              title: streetSelectVal + '资源问题',
              titleWidth: 40,
              boxWidth: '780',
            }"
          >
            <template slot="top">
              <div class="town-problems-top-inner">
                <TagProblemCard class="problem-item" v-for="n in 4" :key="n" />
              </div>
            </template>
          </MenuCard>
        </div>
        <div class="town-problems-bottom">
          <MenuCard
            :menuData="{
              type: 'card',
              title: '资金投入TOP10',
              titleWidth: 85,
              boxWidth: '400',
            }"
            ><template slot="top"><TopCard :dataSize="10" /></template
          ></MenuCard>
          <MenuCard
            :menuData="{
              type: 'card',
              title: '历年频发问题TOP10',
              titleWidth: 85,
              boxWidth: '400',
            }"
            ><template slot="top"><TopCard :dataSize="10" /></template
          ></MenuCard>
        </div>
      </div>
    </div>

    <!-- 综合分析 -->
    <ComprehensiveAnalysis
      id="ComprehensiveContainer"
      v-if="$ifMenu('3', '')"
    />

    <!-- 法律法规 -->
    <LawView id="LawContainer" v-if="$ifMenu('5', '1')" />

    <!-- 频发问题 -->
    <FrequencyView id="FrequencyContainer" v-if="$ifMenu('5', '2')" />

    <!-- Home页面（因为客户要求需要动画，所以不能用v-if控制首页元素的显示与隐藏，而是改为组件内部动态v-show控制元素的样式） -->
    <!-- 左侧菜单列 -- 首页 -->
    <div id="leftMenus">
      <MenuCard v-for="item in menus.left" :menuData="item" :key="item.title" />
    </div>
    <!-- 左侧菜单列(较宽，两列) -- 疑点筛查 -->
    <div id="leftMenusW">
      <MenuCard v-for="item in menus.leftW" :menuData="item" :key="item.title">
      </MenuCard>
    </div>
    <!-- 中部菜单列 -->
    <div id="mainMenus">
      <div id="mainMenus_topLeft" v-if="$ifMenu('1', '')">所属街道</div>
      <NewSelect
        id="mainMenus_topSelect"
        v-model="streetSelectVal"
        :options="streetOptions"
        :value="streetSelectVal"
        @selectEvent="homeSelect"
        v-if="$ifMenu('1', '')"
      />
      <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
              ref="barChartRef"
              class="bar"
              :categoryData="categoryData"
              :soilValueData="soil"
              :waterValueData="water"
              :forestryValueData="forestry"
              :sourceType="btnChecked"
            />
          </div>
        </MenuCard>
      </div>
      <Legend
        id="mainMenus_bottomLegend"
        :legendData="{
          boxWidth: '150',
          boxHeight: '180',
          menuIndex: '1',
          legendIcon: legendIcon,
          legendTitle: legendTitle,
        }"
      />
    </div>
    <!-- 首页右侧菜单列 -->
    <div class="rightMenus">
      <MenuCard :menuData="menus.right[0]"></MenuCard>
      <MenuCard :menuData="menus.right[1]"></MenuCard>
      <MenuCard :menuData="menus.right[2]">
        <template slot="top">
          <TopCard :dataSize="5" />
        </template>
      </MenuCard>
    </div>
    <!-- 土地资源右侧菜单列 -->
    <div class="rightMenus">
      <MenuCard :menuData="menus.right[3]"></MenuCard>
      <MenuCard :menuData="menus.right[4]">
        <template slot="top">
          <TopCard :dataSize="5" />
        </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.vue";
import NewSelect from "@/components/common/NewSelect.vue";
import BarChart from "@/components/chart/BarChart.vue";
import {
  street,
  streetLocation,
  soilData,
  waterData,
  forestryData,
  menusMap,
} from "@/config/common";
import publicFun from "@/utils/publicFunction.js";
import TagCard from "@/components/common/TagCard";
import ChartCard from "@/components/common/ChartCard.vue";
import TopCard from "@/components/common/TopCard";
import BottomMenus from "@/components/common/BottomMenus";
// 图例
import Legend from "@/components/map/Legend.vue";
// 综合分析
import ComprehensiveAnalysis from "@/views/ComprehensiveAnalysis.vue";
import TagProblemCard from "@/components/common/TagProblemCard.vue";
// 全流程管理
import WholeProcessManagement from "@/components/common/WholeProcessManagement.vue";
// 智能辅助 -- 频发问题
import FrequencyView from "@/views/FrequencyView.vue";
// 智能辅助 -- 法律法规
import LawView from "@/views/LawView.vue";

export default {
  name: "HomeView",
  components: {
    MapHolder,
    Header,
    MenuCard,
    NewSelect,
    BarChart,
    TagCard,
    ChartCard,
    TopCard,
    BottomMenus,
    ComprehensiveAnalysis,
    TagProblemCard,
    Legend,
    WholeProcessManagement,
    FrequencyView,
    LawView,
  },
  data() {
    return {
      tagCardData3: {
        type: "lr",
        title: "林地面积",
        value: 654,
        unit: "公顷",
      },
      testTitle: "土地资源",
      activeIndex: 1,
      // 菜单配置，后期最好根据用户权限通过后台动态返回。
      menus: {},
      // 首页饼图相关
      buttonData: ["A", "B", "C"],
      legendTitle: [
        {
          name: "A类",
          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
        },
        {
          name: "B类",
          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
        },
        {
          name: "C类",
          info: "自然资源资产较少(耕地林地总和低于 900公项)",
        },
      ],
      // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
      legendIcon: [
        {
          background: "#E565FF",
          border: "none",
        },
        {
          background: "#0055FF",
          border: "none",
        },
        {
          background: "#00FFD5",
          border: "none",
        },
      ],
      btnChecked: "A",
      soil: [],
      water: [],
      forestry: [],
      categoryData: [],
      AData: {
        soil: [],
        water: [],
        forestry: [],
        categoryData: [],
      },
      BData: {
        soil: [],
        water: [],
        forestry: [],
        categoryData: [],
      },
      CData: {
        soil: [],
        water: [],
        forestry: [],
        categoryData: [],
      },
      streetSelectVal: "全部",
      streetOptions: [],
      // 街镇专题
      townCollection: [
        { name: "土地资源问题", num: 67 },
        { name: "水资源问题", num: 37 },
        { name: "林地资源问题", num: 60 },
        { name: "生态资源问题", num: 55 },
      ],
      // 综合分析
      analysis: {
        searchInput: "",
      },
    };
  },
  methods: {
    navSelect: function (data) {
      this.$store.commit("changeNavSelect", data);
      this.$store.commit("changeBackMenu", {});
    },
    clickEvent(type) {
      this.btnChecked = type;
      switch (type) {
        case "A":
          this.soil = this.AData.soil;
          this.water = this.AData.water;
          this.forestry = this.AData.forestry;
          this.categoryData = this.AData.categoryData;

          break;
        case "B":
          this.soil = this.BData.soil;
          this.water = this.BData.water;
          this.forestry = this.BData.forestry;
          this.categoryData = this.BData.categoryData;
          break;
        case "C":
          this.soil = this.CData.soil;
          this.water = this.CData.water;
          this.forestry = this.CData.forestry;
          this.categoryData = this.CData.categoryData;
          break;
      }
    },
    // home页面下拉框
    homeSelect(val) {
      this.$store.commit("changeHomeSpecialTown", val);
      if (val === "全部") {
        this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 10);
      } else {
        let polygon = townPolygonMap.get(val);
        map2DViewer.map.fitBounds(polygon.getBounds());
      }
    },
    // 镇域专题下拉框
    specialTownSelect(val) {
      this.$store.commit("changeHomeSpecialTown", val);
      if (val === "全部") {
        this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 10);
      } else {
        let polygon = townPolygonMap.get(val);
        map2DViewer.map.fitBounds(polygon.getBounds());
      }
    },
    // 获取自然资源分类数据接口(24个镇的数据)
    getSourcesData() {
      // town_type -- A:1; B:2; C:3;
      let params = new FormData();
      params = {
        columnId: 90,
        states: 3,
        pageSize: 30,
        page: 0,
      };
      this.$Post(this.urlsCollection.selectContentList, params)
        .then((res) => {
          if (res.code === 200 && res.content.data.length > 0) {
            // console.log(res.content.data, "getSourcesData接口获取成功");
            this.soil = [];
            this.water = [];
            this.forestry = [];
            let data = res.content.data;
            let ADataArr = [];
            let BDataArr = [];
            let CDataArr = [];
            data.map((v) => {
              if (v.c_town_type === "1") {
                ADataArr.push({
                  name: v.title,
                  soil: v.c_land_area,
                  water: v.c_water_area,
                  forest: v.c_forest_area,
                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
                });
              }
              if (v.c_town_type === "2") {
                BDataArr.push({
                  name: v.title,
                  soil: v.c_land_area,
                  water: v.c_water_area,
                  forest: v.c_forest_area,
                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
                });
              }
              if (v.c_town_type === "3") {
                CDataArr.push({
                  name: v.title,
                  soil: v.c_land_area,
                  water: v.c_water_area,
                  forest: v.c_forest_area,
                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
                });
              }
            });

            ADataArr.sort(publicFun.compare("sum"));
            BDataArr.sort(publicFun.compare("sum"));
            CDataArr.sort(publicFun.compare("sum"));

            // 按A,B,C分出各自资源的排序数组
            ADataArr.forEach((item) => {
              this.AData.soil.push(item.soil);
              this.AData.water.push(item.water);
              this.AData.forestry.push(item.forest);
              this.AData.categoryData.push(item.name);
            });
            BDataArr.forEach((item) => {
              this.BData.soil.push(item.soil);
              this.BData.water.push(item.water);
              this.BData.forestry.push(item.forest);
              this.BData.categoryData.push(item.name);
            });

            CDataArr.forEach((item) => {
              this.CData.soil.push(item.soil);
              this.CData.water.push(item.water);
              this.CData.forestry.push(item.forest);
              this.CData.categoryData.push(item.name);
            });

            this.$nextTick(() => {
              if (this.$refs.barChartRef) {
                this.$refs.barChartRef.initEchart(
                  this.AData.categoryData,
                  this.AData.soil,
                  this.AData.water,
                  this.AData.forestry
                );
              }
            });
          }
        })
        .catch((error) => {
          console.log(error, "getSourcesData");
        });
    },
  },
  created() {
    this.menus = menusMap;
    //   // 街道下拉框
    for (let key in street) {
      this.streetOptions.push({
        value: street[key],
        label: street[key],
      });
    }
    this.getSourcesData();
  },
};
</script>
<style lang="less" scoped>
@commonBorderColor: #00aaff;
#LayoutContent {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* 镇域专题 */
#TownContainer {
  position: relative;
  height: calc(100% - 60px);
  width: 100%;
  top: 60px;
  z-index: 999;
  pointer-events: none;
  &_bottomLegend {
    position: absolute;
    color: #fff;
    left: 60px;
    bottom: 30px;
    pointer-events: auto;
  }
  .select-title {
    position: absolute;
    left: 60px;
    top: 30px;
    width: 80px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    font-size: 18px;
    cursor: auto;
    pointer-events: auto;
  }
  .select-container {
    position: absolute;
    left: 150px;
    top: 33px;
    cursor: pointer;
    pointer-events: auto;
  }
  .town-right-problems {
    position: absolute;
    right: 10px;
    top: 25px;
    pointer-events: auto;
  }
  .town-problems {
    position: absolute;
    right: 10px;
    width: 800px;
    height: 100%;
    color: #fff;
    pointer-events: auto;
    &-top {
      width: 100%;
      height: 220px;

      display: flex;
      align-items: center;
      justify-content: center;
      &-inner {
        width: 100%;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .problem-item {
          width: 170px;
          height: 100px;
        }
      }
    }
    &-bottom {
      // background: plum;
      width: 100%;
      height: calc(95% - 220px);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

/* 综合分析 */
#ComprehensiveContainer {
  position: relative;
  height: calc(100% - 60px);
  width: 100%;
  top: 60px;
  z-index: 999;
  pointer-events: none;
}

/* 法律法规 */
#LawContainer {
  position: relative;
  height: calc(100% - 60px);
  width: 100%;
  top: 60px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.9);
}

/* 法律法规详细细节弹窗 */
// #LawDetailsContainer {
//   position: absolute;
//   height: calc(90% - 60px);
//   width: 50%;
//   top: 80px;
//   z-index: 999;
//   left: 25%;
// }

/* 频发问题 */
#FrequencyContainer {
  position: relative;
  height: calc(100% - 60px);
  width: 100%;
  top: 60px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.9);
}

/* Home目录 -- 左侧菜单列 */
#leftMenus {
  position: absolute;
  left: 5px;
  top: 60px;
  width: 420px;
  padding-right: 10px;
  margin-right: 10px;
  height: calc(100% - 60px);
  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 */
  }
}
#leftMenusW {
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  left: 5px;
  top: 60px;
  width: 870px;
  padding-right: 10px;
  margin-right: 10px;
  height: calc(100% - 65px);
  float: left;
  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 */
  }
}
// 底部菜单定位
#leftMenusB {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#stepsBox {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#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;
  }
  &_bottomLegend {
    position: absolute;
    left: 20px;
    bottom: 30px;
    color: #fff;
  }
  &_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: 420px;
  height: calc(100% - 60px);
  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, @commonBorderColor, @commonBorderColor)
        left top no-repeat,
      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
        top no-repeat,
      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
        no-repeat,
      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
        top no-repeat,
      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
        bottom no-repeat,
      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
        bottom no-repeat,
      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
        bottom no-repeat,
      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
        bottom no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  }
}
</style>