nkScreen/src/views/Ai/Ai.vue

<template>
  <div class="home">
    <div class="home_flex">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="人员行为分析">
        <div class="chart_content">
          <div class="chart_scroll">
            <vue3-seamless-scroll
              v-if="personList.length > 0"
              :hover="true"
              :step="0.2"
              :hover-stop="true"
              :list="personList"
              class="warn_scroll">
              <div class="chart_flex" v-for="(item, i) in personList">
                <div class="chart_icon" v-viewer>
                  <img class="img_url" :src="item.carImgUrl" alt="">
                </div>
                <div class="chart_text">
                  <div>巡检时间：{{item.capTime}}</div>
                  <div class="flex_text">
                    <div>姓名：{{item.name}}</div>
                    <div>人员行为：{{item.personType}}</div>
                  </div>
                  <div class="flex_text">
                    <div>巡检位置：{{item.devName}}</div>
                    <div>巡检结果：{{item.capResult}}</div>
                  </div>
                </div>
              </div>
            </vue3-seamless-scroll>
            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
          </div>
        </div>
      </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="车辆识别">
        <div class="chart_content">
          <div class="chart_scroll">
            <vue3-seamless-scroll
              v-if="carList.length > 0"
              :hover="true"
              :step="0.2"
              :hover-stop="true"
              :list="carList"
              class="warn_scroll">
              <div class="chart_flex" v-for="item in carList">
                <div class="chart_icon" v-viewer>
                  <img v-if="item.carImgUrl" class="img_url" :src="item.carImgUrl" alt="">
                </div>
                <div class="chart_text">
                  <div>巡检时间：{{item.capTime}}</div>
                  <div class="flex_text">
                    <div>车牌号：{{item.carNum}}</div>
                    <div>车牌颜色：黑色</div>
                  </div>
                  <div class="flex_text">
                    <div>巡检位置：{{item.devName}}</div>
                    <div>巡检结果：{{item.capResult}}</div>
                  </div>
                </div>
              </div>
            </vue3-seamless-scroll>
            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
          </div>
        </div>
      </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <x-box v-if="show" name="镜头脏污">
        <div class="chart_content">
          <div class="chart_scroll">
            <vue3-seamless-scroll
              v-if="dirtyList.length > 0"
              :hover="true"
              :step="0.2"
              :hover-stop="true"
              :list="dirtyList"
              class="warn_scroll">
              <div class="chart_flex" v-for="(item, i) in dirtyList" :key="i">
                <div class="chart_icon" v-viewer>
                  <img v-if="item.imgUrl" class="img_url" :src="item.imgUrl" alt="">
                </div>
              <div class="chart_text">
                <div>巡检时间：{{item.capTime}}</div>
                <div>巡检位置：{{item.devName}}</div>
              </div>
            </div>
            </vue3-seamless-scroll>
            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
          </div>
        </div>
      </x-box>
      </transition>
    </div>
    <div class="home_center">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutUp"
      >
        <x-tabs v-if="show"></x-tabs>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__zoomIn"
        leave-active-class="animate__animated animate__zoomOut"
      >
        <div v-if="url" class="video">
          <video v-if="url" autoplay muted :src="url"></video>
        </div>
      </transition>
      <div class="picture"></div>
    </div>
    <div class="home_flex">
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
      >
        <x-box v-if="show" name="周界巡检">
        <div class="chart_content">
          <div class="chart_scroll">
            <vue3-seamless-scroll
              v-if="speciesList.length > 0"
              :hover="true"
              :step="0.2"
              :hover-stop="true"
              :list="speciesList"
              class="warn_scroll">
              <div class="chart_flex" v-for="item in speciesList">
                <div class="chart_icon" v-viewer>
                  <img v-if="item.imgUrl" class="img_url" :src="item.imgUrl" alt="">
                </div>
              <div class="chart_text">
                <div>巡检时间：{{item.capTime}}</div>
                <div>巡检位置：{{item.devName}}</div>
              </div>
            </div>
            </vue3-seamless-scroll>
            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
          </div>
        </div>
      </x-box>
      </transition>
      <transition
        name="custom-up"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
      >
       <x-box v-if="show" name="视频监控" :height="600">
        <div class="chart_content">
          <div class="chart_scroll">
            <div class="monit" v-for="(items, i) in list" :key="items.id">
              <div class="monit_parent" @click="clickParent(i)">
                <div v-if="items.isShow">
                  <caret-down-outlined style="color: #00F3FF" />
                </div>
                <div v-else>
                  <caret-right-outlined style="color: #00F3FF" />
                </div>
                <div class="monit_name">{{items.name}}</div>
              </div>
              <div v-if="items.isShow" class="monit_children">
                <div v-for="item in items.children" :class="['monit_children_item', item.isShow ? 'monit_children_select' : '']" @click.stop="clickChild(item)">
                  <div>{{item.name}}</div>
                  <div v-if="item.isShow" class="look">查看中</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </x-box>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "Ai"
}
</script>
<script setup>
  import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons-vue";
  import { getAiPerson, getAiCar, getAiSpecies, getAiDirty } from "../../utils/api";
  import {onMounted, ref} from 'vue';
  import XBox from "../../components/XBox.vue";
  import XTabs from '../../components/XTabs.vue';
  import { Empty } from 'ant-design-vue';

  const personList = ref([]);
  const initPerson = () => {
    let params = {
      current: 1,
      pageSize: 10
    }
    getAiPerson(params).then(res => {
      personList.value = res.data.records
    })
  }

  const carList = ref([])
  const initCar = () => {
    let params = {
      current: 1,
      pageSize: 10
    }
    getAiCar(params).then(res => {
      carList.value = res.data.records
    })
  }

  const speciesList = ref([])
  const initSpecies = () => {
    let params = {
      current: 1,
      pageSize: 10
    }
    getAiSpecies(params).then(res => {
      speciesList.value = res.data.records
    })
  }

  const dirtyList = ref([])
  const initDirty = () => {
    let params = {
      current: 1,
      size: 10
    }
    getAiDirty(params).then(res => {
      dirtyList.value = res.data.records
    })
  }

  const list = ref([
    {
      name: '育肥一舍',
      id: 1,
      isShow: false,
      children: [
        {
          name: '育肥一舍一单元',
          id: 11,
          isShow: false
        },
        {
          name: '育肥一舍二单元',
          id: 12,
          isShow: false
        },
        {
          name: '育肥一舍三单元',
          id: 13,
          isShow: false
        },
        {
          name: '育肥一舍四单元',
          id: 14,
          isShow: false
        },
      ]
    },
    {
      name: '育肥二舍',
      id: 2,
      isShow: false,
      children: [
        {
          name: '育肥一舍一单元',
          id: 21,
          isShow: false
        },
        {
          name: '育肥一舍二单元',
          id: 22,
          isShow: false
        },
        {
          name: '育肥一舍三单元',
          id: 23,
          isShow: false
        },
        {
          name: '育肥一舍四单元',
          id: 24,
          isShow: false
        },
      ]
    },
  ])

  const clickParent = (i) => {
    list.value[i].isShow = !list.value[i].isShow;
  }

  const url = ref('')
  const clickChild = (n) => {
    url.value = 'http://119.3.93.18/video/qingshan/sample.mp4'
    list.value.forEach(items => {
      items.children.forEach(item => {
        if(item.id === n.id) {
          item.isShow = true
        } else {
          item.isShow = false
        }
      })
    })
  }

  const show = ref(false)
  onMounted(() => {
    initPerson()
    initCar()
    initSpecies()
    initDirty()
    show.value = true
  })
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
}
.home_flex {
  width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home_center {
  width: 840px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chart_content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
}
.chart_scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.chart_scroll::-webkit-scrollbar {
  display: none;
}
.chart_flex {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.chart_icon {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #018AFE;
  background: #00325B;
  overflow: hidden;
  cursor: pointer;
}
.chart_text {
  margin-left: 6px;
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  background: #002F50;
  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
  padding: 5px 10px;
  color: #BBD6FF;
  cursor: pointer;
  border: 1px solid #00668D;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex_text {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monit {
  margin-bottom: 2px;
}
.monit_parent {
  width: 100%;
  height: 40px;
  background: #002F50;
  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
  padding: 5px 10px;
  color: #BBD6FF;
  cursor: pointer;
  border: 1px solid #00668D;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
}
.monit_name {
  margin-left: 20px;
}
.monit_children {
  box-sizing: border-box;
  padding: 10px 0;
  background: #001836;
}
.monit_children_item {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 45px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monit_children_select {
  background: #00325B;
}
.look {
  position: relative;
  color: #00F3FF
}
.look:before {
  content: '';
  width: 5px;
  height: 5px;
  background: #00F3FF;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: -12px
}
.warn_scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.warn_scroll::-webkit-scrollbar {
  display: none;
}
.img_url {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video {
  width: 100%;
  height: 500px;
}
.picture {
  width: 100%;
  height: 200px;
}
</style>