首页2.0

cpp-ui/src/assets/styles/dark.scss

@@ -300,3 +300,18 @@
     border-color: #49e9f8 !important;
   }
 }
+/*echarts 全屏背景*/
+.echartsFullDialog{
+  .el-dialog__header, .el-dialog__body, .el-dialog__footer {
+    color: white !important;
+    background-image: url('../images/pageBg.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+.echartsFullIcon{
+  cursor: pointer;
+  top: .5vh;
+  right: .5vw;
+}

cpp-ui/src/assets/styles/index.scss

@@ -123,7 +123,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 20px 20px 0 20px;
 }
 
 .components-container {
@@ -202,9 +202,21 @@ aside {
 .items-center{
   align-items: center;
 }
+.flex-wrap{
+  flex-wrap: wrap;
+}
 .position-r{
   position: relative;
 }
 .position-a{
   position: absolute;
 }
+.ml-0{
+  margin-left: .5vw;
+}
+.ml-1{
+  margin-left: 1vw;
+}
+.mr-0{
+  margin-right: .5vw;
+}

cpp-ui/src/assets/styles/sidebar.scss

@@ -1,7 +1,7 @@
 #app {
 
   .main-container {
-    height: calc(100% - 50px);
+    //height: calc(100% - 50px);
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;

cpp-ui/src/layout/index.vue

@@ -15,7 +15,7 @@
       <!--        <navbar/>-->
       <!--        <tags-view v-if="needTagsView"/>-->
       <!--      </div>-->
-      <app-main style="height: 95vh;overflow-y: scroll"/>
+      <app-main style="height: 95vh;overflow-y: auto"/>
 <!--      <app-main/>-->
       <right-panel>
         <settings/>

cpp-ui/src/views/largeScreen/components/center-bottom.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="position-a echartsFullIcon" @click="openFull">
+      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
+    </div>
+    <div id="lineChart"/>
+    <!-- 全屏弹框 -->
+    <div class="echartsFullDialog">
+      <el-dialog
+        title="功率曲线"
+        :visible.sync="dialogVisible"
+        :fullscreen="true"
+        :destroy-on-close="true"
+        center
+      >
+        <div id="main" ref="fullChart" :style="'width:100%;height:' + (screenHeight - 110) + 'px'"/>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {lineOption} from '../echarts-data'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      screenHeight: window.innerHeight,
+      lineChart: null,
+      fullChart: null,
+      chartData: {}
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.chartData = value
+        this.setOptions(this.chartData)
+      }
+    }
+  },
+  mounted() {
+    const _this = this
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.onresize = () => {
+      return (() => {
+        window.screenHeight = window.innerHeight
+        _this.screenHeight = window.screenHeight
+      })()
+    }
+  },
+  beforeDestroy() {
+    if (this.lineChart !==null) {
+      this.lineChart.dispose();
+      this.lineChart = null
+    }
+    if (this.fullChart !== null) {
+      this.fullChart.dispose();
+      this.fullChart = null
+    }
+
+  },
+  methods: {
+    initChart() {
+      this.lineChart = this.$echarts.init(document.getElementById('lineChart'));
+      this.setOptions(this.chartData)
+    },
+    openFull(){
+      const _this = this
+      _this.dialogVisible = true// 打开弹窗
+      _this.$nextTick(() => {
+        const chartFul = this.$refs.fullChart
+        if (chartFul) {
+          _this.setFullOptions(_this.chartData)// 画图
+        }
+      })
+    },
+    setOptions({realList, ableList,theoryList,dqList,cdqList} = {}) {
+      const _this = this
+      let option = JSON.parse(JSON.stringify(lineOption))
+      option.series[0].data = realList
+      option.series[1].data = ableList
+      option.series[2].data = theoryList
+      option.series[3].data = dqList
+      option.series[4].data = cdqList
+      this.lineChart.setOption(option, true)
+      window.addEventListener("resize", function () {
+        _this.lineChart.resize();
+      });
+    },
+    setFullOptions({realList, ableList,theoryList,dqList,cdqList} = {}) {
+      this.fullChart = this.$echarts.init(document.getElementById('main'));
+      let option = JSON.parse(JSON.stringify(lineOption))
+      option.series[0].data = realList
+      option.series[1].data = ableList
+      option.series[2].data = theoryList
+      option.series[3].data = dqList
+      option.series[4].data = cdqList
+      this.fullChart.setOption(option, true)
+    }
+  }
+}
+</script>
+<style>
+#lineChart {
+  width: 100%;
+  height: 30vh;
+}
+</style>

cpp-ui/src/views/largeScreen/components/center-top.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="center-top_container">
+    <div class="position-a sign-container">
+      <div class="flex items-center">
+        <div class="sign-style mr-0vw green"/>
+        <span class="mr-0vw">运行</span>{{ run }}
+      </div>
+      <div class="flex items-center">
+        <div class="sign-style mr-0vw yellow"/>
+        <span class="mr-0vw">限电</span>{{ limit }}
+      </div>
+      <div class="flex items-center">
+        <div class="sign-style mr-0vw red"/>
+        <span class="mr-0vw">检修</span>{{ overhaul }}
+      </div>
+      <div class="flex items-center">
+        <div class="sign-style mr-0vw grey"/>
+        <span class="mr-0vw">无通讯</span>{{ noCommunication }}
+      </div>
+    </div>
+    <div class="position-a" v-for="item in stationInfo" :style="{top:item.top+'vh',left:item.left+'vw',cursor:'pointer'}" @mouseenter="mousemoveRows(item)" @mouseleave="removeTips(item)" @click="jumpCloudDataPage(item)">
+      <div v-if="Number(item.status) === 1" class="sign-style green"></div>
+      <div v-else-if="Number(item.status) === 2" class="sign-style yellow"></div>
+      <div v-else-if="Number(item.status) === 3" class="sign-style red"></div>
+      <div v-else class="sign-style grey"></div>
+    </div>
+    <span class="runDay position-a">安全运行天数: {{ runningDays }}</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      runningDays: 365,
+      run: 2,
+      limit: 0,
+      overhaul: 0,
+      noCommunication: 0,
+      // 场站状态暂定： 运行：1 限电：2 检修:3 无通讯;0
+      // left top 需要存数据库代替经纬度在图片上打点
+      stationInfo: [
+        {
+          name: '新疆测试场站信息',
+          stationCode: 'J01100',
+          status: '2',
+          capacity: '99.52',
+          ws: '12',
+          sjgl: '12',
+          dq: '12',
+          cdq: 12,
+          kygl: 12,
+          llgl: 12,
+          left: 24.7,
+          top: 14.5
+        },
+        {
+          name: '光电',
+          stationCode: 'J01101',
+          status: '1',
+          capacity: '99.52',
+          ws: '12',
+          sjgl: '12',
+          dq: '12',
+          cdq: 12,
+          kygl: 12,
+          llgl: 12,
+          left: 29,
+          top: 25
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.run = this.stationInfo.filter(w=>Number(w.status) === 1).length || 0
+    this.limit = this.stationInfo.filter(w=>Number(w.status) === 2).length || 0
+    this.overhaul = this.stationInfo.filter(w=>Number(w.status) === 3).length || 0
+    this.noCommunication = this.stationInfo.filter(w=>Number(w.status) === 0).length || 0
+  },
+
+  methods: {
+    /**
+     * 创建tips
+     * */
+    mousemoveRows(row) {
+      let status = Number(row.status) === 1?'运行':Number(row.status) === 2?'限电':Number(row.status) === 3?'检修':'无通讯'
+      let content = `${row.name}<br/>当前状态：${status}<br/>容量状态：${row.capacity} MW<br/>平均风速：${row.ws} m/s<br/>实时功率：${row.sjgl} MW<br/>短期与功率：${row.dq} MW<br/>
+                     超短期与功率：${row.cdq} MW<br/>可用功率：${row.kygl} MW<br/>理论功率：${row.llgl} MW`
+      this.createTips(row, content)
+    },
+
+    createTips(row, value) {
+      const parent = document.querySelector('.center-top_container');
+      const {detailId} = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${Number(row.top) + 1}vh;
+        left: ${Number(row.left+.5)}vw;
+        padding:.5vh .6vw;
+        overflow: auto;
+        font-size: .7vw;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #fff;
+        background: rgba(77, 109, 144, 0.87);
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #89BFE5;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${detailId}`)
+      // 将浮层插入到body中
+      parent.appendChild(tooltipDom);
+    },
+
+    /**
+     * 移除tips
+     * */
+    removeTips(row) {
+      const parent = document.querySelector('.center-top_container');
+      const {detailId} = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${detailId}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          parent.removeChild(dom)
+        })
+      }
+    },
+    /**
+     * 跳转到中心预测页面
+     * */
+    jumpCloudDataPage(row){
+      localStorage.setItem('map-jump-staion', row.stationCode)
+      this.$router.push({path: "cloudDataQuery"})
+    }
+  }
+}
+</script>
+<style>
+.center-top_container {
+  width: 100%;
+  height: 58vh;
+  //color: rgba(77, 109, 144, 0.87);
+}
+
+.sign-container {
+  width: 5vw;
+  right: .5vw;
+  top: 1vh;
+}
+
+.runDay {
+  left: 20vw;
+  bottom: 0;
+  color: orange;
+  font-size: 1vw;
+  font-weight: bold;
+}
+
+.sign-style {
+  width: .5vw;
+  height: 1vh;
+  border-radius: .5vh;
+}
+
+.mr-0vw {
+  margin-right: .5vw;
+}
+
+.green {
+  background: #68ed68;
+}
+.green:hover {
+  box-shadow: 0 4px 12px 1px #68ed68;
+}
+
+.yellow {
+  background: yellow;
+}
+.yellow:hover {
+  box-shadow: 0 4px 12px 1px yellow;
+}
+.red {
+  background: red;
+}
+.red:hover {
+  box-shadow: 0 4px 12px 1px red;
+}
+
+.grey {
+  border-color: white;
+  background: grey;
+}
+.grey:hover {
+  box-shadow: 0 4px 12px 1px grey;
+}
+</style>

