GY_ceshi_web/src/views/allcase/components/CaseQualityBox2.vue

<template>

<div class="CaseQualityBox2">
  <el-row style="padding: 10px;line-height: 20px;" type="flex" justify="space-between">
    <span>病案号：{{data.AAA28}}</span>
    <span>床号：{{data.CH}}</span>
    <span>住院次数：{{data.ZYCS}}</span>
  </el-row>
  <el-tabs v-model="tabsActive" style="padding: 0 10px;background-color: #fff;">
    <el-tab-pane v-for="(item, index) in tabsArray" :key="index" :label="item.label" :name="item.name" >
    </el-tab-pane>
  </el-tabs>

  <div v-if="tabsActive == 1" class="tabContent">
    <div 
      class="taskNameListAndMessage"
      :style="{
        width: currentTaskName ? '840px' : '340px'
      }"
      >
        <el-menu
            v-if="showTaskNameMenu"
            :default-active="currentTaskName"
            class="el-menu-vertical-demo"
            :style="{
              width: currentTaskName ? '230px' : '340px'
            }"
          >
           <div v-for="item in taskNameList">
            <el-submenu :index="`${item.id}`" v-if="item.child">
              <template slot="title">
                <span style="padding-left:20px">{{item.name}}</span>
              </template>
              <div v-for="element in item.child">
                <el-submenu :index="`${element.parent_id}-${element.id}`" v-if="element.child">
                  <template slot="title">
                    <span style="padding-left:40px">{{element.name}}</span>
                  </template>
                  <el-menu-item  v-for="elementItem in element.child" :index="`${item.id}-${elementItem.parent_id}-${elementItem.id}`"  @click="handleTaskNameSelect(elementItem, `${item.id}-${elementItem.parent_id}-${elementItem.id}`)">
                    <span slot="title">{{elementItem.name}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item :index="`${element.parent_id}-${element.id}`" v-else  @click="handleTaskNameSelect(element, `${element.parent_id}-${element.id}`)">
                  <span slot="title">{{element.name}}</span>
                </el-menu-item>
              </div>
            </el-submenu>
            <el-menu-item :index="`${item.id}`" v-else @click="handleTaskNameSelect(item, item.id)">
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </div>
        </el-menu>
        <div class="messageBox" v-if="currentTaskName">
          <div class="message">
            <div v-for="(item,index) in chatMessages" :key="index">
              <div v-if="item.role == 'user'" class="user-message">
                <div class="user-content">
                  {{item.content}}
                </div>
                <el-avatar src="static/img/avatar07.7b002992.png" fit="contain"></el-avatar>
              </div>
              <div v-if="item.role == 'assistant'" class="record-message">
                <el-avatar :src="require('../../../assets/images/jiqiren.png')" fit="contain"></el-avatar>
                <div class="record-content">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
          <div class="sendMessageBox">
            <!-- <div style="width: 80px;border-radius: 10px 0 0 10px;  background-color: #DDDDDD;display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 5px;">
              <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 病历</button>
              <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 检查</button>
              <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 检验</button>
              <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“知识库</button>
            </div> -->
            <div style="width: calc(100%)">
              <textarea class="inputText" v-model="inputMessage" placeholder="请输入您的问题,帮您深度解答"></textarea>
              <el-row type="flex" justify="space-between" align="middle">
                <!-- <el-icon class="iconfont zj-damuzhi" style="margin-left: 20px;line-height: 35px;"></el-icon>
                <el-icon class="iconfont zj-zanxia" style="margin-left: 20px;line-height: 35px;"></el-icon> -->
                <!-- <el-button type="primary" @click="sendMessage()" icon="el-icon-top" circle> -->
                  <div  @click="showTaskNameMenu = !showTaskNameMenu"><Hamburger/></div>
                <!-- </el-button> -->
                <el-button type="primary" @click="sendMessage()" icon="el-icon-top" circle></el-button>
              </el-row>
            </div>
          </div>
        </div>
    </div>
  </div>

  <!--病案首页-->
  <div v-else-if="tabsActive == 3" class="tabContent">
    <div ref="box" class="box22" :style="{width: width ? width + 'px' : '100%'}" :class="{'nocopy': $route.meta.nocopy}">

      <div class="score-box" :class="scoreLevel == '甲'? 'scoreLevel_1' : ( scoreLevel == '乙'?'scoreLevel_2': (scoreLevel == '丙'?'scoreLevel_3':'' ) ) ">
        <div>病案评分<span class="score-f">{{ data.score  }}分</span></div>
        <!-- <h2 class="score-dj">{{ scoreLevel }}</h2> -->
      </div>

      <div class="card-box" v-if="data.is_case">
        <div class="title">
          <span class="font-size12">智能结果更新时间：</span>
          <span class="font-size12">{{ data.quality_time }}</span>
        </div>
        <el-tag type="danger" v-if="data.is_case == 1" class="font-size12">质控中</el-tag>
        <el-tag v-if="data.is_case == 2" class="font-size12">已质控</el-tag>

      </div>


      <el-scrollbar ref="scrollRef" class="scrollBox" :style="`height: ${scrollHeight}`">
        <template v-for="(item, index) in data.data">
          <!-- is_appeal: 是否申述 -->
          <div class="list-box box-card" :key="index">
            <div class="list-score-tips-box">
              <div class="list-left-score" :class=" item.level == 1 ? 'hover-1' : 'hover-2' ">
                <div> {{ item.level == 1? '必改':'建议' }} </div>
                <div>-{{ item.score }}</div>
              </div>
              <div class="list-right-tips">
                <div><span class="title-color">字段：</span><span>{{ item.error_field }}</span></div>
                <div class="notice-box"><span class="title-color">提示：</span><span>{{ item.notice }}</span></div>
              </div>
            </div>
            <div class="list-basis-box">
              <div class="list-basis-title" @click="item.basis && clickListItem(index)">
                <span>质控依据</span>
                <span> >> </span>
                <el-image class="typeImg" v-if="item.is_artificial == 0" :src="require('../../../assets/images/zsicon.png')" fit="contain">
                </el-image>
                <el-image v-if="item.is_artificial == 1" class="typeImg" :src="require('../../../assets/images/ysicon.png')" fit="contain">
                </el-image>
              </div>
              <div class="list-basis-text">
                <div class="list-basis-text-t" :class="item.show?'show':''">
                  <div v-for="(yItem, yIndex) of item.basis" :key="yIndex" style="margin-bottom: 10px;">
                    <div v-if="item.rule_id !== 6">
                      <span class="span-index">{{ yIndex+1 }}</span>
                      <span v-if="item.category=='入院记录'">
                      <span v-for="(cItem, cIndex) of yItem" :key="cIndex" @click="hightRight(cItem,292,item.JZHM)" v-html="cItem"></span>
                    </span>
                      <span v-else>
                      <span v-for="(cItem, cIndex) of yItem" :key="cIndex" v-html="cItem"></span>
                    </span>
                    </div>
                    <div v-else>
                      <span class="span-index">1</span>
                      <span style="font-size: 13px;">{{ yItem[0] }}</span>
                    </div>
                  </div>
                </div>
                <div class="list-basis-bottom-box" v-if="$route.path == '/whitelist-caseControl'">
                  <div class="list-basis-bottom-tips">
                    <div class="appeal_no" @click="clickAppeal('appeal_no', item, 2 )" v-if="item.appeal_type == 2 && item.appeal_status == 2">驳回</div>
                    <div class="appeal_progress" v-if="item.appeal_type == 2 && item.appeal_status == 0">申诉中</div>
                    <div class="appeal_in_edit" @click="clickAppealEdit(item, 2)" v-if="item.is_artificial == 1">已整改</div>
                  </div>
                  <div class="list-basis-bottom-btn" v-if="item.appeal_type == 0">
                    <div class="appeal" @click="clickAppeal('appeal', item, 2 )">申诉</div>
                    <div class="appeal_in_ignore" @click="clickAppeal('appeal_in_ignore', item, 2 )">忽略</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-scrollbar>
    </div>
  </div>
  <AppealModal ref="AppealModalRef" @onUpdate="getTableData()"/>
</div>

</template>

<script>
import Hamburger from '@/components/Hamburger';
import AppealModal from '@/components/appealModal/index.vue'
import { setCorrection } from '@/api/qc'

  export default {
    components: {
      Hamburger,
      AppealModal
    },
    props: {
      // data: {
      //   type: Object,
      //   default() {
      //     return {
      //       data: {}
      //     }
      //   }
      // },
      // mainHomeData: {
      //   type: Object,
      //   default() {
      //     return {
      //       data: {}
      //     }
      //   }
      // },
      // type:{
      //   type: String,
      //   default() {
      //     return ''
      //   }
      // },
      height: {
        type: Number,
        default() {
          return 0
        }
      },
      width: {
        type: Number,
        default() {
          return 0
        }
      },
      MED_REC_ID: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data(){
      return {
        data: {},
        inputMessage:'',//消息输入框
        chatMessages:[],//内容显示
        tabsActive:'3',//tabs选择
        tabsArray:[
          {'name':'3','label':'质控结果'},
          {'name':'1','label':'病历生成'},
          // {'name':'2','label':'病案首页'},
          
          // {'name':'4','label':'编目首页'},
        ],
        tableData: [],
        is_show: true,
        quality_type: 2,  // 1、首页质控 2、病例质控
        taskNameList: [],
        currentTaskName: '',
        showTaskNameMenu: true
      }
    },
    computed: {
      scoreLevel() {
        /**
         * 甲＞90分
         * 乙75-90分
         * 丙＜75分
         * */
        let str
        const { score } = this.data
        if (score > 90) {
          str = '甲'
        } else if (score < 75) {
          str = '丙'
        } else if ( score <= 90 && score >= 75 ) {
          str = '乙'
        }
        return str
      },
      scrollHeight() {
        // if (this.height) {
        //   return (this.height - 214)+'px'
        // } else {
        //   return `calc(100vh - 314px)`
        // }
        return `100%`
      }
    },
    mounted(){
      this.getTableData();
      this.getTaskNameList();
    },
    methods: {
      getTaskNameList() {
        this.$axios2.get('/big_model/get_task_name', {}).then(res => {
          if(res.code == 200){            
            this.taskNameList = res.data || []
          }
        })
      },
      handleTaskNameSelect(menuItem, indexId) {
        this.currentTaskName = indexId
        this.$axios.post('/get_big_model_task', {
          rule_id: indexId.split('-').map(Number),
          MED_REC_ID: this.$props.MED_REC_ID
        }).then(res => {
          if(res.code == 200){  
            this.sendMessage(res.data)          
          }
        })
        window.electronAPI.middle()
      },
      //发送消息
      async sendMessage(params){
        const messages = params ? params : this.inputMessage.trim();
        if (messages){
          //添加用户信息到聊天记录
          this.chatMessages.push({
            role: 'user',
            content: messages
          });

          // 清空输入框
          this.inputMessage = '';
          // this.$axios.post('/predict', {
          //   query: messages
          // }).then(res => {
          //   if(res.code == 200){  
          //    // 添加模型响应消息到聊天记录
          //     this.chatMessages.push({
          //       role: 'assistant',
          //       content: res.data
          //     });   
          //   }
          // })

          //大模型请求
          const modelResponse = await this.simulateModelResponse(messages);

          // 添加模型响应消息到聊天记录
          this.chatMessages.push({
            role: 'assistant',
            content: modelResponse
          });
        }
      },
      //大模型请求
      simulateModelResponse(userMessage) {
        //请求内容
        const options = {
          method: 'POST',
          headers: {
            Authorization: 'Bearer sk-ttnryoxayznjgquagdfwjefbkubdnezabsotuczokunwkjin',
            'Content-Type': 'application/json'
          },
          // body: '{"model":"Qwen/QwQ-32B","messages":[{"role":"user","content":"当前时间"}],"stream":false,"max_tokens":512,"stop":null,"temperature":0.7,"top_p":0.7,"top_k":50,"frequency_penalty":0.5,"n":1,"response_format":{"type":"text"},"tools":[{"type":"function","function":{"description":"<string>","name":"<string>","parameters":{},"strict":false}}]}'
        };
        const body = {};
        body.model = "deepseek-ai/DeepSeek-R1";
        body.messages = [{"role":"user","content":userMessage}];
        options.body = JSON.stringify(body);

        //请求
        return  fetch('https://api.siliconflow.cn/v1/chat/completions', options).then(response => {
          return response.json();
        }).then(data => {
          const content = data.choices[0].message.content;
          return content;
        }).catch(err => console.error(err));
      },
      getTableData(isRender = false){
        const params = {
          id: this.$props.MED_REC_ID,
          isNeedLoading: isRender ? true : false
        };
        this.$axios2.post('/get_case_quality_v2', params).then(res => {
          this.$nextTick(() =>{
            console.log('this.data', this.data, res.data)
            if(isRender) {
              if(this.data.is_case != res.data.is_case) {
                this.data = res.data;
                this.data && this.data.data && Array.isArray(this.data.data)&& this.data.data.map((item) => {
                  item.show = false
                })
              }
            } else {
              this.data = res.data;
              this.data && this.data.data && Array.isArray(this.data.data)&& this.data.data.map((item) => {
                item.show = true
              })
            }
          })
        });
      },
      clickAppealEdit(item, quality_type) {
        this.$confirm('是否确认已整改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'customClass-el-message-box-center'
        }).then(() => {
          setCorrection({
            id: item.id,
            quality_type
          }).then(res => {
            if(res.code == 200) {
              this.$message.success('已整改成功！')
              this.getTableData()
            }
          });
        }).catch(() => {          
        });
      },
      onScroll(index) {
        const el = this.$el.querySelector(`.category${index}`);
        const node = el.parentNode.parentNode.parentNode
        this.$refs["scrollRef"].wrap.scrollTop = node.offsetTop;
      },
      hightRight(hightKeyWord, bllb, zyh) {
        this.$emit('hightRight',hightKeyWord,bllb,zyh)
      },
      clickListItem(idx){
        this.data.data[idx].show = !this.data.data[idx].show
        this.$forceUpdate();
      },
      // 点击申诉、忽略按钮
      clickAppeal(type,items,quality_type){
        if(type == 'appeal_in_ignore') {
          this.$refs.AppealModalRef.handleIgnore(items, quality_type)
        } else {
          this.$refs.AppealModalRef.openAppealDialog(type, items, quality_type)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.CaseQualityBox2 {
  height: 100%;
  .tabContent {
    height: calc(100% - 94px);
  }
}
::v-deep.el-submenu {
  &>.el-submenu__title {
    padding-left: 0 !important;

    .el-submenu__icon-arrow {
      display: block !important;
    }
  }
}
.taskNameListAndMessage {
  height: 100%;
  overflow-y: auto;
  background-color: white;
  border-radius: 10px;
  display: flex;
  .el-menu-vertical-demo {
    // width:340px;
    height: 100%;
    overflow-y: scroll;
    width: 230px;
  }
}
.messageBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  
  .message {
    flex: 1;
    margin-bottom: 20px;
    max-height: 85%;
    overflow-y: auto;
    height: 480px;
    background-color: white;
    border-radius: 10px;
    .user-message{
      display: flex;
      margin: 10px 10px 20px 10px;
      justify-content: right;
      .user-content {
        line-height: 40px;
        background-color: #bee2f8;
        margin-right: 10px;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        flex: 1
      }
    }
    .record-message {
      display: flex;
      margin: 10px 10px 20px 10px;
      .record-content {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        width: 360px;
        margin-left:10px; 
        padding: 0 10px 0 10px;
        border-radius: 5px;
        line-height: 40px;
        flex: 1
      }
    }
  }

  .sendMessageBox {
    margin: 10px;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 8px;
    display: flex;
    height: 150px;
    .inputText {
      height: 80px;
      border: none;
      outline:none; 
      width: 100%;
      resize: none;
    }
  }
}



::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}


.box22 {
  padding: 0 10px;
  background: #FFFFFF;
  border-radius: 5px;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  .score-box{
    width: 100%;
    margin-bottom: 16px;
    padding: 30px 50px 30px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    div{
      font-size: 20px;
    }
    .score-f{
      padding-left: 20px;
      font-size: 20px;
    }
    .score-dj,.score-f{
      font-weight: bold;
    }
  }
  .score-box.scoreLevel_1{
    background: rgb(11, 133, 63);
    background-image: url('../../../assets/images/icon-jia.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .score-box.scoreLevel_2{
    background: rgb(152, 112, 20);
    background-image: url('../../../assets/images/icon-yi.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .score-box.scoreLevel_3{
    background: rgb(199, 54, 13);
    background-image: url('../../../assets/images/icon-bing.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .card-box {
    // height: 175px;
    // background: #FFFFFF;
    // border: 1px solid #E2E2E2;
    background: #f1f5fe;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 12px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      // font-weight: bold;
      color: #333333;
      line-height: 22px;
      // span {
      //   margin-left: 7px;
      // }
    }
    .card-icon-btn{
      width: auto;
      padding: 4px 8px;
      border-radius: 4px;
      background: rgb(254, 240, 240);
      color: rgb(245, 128, 140);
      border: 1px solid rgb(245, 128, 140);
      font-size: 10px;
    }
    .title2 {
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      // font-weight: bold;
      color: #333333;
      line-height: 26px;
      cursor: pointer;
      span {
        margin-left: 7px;
      }
    }
    .error {
      color: #D81E06;
    }
  }
  .box-card {
    margin-bottom: 10px;
    position: relative;
    background: rgb(241, 245, 254);
    .category {
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .koufen {
      font-weight: bold;
      vertical-align: middle;
      margin-left: 16px;
    }
    .typeImg {
      width: 53px;
      height: 53px;
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 999;
    }
  }

  .box-card .el-table ::v-deep tr{
    background: transparent;
  }
  ::v-deep .el-table__row {
    background: #185DA6 !important;
    color: #FFFFFF;
    .el-icon-arrow-right {
      color: #FFFFFF;
    }
  }
  ::v-deep .el-descriptions__body{
    background: transparent;
  }
  ::v-deep .el-table tr{
    background: transparent;
  }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: #185DA6;
  }
  ::v-deep .el-table_1_column_1 {
    border-radius: 8px 0 0 8px;
  }
  ::v-deep .el-table_1_column_2 {
    border-radius: 0 8px 8px 0;
    font-weight: bold;
  }
  ::v-deep .el-descriptions-item__label {
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
  }
}
.span-index{
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  background: #185DA6;
  color: #fff;
  margin-right: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}

::v-deep .el-table .el-table__row td {
  color: #fff;
}
::v-deep .el-tag{
  height: auto;
  line-height: 22px;
}
// =================   2024-07-27 新样式  ↓  ===============
.font-size12{
  font-size: 12px;
}
.list-box{
  width: 100%;
  padding: 10px 0;
  .title-color{
    color: rgba(27,100,176,1);
    font-weight: bold;
  }
  .list-score-tips-box{
    width: 100%;
    display: flex;
    .list-left-score{
      width: 70px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      &.hover-1{
        background: rgb(254, 240, 240);
        color: rgb(238, 14, 14);
        border-right: 3px solid rgb(238, 14, 14);
      }
      &.hover-2{
        background: rgb(236, 245, 255);
        color: rgb(52, 140, 235);
        border-right: 3px solid rgb(52, 140, 235);
      }
      &>div{
        font-size: 20px;
      }
    }
    .list-right-tips{
      flex: 1;
      font-size: 12px;
      padding-left: 10px;
      .notice-box{
        margin-top: 8px;
      }
    }
  }
  .list-basis-box{
    .list-basis-title{
      padding: 10px 0 10px 10px;
      position: relative;
      &>span{
        font-size: 12px;
        color: rgba(27,100,176,1);
        font-weight: bold;
      }
      .typeImg {
        width: 34px;
        height: 34px;
        position: absolute;
        top: 0;
        right: 12px;
        z-index: 999;
      }

    }
    .list-basis-text {
      height: auto;
      .list-basis-text-t{
        height: 0;
        overflow: hidden;
        position: relative;
        &.show{
          height: auto;
          padding: 10px 0 10px 10px;
        }
      }
    }

    .list-basis-bottom-box{
      margin-top: 14px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      .list-basis-bottom-tips{
        flex: 1;
        display: flex;
        gap: 10px;
      }
      .list-basis-bottom-btn{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        // width: auto;
      }
    }



  }
}

</style>