页面demo

neim-ui/src/router/index.js

@@ -122,6 +122,18 @@ export const constantRoutes = [
     name: 'projectEvolve',
     meta: { title: '项目进展情况', icon: 'dashboard', affix: true },
     hidden: true
+  },{
+    path: '/homepage/emailResourcesInfo',
+    component: () => import('@/views/largeScreenPage/Subpage/emailResourcesInfo'),
+    name: 'emailResourcesInfo',
+    meta: { title: '资源信息', icon: 'dashboard', affix: true },
+    hidden: true
+  },{
+    path: '/homepage/realResourcesInfo',
+    component: () => import('@/views/largeScreenPage/Subpage/realResourcesInfo'),
+    name: 'realResourcesInfo',
+    meta: { title: '风资源信息', icon: 'dashboard', affix: true },
+    hidden: true
   },
   // {
   //   path: '',

neim-ui/src/views/index.vue

@@ -3,37 +3,37 @@
 
 <!--    <panel-group @handleSetLineChartData="handleSetLineChartData"/>-->
 
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart/>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart/>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart/>
-        </div>
-      </el-col>
-    </el-row>
+<!--    <el-row :gutter="32">-->
+<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+<!--        <div class="chart-wrapper">-->
+<!--          <raddar-chart/>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+<!--        <div class="chart-wrapper">-->
+<!--          <pie-chart/>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+<!--        <div class="chart-wrapper">-->
+<!--          <bar-chart/>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData"/>
-    </el-row>
+<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
+<!--      <line-chart :chart-data="lineChartData"/>-->
+<!--    </el-row>-->
 
   </div>
 </template>
 
 <script>