cpp-ui/src/views/largeScreen/components/left-bottom.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="position-a echartsFullIcon" @click="openFull">
+      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
+    </div>
+    <div id="tickChart"/>
+    <!-- 全屏弹框 -->
+    <div class="echartsFullDialog">
+      <el-dialog
+        title="短期偏差统计"
+        :visible.sync="dialogVisible"
+        :fullscreen="true"
+        :destroy-on-close="true"
+        center
+      >
+        <div id="main" ref="fullChart" :style="'width:100%;height:' + (screenHeight - 110) + 'px'"/>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {dqTickOptions} from '../echarts-data'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      screenHeight: window.innerHeight,
+      tickChart: null,
+      fullChart: null,
+      chartData: {
+        boxplotData:[
+          [-8.09, -3.11, -2.11, 0.21, 5.19],
+          [-8.65, -2.04, 0.19, 2.36, 8.97],
+          [-6.46, -0.83, 0.52, 2.92, 8.55],
+          [-7.97, -1.55, 0.37, 2.74, 9.16],
+          [-5.56, -0.89, 1.31, 2.23, 6.91],
+          [-6.23, -1.18, 0.28, 2.19, 7.24]
+        ],
+        scatterData:[
+          ["10月26", -8.41],
+          ["10月27", -5.48],
+          ["10月28", 5.61],
+          ["10月29", -8.1],
+          ["10月30", -6.39],
+          ["10月31", 7.88]
+        ],
+        xData:["10月26", "10月27", "10月28", "10月29", "10月30", "10月31"]
+      }
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.chartData = value
+        this.setOptions(this.chartData)
+      }
+    }
+  },
+  mounted() {
+    const _this = this
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.onresize = () => {
+      return (() => {
+        window.screenHeight = window.innerHeight
+        _this.screenHeight = window.screenHeight
+      })()
+    }
+  },
+  beforeDestroy() {
+    if (this.tickChart) {
+      this.tickChart.dispose();
+      this.tickChart = null
+    }
+    if (this.fullChart) {
+      this.fullChart.dispose();
+      this.fullChart = null
+    }
+
+  },
+  methods: {
+    initChart() {
+      this.tickChart = this.$echarts.init(document.getElementById('tickChart'));
+      this.setOptions(this.chartData)
+    },
+    openFull(){
+      const _this = this
+      _this.dialogVisible = true// 打开弹窗
+      _this.$nextTick(() => {
+        const chartFul = this.$refs.fullChart
+        if (chartFul) {
+          _this.setFullOptions(_this.chartData)// 画图
+        }
+      })
+    },
+    setOptions({xData, boxplotData,scatterData} = {}) {
+      const _this = this
+      let option = JSON.parse(JSON.stringify(dqTickOptions))
+      option.xAxis.data = xData
+      option.series[0].data = boxplotData
+      option.series[1].data = scatterData
+      this.tickChart.setOption(option, true)
+      window.addEventListener("resize", function () {
+        _this.tickChart.resize();
+      });
+    },
+    setFullOptions({xData, boxplotData,scatterData} = {}) {
+      this.fullChart = this.$echarts.init(document.getElementById('main'));
+      let option = JSON.parse(JSON.stringify(dqTickOptions))
+      option.xAxis.data = xData
+      option.series[0].data = boxplotData
+      option.series[1].data = scatterData
+      this.fullChart.setOption(option, true)
+    }
+  }
+}
+</script>
+<style>
+#tickChart {
+  width: 100%;
+  height: 30vh;
+}
+</style>

cpp-ui/src/views/largeScreen/components/left-middle.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="progress-bar_container">
+    <div>
+      <div class="bar_title">
+        <div class="flex tb_container" >
+          <span class="tb_title">日发电量</span>
+          <span class="tb_num">{{ dayValue }}</span>
+          <span class="tb_sum_num ml-0">/{{daySum}}</span>
+          <span class="tb_unit ml-1">万kWh</span>
+        </div>
+      </div>
+      <progress-bar :params="{type:0,width:getWidth(dayValue,daySum)}"/>
+    </div>
+    <div style="margin-top: 5vh">
+      <div class="bar_title">
+        <div class="flex tb_container" >
+          <span class="tb_title">实际功率</span>
+          <span class="tb_num">{{ realValue }}</span>
+          <span class="tb_sum_num ml-0">/{{realSum}}</span>
+          <span class="tb_unit ml-1">MW</span>
+        </div>
+      </div>
+      <progress-bar :params="{type:1,width:getWidth(realValue,realSum)}"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProgressBar from "./progress-bar"
+
+export default {
+  components: {
+    ProgressBar
+  },
+  data() {
+    return {
+      dayValue: 456,
+      daySum: 1000,
+      realValue: 987,
+      realSum: 10000
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.dayValue = value.dayValue || 456
+        this.daySum = value.daySum || 1000
+        this.realValue = value.realValue || 987
+        this.realSum = value.realSum || 10000
+      }
+    }
+  },
+  methods: {
+    getWidth(dividend,divisor){
+      if(Number(divisor) === 0 || Number(dividend) === 0){
+        return 0
+      }
+      return ((Number(dividend) / Number(divisor)) * 100 ).toFixed(2)
+    }
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.progress-bar_container {
+  //margin: 10% 6%;
+  margin: 0 1vw;
+}
+
+.bar_title {
+  width: 100%;
+  height: 2rem;
+  background-image: url("../../../assets/images/dashboard/progressBarTitleBg.png");
+  background-repeat: no-repeat;
+}
+
+.tb_container {
+  margin-left: 1.5vw;
+  line-height: 2.5vh;
+  .tb_title {
+    width: 6rem;
+    //margin-left: 1.5vw;
+  }
+
+  .tb_num {
+    margin-left: 1.5vw;
+    font-size: 1.2vw;
+  }
+  .tb_sum_num{
+    font-size: .9vw;
+  }
+  .tb_unit {
+    font-size: .85vw;
+    writing-mode: horizontal-tb;
+    color: #838686;
+  }
+}
+
+</style>

cpp-ui/src/views/largeScreen/components/progress-bar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="progress-bar">
+    <div :id="valueObj.type === 0?'progress':'progress1'" ></div>
+    <span class="progress-text" :id="valueObj.type === 0?'progressText':'progressText1'" :class="valueObj.type === 0?'color-orange':'color-green'"></span>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      valueObj: {
+        width:90,
+        type:0
+      }
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      immediate: true,// 第一次立即监听
+      handler(value) {
+        this.valueObj = value
+        this.$nextTick(() => {
+          this.updateProgress(value)
+        })
+
+      }
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.updateProgress(this.barWidth)
+    // })
+  },
+  methods: {
+    updateProgress(progress) {
+      // 获取进度条元素和进度文字元素
+      // const progressBar = progress.type === 0?document.getElementById('progress'):document.getElementById('progress1');
+      let progressBar = document.getElementById('progress');
+      let progressText = document.getElementById('progressText');
+      if(progress.type === 1){
+        progressBar = document.getElementById('progress1');
+        progressText = document.getElementById('progressText1');
+      }
+      // 更新进度条和进度文字
+      progressBar.style.width = progress.width + '%';
+      progressText.style.width = progress.width + '%';
+      progressText.textContent = progress.width + '%';
+    }
+  }
+}
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 100%; /* 进度条宽度 */
+  height: .6rem; /* 进度条高度 */
+  background-color: rgba(19, 198, 234, 0.1); /* 进度条背景颜色 */
+  position: relative; /* 设置为相对定位，用于定位进度文字 */
+}
+
+#progress {
+  width: 0; /* 初始进度为0 */
+  height: 100%;
+  background-image: url("../../../assets/images/dashboard/progressBarBg1.png"); /* 设置格子背景图片 */
+  background-repeat: repeat-x; /* 横向平铺图片 */
+  background-size: auto 100%; /* 图片自适应高度 */
+}
+
+#progress1 {
+  width: 0; /* 初始进度为0 */
+  height: 100%;
+  background-image: url("../../../assets/images/dashboard/progressBarBg2.png"); /* 设置格子背景图片 */
+  background-repeat: repeat-x; /* 横向平铺图片 */
+  background-size: auto 100%; /* 图片自适应高度 */
+}
+.progress-text {
+  position: absolute; /* 设置为绝对定位，用于定位进度文字 */
+  bottom: -1.35rem; /* 进度文字距离进度条的距离 */
+  left: 0; /* 进度文字左对齐 */
+  width: 100%;
+  text-align: right;
+  /*font-weight: bold;*/
+
+}
+.color-orange{
+  color: rgba(255, 189, 6, 0.8);
+}
+.color-green{
+  color: rgba(22, 189, 6, 0.8);
+}
+</style>

