GY_ceshi_web/src/views/allcase/caseViews.vue

<template>
  <div id="MyDiv" style="margin: 16px" :class="{ nocopy: $route.query.status }">
    <div class="header zbjg-box" style="background: #fff;margin: 10px 0;padding: 6px 20px;">
      <el-button type="primary" >AI模型</el-button>
      <el-button type="primary" @click="clickzbjg">指标结果</el-button>
    </div>
    <div class="cont_container">
      <!-- 左侧点击列表部分 -->
      <div class="cont-left-tiem">
        <div style="margin: 20px">
          <el-button type="primary" @click="onControll">执行质控</el-button>
        </div>
        <ul class="el-menu-vertical-demo el-menu">
          <!-- 预警信息不展示病案首页 -->
          <li v-if="$route.query.from !== 'forewarning'" class="li-left-item" :class="is_active == 0 ? 'is-active' : ''" @click="clickTree(0, '病案首页')">
            <span>病案首页</span>
          </li>
          <li
            :class="[
              is_active == item.bllb && item.bllb != 49 ? 'is-active' : '',
              item.bllb == 49 || [2000002, 294, 303, 288, 87].includes(item.bllb) ? 'li-left-itemyz' : 'li-left-item',
            ]"
            v-for="(item, index) in treeList"
            :key="index"
            @click="clickTree(item.bllb, item.name, item)"
          >
            <span>{{ item.name }}</span>
            <div v-if="item.bllb == 49">
              <div :class="['li-left-item-li', is_active == '长期医嘱' ? 'is-active' : '']" data-li="49-1" :id="item.bllb">长期医嘱</div>
              <div :class="['li-left-item-li', is_active == '临时医嘱' ? 'is-active' : '']" data-li="49-2" :id="item.bllb">临时医嘱</div>
            </div>
            <div v-if="item.bllb == 2000002">
              <div :class="['li-left-item-li', is_active == jitem.ExamType ? 'is-active' : '']" v-for="(jitem, jindex) in item.list" :key="jindex" :id="jitem.type">
                {{ jitem.name }}
              </div>
            </div>
            <!-- 病程记录、手术记录 -->
            <div v-if="[294, 303, 288, 87].includes(item.bllb)">
              <div
                :class="['li-left-item-li', is_active == jitem.blbh ? 'is-active' : '']"
                v-for="(jitem, jindex) in item.list"
                :key="jindex"
                :id="`${jitem.blbh}`"
                :title="jitem.name.trim()"
              >
                {{ jitem.name.trim() }}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="cont-left-file">
        <div v-if="is_active == 0">
          <mainHomePage :data="mainHomeData" ref="main" :ifFile="ifFile"></mainHomePage>
        </div>
        <div v-else-if="parentType == 292">
          <!-- 入院记录 -->
          <admissionRecord :data="admissionRecord" :ifFile="ifFile"></admissionRecord>
        </div>
        <div v-else-if="parentType == '1' && is_active == 1">
          <!-- 出院记录 -->
          <OutHospitalRecord :data="outHospitalRecordData" />
        </div>
        <div v-else-if="parentType == 294">
          <!-- 病程记录 -->
          <CaseRecord :data="caseRecodeInfo" v-if="caseRecodeInfo.is_format === 1" />
          <NoFormatText :text="caseRecodeInfo.content" :data="caseRecodeInfo" name="" v-else />
        </div>
        <div v-else-if="parentType == 303">
          <!-- 手术记录 -->
          <template v-if="surgeryData.is_format">
            <ShouShuRecord1 v-if="surgeryData.type === 1" :data="surgeryData" />
            <ShouShuRecord2 v-if="surgeryData.type === 2" :data="surgeryData" />
            <ShouShuRecord4 v-if="surgeryData.type === 4" :data="surgeryData" />
          </template>
          <NoFormatText v-else :text="surgeryData.content" :data="surgeryData" :name="blname_title" />
        </div>
        <div v-else-if="is_active == '长期医嘱'">
          <!-- 长期医嘱 -->
          <medicalAdvice :dataObj="longAdvice"></medicalAdvice>
        </div>
        <div v-else-if="is_active == '临时医嘱'">
          <!-- 临时医嘱 -->
          <medicalTemporary :dataObj="happensAdvice"></medicalTemporary>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '1'">
          <!-- 病历图文报告 -->
          <caseImageText :dataObjArr="pacsDetail"></caseImageText>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '2'">
          <!-- 超声诊断 -->
          <ultrasound :dataObjArr="pacsDetail"></ultrasound>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '3'">
          <!-- 影像诊断 -->
          <imaging :dataObjArr="pacsDetail"></imaging>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '4'">
          <!-- 为心电 -->
          <electrocar :dataObjArr="pacsDetail"></electrocar>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '5'">
          <!-- 检验报告单 病理 -->
          <checkout :dataObjArr="pacsDetail"></checkout>
        </div>
        <div v-else-if="parentType == '2000002' && is_active == '6'">
          <!-- 內窥镜检查报告 病理 -->
          <sightGlass :dataObjArr="pacsDetail"></sightGlass>
        </div>
        <div v-else-if="is_active == 288 || is_active == 18">
          <!-- 死亡记录 或 24小时内入院记录 -->
          <DeathText :dataObjArr="dataObj"></DeathText>
        </div>
        <div v-else>
          <div v-if="update">
            <newContFile v-for="(item, index) of text" :key="index" :text="item.HJNR" :name="name_title"></newContFile>
          </div>
        </div>
      </div>
      <!-- status 不存在 意味着不脱敏、医院自助查询 -->
      <template v-if="!$route.query.status && isControl">
        <!-- 病案首页质控 -->
        <CaseQualityBox v-if="results" :data="results" :type="type_v" :width="340" :height="820" @hightRight="hightRight" />
      </template>
    </div>



    <div class="VueDragResize-box" v-if="is_VueDragResize">
      <!-- 弹窗 -->
      <VueDragResize :style="`z-index:${zInfex_0};`"
        dragHandle=".VueDragResize-title-box"
        :isActive="true" :isDraggable="true"
        :parentW="parentW" :parentH="parentH" :parentLimitation="true" :preventActiveBehavior="true"
        :w="width" :h="height"
        :minw="minw" :minh="minh"
        :x='left' :y='top' @dragstop="onDragstop"
        @resizing="resize" @dragging="resize" @deactivated="onDeactivated"
        >
        <div class="VueDragResize-centent-box">
          <div class="VueDragResize-title-box">
            <div class="title"><span>指标结果</span></div>
            <div class="icon-box">
              <span @click="clickcloseBtn">X</span>
            </div>
          </div>
          <div class="navbaerMag-content-box">
            <div class="list-box">
              <div class="list-item-box">
                <div class="listItem-title-box">
                  <span>指标名称：</span>
                  <span style="color: #ff0000;">{{ show_name }}</span>
                  <!-- <span class="span-btn" @click="clickJsTitleBtn">指标计算</span> -->
                  <img src="../../assets/images/arrow-down.png" alt="" @click.stop="clickListItem"  class="arrow-down" :class="show_box?'show':''"/>
                </div>

                <div class="items-show-box" :class=" show_box ? 'show': '' ">
                  <div class="xqItemError-box" v-for="(item,index) in xqItemError" :key="index">

                    <div class="items-titleBox">
                      <span class="idx-span">{{ index+1 }}</span>
                      <el-tag :type="item.status == 1?'success':'danger'">{{ item.status == 1?'正确':'错误' }}</el-tag>
                      <img src="../../assets/images/arrow-down.png" alt="" @click.stop="clickxqItemErrorItems(index)"  class="arrow-down" :class="item.show ?'show':''"/>
                    </div>

                    <div class="itemsDiv-box" :class=" item.show ? 'show': '' ">
                      <div class="items-box" v-for="(items,idx) in item.content" :key="idx">
                        <div class="items-content" v-html="items.content" :style="`color: ${items.status == 1?'#000':'#ff0000'};`"></div>
                      </div>
                    </div>

                  </div>


                </div>

              </div>
            </div>
          </div>
        </div>
      </VueDragResize>
    </div>
  </div>
