EOC-UI/src/views/right/components/handleProcess/comp/PeopleCd.vue

<template>
  <CommonPanel title="出动人员" class="people-cd" :img-url="CarImage">
    <div class="input-box">
      <el-input></el-input>
    </div>
    <el-scrollbar class="tree-scroll-box">
      <el-tree
        :data="leftServiceList"
        ref="treeTabSecondRef"
        show-checkbox
        node-key="id"
        :default-expanded-keys="['10000225', '10000186']"
        :default-expand-all="false"
        :renderContent="renderContent"
        :check-on-click-node="false"
        :props="defaultProps"
        @check="handleCheck"
      >

<!--        @node-click="handleNodeClick"-->
<!--        @checkChange="handleCheckChange"-->
      </el-tree>
    </el-scrollbar>
    <div class="line-box"></div>
    <div class="button-box">
      <div class="button-item"><span class="content">语音会议</span></div>
      <div class="button-item" @click="handleMultiPersonVideoCall"><span class="content">视频会商</span></div>
      <div class="button-item" @click="handleMultiPersonVideoCall"><span class="content">视频会商</span></div>
    </div>
  </CommonPanel>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import CommonPanel from "../../common/CommonPanel.vue";
import CarImage from "../../../../../assets/img/people-icon.png";
import { handleCdryPoint } from "@/utils/map/baseMethod.js";
const emit = defineEmits(['handleVideoCallClick'])

const leftServiceList = [
  {
    name: "上海市疾病预防控制中心",
    id: "上海市疾病预防控制中心",
    children: [
      {
        name: "张三（18600000000）",
        id: "张三（18600000000）",
      },
      {
        name: "张三（18600000001）",
        id: "张三（18600000001）",
      },
    ],
  },
  {
    name: "长宁区疾控预防控制中心",
    id: "长宁区疾控预防控制中心",
    children: [
      {
        name: "张利峰（18600000000）",
        id: "张利峰（18600000000）",
      },
      {
        name: "张利峰（18600000001）",
        id: "张利峰（18600000001）",
      },
    ],
  },
];

const serviceKey = "name";
const renderContent = (h, { node, data, store }) => {
  if (data.children == null || data.children.length === 0) {
    return h("div", { class: "custom-tree-node custom-tree-node-div" }, [
      h(
        "span",
        { class: "node-label ch-label", title: data[serviceKey] },
        data[serviceKey]
      ),
      h("div", { class: "imgbox" }, [
        h("div", { class: "img1", onClick: (event) => handleVoiceCallClick(event, data) }, ""),
        h("div", { class: "img2", onClick: (event) => handleSoundClick(event, data) }, ""),
        h("div", { class: "img3", onClick: (event) => handleVideoCallClick(event, data) }, ""),
      ]),
    ]);
  }
  let className = "custom-tree-node";
  return h("div", { class: className }, [
    h("span", { class: "node-label" }, [data[serviceKey]]),
  ]);
};

const handleNodeClick = (item) => {
  console.log(item);
};

const handleCheckChange = (item) => {
  console.log(item);
};

const handleCheck = (item) => {
  console.log(item);
  if(item.children){
    return
  }

  handleCdryPoint(true)
};

// 单人视频
function handleVideoCallClick(event, data) {
   emit('handleVideoCallClick',data)
}

// 多人视频通话
function handleMultiPersonVideoCall() {
   emit('handleVideoCallClick')
}

onBeforeUnmount(() => {
  handleCdryPoint(false)
})
</script>

<style lang="scss" scoped>
.people-cd {
  position: fixed;
  top: 160px;
  right: 860px;
  .input-box {
    padding: 15px 21px;
    :deep(.el-input__wrapper) {
      width: 360px;
      height: 33px;
      background: rgba(0, 20, 59, 0.5);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid rgba(111, 229, 255, 0.3);
      box-shadow: none;
    }
  }
  .tree-scroll-box {
    height: calc(100% - 145px);
    padding: 0 21px;
    :deep(.el-tree) {
      background-color: transparent !important;
      height: calc(100% - 50px);
      .el-tree-node__expand-icon {
        box-sizing: content-box;
        color: #a2eeff;
      }
      .el-tree-node__content {
        background-color: transparent !important;
        margin-bottom: 3px;
      }
      .el-checkbox__input {
        .el-checkbox__inner {
          width: 16px;
          height: 16px;
          background: rgba(0, 20, 59, 0.5);
          border-radius: 3px 3px 3px 3px;
          border: 1px solid rgba(111, 229, 255, 0.5);
        }
      }
      .is-checked {
        .ch-label {
          color: #7bffff;
        }
      }
    }
  }
  .line-box {
    margin: 10px 0;
    width: 100%;
    height: 4px;
    background-image: url("../../../../../assets/img/image-bottom.png");
    background-size: 100% 100%;
  }
  .button-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    .button-item {
      padding: 10px 30px;
      background-image: url("../../../../../assets/img/Frame 1321314705.png");
      background-size: 100% 100%;
      .content {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 20px;
        color: #e0e5fa;
        line-height: 23px;
        text-shadow: 0px 0px 7px rgba(75, 122, 229, 0.24),
          0px 2px 8px rgba(5, 28, 55, 0.42);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(to top, #149eff 15%, #effcfe 49%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>

<style>
.node-label {
  font-family: Alibaba PuHuiTi;
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.custom-tree-node-div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .imgbox {
    display: flex;
    .img1 {
      width: 23px;
      height: 20px;
      background-image: url("../../../../../assets/img/phone-icon.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .img2 {
      width: 23px;
      height: 20px;
      background-image: url("../../../../../assets/img/shengyin-icon.png");
      background-size: 100% 100%;
      margin-left: 5px;
      cursor: pointer;
    }
    .img3 {
      width: 23px;
      height: 20px;
      background-image: url("../../../../../assets/img/video-icon.png");
      background-size: 100% 100%;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>