cpp-ui/src/views/largeScreen/components/right-bottom.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div class="position-a echartsFullIcon" @click="openFull">
+      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
+    </div>
+    <div id="chart"/>
+    <!-- 全屏弹框 -->
+    <div class="echartsFullDialog">
+      <el-dialog
+        title="未来10天预测电量"
+        :visible.sync="dialogVisible"
+        :fullscreen="true"
+        :destroy-on-close="true"
+        center
+      >
+        <div id="main" ref="fullChart" :style="'width:100%;height:' + (screenHeight - 110) + 'px'"/>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {forecast10LineOption} from '../echarts-data'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      screenHeight: window.innerHeight,
+      chart: null,
+      fullChart: null,
+      chartData: {
+
+      }
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.chartData = value
+        this.setOptions(this.chartData)
+      }
+    }
+  },
+  mounted() {
+    const _this = this
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.onresize = () => {
+      return (() => {
+        window.screenHeight = window.innerHeight
+        _this.screenHeight = window.screenHeight
+      })()
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null
+    }
+    if (this.fullChart) {
+      this.fullChart.dispose();
+      this.fullChart = null
+    }
+
+  },
+  methods: {
+    initChart() {
+      this.chart = this.$echarts.init(document.getElementById('chart'));
+      this.setOptions(this.chartData)
+    },
+    openFull(){
+      const _this = this
+      _this.dialogVisible = true// 打开弹窗
+      _this.$nextTick(() => {
+        const chartFul = this.$refs.fullChart
+        if (chartFul) {
+          _this.setFullOptions(_this.chartData)// 画图
+        }
+      })
+    },
+    setOptions({xData, pData} = {}) {
+      const _this = this
+      let option = JSON.parse(JSON.stringify(forecast10LineOption))
+      option.xAxis.data = xData
+      option.series[0].data = pData
+      this.chart.setOption(option, true)
+      window.addEventListener("resize", function () {
+        _this.chart.resize();
+      });
+    },
+    setFullOptions({xData, pData} = {}) {
+      this.fullChart = this.$echarts.init(document.getElementById('main'));
+      let option = JSON.parse(JSON.stringify(forecast10LineOption))
+      option.xAxis.data = xData
+      option.series[0].data = pData
+      this.fullChart.setOption(option, true)
+    }
+  }
+}
+</script>
+<style>
+#chart {
+  width: 100%;
+  height: 30vh;
+}
+</style>

cpp-ui/src/views/largeScreen/components/right-middle.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="position-a echartsFullIcon" @click="openFull">
+      <img src="../../../assets/images/dashboard/full.png" style="width: 1.5vw" />
+    </div>
+    <div id="weatherChart"/>
+    <!-- 全屏弹框 -->
+    <div class="echartsFullDialog">
+      <el-dialog
+        title="气象预测"
+        :visible.sync="dialogVisible"
+        :fullscreen="true"
+        :destroy-on-close="true"
+        center
+      >
+        <div id="main" ref="fullChart" :style="'width:100%;height:' + (screenHeight - 110) + 'px'"/>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {weatherLineOption} from '../echarts-data'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      screenHeight: window.innerHeight,
+      weatherChart: null,
+      fullChart: null,
+      chartData: {
+
+      }
+    }
+  },
+  props: {
+    params: {type: Object}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.chartData = value
+        this.setOptions(this.chartData)
+      }
+    }
+  },
+  mounted() {
+    const _this = this
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.onresize = () => {
+      return (() => {
+        window.screenHeight = window.innerHeight
+        _this.screenHeight = window.screenHeight
+      })()
+    }
+  },
+  beforeDestroy() {
+    if (this.weatherChart) {
+      this.weatherChart.dispose();
+      this.weatherChart = null
+    }
+    if (this.fullChart) {
+      this.fullChart.dispose();
+      this.fullChart = null
+    }
+
+  },
+  methods: {
+    initChart() {
+      this.weatherChart = this.$echarts.init(document.getElementById('weatherChart'));
+      this.setOptions(this.chartData)
+    },
+    openFull(){
+      const _this = this
+      _this.dialogVisible = true// 打开弹窗
+      _this.$nextTick(() => {
+        const chartFul = this.$refs.fullChart
+        if (chartFul) {
+          _this.setFullOptions(_this.chartData)// 画图
+        }
+      })
+    },
+    setOptions({realList,dqList,cdqList} = {}) {
+      const _this = this
+      let option = JSON.parse(JSON.stringify(weatherLineOption))
+      option.series[0].data = realList
+      option.series[1].data = dqList
+      option.series[2].data = cdqList
+      option.series[3].data = cdqList
+      this.weatherChart.setOption(option, true)
+      window.addEventListener("resize", function () {
+        _this.weatherChart.resize();
+      });
+    },
+    setFullOptions({realList,dqList,cdqList} = {}) {
+      this.fullChart = this.$echarts.init(document.getElementById('main'));
+      let option = JSON.parse(JSON.stringify(weatherLineOption))
+      option.series[0].data = realList
+      option.series[1].data = dqList
+      option.series[2].data = cdqList
+      option.series[3].data = cdqList
+      this.fullChart.setOption(option, true)
+    }
+  }
+}
+</script>
+<style>
+#weatherChart {
+  width: 100%;
+  height: 25vh;
+}
+</style>

