|
@@ -0,0 +1,1527 @@
|
|
|
+<template>
|
|
|
+ <div class="countdown">
|
|
|
+ <div class="c_timeBox" v-if="showType == 0">
|
|
|
+ <div class="c_tb_top">
|
|
|
+ <div class="c_time">
|
|
|
+ <div class="c_t_item" v-if="type == 0">
|
|
|
+ <div class="c_t_i_card">
|
|
|
+ <div>
|
|
|
+ <span class="c_t_i_btnTop" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="addTime(600)"
|
|
|
+ >+</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <div>{{ countdownTimeShow.m1 }}</div>
|
|
|
+ <span class="c_t_i_btnBottom" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="reduceTime(600)"
|
|
|
+ >-</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="c_t_i_btnTop" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="addTime(60)"
|
|
|
+ >+</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <div>{{ countdownTimeShow.m2 }}</div>
|
|
|
+ <span class="c_t_i_btnBottom" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="reduceTime(60)"
|
|
|
+ >-</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <span>分</span>
|
|
|
+ </div>
|
|
|
+ <div class="c_t_i_card">
|
|
|
+ <div>
|
|
|
+ <span class="c_t_i_btnTop" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="addTime(10)"
|
|
|
+ >+</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <div>{{ countdownTimeShow.s1 }}</div>
|
|
|
+ <span class="c_t_i_btnBottom" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="reduceTime(10)"
|
|
|
+ >-</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="c_t_i_btnTop" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="addTime(1)"
|
|
|
+ >+</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <div>{{ countdownTimeShow.s2 }}</div>
|
|
|
+ <span class="c_t_i_btnBottom" v-if="!isCountdown"
|
|
|
+ ><el-button class="c_t_i_btn" @click.stop="reduceTime(1)"
|
|
|
+ >-</el-button
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <span>秒</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c_t_item" v-if="type == 1">
|
|
|
+ <div class="c_t_i_card">
|
|
|
+ <div>
|
|
|
+ <div>{{ keepTimeShow.m1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>{{ keepTimeShow.m2 }}</div>
|
|
|
+ </div>
|
|
|
+ <span>分</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="c_t_i_card">
|
|
|
+ <div>
|
|
|
+ <div>{{ keepTimeShow.s1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>{{ keepTimeShow.s2 }}</div>
|
|
|
+ </div>
|
|
|
+ <span>秒</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="c_choiceTime" v-if="type == 0">
|
|
|
+ <div class="c_title">
|
|
|
+ <span>倒计时长</span>
|
|
|
+ </div>
|
|
|
+ <div class="c_ct_box">
|
|
|
+ <span @click.stop="setCountdownTime(30)">30秒</span>
|
|
|
+ <span @click.stop="setCountdownTime(60)">1分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(120)">2分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(180)">3分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(300)">5分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(360)">6分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(480)">8分钟</span>
|
|
|
+ <span @click.stop="setCountdownTime(600)">10分钟</span>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="c_behaviorTag">
|
|
|
+ <div class="c_title">
|
|
|
+ <span>行为标签</span>
|
|
|
+ <div class="c_t_btnArea">
|
|
|
+ <span
|
|
|
+ @click.stop="changeBehaviorTagType(0)"
|
|
|
+ :class="[behaviorTagType == 0 ? 'c_t_ba_active' : '']"
|
|
|
+ >常用</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click.stop="changeBehaviorTagType(1)"
|
|
|
+ :class="[behaviorTagType == 1 ? 'c_t_ba_active' : '']"
|
|
|
+ >更多</span
|
|
|
+ >
|
|
|
+ <!-- <el-button-group>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :disabled="isCountdown || isKeepTime"
|
|
|
+ :type="behaviorTagType == 0 ? 'primary' : 'info'"
|
|
|
+ @click.stop="changeBehaviorTagType(0)"
|
|
|
+ >
|
|
|
+ 常用
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :disabled="isCountdown || isKeepTime"
|
|
|
+ :type="behaviorTagType == 1 ? 'primary' : 'info'"
|
|
|
+ @click.stop="changeBehaviorTagType(1)"
|
|
|
+ >
|
|
|
+ 更多
|
|
|
+ </el-button>
|
|
|
+ </el-button-group> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="c_bt_box"
|
|
|
+ v-loading="behaviorTagMoreLoading && behaviorTagType == 1"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="behaviorTagType == 1"
|
|
|
+ :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
|
|
|
+ v-for="(item, index) in behaviorTagMore"
|
|
|
+ @click.stop="choiceBehaviorTag(item)"
|
|
|
+ :key="behaviorTagType + '-' + index"
|
|
|
+ >{{ item }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="behaviorTagType == 0"
|
|
|
+ :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
|
|
|
+ v-for="(item, index) in behaviorTagCommon"
|
|
|
+ @click.stop="choiceBehaviorTag(item)"
|
|
|
+ :key="behaviorTagType + '-' + index"
|
|
|
+ >{{ item }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="c_btnArea">
|
|
|
+ <span @click.stop="music()">
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ :content="sourceActive ? '关闭音乐' : '开启音乐'"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M12.0001 3.18362C7.13095 3.18362 3.18374 7.13083 3.18374 11.9999C3.18374 16.4071 6.41825 20.0602 10.6428 20.7125C11.0848 20.7808 11.5381 20.8163 12.0001 20.8163C12.4058 20.8163 12.7348 21.1452 12.7348 21.551C12.7348 21.9567 12.4058 22.2857 12.0001 22.2857C11.4627 22.2857 10.9345 22.2444 10.4186 22.1647C5.48856 21.4035 1.71436 17.1431 1.71436 11.9999C1.71436 6.3193 6.31943 1.71423 12.0001 1.71423C16.5776 1.71423 20.4549 4.70396 21.7896 8.83532C22.1119 9.83321 22.2858 10.897 22.2858 11.9999C22.2858 12.4057 21.9569 12.7346 21.5511 12.7346C21.1453 12.7346 20.8164 12.4057 20.8164 11.9999C20.8164 11.0522 20.6671 10.1407 20.3913 9.28702C19.2469 5.74447 15.9216 3.18362 12.0001 3.18362Z"
|
|
|
+ :fill="sourceActive ? '#E11E1E' : 'black'"
|
|
|
+ fill-opacity="0.9"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M22.0162 13.8835C22.1871 14.0192 22.2856 14.2186 22.2856 14.4285V20.1428C22.2856 20.3322 22.2053 20.5139 22.0625 20.6479L21.3005 21.3622C21.003 21.6411 20.5206 21.6411 20.2231 21.3622C19.9255 21.0832 19.9255 20.631 20.2231 20.352L20.7618 19.8469V15.2717L17.7142 15.7479V20.8571C17.7142 21.0465 17.6339 21.2282 17.491 21.3622L16.7291 22.0765C16.4316 22.3554 15.9492 22.3554 15.6516 22.0765C15.3541 21.7975 15.3541 21.3452 15.6516 21.0663L16.1904 20.5612V15.1428C16.1904 14.7936 16.4596 14.4956 16.827 14.4382L21.3984 13.724C21.6194 13.6894 21.8453 13.7478 22.0162 13.8835Z"
|
|
|
+ :fill="sourceActive ? '#E11E1E' : '#3681FC'"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ d="M14.5713 12C14.5713 13.4202 13.4201 14.5714 11.9999 14.5714C10.5797 14.5714 9.42847 13.4202 9.42847 12C9.42847 10.5799 10.5797 9.42859 11.9999 9.42859C13.4201 9.42859 14.5713 10.5799 14.5713 12Z"
|
|
|
+ :fill="sourceActive ? '#E11E1E' : 'black'"
|
|
|
+ fill-opacity="0.9"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <div class="c_ba_startArea">
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ !canStartCountdownTime
|
|
|
+ ? 'c_ba_startType0'
|
|
|
+ : !isCountdown
|
|
|
+ ? 'c_ba_startType'
|
|
|
+ : 'c_ba_startType2',
|
|
|
+ ]"
|
|
|
+ v-if="type == 0"
|
|
|
+ style=""
|
|
|
+ @click.stop="countdownTimeFn()"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ v-if="!isCountdown"
|
|
|
+ t="1721117381559"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="12941"
|
|
|
+ width="64"
|
|
|
+ height="64"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
|
|
|
+ p-id="12942"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ v-else
|
|
|
+ t="1721198913879"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4266"
|
|
|
+ width="64"
|
|
|
+ height="64"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
|
|
|
+ p-id="4267"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[!isKeepTime ? 'c_ba_startType' : 'c_ba_startType2']"
|
|
|
+ v-if="type == 1"
|
|
|
+ @click.stop="keepTimeFn()"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ v-if="!isKeepTime"
|
|
|
+ t="1721117381559"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="12941"
|
|
|
+ width="64"
|
|
|
+ height="64"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
|
|
|
+ p-id="12942"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ v-else
|
|
|
+ t="1721198913879"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4266"
|
|
|
+ width="64"
|
|
|
+ height="64"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
|
|
|
+ p-id="4267"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span @click.stop="reset()">
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ content="重置"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M2.25 19.5C2.25 19.0858 2.58579 18.75 3 18.75H22.5C22.9142 18.75 23.25 19.0858 23.25 19.5C23.25 19.9142 22.9142 20.25 22.5 20.25H3C2.58579 20.25 2.25 19.9142 2.25 19.5Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ <path d="M3 8.25L3.75 14.25L8.25 10.5L3 8.25Z" fill="black" />
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M6.88061 9.09714C8.37158 7.62191 10.4445 6.75 12.75 6.75C17.3064 6.75 21 10.4437 21 15C21 15.4142 21.3358 15.75 21.75 15.75C22.1643 15.75 22.5 15.4142 22.5 15C22.5 9.61522 18.1348 5.25 12.75 5.25C9.83406 5.25 7.20333 6.45088 5.41113 8.46737L3.29545 7.56065C3.04847 7.4548 2.76374 7.48917 2.54904 7.65074C2.33433 7.81231 2.22247 8.0764 2.2558 8.34303L3.0058 14.343C3.03982 14.6151 3.21963 14.847 3.47471 14.9477C3.7298 15.0483 4.01948 15.0017 4.23015 14.8262L8.73015 11.0762C8.93061 10.9091 9.02983 10.6499 8.99215 10.3917C8.95447 10.1335 8.78529 9.91343 8.54545 9.81065L6.88061 9.09714ZM4.48437 9.70214L3.9064 9.45443L4.03677 10.4974C4.17389 10.2236 4.32334 9.95829 4.48437 9.70214ZM4.91452 12.3033C5.14843 11.5796 5.47638 10.9088 5.884 10.302L6.82973 10.7073L4.91452 12.3033Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ActivityMemo">
|
|
|
+ <span @click.stop="changeShowType(1)">
|
|
|
+ 教学活动备忘
|
|
|
+ <svg
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M3.66782 3.1263C3.87421 2.94284 4.19025 2.96143 4.37371 3.16782L8.37371 7.66782C8.5421 7.85727 8.5421 8.14274 8.37371 8.33219L4.37371 12.8322C4.19025 13.0386 3.87421 13.0572 3.66782 12.8737C3.46143 12.6903 3.44284 12.3742 3.6263 12.1678L7.33103 8.00001L3.6263 3.83219C3.44284 3.6258 3.46143 3.30976 3.66782 3.1263Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M7.66782 3.1263C7.87421 2.94284 8.19025 2.96143 8.37371 3.16782L12.3737 7.66782C12.5421 7.85727 12.5421 8.14274 12.3737 8.33219L8.37371 12.8322C8.19025 13.0386 7.87421 13.0572 7.66782 12.8737C7.46143 12.6903 7.44284 12.3742 7.6263 12.1678L11.331 8.00001L7.6263 3.83219C7.44284 3.6258 7.46143 3.30976 7.66782 3.1263Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="c_changeType">
|
|
|
+ <div class="c_ct_btn" @click.stop="changeType(0)">
|
|
|
+ <div>倒计时</div>
|
|
|
+ <span v-if="type == 0"></span>
|
|
|
+ <svg
|
|
|
+ width="21"
|
|
|
+ height="6"
|
|
|
+ viewBox="0 0 21 6"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ v-if="type == 0"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M1.05713 0.470583C1.80179 -0.155333 3.01121 -0.157081 3.75845 0.466679C5.4879 1.91035 7.86809 2.8 10.5 2.8C13.1319 2.8 15.5121 1.91035 17.2416 0.466679C17.9888 -0.157081 19.1982 -0.155333 19.9429 0.470583C20.6875 1.0965 20.6854 2.10956 19.9382 2.73332C17.5219 4.75032 14.1834 6 10.5 6C6.81664 6 3.47806 4.75032 1.06179 2.73332C0.314559 2.10956 0.312473 1.0965 1.05713 0.470583Z"
|
|
|
+ fill="url(#paint0_linear_269_7318)"
|
|
|
+ />
|
|
|
+ <defs>
|
|
|
+ <linearGradient
|
|
|
+ id="paint0_linear_269_7318"
|
|
|
+ x1="0.5"
|
|
|
+ y1="6"
|
|
|
+ x2="20.5"
|
|
|
+ y2="6"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop stop-color="#3673E8" />
|
|
|
+ <stop offset="1" stop-color="#AD88FD" />
|
|
|
+ </linearGradient>
|
|
|
+ </defs>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span></span>
|
|
|
+
|
|
|
+ <div class="c_ct_btn" @click.stop="changeType(1)">
|
|
|
+ <div>计时器</div>
|
|
|
+ <span v-if="type == 1"></span>
|
|
|
+ <svg
|
|
|
+ width="21"
|
|
|
+ height="6"
|
|
|
+ viewBox="0 0 21 6"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ v-if="type == 1"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M1.05713 0.470583C1.80179 -0.155333 3.01121 -0.157081 3.75845 0.466679C5.4879 1.91035 7.86809 2.8 10.5 2.8C13.1319 2.8 15.5121 1.91035 17.2416 0.466679C17.9888 -0.157081 19.1982 -0.155333 19.9429 0.470583C20.6875 1.0965 20.6854 2.10956 19.9382 2.73332C17.5219 4.75032 14.1834 6 10.5 6C6.81664 6 3.47806 4.75032 1.06179 2.73332C0.314559 2.10956 0.312473 1.0965 1.05713 0.470583Z"
|
|
|
+ fill="url(#paint0_linear_269_7318)"
|
|
|
+ />
|
|
|
+ <defs>
|
|
|
+ <linearGradient
|
|
|
+ id="paint0_linear_269_7318"
|
|
|
+ x1="0.5"
|
|
|
+ y1="6"
|
|
|
+ x2="20.5"
|
|
|
+ y2="6"
|
|
|
+ gradientUnits="userSpaceOnUse"
|
|
|
+ >
|
|
|
+ <stop stop-color="#3673E8" />
|
|
|
+ <stop offset="1" stop-color="#AD88FD" />
|
|
|
+ </linearGradient>
|
|
|
+ </defs>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <!-- <el-button-group>
|
|
|
+ <el-button
|
|
|
+ :type="isCountdown ? 'danger' : type == 0 ? 'primary' : ''"
|
|
|
+ @click.stop="changeType(0)"
|
|
|
+ :disabled="isCountdown || isKeepTime"
|
|
|
+ >
|
|
|
+ 倒计时
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ :type="isKeepTime ? 'danger' : type == 1 ? 'primary' : ''"
|
|
|
+ @click.stop="changeType(1)"
|
|
|
+ :disabled="isCountdown || isKeepTime"
|
|
|
+ >
|
|
|
+ 计时器
|
|
|
+ </el-button>
|
|
|
+ </el-button-group> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="c_behavior" v-if="showType == 1">
|
|
|
+ <div class="behaviorBack">
|
|
|
+ <span
|
|
|
+ @click.stop="changeShowType(0)"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M3.66782 3.1263C3.87421 2.94284 4.19025 2.96143 4.37371 3.16782L8.37371 7.66782C8.5421 7.85727 8.5421 8.14274 8.37371 8.33219L4.37371 12.8322C4.19025 13.0386 3.87421 13.0572 3.66782 12.8737C3.46143 12.6903 3.44284 12.3742 3.6263 12.1678L7.33103 8.00001L3.6263 3.83219C3.44284 3.6258 3.46143 3.30976 3.66782 3.1263Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M7.66782 3.1263C7.87421 2.94284 8.19025 2.96143 8.37371 3.16782L12.3737 7.66782C12.5421 7.85727 12.5421 8.14274 12.3737 8.33219L8.37371 12.8322C8.19025 13.0386 7.87421 13.0572 7.66782 12.8737C7.46143 12.6903 7.44284 12.3742 7.6263 12.1678L11.331 8.00001L7.6263 3.83219C7.44284 3.6258 7.46143 3.30976 7.66782 3.1263Z"
|
|
|
+ fill="black"
|
|
|
+ />
|
|
|
+ </svg>返回</span
|
|
|
+ >
|
|
|
+
|
|
|
+ <div class="c_step" ref="stepRef" v-loading="memorandumLoading">
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(item, index) in memorandumList"
|
|
|
+ :key="index"
|
|
|
+ :timestamp="item.time"
|
|
|
+ >
|
|
|
+ <div v-html="item.text"></div>
|
|
|
+ <!-- <span v-html="activity.content"></span> -->
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <mini-audio
|
|
|
+ v-show="false"
|
|
|
+ ref="audioRef"
|
|
|
+ :loop="true"
|
|
|
+ :audio-source="sourceUrl"
|
|
|
+ ></mini-audio>
|
|
|
+ <mini-audio
|
|
|
+ v-show="false"
|
|
|
+ ref="endSourceUrlRef"
|
|
|
+ :loop="false"
|
|
|
+ :audio-source="endSourceUrl"
|
|
|
+ ></mini-audio>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ courseDetail: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ fileId: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ courseId: this.$route.query.courseId,
|
|
|
+ showType: 0,
|
|
|
+ sourceUrl:
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%80%92%E8%AE%A1%E6%97%B6%E9%9F%B3%E4%B9%901721355956636.mp3",
|
|
|
+ endSourceUrl:
|
|
|
+ "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%80%92%E6%95%B010%E7%A7%92%E5%8F%A0%E5%8A%A0%E9%9F%B3%E6%95%881721638403882.MP3",
|
|
|
+ sourceActive: false,
|
|
|
+ type: 0, //0:倒计时 1:计时器
|
|
|
+ isCountdown: false,
|
|
|
+ isKeepTime: false,
|
|
|
+ countdownTime: 0,
|
|
|
+ countdownTimeDefault: 0,
|
|
|
+ countdownTimeTimer: null,
|
|
|
+ keepTime: 0,
|
|
|
+ keepTimeTimer: null,
|
|
|
+ startCountdownTime: 0,
|
|
|
+ behaviorTagType: 0, //0:常用 1:更多
|
|
|
+ behaviorTagMore: [], //更多
|
|
|
+ behaviorTagMoreLoading: false,
|
|
|
+ behaviorTagCommon: [
|
|
|
+ "小组讨论",
|
|
|
+ "小组汇报",
|
|
|
+ "动手实验",
|
|
|
+ "课堂游戏",
|
|
|
+ "自主学习",
|
|
|
+ "作品展示",
|
|
|
+ "学生演讲",
|
|
|
+ "学生分享",
|
|
|
+ "随堂练习",
|
|
|
+ "快速问答",
|
|
|
+ "阅读资料",
|
|
|
+ "观察记录",
|
|
|
+ ], //常用
|
|
|
+ choiceBehavior: [],
|
|
|
+ memorandumList: [],
|
|
|
+ memorandumLoading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ canStartCountdownTime() {
|
|
|
+ let _result = false;
|
|
|
+
|
|
|
+ if (this.countdownTime > 0) {
|
|
|
+ _result = true;
|
|
|
+ }
|
|
|
+ return _result;
|
|
|
+ },
|
|
|
+ countdownTimeShow() {
|
|
|
+ let _result = {
|
|
|
+ m1: 0,
|
|
|
+ m2: 0,
|
|
|
+ s1: 0,
|
|
|
+ s2: 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.countdownTime <= 0) return _result;
|
|
|
+
|
|
|
+ let minutes = Math.floor(this.countdownTime / 60);
|
|
|
+ let seconds = this.countdownTime % 60;
|
|
|
+ if (minutes > 9) {
|
|
|
+ _result.m1 = Math.floor(minutes / 10);
|
|
|
+ _result.m2 = minutes % 10;
|
|
|
+ } else {
|
|
|
+ _result.m1 = 0;
|
|
|
+ _result.m2 = minutes;
|
|
|
+ }
|
|
|
+ if (seconds > 9) {
|
|
|
+ _result.s1 = Math.floor(seconds / 10);
|
|
|
+ _result.s2 = seconds % 10;
|
|
|
+ } else {
|
|
|
+ _result.s1 = 0;
|
|
|
+ _result.s2 = seconds;
|
|
|
+ }
|
|
|
+
|
|
|
+ return _result;
|
|
|
+ },
|
|
|
+ keepTimeShow() {
|
|
|
+ let _result = {
|
|
|
+ m1: 0,
|
|
|
+ m2: 0,
|
|
|
+ s1: 0,
|
|
|
+ s2: 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.keepTime <= 0) return _result;
|
|
|
+
|
|
|
+ let minutes = Math.floor(this.keepTime / 60);
|
|
|
+ let seconds = this.keepTime % 60;
|
|
|
+ if (minutes > 9) {
|
|
|
+ _result.m1 = Math.floor(minutes / 10);
|
|
|
+ _result.m2 = minutes % 10;
|
|
|
+ } else {
|
|
|
+ _result.m1 = 0;
|
|
|
+ _result.m2 = minutes;
|
|
|
+ }
|
|
|
+ if (seconds > 9) {
|
|
|
+ _result.s1 = Math.floor(seconds / 10);
|
|
|
+ _result.s2 = seconds % 10;
|
|
|
+ } else {
|
|
|
+ _result.s1 = 0;
|
|
|
+ _result.s2 = seconds;
|
|
|
+ }
|
|
|
+
|
|
|
+ return _result;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ countdownTime(newValue) {
|
|
|
+ if (this.isCountdown && this.countdownTimeTimer && newValue == 0) {
|
|
|
+ this.countdownTimeFinish();
|
|
|
+ } else if (!this.isCountdown && !this.countdownTimeTimer) {
|
|
|
+ this.countdownTimeDefault = newValue;
|
|
|
+ }
|
|
|
+ if (this.$refs.audioRef.playing && this.sourceActive && newValue == 10) {
|
|
|
+ this.$refs.audioRef.stop();
|
|
|
+ this.$refs.endSourceUrlRef.play();
|
|
|
+ // this.$refs.audioRef.setVolume(newValue / 10);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ insertMemorandum(_html) {
|
|
|
+ return;
|
|
|
+ //保存行为操作
|
|
|
+ //variable
|
|
|
+ //btn
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ uid: this.userid,
|
|
|
+ courseId: this.courseId,
|
|
|
+ content: _html,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ this.ajax
|
|
|
+ .post(
|
|
|
+ this.$store.state.api + "insert_systemOperation_countdownBehavior",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ console.log("保存操作成功");
|
|
|
+ } else {
|
|
|
+ console.log("保存操作失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log("保存操作失败");
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeShowType(newType) {
|
|
|
+ this.showType = newType;
|
|
|
+ if (this.showType == 1) {
|
|
|
+ this.selectMemorandum();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeType(newType) {
|
|
|
+ if (this.isCountdown || this.isKeepTime) return;
|
|
|
+ this.type = newType;
|
|
|
+ },
|
|
|
+ changeBehaviorTagType(newType) {
|
|
|
+ if (this.isCountdown) return this.$message.error("正在倒计时");
|
|
|
+ if (this.isKeepTime) return this.$message.error("正在计时");
|
|
|
+ if (this.behaviorTagType == newType) return;
|
|
|
+ this.choiceBehavior = [];
|
|
|
+ this.behaviorTagType = newType;
|
|
|
+ if (this.behaviorTagType == 1 && this.behaviorTagMore.length <= 0) {
|
|
|
+ this.getBehaviorTagMore();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setCountdownTime(newTime = 0) {
|
|
|
+ if (this.isCountdown) return this.$message.error("正在倒计时");
|
|
|
+ if (this.isKeepTime) return this.$message.error("正在计时");
|
|
|
+ this.countdownTime = newTime;
|
|
|
+ },
|
|
|
+ addTime(time = 0) {
|
|
|
+ if (this.isCountdown) return console.log("正在计时");
|
|
|
+ if (this.countdownTime >= 3600) {
|
|
|
+ return this.$message.error("倒计时最高一小时");
|
|
|
+ }
|
|
|
+ if (this.countdownTime + time > 3600) {
|
|
|
+ return (this.countdownTime = 3600);
|
|
|
+ }
|
|
|
+ this.countdownTime += time;
|
|
|
+ },
|
|
|
+ reduceTime(time = 0) {
|
|
|
+ if (this.isCountdown) return console.log("正在计时");
|
|
|
+ if (this.countdownTime - time < 0) return (this.countdownTime = 0);
|
|
|
+ this.countdownTime -= time;
|
|
|
+ },
|
|
|
+ choiceBehaviorTag(tag) {
|
|
|
+ if (this.isCountdown) return this.$message.error("正在倒计时");
|
|
|
+ if (this.isKeepTime) return this.$message.error("正在计时");
|
|
|
+ let _index = this.choiceBehavior.findIndex((i) => i == tag);
|
|
|
+ if (_index != -1) {
|
|
|
+ // 数组删除指定下标数据
|
|
|
+ this.choiceBehavior.splice(_index, 1);
|
|
|
+ } else {
|
|
|
+ this.choiceBehavior.push(tag);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ countdownTimeFn() {
|
|
|
+ if (this.isCountdown) {
|
|
|
+ //取消
|
|
|
+ clearInterval(this.countdownTimeTimer);
|
|
|
+ this.countdownTimeTimer = null;
|
|
|
+ this.isCountdown = false;
|
|
|
+ if (this.$refs.audioRef.playing && this.sourceActive) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ this.$message.success("已暂停倒计时");
|
|
|
+ } else {
|
|
|
+ //开始
|
|
|
+ if (this.countdownTime == 0)
|
|
|
+ return this.$message.error("请设置倒计时时间");
|
|
|
+ this.isCountdown = true;
|
|
|
+ this.$message.success("已开始倒计时");
|
|
|
+ if (this.sourceActive) {
|
|
|
+ this.$refs.audioRef.setVolume(0);
|
|
|
+ this.$refs.audioRef.play();
|
|
|
+ }
|
|
|
+ if (this.countdownTime >= 20 && this.sourceActive) {
|
|
|
+ let volume = 0;
|
|
|
+ let sourceTimer = setInterval(() => {
|
|
|
+ volume += 1;
|
|
|
+ if (volume >= 10) {
|
|
|
+ volume = 10;
|
|
|
+ clearInterval(sourceTimer);
|
|
|
+ sourceTimer = null;
|
|
|
+ }
|
|
|
+ this.$refs.audioRef.setVolume(volume / 10);
|
|
|
+ }, 1000);
|
|
|
+ } else if (
|
|
|
+ this.countdownTime <= 20 &&
|
|
|
+ this.countdownTime > 10 &&
|
|
|
+ this.sourceActive
|
|
|
+ ) {
|
|
|
+ this.$refs.audioRef.setVolume(1);
|
|
|
+ } else if (this.countdownTime <= 10 && this.sourceActive) {
|
|
|
+ this.$refs.audioRef.stop();
|
|
|
+ this.$refs.endSourceUrlRef.setProgress(
|
|
|
+ (10 - this.countdownTime) / 10
|
|
|
+ );
|
|
|
+ this.$refs.endSourceUrlRef.play();
|
|
|
+ }
|
|
|
+ this.countdownTimeTimer = setInterval(() => {
|
|
|
+ this.isCountdown = true;
|
|
|
+ this.countdownTime -= 1;
|
|
|
+ }, 1000);
|
|
|
+ let timeShow = `${this.countdownTimeShow.m1}${this.countdownTimeShow.m2}分钟${this.countdownTimeShow.s1}${this.countdownTimeShow.s2}秒`;
|
|
|
+ this.insertMemorandum(
|
|
|
+ `设置<span class="variable"></span><span class="btn">倒计时${timeShow}</span>${
|
|
|
+ this.choiceBehavior.length > 0
|
|
|
+ ? ",用于" +
|
|
|
+ '<span class="btn">' +
|
|
|
+ this.choiceBehavior.join("、") +
|
|
|
+ "</span>"
|
|
|
+ : ""
|
|
|
+ }`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ countdownTimeFinish() {
|
|
|
+ clearInterval(this.countdownTimeTimer);
|
|
|
+ this.countdownTimeTimer = null;
|
|
|
+ this.isCountdown = false;
|
|
|
+ this.$parent.type = 1;
|
|
|
+ this.$parent.itemType = 3;
|
|
|
+ this.changeShowType(0)
|
|
|
+ if (this.$refs.audioRef.playing && this.sourceActive) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ let _data = {
|
|
|
+ type: "countdown",
|
|
|
+ time: this.countdownTimeDefault,
|
|
|
+ tag: this.choiceBehavior,
|
|
|
+ };
|
|
|
+ this.insertMemorandum(`<span class="btn">倒计时</span>结束`);
|
|
|
+ this.insertData(_data);
|
|
|
+ },
|
|
|
+ keepTimeFn() {
|
|
|
+ if (this.isKeepTime) {
|
|
|
+ this.isKeepTime = false;
|
|
|
+ clearInterval(this.keepTimeTimer);
|
|
|
+ this.keepTimeTimer = null;
|
|
|
+ if (this.$refs.audioRef.playing && this.sourceActive) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ this.$message.success("已停止计时");
|
|
|
+ } else {
|
|
|
+ this.isKeepTime = true;
|
|
|
+ if (this.sourceActive) {
|
|
|
+ this.$refs.audioRef.setVolume(1);
|
|
|
+ this.$refs.audioRef.play();
|
|
|
+ }
|
|
|
+ this.keepTimeTimer = setInterval(() => {
|
|
|
+ this.keepTime += 1;
|
|
|
+ }, 1000);
|
|
|
+ this.$message.success("已开始计时");
|
|
|
+ this.insertMemorandum(
|
|
|
+ `使用<span class="btn">计时器</span>${
|
|
|
+ this.choiceBehavior.length > 0
|
|
|
+ ? ",用于" +
|
|
|
+ '<span class="btn">' +
|
|
|
+ this.choiceBehavior.join("、") +
|
|
|
+ "</span>"
|
|
|
+ : ""
|
|
|
+ }`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ music() {
|
|
|
+ this.sourceActive = !this.sourceActive;
|
|
|
+ if (
|
|
|
+ (this.$refs.audioRef.playing || this.$refs.endSourceUrlRef.playing) &&
|
|
|
+ !this.sourceActive
|
|
|
+ ) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ this.$refs.endSourceUrlRef.stop();
|
|
|
+ } else if (this.sourceActive) {
|
|
|
+ if (this.isCountdown) {
|
|
|
+ if (this.countdownTime > 10) {
|
|
|
+ this.$refs.audioRef.play();
|
|
|
+ } else {
|
|
|
+ this.$refs.audioRef.stop();
|
|
|
+ this.$refs.endSourceUrlRef.setProgress(
|
|
|
+ (10 - this.countdownTime) / 10
|
|
|
+ );
|
|
|
+ this.$refs.endSourceUrlRef.play();
|
|
|
+ }
|
|
|
+ } else if (this.isKeepTime) {
|
|
|
+ this.$refs.audioRef.play();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ if (this.type == 0) {
|
|
|
+ if (this.isCountdown) {
|
|
|
+ this.$confirm("正在倒计时!确定重置倒计时吗?", "提醒", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then((_) => {
|
|
|
+ clearInterval(this.countdownTimeTimer);
|
|
|
+ this.countdownTimeTimer = null;
|
|
|
+ // this.countdownTime = this.countdownTimeDefault;
|
|
|
+ this.countdownTime = 0;
|
|
|
+ this.isCountdown = false;
|
|
|
+ this.choiceBehavior = [];
|
|
|
+ this.$message.success("已重置");
|
|
|
+ if (this.$refs.audioRef.playing) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((_) => {
|
|
|
+ console.log("取消重置");
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$confirm("确定重置倒计时吗?", "提醒", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then((_) => {
|
|
|
+ if (this.$refs.audioRef.playing) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ // this.countdownTime = this.countdownTimeDefault;
|
|
|
+ this.countdownTime = 0;
|
|
|
+ this.isCountdown = false;
|
|
|
+ this.choiceBehavior = [];
|
|
|
+ this.$message.success("已重置");
|
|
|
+ })
|
|
|
+ .catch((_) => {
|
|
|
+ console.log("取消重置");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (this.type == 1) {
|
|
|
+ if (this.isKeepTime) {
|
|
|
+ this.$confirm("正在计时!确定重置计时吗?", "提醒", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then((_) => {
|
|
|
+ if (this.$refs.audioRef.playing) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ clearInterval(this.keepTimeTimer);
|
|
|
+ this.keepTimeTimer = null;
|
|
|
+ let _data = {
|
|
|
+ type: "keepTime",
|
|
|
+ time: this.keepTime,
|
|
|
+ tag: this.choiceBehavior,
|
|
|
+ };
|
|
|
+ let timeShow = `${this.keepTimeShow.m1}${this.keepTimeShow.m2}分钟${this.keepTimeShow.s1}${this.keepTimeShow.s2}秒`;
|
|
|
+ this.insertMemorandum(
|
|
|
+ `结束计时器,<span class="btn">计时</span><span class="variable">${timeShow}</span>${
|
|
|
+ this.choiceBehavior.length > 0
|
|
|
+ ? ",用于" +
|
|
|
+ '<span class="btn">' +
|
|
|
+ this.choiceBehavior.join("、") +
|
|
|
+ "</span>"
|
|
|
+ : ""
|
|
|
+ }`
|
|
|
+ );
|
|
|
+ this.keepTime = 0;
|
|
|
+ this.isKeepTime = false;
|
|
|
+ this.insertData(_data);
|
|
|
+ })
|
|
|
+ .catch((_) => {
|
|
|
+ console.log("取消重置");
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let _data = {
|
|
|
+ type: "keepTime",
|
|
|
+ time: this.keepTime,
|
|
|
+ tag: this.choiceBehavior,
|
|
|
+ };
|
|
|
+ if (this.$refs.audioRef.playing) {
|
|
|
+ this.$refs.audioRef.pause();
|
|
|
+ }
|
|
|
+ this.insertData(_data);
|
|
|
+ let timeShow = `${this.keepTimeShow.m1}${this.keepTimeShow.m2}分钟${this.keepTimeShow.s1}${this.keepTimeShow.s2}秒`;
|
|
|
+ this.insertMemorandum(
|
|
|
+ `结束计时器,<span class="btn">计时</span><span class="variable">${timeShow}</span>${
|
|
|
+ this.choiceBehavior.length > 0
|
|
|
+ ? ",用于" +
|
|
|
+ '<span class="btn">' +
|
|
|
+ this.choiceBehavior.join("、") +
|
|
|
+ "</span>"
|
|
|
+ : ""
|
|
|
+ }`
|
|
|
+ );
|
|
|
+ this.keepTime = 0;
|
|
|
+ this.isKeepTime = false;
|
|
|
+ // this.choiceBehavior = [];
|
|
|
+ this.$message.success("已重置");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getBehaviorTagMore() {
|
|
|
+ this.behaviorTagMoreLoading = true;
|
|
|
+ let _textData = `课程名称:${this.courseDetail.title}\n分类:${this.courseDetail.name}\n\n`;
|
|
|
+ let _chapters = JSON.parse(this.courseDetail.chapters);
|
|
|
+ _chapters.forEach((i1, index1) => {
|
|
|
+ if (i1.dyName) {
|
|
|
+ _textData += `阶段${index1 + 1}:${i1.dyName}\n`;
|
|
|
+ }
|
|
|
+ i1.chapterInfo[0].taskJson.forEach((i2, index2) => {
|
|
|
+ if (i2.task) {
|
|
|
+ _textData += `任务${index2 + 1}:${i2.task}\n`;
|
|
|
+ _textData += `${i2.taskDetail}\n`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _textData += "\n";
|
|
|
+ });
|
|
|
+ let _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
|
|
|
+ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
|
|
|
+Instruction: Based on the context, follow "Format example", write content
|
|
|
+
|
|
|
+#Context
|
|
|
+##任务
|
|
|
+在以下课堂中,如果老师设置一个倒计时,他可能想开展哪些教学活动?每个教学活动使用4个字,进行简洁精确的描述,请返回所有可能的行为名称,不需要额外的解释。请返回最有可能的12个活动类
|
|
|
+
|
|
|
+##Format example
|
|
|
+["小组讨论","小组汇报","动手实验","课堂游戏","自主学习","作品展示","学生演讲","学生分享","随堂练习","快速问答","阅读资料","观察记录"]
|
|
|
+
|
|
|
+##课堂内容
|
|
|
+${_textData}
|
|
|
+`;
|
|
|
+
|
|
|
+ this.behaviorTagMore = [];
|
|
|
+ let params = {
|
|
|
+ assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
|
|
|
+ userId: this.userid,
|
|
|
+ message: [{ type: "text", text: _msg }],
|
|
|
+ session_name: uuidv4(),
|
|
|
+ file_ids: this.fileId,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ // .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
+ // .post("https://claude3.cocorobo.cn/chat", params)
|
|
|
+ .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
|
|
|
+ .then((res) => {
|
|
|
+ // console.log(res)
|
|
|
+ let _data = res.data.FunctionResponse.message;
|
|
|
+ _data = _data.replaceAll("```json", "").replaceAll("```", "");
|
|
|
+ const match = _data.match(/\[\s*[^]*\s*\]/);
|
|
|
+ let _result = JSON.parse(match[0]);
|
|
|
+ this.behaviorTagMore = _result;
|
|
|
+ this.behaviorTagMoreLoading = false;
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.behaviorTagMoreLoading = false;
|
|
|
+ this.$message.error("获取更多行为标签失败");
|
|
|
+ this.behaviorTagType = 0;
|
|
|
+ this.behaviorTagMore = [];
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ insertData(data = null) {
|
|
|
+ if (!data) return;
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ uid: this.userid,
|
|
|
+ courseId: this.courseId,
|
|
|
+ content: JSON.stringify(data),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(
|
|
|
+ this.$store.state.api + "insert_systemOperation_classRoomHelper",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data == 1) {
|
|
|
+ console.log("保存成功");
|
|
|
+ } else {
|
|
|
+ console.log("保存失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log("保存失败👇");
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectMemorandum() {
|
|
|
+ return;
|
|
|
+ this.memorandumLoading = false;
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ courseId: this.courseId,
|
|
|
+ };
|
|
|
+ this.memorandumList = [];
|
|
|
+ this.ajax
|
|
|
+ .get(
|
|
|
+ this.$store.state.api + "select_systemOperation_countdownBehavior",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ let _data = res.data[0];
|
|
|
+ if (_data.length) {
|
|
|
+ this.memorandumList = _data;
|
|
|
+ } else {
|
|
|
+ this.memorandumList = [];
|
|
|
+ }
|
|
|
+ this.memorandumLoading = false;
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ this.memorandumLoading = false;
|
|
|
+ this.$message.error("获取行为备忘失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.countdown {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ /* display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center; */
|
|
|
+ /* justify-content: center; */
|
|
|
+ /* padding: auto;
|
|
|
+ overflow: auto; */
|
|
|
+}
|
|
|
+
|
|
|
+.c_timeBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.c_tb_top {
|
|
|
+ width: 100%;
|
|
|
+ max-height: calc(100% - 60px);
|
|
|
+ margin: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.c_behavior {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.c_changeType {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ border-top: solid 1px #e7e7e7;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.c_changeType > span {
|
|
|
+ width: 2px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #e7e7e7;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_btn > div {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_btn > span {
|
|
|
+ position: absolute;
|
|
|
+ width: 60%;
|
|
|
+ height: 60%;
|
|
|
+ background: #6c8cff67;
|
|
|
+
|
|
|
+ filter: blur(20px);
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_btn > svg {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_time {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_item {
|
|
|
+ color: black;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 10px;
|
|
|
+ box-shadow: 0px 0px 5px 2px #1d398314;
|
|
|
+ /* box-shadow: 1px 1px 20px 4px #1d39830d; */
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_card > span {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 25px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_card > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_card > div > div {
|
|
|
+ font-size: 5em;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_card > div > span {
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_btnTop {
|
|
|
+ top: -30px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_btnBottom {
|
|
|
+ bottom: -30px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_i_btn {
|
|
|
+ font-size: 1.3em;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 !important;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+}
|
|
|
+
|
|
|
+.c_choiceTime {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.c_title > span {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_btnArea {
|
|
|
+ margin-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_btnArea > span {
|
|
|
+ width: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #999999;
|
|
|
+ position: relative;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_ba_active {
|
|
|
+ color: black !important;
|
|
|
+}
|
|
|
+
|
|
|
+.c_t_ba_active::after {
|
|
|
+ content: "";
|
|
|
+ width: 100%;
|
|
|
+ height: 3px;
|
|
|
+ background-color: #3681fc;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -7px;
|
|
|
+ left: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_box > span {
|
|
|
+ width: 20%;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #d0d0d0;
|
|
|
+ margin: 10px 2%;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: 0.1s;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ct_box > span:hover {
|
|
|
+ background-color: #409eff;
|
|
|
+ border: solid 1px #409eff;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.c_behaviorTag {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_bt_box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ min-height: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_bt_box > span {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 0.5px solid #e0eafb;
|
|
|
+ box-shadow: 0px 2px 5px 0px #1d398314;
|
|
|
+ box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
|
|
|
+ margin: 10px 0;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: 0.1s;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_bt_b_active {
|
|
|
+ background-color: #409eff !important;
|
|
|
+ border: solid 1px #409eff !important;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.c_bt_box > span:hover {
|
|
|
+ background-color: #409eff !important;
|
|
|
+ border: solid 1px #409eff !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.c_btnArea {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_btnArea > span {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ padding: 5px 10px;
|
|
|
+ /* border: solid 1px #d0d0d0;
|
|
|
+ background-color: #fff; */
|
|
|
+ /* border-radius: 20px; */
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_btnArea > span > svg {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+/* .c_btnArea > span:hover {
|
|
|
+ border: solid 1px #409eff;
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+} */
|
|
|
+
|
|
|
+.c_ba_startArea {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType0 {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 8px #e0eafb;
|
|
|
+ color: #e0eafb;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType0 > svg {
|
|
|
+ fill: #afbff7;
|
|
|
+ height: 60%;
|
|
|
+ position: relative;
|
|
|
+ left: 3px;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 8px #3681fc;
|
|
|
+ color: #3681fc;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType > svg {
|
|
|
+ fill: #677bf0;
|
|
|
+ height: 60%;
|
|
|
+ position: relative;
|
|
|
+ left: 3px;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType2 {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid 8px #f5222d;
|
|
|
+ color: #f5222d;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.c_ba_startType2 > svg {
|
|
|
+ fill: #f5222d;
|
|
|
+ height: 60%;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.sourceActive {
|
|
|
+ border: solid 1px #409eff !important;
|
|
|
+ background-color: #409eff !important;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.c_step {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 20px 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.c_s_item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ActivityMemo{
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.ActivityMemo>span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.ActivityMemo>span>svg{
|
|
|
+ margin-left: 5px;
|
|
|
+ position: relative;
|
|
|
+ top: 1px;
|
|
|
+ width:20px;
|
|
|
+ height:20px
|
|
|
+}
|
|
|
+
|
|
|
+.behaviorBack{
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.behaviorBack>span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.behaviorBack>span>svg{
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ top: 1px;
|
|
|
+ width:20px;
|
|
|
+ height:20px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+</style>
|