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

<template>
  <header
    class="layout-header-box"
    mb-10px
    color-white
    font-bold
    flex
    flex-items-end
    flex-justify-between
    px-15px
  >
    <div class="layout-header-box-address" flex flex-items-center>
      <div :key="i" v-for="(btn, i) in btns">
        <dv-button :bg="false" @click="open(btn)"
          ><Icon :icon="btn.icon" width="2vw" height="2vw" mr-1 />{{ btn.name }}</dv-button
        >
      </div>
      <!-- <i-mdi:address-marker-outline color="#0080ff" width="40" height="40" />
      <span class="layout-header-box-address-text" text-25px color="#8ac5ff" v-if="city">
        {{ city }}
      </span>
      <div w-full h-full flex flex-justify-center flex-items-center v-else>
        <img src="@/assets/images/loading-icon.gif" alt="" width="40" />
      </div> -->
    </div>
    <span class="layout-header-box-title text-2vw">{{ title }}</span>
    <div
      class="layout-header-box-right"
      flex
      flex-justify-between
      flex-items-center
      color="#8ac5ff"
    >
      <div class="layout-header-box-right-btn" flex flex-items-center cursor-pointer gap-3>
        <div
          class="flex justify-center items-center"
          :style="{ width: item.w + 'px', height: item.h + 'px' }"
          v-for="(item, i) in listComputed"
          :key="i"
          v-on:[event]="toolsClick(item.type)"
        >
          <Icon
            :class="[item.class]"
            :icon="item.iCom"
            :width="item.w"
            :height="item.h"
            color="#8ac5ff"
          />
        </div>
      </div>
      <!-- <div
        class="layout-header-box-right-hat"
        flex
        flex-items-center
        cursor-pointer
        mr-2
        v-on:[event]="openModal('aqm')"
      >
        <Icon icon="lucide:hard-hat" width="2.5vw" height="2.5vw" style="color: #8ac5ff" />
      </div> -->
      <!-- <div class="layout-header-box-right-switch" flex flex-items-center cursor-pointer>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          v-on:[event]="toAi"
          width="3vw"
          height="3vw"
          viewBox="0 0 24 24"
        >
          <path
            fill="none"
            :stroke="ai.color"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M20 11V9a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4m4 5v-4a2 2 0 1 1 4 0v4m-4-2h4m3-4v6"
          />
        </svg>
      </div> -->
      <!-- <div
        class="layout-header-box-right-compass"
        flex
        flex-items-center
        cursor-pointer
        @click="openAlarm"
      >
        <n-popover trigger="hover" placement="bottom">
          <template #trigger>
            <Icon icon="line-md:compass-loop" width="20" height="20" style="color: #8ac5ff" />
          </template>
          <Compass />
        </n-popover>
      </div> -->
      <div class="layout-header-box-right-tq" mx-3>
        <Weather />
      </div>
      <div class="layout-header-box-right-icon screen-full-trigger" flex flex-items-center>
        <Icon
          icon="akar-icons:reduce"
          cursor-pointer
          v-if="isFullscreen"
          width="20"
          height="20"
          color="#8ac5ff"
        ></Icon>
        <Icon
          icon="akar-icons:full-screen"
          v-else
          cursor-pointer
          width="20"
          height="20"
          color="#8ac5ff"
        ></Icon>
      </div>
    </div>
  </header>
  <pub-modal v-model:showModal="showModal" width="60%" classN="video-show" :title="titleModal">
    <template #modal-slot>
      <component :is="comN"></component>
    </template>
  </pub-modal>
</template>
<script setup>
import storage from '@/utils/storage'
import useScreenfull from '@/hooks/useScreenfull'
import SafetyHat from './SafetyHat.vue'
import { Button as DvButton } from '@kjgl77/datav-vue3'
import { useOutsideScreenOperation } from '@/stores/modules/screenOperation.js'
import { useOutsideSystemStore } from '@/stores/modules/system.js'
const useSystem = useOutsideSystemStore()
const useScreenOperation = useOutsideScreenOperation()

const { isFullscreen } = useScreenfull(`.screen-full-target`, `.screen-full-trigger`)
const { API_LY_ADDRESS_GET } = useRequest()

const event = computed(() => useSystem.event)
const router = useRouter()
const title = computed(() => {
  return useScreenOperation.title
})
// https://restapi.amap.com/v3/ip?ip=114.247.50.2&output=xml&key=<用户的key>

