demo又改一波

src/views/ai/pic_demo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="display: flex;">
-    <div style="width: 25%;height: 810px;border: 1px solid #ededed;background-color: #f4f4f4;">
+    <div style="width: 15%;height: 810px;border: 1px solid #ededed;background-color: #f4f4f4;">
       <el-form>
         <el-form-item label="花样分类" style="margin-left: 10px;margin-bottom: 0;">{{ tag_active }}</el-form-item>
         <el-form-item>
@@ -16,20 +16,16 @@
         </el-form-item>
       </el-form>
     </div>
-    <div style="width: 20%;background-color: #f4f4f480;border-right: 1px solid #ededed;">
+    <div style="width: 85%;background-color: #f4f4f480;padding-top: 2%;height: 800px;overflow-y: auto;">
       <el-form :inline="true" style="display: flex;  flex-direction: column;  justify-content: center;  align-items: center;">
-        <el-form-item label="以文搜图"></el-form-item>
         <el-form-item>
-          <el-input type="text" placeholder="输入关键词" v-model="searchText" style="width: 200px;margin-right: 5px;"></el-input><el-button type="primary" icon="search" @click="txtmatch">快搜</el-button>
-        </el-form-item>
-        <el-form-item label="以图搜图"></el-form-item>
-        <el-form-item>
-          <div style="width: 256px;height: 256px;background-color: rgb(238, 242, 245);">
-            <img v-if="dialogImageUrl" :src="dialogImageUrl" style="width: 256px;height: 256px;">
-            <img v-else src="/src/assets/images/noimg.png" style="width: 256px;height: 256px;">
+          <div v-if="dialogImageUrl!=''" style="height: 96px;line-height: 96px;background-color: rgb(238, 242, 245);display: inline;margin-right: 50px;">
+            <span>您上传的图片：</span>
+            <img v-if="dialogImageUrl" :src="dialogImageUrl" style="width: 96px;height: 96px;vertical-align: middle;">
+            <img v-else src="/src/assets/images/noimg.png" style="width: 96px;height: 96px;vertical-align: middle;">
           </div>
-        </el-form-item>
-        <el-form-item style="margin-bottom:0px">
+          <el-input type="text" placeholder="输入关键词" v-model="searchText" style="width: 200px;margin-right: 5px;"></el-input>
+          <el-button type="primary" icon="search" @click="txtmatch">以文搜图</el-button>
           <el-upload
             class="upload-demo"
             action=""
@@ -39,34 +35,41 @@
             :on-change="prevImg"
             :limit="1"
             :on-exceed="handleExceed"
+            style="margin-left: 10px;height: 32px;"
           >
-            <el-button type="primary" icon="upload">点击上传</el-button>
+            <el-button type="primary" icon="upload" title="只能上传 jpg/png 文件，且不超过 2M">以图搜图</el-button>
           </el-upload>
-          <el-button icon="favourites" @click="resetQuery" style="margin-left: 10px;margin-bottom: 16px;">我的收藏</el-button>
-        </el-form-item>
-        <el-form-item label="只能上传 jpg/png 文件，且不超过 2M"></el-form-item>
-        <el-form-item>
-          <el-button :type="mayMatch?'primary':''" @click="match">AI匹配花样</el-button>
         </el-form-item>
-      </el-form>
-    </div>
-    <div style="width: 55%;background-color: #f4f4f480;padding-top: 2%;height: 800px;overflow-y: auto;">
-      <el-form :inline="true" style="display: flex;  flex-direction: column;  justify-content: center;  align-items: center;">
         <el-form-item label="匹配结果"></el-form-item>   
         <div v-if="startMacth">正在努力的匹配运算中...</div>     
         <el-form-item  v-if="macthresult" v-for="(ele,index) in macthresult" style="margin: 0;width: 100%;text-align: center;">
           <el-label style="width:100%;text-align: left;padding-left: 10px;font-weight: bold;cursor: pointer;text-decoration: underline;" @click="showImgList(index)">{{ '> '+ele.type }} ({{ '花色数量：'+ele.list.length }})</el-label>
           <div class="imglist" v-if="imgLstInd==index" v-for="item in ele.list">
             <div>
-              <img :src="item.url">
+              <img :src="item.url" @click="showOrgin(item)">
               <div style="width: 180px;">{{ item.filename }}</div>
               <div style="width: 180px;text-align: left;padding-left: 10px;overflow: hidden;height: 100px;" v-html="item.desc"></div>
             </div>
-          </div>          
+          </div>    
+          <div class="imglist" v-else>
+            <div>
+              <img :src="ele.list[0].url" @click="showOrgin(ele.list[0])">
+              <div style="width: 180px;">{{ ele.list[0].filename }}</div>
+              <div style="width: 180px;text-align: left;padding-left: 10px;overflow: hidden;height: 100px;" v-html="ele.list[0].desc"></div>
+            </div>
+          </div>      
         </el-form-item>
       </el-form>
     </div>
   </div>
+  <el-dialog v-model="isShowOrgin" @close="isShowOrgin=false">
+    <div style="display: flex;flex-direction: column;  justify-content: center;  align-items: center;">
+      <img v-if="dialogImageUrl!=''" :src="dialogImageUrl" style="width: 128px;height: 128px;">
+      <div>目标花样图</div>
+      <div><img :src="currentImg.url"></div>
+      <div>结果花样图</div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup name="pic_demo">
@@ -79,6 +82,8 @@ const startMacth = ref(false)
 const macthresult=ref(null);
 const searchText=ref('');
 const imgLstInd=ref(-1);
+const isShowOrgin=ref(false);
+const currentImg=ref({});
 const demo_type=ref([
   {"name":"自然元素",list:[]},
   {"name":"几何图形",list:[]},
@@ -156,6 +161,10 @@ demo_type.value[2]["list"]=[
 const showImgList=(ind)=>{
   imgLstInd.value = ind;
 }
+const showOrgin=(item)=>{
+  isShowOrgin.value=true;
+  currentImg.value = item;
+}
 const handleSuccess = (response, file, fileList) => {
   console.log('上传成功', response);
 };
@@ -165,6 +174,10 @@ const handleError = (error, file, fileList) => {
 };
 
 const prevImg = (file)=>{
+  if(tag_active.value==''){
+    proxy.$modal.msgError('请先选择花样分类!');
+    return;
+  }
   mayMatch.value=false;
   macthresult.value=null;
   const isJPGorPNG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
@@ -184,7 +197,7 @@ const prevImg = (file)=>{
 }
 
 const beforeUpload = (file) => {
-  
+  match();
   return false;
 };