integration/src/views/youfool/AppVersionLog.vue

<template>
  <div class="versionLog">
    <el-row :gutter="20">
      <el-col id="left" :xs="12" :sm="8" :md="6" :lg="5">
        <div
          id="left_card"
          class="el-card__body"
          tabIndex="0"
          @DOMMouseScroll="scrollLeft"
          @mousewheel="scrollLeft"
          @keydown="scrollLeft"
        >
          <div id="left_title">版本目录</div>
          <div class="timeLine">
            <ul>
              <li
                v-for="(item, index) in list"
                :id="'catalog_' + item.upgradeId"
                :key="index"
                class="versionTitle"
                :class="{ actvie: currentUpgradeId === item.upgradeId }"
                @click="clickVersion(index, item)"
              >
                <span class="dot">◉</span>
                <span class="versionNumber"> v{{ item.version }}</span>
                <div class="content">
                  <div v-if="item.newFeatures">新增功能</div>
                  <div v-if="item.repair">故障修复</div>
                  <div v-if="item.other">其他说明</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col id="right" :xs="12" :sm="14" :md="18" :lg="19">
        <div
          id="right_card"
          class="el-card__body"
          @DOMMouseScroll="scrollRight"
          @mousewheel="scrollRight"
          @keydown="scrollRight"
        >
          <div id="right_title">广州市信用分类监管平台 - 发布记录</div>
          <div class="record">
            <div
              v-for="(item, index) in list"
              :id="'record_' + item.upgradeId"
              :key="index"
              class="record_item"
            >
              <div class="record_item_title">
                <div>
                  <span class="version_number">v{{ item.version }}</span>
                </div>
                <div>
                  <span
                    class="time"
                  ><i class="el-icon-time" />
                    {{ $moment(item.releaseTime).format("YYYY-MM-DD") }}</span>
                </div>
              </div>
              <el-card style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                <template v-if="item.newFeatures">
                  <div class="min_title">新增功能</div>
                  <div style="padding-left: 20px" v-html="item.newFeatures" />
                </template>
                <template v-if="item.repair">
                  <div class="min_title">故障修复</div>
                  <div style="padding-left: 20px" v-html="item.repair" />
                </template>
                <template v-if="item.other">
                  <div class="min_title">其他说明</div>
                  <div style="padding-left: 20px" v-html="item.other" />
                </template>
              </el-card>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-footer style="height: 30px; line-height: 30px" class="el-footer">
      <div>
        © {{ new Date().getFullYear() }} 内蒙古自治区市场监督管理局 | 技术支持：广东众望通科技股份有限公司
      </div>
    </el-footer>
  </div>
</template>

<script>
// import { getVersionLog } from '@/api/user.js'

