iTDM-web/itdmWeb/src/views/module-iTDM/itdmScreen/itdmScreenIndex.vue

<template>
  <div class="bg">
    <!-- 头部 -->
    <div class="header">检测试验监控管理平台</div>
    <!-- <div>
      <a-button class="fanHui" @click="back">返回</a-button>
    </div> -->

    <div class="l1">
      <div class="leHeader">
        <span>试验电压数据</span>
      </div>
      <div class="l1cen">
        <div class="l1item">A线电压</div>
        <div class="l1item2">{{ this.tY1.voltageA }}V</div>
        <div class="l1item">B线电压</div>
        <div class="l1item2">{{ this.tY1.voltageB }}V</div>
        <div class="l1item">C线电压</div>
        <div class="l1item2">{{ this.tY1.voltageC }}V</div>
      </div>
    </div>

    <div class="l2">
      <div class="leHeader">
        <span>温箱试验数据</span>
      </div>
      <div class="geXian"></div>
      <div class="l1Ta">
        <a-table
        ref="tableW"
        size="small"
        rowKey="id"
        :scroll="{ y: 'calc(100vh - 600px)' }"
        :columns="columnsW"
        :dataSource="tableDataW"
        :pagination="false">
        </a-table>
      </div>
    </div>

    <div class="l3">
      <div class="leHeader">
        <span>力学试验数据</span>
      </div>
      <div class="geXian"></div>
      <div class="l1Ta">
        <a-table
        ref="tableL"
        size="small"
        rowKey="id"
        :scroll="{ y: 'calc(100vh - 600px)' }"
        :columns="columnsL"
        :dataSource="tableDataL"
        :pagination="false">
        </a-table>
      </div>
    </div>

    <div class="cen">
      <div class="ceHeader">
        <div>设备运行状况</div>
        <div  class="ceHeader2 jc-end">
          <a-button class="all" size="small" @click="zhengchang()">全部</a-button>
          <a-button class="success" size="small" @click="zhengchang(1)">运行中</a-button>
          <a-button class="butDanger" size="small" @click="zhengchang(2)">报警</a-button>
          <a-button class="danger" size="small" @click="zhengchang(3)">故障</a-button>
          <a-button class="info" size="small" @click="zhengchang(0)">待机</a-button>
        </div>
      </div>
      <div class="cen1">
        <div class="c1Ta">
          <!-- 设备参数状态 -->
          <div class="device-data u-flex">
            <div class="item-container" v-for="(item, index) in deviceOptions" :key="index" @click="graph(item)">
              <div class="font">{{item.deviceName}}</div>
              <div class="u-flex-cjac">
                <a-row class="row-top">
                  <a-col :span="12"><div class="grid-content2 bg-purple bt-top" style="padding-top: 10px;">设备编号:</div></a-col>
                  <a-col :span="12"><div class="grid-content2 bg-purple-light bt-top" style="font-size:8px;padding-top: 1px;">{{item.deviceNo}}</div></a-col>
                  <a-col :span="12"><div class="grid-content bg-purple"  >设备状态:</div></a-col>
                  <a-col :span="12">
                    <div v-if="item.deviceStatus == 0" class="grid-content bg-purple-light">待机</div>
                    <div v-if="item.deviceStatus == 1" class="grid-content bg-purple-light" style="color:#1EFFD5;">运行中</div>
                    <div v-if="item.deviceStatus == 2" class="grid-content bg-purple-light">报警</div>
                    <div v-if="item.deviceStatus == 3" class="grid-content bg-purple-light">故障</div>
                    <div v-if="item.deviceStatus == 4" class="grid-content bg-purple-light"></div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ceHeader">
        <span>报警信息</span>
        <a-button class="pause" size="small" @click="pause">{{typeAll ?'开启播报':'关闭播报' }}</a-button>
      </div>
      <div class="cen2">
        <div class="c2Ta">
          <a-table
          ref="tableB"
          size="small"
          rowKey="id"
          :scroll="{ y: 'calc(100vh - 600px)' }"
          :columns="columnsB"
          :dataSource="tableDataB"
          :pagination="false">

            <span slot="action" slot-scope="text, record">
              <!-- <a @click="yuYingDele(record)">删除</a> -->
              <a-popconfirm title="确定删除吗?" @confirm="() => yuYingDele(record)">
                <a style="color:#0AE2E2;">删除</a>
              </a-popconfirm>
              <!-- <a-button @click="yuYingDele(record)">
                <template #icon><SearchOutlined /></template>
              </a-button> -->
            </span>
          </a-table>
        </div>
      </div>
    </div>

    <div class="r1">
      <div class="leHeader">
        <span>水液位实时监控</span>
      </div>
      <div class="l1cen">
        <div class="shuiyewei">
          <div class="echarts" style="height:100%" ref="zhuzhuang"></div>
        </div>
      </div>
    </div>

    <div class="r2">
      <div class="leHeader">
        <span>区域环境数据</span>
      </div>
      <div class="geXian"></div>
      <div class="r2Ta">
        <a-table
          ref="tabletY2"
          size="small"
          rowKey="id"
          :scroll="{y:true}"
          :columns="columnstY2"
          :dataSource="tY2"
          :pagination="false">

            <div slot="areaName" slot-scope="text, record">
              <span v-if="record.areaName ==1">温箱</span>
              <span v-if="record.areaName ==2">力学</span>
              <span v-if="record.areaName ==3">霉菌</span>
            </div>
          </a-table>
      </div>
      <div class="geXian"></div>
      <div class="inOrout">
        <div class="iOo">
          <div class="ioitem">进水口温度</div>
          <div class="ioitem">进水口水压</div>
        </div>
        <div class="iOo">
          <div class="ioitem">{{ this.tY1.inTemperature }}℃</div>
          <div class="ioitem">{{ this.tY1.inWaterPressure }}</div>
        </div>
        <div class="iOo">
          <div class="ioitem">出水口温度</div>
          <div class="ioitem">出水口水压</div>
        </div>
        <div class="iOo">
          <div class="ioitem">{{ this.tY1.outTemperature }}℃</div>
          <div class="ioitem">{{ this.tY1.outWaterPressure }}</div>
        </div>
      </div>
    </div>

    <div class="r3">
      <div class="leHeader">
        <span>设备维护数据</span>
      </div>
      <div class="geXian"></div>
      <!-- <div class="shuiyewei2">
        <div class="echarts" style="height:95%" ref="zhexian"></div>
      </div> -->
      <div class="l1Ta">
        <a-table
          ref="tableS"
          size="small"
          rowKey="id"
          :scroll="{ y: 'calc(100vh - 600px)' }"
          :columns="columnsS"
          :dataSource="tableDataS"
          :pagination="false">

            <span slot="action" slot-scope="text, record">
              <a @click="handle(record)" style="color:#0AE2E2;">处理完成</a>
            </span>
          </a-table>
      </div>
    </div>


    <j-modal
      :title="title"
      :width="width"
      :visible="handleOpen"
      class="dialog"
      @ok="submitForm"
      @cancel="handleCancel"
      cancelText="关闭">

      <a-form-model ref="form" :model="form" :rules="rules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mima">
              <a-input-password v-model="form.mima" placeholder="请输入密码"  ></a-input-password>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-modal>



  </div>
