foster-pc-vue/src/views/checkComparison/index.vue

<template>
  <Bg></Bg>
  <Header> </Header>
  <div class="container2">
    <div class="mainDiv">
      <Title class="title" title="农事复核对比"></Title>
      <div class="tabs">
        <div class="tabs-item confirmed">农事-营养 2023.4.16</div>
        <div class="tabs-item to-be-confirmed">
          农事-营养
          <span class="time">2023.4.16</span>
        </div>
        <div class="tabs-item">农事-杀梢 2023.4.17</div>
      </div>
      <div class="button-row">
        <div class="btn-group">
          <div
            :class="['btn-item', 'yse-events', { 'btn-act': active === index }]"
            v-for="(item, index) in btnList"
            :key="index"
            @click="handleAct(index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="toggle-group" v-show="active === 0">
          <div :class="['toggle-item','before',{'before-act':btnItemAct===0}]" @click="handleBtnItemAct(0)">执行前</div>
          <div :class="['toggle-item','after',{'after-act':btnItemAct===1}]" @click="handleBtnItemAct(1)">执行后</div>
        </div>
        <div class="select" v-show="active !== 0">
          <el-select
            class="mr-10"
            v-show="active === 1"
            v-model="selectValue1"
            size="large"
            placeholder="品种筛选"
            style="width: 150px"
            popper-class="v-select-popper"
            clearable
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="selectValue"
            size="large"
            placeholder="区域筛选"
            style="width: 150px"
            popper-class="v-select-popper"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="box-content">
        <div class="map" ref="mapRef" v-show="active === 0"></div>
        <div class="picture-list list" v-show="active === 1">
          <div
            :class="['picture-item', { marker: item.markers }]"
            :style="{
              marginRight: (index + 1) % 3 === 0 ? '0' : '8px',
              borderColor: item.markers ? '#F72E24' : '#00fff0',
            }"
            v-for="(item, index) in pictureList"
            :key="index"
          >
            <el-image
              @click="handlePicturn(item, index)"
              class="image"
              :src="item.img1"
              fit="cover"
            />
            <el-image
              @click="handlePicturn(item, index)"
              class="image"
              :src="item.img2"
              fit="cover"
            />
            <div
              class="overlay"
              v-show="item.show"
              @click="handlePicturn(item, index)"
            >
              <div
                class="overlay-btn"
                :style="{ background: item.markers ? '#F72E24' : '#f78724' }"
                @click.stop="handlePicturnBtn(item, index)"
              >
                {{ item.markers ? "取消标记" : "问题标记" }}
              </div>
            </div>
          </div>
        </div>
        <div class="photo-list list" v-show="active === 2">
          <div
            class="photo-item"
            :style="{ marginRight: (index + 1) % 6 === 0 ? '0' : '19px' }"
            v-for="(item, index) in 20"
            :key="index"
          >
            <el-image
              class="image"
              src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
              fit="cover"
            />
            <div class="photo-name">王东东</div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="box-btn">
          <div class="green yse-events">生成复核报告</div>
          <div class="orange yse-events">确认农事</div>
        </div>
        <!-- 问题标记区位 -->
        <div class="mark-area" v-show="showPicture" @click="handleMarkArea">
          <div class="mark-title">
            <div>问题标记区位</div>
          </div>
          <el-image
            class="image"
            src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
            fit="cover"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "@/views/components/Header.vue";
import Bg from "../Bg";
import Title from "../components/title";
import { useRouter } from "vue-router";
import { reactive, toRefs, ref, onMounted } from "vue";
import { useStore } from "vuex";
import CheckComparisonMap from "./CheckComparisonMap";
const router = useRouter();
const store = useStore();
const state = reactive({
  btnList: ["全景图", "近景图", "执行照片"],
  pictureList: [
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: false,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: true,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: false,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: false,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: true,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: false,
      show: false,
    },
    {
      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      markers: false,
      show: false,
    },
  ],
  listItem: [],
});

const { btnList, pictureList, listItem } = toRefs(state);

// 执行前后
const btnItemAct = ref(0)
const handleBtnItemAct = (e) => {
  btnItemAct.value = e;
};

const showPicture = ref(false);

const active = ref(0);
const handleAct = (e) => {
  active.value = e;
  selectValue.value = ''
  selectValue1.value = ''
};

const picturnIndex = ref(null);
const picturnItem = ref(null);
const handlePicturn = (e, i) => {
  showPicture.value = false;
  state.pictureList[i].show = !e.show;
};