-  import PanelGroup from './dashboard/PanelGroup'
-  import LineChart from './dashboard/LineChart'
-  import RaddarChart from './dashboard/RaddarChart'
-  import PieChart from './dashboard/PieChart'
-  import BarChart from './dashboard/BarChart'
+  // import PanelGroup from './dashboard/PanelGroup'
+  // import LineChart from './dashboard/LineChart'
+  // import RaddarChart from './dashboard/RaddarChart'
+  // import PieChart from './dashboard/PieChart'
+  // import BarChart from './dashboard/BarChart'
 
   const lineChartData = {
     newVisitis: {
@@ -56,13 +56,13 @@
 
   export default {
     name: 'Index',
-    components: {
-      PanelGroup,
-      LineChart,
-      RaddarChart,
-      PieChart,
-      BarChart
-    },
+    // components: {
+    //   PanelGroup,
+    //   LineChart,
+    //   RaddarChart,
+    //   PieChart,
+    //   BarChart
+    // },
     data() {
       return {
         lineChartData: lineChartData.newVisitis

neim-ui/src/views/largeScreenPage/Subpage/emailResourcesInfo.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="page emailResourcesInfoPage">
+    <div class="timeBox">{{ time }}</div>
+    <div class="topTiltle">
+      <span class="title">资  源  信  息</span>
+    </div>
+    <div class="btuGroup">
+      <div class="topBtu topLeftBtu" @click="back()">
+        <span class="btuText">返回&nbsp;</span>
+      </div>
+      <div class="topBtu topRightBtu" @click="push()">
+        <span class="btuText">后台管理</span>
+      </div>
+    </div>
+    <div class="myMain-container">
+      <div class="main-content">
+        <!--  主体上半部分      -->
+        <div class="main-top">
+          <div class="mainBg main-top-left">
+            <!--  标题-->
+            <div class="leftTiltleTextBg">
+              <div class="tiltle" style="margin-left: 2%;top: -53%;">
+                <div class="rSelect">
+                  <div class="projectSelect">
+                    <el-select class="choiceSelect" v-model="projectId" placeholder="请选择" size="small"
+                               :popper-append-to-body="false"
+                               style="width: 100%">
+                      <el-option
+                        v-for="(item,index) in projectOption"
+                        :key="index"
+                        :label="item.projectName"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </div>
+                  <div class="towerSelect">
+                    <el-select class="choiceSelect" v-model="cftNo" placeholder="请选择" size="small"
+                               :popper-append-to-body="false"
+                               style="width: 100%">
+                      <el-option
+                        v-for="(item,index) in towerOption"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div class="infoContent">
+              <div class="textInfo">
+                <span class="textInfoTitle">测风塔基础信息</span>
+                <div class="textInfoContent">
+                  <div><span>经度：{{ projectInfo.longitude }}</span><span
+                    style="margin-left: 3%">纬度：{{ projectInfo.latitude }}</span></div>
+                  <div>数据起止时间：{{ projectInfo.time }}</div>
+                  <div>理论发电机型：{{ projectInfo.model }}</div>
+                </div>
+
+              </div>
+
+              <div class="hexagonContent">
+                <div class="contentBox">
+                  <span class="numberBox">{{ projectInfo.wd }}</span>
+                  <span class="textBox">主风向</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ projectInfo.hour }}<span style="font-size: 14px">h</span></span>
+                  <span class="textBox">等效利用小数</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ projectInfo.power }}</span>
+                  <span class="textBox">发电量</span>
+                  <span class="numberBox" style="font-size: 14px">MWh</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mainBg main-top-center">
+            <!--  标题-->
+            <div class="centerTiltleTextBg">
+              <div class="centerTitle tiltle">
+                <span class="mainTitle">平均风速对比</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <ws-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+          <div class="mainBg main-top-right">
+            <!--  标题-->
+            <div class="rightTiltleTextBg">
+              <div class="tiltle">
+                <span class="mainTitle">风功率密度</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <ws-and-w-power-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+        </div>
+        <!-- 主体下半部分       -->
+        <div class="main-bottom">
+          <div class="mainBg main-bottom-left">
+            <!--  标题-->
+            <div class="rightTiltleTextBg">
+              <div class="tiltle">
+                <span class="mainTitle">环境数据</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div class="infoContent">
+              <div class="hexagonContent">
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.airDensity }}</span>
+                  <span class="textBox">空气密度</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.t }}</span>
+                  <span class="textBox">温度(℃)</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.pa }}</span>
+                  <span class="textBox">压强(Pa)</span>
+                </div>
+              </div>
+              <div class="infoContentBottom">
+                <span>
+                  <img
+                    class="tiltleLeftSign"
+                    referrerpolicy="no-referrer"
+                    src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
+                  />
+                  {{ height }}m 风数据
+                </span>
+                <div class="windDataBox">
+                  <div class="windDataBg">
+
+                    <img
+                      class="windSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
+                    />
+                    <div class="dataBox">
+                      <span class="dataContent">{{ environmentInfo.turbulent }}</span>
+                      <span>湍流</span>
+                    </div>
+
+                  </div>
+                  <div class="windDataBg">
+                    <img
+                      class="windSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
+                    />
+                    <div class="dataBox">
+                      <span class="dataContent">{{ environmentInfo.windShear }}</span>
+                      <span>风切变</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mainBg main-bottom-center">
+            <!--  标题-->
+            <div class="centerTiltleTextBg">
+              <div class="centerTitle tiltle">
+                <span class="mainTitle">风向玫瑰图</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <wd-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+          <div class="mainBg main-bottom-right">
+            <!--  标题-->
+            <div class="rightTiltleTextBg">
+              <div class="tiltle">
+                <span class="mainTitle">风能玫瑰图</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <wd-power-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="bottomPushBtu" @click="pushPreProjectResource()">
+      <span>前期项目资源信息</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import wdCharts from '../components/wdCharts'
+import wdPowerCharts from '../components/wdPowerCharts'
+import WsCharts from "@/views/largeScreenPage/components/wsCharts";
+import wsAndWPowerCharts from "@/views/largeScreenPage/components/wsAndWPowerCharts";
+export default {
+  name: "emailResourcesInfo",
+  components:{WsCharts, wdCharts,wdPowerCharts,wsAndWPowerCharts},
+  data() {
+    return {
+      timer: null,
+      time: '',
+      project: {},
+      cftInfo:{equipmentNo:'006171',wdHeights:'120,80,10'},
+      height: '140',
+      projectId:'1',
+      projectOption:[{id:'1',projectName:'依兰四期'}],//项目列表
+      cftNo:'006171',
+      towerOption:[{value:'006171',label:'依兰四期006171'}],//塔列表
+      projectInfo: {
+        time: '2021-07-18 — 2022-12-27',
+        latitude: '43.34',
+        longitude: '132.61',
+        model: 'WH6.25N-182',
+        wd: 'SSW',
+        hour: '3096',
+        power: '619208'
+      },
+      environmentInfo: {
+        airDensity: '1.27',
+        t: '21.56',
+        pa: '1003.25',
+        turbulent: '0.09',
+        windShear: '0.42'
+      }
+    }
+  },
+  destroyed() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.project = JSON.parse(this.$store.getters.projectInfo)
+    this.formatTime()
+    this.timer = setInterval(this.formatTime, 1000 * 60)
+  },
+  methods: {
+
+    push() {
+      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
+    },
+    back() {
+      this.$router.push({path: "/homepage/projectInfo"})
+    },
+    pushPreProjectResource() {
+      this.$router.push({path: "/homepage/preProjectResources"})
+    },
+
+    /*时间格式化*/
+    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 + " " + hour + ' : ' + minutes;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.emailResourcesInfoPage {
+  width: 100%;
+  height: calc(100vh);
+  /*background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;*/
+  /*background-size: 100% 100%;*/
+  background: #030F1A ;
+  color: white;
+}
+
+
+.timeBox {
+  position: absolute;
+  left: 2%;
+  top: 0;
+  font-size: 20px;
+  line-height: 40px;
+  font-family: timeFont !important;
+}
+
+.page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  box-shadow: inset -1px -20px 550px 200px rgb(12 25 69  / 80%);
+}
+
+.topTiltle {
+  width: 100%;
+  height: 5.5%;
+  background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  width: 17%;
+  height: 100%;
+  text-align: center;
+  margin-top: .2%;
+  font-size: 30px;
+  font-weight: 800;
+  background-image: linear-gradient(
+    360deg,
+    rgba(178, 204, 252, 1) 0,
+    rgba(178, 204, 252, 1) 0,
+    rgba(255, 255, 255, 1) 100%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+.btuGroup {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: white;
+  width: 15%;
+  height: 5.5%;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 18px;
+}
+
+.topBtu {
+  height: 100%;
+  margin-top: -1.5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.topRightBtu {
+  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 50%;
+}
+
+.topLeftBtu {
+  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 35%;
+}
+
+.mainBg {
+  background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  padding: 1%;
+}
+
+.main-content {
+  width: 100%;
+  height: calc(91vh);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.main-top, .main-bottom {
+  height: 46%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.main-top-left, .main-bottom-left {
+  width: 25%;
+}
+
+.main-top-right, .main-bottom-right {
+  width: 25%;
+}
+
+.main-top-center, .main-bottom-center {
+  width: 45%;
+}
+
+.rightTiltleTextBg {
+  height: 32px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/rightTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.leftTiltleTextBg {
+  margin-top: 7px;
+  height: 25px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/leftTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.centerTiltleTextBg {
+  height: 32px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/centerTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.tiltle {
+  color: rgba(183, 243, 252, 1);
+  font-size: 20px;
+  font-weight: 550;
+  margin-left: 8%;
+  position: relative;
+  top: -25%;
+}
+.rSelect{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.projectSelect{
+  height: 34px;
+  width: 200px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/projectBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.towerSelect{
+  height: 30px;
+  width: 200px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/towerBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.rSelect /deep/ .el-input--small .el-input__inner {
+  background: transparent;
+  border: 0;
+  color: white;
+  font-size: 16px;
+}
+.projectSelect /deep/ .el-input--small .el-input__inner {
+   margin-left: 5%;
+   margin-top: 1%;
+}
+.rSelect /deep/ .el-select .el-input .el-select__caret {
+  color: #ffffff;
+}
+.centerTitle {
+  margin-left: 5%;
+}
+
+.hexagonContent {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.infoContentBottom {
+  margin-top: 2%;
+}
+
+.textInfo {
+  color: #00FFDE;
+  line-height: 30px;
+  font-size: 18px;
+  margin-top: 3%;
+}
+
+.textInfoTitle {
+  color: white;
+  padding: 1% 1% 1% 3%;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/titleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.textInfoContent {
+  margin-left: 3%;
+}
+
+.contentBox {
+  margin-top: 5%;
+  width: 30%;
+  height: 125px;
+  background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.numberBox {
+  font-size: 24px;
+  font-weight: 700;
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 1) 0,
+    rgba(255, 255, 255, 1) 0,
+    rgba(70, 255, 222, 1) 98.730469%,
+    rgba(70, 255, 222, 1) 100%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+.tiltleLeftSign {
+  width: 10px;
+  height: 15px;
+}
+
+.windDataBox {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2%;
+}
+
+.windDataBg {
+  height: 130px;
+  width: 45%;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/envirBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.windSign {
+  width: 79px;
+  height: 72px;
+}
+
+.dataBox {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.dataContent {
+  font-size: 28px;
+  font-family: timeFont !important;
+  background: linear-gradient(0deg, #9CF472 0%, #FFFFFF 99.12109375%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.bottomPushBtu {
+  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  line-height: 60px;
+  width: 12%;
+  cursor: pointer;
+  text-align: center;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+</style>

neim-ui/src/views/largeScreenPage/Subpage/projectEvolve.vue

@@ -65,7 +65,7 @@
 
 <script>
 export default {
-  name: "projectInfo",
+  name: "projectEvolve",
   data() {
     return {
       timer: null,

neim-ui/src/views/largeScreenPage/Subpage/projectInfo.vue

@@ -20,7 +20,7 @@
         <div class="rightBg topBox">
           <div class="rightTiltleTextBg">
             <div class="rightMainTitle">
-              <span class="mainTitle">{{ project.label }}</span>
+              <span class="mainTitle" @click="pushInfo()">{{ project.label }}</span>
             </div>
           </div>
           <div class="rightTextMain">
@@ -108,6 +108,9 @@ export default {
     pushProjectEvolve() {
       this.$router.push({path: "/homepage/projectEvolve"})
     },
+    pushInfo() {
+      this.$router.push({path: "/homepage/emailResourcesInfo"})
+    },
     back() {
       this.$router.push({path: "/homepage/preProjectResources"})
     },

neim-ui/src/views/largeScreenPage/Subpage/realResourcesInfo.vue

@@ -0,0 +1,563 @@
+<template>
+  <div class="page emailResourcesInfoPage">
+    <div class="timeBox">{{ time }}</div>
+    <div class="topTiltle">
+      <span class="title">资  源  信  息</span>
+    </div>
+    <div class="btuGroup">
+      <div class="topBtu topLeftBtu" @click="back()">
+        <span class="btuText">返回&nbsp;</span>
+      </div>
+      <div class="topBtu topRightBtu" @click="push()">
+        <span class="btuText">后台管理</span>
+      </div>
+    </div>
+    <div class="myMain-container">
+      <div class="main-content">
+        <!--  主体上半部分      -->
+        <div class="main-top">
+          <div class="mainBg main-top-left">
+            <!--  标题-->
+            <div class="leftTiltleTextBg">
+              <div class="tiltle" style="margin-left: 2%;top: -53%;">
+                <div class="rSelect">
+                  <div class="projectSelect">
+                    <el-select class="choiceSelect" v-model="stationId" placeholder="请选择" size="small"
+                               :popper-append-to-body="false"
+                               style="width: 100%">
+                      <el-option
+                        v-for="(item,index) in stationOption"
+                        :key="index"
+                        :label="item.stationName"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </div>
+                  <div class="towerSelect">
+                    <el-select class="choiceSelect" v-model="cftNo" placeholder="请选择" size="small"
+                               :popper-append-to-body="false"
+                               style="width: 100%">
+                      <el-option
+                        v-for="(item,index) in towerOption"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div class="infoContent">
+              <div class="textInfo">
+                <span class="textInfoTitle">测风塔基础信息</span>
+                <div class="textInfoContent">
+                  <div><span>经度：{{ stationInfo.longitude }}</span><span
+                    style="margin-left: 3%">纬度：{{ stationInfo.latitude }}</span></div>
+                </div>
+
+              </div>
+
+              <div class="hexagonContent">
+                <div class="contentBox">
+                  <span class="numberBox">{{ stationInfo.wd }}</span>
+                  <span class="textBox">主风向</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ stationInfo.hour }}<span style="font-size: 14px">h</span></span>
+                  <span class="textBox">等效利用小数</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ stationInfo.power }}</span>
+                  <span class="textBox">发电量</span>
+                  <span class="numberBox" style="font-size: 14px">MWh</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mainBg main-top-center">
+            <!--  标题-->
+            <div class="topCenterTiltleTextBg">
+              <div class="topCenterTitle tiltle">
+                <span class="mainTitle">平均风速对比</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <ws-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+        </div>
+        <!-- 主体下半部分       -->
+        <div class="main-bottom">
+          <div class="mainBg main-bottom-left">
+            <!--  标题-->
+            <div class="rightTiltleTextBg">
+              <div class="tiltle">
+                <span class="mainTitle">环境数据</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div class="infoContent">
+              <div class="hexagonContent">
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.airDensity }}</span>
+                  <span class="textBox">空气密度</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.t }}</span>
+                  <span class="textBox">温度(℃)</span>
+                </div>
+                <div class="contentBox">
+                  <span class="numberBox">{{ environmentInfo.pa }}</span>
+                  <span class="textBox">压强(Pa)</span>
+                </div>
+              </div>
+              <div class="infoContentBottom">
+                <span>
+                  <img
+                    class="tiltleLeftSign"
+                    referrerpolicy="no-referrer"
+                    src="../../../assets/largeScreenImg/index/tiltleLeftSign.png"
+                  />
+                  {{ height }}m 风数据
+                </span>
+                <div class="windDataBox">
+                  <div class="windDataBg">
+
+                    <img
+                      class="windSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
+                    />
+                    <div class="dataBox">
+                      <span class="dataContent">{{ environmentInfo.turbulent }}</span>
+                      <span>湍流</span>
+                    </div>
+
+                  </div>
+                  <div class="windDataBg">
+                    <img
+                      class="windSign"
+                      referrerpolicy="no-referrer"
+                      src="../../../assets/largeScreenImg/resourcesInfo/windSign.png"
+                    />
+                    <div class="dataBox">
+                      <span class="dataContent">{{ environmentInfo.windShear }}</span>
+                      <span>风切变</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mainBg main-bottom-center">
+            <!--  标题-->
+            <div class="centerTiltleTextBg">
+              <div class="centerTitle tiltle">
+                <span class="mainTitle">风向玫瑰图</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <wd-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+          <div class="mainBg main-bottom-right">
+            <!--  标题-->
+            <div class="rightTiltleTextBg">
+              <div class="tiltle">
+                <span class="mainTitle">风能玫瑰图</span>
+              </div>
+            </div>
+            <!-- 内容  -->
+            <div>
+              <wd-power-charts :cftInfo="cftInfo"/>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="bottomPushBtu" @click="pushStationResource()">
+      <span>在运风光场站资源管理</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import wdCharts from '../components/wdCharts'
+import wdPowerCharts from '../components/wdPowerCharts'
+import WsCharts from "@/views/largeScreenPage/components/wsCharts";
+export default {
+  name: "realResourcesInfo",
+  components:{WsCharts, wdCharts,wdPowerCharts},
+  data() {
+    return {
+      timer: null,
+      time: '',
+      project: {},
+      cftInfo:{equipmentNo:'006171',wdHeights:'120,80,10'},
+      height: '140',
+      stationId:'1',
+      stationOption:[{id:'1',stationName:'穆棱风电场'}],//项目列表
+      cftNo:'8009',
+      towerOption:[{value:'8009',label:'穆棱8009'}],//塔列表
+      stationInfo: {
+        latitude: '46.24',
+        longitude: '129.8',
+        wd: 'SSW',
+        hour: '2.98',
+        power: '229.9'
+      },
+      environmentInfo: {
+        airDensity: '1.27',
+        t: '21.56',
+        pa: '1003.25',
+        turbulent: '0.09',
+        windShear: '0.42'
+      }
+    }
+  },
+  destroyed() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.project = JSON.parse(this.$store.getters.stationInfo)
+    this.formatTime()
+    this.timer = setInterval(this.formatTime, 1000 * 60)
+  },
+  methods: {
+
+    push() {
+      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
+    },
+    back() {
+      this.$router.push({path: "/homepage/stationInfo"})
+    },
+    pushStationResource() {
+      this.$router.push({path: "/homepage/stationResources"})
+    },
+
+    /*时间格式化*/
+    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 + " " + hour + ' : ' + minutes;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.emailResourcesInfoPage {
+  width: 100%;
+  height: calc(100vh);
+  /*background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;*/
+  /*background-size: 100% 100%;*/
+  background: #030F1A ;
+  color: white;
+}
+
+
+.timeBox {
+  position: absolute;
+  left: 2%;
+  top: 0;
+  font-size: 20px;
+  line-height: 40px;
+  font-family: timeFont !important;
+}
+
+.page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  box-shadow: inset -1px -20px 550px 200px rgb(12 25 69  / 80%);
+}
+
+.topTiltle {
+  width: 100%;
+  height: 5.5%;
+  background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  width: 17%;
+  height: 100%;
+  text-align: center;
+  margin-top: .2%;
+  font-size: 30px;
+  font-weight: 800;
+  background-image: linear-gradient(
+    360deg,
+    rgba(178, 204, 252, 1) 0,
+    rgba(178, 204, 252, 1) 0,
+    rgba(255, 255, 255, 1) 100%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+.btuGroup {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: white;
+  width: 15%;
+  height: 5.5%;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 18px;
+}
+
+.topBtu {
+  height: 100%;
+  margin-top: -1.5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.topRightBtu {
+  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 50%;
+}
+
+.topLeftBtu {
+  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  width: 35%;
+}
+
+.mainBg {
+  background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  padding: 1%;
+}
+
+.main-content {
+  width: 100%;
+  height: calc(91vh);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.main-top, .main-bottom {
+  height: 46%;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.main-top-left, .main-bottom-left {
+  width: 25%;
+}
+
+.main-bottom-right {
+  width: 25%;
+}
+
+.main-top-center {
+  width: 71.5%
+}
+.main-bottom-center {
+  width: 45%;
+}
+
+.rightTiltleTextBg {
+  height: 32px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/rightTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.leftTiltleTextBg {
+  margin-top: 7px;
+  height: 25px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/leftTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.centerTiltleTextBg {
+  height: 32px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/centerTitleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.topCenterTiltleTextBg {
+  height: 32px;
+  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/projectEvolveTitleBg.png) 100% no-repeat;
+  background-size: 99.9% 100%;
+}
+
+.tiltle {
+  color: rgba(183, 243, 252, 1);
+  font-size: 20px;
+  font-weight: 550;
+  margin-left: 8%;
+  position: relative;
+  top: -25%;
+}
+.rSelect{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.projectSelect{
+  height: 34px;
+  width: 200px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/projectBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.towerSelect{
+  height: 30px;
+  width: 200px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/towerBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.rSelect /deep/ .el-input--small .el-input__inner {
+  background: transparent;
+  border: 0;
+  color: white;
+  font-size: 16px;
+}
+.projectSelect /deep/ .el-input--small .el-input__inner {
+  margin-left: 5%;
+  margin-top: 1%;
+}
+.rSelect /deep/ .el-select .el-input .el-select__caret {
+  color: #ffffff;
+}
+.centerTitle {
+  margin-left: 5%;
+}
+.topCenterTitle {
+  margin-left: 2.5%;
+}
+
+.hexagonContent {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.infoContentBottom {
+  margin-top: 2%;
+}
+
+.textInfo {
+  color: #00FFDE;
+  line-height: 30px;
+  font-size: 18px;
+  margin-top: 3%;
+}
+
+.textInfoTitle {
+  color: white;
+  padding: 1% 1% 1% 3%;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/titleBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.textInfoContent {
+  margin-left: 3%;
+}
+
+.contentBox {
+  margin-top: 5%;
+  width: 30%;
+  height: 125px;
+  background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.numberBox {
+  font-size: 24px;
+  font-weight: 700;
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 1) 0,
+    rgba(255, 255, 255, 1) 0,
+    rgba(70, 255, 222, 1) 98.730469%,
+    rgba(70, 255, 222, 1) 100%
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+.tiltleLeftSign {
+  width: 10px;
+  height: 15px;
+}
+
+.windDataBox {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2%;
+}
+
+.windDataBg {
+  height: 130px;
+  width: 45%;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/envirBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.windSign {
+  width: 79px;
+  height: 72px;
+}
+
+.dataBox {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.dataContent {
+  font-size: 28px;
+  font-family: timeFont !important;
+  background: linear-gradient(0deg, #9CF472 0%, #FFFFFF 99.12109375%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.bottomPushBtu {
+  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+  line-height: 60px;
+  width: 12%;
+  cursor: pointer;
+  text-align: center;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+</style>

neim-ui/src/views/largeScreenPage/Subpage/stationInfo.vue

@@ -17,7 +17,7 @@
         <div class="rightBg topBox">
           <div class="rightTiltleTextBg">
             <div class="rightMainTitle">
-              <span class="mainTitle">{{ station.label }}</span>
+              <span class="mainTitle" @click="pushInfo()">{{ station.label }}</span>
             </div>
           </div>
           <div class="rightTopContent" v-for="item in dataInfo">
@@ -105,6 +105,9 @@ export default {
     push() {
       this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
     },
+    pushInfo() {
+      this.$router.push({path: "/homepage/realResourcesInfo"})
+    },
     back() {
       this.$router.push({path: "/homepage/provincialEnergyStations"})
     },

neim-ui/src/views/largeScreenPage/Subpage/stationResources.vue

@@ -149,7 +149,7 @@ export default {
         {label: '依兰鸡冠山风电场', value: '2'},
         {label: '依兰珠山风电场', value: '3'},
         {label: '东宁绥阳风电场', value: '4'},
-        {label: '穆棱十文字风电场', value: '5'},
+        {label: '东宁绥阳风电场', value: '5'},
         {label: '瑞信风电场', value: '6'},
         {label: '汤原渠首风电场', value: '7'},
         {label: '虎林石青山风电场', value: '8'},

neim-ui/src/views/largeScreenPage/components/wdCharts.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="wdChartsPage">
+    <div class="pageLeft">
+      <div class="pageLeft-left">
+        <div class="heightBg">
+          <dv-digital-flop :config="config"/>
+        </div>
+        <div>层高(m)</div>
+        <img
+          class="wdsanjiao"
+          referrerpolicy="no-referrer"
+          src="../../../assets/largeScreenImg/resourcesInfo/wdsanjiao.png"
+        />
+      </div>
+      <div class="pageLeft-right">
+        <div class="textBox">
+          <span class="text text1">N0.1</span><span class="wdText">{{ proportion[0].wd }}</span><span
+          class="text text1">{{ proportion[0].value }}</span>
+        </div>
+        <div class="textBox">
+          <span class="text text2">N0.2</span><span class="wdText">{{ proportion[1].wd }}</span><span
+          class="text text2">{{ proportion[1].value }}</span>
+        </div>
+        <div class="textBox">
+          <span class="text text3">N0.3</span><span class="wdText">{{ proportion[2].wd }}</span><span
+          class="text text3">{{ proportion[2].value }}</span>
+        </div>
+      </div>
+    </div>
+    <div id="wdEcharts"/>
+  </div>
+</template>
+
+<script>
+import {getRoseChats} from "@/api/biz/dataQuery/homePage";
+
+export default {
+  name: "wdCharts",
+  props: {
+    cftInfo: {type: Object},
+  },
+  watch: {
+    cftInfo: {
+      immediate: true,
+      handler(value) {
+        clearInterval(this.timer)
+        this.timer = null
+        // console.log(value)
+        this.equipmentNo = value.equipmentNo
+        this.wdHeights = value.wdHeights
+        // 获取测风塔编号
+        if (this.getConfig(value.wdHeights)) {
+          this.getWdData(value.equipmentNo, '')
+          var _self = this
+          this.timer = setInterval(function () {
+            _self.getWdData(_self.equipmentNo, '')
+          }, 1000 * 60)
+        } else {
+          this.$message.error('翻牌器异常')
+        }
+      }
+    },
+  },
+  data() {
+    return {
+      month: '',
+      equipmentNo: '',
+      loading: false,
+      wsList: [{value: 'N', label: '北'}, {value: 'NNE', label: '北东北'}, {value: 'NE', label: '东北'}, {
+        value: 'ENE',
+        label: '东东北'
+      },
+        {value: 'E', label: '东'}, {value: 'ESE', label: '东东南'}, {value: 'SE', label: '东南'}, {
+          value: 'SSE',
+          label: '南东南'
+        },
+        {value: 'S', label: '南'}, {value: 'SSW', label: '南西南'}, {value: 'SW', label: '西南'}, {
+          value: 'WSW',
+          label: '西西南'
+        },
+        {value: 'W', label: '西'}, {value: 'WNW', label: '西西北'}, {value: 'NW', label: '西北'}, {
+          value: 'NNW',
+          label: '北西北'
+        }],
+      i: 0,//计数器的位数
+      config: {},
+      wsConfig: {},
+      configArr: [],//数字翻牌器集合
+      wsConfigArr: [],//数字翻牌器集合
+      allConfigArr: [
+        {number: [10], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [30], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [50], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [60], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [70], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [80], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [90], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [100], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [110], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [120], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [140], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}},
+        {number: [150], content: '{nt}', textAlign: 'center',style: {fontFamily:'timeFont'}}],
+      wdCharts: null,
+      windPowerChart: null,
+      timer: null,
+      proportion: [{"wd": "东北", "value": 35}, {"wd": "北东北", "value": 18},{"wd": "西西北", "value": 12}]
+    }
+  },
+  destroyed() {
+    if (!this.wdCharts) {
+      return
+    }
+    if (this.wdCharts != null) {
+      this.wdCharts.dispose()
+      this.wdCharts = null
+    }
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    /*获取风向玫瑰图的数据*/
+    getWdData(cftNo, month) {
+      if (this.flipper()) {
+        // console.log(this.config)
+        setTimeout(()=>{
+          this.config = {...this.config}
+        },1000)
+        this.loading = true
+        let height = null
+        if (this.config.content.includes("A")) {
+          height = this.config.number[0] + 'A'
+        } else {
+          height = this.config.number[0]
+        }
+        getRoseChats({equipmentId: cftNo, height: height, month: month}).then(res => {
+          // console.log(res.data)
+          let echartsData = res.data.echars
+          let data = [echartsData.N, echartsData.NNE, echartsData.NE, echartsData.ENE, echartsData.E, echartsData.ESE, echartsData.SE, echartsData.SSE, echartsData.S, echartsData.SSW, echartsData.SW, echartsData.WSW, echartsData.W, echartsData.WNW, echartsData.NW, echartsData.NNW]
+          let max = Math.max.apply(null, data) == 0 ? 100 : Math.max.apply(null, data) * 1.2;
+
+          /*风向排名*/
+          this.proportion = []
+          let proportion = res.data.proportion
+          for (let item of proportion) {
+            for (let key in item) {
+              let label = this.wsList.find(w => w.value === key).label
+              this.proportion.push({wd: label, value: item[key]})
+            }
+          }
+          // console.log(this.proportion)
+          this.drawWdChart(data, max)
+        }).catch(err => {
+          this.$message.error('首页获取风向玫瑰图异常：' + err)
+          console.log('首页获取风向玫瑰图异常：' + err)
+          this.wdCharts.hideLoading();
+        })
+      }
+
+    },
+    /*风向玫瑰图*/
+    drawWdChart(data, max) {
+      if (this.wdCharts === null) {
+        this.wdCharts = this.$echarts.init(document.getElementById('wdEcharts'))
+      }
+      let option = {
+        polar: {
+          radius: [0, '80%'],
+        },
+        tooltip: {
+          // position: ['70%', '-25%'],
+          show: true
+        },
+        radiusAxis: {
+          // type: 'category',
+          axisLine: {
+            show: false,
+            color: '#fff'
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          interval: Math.ceil(max / 3)
+        },
+        angleAxis: {
+          splitLine: {
+            show: true,
+            color: '#fff'
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          type: 'category',
+          data: [
+            'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW',
+            'WSW', 'W', 'WNW', 'NW', 'NNW'],
+          startAngle: 100
+        },
+        series: {
+          type: 'bar',
+          color: '#28F2E6',
+          data: data,
+          coordinateSystem: 'polar',
+        },
+        animation: false
+      };
+      this.wdCharts.setOption(option, true)
+      this.wdCharts.hideLoading();
+      window.addEventListener('resize', () => {
+        if (this.wdCharts) {
+          this.wdCharts.resize()
+        }
+      })
+    },
+    /*翻牌计数器*/
+    flipper() {
+      if (this.i >= this.configArr.length) {
+        this.i = 0
+        this.config = this.configArr[this.i]
+      } else {
+        this.config = this.configArr[this.i]
+        this.i++
+      }
+      return true
+    },
+    /*获取翻牌器的集合*/
+    getConfig(data) {
+      let configArr = []
+      if (data != null) {
+        let str = data.split(',')
+        for (let i = 0; i < str.length; i++) {
+          let arr = null;
+          if (str[i].includes("A")) {
+            arr = {
+              number: [parseInt(str[i])],
+              content: '{nt}A',
+              textAlign: 'center',
+              style: {
+                fontFamily:'timeFont',
+                fill:'rgb(17,241,134)',
+              }
+            }
+          } else {
+            arr = {
+              number: [parseInt(str[i])],
+              content: '{nt}',
+              textAlign: 'center',
+              style: {
+                fontFamily:'timeFont',
+                fill:'rgb(17,241,134)',
+                // gradientParams:['#9CF472','0%','#fff','99.12109375%'],
+                // gradientType:'linear'
+              }
+            }
+          }
+          configArr.push(arr)
+        }
+      } else {
+        configArr = this.allConfigArr
+      }
+      this.configArr = configArr
+      return true
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.wdChartsPage {
+  width: 100%;
+  height: calc(35vh);
+  display: flex;
+  justify-content: space-between;
+}
+
+.pageLeft {
+  width: 55%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.pageLeft-left {
+  width: 65%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  color: #01FFFF;
+}
+
+.pageLeft-right {
+  width: 30%;
+  height: calc(15vh);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.heightBg {
+  width: 150px;
+  height: 50px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.wdsanjiao {
+  width: 200px;
+  height: 150px;
+}
+
+.pageLeft-left /deep/ .dv-digital-flop canvas {
+  width: 150px;
+  height: 80px;
+  margin-top: -13px;
+  background: linear-gradient(0deg, #9CF472 0%, #FFFFFF 99.12109375%);
+  -webkit-background-clip: text;
+}
+
+.textBox {
+  height: calc(3vh);
+  display: flex;
+  align-items: center;
+}
+
+.textBox > span {
+  margin-right: 10px;
+  line-height: 20px;
+}
+
+.text {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.text1 {
+  background: linear-gradient(0deg, #FFCA28 0%, #FFE2BA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text2 {
+  background: linear-gradient(0deg, #28CAFF 0%, #DBF4FF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text3 {
+  background: linear-gradient(0deg, #28FF74 0%, #D7FFEF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.wdText {
+  width: 50px;
+}
+
+#wdEcharts {
+  width: 45%;
+  height: calc(35vh);
+}
+</style>

neim-ui/src/views/largeScreenPage/components/wdPowerCharts.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="wdPowerChartsPage">
+    <div class="pageLeft">
+      <div class="pageLeft-left">
+        <div class="heightBg">
+          <dv-digital-flop :config="config"/>
+        </div>
+        <div>层高(m)</div>
+        <img
+          class="wdsanjiao"
+          referrerpolicy="no-referrer"
+          src="../../../assets/largeScreenImg/resourcesInfo/powersanjiao.png"
+        />
+      </div>
+    </div>
+    <div id="wdPowerEcharts"/>
+  </div>
+</template>
+
+<script>
+import {getRoseChats} from "@/api/biz/dataQuery/homePage";
+
+export default {
+  name: "wdPowerCharts",
+  props: {
+    cftInfo: {type: Object},
+  },
+  watch: {
+    cftInfo: {
+      immediate: true,
+      handler(value) {
+        clearInterval(this.timer)
+        this.timer = null
+        // console.log(value)
+        this.equipmentNo = value.equipmentNo
+        this.wdHeights = value.wdHeights
+        // 获取测风塔编号
+        if (this.getConfig(value.wdHeights)) {
+          this.getWdData(value.equipmentNo, '')
+          var _self = this
+          this.timer = setInterval(function () {
+            _self.getWdData(_self.equipmentNo, '')
+          }, 1000 * 60)
+        } else {
+          this.$message.error('翻牌器异常')
+        }
+      }
+    },
+  },
+  data() {
+    return {
+      month: '',
+      equipmentNo: '',
+      loading: false,
+      i: 0,//计数器的位数
+      config: {},
+      wsConfig: {},
+      configArr: [],//数字翻牌器集合
+      wsConfigArr: [],//数字翻牌器集合
+      allConfigArr: [
+        {number: [10], content: '{nt}', textAlign: 'center', style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [30], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [50], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [60], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [70], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [80], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [90], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [100], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [110], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [120], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [140], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}},
+        {number: [150], content: '{nt}', textAlign: 'center',style: {fontSize: 25, fontFamily:'timeFont'}}],
+      windPowerChart: null,
+      timer: null,
+    }
+  },
+  destroyed() {
+    if (!this.windPowerChart) {
+      return
+    }
+    if (this.windPowerChart != null) {
+      this.windPowerChart.dispose()
+      this.windPowerChart = null
+    }
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    /*获取风向玫瑰图的数据*/
+    getWdData(cftNo, month) {
+      if (this.flipper()) {
+        setTimeout(()=>{
+          this.config = {...this.config}
+        },1000)
+        this.loading = true
+        let height = null
+        if (this.config.content.includes("A")) {
+          height = this.config.number[0] + 'A'
+        } else {
+          height = this.config.number[0]
+        }
+        getRoseChats({equipmentId: cftNo, height: height, month: month}).then(res => {
+          // console.log(res.data)
+          let windPowerEchartsData = res.data.windPowerEchars
+          let windPowerData = [windPowerEchartsData.N, windPowerEchartsData.NNE, windPowerEchartsData.NE, windPowerEchartsData.ENE, windPowerEchartsData.E, windPowerEchartsData.ESE, windPowerEchartsData.SE, windPowerEchartsData.SSE, windPowerEchartsData.S, windPowerEchartsData.SSW, windPowerEchartsData.SW, windPowerEchartsData.WSW, windPowerEchartsData.W, windPowerEchartsData.WNW, windPowerEchartsData.NW, windPowerEchartsData.NNW]
+          let windPowerMax = Math.max.apply(null, windPowerData) == 0 ? 100 : Math.max.apply(null, windPowerData) * 1.2;
+          this.drawPowerChart(windPowerData, windPowerMax)
+        }).catch(err => {
+          this.$message.error('首页获取风向玫瑰图异常：' + err)
+          console.log('首页获取风向玫瑰图异常：' + err)
+        })
+      }
+
+    },
+    /*风能玫瑰图*/
+    drawPowerChart(data, max) {
+      if(this.windPowerChart === null){
+        this.windPowerChart = this.$echarts.init(document.getElementById('wdPowerEcharts'))
+      }
+      let option = {
+        polar: {
+          radius: [0, '70%'],
+        },
+        tooltip: {
+          // position: ['70%', '-25%'],
+          show: true
+        },
+        radiusAxis: {
+          // type: 'category',
+          axisLine: {
+            show: false,
+            color: '#fff'
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          interval: Math.ceil(max / 3)
+        },
+        angleAxis: {
+          splitLine: {
+            show: true,
+            color: '#fff'
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          type: 'category',
+          data: [
+            'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW',
+            'WSW', 'W', 'WNW', 'NW', 'NNW'],
+          startAngle: 100
+        },
+        series: {
+          type: 'bar',
+          color: '#FFCC00',
+          data: data,
+          coordinateSystem: 'polar',
+        },
+        animation: false
+      };
+      this.windPowerChart.setOption(option, true)
+      this.windPowerChart.hideLoading();
+      window.addEventListener('resize', () => {
+        if (this.windPowerChart) {
+          this.windPowerChart.resize()
+        }
+      })
+    },
+    /*翻牌计数器*/
+    flipper() {
+      if (this.i >= this.configArr.length) {
+        this.i = 0
+        this.config = this.configArr[this.i]
+      } else {
+        this.config = this.configArr[this.i]
+        this.i++
+      }
+      return true
+    },
+    /*获取翻牌器的集合*/
+    getConfig(data) {
+      let configArr = []
+      if (data != null) {
+        let str = data.split(',')
+        for (let i = 0; i < str.length; i++) {
+          let arr = null;
+          if (str[i].includes("A")) {
+            arr = {
+              number: [parseInt(str[i])],
+              content: '{nt}A',
+              textAlign: 'center',
+              style: {fontSize: 25, fontFamily:'timeFont', fill:'rgb(17,241,134)',}
+            }
+          } else {
+            arr = {
+              number: [parseInt(str[i])],
+              content: '{nt}',
+              textAlign: 'center',
+              style: {
+                fontSize: 25,
+                fontFamily:'timeFont',
+                fill:'rgb(17,241,134)',
+              }
+            }
+          }
+          configArr.push(arr)
+        }
+      } else {
+        configArr = this.allConfigArr
+      }
+      this.configArr = configArr
+      return true
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.wdPowerChartsPage {
+  width: 100%;
+  height: calc(35vh);
+  display: flex;
+  justify-content: space-between;
+}
+
+.pageLeft {
+  margin-top: 10%;
+  height: calc(30vh);
+  display: flex;
+  justify-content: center;
+}
+
+.pageLeft-left {
+  width: 65%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  color: #01FFFF;
+}
+
+
+.heightBg {
+  width: 100px;
+  height: 40px;
+  background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+
+.wdsanjiao {
+  width: 150px;
+  height: 100px;
+}
+
+.pageLeft-left /deep/ .dv-digital-flop canvas {
+  width: 100px;
+  height: 65px;
+  margin-top: -12px;
+  background: linear-gradient(0deg, #9CF472 0%, #FFFFFF 99.12109375%);
+  -webkit-background-clip: text;
+}
+
+#wdPowerEcharts {
+  width: 85%;
+  height: calc(35vh);
+}
+</style>

neim-ui/src/views/largeScreenPage/components/wsAndWPowerCharts.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="wsAndWpdDayBarPage">
+    <div id="wsAndWpdDayBar"/>
+  </div>
+</template>
+
+<script>
+import {getWsAndWpdForHeight} from "@/api/biz/dataQuery/homePage";
+export default {
+  name: "wsAndWPowerCharts",
+  props: {
+    cftInfo: {type: Object}
+  },
+  watch: {
+    cftInfo: {
+      immediate: true,
+      handler(value) {
+        // 获取测风塔编号
+        this.month = ''
+        this.equipmentNo = value.equipmentNo
+        this.getData(value.equipmentNo)
+
+      }
+    },
+  },
+  destroyed() {
+    if (!this.wsAndWpdDayBar) {
+      return
+    }
+    if (this.wsAndWpdDayBar != null) {
+      this.wsAndWpdDayBar.dispose()
+      this.wsAndWpdDayBar = null
+    }
+  },
+  data(){
+    return{
+      month:'',
+      equipmentNo:'',
+      wsAndWpdDayBar: null,
+    }
+  },
+  methods:{
+    getData(cftNo) {
+      getWsAndWpdForHeight({equipmentId: cftNo,month:this.month}).then(res => {
+        // console.log(res.data)
+        let data = res.data
+        this.drawBar(data)
+      }).catch(err=>{
+        this.$message.error('首页风速与风功率柱状图异常：'+err)
+        console.log('首页风速与风功率柱状图异常：'+err)
+        this.wsAndWpdDayBar.hideLoading();
+      })
+    },
+    drawBar(data){
+      let ws = data.ws
+      let wpd = data.wpd
+      let heightData = data.height
+      if(this.wsAndWpdDayBar === null){
+        this.wsAndWpdDayBar = this.$echarts.init(document.getElementById('wsAndWpdDayBar'))
+      }
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        dataZoom:{
+          type:'inside'
+        },
+        legend: {
+          data: ['风速', '风功率密度'],
+          textStyle: {
+            color: '#fff',
+          },
+          top: '0%'
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          containLabel: true
+        },
+        // color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
+        color: ['#87f7cf', '#f7f494', '#fc97af', '#f7c5a0', '#76f2f2', '#72ccff'],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          nameTextStyle: {
+            color: '#fff',
+          },
+          axisLabel: {
+            rotate:315,
+            textStyle: {
+              color: '#fff',
+            }
+          },
+          data: heightData,
+        },
+        yAxis: [{
+          type: 'value',
+          alignTicks: true,
+          // nameLocation: 'center',
+          name: 'm/s',
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          nameTextStyle: {
+            color: '#fff',
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#000',
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+            }
+          },
+          interval: Math.ceil(Math.ceil(Math.max(...ws)) / 6),
+          max: Math.ceil(Math.ceil(Math.max(...ws)) / 6) * 6,
+        }, {
+          type: 'value',
+          // nameLocation: 'center',
+          name: 'W/m^2',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+            }
+          },
+          nameTextStyle: {
+            color: '#fff',
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+            }
+          },
+          alignTicks: true,
+          interval: Math.ceil(Math.ceil(Math.max(...wpd)) / 6),
+          max: Math.ceil(Math.ceil(Math.max(...wpd)) / 6) * 6,
+        }],
+        series: [
+          {
+            name: '风速',
+            type: 'bar',
+            symbol: "none",
+            data: ws,
+            color: {
+              type: 'linear',
+              x: 0, //右
+              y: 0, //下
+              x2: 0, //左
+              y2: 1, //上
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#11d56d' // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(131,191,246,0.6)' // 100% 处的颜色
+                }
+              ]
+            }
+          },
+          {
+            name: '风功率密度',
+            type: 'bar',
+            yAxisIndex: 1,
+            symbol: "none",
+            data: wpd,
+            color: {
+              type: 'linear',
+              x: 0, //右
+              y: 0, //下
+              x2: 0, //左
+              y2: 1, //上
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#00CBFF' // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(115,0,255,0.58)' // 100% 处的颜色
+                }
+              ]
+            }
+          }
+        ]
+      }
+      this.wsAndWpdDayBar.setOption(option)
+      this.wsAndWpdDayBar.hideLoading();
+      window.addEventListener('resize', () => {
+        if (this.wsAndWpdDayBar) {
+          this.wsAndWpdDayBar.resize()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#wsAndWpdDayBar{
+  width: 100%;
+  height: calc(35vh);
+}
+</style>

neim-ui/src/views/largeScreenPage/components/wsCharts.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="wsChartPage">
+    <div id="wsChart"/>
+  </div>
+</template>
+
+<script>
+import {getWindChats} from "@/api/biz/dataQuery/homePage";
+
+export default {
+  name: "wsCharts",
+  props: {
+    cftInfo: {type: Object}
+  },
+  watch:{
+    cftInfo: {
+      immediate: true,
+      handler(value) {
+        // 获取测风塔编号
+        console.log(value)
+        this.month = ''
+        this.equipmentNo = value.equipmentNo
+        this.getData(value.equipmentNo)
+      }
+    },
+  },
+  data() {
+    return {
+      month:'',
+      equipmentNo:'',
+      wsLoading: false,
+      wsCharts: null
+    }
+  },
+  destroyed() {
+    if (!this.wsCharts) {
+      return
+    }
+    if (this.wsCharts != null) {
+      this.wsCharts.dispose()
+      this.wsCharts = null
+    }
+  },
+  methods: {
+    /*获取风速曲线的数据*/
+    getData(cftNo) {
+      getWindChats({equipmentId: cftNo,month:this.month}).then(res => {
+        // console.log(res.data)
+        const timeList = res.data.time
+        const chartData = res.data.chart
+        let legend = []
+        let series = []
+        let selected = {} // 不展示全部层高
+        let j = 0;
+        for (let i = 0; i < chartData.length; i++) {
+          if (i > 3) {
+            selected[chartData[i].height + 'm'] = false
+          }
+          legend.push(chartData[i].height + 'm')
+          series.push({
+            name: chartData[i].height + 'm',
+            type: 'line',
+            symbol: "none",
+            data: chartData[i].value,
+          })
+        }
+        this.drawWsChart(timeList, legend, selected, series)
+      }).catch(err => {
+        this.$message.error('首页获取风速曲线异常：' + err)
+        console.log('首页获取风速曲线异常：' + err)
+        this.wsCharts.hideLoading();
+      })
+    },
+    /*风速折线图*/
+    drawWsChart(timeList, legend, selected, series) {
+      if(this.wsCharts === null){
+        this.wsCharts = this.$echarts.init(document.getElementById('wsChart'))
+      }
+      let option = {
+        dataZoom:{
+          type:'inside'
+        },
+        tooltip: {
+          trigger: 'axis',
+          transitionDuration: 0,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
+        },
+        legend: {
+          data: legend,
+          selected: selected,
+          textStyle: {
+            color: '#eeeeee'
+          },
+          top: '3%'
+        },
+        grid: {
+          top: '25%',
+          left: '2%',
+          right: '0',
+          bottom: '.5%',
+          containLabel: true
+        },
+        //color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
+        color: ['#e098c7', '#8fd3e8', '#71669e', '#cc70af', '#7cb4cc','#f7f494','#f7c5a0','#d4a4eb','#d2f5a6','#cc70af'],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#eeeeee'
+            }
+          },
+
+          axisLabel: {
+            color: '#eeeeee'
+          },
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          data: timeList
+        },
+        yAxis: {
+          type: 'value',
+          name: '风速(m/s)',
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: '#eeeeee'
+            }
+          },
+          axisLabel: {
+            color: '#eeeeee',
+            // formatter: '{value}m/s'
+          }
+        },
+        series: series
+      }
+      this.wsCharts.setOption(option, true)
+      this.wsCharts.hideLoading();
+      window.addEventListener('resize', () => {
+        if (this.wsCharts) {
+          this.wsCharts.resize()
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.wsChartPage {
+
+}
+
+#wsChart {
+  width: 95%;
+  height: calc(35vh);
+}
+</style>

neim-ui/src/views/largeScreenPage/index1.vue

@@ -1,413 +0,0 @@
-<template>
-  <div class="page flex-col">
-    <div class="group_1 flex-col">
-      <div class="block_1 flex-col">
-        <div class="image-wrapper_1 flex-col">
-          <img
-            class="image_1"
-            referrerpolicy="no-referrer"
-            src="../../assets/largeScreenImg/index/heilongjiangshengfengziyuangaikuang.png"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="group_2 flex-row">
-      <div class="text-wrapper_1 flex-col">
-        <span class="text_1">后台管理</span>
-      </div>
-      <div class="text-wrapper_2 flex-col">
-        <span class="text_2">全省风光场站概况&nbsp;</span>
-      </div>
-    </div>
-    <div class="group_3 flex-col"></div>
-    <div class="group_4 flex-col"></div>
-    <div class="group_5 flex-col"></div>
-    <div class="group_6 flex-row">
-      <div class="box_1 flex-col">
-        <div class="text-wrapper_3 flex-col">
-          <span class="text_3">地形图</span>
-        </div>
-        <div class="text-wrapper_4 flex-col">
-          <span class="text_4">风场气象图</span>
-        </div>
-        <div class="text-wrapper_5 flex-col">
-          <span class="text_5">风资源分布图</span>
-        </div>
-        <div class="text-wrapper_6 flex-col">
-          <span class="text_6">光辐射气象图</span>
-        </div>
-        <div class="text-wrapper_7 flex-col">
-          <span class="text_7">光资源分布图</span>
-        </div>
-      </div>
-      <div class="section_2 flex-col">
-        <img
-          class="image_2"
-          referrerpolicy="no-referrer"
-          src="../../assets/largeScreenImg/index/rightTiltleTextBg.png"
-        />
-        <div class="group_7 flex-row justify-between">
-          <img
-            class="image_3"
-            referrerpolicy="no-referrer"
-            src="../../assets/largeScreenImg/index/tiltleLeftSign.png"
-          />
-          <span class="text_8">黑龙江省风光资源概况</span>
-        </div>
-        <span class="text_9"
-        >黑龙江处于高纬度地区，日照强度较大，太阳能转换率较高，为开发太阳能源提供了有理条件。特别是大兴安岭一带常年受到东亚西风带影响，具有风速大，气候干燥特点，与同维度地图相比，风资源更丰富，利于风能资源的开发与利用。</span
-        >
-        <span class="text_10">风光资源概况</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "index"
-}
-</script>
-
-<style scoped>
-.page {
-  background-color: rgba(255, 255, 255, 1);
-  position: relative;
-  width: 3840px;
-  height: 2160px;
-  overflow: hidden;
-}
-
-.group_1 {
-  background-color: rgba(255, 255, 255, 1);
-  height: 2160px;
-  width: 3840px;
-}
-
-.block_1 {
-  height: 2159px;
-  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psk8a1654su4n29q3t6r95y3hr27qfrrkh2n6wleksrwwmia0d27bc5-9750-46ea-b621-6a884dd72c03) -3px -1px no-repeat;
-  background-size: 3840px 2160px;
-  width: 3837px;
-}
-
-.image-wrapper_1 {
-  height: 137px;
-  background: url(../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
-  background-size: 3840px 138px;
-  width: 3838px;
-}
-
-.image_1 {
-  width: 651px;
-  height: 59px;
-  margin: 35px 0 0 1594px;
-}
-
-.group_2 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3840px;
-  height: 2160px;
-}
-
-.text-wrapper_1 {
-  height: 98px;
-  background: url(../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
-  background-size: 100% 100%;
-  width: 244px;
-  margin: 3px 0 0 3590px;
-}
-
-.text_1 {
-  width: 85px;
-  height: 21px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 21px;
-  font-family: SourceHanSansCN-Regular;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 21px;
-  margin: 38px 0 0 78px;
-}
-
-.text-wrapper_2 {
-  height: 98px;
-  background: url(../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
-  background-size: 100% 100%;
-  width: 315px;
-  position: absolute;
-  left: 3295px;
-  top: 3px;
-}
-
-.text_2 {
-  width: 173px;
-  height: 21px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 21px;
-  font-family: SourceHanSansCN-Regular;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 21px;
-  margin: 38px 0 0 70px;
-}
-
-.group_3 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3840px;
-  height: 2160px;
-}
-
-.group_4 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3840px;
-  height: 2160px;
-}
-
-.group_5 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3840px;
-  height: 2160px;
-}
-
-.group_6 {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 3840px;
-  height: 2160px;
-}
-
-.box_1 {
-  width: 344px;
-  height: 535px;
-  margin: 165px 0 0 2624px;
-}
-
-.text-wrapper_3 {
-  height: 99px;
-  background: url(../../assets/largeScreenImg/index/mapBtuClickAfter.png) 100% no-repeat;
-  background-size: 100% 100%;
-  width: 340px;
-}
-
-.text_3 {
-  background-image: linear-gradient(
-    180deg,
-    rgba(172, 221, 255, 1) 0,
-    rgba(172, 221, 255, 1) 0,
-    rgba(255, 255, 255, 1) 100%,
-    rgba(255, 255, 255, 1) 100%
-  );
-  width: 91px;
-  height: 30px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 32px;
-  font-family: Adobe Heiti Std R;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 32px;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin: 34px 0 0 68px;
-}
-
-.text-wrapper_4 {
-  height: 99px;
-  background: url(../../assets/largeScreenImg/index/mapBtuClickBefore.png) 100% no-repeat;
-  background-size: 100% 100%;
-  margin-top: 9px;
-  width: 344px;
-}
-
-.text_4 {
-  width: 156px;
-  height: 31px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 32px;
-  font-family: Adobe Heiti Std R;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 32px;
-  margin: 34px 0 0 66px;
-}
-
-.text-wrapper_5 {
-  height: 99px;
-  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psampqjto6hsfc4n29eh9t3ntqw6yfogviv2gv0qh2apxpqfr21655b23-1189-4507-954a-c9ee8a88e890) 100% no-repeat;
-  background-size: 100% 100%;
-  margin-top: 9px;
-  width: 340px;
-}
-
-.text_5 {
-  background-image: linear-gradient(
-    180deg,
-    rgba(172, 221, 255, 1) 0,
-    rgba(172, 221, 255, 1) 0,
-    rgba(255, 255, 255, 1) 100%,
-    rgba(255, 255, 255, 1) 100%
-  );
-  width: 189px;
-  height: 30px;
-  overflow-wrap: break-word;
-  color: rgba(231, 243, 250, 1);
-  font-size: 32px;
-  font-family: Adobe Heiti Std R;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 32px;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin: 34px 0 0 67px;
-}
-
-.text-wrapper_6 {
-  height: 99px;
-  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps4avosqmhqnmcayvio52gcy1mmqi4fgvia1s5wn83rcvgf1or37aee0b6-7bbd-46a1-bebf-acf1bffe22bd) 100% no-repeat;
-  background-size: 100% 100%;
-  margin-top: 11px;
-  width: 340px;
-}
-
-.text_6 {
-  background-image: linear-gradient(
-    180deg,
-    rgba(172, 221, 255, 1) 0,
-    rgba(172, 221, 255, 1) 0,
-    rgba(255, 255, 255, 1) 100%,
-    rgba(255, 255, 255, 1) 100%
-  );
-  width: 188px;
-  height: 31px;
-  overflow-wrap: break-word;
-  color: rgba(231, 243, 250, 1);
-  font-size: 32px;
-  font-family: Adobe Heiti Std R;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 32px;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin: 34px 0 0 68px;
-}
-
-.text-wrapper_7 {
-  height: 99px;
-  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5m5ulur8ivnrvn29b8n4hybwnrduc8fr6v5vmg1iu6k49529315872b5-768e-47e4-8f49-3ab92141b231) 100% no-repeat;
-  background-size: 100% 100%;
-  margin-top: 11px;
-  width: 340px;
-}
-
-.text_7 {
-  background-image: linear-gradient(
-    180deg,
-    rgba(172, 221, 255, 1) 0,
-    rgba(172, 221, 255, 1) 0,
-    rgba(255, 255, 255, 1) 100%,
-    rgba(255, 255, 255, 1) 100%
-  );
-  width: 188px;
-  height: 30px;
-  overflow-wrap: break-word;
-  color: rgba(231, 243, 250, 1);
-  font-size: 32px;
-  font-family: Adobe Heiti Std R;
-  font-weight: NaN;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 32px;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin: 34px 0 0 68px;
-}
-
-.section_2 {
-  position: relative;
-  width: 808px;
-  height: 566px;
-  background: url(../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
-  background-size: 100% 100%;
-  margin: 168px 25px 0 39px;
-}
-
-.image_2 {
-  width: 681px;
-  height: 63px;
-  margin: 68px 0 0 70px;
-}
-
-.group_7 {
-  width: 420px;
-  height: 36px;
-  margin: 35px 0 0 72px;
-}
-
-.image_3 {
-  width: 12px;
-  height: 32px;
-  margin-top: 3px;
-}
-
-.text_8 {
-  width: 394px;
-  height: 36px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 38px;
-  font-family: SourceHanSansCN-Medium;
-  font-weight: 500;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 48px;
-}
-
-.text_9 {
-  width: 685px;
-  height: 272px;
-  overflow-wrap: break-word;
-  color: rgba(255, 255, 255, 1);
-  font-size: 32px;
-  font-family: SourceHanSansCN-Medium;
-  font-weight: 500;
-  text-align: justifyLeft;
-  line-height: 60px;
-  margin: 40px 0 52px 73px;
-}
-
-.text_10 {
-  position: absolute;
-  left: 138px;
-  top: 57px;
-  width: 310px;
-  height: 48px;
-  overflow-wrap: break-word;
-  color: rgba(183, 243, 252, 1);
-  font-size: 50px;
-  font-family: SourceHanSansCN-Bold;
-  font-weight: 700;
-  text-align: left;
-  white-space: nowrap;
-  line-height: 48px;
-}
-
-</style>

neim-ui/src/views/opticalResources/index.vue

@@ -0,0 +1,500 @@
+<template>
+  <div>
+    <div class="condition">
+      <div class="conditionOne">
+        <span>设备：</span>
+        <el-select v-model="eqId" placeholder="请选择" @change="changeEquipment" size="small" style="width: 170px">
+          <el-option
+            v-for="item in equipmentData"
+            :key="item.equipmentNo"
+            :label="item.name"
+            :value="item.equipmentNo">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="conditionTwo">
+        <span>时间：</span>
+        <el-date-picker
+          v-model="dataTime"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="changeMonth"
+          :picker-options="pickerOptions"
+          style="width: 200px"
+          size="small"
+        >
+        </el-date-picker>
+      </div>
+      <div class="conditionTwo">
+        <span>层高：</span>
+        <el-select v-model="height" placeholder="请选择" clearable size="small" style="width: 150px">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <el-button class="seachBtu" type="primary" plain icon="el-icon-thumb" :loading="loading" size="mini">生成报告模板
+      </el-button>
+      <el-button class="seachBtu" type="primary" plain icon="el-icon-download" :loading="downLoading" size="mini">导出
+      </el-button>
+    </div>
+    <div class="pdf-main-container">
+      <div class="pdfDiv">
+        <h2>一、太阳能资源</h2>
+        <h3>1.太阳辐射量</h3>
+        <p>根据气象站数据计算，本地区多年平均的太阳辐照数据如下表所示。</p>
+        <p style="float: right">单位：MJ/m2 </p>
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column prop="month" label="月份"></el-table-column>
+          <el-table-column prop="1" label="1"></el-table-column>
+          <el-table-column prop="2" label="2"></el-table-column>
+          <el-table-column prop="3" label="3"></el-table-column>
+          <el-table-column prop="4" label="4"></el-table-column>
+          <el-table-column prop="5" label="5"></el-table-column>
+          <el-table-column prop="6" label="6"></el-table-column>
+          <el-table-column prop="7" label="7"></el-table-column>
+          <el-table-column prop="8" label="8"></el-table-column>
+          <el-table-column prop="9" label="9"></el-table-column>
+          <el-table-column prop="10" label="10"></el-table-column>
+          <el-table-column prop="11" label="11"></el-table-column>
+          <el-table-column prop="12" label="12"></el-table-column>
+          <el-table-column prop="sum" label="合计"></el-table-column>
+        </el-table>
+        <h3>逐月太阳总辐射量变化趋势图</h3>
+        <div id="echarts"></div>
+        <h3>各季总辐射分布图</h3>
+        <div id="echarts1"></div>
+        <h3>2.日照小时数</h3>
+        <p style="float: right">单位：h </p>
+        <el-table :data="tableData1" border style="width: 100%">
+          <el-table-column prop="month" label="月份"></el-table-column>
+          <el-table-column prop="1" label="1"></el-table-column>
+          <el-table-column prop="2" label="2"></el-table-column>
+          <el-table-column prop="3" label="3"></el-table-column>
+          <el-table-column prop="4" label="4"></el-table-column>
+          <el-table-column prop="5" label="5"></el-table-column>
+          <el-table-column prop="6" label="6"></el-table-column>
+          <el-table-column prop="7" label="7"></el-table-column>
+          <el-table-column prop="8" label="8"></el-table-column>
+          <el-table-column prop="9" label="9"></el-table-column>
+          <el-table-column prop="10" label="10"></el-table-column>
+          <el-table-column prop="11" label="11"></el-table-column>
+          <el-table-column prop="12" label="12"></el-table-column>
+          <el-table-column prop="sum" label="合计"></el-table-column>
+        </el-table>
+        <h3>3.资源稳定程度</h3>
+        <p>太阳能稳定程度用各月的日照时数大于6h天数的最大值与最小值的比值表示，其稳定程度分为：稳定、较稳定、不稳定三个级别，详细划分如下表所示。</p>
+        <el-table :data="tableData2" border style="width: 100%">
+          <el-table-column prop="sum" label="太阳总辐射年总量" width="200px"></el-table-column>
+          <el-table-column prop="status" label="资源丰富程度"></el-table-column>
+        </el-table>
+        <p>根据最大值与最小值的比值为2.67，属于较稳定地区，因此本地区太阳能资源全年辐射量变化一般，可利用价值一般。</p>
+        <h3>4.年发电量</h3>
+        <p style="float: right">单位：kW·h/kW </p>
+        <div class="tableHeader">
+          <el-descriptions class="margin-top" :column="5" border>
+            <el-descriptions-item label="年">发电量</el-descriptions-item>
+            <el-descriptions-item label="年">发电量</el-descriptions-item>
+            <el-descriptions-item label="年">发电量</el-descriptions-item>
+            <el-descriptions-item label="年">发电量</el-descriptions-item>
+            <el-descriptions-item label="年">发电量</el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="tableCount">
+          <el-descriptions class="margin-top" :column="5" border>
+            <el-descriptions-item v-for="(item,index) in tableData3">
+              <template slot="label">
+                <span class="labelText">
+                  {{ item.label }}</span>
+              </template>
+              <span class="valueText">{{ item.value }}</span>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="tableFooter">
+          <el-descriptions class="margin-top" :column="2" border>
+            <el-descriptions-item>合计</el-descriptions-item>
+            <el-descriptions-item>1228.65</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <h2>二、实际资源数据</h2>
+        <h3>1.利用小时数</h3>
+        <p style="float: right">单位：h </p>
+        <el-table :data="tableData4" border style="width: 100%">
+          <el-table-column prop="month" label="月份" width="150px"></el-table-column>
+          <el-table-column prop="1" label="1"></el-table-column>
+          <el-table-column prop="2" label="2"></el-table-column>
+          <el-table-column prop="3" label="3"></el-table-column>
+          <el-table-column prop="4" label="4"></el-table-column>
+          <el-table-column prop="5" label="5"></el-table-column>
+          <el-table-column prop="6" label="6"></el-table-column>
+          <el-table-column prop="7" label="7"></el-table-column>
+          <el-table-column prop="8" label="8"></el-table-column>
+          <el-table-column prop="9" label="9"></el-table-column>
+          <el-table-column prop="10" label="10"></el-table-column>
+          <el-table-column prop="11" label="11"></el-table-column>
+          <el-table-column prop="12" label="12"></el-table-column>
+          <el-table-column prop="sum" label="合计"></el-table-column>
+        </el-table>
+        <h3>2.日照小时数</h3>
+        <p style="float: right">单位：h </p>
+        <el-table :data="tableData5" border style="width: 100%">
+          <el-table-column prop="month" label="月份" width="150px"></el-table-column>
+          <el-table-column prop="1" label="1"></el-table-column>
+          <el-table-column prop="2" label="2"></el-table-column>
+          <el-table-column prop="3" label="3"></el-table-column>
+          <el-table-column prop="4" label="4"></el-table-column>
+          <el-table-column prop="5" label="5"></el-table-column>
+          <el-table-column prop="6" label="6"></el-table-column>
+          <el-table-column prop="7" label="7"></el-table-column>
+          <el-table-column prop="8" label="8"></el-table-column>
+          <el-table-column prop="9" label="9"></el-table-column>
+          <el-table-column prop="10" label="10"></el-table-column>
+          <el-table-column prop="11" label="11"></el-table-column>
+          <el-table-column prop="12" label="12"></el-table-column>
+          <el-table-column prop="sum" label="合计"></el-table-column>
+        </el-table>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+      loading: false,
+      downLoading: false,
+      /* 时间 */
+      dataTime: [new Date(new Date().getFullYear(), new Date().getMonth() - 11, 1).getTime(), new Date(new Date().getFullYear(), new Date().getMonth(), 1)],
+      pickerMinDate: null,
+      pickerMaxDate: null,
+      pickerOptions: {
+        //点击时间回调
+        onPick: ({maxDate, minDate}) => {
+          if (minDate) {
+            let currentYear = minDate.getMonth()
+            this.pickerMinDate = new Date(minDate).setMonth(currentYear - 11)
+            this.pickerMaxDate = new Date(minDate).setMonth(currentYear + 11)
+          }
+        },
+        //禁用时间 打开选择器就调用
+        disabledDate: (time) => {
+          if (this.pickerMinDate != null) {
+            //点击月份后只允许选前后1年的时间
+            //return true是禁用
+            return time.getTime() < this.pickerMinDate || this.pickerMaxDate < time.getTime()
+          }
+        }
+      },
+      eqId: '',
+      height: '',
+      equipmentData: [],
+      options: '',
+      tableData: [{
+        month: '太阳总辐射',
+        1: '302.49',
+        2: '362.69',
+        3: '511.47',
+        4: '606.10',
+        5: '695.58',
+        6: '723.42',
+        7: '683.48',
+        8: '616.81',
+        9: '484.77',
+        10: '417.87',
+        11: '312.64',
+        12: '271.31',
+        'sum': '5988.63'
+      }],
+      tableData1: [{
+        month: '日照小时数',
+        1: '210',
+        2: '206',
+        3: '242',
+        4: '259',
+        5: '292',
+        6: '298',
+        7: '278',
+        8: '266',
+        9: '236',
+        10: '243',
+        11: '215',
+        12: '205',
+        'sum': '2949'
+      }],
+      tableData2: [{sum: '<2', status: '稳定'}, {sum: '2~4', status: '较稳定'}, {sum: '>4', status: '不稳定'}],
+      tableData3: [
+        {label: '2017', value: '1528.19'},
+        {label: '2018', value: '1515.63'},
+        {label: '2019', value: '1466.44'},
+        {label: '2020', value: '1503.17'},
+        {label: '2021', value: '1490.82'},
+      ],
+      tableData4: [
+        {
+          month: '2020年 利用小时数',
+          1: '123',
+          2: '123',
+          3: '152',
+          4: '141',
+          5: '153',
+          6: '138',
+          7: '149',
+          8: '142',
+          9: '119',
+          10: '138',
+          11: '113',
+          12: '126',
+          'sum': '1615'
+        }, {
+          month: '2021年 利用小时数',
+          1: '115',
+          2: '133',
+          3: '154',
+          4: '147',
+          5: '155',
+          6: '148',
+          7: '154',
+          8: '157',
+          9: '116',
+          10: '135',
+          11: '89',
+          12: '82',
+          'sum': '1585'
+        }
+      ],
+      tableData5: [
+        {
+          month: '2020年 日照小时数',
+          1: '274',
+          2: '239',
+          3: '323',
+          4: '296',
+          5: '333',
+          6: '324',
+          7: '344',
+          8: '340',
+          9: '328',
+          10: '352',
+          11: '298',
+          12: '',
+          'sum': '3451'
+        }, {
+          month: '2021年 日照小时数',
+          1: '194',
+          2: '180',
+          3: '227',
+          4: '',
+          5: '',
+          6: '',
+          7: '',
+          8: '',
+          9: '',
+          10: '',
+          11: '',
+          12: '',
+          'sum': '602'
+        }
+      ],
+    }
+  },
+  mounted() {
+    this.drawEcharts()
+    this.drawEcharts1()
+  },
+  methods: {
+    changeEquipment() {
+
+    },
+    changeMonth(value) {
+      // 今天是月初并且选择的月份是当月
+      let endTime = new Date(value[1])
+      let startTime = new Date(value[0])
+      this.dataTime[0] = startTime.getTime()
+      if (new Date().getDate() === 1 && endTime.getMonth() + 1 === new Date().getMonth() + 1) {
+        this.dataTime[1] = endTime.getTime() - 1000 * 60 * 60 * 24
+      } else {
+        var data = new Date(value[1]);
+        data.setMonth(data.getMonth() + 1);
+        data.setDate(1);
+        data.setHours(0);
+        data.setSeconds(0);
+        data.setMinutes(0);
+        var timeEnd = (parseInt(data.getTime() / 1000) - 1) * 1000;
+        this.dataTime[1] = timeEnd //最后一天23:59:59的时间戳
+      }
+    },
+    drawEcharts() {
+      var chartDom = document.getElementById('echarts');
+      var myChart = this.$echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '气象资源数据图',
+          textStyle: {
+            color: '#ffffff',
+            fontsize: 24
+          }
+        },
+        legend: {},
+        toolbox: {
+          show: true,
+          feature: {
+            dataZoom: {
+              yAxisIndex: 'none'
+            },
+            dataView: {readOnly: false},
+            magicType: {type: ['line', 'bar']},
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: {
+          type: 'value',
+          name: '太阳总辐射(单位：MJ/m2)',
+          nameTextStyle: {color: '#6cd7d9'},
+          interval: 150
+        },
+        series: [
+          {
+            data: ['302.49', '362.69', '511.47', '606.10', '695.58', '723.42', '683.48', '616.81', '484.77', '417.87', '312.64', '271.31'],
+            type: 'bar',
+            itemStyle: {
+              color: '#6cd7d9',
+              borderRadius: [5, 5, 0, 0]
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      };
+
+      option && myChart.setOption(option, true);
+    },
+    drawEcharts1() {
+      var chartDom = document.getElementById('echarts1');
+      var myChart = this.$echarts.init(chartDom);
+      var option;
+      option = {
+        toolbox: {
+          show: true,
+          feature: {
+            dataZoom: {
+              yAxisIndex: 'none'
+            },
+            dataView: {readOnly: false},
+            magicType: {type: ['line', 'bar']},
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            type: 'pie',
+            // radius: '50%',
+            data: [
+              {value: 19.65, name: '春季'},
+              {value: 33.82, name: '夏季'},
+              {value: 29.81, name: '秋季'},
+              {value: 16.73, name: '冬季'}
+            ],
+            label: {
+              formatter: '{b}:{c}%',
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+
+      option && myChart.setOption(option, true);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.condition {
+  display: flex;
+  margin: .5%;
+}
+
+.conditionOne, .conditionTwo, .seachBtu {
+  display: inline-block;
+}
+
+.conditionTwo, .seachBtu {
+  margin-left: .5%;
+}
+
+.pdf-main-container {
+  width: 1661px;
+}
+
+.pdfDiv {
+  width: 90%;
+  margin-left: 5%;
+  margin-bottom: 2%;
+  color: black;
+}
+
+/deep/ .pdfDiv .el-table .cell {
+  text-align: center;
+}
+
+#echarts {
+  width: 100%;
+  height: 450px;
+}
+
+#echarts1 {
+  width: 100%;
+  height: 350px;
+}
+
+/deep/ .tableHeader .el-descriptions :not(.is-bordered) .el-descriptions-item__cell:nth-of-type(n) {
+  background: #FAFAFA;
+  color: #696969;
+}
+/deep/ .tableCount .el-descriptions :not(.is-bordered) .el-descriptions-item__cell:nth-of-type(n),
+/deep/ .tableHeader .el-descriptions :not(.is-bordered) .el-descriptions-item__cell:nth-of-type(n),
+/deep/ .tableFooter .el-descriptions-item__content:nth-of-type(2n-1){
+  width: 10%;
+  font-weight: bold;
+  text-align: center;
+}
+/deep/ .tableFooter .el-descriptions-item__label.is-bordered-label {
+  width: 0px;
+  padding: 0px;
+}
+/deep/ .tableFooter .el-descriptions-item__content:nth-of-type(2n){
+  font-weight: bold;
+  text-align: center;
+}
+</style>