BusinessServicesTT/src/views/VideoMonitoring/components/RightScreenshotBox.vue

<template>
  <div class="right-screenshot-box">
    <ul>
      <li v-for="item in tools" :key="item.type" @click="captureSelection(item.type)">
        <icon :icon="item.icon" width="30" height="30"></icon>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { downLoadFile } from '@/utils'
import { useOutsideSystemStore } from '@/stores/modules/system.js'
const useSystem = useOutsideSystemStore()
const { API_SCREENSHOT_GET } = useRequest()

const tools = [
  // {
  //   name: '选区截图',
  //   icon: 'mingcute:screenshot-line',
  //   type: 'xq'
  // },
  {
    name: '全景截图',
    icon: 'fluent:screenshot-20-regular',
    type: 'jt'
  }
]

const captureSelection = (type) => {
  switch (type) {
    case 'jt':
      downLoadFile(API_SCREENSHOT_GET, { UUID: useSystem.qjUUID })
      break
  }
}
</script>
<style scoped lang="scss">
.right-screenshot-box {
  ul {
    display: grid;
    grid-template-columns: repeat(1, 70px);
    grid-template-rows: repeat(auto-fill, 70px);
    gap: 15px;
    li {
      border: 1px solid rgba(138, 197, 255, 0.4);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>