</template>

<script>
// import * as echarts from 'echarts'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { message } from 'ant-design-vue';
import {delBaojing, confirmPa} from '@/api/api'
  export default {
    name: 'itdmScreenIndex',
    data () {
      return {
        // websocket
        // path: 'ws://192.168.2.244:8080/itdmServer/itdmWebsocket/list2',
        path: 'ws://127.0.0.1:8080/itdmServer/itdmWebsocket/list2',
        socket: '',

        // 表头
        columnsW: [
          { title:'设备名称', align:"center", dataIndex: 'deviceName', },
          { title:'温度', align:"center", dataIndex: 'temperature', },
          { title:'湿度', align:"center", dataIndex: 'humidity', },
          { title:'A相电流', align:"center", dataIndex: 'currentA', },
          { title:'B相电流', align:"center", dataIndex: 'currentB', },
          { title:'C相电流', align:"center", dataIndex: 'currentC', },
        ],
        columnsL: [
          { title:'设备名称', align:"center", dataIndex: 'deviceName' },
          { title:'水温', align:"center", dataIndex: 'waterTemperature', },
          { title:'水压', align:"center", dataIndex: 'waterPressure', },
          { title:'电流', align:"center", dataIndex: 'current', },
          { title:'电压', align:"center", dataIndex: 'voltage', },
        ],
        columnsB: [
          { title:'设备名称', align:"center", dataIndex: 'deviceName', width: 80},
          { title:'类型', align:"center", dataIndex: 'valueType', width: 80 },
          { title:'数据', align:"center", dataIndex: 'value', },
          { title:'上限', align:"center", dataIndex: 'maxValue', },
          { title:'下限', align:"center", dataIndex: 'minValue', },
          { title:'报警信息', align:"center", dataIndex: 'alarmMessage', width: 260, },
          { title:'状态', align:"center", dataIndex: 'action', scopedSlots: { customRender: 'action' }  },
        ],
        columnstY2: [
          { title:'区域名称', align:"center", dataIndex: 'areaName', scopedSlots: { customRender: 'areaName' } },
          { title:'温度', align:"center", dataIndex: 'temperature', },
          { title:'湿度', align:"center", dataIndex: 'humidity', },
          { title:'气压', align:"center", dataIndex: 'airPrassure', },
        ],
        columnsS: [
          { title:'设备名称', align:"center", dataIndex: 'deviceName', width: 80 },
          { title:'设备编号', align:"center", dataIndex: 'deviceNo', },
          { title:'维护时间', align:"center", dataIndex: 'repairTime', },
          { title:'剩余天数', align:"center", dataIndex: 'day', width: 80},
          { title:'操作', align:"center", dataIndex: 'action', width: 75, scopedSlots: { customRender: 'action' }  },
        ],
        // 通用数据1（电压、进水口出水口温度、水压）
        tY1: [],
        // 通用数据2（三个区域温度、湿度、气压）
        tY2: [],
        // 温箱试验数据
        tableDataW: [],
        // 力学试验数据
        tableDataL: [],
        // 设备维护数据
        tableDataS: [],
        // 选择设备
        deviceOptions: [], // 所有设备
        allDevOptions: [], // 备用所有设备
        // 报警数据
        tableDataB: [],
        // 语音播报
        boBaoWZ: [],
        yuYin: [],
        // 停止播报按钮状态
        typeAll: false,
        // // 历史预警统计
        getYJ: [],
        // 单条语音播报id
        yuYing: {
          deleteId: null,
          alarmType: null,
        },
        shuiyewei: null,
        title: '密码验证',
        width:800,
        handleOpen: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: {
          id: 1,
          deviceId: null,
          mima: null,
        },
        // 表单校验
        rules: {
          mima: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        }
      }
    },
    mounted () {
      // 设备初始化
      this.init()
      this.drawzhuzhuang() //绘制柱状图
      // this.drawZhexian() // 绘制折线图
      window.speechSynthesis.resume(this.voiceContent) // 继续播报
      // echarts自适应
      window.addEventListener("resize", () =>{
        this.zhuChart.resize();
        // this.zheChart.resize();
      });
    },
    destroyed () {
      console.log(1111)
      // 销毁监听
      // this.close()
      this.socket.close()
      window.speechSynthesis.cancel(this.voiceContent)
    },
    methods: {
      // 返回按钮
      back(){
        this.typeAll = false
        // this.$router.push('/visualization2')
        this.$router.go(-1);//返回上一层
      },
      // 停止播报按钮
      pause(){
        this.typeAll = !this.typeAll
        if (this.typeAll){
          window.speechSynthesis.cancel(this.voiceContent)
        }else{
          window.speechSynthesis.speak(this.voiceContent);
        }
      },
      // 查看折线图
      graph(item){
        console.log(item)
        // this.$router.push({path: '/data/wdz2/data/list',query:{deviceNamecj:this.deviceName,activeName: '7'}})
        this.$router.push({path: '/itdmScreen/itdmGraph', query:{id:item.id, deviceName:item.deviceName}})
      },
      // 设备状况按钮
      zhengchang(num){
        console.log(num)
        this.deviceOptions = []
        console.log(this.deviceOptions)
        var deOption = this.allDevOptions
        if( !num && num == undefined ){
          this.deviceOptions = this.allDevOptions
          return false
        }
        for (var i = 0; i < deOption.length; i++) {
          console.log(deOption[i].deviceStatus)
          if(deOption[i].deviceStatus == num){
            this.deviceOptions.push(deOption[i])
            console.log(this.deviceOptions)
          }
        }
      },
      // 单条语音删除按钮
      yuYingDele(record){
        console.log(record)
        console.log(record.id)
        this.yuYing.deleteId = record.id
        this.yuYing.alarmType = record.alarmType
        console.log(this.yuYing)
        delBaojing(this.yuYing).then(res =>{
          console.log(res)
        })
      },
      // 语音播报
      voiceBroadcast(text){
        this.voiceContent = new SpeechSynthesisUtterance(text);
        this.voiceContent.volume = 100;
        this.voiceContent.rate = 1;
        this.voiceContent.pitch = 1.5;
        console.log(this.voiceContent);
        window.speechSynthesis.speak(this.voiceContent)
      },
      // 处理按钮
      handle(record){
        console.log(record)
        this.reset();
        this.form.deviceId = record.deviceId
        this.handleOpen = true
      },
      // 取消按钮
      cancel() {
        this.handleOpen = false;
        this.reset();
      },
      reset() {
        this.form = {
          id: 1,
          deviceId: null,
          mima: null,
        };
      },
      handleCancel () {
        // this.close()
        this.handleOpen = false;
      },
      // 提交按钮
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form)
            confirmPa(this.form).then(res => {
              if (res.success) {
                message.success("设备已维护");
                this.handleOpen = false;
              } else {
                message.error('密码错误，维护失败！');
                this.form.mima = null;
              }
            })
          }
        });
      },
      // 水液位柱状图
      drawzhuzhuang(){
        var chartDom = this.$refs.zhuzhuang
        this.zhuChart = echarts.init(chartDom);
        var option;

        option = {
            // backgroundColor: '#001037',
            grid: {
                top: '0',
                left: '0',
                right: '2%',
                bottom: '14%',
            },
            tooltip: {
                show: false,
                trigger: 'axis',
                backgroundColor: 'rgba(65,114,231,0.8)',
                formatter: function (item) {
                    return item[0].axisValueLabel + '<br />' + item[0].seriesName + ': ' + item[0].data;
                },
            },
            yAxis: {
                show: false,
                data: ['1月'],
                axisLine: {
                    lineStyle: {
                        color: '#0a4980',
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#ADD6FF',
                        fontSize: 12,
                    },
                },
            },
            xAxis: [
                {
                    show: false,
                    type: 'value',
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0a4980',
                        },
                    },
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        textStyle: {
                            color: '#ADD6FF',
                        },
                    },
                },
            ],
            series: [
                {
                    name: '水液位',
                    type: 'bar',
                    barWidth: 12,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgb(5,27,56)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(36,188,255)', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    // data: [1.5],
                    z: 0,
                    zlevel: 0,
                    label: {
                        show: true,
                        color: '#92E6EF',
                        position: 'right',
                    },
                },
                {
                    type: 'bar',
                    barGap: '-125%',
                    // data: [6],
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            barBorderColor: 'rgb(148,217,249)',
                            barBorderWidth: 1,
                        },
                    },
                    z: 2,
                    // data: this.tY1.waterLevel
                },
            ],
        };option && this.zhuChart.setOption(option);
      },
      // websocket
      init: function () {
        if(typeof(WebSocket) === "undefined"){
            alert("您的浏览器不支持socket")
        }else{
          // 实例化socket
          this.socket = new WebSocket(this.path)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          // 监听销毁
          this.socket.onclose = this.close
        }
      },
      open: function () {
          console.log("socket连接成功")
      },
      error: function () {
          console.log("连接错误")
      },
      getMessage: function (msg) {
        // console.log(msg.data,JSON.parse(msg.data))
        // console.log(JSON.parse(msg.data).length)
        var wsData = JSON.parse(msg.data)
        console.log(wsData)
        for (var i = 0; i < wsData.length; i++) {
          console.log(wsData[i].name)
          // 通用数据1
          if(wsData[i].name == '通用数据1'){
            this.tY1 = wsData[i].data
            this.shuiyewei = Number(this.tY1.waterLevel) + 1 +""
            console.log(11111111111,this.tY1)

            let that = this
            this.zhuChart.setOption({
              series: [{
                // 根据名字对应到相应的系列
                name: '水液位',
                type: 'bar',
                data: [that.tY1.waterLevel]
              },
              {
                    type: 'bar',
                    barGap: '-125%',
                    barWidth: 18,
                    z: 2,
                    data: [that.shuiyewei]
                },]
            });

            // this.$nextTick(() => {
            //   this.drawzhuzhuang()
            // })
          }
          // 通用数据2
          if(wsData[i].name == '通用数据2'){
            this.tY2 = wsData[i].data
            console.log(22222222222,this.tY2)
          }
          // 温箱试验数据
          if(wsData[i].name == '温箱试验数据'){
            this.tableDataW = wsData[i].data
            // console.log(this.tableDataW)
          }
          // 力学试验数据
          if(wsData[i].name == '力学设备试验数据'){
            this.tableDataL = wsData[i].data
            // console.log(this.tableDataL)
          }
          // 设备状态
          if(wsData[i].name == '设备运行状况'){
            this.deviceOptions = wsData[i].data
            this.allDevOptions = wsData[i].data
            console.log(123456,this.deviceOptions)
          }
          // 报警列表
          if(wsData[i].name == '报警列表'){
            this.tableDataB = wsData[i].data
            console.log(this.tableDataB)
          }
          // 设备维护列表
          if(wsData[i].name == '设备维护预警'){
            this.tableDataS = wsData[i].data
            console.log(this.tableDataS)
          }
          // 语音播报
          if(wsData[i].name == '语音列表' && this.typeAll == false){
            // 1.由于所有异常数据全部读取，停止上一次
            window.speechSynthesis.cancel(this.voiceContent)
            // console.log(window.speechSynthesis.speaking)

            // 2.开始这一次
            this.boBaoWZ = wsData[i].data.map((item) => {
              // console.log(item)
              return item.voice
            })
            // console.log(this.boBaoWZ)

            // // 3.判断是否正在读
            // if (window.speechSynthesis.speaking !== false) {
            //    this.voiceBroadcast(this.boBaoWZ)
            // }else{
            //   this.yuYin = this.boBaoWZ
            //    this.voiceBroadcast(this.yuYin)
            // }


            this.voiceBroadcast(this.boBaoWZ)
          }
          // 历史预警统计
          // if(wsData[i].name == 'y'){
          //     this.getYJ = wsData[i].data
          //     console.log(this.getYJ)

          //     this.zheChart.setOption({
          //       series: [{
          //         // 根据名字对应到相应的系列
          //         name: '报警',
          //         type: 'line',
          //         data: this.getYJ
          //       }]
          //     });
          //   }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
/* flex布局 */
.u-flex,.u-flex-ac,.u-flex-jac,.u-flex-jab,.u-flex-jaa,.u-flex-cjac,.u-flex-cjab,.jc-end{ display: flex; }
.fd-column,.u-flex-cjac,.u-flex-cjab{ flex-direction: column; }
.jc-center,.u-flex-jac,.u-flex-cjac{ justify-content: center; }
.jc-sb,.u-flex-jab,.u-flex-cjab{ justify-content: space-between; }
.jc-sa,.u-flex-jaa{ justify-content: space-around; }
.jc-start{ justify-content: flex-start; }
.jc-end{ justify-content: flex-end; }
.ai-center,.u-flex-ac,.u-flex-jab,.u-flex-jac,.u-flex-jaa,.u-flex-cjac{ align-items: center; }
.ai-start{ align-items: flex-start; }
.ai-end{ align-items: flex-end; }
.ai-stretch{ align-items: stretch; }
.f1{ flex: 1; }
.f-auto{ flex: auto; }
.bg{
  width: 100%;
  height: 100%;
  background: url('../../../assets/images/big.jpg') no-repeat center center;
  overflow: hidden;
}
.header{
  width: 100%;
  height: 60px !important;
  background: url('../../../assets/images/titleBg22.png') no-repeat center center;
  background-size: cover 100%;
  line-height: 60px;
  text-align: center;
  font-size: 35px;
  letter-spacing: 5px;
  color: rgb(188, 255, 252);
  font-weight: bold;
}
.leHeader{
  padding-left: 10px;
  width: 100%;
  height: 22px;
  // background-color: aquamarine;
  color: #44bae0;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
}
.ceHeader{
  padding-left: 10px;
  width: 50%;
  height: 22px;
  // background-color: aquamarine;
  color: #44bae0;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
}
.ceHeader2{
  padding-right: 10px;
  width: 50%;
  height: 30px;
  // background-color: aquamarine;
  color: #44bae0;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
  position: absolute;
  right: 0;
  top: 1.5%;
}
.geXian{
  margin-top: 3px;
  background: url('../../../assets/images/up.png') no-repeat center center;
  background-size: auto 220%;
  // background-color: rgb(255, 204, 127);
  width: 100%;
  height: 3%;
}
.cen{
  margin: 0 10px 18px 10px;
  padding: 0.5% 0 0 0;
  width: 40%;
  height: 88%;
  background-color: #27a0d41b !important;
  // background: url('../../../assets/images/bg.png') no-repeat center center;
  background-size: auto 111.3%;
  // background: url('../../../assets/images/2/center2.png') no-repeat center center;
  // background-size: contain;
  position: absolute;
  left: 29.4%;
  top: 10%;
  // bottom: 0%;
    // // 滚动条
    // overflow-y: auto;
    // 设备布局
    .device-data{
      flex-wrap: wrap;
      // 每一个设备
      .item-container{
        width: calc(24.5% - 6px);
        height: 106px;
        margin-bottom: 8px;
        margin-left: 2px;
        margin-right: 6px;
        font-size: 15px;
        padding-top: 3px;
        // border: 3px solid #148cb1;
        // border-width: 140px 40px 90px 40px;
        background-image:linear-gradient(0deg, #05799c, #05799c38);
        box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
        // border-image: url('../../assets/images/bgs.png') 60 100 50 90 fill;
        border-image-width: 26px 40px 18px 32px;
        border-image-repeat: stretch;
        position: relative;
      }
    }
}
.cen1{
  padding-top: 3px;
  margin: 9px 0 0 0;
  height: 55%;
  width: 100%;
  // 滚动条
    // overflow-y: auto;
}
.cen2{
  margin: 9px 0 0 0;
  height: 36%;
  width: 100%;
  // background-color: aquamarine;
  // 滚动条
    // overflow-y: auto;
}
.c1Ta{
  width: 97%;
  height: 97%;
  margin: 5px 10px 5px 10px;
  // background-color: aquamarine;
  // 滚动条
  overflow-y: auto;
}
.c2Ta{
  width: 97%;
  height: 88%;
  margin: 5px 10px 5px 10px;
  // background-color: aquamarine;
}
.l1{
  padding-top: 0.5%;
  margin-left: 10px;
  height: 10%;
  width: 28.5%;
  background-color: #10376469;
  position: absolute;
  top: 10%;
}
.l1cen{
  height: 70%;
  width: 100%;
  margin: 10px 10px 0px 10px;
  // background-color: #06c4c437;
  display: flex;
  // justify-content: center;
}
.l1item{
  height: 70%;
  width: 16%;
  // background-color: #446185;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c6f7ff;
  font-size: 14px;
  border: 1px solid #0A5D89;
}
.l1item2{
  height: 70%;
  width: 16%;
  background-color: #0A5D89;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c6f7ff;
  font-size: 14px;
  border: 1px solid #0A5D89;
}
.l2{
  padding-top: 2%;
  margin-left: 10px;
  width: 28.5%;
  height: 42%;
  // background-color: #0f356169;
  // height: 47%;
  background: url('../../../assets/images/bg.png') no-repeat center center;
  background-size: auto 100%;
  position: absolute;
  top: 19%;
}
.l1Ta{
  width: 96%;
  height: 79%;
  margin: 5px 10px 0px 10px;
  // background-color: aquamarine;
  // overflow-y: auto;
}
.l3{
  padding-top: 2%;
  margin-left: 10px;
  width: 28.5%;
  height: 42%;
  // background-color: #0f356169;
  // height: 47%;
  background: url('../../../assets/images/bg.png') no-repeat center center;
  background-size: auto 100%;
  position: absolute;
  bottom: 0%;
}
.r1{
  margin-right: 10px;
  padding-top: 0.5%;
  margin-left: 10px;
  height: 10%;
  width: 28.5%;
  background-color: #10376469;
  position: absolute;
  right: 0px;
  top: 10%;
}
.r2{
  padding-top: 2%;
  margin-right: 10px;
  width: 28.5%;
  height: 42%;
  background: url('../../../assets/images/bg.png') no-repeat center center;
  background-size: auto 100%;
  position: absolute;
  right: 0px;
  top: 19%;
}
.r2Ta{
  width: 96%;
  height: 46%;
  margin: 5px 10px 0px 10px;
  // background-color: aquamarine;
}
.inOrout{
  width: 96%;
  height: 28%;
  margin: 10px 10px 0px 10px;
  display: flex;
}
.iOo{
  width: 25%;
  height: 100%;
}
.ioitem{
  width: 100%;
  height: 45%;
  color: #c6f7ff;
  font-size: 14px;
  // background-color: #05799c;
  border: 1px solid #0A5D89;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r3{
  padding-top: 2%;
  margin-right: 10px;
  width: 28.5%;
  height: 42%;
  background: url('../../../assets/images/bg.png') no-repeat center center;
  background-size: auto 100%;
  position: absolute;
  right: 0px;
  bottom: 0%;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0,0,0,0.3);
  background:rgba(30, 180, 206, 0);
  border-radius: 8px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background:rgba(30, 179, 206, 0.459);
  -webkit-box-shadow: inset006pxrgba(0,0,0,0.5);
}
// ::-webkit-scrollbar-thumb:window-inactive {
//   background:rgba(25,189,242, 0.9);
//   // background:rgba(37, 173, 214, 0.788);
// }
//每个设备字体
.font{
  color: rgba(243, 243, 243, 0.918);
  display: flex;
  justify-content: center;
}
// 预警字体
  ::v-deep.font2{
  color: rgba(243, 243, 243, 0.918);
  font-size: 16px;
}
// 正常异常按钮显示
.font-bu{
  color: rgba(243, 243, 243, 0.918);
  display: flex;
  justify-content: center;
  margin: 10px;
}
// 报警文字
.yc{
  color: brown;
}
.shuiyewei{
  height: 82%;
  width: 96%;
  // margin: 10px;
  // background-color: aquamarine;
}
.shuiyewei2{
  height: 80%;
  width: 96%;
  margin: 10px;
}
// 返回按钮
.fanHui{
  background: #116B8D;
  color: rgb(206, 255, 239);
  border-color: rgba(47, 117, 129, 0.74);
  position: absolute;
  top: 1%;
  right: 1%;
}
// 点击按钮后按钮的颜色
.el-button.is-plain:hover, .el-button.is-plain:focus{
  background: #116B8D;
  color: rgb(206, 255, 239);
  border-color: rgba(47, 117, 129, 0.74);
}
.pause{
  // margin: 0 0 0 3%;
  background: #116B8D;
  color: rgb(206, 255, 239);
  border-color: rgba(47, 117, 129, 0.74);
  position: absolute;
  right: 2%;
}
// ::v-deep .ant-btn{
//   // margin: 0 0 0 3%;
//   background: #116B8D;
//   color: rgb(206, 255, 239);
//   border-color: rgba(47, 117, 129, 0.74);
// }
.boB{
  color: rgb(206, 255, 239);
}
.all{
  background: #116B8D;
  color: rgb(206, 255, 239);
  border-color: rgba(47, 117, 129, 0.74);
}
.all2{
  background: #5c9bb2;
  color: rgb(206, 255, 239);
  border-color: rgba(47, 117, 129, 0.74);
}
// ::v-deep .ant-btn{
//   background: #5c9bb2;
//   color: rgb(206, 255, 239);
//   border-color: rgba(47, 117, 129, 0.74);
// }
// 表格
  ::v-deep .ant-table-small{
    border: 0;
  }
  // 更改表头背景样式
  ::v-deep .ant-table-small > .ant-table-content .ant-table-header{
    background-color: #0A5D89 !important;
    // font-size: 15px;
    border-bottom: 0;
  }
  // 更改表头样式
  ::v-deep .ant-table-thead > tr > th{
    border-bottom: 0;
    color: #c6f7ff !important;
    font-size: 15px;
  }
  // 删除表格主体下边框
  ::v-deep .ant-table-tbody > tr > td{
    border-bottom: 0;
  }
  // 更改表格主体样式
  ::v-deep .ant-table-content{
    // background-color: #0A5D89 !important;
    color: #c6f7ff ;
    font-size: 14px;
    border-bottom: 0;
  }
  ::v-deep .ant-table-tbody tr:nth-child(2n)
  {
    background-color:#0A5D89;
    border: 0px;
  }
  ::v-deep .ant-table-tbody tr:nth-child(2n-1)
  {
    background-color:#103A5A;
    border: 0px;
  }

  ::v-deep .ant-table-header .ant-table-hide-scrollbar{
    background-color: #0A5D89 !important;
    color: #c6f7ff;
    font-size: 15px;
    border-bottom: 0;
  }
  // 暂无数据样式
  ::v-deep .ant-table-placeholder{
    background-color:#103A5A;
    border-top: 0px;
  }
  ::v-deep .ant-empty-normal{
    color: #b1d9df;
  }
  // 表格鼠标悬停背景颜色
  ::v-deep table tbody tr:hover>td {
      background-color:#546b94!important
  }
  // ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
  //   background-color: #546b94 !important;
  // }
  // ::v-deep .el-table--enable-row-transition .el-table__body td{
  //   background-color: #103E5F !important;
  // }
  // 上面的方法或者下面的都可以（表格鼠标悬停背景颜色）
  // ::v-deep .el-table__body tr:hover>td{
  //   background-color: #103E5F !important;
  // }
  // ::v-deep .el-table__body tr.current-row>td{
  //   background-color: #103E5F !important;
  // }
  // 表格滚动条
  // 隐藏表头滚动条
    ::v-deep .ant-table-fixed-header .ant-table-scroll .ant-table-header {
      background: #0A5D89 !important;
      box-sizing: border-box !important;
      // overflow: hidden !important;
    }
    ::v-deep .ant-table-body {
        &::-webkit-scrollbar {
          height: 12px;
          width: 8px;
          overflow-y: auto;
        }
        // 滑块样式
        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          background: rgba(30, 179, 206, 0.459);
        }
        // 滚动槽样式
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: 0;
          border-radius: 0;
          background: #103A5A;
        }
      }
  /* 修改表格的滚动条（滚动条的宽度）*/
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 10px; // 横向滚动条
        height: 10px; // 纵向滚动条 必写
    }
    /* 表格滚动条的滑块*/
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: rgba(30, 179, 206, 0.459);
        border-radius: 3px; //滚动条圆弧
    }
    /* 表格的表头与内容不对齐 */
    ::v-deep .el-table th.gutter {
        display: table-cell !important;
    }
  // 按钮样式
  .success {
    background-color: #06C4C4;
    border-color:#5bb486bd;
    color: #ffffff;
    margin-left: 5px;
  }
  ::v-deep .ant-btn-primary{
    background-color: #06C4C4;
    border-color:#5bb486bd;
    color: #ffffff;
  }
  .danger {
    background-color: #f0a182;
    border-color: #e49f84;
    color: #ffffff;
    margin-left: 5px;
  }
  .info {
    background-color: #b4b4b4de;
    border-color: #8d8d8d;
    color: #ffffff;
    margin-left: 5px;
  }
  .butDanger {
    background-color: #f08282;
    border-color: #e48484;
    color: #ffffff;
    margin-left: 5px;
  }

  // 自定义表格
  .row-top{
    margin: 5px 5px 5px 5px;
  }
  .bt-top{
    border-top: 1px solid #1797AD;
  }
  .bt-h100{
    height: 100px;
  }
  .bt-h60{
    height: 60px;
  }
  .bt-h250{
    height: 222px;
  }

  .bg-purple {
   text-align: center;
    color: rgba(243, 243, 243, 0.918);
    font-size: 13px;
    // font-weight: 800;
    border-left: 1px solid #1797AD;
  }
  .bg-purple-light {
  text-align: center;
    color: rgba(243, 243, 243, 0.918);
    font-size: 13px;
    // font-weight: 800;

    border-left: 1px solid #1797AD;
    border-right: 1px solid #1797AD;
  }
  .grid-content {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #1797AD;
    min-height: 30px;
  }
  .grid-content2 {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #1797AD;
    min-height: 40px;
  }
  // 弹框样式
  .ant-modal-content{
    padding-top:10%;
    // background-color: #05799c;
  }
  ::v-deep .ant-modal-header{
    background-color:#0A5D89;
    border-bottom: 0px;
    // color: #06C4C4;
  }
  ::v-deep .ant-modal-title{
    // background-color:#0A5D89;
    color: #c6f7ff;
    font-size: 20px;
  }
  ::v-deep .ant-modal-close{
    // background-color:#0A5D89;
    color: #c6f7ff;
  }
  ::v-deep .el-form-item__label{
    // background-color:#0A5D89;
    color: #c6f7ff;
    font-size: 15px;
    font-weight: 600;
  }
  // ::v-deep .el-input__inner:focus{
  //   // background-color:#0A5D89;
  //   color: #c6f7ff;
  // }

  // 输入框中字体设置
  ::v-deep .ant-form-item-label > label{
    color: #c6f7ff;
  }
  ::v-deep input::-webkit-input-placeholder {
    color: #c6f7ff;
  }

  ::v-deep .ant-input{
    background-color: #3988b3;
    // background-color: #126897;
    // border: 1px solid #1797AD;
    border: 1px solid #197585;
    color: #c6f7ff;
  }
  ::v-deep .ant-modal-body{
    background-color: #0A5D89;
  }
  ::v-deep .ant-modal-footer{
    background-color: #0A5D89;
    border-top: 0px;
  }
  ::v-deep .has-error .ant-form-explain, .has-error .ant-form-split{
    color: #ed6969;
    font-size: 13px;
  }
  ::v-deep .ant-form-item-required::before{
    // color: #e48484;
    border-color: #ed6969;
  }
  // ::v-deep .a {
  //   color: #c6f7ff !important;
  // }
  // ::v-deep .a:link {color: red} /* 未访问的链接 */

  // ::v-deep .a:visited {color: green} /* 已访问的链接 */

  // ::v-deep .a:hover {color: black} /* 鼠标移动到链接上 */

  // ::v-deep .a:active {color: yellow} /* 选定的链接，即鼠标按下去的时候不松开显示的状态 */
</style>