|
|
@@ -0,0 +1,389 @@
|
|
|
+<template>
|
|
|
+ <div class="analysis">
|
|
|
+ <div class="a-header">
|
|
|
+ <div class="a-h-left" @click.stop="changeShowItem(!showItem)">
|
|
|
+ <span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
|
|
|
+ <span class="a-h-l-title">{{ title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="a-h-right">
|
|
|
+ <div class="a-h-r-btn" @click.stop="addTemplate">
|
|
|
+ <img src="@/assets/icon/classroomObservation/newcon.png" alt="" />
|
|
|
+ 添加模块
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="a-main" v-show="showItem">
|
|
|
+ <analysisItem ref="analysisItemRef" v-if="analysisItemList.length > 0" v-for="(item,index) in analysisItemList" :key="item.id" :data="item" :tid="tid" :index="index" @delItem="delItem" @editItem="editItem"/>
|
|
|
+ <div class="a_m_empty" v-if="analysisItemList.length == 0">暂无模块...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import analysisItem from "./analysisItem";
|
|
|
+export default {
|
|
|
+ emits:["delItem","editItem"],
|
|
|
+ props: {
|
|
|
+ title:{
|
|
|
+ type:String,
|
|
|
+ default:"分析"
|
|
|
+ },
|
|
|
+ analysisItemList:{
|
|
|
+ type:Array,
|
|
|
+ default:()=>{
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tid:{
|
|
|
+ type:String,
|
|
|
+ require:true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ analysisItem,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDialog: false,
|
|
|
+ showItem: true,
|
|
|
+ tagIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addTemplate() {
|
|
|
+ this.$emit('updateMessage', this.tagIndex);
|
|
|
+ },
|
|
|
+ changeShowItem(newValue) {
|
|
|
+ this.showItem = newValue;
|
|
|
+ },
|
|
|
+ delItem(id){
|
|
|
+ this.$emit("delItem",id)
|
|
|
+ },
|
|
|
+ editItem(id,_data){
|
|
|
+ this.$emit("editItem",id,_data)
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.itemTit {
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+ gap: 8px;
|
|
|
+ opacity: 0px;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+.analysis {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.a-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-l-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("../../../../assets/icon/classroomObservation/right.png")
|
|
|
+ no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-l-showIcon {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-l-title {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-r-btn {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 35px;
|
|
|
+ width: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* padding: 0 20px; */
|
|
|
+ /* border: solid 1px #C5C5C5; */
|
|
|
+ /* border-radius: 18px; */
|
|
|
+ cursor: pointer;
|
|
|
+ /* background-color: white; */
|
|
|
+ display: flex;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.a-h-r-btn > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-main {
|
|
|
+ width: calc(100%);
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.a-dialog {
|
|
|
+ position: fixed;
|
|
|
+ width: 1200px;
|
|
|
+ height: 500px;
|
|
|
+ min-height: 600px;
|
|
|
+ box-shadow: 0px 0 8px 0px #555555;
|
|
|
+ border-radius: 8px;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ /* top: 50%; */
|
|
|
+ /* margin: -18% 0 0 -300px; */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-top {
|
|
|
+ /* background: #adadad; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ user-select: none;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+.a-d-topTit {
|
|
|
+ width: 171px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 22px;
|
|
|
+ justify-content: center;
|
|
|
+ /* text-align: left; */
|
|
|
+}
|
|
|
+.a-d-t-left {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item {
|
|
|
+ /* width: auto;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #d4d9da;
|
|
|
+ margin-right: 3px;
|
|
|
+ cursor: pointer; */
|
|
|
+ cursor: pointer;
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item:hover {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black !important;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right > span {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* align-items: center; */
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ /* background-color: #adadad; */
|
|
|
+ cursor: pointer;
|
|
|
+ /* background-color: #e6e6e6; */
|
|
|
+ color: #adadad;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* height: calc(100% - 40px); */
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-item {
|
|
|
+ width: 22%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /* position: relative; */
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomPer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.a-d-b-i-top {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 50%; */
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+}
|
|
|
+.a-d-b-i-top > img {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+/* .a-d-b-i-top>div{ */
|
|
|
+/* width: auto;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px; */
|
|
|
+/* } */
|
|
|
+
|
|
|
+.a-d-b-i-t-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ display: block;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 35px;
|
|
|
+ /* display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden; */
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-bottom {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ /* max-height: 186px; */
|
|
|
+ font-size: 14px;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ line-height: 20px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-t-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ /* height: 30px; */
|
|
|
+ /* position: relative; */
|
|
|
+ /* top: 5px; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ /* background-color: #f3f3f3; */
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ /* position: absolute; */
|
|
|
+ /* right: 10px; */
|
|
|
+ /* top: 10px; */
|
|
|
+}
|
|
|
+.a-d-b-i-t-btn1 {
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.a_m_empty{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #555555;
|
|
|
+}
|
|
|
+</style>
|
SanHQin