home_select

src/components/common/NewSelect.vue

@@ -57,8 +57,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-/* .re-select-container {
+<style lang="less" scoped>
+.re-select-container {
   font-size: 1rem;
   .select-trigger {
     height: 100%;
@@ -75,5 +75,5 @@ export default {
   .el-input--suffix .el-input__inner {
     background: transparent !important;
   }
-} */
+}
 </style>

src/components/layout/MenuCard.vue

@@ -6,24 +6,34 @@
       width: boxWidth ? boxWidth + 'px' : '410px',
       height: boxHeight + 'px',
       border: type !== 'chart' ? '' : '1px solid #2FB8FF',
-      background: boxBackground ? boxBackground : ''
+      background: boxBackground ? boxBackground : '',
     }"
   >
     <!-- 头部 -->
     <div class="menuMainBox_top" v-if="type !== 'chart'">
       <!-- 头部左侧 -->
-      <div class="menuMainBox_top_left" :style="{ width: titleWidth ? titleWidth + '%' : '50%' }">
+      <div
+        class="menuMainBox_top_left"
+        :style="{ width: titleWidth ? titleWidth + '%' : '50%' }"
+      >
         <!-- 左侧箭头图标 -->
         <div class="menuMainBox_top_left_iconS"></div>
         <!-- 标题 -->
         <div class="menuMainBox_top_left_title">{{ title }}</div>
         <!-- 右侧倾斜图标1 -->
-        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
+        <div
+          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"
+        ></div>
         <!-- 右侧倾斜图标2 -->
-        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
+        <div
+          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"
+        ></div>
       </div>
       <!-- 头部右侧 -->
-      <div class="menuMainBox_top_right" :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }">
+      <div
+        class="menuMainBox_top_right"
+        :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }"
+      >
         <!-- 方块1 -->
         <div class="menuMainBox_top_right_d1"></div>
         <!-- 方块2 -->
@@ -37,7 +47,11 @@
       </div>
     </div>
     <!-- 折线 -->
-    <div class="menuMainBox_topBottom" v-if="type !== 'chart'" :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }">
+    <div
+      class="menuMainBox_topBottom"
+      v-if="type !== 'chart'"
+      :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }"
+    >
       <!-- 圆球 -->
       <div></div>
     </div>
@@ -47,7 +61,7 @@
       </div>
     </div>
     <!-- 主题 -->
-    <div class="menuMainBox_main">
+    <div class="menuMainBox_main" v-if="type !== 'chart'">
       <!-- 上部 -->
       <div class="menuMainBox_main_top">
         <slot name="top"></slot>
@@ -57,6 +71,12 @@
         <slot name="bottom"></slot>
       </div>
     </div>
+    <div class="menuMainBox_main" v-if="type === 'chart'">
+      <!-- 上部 -->
+      <div class="menuMainBox_main_all">
+        <slot></slot>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -76,9 +96,16 @@ export default {
    * boxBackground: 背景色，默认为渐变蓝色（非必填）
    * titleWidth: 标题宽度，默认为50（非必填）
    */
-  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground", "titleWidth"],
+  props: [
+    "type",
+    "title",
+    "boxWidth",
+    "boxHeight",
+    "boxBackground",
+    "titleWidth",
+  ],
   methods: {},
-  watch: {}
+  watch: {},
 };
 </script>
 