</template>
<script>
import Mmenu from '@/components/m-menu';
import mainHomePage from '@/views/allcase/contFile/mainHomePage';
import newContFile from '@/views/allcase/contFile/newContFile';
import admissionRecord from '@/views/allcase/contFile/admissionRecord2';
import medicalAdvice from '@/views/allcase/contFile/medicalAdvice';
import medicalTemporary from '@/views/allcase/contFile/medicalTemporary';
import caseImageText from '@/views/allcase/report/caseImageText';
import ultrasound from '@/views/allcase/report/ultrasound';
import imaging from '@/views/allcase/report/imaging';
import electrocar from '@/views/allcase/report/electrocar';
import checkout from '@/views/allcase/report/checkout';
import sightGlass from '@/views/allcase/report/sightGlass';
import CaseRecord from './components/CaseRecord2.vue';
import ShouShuRecord1 from './components/ShouShuRecord1.vue';
import ShouShuRecord2 from './components/ShouShuRecord2.vue';
import ShouShuRecord4 from './components/ShouShuRecord4.vue';
import NoFormatText from './components/NoFormatText.vue';
import OutHospitalRecord from './components/OutHospitalRecord.vue';
import CaseQualityBox from './components/CaseQualityBox2.vue';
import DeathText from './components/DeathText.vue';
import VueDragResize from 'vue-drag-resize';