const handlePicturnBtn = (e, i) => {
  picturnIndex.value = i;
  picturnItem.value = e;
  if (state.pictureList[i].markers) {
    state.pictureList[i].markers = !e.markers;
    state.pictureList[i].show = !e.show;
  } else {
    showPicture.value = e.show;
  }
};

const handleMarkArea = () => {
  state.pictureList[picturnIndex.value].show = !picturnItem.value.show;
  showPicture.value = picturnItem.value.show;
  state.pictureList[picturnIndex.value].markers = !picturnItem.value.markers;
};

const selectValue = ref("");
const options = [
  {
    value: "Option1",
    label: "1区",
  },
  {
    value: "Option2",
    label: "2区",
  },
  {
    value: "Option3",
    label: "3区",
  },
  {
    value: "Option4",
    label: "4区",
  },
];

const selectValue1 = ref("");
const options1 = [
  {
    value: "Option1",
    label: "妃子笑",
  },
  {
    value: "Option2",
    label: "糯米糍",
  },
  {
    value: "Option3",
    label: "状元红",
  },
  {
    value: "Option4",
    label: "青皮甜",
  },
];

const initData = async () => {
  //   let url = "aPictureGarden";
  //   if (!switchValue.value) {
  //     url = "aPictureTree";
  //   }
  //   const { code, data } = await VE_API.regionalInformation[url]({
  //     gardenId: curGardenId.value,
  //   });
  //   const dataValue = data.data;
  //   state.baseData = dataValue;
  //   state.btnList = dataValue;
  //   updateData(active.value);
};

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

onMounted(() => {
  initData();
    kmap.initMap(location, mapRef.value);
  // kmap.initArea(curGardenId.value)
  //   kmap.initSubArea(curGardenId.value)
  //   kmap.addSingleSelect(selectTree)
});
</script>

