Vue_New/src/xt_pages/user/Sitemap.vue

<template>
  <div>
    <div class='content_top' style="width: 100%;margin-bottom: 20px;border-bottom:1px solid #DCDFE6;padding-bottom:10px">
      <div style="font-size: 20px;">血管通路位点标记</div>
      <div>
        <el-button type="primary">操作说明</el-button>
      </div>
    </div>

    <div style="width:80%;margin:auto;">
      <div style="margin-bottom:30px;width: 100%; position: relative;">
        <el-button type="primary" style="margin-right:20px;" @click="open">更换图片</el-button>
        <el-button type="primary" style="margin-right:20px;" @click="add" v-show="!append">添加/修改位点标记</el-button>
        <el-button type="primary" @click="printtup">打印</el-button>
        <div style="display: inline-block;position: absolute;right: 10px;">
          <el-button type="primary" style="margin-right:20px;" v-show="append" @click="saveimg">保存</el-button>
          <el-button v-show="append" @click="Cancel">取消</el-button>
        </div>
      </div>
      <div style="margin-top:6px;display:flex;flex-wrap: wrap;position:relative;min-height:480px;">
        <div style="width:47%;border:1px solid #ddd;padding: 5px;" id="print_mark_img" ref="imageWrapper">
          <div id="point_mark_img_wrap1" class="print_main_content" style="width: 100%;padding: 0;border: 0;" >

            <img v-if="fileList.length==0" id="ossPointMarkImg" src="@/assets/evaluate/xgtl_default.png" alt="" srcset="">
            <img v-if="fileList.length>0" id="ossPointMarkImg" :src="fileList[0].img_url" alt="" srcset="">

            <!-- A端/V端 v-if="a_num==2" -->
            <!-- <div v-for="(item,index) in A_arr" :key="index">
              <div v-if="a_num==2" title="长按右键调整线条角度" class="mark-target mark-target-a mark-target-a1" data-num="1"
                  :style="{left:item.left+'px', top:item.top+'px', cursor: 'move',position: 'absolute'}"
                  @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">{{item.markNum}}
                <span class="mark-line mark-line-a" style="transform: rotate(160deg);" data-rotate="160"></span>
              </div>
            </div> Aarr -->
             <!-- A端/V端 v-if="a_num==2" -->
            <div v-for="(item,indexa) in Aarr" :key="indexa">
              <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-a mark-target-a1" data-num="1" id="mark-target-a"
                  :style="{left:item.left+'px', top:item.top+'px', cursor: 'move',position: 'absolute'}"
                  @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)">{{item.markNum}}
                <span class="mark-line mark-line-a" style="transform: rotate(160deg);" data-rotate="160"></span>
              </div>
            </div>

            <div v-for="(item,indexv) in Varr" :key="indexv">
              <div v-if="item.status==2" title="长按右键调整线条角度" class="mark-target mark-target-v mark-target-v1" data-num="1" id="mark-target-v"
                    :style="{left: item.left+'px', top: item.top+'px', cursor: 'move', position: 'absolute'}"
                    @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">{{item.markNum}}
                <span class="mark-line mark-line-v" style="transform: rotate(20deg);" data-rotate="20"></span>
              </div>
            </div>
            <!-- <div v-for="(item,index) in V_arr" :key="index">
              <div v-if="v_num==2" title="长按右键调整线条角度" class="mark-target mark-target-v mark-target-v1" data-num="1"
                    :style="{left: item.left+'px', top: item.top+'px', cursor: 'move', position: 'absolute'}"
                    @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">{{item.markNum}}
                <span class="mark-line mark-line-v" style="transform: rotate(20deg);" data-rotate="20"></span>
              </div>
            </div> -->


            <!-- 穿刺文字 active  @mousedown="startDrag"   @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)" left:text_left+'px',top:text_top+'px',-->
            <!-- <div  >@mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)" -->
              <div v-for="(item,index) in text_arr" :key="index" class="add-mark-text-wrap active text" id="text" @mousedown="mousedown($event)"
              :style="{width:(item.width + 10)+'px',left:item.left+'px',top:item.top+'px','font-size':14+'px', position: 'absolute'}"
              >
                <!-- <div  style="width:82px;left:62.17%;top:39.00%;display: inline-block;" @mousedown="A_mousedow($event)" @mouseup="A_moouseup($event)">position: 'absolute',top: 36+'%',left: 48+'%' -->
                  <!-- {{ item }} @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
                  <el-input v-text="item.text" size="mini" :style="{width:item.width+'px', border: 1+'px solid transparent', cursor: 'default'}"></el-input>
                  <!-- <input id="inpu" type="text" :value="item" data-width="82" style="width: 82px; border: 1px solid transparent; cursor: default;" class="mark-text-ipt"> -->
                <!-- </div> -->
                <span class="remove-mark-text" @click="input_deldte($event,item)">×</span>
                 <span class="mark-text-line" style="transform: rotate(45deg);" data-rotate="45"></span>
              </div>
            <!-- </div> -->

            <!-- 穿刺方向 -->
            <div v-for="item in fangxiangA">
            <div v-if="fangxiangA_num==2" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"
              title="长按右键调整线条角度" id="jinzhen_fangxiang_A" class="mark-target mark-target-a mark-target-adccz"
              :style="{left: item.left+'px', top: item.top+'px', width: 14+'px', height: 14+'px', background: 'rgb(231, 53, 53)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
              <span class="mark-line mark-line-ccza" data-rotate="160" style="width:50px;transform:rotate(160deg);">
              <b class="xtgl-ccz-arrow xtgl-ccz-arrow-a"
                style="position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);">
              </b></span></div></div>

            <div v-for="item in fangxiangV">
            <div v-if="fangxiangV_num==2" @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"
            title="长按右键调整线条角度" id="jinzhen_fangxiang_V" class="mark-target mark-target-v mark-target-vdccz"
            :style="{left: item.left+'px', top: item.top+'px', width: 14+'px', height: 14+'px', background: 'rgb(53, 162, 231)', 'border-radius': 50+'%', position: 'absolute', cursor: 'move',}">
            <span class="mark-line mark-line-cczv" data-rotate="20" style="width:50px;transform:rotate(20deg);">
              <b class="xtgl-ccz-arrow xtgl-ccz-arrow-v"
              style="position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);">
              </b></span></div></div>
            <!-- 辅助工具 :style="{transform: rotate(30deg)}"  xuanzhuan_a ,  @mousedown.self="A_mousedow($event)" @mouseup.self="A_moouseup($event)"-->
            <div v-for="item in fuzhuA">
            <div v-if="fuzhuA_num==2"
             class="jinzhen-jiaodu-target jinzhen-jiaodu-target-A" id="jinzhen-jiaodu-target-A" @mousedown="fuzhuA_down"
             :style="{position: 'absolute',top:item.a_top+'px',left:item.a_left+'px'}" >
              <div class="frame-box  actives" :style="{'transform': `scale(${scalea_num})`}" >
                <div class="frame-image" data-rotate="0" :style="{transform: `rotate(${item.A_rotate}deg)`,margin:'auto'}">
                  <img src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 0px;">
                </div>
                <div class="drag-elem bottom right" @click="imga_click"></div>
                <div class="frame-image-toolbar-btn frame-image-toolbar-btn-reset" data-tooltip="" title="调整方向" @click="fuzhuaclick"></div>
              </div>
            </div></div>
            <div v-for="item in fuzhuV"><!--scalev_num item.scalev-->
            <div v-if="fuzhuV_num==2" :style="{position: 'absolute',top:item.v_top+'px',left:item.v_left+'px'}" @mousedown="fuzhuV_down"
             class="jinzhen-jiaodu-target jinzhen-jiaodu-target-V" id="jinzhen-jiaodu-target-V">
              <div class="frame-box actives" :style="{'transform': `scale(${item.v_scalev})`}" >
                <div id="v_img" class="frame-image" data-rotate="0" :style="{'transform': `rotate(${item.V_rotate}deg)`,margin:'auto'}">
                  <img id="image" src="../../assets/evaluate/tool-a.png" alt="" srcset="" style="margin: 6px 0 0 0px;">
                </div>
                <div class="drag-elem bottom right" @click="imgv_click"></div>
                <div class="frame-image-toolbar-btn frame-image-toolbar-btn-reset" data-tooltip="" title="调整方向" @click="fuzhuvclick"></div>
              </div>
            </div></div>
          </div>
        </div>
        <div style="width:25px;"></div>
        <div style="width:49%;">
          <div>
            <p class="point-mark-title">A端：</p>
            <div :class="append == false ? 'point-mark-items' : 'mark-a-items'"> <!-- v-for="(item,index) in 12" :key="index" -->
              <div :class="item.a_num==2?'point-mark-a-item not-able not-allow': 'point-mark-a-item not-able' "
                data-tag="-a" data-mark="A" title="点击移除标记" v-for="(item,a) in A_right" :key="a" @click="a_item($event,item.markNum)">{{item.markNum}}</div>
            </div>
            <p class="point-mark-title">V端：</p>
            <div :class="append == false ? 'point-mark-items' : 'mark-v-items'" style="border-bottom: 1px solid #ddd;">
              <div :class="item.v_num==2? 'point-mark-v-item not-able not-allow':'point-mark-a-item not-able'"
                data-tag="-v" data-mark="V" title="点击移除标记" v-for="(item,v) in V_right" :key="v" @click="v_item($event,item.markNum)">{{item.markNum}}</div>
            </div>
            <div><span class="active-addtext-btn">添加文本框：</span></div>
            <div id="default-marktext-wrap" style="display:flex;flex-wrap:wrap;">
              <span :class="append == true ?'default-mark-text chuanci' : 'disabled'" data-index="0"
                  v-for="(item,index) in puncture_text" :key="index" @click="punctureclick($event,item)">{{ item.text }}</span>

            </div>
            <div><span class="active-addtext-btn">进针方位：</span></div>
            <div>
              <span class="edit-ccz-btn disabled" @click="fangxiang_A"
                style="display: inline-block;background:transparent !important;border: none !important;color: #333 !important;" data-tag="A" data-ccz="adccz">
                <div><img src="@/assets/evaluate/red_A.png"></div>
                A端
              </span>
              <span class="edit-ccz-btn disabled" @click="fangxiang_V"
                style="display: inline-block;background:transparent !important;border: none !important;color: #333 !important;" data-tag="V" data-ccz="vdccz">
                <div><img src="@/assets/evaluate/blue_V.png"></div>
                V端
              </span>
            </div>
            <div><span class="active-addtext-btn">辅助工具：</span></div>
            <div style="padding-top:10px;margin-bottom:20px;">
              <span class="edit-ccz-btn disabled" @click="fuzhu_A"
                style="display: inline-block;background:transparent !important;border: none !important;color: #333 !important;" data-tag="A" data-ccz="adccz">
                <div><img src="@/assets/evaluate/tool-a.png"></div>
                <!-- <div :style="{'background-img': 'url('+ require('../../assets/evaluate/tool-a.png') + ')'}"></div> -->
                A端
              </span>
              <span class="edit-ccz-btn disabled" @click="fuzhu_V"
                style="display: inline-block;background:transparent !important;border: none !important;color: #333 !important;" data-tag="A" data-ccz="adccz">
                <div><img src="@/assets/evaluate/tool-v.png"></div>
                V端
              </span>
            </div>
            <p>说明：中心点对准穿刺点，直线与血管平行，时钟刻度为进针方位，用A端/V端进针方位的箭头指示。 <el-button type="text" @click="chakan">查看示意图</el-button></p>
          </div>
          <div id="ctrl-xgtlpic-mask" class="readonly" data-text="图片操作的遮罩层" v-show="append == false"></div>
        </div>
      </div>
    </div>

    <div style="width:50%; margin-top:20px">
      <div class='content_top' style="width: 100%;margin-bottom: 20px;border-bottom:1px solid #DCDFE6;padding-bottom:10px">
        <div style="font-size: 20px;">位点记录列表</div>
        <div>
          <el-button type="primary">历史记录</el-button>
        </div>
      </div>
      <div>
        <table class="table" border="1" style="border-collapse:collapse;width:100%">
          <thead>
            <tr>
              <td style="width:20%">日期</td>
              <td style="width:20%">位点</td>
              <td>内瘘</td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <!-- 保存按钮的隐藏 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="15%"
      center>
      <span>确认取消？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_sun">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 上传图片 -->
    <el-dialog
      title="提示"
      :visible.sync="imgDialogVisible"
      width="15%"
      center>
      <span>更换图片后原有标记将被清除！</span>
      <span slot="footer" class="dialog-footer" style="display: flex;">
       <span style="display: block;margin: 0 30px;"><el-button @click="imgDialogVisible = false">取 消</el-button></span>
       <el-upload
       :data="uploadData"
          :multiple="true"
          action="https://upload.qiniup.com"
          :show-file-list="false"
          :on-error="handleAvatarError"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button type="primary">确认</el-button>
        </el-upload>
      </span>
    </el-dialog>

    <!-- 查看示意图 -->
    <el-dialog
      title="进针方位标注示意图"
      :visible.sync="shiyituDialogVisible"
      width="33%"
      >
      <div style="width: 600px;height: 100%;">
        <img src="@/assets/evaluate/xgtl-tool-tips.jpg" alt="" srcset="">
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import print from "print-js";
import { getFileExtension} from '@/utils/tools'
import { saveSitemap,getPatientSitemap,updateSiteMap } from "@/api/patient";
import { getToken } from '@/api/qiniu'
export default{
  components:{
    // quillEditor
  },
  data(){
    return{
      append:false,//控制是否编辑
      centerDialogVisible: false,
      imgDialogVisible:false,
      shiyituDialogVisible:false,
      imgUrl:[],
      
      fangxiangA:[{markNum:'',left:'',top:''}],//a端进针方向的数组
      fangxiangA_num:1,//控制a端进针方向是否显示
      fangxiangA_left:400,//A端进针方向X
      fangxiangA_top:78,//A端进针方向Y

      fangxiangV:[{markNum:'',left:'',top:''}],//v端进针方向的数组
      fangxiangV_num:1,//控制v端进针方向是否显示
      fangxiangV_left:100,//v端进针方向X
      fangxiangV_top:78,//v端进针方向Y

      
      fuzhuA:[{a_markNum:0,a_left:0,a_top:0}],//助辅工具a的数组
      fuzhuA_num:1,//控制a端辅助工具是否显示
      xuanzhuan_a:0,//点击旋转角度a
      fuzhuA_top:56,//控制a端辅助工具Y
      fuzhuA_left:360,//控制a端辅助工具X
      img_a:false,//控制a端辅助工具点击放大缩小
      scalea_num:1,//控制a端辅助工具点击放大缩小倍数

      fuzhuV:[{v_markNum:0,v_left:0,v_top:0}],//助辅工具v的数组
      fuzhuV_num:1,//控制v端辅助工具是否显示
      xuanzhuan_v:0,//点击旋转角度v
      fuzhuV_top:56,//控制V端辅助工具Y
      fuzhuV_left:56,//控制V端辅助工具X
      img_v:false,//控制v端辅助工具点击放大缩小
      scalev_num:1,//控制v端辅助工具点击放大缩小倍数

      obj_a:{a_markNum:'',a_left:'',a_top:''},//助辅工具a的对象
      obj_v:{v_markNum:'',v_left:'',v_top:''},//助辅工具v的对象

      // A_left:390,//A端X
      // A_top:180,//A端Y
      a_num:1,//控制a端是否显示和高亮

      // V_left:184,//V端X
      // V_top:180,//V端Y
      v_num:1,//控制v端是否显示和高亮

      text_arr:[],//文本框
      text_left:180,//文本框x
      text_top:200,//文本框x
      text_num:1,//关闭文本框

      av_bkx:0,
      av_bky:0,
      
      fileList:[],
      uploadData: { token: '', key: '' },
      qiniuDomain: 'https://images.shengws.com/',
      puncture_text:[{text:'穿刺角度',width:70},{text:'卡夫距导管出口距离cm',width:158},{text:'动脉端向心穿刺',width:116},{text:'动脉端离心穿刺',width:116},
                      {text:'静脉端向心穿刺',width:116},{text:'手背朝上',width:70},{text:'手掌朝上',width:70},{text:'虎口朝上',width:70},{text:'A端',width:70},{text:'V端',width:70},{text:'自定义',width:70}],
      //A端图片上的点
      Aarr:[{markNum:'1',left:'390',top:'180',status:'1'},{markNum:'2',left:'390',top:'210',status:'1'},{markNum:'3',left:'390',top:'240',status:'1'},
      {markNum:'4',left:'390',top:'270',status:'1'},{markNum:'5',left:'390',top:'300',status:'1'},{markNum:'6',left:'390',top:'330',status:'1'},
      {markNum:'7',left:'390',top:'360',status:'1'},{markNum:'8',left:'390',top:'390',status:'1'},{markNum:'9',left:'390',top:'420',status:'1'},
      {markNum:'10',left:'390',top:'450',status:'1'},{markNum:'11',left:'390',top:'480',status:'1'},{markNum:'12',left:'390',top:'510',status:'1'}],
      //V端图片上的点
      Varr:[{markNum:'1',left:'184',top:'180',status:'1'},{markNum:'2',left:'184',top:'210',status:'1'},{markNum:'3',left:'184',top:'240',status:'1'},
      {markNum:'4',left:'184',top:'270',status:'1'},{markNum:'5',left:'184',top:'300',status:'1'},{markNum:'6',left:'184',top:'330',status:'1'},
      {markNum:'7',left:'184',top:'360',status:'1'},{markNum:'8',left:'184',top:'390',status:'1'},{markNum:'9',left:'184',top:'420',status:'1'},
      {markNum:'10',left:'184',top:'450',status:'1'},{markNum:'11',left:'184',top:'480',status:'1'},{markNum:'12',left:'184',top:'510',status:'1'}],
      //A端右侧的点
      A_right:[{markNum:'1',a_num:'1'},{markNum:'2',a_num:'1'},{markNum:'3',a_num:'1'},{markNum:'4',a_num:'1'},{markNum:'5',a_num:'1'},
      {markNum:'6',a_num:'1'},{markNum:'7',a_num:'1'},{markNum:'8',a_num:'1'},{markNum:'9',a_num:'1'},
      {markNum:'10',a_num:'1'},{markNum:'11',a_num:'1'},{markNum:'12',a_num:'1'}],
      //V端右侧的点
      V_right:[{markNum:'1',v_num:'1'},{markNum:'2',v_num:'1'},{markNum:'3',v_num:'1'},{markNum:'4',v_num:'1'},{markNum:'5',v_num:'1'},
      {markNum:'6',v_num:'1'},{markNum:'7',v_num:'1'},{markNum:'8',v_num:'1'},{markNum:'9',v_num:'1'},
      {markNum:'10',v_num:'1'},{markNum:'11',v_num:'1'},{markNum:'12',v_num:'1'}],

      patientID:0,
      id:0,
      texts:null,
    }
  },
  created(){
    const id = this.$route.params && this.$route.params.id;
    this.patientID = parseInt(id);

    // this.getPatientSitemap(this.patientID)
  },
  mounted(){
    console.log('asdfdfgfd',this.fuzhuA);
  },
  methods:{
    add(){
      if(this.append == false){
        console.log('1111');
        return this.append = true
      }else{
        console.log('2222');
        return this.append = false
      }
    },
    Cancel(){
      this.centerDialogVisible = true
    },
    dialog_sun(){
      this.append = false
      this.centerDialogVisible = false
    },
    open(){
      this.imgDialogVisible = true
    },
    // a_item(e,val){
    //   const A_div =document.getElementsByClassName('point-mark-a-item')
    //   console.log('aaaa',val,this.A_left);
    //   for (let i=1;i<=A_div.length;i++){
    //     if(val== i){
    //       if(e.target.className.indexOf('not-allow')==-1){
    //         A_div[i-1].classList.add('not-allow')
    //          this.classname='not-allow'
    //         console.log('eqwrqqweadsf',this.classname);
    //         this.a_num=2
    //         var obj ={markNum:'',left:'',top:''}
    //         obj.markNum = val
    //         obj.left= this.A_left
    //         obj.top=(this.A_top + (i-1)*30)
    //         this.A_arr.push(obj)
    //         console.log('asdf',this.A_arr);
    //       }else{
    //         A_div[i-1].classList.remove('not-allow')
    //         for(let y=0;y<this.A_arr.length;y++){
    //           if(val==this.A_arr[y].markNum){
    //             this.A_arr.splice(y,1)
    //           }
    //         }
    //       }

    //     }
    //   }
    //   // console.log('333',this.A_arr)
    // },

    a_item(e,val){
      console.log('asdfasdf222',this.Aarr);
     for(let i=0;i<this.Aarr.length;i++){
      console.log('asdfasdf222');
      // if(this.A_left[i].a_num=1){
      if(this.Aarr[i].markNum==val){
        if(this.A_right[i].a_num==1){
          this.Aarr[i].status=2
          console.log('24444',this.A_right[i].a_num);
          return this.A_right[i].a_num=2
        }
        else{
          console.log('2312',this.A_right[i].a_num);
          this.Aarr[i].status=1
          return this.A_right[i].a_num=1
        }
      }
     }
    },
    v_item(e,val){
     for(let i=0;i<this.Varr.length;i++){
      // if(this.A_left[i].a_num=1){
        if(this.Varr[i].markNum==val){
          if(this.V_right[i].v_num==1){
            this.Varr[i].status=2
            console.log('24444',this.V_right[i].v_num);
            return this.V_right[i].v_num=2
          }
          else{
            console.log('2312',this.V_right[i].v_num);
            this.Varr[i].status=1
           return this.V_right[i].v_num=1
          }
        }
      // }
      // else{
      //   this.Aarr[i].status=1
      //   this.A_left[i].a_num=1
      // }
     }
    },
    // v_item(e,val){
    //   const V_div =document.getElementsByClassName('point-mark-v-item')
    //   console.log('1111',val,e.target.className);
    //   for (let i=1;i<=V_div.length;i++){
    //     if(val== i){
    //       if(e.target.className.indexOf('not-allow')==-1){
    //         V_div[i-1].classList.add('not-allow')
    //         this.v_num=2
    //         var obj ={markNum:'',left:'',top:''}
    //         obj.markNum = val
    //         obj.left= this.V_left
    //         obj.top=(this.V_top + (i-1)*30)
    //         this.V_arr.push(obj)
    //         console.log('GFSDGDSD',this.V_arr);
    //       }else{
    //         V_div[i-1].classList.remove('not-allow')
    //         // this.V_ite=val
    //         for(let y=0;y<this.V_arr.length;y++){
    //           if(val==this.V_arr[y].markNum){
    //             this.V_arr.splice(y,1)
    //           }
    //         }
    //       }

    //     }
    //   }
    // },
    A_mousedow(e){
      console.log('7777',e);
      // console.log('8888',val);
      var _target = e.target
      var startx =e.clientX
      var starty =e.clientY
      var av_bkx = startx -e.target.offsetLeft
      var av_bky = starty -e.target.offsetTop
      var ww = document.documentElement.clientWidth
      var wh = window.innerHeight
      var Alen=this.A_arr
      // var Vlen=this.V_arr
      // var textlen=this.text_arr
      var fx_alen=this.fangxiangA
      var fx_vlen=this.fangxiangV
      // var FZ_alen=this.fuzhuA
      // var FZ_vlen=this.fuzhuV
      var aleng=this.Aarr
      var vleng=this.Varr
      if(e.preventDefault){
        e.preventDefault()
      }else{
        e.returnValue=false
      };
      document.onmousemove =function (ev) {
        var event=ev||window.event;
        var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
        if(event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww){
          return false;
        }
         const endx=event.clientX-av_bkx;
         const endy=event.clientY-av_bky;
        _target.style.left = endx+'px'
        _target.style.top = endy+'px'

        console.log('x',endx,'y',endy);
        // console.log('121',Alen.length);
        // console.log('3333',len,e.target.innerText,_target.innerText);
        // for(let i=0;i<Alen.length;i++){
        //   if(Alen[i].markNum ==e.target.innerText){
        //     console.log('3333');
        //     Alen[i].left=endx
        //     Alen[i].top=endy
        //   }
        // }
        // for(let i=0;i<Vlen.length;i++){
        //   if(Vlen[i].markNum ==e.target.innerText){
        //     console.log('3333');
        //     Vlen[i].left=endx
        //     Vlen[i].top=endy
        //   }
        // }
        // for(let i=0;i<textlen.length;i++){
        //   const textsle=e.target.innerText.split('\n')[0]
        //   if(textlen[i].text == textsle){
        //     console.log('3333');
        //     textlen[i].left=endx
        //     textlen[i].top=endy
        //   }
        // }
        for(let i=0;i<fx_alen.length;i++){
          if(e.target.id=='jinzhen_fangxiang_A'){
            fx_alen[0].left=endx
            fx_alen[0].top=endy
          }
        }
        for(let i=0;i<fx_vlen.length;i++){
          if(e.target.id=='jinzhen_fangxiang_V'){
            fx_vlen[0].left=endx
            fx_vlen[0].top=endy
          }
        }
        // for(let i=0;i<FZ_alen.length;i++){
        //   if(e.target.id=='jinzhen-jiaodu-target-A'){
        //     FZ_alen[i].a_left=endx
        //     FZ_alen[i].a_top=endy
        //   }
        // }
        // for(let i=0;i<FZ_vlen.length;i++){
        //   if(e.target.id=='jinzhen-jiaodu-target-V'){
        //     FZ_vlen[i].v_left=endx
        //     FZ_vlen[i].v_top=endy
        //   }
        // }
        for(let i=0;i<aleng.length;i++){
          if(aleng[i].markNum ==e.target.innerText && e.target.id=='mark-target-a'){
            console.log('3333');
            aleng[i].left=endx
            aleng[i].top=endy
          }
        }
        for(let i=0;i<vleng.length;i++){
          if(vleng[i].markNum ==e.target.innerText && e.target.id=='mark-target-v'){
            console.log('3333');
            vleng[i].left=endx
            vleng[i].top=endy
          }
        }
      }
      console.log('x',Alen,'12341234',this.A_top);
    },
    A_moouseup(e){
      // console.log('9999',e);
      // console.log('0000',val);
      document.onmousemove =null
    },
    mousedown(e){
      // this.texts = document.getElementsByClassName('text')[0]
      const tet=document.getElementsByClassName('text')
      const evetext=e.target.innerText.split('\n')[0]
      var textlen=this.text_arr
      console.log('ZXCBVCB',textlen);
      for(let i=0;i<tet.length;i++){
        const textsle = tet[i].innerText.split('\n')[0]
        if(evetext == textsle){
          const disX = e.clientX - tet[i].offsetLeft;
          const disY = e.clientY - tet[i].offsetTop;
          const isdow=true
          document.onmousemove = (el) =>{
          if(isdow==false){
            return
          }
            let moveX = el.clientX - disX;
            let moveY = el.clientY - disY;
            tet[i].style.left = moveX + "px";
            tet[i].style.top = moveY + "px";
            for(let i=0;i<textlen.length;i++){
              // const textsle=e.target.innerText.split('\n')[0]
              if(textlen[i].text == textsle){
                console.log('3333');
                textlen[i].left=moveX
                textlen[i].top=moveY
              }
            }
            console.log('2222222',tet[i].style.left);
          }
          document.onmouseup = () => {
            document.onmousemove = null;
          };
        }
      }
    },
    fuzhuA_down(e){
      const fuzhuA= document.getElementById('jinzhen-jiaodu-target-A')
      const fuzhua_x =e.clientX - fuzhuA.offsetLeft
      const fuzhua_y =e.clientY - fuzhuA.offsetTop
      const fuzhua =true
      var FZ_alen=this.fuzhuA

      document.onmousemove=(el)=>{
        if(fuzhua==false){
          return ''
        }
        const moveX = el.clientX - fuzhua_x;
        const moveY = el.clientY - fuzhua_y;
        fuzhuA.style.left = moveX + "px";
        fuzhuA.style.top = moveY + "px";
        for(let i=0;i<FZ_alen.length;i++){
          if(e.target.id=='jinzhen-jiaodu-target-A'){
            FZ_alen[i].a_left=moveX
            FZ_alen[i].a_top=moveY
          }
        }
      }
      document.onmouseup =() =>{
        document.onmousemove =null
      }
    },
    fuzhuV_down(e){
      const fuzhuV= document.getElementById('jinzhen-jiaodu-target-V')
      const fuzhuv_x =e.clientX - fuzhuV.offsetLeft
      const fuzhuv_y =e.clientY - fuzhuV.offsetTop
      const fuzhuv =true
      var FZ_vlen=this.fuzhuV
      document.onmousemove=(el)=>{
        if(fuzhuv==false){
          return ''
        }
        const moveX = el.clientX - fuzhuv_x;
        const moveY = el.clientY - fuzhuv_y;
        fuzhuV.style.left = moveX + "px";
        fuzhuV.style.top = moveY + "px";
        for(let i=0;i<FZ_vlen.length;i++){
          if(e.target.id=='jinzhen-jiaodu-target-V'){
            FZ_vlen[i].v_left=moveX
            FZ_vlen[i].v_top=moveY
          }
        }
      }
      document.onmouseup =() =>{
        document.onmousemove =null
      }
    },
    punctureclick(e,val){
      console.log('event',e,'value',val);
      const text=e.target
      const textlen=this.text_arr.length

      if(text.innerText == val.text){
        this.text_num=2
       const obj={text:'',left:'',top:'',width:''}
       console.log('23345',textlen);
       obj.text=val.text
       obj.left=this.text_left
       obj.top=this.text_top+(textlen*30)
       obj.width=e.target.offsetWidth
        this.text_arr.push(obj)
      }

      console.log('this.text_arr',this.text_arr);
    },
    input_deldte(e,val){
      console.log('2341234',e,val);
      this.text_num=1
      for(let y=0;y<this.text_arr.length;y++){
        if(val.text==this.text_arr[y].text){
          this.text_arr.splice(y,1)
        }
      }
    },
    fangxiang_A(e){
      if(this.fangxiangA_num == 1){
        console.log('1111',e);
        var obj ={markNum:'',left:'',top:''}
        obj.markNum = 'A'
        obj.left= this.fangxiangA_left
        obj.top=this.fangxiangA_top
        this.fangxiangA.push(obj)

        console.log('asdfdfgfd',this.fangxiangA);
        return this.fangxiangA_num = 2
      }else{
        this.fangxiangA.shift()
        console.log('2222');
        return this.fangxiangA_num = 1
      }
    },
    fangxiang_V(e){
      if(this.fangxiangV_num == 1){
        console.log('1111',e);
        var obj ={markNum:'',left:'',top:''}
        obj.markNum = 'V'
        obj.left= this.fangxiangV_left
        obj.top=this.fangxiangV_top
        this.fangxiangV.push(obj)
        console.log('asdfdfgfd',this.fangxiangV);
        return this.fangxiangV_num = 2
      }else{
        this.fangxiangV.shift()
        console.log('2222');
        return this.fangxiangV_num = 1
      }
    },
    fuzhu_A(e){
      if(this.fuzhuA_num == 1){
        console.log('辅助工具a111');
        this.obj_a.a_markNum = 'A'
        this.obj_a.a_left= this.fuzhuA_left
        this.obj_a.a_top=this.fuzhuA_top
        this.fuzhuA.push(this.obj_a)
        this.fuzhuA.shift()
        console.log('asdfdfgfd',this.fuzhuA);
        return this.fuzhuA_num = 2
      }else{
        this.fuzhuA.shift()
        console.log('辅助工具a2222');
        return this.fuzhuA_num = 1
      }
    },
    fuzhu_V(e){
      if(this.fuzhuV_num == 1){
        // var obj ={markNum:'',left:'',top:''}
        this.obj_v.v_markNum = 'V'
        this.obj_v.v_left= this.fuzhuV_left
        this.obj_v.v_top=this.fuzhuV_top
        this.fuzhuV.push(this.obj_v)
        this.fuzhuV.shift()
        console.log('辅助工具v1111',this.fuzhuV);
        return this.fuzhuV_num = 2
      }else{
        this.fuzhuV.shift()
        console.log('辅助工具v2222');
        return this.fuzhuV_num = 1
      }
    },
    fuzhuvclick(){
      console.log('this.xuanzhuan111',this.xuanzhuan_v);
      if(this.append ==true && this.fuzhuV_num ==2){
        this.xuanzhuan_v=this.xuanzhuan_v+4
        this.obj_v.V_rotate=this.xuanzhuan_v
        this.fuzhuV.push(this.obj_v)
        this.fuzhuV.shift()
      }
    },
    fuzhuaclick(){
      if(this.append ==true && this.fuzhuA_num ==2){
      this.xuanzhuan_a=this.xuanzhuan_a+4
       this.obj_a.A_rotate=this.xuanzhuan_a
       this.fuzhuA.push(this.obj_a)
       this.fuzhuA.shift()
        console.log('sdfas',this.fuzhuA)
        console.log('this.xuanzhuan333',this.xuanzhuan_a);
      }
      if(this.fuzhuA_num ==1 || this.append ==false){
       return this.xuanzhuan_a =0
      }
    },
    printtup(){
      const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;} .mark-target-a{background: #E73535;top: 40px; left: 40px;} .mark-line{background: #E73535;} .mark-target-v{background: rgb(53,162,231);.mark-line{background: #35A2E7;}}  .mark-target-a,.mark-target-v {position: absolute;z-index: 1001;width: 26px;border-radius: 13px;height: 26px;text-align: center;line-height: 26px;font-size: 18px;cursor: move;color: rgb(255,255,255);.mark-line {transform: rotate(160deg);transform-origin: left bottom;}.mark-line {display: inline-block;position: absolute;left: 50%;top: 50%;width: 86px;height: 1px;cursor: default;z-index: -1;} div.add-mark-text-wrap {position: absolute;top: 36%;left: 48%;border-radius: 4px;width: 60px;height: 24px;line-height: 24px;z-index: 1005;display: inline-block;} .remove-mark-text{overflow: hidden;} b.xtgl-ccz-arrow-a {border-left-color: #E73535;border-top-color: #E73535;} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;} b.xtgl-ccz-arrow {position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;}div.frame-image {position: absolute;overflow: hidden;top: 0px;left: 0px;width: 100%;height: 100%;background-image: url('+'../../assets/evaluate/tool-a.png'+');background-position: center center;background-size: 100%; background-repeat: no-repeat;}}}'
      // const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;}  b.xtgl-ccz-arrow-a {border-left-color: #E73535;border-top-color: #E73535;}
      // b.xtgl-ccz-arrow {position: absolute;width: 7px;height: 7px;border-left-width: 2px;border-left-style: solid;border-top-width: 2px;border-top-style: solid;top: -3px;right: 0;transform: rotate(138deg);} b.xtgl-ccz-arrow-v {border-left-color: #35a2e7;border-top-color: #35a2e7;}
      // .mark-target-a{background: #E73535;top: 40px;left: 40px;} .mark-line{background: #E73535;}}}'
      // const style='@media print{.print_main_content{#ossPointMarkImg {width: 100%;min-height: 600px;height: auto;border-radius: 2px;pointer-events: none;} #point_mark_img_wrap1 {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;position: relative;padding: 4px;width: 600px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;} .mark-target-a{background: #E73535;top: 40px; left: 40px;} .mark-line{background: #E73535;} .mark-target-v{background: rgb(53,162,231);.mark-line{background: #35A2E7;}}  .mark-target-a,.mark-target-v {position: absolute;z-index: 1001;width: 26px;border-radius: 13px;height: 26px;text-align: center;line-height: 26px;font-size: 18px;cursor: move;color: rgb(255,255,255);.mark-line {transform: rotate(160deg);transform-origin: left bottom;}.mark-line {display: inline-block;position: absolute;left: 50%;top: 50%;width: 86px;height: 1px;cursor: default;z-index: -1;} div.add-mark-text-wrap {position: absolute;top: 36%;left: 48%;border-radius: 4px;width: 60px;height: 24px;line-height: 24px;z-index: 1005;display: inline-block;} input {width: 100px;width: 60px;max-width: 400px;border: 1px solid transparent;padding: 4px;color: #333;height: 24px;cursor: pointer;background-color: #fcfcfc;position: absolute;left: 0;top: 0;font-size: 13px;z-index: 1002;border-radius: 2px !important;outline: none;}.mark-text-ipt {cursor: default;}}}}'

      printJS({
        printable: "print_mark_img",
        type: "html",
        style: style,
        scanStyles: false
      });
    },
    imgv_click(){
      if(this.img_v==false){
        console.log('asdfas2222');
        this.scalev_num =1.5
        this.obj_v.v_scalev =this.scalev_num
        console.log('sadfszxcv',this.obj_v);
        this.fuzhuV.push(this.obj_v)
        console.log('辅助工具v1111',this.fuzhuV);
        this.fuzhuV.shift()
        return this.img_v =true
      }else{
        console.log('asdfas3333');
        this.scalev_num =1
        this.obj_v.v_scalev =this.scalev_num
        this.fuzhuV.push(this.obj_v)
        this.fuzhuV.shift()
        return this.img_v =false
      }

    },
    imga_click(){
      if(this.img_a==false){
        this.scalea_num =1.5
        this.obj_a.a_scalev =this.scalea_num
        console.log('sadfszxcv',this.obj_a);
        this.fuzhuA.push(this.obj_a)
        console.log('辅助工具v1111',this.fuzhuA);
        this.fuzhuA.shift()
        console.log('this.img_');
       return this.img_a =true
      }if(this.img_a ==true){
        this.scalea_num =1
        this.obj_a.a_scalev =this.scalea_num
        console.log('sadfszxcv',this.obj_a);
        this.fuzhuA.push(this.obj_a)
        console.log('辅助工具v1111',this.fuzhuA);
        this.fuzhuA.shift()
        return this.img_a =false
      }
    },
    beforeAvatarUpload(file) {

      var fileType = file.type
      const isJPG = fileType.indexOf('image') > -1
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('只能上传图片')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }

      var date = new Date()
      var ext = getFileExtension(file.name)
      var key =
        date.getFullYear() +
        '/' +
        (date.getMonth() + 1) +
        '/' +
        date.getDate() +
        '/' +
        date.getHours() +
        '/' +
        date.getMinutes() +
        '/' +
        date.getSeconds() +
        '/' +
        '_s_' +
        file.uid +
        '.' +
        ext
      this.loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      const _self = this
      return new Promise((resolve, reject) => {
        getToken()
          .then(response => {
            const token = response.data.data.uptoken
            _self._data.uploadData.token = token
            _self._data.uploadData.key = key
            resolve(true)
            console.log('2222',response);
          })
          .catch(err => {
            console.log(err)
            reject(false)
            this.loading.close()
          })
      })
    },
    handleAvatarError(err, file, fileList) {
      console.log('111',err);
      this.$message.error(err)
      this.loading.close()
      return false
    },
    handleAvatarSuccess(res, file) {
      console.log("RESPOWOWOWOWO",res)
      console.log("wowowowow",file)
      this.fileList.push({
        img_url: this.qiniuDomain + res.url + '?imageView2/2/w/500/h/500/q/90',
        desc: '',
        id: 0
      })
      console.log('上传 图片',this.fileList);
      this.loading.close()
      this.imgDialogVisible=false
    },
    saveimg(){
      // this.A_left=this.endx
      // this.A_top=this.endy

       var is_append = 2

       if(this.append == true){
           is_append = 1
       }
       if(this.append == false){
          is_append = 2
       }

       var is_img_v = 2


       if(this.img_v ==true){
          is_img_v = 1

       }
       if(this.img_v == false){
          is_img_v = 2
       }

       var is_img_a = 2
       if(this.img_a == true){
          is_img_a = 1
       }
       if(this.img_a == false){
          is_img_a = 2
       }

       console.log("Ar_aawowowo",this.Aarr)
       console.log("Varr",this.Varr)
       console.log("A_left",this.A_right)
       console.log("V_left",this.V_left)
       console.log("text_arr",this.text_arr)

       if(this.A_right!=null && this.A_right.length >0){

          for(let i=0;i<this.A_right.length;i++){
             this.A_right[i].a_num =  parseInt(this.A_right[i].a_num)? parseInt(this.A_right[i].a_num):0
             this.A_right[i].markNum  = parseInt(this.A_right[i].markNum)?parseInt(this.A_right[i].markNum):0
          }
       }

       if(this.fangxiangA!=null && this.fangxiangA.length>0){

         for(let i=0;i<this.fangxiangA.length;i++){
            this.fangxiangA[i].left = parseInt(this.fangxiangA[i].left)?parseInt(this.fangxiangA[i].left):0
            this.fangxiangA[i].markNum = parseInt(this.fangxiangA[i].markNum)?parseInt(this.fangxiangA[i].markNum):0
            this.fangxiangA[i].top = parseInt(this.fangxiangA[i].top)?parseInt(this.fangxiangA[i].top):0
         }
       }

       if(this.fangxiangV!=null && this.fangxiangV.length>0){

         for(let i=0;i<this.fangxiangV.length;i++){
            this.fangxiangV[i].left = parseInt(this.fangxiangV[i].left)?parseInt(this.fangxiangV[i].left):0
            this.fangxiangV[i].markNum = parseInt(this.fangxiangV[i].markNum)?parseInt(this.fangxiangV[i].markNum):0
            this.fangxiangV[i].top = parseInt(this.fangxiangV[i].top)?parseInt(this.fangxiangV[i].top):0
         }
       }


       if(this.fuzhuV!=null && this.fuzhuV.length>0){

         for(let i=0;i<this.fuzhuV.length;i++){
            this.fuzhuV[i].v_markNum = parseInt(this.fuzhuV[i].v_markNum)?parseInt(this.fuzhuV[i].v_markNum):0
            this.fuzhuV[i].v_left = parseInt(this.fuzhuV[i].v_left)?parseInt(this.fuzhuV[i].v_left):0
            this.fuzhuV[i].v_top = parseInt(this.fuzhuV[i].v_top)?parseInt(this.fuzhuV[i].v_top):0
         }
       }

       if(this.fuzhuA!=null && this.fuzhuA.length>0){

         for(let i=0;i<this.fuzhuA.length;i++){
            this.fuzhuA[i].a_markNum = parseInt(this.fuzhuA[i].a_markNum)?parseInt(this.fuzhuA[i].a_markNum):0
            this.fuzhuA[i].a_left = parseInt(this.fuzhuA[i].a_left)?parseInt(this.fuzhuA[i].a_left):0
            this.fuzhuA[i].a_top = parseInt(this.fuzhuA[i].a_top)?parseInt(this.fuzhuA[i].a_top):0
         }
       }

       if(this.text_arr!=null && this.text_arr.length>0){

         for(let i=0;i<this.text_arr.length;i++){
            this.text_arr[i].left = parseInt(this.text_arr[i].left)?parseInt(this.text_arr[i].left):0
            this.text_arr[i].top = parseInt(this.text_arr[i].top)?parseInt(this.text_arr[i].top):0
            this.text_arr[i].width = parseInt(this.text_arr[i].width)?parseInt(this.text_arr[i].width):0
         }
       }

       if(this.V_right!=null && this.V_right.length>0){

         for(let i=0;i<this.V_right.length;i++){
            this.V_right[i].mark_num = parseInt(this.V_right[i].markNum)?parseInt(this.V_right[i].markNum):0
            this.V_right[i].v_num = parseInt(this.V_right[i].v_num)?parseInt(this.V_right[i].v_num):0
         }
       }


      if(this.Aarr!=null && this.Aarr.length>0){
        console.log('asdfa',this.Aarr);
        for(let i=0;i<this.Aarr.length;i++){
            this.Aarr[i].mark_num = parseInt(this.Aarr[i].markNum)?parseInt(this.Aarr[i].markNum):0
            this.Aarr[i].is_status = parseInt(this.Aarr[i].status)?parseInt(this.Aarr[i].status):0
            this.Aarr[i].left = parseInt(this.Aarr[i].left)?parseInt(this.Aarr[i].left):0 
            this.Aarr[i].top = parseInt(this.Aarr[i].top)?parseInt(this.Aarr[i].top):0 
        }
      }

      if(this.Varr!=null && this.Varr.length>0){
        
        for(let i=0;i<this.Varr.length;i++){
            this.Varr[i].mark_num = parseInt(this.Varr[i].markNum)?parseInt(this.Varr[i].markNum):0
            this.Varr[i].is_status = parseInt(this.Varr[i].status)?parseInt(this.Varr[i].status):0
            this.Varr[i].left = parseInt(this.Varr[i].left)?parseInt(this.Varr[i].left):0 
            this.Varr[i].top = parseInt(this.Varr[i].top)?parseInt(this.Varr[i].top):0 
        }
      }
   

       var params = {
         id:this.id,
         is_append:is_append,
         is_img_v:is_img_v,
         is_img_a:is_img_a,
         v_num:this.v_num?this.v_num:0,
         text_num:this.text_num?this.text_num:0,
         fangxiang_a:this.fangxiangA,
         fangxiang_a_num:this.fangxiangA_num,
         fangxiang_v_num:this.fangxiangV_num,
         fangxiang_a_left:this.fangxiangA_left,
         fangxiang_a_top:this.fangxiangA_top,
         fangxiang_v:this.fangxiangV,
         fangxiang_v_left:this.fangxiangV_left,
         fangxiang_v_top:this.fangxiangV_top,
         fuzhu_a_num:this.fuzhuA_num,
         fuzhu_v_num:this.fuzhuV_num,
         xuanzhuan_a:this.xuanzhuan_a,
         xuanzhuan_v:this.xuanzhuan_v,
         fuzhu_a:this.fuzhuA,
         fuzhu_a_top:this.fuzhuA_top,
         fuzhu_a_left:this.fuzhuA_left,
         fuzhu_v:this.fuzhuV,
         fuzhu_v_top:this.fuzhuV_top,
         fuzhu_v_left:this.fuzhuV_left,
         a_left:this.A_right,
         a_top:this.A_top,
         v_left:this.V_right,
         v_top:this.V_top,
         text_arr:this.text_arr,
         text_left:this.text_left,
         text_top:this.text_top,
         av_bkx:this.av_bkx,
         av_bky:this.av_bky,
         scalev_num:this.scalev_num,
         scalea_num:this.scalea_num,
         patient_id:this.patientID,
         left_a:this.A_left,
         left_v:this.V_left,
         aarr:this.Aarr,
         varr:this.Varr,
       }
       console.log("paramswowwo",params)

       saveSitemap(params).then(response=>{
          if(response.data.state == 1){
            var deviceValsualMap =  response.data.data.deviceValsualMap
            this.$message.success("保存成功!")
            
            this.append =false
            this.getPatientSitemap(this.patientID)
          }
       })
    },
    getPatientSitemap(patient_id){
      getPatientSitemap(patient_id).then(response=>{
         if(response.data.state == 1){
            var sitemap = response.data.data.sitemap
            console.log('idzhesdfasd',sitemap);
            if(sitemap.id>0){
              if(sitemap.is_append == 1){
              this.is_append =true
            }else{
              this.is_append = false
            }

            if(sitemap.is_img_v == 1){
               this.is_img_v= true
            }else{
              this.is_img_v = false
            }

            if(sitemap.is_img_a == 1){
               this.is_img_a = true
            }else{
              this.is_img_a = false
            }

            this.id = sitemap.id

            this.A_top = sitemap.a_top
            this.av_bkx = sitemap.av_bkx
            this.av_bky = sitemap.av_bky
            this.fangxiangA_top = sitemap.fangxiang_a_left
            this.fangxiangA_num = sitemap.fangxiang_a_num
            this.fangxiangA_num = sitemap.fangxiang_a_top
            this.fangxiangV_left = sitemap.fangxiang_v_left
            this.fangxiangV_num =sitemap.fangxiang_v_num
            this.fangxiangV_top = sitemap.fangxiang_v_top
            this.fuzhuA_left= sitemap.fuzhu_a_left
            this.fuzhuA_num = sitemap.fuzhu_a_num
            this.fuzhuA_top =sitemap.fuzhu_a_top
            this.fuzhuV_left =sitemap.fuzhu_v_left
            this.fuzhuV_num = sitemap.fuzhu_v_num
            this.fuzhuV_top =sitemap.fuzhu_v_top
            this.patientID = sitemap.patient_id
            this.scalea_num = sitemap.scalea_num
            this.scalev_num = sitemap.scalev_num
            this.text_left=sitemap.text_left
            this.text_num =sitemap.text_num
            this.text_top = sitemap.text_top
            this.v_num =sitemap.v_num
            this.V_top = sitemap.v_top
            this.xuanzhuan_a = sitemap.xuanzhuan_a
            this.xuanzhuan_v = sitemap.xuanzhuan_v
            this.A_left = sitemap.a_left
            this.V_left = sitemap.v_left
            this.A_right = []
            
            if(sitemap.DeviceValsualALeft!=null && sitemap.DeviceValsualALeft.length>0){
              for(let i=0;i<sitemap.DeviceValsualALeft.length;i++){
             
                sitemap.DeviceValsualALeft[i].markNum =  sitemap.DeviceValsualALeft[i].mark_num

                this.A_right.push(sitemap.DeviceValsualALeft[i])
             }
            }
          

            this.V_right = []
            
            if(sitemap.DeviceValsualALeft!=null && sitemap.DeviceValsualALeft.length>0){
              for(let i=0;i<sitemap.DeviceValsualALeft.length;i++){
             
                sitemap.XtDeviceValsualVLeft[i].markNum =  sitemap.XtDeviceValsualVLeft[i].mark_num

                this.V_right.push(sitemap.XtDeviceValsualVLeft[i])
              }
            }
           
           
            this.fuzhuA = []
            if(sitemap.DeviceValsualFuzhuA!=null && sitemap.DeviceValsualFuzhuA.length>0){
              for(let i=0;i<sitemap.DeviceValsualFuzhuA.length;i++){
               sitemap.DeviceValsualFuzhuA[i].a_markNum = sitemap.DeviceValsualFuzhuA[i].a_mark_num
              this.fuzhuA.push( sitemap.DeviceValsualFuzhuA[i])
            }
            }
           
           
            this.fuzhuV = []
            if(sitemap.DeviceValsualFuzhuV!=null && sitemap.DeviceValsualFuzhuV.length>0){
              for(let i=0;i<sitemap.DeviceValsualFuzhuV.length;i++){
              sitemap.DeviceValsualFuzhuV[i].v_markNum = sitemap.DeviceValsualFuzhuV[i].a_mark_num
              this.fuzhuV.push( sitemap.DeviceValsualFuzhuV[i])
             }
            }
         
         
             this.fangxiangA = []
             if(sitemap.DeviceValsualMapFangxiangA!=null && sitemap.DeviceValsualMapFangxiangA.length>0){
               for(let i=0;i<sitemap.DeviceValsualMapFangxiangA.length;i++){
                sitemap.DeviceValsualMapFangxiangA[i].markNum = sitemap.DeviceValsualMapFangxiangA[i].mark_n
                this.fangxiangA.push(sitemap.DeviceValsualMapFangxiangA[i])
               }
             }
           
             
             
             this.fangxiangV = []
             if(sitemap.DeviceValsualMapFangxiangV!=null && sitemap.DeviceValsualMapFangxiangV.length>0){
                for(let i=0;i<sitemap.DeviceValsualMapFangxiangV.length;i++){
                sitemap.DeviceValsualMapFangxiangV[i].markNum = sitemap.DeviceValsualMapFangxiangV[i].mark_num
                this.fangxiangV.push(sitemap.DeviceValsualMapFangxiangV[i])
              }
             } 
            
             
             this.text_arr = []
             if(sitemap.DeviceValsualTextArr!=null && sitemap.DeviceValsualTextArr.length>0){
              for(let i=0;i<sitemap.DeviceValsualTextArr.length;i++){
               this.text_arr.push(sitemap.DeviceValsualTextArr[i])
              }
             }
            

             this.Aarr = []
             if(sitemap.DeviceValusalMapArr!=null && sitemap.DeviceValusalMapArr.length>0){
              for(let i=0;i<sitemap.DeviceValusalMapArr.length;i++){
                sitemap.DeviceValusalMapArr[i].markNum = sitemap.DeviceValusalMapArr[i].mark_num
                sitemap.DeviceValusalMapArr[i].is_status = sitemap.DeviceValusalMapArr[i].is_status
                this.Aarr.push(sitemap.DeviceValusalMapArr[i])
              }
             }
             

             this.Varr = []
             if(sitemap.DeviceValusalMapVrr!=null && sitemap.DeviceValusalMapVrr.length>0){
              for(let i=0;i<sitemap.DeviceValusalMapVrr.length;i++){
               sitemap.DeviceValusalMapVrr[i].markNum = sitemap.DeviceValusalMapVrr[i].mark_num
               sitemap.DeviceValusalMapVrr[i].is_status = sitemap.DeviceValusalMapVrr[i].is_status
               this.Varr.push(sitemap.DeviceValusalMapVrr[i])
             }
             }
          
             
            }

         }
      })
    },
    
    chakan(){
      console.log('22222',);
      this.shiyituDialogVisible=true
    },
     dataURLtoBlob(dataURL) {
      const arr = dataURL.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
  },
  created(){
    // console.log('chu','chu',);
    const id = this.$route.params && this.$route.params.id;
    this.patientID = parseInt(id);

    this.getPatientSitemap(this.patientID)
    // if(this.fuzhuV_num ==1 || this.append ==false){
    //   return this.xuanzhuan =0
    // }
  },
  computed:{
    // editor() {
    //   return this.$refs.myQuillEditor.quill;
    // }
  },


}
</script>

