ai

src/views/dataChart/privateChart/privateChartEditParams.vue

@@ -1,33 +1,78 @@
 <template>
   <div class="content">
     <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="fullHeigh">
-      <el-tab-pane label="数据读取" name="first">
+      <!-- <el-tab-pane label="数据读取" name="first">
         <PrivateChartEditParamsData ref="data" @change="onRender"></PrivateChartEditParamsData>
       </el-tab-pane>
       <el-tab-pane label="参数配置" name="second">
         <PrivateChartEditParamsConfig ref="config" @change="onChangeConfig"></PrivateChartEditParamsConfig>
+      </el-tab-pane> -->
+      <el-tab-pane label="AI查询" name="third">
+        <div class="box fullHeigh">
+          <div class="box-msg">
+            <div v-for="(item, i) in items" :key="i" :class="{ active: item.type === 1 }" class="box-msg-items d-flex mb-3">
+              <div class="box-msg-items-header py-3" :class="item.type === 1 ? 'ml-3' : 'mr-3'">
+                <el-image style="width: 30px; height: 30px;" :src="require(`@/assets/image/${item.type === 1 ? 'robot' : 'robot'}.jpg`)" fit="cover"></el-image>
+              </div>
+              <div class="box-msg-items-item">
+                <div class="box-msg-items-item-title">
+                  {{ item.type === 1 ? '我' : '图表助手' }}
+                </div>
+                <div class="box-msg-items-item-content">
+                  {{ item.content }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="box-input">
+            <el-input placeholder="请输入内容" v-model="inputTxt" @keydown.enter.native="onSubmit">
+              <m-button slot="append" icon="el-icon-s-promotion" @click="onSubmit"></m-button>
+            </el-input>
+          </div>
+        </div>
       </el-tab-pane>
-      <el-tab-pane label="AI查询" name="third">AI查询</el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
 // 数据模块
-import PrivateChartEditParamsData from './privateChartEditParamsData.vue'
-import PrivateChartEditParamsConfig from './privateChartEditParamsConfig.vue'
+// import PrivateChartEditParamsData from './privateChartEditParamsData.vue'
+// import PrivateChartEditParamsConfig from './privateChartEditParamsConfig.vue'
 export default {
   name: 'privateChartEditParams',
-  components: {
-    PrivateChartEditParamsConfig,
-    PrivateChartEditParamsData
-  },
+  // components: {
+  //   PrivateChartEditParamsConfig,
+  //   PrivateChartEditParamsData
+  // },
   data () {
     return {
-      activeName: 'first'
+      activeName: 'third',
+      inputTxt: null,
+      items: [
+        {
+          type: 1,
+          content: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, eos beatae? Labore maiores soluta tempore iste dolores adipisci libero quo sed, sunt non quam cupiditate, dolor dolorum, earum fugit nemo.'
+        },
+        {
+          type: 2,
+          content: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, eos beatae? Labore maiores soluta tempore iste dolores adipisci libero quo sed, sunt non quam cupiditate, dolor dolorum, earum fugit nemo.'
+        }
+      ]
     }
   },
   methods: {
+    onSubmit () {
+      if (!this.inputTxt) {
+        return
+      }
+      this.items.push({
+        type: 1,
+        content: this.inputTxt
+      })
+      this.inputTxt = null
+      // this.submitForm()
+    },
     // 数据读取
     onGetRefs () {
       return {
@@ -35,19 +80,19 @@ export default {
         configRefs: this.$refs.config
       }
     },
-    onRender (items) {
-      this.$refs.config.onSetConfig(Object.keys(items[0]).map(e => {
-        return {
-          name: e,
-          value: e
-        }
-      }))
-      console.log('onRender', items)
-      // this.$emit('render', v)
-    },
-    onChangeConfig (v) {
-      this.$emit('render:config', v)
-    },
+    // onRender (items) {
+    //   this.$refs.config.onSetConfig(Object.keys(items[0]).map(e => {
+    //     return {
+    //       name: e,
+    //       value: e
+    //     }
+    //   }))
+    //   console.log('onRender', items)
+    //   // this.$emit('render', v)
+    // },
+    // onChangeConfig (v) {
+    //   this.$emit('render:config', v)
+    // },
     handleClick () {}
   }
 }
@@ -61,11 +106,63 @@ export default {
 .fullHeigh {
   height: 100%;
 }
+.box {
+  overflow: hidden;
+  $height: 60px;
+  &-msg {
+    height: calc(100% - #{$height});
+    &-items {
+      &.active {
+        flex-direction: row-reverse; /* 水平反向 */
+        .box-msg-items-height {
+          order: 2;
+        }
+        .box-msg-items-item {
+          order: 1;
+          max-width: calc(100% - 150px);
+          &-title {
+            text-align: right;
+          }
+          &-content {
+            background-color: lighten($theme-color, 42%);
+            border-radius: 10px;
+            padding: 5px 10px;
+          }
+        }
+      }
+      // height: 100%;
+      &-header {
+        // width: 30px;
+        // height: 30px;
+      }
+      &-item {
+        &-title {
+          font-size: 14px;
+          font-weight: bold;
+          color: $theme-color;
+        }
+        &-content {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+  &-input {
+    height: $height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 ::v-deep .el-tabs__content {
   height: calc(100% - 40px);
   overflow: auto;
   box-sizing: border-box;
 }
+::v-deep .el-tab-pane {
+  height: 100%;
+}
 
 ::v-deep .el-tabs--border-card {
   box-shadow: unset;