<template>
  <el-card>
    <div class="main">
      <span>工位号:</span>
      <el-select v-model="clickOpName" placeholder="请选择"
        @change="searchOpPosition(); searchOpPicture(); loadLinesFromDatabase();">
        <el-option v-for="item in OpNameList" :label="item.label" :value="item.value" />
      </el-select>
      <el-button v-if="!isDebug && $store.state.user.token == 1" style="width: 100px" type="warning"
        @click="isDebug = true">调参模式</el-button>
      <el-button v-else-if="isDebug" style="width: 100px" type="success" @click="isDebug = false">浏览模式</el-button>
      <el-button v-if="$store.state.user.token == 1" icon="el-icon-circle-plus-outline" size="small" type="distribution"
        @click="addTo">上传</el-button>
      <el-button icon="el-icon-full-screen" type="primary" @click="fullScreen">全屏</el-button>
      <div class="bottom">
        <div v-if="isDebug" class="table">
          <el-table v-loading="loading" ref="singleTable" :data="positionList" border
            element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading"
            element-loading-text="数据加载中" height="650" highlight-current-row size="mini"
            style="width: 445px;margin-right: 50px" tooltip-effect="dark" @row-click="clickTableRow">
            <el-table-column align="center" label="序号" type="index" width="50" />
            <el-table-column align="center" label="显示名称">
              <template slot-scope="scope">
                {{ scope.row.title }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="绑定变量">
              <template slot-scope="scope">
                {{ scope.row.bindName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="变量值" width="60">
              <template slot-scope="scope">
                {{ scope.row.value }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="展示" width="50">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isShow" :false-label="0" :true-label="1" />
              </template>
            </el-table-column>
          </el-table>
          <el-table v-loading="loading" ref="lineTable" :data="lines" border
            element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading" height="200"
            highlight-current-row size="mini" style="width: 445px;margin-right: 50px;margin-top: 20px;"
            tooltip-effect="dark" @row-click="clickTableLineRow">
            <el-table-column align="center" label="序号" type="index" />
            <el-table-column align="center" label="线条名称">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="宽度" width="80">
              <template slot-scope="scope">
                {{ scope.row.thickness }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="颜色" width="60">
              <template slot-scope="scope">
                <div style="width: 20px;height: 20px;position: relative;left: 10px;"
                  :style="{ backgroundColor: scope.row.color }"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="canvas">
          <div v-if="isDebug" class="configTop">
            <div class="item">
              <span>绑定名称:</span>
              <div style="text-align: left;width: 120px;overflow: auto;height: 30px;">&nbsp;{{ clickItem.bindName }}
              </div>
            </div>
            <div class="item">
              <span>X坐标：</span>
              <el-input-number v-model="clickItem.posX" :min="0" />
            </div>
            <div class="item">
              <span>Y坐标：</span>
              <el-input-number v-model="clickItem.posY" :min="0" />
            </div>
            <div class="item">
              <span>宽度：</span>
              <el-input-number v-model="clickItem.width" :max="1000" :min="1" />
            </div>
            <div class="item">
              <span>高度：</span>
              <el-input-number v-model="clickItem.height" :max="1000" :min="1" />
            </div>
          </div>
          <div v-if="isDebug" class="configTop">
            <div class="item">
              <span>画布缩放：</span>
              <div class="box">
                <el-input-number v-model="scale" :max="1000" :min="0.1" :step="0.1" @change="updateImageScale()">
                  字体大小
                </el-input-number>
              </div>
            </div>
            <div class="item">
              <span>字体大小：</span>
              <div class="box">
                <el-input-number v-model="clickItem.fontSize" :max="1000" :min="1">字体大小</el-input-number>
              </div>
            </div>
            <div class="item">
              <span>字体颜色：</span>
              <div class="box">
                <el-color-picker v-model="clickItem.color" show-alpha />
              </div>
            </div>
            <el-switch v-model="clickItem.fontWeight" :width="60" active-color="#13ce66" active-text="加粗"
              active-value="bold" inactive-color="#0cd8ee" inactive-text="正常" inactive-value="500"
              style="margin-top: 12px;margin-left: 40px" />
            <div class="item" />
            <div class="item">
              <el-button v-if="!isUpdate" style="width: 100px" type="warning" @click="isUpdate = true">修改模式
              </el-button>
              <el-button v-else style="width: 100px" type="primary" @click="isUpdate = false;">退出修改</el-button>
              <el-button v-if="isUpdate" style="width: 100px" type="success" @click="submit">保存点位</el-button>
              <el-button v-if="!isDrawingMode && !isUpdate" style="width: 120px" type="primary" @click="startDrawing">
                增加线条
              </el-button>
              <el-button v-if="isDrawingMode" style="width: 120px" type="success" @click="finishDrawing">
                保存线条
              </el-button>
            </div>
          </div>
          <div v-if="isDrawingMode" class="configTop">
            <div class="item">
              <span>线条名称：</span>
              <div class="box">
                <el-input style="width: 140px;" v-model="currentLine.name" placeholder=""></el-input>
              </div>
            </div>
            <div class="item">
              <span>线条宽度：</span>
              <div class="box">
                <el-input-number @change="redrawCanvas()" v-model="currentLine.thickness" :max="1000" :min="0.1"
                  :step="0.1">
                  线条宽度
                </el-input-number>
              </div>
            </div>
            <div class="item">
              <span>线条颜色：</span>
              <div class="box">
                <el-color-picker @change="redrawCanvas()" v-model="currentLine.color" show-alpha />
              </div>
              <el-button style="width: 120px" type="warning" @click="currentLineCancel">
                绘制撤销
              </el-button>
              <el-button style="width: 120px" type="primary" @click="currentLineExit">
                退出绘制
              </el-button>
            </div>
          </div>
          <div class="vdr-main">
            <div :style="imagePosition" class="vdr-Parent" @mousedown="startDrag" @mouseleave="endDrag"
              @mousemove="dragging" @mouseout="endDrag" @mouseup="endDrag" @mousewheel.stop="onMouseWheel"
              @click="handleCanvasClick">
              <vdr v-for="item in positionList" v-show="isUpdate && item.isShow" :key="item.AID" :h="item.height"
                :parent="false" :w="item.width" :x="item.posX" :y="item.posY" style="position: absolute;z-index: 20"
                @activated="onStart(item)" @deactivated="onEnd" @dragging="onDrag" @resizing="onResize">
                <p :style="{
                  color: item.color,
                  fontSize: item.fontSize + 'px',
                  fontWeight: item.fontWeight,
                }" style="line-height: 30px;">
                  <span v-if="item.title != '开度:'">{{ getShowData(item) }}</span>
                  <el-progress :width="80" text-color="#fff" :stroke-width="8" v-else type="circle"
                    :percentage="Number(getShowData(item))"></el-progress>
                </p>
              </vdr>
              <div v-for="(item, index) in positionList" v-show="!isUpdate && item.isShow" :key="index" :style="{
                position: 'absolute',
                zIndex: 20,
                left: item.posX + 'px',
                top: item.posY + 'px',
                width: item.width + 'px',
                height: item.height + 'px'
              }">
                <p :style="{
                  color: item.color,
                  fontSize: item.fontSize + 'px',
                  fontWeight: item.fontWeight
                }" style="line-height: 30px !important;">
                  <span v-if="item.title != '开度:'">{{ getShowData(item) }}</span>
                  <el-progress :width="80" text-color="#fff" :stroke-width="8" v-else type="circle"
                    :percentage="Number(getShowData(item))"></el-progress>
                </p>
              </div>
              <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"
                style="position: absolute; z-index: 15; pointer-events: auto;"></canvas>
              <img :src="imgUrl" style="user-select: none;position: absolute;z-index: 10;" @dragstart="cancelDrag">
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" center style="height: 800px" title="上传图片" width="17%">
      <el-upload id="invoiceScan" ref="upload" :action="upload" :auto-upload="false" :before-upload="beforeUpload"
        :data="Data" :limit="limit" :multiple="true" :on-change="handelLimit" :on-exceed="warningExceed"
        :on-preview="handlePictureCardPreview" :on-remove="handelLimitStyle" :on-success="uploadSuccess"
        list-type="picture-card" style="margin-left: 60px">
        <i class="el-icon-plus" />
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button style="width: 70px" type="primary" @click="submitPicture()">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      isUpdate: false,
      isDebug: false,
      clickOpName: '',
      clickItem: { // 当前选中的对象
        bindName: '',
        title: '',
        value: '',
        unit: '',
        color: '',
        fontSize: 1,
        fontWeight: '',
        posX: 0,
        posY: 0,
        height: 1,
        width: 1,
        isShow: 0
      },
      scale: 0.4, // 画布缩放
      draggingState: false, // 画布拖动状态
      startX: 0, // 移动时起始位置X
      startY: 0, // 移动是起始位置Y
      currentX: -450, // 画布移动x
      currentY: -240, // 画布移动y
      imagePosition: { // 画布动态样式
        transform: `translate(-450px, -240px) scale(0.4)`,
        width: (this.isDebug ? 100 + '%' : 93 + 'vw'),
        height: (this.isDebug ? 500 : 750) + 'px'
      },
      color: null, // 取色器色盘颜色
      positionList: [], // 点位列表
      positionSocietyData: {}, // 点位对应数据表
      OpNameList: [],
      opStatusList: ['关机', '待机', '运行', '报警', '暂停'],
      loading: false,
      timer1: null,
      dialogFormVisible: false,
      upload: window.dt_Config.serverAddress,
      title: '',
      limit: 1,
      Data: {},
      dialogVisiblePictureCard: false,
      dialogImageUrl: '',
      imgUrl: '',
      urls: [], // 图片数组
      urls1: [], // 图片数组
      isDrawingMode: false,
      currentLine: null,
      lines: [],
      canvasWidth: 0,
      canvasHeight: 0,
    }
  },
  created() {
    this.getOpName()
    this.timer1 = setInterval(() => {
      if (!this.isUpdate) {
        this.searchOpPosition()
      }
    }, 1000 * 2)
  },
  mounted() {
    // 初始化时加载线条数据
    this.loadLinesFromDatabase();
  },
  // 离开页面销毁定时器
  beforeDestroy() {
    clearInterval(this.timer1)
  },
  methods: {
    clickTableRow(row, column, event) {
      // console.log(row, column, event)
      this.clickItem = row
      this.$refs.singleTable.setCurrentRow(row);
    },
    clickTableLineRow(row, column, event) {
      this.currentLine = row
      this.$refs.lineTable.setCurrentRow(row);
      this.isDrawingMode = true
    },

    getPositionSocietyData() {
      this.positionSocietyData = []
      var param = []
      var Data = this.CreateData('11', '基础_参数画面_数值对应名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.positionSocietyData = {}
        for (let item of response.data) {
          if (!(item.参数名称 in this.positionSocietyData)) {
            this.positionSocietyData[item.参数名称] = {}
          }
          this.positionSocietyData[item.参数名称][item['变化数值']] = { name: item.数值名称, color: item.数值颜色 }
        }
        this.searchOpPosition()
      })
    },
    // 查询工位号
    getOpName() {
      this.OpNameList = []
      var param = []
      param.push(['Personnel_Number', this.$store.state.user.id])
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (const item of response.data) {
          this.OpNameList.push({ label: item.公司 + item.工位号, value: item.工位号 })
        }
        this.clickOpName = response.data[0].工位号
        this.getPositionSocietyData() // 加载点位值对应表
        this.loadLinesFromDatabase(); // 加载线条数据
        this.searchOpPicture() // 加载工位图片
      })
    },
    // 处理数据
    getShowData(item) {
      let resData;
      // 如果数据包含 状态、开度 同时值为 1 or 0 则认为是bool变量 反馈 开/关
      let rTitle = item.title.replace(':', '')
      if (rTitle in this.positionSocietyData) {
        if (item.value in this.positionSocietyData[rTitle]) {
          try {
            this.positionSocietyData[rTitle][item.value].color ? item.color = this.positionSocietyData[rTitle][item.value].color : ''
            this.positionSocietyData[rTitle][item.value].name ? item.value = this.positionSocietyData[rTitle][item.value].name : ''
          } catch (error) {
            console.log("this.positionSocietyData[rTitle]", this.positionSocietyData[rTitle], item.value)
            console.log(error)
          }
        }
      }

      if (item.title == '状态:') {
        return item.value
      }
      if (item.title == '开度:') {
        if (item.value != '' && item.value != null) {
          return Number(item.value).toFixed(0)
        } else {
          return 0
        }
      }

      resData = item.title + item.value + item.unit
      return resData
    },
    // 读取工位点位
    searchOpPosition() {
      var param = []
      param[0] = ['工位号', this.clickOpName]
      var Data = this.CreateData('11', 'WEB_监控数据布局_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.WebApi_ReadDevice(response.data).then(tagIdList => {
            this.positionList = []
            for (const item of tagIdList) {
              this.positionList.push({
                AID: item.AID,
                title: item.参数名称 + (item.值 != '' ? ':' : ''),
                bindName: item.TagName,
                value: this.formatNumberString(item.值),
                unit: item.单位,
                color: item.颜色,
                fontSize: item.字体大小,
                fontWeight: item.字体粗细,
                posX: item.位置X,
                posY: item.位置Y,
                height: item.高度,
                width: item.宽度,
                isShow: item.是否显示
              })
            }
          })
        }
      })
    },
    formatNumberString(str) {
      // 使用parseFloat尝试转换字符串为数字
      let num = parseFloat(str);
      // 使用isNaN检查转换后的值是否为NaN，如果不是NaN，说明可以转换为数字
      if (!isNaN(num)) {
        // 将数字转换为字符串
        let numStr = num.toString();
        // 找到小数点的位置
        let dotIndex = numStr.indexOf('.');
        // 如果存在小数点，并且小数位数大于两位
        if (dotIndex !== -1 && numStr.length - dotIndex > 3) {
          // 截取字符串，保留两位小数
          return numStr.substring(0, dotIndex + 3);
        } else {
          // 如果小数位数小于等于两位，直接返回原数字的字符串形式
          return numStr;
        }
      } else {
        // 如果转换后的值为NaN，返回原字符串
        return str;
      }
    },
    fullScreen() {
      if (this.fullscreen) {
        this.$fullscreen.exit(); //退出全屏
      } else {
        // 通过ref拿到具体的、希望全屏展示的元素
        let dom = document.getElementsByClassName('vdr-main')[0];
        if (dom) {
          this.isDebug = false
          this.isUpdate = false
          this.scale = 0.5
          this.currentX = -410
          this.currentY = -165
          this.imagePosition.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`
        }
        this.$fullscreen.enter(dom, {
          wrap: false,
          callback: (f) => {
            this.fullscreen = f;
          }
        });
      }
    },
    // 读取工位图片
    searchOpPicture() {
      var param = []
      param[0] = ['工位号', this.clickOpName]
      var Data = this.CreateData('11', 'WEB_设备工艺流程图片_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.imgUrl = ''
        if (response.data.length > 0) {
          this.imgUrl = 'data:image/png;base64,' + response.data[0].产品图片
        }
        // 图片加载完成后初始化Canvas尺寸
        const img = new Image();
        img.onload = () => {
          this.canvasWidth = img.width;
          this.canvasHeight = img.height;
          this.redrawCanvas();
        };
        img.src = this.imgUrl;
        // for (let i = 0; i < response.data.length; i++) {
        //   console.log(response.data, 'response.data')
        //   if (response.data[i].产品图片) {
        //     this.urls.push({
        //       url: 'data:image/png;base64,' + response.data[i].产品图片,
        //       id: response.data[i].AID
        //     })
        //     this.urls1.push('data:image/png;base64,' + response.data[i].产品图片)
        //   }
        // }
      })
    },
    // 画布滚轮事件
    onMouseWheel(event) {
      event.preventDefault()
      const wheelDelta = event.deltaY
      if (wheelDelta > 0 && this.scale > 0.3) {
        this.scale -= 0.1
      } else if (wheelDelta < 0) {
        this.scale += 0.1
      }
      this.updateImageScale()
    },
    // 更新画布缩放
    updateImageScale() {
      // 四舍五入一位小数点
      try {
        // this.scale = this.scale.toFixed(1)
      } catch (e) {

      }
      this.imagePosition.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`
    },
    submit() {
      console.log(JSON.stringify(this.positionList))
      var param = []
      param.push(['工位号', this.clickOpName])
      param.push(['JSON', JSON.stringify(this.positionList)])
      var Data = this.CreateData('11', 'WEB_监控数据布局_JSON批量_修改', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          if (response.data[0].result == 1) {
            this.$message.success(response.data[0].msg)
          } else {
            this.$message.error(response.data[0].msg)
          }
        } else {
          this.$message.error('保存失败!')
        }
      })
    },
    // 拖动位置
    onDrag(x, y) {
      event.stopPropagation()
      this.clickItem.posX = x
      this.clickItem.posY = y
      // console.log('拖动位置:', x, y)
    },
    // 调整大小
    onResize(x, y, width, height) {
      event.stopPropagation()
      this.clickItem.posX = x
      this.clickItem.posY = y
      this.clickItem.width = width
      this.clickItem.height = height
      // console.log('调整大小:', x, y, width, height)
    },
    onStart(item) {
      // 浅拷贝
      this.clickItem = item
      this.$refs.singleTable.setCurrentRow(item);
      console.log('拖拽开始', item.title)
    },
    onEnd() {
      console.log('拖拽结束')
    },
    // 开始移动画布
    startDrag(event) {
      this.draggingState = true
      this.startX = event.clientX - this.currentX
      this.startY = event.clientY - this.currentY
    },
    // 移动画布位置
    dragging(event) {
      if (this.draggingState) {
        let newX = event.clientX - this.startX
        let newY = event.clientY - this.startY

        // 限制图片移动范围
        // const maxX = 500 - 3840
        // const maxY = 500 - 2160
        // newX = Math.min(0, Math.max(maxX, newX))
        // newY = Math.min(0, Math.max(maxY, newY))
        // 就限制不能出左上角
        newX = Math.min(0, newX)
        newY = Math.min(0, newY)

        this.currentX = newX
        this.currentY = newY
        this.updateImageScale()
      }
    },
    // 结束画布拖拽
    endDrag() {
      this.draggingState = false
    },
    // 禁止图片拖拽事件
    cancelDrag(event) {
      event.preventDefault()
    },
    addTo() {
      this.title = '添加'
      this.dialogFormVisible = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisiblePictureCard = true
    },
    handelLimit() {
      console.log(12345678)
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === '') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'none'
        }
      }
    },
    handelLimitStyle() {
      console.log(12345678)
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    warningExceed() {
      this.$message.error('仅可上传一张照片')
    },
    beforeUpload(file) { // 上传前检测
      const isJPG = /^image\/.*/.test(file.type)
      if (!isJPG) {
        this.$message.error('只能上传图片。。')
      }
      return isJPG
    },
    uploadSuccess(res) { // 上传成功回调
      this.dialogFormVisible = false
      this.$refs.upload.clearFiles()
      var obj = document.getElementsByClassName('el-upload--picture-card')
      if (obj[0].style.display === 'none') {
        for (var i = 0; i < obj.length; i++) {
          obj[i].style.display = 'block'
        }
      }
    },
    submitPicture() {
      var param = []
      param[0] = ['工位号', this.clickOpName]
      param[1] = ['文件名称', '']
      param[2] = ['文件后缀', '']
      param[3] = ['文件内容', null]
      var Data1 = this.CreateData('15', 'WEB_设备工艺流程图片_保存', param)
      this.Data.param = Data1
      this.$refs.upload.submit()
      this.dialogFormVisible = false
      this.$message.success('上传中，等待上传完成')
      setTimeout(() => {
        this.searchOpPicture()
      }, 1000 * 3)
    },
    startDrawing() {
      this.isDrawingMode = true;
      this.currentLine = {
        points: [],
        color: 'rgba(34, 197, 110, 1)',
        thickness: 3,
        name: '未命名线条'
      };
    },

    finishDrawing() {
      if (this.currentLine.points.length > 1) {


        // 判断 在lines 中是否存在与 currentLine 相同的对象，说明此时是在修改状态，就不需要进行push了
        if (!(this.lines.some(line => JSON.stringify(line) == JSON.stringify(this.currentLine)))) {
          // 判断是否存在同name线条
          if (this.lines.some(line => line.name === this.currentLine.name)) {
            this.$message.error('线条名称重复，请重新命名');
            return;
          }

          this.lines.push(this.currentLine);
        }
        this.saveLinesToDatabase();
      }
      this.isDrawingMode = false;
      this.currentLine = null;
      this.loadLinesFromDatabase();
    },

    handleCanvasClick(event) {
      if (!this.isDrawingMode) return;

      const rect = this.$refs.canvas.getBoundingClientRect();
      const scale = this.scale;
      const x = (event.clientX - rect.left) / scale;
      const y = (event.clientY - rect.top) / scale;

      this.currentLine.points.push({ x, y });
      this.redrawCanvas();
    },
    currentLineCancel() {
      this.currentLine.points.pop();
      this.redrawCanvas()
    },
    currentLineExit() {
      this.currentLine = null;
      this.loadLinesFromDatabase()
      this.isDrawingMode = false;
    },


    redrawCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制保存的线段
      this.lines.forEach(line => {
        ctx.beginPath();
        ctx.strokeStyle = line.color;
        ctx.lineWidth = line.thickness;
        line.points.forEach((point, index) => {
          if (index === 0) ctx.moveTo(point.x, point.y);
          else ctx.lineTo(point.x, point.y);
        });
        ctx.stroke();
      });

      // 绘制当前线段
      if (this.currentLine) {
        ctx.beginPath();
        ctx.strokeStyle = this.currentLine.color;
        ctx.lineWidth = this.currentLine.thickness;
        this.currentLine.points.forEach((point, index) => {
          if (index === 0) ctx.moveTo(point.x, point.y);
          else ctx.lineTo(point.x, point.y);
        });
        ctx.stroke();
      }
    },

    saveLinesToDatabase() {
      const param = [
        ['工位号', this.clickOpName],
        ['线条数据', JSON.stringify(this.lines)]
      ];
      const Data = this.CreateData('11', 'WEB_监控线条数据_保存', param);
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === 1) {
          this.loadLinesFromDatabase()
          this.$message.success('线条保存成功');
        }
      });
    },

    loadLinesFromDatabase() {
      const param = [['工位号', this.clickOpName]];
      const Data = this.CreateData('11', 'WEB_监控线条数据_查询', param);
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.lines = JSON.parse(response.data[0].线条JSON);
          setTimeout(() => {
            this.redrawCanvas();
          }, 1000);
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  margin-top: 10px;
}

