tab

src/views/censusDataAnalysis/ForestFire/index.vue

@@ -57,6 +57,9 @@
       />
       <div class="map-title">{{ mapTitle }}</div>
       <div class="map-time">{{ mapTime }}</div>
+      <div class="right-tabs">
+        <div v-for="(item, index) in rightTabs" :key="index" class="tab" @click="handleClick(item.value)">{{ item.name }}</div>
+      </div>
     </div>
     <div class="right-box">
       <RightSection v-show="activeIndex === '1'" id="mapId" :time="mapTime" />
@@ -82,8 +85,8 @@ const analysisServices = ref([
   { name: '风险趋势分析', value: '2', icon: 'icon2' }
 ]);
 let showRiskTrendAnalysis = ref(false);
-const handleClick = (index) => {
-    activeIndex.value = index;
+const handleClick = (value) => {
+  activeIndex.value = value;
 };
 // 点击分析服务
 const handleClick1 = (index) => {
@@ -102,6 +105,10 @@ let mapTitle = ref('森林火灾风险等级分布图');
 let mapTime = ref('');
 let distributionData = ref([]);
 let points = ref([]);
+let rightTabs = ref([
+  { name: '风险实时分析', value: '1', icon: '' },
+  { name: '历史分析', value: '2', icon: '' }
+]);
 // 点击图层分析
 const handleClick2 = (item, index) => {
   if (activeIndex2.value === index) return;
@@ -121,23 +128,23 @@ const getDistributionData = () => {
       name: '较高',
       color: '#ffaf00',
       points: [
-        [
-          [110.718235, 21.96198],
-          [110.796045, 22.020253],
-          [110.915004, 21.964755],
-          [110.727213, 21.818969],
-          [110.597389, 22.030205],
-          [110.677, 22.072317],
-          [110.718235, 21.96198],
-          [110.718235, 21.96198]
-        ],
-        [
-          [110.891302, 22.335445],
-          [111.02116, 22.266791],
-          [110.893363, 22.224818],
-          [110.823281, 22.310657],
-          [110.891302, 22.335445]
-        ]
+        // [
+        //   [110.718235, 21.96198],
+        //   [110.796045, 22.020253],
+        //   [110.915004, 21.964755],
+        //   [110.727213, 21.818969],
+        //   [110.597389, 22.030205],
+        //   [110.677, 22.072317],
+        //   [110.718235, 21.96198],
+        //   [110.718235, 21.96198]
+        // ],
+        // [
+        //   [110.891302, 22.335445],
+        //   [111.02116, 22.266791],
+        //   [110.893363, 22.224818],
+        //   [110.823281, 22.310657],
+        //   [110.891302, 22.335445]
+        // ]
       ]
     },
     {
@@ -149,12 +156,12 @@ const getDistributionData = () => {
       name: '低',
       color: '#40c75f',
       points: [
-        [
-          [110.491302, 22.035445],
-          [110.52116, 22.166791],
-          [110.593363, 22.024818],
-          [110.491302, 22.035445]
-        ]
+        // [
+        //   [110.491302, 22.035445],
+        //   [110.52116, 22.166791],
+        //   [110.593363, 22.024818],
+        //   [110.491302, 22.035445]
+        // ]
       ]
     }
   ];
@@ -217,6 +224,28 @@ onMounted(() => {
       font-size: 18px;
       color: #ffffff;
     }
+    .right-tabs {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      .tab {
+        box-sizing: border-box;
+        width: 46px;
+        height: 144px;
+        background: url('@/assets/images/censusDataAnalysis/tab2.png') no-repeat;
+        background-size: 100% 100%;
+        color: #fefefe;
+        font-size: 14px;
+        padding: 15px 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        cursor: pointer;
+      }
+    }
   }
   .right-box {
     width: 535px !important;
@@ -387,6 +416,5 @@ onMounted(() => {
     background: url('@/assets/images/censusDataAnalysis/tagActive2.png') no-repeat !important;
     background-size: 100% 100% !important;
   }
-
 }
 </style>