export default {
  data() {
    return {
      list: [
        {
          'upgradeId': '1.1.0',
          'appId': '1.1.0',
          'version': '1.1.0',
          'releaseTime': '2021-11-17 06:47:26',
          'newFeatures': '<p>1、综合查询菜单下增加业务记录查询功能；<br></p>',
          'other': '<p>\n' +
            '1、优化移动端端的上传材料的图片压缩机制；<br>\n' +
            '2、更新移动端信用修复严重违法的材料模板文件；<br>\n' +
            '3、优化审批流程经办人页面展示；<br>\n' +
            '4、优化信用修复业务分发规则，优先根据谁列入谁移出规则；<br>\n' +
            '5、更新微信端技术支持号码；<br>\n' +
            '6、优化经办人回退业务再提交时认领待办；<br>\n' +
            '7、优化待办列表、已办列表查询，增加统一码/注册号查询条件；<br>\n' +
            '8、优化信用修复业务决定书内容生成，决定书的行政复议诉讼内容根据经办人所属区划自动生成；<br>\n' +
            '9、优化待办列表业务排序，默认按最早的任务排前面；<br>\n' +
            '10、优化信用修复业务退回经办人后的待办展示，在审核/审批环节退回经办人的信用修复业务会展示在所有具有相关权限的经办人待办列表中；<br>\n' +
            '11、优化信用修复业务审核环节审批人选择；<br>\n' +
            '12、优化信用修复审批意见的展示；<br>\n' +
            '13、优化内网端信用修复业务发起的等待提示；<br>\n' +
            '14、更新内网端信用修复业务的材料模板；<br>\n' +
            '15、优化信用修复移动端申请材料的指引及下载；<br>\n' +
            '</p>',
          'repair': '<p>\n' +
            '1、修复已办结业务存在部分业务数据丢失的问题，对部分存在业务数据丢失的已办结业务，进行了业务数据恢复；<br>\n' +
            '2、修复审批提交报错问题；<br>\n' +
            '3、修复审批环节提交等待时间太久的问题；<br>\n' +
            '4、修复信用修复移动、pc端上传附件缓慢；<br>\n' +
            '5、修复业务分派找不单位的问题，以企业的登记机关分派到区局；<br>\n' +
            '6、修复重新提交的业务受理时间没有重新计时的问题；<br>\n' +
            '</p>'
        },
        {
          'upgradeId': '1.0.1',
          'appId': '1.0.1',
          'version': '1.0.1',
          'releaseTime': '2021-10-15 06:47:26',
          'newFeatures': '<p></p>',
          'other': '<p></p>',
          'repair': '<p>1、修复移动端业务推送的数据链路问题；<br>2、优化微信小程序经营异常名录移出申请的操作指引、材料模板；<br>3、优化企业经营异常移出的决定依据内容编辑；<br>4、优化个体户经营异常移出业务的移出原因选择；<br>5、修复移动端经营异常申请重复提交问题；</p>'
        },
        {
          'upgradeId': '1.0.0',
          'appId': '1.0.0',
          'version': '1.0.0',
          'releaseTime': '2021-10-09 19:00:26',
          'newFeatures': '<p>系统正式上线</p>',
          'other': '',
          'repair': ''
        }
      ],
      currentUpgradeId: null,
      lastUpgradeId: null,
      currentIndex: null,
      currentData: {}
    }
  },
  mounted() {
    this.findLog()
    // 设置标题的宽度
    const leftDom = document.getElementById('left_card')
    document.getElementById('left_title').style.width =
      leftDom.clientWidth - 15 + 'px'
    const rightDom = document.getElementById('right_card')
    document.getElementById('right_title').style.width =
      rightDom.clientWidth - 15 + 'px'
  },
  methods: {
    async findLog() {
      const { appId } = this.$route.query
      // todo 待接接口，写死数据
      // const { data } = await getVersionLog({ appId })
      // this.list = data
      if (this.list.length > 0) {
        // 初始化默认选中最后一个版本记录
        this.currentUpgradeId = this.list[0].upgradeId
        this.lastUpgradeId = this.list[0].upgradeId
      }
      // 渲染完成，为高度超出可视化的右边记录，增加内滚动
      this.$nextTick(() => {
        const rightHeight = document.getElementById('right_card').clientHeight
        for (let i = 0; i < this.list.length; i++) {
          const recordTimeDom = document.getElementById(
            'record_' + this.list[i].upgradeId
          )
          // 判断高度是否超出
          if (recordTimeDom.offsetHeight > rightHeight) {
            const scrollFun = (e) => {
              e.stopPropagation()
              this.currentIndex = i
              this.currentUpgradeId = this.list[i].upgradeId
              const leftCardDom = document.getElementById('left_card')
              const catalogTimeDom = document.getElementById(
                'catalog_' + this.list[i].upgradeId
              )
              this.currentUpgradeId = this.list[i].upgradeId
              leftCardDom.scrollTop = catalogTimeDom.offsetTop - 55
            }
            // 添加防止冒泡不滚动父
            recordTimeDom.addEventListener('DOMMouseScroll', scrollFun)
            recordTimeDom.addEventListener('mousewheel', scrollFun)
          }
        }
      })
    },
    clickVersion(index, data) {
      this.currentIndex = index
      this.currentUpgradeId = data.upgradeId
      const rightCardDom = document.getElementById('right_card')
      const recordTimeDom = document.getElementById('record_' + data.upgradeId)
      // 滚动顶部
      rightCardDom.scrollTop = recordTimeDom.offsetTop
      // 闪烁下下
      recordTimeDom.className = 'record_item  twinkle'
      setTimeout(() => {
        recordTimeDom.className = 'record_item'
      }, 800)
    },
    scrollLeft(e) {
      e = e || window.event
      // 禁止浏览器默认事件
      e.preventDefault()
      e.stopPropagation()
      this.countIndex(e)
      this.jumpScreen()
    },
    scrollRight(e) {
      e = e || window.event
      // 禁止浏览器默认事件
      e.preventDefault()
      e.stopPropagation()
      this.countIndex(e)
      this.jumpScreen()
    },
    countIndex(e) {
      if (e.wheelDelta > 0) {
        // 当滑轮向上滚动时
        this.currentIndex -= 1
      } else if (e.wheelDelta < 0) {
        // 当滑轮向下滚动时
        this.currentIndex += 1
      } else if (e.detail > 0) {
        // Firefox滑轮事件 当滑轮向上滚动时
        this.currentIndex -= 1
      } else if (e.detail < 0) {
        // 当滑轮向下滚动时
        this.currentIndex += 1
      } else if (e.keyCode === 38) {
        // 上箭头
        this.currentIndex -= 1
      } else if (e.keyCode === 40) {
        // 下箭头
        this.currentIndex += 1
      }
      // 判断范围不能超
      if (this.currentIndex < 0) {
        this.currentIndex = 0
      } else if (this.currentIndex > this.list.length - 1) {
        this.currentIndex = this.list.length - 1
      }
    },
    jumpScreen() {
      const data = this.list[this.currentIndex]
      const leftCardDom = document.getElementById('left_card')
      const catalogTimeDom = document.getElementById(
        'catalog_' + data.upgradeId
      )
      const rightCardDom = document.getElementById('right_card')
      const recordTimeDom = document.getElementById('record_' + data.upgradeId)
      this.currentUpgradeId = data.upgradeId
      leftCardDom.scrollTop = catalogTimeDom.offsetTop - 55
      rightCardDom.scrollTop = recordTimeDom.offsetTop
    }
  }
}
</script>
<style lang="scss" scoped>
.versionLog {
  padding: 10px 10px 0px 10px;
}
#left,
#right {
  position: relative;
  #left_title,
  #right_title {
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 20px;
    color: #2d68a6;
    position: absolute;
    top: 1px;
    left: 15px;
    background: #fff;
    padding: 10px;
    z-index: 10;
  }
}
.timeLine {
  margin-top: 35px;
  color: #48484e;
  ul {
    padding: 0;
  }
  ul li {
    cursor: pointer;
    height: 150px;
    border-left: 1px solid #6a6a82;
    list-style: none;
    padding: 15px;
    position: relative;
    .dot {
      position: absolute;
      top: 14px;
      left: -7px;
    }
    .versionNumber {
      font-weight: bold;
    }
    .content {
      margin-top: 10px;
      div {
        padding: 5px 5px 5px 15px;
      }
    }
  }
  .actvie {
    color: #2d68a6;
    border-left: 1px solid #2d68a6;
  }
}
.record {
  margin-top: 40px;
  position: relative;
  .record_item {
    margin-bottom: 10px;
  }
  .record_item_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #2d68a6;
    .version_number {
      font-size: 22px;
      color: #2d68a6;
    }
    .time {
      font-size: 16px;
      color: #b2b2b2;
    }
  }
  .min_title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .min_title:not(:first-child) {
    margin-top: 10px;
  }
}
#left_card,
#right_card {
  height: calc(100vh - 40px);
  overflow: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  border: 1px solid #ebeef5;
  background-color: #fff;
  border-radius: 4px;
  scrollbar-width: none; /* Firefox */
}
#left_card::-webkit-scrollbar {
  width: 0 !important;
}
#right_card::-webkit-scrollbar {
  width: 0 !important;
}
.package_number {
  font-size: 12px;
  color: #b2b2b2;
}
@-webkit-keyframes twinkling {
  0% {
    box-shadow: 0px 0px 10px black;
  }
  100% {
    box-shadow: none;
  }
}
.twinkle {
  -webkit-animation: twinkling 1s infinite ease-in-out;
}
.details {
  padding-top: 20px;
  .details_label {
    text-align: right;
  }
}
.el-footer{
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  color: #666;
  text-align: center;
  line-height: 60px;
  font-size: 12px;
  padding: 0 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
</style>