agriculture-one-map/src/views/detailsPage/analysis/index.vue

<template>
  <div>
    <Bg></Bg>
    <Header></Header>
    <div class="container2">
      <div class="mainDiv">
        <div class="leftBox">
          <Title class="title" title="农事分析"></Title>
        </div>

        <div class="rightBox">
          <Title class="title" title="一梢营养"></Title>
          <div class="box-item flex">
            <div class="basic-info">
              <div class="box-title">
                <span>农事基本信息</span>
                <img src="@/assets/img/analysisDetails/edit_icon.png" alt="" />
              </div>
              <div class="box-cont">
                <div class="text">
                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
                  <span>执行时间:</span>
                  <span class="value">2024.03.04</span>
                </div>
                <div class="text">
                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
                  <span>农事类型:</span>
                  <span class="value">一梢营养</span>
                </div>
                <div class="text mb">
                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
                  <span>药物处方</span>
                </div>
                <div class="card">
                  <div class="header">
                    <div class="icon"></div>
                    <div class="name">
                      <span class="blue">营养类-</span>
                      <span>乙烯利 (药物配比 1:11)</span>
                    </div>
                  </div>
                  <div class="desc">药物建议:禁用****</div>
                </div>
                <div class="card">
                  <div class="header">
                    <div class="icon"></div>
                    <div class="name">
                      <span class="blue">病虫害-</span>
                      <span>多效挫 (药物配比 1:11)</span>
                    </div>
                  </div>
                  <div class="desc">药物建议:禁用****</div>
                </div>
                <div class="text">
                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
                  <span>复核时间: </span>
                  <span class="value">2024.03.07</span>
                </div>
              </div>
            </div>
            <div class="map" ref="mapRef">
              <div class="map-title">执行区域</div>
            </div>
          </div>
          <div class="box-item border box-height">
            <div class="box-header">
              <div class="box-title">
                <span>农事复盘指标图</span>
              </div>
              <div class="select-group">
                <el-select
                  v-model="selectValue"
                  class="select yse-events"
                  effect="dark"
                  popper-class="v-select-popper-ns"
                >
                  <el-option
                    v-for="item in optionsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="selectValueTwo"
                  class="select yse-events"
                  effect="dark"
                  popper-class="v-select-popper-ns"
                >
                  <el-option
                    v-for="item in optionsListTwo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <LineChart></LineChart>
          </div>
          <div class="box-item border">
            <div class="box-title">
              <span>时序照片</span>
            </div>
            <TreeImgList
              :selected="selected"
              :periodId="curPeriodId"
              :attrField="curAttrField"
              v-for="treeImg in treeImgList"
              :treeId="treeImg.id"
              :key="treeImg.id"
              :code="treeImg.code"
              :images="treeImg.images"
              @clickAction="imgListClick"
              @preview="preview"
            ></TreeImgList>
          </div>
        </div>
      </div>
    </div>
  </div>
   <PicturePreview
    :show="showViewer"
    :imageUrl="urls"
    :curIndex="urlsIndex"
  ></PicturePreview>
</template>

<script setup>
import Bg from "../../Bg";
import Title from "../../components/title";
import Header from "@/views/components/Header.vue";
import LineChart from "./lineChart.vue";
import TreeImgList from "../../zhgl/com/tree_img_list/TreeImgList";
import PicturePreview from "@/components/PicturePreview.vue";
import analysisMap from "./analysisMap";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

const selectValue = ref("7");

const optionsList = [
  {
    value: "7",
    label: "农事作用分区",
  },
  {
    value: "3",
    label: "3天",
  },
];

const selectValueTwo = ref("7");

const optionsListTwo = [
  {
    value: "7",
    label: "显示时间",
  },
  {
    value: "3",
    label: "3天",
  },
];

const selected = ref([]);
let curPeriodId = ref(null);
let treeImgList = ref([]);
let page = 0;
let limit = 10;
const miniMapRef = ref(null);
const urls = ref([]);
const urlsIndex = ref(0);
const showViewer = ref(false);

/**
 * 点击图片列表
 * @param key
 * @param treeId
 */
function imgListClick(key, treeId) {
  switch (key) {
    case "treeImgList":
      selected.value = [treeId];
      break;
    case "dateImgList":
      selected.value = [treeId];
      break;
  }
  miniMapRef.value.setSelected(treeId);
}

/**
 * 预览照片
 * @param images
 */
