|
@@ -1,217 +1,263 @@
|
|
|
<template>
|
|
|
<div class="largeScreen">
|
|
|
<div class="topTiltle">
|
|
|
- <div class="timeBox">运行日:{{ time }}</div>
|
|
|
<span class="largescreentitle">一次调频系统</span>
|
|
|
<div class="btuGroup"><span class="topRightBtuBg topRightBtu" style="cursor: pointer;" @click="push()">后台管理</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="largeScreen-main-container">
|
|
|
- <div class="largeScreen-main-top-container">
|
|
|
- <div class="barBox">
|
|
|
- <div class="barTitle">
|
|
|
- <img src="../../assets/largeScreen/tiltleLeftSign.png" height="30px" style="margin-right: 1%">
|
|
|
- 中长期电量
|
|
|
- </div>
|
|
|
- <electricity-bar/>
|
|
|
- </div>
|
|
|
- <div class="lineStyle"></div>
|
|
|
- <div class="barBox">
|
|
|
- <div class="barTitle" style="margin-left: 0px">
|
|
|
- <img src="../../assets/largeScreen/tiltleLeftSign.png" height="30px" style="margin-right: 1%">
|
|
|
- 月交易电量
|
|
|
- </div>
|
|
|
- <day-income/>
|
|
|
- </div>
|
|
|
- <div class="lineStyle"></div>
|
|
|
- <div class="barBox">
|
|
|
- <div class="barTitle" style="margin-left: 0px">
|
|
|
- <img src="../../assets/largeScreen/tiltleLeftSign.png" height="30px" style="margin-right: 1%">
|
|
|
- 月发电收益
|
|
|
- </div>
|
|
|
- <real-income/>
|
|
|
- </div>
|
|
|
- <div class="lineStyle"></div>
|
|
|
- <div class="barBox">
|
|
|
- <div class="barTitle" style="margin-left: 0px">
|
|
|
- <img src="../../assets/largeScreen/tiltleLeftSign.png" height="30px" style="margin-right: 1%">
|
|
|
- 月策略增益
|
|
|
- </div>
|
|
|
- <strategy-gain/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 交易流程 -->
|
|
|
- <div class="largeScreen-main-middle-container">
|
|
|
- <div class="barTitle" style="margin-top: .5%;margin-left: .5%;">
|
|
|
- <img src="../../assets/largeScreen/tiltleLeftSign.png" height="30px" style="margin-right: 1%">
|
|
|
- 交易流程
|
|
|
- </div>
|
|
|
- <div class="bg">
|
|
|
- <div style="margin-top:.5%;display: flex;flex-direction: column;justify-content: space-between;height: calc(52vh)">
|
|
|
- <div>
|
|
|
- <span style="margin-left: .5%;font-size: 16px;font-weight: bold;text-shadow: 2px 2px 3px #f9e32f;">竞价日(d-1)</span>
|
|
|
- <div style="display: flex;flex-direction: column;align-items: center">
|
|
|
- <div
|
|
|
- style="width: 98%;height: calc(17vh);display: flex;flex-direction: column;justify-content: space-between;">
|
|
|
- <div style="margin-left:18%;margin-top:.5%;display: flex;">
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 2%;cursor: pointer;"
|
|
|
- @click="showDialog('市场披露数据','publicData')">获取披露数据
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 2%;cursor: pointer;"
|
|
|
- @click="showDialog('负荷预测分析','loadForecasting')">负荷预测
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 2%;cursor: pointer;"
|
|
|
- @click="showDialog('电价预测分析','paPriceChart')">日前电价预测
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 2%;cursor: pointer;"
|
|
|
- @click="showDialog('日前价差分析','priceDiffAnalysis')">日前策略
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 2%;cursor: pointer;"
|
|
|
- @click="showDialog('短期曲线调整','shortForecastChart')">短期曲线上报
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-left: 23%;cursor: pointer;"
|
|
|
- @click="showDialog('日前收益测算','gainEstimation')">收益评估</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin-top: 1.5%;display: flex;width: 98%;">
|
|
|
- <div class="flowBottomBtu topRightBtu">机组信息申报</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-left: 2%">发布边界信息</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-left: 35%">日前交易申报</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-left: 2%">日前预出清</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-left: 12%">发布预出清结果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <span style="margin-left: .5%;font-size: 16px;font-weight: bold;text-shadow: 2px 2px 3px #f9e32f;">运行日(d)</span>
|
|
|
- <div style="display: flex;flex-direction: column;align-items: center;">
|
|
|
- <div
|
|
|
- style="width: 98%;height: calc(18vh);display: flex;flex-direction: column;justify-content: space-between;">
|
|
|
- <div style="display: flex;justify-content: flex-end;">
|
|
|
- <div
|
|
|
- style="margin-top: 1.5%;margin-right: 10%;width: 70%;display: flex;flex-direction:row-reverse;">
|
|
|
- <div class="flowBottomBtu topRightBtu">获取最新边界条件</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-right: 30%">实时市场出清计算</div>
|
|
|
- <div class="flowBottomBtu topRightBtu" style="margin-right: 5%">发布出清结果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="display: flex;justify-content: flex-end">
|
|
|
- <div
|
|
|
- style="width:100%;margin-top: 1%;margin-bottom: .5%;margin-right: 20%;display: flex;flex-direction: row-reverse;">
|
|
|
- <div class="flowTopBtu topRightBtu" style="cursor: pointer;"
|
|
|
- @click="showDialog('实时电价预测','rtPriceChart')">实时电价预测
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-right: 5%">交易测算</div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-right: 32%;cursor: pointer;"
|
|
|
- @click="showDialog('市场披露数据','publicData')">获取披露数据
|
|
|
- </div>
|
|
|
- <div class="flowTopBtu topRightBtu" style="margin-right: 12%;cursor: pointer;"
|
|
|
- @click="showDialog('复盘分析','reviewAnalysis')">复盘分析
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 负荷预测弹框 -->
|
|
|
- <div class="dialogInfoBg" v-if="dialogShow">
|
|
|
- <!-- 弹框头 -->
|
|
|
- <div class="rightTiltleTextBg">
|
|
|
- <div class="rightMainTitle">
|
|
|
- <span>{{ dialogTitle }}</span>
|
|
|
- <div @click="dialogShow = false">
|
|
|
- <img src="../../assets/largeScreen/guanbixiao.png" width="25px" style="cursor: pointer">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 弹框主体 -->
|
|
|
- <div>
|
|
|
- <component :is="componentName"></component>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div id="fline" style="width: 900px;height: 450px"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import electricityBar from './components/electricityBar'
|
|
|
-import dayIncome from './components/dayIncome'
|
|
|
-import realIncome from './components/realIncome'
|
|
|
-import strategyGain from './components/strategyGain'
|
|
|
-import loadForecasting from './components/loadForecasting'
|
|
|
-import paPriceChart from './components/paPriceChart'
|
|
|
-import shortForecastChart from './components/shortForecastChart'
|
|
|
-import publicData from './components/publicData'
|
|
|
-import priceDiffAnalysis from './components/priceDiffAnalysis'
|
|
|
-import gainEstimation from "./components/gainEstimation";
|
|
|
-import reviewAnalysis from "./components/reviewAnalysis";
|
|
|
-import rtPriceChart from "./components/rtPriceChart";
|
|
|
+// import electricityBar from './components/electricityBar'
|
|
|
|
|
|
export default {
|
|
|
name: "index",
|
|
|
- components: {
|
|
|
- electricityBar,
|
|
|
- dayIncome,
|
|
|
- realIncome,
|
|
|
- strategyGain,
|
|
|
- loadForecasting,
|
|
|
- paPriceChart,
|
|
|
- shortForecastChart,
|
|
|
- publicData,
|
|
|
- priceDiffAnalysis,
|
|
|
- gainEstimation,
|
|
|
- reviewAnalysis,
|
|
|
- rtPriceChart
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
+ fmMinTime:null,
|
|
|
+ fmMaxTime:null,
|
|
|
+ fms:[],
|
|
|
+ activePower:[],
|
|
|
+ datas:[],
|
|
|
+ chart: null,
|
|
|
time: '',
|
|
|
dialogTitle: '负载预测',
|
|
|
dialogShow: false,
|
|
|
- componentName: 'loadForecasting'
|
|
|
+ componentName: 'loadForecasting',
|
|
|
+ websock: null, //建立的连接
|
|
|
+ lockReconnect: false, //是否真正建立连接
|
|
|
+ timeout: 200, //20秒一次心跳
|
|
|
+ timeoutObj: null, //心跳心跳倒计时
|
|
|
+ serverTimeoutObj: null, //心跳倒计时
|
|
|
+ timeoutnum: null, //断开 重连倒计时
|
|
|
+ fmOption:null
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.formatTime()
|
|
|
- // this.timer = setInterval(this.formatTime, 1000 * 60)
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // //页面刚进入时开启长连接
|
|
|
+ this.initWebSocket();
|
|
|
+
|
|
|
},
|
|
|
destroyed() {
|
|
|
- clearInterval(this.timer)
|
|
|
- this.timer = null
|
|
|
+ //页面销毁时关闭长连接
|
|
|
+ clearTimeout(this.timeoutObj);
|
|
|
+ console.log('数据大屏销毁websocket')
|
|
|
+ // console.log('销毁页面')
|
|
|
+ this.websocketclose();
|
|
|
+ this.chart.clear()
|
|
|
},
|
|
|
methods: {
|
|
|
- showDialog(title, componentName) {
|
|
|
- this.dialogTitle = title
|
|
|
- this.componentName = componentName
|
|
|
- this.dialogShow = true
|
|
|
+ init(){
|
|
|
+ let chartDom = document.getElementById('fline');
|
|
|
+ this.chart = this.$echarts.init(chartDom);
|
|
|
+ // this.datas=[["2021-01-04 08:14:42",150], ["2021-01-04 08:14:56.200",230], ["2021-01-04 08:14:56.600",224], ["2021-01-04 08:15:34",218], ["2021-01-04 08:15:50",135], ["2021-01-04 08:16:12",147], ["2021-01-04 08:17:17",260]];
|
|
|
+ // this.fms=[50, 49.8 ,50.1,50, 50,50, 50];
|
|
|
+ // this.fms=[[]]
|
|
|
+ var fmColors= ['#FF0000', '#00FF00']
|
|
|
+ let _this = this
|
|
|
+ this.fmOption= {
|
|
|
+ color: fmColors,
|
|
|
+ title: {
|
|
|
+ text: '有功➖频率实时图',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ color:"#fff"
|
|
|
+ },
|
|
|
+ top: 10,
|
|
|
+ left: 10
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ icon:'roundRect',
|
|
|
+ data: ['功率', '频率'],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ selectedMode:false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '17%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '8%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function(params) {
|
|
|
+ var temp = "";
|
|
|
+ // if (params[0]!=undefined && params[1]!=undefined){
|
|
|
+ // temp = "时间:"+_this.$echarts.format.formatTime('hh:mm:ss.SSS', params[0].name) + "<br/>" + "有功:" + params[0].data[1]+ " MW<br/>" + "频率:" + params[0].data[1]+" Hz";
|
|
|
+ temp = "时间:"+_this.$echarts.format.formatTime('hh:mm:ss.SSS', params[0].name);
|
|
|
+ // }
|
|
|
+
|
|
|
+ return temp;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'time',
|
|
|
+ min: this.fmMinTime,
|
|
|
+ max: this.fmMaxTime,
|
|
|
+ interval: 1000*20,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (value, index) {
|
|
|
+ return _this.$echarts.format.formatTime('hh:mm:ss', value); // 格式为年月日
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ position: 'left',
|
|
|
+ name: '功率',
|
|
|
+ min: -1,
|
|
|
+ max: [],
|
|
|
+ interval: 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} MW'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {show: false},
|
|
|
+ position: 'right',
|
|
|
+ name: '频率',
|
|
|
+ min: 48,
|
|
|
+ max: 51.5,
|
|
|
+ interval: 0.05,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} Hz'
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name:'功率',
|
|
|
+ data: this.datas,
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'频率',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: this.fms,
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ // hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.fmOption.yAxis[0].max=300
|
|
|
+ this.chart.setOption(this.fmOption,true)
|
|
|
},
|
|
|
push() {
|
|
|
this.$router.push({path: "/"})
|
|
|
},
|
|
|
- /*时间格式化*/
|
|
|
- formatTime() {
|
|
|
- this.time = ''
|
|
|
- let date = new Date()
|
|
|
- let year = date.getFullYear(); // 年
|
|
|
- let month = date.getMonth() + 1; // 月
|
|
|
- let day = date.getDate();
|
|
|
- // let hour = date.getHours(); // 获取当前小时数(0-23)
|
|
|
- // let minutes = date.getMinutes();
|
|
|
- if (month < 10) month = "0" + month;
|
|
|
- // if (day < 10) day = "0" + day;
|
|
|
- // if (minutes < 10) minutes = "0" + minutes;
|
|
|
- this.time = year + "年" + month + "月" + day + "日 ";
|
|
|
+ // 字符串时间转化成时间戳
|
|
|
+ getDateFromString(str) {
|
|
|
+ var reg = /^(\d+)-(\d+)-(\d+) (\d+):(\d+):(\d+)/;
|
|
|
+ var temp = str.match(reg);
|
|
|
+ var result = "";
|
|
|
+ if (temp) {
|
|
|
+ result = new Date(temp[1], temp[2] - 1, temp[3], temp[4], temp[5], temp[6]);
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ initWebSocket() {
|
|
|
+ //建立连接
|
|
|
+ //初始化weosocket
|
|
|
+ // let tokenStr = localStorage.getItem("jy")
|
|
|
+ let visitPort
|
|
|
+ if (process.env.NODE_ENV=='development'){
|
|
|
+ visitPort = '443'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ visitPort = '443'
|
|
|
+ }
|
|
|
+ let wsuri = 'wss:'+location.host.split(':')[0]+ ':443/websocket/testsocket';
|
|
|
+ //建立连接
|
|
|
+ this.websock = new WebSocket(wsuri);
|
|
|
+ //连接成功
|
|
|
+ this.websock.onopen = this.websocketonopen;
|
|
|
+ //连接错误
|
|
|
+ this.websock.onerror = this.websocketonerror;
|
|
|
+ //接收信息
|
|
|
+ this.websock.onmessage = this.websocketonmessage;
|
|
|
+ //连接关闭
|
|
|
+ this.websock.onclose = this.websocketclose;
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ //开启心跳
|
|
|
+ var self = this;
|
|
|
+ self.timeoutObj && clearTimeout(self.timeoutObj);
|
|
|
+ // self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
|
|
|
+ self.timeoutObj = setTimeout(function() {
|
|
|
+ self.websock.send("heartbeat");
|
|
|
+ }, self.timeout);
|
|
|
+ },
|
|
|
+ websocketonopen() {
|
|
|
+
|
|
|
+ },
|
|
|
+ websocketonerror(e) {
|
|
|
+
|
|
|
+ },
|
|
|
+ websocketclose(e) {
|
|
|
+ console.log("前端连接已关闭");
|
|
|
+ this.websock.close()
|
|
|
+ },
|
|
|
+ websocketonmessage(event) {
|
|
|
+ //接收服务器推送的信息
|
|
|
+ //打印收到服务器的内容
|
|
|
+ // console.log("收到服务器信息",event.data);
|
|
|
+ let data=event.data
|
|
|
+ var tempFm = JSON.parse(data)
|
|
|
+ // 存入频率数组
|
|
|
+ this.fms.push({name: tempFm.time, value: [tempFm.time, tempFm.f]})
|
|
|
+ this.activePower.push({name: tempFm.time, value: [tempFm.time, tempFm.activePower]})
|
|
|
+ if (this.fms.length>600){
|
|
|
+ this.fms.shift()
|
|
|
+ this.activePower.shift()
|
|
|
+ }
|
|
|
+ // 对时间轴最大最小时间更新
|
|
|
+ this.fmMaxTime=tempFm.time
|
|
|
+ let tempTime=new Date(tempFm.time)
|
|
|
+ this.fmMinTime=new Date(tempTime.valueOf()-1000*60*2)
|
|
|
+
|
|
|
+ this.fmOption.xAxis.min=this.fmMinTime
|
|
|
+ this.fmOption.xAxis.max=this.fmMaxTime
|
|
|
+
|
|
|
+ this.fmOption.series[0].data=this.activePower
|
|
|
+ this.fmOption.series[1].data=this.fms
|
|
|
+ this.chart.setOption(this.fmOption,true)
|
|
|
+ },
|
|
|
+ websocketsend(msg) {
|
|
|
+ //向服务器发送信息
|
|
|
+ this.websock.send(msg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -254,15 +300,6 @@ export default {
|
|
|
color: transparent;
|
|
|
}
|
|
|
|
|
|
-.timeBox {
|
|
|
- position: absolute;
|
|
|
- left: 2%;
|
|
|
- top: 0;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 40px;
|
|
|
- font-family: timeFont !important;
|
|
|
-}
|
|
|
-
|
|
|
.btuGroup {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
@@ -281,12 +318,6 @@ export default {
|
|
|
height: 50px;
|
|
|
}
|
|
|
|
|
|
-.bg {
|
|
|
- background: url(../../assets/largeScreen/line.png) 100% no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 90%;
|
|
|
-}
|
|
|
-
|
|
|
.topRightBtu {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -311,15 +342,6 @@ export default {
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
|
|
|
-.largeScreen-main-middle-container {
|
|
|
- margin-top: 1%;
|
|
|
- width: 98%;
|
|
|
- height: calc(58vh);
|
|
|
- border-width: 1px;
|
|
|
- border-radius: 5px;
|
|
|
- border-color: aqua;
|
|
|
- box-shadow: 1px 0px 10px 2px aqua
|
|
|
-}
|
|
|
|
|
|
.lineStyle {
|
|
|
width: 1px;
|
|
@@ -342,117 +364,8 @@ export default {
|
|
|
margin-top: 1.5%;
|
|
|
}
|
|
|
|
|
|
-.arrow {
|
|
|
- background-image: url("../../assets/largeScreen/arrow.gif");
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- transform: scale(.5);
|
|
|
- position: absolute;
|
|
|
- left: 87%
|
|
|
-}
|
|
|
-
|
|
|
-.lineDiv {
|
|
|
- width: 25%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative
|
|
|
-}
|
|
|
-
|
|
|
-.jiantou {
|
|
|
- background-image: url("../../assets/largeScreen/jiantou.png");
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- transform: scale(.17);
|
|
|
- position: absolute;
|
|
|
- left: 40%;
|
|
|
-}
|
|
|
-
|
|
|
-.arrowLeft {
|
|
|
- background-image: url("../../assets/largeScreen/arrowLeft.png");
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- transform: scale(.17);
|
|
|
- position: absolute;
|
|
|
- left: 30%;
|
|
|
-}
|
|
|
-
|
|
|
-.arrowDown {
|
|
|
- background-image: url("../../assets/largeScreen/arrowDown.png");
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- transform: scale(.17);
|
|
|
-}
|
|
|
-
|
|
|
-.arrowUpper {
|
|
|
- background-image: url("../../assets/largeScreen/arrowUpper.png");
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- transform: scale(.17);
|
|
|
-}
|
|
|
-
|
|
|
-.solidLine {
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- border-width: 1px;
|
|
|
- border-style: solid;
|
|
|
- border-color: aqua
|
|
|
-}
|
|
|
-
|
|
|
-.dashedLine {
|
|
|
- width: 200px;
|
|
|
- height: 1px;
|
|
|
- border-width: 1px;
|
|
|
- border-style: dashed;
|
|
|
- border-color: aqua
|
|
|
-}
|
|
|
-
|
|
|
-.flowBottomBtu {
|
|
|
- width: 170px;
|
|
|
- height: 40px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- border: 0.5px solid #2fff82;
|
|
|
- box-shadow: inset rgb(0 255 234) -1px 0px 17px;
|
|
|
-}
|
|
|
-
|
|
|
-.flowTopBtu {
|
|
|
- width: 130px;
|
|
|
- height: 40px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- border: 0.5px solid #ffc92f;
|
|
|
- box-shadow: inset rgb(255 207 0) -1px 0px 16px;
|
|
|
-}
|
|
|
|
|
|
-.dialogInfoBg {
|
|
|
- /*background: url(../../assets/largeScreen/dialogBg.png) 100% no-repeat;*/
|
|
|
- /*background-size: 100% 100%;*/
|
|
|
- background: rgb(1 30 40);
|
|
|
- box-shadow: inset 0px 0px 11px 3px #01f4f475;
|
|
|
- padding: 1%;
|
|
|
- width: 55%;
|
|
|
- position: absolute;
|
|
|
- top: 20%;
|
|
|
- left: 22%;
|
|
|
-}
|
|
|
|
|
|
-.rightTiltleTextBg {
|
|
|
- height: 32px;
|
|
|
- background: url(../../assets/largeScreen/leftTitleBg.png) 100% no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.rightMainTitle {
|
|
|
- color: rgb(144, 226, 255);
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 550;
|
|
|
- margin-left: 8%;
|
|
|
- position: relative;
|
|
|
- top: -25%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
|
|
|
@font-face {
|
|
|
font-family: timeFont;
|