demo功能更改

src/views/ai/pic_demo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" style="display: flex;">
-    <div style="width: 30%;height: 810px;border: 1px solid #ededed;background-color: #f4f4f4;">
+    <div style="width: 25%;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,9 +16,13 @@
         </el-form-item>
       </el-form>
     </div>
-    <div style="width: 70%;background-color: #f4f4f480;padding-top: 8%;">
+    <div style="width: 20%;background-color: #f4f4f480;border-right: 1px solid #ededed;">
       <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 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;">
@@ -44,9 +48,18 @@
         <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>        
         <el-form-item style="margin: 0;width: 100%;display: contents;text-align: center;">
           <div v-if="macthresult" class="imglist" v-for="item in macthresult">
-            <div><img :src="item.url"><div style="width: 180px;">{{ item.filename }}</div></div>
+            <div>
+              <img :src="item.url">
+              <div style="width: 180px;">{{ item.filename }}</div>
+              <div style="width: 180px;text-align: left;padding-left: 10px;" v-html="item.desc"></div>
+            </div>
           </div>
           <div v-if="startMacth">正在努力的匹配运算中...</div>
         </el-form-item>
@@ -63,6 +76,7 @@ const tag_active=ref("");
 const mayMatch=ref(false);
 const startMacth = ref(false)
 const macthresult=ref(null);
+const searchText=ref('');
 const demo_type=ref([
   {"name":"自然元素",list:[]},
   {"name":"几何图形",list:[]},
@@ -176,6 +190,40 @@ const clickTag = (tag)=>{
   tag_active.value = tag.name
 }
 
+const txtmatch=()=>{
+  if(searchText.value==''){
+    proxy.$modal.msgError('请输入匹配关键词!');
+    return;
+  }
+  macthresult.value=null;
+  startMacth.value = true;
+  setTimeout(() => {
+    startMacth.value = false;
+    macthresult.value=[
+      {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+    ];
+  }, 3000);
+}
+
 const match=()=>{
   if(tag_active.value==''){
     proxy.$modal.msgError('请先选择花样分类!');
@@ -186,14 +234,30 @@ const match=()=>{
     return;
   }
   startMacth.value = true;
+  macthresult.value=null;
   setTimeout(() => {
     startMacth.value = false;
     macthresult.value=[
-      {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg"},
-      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg"},
-      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg"},
-      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg"},
-      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg"},
+      {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
     ];
   }, 3000);
   
@@ -209,12 +273,13 @@ function resetQuery() {
   width: 200px;
   padding: 1%;
   background-color: #fff;
-  height: 200px;
+  height: 275px;
   margin-left: 10px;
   border-radius: 5px;
   display: flex;
   font-size: 12px;
   text-align: center;
+  line-height: 20px;
 }
 .imglist img{
   height: 145px;