ai-read-over-mobile 0.0.1

package/components/demo/src/main.vue

@@ -0,0 +1,783 @@
+<template>
+  <div class="ai-contain" v-if="visible">
+    <div class="ai-contain-header">
+      <div class="header-left">
+        <i class="el-icon-back" @click="closeMessage"></i>
+        <span class="title-font">智能批阅</span>
+      </div>
+    </div>
+    <div class="message-wrap" v-if="sr_error_code">
+      <div class="message-line">{{ sr_error_code }}</div>
+    </div>
+    <template v-else>
+      <div class="score-filter-row">
+        <div class="score-item"
+             v-for="item in filterData"
+             :key="item.key"
+             :class="{'active': item.active}"
+             @click="filterClick(item)">
+          <p>
+            <span class="number">{{ item.title }}</span><span class="unit">分</span>
+          </p>
+          <p>({{ item.count }})</p>
+        </div>
+      </div>
+      <div class="wrap" v-if="showFilter">
+
+        <div class="normal-wrap" :class="{'full-width': !showFilter }">
+          <div class="label-wrap" ref="labelContainer">
+            <div class="label-container">
+              <div class="label-item"
+                   v-if="isPerson && !showFilter && showTableList.length > 10"
+                   @click="showFilterMethod"
+                   style="width: 32px; padding: 0; line-height: 42px">
+                <img src="../static/filter.png" style="width: 24px; height: 24px"/>
+              </div>
+              <div class="label-item" v-for="item in showTableList"
+                   :key="item.id"
+                   :title="item.title"
+                   :class="{'label-item-active': item.active}"
+                   @click="tabClick(item)">
+                {{ item.title }}
+                <div class="loading-block" v-if="!replyCache[item.id]">
+                  <i class="el-icon-loading"></i>
+                </div>
+              </div>
+            </div>
+            <div class="label-item label-down"
+                 v-if="showMoreButton"
+                 @click="stretchContainer"
+                 style="width: 32px">
+              <span v-if="!stretch">...</span>
+              <i class="el-icon-d-arrow-left" style="transform: rotate(90deg)" v-else></i>
+            </div>
+          </div>
+          <div class="ai-main-content">
+            <read-over :exercises-data="activeItem"
+                       :analyze-data="analyzeData"
+                       :is-reanswering="isReanswering"
+                       @on-reanswer="onReanswer"
+                       @on-noty-apply="notyApply"/>
+            <div class="member-table" v-if="stretch">
+              <member-table :check-data="showTableList"
+                            :show-data="tabList"
+                            :replyCache="replyCache"
+                            @on-select-member="selectMember"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import ReadOver from './read-over.vue';
+import {getUserInfo} from '../utils/config';
+// import {generateReview, registerSse, criticismApply, reanswerReview} from '../api/index';
+import {generateReview, loopPoll, criticismApply, reanswerReview} from '../api/index';
+import Cookies from "js-cookie";
+import TabFilter from './tab-filter.vue';
+import MemberTable from './member-table.vue';
+import cache from "../plugins/cache";
+
+export default {
+  name: 'AiReadOverMobile',
+  components: {
+    ReadOver,
+    TabFilter,
+    MemberTable
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    listData: {
+      type: Array,
+      default: () => []
+    },
+    courseId: {
+      type: String,
+      default: '',
+    },
+    isPerson: {
+      type: Boolean,
+      default: false,
+    },
+    autoApply: {
+      type: Boolean,
+      default: false,
+    },
+    businessSource: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      stretch: false,
+      showFilter: true,
+      showMoreButton: false,
+      replyCache: {},
+      activeItem: {},
+      analyzeData: {},
+      sseSessionId: '',
+      tabList: [],
+      showTableList: [],
+      cacheUserId: [],
+      loopFlag: 0,
+      replayId: {},
+      sr_error_code: undefined,
+      replayedCache: {},
+      filterData: [],
+      scoreMap: {},
+      keys: [],
+      isReanswering: false
+    }
+  },
+  watch: {
+    visible() {
+      if (this.visible) {
+        this.listDataError();
+        this.sseSessionId = new Date().getTime().toString();
+        this.tabList = this.listData;
+        this.showFilter = true;
+        this.makeBaseData();
+        this.updateFilterData();
+        setTimeout(() => {
+          this.dealTableList();
+          this.sendAiInfo();
+        })
+      } else {
+        this.showFilter = false;
+        this.cacheUserId = [];
+        this.replayId = {};
+        this.replayedCache = {};
+        clearInterval(this.loopFlag);
+      }
+    },
+    listData: {
+      handler() {
+        if (this.listData && this.listData.length > 0) {
+          this.tabList = this.listData;
+          this.makeBaseData();
+          this.updateFilterData();
+        }
+      },
+      immediate: true
+    },
+    replyCache: {
+      handler() {
+        this.updateFilterData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (!Cookies.get("token")) {
+      return this.$message.warning('未获取到登录信息,请重新登录');
+    }
+    this.messageList = [];
+    getUserInfo(Cookies.get("token"), this.businessSource);
+  },
+  methods: {
+    resizeFirstActive() {
+      if (!this.showTableList || this.showTableList.length < 1) {
+        this.analyzeData = null;
+        return;
+      }
+      this.showTableList.map((item) => item.active = false);
+      this.showTableList[0].active = true;
+      this.activeItem = this.showTableList[0];
+      this.analyzeData = this.replyCache[this.showTableList[0].id];
+    },
+    closeMessage() {
+      this.$emit('close');
+    },
+    tabClick(tab) {
+      this.tabList.map((item) => item.active = false);
+      tab.active = true;
+      this.$forceUpdate();
+      this.activeItem = tab;
+      this.analyzeData = this.replyCache[tab.id];
+    },
+    async sendAiInfo() {
+      const paramsData = [];
+      this.listData.map((item) => {
+        paramsData.push({
+          bizId: item.id,
+          question: item.question,
+          score: item.score,
+          answer: item.answer,
+          answerer: item.title,
+          rightAnswer: item.rightAnswer,
+        })
+        this.cacheUserId.push(item.id);
+      });
+      // this.sseState = await registerSse(this.sseSessionId, this.messageBack, ()=> {
+      //     generateReview(paramsData, this.sseSessionId, this.courseId);
+      // });
+      await generateReview(paramsData, this.sseSessionId, this.courseId);
+      this.sr_error_code = cache.session.getJSON('ERROR_SR_CODE')
+      this.loopFlag = setInterval(async () => {
+        this.loopInfo();
+      }, 3000);
+      this.loopInfo();
+    },
+    async loopInfo() {
+      const loopRes = await loopPoll(this.cacheUserId);
+      if (loopRes) {
+        for (let message of loopRes) {
+          const {bizId, comments: [backData]} = message;
+          const {content, id} = backData;
+          const currentId = bizId;
+          // 说明是重新回答
+          if (this.replayId[currentId] && this.replayId[currentId] === id) {
+            continue;
+          }
+          backData.jsonContent = JSON.parse(content);
+          this.$set(this.replyCache, currentId, backData);
+          // 更新当前值
+          this.analyzeData = this.replyCache[this.activeItem.id] || {};
+          delete this.replayId[currentId];
+          if (!this.replayedCache[id] && this.autoApply) {
+            this.autoNotyApply(message, backData);
+            this.replayedCache[id] = true;
+          }
+        }
+        return;
+      }
+      throw new Error('--loopRes--返回值为空');
+    },
+    autoNotyApply(message, backData) {
+      const currentOrgData = this.listData.filter((item) => item.id === message.bizId)[0];
+      this.notyApply(backData, currentOrgData);
+    },
+    async notyApply(data, orgData) {
+      console.log(data)
+      const {id} = data;
+      await criticismApply(id);
+      this.analyzeData.accepted = true;
+      this.$emit('on-noty-apply', data, orgData);
+    },
+    async onReanswer(list) {
+      // 使用当前答案对象中的 id
+      const currentAnswer = this.replyCache[this.activeItem.id];
+      if (!currentAnswer || !currentAnswer.id) {
+        this.$message.error('无效的答案数据');
+        return;
+      }
+
+      this.isReanswering = true;
+      this.replayId[this.activeItem.id] = currentAnswer.id;
+
+      // 保持当前内容显示，只清空分析数据
+      const currentAnalyzeData = {...this.analyzeData};
+      this.analyzeData = {
+        ...currentAnalyzeData,
+        jsonContent: [],
+        score: null
+      };
+
+      try {
+        await reanswerReview(this.sseSessionId, currentAnswer.id);
+        // 开始轮询获取新的批阅结果
+        this.loopInfo();
+      } catch (error) {
+        console.error('重新批阅失败:', error);
+        this.$message.error('重新批阅失败，请稍后重试');
+        // 恢复之前的状态
+        this.analyzeData = currentAnalyzeData;
+      } finally {
+        this.isReanswering = false;
+      }
+    },
+    filterChange(selectedFilter) {
+      const filteredList = this.scoreMap[selectedFilter.key];
+      this.showTableList = filteredList;
+      this.filterData.forEach(item => {
+        item.active = item.key === selectedFilter.key;
+      });
+      this.resizeFirstActive();
+    },
+    showFilterMethod() {
+      this.showFilter = true;
+      this.stretch = false;
+      setTimeout(() => {
+        this.dealTableList();
+      });
+    },
+    dealTableList() {
+      const labelContainer = this.$refs.labelContainer;
+      if (!labelContainer) return;
+      this.showTableList = [...this.tabList];
+      this.resizeFirstActive();
+    },
+    selectMember(data) {
+      this.showTableList = data;
+      this.resizeFirstActive();
+    },
+    listDataError() {
+      if (!this.listData || this.listData.length < 1) {
+        throw new Error('list-data 不能为空或者长度不能为0');
+      }
+    },
+    makeBaseData() {
+      const maxScore = this.listData[0].score;
+      if (maxScore === undefined || maxScore === null) {
+        console.warn('Max score not available in listData[0]');
+        this.keys = [100, 90, 80, 70, 60, 50];
+      } else {
+        this.keys = [maxScore, maxScore * 0.9, maxScore * 0.8, maxScore * 0.7, maxScore * 0.6, maxScore * 0.5];
+      }
+      this.filterData = [
+        {
+          title: `${this.makeFloatRight(this.keys[0])}`,
+          key: '>90',
+          unit: '>',
+          count: 0,
+          active: true  // 默认选中第一个
+        },
+        {
+          title: `${this.makeFloatRight(this.keys[1])}`,
+          key: '>=90',
+          unit: '>=',
+          count: 0,
+          active: false
+        },
+        {
+          title: `${this.makeFloatRight(this.keys[2])}`,
+          key: '>=80',
+          unit: '>=',
+          count: 0,
+          active: false
+        },
+        {
+          title: `${this.makeFloatRight(this.keys[3])}`,
+          key: '>=70',
+          unit: '>=',
+          count: 0,
+          active: false
+        },
+        {
+          title: `${this.makeFloatRight(this.keys[4])}`,
+          key: '>=60',
+          unit: '>=',
+          count: 0,
+          active: false
+        },
+        {
+          title: `≤${this.makeFloatRight(this.keys[5])}`,
+          key: '<60',
+          unit: '≤',
+          count: 0,
+          active: false
+        }
+      ];
+      // 直接调用 filterClick 选中第一个
+      if (this.filterData.length > 0) {
+        this.filterClick(this.filterData[0]);
+      }
+    },
+    makeFloatRight(score) {
+      return Number.isInteger(score) ? score : parseFloat(score).toFixed(1);
+    },
+    updateFilterData() {
+      this.resizeScoreMap();
+      if (!this.replyCache || Object.keys(this.replyCache).length === 0) {
+        this.filterData.forEach(item => item.count = 0);
+        this.showTableList = [...this.tabList];
+        this.resizeFirstActive();
+        return;
+      }
+
+      // 保存当前选中的题号ID
+      const currentActiveId = this.activeItem ? this.activeItem.id : null;
+
+      this.tabList.map((list) => {
+        const {id} = list;
+        if (this.replyCache[id]) {
+          const {score} = this.replyCache[id];
+          if (score >= this.keys[0]) {
+            this.scoreMap['>90'].push(list);
+          } else if (score >= this.keys[1] && score < this.keys[0]) {
+            this.scoreMap['>=90'].push(list);
+          } else if (score >= this.keys[2] && score < this.keys[1]) {
+            this.scoreMap['>=80'].push(list);
+          } else if (score >= this.keys[3] && score < this.keys[2]) {
+            this.scoreMap['>=70'].push(list);
+          } else if (score >= this.keys[4] && score < this.keys[3]) {
+            this.scoreMap['>=60'].push(list);
+          } else if (score < this.keys[4]) {
+            this.scoreMap['<60'].push(list);
+          }
+        }
+      });
+
+      this.filterData.map((item) => {
+        item.count = this.scoreMap[item.key] ? this.scoreMap[item.key].length : 0;
+      });
+
+      const activeFilter = this.filterData.find(item => item.active);
+      if (activeFilter) {
+        const currentFilteredList = this.scoreMap[activeFilter.key] || [];
+        this.showTableList = currentFilteredList;
+
+        // 如果之前有选中的题号，尝试保持选中状态
+        if (currentActiveId) {
+          const activeItem = this.showTableList.find(item => item.id === currentActiveId);
+          if (activeItem) {
+            this.showTableList.forEach(item => item.active = false);
+            activeItem.active = true;
+            this.activeItem = activeItem;
+            this.analyzeData = this.replyCache[activeItem.id];
+          } else {
+            this.resizeFirstActive();
+          }
+        } else {
+          this.resizeFirstActive();
+        }
+      } else {
+        this.showTableList = [...this.tabList];
+        this.resizeFirstActive();
+      }
+      this.$forceUpdate();
+    },
+    resizeScoreMap() {
+      this.scoreMap = {'>90': [], '>=90': [], '>=80': [], '>=70': [], '>=60': [], '<60': []};
+    },
+    filterClick(selectedFilter) {
+      this.filterData.forEach(item => {
+        item.active = item.key === selectedFilter.key;
+      });
+      const filteredList = this.scoreMap[selectedFilter.key];
+      this.showTableList = filteredList;
+      this.resizeFirstActive();
+      this.$forceUpdate();
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ai-contain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #F3F5FE;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(55.6deg, rgb(255, 255, 255) 41%, rgb(224, 224, 255) 100%);
+    background-size: cover;
+    opacity: 0.1;
+  }
+
+  .ai-contain-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background: #F3F5FE;
+    z-index: 1;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .el-icon-arrow-left {
+        font-size: 24px;
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 50%;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+
+      .title-font {
+        font-size: 20px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+  }
+
+  .score-filter-row {
+    display: flex;
+    overflow-x: auto;
+    padding: 8px 16px;
+    background: linear-gradient(90deg, #8B76F1 0%, #B1A6F5 100%); /* Gradient background */
+    gap: 12px; /* Space between score items */
+    flex-shrink: 0;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .score-item {
+      flex-shrink: 0;
+      flex-grow: 1;
+      flex-basis: 0;
+      min-width: 60px;
+      padding: 8px 16px;
+      border-radius: 8px;
+      text-align: center;
+      color: #fff;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+        transform: translateY(-2px);
+      }
+
+      &.active {
+        background: linear-gradient(to bottom right, #FF8686, #FF4242); /* Red gradient background for active state */
+        opacity: 1;
+        font-weight: bold;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        border: 1px solid white;
+      }
+
+      p {
+        margin: 0;
+        line-height: 1.3;
+        font-size: 12px;
+      }
+
+      .number {
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      .unit {
+        font-size: 12px; /* Smaller font size for the unit */
+      }
+    }
+  }
+
+  .wrap {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+
+    .filter-wrap {
+      width: 300px;
+      background: #fff;
+      border-right: 1px solid #eee;
+      transition: transform 0.3s ease;
+    }
+
+    .normal-wrap {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transition: margin-left 0.3s ease;
+      background: #F3F5FE;
+
+      &.full-width {
+        margin-left: 0;
+      }
+
+      .label-wrap {
+        padding: 0 16px;
+        flex-shrink: 0;
+
+        .label-container {
+          display: flex;
+          flex-wrap: nowrap;
+          gap: 8px;
+          padding: 8px 0;
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        }
+
+        .label-item {
+          padding: 8px 16px;
+          background: #fff;
+          border-radius: 25px;
+          cursor: pointer;
+          white-space: nowrap;
+          transition: all 0.3s;
+          position: relative;
+
+          &-active {
+            background: #8080F0;
+            color: #fff;
+          }
+
+          .loading-block {
+            position: absolute;
+            right: 4px;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+      }
+
+      .ai-main-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        box-sizing: border-box;
+
+        .member-table {
+          width: 300px;
+          background: #fff;
+          border-left: 1px solid #eee;
+          transition: transform 0.3s ease;
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media screen and (max-width: 768px) {
+  .ai-contain {
+    .wrap {
+      .filter-wrap {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        transform: translateX(-100%);
+        z-index: 2;
+
+        &.show {
+          transform: translateX(0);
+        }
+      }
+
+      .normal-wrap {
+        .ai-main-content {
+          .member-table {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            transform: translateX(100%);
+            z-index: 2;
+
+            &.show {
+              transform: translateX(0);
+            }
+          }
+        }
+      }
+    }
+
+    .ai-contain-header {
+      padding: 15px;
+
+      .header-left {
+        gap: 8px;
+
+        .el-icon-back {
+          font-size: 20px;
+          padding: 2px;
+        }
+
+        .title-font {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .score-filter-row {
+      padding: 15px 12px;
+      gap: 8px;
+
+      .score-item {
+        flex-grow: 1;
+        flex-basis: auto;
+        min-width: unset;
+        padding: 6px 8px;
+
+        .number {
+          font-size: 16px;
+        }
+
+
+        &.active {
+          background: linear-gradient(to bottom right, #FF8686, #FF4242); /* Red gradient background for active state */
+          opacity: 1;
+          font-weight: bold;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          border: 1px solid white;
+        }
+      }
+    }
+  }
+}
+
+// Add a media query for larger screens to distribute space
+@media screen and (min-width: 769px) {
+  .ai-contain {
+    .wrap {
+      .filter-wrap {
+        width: 250px;
+      }
+
+      .normal-wrap {
+        .ai-main-content {
+          .member-table {
+            width: 250px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 大屏幕设备
+@media screen and (min-width: 1025px) {
+  .ai-contain {
+    .wrap {
+      .filter-wrap {
+        width: 300px;
+      }
+
+      .normal-wrap {
+        .ai-main-content {
+          .member-table {
+            width: 300px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>