EOC-UI/src/views/right/components/common/RightLegend.vue

<template>
  <div class="right-legend">
    <template v-for="(item, index) in riskLevelList" :key="index">
      <div class="legend-item">
        <div class="icon-box icon-box-fill">
          <img :src="item.img" />
        </div>
        <div class="text-box">{{ item.name }}</div>
        <div
          class="switch-box"
          :class="{ switchOpen: item.value }"
          @click="handleRiskLevel(item)"
        ></div>
      </div>
    </template>

    <div class="line-box"></div>
    <template v-for="(item, index) in deviceList" :key="index">
      <div class="legend-item" @click="handleDeviceLevel(item)">
        <div class="icon-box">
          <img :src="item.img" />
        </div>
        <div class="text-box">{{ item.name }}</div>
        <div class="switch-box" :class="{ switchOpen: item.value }"></div>
      </div>
    </template>

    <div class="line-box"></div>

    <template v-for="(item, index) in institutionList" :key="index">
      <div class="legend-item" @click="handleInstitutionLevel(item)">
        <div class="icon-box">
          <img :src="item.img" />
        </div>
        <div class="text-box">{{ item.name }}</div>
        <div class="switch-box" :class="{ switchOpen: item.value }"></div>
      </div>
    </template>

    <div class="line-box"></div>

    <div class="legend-item">
      <div class="icon-box">
        <img src="../../../../assets/img/Component 240(6).png" />
      </div>
      <el-select
        class="legend-select"
        placeholder="请选择病种"
        popper-class="custom-select"
      ></el-select>
    </div>

    <div class="legend-item">
      <div class="icon-box">
        <img src="../../../../assets/img/Component 240(7).png" />
      </div>
      <el-select
        class="legend-select"
        placeholder="请选择"
        popper-class="custom-select"
      ></el-select>
    </div>
    <div class="legend-item">
      <div class="icon-box">
        <img src="../../../../assets/img/Component 240(8).png" />
      </div>
      <el-select
        class="legend-select"
        popper-class="custom-select"
        placeholder="请选择"
      ></el-select>
    </div>
    <template v-if="commonStore.activeIndex == 1">
      <div class="line-box"></div>

      <div class="legend-item">
        <div class="text-box">病例热点</div>
        <div
          class="switch-box"
          :class="{ switchOpen: bingliSwitch }"
          @click="handleBingli()"
        ></div>
      </div>
      <div class="legend-item">
        <div class="text-box">视频会商</div>
        <div
          class="switch-box"
          :class="{ switchOpen: videoSwitch }"
          @click="handleVideo()"
        ></div>
      </div>
    </template>
    <div class="legend-item">
      <div class="text-box">时间轴</div>
      <div
        class="switch-box"
        :class="{ switchOpen: rightPanelStore.timerSwitchStatus }"
        @click="handleTimerSwitch"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useCommonStore } from "@/store/common.js";
import { useRightPanelStore } from "../../../../store/rightPanel";

const commonStore = useCommonStore();
const rightPanelStore = useRightPanelStore();

const bingliSwitch = ref(true);
const videoSwitch = ref(true);

const handleBingli = () => {
  bingliSwitch.value = !bingliSwitch.value;
};

const handleTimerSwitch = () => {
  rightPanelStore.timerSwitchStatus = !rightPanelStore.timerSwitchStatus;
};

const handleVideo = () => {
  videoSwitch.value = !videoSwitch.value;
};
//风险等级
const riskLevelList = ref([
  {
    name: "A级风险",
    img: new URL("../../../../assets/img/pinpoint.png", import.meta.url).href,
    value: true,
  },
  {
    name: "B级风险",
    img: new URL("../../../../assets/img/pinpoint(1).png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "C级风险",
    img: new URL("../../../../assets/img/pinpoint(2).png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "D级风险",
    img: new URL("../../../../assets/img/pinpoint(3).png", import.meta.url)
      .href,
    value: true,
  },
]);

//应急
const deviceList = ref([
  {
    name: "应急人员",
    img: new URL("../../../../assets/img/Component 240.png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "应急车辆",
    img: new URL("../../../../assets/img/Component 240(1).png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "物资装备",
    img: new URL("../../../../assets/img/Component 240(2).png", import.meta.url)
      .href,
    value: true,
  },
]);

//机构
const institutionList = ref([
  {
    name: "学校",
    img: new URL("../../../../assets/img/Component 240(3).png", import.meta.url)
      .href,
    value: true,
  },

  {
    name: "养老机构",
    img: new URL("../../../../assets/img/Component 240(4).png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "托幼机构",
    img: new URL("../../../../assets/img/Component 240(5).png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "医院",
    img: new URL("../../../../assets/img/history-icon.png", import.meta.url)
      .href,
    value: true,
  },
  {
    name: "海关",
    img: new URL("../../../../assets/img/haiguan-icon.png", import.meta.url)
      .href,
    value: true,
  },
]);

const handleRiskLevel = (item) => {
  item.value = !item.value;
};

const handleDeviceLevel = (item) => {
  item.value = !item.value;
};

const handleInstitutionLevel = (item) => {
  item.value = !item.value;
};
</script>

<style lang="scss">
.right-legend {
  padding: 15px 20px;
  width: 217px;
  // height: 750px;
  background-image: url("../../../../assets/img/撒点弹窗.png");
  background-size: 100% 100%;
  z-index: 99;
  .legend-item {
    display: flex;
    align-items: center;
    margin: 11px 0;
    .icon-box {
      width: 28px;
      height: 28px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .icon-box-fill {
      width: 25px;
      height: 28px;
    }
    .text-box {
      width: 80px;
      font-family: Alibaba PuHuiTi;
      font-weight: normal;
      font-size: 18px;
      line-height: 24px;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      text-align: left;
      font-style: normal;
      text-transform: none;
      background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 15px;
    }
    .switch-box {
      width: 47px;
      height: 26px;
      background-image: url("../../../../assets/img/Component 15(2).png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .switchOpen {
      background-image: url("../../../../assets/img/Component 14.png");
    }
    .legend-select {
      width: 146px;
      height: 28px;
      margin-left: 15px;
      //   box-shadow: inset 0px 5px 8px 0px rgba(69, 210, 255, 0.8);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #45d2ff;
      border-bottom: 1px solid #45d2ff;
      border-image: linear-gradient(
          174deg,
          rgba(154, 249, 255, 1),
          rgba(111, 246, 255, 0.3)
        )
        1 1;
      .el-select__wrapper {
        background-color: transparent !important;
        box-shadow: none;
        color: #45d2ff !important;
        min-height: unset;
        line-height: unset;
      }
      .el-select__placeholder {
        color: #45d2ff !important;
      }
    }
  }
  .line-box {
    background-image: url("../../../../assets/img/Line 550.png");
    height: 2px;
    background-size: 100% 100%;
  }
}
</style>