<style lang="scss" scoped>
.content_top{
  display: flex;
  justify-content: space-between;
}
.table thead td{
  background:#0077ff9f;
  padding:10px;
  color:white;
}
#point_mark_img_wrap1 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  padding: 4px;
  width: 600px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;

  .mark-target-a{
    background: #E73535;
    // top: 40px;
    // left: 40px;
    .mark-line{
      background: #E73535;
    }
  }
  .mark-target-v{
    background: rgb(53,162,231);
    .mark-line{
      background: #35A2E7;
    }
  }
  .mark-target-a,.mark-target-v {

    position: absolute;
    z-index: 1001;
    width: 26px;
    border-radius: 13px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 18px;
    cursor: move;
    color: rgb(255,255,255);
    .mark-line {
      transform: rotate(160deg);
      transform-origin: left bottom;
    }
    .mark-line {
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 86px;
      height: 1px;
      cursor: default;
      z-index: -1;
    }
  }

  b.xtgl-ccz-arrow-a {
    border-left-color: #E73535;
    border-top-color: #E73535;
  }
  b.xtgl-ccz-arrow-v {
    border-left-color: #35a2e7;
    border-top-color: #35a2e7;
  }
  b.xtgl-ccz-arrow {
      position: absolute;
      width: 7px;
      height: 7px;
      border-left-width: 2px;
      border-left-style: solid;
      border-top-width: 2px;
      border-top-style: solid;
      top: -3px;
      right: 0;
      transform: rotate(138deg);
  }

  // div.jinzhen-jiaodu-target-A {
  //   top: 56px;
  //   left: 360px;
  // }
  // div.jinzhen-jiaodu-target-V {
  //   top: 56px;
  //   left: 56px;
  // }
  div.jinzhen-jiaodu-target {
    position: absolute;
    z-index: 1008;
    width: 87px;
    height: 77px;
  }
  .frame-box.actives {
    outline: 1px dashed #ccc;
    outline-offset: 5px;
    cursor: move;
  }
  .frame-box {
    width: 90%;
    height: 90%;
    // width: 87px;
    // height: 77px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    // position: relative;
    // position: absolute;
    display: block;
    left: 0;
    top: 0;
  }
  #jinzhen-jiaodu-target-V div.frame-image {
    // background-image: url('../../assets/evaluate/tool-a.png');
  }
  div.frame-image {
    // position: absolute;
    overflow: hidden;
    top: 0px;
    left: 5px;
    width: 90%;
    height: 90%;
    // background-image: url('../../assets/evaluate/tool-a.png');
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .frame-box .drag-elem.bottom.right {
    cursor: nwse-resize;
    z-index: 3;
}
.frame-box .drag-elem.right {
    left: calc(100% + 6px);
}
.frame-box .drag-elem.bottom {
    top: calc(100% + 6px);
}
  .frame-box .drag-elem {
    width: 10px;
    height: 10px;
    display: none;
    border-radius: 50%;
    background-color: #B1C5E8;
    border: 2px solid #fff;
    box-shadow: 0 0 1px rgba(0,0,0,0.4);
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 2;
  }
  .frame-box.actives .frame-image-toolbar-btn-reset {
    display: flex;
  }
  div.frame-image-toolbar-btn.frame-image-toolbar-btn-reset {
    position: absolute;
    right: -32px;
    top: -6px;
    height: 27px;
    width: 27px;
    justify-content: center;
    width: 27px;
    align-items: center;
    display: none;
    cursor: default;
    box-shadow: 1px 1px 5px rgba(0,0,0,.1);
    background: url('../../assets/evaluate/xgtl_tool_rotate.png')no-repeat center center / 20px;
  }

  .frame-box .drag-elem.bottom.right {
    cursor: nwse-resize;
    z-index: 3;
}

.frame-box.actives .drag-elem {
    display: block;
}

.frame-box .drag-elem.right {
    left: calc(100% + 6px);
}
.frame-box .drag-elem.bottom {
    top: calc(100% + 6px);
}
.frame-box .drag-elem {
    width: 10px;
    height: 10px;
    display: none;
    border-radius: 50%;
    background-color: #B1C5E8;
    border: 2px solid #fff;
    box-shadow: 0 0 1px rgba(0,0,0,0.4);
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 2;
}
}

