<script setup lang="ts">
import { ref, watchEffect, onUnmounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus' // 添加这行引入Message组件
import dayjs from 'dayjs'

const url = 'http://112.33.111.160:8070'
// const url = 'http://192.200.200.196:8070'

// ----websocket
// 从HTTP URL转换为WSS URL
const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + ''

// WebSocket相关变量
let ws: WebSocket | null = null
let wsReconnectTimer: number | null = null
const wsReconnectInterval = 5000 // 重连间隔时间（毫秒）
const isWsConnected = ref(false)

// 初始化WebSocket连接
const initWebSocket = () => {
  console.log(wsUrl, 'wsUrl')
  // 关闭已存在的连接
  if (ws) {
    ws.close()
  }

  try {
    // 创建WebSocket连接
    ws = new WebSocket(wsUrl+'/ws/cyopcua')
    
    // 连接成功事件
    ws.onopen = () => {
      console.log('WebSocket连接成功')
      isWsConnected.value = true
      
      // 清除重连定时器
      if (wsReconnectTimer) {
        clearTimeout(wsReconnectTimer)
        wsReconnectTimer = null
      }
      
      // 连接成功后可以发送消息给服务器，如认证信息等
      // ws.send(JSON.stringify({ type: 'auth', data: 'some-token' }))
    }

    // 接收消息事件
    ws.onmessage = (event) => {
      try {
        console.log(event.data, '我是webSocket响应event.data')
        // 假设服务器返回的是JSON格式数据
        const data = JSON.parse(event.data)
        console.log(data, '我是webSocket响应data')
        handleWebSocketMessage(data)
      } catch (error) {
        console.error('解析WebSocket消息失败:', error)
      }
    }

    // 连接关闭事件
    ws.onclose = () => {
      console.log('WebSocket连接关闭')
      isWsConnected.value = false
      
      // 自动重连
      if (!wsReconnectTimer) {
        wsReconnectTimer = window.setTimeout(() => {
          console.log('尝试重新连接WebSocket...')
          initWebSocket()
        }, wsReconnectInterval)
      }
    }

    // 连接错误事件
    ws.onerror = (error) => {
      console.error('WebSocket连接错误:', error)
      isWsConnected.value = false
    }
  } catch (error) {
    console.error('创建WebSocket连接失败:', error)
  }
}
//当前批次
const currentBatch = ref('')
const currentTong = ref({})
// 处理WebSocket消息
const handleWebSocketMessage = (data: any) => {
  // 根据消息类型处理不同的数据
  if(data.type ==1){
    updateDeviceStatus(data.content)
  }
  if(data.type ==2){
    if('bucketNo' in data.content){
      console.log(data.content,'data.content')
      currentBatch.value = data.content.batchNo
       let obj:any = {
        samplecard2: data.content.bucketNo, // 当前桶号
        batchNo: data.content.batchNo, // 批次号
        sampleCode: data.content.sampleCode, // 采样码
        sampleWeight: data.content.weight, // 重量
      }
      currentTong.value = obj
      console.log(currentTong.value,'currentTong.value')
      batchList()
    }
  }
}

// 更新设备状态
const updateDeviceStatus = (data: any[]) => {
  
  if (data.length > 0) {
    data.forEach((item: any) => {
      if (item.point.plcNodeId === 'ns4;i=3') {
        if (modelData) modelData.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=24') { // 斗提机
        if (doutiji) doutiji.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=21') { // 二级皮带
        if (erjipidai) erjipidai.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=23') { // 螺旋输送机
        if (luoxuanshusongji) luoxuanshusongji.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=19') { // 初级给料皮带
        if (chujigeiliaopidai) chujigeiliaopidai.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=8') { // 正反转
        if (zhengfan) zhengfan.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=20') { // 破碎机
        if (posuiji) posuiji.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=22') { // 缩分器
        if (suofenqi) suofenqi.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=5') { // 缩分间隔时间
        if (suofenshijianjiange) suofenshijianjiange.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=2') { // 当前运行模式
        if (value) value.value = item.value == 1 ? false : true
      }
      if (item.point.plcNodeId === 'ns4;i=26') { // 封装机当前运行模式
        if (fengzhuangji) fengzhuangji.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=35') { // 封装机出桶成功
        if (fengzhuangjichutong) fengzhuangjichutong.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=39') { // 封装机出桶就绪
        if (fengzhuangjichutongjiuxu) fengzhuangjichutongjiuxu.value.val = item.value
      }
      if (item.point.plcNodeId === 'ns4;i=27') { // 采样头
        if (caiyangtou) caiyangtou.value.val = item.value
      }
    })
  }
}

// websocket
let value:any = ref(false)
let modelData:any = ref({
  id:2,
  val: ''
})
// 换桶重量
const huanbuckezhongliang = ref('')
const setHuanBuckeZhongLiang = async (weight:any) => {
  try {
    const response = await axios.put(url+'/opc/pointValue/updateMaxWeight?value='+weight)
    console.log(response.data,'换桶重量')
    if(response.data.code === 200){
      ElMessage.success('换桶重量设置成功')
    }else{
      ElMessage.error('换桶重量设置失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
    ElMessage.error('换桶重量设置失败')
  }
}
// 运行日志
const runData = async () => {
  try {
    const response = await axios.get(url+'/opc/pointValue/getAll')
    console.log(response.data,'运行日志')
    if(response.data.code === 200){
      if(response.data.data.length > 0){
        response.data.data.forEach((item:any) => {
         let valueDesc:any
          if(item.point['plcNodeId']){
             valueDesc = JSON.parse(item.point['valueDesc'])
          }else{
             item['val'] = item.value
          }
          console.log(valueDesc,item.value,'valueDesc')
          if(item.value ==='false'){
             item['val'] = valueDesc[false as any] || item.value
          }
          if(item.value ==='true'){
            item['val'] = valueDesc[true as any]|| item.value
          }
          if(item.value ==='1'){
            item['val'] = valueDesc[1 as any]|| item.value
          }
          if(item.value ==='2'){
             item['val'] = valueDesc[2 as any]|| item.value
          }
          if(item.value ==='0'){
             item['val'] = valueDesc[0 as any]|| item.value
          }
          if(item.value !=='false' && item.value !=='true' && item.value !=='1' && item.value !=='2' && item.value !=='0'){
            console.log(item.value,'其他')
            item['val'] = item.value
          }
          if(item.point.signalName === '最大重量'){ // 换桶重量 29
            huanbuckezhongliang.value = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=3'){
            console.log(item.value,'item.value采样模式')
            modelData.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=24'){ // 斗提机 
            console.log(item,'item')
            doutiji.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=21'){ // 二级皮带
            erjipidai.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=23'){ // 螺旋输送机 22
            luoxuanshusongji.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=19'){ // 初级给料皮带 18
            chujigeiliaopidai.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=8'){ // 正反转2
            console.log(item.value,'item.value正反转')
            zhengfan.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=20'){ // 破碎机 19
            posuiji.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=22'){ // 缩分器 21
            suofenqi.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=5'){ // 缩分间隔时间3
            suofenshijianjiange.value.val = item.value
          }
          
          if(item.point.plcNodeId === 'ns4;i=2'){ // 当前运行模式 1
           
            value.value=  item.value ==1?false:true
          }
          if(item.point.plcNodeId === 'ns4;i=26'){ // 封装机当前运行模式 25
            fengzhuangji.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=35'){ // 封装机出桶成功 34
            console.log(item,'封装机出桶成功')
            fengzhuangjichutong.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=39'){ // 封装机出桶就绪 38
            console.log(item,'封装机出桶就绪')
            fengzhuangjichutongjiuxu.value.val = item.value
          }
          if(item.point.plcNodeId === 'ns4;i=27'){ // 采样头 26
            console.log(item,'采样头')
            caiyangtou.value.val = item.value
          }
        })
      }
       tableData.value = response.data.data
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
// 控制历史记录dialog显示的变量
const historyDialogVisible:any = ref(false)



// 打开历史记录dialog
const historyData:any = ref([])
const openHistoryDialog = async() => {
  // 打开dialog
  const response = await axios.get(url+'/opc/log/sampleHeaderOut?pageNum=1&pageSize=1000&poindId=ns4;i=27') //?point.plcNodeId=ns4;i=27
  if(response.data.code === 200){
    let arr:any = []
     response.data.rows.forEach((item:any) => {
        if(item.point.plcNodeId === 'ns4;i=27'){
          
          let valueDesc:any
          if(item.point['plcNodeId']){
             valueDesc = JSON.parse(item.point['valueDesc'])
          }else{
             item['val'] = item.newValue
          }
          if(item.newValue ==='false'){
             item['val'] = valueDesc[false as any]
          }
          if(item.newValue ==='true'){
            item['val'] = valueDesc[true as any]
          }
          if(item.newValue ==='1'){
            item['val'] = valueDesc[1 as any]
          }
          if(item.newValue ==='2'){
             item['val'] = valueDesc[2 as any]
          }
          if(item.newValue ==='0'){
             item['val'] = valueDesc[0 as any]
          }
          arr.push(item)
        }
         
      })
    historyData.value = arr
  }else{
    ElMessage.error('获取失败')
  }
  // historyData.value = res.data.rows
  historyDialogVisible.value = true
}
const closeHistoryDialog = () => {
  historyDialogVisible.value = false
}
// 操作记录
const operationData = async () => {
  try {
    const response = await axios.get(url+'/opc/log/operation/list?pageNum=1&pageSize=1000')
    console.log(response.data,'操作记录')
    if(response.data.code === 200){
      response.data.rows.forEach((item:any) => {
         let valueDesc:any
          if(item.point['plcNodeId']){
             valueDesc = JSON.parse(item.point['valueDesc'])
          }else{
             item['val'] = item.newValue
          }
          if(item.newValue ==='false'){
             item['val'] = valueDesc[false as any] || item.newValue
          }
          if(item.newValue ==='true'){
            item['val'] = valueDesc[true as any] || item.newValue
          }
          if(item.newValue ==='1'){
            item['val'] = valueDesc[1 as any] || item.newValue
          }
          if(item.newValue ==='2'){
             item['val'] = valueDesc[2 as any] || item.newValue
          }
          if(item.newValue ==='0'){
             item['val'] = valueDesc[0 as any] || item.newValue
          }
      })
      operationTableData.value = response.data.rows
    }else{
      ElMessage.error('获取失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}

// 报警数据
const alarmData = async () => {
  try {
    const response = await axios.get(url+'/opc/alarm/list?cleared=false')
    console.log(response.data,'报警数据')
    if(response.data.code === 200){
      alarmTableData.value = response.data.rows
    }else{
      ElMessage.error('获取失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
    ElMessage.error('获取失败')
  }
}
const currentBatchIndex = ref(0) // 当前显示的桶样索引

// ... 然后添加左右箭头点击事件处理函数
// 切换到上一个桶样
const prevBatch = () => {
  if (batchRecord.value.length > 0) {
    currentBatchIndex.value = (currentBatchIndex.value - 1 + batchRecord.value.length) % batchRecord.value.length
  }
}

// 切换到下一个桶样
const nextBatch = () => {
  if (batchRecord.value.length > 0) {
    currentBatchIndex.value = (currentBatchIndex.value + 1) % batchRecord.value.length
  }
}
const batchRecord:any = ref([])
// 获取桶列表数据
const batchList = async()=>{
  try {
    const response = await axios.get(url+'/opc/batch/pagelist?batchNo='+currentBatch.value)
    console.log(response.data,'桶列表数据')
    if(response.data.code === 200){
      batchRecord.value = [currentTong.value,...response.data.rows]

    }else{
      ElMessage.error('获取失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
    ElMessage.error('获取失败')
  }
}

const doutiji:any = ref({
  id:23,
  nodeId:'',
  signalName: '斗提机',
  val: ''
})
const erjipidai:any = ref({
  id:20,
  nodeId:'',
  signalName: '二级皮带',
  val: ''
})
const luoxuanshusongji:any = ref({
  id:22,
  nodeId:'',
  signalName: '螺旋输送机',
  val: ''
})
const chujigeiliaopidai:any = ref({
  id:18,
  nodeId:'',
  signalName: '初级给料皮带',
  val: ''
})
const zhengfan:any = ref({
  id:2,
  nodeId:'',
  signalName: '上位机采样模式_opc',
  val: ''
})
const posuiji:any = ref({
  id:19,
  nodeId:'',
  signalName: '破碎机',
  val: ''
})
const suofenqi:any = ref({
  id:21,
  nodeId:'',
  signalName: '缩分器',
  val: ''
})
const suofenshijianjiange:any = ref({
  id:3,
  nodeId:'',
  signalName: '缩分间隔时间',
  val: ''
})
const caiyangtou:any= ref({
  id:26,
  nodeId:'',
  signalName: '采样头',
  val: ''
})

const fengzhuangji = ref({
  id: 25,
  nodeId:'',
  signalName: '封装机当前运行模式',
  val: ''
})
const fengzhuangjichutong = ref({
  id: 34,
  nodeId:'',
  signalName: '封装机出桶成功',
  val: ''
})
const fengzhuangjichutongjiuxu = ref({
  id: 38,
  nodeId:'',
  signalName: '封装机出桶就绪',
  val: ''
})

const tableData = ref([])
const operationTableData = ref([])
const alarmTableData = ref([])

// 轮询相关设置
const pollingInterval = ref(30000) // 5秒轮询一次
let pollingTimer: number | null = null
let isPolling = false

// 实现自动轮询功能
const startPolling = () => {
  // 防止重复启动轮询
  if (isPolling) return
  
  isPolling = true
  
  // 先立即执行一次
  runData()
  operationData()
  alarmData()
  
  // 设置定时器进行轮询
  pollingTimer = window.setInterval(() => {
    runData()
    operationData()
    alarmData()
  }, pollingInterval.value)
}

// 停止轮询
const stopPolling = () => {
  if (pollingTimer !== null) {
    clearInterval(pollingTimer)
    pollingTimer = null
    isPolling = false
  }
}
// 统计
const tongjiData:any=ref([])
const getTongjiData = async () => {
  const startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
  const endTime = dayjs().format('YYYY-MM-DD')
  try {
    const response = await axios.get(url+'/opc/batch/grouplist?startTime='+startTime+'&endTime='+endTime)
    console.log(response.data,'统计数据')
    if(response.data.code === 200){
     
      const result:any = []
      response.data.data.forEach((item: { list: any[]; batchNo: any; sampleCode: any }) => {
          if (item.list && item.list.length > 0) {
            item.list.forEach(bucket => {
              result.push({
                batchNo: item.batchNo,
                sampleCode: item.sampleCode,
                bucketNo: bucket.bucketNo,
                sampleWeight: bucket.sampleWeight || '-'
              })
            })
          }
      })
      tongjiData.value = result
    }else{
      ElMessage.error('获取失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}


// 在组件挂载时开始轮询
watchEffect(() => {
  // 初始化WebSocket连接
  initWebSocket()
  // 初始化时获取所有数据
  runData()
  operationData()
  alarmData()
  getTongjiData()
  
  // 然后开始runData的自动轮询
  startPolling()
})

// 在组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
  stopPolling()
  // 关闭WebSocket连接
  if (ws) {
    ws.close()
    ws = null
  }
  
  // 清除重连定时器
  if (wsReconnectTimer) {
    clearTimeout(wsReconnectTimer)
    wsReconnectTimer = null
  }
})
// 斗提机启停设置
const setDouTiji = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualBucketElevatorStartStop?value='+val, {
      // nodeId: 'ns4;i=13',
      value: val
    })
    console.log(response.data,'斗提机启停设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//二级皮带启停设置
const setErjiPidai = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualDivisionBeltStartStop?value='+val, {
      // nodeId: 'ns4;i=10',
      value: val
    })
    console.log(response.data,'二级皮带启停设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//螺旋输送机启停设置
const setLuoxuanshusongji = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualScrewConveyorStartStop?value='+val, {
      // nodeId: 'ns4;i=12',
      value: val
    })
    console.log(response.data,'螺旋输送机启停设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}

//溜管制样启停设置
const setLiuguankou = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualBelt1StartStop?value='+val)
    console.log(response.data,'溜管制样启停设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//破碎机启动停止设置
const setPosuiji = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualCrusherStartStop?value='+val, {
      nodeId: 'ns4;i=3',
      value: 1
    })
    console.log(response.data,'破碎机启动停止设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//缩分器启动停止设置
const setSuofenqi = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/manualDivisionMotorStartStop?&value='+val, {
      nodeId: '',
      value: val
    })
    console.log(response.data,'缩分器启动停止设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//缩分时间间隔设置
const setSuofenjiedian = async (val:any) => {
  console.log(val,'valxxx')
  try {
    const response = await axios.post(url+'/opc/control/sampleHeadDivisionInterval?value='+val.target.value)
    console.log(response.data,'缩分时间间隔设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
//当前采样系统运行模式设置 , {nodeId: 'ns4;i=2',value: val?'1':'0'}
const setRunningMode = async (val:any) => {
  //  value.value = val==2?true:false
  console.log(val,'当前采样系统运行模式设置')
  try {
    const response = await axios.post(url+'/opc/control/manualAutoMode?value='+val)
    console.log(response.data,'当前采样系统运行模式设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
// 采样系统启动停止
const setcaiyangSystem = async (val:any) => {
  console.log(val,'当前采样系统运行模式设置')
  try {
    const response = await axios.post(url+'/opc/control/sampleSystemStartStop?value='+val)
    console.log(response.data,'当前采样系统运行模式设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
const setCaiYangJiModel = async (val:any) => {
 
  console.log(val,'当前采样系统运行模式设置')
  try {
    const response = await axios.post(url+'/opc/control/sampleMode?value='+val)
    console.log(response.data,'当前采样系统运行模式设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
const jinjitingzhi = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/emergencyStop?value='+val, {
      nodeId: 'ns4;i=14',
      value: '1'
    })
    console.log(response.data,'初级给料皮带启停设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    }else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
const guzhangfuwei = async (val:any) => {
  try {
    const response = await axios.post(url+'/opc/control/faultReset?value='+val)
    console.log(response.data,'故障反馈设置')
    if(response.data.code === 200){
      ElMessage.success('指令发送成功')
      runData()
    } else{
      ElMessage.error('指令发送失败')
    }
  } catch (error) {
    console.error('请求失败:', error)

  }
}

const jiechu = async (item:any) => {
  try {
    const response = await axios.put(url+'/opc/alarm/clear/'+item.id)
    if(response.data.code === 200){
      ElMessage.success('解除报警成功')
      alarmData()
    }else{
      ElMessage.error('解除报警失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
  }
}
</script>

<template>
  <div>
    <div class="top">
      <img id="bg-image" src="./assets/header.png" alt="">
      <span>福泉公司1号火车采样机</span>
    </div>
    <div class="belt-sampling">
        <div class="left">
            <div class="item yunxingrizhi">
                <div class="title">运行日志</div>
                <el-table :data="tableData" :max-height="240">
                  <el-table-column prop="updateTime" label="时间" />
                  <el-table-column prop="point.signalName" label="设备"  />
                  <el-table-column prop="val" label="状态" >
                    <template #default="scope">
                     <div >{{scope.row.val}}</div>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
            <div class="item caozuojilu">
                <div class="title">操作记录</div>
                <el-table :data="operationTableData" :max-height="240">
                  <el-table-column prop="operateTime" label="时间" />
                  <el-table-column prop="point.signalName" label="设备"  />
                  <el-table-column prop="newValue" label="操作状态" >
                    <template #default="scope">
                      <div >{{scope.row.val}}</div> 
                    </template>
                  </el-table-column>
                  <el-table-column prop="operator" label="操作员"  />
                </el-table>
            </div>
            <div class="item baojingxinxi">
                <div class="title">报警信息</div>
                <el-table :data="alarmTableData" :max-height="240">
                  <el-table-column prop="alarmTime" label="时间" />
                  <el-table-column prop="alarmDesc" label="报警信息"  />
                  <el-table-column  label="操作" >
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="jiechu(scope.row)">解除报警</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="center">
            <div class="devices">
                <div class="center-top">
                    <img width="24" src="./assets/screen/common/video.png" alt="">
                    <div class="oprate">
                        <div>
                            <span class="model">当前运行模式:</span>
                             <el-switch
                                v-model="value"
                                inline-prompt
                                active-text="自动"
                                inactive-text="手动"
                                style="--el-switch-on-color: #1890ff; --el-switch-off-color: rgba(255, 255, 255, 0.5)"
                                disabled
                              />
                        </div>
                    </div>
                </div>
                <div class="device-content">
                    <img class="caiyang" width="95%" src="./assets/screen/belt-sampling/cai.png" alt="">
                    <div class="caiyangtong" >
                      <div class="caiyangtong-left caiyangtong-item" @click="prevBatch">&lt;</div>
                      <div class="caiyangtong-center">
                        <div class="center-item">
                          <img src="./assets/screen/belt-sampling/down.png" alt="">
                          <img width="35" src="./assets/screen/belt-sampling/bottle.png" alt="">
                        </div>
                        <div class="bottle-content">
                          <table>
                            <tbody>
                              <tr>
                                <td>当前桶号</td>
                                <td>{{ batchRecord[currentBatchIndex]?.samplecard2 || '-' }}</td>
                              </tr>
                              <tr>
                                <td>批次号</td>
                                <td>{{ batchRecord[currentBatchIndex]?.batchNo|| '-'  }}</td>
                              </tr>
                              <tr>
                                <td>采样码</td>
                                <td>{{ batchRecord[currentBatchIndex]?.sampleCode|| '-' }}</td>
                              </tr>
                              <tr>
                                <td>重量</td>
                                <td>{{ batchRecord[currentBatchIndex]?.sampleWeight|| '-'  }}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div class="caiyangtong-right caiyangtong-item" @click="nextBatch">&gt;</div>
                    </div>
                    <div class="infos">
                      <div class="tishengji info">
                            <div class="flex">
                              <div class="name">斗提机</div>
                              <div>
                                <i :class="{ 'green': doutiji.val == 1, 'red': doutiji.val != 1 }"></i>
                                <span>{{doutiji.val == 1 ? '运行' : '停止'}}</span>
                              </div>
                            </div>
                            <div class="btns">
                              <div><div class="btn blue" @click="setDouTiji(1)">启动</div></div>
                              <div><div class="btn red" @click="setDouTiji(2)">停止</div></div>
                            </div>
                        </div>
                        <div class="cijigeiliaopidai info">
                            <div class="flex">
                               <div class="name">二级皮带</div>
                              <div>
                                  <i :class="{ 'green': erjipidai.val == 1, 'red': erjipidai.val != 1 }"></i>
                                  <span>{{erjipidai.val ==1?'运行':'停止'}}</span>
                              </div>
                            </div>
                           
                             <div class="btns">
                                <div><div class="btn blue" @click="setErjiPidai(1)">启动</div></div>
                                <div><div class="btn red" @click="setErjiPidai(2)">停止</div></div>
                            </div>
                        </div>
                        <div class="luoxuanshusongji info">
                            <div class="flex">
                              <div class="name">螺旋<br/>输送机</div>
                              <div style="line-height: 36px;">
                                  <i :class="{ 'green': luoxuanshusongji.val == 1, 'red': luoxuanshusongji.val != 1 }"></i>
                                  <span>{{luoxuanshusongji.val ==1?'运行':'停止'}}</span>
                              </div>
                            </div>
                            <div class="btns">
                               <div><div class="btn blue" @click="setLuoxuanshusongji(1)">启动</div></div>
                              <div><div class="btn red" @click="setLuoxuanshusongji(2)">停止</div></div>
                            </div>
                        </div>
                        <div class="chujigeiliaopidai">
                          <div class="chujigeiliaopidai-item" style="border-bottom:1px solid #1890ff;">
                            <div class="name" style="width:100px;">初级给料皮带</div>
                            <div >
                                <i :class="{ 'green': chujigeiliaopidai.val == 1, 'red': chujigeiliaopidai.val != 1 }"></i>
                                <span>{{chujigeiliaopidai.val ==1?'运行':'停止'}}</span>
                            </div>
                          </div>
                          <div class="chujigeiliaopidai-item">
                            <div style="border-right: 1px solid #1890ff;">
                              <div style="border-bottom:1px solid #1890ff;">溜管口</div>
                              <div>制样口</div>
                            </div>
                            <div >
                              <div style="border-bottom:1px solid #1890ff;">
                                <i :class="{ 'green': zhengfan.val == 2, 'red': luoxuanshusongji.val != 2 }"></i>
                                <span>{{zhengfan.val ==2?'运行':'停止'}}</span>
                              </div>
                              <div>
                                <i :class="{ 'green': zhengfan.val == 1, 'red': zhengfan.val != 1 }"></i>
                                <span>{{zhengfan.val ==1?'运行':'停止'}}</span>
                              </div>
                              
                            </div>
                            <div class="btns" > 
                              <div><div class="btn blue" @click="setLiuguankou(2)">启动</div></div>
                              <div><div class="btn blue" @click="setLiuguankou(1)">启动</div></div>
                            </div>
                            <div class="btns" >
                              <div><div class="btn red" @click="setLiuguankou(3)">停止</div></div>
                            </div>
                            <div>
                             
                            </div>
                          </div>
                        </div>
                        <div class="posuiji info">
                            <div class="name" style="width:77px;">破碎机</div>
                            <div>
                                <i :class="{ 'green': posuiji.val == 1, 'red': posuiji.val != 1 }"></i>
                                <span>{{posuiji.val ==1?'运行':'停止'}}</span>
                            </div>
                            <div class="btns">
                              <div><div class="btn blue" @click="setPosuiji(1)">启动</div></div>
                              <div><div class="btn red" @click="setPosuiji(2)">停止</div></div>
                            </div>
                        </div>
                        <div class="suofenqi info-item">
                            <div>
                              <div class="suofenqi-item">
                                  <div class="name">缩分器</div>
                                  <div>
                                      <i :class="{ 'green': suofenqi.val == 1, 'red': suofenqi.val != 1 }"></i>
                                      <span>{{suofenqi.val ==1?'运行':'停止'}}</span>
                                  </div>
                                  
                              </div>
                              <div class="suofenqi-item">
                                <div>缩分间隔时间</div>
                                
                              </div>
                            </div>
                            <div class="model-time" >
                              <div>
                                <span  class="blue" @click="setSuofenqi(1)">启动</span>
                              </div>
                              <div><input style="width:20px;" type="text" v-model="suofenshijianjiange.val" @change="setSuofenjiedian" />s</div>
                            </div>
                        </div>
                        <div class="caiyangtou info-item">
                          <div class="caiyangtou-item">
                            <div class="name">采样头</div>
                            <div>
                              <i :class="{ 'green': caiyangtou.val == 1, 'red': caiyangtou.val != 1 }"></i>
                              <span>{{caiyangtou.val==1?'运行':'停止'}}</span>
                            </div>
                          </div>
                          <div style="border-top: 1px solid #1890ff;padding-top:4px;">
                            <div class="btn blue history" @click="openHistoryDialog">查询历史</div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="right">
            <div class="item task">
                <div class="title">采样系统</div>
                <table>
                  
                  <tbody>
                    <tr>
                      <td>采样模式</td>
                      <td>
                        <select class="se" style="width:145px;" v-model="modelData.val" @change="setCaiYangJiModel(modelData.val)">
                          <option value="1">采样</option>
                          <option value="2">溜管</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div class="caiyang-caozuo">
                          <div class="caozuo-btn fw" @click="setRunningMode(2)">自动</div>
                          <div class="caozuo-btn fw" @click="setRunningMode(1)">手动</div>
                          <div class="caozuo-btn fw" @click="setcaiyangSystem(1)">启动</div>
                          <div class="caozuo-btn tz" @click="setcaiyangSystem(2)">停止</div>
                          <div class="caozuo-btn tz" @click="jinjitingzhi(1)">紧急停止</div>
                          <div class="caozuo-btn fw" @click="guzhangfuwei(1)">故障复位</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            <div class="item task">
                <div class="title">封装机状态</div>
                <table>
                  <thead>
                    <tr>
                      <th>名称</th>
                      <th>状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>封装模式</td>
                      <td>{{fengzhuangji.val =='1'?'手动':'自动'}}</td>
                    </tr>
                    <tr>
                      <td>封装机出桶就绪</td>
                      <td>{{fengzhuangjichutongjiuxu.val==='false'?'无':'状态反馈' }}</td>
                    </tr>
                    <tr>
                      <td>封装机出桶成功</td>
                      <td>{{fengzhuangjichutong.val==='false'?'无':'状态反馈' }}</td>
                    </tr>
                    
                    <tr>
                      <td>换桶重量<input v-model="huanbuckezhongliang" type="text" style="width:40px;" @change="setHuanBuckeZhongLiang(huanbuckezhongliang)"/>kg</td>
                      <td></td>
                    </tr> 
                  </tbody>
                </table>
              </div>
             <div class="item task">
                <div class="title">统计</div>
                <el-table :data="tongjiData" :max-height="200">
                  <el-table-column prop="batchNo" label="批次号" />
                  <el-table-column prop="sampleCode" label="采样码"  />
                  <el-table-column prop="bucketNo" label="编号" />
                  <el-table-column prop="sampleWeight" label="桶重" />
                </el-table>
            </div>
        </div>
    </div>
     <el-dialog
        v-model="historyDialogVisible"
        title="采样头历史记录"
        width="26%" 
        :before-close="closeHistoryDialog"
        class="dark-dialog"
      >
        <el-table :data="historyData" style="width: 100%" max-height="200px">
          <el-table-column prop="batchNo" label="批次号" width="180" />
          <el-table-column prop="point.signalName" label="名称" width="120" />
          <el-table-column prop="newValue" label="状态" width="120" >
            <template #default="scope">
              {{scope.row.val}}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
  </div>
</template>

<style>
  .caiyangtong{
    width: 510px;
    margin: 0 auto;
    background-color: #172f4b;
    border-radius: 4px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    height: calc(100% - 690px);
    top:640px;
    display: flex;
    align-items: center;
    justify-content: center;
    .caiyangtong-left{
      width: 30px;
      height: 50px;
      font-size: 30px;
      color: #1f3c5d;
      font-weight: bold;
      margin-left:16px;
    }
  
    .caiyangtong-right{
      width: 30px;
      height: 50px;
      font-size: 30px;
      color: #1f3c5d;
      font-weight: bold;
      margin-left:10px;
    }
    .caiyangtong-item:hover{
      cursor: pointer;
      color: #1890ff;
     
    }
    .center-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .more{
      background-color: #1890ff;
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      margin-top: 8px;
      cursor: pointer;
    }
    .caiyangtong-center{
      width:calc(100% - 80px);
      display: flex;
      justify-content: space-around;
      gap:16px;
    }
  }
  .caiyang-caozuo{
    display: flex;
    justify-content: center;
    >div{
      padding: 4px 8px;
      border-radius: 4px;
      margin: 0 8px;
    }
  }
  .fw{
    background-color: #1890ff;
  }
  .tz{
    background-color: #ff4d4f;
  }
  .top{
    color: #fff;
    height: 90px;
    background-color: #0b2441;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    font-weight: bold;
  }
  #bg-image{
    position: absolute;
    top: 32px;
    left: 0;
    width: 100% !important;
    height: 49px !important;
  }
  table{
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse !important;
  }
  thead th{
    text-align: left;
    font-size: 14px;
    background-color: #263c57;
    padding: 8px 16px;
    border:none !important
  }
  td{
    padding: 8px 16px;
    font-size: 14px;
  }
  tr:nth-child(even) td{
    background-color:#263c57 ;
  }
  tr:hover{
    background-color: #263c57;
    cursor: pointer;
  }
 .belt-sampling{
    padding: 0 16px;
    display: flex;
    justify-self: space-between;
    gap:8px;
    background-color: #0b2441;
    height: calc(100% - 90px);
    overflow: hidden;
    color:#fff;
    font-family: "Helvetica Neue", Helvetica, "PingFang Sc", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
 }
 .btns{
    border-left:1px solid #1890ff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 44px;
 }
 .btns>div{
  flex:1;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .btns>div:first-child{
  border-bottom:1px solid #1890ff;
 }
.btn{
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  width: 26px;
  margin:0 auto;
  padding:1px;
}
.flex{
  display: flex;
  width: 100px;
}

.name{
  width:60px;
  text-align: center;
}
.left{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        flex:1;
}
.title{
        font-weight: bold;
        font-size:14px;
        color:#fff;
        padding:16px;
        text-align: center;
}
.model-time{
  border-left:1px solid #1890ff;
  display: flex;
  width:36px;
  flex-direction: column;
}
.model-time>div{
  line-height: 26px;
  text-align: center;
}
.model-time>div:nth-child(1){
  border-bottom:1px solid #1890ff;
}
.se{
    background: none;
    color: #fff;
    border: 1px solid #1830ff;
}
/* 设置option的样式 */
.se option {
    background-color: rgba(11, 36, 65, 0.95) !important;
    color: white !important;
    border: none !important;
    padding: 8px !important;
}
            
            /* 设置选中的option样式 */
            .se option:checked {
              background-color: rgba(24, 144, 255, 0.8) !important;
            }
            
            /* 悬停时的样式 */
            .se option:hover {
              background-color: rgba(24, 144, 255, 0.6) !important;
            }
            
      .item{
        background-color: #172F4B;
        margin-bottom:16px;
        padding: 0 16px;
        border-radius: 4px;
      }
     
        .yunxingrizhi{
            flex:1;
        }
        .caozuojilu{
             flex:1;
        }
           
        .baojingxinxi{
            flex:1;
        }
         .device-label{
        font-size: 14px;
      }
      .state-box{
        display: flex;
        align-items: center;
      }
      .state{
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            margin-right: 2px;
      }
      .state-text{
        font-size: 12px;
      }
      .state-box{
        display: flex;
         gap: 18px;
      }
      .state-item{
        display: flex;
        align-items: center;
      }
      .green{
        background-color: #53c41a;
      }
      .yellow{
        background-color: #ffd500;
      }
      .red{
        background-color: #ff4d4f;
      }
      .blue{
        background-color: #1890ff;
      }
      .history{
        width:60px;
        margin: 0 auto;
        text-align: center;
        margin-bottom:4px;
      }
     
        .center{
        min-width: 936px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex:2;
        }
        .devices{
            flex:3;
            position: relative;
        }
         .center-top{
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 12px;
                gap:24px;
            }
             .device-content{
                font-size: 12px;
                position: absolute;
                left: 0;
                top: 42px;
                bottom: 0;
                right: 0;
                margin: auto;
             }
             .caiyang{
              margin: auto;
              display: block;
              z-index: 2;
              position: absolute;
              z-index: 2;
              left: 0;
              right: 0;
              top: 35px;
             }
                .di{
                    position: absolute;
                    top: 436px;
                    z-index:1;
                    width:98%;
                    margin: 0 auto;
                }
                 .bottles{
                    position: absolute;
                    top: 580px;
                    display: flex;
                    width: 98%;
                    margin: 0 auto;
                    justify-content: space-between;
                    }
                    .bottles>div{
                      text-align: center;
                        flex:1;
                    }
                      .bottle{
                        width: 30px;
                    }
                .tong{
                  position: absolute;
                  top: 660px;
                  width: 100%;
                  margin: 0 auto;
                  padding-bottom: 16px;
                  height: calc(100% - 690px);
                  width:100%;
                   background-color: #172f4b;
                }
                .tong-list{
                  width: 98% !important;
                  margin:0 auto;
                  display: flex;
                  flex-direction: column;
                  gap:8px;
                  margin-top:16px;
                }
                .tong-item{
                  display: flex;
                  height: 38px;
                  line-height: 38px;
                  gap:8px;
                  /* background-color: #263c57; */
                  cursor: pointer;
                }
                .tong-item:nth-child(odd){
                  background-color: #263c57;
                }
                .tong-item:hover{
                  background-color: #263c57;
                }
                .tong-item span{
                  flex:1;
                  padding-left:16px;
                }
                .name{
                        font-size:14px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .info{
                        display: flex;
                        border-radius: 4px;
                        border: 1px solid #1890ff;
                        /* width:fit-content; */
                       
                        position: absolute;
                        align-items: center;
                        background-color: rgba(255, 255, 255, 0.05);
                        z-index:999;
                    }
                    .info-item{
                        border-radius: 4px;
                        border: 1px solid #1890ff;
                        width:fit-content;
                        padding: 8px 0px;
                        position: absolute;
                        background-color: rgba(255, 255, 255, 0.05);
                        cursor: pointer;
                        z-index:9;
                    }
                    .more>div{
                       border-bottom:none !important;
                            border-left:none !important;
                            border-right: none !important;
                            line-height: 13px;
                            padding-top: 18px !important;
                    }
                    .info-detail{
                      display: flex;
                      text-align: center;
                      height: calc(100% - 26px);
                    }
                    .info-detail>div{
                      flex:1;
                    }
                    .tishengji{
                        left: 24px;
                        /* top: 230px; */
                        top:364px;
                    }
                    .tishengji::before{
                      display: block;
                      content: '';
                      width: 1px;
                      height: 140px;
                      background-color: #1890ff;
                      position: absolute;
                      right: -32px;
                      top: -110px;
                      transform: rotate(26deg);
                    }
                    .tishengji::after{
                      position: absolute;
                      display: block;
                      content: '';
                      right: -67px;
                      top: -108px;
                      width: 8px;
                      height: 8px;
                      background-color: #1890ff;
                      border-radius: 50%;
                    }
                    .cijigeiliaopidai{
                        left: 24px;
                        top: 254px;
                    }
                    .cijigeiliaopidai::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 203px;
                        background-color: #1890ff;
                        position: absolute;
                        right: -92px;
                        top: -37px;
                        transform: rotate(115deg);
                    }
                    .cijigeiliaopidai::after{
                        position: absolute;
                        display: block;
                        content: '';
                        right: -190px;
                        top: 105px;
                        width: 8px;
                        height: 8px;
                        background-color: #1890ff;
                        border-radius: 50%;
                    }
                    .luoxuanshusongji{
                        left: 24px;
                        /* top: 290px; */
                        top:309px;
                    }
                    .luoxuanshusongji::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 184px;
                        background-color: #1890ff;
                        position: absolute;
                        right: -73px;
                        top: -11px;
                        transform: rotate(129deg);
                    }
                    .luoxuanshusongji::after{
                      position: absolute;
                      display: block;
                      content: '';
                      right: -150px;
                      top: 136px;
                      width: 8px;
                      height: 8px;
                      background-color: #1890ff;
                      border-radius: 50%;
                    }
                    .chujigeiliaopidai{
                        /* left:284px;
                        top: 44px; */
                        left:23px;
                        top:63px;
                        position: absolute;
                        border-radius: 4px;
                        border: 1px solid #1890ff;
                        width:fit-content;
                        /* padding: 8px 4px; */
                        cursor: pointer;
                        position: absolute;
                        background-color: rgba(255, 255, 255, 0.05);
                        z-index:9;
                    }
                    .chujigeiliaopidai::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 414px;
                        background-color: #1890ff;
                        position: absolute;
                        left: 340px;
                        top: -131px;
                        transform: rotate(99deg);
                    }
                    .chujigeiliaopidai::after{
                        position: absolute;
                        display: block;
                        content: '';
                        left: 542px;
                        top: 104px;
                        width: 8px;
                        height: 8px;
                        background-color: #1890ff;
                        border-radius: 50%;
                    }
                    .chujigeiliaopidai-item{
                      display: flex;
                      justify-content: center;
                      /* gap:8px; */
                    }
                    .chujigeiliaopidai-item:last-child>div{
                      /* border-right: 1px solid #1890ff; */
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      
                    }
                    .posuiji{
                        left:22px;
                        top: 137px;
                    }
                    .posuiji::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 368px;
                        background-color: #1890ff;
                        position: absolute;
                        right: -180px;
                        top: -120px;
                        transform: rotate(103deg);
                    }
                    .posuiji::after{
                        position: absolute;
                        display: block;
                        content: '';
                        right: -364px;
                        top: 102px;
                        width: 8px;
                        height: 8px;
                        background-color: #1890ff;
                        border-radius: 50%;
                    }
                    .suofenqi{
                        /* left:284px;
                        top: 217px; */
                        left: 24px;
                        top: 191px;
                        padding:0;
                        display: flex;
                    }
                    .suofenqi::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 243px;
                        background-color: #1890ff;
                        position: absolute;
                        right: -114px;
                        top: -50px;
                        transform: rotate(112deg);
                    }
                    .suofenqi::after{
                        position: absolute;
                        display: block;
                        content: '';
                        right: -231px;
                        top: 114px;
                        width: 8px;
                        height: 8px;
                        background-color: #1890ff;
                        border-radius: 50%;
                    }
                    .suofenqi-item{
                        display: flex;
                        justify-content: center;
                        align-items: anchor-center;
                        gap:8px;
                        height: 26px;
                      
                    }
                    .suofenqi-item:first-child{
                        border-bottom:1px solid #1890ff;
                    }
                    .info-detail>div{
                      display: flex;
                      flex-direction: column;
                    }
                    .info-detail>div>div{
                      flex:1;
                      line-height: 20px;
                      border:1px solid #1890ff;
                    }
                    .caiyangtou{
                        /* right: 145px;
                        top: 58px;
                        padding:0; */
                        left: 23px;
                        top: 0px;
                        padding: 0;
                    }
                    .caiyangtou::before{
                        display: block;
                        content: '';
                        width: 1px;
                        height: 478px;
                        background-color: #1890ff;
                        position: absolute;
                        right: -239px;
                        top: -183px;
                        transform: rotate(457deg);
                    }
                    .caiyangtou::after{
                        position: absolute;
                        display: block;
                        content: '';
                        left: 579px;
                        top: 82px;
                        width: 8px;
                        height: 8px;
                        background-color: #1890ff;
                        border-radius: 50%;
                    }
                    .caiyangtou-item{
                        display: flex;
                        justify-content: center;
                        align-items: anchor-center;
                        gap: 8px;
                        height: 26px;
                    }
                    i{
                        display: inline-block;
                        width:10px;
                        height:10px;
                        border-radius: 50%;
                        background-color: #52c41a;
                        margin-right:2px;
                        vertical-align: middle;
                    }
                    .oprate{
                      display: flex;
                      justify-content: space-around;
         
                  }
                  .oprate>div{
                        display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap:8px;
                  }
                  .xuhao{
                        flex:0.6;
                  }
                  .right{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex:1;
                  }
                  .huayanjieguo{
                    flex:3;
                  }
                  .charts{
                    height: calc(100% - 114px);
                    min-height: 560px;
                    overflow-y: auto;
                }
                 .chart-item{
                    height: 180px;
                    width:100%;
                }
            .zhibiao-oprate{
                height: 44px;
                margin-top: 8px;
            }
            .task{
              flex:1;
              padding:8px;
            }
            /* 移除el-table背景颜色的样式 */
            .el-table {
              background-color: transparent !important;
              color:#fff;
            }
            
            .el-table__header-wrapper,
            .el-table__body-wrapper {
              background-color: transparent !important;
             
            }
            
            .el-table th,
            .el-table tr,
            .el-table td {
              background-color: transparent !important;
              border-color: rgba(255, 255, 255, 0.1) !important;
               color:#fff;
            }
            
            .el-table--enable-row-hover .el-table__body tr:hover > td {
              background-color: rgba(255, 255, 255, 0.05) !important;
            }
            .el-table__cell{
              border:none !important;
            }
            .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
              border:none !important;
            }
            .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
              display: none !important;
            }
            .el-table thead{
              background-color: rgba(255, 255, 255, 0.05) !important;
            }
            .el-table__row:nth-child(even) td{
              background-color: rgba(255, 255, 255, 0.05) !important;
              /* background-color: rgba(255, 255, 255, 0.05) !important; */
            }
            /* 在样式部分添加 */
            .el-table__body-wrapper::-webkit-scrollbar {
              width: 6px; /* 滚动条宽度 */
            }

            .el-table__body-wrapper::-webkit-scrollbar-track {
              background: #f1f1f1; /* 滚动条轨道背景色 */
            }

            .el-table__body-wrapper::-webkit-scrollbar-thumb {
              background: #888; /* 滚动条滑块颜色 */
              border-radius: 3px; /* 滚动条滑块圆角 */
            }

            .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
              background: #555; /* 鼠标悬停时的滚动条滑块颜色 */
            }
           /* 深色主题对话框样式 */
  .dark-dialog {
    background-color: #172F4B !important; /* 与主页面卡片背景色一致 */
    border: 1px solid #263c57;
    color: #ffffff;
  }
  
  .dark-dialog .el-dialog__header {
    background-color: #172F4B !important;
    border-bottom: 1px solid #263c57;
    padding: 15px 20px;
  }
  
  .dark-dialog .el-dialog__title {
    color: #ffffff !important;
    font-size: 16px;
  }
  
  .dark-dialog .el-dialog__body {
    background-color: #172F4B !important;
    color: #ffffff;
    padding: 20px;
  }
  
  .dark-dialog .el-dialog__footer {
    background-color: #172F4B !important;
    border-top: 1px solid #263c57;
    padding: 10px 20px;
  }
  
  /* 关闭按钮样式 - 完全透明背景 */
  .dark-dialog .el-dialog__close {
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 18px;
  }
  
  .dark-dialog .el-dialog__close:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* 深色主题表格样式 */
  .dark-dialog .dark-table {
    background-color: #172F4B !important;
    color: #ffffff;
  }
  
  .dark-dialog .el-table th {
    background-color: #263c57 !important;
    color: #ffffff !important;
    border-right: 1px solid #172F4B !important;
  }
  
  .dark-dialog .el-table td {
    background-color: #172F4B !important;
    color: #ffffff !important;
    border-right: 1px solid #263c57 !important;
    border-bottom: 1px solid #263c57 !important;
  }
  
  .dark-dialog .el-table--border {
    border: 1px solid #263c57 !important;
  }
  
  .dark-dialog .el-table--border th,
  .dark-dialog .el-table--border td {
    border-right: 1px solid #263c57 !important;
  }
  
  .dark-dialog .el-table__empty-text {
    color: #ffffff !important;
  }
</style>
