开发图形组件

src/views/teacher/teacherStatistics/components/custom-componet/myEditor.vue

@@ -17,13 +17,19 @@ import type { IExportJson } from '@/views/teacher/teacherStatistics/components/m
 import { useGenThumbnail } from '@/views/teacher/teacherStatistics/components/mt-edit/composables/thumbnail';
 import  MtEdit  from '@/views/teacher/teacherStatistics/components/mt-edit';
 import {getCurrentInstance, onBeforeUnmount} from 'vue';
-import vueSignalGaudy from '@/views/teacher/teacherStatistics/components/vue-xq-test/vue-signal-gaudy.vue';
 import {leftAsideStore} from "@/views/teacher/teacherStatistics/components/mt-edit/store/left-aside";
 
+// xq 组件
+import vueSignalGaudy from '@/views/teacher/teacherStatistics/components/vue-xq-test/vue-signal-gaudy.vue';
+import VueImg from '@/views/teacher/teacherStatistics/components/vue-xq-test/vue-img.vue';
+
 
 const instance = getCurrentInstance();
 instance?.appContext.app.component('vue-my-signal-gaudy', vueSignalGaudy);
-leftAsideStore.registerConfig('vue四遥组件', [
+instance?.appContext.app.component('vue-my-img', VueImg);
+
+
+leftAsideStore.registerConfig('工作组件', [
   {
     id: 'vue-my-signal-gaudy',
     title: 'vue遥信02',
@@ -66,6 +72,19 @@ leftAsideStore.registerConfig('vue四遥组件', [
       }
     }
   },
+    {
+    id: 'vue-my-img',
+    title: '图形组件',
+    type: 'vue',
+    thumbnail: '/svgs/image.svg',
+    props: {
+      moduleId: {
+        type: 'upload',
+        val: '--',
+        title: '绑定'
+      }
+    }
+  },
 ]);
 
 const electrical_modules_files = import.meta.glob('./assets/svgs/electrical/**.svg', {

src/views/teacher/teacherStatistics/components/mt-edit/components/layout/left-aside/index.vue

@@ -42,8 +42,7 @@
                 :offset="getOffset(index + 1)"
               >
                 <el-image
-                  draggable="false"           
-                  style="width: 60px ; height: 60px;"
+                  style="width: 30px ; height: 30px; filter: brightness(0) invert(1);"
                   :src="item.thumbnail"
                 />
                 <template #content>
@@ -308,6 +307,8 @@ const onDelLocalFile = ({ id }: ILeftAsideConfigItem) => {
 };
 </script>
 <style>
+
+
 /* 折叠面板：透明背景 */
 #mt-left-aside .el-collapse-item__header,
 #mt-left-aside .el-collapse-item__wrap {
@@ -349,8 +350,8 @@ const onDelLocalFile = ({ id }: ILeftAsideConfigItem) => {
 }
 #mt-left-aside .w-40px:hover .el-image {
   transform: scale(1.18);
-  background: rgba(64, 158, 255, 0.18);
-  box-shadow: 0 0 8px rgba(64, 158, 255, 0.4);
+  background: rgba(64, 160, 255, 0.11);
+  /* box-shadow: 0 0 1px rgba(64, 158, 255, 0.4); */
 }
 #mt-left-aside .w-40px:active .el-image {
   transform: scale(0.92);

src/views/teacher/teacherStatistics/components/vue-xq-test/vue-img.vue

@@ -17,15 +17,13 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { useImgStore } from '@/components/mt-edit/store/imgStore';
-import emitter from '@/utils/emitter';
+import emitter from '@/views/teacher/teacherStatistics/utils/emitter';
 import { Picture } from '@element-plus/icons-vue';
-import { modelApi, BASE_URL } from '@/utils/request';
-import { formatFilePath, formatTimestamp } from '@/utils/dataFormatter';
+import { modelApi, BASE_URL } from '@/views/teacher/teacherStatistics/utils/request';
+import { formatFilePath } from '@/views/teacher/teacherStatistics/utils/dataFormatter';
 
 // const displayImageUrl = ref<string | null>(null);
 const displayImageUrl = ref<string>();
-const imgStore = useImgStore();
 
 const props = defineProps({
   definitionItemJson: {