移动分组

src/components/pages/classroomObservation/components/analysis.vue

@@ -5,17 +5,23 @@
         <span :class="['a-h-l-icon', showItem ? 'a-h-l-showIcon' : '']"></span>
         <span class="a-h-l-title" v-if="!editTitle">{{ title }}</span>
         <div class="a_h_l_t_input" v-if="editTitle" @click.stop="() => {}">
-          <el-form ref="form" :model="form" :rules="rules" label-position="top" @submit.native.prevent>
+          <el-form
+            ref="form"
+            :model="form"
+            :rules="rules"
+            label-position="top"
+            @submit.native.prevent
+          >
             <el-form-item prop="name">
               <el-input
                 v-model="form.name"
-               	@blur="editNameCheckFn()"
-								@keyup.enter.native="editNameCheckFn"
+                @blur="editNameCheckFn()"
+                @keyup.enter.native="editNameCheckFn"
                 ref="editNameInputRef"
                 placeholder="请输入新的名称"
               ></el-input>
             </el-form-item>
-						<!--   @blur="editNameCheckFn()" -->
+            <!--   @blur="editNameCheckFn()" -->
           </el-form>
         </div>
         <el-tooltip
@@ -82,16 +88,193 @@
 
             添加模块
           </div>
-					<div @click="addNewAnalysisGroup(0)"><svg t="1727073223211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3257" width="200" height="200"><path d="M546.901333 314.282667a46.805333 46.805333 0 0 0-69.802666 0l-296.021334 340.736c-24.32 28.032-3.328 70.314667 34.944 70.314666h591.957334c38.272 0 59.306667-42.282667 34.944-70.314666l-296.021334-340.736z" p-id="3258"></path></svg>添加分析</div>
-					<div @click="addNewAnalysisGroup(1)"><svg style="transform: rotate(180deg);" t="1727073223211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3257" width="200" height="200"><path d="M546.901333 314.282667a46.805333 46.805333 0 0 0-69.802666 0l-296.021334 340.736c-24.32 28.032-3.328 70.314667 34.944 70.314666h591.957334c38.272 0 59.306667-42.282667 34.944-70.314666l-296.021334-340.736z" p-id="3258"></path></svg>添加分析</div>
-					<div @click="deleteAnalysisGroup()"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25 3.125C6.25 2.77982 6.52982 2.5 6.875 2.5H13.125C13.4702 2.5 13.75 2.77982 13.75 3.125C13.75 3.47018 13.4702 3.75 13.125 3.75H6.875C6.52982 3.75 6.25 3.47018 6.25 3.125Z" fill="black" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5.625C2.5 5.26481 2.77982 5 3.125 5H16.875C17.2202 5 17.5 5.26481 17.5 5.625C17.5 6.03952 17.2202 6.25 16.875 6.25L15.625 6.30435V17.5H4.375V6.25H3.125C2.77982 6.25 2.5 6.03952 2.5 5.625ZM5.625 6.25V16.1957L14.375 16.25V6.30435L5.625 6.25Z" fill="black" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.125 8.06838C8.47018 8.06838 8.75 8.32276 8.75 8.63656V13.7502C8.75 14.064 8.47018 14.3184 8.125 14.3184C7.77982 14.3184 7.5 14.064 7.5 13.7502V8.63656C7.5 8.32276 7.77982 8.06838 8.125 8.06838Z" fill="black" fill-opacity="0.6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 8.06838C12.2202 8.06838 12.5 8.32276 12.5 8.63656V13.7502C12.5 14.064 12.2202 14.3184 11.875 14.3184C11.5298 14.3184 11.25 14.064 11.25 13.7502V8.63656C11.25 8.32276 11.5298 8.06838 11.875 8.06838Z" fill="black" fill-opacity="0.6"/>
-</svg>
-删除分析</div>
-				</div>
+          <div @click="addNewAnalysisGroup(0)">
+            <svg
+              t="1727073223211"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="3257"
+              width="200"
+              height="200"
+            >
+              <path
+                d="M546.901333 314.282667a46.805333 46.805333 0 0 0-69.802666 0l-296.021334 340.736c-24.32 28.032-3.328 70.314667 34.944 70.314666h591.957334c38.272 0 59.306667-42.282667 34.944-70.314666l-296.021334-340.736z"
+                p-id="3258"
+              ></path></svg
+            >添加分析
+          </div>
+          <div @click="addNewAnalysisGroup(1)">
+            <svg
+              style="transform: rotate(180deg);"
+              t="1727073223211"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="3257"
+              width="200"
+              height="200"
+            >
+              <path
+                d="M546.901333 314.282667a46.805333 46.805333 0 0 0-69.802666 0l-296.021334 340.736c-24.32 28.032-3.328 70.314667 34.944 70.314666h591.957334c38.272 0 59.306667-42.282667 34.944-70.314666l-296.021334-340.736z"
+                p-id="3258"
+              ></path></svg
+            >添加分析
+          </div>
+
+          <div @click="setTheLocation(0)" v-if="![0].includes(index)">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1551_2752)">
+                <path
+                  d="M11 7.5L8 4L5 7.5H7.47826V13.5C7.47826 13.7761 7.71185 14 8 14C8.28815 14 8.52174 13.7761 8.52174 13.5V7.5H11Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2 3L14 3V2L2 2L2 3Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1551_2752">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            置顶
+          </div>
+          <div @click="setTheLocation(1)" v-if="![maxIndex].includes(index)">
+            <svg
+              width="16"
+              height="16"
+              style="transform: rotate(180deg);"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1551_2752)">
+                <path
+                  d="M11 7.5L8 4L5 7.5H7.47826V13.5C7.47826 13.7761 7.71185 14 8 14C8.28815 14 8.52174 13.7761 8.52174 13.5V7.5H11Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M2 3L14 3V2L2 2L2 3Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1551_2752">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            置底
+          </div>
+
+          <div @click="setTheLocation(2)" v-if="![0].includes(index)">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1552_2795)">
+                <path
+                  d="M11 5.5L8 2L5 5.5H7.47826V13.5C7.47826 13.7761 7.71185 14 8 14C8.28815 14 8.52174 13.7761 8.52174 13.5V5.5H11Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1552_2795">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            上移
+          </div>
+
+          <div @click="setTheLocation(3)" v-if="![maxIndex].includes(index)">
+            <svg
+              style="transform: rotate(180deg);"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_1552_2795)">
+                <path
+                  d="M11 5.5L8 2L5 5.5H7.47826V13.5C7.47826 13.7761 7.71185 14 8 14C8.28815 14 8.52174 13.7761 8.52174 13.5V5.5H11Z"
+                  fill="black"
+                  fill-opacity="0.9"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_1552_2795">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            下移
+          </div>
+
+          <div @click="deleteAnalysisGroup()" v-if="maxIndex!==0">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M6.25 3.125C6.25 2.77982 6.52982 2.5 6.875 2.5H13.125C13.4702 2.5 13.75 2.77982 13.75 3.125C13.75 3.47018 13.4702 3.75 13.125 3.75H6.875C6.52982 3.75 6.25 3.47018 6.25 3.125Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M2.5 5.625C2.5 5.26481 2.77982 5 3.125 5H16.875C17.2202 5 17.5 5.26481 17.5 5.625C17.5 6.03952 17.2202 6.25 16.875 6.25L15.625 6.30435V17.5H4.375V6.25H3.125C2.77982 6.25 2.5 6.03952 2.5 5.625ZM5.625 6.25V16.1957L14.375 16.25V6.30435L5.625 6.25Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8.125 8.06838C8.47018 8.06838 8.75 8.32276 8.75 8.63656V13.7502C8.75 14.064 8.47018 14.3184 8.125 14.3184C7.77982 14.3184 7.5 14.064 7.5 13.7502V8.63656C7.5 8.32276 7.77982 8.06838 8.125 8.06838Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M11.875 8.06838C12.2202 8.06838 12.5 8.32276 12.5 8.63656V13.7502C12.5 14.064 12.2202 14.3184 11.875 14.3184C11.5298 14.3184 11.25 14.064 11.25 13.7502V8.63656C11.25 8.32276 11.5298 8.06838 11.875 8.06838Z"
+                fill="black"
+                fill-opacity="0.6"
+              />
+            </svg>
+            删除分析
+          </div>
+        </div>
         <!-- </el-popover> -->
         <!-- <div class="a-h-r-btn" @click.stop="addTemplate">
           <img src="@/assets/icon/classroomObservation/newcon.svg" alt="" />