div.add-mark-text-wrap.active {
  background: #fff;
  box-shadow: 2px 3px 8px rgba(0,0,0,.2), -3px -2px 8px rgba(0,0,0,.2);
}
div.add-mark-text-wrap {
  // position: absolute;
  // top: 36%;
  // left: 48%;
  border-radius: 4px;
  width: 60px;
  height: 25px;
  line-height: 24px;
  z-index: 1005;
  display: inline-block;
  .el-input {
    /* position: relative; */
    font-size: 14px;
    display: inline-block;
    width: 100%;
  }
}
div.add-mark-text-wrap input.mark-text-ipt {
    cursor: default;
}
// div.add-mark-text-wrap input {
//     width: 100px;
//     width: 60px;
//     max-width: 400px;
//     border: 1px solid transparent;
//     padding: 4px;
//     color: #333;
//     height: 24px;
//     cursor: pointer;
//     background-color: #fcfcfc;
//     // position: absolute;
//     // left: 0;
//     // top: 0;
//     font-size: 13px;
//     z-index: 1002;
//     border-radius: 2px !important;
//     outline: none;
// }
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    *font-size: 100%;
}
div.add-mark-text-wrap:hover .remove-mark-text {
  background: red;
  color: #fff;
  opacity: .82;
}
.remove-mark-text {
    position: absolute;
    z-index: 1003;
    width: 19px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    top: -12px;
    right: -18px;
    color: transparent;
    font-size: 20px;
    border-radius: 3px;
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
}