function preview(images, dataArr, index) {
  //   datas.value = dataArr;
  urls.value = images;
  urlsIndex.value = index;
  showViewer.value = !showViewer.value;
}

// 地图初始化
const mapRef = ref(null);
const kmap = new analysisMap();
const location = store.getters.userinfo.location;
const curGardenId = ref(store.getters.userinfo.curGardenId);

onMounted(() => {
  page = 0;
  limit = 10;
  //   initTreeImgList(organId, areaId, page, limit);
  initTreeImgList(766, 2, 0, 10);
  kmap.initMap(location, mapRef.value);
});

/**
 * 初始化TreeImgList
 * */
async function initTreeImgList(organId, areaId, pageNo) {
  if (pageNo) {
    page = pageNo;
  }
  if (!areaId) {
    areaId = -1;
  }
  let { code, data } = await VE_API.tree.page({ organId, areaId, page, limit });
  //   if (data.length == 0) {
  //     nomore.value = true;
  //   }
  for (let item of data) {
    treeImgList.value.push(item);
  }
}
</script>

<style lang="scss" scoped>
.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
}
.mainDiv {
  position: absolute;
  top: 100px;
  bottom: 60px;
  left: 20px;
  right: 20px;
  .leftBox {
    float: left;
    width: 720px;
    height: calc(100%);
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
  }
  .title {
    width: 480px;
  }
  .rightBox {
    float: right;
    width: calc(100% - 720px - 12px);
    height: 100%;
    background: #032c3940;
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    overflow: auto;
    color: #fff;
    .box-item {
      margin: 10px;
      width: 98%;
      height: 424px;
      box-sizing: border-box;
      margin-bottom: 20px;
      &.border {
        padding: 6px;
        border: 1px solid rgba(0, 255, 240, 0.12);
      }
      &.flex {
        display: flex;
        justify-content: space-between;
      }
      &.box-height {
        height: 400px;
      }

      .box-title {
        background: url("@/assets/img/analysisDetails/box_title.png") no-repeat
          center center / 100% 100%;
        width: 370px;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 5px 12px;
        font-size: 20px;
        margin-bottom: 20px;
        height: 40px;
        img {
          cursor: pointer;
        }
      }
      .basic-info {
        background: url("@/assets/img/analysisDetails/info_bg.png") no-repeat
          center center / 100% 100%;
        width: 370px;
        height: 100%;
        box-sizing: border-box;
        padding: 6px;
        border: 1px solid rgba(0, 255, 240, 0.12);
        .box-cont {
          .text {
            font-size: 16px;
            margin-top: 16px;
            img {
              margin-right: 9px;
            }
            .value {
              margin-left: 25px;
              color: #01f0e2;
            }
          }
          .mb {
            margin-bottom: 10px;
          }
          .card {
            width: auto;
            margin: 0 4px;
            background: rgba(9, 37, 40, 0.29);
            border: 1px solid rgba(1, 240, 226, 0.12);
            font-size: 16px;
            margin-bottom: 7px;
            .header {
              background: rgba(1, 240, 226, 0.05);
              font-weight: bold;
              color: #ff8840;
              display: flex;
              align-items: center;
              padding: 4px 10px;
              .icon {
                width: 7px;
                height: 7px;
                background: #05e5d9;
                transform: rotate(45deg);
                margin-right: 10px;
              }
              .blue {
                color: #01f0e2;
              }
            }
            .desc {
              padding: 9px 10px;
              color: #ff0000;
              opacity: 0.6;
            }
          }
        }
      }
      .map {
        width: calc(100% - 374px - 4px);
        height: 100%;
        border: 1px solid rgba(0, 255, 240, 0.12);
        position: relative;
        box-sizing: border-box;
        .map-title {
          position: absolute;
          top: 6px;
          left: 4px;
          background: url("@/assets/img/analysisDetails/map_title.png")
            no-repeat center center / 100% 100%;
          width: 322px;
          font-size: 20px;
          color: #00fff0;
          padding: 3px 10px;
          z-index: 9;
        }
      }

      .box-header {
        display: flex;
        justify-content: space-between;
        .select {
          width: 162px;
          margin-right: 10px;
          ::v-deep {
            .el-select__wrapper {
              background: transparent;
              border: 1px solid rgba(81, 233, 240, 0.6);
              box-shadow: none;
              .el-select__placeholder {
                color: #00fff0;
              }
              .el-select__caret {
                color: #00fff0;
              }
            }
          }
        }
      }
    }
  }
}
</style>