@@ -104,18 +287,20 @@
         <analysisItem
           ref="analysisItemRef"
           v-if="
-            converter(item.jsonData.name) != converter('词频词汇分析') &&(
+            converter(item.jsonData.name) != converter('词频词汇分析') &&
               ![
                 converter('S-T分析：课堂时间分配'),
                 converter('S-T分析：师生互动分析'),
-                converter('S-T分析：教学模式分析'),
-              ].includes(converter(item.jsonData.name)) && !['bfe844b1-7a45-11ef-9b30-005056b86db5'].includes(item.jsonData.mId)
-			)
+                converter('S-T分析：教学模式分析')
+              ].includes(converter(item.jsonData.name)) &&
+              !['bfe844b1-7a45-11ef-9b30-005056b86db5'].includes(
+                item.jsonData.mId
+              )
           "
           :dialogTagDataList="dialogTagDataList"
-					:dataList="dataList"
+          :dataList="dataList"
           :bmData="bmData"
-          :key="item.id + item.Type + '-'+index"
+          :key="item.id + item.Type + '-' + index"
           :data="item"
           :tid="tid"
           :fileId="fileId"
@@ -130,13 +315,16 @@
             [
               converter('S-T分析：课堂时间分配'),
               converter('S-T分析：师生互动分析'),
-              converter('S-T分析：教学模式分析'),
-            ].includes(converter(item.jsonData.name)) || ['bfe844b1-7a45-11ef-9b30-005056b86db5'].includes(item.jsonData.mId)
+              converter('S-T分析：教学模式分析')
+            ].includes(converter(item.jsonData.name)) ||
+              ['bfe844b1-7a45-11ef-9b30-005056b86db5'].includes(
+                item.jsonData.mId
+              )
           "
           :dialogTagDataList="dialogTagDataList"
           ref="analysisItemRef"
           :bmData="bmData"