#ossPointMarkImg {
    width: 100%;
    min-height: 200px;
    height: auto;
    border-radius: 2px;
    pointer-events: none;
}
p.point-mark-title {
  text-align: center;
  line-height: 40px;
  height: 40px;
  border: 1px solid #ddd;
  margin: 0;
  font-weight: 600;
}
.point-mark-items,.mark-a-items, .mark-v-items{
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  padding: 10px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  color: #fff;
}
div.point-mark-items > div.not-able {
  background: #CBCBCB;
}
div.mark-a-items > div.not-allow {
    background: #CBCBCB;
}
div.mark-v-items > div.not-allow {
    background: #CBCBCB;
}
div.point-mark-items > div,.mark-a-items > div,.mark-v-items > div {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 14px;
  cursor: pointer;
}
div.mark-a-items > div{
  background: #E73535;
}
div.mark-v-items > div {
  background: #35A2E7;
}
span.active-addtext-btn {
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    font-size: 15px;
    line-height: 30px;
}
span.disabled, span.edit-ccz-btn.disabled, span.default-btn.disabled {
  background-color: #CBCBCB !important;
  border: 1px solid #CBCBCB !important;
  color: #fff !important;
  border-radius: 4px;
  height: 30px;
  padding: 4px 6px;
  text-align: center;
  font-size: 14px;
  margin: 10px 20px 10px 0;
}
span.default-mark-text,span.edit-ccz-btn, span.default-btn {
  margin: 10px 20px 10px 0;
  background-color: #4579C5 !important;
  padding: 4px 6px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: 1px solid #4579C5;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}
span.chuanci:hover{
  background: #fff !important;
  color: #4579C5 ;
}
#ctrl-xgtlpic-mask.readonly {
    z-index: 2000;
}
#ctrl-xgtlpic-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: -1;
}
</style>
<style lang="scss">
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "../../assets/evaluate/tool-a.png";
}
</style>