yjhtgl-web/src/views/censusDataAnalysis/ForestFire/index.vue

<template>
  <div class="disaster-container">
    <div class="left-box">
      <div class="data-box1">
        <div class="title-box">
          <div class="gradient-text">分析服务</div>
        </div>
        <div class="box-content">
          <div class="btn-box">
            <div :class="activeIndex === '1' ? 'text-active text' : 'text'" @click="handleClick('1')">风险分析</div>
            <div class="line">|</div>
            <div :class="activeIndex === '2' ? 'text-active text' : 'text'" @click="handleClick('2')">历史分析</div>
          </div>
          <div class="tag-box1">
            <div
              v-for="(item, index) in analysisServices"
              :key="index"
              :class="activeIndex1 === index ? 'tag-item tag-active' : 'tag-item'"
              @click="handleClick1(item.value)"
            >
              <i :class="item.icon" />
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="data-box1">
        <div class="title-box">
          <div class="gradient-text">图层分析</div>
        </div>
        <div class="box-content2">
          <div class="tag-box2">
            <div
              v-for="(item, index) in layerService"
              :key="index"
              :class="activeIndex2 === index ? 'tag-item tag-active' : 'tag-item'"
              @click="handleClick2(item, index)"
            >
              <i :class="item.icon" />
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="data-box1">
        <div class="title-box">
          <div class="gradient-text">基础服务</div>
        </div>
        <BaseService @change="handleChange" />
      </div>
    </div>
    <div class="middle-box">
      <DistributionMap
        :active-map="activeMap"
        :distributionData="distributionData"
        :points="points"
      />
      <div class="map-title">{{ mapTitle }}</div>
      <div class="map-time">{{ mapTime }}</div>
    </div>
    <div class="right-box">
      <RightSection v-show="activeIndex === '1'" id="mapId" :time="mapTime" />
      <HistoricalAnalysis v-show="activeIndex === '2'" />
    </div>
    <!--风险趋势分析-->
    <RiskTrendAnalysis v-if="showRiskTrendAnalysis" v-model="showRiskTrendAnalysis" @confirm="handleRiskConfirm" />
  </div>
</template>

<script lang="ts" setup name="forestFire">
// 分析服务
import RightSection from './RightSection.vue';
import BaseService from './BaseService.vue';
import RiskTrendAnalysis from '@/views/censusDataAnalysis/RiskTrendAnalysis.vue';
import { parseTime } from '@/utils/ruoyi';
import HistoricalAnalysis from '@/views/censusDataAnalysis/HistoricalAnalysis.vue';

let activeIndex = ref('1');
let activeIndex1 = ref(0);
const analysisServices = ref([
  { name: '风险实时分析', value: '1', icon: 'icon1' },
  { name: '风险趋势分析', value: '2', icon: 'icon2' }
]);
let showRiskTrendAnalysis = ref(false);
const handleClick = (index) => {
    activeIndex.value = index;
};
// 点击分析服务
const handleClick1 = (index) => {
  if (index === '2') {
    showRiskTrendAnalysis.value = true;
  }
};