/* 整个滚动条 */
.opList::-webkit-scrollbar {
  width: 8px;
  height: 12px;
}

/* 滚动条里面滑块 */
.opList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: skyblue;
}

/*滚动条里面轨道*/
.opList::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  background: #eee;
}

.opList {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  margin: 10px 0;

  .item {
    flex: 1;
    min-width: 200px;
    height: 90px;
    border: 1px solid #234f7c;
    margin: 10px 5px;
    background-color: #fff;
  }
}

.configTop {
  display: flex;
  width: 10vw;
  font-size: 13px;

  .item {
    margin: 5px 15px;
    line-height: 35px;
    display: flex;

    span {
      width: 4vw;
      text-align: right;
    }
  }
}

.vdr-main {
  border: 1px solid red;
  overflow: hidden;

  .vdr-Parent {
    position: relative;
    cursor: move;
    user-select: none;
  }
}


::v-deep .el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  font-size: 25px !important;
  color: #67c23a !important;
}

//::v-deep .el-input-number__increase {
//  //zoom: .5;
//  height: 34px;
//  margin-top: 0px;
//}

::v-deep .el-input-number__increase {
  border: none !important;
}

::v-deep .el-input-number__decrease {
  border: none !important;
}

::v-deep .el-input-number__decrease,
.el-input-number__increase {
  background: none !important;
}

::v-deep .el-input-number__increase {
  background: none !important;
}

.el-input-number {
  width: 135px;
}

/* 新增样式 */
.canvas-container {
  position: relative;
}

.canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
</style>