-          :key="item.id + item.Type+'-' + index"
+          :key="item.id + item.Type + '-' + index"
           :data="item"
           :tid="tid"
           :fileId="fileId"
@@ -229,10 +417,20 @@ export default {
       type: String,
       require: true
     },
-		dataList:{
-			type:Array,
-			default:()=>{return []}
-		},
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    maxIndex: {
+      type: Number,
+      default: 0
+    }
   },
   components: {
     analysisItem,
@@ -311,7 +509,7 @@ export default {
       // this.$refs.editNameDialogRef.open(this.title)
     },
     editNameCheckFn() {
-			if(!this.editTitle)return;
+      if (!this.editTitle) return;
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.editTitle = false;
@@ -319,7 +517,7 @@ export default {
         } else {
           this.$nextTick(() => {
             this.$refs.editNameInputRef.focus();
-						this.$message.error("该名称不符合规则")
+            this.$message.error("该名称不符合规则");
           });
         }
       });
@@ -328,32 +526,42 @@ export default {
       this.$emit("changeAnalysisName", { name: name, type: this.type });
       // this.$refs.editNameDialogRef.close()
     },
-		addNewAnalysisGroup(po=1){//0：上面   1：下面
-			if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
-			this.visible = false;
-			this.$confirm("确定添加新的分析分组吗？", "添加分析", {
+    addNewAnalysisGroup(po = 1) {
+      //0：上面   1：下面
+      if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
+      this.visible = false;
+      this.$confirm("确定添加新的分析分组吗？", "添加分析", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "waring",
+        type: "waring"
       })
         .then(() => {
-					this.$emit("addNewAnalysisGroup",{type:this.type,po:po})
-			}).catch(()=>{})
-		},
-		deleteAnalysisGroup(){
-			if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
-			this.visible = false;
-			this.$confirm("删除后无法恢复，确定删除该分析吗？", "删除分析", {
+          this.$emit("addNewAnalysisGroup", { type: this.type, po: po });
+        })
+        .catch(() => {});
+    },
+    deleteAnalysisGroup() {
+      if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
+      this.visible = false;
+      this.$confirm("删除后无法恢复，确定删除该分析吗？", "删除分析", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "waring",
+        type: "waring"
       })
-        .then((res) => {
-					let _groupId = this.analysisItemList.map(i=>i.id)
-					this.$emit("delAnalysisGroup",{type:this.type,groupId:_groupId})
-				}).catch(e=>{})
-			
-		}
+        .then(res => {
+          let _groupId = this.analysisItemList.map(i => i.id);
+          this.$emit("delAnalysisGroup", {
+            type: this.type,
+            groupId: _groupId
+          });
+        })
+        .catch(e => {});
+    },
+    setTheLocation(type = 0) {
+      this.visible = false;
+      if (!this.tid) return this.$message.error("请新建课堂，或选择历史课堂");
+      this.$emit("setTheLocation", { value: this.type, type: type });
+    }
   }
 };
 </script>
@@ -763,19 +971,19 @@ export default {
   height: 100%;
 }
 .a_h_l_t_input {
-	width: 25%;
-	min-width: 220px;
+  width: 25%;
+  min-width: 220px;
   height: 100%;
   display: flex;
   align-items: center;
 }
 
