ess_screen/src/views/singlestation.vue

<template>
  <div class="map">
    <div class="left">
      <div class="left_logo">
        <img class="left_logo1" src="../assets/svg/logo.svg" alt="logo">
      

      </div>
      <div class="left_top">
        <div class="left_toptitle TiF_font">电站指标</div>
         
        <div class="left_top1">
          <div class="left_top21">
            <div class="left_top21img">
              <div class="custom-font18 left_top21imgfont">{{characteristic.installedCap}}<span class="left_top21img1">kWh</span></div> </div>
            <div class="left_top21name TiF_font">装机容量</div>
          </div>
          <div class="left_top21">
            <div class="left_top21img">
              <div class="left_top21imgfont custom-font18">{{characteristic.installedPower}}<span class="left_top21img1">kW</span></div> </div>
            <div class="left_top21name TiF_font">装机功率</div>
          </div>
        </div>
       <div class="left_top2img">
        <div class="left_top21">
          <div class="left_top21img">
            <div class="left_top21imgfont custom-font18">{{characteristic.dayImportKwh}}<span class="left_top21img1">kWh</span></div> </div>
          <div class="left_top21name TiF_font">今日总充电量</div>
        </div>
        <div class="left_top21">
          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{formatAmount1000(characteristic.accumulativeImportKwh)}}<span class="left_top21img1">MWh</span></div> </div>
          <div class="left_top21name TiF_font">累计总充电量</div>
        </div>
        <div class="left_top21">
          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{characteristic.dayExportKwh}}<span class="left_top21img1">kWh</span></div> </div>
          <div class="left_top21name TiF_font">今日总放电量</div>
        </div>
        <div class="left_top21">
          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{formatAmount1000(characteristic.accumulativeExportKwh)}}<span class="left_top21img1">MWh</span></div> </div>
          <div class="left_top21name TiF_font">累计总放电量</div>
        </div>
       </div>
      <!--  -->
      </div>
      <div class="left_center">
        <div class="left_toptitle TiF_font">充放电趋势</div>
        <div id="column"></div>
      </div>
      <div class="left_bottom">
        <div class="left_toptitle TiF_font">告警统计</div>
      <div class="left_eltable TiF_font">
         <div class="left_eltabledivtitle">
          <div class="left_eltabledivtitles"></div>
          <div class="scrolladdress">站点</div>
          <div class="scrollcontent">告警内容</div>
          <div class="scrollevent">事件</div>
          <div class="left_eltabnormal1">状态</div>
         </div>
         <div class="execdata">
          <div class="execInfo">
            <!-- <div class="left_eltablediv" v-for="(item,index) in tableData" :key="index">
              <div>{{item.address}}</div>
              <div>{{item.content}}</div>
              <div>{{item.event}}</div>
              <div class="left_eltabnormal">{{item.state}}</div>
            </div> -->
            <vue3-seamless-scroll
        :list="AlarmStatistics"
        :step="1"
        class="seamless-warp2"
        >
        <div class="left_eltablediv"
            v-for="(item,index) in AlarmStatistics"
            :key="index"
        >
        <div class="scrolladdress">{{item.deviceName}}</div>
        <div class="scrollcontent">{{item.title}}</div>
        <div class="scrollevent">{{item.alarmname}}</div>
        <div class="left_eltabnormal" v-if="item.todayname==1">已恢复</div>
        <div class="left_eltabnormal" v-else>未恢复</div>
        </div>
    </vue3-seamless-scroll> 
          </div>
        
        </div>

      </div>

      </div>
    </div>
    <div class="center">
      <div class="center_top">
        <div class="center_top1img11">
          <div class="center_top1img1 TiF_font">实时功率</div>
          <div class="center_top1img2 custom-font30">{{formatAmount(sysBatterystack.totalActivePower*1)}}<span class="left_top21img2">kW</span></div>
        </div>
        <div class="center_top1img22">
          <div class="center_top1img1 TiF_font">状态</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==0">空闲</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==1">充电</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==2">放电</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==3">充满</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==4">放空</div>
          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==5">故障</div>
        </div>
        <div class="center_top1img33">
          <div class="center_top1img1 TiF_font">SOC</div>
          <div class="center_top1img2 custom-font30">{{formatAmount(sysBatterystack.soc*1)}}<span class="left_top21img2">%</span></div>
        </div>
        <div class="center_top1img44">
          <div class="center_top1img1 TiF_font">系统功率</div> 
          <div class="center_top1img2 custom-font30">{{sysBatterystack.systemPower}}<span class="left_top21img2">%</span></div>
        </div>
        
      </div>
      <div class="left_boxt">
        <div></div>
        <!-- <div class="left_boxt1">
          浙江临安鹏达
          <img class="left_boxopen" src="../assets/open.png" alt="">
          <img class="left_boxopen" src="../assets/Putaway.png" alt="">
        </div> -->
        <div class="left_boxt1">
          <el-select
          v-model="Singlevalue"
          collapse-tags
          placeholder="选择电站"
          popper-class="custom_header"
          :max-collapse-tags="1"
          class="Space_content"
          size="large"
          :popper-append-to-body="false"
          @change="postemsDevice"
        >
          <el-option v-for="(item, index) in cities" :key="index" :label="item.stationName" :value="item.id" />
          <template #prefix>
            {{ (cities.find(s => s.id === Singlevalue) || {}).stationName }}
          </template>
        </el-select>
 
        </div>
       
      </div>
      <!-- 单站模型 -->
      <div id="main"></div>  

      <div class="center_bottom">
        <div class="center_bottomdiv">

          <img class="center_bottom1" src="../assets/svg/center_bottom1.svg" alt="">
          <div class="center_bottom2" @click="station">总览</div>
          <div class="center_bottom2">省级</div>
          <div class="center_bottom4">市级</div>
          <div class="center_bottom3">单站</div>
          <img class="center_bottom6" src="../assets/svg/center_bottom6.svg" alt="">
        </div>

      </div>
    </div>
    <div class="right">
      <div class="right_jia">
        <div></div>
        <div class="right_logo">
          <i :class="'qi-' + weather.icon" style="color: #30cbeb"></i>
          &nbsp;{{ weather.text }}&nbsp; {{ weather.temp }}℃ &nbsp;&nbsp;{{ currentDateyear.year }}-{{ currentDateyear.month }}-{{ currentDateyear.day }}  &nbsp;{{ currentTime }}
        </div>
      </div>
       
      <div class="right_top">
        <div class="left_toptitle TiF_font">收益指标</div>
          <div class="left_topdiv">
            <div class="left_topdivname custom-font30">累计收益</div>
            <div class="left_topdivpay custom-font30">{{formatAmount10000(characteristic.totalProfit)}}万元</div>
          </div>
          <div class="left_Alarm">
            <div class="left_topdivname1 custom-fonts">今日收益</div>
            <div class="left_topdivpay1 custom-fonts">{{formatAmount(characteristic.todayProfit)}}元</div>
          </div>
      </div>
      <div class="right_center">
        <div class="left_toptitle TiF_font">收益趋势</div>
        <div id="income"></div>
 
      </div>
      <div class="right_bottom">
        <div class="left_toptitle TiF_font">设备监控</div>
        <div class="right_monitor">
          <div class="right_bottomrevenue">
            <img class="right_bottomrevenueimg" src="../assets/svg/voltage.svg" alt="">
            <div class="right_bottomrevenuediv">
             <div class="right_bottomrevenuedivd custom-font">单体最低电压</div>
             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.maxCellVoltage*1)}}<span class="left_top21img1">V</span></div>
            </div>
         </div>
         <div class="right_bottomrevenue">
          <img class="right_bottomrevenueimg" src="../assets/svg/voltage.svg" alt="">
          <div class="right_bottomrevenuediv">
           <div class="right_bottomrevenuedivd custom-font">单体最高电压</div>
           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.minCellVoltage*1)}}<span class="left_top21img1">V</span></div>
          </div>
       </div>
        </div>
        <div class="right_monitors">
          <div class="right_bottomrevenue">
            <img class="right_bottomrevenueimg" src="../assets/svg/temperature.svg" alt="">
            <div class="right_bottomrevenuediv">
             <div class="right_bottomrevenuedivd custom-font">单体最低温度</div>
             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.minCellTempr*1)}}<span class="left_top21img1">℃</span></div>
            </div>
         </div>
         <div class="right_bottomrevenue">
          <img class="right_bottomrevenueimg" src="../assets/svg/temperature.svg" alt="">
          <div class="right_bottomrevenuediv">
           <div class="right_bottomrevenuedivd custom-font">单体最高温度</div>
           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.maxCellTempr*1)}}<span class="left_top21img1">℃</span></div>
          </div>
       </div>
        </div>
        <div class="right_monitors">
          <div class="right_bottomrevenue">
            <img class="right_bottomrevenueimg" src="../assets/svg/water.svg" alt="">
            <div class="right_bottomrevenuediv">
             <div class="right_bottomrevenuedivd custom-font">液冷回水温度</div>
             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.airInTempr*1)}}<span class="left_top21img1">℃</span></div>
            </div>
         </div>
         <div class="right_bottomrevenue">
          <img class="right_bottomrevenueimg" src="../assets/svg/water.svg" alt="">
          <div class="right_bottomrevenuediv">
           <div class="right_bottomrevenuedivd custom-font">液冷出水温度</div>
           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.airOutTempr*1)}}<span class="left_top21img1">V</span></div>
          </div>
       </div>
        </div>

      </div>
    </div>
    <!-- <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
    src="https://apis.map.qq.com/tools/geolocation?key=PZOBZ-EHH6J-DEMFD-DFPL7-UN27S-M5FZT&referer=myposition">