export default {
  components: {
    Mmenu,
    mainHomePage,
    newContFile,
    admissionRecord,
    medicalAdvice,
    medicalTemporary,
    caseImageText,
    ultrasound,
    imaging,
    electrocar,
    sightGlass,
    checkout,
    CaseRecord,
    ShouShuRecord1,
    ShouShuRecord2,
    ShouShuRecord4,
    NoFormatText,
    OutHospitalRecord,
    CaseQualityBox,
    DeathText,
    VueDragResize,

  },
  directives: {},
  filters: {},
  extends: {},
  mixins: {},
  props: {},
  data() {
    return {
      type_v: '', // v2 表示从（事中）进入
      mainHomeData: {},
      admissionRecord: {},
      longAdvice: {},
      happensAdvice: {},
      valData: '',
      ruleId: '',
      ifFile: false,
      treeList: [],
      is_active: 0,
      parentType: 0,
      name_title: '',
      text: [],
      update: true,
      titleName: '病案首页',
      pacsDetail: {},
      // 病程记录详情
      caseRecodeInfo: {
        is_format: 1,
      },
      surgeryData: {
        mzfj: [],
        ssqk: [],
        sscxsj: [],
        sslb: [],
        is_format: 0,
      },
      outHospitalRecordData: {
        name: {},
        ry_time: {},
        sex: {},
        age: {},
        cy_time: {},
        zyts: {},
        ryqk: {},
        cbzd: {},
        zljg: {},
        cyqk: {},
        cyzd: {},
        cyyz: {},
      },
      dataObj: [],
      results: null,
      is_tm_path: ['/hospital-caseViews', '/embedIndex-caseViews', '/reviewIndex-caseViews', '/whitelist-caseViews', '/whitelist-search'],
      isControl: false,

      // 弹窗信息
      width: 0,
      height: 0,
      minw: 620,
      minh: 340,
      parentH: 0,
      parentW: 0,
      top: 1,
      left: 500,
      zInfex_0: 9999,
      is_VueDragResize: false,
      tabStatus: 1,
      show_box: false,
      xqItemError: [],
      show_name: ''
    };
  },
  computed: {
    bcjlLiIds() {
      // 病程记录子项数据
      const arr = Object.values(this.treeList).filter(item => item.bllb === 294);
      const liIds = [];
      if (arr.length) {
        if (arr[0].list) {
          for (let i = 0; i < arr[0].list.length; i++) {
            liIds.push(arr[0].list[i].blbh);
          }
        }
      }
      return liIds;
    },
    shoushuLiIds() {
      // 病程记录子项数据
      const arr = Object.values(this.treeList).filter(item => item.bllb === 303);
      const liIds = [];
      if (arr.length) {
        if (arr[0].list) {
          for (let i = 0; i < arr[0].list.length; i++) {
            liIds.push(arr[0].list[i].blbh);
          }
        }
      }
      return liIds;
    },
    blname_title() {
      let title;
      const type = this.surgeryData.type;
      if (type === 1) {
        title = '手术风险评估表';
      } else if (type === 2) {
        title = '手术安全核查表';
      } else if (type === 3) {
        title = '手术同意书';
      } else if (type === 4) {
        title = '手术记录';
      }
      return title;
    },
  },
  watch: {},
  created() {
    // 弹窗
    let getViewportSize = this.$getViewportSize();
    this.parentH = getViewportSize.height; // 组件范围
    this.parentW = getViewportSize.width; // 组件范围
    this.width = 400; // 可拖动div 宽
    this.height = Number(getViewportSize.height - 100); // 可拖动div 高度
    this.left = Number(getViewportSize.width) - Number(this.width) - 40;
    this.top = 60;
    this.type_v = this.$route.query.type_v;
    this.show_name = this.$route.query.show_name?this.$route.query.show_name:'';

    this.isControl = localStorage.getItem('isControl') == 'true' ? true : false;
    console.log(!this.$route.query.status && this.isControl, !this.$route.query.status, this.isControl);

  },
  mounted() {
    this.valData = this.storageGet('getData');
    this.ruleId = this.storageGet('getDataRule');
    let xqItemError = this.storageGet('xqItemError');
    if(xqItemError){
      this.xqItemError = JSON.parse(xqItemError);
      // this.is_VueDragResize= true;
    }

    if (this.valData) {
      if (this.$route.query.from !== 'forewarning') {
        this.funQuery();
      }
      this.getCaseQualityResults();
    }
    this.getTree();
  },
  methods: {
    clickzbjg(){
      this.is_VueDragResize = true;
    },
    clickListItem(){
      this.show_box = !this.show_box;
      this.resize();
    },
    clickxqItemErrorItems(i){
      let xqItemError = this.xqItemError;
      xqItemError[i].show = !xqItemError[i].show;
      this.xqItemError = xqItemError;
      this.resize();
    },
    clickStatus(n){
      this.tabStatus = Number(n);
    },
    clickcloseBtn(){
      this.is_VueDragResize = false;
    },
    // 拖拽时可以确定元素位置
    resize(newRect) {
      if(newRect){
        this.width = newRect.width;
        this.height = newRect.height;
        this.top = newRect.top;
        this.right = newRect.right;
      }
    },
    onDeactivated(e){

    },
    onDragstop(newRect) {


    },


    onControll() {
      this.$axios2.get(`/quality_handle?zyh=${this.valData}`).then(res => {
        this.$message.success('执行中...');
        if (res.data === true) {
          this.valData = this.storageGet('getData');
          if (this.valData) {
            if (this.$route.query.from !== 'forewarning') {
              this.funQuery();
            }
            this.getCaseQualityResults();
          }
          this.getTree();
        }
      });
    },
    // 获取新病案指控结果
    getCaseQualityResults() {
      const params = {
        id: Number(this.valData),
        ruleId: Number(this.ruleId)
      };
      if (this.type_v == 'v2') {
        // (事中)
        this.$axios2.post('/get_case_quality_v2', params).then(res => {
          this.results = null;
          this.$nextTick(() => {
            this.results = res.data;
          });
        });
      } else {
        this.$axios2.post('/get_case_quality', params).then(res => {
          this.results = null;
          this.$nextTick(() => {
            this.results = res.data;
          });
        });
      }
    },
    reload() {
      // 移除组件
      this.update = false;
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.update = true;
      });
    },
    funEdit() {
      this.ifFile = true;
      this.$message('errer:功能待开发');
    },
    getback() {
      this.$router.go(-1);
    },
    /**
     * 跳转对应病历首页
     */
    getBlankIndexss(item) {
      this.$refs.main.getBlankIndex(item);
    },
    funQuery() {
      const params = {
        id: this.valData,
      };
      if (this.is_tm_path.includes(this.$route.path)) {
        params.is_tm = 1;
      }
      this.$axios.post('/medical_record', params).then(res => {
        this.mainHomeData = res.data;
      });
    },

    getTree() {
      let that = this;
      let pramse = {
        id: this.valData,
      };
      this.$axios.post('/getTree', pramse).then(res => {
        that.treeList = res.data;
        // 当页面上级为预警信息时，设置默认

        const keys = Object.keys(this.treeList);
        if (this.$route.query.from === 'forewarning') {
          const item = this.treeList[keys[0]];
          this.clickTree(item.bllb, item.name, item);
        }
      });
    },
    clickTree(b, n, item) {
      if (item) {
        if (item.blbh) {
          this.is_active_blbh = item.blbh;
        } else {
          this.is_active_blbh = event.target.id;
        }
      } else {
        // this.is_active_blbh = this.mainHomeData.MED_REC_ID
        this.is_active = 0;
        this.funQuery();
      }
      this.titleName = n;
      this.parentType = b;
      let that = this;
      // 判断点击的
      if (event.target.id || !item?.list) {
        if (event.target.outerText == '长期医嘱' || event.target.outerText == '临时医嘱') {
          that.is_active = event.target.outerText;
        } else if (b == 2000002) {
          that.is_active = event.target.id;
        } else if (b == 294) {
          that.is_active = event.target.id;
        } else if (b == 303) {
          that.is_active = event.target.id;
        } else {
          that.is_active = b;
        }
      }
      that.name_title = n;
      if (b != 0 && b != 292 && b != 1) {
        const params = {
          MED_REC_ID: that.valData,
          bllb: b,
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          params.is_tm = 1;
        }
        that.$axios.post('/getAllCase', params).then(res => {
          that.text = res.data;
          that.dataObj = res.data;
          that.reload();
        });
      } else if (b == 292) {
        // 获取详情
        const params = {
          id: this.valData,
          bllb: b,
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          params.is_tm = '1';
        }
        console.log('这里1');
        that.$axios2.post('/get_case_platform', params).then(res => {
          this.admissionRecord = res.data;
        });
      } else if (b == 1) {
        // 获取详情
        const params = {
          id: this.valData,
          bllb: b,
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          params.is_tm = 1;
        }
        console.log('这里2');
        that.$axios2.post('/get_case_platform', params).then(res => {
          this.outHospitalRecordData = res.data;
        });
      }
      if (that.is_active == '长期医嘱') {
        // 长期医嘱
        const params = {
          AAA28: that.valData,
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          params.is_tm = 1;
        }
        that.$axios.post('/long', params).then(res => {
          this.longAdvice = res.data;
        });
      }
      if (that.is_active == '临时医嘱') {
        // 临时医嘱
        const params = {
          AAA28: that.valData,
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          params.is_tm = 1;
        }
        that.$axios.post('/temporary', params).then(res => {
          this.happensAdvice = res.data;
        });
      }
      if (that.parentType == '2000002' && that.is_active != '') {
        // 报告单 相关
        let parm = {
          type: Number(that.is_active),
        };
        if (this.is_tm_path.includes(this.$route.path)) {
          parm.is_tm = 1;
        }
        let treeListArr = Object.values(that.treeList);
        treeListArr.forEach((item, index) => {
          if (item.bllb == 2000002) {
            parm.zyh = Number(item.list[0].ZYH);
          }
        });
        that.$axios.post('/get_pacs_data', parm).then(res => {
          this.pacsDetail = res.data;
        });
      }
      // 病程记录
      if (item.bllb === 294) {
        if (that.is_active) {
          // 请求前先重置之前的数据
          that.caseRecodeInfo = {};
          let parm = { blbh: that.is_active };
          if (this.is_tm_path.includes(this.$route.path)) {
            parm.is_tm = 1;
          }
          that.$axios.post('/get_bc_data', parm).then(res => {
            that.caseRecodeInfo = res.data[0].bc_data;
            that.caseRecodeInfo.is_format = res.data[0].is_format;
          });
        }
      }
      // 手术记录
      if (item.bllb === 303) {
        if (that.is_active) {
          // 请求前先重置之前的数据
          that.surgeryData = {};
          let parm = { blbh: that.is_active };
          if (this.is_tm_path.includes(this.$route.path)) {
            parm.is_tm = 1;
          }
          that.$axios.post('/get_surgery_data', parm).then(res => {
            that.surgeryData = res.data[0].surgery_data;
            that.surgeryData.is_format = res.data[0].is_format;
          });
        }
      }
    },
    //质控依据高亮方法
    hightRight(hightKeyWord, bllb, zyh) {
      const that = this;
      let betweenPart = [];
      betweenPart = that.getKeyWord(hightKeyWord);
      //自动选中某个菜单
      that.is_active = bllb;
      that.titleName = '入院记录';
      that.parentType = bllb;
      console.log('这里3');
      const params = { id: zyh, bllb: bllb, isHight: 1, keyWord: betweenPart };
      that.$axios2.post('/get_case_platform', params).then(res => {
        this.admissionRecord = res.data;
      });
    },
    //获取需要高亮的关键词
    getKeyWord(str) {
      const result = [];
      let startIndex = 0;
      let endIndex;

      // 查找第一个【的索引
      while ((startIndex = str.indexOf('【', startIndex)) !== -1) {
        // 查找当前【之后的第一个】的索引
        endIndex = str.indexOf('】', startIndex);

        // 确保找到了闭合的】
        if (endIndex !== -1) {
          // 截取【和】之间的内容（不包括【和】）
          const content = str.substring(startIndex + 1, endIndex);
          result.push(content);

          // 更新开始索引为当前】之后的位置，以便查找下一个【
          startIndex = endIndex + 1;
        } else {
          // 如果没有找到闭合的】，则退出循环
          break;
        }
      }
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
#MyDiv {
  margin: 0;
  padding: 0 !important;
}
.header {
  margin: 10px 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.cont_container {
  display: flex;
  justify-content: center;
}
.cont-left-tiem {
  width: 250px;
  min-height: 650px;
  height: calc(100vh - 130px);
  overflow-y: scroll;
  background: #ffffff;
}
.cont-left-file {
  flex: 1;
  min-height: 650px;
  margin: 0 5px;
  height: calc(100vh - 130px);
  overflow-y: scroll;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  padding: 10px;
}
.li-router {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.li-left-item {
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding: 0 20px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.li-left-itemyz {
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding-left: 20px;

  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .li-left-item-li {
    width: 100%;
    line-height: 36px;
    padding: 0 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .li-left-item-li:hover {
    outline: 0;
    background-color: #ecf5ff;
  }
}
.li-left-item:focus,
.li-left-item:hover {
  outline: 0;
  background-color: #ecf5ff;
}

.is-active {
  color: #409eff;
}
// 拖拽弹窗样式
.VueDragResize-box{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  top: 0;
  left: 0;
  pointer-events: none; /* 鼠标事件穿透 */
  & ::v-deep .vdr-stick{
    display: none;
  }
  & ::v-deep .vdr.active:before{
    display: none;
  }
  .VueDragResize-centent-box{
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 1px 8px 0 rgb(206 206 206);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: all; /* 鼠标事件穿透 */

    .vdr-icon{
      width: 28px;
      height: 28px;
      position: absolute;
      bottom: -4px;
      right: -4px;
      background: #ff0000;
      z-index: auto;
      display: block;
    }
    .VueDragResize-title-box{
      background: rgb(32 138 183);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      height: auto;
      height: 40px;
      padding: 0 12px;
      cursor: move;
      .icon-box{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        &>span{
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #fff;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }
    .navbaerMag-content-box{
      flex: 1;
      height: calc(100% - 40px);
      overflow: auto;
      padding: 10px;
      .navbaerMag-tab-box{
        width: auto;
        display: flex;
        align-items: center;
        &>div{
          cursor: pointer;
          width: 82px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px 0;
          border: 1px solid rgb(23 80 154);
          &.hover-items{
            background: rgb(23 80 154);
            color: #fff;
          }
        }
      }
      .list-box{
        width: 100%;
        .list-item-box{
          width: 100%;
          border-radius: 4px;
          padding: 10px;
          margin-top: 14px;
          background: rgb(241 246 255);
          font-size: 14px;
          .listItem-title-box{
            display: flex;
            align-items: center;
            & span{
              font-size: 14px;
            }
            .span-btn{
              display: inline-block;
              background: #2b8f53;
              margin-left: 6px;
              font-size: 12px;
              color: #fff;
              padding: 6px 12px;
              border-radius: 4px;
              text-align: center;
              cursor: pointer;
            }
            .arrow-down{
              width: 12px;
              height: 12px;
              margin-left: 12px;
              cursor: pointer;

            }
            .arrow-down.show{
              transform: rotate(180deg);
            }
          }
          .items-show-box{
            height: auto;
          }
          .items-show-box.show{
            height: 0;
            overflow: hidden;
          }
          .xqItemError-box{
            padding: 10px 0;
            border-bottom: 1px solid rgb(211, 225, 243);
            .items-titleBox{
              display: flex;
              align-items: center;
              margin-top: 10px;
              .idx-span{
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                line-height: 20px;
                text-align: center;
                background: rgb(23 80 154);
                color: #fff;
                margin-right: 4px;
              }
              & ::v-deep .el-tag{
                height: 26px;
                line-height: 26px;
              }
              .arrow-down{
                width: 12px;
                height: 12px;
                margin-left: 12px;
                cursor: pointer;

              }
              .arrow-down.show{
                transform: rotate(180deg);
              }
            }
            .itemsDiv-box{
              height: auto;
            }
            .itemsDiv-box.show{
              height: 0;
              overflow: hidden;
            }
            .items-box{
              margin-top: 10px;
              padding-left: 10px;
              box-sizing: border-box;
              .items-content{
                font-size: 14px;
                margin-top: 6px;
                line-height: 20px;
              }
            }
          }

        }

      }
    }
  }
}
</style>
<style>
/*  ================================== 文本形式样式 ↓ ======================== */
.refachInput span {
  height: auto;
  line-height: 1;
  padding: 10px 0;
}
.refachInput span.refachInput-text {
  padding-left: 12px;
}
.el-row--flex.is-justify-space-around {
  justify-content: flex-start;
}
.member-infobox {
  width: 100%;
}
.member-infobox .info-box-1 {
  /* display: flex;
    flex-wrap: wrap; */
  margin-top: 20px;
}
.infoBox-items {
  width: auto;
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.padding-left20 {
  padding-left: 20px;
}
.padding-right20 {
  padding-right: 20px;
}
.infoBox-title {
  color: #333;
  font-size: 12px;
  font-weight: bold;
}
.infoBox-items-text {
  color: #666;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 20px;
}
.title-ff0000 {
  color: #ff0000;
}
/* 高亮 */
.choose-twinkle {
  font-size: 20px;
  color: red;
  font-weight: 600;
  background: yellow;
}
.table-value-look {
  padding-left: 12px;
  color: #ff0000;
  cursor: pointer;
}

.keyHight {
  background-color: red !important;
  font-weight: bold !important;
}
.zbjg-box::v-deep .el-button--primary{
  background: #208ab7;
}



</style>