|
|
@@ -1,1159 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="festivalAdd">
|
|
|
- <div class="boxWidth">
|
|
|
- <el-form
|
|
|
- label-position="right"
|
|
|
- label-width="120px"
|
|
|
- :model="listData"
|
|
|
- :rules="rules"
|
|
|
- ref="listData"
|
|
|
- >
|
|
|
- <el-form-item label="适用业务层级">
|
|
|
- <el-select
|
|
|
- v-model="eduType"
|
|
|
- placeholder="请选择教育类型"
|
|
|
- @change="changeEduType"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in eduTypeOptions"
|
|
|
- :key="index"
|
|
|
- :label="item.educationName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <!-- <el-select
|
|
|
- v-model="courType"
|
|
|
- placeholder="请选择业务层次"
|
|
|
- @change="changecourseType"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in newCourTypeOptions"
|
|
|
- :key="index"
|
|
|
- :label="item.projectName + '-' + item.businessName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select> -->
|
|
|
- <el-select
|
|
|
- v-model="courType"
|
|
|
- placeholder="请选择业务层次"
|
|
|
- @change="changecourseType"
|
|
|
- >
|
|
|
- <el-option-group
|
|
|
- v-for="(item, index) in newCourTypeOptions"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(items, indexs) in item.options"
|
|
|
- :key="indexs"
|
|
|
- :label="items.projectName + ' - ' + items.businessName"
|
|
|
- :value="items.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-option-group>
|
|
|
- </el-select>
|
|
|
- <el-popover
|
|
|
- ref="popovers"
|
|
|
- placement="bottom"
|
|
|
- trigger="click"
|
|
|
- @show="showHandle"
|
|
|
- @hide="hideHandle"
|
|
|
- :disabled="courType ? false : true"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- v-model="checkAll"
|
|
|
- @change="handleCheckAllChange"
|
|
|
- :indeterminate="isIndeterminate"
|
|
|
- >全选</el-checkbox
|
|
|
- >
|
|
|
- <el-checkbox-group
|
|
|
- v-model="sujectArray"
|
|
|
- class="checkboxSty"
|
|
|
- @change="handleCheckedCitiesChange"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- v-for="(item, index) in newSujectOption"
|
|
|
- :label="item.newId"
|
|
|
- :key="index"
|
|
|
- >{{ item.subjectName }}</el-checkbox
|
|
|
- >
|
|
|
- </el-checkbox-group>
|
|
|
- <div style="display: block; text-align: center; margin-top: 10px">
|
|
|
- <el-button size="mini" type="primary" @click="submitSujectArray"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- slot="reference"
|
|
|
- style="margin-left: 12px"
|
|
|
- @click="getMessage"
|
|
|
- >请选择科目</el-button
|
|
|
- >
|
|
|
- </el-popover>
|
|
|
- <span style="margin-left: 10px">注:可多选</span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="">
|
|
|
- <div :class="changeHeight ? 'ach' : 'clh'">
|
|
|
- <div
|
|
|
- v-for="(item, index) in newSujectApis"
|
|
|
- :key="index"
|
|
|
- class="listBoxStys"
|
|
|
- >
|
|
|
- {{
|
|
|
- item.educationName +
|
|
|
- " - " +
|
|
|
- item.projectName +
|
|
|
- " - " +
|
|
|
- item.businessName +
|
|
|
- " - " +
|
|
|
- item.subjectName
|
|
|
- }}
|
|
|
- <i class="el-icon-error closeIcons" @click="closeType(index)"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- v-if="newSujectApis.length > 1"
|
|
|
- @click="changeType"
|
|
|
- >{{ changeHeight ? "展开" : "关闭" }}</el-button
|
|
|
- ><el-button
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- v-if="newSujectApis.length > 0"
|
|
|
- @click="sujectApis = []"
|
|
|
- >清空</el-button
|
|
|
- >
|
|
|
- <!-- <span v-if="newSujectApis.length === 0">未选项目类型</span> -->
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="标题前缀" prop="prefixName">
|
|
|
- <el-input v-model="listData.prefixName"></el-input>
|
|
|
- <div style="color: #999">注:便于检索、归类,以及区分一样的标题</div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="节标题" prop="name">
|
|
|
- <el-input v-model="listData.name"></el-input>
|
|
|
- <div style="color: #999">
|
|
|
- 注:请尽量规范易懂,方便在课程目录表呈现给学员
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="节类型">
|
|
|
- <el-select
|
|
|
- clearable
|
|
|
- v-model="listData.sectionType"
|
|
|
- placeholder="请选择节类型"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in sectionTypeOptions"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="直播地址" v-if="listData.sectionType === 2">
|
|
|
- <el-input
|
|
|
- style="width: 300px"
|
|
|
- v-model="listData.liveUrl"
|
|
|
- placeholder="请输入直播地址"
|
|
|
- ></el-input>
|
|
|
- <el-select
|
|
|
- v-model="newActiveLiveUrl"
|
|
|
- placeholder="快捷选中直播地址"
|
|
|
- @change="changeLiveUrl"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in newLiveUrl"
|
|
|
- :key="index"
|
|
|
- :label="item.streamingName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <div v-if="listData.liveUrl" style="margin-top: 10px">
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- type="warning"
|
|
|
- @click="watchZbVideo(listData.liveUrl)"
|
|
|
- >直播预览</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="直播开始时间" v-if="listData.sectionType === 2">
|
|
|
- <el-date-picker
|
|
|
- v-model="listData.liveStartTime"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择直播开始时间"
|
|
|
- value-format="timestamp"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="直播结束时间" v-if="listData.sectionType === 2">
|
|
|
- <el-date-picker
|
|
|
- v-model="listData.liveEndTime"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择直播结束时间"
|
|
|
- value-format="timestamp"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="直播时长"
|
|
|
- v-if="
|
|
|
- listData.sectionType === 2 &&
|
|
|
- listData.liveStartTime &&
|
|
|
- listData.liveEndTime
|
|
|
- "
|
|
|
- >
|
|
|
- {{ compTimeOUT(listData.liveStartTime, listData.liveEndTime) }}
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="URL地址"
|
|
|
- v-if="listData.sectionType === 1 || listData.sectionType === 3"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- style="width: 300px"
|
|
|
- v-model="listData.recordingUrl"
|
|
|
- placeholder="请输入URL地址"
|
|
|
- @change="getApiTime(listData.recordingUrl)"
|
|
|
- ></el-input>
|
|
|
- <label
|
|
|
- for="mobles"
|
|
|
- class="el-button el-button--primary"
|
|
|
- style="margin: 0px 6px; padding: 10px 20px"
|
|
|
- >上传</label
|
|
|
- ><input
|
|
|
- style="display: none"
|
|
|
- type="file"
|
|
|
- id="mobles"
|
|
|
- @change="importMoble"
|
|
|
- />
|
|
|
- <el-select
|
|
|
- v-if="listData.sectionType === 1"
|
|
|
- v-model="newActiveRecordingUrl1"
|
|
|
- filterable
|
|
|
- placeholder="快捷选中录播URL地址"
|
|
|
- @change="changeRecordingUrl1"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in newSteamUrl1"
|
|
|
- :key="index"
|
|
|
- :label="item.streamingName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-if="listData.sectionType === 3"
|
|
|
- v-model="newActiveRecordingUrl2"
|
|
|
- placeholder="快捷选中回放URL地址"
|
|
|
- filterable
|
|
|
- @change="changeRecordingUrl2"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in newSteamUrl2"
|
|
|
- :key="index"
|
|
|
- :label="item.streamingName"
|
|
|
- :value="item.id"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <div v-if="listData.recordingUrl" style="margin-top: 10px">
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- type="warning"
|
|
|
- @click="watchVideo(listData.recordingUrl)"
|
|
|
- >视频预览</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="节时长"
|
|
|
- v-if="listData.sectionType === 1 || listData.sectionType === 3"
|
|
|
- >
|
|
|
- <el-time-picker
|
|
|
- :disabled="disabloutime"
|
|
|
- value-format="HH:mm:ss"
|
|
|
- range-separator=":"
|
|
|
- v-model="listData.durationTime"
|
|
|
- placeholder="请填入节时长"
|
|
|
- >
|
|
|
- </el-time-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="节封面">
|
|
|
- <el-row :gutter="10" style="margin-bottom: 10px">
|
|
|
- <el-col :span="12">
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- border: 2px dashed #999;
|
|
|
- border-radius: 28px;
|
|
|
- line-height: 150px;
|
|
|
- text-align: center;
|
|
|
- "
|
|
|
- v-if="!listData.coverUrl"
|
|
|
- >
|
|
|
- <label for="uplose">
|
|
|
- <i class="el-icon-circle-plus-outline iconStsz"></i
|
|
|
- ></label>
|
|
|
- <input
|
|
|
- ref="file"
|
|
|
- type="file"
|
|
|
- style="display: none"
|
|
|
- id="uplose"
|
|
|
- @change="getImgFile"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <el-image
|
|
|
- v-else
|
|
|
- style="width: 100%"
|
|
|
- :src="$methodsTools.splitImgHost(listData.coverUrl)"
|
|
|
- :preview-src-list="[
|
|
|
- $methodsTools.splitImgHost(listData.coverUrl),
|
|
|
- ]"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </el-col>
|
|
|
- <el-col :span="11">
|
|
|
- <span style="color: #999; font-size: 14px"
|
|
|
- >注:请上传小于300kb,尺寸为750*440的图片,支持gif、jpg、jpeg、png等类型</span
|
|
|
- >
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-button
|
|
|
- v-if="listData.coverUrl"
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- class="margin-top: 20px;"
|
|
|
- @click="clearImgs"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否发布" prop="publishStatus">
|
|
|
- <el-radio-group v-model="listData.publishStatus">
|
|
|
- <el-radio :label="1">是</el-radio>
|
|
|
- <el-radio :label="0">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="backPage">取消</el-button>
|
|
|
- <el-button type="primary" @click="submit('listData')">确定</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- :visible.sync="diavos"
|
|
|
- width="840px"
|
|
|
- @opened="isOkBf"
|
|
|
- :show-close="false"
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <div slot="title" class="hearders">
|
|
|
- <div class="leftTitle">视频预览</div>
|
|
|
- <div class="rightBoxs">
|
|
|
- <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div id="player"></div>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="clears">取 消</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog
|
|
|
- :visible.sync="diavoszb"
|
|
|
- width="840px"
|
|
|
- @opened="isOkBfzb"
|
|
|
- :show-close="false"
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <div slot="title" class="hearders">
|
|
|
- <div class="leftTitle">直播预览</div>
|
|
|
- <div class="rightBoxs">
|
|
|
- <img src="@/assets/images/Close@2x.png" alt="" @click="clearszb" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div id="playerzb"></div>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="clearszb">取 消</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { uploadFile } from "@/utils/uopladFile.js";
|
|
|
-export default {
|
|
|
- name: "FestivalAdd",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isIndeterminate: false,
|
|
|
- checkAll: false,
|
|
|
- vodPlayerJs: "https://player.polyv.net/script/player.js",
|
|
|
- vid: "",
|
|
|
- playerJs:
|
|
|
- "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
|
|
|
- uidzb: "egsxlptzdq",
|
|
|
- vidzb: "",
|
|
|
- diavos: false,
|
|
|
- diavoszb: false,
|
|
|
- fileSetting: {
|
|
|
- desc: "i am desc", // 描述
|
|
|
- cataid: "1639399775001", // 分类ID 可以后端传递 也可以不写 或写死
|
|
|
- tag: "i am tag", // 标签
|
|
|
- luping: 0, // 是否开启视频课件优化处理,对于上传录屏类视频清晰度有所优化:0为不开启,1为开启
|
|
|
- keepsource: 1, // 是否源文件播放(不对视频进行编码):0为编码,1为不编码
|
|
|
- },
|
|
|
- sectionTypeOptions: [
|
|
|
- {
|
|
|
- label: "录播",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "直播",
|
|
|
- value: 2,
|
|
|
- },
|
|
|
- // {
|
|
|
- // label: "回放",
|
|
|
- // value: 3,
|
|
|
- // },
|
|
|
- ],
|
|
|
- // 弹窗数据
|
|
|
- changeHeight: true,
|
|
|
- bfImg: "oss/images/avatar/20211013/1634097664410_1397766697",
|
|
|
- listData: {
|
|
|
- durationTime: "",
|
|
|
- sectionType: 1,
|
|
|
- publishStatus: 1,
|
|
|
- recordingUrl: "",
|
|
|
- liveUrl: "",
|
|
|
- coverUrl: "oss/images/avatar/20211013/1634097664410_1397766697",
|
|
|
- },
|
|
|
- newActiveLiveUrl: "",
|
|
|
- newLiveUrl: [], //直播流地址
|
|
|
- newActiveRecordingUrl1: "",
|
|
|
- newSteamUrl1: [], //录播流地址
|
|
|
- newActiveRecordingUrl2: "",
|
|
|
- newSteamUrl2: [], //回放流地址
|
|
|
- eduTypeOptions: [], //教育类型数据
|
|
|
- courTypeOptions: [], //业务层次数据
|
|
|
- newCourTypeOptions: [], //当前业务层次数据
|
|
|
- sujectOption: [], //科目数据
|
|
|
- newSujectOption: [], //当前科目数据数据
|
|
|
- eduType: "", //当前选中教育类型
|
|
|
- courType: "", //当前选中业务层次
|
|
|
- sujectApis: [], //当前存在的科目
|
|
|
- newSujectApis: [],
|
|
|
- sujectArray: [], //选中的科目
|
|
|
- disabloutime: false,
|
|
|
- //表单验证
|
|
|
- rules: {
|
|
|
- prefixName: [
|
|
|
- { required: true, message: "请输入标题前缀", trigger: "blur" },
|
|
|
- ],
|
|
|
- name: [{ required: true, message: "请输入节标题", trigger: "blur" }],
|
|
|
- // liveDuration: [
|
|
|
- // { required: true, message: "节时长不能为空" },
|
|
|
- // { type: "number", message: "节时长必须为数字值" },
|
|
|
- // ],
|
|
|
- publishStatus: [
|
|
|
- { required: true, message: "请选择是否发布", trigger: "change" },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- sujectApis: {
|
|
|
- immediate: true,
|
|
|
- handler(newName, oldName) {
|
|
|
- this.changeTypes();
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- // computed: {
|
|
|
- // compTimes() {
|
|
|
- // const aTime = 192;
|
|
|
- // let chasTime = this.$methodsTools.secondToDate(aTime, false);
|
|
|
- // console.log(chasTime);
|
|
|
- // return `00:00:00 - ${chasTime}`;
|
|
|
- // },
|
|
|
- // },
|
|
|
- mounted() {
|
|
|
- this.getDict();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleCheckedCitiesChange() {
|
|
|
- let nid = this.newSujectOption.map((item) => {
|
|
|
- return item.newId;
|
|
|
- });
|
|
|
- this.checkAll = this.sujectArray.length === nid.length;
|
|
|
- this.isIndeterminate =
|
|
|
- this.sujectArray.length > 0 && this.sujectArray.length < nid.length;
|
|
|
- },
|
|
|
- setFunc(arr) {
|
|
|
- var arrays = [];
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- if (!arrays.includes(arr[i])) {
|
|
|
- arrays.push(arr[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- return arrays;
|
|
|
- },
|
|
|
- handleCheckAllChange(val) {
|
|
|
- if (val) {
|
|
|
- let nid = this.newSujectOption.map((item) => {
|
|
|
- return item.newId;
|
|
|
- });
|
|
|
- let arrays = this.sujectArray.concat(nid);
|
|
|
- this.sujectArray = this.setFunc(arrays);
|
|
|
- this.isIndeterminate = false;
|
|
|
- } else {
|
|
|
- let nid = this.newSujectOption.map((item) => {
|
|
|
- return item.newId;
|
|
|
- });
|
|
|
- let newArr = [];
|
|
|
- this.sujectArray.forEach((item) => {
|
|
|
- if (!nid.includes(item)) {
|
|
|
- newArr.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- this.sujectArray = newArr;
|
|
|
- this.isIndeterminate = false;
|
|
|
- }
|
|
|
- },
|
|
|
- compTimeOUT(start, end) {
|
|
|
- if (start && end) {
|
|
|
- if (end < start) {
|
|
|
- return "请检查开始与结束的时间范围";
|
|
|
- }
|
|
|
- const asTimes = end / 1000 - start / 1000;
|
|
|
- return this.$methodsTools.secondToDate(asTimes, false);
|
|
|
- } else {
|
|
|
- return "未检测到直播开始时间结束时间,无法计算!";
|
|
|
- }
|
|
|
- },
|
|
|
- getApiTime(val) {
|
|
|
- var self = this;
|
|
|
- const valueUrl = val.replace(/\s/g, "");
|
|
|
- if (valueUrl && valueUrl.length > 30)
|
|
|
- this.$api
|
|
|
- .inquirepolyvvideo(valueUrl)
|
|
|
- .then((res) => {
|
|
|
- if (res.data.duration) {
|
|
|
- self.listData.durationTime = res.data.duration;
|
|
|
- self.disabloutime = true;
|
|
|
- } else {
|
|
|
- self.disabloutime = false;
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- self.disabloutime = false;
|
|
|
- });
|
|
|
- },
|
|
|
- loadPlayerScript(callback) {
|
|
|
- if (!window.polyvPlayer) {
|
|
|
- const myScript = document.createElement("script");
|
|
|
- myScript.setAttribute("src", this.vodPlayerJs);
|
|
|
- myScript.onload = callback;
|
|
|
- document.body.appendChild(myScript);
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- this.player.on("serverError", (...params) => {
|
|
|
- this.$message.error(returnTitle(params[1]));
|
|
|
- console.log(params);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- loadPlayer() {
|
|
|
- var self = this;
|
|
|
- const polyvPlayer = window.polyvPlayer;
|
|
|
- self.player = polyvPlayer({
|
|
|
- wrap: "#player",
|
|
|
- width: 800,
|
|
|
- height: 533,
|
|
|
- vid: self.vid,
|
|
|
- teaser_show: 0,
|
|
|
- playsafe: function (vid, next) {
|
|
|
- self.$api.obtainpolyvvideosign(vid).then((res) => {
|
|
|
- next(res.data);
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {String} 关闭视频窗口-销毁实例
|
|
|
- */
|
|
|
- clears() {
|
|
|
- this.diavos = false;
|
|
|
- if (this.player) {
|
|
|
- this.player.destroy();
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {String} 视频查看
|
|
|
- */
|
|
|
- watchVideo(url) {
|
|
|
- if (!url) {
|
|
|
- this.$message.warning("请检查URL地址是否输入完整");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.vid = url;
|
|
|
- this.diavos = true;
|
|
|
- },
|
|
|
- isOkBf() {
|
|
|
- this.loadPlayerScript(this.loadPlayer);
|
|
|
- },
|
|
|
- /**
|
|
|
- * @param {String} 直播预览
|
|
|
- */
|
|
|
- watchZbVideo(url) {
|
|
|
- if (!url) {
|
|
|
- this.$message.warning("请检查直播流地址是否输入完整");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.vidzb = url;
|
|
|
- this.diavoszb = true;
|
|
|
- },
|
|
|
- loadPlayerScriptzb(callback) {
|
|
|
- if (!window.polyvLivePlayer) {
|
|
|
- const myScript = document.createElement("script");
|
|
|
- myScript.setAttribute("src", this.playerJs);
|
|
|
- myScript.onload = callback;
|
|
|
- document.body.appendChild(myScript);
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- loadPlayerzb() {
|
|
|
- const polyvLivePlayer = window.polyvLivePlayer;
|
|
|
- this.playerzb = polyvLivePlayer({
|
|
|
- wrap: "#playerzb",
|
|
|
- width: 800,
|
|
|
- height: 533,
|
|
|
- uid: this.uidzb,
|
|
|
- vid: this.vidzb,
|
|
|
- });
|
|
|
- },
|
|
|
- clearszb() {
|
|
|
- this.diavoszb = false;
|
|
|
- if (this.playerzb) {
|
|
|
- this.playerzb.destroy();
|
|
|
- }
|
|
|
- },
|
|
|
- isOkBfzb() {
|
|
|
- this.loadPlayerScriptzb(this.loadPlayerzb);
|
|
|
- },
|
|
|
- importMoble(event) {
|
|
|
- // var self = this;
|
|
|
- var file = event.target.files[0];
|
|
|
- // let formData = new FormData();
|
|
|
- // formData.append("file", file);
|
|
|
- // console.log(formData);
|
|
|
- if (!event.target.value) {
|
|
|
- this.$message.error("请选择您要上传的文件");
|
|
|
- return false;
|
|
|
- }
|
|
|
- /**
|
|
|
- * @param: event.target.files -> 传递的文件list
|
|
|
- * @param: this.fileSetting -> 常规配置 上面有备注
|
|
|
- * @param: 回调
|
|
|
- */
|
|
|
- uploadFile(file, this.fileSetting, (event) => {
|
|
|
- this.listData.recordingUrl = event.vid;
|
|
|
- this.listData.durationTime = "";
|
|
|
- this.getApiTime(event.vid);
|
|
|
- });
|
|
|
- },
|
|
|
- getMessage() {
|
|
|
- if (!this.courType) {
|
|
|
- this.$message.warning("请先选择业务层级");
|
|
|
- }
|
|
|
- },
|
|
|
- clearImgs() {
|
|
|
- this.listData.coverUrl = "";
|
|
|
- },
|
|
|
- changeTypes() {
|
|
|
- var self = this;
|
|
|
- var arrays = [];
|
|
|
- this.sujectApis.map((item, index) => {
|
|
|
- this.courTypeOptions.map((items) => {
|
|
|
- if (items.id === item.split("-").map(Number)[0]) {
|
|
|
- var obj = {
|
|
|
- educationTypeId: items.educationId,
|
|
|
- educationName: items.educationName,
|
|
|
- projectId: items.projectId,
|
|
|
- projectName: items.projectName,
|
|
|
- businessId: items.id,
|
|
|
- businessName: items.businessName,
|
|
|
- };
|
|
|
- self.sujectOption.map((i) => {
|
|
|
- if (
|
|
|
- i.id === item.split("-").map(Number)[1] &&
|
|
|
- i.courseArrays.indexOf(items.projectId) !== -1
|
|
|
- ) {
|
|
|
- obj.subjectName = i.subjectName;
|
|
|
- obj.subjectId = i.id;
|
|
|
- }
|
|
|
- });
|
|
|
- arrays.push(obj);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- this.newSujectApis = arrays;
|
|
|
- },
|
|
|
- changeType() {
|
|
|
- this.changeHeight = !this.changeHeight;
|
|
|
- },
|
|
|
- submitSujectArray() {
|
|
|
- var self = this;
|
|
|
- this.sujectApis = this.sujectApis.filter((item, index) => {
|
|
|
- return item.split("-").map(Number)[0] !== Number(self.courType);
|
|
|
- });
|
|
|
- for (let i = 0; i < this.sujectArray.length; i++) {
|
|
|
- this.sujectApis.push(this.sujectArray[i]);
|
|
|
- }
|
|
|
- this.$refs.popovers.doClose();
|
|
|
- this.$nextTick(() => {
|
|
|
- this.changeUrl();
|
|
|
- });
|
|
|
- },
|
|
|
- changeUrl() {
|
|
|
- var arr = this.newSujectApis.map((val) => val.businessId);
|
|
|
- const unique = [...new Set(arr)];
|
|
|
- var busId = "";
|
|
|
- if (unique.length) {
|
|
|
- busId = unique.toString();
|
|
|
- } else {
|
|
|
- busId = "";
|
|
|
- }
|
|
|
- this.$api.inquireCourseStreaming({ status: 1 }).then((res) => {
|
|
|
- var arraystt = [];
|
|
|
- var newarrays1tt = [];
|
|
|
- var newarrays2tt = [];
|
|
|
- res.rows.map((item) => {
|
|
|
- if (item.streamingType === 1) {
|
|
|
- arraystt.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 2) {
|
|
|
- newarrays1tt.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 3) {
|
|
|
- newarrays2tt.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- this.$api
|
|
|
- .inquireCourseStreaming({ status: 1, businessId: busId })
|
|
|
- .then((result) => {
|
|
|
- var arrays = [];
|
|
|
- var newarrays1 = [];
|
|
|
- var newarrays2 = [];
|
|
|
- result.rows.map((item) => {
|
|
|
- if (item.streamingType === 1) {
|
|
|
- arrays.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 2) {
|
|
|
- newarrays1.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 3) {
|
|
|
- newarrays2.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- if (arrays.length) {
|
|
|
- this.newLiveUrl = arrays;
|
|
|
- } else {
|
|
|
- this.newLiveUrl = arraystt;
|
|
|
- }
|
|
|
- if (newarrays1.length) {
|
|
|
- this.newSteamUrl1 = newarrays1;
|
|
|
- } else {
|
|
|
- this.newSteamUrl1 = newarrays1tt;
|
|
|
- }
|
|
|
- if (newarrays2.length) {
|
|
|
- this.newSteamUrl2 = newarrays2;
|
|
|
- } else {
|
|
|
- this.newSteamUrl2 = newarrays2tt;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- showHandle() {
|
|
|
- var array = [];
|
|
|
- for (let i = 0; i < this.sujectApis.length; i++) {
|
|
|
- if (
|
|
|
- this.sujectApis[i].split("-").map(Number)[0] === Number(this.courType)
|
|
|
- ) {
|
|
|
- array.push(this.sujectApis[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- this.sujectArray = array;
|
|
|
- if (!this.newSujectOption.length) {
|
|
|
- this.$message.warning("该业务层次暂无关联科目");
|
|
|
- this.$refs.popovers.doClose();
|
|
|
- return;
|
|
|
- }
|
|
|
- this.newSujectOption.map((item) => {
|
|
|
- item.newId = this.courType + "-" + item.id;
|
|
|
- });
|
|
|
- this.handleCheckedCitiesChange();
|
|
|
- },
|
|
|
- hideHandle() {},
|
|
|
- getDict() {
|
|
|
- this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
|
|
|
- this.eduTypeOptions = res.rows;
|
|
|
- });
|
|
|
- this.$methodsTools.concatList(true).then((res) => {
|
|
|
- this.courTypeOptions = res.value;
|
|
|
- this.newCourTypeOptions = res.options;
|
|
|
- });
|
|
|
-
|
|
|
- this.$api.inquireCourseSubject({ status: 1 }).then((res) => {
|
|
|
- res.rows.map((item, index) => {
|
|
|
- var array = [];
|
|
|
- item.courseProjectTypes.map((items, indexs) => {
|
|
|
- array.push(items.id);
|
|
|
- });
|
|
|
- item.courseArrays = array;
|
|
|
- });
|
|
|
- this.sujectOption = res.rows;
|
|
|
- });
|
|
|
- this.$api.inquireCourseStreaming({ status: 1 }).then((res) => {
|
|
|
- var arrays = [];
|
|
|
- var newarrays1 = [];
|
|
|
- var newarrays2 = [];
|
|
|
- res.rows.map((item) => {
|
|
|
- if (item.streamingType === 1) {
|
|
|
- arrays.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 2) {
|
|
|
- newarrays1.push(item);
|
|
|
- }
|
|
|
- if (item.streamingType === 3) {
|
|
|
- newarrays2.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- this.newLiveUrl = arrays;
|
|
|
- this.newSteamUrl1 = newarrays1;
|
|
|
- this.newSteamUrl2 = newarrays2;
|
|
|
- });
|
|
|
- },
|
|
|
- changeEduType(v) {
|
|
|
- this.$methodsTools.concatList(false, v).then((res) => {
|
|
|
- this.newCourTypeOptions = res.options;
|
|
|
- });
|
|
|
- this.courType = "";
|
|
|
- },
|
|
|
- changecourseType(ids) {
|
|
|
- /**
|
|
|
- * 进入缓存方法
|
|
|
- */
|
|
|
- this.$methodsTools.cacheBusinessList(ids);
|
|
|
- /**
|
|
|
- * 查找选中的业务层次对应的教育类型ID 并筛选出对应业务层级列表
|
|
|
- */
|
|
|
- let idArr = this.courTypeOptions.find((item) => {
|
|
|
- return item.id == ids;
|
|
|
- });
|
|
|
- this.eduType = idArr.educationId;
|
|
|
- this.$methodsTools.concatList(false, idArr.educationId).then((res) => {
|
|
|
- this.newCourTypeOptions = res.options;
|
|
|
- });
|
|
|
- /**
|
|
|
- * 筛选科目
|
|
|
- */
|
|
|
- var array = this.sujectOption.filter((items, indexs) => {
|
|
|
- return items.courseArrays.includes(idArr.projectId);
|
|
|
- });
|
|
|
- this.newSujectOption = array;
|
|
|
- /**
|
|
|
- * 关闭科目弹窗
|
|
|
- */
|
|
|
- this.$refs.popovers.doClose();
|
|
|
- },
|
|
|
- submit(formName) {
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // if (
|
|
|
- // this.listData.coverUrl === "" ||
|
|
|
- // this.listData.coverUrl === null ||
|
|
|
- // this.listData.coverUrl === undefined
|
|
|
- // ) {
|
|
|
- // this.$message.error("请上传节封面");
|
|
|
- // return false;
|
|
|
- // }
|
|
|
- this.rulesTableSumbit();
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- async rulesTableSumbit() {
|
|
|
- var dataInfos = {
|
|
|
- status: 1,
|
|
|
- businessList: this.newSujectApis,
|
|
|
- coverUrl: this.listData.coverUrl,
|
|
|
- name: this.listData.name,
|
|
|
- prefixName: this.listData.prefixName,
|
|
|
- publishStatus: this.listData.publishStatus,
|
|
|
- };
|
|
|
-
|
|
|
- if (this.listData.sectionType === 2) {
|
|
|
- dataInfos.sectionType = 2;
|
|
|
- dataInfos.liveUrl = this.listData.liveUrl;
|
|
|
- dataInfos.liveStartTime = this.$methodsTools.time10to13(
|
|
|
- this.listData.liveStartTime,
|
|
|
- 1
|
|
|
- );
|
|
|
- dataInfos.liveEndTime = this.$methodsTools.time10to13(
|
|
|
- this.listData.liveEndTime,
|
|
|
- 1
|
|
|
- );
|
|
|
- if (
|
|
|
- dataInfos.liveStartTime &&
|
|
|
- dataInfos.liveEndTime &&
|
|
|
- dataInfos.liveEndTime < dataInfos.liveStartTime
|
|
|
- ) {
|
|
|
- this.$message.warning("请检查直播开始与结束时间范围");
|
|
|
- return;
|
|
|
- }
|
|
|
- dataInfos.durationTime =
|
|
|
- dataInfos.liveEndTime - dataInfos.liveStartTime;
|
|
|
- }
|
|
|
- if (this.listData.sectionType === 1) {
|
|
|
- dataInfos.sectionType = 1;
|
|
|
- dataInfos.recordingUrl = this.listData.recordingUrl;
|
|
|
- dataInfos.durationTime = this.$methodsTools.secondFormDate(
|
|
|
- this.listData.durationTime
|
|
|
- );
|
|
|
- }
|
|
|
- if (this.listData.sectionType === 3) {
|
|
|
- dataInfos.sectionType = 3;
|
|
|
- dataInfos.recordingUrl = this.listData.recordingUrl;
|
|
|
- dataInfos.durationTime = this.$methodsTools.secondFormDate(
|
|
|
- this.listData.durationTime
|
|
|
- );
|
|
|
- }
|
|
|
- this.$api.appCourseSection(dataInfos).then((res) => {
|
|
|
- this.$message.success("新增成功");
|
|
|
- setTimeout(() => {
|
|
|
- this.$store.dispatch("tagsView/exitView", this.$route).then((res) => {
|
|
|
- this.$router.push({
|
|
|
- path: "festival",
|
|
|
- });
|
|
|
- });
|
|
|
- }, 500);
|
|
|
- });
|
|
|
- },
|
|
|
- backPage() {
|
|
|
- this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
|
|
|
- this.$router.push({
|
|
|
- path: "festival",
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- closeType(index) {
|
|
|
- this.sujectApis.splice(index, 1);
|
|
|
- this.$nextTick(() => {
|
|
|
- this.changeUrl();
|
|
|
- });
|
|
|
- },
|
|
|
- changeLiveUrl() {
|
|
|
- this.newLiveUrl.map((item) => {
|
|
|
- if (item.id === this.newActiveLiveUrl) {
|
|
|
- this.listData.liveUrl = item.liveUrl;
|
|
|
- }
|
|
|
- });
|
|
|
- this.newActiveLiveUrl = "";
|
|
|
- },
|
|
|
- changeRecordingUrl1() {
|
|
|
- this.newSteamUrl1.map((item) => {
|
|
|
- if (item.id === this.newActiveRecordingUrl1) {
|
|
|
- this.listData.recordingUrl = item.recordingVideoId;
|
|
|
- this.getApiTime(item.recordingVideoId);
|
|
|
- }
|
|
|
- });
|
|
|
- this.newActiveRecordingUrl1 = "";
|
|
|
- },
|
|
|
- changeRecordingUrl2() {
|
|
|
- this.newSteamUrl2.map((item) => {
|
|
|
- if (item.id === this.newActiveRecordingUrl2) {
|
|
|
- this.listData.recordingUrl = item.playbackUrl;
|
|
|
- this.getApiTime(item.recordingVideoId);
|
|
|
- }
|
|
|
- });
|
|
|
- this.newActiveRecordingUrl2 = "";
|
|
|
- },
|
|
|
- getImgFile() {
|
|
|
- var self = this;
|
|
|
- var file = self.$refs.file.files[0];
|
|
|
- if (file === undefined) {
|
|
|
- self.$set(self.listData, "coverUrl", "");
|
|
|
- return;
|
|
|
- }
|
|
|
- if (file.size > 0.3 * 1024 * 1024) {
|
|
|
- self.$message.error("图片不得大于300kb");
|
|
|
- return;
|
|
|
- }
|
|
|
- var type = self.$refs.file.value.toLowerCase().split(".").splice(-1);
|
|
|
- if (
|
|
|
- type[0] != "jpg" &&
|
|
|
- type[0] != "png" &&
|
|
|
- type[0] != "jpeg" &&
|
|
|
- type[0] != "gif"
|
|
|
- ) {
|
|
|
- self.$message.error("上传格式需为:.jpg/.png/.jpeg/gif");
|
|
|
- self.$refs.file.value = "";
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$upload.upload(file, 0).then((res) => {
|
|
|
- self.listData.coverUrl = res;
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-/deep/.el-button {
|
|
|
- border-radius: 8px;
|
|
|
-}
|
|
|
-/deep/.el-dialog {
|
|
|
- border-radius: 8px;
|
|
|
- .el-dialog__header {
|
|
|
- padding: 0;
|
|
|
- .hearders {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0px 18px 0px 20px;
|
|
|
- border-bottom: 1px solid #e2e2e2;
|
|
|
- .leftTitle {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #2f4378;
|
|
|
- }
|
|
|
- .rightBoxs {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- margin-left: 13px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-dialog__footer {
|
|
|
- padding: 0;
|
|
|
- .dialog-footer {
|
|
|
- padding: 0px 40px;
|
|
|
- height: 70px;
|
|
|
- border-top: 1px solid #e2e2e2;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.imgBox {
|
|
|
- width: 100%;
|
|
|
- // height: 210px;
|
|
|
- border: 1px solid #e2e2e2;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 8px 8px 3px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .imgLabel {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- border: 1px dotted #e2e2e2;
|
|
|
- color: #999;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 8px;
|
|
|
- .msPhoto {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- max-width: 100%;
|
|
|
- max-height: 270px;
|
|
|
- img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 270px;
|
|
|
- }
|
|
|
- }
|
|
|
- .imgbbx {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- i {
|
|
|
- font-weight: bold;
|
|
|
- margin: 14px 0;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- p {
|
|
|
- margin: 5px 0px;
|
|
|
- }
|
|
|
-}
|
|
|
-.boxWidth {
|
|
|
- width: 770px;
|
|
|
-}
|
|
|
-.numInputs {
|
|
|
- width: 150px;
|
|
|
-}
|
|
|
-.checkboxSty {
|
|
|
- max-height: 210px;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.listBoxStys {
|
|
|
- flex-shrink: 0;
|
|
|
- padding: 0px 10px;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #eee;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 6px;
|
|
|
-}
|
|
|
-.closeIcons {
|
|
|
- color: red;
|
|
|
- cursor: pointer;
|
|
|
- margin-left: 6px;
|
|
|
-}
|
|
|
-.ach {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.clh {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-.imgBoxins {
|
|
|
- width: 375px;
|
|
|
- height: 220px;
|
|
|
- text-align: center;
|
|
|
- img {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.iconStsz {
|
|
|
- font-size: 40px;
|
|
|
- color: #67c23a;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-</style>
|