</iframe> -->
  </div>
</template>
 
<script setup>
//---- ----//
import { onMounted, ref,onUnmounted,markRaw  } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

import { useRouter } from 'vue-router'
import axios from "axios";
import { inject } from 'vue';

import * as echarts from "echarts";
const router = useRouter()
const weather = ref(''); // 天气
const currentTime = ref('');
const column = ref(null);// 充放电趋势图
const income = ref(null);// 充放电趋势图
const Singlevalue = ref('浙江临安');// 充放电趋势图
const cities = ref([]);
const currentDateyear = ref({});

function updateTime() {

  const now = new Date();
  currentTime.value = now.toLocaleTimeString();
}
const showOverlay = inject('showOverlay'); // 通过 inject 访问显示遮罩层方法
const formattedDateTime = async () =>  {
       let datetime= new Date();
        const year = datetime.getFullYear();
        const month = addLeadingZero(datetime.getMonth() + 1);
        const day = addLeadingZero(datetime.getDate());

        return { year, month, day };
    }

    // 方法：在数字前补零
    const addLeadingZero = async (number) =>  {
        return number < 10 ? '0' + number : number;
    }
 
// 天气
const gatstationstest = async () => {
  const result = await formattedDateTime();
  currentDateyear.value.year = result.year
  result.month.then(result => {
    currentDateyear.value.month = result
}).catch(error => {
    console.error('发生了错误：', error);
});
result.day.then(result => {
    currentDateyear.value.day = result
}).catch(error => {
    console.error('发生了错误：', error);
});
getWeather()

  // window.addEventListener('message', function(event) {
	// 		    // 接收位置信息
	// 		    var loc = event.data;
	// 		    getWeather(loc)
	// 		}, false);
};
const getWeather = async () => {
 
  try {
    
    let { data: mapdata } = await axios.get(
      `https://devapi.qweather.com/v7/weather/now?location=101010100&key=62b17bd0842e4a21a1c0270750875595`
    );
    weather.value = mapdata.now;
    
  } catch (error) {
    console.error("请求出错：", error);
  }
}
const characteristic = ref({}); // 电站指标
const AlarmStatistics = ref([]); // 告警统计
const sysBatterystack = ref([]); // 告警统计
const ChargeDischargeTendency = ref([]); // 告警统计
const scureenpofit = ref([]); // 收益趋势

 // 电站列表
 const poststationstationName = async () => {
  try {
  //  let { data } = await axios.post(`/api/station/list/stationName`);
  let { data } = await axios.post(`/station/list/stationName`);
console.log( data.data[0].id);

  if (data.data.length == 0) {
    Singlevalue.value = "";
    return;
  } else {
    Singlevalue.value = data.data[0].id;
  }
  cities.value = data.data;
  await gitCitylevel()

} catch (error) {
    // convertImageToBase64();

    console.error("请求出错：", error);
  }
};
//equipmentID 设备id
const equipmentID =ref('');
const postemsDevice = (e) => {
  Singlevalue.value = e
   gitCitylevel()
  
};
  // 单站接口
  const gitCitylevel = async () => {
  try {
    // let { data: resdata } = await axios.post(`/api/screen/screenpower?powerId=bf91569e-bedd-4609-80ee-1f8d9bb5a5ed`);
    let { data: resdata } = await axios.post(`/screen/screenpower?powerId=${Singlevalue.value}`);
    console.log(resdata);
    characteristic.value = resdata.data.PowerStationIndex;
   AlarmStatistics.value = resdata.data.AlarmStatistics
   sysBatterystack.value = resdata.data.sysBatterystack
   let ymd = resdata.data.ChargeDischargeTendency.map(item => item.ymd.slice(-2));
   let chargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.chargeTotal);
   let dischargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.dischargeTotal);
   ChargeDischargeTendency.value[0]= ymd
   ChargeDischargeTendency.value[1]= chargeTotal
   ChargeDischargeTendency.value[2]= dischargeTotal
   let ymd1 = resdata.data.scureenpofit.map(item => item.ymd.slice(-2));
   let profit = resdata.data.scureenpofit.map(item => item.profit);
   scureenpofit.value[0]= ymd1
   scureenpofit.value[1]= profit


    // 充放电趋势图
   await population();
  // 电站分类统计
  await incomechart();
  } catch (error) {
    // convertImageToBase64();

    console.error("请求出错：", error);
  }
}; 

