baise-pc-vue/src/views/home/index.vue

<template>
  <div class="base-container no-events">
    <fnHeader></fnHeader>
    <div class="content">
      <!-- <div class="top"></div> -->
      <div class="left yes-events">
        <tool-list
          direction="left"
          :list="leftToolList"
          @handleActive="handleActiveLeft"
        ></tool-list>
        <component :is="components[currentComponent]" />
      </div>
      <div class="home-bottom">
        <div class="log-box yes-events">
          <chart-box name="果园日志"></chart-box>
        </div>
        <div class="file-box yes-events">
          <chart-box name="果园档案">
            <template #title-right>
              <el-icon class="arrow-icon cursor-pointer" color="#141414"
                ><DArrowLeft
              /></el-icon>
              <div class="edit-btn cursor-pointer">编辑</div>
            </template>
            <div class="file-chart">
              <div
                v-for="(item, index) in fileData"
                :key="index"
                class="item-container"
              >
                <div class="file-label">{{ item.name }}</div>
                <div class="file-bar">
                  <div
                    v-for="(value, subIndex) in item.data"
                    :key="subIndex"
                    class="bar-block"
                    :class="'bg-'+value.level"
                    :style="{ width: computedWidths[index][subIndex] + 'px' }"
                  >
                  <el-tooltip
                    class="tooltip-item"
                    effect="light"
                    :content="value.tag"
                    placement="top"
                  >
                    <div class="cursor-pointer">{{ value.tag }}</div>
                  </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </chart-box>
        </div>
      </div>
      <div class="right yes-events">
        <div class="list">
          <chart-box name="农事列表" arrow="arrow-left"></chart-box>
        </div>
        <tool-list direction="right" :list="rightToolList"></tool-list>
      </div>
    </div>
  </div>
  <div ref="mapRef" class="bottom-map"></div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import fnHeader from "@/components/fnHeader.vue";
import chartBox from "@/components/chartBox.vue";
import toolList from "@/components/toolList.vue";
import HomeMap from "./homeMap";
import homePage from "./components/homePage.vue";
import weatherPage from "./components/weatherPage.vue";
import phenologyPage from "./components/phenologyPage.vue";
const components = {
  homePage,
  weatherPage,
  phenologyPage,
};

let homeMap = new HomeMap();
const mapRef = ref();
onMounted(() => {
  let location = "POINT (113.78049350268851 23.419886891845312)";
  homeMap.initMap(location, mapRef.value);
});

const currentComponent = ref("homePage");
const handleActiveLeft = (e) => {
  currentComponent.value = e.componentName;
};
const leftToolList = [
  {
    title: "首页",
    name: "home",
    componentName: "homePage",
  },
  {
    title: "气象预警",
    componentName: "weatherPage",
  },
  {
    title: "物候调节",
    componentName: "phenologyPage",
  },
  {
    title: "病虫测报",
  },
  {
    title: "营养评估",
  },
];

const rightToolList = [
  {
    title: "农事列表",
  },
  {
    title: "新增农事",
  },
  {
    title: "复核对比",
  },
];

const fileData = ref([
  { name: '高产级', data: [
    { value: 325, level: 4, tag: '325棵' },
    { value: 325, level: 3, tag: '325棵' },
    { value: 325, level: 2, tag: '325棵' },
    { value: 325, level: 1, tag: '325棵' },
  ]},
  { name: '稳产级', data: [
    { value: 160, level: 4, tag: '160棵' },
    { value: 170, level: 3, tag: '170棵' },
    { value: 170, level: 2, tag: '170棵' },
    { value: 170, level: 1, tag: '170棵' },
  ]},
  { name: '休养-幼树', data: [
    { value: 380, level: 0, tag: '新嫁接1年 380棵' },
    { value: 330, level: 0, tag: '2年 330棵' },
    { value: 200, level: 0, tag: '3年 200棵' },
  ]},
  { name: '休养-病虫', data: [
    { value: 350, level: 3, tag: '蒂蛀虫 350棵' },
    { value: 350, level: 1, tag: '其他病 350棵' },
  ]},
  { name: '休养-生长', data: [
    { value: 300, level: 2, tag: '花芽 300棵' },
    { value: 280, level: 2, tag: '花穗 280棵' },
    { value: 320, level: 2, tag: '小果 320棵' },
  ]},
]);
// 计算所有 data 中 value 属性的总和最大值
const maxSum = computed(() => {
  return Math.max(...fileData.value.map(item => item.data.reduce((sum, dataPoint) => sum + dataPoint.value, 0)));
});
 
// 计算每个 dataPoint 的值在所有 data 中 value 总和最大值中所占的百分比
const computedWidths = computed(() => {
  const max = maxSum.value;
  return fileData.value.map(item => {
    // 258是右侧容器总宽度
    return item.data.map(dataPoint => ((dataPoint.value / max) * 258).toFixed(0)); // 保留两位小数
  });
});
 
</script>

<style lang="scss" scoped>
.base-container {
  width: 100%;
  height: 100vh;
  color: #fff;
  position: absolute;
  box-sizing: border-box;
  z-index: 1;

  .content {
    width: 100%;
    height: calc(100% - 74px - 48px);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .left,
    .right {
      width: calc(376px + 54px);
      height: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      display: flex;
    }
    .right {
      .list {
        width: 100%;
        height: 100%;
      }
    }
    .home-bottom {
      display: flex;
      align-items: flex-end;
      width: calc(100% - 430px - 430px - 72px);
      height: 100%;
      align-self: flex-end;
      .log-box {
        height: 30%;
        width: calc(100% - 340px - 28px);
        margin-right: 28px;
      }

      .file-box {
        height: 25%;
        min-height: 210px;
        width: 340px;
        position: relative;
        .arrow-icon {
          top: -32px;
          left: 50%;
          position: absolute;
          background: #fff;
          width: 16px;
          height: 80px;
          line-height: 80px;
          border-radius: 5px 0 0 5px;
          text-align: center;
          transform: translateX(-50%) rotate(270deg);
        }
        .edit-btn {
          padding: 2px 24px;
          background: #2199f8;
          border-radius: 4px;
        }
        .file-chart {
          padding: 0 6px;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .item-container {
            display: flex;
            width: 100%;
            color: #FFFFFF;
            margin-bottom: 12px;
            .file-label {
              width: 60px;
              text-align: right;
              font-size: 12px;
            }
            .file-bar {
              width: calc(100% - 56px);
              display: flex;
              padding-left: 6px;
              height: 18px;
              font-size: 10px;
              .bar-block {
                text-align: center;
                border-radius: 0px 4px 4px 0px;
                // border-image: linear-gradient(90deg, rgba(255, 223, 223, 0), rgba(234, 232, 232, 1)) 1 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &::before {
                  content: "";
                  position: absolute;
                  top: -2px; /* 边框宽度的一半，且方向相反 */
                  left: -2px; /* 边框宽度的一半，且方向相反 */
                  right: -2px; /* 边框宽度的一半，且方向相反 */
                  bottom: -2px; /* 边框宽度的一半，且方向相反 */
                  background-image: linear-gradient(to right, rgba(255, 223, 223, 0), rgba(234, 232, 232, 1)); /* 渐变背景 */
                  border-radius: 0px 4px 4px 0px; /* 继承容器的圆角半径 */
                  z-index: -1; /* 放在容器内容之下 */
                }
              }
              .bg-0 {
                background-image: linear-gradient(to right, #042921, #0CBA93);
              }
            }
          }
        }
      }
    }
  }
}
.bottom-map {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 0;
}
</style>