fu-hsi-web/src/views/PoliceAi/index.vue

<template>
  <div class="PoliceAi">
    <div class="case-title">
      <div class="case-item">
        <span>案件名称</span>
        <span>|</span>
        <el-select v-model="caseId" style="width: 200px;" clearable placeholder="请选择案件" @change="selectCase">
          <el-option v-for="item in caseOptions" :key="item.id" :label="item.caseName" :value="item.id" />
        </el-select>

      </div>
      <el-input v-model="caseActorName" class="case-input" readonly placeholder="行为人" />
    </div>
    <div :style="{marginTop:firstEnter?'146px':''}" class="main-content">
      <div class="robot">
        <div class="robot-top">
          <img src="../../assets/police/robot.png" alt="">
          <span>数字民警</span>
        </div>
        <span class="robot-item">
          你好，本数字民警可为您提供案件分析结果查询服务，您还能通过输入 @来选取特定罪与非罪指标结果，以便精准获取您所需信息。
        </span>
      </div>
      <div class="nav-list">
        <div class="nav-item">
          <div class="nav-item-top">
            <img src="../../assets/police/analysis.png" alt="">
            <span>案件分析结果</span>
          </div>
          <span class="desc">案件分析预测入罪与出罪，提示司法判定风险</span>
        </div>
        <div class="nav-item">
          <div class="nav-item-top">
            <img src="../../assets/police/case_info.png" alt="">
            <span>案件概况</span>
          </div>
          <span class="desc">获取案件的基本情况概述</span>
        </div>
        <div class="nav-item">
          <div class="nav-item-top">
            <img src="../../assets/police/evidence.png" alt="">
            <span>案件证据指引</span>
          </div>
          <span class="desc">为补充证据材料信息提供导向</span>
        </div>
      </div>
    </div>
    <div class="send-bottom">
      <el-input
        v-model="sendText"
        placeholder="可咨询案件内容、输入@或# 可选择查询指标结果"
        @keyup.enter.native="handleSend"
      />
      <img src="@/assets/police/send.png" alt="">
    </div>
  </div>
</template>

<script>
import { queryCaseList, robotChat } from '@/api/caseManagement'
import { queryIndexData } from '@/api/indexRule'
import { marked } from 'marked'
export default {
  name: 'PoliceAi',
  data() {
    return {
      caseId: '',
      caseActorName: '',
      // 是否第一次进入
      firstEnter: true,
      sendText: '',
      conversationList: [],
      caseOptions: []
    }
  },
  mounted() {

  },
  methods: {
    // 请求接口数据
    fetchData() {
      queryCaseList({}, 1, 99999).then(res => {
        this.caseOptions = res.data.records
      })
    },
    // 查询指标
    getIndexData(val) {
      queryIndexData({
        indexType: val
      }, 1, 9999).then(res => {
        this.questionlist = res.data.result
      })
    },
    selectCase() {

    },
    handleSend() {

    }
  }
}
</script>
<style lang="scss" scoped>
.PoliceAi {
    background: #FFFFFF;
    height: 100%;
    position: relative;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .case-title {
        width: 632px;
        height: 98px;
        background: rgba(55,99,255,0.15);
        border-radius: 21px 21px 21px 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 9;
        top: 24px;
        .case-item {
            display: flex;background: #FFFFFF;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #D9D9D9;
            padding: 8px 16px;
            align-items: center;
            justify-content: center;
            span {
                font-size: 16px;
                color: #333333;
                margin-right: 16px;
            }
            ::v-deep {
                .el-input__inner {
                    border: none !important;
                }
            }

        }
        .case-input {
                width: 202px;
                height: 50px;
                background: #F4F8FF;
                border-radius: 6px 6px 6px 6px;
                margin-left: 16px;
                ::v-deep {
                .el-input__inner {
                    height: 50px !important;
                }
            }
            }
    }
    .main-content {
        flex: 1;
        overflow: auto;
        width: 1154px;
        .robot {
            .robot-top {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                img {
                    width: 45px;
                    height: 45px;
                    margin-right: 10px;
                }
                span {
                    font-size: 20px;
                    color: #3763FF;
                }
            }
            .robot-item {

                background: #F5F7FF;
                border-radius: 16px 0px 16px 16px;
                line-height: 53px;font-size: 16px;
                color: #333333;
                padding: 16px;
                margin-bottom: 16px;
            }
        }
        .nav-list {
            display: flex;
            margin-top: 16px;
            .nav-item {
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #D9D9D9;
                padding: 24px;
                margin-right: 24px;
                .desc {
                    font-size: 14px;
                    color: #999999;
                }
                .nav-item-top {
                    display: flex;
                    margin-bottom: 8px;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
    .send-bottom {
        width: 1154px;
        height: 75px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        border: 2px solid rgba(55, 99, 255, 1);
        // border-image: linear-gradient(90deg, rgba(55, 99, 255, 1), rgba(25, 166, 254, 1)) 2 2;
        margin-bottom: 56px;
        display: flex;
        align-items: center;
        position: relative;
        ::v-deep {
            .el-input__inner {
                border: none !important;
                font-size: 16px;
            }
        }
        img {
            width: 60px;
            height: 60px;
            position: absolute;
            right: 12px;
            top: 12px;
            cursor: pointer;
        }
    }
}
</style>