xiangan_pc/src/components/360View/img-reccrd.vue

<template>
  <el-container class="layout">
    <el-aside width="400">
      <el-row class="leftBox">
        <el-col class="leftBtn">
          <img v-if="!packFlag" class="expansion" :src="require('@/assets/img/expansion.png')" alt="" @click="packFlag = true">
          <img v-if="proFlag" class="proTree" :src="require('@/assets/img/selPro.png')" alt="">
          <img v-else class="proTree" :src="require('@/assets/img/pro.png')" alt="" @click="selProList">
          <img v-if="proFlag" class="timeTree" :src="require('@/assets/img/time.png')" alt="" @click="selTimeList">
          <img v-else class="timeTree" :src="require('@/assets/img/selTime.png')" alt="">
          <div style="width: 100%;height: 32px;position: absolute;bottom: 0;left: 0;background-color: #141414" />
        </el-col>
        <el-col v-show="packFlag" class="leftPro">
          <div style="position: relative">
            <img class="tipTop" :src="require('@/assets/img/tipTop.png')" alt="">
            <p class="topInfo">
              <span class="mr5">{{ patientInfo.patientName }}</span>
              <span class="mr5">{{ patientInfo.patientSex }}</span>
              <span v-if="patientInfo.patientAge != undefined">{{ patientInfo.patientAge }}岁</span>
            </p>
            <el-popover ref="infoPopover" class="popBox" trigger="hover" popper-class="record-popverClass">
              <div class="tagContent">
                <div v-for="(tag, index) in patientTagList" :key="index">
                  <el-tag :key="tag.id" closable :title="tag.tagName" class="tags" @close.prevent="() => deletePatientTag(tag)">
                    {{ tag.tagName.length > 15 ? tag.tagName.substring(0,15) + '...' : tag.tagName }}
                  </el-tag>
                </div>
                <el-tag class="addTag" @click="showDrawer(1)">
                  <i class="el-icon-plus" /> 添加患者标签
                </el-tag>
              </div>
            </el-popover>
            <img v-popover:infoPopover class="tipLabel" :src="require('@/assets/img/info-label.png')" alt="">
            <img class="tipPack" :src="require('@/assets/img/pack.png')" alt="" @click="packFlag = false">
            <img class="back" :src="require('@/assets/img/back.png')" alt="" @click="packFlag = false">
          </div>
          <div class="projectBtn">
            <div class="selectBtn">
              <span class="ml12" @click="selectAllExamine">全选</span>
              <span class="ml16" @click="selectUnChecked">反选</span>
            </div>
            <div>
              <img class="noteBox" :src="require('@/assets/img/button-preview.png')" alt="" @click="handlePreview()">
            </div>
          </div>
          <div class="treeSide">
            <el-tree
              ref="examineTree"
              class="examTree"
              highlight-current
              :data="treeData"
              :props="treeProps"
              :auto-expand-parent="true"
              :default-expand-all="true"
              :expand-on-click-node="false"
              show-checkbox
              @node-click="onSelect"
              @check="onChange"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span style="display: inline-block;width: 100%;">
                  {{ data.text }}
                </span>
                <el-popover
                  ref="examPopover"
                  trigger="hover"
                  popper-class="record-popverClass"
                >
                  <div class="tagContent">
                    <el-tag v-for="(_item,_index) in examineTagList" :key="_index" :title="_item.tagName" closable @close.prevent="() => deleteExamineTag(_item)">
                      {{ _item.tagName.length > 15 ? _item.tagName.substring(0,15) + '...' : _item.tagName }}
                    </el-tag>
                    <el-tag class="addTag" @click="showDrawer(2, data)">
                      <i class="el-icon-plus" /> 添加检查项标签
                    </el-tag>
                  </div>
                  <span slot="reference">
                    <img v-if="data.examNo && data.tag == '1'" class="labelImg" :src="require('@/assets/img/icon-labelSel.png')" alt="" @mouseenter="queryExamineTags(data)">
                    <img v-if="data.examNo && data.tag == '0'" class="labelImg disSel" :src="require('@/assets/img/icon-label.png')" alt="" @mouseenter="examineTagList = []">
                  </span>
                </el-popover>
              </span>
            </el-tree>
          </div>
          <div class="leftBottom">
            <span class="copyRight">版权所有：南京慧目信息技术有限公司</span>
          </div>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <el-container :style="{ background: '#000000', margin: 0, minHeight: '280px' }">
        <div class="contentBox">
          <div id="drag-solt" class="contentLeft">
            <div class="fileContent">
              <el-button-group class="eyeBox">
                <el-button v-for="(item,index) in eyeList" :key="index" class="eyeSel" size="small" :class="{eyeActive:index === eyeIndex}" @click="selectEye(item,index)">
                  {{ item.name }}
                </el-button>
              </el-button-group>
              <el-button-group class="eyeBox">
                <el-button v-for="(item,index) in fileList" :key="index" class="eyeSel" size="small" :class="{eyeActive:index === fileIndex}" @click="selectFileType(item,index)">
                  {{ item.name }}
                </el-button>
              </el-button-group>
              <draggable class="scrollContain" v-model="dragList" :options="dragOptions" @end="fileDragEnd">
                <div class="fileBox" ref="file" v-for="(item,index) in dragList" :key="index" @click="handleClickFile(item,index)" :class="{fileActive:index === dragIndex}">
                  <div style="width: 100%;height: 100%" v-if="item.instanceList && item.instanceList.length">
                    <img v-if="item.instanceList[0].imageType == 'JPG' || item.instanceList[0].imageType == 'PNG'" class="fileImg" :src="item.instanceList[0].imageId" alt="">
                    <div v-show="item.instanceList[0].imageType == 'DCM'" :ref="'fileSolt' + index" class="fileImg" style="padding-left: 3px"/>
                    <div v-show="item.instanceList[0].imageType == 'PDF'" :ref="'pdfSolt' + index" class="fileImg" style="padding-left: 3px">
                      <div class="pdf-thumbnail">
                        <img class="fileImg" :src="require('@/assets/img/PDF.png')" alt="">
                      </div>
                    </div>
                    <p class="imgName" :title="item.seriesDescription + item.laterality">
                      {{ item.seriesDescription }}
                      <span class="" v-if="item.laterality">({{ item.laterality }})</span>
                    </p>
                    <p class="imgName">{{  item.time }}</p>
                  </div>
                </div>
              </draggable>
            </div>
          </div>
          <div class="contentRight">
            <!-- 工具按钮 -->
            <div class="content_top">
              <div class="toolBox">
                <div class="layBox">
                  <el-popover trigger="hover" popper-class="layPopver">
                    <div class="layShow">
                      <div class="tool-layout">
                        <div style="margin-bottom: 2px">
                          <img class="layImg" :src="require('@/assets/img/layout-1.png')" alt="" @click="handleLayout(1)">
                          <img class="layImg" :src="require('@/assets/img/layout-2.png')" alt="" @click="handleLayout(2)">
                          <img class="layImg" :src="require('@/assets/img/layout-3.png')" alt="" @click="handleLayout(3)">
                        </div>
                        <div style="margin-bottom: 2px">
                          <img class="layImg" :src="require('@/assets/img/layout-4.png')" alt="" @click="handleLayout(4)">
                          <img class="layImg" :src="require('@/assets/img/layout-5.png')" alt="" @click="handleLayout(5)">
                          <img class="layImg" :src="require('@/assets/img/layout-6.png')" alt="" @click="handleLayout(6)">
                        </div>
                        <div style="margin-bottom: 2px">
                          <img class="layImg" :src="require('@/assets/img/layout-7.png')" alt="" @click="handleLayout(7)">
                          <img class="layImg" :src="require('@/assets/img/layout-8.png')" alt="" @click="handleLayout(8)">
                          <img class="layImg" :src="require('@/assets/img/layout-9.png')" alt="" @click="handleLayout(9)">
                          <img class="layImg" :src="require('@/assets/img/layout-10.png')" alt="" @click="handleLayout(10)">
                        </div>
                        <div>
                          <img class="layImg" :src="require('@/assets/img/layout-11.png')" alt="" @click="handleLayout(11)">
                          <img class="layImg" :src="require('@/assets/img/layout-12.png')" alt="" @click="handleLayout(12)">
                          <img class="layImg" :src="require('@/assets/img/layout-13.png')" alt="" @click="handleLayout(13)">
                        </div>
                      </div>
                    </div>
                    <span slot="reference" class="tool">
                      <img :src="require('@/assets/img/tool-layout.png')" alt="">
                      <span style="margin-left: 2px">布局</span>
                    </span>
                  </el-popover>
                </div>
                <div class="tool" @click="toolWwwl">
                  <div>
                    <img :src="require('@/assets/img/tool-windos.png')" alt="">
                    <span style="margin-left: 2px">窗宽\窗位</span>
                  </div>
                </div>
                <div class="tool" @click="toolInvert">
                  <div>
                    <img :src="require('@/assets/img/tool-negative.png')" alt="">
                    <span style="margin-left: 2px">负片</span>
                  </div>
                </div>
                <div class="tool" @click="toolZoom">
                  <div>
                    <img :src="require('@/assets/img/tool-scale.png')" alt="">
                    <span style="margin-left: 2px">缩放</span>
                  </div>
                </div>
                <div class="tool" @click="toolMove">
                  <div>
                    <img :src="require('@/assets/img/tool-translate.png')" alt="">
                    <span style="margin-left: 2px">移动</span>
                  </div>
                </div>
                <div class="tool" @click="toolMagnify">
                  <div>
                    <img :src="require('@/assets/img/tool-zoom.png')" alt="">
                    <span style="margin-left: 2px">放大</span>
                  </div>
                </div>
                <div class="tool" @click="toolNote">
                  <div>
                    <img class="subscript" :src="require('@/assets/img/tool-subscript.png')" alt="">
                    <span style="margin-left: 2px">角注</span>
                  </div>
                </div>
                <div class="tool" @click="toolReset">
                  <div>
                    <img :src="require('@/assets/img/tool-reflesh.png')" alt="">
                    <span style="margin-left: 2px">重载</span>
                  </div>
                </div>
                <div class="tool" @click="toolFullScreen">
                  <div>
                    <img :src="require('@/assets/img/tool-expand.png')" alt="">
                    <span style="margin-left: 2px">全屏</span>
                  </div>
                </div>
              </div>
            </div>
            <div id="full-screen-solt" class="showBox">
              <div v-for="(item,index) in layOutList" :key="index" :class="[item.className]">
                <div v-for="(row) in item.secondClass" :id="row.sign" :key="row.sign" :class="[row.classA,row.classB]" :data-slot="row.sign" @click.stop="handleSelectFile(row)">
                  <div v-for="(col) in row.thirdClass" :id="col.sign" :key="col.sign" :class="[col.classA,col.classB]" :data-slot="col.sign" @click.stop="handleSelectFile(col)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-container>
    </el-container>
    <drawer title="添加标签" :display.sync="tagFlag" :inner="true" width="500px" :mask="true">
      <el-tree
        ref="tree"
        class="tagTree"
        :data="tagTreeList"
        :props="defaultProps"
        show-checkbox
        check-strictly
        :default-expanded-keys="expandKeys"
        node-key="id"
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span class="treeLabel" :title="node.label">{{ node.label.length > 15 ? node.label.substring(0,15) + '...' : node.label }}</span>
          <span style="display: inline-block;margin-left: 30px;vertical-align: bottom">
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)"
            >
              增加
            </el-button>
            <el-button
              style="margin-right: 10px"
              type="text"
              size="mini"
              @click="() => editTag(data)"
            >
              编辑
            </el-button>
            <el-popover
              ref="delTagPopover"
              placement="top"
              width="160"
              popper-class="record-popverClass"
            >
              <p style="margin-bottom: 10px">确认删除该条标签么?</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click="handleDelTag(data.id)">确定</el-button>
              </div>
              <span slot="reference">
                <el-button v-if="!node.disabled" type="text" size="mini">删除</el-button>
              </span>
            </el-popover>
          </span>
        </span>
      </el-tree>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: '50px',
          width: '100%',
          borderTop: '1px solid #333333',
          padding: '10px 16px',
          background: '#1F2329',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <el-button size="small" :style="{ marginRight: '8px',background: '#000000',color: '#ffffff',border: '1px solid #434343'}" @click="tagFlag = false">
          取消
        </el-button>
        <el-button size="small" type="primary" @click="addPatientTag">
          保存
        </el-button>
      </div>
    </drawer>
    <!--      新增子菜单对话框-->
    <el-dialog
      class="addNote"
      :modal="false"
      :title="subTitle"
      cancel-text="取消"
      ok-text="确定"
      :visible="addSubmenuFlag"
      width="30%"
      @close="addSubmenuFlag = false"
      @ok="handleAddTag"
    >
      <template slot="footer" style="background: #0c1016;">
        <el-button key="back" class="cancelNote" @click="addSubmenuFlag = false">
          取消
        </el-button>
        <el-button key="submit" type="primary" :loading="loading" @click="handleAddTag">
          确定
        </el-button>
      </template>
      <el-input v-model="tagName" class="info" placeholder="请输入子菜单名称" />
    </el-dialog>
  </el-container>