// 图层服务
const activeIndex2 = ref(0);
const layerService = ref([]);
// 中部
// 使用地图地图
let activeMap = ref('imageMap');
let mapTitle = ref('森林火灾风险等级分布图');
let mapTime = ref('');
let distributionData = ref([]);
let points = ref([]);
// 点击图层分析
const handleClick2 = (item, index) => {
  if (activeIndex2.value === index) return;
  activeIndex2.value = index;
  getDistributionData();
  console.log('点击', item);
};
// 分布图数据
const getDistributionData = () => {
  const tempData2 = [
    {
      name: '高',
      color: '#ff2f3c',
      points: []
    },
    {
      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]
        ]
      ]
    },
    {
      name: '较低',
      color: '#ffd800',
      points: []
    },
    {
      name: '低',
      color: '#40c75f',
      points: [
        [
          [110.491302, 22.035445],
          [110.52116, 22.166791],
          [110.593363, 22.024818],
          [110.491302, 22.035445]
        ]
      ]
    }
  ];
  distributionData.value = tempData2;
};
// 分布图打点
const handleChange = (data) => {
  points.value = data;
};
const handleRiskConfirm = (data) => {
  mapTime.value = data.title;
  showRiskTrendAnalysis.value = false;
};
// 加载数据
const initData = () => {
  layerService.value = [
    { name: '森林火灾风险等级分布图', value: '1', icon: 'icon1' },
    { name: '森林火灾减灾能力薄弱隐患等级分布图', value: '2', icon: 'icon2' },
    { name: '森林火灾防治区划图', value: '3', icon: 'icon3' },
    { name: '可燃物载量分布图', value: '4', icon: 'icon4' }
  ];
  getDistributionData();
  const now = new Date();
  const currentHour = now.getHours();
  now.setHours(currentHour, 0, 0, 0);
  mapTime.value = parseTime(now, '{y}年{m}月{d}日 {h}:{i}:{s}');
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.disaster-container {
  overflow: hidden;
  display: flex;
  .left-box {
    width: 536px !important;
    height: 100%;
    padding-left: 20px;
    overflow: hidden;
  }
  .middle-box {
    flex: 1;
    position: relative;
    .map-title {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
    }
    .map-time {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #ffffff;
    }
  }
  .right-box {
    width: 535px !important;
    height: 100%;
    overflow: hidden;
  }
  .data-box1 {
    &::after {
      content: '';
      display: block;
      width: 517px;
      height: 19px;
      background: url('@/assets/images/censusDataAnalysis/line.png') no-repeat;
      background-size: 100% 100%;
      margin-top: -8px;
    }
    .title-box {
      width: 516px;
      height: 40px;
      background: url('@/assets/images/censusDataAnalysis/titleBox.png') no-repeat;
      background-size: 100% 100%;
      padding-left: 50px;
      .gradient-text {
        font-size: 24px;
      }
    }
    .box-content {
      width: 100%;
      min-height: 54px;
      background: url('@/assets/images/censusDataAnalysis/box.png') no-repeat;
      background-size: 100% 100%;
      .btn-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: -20px;
        padding-right: 45px;
        .line {
          margin: 0 5px;
        }
        .text {
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
        }
        .text-active {
          color: #00fce7;
        }
      }
    }
    .box-content2 {
      width: 100%;
      height: 195px;
      background: url('@/assets/images/censusDataAnalysis/box.png') no-repeat;
      background-size: 100% 100%;
      padding: 5px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow-y: auto;
    }
  }
  .tag-box1 {
    height: 55px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    padding: 0 5px;
    margin-top: 3px;
    .tag-item {
      box-sizing: border-box;
      text-align: center;
      padding: 8px 0;
      width: 218px;
      height: 41px;
      background: url('@/assets/images/censusDataAnalysis/tag.png') no-repeat;
      background-size: 100% 100%;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      &:first-child {
        margin-right: 30px;
      }
      .icon1 {
        display: inline-block;
        width: 37px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/icon1.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      .icon2 {
        display: inline-block;
        width: 38px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/icon2.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      &:hover {
        background: url('@/assets/images/censusDataAnalysis/tagActive.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .tag-box2 {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .tag-item {
      box-sizing: border-box;
      width: 470px;
      height: 41px;
      padding: 8px 0;
      margin-top: 7px;
      background: url('@/assets/images/censusDataAnalysis/tag2.png') no-repeat;
      background-size: 100% 100%;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      &:first-child {
        margin-top: 0;
      }
      .icon1 {
        display: inline-block;
        width: 38px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/forestFire/icon1.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      .icon2 {
        display: inline-block;
        width: 38px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/forestFire/icon2.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      .icon3 {
        display: inline-block;
        width: 38px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/forestFire/icon3.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      .icon4 {
        display: inline-block;
        width: 38px;
        height: 40px;
        background: url('@/assets/images/censusDataAnalysis/forestFire/icon4.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
      }
      &:hover {
        background: url('@/assets/images/censusDataAnalysis/tagActive2.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .tag-active {
    background: url('@/assets/images/censusDataAnalysis/tagActive2.png') no-repeat !important;
    background-size: 100% 100% !important;
  }

}
</style>