<template>
  <div>
    <transition>
      <div v-if="dialogInfoLeft" class="dialog_info">
        <div class="dialog_info_left">
          <div class="dialog_head">
            <div class="tit">{{ dialogTit }}</div>
            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeDialogBtnFn">
            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
          </div>
          <div class="dialogContent">
            <div v-if="dialogInfoList.length > 0" class="dialogContent_box" style="height: 100%;">
              <div class="dialogContent_box_item" v-for="(item, i) in dialogInfoList" :key="i.id">
                <div class="dialogContent_l">
                  <div class="dialogContent_l_xsq"
                    :style="{ 'width': processString(i.screenSize, 'w') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'height': processString(i.screenSize, 'h') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'justify-content': getTextAlign(i.tcontents[0].formatStyle) }">
                    <div class="dialogContent_l_xsq_txt"
                      :style="{ 'font-size': i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'color': '#' + i.tcontents[0].fontColor, 'font-family': i.tcontents[0].fontType, }"
                      v-html="i.tcontents[0].content.replace(/\n|\r\n/g, '<br>').replace(
                        / /g,
                        '&nbsp')"></div>
                  </div>
                </div>
                <div class="dialogContent_r">
                  <div @click="editOutline(i)" class="show_r_btn dialogContent_r_btn1"></div>
                  <div @click="delMoFn(i)" class="show_r_btn dialogContent_r_btn2"></div>
                </div>
              </div>
            </div>
            <div v-else class="dialogContent_box" style="height: 100%;">
              <div class="dialogContent_box_empty">暂无数据</div>
            </div>
            <div class="dialogContent_bottom">
              <el-tabs v-model="activeName" @tab-click="tabClickFn">
                <el-tab-pane label="详情信息" name="first">
                  <div class="show_bottom_tab_box">
                    <div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
                      <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
                      <div class="show_bottom_tab_item_r" :style="{ 'color': item.col }"> {{ item.txt }}</div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
              </el-tabs>
            </div>
            <div class="dialogContent_bottom_btn">
              <div class="show_bottom_btn_add" @click="addMoDataInfoFn(2, 2)">添加信息</div>
              <div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
            </div>
            <div class="dialogContent_ce" @click="showCeInfoFn">
              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
                :style="{ 'transform': dialogInfoRight ? 'rotate(0deg)' : 'rotate(180deg)' }">
              <div class="show_ce_txt">信息模板</div>
            </div>
            
            <!-- 原型图上没有“附近相机”，代码里暂时关闭
              <div class="dialogContent_ce" style="top:36%;" @click="showCameraInfoFn">
              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
                :style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
              <div class="show_ce_txt">附近像机</div>
            </div> -->
          </div>
        </div>
        <!-- 信息模板 -->
        <div v-if="dialogInfoRight" class="dialog_info_right">
          <el-collapse v-model="activeNames" @change="panelChangeFn">
            <el-collapse-item v-for="item in moBanList" :key="item.dictCode" :title="item.dictLabel"
              :name="item.dictCode">
              <div class="dialog_info_right_show">
                <div class="dialogContent_box" style="overflow-y: visible;">
                  <div class="dialogContent_box_item" v-for="i in item.mbList" :key="i.id">
                    <div class="dialogContent_l" style="width:16vw;">
                      <div class="dialogContent_l_xsq"
                        :style="{ 'width': processString(i.screenSize, 'w') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'height': processString(i.screenSize, 'h') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'justify-content': getTextAlign(i.tcontents[0].formatStyle) }">
                        <div class="dialogContent_l_xsq_txt"
                          :style="{ 'font-size': i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'color': '#' + i.tcontents[0].fontColor, 'font-family': i.tcontents[0].fontType }"
                          v-html="i.tcontents[0].content.replace(/\n|\r\n/g, '<br>').replace(
                            / /g,
                            '&nbsp')"></div>
                      </div>
                    </div>
                    <div class="dialogContent_r" style="width: 3.5vw;">
                      <div @click="putLeftFn(i)" class="show_r_btn dialogContent_r_btn3"></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 附近相机 -->
        <div v-if="dialogInfoCamera" class="dialog_info_right" style="padding:0;">
          <div class="dialog_head" style="height:4vh;">
            <div class="tit">摄像机设备</div>
            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeCameraBtnFn">
            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
          </div>
          <div class="info_right_camera">
            <div class="info_right_camera_top">
              <!-- 视频组件 -->
              <videoView :url="videoUrl" />
            </div>
            <div class="info_right_camera_bom">
              <div class="camera_bom_left">
                <div class="camera_bom_left_item">
                  <div class="camera_bom_left_item_txt">选择相机: </div>
                  <div class="camera_bom_left_item_val">
                    <el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px"
                      @change="cameraValChangeFn">
                      <el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName"
                        :value="item.camId">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
                  <div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
                  <div class="camera_bom_left_item_val">{{ item.val }}</div>
                </div>
              </div>
              <div class="camera_bom_right">
                <div class="camera_bom_right_t">
                  <div class="camera_bom_right_t_box"></div>
                  <div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id"
                    @click="cameraControlBtnFn(item)"
                    :style="{ 'left': item.le, top: item.to, 'transform': 'rotate(' + item.ro + 'deg)' }"></div>
                </div>
                <div class="camera_bom_right_b">
                  <div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
                    <div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
                    <div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
                    <div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </transition>
    <!-- 情报板弹框中的弹框 -->
    <addBoard ref="addinfo" @addInfo="addInfo" />
    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
  </div>