<style lang="scss" scoped>
// @import "../../styles/index.scss";
.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
  color: #fff;
  .mainDiv {
    position: absolute;
    top: 100px;
    bottom: 65px;
    left: 20px;
    right: 20px;
    border: 1px solid rgba(81, 233, 240, 0.6);
    .title {
      width: 449px;
    }
    .tabs {
      width: auto;
      height: 46px;
      display: flex;
      margin: 19px 0 4px 4px;
      .tabs-item {
        width: 242px;
        height: 100%;
        background: #00fff0;
        border-radius: 5px;
        border: 1px solid #000000;
        font-weight: 800;
        font-size: 19px;
        color: #0e4c5d;
        line-height: 46px;
        text-align: center;
        margin-right: 16px;
        cursor: pointer;
        &::after {
          position: absolute;
          top: -12px;
          right: -12px;
          width: 38px;
          height: 23px;
          font-weight: 800;
          font-size: 9px;
          color: #fff;
          line-height: 23px;
        }
        &.confirmed {
          color: #f5f5f5;
          border: 1px solid #b1b1b1;
          background: #7c7978;
          position: relative;
          &::after {
            content: "已确认";
            color: #524e4e;
            background: url("@/assets/img/checkComparison/tips_bg_gray.png")
              no-repeat center center / 100% 100%;
          }
        }
        &.to-be-confirmed {
          border: 1px solid #000000;
          background: #0e4c5d;
          color: #ffffff;
          position: relative;
          &::after {
            content: "待确认";
            background: url("@/assets/img/checkComparison/tips_bg_orange.png")
              no-repeat center center / 100% 100%;
          }
          .time {
            color: #31fef4;
          }
        }
      }
    }
    .button-row {
      border: 1px solid #3ab5db;
      background: rgba(66, 153, 180, 0.4);
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      width: auto;
      height: 52px;
      .btn-group {
        display: flex;
        .btn-item {
          background: url("@/assets/img/checkComparison/btn_bg.png") no-repeat
            center center / 100% 100%;
          font-weight: 800;
          font-size: 19px;
          text-align: center;
          line-height: 52px;
          padding: 0 22px;
          cursor: pointer;
          &.btn-act {
            background: url("@/assets/img/checkComparison/btn_bg_act.png")
              no-repeat center center / 100% 100%;
          }
        }
      }
      .toggle-group {
        display: flex;
        .toggle-item {
          width: 126px;
          text-align: center;
          font-size: 21px;
          line-height: 52px;
          cursor: pointer;
          &.before {
            background: url("@/assets/img/checkComparison/before_bg.png")
              no-repeat center center / 100% 100%;
            margin-right: -23px;
          }
          &.before-act {
            background: url("@/assets/img/checkComparison/before_bg_act.png")
              no-repeat center center / 100% 100%;
            margin-right: -23px;
          }
          &.after {
            background: url("@/assets/img/checkComparison/after_bg.png")
              no-repeat center center / 100% 100%;
          }
          &.after-act {
            background: url("@/assets/img/checkComparison/after_bg_act.png")
              no-repeat center center / 100% 100%;
          }
        }
      }
      .select {
        line-height: 49px;
        .mr-10 {
          margin-right: 10px;
        }
        .el-select {
          color: #00fff0;
          ::v-deep {
            .el-select__wrapper {
              background: url("@/assets/img/checkComparison/select_bg.png")
                no-repeat center center / 100% 100%;
              border: none;
              box-shadow: none;
              .el-select__placeholder {
                font-weight: 800;
                font-size: 17px;
                color: #ffffff;
                background: linear-gradient(
                  92deg,
                  #8cc1e3 0%,
                  #cdfbff 48.8525390625%,
                  #8cd8fb 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
    }
    .box-content {
      // @include wh(auto, calc(100% - 52px - 46px - 62px - 19px));
      position: relative;
      box-sizing: border-box;
      margin: 4px;
      .map {
        border-radius: 5px;
        border: 1px solid #00fff0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
      }
      .list {
        width: 100%;
        max-height: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
      }
      .picture-list {
        .picture-item {
          border-radius: 5px;
          border: 1px solid #00fff0;
          width: 33%;
          height: 225px;
          display: flex;
          justify-content: space-between;
          padding: 4px;
          box-sizing: border-box;
          position: relative;
          cursor: pointer;
          margin-right: 8px;
          margin-bottom: 15px;
          &.marker {
            &::before {
              content: "已标记";
              position: absolute;
              top: 4px;
              right: 4px;
              width: 72px;
              height: 32px;
              line-height: 32px;
              text-align: right;
              padding-right: 8px;
              box-sizing: border-box;
              z-index: 5;
              font-weight: 800;
              font-size: 15px;
              background: url("@/assets/img/checkComparison/picturn_title_bg.png")
                no-repeat center center / 100% 100%;
            }
          }
          .image {
            width: 49.5%;
            height: 100%;
            cursor: pointer;
          }
          .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(79, 38, 11, 0.6);
            top: 0;
            left: 0;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            .overlay-btn {
              background: #f78724;
              border-radius: 5px;
              font-weight: 800;
              font-size: 21px;
              padding: 4px 18px;
            }
          }
        }
      }
      .photo-list {
        .photo-item {
          border-radius: 5px;
          border: 1px solid #00fff0;
          width: 15.64%;
          height: 194px;
          margin-right: 19px;
          margin-bottom: 11px;
          position: relative;
          .image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
          .photo-name {
            position: absolute;
            bottom: 7px;
            left: 4px;
            text-align: center;
            line-height: 34px;
            width: 103px;
            height: 34px;
            font-weight: 800;
            font-size: 19px;
            color: #2ff5ed;
            background: url("@/assets/img/checkComparison/title_bg.png")
              no-repeat center center / 100% 100%;
          }
        }
      }
      .box-btn {
        position: absolute;
        bottom: 55px;
        left: 35%;
        display: flex;
        width: auto;
        div {
          width: 255px;
          height: 59px;
          line-height: 59px;
          text-align: center;
          font-weight: bold;
          font-size: 21px;
          cursor: pointer;
        }
        .orange {
          background: url("@/assets/img/checkComparison/map_btn_bg_orange.png")
            no-repeat center center / 100% 100%;
          margin-right: 13px;
        }
        .green {
          background: url("@/assets/img/checkComparison/map_btn_bg_green.png")
            no-repeat center center / 100% 100%;
        }
      }
      .mark-area {
        position: absolute;
        right: 11px;
        bottom: 6px;
        width: 422px;
        height: 364px;
        background: #022d3c;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.73);
        border-radius: 6px;
        border: 2px solid #11cfc4;
        cursor: pointer;
        .mark-title {
          background: url("@/assets/img/checkComparison/mark_title_bg.png")
            no-repeat center center / 100% 100%;
          width: 218px;
          height: 26px;
          font-weight: 400;
          font-size: 18px;
          margin: auto;
          text-align: center;
          line-height: 26px;
          position: relative;
          z-index: 1;
          div {
            color: #ffffff;
            background: linear-gradient(0deg, #06ffce 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .image {
          width: 100%;
          height: 100%;
          border-radius: 5px;
          position: absolute;
          z-index: 0;
          top: 0;
        }
      }
    }
  }
}
</style>