cpp-ui/src/views/largeScreen/components/right-top.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="son_container">
+    <el-table
+      :data="tableData"
+      size="mini" height="24vh" :show-header="false"
+      style="width: 100%;">
+      <el-table-column prop="sort" align="center" label="" fixed width="50px">
+        <template slot-scope="scope">
+          <div class="sortStyle flex justify-center sort1" v-if="Number(scope.row.sort) === 1">     <span class="sort-num-style">{{scope.row.sort}}</span></div>
+          <div class="sortStyle flex justify-center sort2" v-else-if="Number(scope.row.sort) === 2"><span class="sort-num-style">{{scope.row.sort}}</span></div>
+          <div class="sortStyle flex justify-center sort3" v-else-if="Number(scope.row.sort) === 3"><span class="sort-num-style">{{scope.row.sort}}</span></div>
+          <span v-else>{{scope.row.sort}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" align="center" label="" fixed min-width="50px"></el-table-column>
+      <el-table-column prop="accuracy" align="center" label="" fixed min-width="50px"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      tableData:[
+        {sort:1,name:'新疆光伏电站',accuracy:'99.8%'},
+        {sort:2,name:'新疆光伏电站',accuracy:'97.8%'},
+        {sort:3,name:'新疆光伏电站',accuracy:'96.8%'},
+        {sort:3,name:'新疆光伏电站',accuracy:'96.8%'},
+        {sort:4,name:'新疆光伏电站',accuracy:'95.8%'},
+        {sort:4,name:'新疆光伏电站',accuracy:'95.8%'}
+      ]
+    }
+  },
+  props: {
+    params: {type: Array}
+  },
+  watch: {
+    params: {
+      // immediate: true,// 第一次立即监听
+      handler(value) {
+        this.tableData = value
+      }
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang='scss' scoped>
+.son_container {
+  margin: 0 .1vw 0 1vw;
+}
+.sortStyle{
+  width: 2vw;
+  height: 3.5vh;
+  .sort-num-style{
+    color: #1e1e1e;
+    font-weight: bold;
+    font-size: 16px;
+  }
+}
+.sort1{
+  background-image: url('../../../assets/images/dashboard/sort1.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.sort2{
+  background-image: url('../../../assets/images/dashboard/sort2.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.sort3{
+  background-image: url('../../../assets/images/dashboard/sort3.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+</style>

cpp-ui/src/views/largeScreen/echarts-data.js

@@ -1,5 +1,6 @@
-import  * as echarts from 'echarts'
+import * as echarts from 'echarts'
 import {fontSize} from "../../utils";
+
 export const gaugeOption = {
   series: [
     {
@@ -117,6 +118,9 @@ export const gaugeOption = {
     }
   ]
 }
+/**
+ * 功率曲线
+ * */
 export let lineOption = {
   tooltip: {
     trigger: 'axis',
@@ -127,27 +131,38 @@ export let lineOption = {
         backgroundColor: '#505765'
       }
     }
-  },grid: {
+  }, grid: {
+    left: 55,
+    right: 30,
     bottom: 30
   },
   legend: {
-    data: ['实际功率', '可用功率','理论功率','短期','超短期'],
-    itemStyle:{
-      opacity:0
+    data: ['实际功率', '可用功率', '理论功率', '短期', '超短期'],
+    itemStyle: {
+      opacity: 0
     },
-    textStyle:{fontSize:fontSize(0.14)},
-    top:'2%'
+    textStyle: {fontSize: fontSize(0.12),color: '#89BFE5'},
+    top: '2%'
   },
   xAxis: [
     {
       type: 'category',
       boundaryGap: false,
-      axisLine: { onZero: false },
+      axisLine: {
+        onZero: false, lineStyle: {
+          color: '#5fbbeb'
+        }
+      },
       axisLabel: {
+        color: '#89BFE5',
         textStyle: {
-          fontSize: fontSize(.14)
+          fontSize: fontSize(.12)
         }
       },
+      axisTick: {
+        show: false, // 隐藏X轴轴线
+        alignWithLabel: true
+      },
       data: ['00:00',
         '00:15', '00:30', '00:45', '01:00',
         '01:15', '01:30', '01:45', '02:00',
@@ -180,12 +195,26 @@ export let lineOption = {
     {
       name: 'MW',
       type: 'value',
-      nameTextStyle:{fontSize:fontSize(.16)},
+      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
       axisLabel: {
         textStyle: {
-          fontSize: fontSize(.14)
+          fontSize: fontSize(.12), color: '#89BFE5'
         }
       },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#394458',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#394458',
+        },
+      },
     }
   ],
   series: [
@@ -215,7 +244,7 @@ export let lineOption = {
       },
       // prettier-ignore
       data: []
-    },{
+    }, {
       name: '可用功率',
       type: 'line',
       itemStyle: {
@@ -241,7 +270,7 @@ export let lineOption = {
       },
       // prettier-ignore
       data: []
-    },{
+    }, {
       name: '理论功率',
       type: 'line',
       itemStyle: {
@@ -267,7 +296,7 @@ export let lineOption = {
       },
       // prettier-ignore
       data: []
-    },{
+    }, {
       name: '短期',
       type: 'line',
       itemStyle: {
@@ -293,7 +322,212 @@ export let lineOption = {
       },
       // prettier-ignore
       data: []
+    }, {
+      name: '超短期',
+      type: 'line',
+      itemStyle: {
+        color: 'rgb(135,247,207)'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(134,245,205)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(134,245,205,0)'
+          }
+        ])
+      },
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      // prettier-ignore
+      data: []
+    },
+  ]
+}
+/**
+ * 气象预测曲线
+ * */
+export let weatherLineOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      animation: false,
+      label: {
+        backgroundColor: '#505765'
+      }
+    }
+  }, grid: {
+    left: 30,
+    right: 30,
+    bottom: 30
+  },
+  legend: {
+    data: ['实际功率', '短期', '超短期','辐照度'],
+    itemStyle: {
+      opacity: 0
+    },
+    textStyle: {fontSize: fontSize(0.12),color: '#89BFE5'},
+    top: '2%'
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: {
+        onZero: false, lineStyle: {
+          color: '#5fbbeb'
+        }
+      },
+      axisLabel: {
+        color: '#89BFE5',
+        textStyle: {
+          fontSize: fontSize(.12)
+        }
+      },
+      axisTick: {
+        show: false, // 隐藏X轴轴线
+        alignWithLabel: true
+      },
+      data: ['00:00',
+        '00:15', '00:30', '00:45', '01:00',
+        '01:15', '01:30', '01:45', '02:00',
+        '02:15', '02:30', '02:45', '03:00',
+        '03:15', '03:30', '03:45', '04:00',
+        '04:15', '04:30', '04:45', '05:00',
+        '05:15', '05:30', '05:45', '06:00',
+        '06:15', '06:30', '06:45', '07:00',
+        '07:15', '07:30', '07:45', '08:00',
+        '08:15', '08:30', '08:45', '09:00',
+        '09:15', '09:30', '09:45', '10:00',
+        '10:15', '10:30', '10:45', '11:00',
+        '11:15', '11:30', '11:45', '12:00',
+        '12:15', '12:30', '12:45', '13:00',
+        '13:15', '13:30', '14:45', '14:00',
+        '14:15', '14:30', '14:45', '15:00',
+        '15:15', '15:30', '15:45', '16:00',
+        '16:15', '16:30', '16:45', '17:00',
+        '17:15', '17:30', '17:45', '18:00',
+        '18:15', '18:30', '18:45', '19:00',
+        '19:15', '19:30', '19:45', '20:00',
+        '20:15', '20:30', '20:45', '21:00',
+        '21:15', '21:30', '21:45', '22:00',
+        '22:15', '22:30', '22:45', '23:00',
+        '23:15', '23:30', '23:45'
+      ]
+    }
+  ],
+  yAxis: [
+    {
+      name: 'MW',
+      type: 'value',
+      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
+      axisLabel: {
+        textStyle: {
+          fontSize: fontSize(.12), color: '#89BFE5'
+        }
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#394458',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#394458',
+        },
+      },
     },{
+      name: 'W/㎡',
+      type: 'value',
+      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
+      axisLabel: {
+        textStyle: {
+          fontSize: fontSize(.12), color: '#89BFE5'
+        }
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#394458',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#394458',
+        },
+      },
+    }
+  ],
+  series: [
+    {
+      name: '实际功率',
+      type: 'line',
+      itemStyle: {
+        color: 'rgb(2,207,253)'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(2,205,251)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(2,205,251,0)'
+          }
+        ])
+      },
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      // prettier-ignore
+      data: []
+    },
+    {
+      name: '短期',
+      type: 'line',
+      itemStyle: {
+        color: 'rgb(175,129,251)'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(174,128,249)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(173,127,247,0)'
+          }
+        ])
+      },
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      // prettier-ignore
+      data: []
+    }, {
       name: '超短期',
       type: 'line',
       itemStyle: {
@@ -319,6 +553,230 @@ export let lineOption = {
       },
       // prettier-ignore
       data: []
+    },{
+      name: '辐照度',
+      yAxisIndex:1,
+      type: 'line',
+      itemStyle: {
+        color: 'rgb(253,128,2)'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(253,128,2)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(2,205,251,0)'
+          }
+        ])
+      },
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      // prettier-ignore
+      data: []
+    },
+  ]
+}
+
+/**
+ * 未来10天预测电量
+ **/
+export const forecast10LineOption = {
+  animation: false,
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: 20,
+    right: 30,
+    bottom: 10,
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLine: {
+      lineStyle: {
+        color: '#5fbbeb'
+      }
+    },
+    axisTick: {
+      show: false, // 隐藏X轴轴线
+      alignWithLabel: true
+    },
+    axisLabel: {
+      color: '#89BFE5'
+    },
+  },
+  yAxis: {
+    type: 'value',
+    name: '万kWh',
+    nameTextStyle: {
+      color: '#89BFE5'
+    },
+    axisLabel: {
+      padding: [3, 0, 0, 0],
+      formatter: '{value}',
+      textStyle: {
+        fontSize: 14,
+        color: '#89BFE5'
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#394458',
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed',
+        color: '#394458',
+      },
+    },
+  },
+  series: [
+    {
+      type: 'bar',
+      barWidth: '60%',
+      data: [],
+      color: 'rgb(95,187,235)',
+      itemStyle: {
+        // 柱子的颜色
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: 'rgb(95,187,235)'
+        }, {
+          offset: 0.25,
+          color: 'rgb(95,187,235,0.75)'
+        }, {
+          offset: 0.5,
+          color: 'rgba(95,187,235,0.5)'
+        }, {
+          offset: 0.75,
+          color: 'rgb(95,187,235,0.25)'
+        }, {
+          offset: 1,
+          color: 'rgba(95,187,235,0.0)'
+        }]),
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {offset: 1, color: 'rgb(95,187,235)'}
+          ])
+        }
+      },
+      // 鼠标放到柱子上显示数据
+      tooltip: {
+        valueFormatter: function (value) {
+          return value + '万kWh';
+        }
+      },
+    }
+  ]
+}
+
+/**
+ *  短期偏差统计
+ */
+export const dqTickOptions= {
+  grid: {
+    top:30,
+    left: 40,
+    right: 10,
+    bottom: 30
+  },
+  animation: false,
+  tooltip: {
+    trigger: 'axis',
+    formatter: function (params){
+      let str = params[0].axisValue +'<br/>'
+      for(let param of params){
+        if(param.componentSubType === 'scatter'){
+          str = str + '<div class="flex justify-between"><div>'+param.marker+param.seriesName+'</div><div>'+param.value[1]+'</div></div>'
+        }
+        if(param.componentSubType === 'boxplot'){
+          str = str + '<div class="flex justify-between"><div>'+param.marker+'min</div><div>'+param.value[1]+'</div></div>'+
+            '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
+            '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
+            '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
+            '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
+        }
+      }
+      return str
+    }
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      color: '#89BFE5'
+    },
+    axisTick: {show: true},
+    axisLine: {
+      onZero: false,
+      lineStyle: {
+        color: '#5fbbeb'
+      }
+    },
+    data: []
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      padding: [3, 0, 0, 0],
+      formatter: '{value}',
+      textStyle: {
+        fontSize: 14,
+        color: '#89BFE5'
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#394458',
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed',
+        color: '#394458',
+      },
+    },
+  },
+
+  series: [
+    {
+      name: '',
+      type: 'boxplot',
+      itemStyle: {
+        color:'rgba(126,199,250,0.86)',
+        // 边线颜色
+        borderColor: '#89BFE5',
+        // 边线宽度
+        borderWidth: 2
+      },
+      data: []
     },
+    {
+      type: 'scatter',
+      itemStyle: {
+        color:'orange',
+      },
+      data: []
+    }
   ]
 }