-.a_h_l_t_input>>>.el-form{
-	width: 100%;
-	min-width: 220px;
+.a_h_l_t_input >>> .el-form {
+  width: 100%;
+  min-width: 220px;
 }
 
-.a_h_l_t_input>>>.el-form-item{
-	margin-bottom: 0;
+.a_h_l_t_input >>> .el-form-item {
+  margin-bottom: 0;
 }
 </style>

src/components/pages/classroomObservation/components/analysisItem.vue

@@ -65,7 +65,11 @@
             />
             生成完成
           </span>
-        </span>
+        
+				</span>
+
+				
+
         <span
           v-if="loadNum == 0 && !openItem && tid"
           class="ai-h-r-icon4"
@@ -85,6 +89,13 @@
           </el-tooltip>
         </span>
 
+				<!-- <span
+          v-if="loadNum == 0 && !openItem && tid"
+          class="ai-h-r-moveIcon"
+        >
+					<svg t="1727418782659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14988" width="200" height="200"><path d="M236.288 787.712V1024H0v-236.288h236.288z m393.856 0V1024H393.856v-236.288h236.288z m393.856 0V1024h-236.288v-236.288H1024zM236.288 393.856v236.288H0V393.856h236.288z m393.856 0v236.288H393.856V393.856h236.288z m393.856 0v236.288h-236.288V393.856H1024zM236.288 0v236.288H0V0h236.288z m393.856 0v236.288H393.856V0h236.288zM1024 0v236.288h-236.288V0H1024z" fill="#000000" p-id="14989"></path></svg>
+        </span> -->
+
         <span
           v-if="loadNum == 0 && openItem"
           :class="['ai-h-r-icon1', showIndex <= 0 ? 'ai_h_r_iconOpacity' : '']"
@@ -1018,6 +1029,20 @@ export default {
   display: block;
 }
 
+.ai-h-r-moveIcon{
+	display: none;
+	cursor: move !important;
+}
+
+.analysisItem:hover .ai-h-r-moveIcon{
+	display: block;
+}
+
+.ai-h-r-moveIcon>svg{
+	width: 18px;
+	height: 18px;
+}
+
 .ai-main {
   width: 100%;
   height: auto;

src/components/pages/classroomObservation/components/messageArea.vue

@@ -41,6 +41,8 @@
       <analysis
         v-for="(item, index) in dialogTagList"
         :key="item.value"
+        :index="index"
+        :maxIndex="dialogTagList.length - 1"
         @updateMessage="updateMessage"
         :ref="`analysis${item.value}`"
         :showBrief="showBrief"
@@ -50,6 +52,7 @@
         @changeAnalysisName="changeAnalysisName"
         @addNewAnalysisGroup="addNewAnalysisGroup"
         @delAnalysisGroup="delAnalysisGroup"
+        @setTheLocation="setTheLocation"
         :dataList="dataList.filter(i => !(item.value == 0 && i.tIndex == 2))"
         :bmData="bmData.jsonData"
         :title="item.name"
@@ -929,13 +932,15 @@ export default {
             this.$nextTick(() => {
               let promises = [];
               this.$nextTick(() => {
-								let forData = arr.length?arr:this.dialogTagList;
-								this.dialogTagList = forData;
+                let forData = arr.length ? arr : this.dialogTagList;
+                this.dialogTagList = forData;
                 forData.forEach(i => {
                   if (i.value === 0) return;
                   promises.push(this.getAnalysisData(i.value));
                 });
                 Promise.all(promises).then(res => {
+									this.dataList.sort((a,b)=>a.tIndex - b.tIndex);
+									this.dataList.sort((a,b)=>a.Type - b.Type)
                   resolve();
                 });
               });
@@ -1352,6 +1357,43 @@ export default {
         }
       });
     },
+    setTheLocation(data) {
+      let moveList = JSON.parse(JSON.stringify(this.dialogTagList));
+      let _index = moveList.findIndex(i => i.value === data.value);
+      if (_index === -1) return; // 如果没找到，直接退出
+      if (data.type == 0) {
+        // 置顶
+				moveList = this.moveListFn(moveList, _index, 0)
+      } else if (data.type == 1) {
+        // 置底
+				moveList = this.moveListFn(moveList, _index, moveList.length-1)
+      } else if (data.type == 2) {
+        // 上移
+				moveList = this.moveListFn(moveList, _index, _index-1)
+      } else if (data.type == 3) {
+        // 下移
+				moveList = this.moveListFn(moveList, _index, _index+1)
+      }
+      this.dialogTagList = moveList;
+			this.bmData.jsonData["dialogTagList"] = this.dialogTagList;
+      this.saveData(this.bmData)
+			this.$forceUpdate()
+		},
+    moveListFn(arr, fromIndex, toIndex) {
+      // 确保索引在数组范围内
+      if (
+        fromIndex >= 0 &&
+        fromIndex < arr.length &&
+        toIndex >= 0 &&
+        toIndex < arr.length
+      ) {
+        // 删除要移动的元素并存储
+        const element = arr.splice(fromIndex, 1)[0];
+        // 在新的位置插入元素
+        arr.splice(toIndex, 0, element);
+      }
+      return arr;
+    },
     init() {
       this.bmData = {};
       this.getDefaultData();