const ai = reactive({
  name: 'AI',
  path: 'dropdown1',
  color: '#8ac5ff',
  iCom: 'uil:refresh',
  type: 'dropdown',
  options: [
    {
      label: '不检测',
      key: 1,
      disabled: useSystem.videoSwitch == 1
    },
    {
      label: 'AI检测',
      key: 2,
      disabled: useSystem.videoSwitch == 2
    }
  ],
  handleSelect(v, nav) {
    useSystem.videoSwitch = v
    storage.local.set('v_switch', v)
    nav.options = [
      {
        label: '不检测',
        key: 1,
        disabled: useSystem.videoSwitch == 1
      },
      {
        label: 'AI检测',
        key: 2,
        disabled: useSystem.videoSwitch == 2
      }
    ]
  }
})

const route = useRoute()
const state = ref(false)
const workerObj = inject('workerObj')

const btns = [
  {
    name: '全景态势',
    type: 'path',
    path: '/video_monitoring/panoramic_situation',
    color: '#3299ff',
    icon: 'wpf:panorama',
    auth: []
  },
  {
    name: '远程回放',
    path: '/video_monitoring/remote_playback',
    type: 'path',
    color: '#3299ff',
    icon: 'solar:playback-speed-bold',
    auth: ['PlaybackView']
  }
  // {
  //   name: '设备维护',
  //   path: '/video_monitoring/device_management',
  //   type: 'path',
  //   color: '#3299ff',
  //   icon: 'pepicons-pop:gear',
  //   auth: ['PlaybackView']
  // }
]

const list = shallowRef([
  // {
  //   iCom: 'ant-design:tag-outlined',
  //   label: '标签过滤',
  //   color: 'white',
  //   isPopover: true,
  //   component: RightBqglBox
  // },
  {
    iCom: 'iconoir:screenshot',
    label: '截图',
    color: 'white',
    type: 'jt',
    w: 20,
    h: 20
  },
  {
    iCom: 'carbon:video',
    label: '录像',
    color: 'white',
    type: 'lx',
    class: '',
    w: 25,
    h: 25
  }
  // {
  //   iCom: 'mdi:video-3d',
  //   label: '3D缩放',
  // },
  // {
  //   iCom: 'ep:set-up',
  //   label: '码流切换',
  //   color: 'white'
  // }
])
const listComputed = computed(() => {
  return (
    route.name == 'RemotePlayback'
      ? list.value.filter((v) => !['gl', 'lx', 'jt', 'dropdown'].includes(v.type))
      : list.value
  ).map((item) => {
    if (item.type === 'lx') {
      if (state.value) {
        item.iCom = 'fad:armrecording'
        item.color = 'red'
        item.class = 'update-style'
      } else {
        item.iCom = 'carbon:video'
        item.color = 'white'
        item.class = ''
      }
    }
    return item
  })
})
const toolsClick = (type) => {
  switch (type) {
    case 'lx':
      state.value = !state.value
      workerObj.value.WebSocketWork.postMessage({ type: 'lx', lx: state.value })
      useSystem.recordingStatus = state.value
      break
    case 'jt':
      workerObj.value.worker.postMessage({ type: 'jt' })
      break
  }
}
const open = (nav) => {
  if (nav.type == 'link') {
    window.open(nav.path, '_blank')
  } else {
    router.push(nav.path)
  }
}

const toAi = async () => {
  const res = await API_LY_ADDRESS_GET({ name: '鲲鹏云' })
  window.open(res, '_blank')
}

const titleModal = ref('')
const showModal = ref(false)
const comN = shallowRef(null)
const openModal = (type) => {
  switch (type) {
    case 'aqm':
      titleModal.value = ''
      comN.value = SafetyHat
      break
  }
  showModal.value = true
}

onMounted(() => {
  document.oncontextmenu = function (e) {
    e.preventDefault()
  }
})
</script>

<style scoped lang="scss">
@keyframes showHide {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.layout-header-box {
  width: 100%;
  position: relative;
  background: url('@/assets/images/h-bg.png') no-repeat center;
  background-size: 100% 100%;
  min-height: 5vw;

  .update-style {
    animation-name: showHide;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  & > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  :deep(.dv-button) {
    width: 12vw;
    .dv-button-text {
      font-size: 1.5vw;
      width: 10vw;
      margin-left: -2vw;
      margin-bottom: -1vw;
    }
    .dv-button-text svg {
      margin-bottom: -0.5vw;
    }
  }
  &-right-alarm.alarm-tip {
    animation: showHide 1s infinite alternate;
  }
}
</style>