cpp-ui/src/views/largeScreen/index.vue

@@ -19,321 +19,396 @@
         <span class="title-text">集 中 功 率 预 测</span>
       </div>
     </div>
-    <div class="home-main-container">
-      <echarts-map/>
-      <!-- 上     -->
-      <div class="float-container top-1 width-100 height-10r flex ">
-        <div v-for="item of digitalDisk" class="width-20 flex-column items-center">
-          <div style="width:70%">
-            <div class="text-bg text-style">{{ item.name }}</div>
-            <div class="flex items-center number-bg-style">
-              <div v-for="num of item.num" class="flex items-center justify-center num-style number-bg ">{{ num }}</div>
-              <span class="unit-style">MW</span>
+    <div class="home-main-container flex">
+      <!--      左-->
+      <div class="width-20 ml-0 flex-column justify-between">
+        <div class="border-style">
+          <div class="barTitleBg right-title-style">场站数据统计</div>
+          <div class="flex flex-wrap" style="height: 25vh">
+            <div class="flex width-50">
+              <img src="../../assets/images/dashboard/num3.png" class="left-img"/>
+              <div class="flex-column justify-center items-center">
+                <span>风速(m/s)</span>
+                <span>{{ envData.ws }}</span>
+              </div>
+            </div>
+            <div class="flex width-50">
+              <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
+              <div class="flex-column justify-center items-center">
+                <span>风电开机容量</span>
+                <span>{{ envData.ws }}</span>
+              </div>
             </div>
