|  | @@ -1,23 +1,116 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |    <div class="monitor-container">
 | 
	
		
			
				|  |  | -    <div class="header-box">
 | 
	
		
			
				|  |  | -      <div class="header-container">
 | 
	
		
			
				|  |  | -        <div class="device-detail">
 | 
	
		
			
				|  |  | -          <div class="device-title"> </div>
 | 
	
		
			
				|  |  | -          <div class="device-val">是否带电</div>
 | 
	
		
			
				|  |  | -          <div class="device-val">是否运行</div>
 | 
	
		
			
				|  |  | -          <div class="device-val">故障</div>
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | -        <div v-for="(device, key) in deviceMonitorList" class="device-detail" :key="key">
 | 
	
		
			
				|  |  | -          <div class="device-title">{{ device.title }}</div>
 | 
	
		
			
				|  |  | -          <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
 | 
	
		
			
				|  |  | -            <span v-if="index == 0" :style="{color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79'}">{{ monitorData[detailItem.code] == 0 ? '不带电' : monitorData[detailItem.code] == 1 ? '带电' : '-' }}</span>
 | 
	
		
			
				|  |  | -            <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] != 1 ? '#BFBFBF' : '#10BC79' }">{{ monitorData[detailItem.code] == 0 ? '未运行' : monitorData[detailItem.code] == 1 ? '运行' : '-' }}</span>
 | 
	
		
			
				|  |  | -            <span v-if="index == 2" :style="{ color: monitorData[detailItem.code] == 0 ? '#10BC79' : monitorData[detailItem.code] == 1 ? '#F14C4C' : '#BFBFBF'}">{{ monitorData[detailItem.code] == 0 ? '正常' :  monitorData[detailItem.code] == 1 ? '报警' : '-'}}</span>
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | +    <div class="lr left-box">
 | 
	
		
			
				|  |  | +      <div class="monitor-info item-box">
 | 
	
		
			
				|  |  | +        <ventBox1>
 | 
	
		
			
				|  |  | +          <template #title>
 | 
	
		
			
				|  |  | +            <div>设备信息监测</div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template #container v-if="dataSource.length > 0 ">
 | 
	
		
			
				|  |  | +            <div v-for="(monitor, key) in deviceMonitorData" :key="key" class="monitor-item">
 | 
	
		
			
				|  |  | +              <div class="item-title">{{ monitor.text }}</div>
 | 
	
		
			
				|  |  | +              <div class="item-val">{{ key.startsWith('1#') ? dataSource[0][key.split('_')[1]]||'-' : key.startsWith('2#') ? dataSource[1][key.split('_')[1]]||'-' : (dataSource[0][key] || '-') }}</div>
 | 
	
		
			
				|  |  | +              <div class="item-unit">{{ monitor.unit }}</div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </ventBox1>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="warning-group">
 | 
	
		
			
				|  |  | +        <ventBox1>
 | 
	
		
			
				|  |  | +          <template #title>
 | 
	
		
			
				|  |  | +            <div>近一月报警情况</div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template #container>
 | 
	
		
			
				|  |  | +           <dv-scroll-board ref="scrollBoard" :config="warningConfig"
 | 
	
		
			
				|  |  | +              style="width: 100%; height: 240px; overflow-y: auto; " />
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </ventBox1>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="item-box vent-margin-t-10">
 | 
	
		
			
				|  |  | +        <!-- <LivePlayer id="fm-player1" style="height: 220px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  | +    <div class="lr right-box">
 | 
	
		
			
				|  |  | +      <div class="control-container item-box">
 | 
	
		
			
				|  |  | +        <ventBox1>
 | 
	
		
			
				|  |  | +          <template #title>
 | 
	
		
			
				|  |  | +            <div>设备设施集中控制</div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template #container >
 | 
	
		
			
				|  |  | +            <div class="control-group">
 | 
	
		
			
				|  |  | +              <div class="control-item" v-for="(item, key) in deviceControlData" :key="key">
 | 
	
		
			
				|  |  | +                <div class="control-item-title">{{ item }}</div>
 | 
	
		
			
				|  |  | +                <div class="control-item-state" v-if="!key.startsWith('2#')">
 | 
	
		
			
				|  |  | +                  <a-switch v-model="dataSource[0][key.split('_')[1]]" size="small"  checked-children="开启"
 | 
	
		
			
				|  |  | +                    un-checked-children="关闭"
 | 
	
		
			
				|  |  | +                    @change="handlerDevice(dataSource[0][key.split('_')[1]])">
 | 
	
		
			
				|  |  | +                  </a-switch>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="control-item-state" v-else>
 | 
	
		
			
				|  |  | +                  <a-switch v-model="dataSource[1][key.split('_')[1]]" size="small"  checked-children="开启"
 | 
	
		
			
				|  |  | +                    un-checked-children="关闭"
 | 
	
		
			
				|  |  | +                    @change="handlerDevice(dataSource[1][key.split('_')[1]])">
 | 
	
		
			
				|  |  | +                  </a-switch>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <a-divider style="height: 1px; background-color: #d7d7d755" />
 | 
	
		
			
				|  |  | +            <div class="control-btn-group">
 | 
	
		
			
				|  |  | +              <div class="control-left-box">
 | 
	
		
			
				|  |  | +                <div class="btn-box">
 | 
	
		
			
				|  |  | +                  <span @click="handlerDevice({ remote : true})">远程</span>
 | 
	
		
			
				|  |  | +                  <span @click="handlerDevice({ remote: false })">就地</span>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="icon-box" :class="{'remote-icon-box': true}">
 | 
	
		
			
				|  |  | +                  <div class="icon"></div>
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +              <div class="control-right-box">
 | 
	
		
			
				|  |  | +                <a-button class="btn" type="primary" @click="handlerDevice({run: true})">一键启动</a-button>
 | 
	
		
			
				|  |  | +                <a-button type="primary" danger @click="handlerDevice({ run: false })">紧急停止</a-button>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <a-divider style="height: 1px; background-color: #d7d7d755" />
 | 
	
		
			
				|  |  | +            <div class="parameter-btn-group"> 
 | 
	
		
			
				|  |  | +              <a-button type="primary"  @click="openModal('RunParameterModal')">参数设置</a-button>
 | 
	
		
			
				|  |  | +              <a-button type="primary"  @click="openModal('WarningParameterModal')">报警设置</a-button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </ventBox1>    
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="control-container item-box echarts-box">
 | 
	
		
			
				|  |  | +        <ventBox1>
 | 
	
		
			
				|  |  | +          <template #title>
 | 
	
		
			
				|  |  | +            <div>设备实时监测曲线</div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <template #container >
 | 
	
		
			
				|  |  | +            <div class="btn-group">
 | 
	
		
			
				|  |  | +              <span class="active">注浆流量</span>
 | 
	
		
			
				|  |  | +              <span>注浆压力</span>
 | 
	
		
			
				|  |  | +              <span>水舱液位</span>
 | 
	
		
			
				|  |  | +              <span>注浆筒液位</span>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="item-box echarts-container">
 | 
	
		
			
				|  |  | +              <div class="echarts-group">
 | 
	
		
			
				|  |  | +                <div class="echarts-item">
 | 
	
		
			
				|  |  | +                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="echarts-item">
 | 
	
		
			
				|  |  | +                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['pressure']" :option="yaliOption" />
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="echarts-item">
 | 
	
		
			
				|  |  | +                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                <div class="echarts-item">
 | 
	
		
			
				|  |  | +                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </ventBox1>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
 | 
	
		
			
				|  |  |  </template>
 | 
	
	
		
			
				|  | @@ -30,7 +123,7 @@ import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
 | 
	
		
			
				|  |  |  import ventBox1 from '/@/components/vent/ventBox1.vue';
 | 
	
		
			
				|  |  |  import RunParameterModal from './runParameter.modal.vue'
 | 
	
		
			
				|  |  |  import WarningParameterModal from './warningParameter.modal.vue'
 | 
	
		
			
				|  |  | -import { deviceMonitorList } from '../grout.data'
 | 
	
		
			
				|  |  | +import { warningConfig, zhujiangOption, yaliOption } from '../grout.data'
 | 
	
		
			
				|  |  |  import { list } from '../grout.api';
 | 
	
		
			
				|  |  |  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -49,7 +142,7 @@ const left: string = "0px";
 | 
	
		
			
				|  |  |  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
 | 
	
		
			
				|  |  |  const modalVisible = ref<Boolean>(false); // 模态框是否可见
 | 
	
		
			
				|  |  |  const loading = ref(false);
 | 
	
		
			
				|  |  | -const monitorData = ref({})
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  // 默认初始是第一行
 | 
	
		
			
				|  |  |  const dataSource = ref([
 | 
	
		
			
				|  |  |    { 
 | 
	
	
		
			
				|  | @@ -72,6 +165,26 @@ const dataSource = ref([
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  ]); //dusting
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +const deviceMonitorData = {
 | 
	
		
			
				|  |  | +  '1#_waterSupply': { text: '1#制浆机供水流量', unit: 'm³/h' },
 | 
	
		
			
				|  |  | +  '1#_beltVla': { text: '1#皮带秤数值', unit: 'T' },
 | 
	
		
			
				|  |  | +  '2#_waterSupply': { text: '2#制浆机供水流量', unit: 'm³/h' },
 | 
	
		
			
				|  |  | +  '2#_beltVla': { text: '2#皮带秤数值', unit: 'T' },
 | 
	
		
			
				|  |  | +  density: {text: '密度' , unit: 'g/cm'},
 | 
	
		
			
				|  |  | +  pressure: { text: '压力', unit: 'MPa' },
 | 
	
		
			
				|  |  | +  liquidLevel: { text: '缓冲池液位', unit: 'm' },
 | 
	
		
			
				|  |  | +  flowRate: { text: '注浆流量', unit: 'm³/h' },
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +const deviceControlData = {
 | 
	
		
			
				|  |  | +  '1#_waterPump': '1#清水泵',
 | 
	
		
			
				|  |  | +  '1#_groutingPump': '1#注浆泵',
 | 
	
		
			
				|  |  | +  '1#_pulpingMachine': '1#制浆机',
 | 
	
		
			
				|  |  | +  '2#_waterPump': '2#清水泵',
 | 
	
		
			
				|  |  | +  '2#_groutingPump': '2#注浆泵',
 | 
	
		
			
				|  |  | +  '2#_pulpingMachine': '2#制浆机',
 | 
	
		
			
				|  |  | +  'liquidLevelProtect ':'液位保护'
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  const flvURL1 = () => {
 | 
	
		
			
				|  |  |    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
 | 
	
		
			
				|  |  |    // return ''
 | 
	
	
		
			
				|  | @@ -101,16 +214,13 @@ function getMonitor(flag?) {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  async function getDataSource() {
 | 
	
		
			
				|  |  |    const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
 | 
	
		
			
				|  |  | -  if(res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist[0]){
 | 
	
		
			
				|  |  | -    monitorData.value = Object.assign(res.msgTxt[0].datalist[0], res.msgTxt[0].datalist[0]['readData'])
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  // const dataList = res.msgTxt[0].datalist || [];
 | 
	
		
			
				|  |  | -  // dataSource.value = dataList.filter((data) => {
 | 
	
		
			
				|  |  | -  //   const item = data.readData;
 | 
	
		
			
				|  |  | -  //   Object.assign(data, item);  
 | 
	
		
			
				|  |  | -  //   return item
 | 
	
		
			
				|  |  | -  // });
 | 
	
		
			
				|  |  | -  // monitorData.value = 
 | 
	
		
			
				|  |  | +  const dataList = res.msgTxt[0].datalist || [];
 | 
	
		
			
				|  |  | +  dataSource.value = dataList.filter((data) => {
 | 
	
		
			
				|  |  | +    const item = data.readData;
 | 
	
		
			
				|  |  | +    Object.assign(data, item);
 | 
	
		
			
				|  |  | +    return item
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +  
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  function handlerDevice(param: string | Object) {
 | 
	
	
		
			
				|  | @@ -153,50 +263,247 @@ onUnmounted(() => {
 | 
	
		
			
				|  |  |    // border: 1px solid #fff;
 | 
	
		
			
				|  |  |    margin-top: 40px;
 | 
	
		
			
				|  |  |    display: flex;
 | 
	
		
			
				|  |  | -  // justify-content: space-between;
 | 
	
		
			
				|  |  | -  justify-content: center;
 | 
	
		
			
				|  |  | +  justify-content: space-between;
 | 
	
		
			
				|  |  |    padding: 0 5px;
 | 
	
		
			
				|  |  |    
 | 
	
		
			
				|  |  | -  .header-box{
 | 
	
		
			
				|  |  | -    // width: 100%;
 | 
	
		
			
				|  |  | -    margin-top: 50px;
 | 
	
		
			
				|  |  | -    .header-container{
 | 
	
		
			
				|  |  | -      height: auto;
 | 
	
		
			
				|  |  | +  .lr {
 | 
	
		
			
				|  |  | +    width: 350px;
 | 
	
		
			
				|  |  | +    height: 100%;
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    flex-direction: column;
 | 
	
		
			
				|  |  | +    margin-top: 10px;
 | 
	
		
			
				|  |  | +    pointer-events: auto;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .right-box {
 | 
	
		
			
				|  |  | +    width: 320px;
 | 
	
		
			
				|  |  | +    margin-top: 30px;
 | 
	
		
			
				|  |  | +    .control-group{
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      flex-wrap: wrap;
 | 
	
		
			
				|  |  | +      .control-item {
 | 
	
		
			
				|  |  | +        
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        flex-direction: column;
 | 
	
		
			
				|  |  | +        justify-content: center;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +        padding: 0 2px;
 | 
	
		
			
				|  |  | +        .control-item-title{
 | 
	
		
			
				|  |  | +          color: #63e0ff;
 | 
	
		
			
				|  |  | +          position: relative;
 | 
	
		
			
				|  |  | +          top: 5px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .control-item-state{
 | 
	
		
			
				|  |  | +          width: 94px;
 | 
	
		
			
				|  |  | +          height: 47px;
 | 
	
		
			
				|  |  | +          background: url('/@/assets/images/vent/control-switch-bg.png');
 | 
	
		
			
				|  |  | +          display: flex;
 | 
	
		
			
				|  |  | +          justify-content: center;
 | 
	
		
			
				|  |  | +          align-items: center;
 | 
	
		
			
				|  |  | +          color: #fff;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +        .button-box {
 | 
	
		
			
				|  |  | +          position: relative;
 | 
	
		
			
				|  |  | +          padding: 5px;
 | 
	
		
			
				|  |  | +          border: 1px transparent solid;
 | 
	
		
			
				|  |  | +          background-clip: border-box;
 | 
	
		
			
				|  |  | +          border-radius: 5px;
 | 
	
		
			
				|  |  | +          margin-left: 8px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .a-button {
 | 
	
		
			
				|  |  | +          pointer-events: auto;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        &::v-deep .a-button--mini {
 | 
	
		
			
				|  |  | +          padding: 6px 10px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        &::v-deep .a-button--mini.is-round {
 | 
	
		
			
				|  |  | +          padding: 6px 10px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .control-btn-group{
 | 
	
		
			
				|  |  |        display: flex;
 | 
	
		
			
				|  |  |        flex-direction: row;
 | 
	
		
			
				|  |  | -      justify-content: center;
 | 
	
		
			
				|  |  | -      color: #fff;
 | 
	
		
			
				|  |  | -      box-shadow: 0 0 30px rgb(0, 153, 184) inset;
 | 
	
		
			
				|  |  | +      justify-content: space-between;
 | 
	
		
			
				|  |  | +      .control-left-box{
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        flex-direction: column;
 | 
	
		
			
				|  |  | +        justify-content: center;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +        padding: 0 20px;
 | 
	
		
			
				|  |  | +        .btn-box{
 | 
	
		
			
				|  |  | +          width: 100px;
 | 
	
		
			
				|  |  | +          color: #fff;
 | 
	
		
			
				|  |  | +          display: flex;
 | 
	
		
			
				|  |  | +          justify-content: space-between;
 | 
	
		
			
				|  |  | +          span{
 | 
	
		
			
				|  |  | +            display: inline-block;
 | 
	
		
			
				|  |  | +            padding: 2px 8px;
 | 
	
		
			
				|  |  | +            background: #007099;
 | 
	
		
			
				|  |  | +            border-radius: 4px;
 | 
	
		
			
				|  |  | +            border: 1px solid rgb(125, 230, 249);
 | 
	
		
			
				|  |  | +            cursor: pointer;
 | 
	
		
			
				|  |  | +            &:hover{
 | 
	
		
			
				|  |  | +              background: #005574;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .icon-box{
 | 
	
		
			
				|  |  | +          width: 60px;
 | 
	
		
			
				|  |  | +          height: 60px;
 | 
	
		
			
				|  |  | +          border-radius: 30px;
 | 
	
		
			
				|  |  | +          border: 2px solid #00bcdd;
 | 
	
		
			
				|  |  | +          box-shadow: 0 0 20px #ffffff88;
 | 
	
		
			
				|  |  | +          display: flex;
 | 
	
		
			
				|  |  | +          justify-content: center;
 | 
	
		
			
				|  |  | +          align-items: center;
 | 
	
		
			
				|  |  | +          margin-top: 20px;
 | 
	
		
			
				|  |  | +             
 | 
	
		
			
				|  |  | +          .icon{
 | 
	
		
			
				|  |  | +            width: 18px;
 | 
	
		
			
				|  |  | +            height: 18px;
 | 
	
		
			
				|  |  | +            border-radius: 9px;
 | 
	
		
			
				|  |  | +            border: 3px solid #d7f9ff;
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +            background: #00bcdd;
 | 
	
		
			
				|  |  | +            &::before{
 | 
	
		
			
				|  |  | +              position: absolute;
 | 
	
		
			
				|  |  | +              content: '';
 | 
	
		
			
				|  |  | +              width: 2px;
 | 
	
		
			
				|  |  | +              height: 12px;
 | 
	
		
			
				|  |  | +              background-color: #00bcdd;
 | 
	
		
			
				|  |  | +              left: 6px;
 | 
	
		
			
				|  |  | +              top: -16px;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            &::after{
 | 
	
		
			
				|  |  | +              position: absolute;
 | 
	
		
			
				|  |  | +              content: '';
 | 
	
		
			
				|  |  | +              width: 2px;
 | 
	
		
			
				|  |  | +              height: 12px;
 | 
	
		
			
				|  |  | +              left: 6px;
 | 
	
		
			
				|  |  | +              top: 17px;
 | 
	
		
			
				|  |  | +              background-color: #00d9ff;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .remote-icon-box{
 | 
	
		
			
				|  |  | +          transform: rotate(30deg);
 | 
	
		
			
				|  |  | +          animation: iconRotate 1s linear;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .remote-icon-box1{
 | 
	
		
			
				|  |  | +          transform: rotate(-30deg);
 | 
	
		
			
				|  |  | +          animation: iconRotate1 1s linear;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        @keyframes iconRotate{
 | 
	
		
			
				|  |  | +          from{
 | 
	
		
			
				|  |  | +            transform: rotate(-30deg);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          to {
 | 
	
		
			
				|  |  | +            transform: rotate(30deg);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        @keyframes iconRotate1{
 | 
	
		
			
				|  |  | +          from {
 | 
	
		
			
				|  |  | +            transform: rotate(30deg);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          to {
 | 
	
		
			
				|  |  | +            transform: rotate(-30deg);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .control-right-box{
 | 
	
		
			
				|  |  | +        width: 100px;
 | 
	
		
			
				|  |  | +        .btn{
 | 
	
		
			
				|  |  | +          margin-bottom: 30px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    .device-title{
 | 
	
		
			
				|  |  | -      width: 110px;
 | 
	
		
			
				|  |  | -      text-align: center;
 | 
	
		
			
				|  |  | -      border-top: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | -      border-left: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | -      line-height: 46px;
 | 
	
		
			
				|  |  | -      color: #00e5ff;
 | 
	
		
			
				|  |  | -      background-color: #00bbff21;
 | 
	
		
			
				|  |  | +    .parameter-btn-group{
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      justify-content: space-between;
 | 
	
		
			
				|  |  | +      padding: 0 20px;
 | 
	
		
			
				|  |  | +      margin-bottom: 10px;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -    .device-detail{
 | 
	
		
			
				|  |  | -      text-align: center;
 | 
	
		
			
				|  |  | -      &:first-child{
 | 
	
		
			
				|  |  | -        background-color: #00bbff11;
 | 
	
		
			
				|  |  | +    .echarts-box{
 | 
	
		
			
				|  |  | +      width: 100%;
 | 
	
		
			
				|  |  | +      height: 332px;
 | 
	
		
			
				|  |  | +      position: relative;
 | 
	
		
			
				|  |  | +      &:deep(.box-container){
 | 
	
		
			
				|  |  | +        padding: 0px !important;
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | -      &:last-child{
 | 
	
		
			
				|  |  | -        .device-val, .device-title{
 | 
	
		
			
				|  |  | -          border-right: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | +      .btn-group{
 | 
	
		
			
				|  |  | +        line-height: 30px;
 | 
	
		
			
				|  |  | +        color: #fff;
 | 
	
		
			
				|  |  | +        text-align: center;
 | 
	
		
			
				|  |  | +        margin-top: 3px;
 | 
	
		
			
				|  |  | +        span{
 | 
	
		
			
				|  |  | +          padding: 3px 5px;
 | 
	
		
			
				|  |  | +          margin: 0 2px;
 | 
	
		
			
				|  |  | +          border-radius: 2px;
 | 
	
		
			
				|  |  | +          background-image: linear-gradient( #32475B, #5b95c7);
 | 
	
		
			
				|  |  | +          border: 1px solid #32475B;
 | 
	
		
			
				|  |  | +          cursor: pointer;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .active{
 | 
	
		
			
				|  |  | +          background-image: linear-gradient( #2E4659, #37A7B4);
 | 
	
		
			
				|  |  | +          border-top: 1px solid #3DF6FF;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | -      .device-val{
 | 
	
		
			
				|  |  | -        line-height: 36px;
 | 
	
		
			
				|  |  | -        border-top: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | -        border-left: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | -        &:last-child{
 | 
	
		
			
				|  |  | -          border-bottom: 1px solid #00baffd4;
 | 
	
		
			
				|  |  | +      .echarts-container{
 | 
	
		
			
				|  |  | +        width: 100%;
 | 
	
		
			
				|  |  | +        height: 240px;
 | 
	
		
			
				|  |  | +        overflow: hidden;
 | 
	
		
			
				|  |  | +        position: relative;
 | 
	
		
			
				|  |  | +        .echarts-group{
 | 
	
		
			
				|  |  | +          display: flex;
 | 
	
		
			
				|  |  | +          flex-direction: row;
 | 
	
		
			
				|  |  | +          position: absolute;
 | 
	
		
			
				|  |  | +          left: v-bind(left);
 | 
	
		
			
				|  |  | +          .echarts-item{
 | 
	
		
			
				|  |  | +            width: 305px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +    
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .left-box {
 | 
	
		
			
				|  |  | +    margin-top: 30px;
 | 
	
		
			
				|  |  | +    .monitor-item{
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      color: #fff;
 | 
	
		
			
				|  |  | +      justify-content: space-between;
 | 
	
		
			
				|  |  | +      background-image: linear-gradient(to left, #3df6ff10, #3df6ff00);
 | 
	
		
			
				|  |  | +      margin: 10px 0;
 | 
	
		
			
				|  |  | +    
 | 
	
		
			
				|  |  | +      .item-title{
 | 
	
		
			
				|  |  | +        width: 200px;
 | 
	
		
			
				|  |  | +        margin-left: 10px;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .item-val{
 | 
	
		
			
				|  |  | +        width: 80px;
 | 
	
		
			
				|  |  | +        color: #00eefffe;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      .item-unit{
 | 
	
		
			
				|  |  | +        width: 80px;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .item-box{
 | 
	
		
			
				|  |  | +    margin-bottom: 15px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  :deep(.@{ventSpace}-tabs-tabpane-active) {
 |