// 充放电趋势图
const population = () => {
  column.value = markRaw(echarts.init(document.getElementById("column")));
  window.addEventListener(
    "resize",
    () => {
      column.value.resize();
    },
    false
  );
  let myoption = {
    title: {
    subtext: 'kWh',
    subtextStyle: {
    fontSize:fontSize(14),

            color: '#CBF2FA' //
        }
  },
  legend: {
    top:fontSize(10),
    right:0,
    itemHeight:fontSize(8),
      itemWidth:fontSize(8),
   textStyle:{
    fontSize:fontSize(14),
    color:"#CBF2FA"
   }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top:"20%",
      left: "0%",
      right: "4%",
      bottom:"0%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      // axisLabel: { interval: 0, rotate: -30 },
      axisLine: {
                lineStyle: {
                    type: 'solid',//y轴线条类型
                    color: '#B1D8DF',//y轴线条颜色
                    opacity: 0.85,
                    width:fontSize(1)//y轴线条宽度
                }
            },
      axisLabel: {
        interval: 0, rotate: 1,
        background: '#A1C7CD',
        formatter: function (value) {
            return `{value|${value}}\n\n\n`;
        },
        rich: {
          
          value: {
            align: 'center',
            fontSize:fontSize(14),
                padding: [fontSize(60), 0, 0, 0], // 向右偏移20px
            }
        },
       
    },

      data:ChargeDischargeTendency.value[0],
    },
    yAxis: {
      type: "value",
      splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
              color: "#268C8C",
              width: fontSize(0.8),
              type: "solid" //dotted：虚线 solid:实线
             }
            },
      axisLabel: {
        interval: 1,
        textStyle: {
	      //改变刻度字体样式
        color: '#CBF2FA',
	      fontSize: fontSize(14),
	    },
      }
     
    },
    series: [
    
    {
        data:ChargeDischargeTendency.value[1],

        name: '充电',
        type: "bar",
        barWidth:fontSize(10), // 设置柱子宽度为30
        itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: fontSize(10),
        colorStops: [{
          offset: 0, color: '#30DCFF' // 渐变起始颜色
        }, {
          offset: 1, color: '#FFFFFF' // 渐变结束颜色
        }],
        global: false
      }
    }
               
         
      },
      {
        name: '放电',
        type: "bar",
        barWidth:fontSize(10), // 设置柱子宽度为30
      
        itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#CBF2FA' // 渐变起始颜色
        }, {
          offset: 1, color: '#ffffff' // 渐变结束颜色
        }],
        global: false
      }
    },
        data: ChargeDischargeTendency.value[2],

      },
    ],
  };
  column.value.setOption(myoption);
};
 // 收益趋势
 function incomechart (){
  console.log(scureenpofit.value);
  
  income.value = markRaw(echarts.init(document.getElementById("income")));
  window.addEventListener(
    "resize",
    () => {
      income.value.resize();
    },
    false
  );
    let option1 = {
      title: {
    subtext: '收益',
    subtextStyle: {
            color: '#CBF2FA', // 红色
            fontSize: fontSize(14),
        }
  },
  grid: {
      top:"20%",
      left: "1%",
      right: "4%",
      bottom: "-10%",
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function (params) {
        return params[0].name + ': ' + params[0].value;
      }
    },
    xAxis: {
      type: "category",
      // axisLabel: { interval: 0, rotate: -30 },
     
      axisLine: {
                lineStyle: {
                    type: 'solid',//y轴线条类型
                    color: '#B1D8DF',//y轴线条颜色
                    opacity: 0.85,
                    width: fontSize(0.8)//y轴线条宽度
                }
            },
      axisLabel: {
        interval: 0, rotate: 1,
        background: '#A1C7CD',
        formatter: function (value) {
            return `{value|${value}}\n\n\n`;
        },
        rich: {
            value: {
              align: 'center',
              fontSize:fontSize(14),
                padding: [fontSize(60),fontSize(-6), 0, 0] // 向右偏移20px
            }
        },
        textStyle: {
	      //改变刻度字体样式
	      color: '#CBF2FA',
	      fontSize:fontSize(14),
	    },
    },

      data: scureenpofit.value[0],
    },
    yAxis: {
      type: "value",
      splitLine: {
              // 网格线
              show: true,
              lineStyle: { //分割线
              color: "#268C8C",
              width:  fontSize(0.8),
              type: "solid" //dotted：虚线 solid:实线
             }
            },
      axisLabel: {
        interval: 1,
        textStyle: {
	      //改变刻度字体样式
        color: '#CBF2FA',
	      fontSize:fontSize(14),
	    },
      }
    },
    color: ['#CBF2FA'],
    series: [
      {
        name: 'hill',
        type: 'pictorialBar',
        barWidth: '160%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          opacity: 0.5
        },
        emphasis: {
          itemStyle: {
            opacity: 1
          }
        },
        data: [{value:  scureenpofit.value[1][0]}, // 第一个值表示柱子的宽度，第二个值表示柱子的高度
      {value: scureenpofit.value[1][1]},
      {value: scureenpofit.value[1][2]},
      {value:scureenpofit.value[1][3]},
      {value:scureenpofit.value[1][4]},
      {value: scureenpofit.value[1][5]},],
      }
    ]
  };
  income.value.setOption(option1,true);
  
  }