+            <div class="flex width-50">
+              <img src="../../assets/images/dashboard/num4.png" class="left-img"/>
+              <div class="flex-column justify-center items-center">
+                <span>辐照度(W/㎡)</span>
+                <span>{{ envData.radiance }}</span>
+              </div>
+            </div>
+            <div class="flex width-50">
+              <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
+              <div class="flex-column justify-center items-center">
+                <span>光伏开机容量</span>
+                <span>{{ envData.ws }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="border-style">
+          <div class="barTitleBg right-title-style">生产数据统计</div>
+          <div class="flex-column justify-center" style="height: 25vh">
+            <left-middle :params="leftMiddleParams"/>
+          </div>
+        </div>
+        <div class="border-style position-r">
+          <div class="barTitleBg right-title-style">短期偏差统计</div>
+          <div style="height: 30vh">
+            <left-bottom :params="leftBottomParams"/>
           </div>
         </div>
       </div>
-      <!--  右    -->
-      <div class="float-container right-1 top-default flex-column right-container-style">
-        <div class="position-r border-style">
-          <div class="position-a width-100 top-2  flex justify-center">
-            <div class="right-top-style flex justify-between">
-              <span>总场站数:{{ totality.number }}</span>
-              <span>总容量:{{ totality.capacity }}MW</span>
-            </div>
+      <!--    中  -->
+      <div class="width-48 mr-0 ml-0">
+        <div class="height-58vh">
+          <div class="position-r height-58vh centerMap">
+            <center-top />
           </div>
-          <div class="barTitleBg right-title-style">限电情况</div>
-          <div id="gauge" class="chartStyle"/>
         </div>
-        <div class="border-style" style="margin-top: 1%">
-          <div class="barTitleBg right-title-style">功率曲线</div>
-          <div id="line" class="chartStyle"/>
+        <div class="border-style position-r" style="margin-top: 1%">
+          <div class="barTitleBg right-title-style flex justify-between">
+            功率曲线
+            <div class="flex position-a" style="right: 2.2vw;">
+              <div class="btu-checked forecastLine btu-checked-style flex items-center justify-center" id="day"
+                   @click="changeForecastLine('day')">当日
+              </div>
+              <div class="btu-no-checked forecastLine btu-checked-style flex items-center justify-center" id="tenDay"
+                   @click="changeForecastLine('tenDay')">十日
+              </div>
+              <div class="btu-no-checked forecastLine btu-checked-style flex items-center justify-center" id="wind"
+                   @click="changeForecastLine('wind')">风电
+              </div>
+              <div class="btu-no-checked forecastLine btu-checked-style flex items-center justify-center"
+                   id="photovoltaic" @click="changeForecastLine('photovoltaic')">光伏
+              </div>
+            </div>
+          </div>
+          <center-bottom :params="centerBottomParams"/>
         </div>
       </div>
-      <!--     左 -->
-      <div class="float-container top-default flex-column justify-around left-container-style">
-        <div class="flex">
-          <img src="../../assets/images/dashboard/num3.png" class="left-img"/>
-          <div class="flex-column justify-center items-center">
-            <span>风速(m/s)</span>
-            <span>{{ envData.ws }}</span>
+      <!--      右-->
+      <div class="width-20 mr-0 flex-column justify-between">
+        <div class="border-style position-r">
+          <div class="flex position-a" style="right: .3vw;top: .5vh">
+            <div class="btu-checked accuracy btu-checked-style flex items-center justify-center" id="accuracy-day"
+                 @click="changeAccuracy('accuracy-day')">日
+            </div>
+            <div class="btu-no-checked accuracy btu-checked-style flex items-center justify-center" id="accuracy-month"
+                 @click="changeAccuracy('accuracy-month')">月
+            </div>
+          </div>
+          <div class="barTitleBg right-title-style ">准确率排名</div>
+          <div style="height: 25vh">
+            <right-top :params="rightTopParams"/>
           </div>
         </div>
-        <div class="flex">
-          <img src="../../assets/images/dashboard/num4.png" class="left-img"/>
-          <div class="flex-column justify-center items-center">
-            <span>辐照度(W/㎡)</span>
-            <span>{{ envData.radiance }}</span>
+        <div class="border-style position-r">
+          <div class="barTitleBg right-title-style flex justify-between">气象预测
+            <div class="flex">
+              <div class="btu-checked weather btu-checked-style flex items-center justify-center" id="weather-wind"
+                   @click="changeWeather('weather-wind')">风电
+              </div>
+              <div class="btu-no-checked weather btu-checked-style flex items-center justify-center"
+                   id="weather-photovoltaic" @click="changeWeather('weather-photovoltaic')">光伏
+              </div>
+            </div>
+          </div>
+          <div style="height: 25vh">
+            <right-middle :params="rightMiddleParams"/>
           </div>
         </div>
-        <div class="flex">
-          <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
-          <div class="flex-column justify-center items-center">
-            <span>限电比(%)</span>
-            <span>{{ xdbl }}</span>
+        <div class="border-style position-r">
+          <div class="barTitleBg right-title-style">未来10天预测电量</div>
+          <div style="height: 30vh">
+            <right-bottom :params="rightBottomParams"/>
           </div>
         </div>
       </div>
+
+
     </div>
 
-    <div class="app-container">
-
-      <div class="dark-el-dialog">
-        <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
-          <div slot="title" class="dialog-title flex justify-between">
-            <div class="flex justify-between" style="width: 80%">
-              <el-button @click="acknowledgeAll()">全部确认</el-button>
-              <div id="btuAll" class="clickAfter" @click="clickBtuClass('btuAll')"><el-button @click="getAbnormalAlarms('')">全部告警</el-button></div>
-              <div id="btuE1" class="clickBefore" @click="clickBtuClass('btuE1')"><el-button @click="getAbnormalAlarms('E1')">通道告警</el-button></div>
-              <div id="btuE2" class="clickBefore" @click="clickBtuClass('btuE2')"><el-button @click="getAbnormalAlarms('E2')">上报告警</el-button></div>
-              <div id="btuE3" class="clickBefore" @click="clickBtuClass('btuE3')"><el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button></div>
-              <div id="btuE4" class="clickBefore" @click="clickBtuClass('btuE4')"><el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button></div>
-              <div id="btuE5" class="clickBefore" @click="clickBtuClass('btuE5')"><el-button @click="getAbnormalAlarms('E5')">通用告警</el-button></div>
-              <el-button @click="getAlarmConfs()">不告警配置</el-button>
+    <div class="dark-el-dialog">
+      <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
+        <div slot="title" class="dialog-title flex justify-between">
+          <div class="flex justify-between" style="width: 80%">
+            <el-button @click="acknowledgeAll()">全部确认</el-button>
+            <div id="btuAll" class="clickAfter" @click="clickBtuClass('btuAll')">
+              <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
             </div>
-            <div class="dialog-title-badge flex justify-between">
-              <el-badge :value="this.badgeValue.alarm">
-                <img src="../../assets/images/svg/remind.svg" width="20px"/>
-              </el-badge>
-              <!--            <el-badge :value="badgeValue.confirm">-->
-              <!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
-              <!--            </el-badge>-->
+            <div id="btuE1" class="clickBefore" @click="clickBtuClass('btuE1')">
+              <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
             </div>
-          </div>
-          <div>
-            <el-table
-              :data="tableDataAlarm"
-              border max-height="300px"
-              element-loading-background="rgba(8, 61, 92,1)"
-              v-loading="loadingAlarm"
-              style="width: 100%">
-              <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
-              <el-table-column
-                prop="stationCode" align="center" :formatter="formatStation" :show-overflow-tooltip="true"
-                label="场站名称"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="startTime" align="center"
-                label="报警开始时间" :formatter="formatStartDate"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="endTime" align="center"
-                label="报警结束时间" :formatter="formatEndDate"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="msg" align="center" :show-overflow-tooltip="true"
-                label="报警描述">
-              </el-table-column>
-              \
-              <el-table-column
-                prop="alarmType" align="center" :formatter="formatAlarmSource"
-                label="报警来源">
-              </el-table-column>
-              <el-table-column
-                prop="operate" align="center"
-                label="操作" width="80">
-                <template v-slot="{ row }">
-                  <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
-                  <!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="block flex" style="justify-content: end">
-              <el-pagination
-                popper-class="cpp-popper"
-                @size-change="handleSizeChangeAlarm"
-                @current-change="handleCurrentChangeAlarm"
-                :current-page=this.alarmPage.currentPage
-                :page-sizes="[10, 15, 30, 50]"
-                :page-size=this.alarmPage.pageSize
-                layout="total, sizes, prev, pager, next, jumper"
-                :total=this.alarmPage.total>
-              </el-pagination>
+            <div id="btuE2" class="clickBefore" @click="clickBtuClass('btuE2')">
+              <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
+            </div>
+            <div id="btuE3" class="clickBefore" @click="clickBtuClass('btuE3')">
+              <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
+            </div>
+            <div id="btuE4" class="clickBefore" @click="clickBtuClass('btuE4')">
+              <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
             </div>
+            <div id="btuE5" class="clickBefore" @click="clickBtuClass('btuE5')">
+              <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
+            </div>
+            <el-button @click="getAlarmConfs()">不告警配置</el-button>
+          </div>
+          <div class="dialog-title-badge flex justify-between">
+            <el-badge :value="this.badgeValue.alarm">
+              <img src="../../assets/images/svg/remind.svg" width="20px"/>
+            </el-badge>
+            <!--            <el-badge :value="badgeValue.confirm">-->
+            <!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
+            <!--            </el-badge>-->
+          </div>
+        </div>
+        <div>
+          <el-table
+            :data="tableDataAlarm"
+            border max-height="300px"
+            element-loading-background="rgba(8, 61, 92,1)"
+            v-loading="loadingAlarm"
+            style="width: 100%">
+            <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
+            <el-table-column
+              prop="stationCode" align="center" :formatter="formatStation" :show-overflow-tooltip="true"
+              label="场站名称"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="startTime" align="center"
+              label="报警开始时间" :formatter="formatStartDate"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="endTime" align="center"
+              label="报警结束时间" :formatter="formatEndDate"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="msg" align="center" :show-overflow-tooltip="true"
+              label="报警描述">
+            </el-table-column>
+            \
+            <el-table-column
+              prop="alarmType" align="center" :formatter="formatAlarmSource"
+              label="报警来源">
+            </el-table-column>
+            <el-table-column
+              prop="operate" align="center"
+              label="操作" width="80">
+              <template v-slot="{ row }">
+                <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
+                <!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block flex" style="justify-content: end">
+            <el-pagination
+              popper-class="cpp-popper"
+              @size-change="handleSizeChangeAlarm"
+              @current-change="handleCurrentChangeAlarm"
+              :current-page=this.alarmPage.currentPage
+              :page-sizes="[10, 15, 30, 50]"
+              :page-size=this.alarmPage.pageSize
+              layout="total, sizes, prev, pager, next, jumper"
+              :total=this.alarmPage.total>
+            </el-pagination>
+          </div>
 
-            <el-dialog
-              width="40%" style="top:20%"
-              title="不告警配置"
-              :visible.sync="innerVisible"
-              append-to-body>
-              <!--  TODO 移植v3        -->
-              <div class="dark-el-dialog" style="margin-top: -20px">
-                <el-row>
-                  <el-col :span="1.5">失效时间：</el-col>
-                  <el-col :span="10">
-                    <el-date-picker
-                      :clearable="false"
-                      v-model="expireTime"
-                      type="datetime"
-                      value-format="timestamp"
-                      placeholder="选择失效时间"
-                      popper-class="cpp-popper"
-                      size="small"
-                      @change="changeInfo">
-                    </el-date-picker>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="10" class="mb8" style="margin-top: 5px">
-                  <el-col :span="1.5">
-                    <el-button
-                      type="primary"
-                      icon="el-icon-plus"
-                      size="mini"
-                      popper-class="cpp-popper"
-                      @click="handleAdd"
-                    >新增
-                    </el-button>
-                  </el-col>
-                  <el-col :span="1.5">
-                    <el-button
-                      type="success"
-                      icon="el-icon-edit"
-                      size="mini"
-                      popper-class="cpp-popper"
-                      @click="handleUpdate"
-                    >修改
-                    </el-button>
-                  </el-col>
-                  <el-col :span="1.5">
-                    <el-button
-                      type="danger"
-                      icon="el-icon-delete"
-                      size="mini"
-                      popper-class="cpp-popper"
-                      @click="handleDelete"
-                    >删除
-                    </el-button>
-                  </el-col>
-                  <!--                  <el-col :span="1.5">-->
-                  <!--                    <el-button-->
-                  <!--                      type="danger"-->
-                  <!--                      plain-->
-                  <!--                      icon="el-icon-select"-->
-                  <!--                      size="mini"-->
-                  <!--                      popper-class="cpp-popper"-->
-                  <!--                      @click="getAlarmConfs"-->
-                  <!--                    >查询-->
-                  <!--                    </el-button>-->
-                  <!--                  </el-col>-->
-                </el-row>
-
-                <div style="padding-top: 10px">
-                  <vxe-table
-                    ref="xTable"
-                    align="center"
-                    class="mytable-style"
-                    auto-resize
-                    border
-                    resizable
-                    export-config
-                    highlight-current-row
-                    show-overflow
-                    :data="tableDataAlarmConf"
-                    :radio-config="{trigger: 'row',checkMethod: checkRadioMethod}"
-                  >
-                    <vxe-column type="radio" width="60"/>
-                    <vxe-table-column field="stationCode" title="场站名称"
-                                      :formatter="alarmConfTypeStationFormat"></vxe-table-column>
-                    <vxe-table-column field="keyword" title="关键词"></vxe-table-column>
-                    <vxe-table-column field="type" title="类型" :formatter="alarmConfTypeFormat"></vxe-table-column>
-                    <vxe-table-column field="expireTime" title="失效时间"></vxe-table-column>
-                  </vxe-table>
-                  <vxe-pager
-                    background
-                    :loading="loadingAlarmConf"
-                    :current-page.sync="alarmConfPage.currentPage"
-                    :page-size.sync="alarmConfPage.pageSize"
-                    :total="alarmConfPage.total"
-                    @page-change="handleSizeChangeAlarmConf"
-                    :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
-                  </vxe-pager>
-                </div>
+          <el-dialog
+            width="40%" style="top:20%"
+            title="不告警配置"
+            :visible.sync="innerVisible"
+            append-to-body>
+            <!--  TODO 移植v3        -->
+            <div class="dark-el-dialog" style="margin-top: -20px">
+              <el-row>
+                <el-col :span="1.5">失效时间：</el-col>
+                <el-col :span="10">
+                  <el-date-picker
+                    :clearable="false"
+                    v-model="expireTime"
+                    type="datetime"
+                    value-format="timestamp"
+                    placeholder="选择失效时间"
+                    popper-class="cpp-popper"
+                    size="small"
+                    @change="changeInfo">
+                  </el-date-picker>
+                </el-col>
+              </el-row>
+              <el-row :gutter="10" class="mb8" style="margin-top: 5px">
+                <el-col :span="1.5">
+                  <el-button
+                    type="primary"
+                    icon="el-icon-plus"
+                    size="mini"
+                    popper-class="cpp-popper"
+                    @click="handleAdd"
+                  >新增
+                  </el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button
+                    type="success"
+                    icon="el-icon-edit"
+                    size="mini"
+                    popper-class="cpp-popper"
+                    @click="handleUpdate"
+                  >修改
+                  </el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button
+                    type="danger"
+                    icon="el-icon-delete"
+                    size="mini"
+                    popper-class="cpp-popper"
+                    @click="handleDelete"
+                  >删除
+                  </el-button>
+                </el-col>
+                <!--                  <el-col :span="1.5">-->
+                <!--                    <el-button-->
+                <!--                      type="danger"-->
+                <!--                      plain-->
+                <!--                      icon="el-icon-select"-->
+                <!--                      size="mini"-->
+                <!--                      popper-class="cpp-popper"-->
+                <!--                      @click="getAlarmConfs"-->
+                <!--                    >查询-->
+                <!--                    </el-button>-->
+                <!--                  </el-col>-->
+              </el-row>
 
+              <div style="padding-top: 10px">
+                <vxe-table
+                  ref="xTable"
+                  align="center"
+                  class="mytable-style"
+                  auto-resize
+                  border
+                  resizable
+                  export-config
+                  highlight-current-row
+                  show-overflow
+                  :data="tableDataAlarmConf"
+                  :radio-config="{trigger: 'row',checkMethod: checkRadioMethod}"
+                >
+                  <vxe-column type="radio" width="60"/>
+                  <vxe-table-column field="stationCode" title="场站名称"
+                                    :formatter="alarmConfTypeStationFormat"></vxe-table-column>
+                  <vxe-table-column field="keyword" title="关键词"></vxe-table-column>
+                  <vxe-table-column field="type" title="类型" :formatter="alarmConfTypeFormat"></vxe-table-column>
+                  <vxe-table-column field="expireTime" title="失效时间"></vxe-table-column>
+                </vxe-table>
+                <vxe-pager
+                  background
+                  :loading="loadingAlarmConf"
+                  :current-page.sync="alarmConfPage.currentPage"
+                  :page-size.sync="alarmConfPage.pageSize"
+                  :total="alarmConfPage.total"
+                  @page-change="handleSizeChangeAlarmConf"
+                  :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
+                </vxe-pager>
               </div>
 
-              <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="850px"
-                         height="600px" style="top:30%"
-                         append-to-body>
-                <div class="dark-el-dialog">
-                  <el-form ref="form" :model="form" :rules="rules" width="830px" label-width="150px">
-                    <el-row class="mb4">
-                      <el-col :span="12">
-                        <el-form-item label="场站" prop="stationCode">
-                          <el-select v-model="form.stationCode" placeholder="请选择" style="width: 100%"
-                                     popper-class="cpp-popper">
-                            <el-option
-                              v-for="item in this.stationSelect()"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value"
-                            />
-                          </el-select>
-                        </el-form-item>
-                      </el-col>
-                      <el-col :span="12">
-                        <el-form-item label="关键词" prop="keyword">
-                          <el-input style="width: 100%" v-model="form.keyword" maxlength="50"
-                                    popper-class="cpp-popper"/>
-                        </el-form-item>
-                      </el-col>
-                    </el-row>
-                    <el-row class="mb4">
-                      <el-col :span="12">
-                        <el-form-item label="类型" prop="type">
-                          <el-select v-model="form.type" placeholder="请选择" style="width: 100%"
-                                     popper-class="cpp-popper">
-                            <el-option
-                              v-for="item in this.alarmConfType"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value"
-                            />
-                          </el-select>
-                        </el-form-item>
-                      </el-col>
-                      <el-col :span="12">
-                        <el-form-item label="失效时间" prop="expireTime">
-                          <el-date-picker
-                            :clearable="false"
-                            v-model="form.expireTime"
-                            type="datetime"
-                            value-format="yyyy-MM-dd HH:mm:ss"
-                            placeholder="选择失效时间"
-                            :picker-options="pickerOptions"
-                            popper-class="cpp-popper">
-                          </el-date-picker>
-                        </el-form-item>
-                      </el-col>
-                    </el-row>
-                  </el-form>
-                  <div slot="footer" class="dialog-footer">
-                    <el-button type="primary" @click="commitChannel">确 定</el-button>
-                    <el-button @click="cancelChannel">取 消</el-button>
-                  </div>
+            </div>
+
+            <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="850px"
+                       height="600px" style="top:30%"
+                       append-to-body>
+              <div class="dark-el-dialog">
+                <el-form ref="form" :model="form" :rules="rules" width="830px" label-width="150px">
+                  <el-row class="mb4">
+                    <el-col :span="12">
+                      <el-form-item label="场站" prop="stationCode">
+                        <el-select v-model="form.stationCode" placeholder="请选择" style="width: 100%"
+                                   popper-class="cpp-popper">
+                          <el-option
+                            v-for="item in this.stationSelect()"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="关键词" prop="keyword">
+                        <el-input style="width: 100%" v-model="form.keyword" maxlength="50"
+                                  popper-class="cpp-popper"/>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row class="mb4">
+                    <el-col :span="12">
+                      <el-form-item label="类型" prop="type">
+                        <el-select v-model="form.type" placeholder="请选择" style="width: 100%"
+                                   popper-class="cpp-popper">
+                          <el-option
+                            v-for="item in this.alarmConfType"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="失效时间" prop="expireTime">
+                        <el-date-picker
+                          :clearable="false"
+                          v-model="form.expireTime"
+                          type="datetime"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择失效时间"
+                          :picker-options="pickerOptions"
+                          popper-class="cpp-popper">
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                  <el-button type="primary" @click="commitChannel">确 定</el-button>
+                  <el-button @click="cancelChannel">取 消</el-button>
                 </div>
-              </el-dialog>
+              </div>
             </el-dialog>
-          </div>
-        </el-dialog>
-      </div>
+          </el-dialog>
+        </div>
+      </el-dialog>
     </div>
+
   </div>
 </template>
 <script>
 
 import {formatToDateTime} from "../../utils/dateUtil";
-import echartsMap from './echartsMap/index.vue'
-import {gaugeOption, lineOption} from "./echarts-data";
-
+import leftMiddle from './components/left-middle.vue'
+import rightTop from './components/right-top.vue'
+import rightBottom from './components/right-bottom.vue'
+import centerBottom from "./components/center-bottom.vue";
+import rightMiddle from "./components/right-middle.vue";
+import leftBottom from "./components/left-bottom.vue";
+import centerTop from "./components/center-top.vue";
 export default {
   name: 'largeScreen',
-  components: {echartsMap},
+  components: {leftMiddle, rightTop, rightBottom, centerBottom, rightMiddle, leftBottom,centerTop},
   data() {
     const checkExpireTime = (rule, value, callback) => {
-      console.log(value)
       if (value == null || value === '') {
         callback(new Error('失效时间不能为空'))
       }
@@ -364,22 +439,23 @@ export default {
       loadingAlarm: false,
       loadingAlarmConf: false,
       tableDataAlarmBak: [],
-      digitalDisk: [{
-        name: '实际功率',
-        num: '0'
-      }, {
-        name: '可用功率',
-        num: '0'
-      }, {
-        name: '理论功率',
-        num: '0'
-      }, {
-        name: '超短期预测功率',
-        num: '0'
-      }, {
-        name: '短期预测功率',
-        num: '0'
-      }],
+      digitalDisk: [
+        {
+          name: '实际功率',
+          num: '0'
+        }, {
+          name: '可用功率',
+          num: '0'
+        }, {
+          name: '理论功率',
+          num: '0'
+        }, {
+          name: '超短期预测功率',
+          num: '0'
+        }, {
+          name: '短期预测功率',
+          num: '0'
+        }],
       totality: {
         number: 0,
         capacity: 0
@@ -457,6 +533,13 @@ export default {
         }
       },
       expireTime: new Date().getTime(),
+      leftMiddleParams: {}, //生产数据模块值
+      rightBottomParams: {}, // 未来10天预测电量
+      rightTopParams: [], // 准确率排名
+      centerBottomParams: {},//功率曲线
+      rightMiddleParams: {},//气象预测
+      leftBottomParams: {}//短期偏差统计
+
 
     }
   },
@@ -512,12 +595,14 @@ export default {
         this.digitalDisk[4].num = this.formatNumber(sumMap.dqSum) + ''
         // 曲线图
         let curveMap = response.data.curveMap
-        this.realList = curveMap.realList
-        this.ableList = curveMap.ableList
-        this.theoryList = curveMap.theoryList
-        this.cdqList = curveMap.cdqList
-        this.dqList = curveMap.dqList
-        this.cdqList = curveMap.cdqList
+        this.centerBottomParams = {
+          realList: curveMap.realList,
+          ableList: curveMap.ableList,
+          theoryList: curveMap.theoryList,
+          cdqList: curveMap.cdqList,
+          dqList: curveMap.dqList
+        }
+        this.mockData()
         // 限电信息
         let xdMap = response.data.xdMap
         this.totality.number = xdMap.zczs
@@ -529,12 +614,111 @@ export default {
         let envDataMap = response.data.envDataMap
         this.envData.ws = envDataMap.wsAvg
         this.envData.radiance = envDataMap.fzdAvg
-
-        this.drawChart()
       }).catch(err => {
         clearInterval(this.sysBizDataTimer);
       })
     },
+    mockData(){
+      this.rightBottomParams ={
+        xData: [
+          "12-01",
+          "12-02",
+          "12-03",
+          "12-04",
+          "12-05",
+          "12-06",
+          "12-07",
+          "12-08",
+          "12-09",
+          "12-10",
+          "12-11",
+          "12-12",
+          "12-13",
+          "12-14",
+          "12-15",
+          "12-16",
+          "12-17",
+          "12-18",
+          "12-19",
+          "12-20",
+          "12-21",
+          "12-22",
+          "12-23",
+          "12-24",
+          "12-25",
+          "12-26",
+          "12-27",
+          "12-28",
+          "12-29",
+          "12-30",
+          "12-31"
+        ],
+        pData: [
+          90.69,
+          121.28,
+          100.1,
+          66.02,
+          151.14,
+          316.08,
+          113.21,
+          100.14,
+          192.39,
+          317.92,
+          275.32,
+          184.14,
+          326.11,
+          473.03,
+          487.25,
+          361.38,
+          465.54,
+          443.73,
+          516.83,
+          369.04,
+          272.89,
+          198.42,
+          596.15,
+          351.34,
+          406.07,
+          582.7,
+          490.01,
+          488.05,
+          370.14,
+          88.29,
+          178.89
+        ]}
+      this.rightTopParams = [
+        {sort: 1, name: '新疆光伏电站', accuracy: '99.8%'},
+        {sort: 2, name: '新疆光伏电站', accuracy: '97.8%'},
+        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
+        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
+        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'},
+        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'}]
+      this.leftBottomParams = {
+        boxplotData: [
+          [-8.09, -3.11, -2.11, 0.21, 5.19],
+          [-8.65, -2.04, 0.19, 2.36, 8.97],
+          [-6.46, -0.83, 0.52, 2.92, 8.55],
+          [-7.97, -1.55, 0.37, 2.74, 9.16],
+          [-5.56, -0.89, 1.31, 2.23, 6.91],
+          [-6.23, -1.18, 0.28, 2.19, 7.24]
+        ],
+        scatterData: [
+          ["10月26", -8.41],
+          ["10月27", -10.48],
+          ["10月28", 10.61],
+          ["10月29", 10.1],
+          ["10月30", -9.39],
+          ["10月31", 7.88]
+        ],
+        xData: ["10月26", "10月27", "10月28", "10月29", "10月30", "10月31"]
+      }
+      this.leftMiddleParams ={
+        dayValue: 456,
+        daySum: 1000,
+        realValue: 987,
+        realSum: 2000
+      }
+    },
     jumpRout() {
       this.$router.push({path: "/cloudDataQuery"})
     },
@@ -645,27 +829,28 @@ export default {
       clickItem.classList.remove('clickBefore')
       clickItem.classList.add('clickAfter')
     },
-    drawChart() {
-      gaugeOption.series[0].data[0].value = this.xdczs
-      gaugeOption.series[1].data[0].value = this.xdczs
-      gaugeOption.series[0].max = this.zczs
-      gaugeOption.series[1].max = this.zczs
-      this.myChart0 = this.$echarts.init(document.getElementById('gauge'));
-      this.myChart0.setOption(gaugeOption, true)
-      lineOption.series[0].data = this.realList
-      lineOption.series[1].data = this.ableList
-      lineOption.series[2].data = this.theoryList
-      lineOption.series[3].data = this.dqList
-      lineOption.series[4].data = this.cdqList
-
-      this.myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
-      this.myChart1.setOption(lineOption, true)
-      const _this = this
-      window.addEventListener("resize", function () {
-        _this.myChart0.resize();
-        _this.myChart1.resize();
-      });
+    /**
+     * 切换功率曲线按钮
+     * */
+    changeForecastLine(id) {
+      const activeItem = document.querySelector('.btu-checked.forecastLine')
+      this.checkedClass(id, activeItem)
+    },
+    /**
+     * 切换准确率排行按钮
+     * */
+    changeAccuracy(id) {
+      const activeItem = document.querySelector('.btu-checked.accuracy')
+      this.checkedClass(id, activeItem)
     },
+    /**
+     * 切换气象预测按钮
+     * */
+    changeWeather(id) {
+      const activeItem = document.querySelector('.btu-checked.weather')
+      this.checkedClass(id, activeItem)
+    },
+
     formatStartDate(row) {
       return formatToDateTime(row.startTime)
     },
@@ -875,8 +1060,15 @@ export default {
     },
     checkRadioMethod({row}) {
       return row.expireTime > formatToDateTime(new Date().getTime())
-    }
-
+    },
+    checkedClass(id, activeItem) {
+      let clickItem = document.getElementById(id)
+      // let activeItem = document.querySelector('.btu-checked')
+      activeItem.classList.remove('btu-checked')
+      activeItem.classList.add('btu-no-checked')
+      clickItem.classList.remove('btu-no-checked')
+      clickItem.classList.add('btu-checked')
+    },
   }
 
 }
@@ -938,7 +1130,7 @@ $top-container-height: 11vh;
 
 .chartStyle {
   width: 100%;
-  height: 35vh;
+  height: 30vh;
 }
 
 .home-main-container {
@@ -963,7 +1155,7 @@ $top-container-height: 11vh;
 }
 
 .left-img {
-  width: 5vw;
+  width: 6vw;
 }
 
 .badge-img {
@@ -972,7 +1164,7 @@ $top-container-height: 11vh;
 
 .border-style {
   border-radius: 5px;
-  box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
+  box-shadow: 0px 1px 5px 3px rgba(29, 128, 218, 0.85);
 }
 
 .right-top-style {
@@ -1005,7 +1197,19 @@ $top-container-height: 11vh;
 }
 
 .width-20 {
-  width: 20%;
+  width: 25vw;
+}
+
+.width-48 {
+  width: 48vw;
+}
+
+.width-50 {
+  width: 50%;
+}
+
+.height-58vh {
+  height: 58vh
 }
 
 .text-style {
@@ -1045,16 +1249,30 @@ $top-container-height: 11vh;
   background-repeat: no-repeat;
 }
 
+.centerMap {
+  background-image: url('../../assets/images/dashboard/map.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.btu-checked-style {
+  width: 4vw;
+  height: 3vh;
+  font-size: .85vw;
+  margin-left: .5vw;
+  cursor: pointer;
+}
 
-.text-bg {
-  background-image: url('../../assets/images/dashboard/numTitle.png');
+.btu-checked {
+  background-image: url('../../assets/images/dashboard/btu-checked.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-.number-bg {
-  background-image: url('../../assets/images/dashboard/numBg.png');
+.btu-no-checked {
+  background-image: url('../../assets/images/dashboard/btu-no-checked.png');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;