@@ -97,8 +124,16 @@ export default {
   border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: linear-gradient(to top, @borderColor, transparent) 1;
-  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
-  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+  background-image: --webkit-linear-gradient(
+    to top,
+    @topTitleMinLeft,
+    @topTitleBgLeft
+  );
+  background-image: --moz-linear-gradient(
+    to top,
+    @topTitleMinLeft,
+    @topTitleBgLeft
+  );
   background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   opacity: 0.85;
   //   type !== chart
@@ -119,9 +154,24 @@ export default {
       flex-wrap: nowrap;
       align-content: center;
       height: 100%;
-      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: --webkit-linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
+      background-image: --moz-linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
+      background-image: linear-gradient(
+        to left,
+        @topTitleMinLeft,
+        @borderColor,
+        @topTitleMinLeft
+      );
       border-bottom: 2px solid @borderColor;
       &_iconS {
         margin: 10px;
@@ -141,7 +191,12 @@ export default {
         margin-left: 10px;
         width: 15px;
         height: 30px;
-        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
+        background-image: linear-gradient(
+          to bottom,
+          transparent,
+          transparent,
+          #00a6c0
+        );
         transform: skew(-45deg);
       }
       &_iconE1 {
@@ -159,7 +214,12 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
+      border-image: --webkit-linear-gradient(
+          to right,
+          @borderColor,
+          transparent
+        )
+        1;
       border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
       border-image: linear-gradient(to right, @borderColor, transparent) 1;
       &_d1 {
@@ -232,9 +292,24 @@ export default {
     flex-wrap: nowrap;
     justify-content: center;
     align-content: center;
-    background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-    background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
-    background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+    background-image: --webkit-linear-gradient(
+      to left,
+      @topTitleMinLeft,
+      @borderColor,
+      @topTitleMinLeft
+    );
+    background-image: --moz-linear-gradient(
+      to left,
+      @topTitleMinLeft,
+      @borderColor,
+      @topTitleMinLeft
+    );
+    background-image: linear-gradient(
+      to left,
+      @topTitleMinLeft,
+      @borderColor,
+      @topTitleMinLeft
+    );
     &_title {
       font-size: 18px;
       font-family: PingFang SC;
@@ -243,12 +318,21 @@ export default {
       line-height: 60px;
     }
   }
-// 卡片主题
-  &_main{
+  // 卡片主题
+  &_main {
+    position: relative;
     margin: 10px;
-    &_top{
+    width: calc(100% - 20px);
+    height: calc(100% - 50px);
+    &_top {
+      width: 100%;
+    }
+    &_bottom {
+      width: 100%;
     }
-    &_bottom{
+    &_all {
+      width: 100%;
+      height: 100%;
     }
   }
 }

src/views/HomeView.vue

@@ -4,15 +4,34 @@
     <Header @navSelect="navSelect"></Header>
     <!-- 左侧菜单列 -->
     <div id="leftMenus">
-      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height">
+      <MenuCard
+        :type="menus.left[0].type"
+        :title="menus.left[0].title"
+        :boxHeight="menus.left[0].height"
+      >
         <template slot="top">主题上部插槽</template>
         <template slot="bottom">主题下部插槽</template>
       </MenuCard>
-      <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height"></MenuCard>
-      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
+      <MenuCard
+        :type="menus.left[1].type"
+        :title="menus.left[1].title"
+        :boxHeight="menus.left[1].height"
+      ></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"
@@ -20,14 +39,33 @@
           :boxWidth="menus.main[0].width"
           :boxHeight="menus.main[0].height"
           :boxBackground="menus.main[0].background"
-        ></MenuCard>
+        >
+            <div class="bar-btn">1</div>
+            <div class="bar-content">1</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>
+      <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>
@@ -35,12 +73,15 @@
 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 { street, soilData, waterData, forestryData } from "@/config/common";
 export default {
   name: "HomeView",
   components: {
     MapHolder,
     Header,
-    MenuCard
+    MenuCard,
+    NewSelect,
   },
   data() {
     return {
@@ -50,22 +91,107 @@ export default {
         left: [
           { type: "menu", title: "土地资源" },
           { 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)",
+          },
         ],
-        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 }
-        ]
-      }
+          { 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>
@@ -92,11 +218,35 @@ export default {
   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%;
+      background: red;
+    }
+    .bar-content {
+      width: 100%;
+      height: 90%;
+      background: yellowgreen;
+    }
   }
 }
 #rightMenus {