</template>

<script>
import addBoard from './addinfo.vue'
import editBoard from './editInfo.vue'
import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
export default {
  name: 'InfoBoard',
  data(){
    return {
      dialogTit: '门架式可变信息标志YK16+270',
      dialogInfoLeft: true,
      dialogInfoRight: false,
      dialogInfoCamera: false,
      dialogInfoList:[]
    }
  },
  mounted() {
  },
  methods: {
    // 地图点位
    mapClickEvent(e) {
      this.dialogInfoList = []
      console.log('父组件地图点位', e)
      this.videoUrl = ''
      this.cameraOptList = []
      this.dialogInfoLeft = true
      this.mapIds = e.target._opts.extData.deviceId
      this.screenDataSize = e.target._opts.extData.sceenSize
      this.dialogTit = e.target._opts.extData.deviceName
      // this.tabDataInfoList = e.target._opts.extData
      this.tabDataInfoList = [
        { id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
        { id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
        { id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
        { id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
        { id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
        { id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState == 'online' ? '在线' : '离线', col: e.target._opts.extData.deviceState == 'online' ? '#10d269' : '#888' }
      ]
      this.getTemplateHeaderFn()
      this.onSubmit(this.mapIds)
      this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
      // this.mapDialogTop = e.pixel.y + 'px'
      // this.mapDialogLeft = e.pixel.x + 'px'
      // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
      // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
      // console.log(this.$refs.mapDialog)
    },
    getEnergyCameraBoardFn(pileNumber) {
      getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
        console.log('获取到附近的像机', res)
        this.cameraVal = res.data[0].camId
        this.cameraOptList = res.data
        this.cameraValCha(this.cameraOptList, this.cameraVal)
        this.getEnergyCameraVideoFn()
      })
    },
    getEnergyCameraVideoFn() {
      getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
        // console.log('获取到视频', res)
        this.videoUrl = res.data.liveUrl
      })
    },
    cameraControlBtnFn(item) {
      this.getEnergyCameraControlFn(item.cmd, 5)
    },
    cameraControlLeFn(item) {
      // console.log('按钮点击事件', item)
      this.getEnergyCameraControlFn(item, 5)
    },
    getEnergyCameraControlFn(cmd, spe) {
      getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
        // console.log('控制返回结果', res)
        // this.videoUrl = res.data.liveUrl
      })
    },
    cameraValChangeFn() {
      console.log('点击切换按钮', this.cameraVal)
      this.cameraValCha(this.cameraOptList, this.cameraVal)
    },
    // cameraDataVideoList
    cameraValCha(date, num) {
      let str = {
        0: '正常',
        1: '网络中断',
        2: '网络正常无图像',
        3: '有图像图可能存在问题'
      }
      date.forEach(i => {
        if (i.camId === num) {
          this.cameraDataVideoList = [
            { id: 3001, txt: '设备名称', val: i.camName },
            { id: 3002, txt: '设备编号', val: i.camId },
            { id: 3003, txt: '设备桩号', val: i.pileNum },
            { id: 3005, txt: '道路名称', val: i.deptName },
            { id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
          ]
        }
      })
    },
    // 信息发布
    InformationReleaseFn() {
      this.$confirm('是否确定发布情报板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const objAll = {}
          // objAll.deviceIds = this.checkedCities.toString()
          objAll.deviceIds = this.mapIds
          let that = this

          // let devicePixel = this.form.devicePixel.split('*')
          console.log('接口参数', this.dialogInfoList)
          let newArr = this.dialogInfoList.map(item => {
            let obj = {}

            obj.STAY = item.STAY
            obj.ACTION = item.inScreenMode
            obj.SPEED = item.tcontents[0].fontSpacing
            obj.COORDINATE = item.screenSize.replace('*', '')
            obj.COLOR = item.tcontents[0].fontColor
            obj.FONT = this.getFontValue(item.tcontents[0].fontType)
            obj.FONT_SIZE = item.tcontents[0].fontSize

            obj.CONTENT = item.tcontents[0].content.replaceAll(',', '\\,')
            obj.CONTENT = item.tcontents[0].content.replaceAll('=', '\\=')
            obj.CONTENT = item.tcontents[0].content.replace(/\n/g, '\\\\n')

            // obj.CONTENT = item.tcontents[0].content.replace(/\n|\r\n/g, '<r><n>')
            obj.width = this.processString(item.screenSize, 'w')
            obj.height = this.processString(item.screenSize, 'h')
            obj.formatStyle = item.tcontents[0].formatStyle
            return obj
          })

          objAll.parameters = newArr
          const param = {
            objectData: JSON.stringify(objAll)
          }

          invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
            .then(res => {
              debugger
              // console.log('发布消息,校验文件名-------------')
              if (res.data.result == '01') {
                invokedFunction(595, 13, { parameters: newArr })
                  .then(res => {
                    debugger
                    // console.log('发布消息,发送文件内容-----')
                    if (res.data.result == '01') {
                      invokedFunction(595, '1B', { fileId: '99' })
                        .then(res => {
                          debugger
                          // console.log('发布消息,播放文件-----')
                        })
                        .catch(() => {
                          this.$modal.msgError('发布失败,请重试')
                        })
                    }
                  })
                  .catch(() => {
                    this.$modal.msgError('发布失败,请重试')
                  })
              }
            })
            .catch(() => {
              this.$modal.msgError('发布失败,请重试')
            })
          loading.close()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布情报板'
          })
          loading.close()
        })
      this.onSubmit()
    },
    // 回读
    onSubmit(deviceId) {
      getDeviceRealtimeProperty(deviceId, '3A', { async: false })
        .then(res => {
          var contentsA = res.data['3A'].content
          console.log('回读消息--1111111111---', contentsA)

          this.dialogInfoList = contentsA.map(item => {
            return {
              ...item,
              STAY: item.playbackDuration,
              inScreenMode: item.screenEntryMethod,
              screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
              tcontents: [
                {
                  ...item,
                  fontSpacing: item.fontSpacing,
                  fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
                  fontType: item.font,
                  fontColor: item.foregroundColor.toUpperCase(),
                  formatStyle: item.horizontalAlignment,
                  STAY: item.playbackDuration / 10,

                  content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
                }
              ]
            }
          })

          console.log('hui1111111111111', this.dialogInfoList)
        })
        .catch(e => {
          // this.$modal.msgError('回读失败,请重试')
        })
      // this.deviceId = deviceId

      // 根据情报板id获取分辨率
      /*getBoardInfo(deviceId).then(res => {
        console.log(res, 'getBoardInfo')
        this.form.devicePixel = res.data.pixel
        if (res.data.deviceId) {
          this.disabledButton = false
        } else {
          this.disabledButton = true
        }
      })*/
    },
    // 获取模板头部
    getTemplateHeaderFn() {
      this.moBanList = []
      getDicts('iot_template_category').then(res => {
        this.moBanDataHandList = res.data
        this.activeNames = res.data.map(item => {
          return item.dictCode
        })
        this.getTemplateFn()
      })
    },
    // 获取模板
    getTemplateFn() {
      getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => {
        this.moBanList = this.moBanDataHandList.map((item, index) => {
          if (item.dictSort === index) {
            return {
              ...item,
              mbList: res.data[index]
            }
          }
        })
      })
    },
    panelChangeFn(val) {
      console.log(val)
    },
    // 接收子组件新增待发模板
    addInfo(form) {
      // console.log('待发新增', form)
      this.dialogInfoList.push({
        id: form.id,
        screenSize: form.screenSize,
        COORDINATE: form.coordinate,
        ...form,
        tcontents: [{ ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }],
        id: Math.floor(Math.random() * 10000000000000000),
        txt: form.CONTENT,
        fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')),
        fm: form.FONT,
        formatStyle: form.formatStyle,
        ...this.processString(form.screenSize),
        ...this.processStrNum(form.COORDINATE)
      })
    },
    // 打开添加信息弹窗
    addMoDataInfoFn(type, mode) {
      this.$refs.addinfo.init('', type, mode)
    },
    // 修改弹窗
    editOutline(item, index, type) {
      this.showEmit = true
      this.index = index
      this.editType = type
      console.log('修改弹窗', item)
      this.boardEmitItem = {
        ...item,
        FONT_SIZE: item.tcontents[0].fontSize + 'px',
        COLOR: item.tcontents[0].fontColor,
        CONTENT: item.tcontents[0].content,
        COORDINATE: item.tcontents[0].coordinate,
        FONT: this.getFont(item.tcontents[0].fontType),
        SPEED: item.tcontents[0].fontSpacing,
        formatStyle: item.tcontents[0].formatStyle,
        ACTION: item.inScreenMode, //出屏方式
        STAY: item.stopTime, //停留时间
        type: type,
        screenSize: item.screenSize,
        category: item.category,
        id: item.id,
        tcontentsId: item.tcontents[0].id
      }
    },

    // 接收子组件form表单 修改
    receiveForm(form) {
      console.log('接收子组件form表单 修改111111111', form)
      this.formData = form
      console.log('开始的数据', this.dialogInfoList)
      this.dialogInfoList = this.dialogInfoList.map(item => {
        if (item.id === form.id) {
          return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
        }
        return item
      })
      console.log('修改后的数据', this.dialogInfoList)
      // this.getTemplateHeaderFn()
      this.$forceUpdate()
    },

    delMoFn(index) {
      console.log(index)
      // deleteTemplate(item.tcontents[0].templateId)
      this.dialogInfoList.splice(index, 1)
      // this.removeItemById(this.dialogInfoList, item.id)
    },
    putLeftFn(item) {
      console.log('点击事件', item)
      this.dialogInfoList.push({ ...item, STAY: item.stopTime })
      console.log('点击事件9990089089', this.dialogInfoList)
    },
    tabClickFn(tab, event) {
      console.log(tab, event)
    },
    closeDialogBtnFn() {
      this.dialogInfoLeft = false
      this.dialogInfoRight = false
    },
    showCeInfoFn() {
      if (this.dialogInfoCamera) {
        this.dialogInfoCamera = false
      }
      this.dialogInfoRight = !this.dialogInfoRight
    },
    showCameraInfoFn() {
      if (this.dialogInfoRight) {
        this.dialogInfoRight = false
      }
      this.dialogInfoCamera = !this.dialogInfoCamera
    },
    subjectBtnFn(item) {
      this.subjectBtn = item.id
    },
    closeCameraBtnFn() {
      this.dialogInfoCamera = false
    },
    dialogClose() {
      this.showEmit = false
      this.arrowRightVisible = false
    },
    removeItemById(arr, id) {
      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
      if (index !== -1) {
        arr.splice(index, 1) // 从数组中删除该项
      }
    },
    getScrollSz(w) {
      if (w > 760) {
        return 3
      } else if (w > 470) {
        return 2
      } else {
        return 1
      }
    },
    processString(str, x) {
      const parts = str.split('*') // 将字符串按照 '*' 分割成数组
      const w = parseInt(parts[0]) // 将第一个部分解析为整数
      const h = parseInt(parts[1]) // 将第二个部分解析为整数
      if (x === 'w') {
        return w
      } else if (x === 'h') {
        return h
      } else {
        return { w, h } // 返回包含 w 和 h 属性的对象
      }
    },
    processStrNum(str, x) {
      const pdl = parseInt(str.slice(0, 3)) // 截取前三位并解析为整数
      const pdt = parseInt(str.slice(3)) // 截取后三位并解析为整数
      if (x === 'l') {
        return pdl
      } else if (x === 't') {
        return pdt
      } else {
        return { pdl, pdt } // 返回包含 pdl 和 pdt 属性的对象
      }
    },
    getFont(font) {
      if (font == 'KaiTi' || font == 'k') {
        return '楷体'
      } else if (font == 'SimSun' || font == 's') {
        return '宋体'
      } else if (font == 'SimHei' || font == 'h') {
        return '黑体'
      } else if (font == 'FangSong' || font == 'f') {
        return '仿宋'
      } else if (font == 'LiSu' || font == 'l') {
        return '隶书'
      } else {
        return font
      }
    },
    // 转报文 字体
    getFontValue(font) {
      if (font == '黑体' || font == 'SimHei') return '1'
      if (font == '楷体' || font == 'KaiTi') return '2'
      if (font == '仿宋' || font == 'FangSong') return '4'
      if (font == '隶书' || font == 'LiSu') return '5'
      else return '3' //宋体
    },

    // 转报文 色号
    getColorValue(color) {
      if (color == '蓝色' || color == 'blue') return '0000FF'
      if (color == '绿色' || color == '#00FF00' || color == 'GreenYellow') return '00FF00'
      if (color == '红色' || color == 'red') return 'FF0000'
      if (color == '黄色' || color == 'yellow') return 'FFFF00'
      return 'FFFFFF' //白色
    },
    // 居中
    getTextAlign(font) {
      if (font == '0') {
        return 'left'
      } else if (font == '1') {
        return 'right'
      } else {
        return 'center'
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.map_dialog {
  width: 510px;
  height: 550px;
  background-color: pink;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-110%, -110%);
}
.dialog_info {
  width: 950px;
  height: 600px;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.dialog_info_left {
  width: 510px;
  height: 100%;
  background-color: #114c66;
}
.dialog_info_right {
  width: 430px;
  height: 556px;
  border: 2px solid #196980;
  background-color: #114c66;
  padding: 1vh 0.5vw;
  overflow-y: scroll;
  position: relative;
}
.dialog_head {
  width: 100%;
  height: 48px;
  padding: 0 10px;
  background-image: url('~@/assets/screen/xtb/qbbtit.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tit {
    color: #3de8ff;
    font-size: 18px;
  }
  .btnCls {
    width: 13px;
    height: 13px;
    cursor: pointer;
  }
  .deco {
    width: 55%;
    height: 5px;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.dialogContent {
  width: 100%;
  height: 300px;
  padding: 10px 40px 10px 10px;
  position: relative;
}
.dialogContent_box {
  width: 100%;
  // height: 100%;
  overflow-y: scroll;
}
.dialogContent_l {
  width: 355px;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  padding: 1px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogContent_r {
  width: 96px;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialogContent_l_xsq {
  width: 256px;
  height: 100%;
  font-size: 18px;
  color: #ff0000;
  background-color: #000;
  line-height: 1;
  // text-align: center;
  display: flex;
  // justify-content: center;
  align-items: center;
}

.show_r_btn {
  width: 1.67vw;
  height: 2.96vh;
  cursor: pointer;
}
.dialogContent_r_btn1 {
  background-image: url('~@/assets/screen/xtb/gg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_r_btn2 {
  background-image: url('~@/assets/screen/xtb/xx.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_r_btn3 {
  background-image: url('~@/assets/screen/xtb/zz.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialogContent_box_item {
  margin-bottom: 0.5vh;
  display: flex;
  justify-content: space-between;
}
.dialogContent_bottom {
  width: 105%;
  height: 16.52vh;
}
.show_bottom_tab_item {
  width: 50%;
  padding: 0.5vh 0;
  display: flex;
  // flex-wrap: wrap;
  // align-items: center;
}
.show_bottom_tab_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.show_bottom_tab_item_l {
  color: #3de8ff;
  font-size: 14px;
}
.show_bottom_tab_item_r {
  color: #fff;
  font-size: 14px;
  margin-left: 0.5vw;
}
.dialogContent_ce {
  position: absolute;
  right: 0%;
  top: 0%;
  width: 24px;
  height: 95px;
  padding: 0.5vh 0;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
.show_ce_img {
  width: 15px;
  height: 10px;
  transition: transform 0.3s ease; /* 过渡效果 */
}
.show_ce_txt {
  color: #fff;
  font-size: 13px;
}
.dialogContent_box_empty {
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.dialog_info_right_tit {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0.5vh;
}
.dialog_info_right_show {
  width: 100%;
  // height: 28vh;
}
.dialogContent_bottom_btn {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
.show_bottom_btn_add {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #00b3cc;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  margin-right: 0.5vw;
  cursor: pointer;
}
.show_bottom_btn_del {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #c87800;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  cursor: pointer;
}
.info_right_camera {
  width: 100%;
  height: calc(100% - 4vh);
  padding: 1vh 0.5vw;
}
.info_right_camera_top {
  width: 100%;
  height: 20vh;
}
.info_right_camera_bom {
  width: 100%;
  padding: 1vh 0;
  height: calc(100% - 20vh);
  display: flex;
}
.camera_bom_left {
  width: 50%;
  height: 100%;
  padding: 2vh 0;
  border-right: 1px dashed #285a71;
}
.camera_bom_right {
  width: 50%;
  height: 100%;
}
.camera_bom_left_item {
  width: 100%;
  color: #fff;
  display: flex;
  font-size: 14px;
  padding-bottom: 1.5vh;
}
.camera_bom_left_item_txt {
  width: 31%;
  color: #3de8ff;
}
.camera_bom_left_item_val {
  color: #fff;
  font-size: 13px;
}
.camera_bom_right_t {
  width: 100%;
  height: 60%;
  position: relative;
}
.camera_bom_right_b {
  width: 100%;
  height: 40%;
  // background-color: deeppink;
}
.camera_bom_right_t_box {
  width: 2vw;
  height: 4vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #005f87;
  border-radius: 50%;
  border: 1px solid #2191b1;
}
.camera_bom_right_t_h_po {
  width: 1vw;
  height: 5vh;
  position: absolute;
  left: 27%;
  top: 33%;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/xjleft.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.camera_bom_right_b_btn {
  width: 100%;
  padding: 0vh 2vw 1vh 2vw;
  display: flex;
  justify-content: space-between;
}
.camera_bom_right_b_btn_l {
  width: 1.2vw;
  height: 2.4vh;
  border-radius: 50%;
  background-image: url('~@/assets/screen/xtb/jhbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.camera_bom_right_b_btn_c {
  color: #fff;
}
.camera_bom_right_b_btn_r {
  width: 1.2vw;
  height: 2.4vh;
  border-radius: 50%;
  background-image: url('~@/assets/screen/xtb/addbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
//   background-color: #104b65;
//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   background-position: center;

/* 通用滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 设置滚动条宽度 */
  height: 3px; /* 设置滚动条高度 */
}

::-webkit-scrollbar-track {
  background-color: #114c66; /* 设置滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #9abce0; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #316076;
}

::v-deep .el-tabs__item.is-active {
  color: #3de8ff !important;
}
::v-deep .el-tabs__item {
  color: #fff !important;
}
::v-deep .el-tabs__active-bar {
  background-color: #3de8ff !important;
}
::v-deep .el-collapse-item__header {
  color: #fff;
  height: 28px;
  background-color: #053b4f;
  border: none;
  padding-left: 0.5vw;
}
::v-deep .el-collapse {
  color: #fff;
  border: none;
}
::v-deep .el-collapse-item__wrap {
  color: #fff;
  will-change: height;
  background-color: #053b4f;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 0.5vh;
  border: none;
}
::v-deep .el-collapse-item__content {
  margin-bottom: 0;
  padding: 0.5vh 0.5vw;
}
::v-deep .el-collapse-item {
  margin-bottom: 1vh;
}
::v-deep .el-input--mini .el-input__icon {
  line-height: 20px;
  color: #fff;
}
::v-deep .el-input--mini .el-input__inner {
  height: 20px;
  line-height: 20px;
  background-color: #086d8f;
  border: none;
  color: #fff;
}
</style>