const station = () => {

  // showOverlay(true);

  router.push({name:'nationwide'})
 
}
const fontSize = (res) => {
            let clientWidth =
                window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
            if (!clientWidth) return;
            // 此处的3840 为设计稿的宽度，记得修改！
            let fontSize = clientWidth / 1920;
   
            return res * fontSize;
};
const formatAmount1000 = (amount) => {
  if (amount == undefined||amount == null) {
    return "0";
  }else{
    return (amount/1000).toFixed(1);
    // return amount
  }
 
};
const formatAmount10000 = (amount) => {
  if (amount == undefined||amount == null) {
    return "0";
  }else{
    return (amount/10000).toFixed(2);
    // return amount
  }
 
};
 // 省略小数点后1位
 const formatAmount = (amount) => {
  if (amount == undefined||amount == null) {
    return "0";
  }else{
    // return (amount / 1000).toFixed(2);
    return amount.toFixed(1);
  }
 
};
onMounted(() => {
  poststationstationName();
  showOverlay(true)


  // loading.value.close();
  updateTime(); // 初始更新时间
  const intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
  onUnmounted(() => clearInterval(intervalId)); // 清除定时器
  gatstationstest()
 
  showOverlay(false)

});
onUnmounted(() => {
   
  if (column.value) {
    column.value.dispose(); // 电站分类统计
  }
  if (income.value) {
    income.value.dispose(); // 安全评价
  }
});
</script>
<style scoped lang="scss">
*{
  color: #ffffff;
  padding: 0px;
  margin: 0px;
}

