Merge branch 'develop' into single-develop

src/views/ems/dzjk/home/ActiveChart.vue

@@ -1,30 +1,29 @@
-
 <template>
-    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
-      <div slot="header" class="time-range-header">
-        <span class="card-title">当日功率曲线</span>
-        <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
-      </div>
-      <div style="height: 310px" id="activeChart"></div>
-    </el-card>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">当日功率曲线</span>
+      <date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
+    </div>
+    <div style="height: 310px" id="activeChart"></div>
+  </el-card>
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
-import { getPointData } from '@/api/ems/dzjk'
+import {getPointData} from '@/api/ems/dzjk'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
-  mixins: [resize,intervalUpdate],
+  mixins: [resize, intervalUpdate],
   components: {DateRangeSelect},
   data() {
     return {
       chart: null,
-      timeRange:[],
-      siteId:'',
-      isInit:true
+      timeRange: [],
+      siteId: '',
+      isInit: true
     }
   },
   mounted() {
@@ -41,23 +40,23 @@ export default {
   },
   methods: {
     // 更新时间范围 重置图表
-    updateDate(data){
-      this.timeRange=data
+    updateDate(data) {
+      this.timeRange = data
       !this.isInit && this.getGVQXData()
       this.isInit = false
     },
-    getGVQXData(){
+    getGVQXData() {
       this.showLoading()
-      const {siteId,timeRange}=this
-      getPointData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
+      const {siteId, timeRange} = this
+      getPointData({siteId, startDate: timeRange[0], endDate: timeRange[1]}).then(response => {
         this.setOption(response?.data || [])
-      }).finally(()=>this.hideLoading())
+      }).finally(() => this.hideLoading())
     },
-    init(siteId){
+    init(siteId) {
       //初始化 清空数据
       this.siteId = siteId
       this.isInit = true
-      this.timeRange=[]
+      this.timeRange = []
       this.$refs.dateRangeSelect.init(true)
       this.getGVQXData()
       this.updateInterval(this.getGVQXData)
@@ -65,17 +64,17 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#activeChart'))
     },
-    showLoading(){
+    showLoading() {
       this.chart && this.chart.showLoading()
     },
-    hideLoading(){
+    hideLoading() {
       this.chart && this.chart.hideLoading()
     },
     setOption(data) {
-      const source = [['日期','电网功率','负载功率','储能功率','光伏功率','soc平均值','soh平均值','电池平均温度平均值']]
-      console.log('source.slice(1)',source[0].slice(1))
-      this.chart && data.forEach((item)=>{
-        source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower,item.avgSoc,item.avgSoh,item.avgTemp])
+      const source = [['日期', '电网功率', '负载功率', '储能功率', '光伏功率', 'soc平均值', 'soh平均值', '电池平均温度平均值']]
+      console.log('source.slice(1)', source[0].slice(1))
+      this.chart && data.forEach((item) => {
+        source.push([item.statisDate, item.gridPower, item.loadPower, item.storagePower, item.pvPower, item.avgSoc, item.avgSoh, item.avgTemp])
       })
       this.chart.setOption({
         grid: {
@@ -91,8 +90,8 @@ export default {
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
-        textStyle:{
-          color:"#333333",
+        textStyle: {
+          color: "#333333",
         },
         xAxis: {
           type: 'category',
@@ -105,11 +104,17 @@ export default {
             type: 'value',
           },
         ],
-        dataset:{source},
-        series: source[0].slice(1).map((item,index)=>{
+        dataset: {source},
+        series: source[0].slice(1).map((item, index) => {
           return {
-            type: 'line',
-            yAxisIndex:index<=4 ? 0 : 1
+            type: 'line',//index === 5 ? 'bar' : 'line',
+            showSymbol: false,
+            symbolSize: 2,
+            smooth: true,
+            areaStyle: {
+              opacity: 0.5,
+            },
+            yAxisIndex: index <= 4 ? 0 : 1
           }
         })
       })

src/views/ems/dzjk/home/WeekChart.vue

@@ -1,12 +1,11 @@
-
 <template>
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
-        <div slot="header" class="time-range-header">
-          <span class="card-title">一周充放曲线</span>
-          <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
-        </div>
-        <div style="height: 310px" id="weekChart"></div>
-      </el-card>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">一周充放曲线</span>
+      <date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
+    </div>
+    <div style="height: 310px" id="weekChart"></div>
+  </el-card>
 </template>
 
 <script>
@@ -14,14 +13,15 @@ import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
 import {getSevenChargeData} from '@/api/ems/dzjk'
+
 export default {
   mixins: [resize],
   components: {DateRangeSelect},
   data() {
     return {
       chart: null,
-      timeRange:[],
-      siteId:'',
+      timeRange: [],
+      siteId: '',
     }
   },
   mounted() {
@@ -38,41 +38,40 @@ export default {
   },
   methods: {
     // 更新时间范围 重置图表
-    updateDate(data){
-      this.timeRange=data
+    updateDate(data) {
+      this.timeRange = data
       this.getWeekKData()
     },
-    getWeekKData(){
+    getWeekKData() {
       this.showLoading()
-      const {siteId,timeRange}=this
-      this.hideLoading()
-      getSevenChargeData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
+      const {siteId, timeRange} = this
+      getSevenChargeData({siteId, startDate: timeRange[0], endDate: timeRange[1]}).then(response => {
         this.setOption(response?.data || [])
-      }).finally(()=>this.hideLoading())
+      }).finally(() => this.hideLoading())
     },
-    init(siteId){
+    init(siteId) {
       //初始化 清空数据
       this.siteId = siteId
-      this.timeRange=[]
-      this.deviceId=''
+      this.timeRange = []
+      this.deviceId = ''
       this.$refs.dateRangeSelect.init()
     },
     initChart() {
       this.chart = echarts.init(document.querySelector('#weekChart'))
     },
-    showLoading(){
+    showLoading() {
       this.chart && this.chart.showLoading()
     },
-    hideLoading(){
+    hideLoading() {
       this.chart && this.chart.hideLoading()
     },
-    setOption(data,unit) {
-      const source = [['日期','充电量','放电量']]
-      data.forEach(item=>{
-        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+    setOption(data, unit) {
+      const source = [['日期', '充电量', '放电量']]
+      data.forEach(item => {
+        source.push([item.ammeterDate, item.chargedCap, item.disChargedCap])
       })
       this.chart && this.chart.setOption({
-        color:['#4472c4','#70ad47'],//所有充放电颜色保持统一
+        color: ['#4472c4', '#70ad47'],//所有充放电颜色保持统一
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -88,29 +87,29 @@ export default {
         },
         xAxis: {
           type: 'category',
-          name:unit,
-          nameLocation:'center'
+          name: unit,
+          nameLocation: 'center'
         },
         yAxis: [{
           type: 'value',
-          name:'充电量/放电量kWh',
+          name: '充电量/放电量kWh',
           axisLine: {
-            lineStyle:{
+            lineStyle: {
               color: '#333333',
             },
-            onZero:false
+            onZero: false
           }
         }],
-        dataset:{
+        dataset: {
           source
         },
         series: [
           {
-            yAxisIndex:0,
+            yAxisIndex: 0,
             type: 'bar',
           },
           {
-            yAxisIndex:0,
+            yAxisIndex: 0,
             type: 'bar',
           },
         ]

src/views/ems/dzjk/home/index.vue

@@ -4,7 +4,8 @@
     v-loading="loading"
   >
     <el-row style="background: #fff" class="row-container" :gutter="15">
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :sm="24" :lg="5">
+        <!--      站点信息-->
         <el-card
             shadow="always"
             class="common-card-container common-card-container-body-no-padding"
@@ -12,49 +13,82 @@
           <div slot="header">
             <span class="card-title">站点信息</span>
             <div class="alarm-msg" v-if="tableData.length > 0" @click="toAlarm">
-              <i class="el-icon-message-solid"></i>
+              <i class="el-icon-message-solid"></i> 设备告警
             </div>
           </div>
           <div
-              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
+              style="box-sizing: border-box; height: 218px; padding: 20px 15px"
           >
-            <el-descriptions class="home-normal-info" :column="1">
-              <el-descriptions-item
-                  size="mini"
-                  v-for="(item, index) in singleZdInfo"
-                  :key="index + 'singleZdInfo'"
-                  :label="item.title"
-              >{{ info[item.attr] | formatNumber }}
-              </el-descriptions-item
+            <!--            地址、运行时间-->
+            <div class="site-info site-info-address">
+              <div class="title">
+                <i class="el-icon-location"></i>
+              </div>
+              <div class="value">{{ info.siteAddress }}</div>
+            </div>
+            <div class="site-info">
+              <div class="title">
+                <i class="el-icon-date"></i>
+              </div>
+              <div class="value">{{ info.runningTime || '-' }}</div>
+            </div>
+            <!--      装机功率、容量      -->
+            <el-row :gutter="10" style="margin-top:20px;">
+              <el-col
+                  :span="12"
+                  class="sjgl-col power-col"
               >
-            </el-descriptions>
+                <div class="sjgl-wrapper">
+                  <div class="sjgl-title">装机功率(MW)</div>
+                  <div class="sjgl-value">
+                    {{ info.installPower | formatNumber }}
+                  </div>
+                </div>
+              </el-col>
+              <el-col
+                  :span="12"
+                  class="sjgl-col power-col"
+              >
+                <div class="sjgl-wrapper">
+                  <div class="sjgl-title">装机容量(MW)</div>
+                  <div class="sjgl-value">
+                    {{ info.installCapacity | formatNumber }}
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="16">
-        <cl-info :info="runningInfo.strategyTempInfo"/>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="12">
+      <!--      总累计运行数据-->
+      <el-col :xs="24" :sm="24" :lg="19">
         <el-card
             shadow="always"
             class="common-card-container common-card-container-body-no-padding"
         >
           <div slot="header">
             <span class="card-title">总累计运行数据</span>
+            <div class="total-count">
+              <span class="title">总收入</span>
+              <span class="value">{{ runningInfo.totalRevenue | formatNumber }}</span>
+              <span class="unit">元</span>
+            </div>
           </div>
           <div
-              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
+              style="box-sizing: border-box; height: 218px; padding: 20px 15px"
           >
-            <el-row :gutter="20">
+            <el-row :gutter="10">
               <el-col
-                  :span="12"
+                  :span="6"
                   v-for="(item, index) in sjglData"
                   :key="index + 'sjglData'"
-                  class="sjgl-data"
+                  class="sjgl-col"
               >
-                <div class="sjgl-title">{{ item.title }}</div>
-                <div class="sjgl-value">
-                  {{ runningInfo[item.attr] | formatNumber }}
+                <div class="sjgl-wrapper">
+                  <div class="sjgl-title">{{ item.title }}</div>
+                  <div class="sjgl-value" :style="{color:item.color}">
+                    {{ runningInfo[item.attr] | formatNumber }}
+                  </div>
                 </div>
               </el-col>
             </el-row>
@@ -62,37 +96,9 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
-        <el-card
-            shadow="always"
-            class="common-card-container common-card-container-body-no-padding"
-        >
-          <div slot="header">
-            <span class="card-title">收入对比数据</span>
-          </div>
-          <div
-              style="box-sizing: border-box; height: 250px; padding: 20px 15px"
-          >
-            <el-row :gutter="20">
-              <el-col
-                  v-for="(item, index) in revenueData"
-                  :key="index + 'revenueData'"
-                  :span="index === 2 ? 24 : 12"
-                  class="sjgl-data"
-                  :style="{marginTop:index === 2 ? '40px' : 0}"
-              >
-                <div class="sjgl-title">{{ item.title }}</div>
-                <div class="sjgl-value">
-                  {{ runningInfo[item.attr] | formatNumber }}
-                </div>
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="24">
         <week-chart ref="weekChart"/>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="24">
+      <el-col :xs="24" :sm="24" :lg="12">
         <active-chart ref="activeChart"/>
       </el-col>
     </el-row>
@@ -116,62 +122,46 @@ export default {
   data() {
     return {
       loading: false,
-      singleZdInfo: [
-        {
-          title: "电站位置",
-          attr: "siteAddress",
-        },
-        {
-          title: "投运时间",
-          attr: "runningTime",
-        },
-        {
-          title: "装机功率(MW)",
-          attr: "installPower",
-        },
-        {
-          title: "装机容量(MW)",
-          attr: "installCapacity",
-        },
-      ],
       sjglData: [
         {
           title: "今日充电量（kWh）",
           attr: "dayChargedCap",
+          color: '#4472c4'
         },
         {
           title: "今日放电量（kWh）",
           attr: "dayDisChargedCap",
-        },
-        {
-          title: "昨日充电量（kWh）",
-          attr: "todo",
-        },
-        {
-          title: "昨日放电量（kWh）",
-          attr: "todo",
+          color: '#70ad47'
         },
         {
           title: "总充电量（kWh）",
           attr: "totalChargedCap",
+          color: '#4472c4'
+        },
+        {
+          title: "今日实时收入（元）",
+          attr: "dayRevenue",
+          color: '#f67438'
+        },
+        {
+          title: "昨日充电量（kWh）",
+          attr: "yesterdayChargedCap",
+          color: '#4472c4'
+        },
+        {
+          title: "昨日放电量（kWh）",
+          attr: "yesterdayDisChargedCap",
+          color: '#70ad47'
         },
         {
           title: "总放电量（kWh）",
           attr: "totalDischargedCap",
-        },
-      ],
-      revenueData: [
-        {
-          title: "当日实时收入（元）",
-          attr: "dayRevenue",
+          color: '#70ad47'
         },
         {
           title: "昨日实时收入（元）",
-          attr: "todo",
-        },
-        {
-          title: "总收入（元）",
-          attr: "totalRevenue",
+          attr: "yesterdayRevenue",
+          color: '#f67438'
         },
       ],
       info: {}, //基本信息
@@ -180,10 +170,6 @@ export default {
   },
   computed: {
     tableData() {
-      console.log(
-          "this.runningInfo?.siteMonitorHomeAlarmVo ",
-          this.runningInfo?.siteMonitorHomeAlarmVo
-      );
       return this.runningInfo?.siteMonitorHomeAlarmVo || [];
     },
   },
@@ -220,21 +206,73 @@ export default {
 </script>
 
 <style scoped lang="scss">
+//设备告警
 .alarm-msg {
-  background: #ffcec6;
-  width: 32px;
-  border-radius: 17px;
-  text-align: center;
-  font-size: 22px;
-  line-height: 30px;
+  background: #ff4949;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-weight: bolder;
+  border-radius: 3px;
+  line-height: 20px;
   cursor: pointer;
-  color: #ff4949;
+  color: #fff;
   position: absolute;
-  right: 20px;
+  right: 10px;
   top: 50%;
   transform: translateY(-50%);
 }
 
+//基本信息-地址 运行️时间
+.site-info {
+  display: flex;
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 10px;
+  align-items: center;
+
+  &.site-info-address {
+    height: 40px;
+  }
+
+  .title {
+    color: #1791ff;
+    font-size: 18px;
+    line-height: 20px;
+    margin-right: 7px;
+  }
+
+  .value {
+    color: #000;
+    font-size: 12px;
+    max-height: 40px;
+    overflow: hidden;
+  }
+}
+
+//总收入
+.total-count {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: bolder;
+  color: #333;
+  line-height: 14px;
+
+  .unit {
+    font-style: italic;
+  }
+
+  .value {
+    font-size: 22px;
+    font-weight: bolder;
+    color: #ed2f1d;
+    font-style: italic;
+    padding: 0 5px;
+  }
+}
+
 .row-container {
   & > .el-col {
     margin-bottom: 20px;
@@ -242,28 +280,47 @@ export default {
 }
 
 //数据概览
-.sjgl-data {
-  text-align: center;
+.sjgl-col {
+  .sjgl-wrapper {
+    text-align: left;
+    padding: 15px 20px;
+    background-color: #f2f7fb;
+  }
 
-  &:nth-child(1),
+  &.power-col {
+    .sjgl-wrapper {
+      padding: 10px;
+
+      .sjgl-value {
+        color: #c44444;
+      }
+    }
+  }
+
+  &:nth-child(4),
   &:nth-child(2),
   &:nth-child(3),
   &:nth-child(4) {
-    margin-bottom: 25px;
+    margin-bottom: 10px;
   }
 
   .sjgl-title {
-    color: #666666;
+    color: #717171;
     line-height: 14px;
+    font-weight: bold;
   }
 
   .sjgl-value {
     color: rgba(51, 51, 51, 1);
-    font-size: 26px;
+    font-size: 22px;
     line-height: 26px;
-    font-weight: 500;
+    font-weight: bolder;
+    font-style: italic;
     margin-top: 14px;
-    word-wrap: break-word;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 </style>