tobaccoFactory/src/components/operation/knowledgeBase.vue

<template>
  <div class="el-overlay">
    <div class="box">
      <div class="box-header">
        <div class="box-title">知识库</div>
        <div class="box-btn" @click="close"></div>
      </div>
      <div class="box-content">
        <div class="box-content-left">
          <div class="box-content-select">
            <!-- <el-select v-model="value" clearable placeholder="请选择设备">
              <el-option>11</el-option>
            </el-select> -->
            <el-select
              @clear="clearHandle"
              @change="getPageGuideVideosData(params1.code)"
              clearable
              v-model="params1.code"
              placeholder="请选择"
            >
              <el-option
                v-for="item in allName"
                :key="item.showName"
                :label="item.showName"
                :value="item.realCode"
              />
            </el-select>
          </div>
          <div class="box-content-table">
            <el-table
              :row-class-name="getRowClassName"
              :data="tableList"
              style="width: 100%"
              @row-click="rowClick"
            >
              <el-table-column prop="deviceCode" label="序号" />
              <el-table-column prop="deviceName" label="名称" />
            </el-table>
          </div>
          <div style="float: right">
            <el-pagination
              v-model:current-page="params1.pageIndex"
              :page-size="params1.pageSize"
              :size="params1.pageSize"
              :pager-count='5'
              layout="total, prev, pager, next"
              :total="total"
              prev-text="上一页"
              next-text="下一页"
              @current-change="getPageGuideVideosData"
            >
            </el-pagination>
          </div>
        </div>
        <div class="box-content-right">
          <div class="bg">
            <videoPlay
              width="100%"
              height="100%"
              title="视频播放"
              :src="options.src"
              :poster="options.poster"
              @play="onPlay"
              @pause="onPause"
              @timeupdate="onTimeupdate"
              @canplay="onCanplay"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import {
  GetVideosIdentity,
  GetPageGuideVideos,
} from "@/api/equipmentManagement/index";
import { videoPlay } from "vue3-video-play/lib/index";
import "vue3-video-play/dist/style.css";
import { onMounted } from "vue";
const value = ref("");
const emit = defineEmits(["closeKnowledgeBase"]);
function close() {
  emit("closeKnowledgeBase", -1);
}
const VideoPlayer1 = ref();
const tableList = ref([]);
// const videoUrl = ref("")
const options = reactive({
  width: document.documentElement.clientWidth,
  autoplay: true,
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  src: "", //视频源
  poster:
    "https://pics0.baidu.com/feed/d833c895d143ad4b28bdb4ea587008a1a50f068e.jpeg?token=ecd7d8fd2fd5c08092bfd91627691f7d", //封面
});
const onPlay = (ev) => {
  console.log("播放");
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};

const onTimeupdate = (ev) => {
  // console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  // console.log(ev, "可以播放");
};

const allName = ref([]);
//获取知识库下拉数据
function getVideosIdentityData() {
  GetVideosIdentity().then((res) => {
    allName.value = res.result;
  });
}
const tableRowIndex = ref(0);
const getRowClassName = ({ row, rowIndex }) => {
  row.index = rowIndex;
  if (tableRowIndex.value == rowIndex) {
    return "highlight-row";
  }
  return "";
};
function rowClick(row) {
  tableRowIndex.value = row.index;
  options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[row.index].videoPath
  console.log(options.src);
}
const equipmentCode = ref("");
const params1 = {
  code: "",
  pageIndex: 1,
  pageSize: 10,
};
// total 总数
const total = ref(0)
// 获取知识库数据
function getPageGuideVideosData(item) {
  GetPageGuideVideos(params1).then((res) => {
    tableList.value = res.result.data;
    total.value = res.result.totalNum
    options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[0].videoPath
  });
}
onMounted(() => {
  getVideosIdentityData();
  getPageGuideVideosData();
});
</script>
<style scoped lang="scss">
:deep(.el-pagination__total){
  left: vw(40) !important;
}
:deep(.highlight-row) {
  background-color: rgba(174, 211, 255, 0.2) !important;
}
.box {
  width: vw(1380);
  height: vh(716);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-image: url("@/assets/images/dialog/device-dialog1.png");
  background-size: 100% 100%;
  &-header {
    width: 100%;
    height: vh(60);
    font-family: "pangmen";
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
  }
  &-title {
    line-height: vh(60);
  }
  &-btn {
    background-image: url("@/assets/images/dialog/close.png");
    width: vw(34);
    height: vh(34);
    position: absolute;
    right: vw(20);
    top: vh(12);
    cursor: pointer;
  }
  &-content {
    height: vh(716 - 60);
    display: flex;
    justify-content: space-between;
    padding: vh(20) vw(20);
    box-sizing: border-box;
    &-table{
      height: vh(500);
    }
    &-select {
      margin-bottom: vh(16);
    }
    &-left {
      width: vw(340);
      height: vh(616);
      background-image: url("@/assets/images/dialog/knowledgeBase-left.png");
      padding: vh(20) vw(20);
      box-sizing: border-box;
      :deep(.el-input) {
        width: vw(300);
        height: vh(36);
      }
    }
    &-right {
      width: vw(980);
      height: vh(616);
      background-size: 100% 100%;
      background-image: url("@/assets/images/dialog/knowledgeBase-right.png");
      .video-js.vjs-fluid,
      .video-js.vjs-16-9,
      .video-js.vjs-4-3 {
        height: 100%;
        width: 100%;
        z-index: 9999;
      }
      .bg {
        width: 100%;
        height: 100%;
        // background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
        // background-size: 100% 100%;
      }
    }
  }
}
</style>