</template>
<script>
import vm from 'vue'
import showFile from './show-file'
import pdf from 'vue-pdf'
import drawer from './drawer'
import draggable from 'vuedraggable'
import _ from 'lodash'

export default {
  components: {
    showFile,
    drawer,
    pdf,
    draggable
  },
  props: {
    patientInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      searchChild: 1, //  1:搜索点击父节点，2:点击子节点
      checkAll: false,
      packFlag: true,
      proFlag: true,
      loading: false,
      examineType: 2, // 项目树
      treeProps: {
        children: 'children',
        label: 'text'
      },
      risNo: '',
      examNo: '',
      examItemCode: '',
      fileInstance: {},
      dragOptions: {
        animation: 120,
        scroll: true,
        sort: false,
        group: {
          pull: 'clone',
          put: true
        }
      },
      dragList: [], // 缩略图列表
      examNoList: [],
      dragIndex: '', // 缩略图索引
      examItemList: [], // 已选的检查项
      treeData: [], // 项目树
      eyeType: '', // 眼别类型
      fileType: '', // 文件类型
      dragFlag: false, // 缩略图是否展示
      eyeList: [
        {
          name: '全部',
          id: 1
        },
        {
          name: 'OD',
          id: 2
        },
        {
          name: 'OS',
          id: 3
        }
      ], // 眼别筛选项
      fileList: [
        {
          name: '全部',
          id: 1
        },
        {
          name: '影像',
          id: 2
        },
        {
          name: '报告',
          id: 3
        }
      ], // 文件类型筛选项
      eyeIndex: 0, // 眼别索引
      fileIndex: 0, // 文件索引
      tagFlag: false, // 标签弹框
      patientTagList: [], // 患者标签列表
      examineTagList: [], // 项目标签列表
      tagTreeList: [], // 标签列表
      tagType: 1, // 标签类型1患者 2项目
      expandKeys: [], // 默认展开标签节点
      pid: 0, // 标签父级id
      tagId: '', // 标签id
      tagName: '', // 标签名称
      addSubmenuFlag: false,
      subTitle: '新增子级菜单',
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      layOutList: [] // 布局列表
    }
  },
  mounted() {
    // this.queryPatientTag()
    this.queryProgramTree(2)
  },
  methods: {
    // 全选
    selectAllExamine() {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        this.$refs.examineTree.setCheckedNodes(this.treeData)
      } else {
        this.$refs.examineTree.setCheckedNodes([])
      }
      this.handlePreview()
    },
    // 反选
    selectUnChecked() {
      const res = this.$refs.examineTree
      const nodes = res.getCheckedNodes(true, true)
      this.batchSelect(this.treeData, res, true, nodes)
      this.handlePreview()
    },
    batchSelect(nodes, refs, flag, seleteds) {
      if (typeof nodes !== 'undefined') {
        nodes.forEach(element => {
          element.examItemVOS.forEach(row => {
            refs.setChecked(row, flag, true)
          })
        })
      }
      if (typeof seleteds !== 'undefined') {
        seleteds.forEach(node => {
          refs.setChecked(node, !flag, true)
        })
      }
    },
    // 项目树
    selProList() {
      this.proFlag = true
      this.queryProgramTree(2)
    },
    // 时间树
    selTimeList() {
      this.proFlag = false
      this.queryProgramTree(1)
    },
    // 查询项目树/时间树
    async queryProgramTree(type) {
      this.examineType = type
      const { data: res } = await this.$http.get('/patient/pac30/getPatientTree', { params: {
        treeType: type,
        // patientId: this.patientInfo.patientId
        patientId: '2553716'
        // patientId: '25490'
      }
      })
      if (res.code === 0) {
        const data = res.data || []
        for (let i = 0; i < data.length; i++) {
          const temp = data[i].children
          for (let j = 0; j < temp.length; j++) {
            if (type === 1) {
              // temp[j].name = temp[j].examineItem || ''
            } else {
              temp[j].examTime = temp[j].examTime ? temp[j].examTime.substring(0, 11) : ''
            }
          }
        }

        this.allExamine = []
        if (res.data.length) {
          for (let i = 0; i < data.length; i++) {
            const cur = data[i]
            const temp = data[i].children
            if (type === 1) {
              this.examDate = data[0].id
            } else {
              this.examItemCode = data[0].id
            }
            for (let j = 0; j < temp.length; j++) {
              // this.allExamine.push(`${temp[j].examNo}||${temp[j].risNo}`)
              if (this.examineType === 1) {
                temp[j].examDate = cur.id
              }
            }
            this.defaultExpandedKeys = this.allExamine
          }
          this.treeData = data || []
          this.queryExamine()
        }
        // this.treeData = res.data || []
        // this.examNoList = []
        // if (this.treeData.length) {
        //   this.examNoList.push(this.treeData[0].children[0].examNo)
        //   this.$nextTick(() => {
        //     this.$refs.examineTree.setCurrentKey(this.treeData[0].children[0].rownows)
        //   })
        //   for (let i = 0; i < this.treeData.length; i++) {
        //     const temp = this.treeData[i].children
        //     for (let j = 0; j < temp.length; j++) {
        //       if (type === 1) {
        //         temp[j].name = temp[j].examineItem || ''
        //       } else {
        //         temp[j].name = temp[j].examTime ? temp[j].examTime.substring(0, 11) : ''
        //       }
        //     }
        //   }
        //   this.queryExamine()
        // }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击项目
    onSelect(selectedKeys) {
      console.log('点击项目', selectedKeys)
      // if (!selectedKeys.length) return
      // const tempKey = selectedKeys[0]
      if (selectedKeys.children && selectedKeys.children.length) {
        // 父节点
        this.searchChild = 1
        if (this.examineType === 2) {
          // 项目树
          this.examItemCode = selectedKeys.text
          this.examDate = ''
          this.examNo = ''
        } else {
          // 时间树
          this.examDate = selectedKeys.text
          this.examNo = ''
          this.examItemCode = ''
        }
      } else {
        // 子节点
        this.searchChild = 2
        this.examNo = selectedKeys.examNo
        this.examItemCode = selectedKeys.id
        if (this.examineType === 2) {
          console.log('子节点', selectedKeys)
          this.examDate = selectedKeys.text
        } else {
          this.examDate = selectedKeys.examDate
        }
      }
      // this.examNoList = []
      // const tempKey = selectedKeys.examItemVOS || []
      // if (tempKey && tempKey.length) {
      //   // 父节点
      //   tempKey.forEach((item) => {
      //     this.examNoList.push(item.examNo)
      //   })
      // } else {
      //   // 子节点
      //   this.examNoList.push(selectedKeys.examNo)
      // }
      this.queryExamine()
    },
    //
    onChange() {
      this.handlePreview()
    },
    // 浏览模式
    handlePreview() {
      const node = this.$refs.examineTree.getCheckedNodes()
      if (!node.length) return this.$message.warning('请选择文件!')
      const selectNode = node.filter(item => {
        return item.examNo !== undefined
      })
      this.examNoList = []
      selectNode.forEach((item) => {
        this.examNoList.push(item.examNo)
      })
      this.queryExamine()
    },
    // 查询项目文件
    promiseExamine() {
      const params = {
        searchType: this.examineType,
        searchChild: this.searchChild,
        // patientId: this.patientInfo.patientId,
        patientId: '2553716',
        eyeType: this.eyeType,
        fileType: this.fileType
      }
      if (this.examineType === 1) {
        // 时间树
        params.examDate = this.examDate
        if (this.searchChild === 2) {
          params.examNo = this.examNo
        }
      } else {
        // 项目树
        params.itemCode = this.examItemCode
        if (this.searchChild === 2) {
          params.examDate = this.examDate ? this.examDate.substring(0, 11) : this.examDate
          params.examNo = this.examNo
        }
      }
      Object.keys(params).map((item) => {
        if (!params[item]) {
          delete params[item]
        }
        return true
      })

      return new Promise((resolve, reject) => {
        const { data: res } = this.$http.get('/patient/pac30/getExamFileList', { params: params }).then((res) => {
          if (res.data && res.data.code === 0) {
            const data = res.data.data
            if (data && data.length) {
              data.forEach(item => {
                if (item.seriesList && item.seriesList.length) {
                  item.seriesList.forEach(row => {
                    row.time = row.seriesDate && row.seriesDate.length > 10 ? row.seriesDate.substring(0, 10) : row.seriesDate
                    row.instanceList.forEach(e => {
                      const type = e.imageId.substring(e.imageId.length - 3)
                      e.imageId = 'http://z1.huimucloud.com:8001/' + e.imageId
                      e.imageType = type.toLocaleUpperCase()
                    })
                  })
                }
              })
            }
            resolve(res.data)
          }
        })
      })
    },
    // 查询多个文件并且获取缩略图
    queryExamine() {
      this.promiseExamine().then((res) => {
        let curList = []
        const data = res.data || []
        data.forEach(item =>{
          curList = curList.concat(item.seriesList)
        })
        this.dragList = curList
        this.dragIndex = 0
        this.handleLayout(1)
        this.getDcmFile()
      })
    },
    // 选择眼别
    selectEye(item, index) {
      this.eyeType = item.id === 1 ? '' : (item.id === 2 ? '右眼' : '左眼')
      this.eyeIndex = index
      this.queryExamine()
    },
    // 选择文件类型
    selectFileType(item, index) {
      this.fileType = item.id === 1 ? '' : (item.id === 2 ? '2' : '1')
      this.fileIndex = index
      this.queryExamine()
    },
    // 点击缩略图文件
    handleClickFile(item, index) {
      this.dragIndex = index
      // 替换第一个文件
      this.replaceFile('data-one', item)
    },
    // 替换布局中的某一项文件
    replaceFile(id, item) {
      const firstDiv = document.getElementById(id)
      firstDiv.innerHTML = ''
      const currentNodeList = this.getFileIdList([id])
      for (let i = 0; i < currentNodeList.length; i++) {
        currentNodeList[i].data = item
      }
      const newNode = this.loadFile(currentNodeList, 'tempId')
      this.setFootNote(newNode, 'footId')
      this.setFileInstance(this.layOutList, newNode)
      this.fileInstance = newNode[0].fileInstance
    },
    // 判断点是否在目标矩形中
    inside(x1, y1, x4, y4, x, y) {
      // 默认:1点在左上,4点在右下
      if (x <= x1) {
        // 在矩形左侧
        return false
      }
      if (x >= x4) {
        // 在矩形右侧
        return false
      }
      if (y <= y1) {
        // 在矩形上侧
        return false
      }
      if (y >= y4) {
        // 在矩形下侧
        return false
      }
      return true
    },
    // 拖拽结束
    fileDragEnd(evt) {
      const curIdx = evt.oldDraggableIndex
      const curData = this.dragList[curIdx]
      // 获取所有容器
      const slot_con = document.querySelectorAll('[data-slot]')
      for (const item of slot_con) {
        const rect = item.getBoundingClientRect()
        if (this.inside(rect.left, rect.top, rect.right, rect.bottom, evt.originalEvent.clientX, evt.originalEvent.clientY)) {
          const curIdName = item.getAttribute('id')
          this.replaceFile(curIdName, curData)
        }
      }
    },
    // 获取dcm缩略图
    getDcmFile() {
      if (!this.dragList.length) return
      this.$nextTick(() => {
        this.dragList.forEach((item, index) => {
          const data = item.instanceList[0]
          if (data.imageType === 'DCM') {
            const name = 'fileSolt' + index
            const element = this.$refs[name]
            this.$cornerstone.enable(element[0])
            this.loadImage(element[0], data.imageId)
          }
        })
      })
    },
    // 打开标签列表弹框
    showDrawer(tagType, item) {
      this.tagFlag = true
      this.tagType = tagType
      if (tagType === 2) {
        this.risNo = item.risNo
        this.examNo = item.examNo
        this.examItemCode = item.examItemCode
      }
      this.queryTags()
    },
    // 查询标签
    async queryTags() {
      const { data: res } = await this.$http.get('/tag/tree')
      if (res.code === 0) {
        if (res.data.length) {
          res.data.forEach(item => {
            // 禁止操作一级标签以及默认展开所有二级标签
            item.disabled = true
            this.expandKeys.push(item.id)
          })
        }
        this.tagTreeList = res.data || []
      } else {
        this.$message.error(res.msg)
      }
    },
    // 添加子级标签
    append(data) {
      this.addSubmenuFlag = true
      this.subTitle = '新增子级菜单'
      this.tagName = ''
      this.pid = data.id
    },
    // 编辑标签
    editTag(data) {
      this.addSubmenuFlag = true
      this.subTitle = '编辑子级菜单'
      this.tagName = data.tagName
      this.tagId = data.id
    },
    // 新增/编辑标签
    async handleAddTag() {
      if (this.tagName === '') return this.$message.warning('菜单名称不能为空!')
      const params = {
        tagName: this.tagName
      }
      let url = ''
      if (this.subTitle === '新增子级菜单') {
        params.pid = this.pid
        url = '/tag/saveTag'
      } else {
        params.id = this.tagId
        url = '/tag/updateTagName'
      }
      const { data: res } = await this.$http({
        method: 'post',
        url: url,
        data: params
      })
      if (res.code === 0) {
        this.addSubmenuFlag = false
        this.tagName = ''
        await this.queryTags()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除标签
    async handleDelTag(tagId) {
      const { data: res } = await this.$http({
        method: 'post',
        url: '/tag/deleteTag',
        data: {
          id: tagId
        }
      })
      if (res.code === 0) {
        await this.queryTags()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 给患者/检查项打标签
    async addPatientTag() {
      const tagIds = this.$refs.tree.getCheckedKeys()
      let url = ''
      const params = {
        tagIds: tagIds,
        patientId: this.patientInfo.patientId,
        patientIdNumber: this.patientInfo.patientIdNumber
      }
      if (this.tagType === 1) {
        url = '/tag/relation/savePatientTag'
        params.flag = 1
      } else if (this.tagType === 2) {
        url = '/tag/relation/saveExamItemTag'
        params.risNo = this.risNo
        params.examNo = this.examNo
        params.examItemCode = this.examItemCode
        params.flag = 2
      }
      const { data: res } = await this.$http({
        method: 'post',
        url: url,
        data: params
      })
      if (res.code === 0) {
        this.tagFlag = false
        this.$message.success('添加成功!')
        if (this.tagType === 1) {
          // await this.queryPatientTag()
        } else if (this.tagType === 2) {
          await this.queryProgramTree(this.examineType)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 查询患者标签
    async queryPatientTag() {
      const { data: res } = await this.$http.get('/tag/relation/getPatientTagList', { params: {
        patientId: this.patientInfo.patientId
      }
      })
      if (res.code === 0) {
        this.patientTagList = res.data || []
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除病人标签
    async deletePatientTag(item) {
      const { data: res } = await this.$http({
        method: 'post',
        url: '/tag/relation/deletePatientTag',
        data: {
          id: item.id
        }
      })
      if (res.code === 0) {
        // await this.queryPatientTag()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 查询检查项标签
    async queryExamineTags(row) {
      if (row) {
        this.risNo = row.risNo
        this.examNo = row.examNo
      }
      const { data: res } = await this.$http.get('/tag/relation/getExamItemTagList', { params: {
        risNo: this.risNo,
        examNo: this.examNo
      }
      })
      if (res.code === 0) {
        this.examineTagList = res.data || []
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除检查项标签
    async deleteExamineTag(item) {
      const { data: res } = await this.$http({
        method: 'post',
        url: '/tag/relation/deleteExamItemTag',
        data: {
          id: item.id
        }
      })
      if (res.code === 0) {
        this.queryExamineTags()
        this.queryProgramTree(this.examineType)
      } else {
        this.$message.error(res.msg)
      }
    },
    // 展示图像
    loadImage(element, url) {
      const self = this
      const imageId = 'wadouri:' + url
      this.$cornerstone.loadImage(imageId).then(function(image) {
        const viewport = self.$cornerstone.getDefaultViewportForImage(element, image)
        self.viewportDefault = viewport
        self.$cornerstone.displayImage(element, image, viewport)
      })
    },
    // 手动创建div追加到当前目标容器中，用于挂载覆盖，把组件挂载到创建的div上，返回实例列表
    loadFile(currentNodeList, tempId) {
      const tempLabel = document.createElement('div')
      // 遍历当前的容器节点，挂载组件
      for (let i = 0; i < currentNodeList.length; i++) {
        tempLabel.id = tempId + i
        const current = currentNodeList[i]
        const currentNode = current.node
        const currentData = current.data
        // console.log(currentNode);
        if (currentNode.hasChildNodes && currentNode.hasChildNodes()) {
          for (let i = 0; i < currentNode.childNodes.length; i++) {
            const tempNode = currentNode.childNodes[i]
            if (tempNode.getAttribute('id') == 'footIndex') tempNode.remove()
          }
        }
        currentNode.appendChild(tempLabel)
        if (currentData) {
          const fileConstructor = vm.extend(showFile)
          // 把当前项的数据作为参数传入组件中
          const fileInstance = new fileConstructor({
            propsData: {
              fileObject: currentData
            }
          }).$mount(`#${tempId}${i}`)
          // 把当前的容器实例作为参数传入到当前的节点中，并且return出去
          current.fileInstance = fileInstance
        }
      }
      return currentNodeList
    },
    // new一个数组，传入所有容器的节点和对应的data
    getFileIdList(idList) {
      if (idList.length) {
        const nodeList = []
        for (let i = 0; i < idList.length; i++) {
          const currentNode = document.getElementById(idList[i])
          nodeList.push({ node: currentNode, data: {}})
        }
        return nodeList
      }
    },
    // 设置角注
    setFootNote(currentNodeList, footId) {
      const tempLabel = document.createElement('div')
      const temps = `<div foot-solt-id="footIndex">
                        <div style="position: absolute;padding: 2px;left: 0;top: 0;">
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">{{fileItem.patientName}}</p>
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">{{fileItem.patientId}}</p>
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">{{fileItem.patientSex}}</p>
                        </div>
                        <div style="position: absolute;padding: 2px;right: 0;top: 0;text-align: right">
                        <i class="el-icon-close" style="text-align: right;color: #418AE8;cursor: pointer" @click="delFIle()"></i>
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">{{fileItem.time}}</p>
<!--                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">143135 </p>-->
                        </div>
                        <div style="position: absolute;padding: 2px;left: 0;bottom: 0;" v-if="fileItem.fileType != 'PDF'">
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">Render Time:{{fileIns.renderTime}} ms</p>
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">lmage # {{fileIns.curIndex}}/{{fileIns.total}} </p>

<!--                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">lmage # {{fileIns.curIndex}}/{{fileIns.total}} </p>-->
<!--                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">Series # 1</p>-->
<!--                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">1205824 </p>-->
                        </div>
                        <div style="position: absolute;padding: 2px;right: 0;bottom: 0;" v-if="fileItem.fileType != 'PDF'">
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">Zoom:{{fileIns.zoomValue}}</p>
                          <p style="font-size: 12px;color: #418AE8;margin-bottom: 0">WW/WL:{{fileIns.wwwcValue}}</p>
                        </div>
                     </div>`
      for (let i = 0; i < currentNodeList.length; i++) {
        tempLabel.id = footId + i
        const current = currentNodeList[i]
        const currentNode = current.node
        if (currentNode.hasChildNodes()) {
          for (let i = 0; i < currentNode.childNodes.length; i++) {
            const tempNode = currentNode.childNodes[i]
            if (tempNode.getAttribute('foot-solt-id') == 'footIndex') tempNode.remove()
          }
        }
        currentNode.appendChild(tempLabel)
        if (current.data) {
          current.data.patientName = this.patientInfo.patientName
          current.data.patientId = this.patientInfo.patientId
          current.data.patientSex = this.patientInfo.patientSex
          const myFootNote = vm.extend({
            props: ['data'],
            data() {
              return {
                fileItem: current.data,
                fileIns: current.fileInstance
              }
            },
            methods: {
              delFIle() {
                const curFIle = document.getElementById(current.node.id)
                curFIle.innerHTML = ''
              }
            },
            template: temps
          })
          new myFootNote({ propsData: { fileItem: current.data, fileIns: current.fileInstance }}).$mount(`#${footId}${i}`)
        }
      }
    },
    // 点击容器里的文件，选中当前实例
    handleSelectFile(item) {
      this.fileInstance = item.file
    },
    // 将所有的组件实例当作参数传入对应的数组中
    setFileInstance(list, newNode) {
      const secondClass = list[0].secondClass
      for (let k = 0; k < newNode.length; k++) {
        const curItem = newNode[k]
        const curNode = curItem.node
        const curId = curNode.getAttribute('data-slot')
        for (let i = 0; i < secondClass.length; i++) {
          const temp = secondClass[i]
          if (temp.sign && temp.sign === curId) {
            temp.file = curItem.fileInstance
          }
          for (let j = 0; j < temp.thirdClass.length; j++) {
            const _temp = temp.thirdClass[j]
            if (_temp.sign && _temp.sign === curId) {
              _temp.file = curItem.fileInstance
            }
          }
        }
      }
    },
    // 把缩略图中的前i项的数据作为参数传到节点中
    setContentData(currentNodeList, contentList) {
      for (let i = 0; i < contentList.length; i++) {
        for (let j = 0; j < currentNodeList.length; j++) {
          currentNodeList[j].data = contentList[j]
        }
      }
    },
    // 设置容器中数据
    setLayoutData(idList, contentList) {
      this.$nextTick(() => {
        const currentNodeList = this.getFileIdList(idList)
        this.setContentData(currentNodeList, contentList)
        const newNode = this.loadFile(currentNodeList, 'tempId')
        this.setFootNote(newNode, 'footId')
        this.setFileInstance(this.layOutList, newNode)
        this.fileInstance = newNode[0].fileInstance
      })
    },
    // 布局
    handleLayout(i) {
      // 组件容器中如果有文件，则删除
      const file_solt = document.querySelectorAll('[file-solt-id]')
      for (const item of file_solt) item.remove()
      // 获取缩略图中的前i项
      let contentList = []
      if (i > this.dragList.length - 1) {
        contentList = this.dragList
      } else {
        contentList = this.dragList.slice(0, i)
      }
      // 标记13种布局方式中每个用于展示的容器，以及控制样式
      if (i === 1) {
        const idList = ['data-one']
        this.layOutList = _.cloneDeep([{ className: 'rowBox', secondClass: [{ classA: 'singleBox', sign: 'data-one', thirdClass: [{ classA: 'dis' }] }] }])
        this.setLayoutData(idList, contentList)
      } else if (i === 2) {
        const idList = ['data-one', 'data-two']
        this.layOutList = _.cloneDeep([{ className: 'rowBox', secondClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mr8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-two', thirdClass: [{ classA: 'dis' }] }] }])
        this.setLayoutData(idList, contentList)
      } else if (i === 3) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = _.cloneDeep([{ className: 'rowBox', secondClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mr8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-two', classB: 'mr8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-three', thirdClass: [{ classA: 'dis' }] }] }])
        this.setLayoutData(idList, contentList)
      } else if (i === 4) {
        const idList = ['data-one', 'data-two']
        this.layOutList = _.cloneDeep([{ className: 'columnBox', secondClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mb8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-two', classB: '', thirdClass: [{ classA: 'dis' }] }] }])
        this.setLayoutData(idList, contentList)
      } else if (i === 5) {
        const idList = ['data-one', 'data-two', 'data-three', 'data-four']
        this.layOutList = _.cloneDeep([{ className: 'columnBox', secondClass: [{ classA: 'rowBox', classB: 'mb8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-two', classB: '' }] }, { classA: 'rowBox', classB: '', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-four', classB: '' }] }] }])
        this.setLayoutData(idList, contentList)
      } else if (i === 6) {
        const idList = ['data-one', 'data-two', 'data-three', 'data-four', 'data-five', 'data-six']
        this.layOutList = [{ className: 'columnBox', secondClass: [{ classA: 'rowBox', classB: 'mb8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-two', classB: '' }] }, { classA: 'rowBox', classB: 'mb8', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-four', classB: '' }] }, { classA: 'rowBox', classB: '', thirdClass: [{ classA: 'singleBox', sign: 'data-five', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-six', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 7) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = [{ className: 'columnBox', secondClass: [{ classA: 'rowBox', classB: 'mb8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-two', classB: '' }] }, { classA: 'rowBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 8) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = [{ className: 'columnBox', secondClass: [{ classA: 'rowBox', classB: 'mb8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: '' }] }, { classA: 'rowBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-two', classB: 'mr8' }, { classA: 'singleBox', sign: 'data-three', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 9) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = [{ className: 'rowBox', secondClass: [{ classA: 'rowBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: '' }] }, { classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-two', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-three', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 10) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = [{ className: 'rowBox', secondClass: [{ classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-two', classB: '' }] }, { classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 11) {
        const idList = ['data-one', 'data-two', 'data-three']
        this.layOutList = [{ className: 'columnBox', secondClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mb8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-two', classB: 'mb8', thirdClass: [{ classA: 'dis' }] }, { classA: 'singleBox', sign: 'data-three', thirdClass: [{ classA: 'dis' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 12) {
        const idList = ['data-one', 'data-two', 'data-three', 'data-four', 'data-five', 'data-six']
        this.layOutList = [{ className: 'rowBox', secondClass: [{ classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-four', classB: '' }] }, { classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-two', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-five', classB: '' }] }, { classA: 'columnBox', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-six', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      } else if (i === 13) {
        const idList = ['data-one', 'data-two', 'data-three', 'data-four', 'data-five', 'data-six', 'data-seven', 'data-eight', 'data-nine']
        this.layOutList = [{ className: 'rowBox', secondClass: [{ classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-one', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-four', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-seven', classB: '' }] }, { classA: 'columnBox', classB: 'mr8', thirdClass: [{ classA: 'singleBox', sign: 'data-two', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-five', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-eight', classB: '' }] }, { classA: 'columnBox', thirdClass: [{ classA: 'singleBox', sign: 'data-three', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-six', classB: 'mb8' }, { classA: 'singleBox', sign: 'data-nine', classB: '' }] }] }]
        this.setLayoutData(idList, contentList)
      }
    },
    // 窗宽窗位
    toolWwwl() {
      this.fileInstance.setWwwl()
    },
    // 负片
    toolInvert() {
      this.fileInstance.setInvert()
    },
    // 移动
    toolMove() {
      this.fileInstance.setMove()
    },
    // 缩放
    toolZoom() {
      this.fileInstance.setZoom()
    },
    // 放大
    toolMagnify() {
      this.fileInstance.setMagnify()
    },
    // 角注
    toolNote() {
      const noteList = document.querySelectorAll('[foot-solt-id]')
      for (let i = 0; i < noteList.length; i++) {
        noteList[i].style.display = noteList[i].style.display === 'none' ? 'inline' : 'none'
      }
    },
    // 重载
    toolReset() {
      this.fileInstance.setReset()
    },
    // 全屏
    toolFullScreen() {
      const full = document.getElementById('full-screen-solt')
      this.launchIntoFullscreen(full)
    },
    // 全屏
    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.layout{
  width: 100%;
  height: 100%;
  //padding-bottom: 50px;
  .expansion{
    width: 32px;
    height: 32px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
  }
  .leftBox{
    width: 100%;
    padding-top: 16px;
    //height: calc(100% - 48px);
    height: 100%;
    display: flex;
    justify-content: flex-start;
    background-color: #1F2329;
    overflow: hidden;

    .leftBtn{
      width: 32px;
      height: 100%;
      flex:0 0 auto;
      position: relative;
    }
    .leftPro{
      width: 288px;
      flex:0 0 auto;
      position: relative;
    }
    .treeSide{
      height: calc(100% - 135px);
      overflow-y: auto;
    }
    .leftNote{
      width: 32px;
      height: 46px;
      position: absolute;
      left: 0;
      bottom: 32px;
    }
    .leftNote:hover{
      opacity: 0.8;
    }
    .leftBottom{
      width: 100%;
      height: 32px;
      line-height: 32px;
      background-color: #141414;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .copyRight{
      font-size: 12px;
      font-family: PingFang SC;
      color: #A3A3A3;
      margin-left: 20px;
    }
    .tipLabel{
      width: 58px;
      height: 32px;
      position: absolute;
      right: 34px;
      top: 0;
    }
    .tipLabel:hover{
      opacity: 0.8;
    }
    .topInfo{
      color: #FFFFFF;
      font-size: 16px;
      font-family: PingFang SC;
      line-height: 32px;
      margin-bottom: 0;
      font-weight: bold;
      position: absolute;
      left: 0;
      top: 0px;

      .mr5{
        margin-right: 7px;
      }
    }
    .proTree{
      width: 32px;
      height: 142px;
      position: absolute;
      top: 75px;
      left: 0;
    }
    .timeTree{
      width: 32px;
      height: 142px;
      position: absolute;
      top: 192px;
      left: 0;
    }
    .proTree:hover, .timeTree:hover{
      opacity: 0.8;
    }
    .tipTop{
      width: 286px;
      height: 32px;
      position: relative;
      left: -32px;
      top: 0;
    }
    .tipPack{
      width: 58px;
      height: 32px;
      position: absolute;
      right: 0;
      top: 0;
    }
    .tipPack:hover{
      opacity: 0.8;
    }
    .back{
      width: 21px;
      height: 21px;
      position: absolute;
      right: 5.5px;
      top: 5.5px;
    }
    .back:hover{
      opacity: 0.8;
    }
    .projectBtn{
      width: 100%;
      height: 32px;
      margin: 16px 0;
      display: flex;
      justify-content: space-between;

      .selectBtn{
        color: #4797FF;
        font-size: 14px;
        font-family: PingFang SC;
        line-height: 32px;
      }
      .noteBox{
        width: 66px;
        height: 32px;
        margin-right: 16px;
      }
      .noteBox:hover{
        opacity: 0.8;
      }
      .ml12{
        margin-left: 12px;
        cursor: pointer;
      }
      .ml16{
        margin-left: 16px;
        cursor: pointer;
      }
    }
    .examTree{
      background-color: #1F2329;
      color: #FFFFFF;
    }
    .custom-tree-node{
      display: inherit;
      width: 100%;
      padding-right: 18px;
    }
    .labelImg{
      float: right;
      margin-top: 6px;
    }
    .disSel{
      display: none;
    }

  }
  .contentBox{
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .contentLeft{
      width: 120px;
      height: 100%;
      margin-right: 16px;
      transition: width 0.2s;
      -moz-transition: width 0.2s; /* Firefox 4 */
      -webkit-transition: width 0.2s; /* Safari and Chrome */
      -o-transition: width 0.2s; /* Opera */
      overflow: hidden;

      .fileContent{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        //overflow-y: hidden;

        .eyeBox{
          color: #FFFFFF;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 8px;

          .eyeSel{
            width: 40px;
            height: 32px;
            color: #FFFFFF;
            font-size: 14px;
            font-family: PingFang SC;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            padding: 0 3px;
            word-spacing: -3px;
            box-sizing: border-box;
            background-color: #262626;
            border: none;
          }
          .eyeSel:hover{
            background-color: #434343;
          }
          .eyeActive{
            background-color: #1C69DC !important;
          }
        }
        .scrollContain{
          flex: 1;
          overflow-y: auto;

          .fileBox{
            width: 108px;
            // height: 163px;
            padding-top: 4px;
            box-sizing: border-box;
            text-align: center;
            margin: 8px auto 8px;
            border-radius: 4px;
            overflow-x: hidden;
          }
          .fileActive{
            background-color: #0D2247;
          }
          .fileBox:hover{
            background-color: #0D2247;
          }
          .fileImg{
            width: 100px;
            // height: 100px;
            margin: auto auto 4px;
          }
          .imgName{
            font-size: 12px;
            text-align: center;
            font-family: PingFang SC;
            color: #FFFFFF;
            margin-bottom: 0;
            word-wrap:break-word;
            word-break:break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            //display: -webkit-box;
          }

        }
      }
    }
    .contentRight{
      width: 100%;
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .content_top{
        width: 100%;
        margin-bottom: 8px;
      }

      .toolBox{
        width: 100%;
        height: 32px;
        padding: 0 20px;
        position: relative;
        display: flex;
        justify-content: space-between;
        line-height: 32px;
        border-radius: 4px;
        background-color: #262626;
        .subscript {
          width: 6px !important;
          height: 16px;
        }
        .tool,.layBox{
          line-height: 32px;
          color: #FFFFFF;
          cursor: pointer;

          img{
            width: 16px;
            height: 16px;
            vertical-align: sub;
          }
          .toolActive{
            position: absolute;
            bottom: -24px;
            left: -26px;
            display: none;
          }
        }
        .tool:hover{
          opacity: 0.7;
        }
      }
      .mb16{
        margin-bottom: 16px;
      }
      .mb8{
        margin-bottom: 8px;
      }
      .showBox{
        width: 100%;
        height: 100%;
        overflow: hidden;
        flex: 1;

        .rowBox{
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          justify-content: space-around;
        }
        .columnBox{
          width: 100%;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        .singleBox{
          width: 100%;
          height: 100%;
          flex: 1 1 auto;
          position: relative;
          padding: 0px 50px;
          border: 1px solid #418AE8;
          overflow: hidden;
        }
        .dis{
          display: none;
        }
        .mr8{
          margin-right: 8px;
        }
        .mb8{
          margin-bottom: 8px;
        }

        .notesBox{
          position: absolute;
          padding: 2px;

          p{
            font-size: 12px;
            color: #418AE8;
            font-family: "PingFang SC";
            margin-bottom: 0;
          }
        }
        .lt{
          left: 0;
          top: 0;
        }
        .rt{
          right: 0;
          top: 0;
        }
        .lb{
          left: 0;
          bottom: 0;
        }
        .rb{
          right: 0;
          bottom: 0;
        }
      }
    }
    }
  .treeLabel{
    display: inline-block;
    white-space: normal;
    margin-top: 5px;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  .tagTree{
    background: #1F2329;
    color: rgba(255,255,255,0.85);;
  }
  ::-webkit-scrollbar
  {
    width: 5px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(0,0,0,0.1);
  }
}
</style>
<style lang="scss">
.layout{
  .addNote{
    .el-dialog__footer{
      background: #0c1016;
      padding-top: 30px;
    }
    .el-dialog__header{
      background: #0C1016 !important;
      border-bottom: 1px solid #000000 !important;
    }
    .el-dialog__body{
      background-color: #0C1016;
      padding: 0 20px !important;
    }
    .el-dialog__headerbtn .el-dialog__close{
      color: #FFFFFF;
    }
    .cancelNote{
      background-color: #202020;
      color: #FFFFFF;
      border: 1px dotted #274916;
    }
  }
  .el-tree-node__content:hover{
    background-color: #0D2247;

    .disSel{
      display: inline-block;
    }
  }
  .el-tree-node:focus>.el-tree-node__content{
    background-color: #0D2247;
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #0D2247;
  }
}
.el-checkbox__input{
  line-height: normal;
}
.record-popverClass{
  background: #262626;
  border: 1px solid #262626;
  color: #FFFFFF;
}
.tagContent{
  .el-tag{
    color: #52C41A;
    background: #162312;
    border: 1px solid #274916;
    display: block;
    margin-bottom: 8px;
     .el-tag__close{
       color: #FFFFFF;
     }
    .el-tag__close:hover{
      background-color: transparent;
    }
  }
  .addTag{
    background-color: #202020;
    color: #FFFFFF;
    border: 1px dotted #274916;
    cursor: pointer;
  }
}
.record-popverClass  {
  .popper__arrow::after{
     border-bottom-color: #262626 !important;
  }
 .popper__arrow {
    border-bottom-color: #262626 !important;
  }
}
.layPopver{
  height: 115px;
  min-width: 120px;
  padding: 8px;
  background-color: #262626;
  border: none;
  .layShow{
    width: 105px;
    height: 100px;
    background-color: #262626;
    box-sizing: border-box;
    border-radius: 2px;
    .tool-layout{
      display: flex;
      flex-direction: column;

      .layImg{
        width: 20px;
        height: 20px;
        margin-right: 6px;

        &:hover{
          opacity: 0.45;
        }
      }
    }

  }
}
</style>