vue点击MenuItem回显图片到画布上

<template>
  <div class="box-outer">
    <div class="left">
      <Row>
        <Card style="height: 600px">
          <template #title>
            <Icon type="ios-film-outline"></Icon>
            结果列表
          </template>

          <Col span="4">
            <!-- <Tree :data="dataTree" @on-select-change="handleContextMenu" expand-node></Tree> -->
            <Menu theme="light" accordion @on-select="selectItem">
              <Submenu
                :name="index"
                v-for="(item, index) in boxs"
                :key="item.tag"
                ref="child"
              >
                <template slot="title">
                  <Icon type="ios-paper" /> {{ item.tag }}
                </template>
                <MenuItem
                  :name="item.tag + '---' + itemSub.path"
                  v-for="(itemSub, index) in item.imageList"
                  :key="itemSub.path"
                >
                  {{ itemSub.path }}
                </MenuItem>
              </Submenu>
            </Menu>
          </Col>
        </Card>
      </Row>
    </div>

    <div class="right">
      <div>
        <Card style="width: 70%; height: 600px">
          <template #title>
            <Icon type="ios-film-outline"></Icon>
            显示图片（右键图片，支持保存）
          </template>
          <img :src="base64data" alt="holy" height="500px" />
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import { showPythonResults, showPythonOnePic } from "@/api/data";

export default {
  data() {
    return {
      base64data: null,
      boxs: [
        // {
        //   imageList: [
        //     { path: "test_image1.jpg" },
        //     { path: "test_image111.jpg" },
        //   ],
        //   tag: "结果1",
        //   id: 1,
        // },
        // {
        //   imageList: [
        //     { path: "test_image33.jpg" },
        //     { path: "test_image333.jpg" },
        //   ],
        //   tag: "结果2",
        //   id: 2,
        // },
      ],
    };
  },
  created() {
    this.getPythonTaskInfo();
  },
  computed: {},
  methods: {
    selectItem(key) {
      console.log(10101, key, key.split("---")[0], key.split("---")[1]);
      let payload = {
        id: this.$route.query.rslt_uuid,
        username: this.$route.query.username,
        selected_path: key.split("---")[0],
        selected_file: key.split("---")[1],
      };
      console.log("abd", payload);
      showPythonOnePic(payload).then((res) => {
        console.log("aaaa```````````", res);
        const srrrc = window.URL.createObjectURL(res.data);
        this.base64data = srrrc;
      });
    },
    getPythonTaskInfo() {
      let taskUUID = this.$route.query.rslt_uuid;
      let taskUser = this.$route.query.username;
      console.log(10101, taskUUID, taskUser);
      let payload = {
        id: 29,
        uuid: taskUUID,
        username: taskUser,
      };
      showPythonResults(payload).then((res) => {
        let tempMenuOld = res.data.path_tree;
        console.log("hhhhh", res, tempMenuOld);
        let FirstLevelMenuList = Object.keys(tempMenuOld);
        console.log('FirstLevelMenuList',FirstLevelMenuList);
        for (let iii = 0, len = FirstLevelMenuList.length; iii < len; iii++) {
          let tag_1st = FirstLevelMenuList[iii];
          let imagelist_1st = [];
          if (tempMenuOld[FirstLevelMenuList[iii]].length > 0) {
            let pathArray = [];
            for (
              let ii = 0, len = tempMenuOld[FirstLevelMenuList[iii]].length;
              ii < len;
              ii++
            ) {
              let signelArray = {
                path: tempMenuOld[FirstLevelMenuList[iii]][ii],
              };
              console.log(333, signelArray);
              pathArray.push(signelArray);
            }
            imagelist_1st = pathArray;
          }
          let temp_menu = {
            id: iii,
            tag: tag_1st,
            imageList: imagelist_1st,
          };
          console.log('temp_menu',temp_menu);
          this.boxs.push(temp_menu);
        }

        // this.boxs = res.data.path_tree
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box-outer {
  display: flex;
  padding: 0 0 0 0;
  width: 100%;
  height: 100%;

  .right {
    flex: 1;
  }
}
</style>