web_sh_audit/src/views/HomeView.vue

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

    <!-- 镇域专题 -->
    <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页面 -->
    <!-- 左侧菜单列 1 -- 首页 -->
    <div id="leftMenus">
      <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="leftMenusW">
      <MenuCard :menuData="menus.left[3]"> </MenuCard>
      <MenuCard :menuData="menus.left[4]"> </MenuCard>
      <MenuCard :menuData="menus.left[5]"> </MenuCard>
      <MenuCard :menuData="menus.left[6]"> </MenuCard>
      <MenuCard :menuData="menus.left[7]"> </MenuCard>
      <MenuCard :menuData="menus.left[8]"> </MenuCard>
      <MenuCard :menuData="menus.left[9]"> </MenuCard>
      <MenuCard :menuData="menus.left[10]"> </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
              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]">
        <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]">
        <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]">
        <template slot="top">
          <TopCard :dataSize="5" />
        </template>
      </MenuCard>
    </div>
    <!-- 右侧菜单列 -->
    <div class="rightMenus">
      <MenuCard :menuData="menus.right[3]">
        <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]">
        <template slot="top">
          <TopCard :dataSize="5" />
        </template>
      </MenuCard>
    </div>
    <!-- 全流程管理 4 -->
    <div id="stepsBox" v-if="$ifMenu('4', '')">
      <WholeProcessManagement />
    </div>
    <!-- 底部菜单 2 -- 疑点筛查 -->
    <div id="leftMenusB" v-show="$ifMenu('3', '')">
      <BottomMenus />
    </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 publicFun from "@/utils/publicFunction.js";
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";
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,
    TagTableCard,
    TopCard,
    BottomMenus,
    ComprehensiveAnalysis,
    TagProblemCard,
    Legend,
    WholeProcessManagement,
    FrequencyView,
    LawView,
  },
  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: "card",
            title: "土地资源",
            menuIndex: "1",
            position: "left",
            minDomWidth: 420,
          },
          {
            type: "card",
            title: "水资源",
            menuIndex: "1",
            position: "left",
            minDomWidth: 420,
          },
          {
            type: "card",
            title: "林地资源",
            menuIndex: "1",
            position: "left",
            minDomWidth: 420,
          },
          {
            type: "imageMenu",
            index: 0,
            title: "基本农田被违规占用",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/2.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 1,
            title: "基本农田种林",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/3.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 2,
            title: "基本农田抛荒",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/1.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 3,
            title: "一般耕地被违规占用",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/4.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 4,
            title: "基本农田被违规占用",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/2.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 5,
            title: "基本农田种林",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/3.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 6,
            title: "基本农田抛荒",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/1.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
          {
            type: "imageMenu",
            index: 7,
            title: "一般耕地被违规占用",
            titleWidth: 81,
            boxHeight: 236,
            imageUrl: "/static/images/4.png",
            menuIndex: "2",
            subMenuIndex: "1",
            position: "left",
          },
        ],
        main: [
          {
            type: "chart",
            title: "浦东新区自然资源分布TOP10",
            boxWidth: "360",
            boxHeight: "370",
            boxBackground: "rgba(0,39,77,0.6)",
            menuIndex: "1",
            position: "top",
            minDomWidth: 1500,
          },
        ],
        right: [
          {
            type: "card",
            title: "资金投入情况",
            titleWidth: 64,
            menuIndex: "1",
            position: "right",
            minDomWidth: 1000,
          },
          {
            type: "card",
            title: "资源环境项目",
            titleWidth: 64,
            menuIndex: "1",
            position: "right",
            minDomWidth: 1000,
          },
          {
            type: "card",
            title: "历年频发问题TOP5",
            titleWidth: 81,
            menuIndex: "1",
            position: "right",
            minDomWidth: 1000,
          },
          {
            type: "card",
            title: "土地类问题",
            titleWidth: 60,
            menuIndex: "2",
            subMenuIndex: "1",
            position: "right",
            minDomWidth: 1200,
          },
          {
            type: "card",
            title: "土地类问题TOP5",
            titleWidth: 81,
            menuIndex: "2",
            subMenuIndex: "1",
            position: "right",
            minDomWidth: 1200,
          },
        ],
      },
      // 首页饼图相关
      buttonData: ["A", "B", "C"],
      legendTitle: ["A类", "B类", "C类"],
      // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
      legendIcon: [
        {
          background: "#E565FF",
          border: "none",
        },
        {
          background: "#0055FF",
          border: "none",
        },
        {
          background: "#00FFD5",
          border: "none",
        },
      ],
      btnChecked: "A",
      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) {
      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;
          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) {
      console.log(val, "current street");
      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
    },
    // 镇域专题下拉框
    specialTownSelect(val) {
      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
    },
  },
  created() {
    // 目录
    let category = Object.keys(street);
    // 默认A类
    this.soil = [];
    this.water = [];
    this.forestry = [];

    let ADataArr = [];
    let BDataArr = [];
    let CDataArr = [];
    // 街道排序
    for (let i in category) {
      let ADataSum =
        soilData[category[i]].A +
        waterData[category[i]].A +
        forestryData[category[i]].A;
      let BDataSum =
        soilData[category[i]].B +
        waterData[category[i]].B +
        forestryData[category[i]].B;

      let CDataSum =
        soilData[category[i]].C +
        waterData[category[i]].C +
        forestryData[category[i]].C;
      ADataArr.push({ name: category[i], sum: ADataSum });
      BDataArr.push({ name: category[i], sum: BDataSum });
      CDataArr.push({ name: category[i], sum: CDataSum });
    }

    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(soilData[item.name].A);
      this.AData.water.push(waterData[item.name].A);
      this.AData.forestry.push(forestryData[item.name].A);
      this.AData.categoryData.push(item.name);
    });

    BDataArr.forEach((item) => {
      this.BData.soil.push(soilData[item.name].B);
      this.BData.water.push(waterData[item.name].B);
      this.BData.forestry.push(forestryData[item.name].B);
      this.BData.categoryData.push(item.name);
    });

    CDataArr.forEach((item) => {
      this.CData.soil.push(soilData[item.name].C);
      this.CData.water.push(waterData[item.name].C);
      this.CData.forestry.push(forestryData[item.name].C);
      this.CData.categoryData.push(item.name);
    });

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

    // 街道下拉框
    for (let key in street) {
      this.streetOptions.push({
        value: street[key],
        label: street[key],
      });
    }
  },
};
</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);
}

/* 频发问题 */
#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>