1.首页初版定版

cpp-ui/src/assets/echarts_theme/dark.js

@@ -21,12 +21,14 @@
   }
   echarts.registerTheme('dark', {
     "color": [
-      "#7bd9a5",
-      "#d0648a",
-      "#4ea397",
-      "#f58db2",
-      "#22c3aa",
-      "#f2b3c9",
+      "#fc97af",
+      "#87f7cf",
+      "#f7f494",
+      "#72ccff",
+      "#f7c5a0",
+      "#d4a4eb",
+      "#d2f5a6",
+      "#76f2f2",
       "#dd6b66",
       "#759aa0",
       "#e69d87",

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

@@ -208,7 +208,8 @@ $table-header-background-color: #284266;
 
 /*element 弹窗*/
 .el-dialog__header, .el-dialog__body, .el-dialog__footer {
-  background-color: $base-menu-background !important;
+  //background-color: $base-menu-background !important;
+  background-color: #406e90 !important;
 }
 
 .el-dialog__title {
@@ -218,10 +219,16 @@ $table-header-background-color: #284266;
 .el-form-item__label {
   color: $white !important;
 }
+.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
+  color: #083d5c;
+}
+ .el-dialog__headerbtn .el-dialog__close {
+   color: white;
+ }
 .dark-el-dialog{
   .el-input__inner {
     background-color: transparent;
-    border: 1px solid $default-border-color;
+    border: 1px solid $white;
     color: #cddef1;
   }
   .el-button{
@@ -238,6 +245,10 @@ $table-header-background-color: #284266;
   .el-dialog.is-fullscreen {
     background: transparent;
   }
+  .el-table, .el-table tr {
+    background-color: #083d5c !important;
+    color: $white !important;
+  }
 }
 
 /*element-tree*/

cpp-ui/src/components/Hamburger/index.vue

@@ -8,7 +8,9 @@
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+        fill="#ffffff"/>
     </svg>
   </div>
 </template>

cpp-ui/src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-<!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
 <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
 <!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>-->

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

@@ -1,3 +1,4 @@
+import  * as echarts from 'echarts'
 export const gaugeOption = {
   series: [
     {
@@ -129,7 +130,11 @@ export let lineOption = {
     bottom: 30
   },
   legend: {
-    data: ['实时功率', '辐照度']
+    data: ['实时功率','短期','超短期', '辐照度'],
+    itemStyle:{
+      opacity:0
+    },
+    top:'2%'
   },
   xAxis: [
     {
@@ -180,7 +185,21 @@ export let lineOption = {
     {
       name: '实时功率',
       type: 'line',
-      areaStyle: {},
+      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
       },
@@ -190,12 +209,80 @@ export let lineOption = {
       // prettier-ignore
       data: [
         0.12,1.31, 1.26, 1.21, 1.14, 1.06, 0.97, 0.89, 0.81, 0.74, 0.69, 0.65, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.63, 0.63, 0.62, 0.62, 0.61, 0.6, 0.59, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.61, 0.63, 0.65, 0.68, 0.71, 0.73, 0.75, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.77, 0.75, 0.73, 0.71, 0.68, 0.65, 0.63, 0.61, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.59, 0.6, 0.61, 0.62, 0.62, 0.63, 0.63, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.66]
+    },{
+      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: [
+        0.63, 0.64,  0.97, 0.89, 0.81, 0.74, 0.64, 0.64, 0.64, 0.64,0.78, 0.59, 0.6, 0.61, 0.64, 0.65, 0.66,]
+    },{
+      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: [
+        0.58, 0.58, 0.58, 0.59, 0.61, 0.63, 0.65, 0.68, 0.71, 0.73, 0.75, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.59, 0.6, 0.61, 0.62, 0.62, 0.63, 0.63, 0.66]
     },
     {
       name: '辐照度',
       type: 'line',
       yAxisIndex: 1,
-      areaStyle: {},
+      itemStyle: {
+        color: 'rgb(242,250,1)'
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(240,248,1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(238,246,1,0)'
+          }
+        ])
+      },
       lineStyle: {
         width: 1
       },

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

@@ -6,6 +6,7 @@
 
 <script>
 import geoJson from '../../../assets/js/650000.json'
+import geoJsonBoundary from '../../../assets/js/xinjiangbianjie.json'
 import bg from '../../../assets/images/topRightBtuBg.png'
 
 export default {
@@ -20,6 +21,7 @@ export default {
   mounted() {
     this.myChart = this.$echarts.init(this.$refs.mapContainer);
     this.$echarts.registerMap('xinjiang', {geoJSON: geoJson});
+    this.$echarts.registerMap('boundary', {geoJSON: geoJsonBoundary});
     this.init()
 
 
@@ -118,79 +120,84 @@ export default {
             },
           },
           // 重影
+
+          // {
+          //   type: 'map',
+          //   map: 'xinjiang',
+          //   zlevel: -1,
+          //   aspectScale: 1,
+          //   zoom: 0.9,
+          //   layoutCenter: ['50%', '50.5%'],
+          //   layoutSize: '100%',
+          //   roam: false,
+          //   silent: true,
+          //   itemStyle: {
+          //     borderWidth: .5,
+          //     borderColor: 'rgba(58,149,253,0.8)',
+          //     shadowColor: 'rgba(172, 122, 255,0.5)',
+          //     shadowOffsetY: 5,
+          //     shadowBlur: 15,
+          //     areaColor: 'rgba(5,21,35,0.1)',
+          //   },
+          // },
+
+          // {
+          //   type: 'map',
+          //   map: 'xinjiang',
+          //   zlevel: -2,
+          //   aspectScale: 1,
+          //   zoom: 0.9,
+          //   layoutCenter: ['50%', '52%'],
+          //   layoutSize: '100%',
+          //   roam: false,
+          //   silent: true,
+          //   itemStyle: {
+          //     borderWidth: 1,
+          //     borderColor: 'rgba(58,149,253,0.6)',
+          //     shadowColor: 'rgba(65, 214, 255,0.6)',
+          //     shadowOffsetY: 5,
+          //     shadowBlur: 15,
+          //     areaColor: 'rgba(5,21,35,0.1)',
+          //   },
+          // },
+
           {
             type: 'map',
-            map: 'xinjiang',
-            zlevel: -1,
-            aspectScale: 1,
-            zoom: 0.9,
-            layoutCenter: ['50%', '51%'],
-            layoutSize: '100%',
-            roam: false,
-            silent: true,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: 'rgba(58,149,253,0.8)',
-              shadowColor: 'rgba(172, 122, 255,0.5)',
-              shadowOffsetY: 5,
-              shadowBlur: 15,
-              areaColor: 'rgba(5,21,35,0.1)',
-            },
-          },
-          {
-            type: 'map',
-            map: 'xinjiang',
-            zlevel: -2,
-            aspectScale: 1,
-            zoom: 0.9,
-            layoutCenter: ['50%', '52%'],
-            layoutSize: '100%',
-            roam: false,
-            silent: true,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: 'rgba(58,149,253,0.6)',
-              shadowColor: 'rgba(65, 214, 255,0.6)',
-              shadowOffsetY: 5,
-              shadowBlur: 15,
-              areaColor: 'rgba(5,21,35,0.1)',
-            },
-          },
-          {
-            type: 'map',
-            map: 'xinjiang',
+            map: 'boundary',
             zlevel: -3,
             aspectScale: 1,
-            zoom: 0.9,
-            layoutCenter: ['50%', '53%'],
+            zoom: 0.905,
+            layoutCenter: ['50.17%', '50.7%'],
             layoutSize: '100%',
             roam: false,
             silent: true,
             itemStyle: {
-              borderWidth: 1,
-              borderColor: 'rgba(58,149,253,0.4)',
+              borderWidth: 5,
+              borderColor: 'rgba(106,191,251,0.82)',
               shadowColor: 'rgba(29, 111, 165,1)',
-              shadowOffsetY: 15,
+              shadowOffsetY: 5,
               shadowBlur: 10,
               areaColor: 'rgba(5,21,35,0.1)',
             },
           },
+
           {
             type: 'map',
-            map: 'xinjiang',
+            map: 'boundary',
             zlevel: -4,
             aspectScale: 1,
-            zoom: 0.9,
-            layoutCenter: ['50%', '54%'],
+            zoom: 0.915,
+            layoutCenter: ['50.35%', '51.3%'],
             layoutSize: '100%',
             roam: false,
             silent: true,
             itemStyle: {
-              borderWidth: 5,
-              borderColor: 'rgba(5,9,57,0.8)',
-              shadowColor: 'rgba(29, 111, 165,0.8)',
-              shadowOffsetY: 15,
-              shadowBlur: 10,
+              borderWidth: 2,
+              borderColor: 'rgba(108,221,255,0.8)',
+              shadowColor: 'rgb(108,233,255)',
+              shadowOffsetX: 4,
+              shadowOffsetY: 10,
+              shadowBlur: 15,
               areaColor: 'rgba(5,21,35,0.1)',
             },
           },
@@ -208,7 +215,7 @@ export default {
               symbolSize: 6, //图标大小
             },
             lineStyle: {
-              color: '#52d7ee',
+              color: '#00fde1',
               width: 1, //尾迹线条宽度
               opacity: 1, //尾迹线条透明度
               curveness: 0.3, //尾迹线条曲直度
@@ -248,7 +255,7 @@ export default {
             symbolSize: 30,
             zlevel: 4,
             itemStyle: {
-              color: 'orange' // 标点颜色
+              color: '#ff9100',
             },
             emphasis: {
               label: {
@@ -279,7 +286,8 @@ export default {
               return [10, 5]
             },
             itemStyle: {
-              color: 'rgb(100,180,226)',
+              color: 'rgba(0,253,225,0.8)',
+              // color: 'rgb(100,180,226)',
               shadowBlur: 10,
               shadowColor: 'rgba(66,148,219,0.83)',
             },

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

@@ -76,7 +76,7 @@
     </div>
 
     <div class="dark-el-dialog">
-      <el-dialog width="50%" style="top:15%" :visible.sync="outerVisible">
+      <el-dialog width="50%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
         <div slot="title" class="dialog-title flex justify-between">
           <div>
             <el-button>全部确认</el-button>
@@ -96,7 +96,7 @@
         </div>
         <div>
           <el-table
-            :data="tableData"
+            :data="tableData.slice((this.page.currentPage - 1)*this.page.pageSize,this.page.currentPage * this.page.pageSize)"
             border max-height="300px"
             style="width: 100%">
             <el-table-column
@@ -122,6 +122,17 @@
               </template>
             </el-table-column>
           </el-table>
+          <div class="block">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page=this.page.currentPage
+              :page-sizes="[10, 15, 30, 50]"
+              :page-size=this.page.pageSize
+              layout="total, sizes, prev, pager, next, jumper"
+              :total=this.page.total>
+            </el-pagination>
+          </div>
         </div>
         <el-dialog
           width="30%" style="top:15%"
@@ -181,7 +192,12 @@ export default {
       badgeValue:{
         alarm:0,
         confirm:0
-      }
+      },
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
     }
   },
   mounted() {
@@ -215,6 +231,7 @@ export default {
       ]
       this.tableDataBak = data
       this.tableData = data
+      this.page.total = this.tableData.length
       this.badgeValue.confirm = this.tableData.filter(w=>w.operate === 0).length
       this.badgeValue.alarm = this.tableData.filter(w=>w.operate === 1).length
     },
@@ -226,6 +243,14 @@ export default {
       }
 
     },
+    /*模拟数据*/
+    mockData(num){
+      let data = []
+      for(let i=0;i<=96;i++){
+        data.push(Math.floor(Math.round(Math.random() *10) * num,2))
+      }
+      return data
+    },
     drawChart(){
       gaugeOption.series[0].data[0].value = 10
       gaugeOption.series[1].data[0].value = 10
@@ -233,6 +258,11 @@ export default {
       gaugeOption.series[1].max = 39
       var myChart = this.$echarts.init(document.getElementById('gauge'));
       myChart.setOption(gaugeOption, true)
+      lineOption.series[0].data = this.mockData(10)
+      lineOption.series[1].data = this.mockData(5)
+      lineOption.series[2].data = this.mockData(5)
+      lineOption.series[3].data = this.mockData(50)
+      console.log(lineOption)
       var myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
       myChart1.setOption(lineOption, true)
       window.addEventListener("resize", function () {
@@ -242,6 +272,16 @@ export default {
     },
     formatDate(row){
       return formatToDateTime(new Date(row.date))
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val
+      this.page.currentPage = 1
+      // this.getTableList()
+
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val
+      // this.getTableList()
     }
   }