.map {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  justify-content: space-between;
  padding: 0px 25px;
 
}
.left {
  width: 386px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.left_logo {
  width: 100%;
  height: 38px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left_logo1{
  height: 100%;
}
.left_boxt{
  width: 100%;
  padding: 0px 120px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}



.left_boxopen{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.left_top {
  width: 100%;
  height: 280px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;
  background-repeat: no-repeat;
  margin-top: 15px;
  overflow: hidden;
  box-sizing: border-box;
}
.left_toptitle{
  display: flex;
  width: 100%;
  height: 35px;
  background-image: url(../assets/svg/mintitle.svg);
background-size: 100%;
  padding-left: 74px;
  padding-top: 2px;
font-family: Alimama FangYuanTi VF-SemiBold, Alimama FangYuanTi VF-SemiBold;
font-weight: normal;
font-size: 16px;
font-style: normal;
text-transform: none;
color: #DBF9FF;
  box-sizing: border-box;

}
.left_top1{
  display: flex;
  justify-content: space-around;
}
.left_top1img{
  width: 50%;
height: 80px;
background-image: url(../assets/svg/pay.svg);
background-repeat: no-repeat;
margin-left: 6px;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.left_top1img1{
font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 72px;
margin-top: 14px;
}
.left_top1img2{
font-family: Andada Pro, Andada Pro;
font-weight: normal;
font-size: 24px;
line-height: 30px;
font-style: normal;
text-transform: none;
margin-left: 72px;

}
.left_top2img{
  display: flex;
  justify-content:space-around;
  margin-top: 20px;
  box-sizing: border-box;
}
.left_top21{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

}
.left_top21img{
  width: 80px;
  height: 80px;
  background-image: url(../assets/svg/ICOM.svg);
  background-size:100% 100%;
display: flex;
justify-content: center;
padding-top: 10px;

}
.left_top21imgfont{
  font-family: Andada Pro, Andada Pro;
  font-weight: normal;
  font-size: 18px;
  font-style: normal;
  text-transform: none;
 
}
.left_top21img1{
font-family: ABeeZee, ABeeZee;
font-weight: normal;
font-size: 12px;
color: #C4F3FE;
font-style: italic;
text-transform: none;
}
.left_top21img2{
  font-family: ABeeZee, ABeeZee;
font-weight: normal;
font-size: 14px;
color: #C4F3FE;
font-style: italic;
text-transform: none;
padding-bottom:4px;
}
.left_top21name{
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
text-align: center;
font-style: normal;
text-transform: none;
}

.left_center {
  width: 100%;
  height: 300px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;
  background-repeat: no-repeat;

  margin-top: 50px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.left_bottom {
  width: 100%;
  height: 280px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;
  margin-top: 28px;
  box-sizing: border-box;

}
.left_eltable{
  width: 100%;
  height: 200px;
  color: #222;
  padding: 10px 8px;
font-size: 14px;
  box-sizing: border-box;
 margin-top: 12px;
}
.left_eltabledivtitle {
   width: 100%;
   height: 35px;
   background: rgba(0,240,255,0.08);
   border-radius: 0px 0px 0px 0px;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-around;
position:relative;
overflow: hidden;
}
.left_eltabledivtitles{
  width: 372px;
  height: 75px;
  background: radial-gradient( #84C4FF 0%, rgba(0,209,255,0.5) 37%, rgba(0,0,0,0) 100%); 
  position: absolute;
  top: -40px;
}
.left_eltablediv{
  width: 372px;
height: 40px;
font-family: Abhaya Libre, Abhaya Libre;
font-weight: 400;
color: rgba(255,255,255,0.78);
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
display: flex;
align-items: center;
}
.left_eltabnormal{
  font-size: 14px;
 color: #30B4FF;
}
.left_eltabnormals{
  font-size: 14px;
  color: #DD7D4D;

}
.left_eltabledivs{
  width: 372px;
  height: 40px;
  background: rgba(0,240,255,0.08);
  font-family: Abhaya Libre, Abhaya Libre;
font-weight: 400;
color: rgba(255,255,255,0.78);
line-height: 14px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
display: flex;
align-items: center;
}
el-table{
  color: #222;

}
.right {
  width: 386px;
  display: flex;
  flex-direction: column;
}
.right_jia{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right_logo {
  width:250px;
  height: 40px;
  margin-top: 40px;
  font-size: 16px;
  color: #DBF9FF;
  margin-bottom:10px;
}
.right_top {
  width: 100%;
  height: 280px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;
}
.left_topdiv{
  width: 100%;
  height: 92px;
  background-image: url(../assets/svg/01.svg);
  background-size: 100%;
  background-repeat: no-repeat;
 margin-top: 26px;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
}
.left_topdivname{
  font-family: Alimama FangYuanTi VF-SemiBold, Alimama FangYuanTi VF-SemiBold;
  font-weight: normal;
  font-size: 14px;
  font-style: normal;
  text-transform: none;
  margin-top: 6px;
  margin-left: 60px;

  color: linear-gradient(89.99999999999996deg, #DBF9FF 36%, #A9F0FF 86%);
}
.left_topdivpay{
  font-family: Andada Pro, Andada Pro;
  font-weight: normal;
  font-size: 24px;
  font-style: normal;
  text-transform: none;
  color: linear-gradient(89.99999997571749deg, #30CBEB 0%, #FFFFFF 100%);
  margin-bottom: 10px;
margin-left: 60px;

}
.left_topdivname1{
  font-family: Alimama FangYuanTi VF-SemiBold, Alimama FangYuanTi VF-SemiBold;
  font-weight: normal;
  font-size: 14px;
  font-style: normal;
  text-transform: none;
  margin-top: 6px;
margin-left: 60px;

  background-image: linear-gradient(to bottom, #EBE330, #FFFFFF) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.left_topdivpay1{
  font-family: Andada Pro, Andada Pro;
  font-weight: normal;
  font-size: 24px;
  font-style: normal;
  text-transform: none;
  background-image: linear-gradient(to bottom, #EBE330, #FFFFFF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin-bottom: 10px;
margin-left: 60px;
}
.left_topright{
display: flex;
}
.left_cooperative{
  display: flex;
}
.left_cooperativeimg{
  width: 50px;
height: 58px;
}
.left_cooperativename{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 6px;
}
.cooperative_title{
font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
margin-top: 2px;
}
.cooperative_title1{
font-size: 24px;
color: #30CBEB;
line-height: 36px;
}
.left_topleft {
display: flex;
}
.left_Alarm{
  width: 100%;
  height: 92px;
  background-image: url(../assets/svg/02.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
 justify-content: space-around;
  align-items: center;
  letter-spacing: 1.5px;

}
.left_Alarmleft{
 width: 50%;
}
.left_Alarm1right{
width: 50%;
}
.right_center {
  width: 100%;
  height: 300px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;
  margin-top: 50px;
  background-repeat: no-repeat;

box-sizing: border-box;
display: flex;
flex-direction: column;
}
 
 
 
.right_bottom {
  width: 100%;
  height: 280px;
  border-radius: 8px 8px 8px 8px;
font-size: 14px;
  background-image: url(../assets/svg/bjmin.svg);
  background-size:100%;

  margin-top: 30px;
  box-sizing: border-box;
}
.right_monitor{
  width: 100%;
  display: flex;
}
.right_monitors{
  width: 100%;
  display: flex;
  margin-top: 14px;
}
.right_bottomrevenue{
  width: 50%;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  margin-top: 20px;
}
.right_bottomrevenueimg{
  width: 57px;
  height: 54px;
}
.right_bottomrevenuediv{
  margin-left: 10px;
}
.right_bottomrevenuedivd{
  font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
  font-weight: 400 !important;
  font-size: 14px;
  color: #CBF2FA;
  font-style: normal;
  text-transform: none;
}
.right_bottomrevenuev{
  font-family: Chusung-16;

  font-weight: normal;
  font-size: 24px;
  color: #30DCFF;
  font-style: normal;
  line-height: 26px;
}
.right_bottomprogress{
display: flex;
flex-direction: column;
margin-top:15px;
}
.bottomprogress{
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  
}
.bottomprogress2{
  display: flex;

}
.bottomprogress1{
  width: 40px;
  height: 20px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 255, 255, 0.6), rgba(25, 156, 229, 0.6)) 1 1;
  margin-right: 5px;
  display: flex;
  font-size: 12px;
  line-height: 8px;
  align-items: center;
  justify-content: center;
}
::v-deep .el-progress-bar__innerText {
  display: none !important;
}
::v-deep .destination .el-progress-bar__outer {
  display: flex;
  justify-content: end;

}
::v-deep .el-progress{
  border-radius: 0 !important;
 
 
}
::v-deep .el-progress-bar{
  border-radius: 0 !important;

 
}
::v-deep .el-progress-bar__outer{
  border-radius: 0 !important;

 
}
::v-deep .el-progress-bar__inner{
  border-radius: 0 !important;
}
.el-progress-bar__inner {
  position: static;
}
.center {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 100px;
}
.center_top{
  width: 100%;
  height: 110px;
  display: flex;
  justify-content:space-around;
   padding: 0px 100px;
   margin-top:20px;
}
.center_top1img11{
  width: 220px;
height: 110px;
background-image: url(../assets/svg/gong.svg);
background-size:100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left:90px;
padding-top: 10px;
}
.center_top1img22{
  width: 220px;
height: 110px;
background-image: url(../assets/svg/cdian.svg);
background-size:100% 100%;

background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left:80px;
padding-top: 10px;

}
.center_top1img33{
  width: 220px;
height: 110px;
background-image: url(../assets/svg/soc20.svg);
background-size:100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left:60px;
padding-top: 10px;
}
.center_top1img44{
  width: 220px;
height: 110px;
background-image: url(../assets/svg/soc20.svg);
background-size:100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left:90px;
padding-top: 10px;

}
.center_top1img1{
font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
font-style: normal;
text-transform: none;
}
.center_top1img21{
font-family: Alimama FangYuanTi VF, Alimama FangYuanTi VF;
font-weight: bold;
color: #20FEAE;
font-size: 30px;

text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
font-style: normal;
text-transform: none;
}
.center_top1img2{
font-family: Andada Pro, Andada Pro;
font-weight: normal;
font-size: 30px;
font-style: normal;
text-transform: none;
color: #30CBEB;
display: flex;
align-items: center;
align-items: flex-end;
}
.center_bottom{
  display: flex;
justify-content: center;
}
.center_bottomdiv{
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom:20px;
}
.center_bottom1{
  margin-right: 8px;
}
.center_bottom2{
  width: 90px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;

font-weight: 400;
font-size: 16px;
color: #C4F3FE;
  background-image: url(../assets/svg/gliang.svg);
  background-size: 100%;
background-repeat: no-repeat;
}
.center_bottom3{
  width: 90px;
  height: 32px;
  display: flex;
justify-content: center;
align-items: center;
cursor: pointer;

font-weight: 400;
font-size: 16px;
color: #C4F3FE;
    background-image: url(../assets/svg/buliang.svg);
  background-size: 100%;

  background-repeat: no-repeat;
}
.center_bottom4{
  width: 90px;
  height: 32px;
  display: flex;
justify-content: center;
align-items: center;
cursor: pointer;

font-weight: 400;
font-size: 16px;
color: #C4F3FE;
    background-image: url(../assets/svg/gliang.svg);
  background-size: 100%;

  background-repeat: no-repeat;
}
.center_bottom5{
  width: 90px;
  height: 32px;
  display: flex;
justify-content: center;
align-items: center;

font-weight: 400;
font-size: 16px;
color: #C4F3FE;
    background-image: url(../assets/svg/gliang.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}
.center_bottom6{
  margin-left: 8px;
}
#main {
width: 100%;
height: 803px;
 margin-top: 80px; 
 display: flex;
 justify-content: center;
 background:url(../assets/svg/base.svg);
 background-size: 100% 90%;
 background-repeat: no-repeat;
}

 
#column {
  flex: 1;
  height: 255px;
  margin-top: 20px;
  padding: 0px 8px;
  box-sizing: border-box;
}
#income {
  width: 100%;
  flex: 1;
  margin-top: 20px;
  padding: 0px 8px;
  box-sizing: border-box;
}
#safety{
  width: 148px;
  height: 244px;
}
.custom-font18 {
  font-family: 'Andada Pro', sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1.5px;
  background-image: linear-gradient(to bottom, #30CBEB 0%, #FFFFFF 40%, #FFFFFF 41%, #FFFFFF 100%); /* 调整颜色渐变位置和数量 */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.custom-font30 {
  font-family: 'Andada Pro', sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1.5px;
  background-image: linear-gradient(to bottom, #30CBEB, #FFFFFF); /* 调整颜色渐变位置和数量 */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.custom-fonts {
  font-family: 'Andada Pro', sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1.5px;
 
}
.TiF_font {
  font-family: 'AlimamaFangYuanTiF', sans-serif;
}
.execdata{
  overflow: hidden;
 }
.execInfo {
  width: 100%;
  height: 200px;
  overflow: hidden;

}
.scrolladdress{
  width: 90px;
  margin-left: 10px;
  margin-right: 10px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.scrollcontent{
  width: 160px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
  box-sizing: border-box;
}
.scrollevent{
  width: 44px;
}
.left_eltabnormal{
  width: 50px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.left_eltabnormal1{
  width: 50px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.left_boxt1 {

  font-size: 18px;
  display: flex;
  align-items: center;
 
 
  :deep(.el-select__wrapper) {
    .el-select__prefix {
  background-image: linear-gradient(to bottom, #30CBEB, #FFFFFF); /* 调整颜色渐变位置和数量 */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

    }
  
    :deep(.el-select__selected-item) {
      font-size: 22px;
    }

    background-color: rgb(0 0 0 / 0%);
    box-shadow: 0 0 0 0 !important;

    --el-input-transparent-border: 0 0 0 0px;
    --el-input-hover-border: 0px !important;
    --el-input-border: 0px;

    // background-color:
  }
  :deep(.el-select .el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 0 !important;
  }
  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 0 !important;
  }

  // 自定义el-select的下拉箭头
  :deep(.el-select__caret) {
    /* 为下拉小箭头留出一点位置，避免被文字覆盖 */
    padding-right: 14px;
width: 24px;
height: 24px;
    /* 很关键：将默认的select选择框样式清除 */
    appearance: none;

    /* 自定义图片 */
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

    /* 自定义图片的大小 */
    background-size: 100% 100%;
  }

  /* 将小箭头的样式去去掉 */
  :deep(.el-select__suffix .el-icon svg) {
    width: 0;
  }
  :deep(.el-icon-arrow-up::before) {
    content: "";
  }
  :deep(.el-select--large .el-select__wrapper) {
    font-size: 24px;
    
  }

}
 
.el-select-dropdown__item{
  color: #fff;
  font-size: 16px;
  padding-left:20px;
}
.is-selected{
  color: #30CBEB;
  font-size: 16px;
  padding-left:20px;

}

.el-select-dropdown__item.is-hovering{
  background-color: rgb(0 0 0 / 0%);
}
 

</style>