合并develop最新代码

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

@@ -0,0 +1,125 @@
+
+<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>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
+import {getPcsNameList, getPowerData} from '@/api/ems/dzjk'
+
+export default {
+  mixins: [resize],
+  components: {DateRangeSelect},
+  data() {
+    return {
+      chart: null,
+      timeRange:[],
+      siteId:'',
+      deviceId:''
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.timeRange=data
+      this.getGVQXData()
+    },
+    getGVQXData(){
+      this.showLoading()
+      const {siteId,deviceId,timeRange}=this
+      if(!deviceId) return this.hideLoading()
+      getPowerData({siteId,deviceId,startDate:timeRange[0],endDate:timeRange[1],dataType:'1'}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>this.hideLoading())
+    },
+    init(siteId){
+      //初始化 清空数据
+      this.siteId = siteId
+      this.timeRange=[]
+      this.deviceId=''
+      this.$refs.dateRangeSelect.init()
+      this.showLoading()
+      getPcsNameList(siteId).then(response=>{
+        const data=response?.data || [];
+        if(data.length>0){
+          this.deviceId=data[0].id
+          //接口调用完成之后 设置图表、结束loading
+          this.getGVQXData()
+        }else{
+          this.hideLoading()
+        }
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#activeChart'))
+    },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
+    setOption(data) {
+      const source = [['日期','电网功率']]
+      this.chart && data.forEach((item)=>{
+        source.push([item.statisDate,item.gridPower])
+      })
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        grid: {
+          containLabel: true
+        },
+        legend: {
+          left: 'center',
+          bottom: '15',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+        },
+        dataset:{source},
+        series: [
+          {
+            name:'电网功率',
+            type: 'line',
+          }
+        ]
+      })
+    },
+
+  }
+}
+
+</script>
+

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

@@ -0,0 +1,86 @@
+<template>
+  <!-- <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+        <div slot="header">
+        <span class="card-title">当前报警</span>
+        </div>
+        <div class="ssgj-container">
+        <el-table
+            class="common-table"
+            :data="tableData"
+            height="100%"
+            stripe
+            style="width: 100%">
+            <el-table-column
+            prop="deviceName"
+            label="名称">
+            </el-table-column>
+            <el-table-column
+            label="状态"
+            >
+                <template slot-scope="scope">
+                    <span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+            class-name="alarm-content"
+            prop="alarmContent"
+            show-overflow-tooltip
+            label="告警内容">
+            </el-table-column>
+            <el-table-column
+            label="工单"
+            fixed="right"
+            show-overflow-tooltip
+            >
+            <template slot-scope="scope">
+                <el-button type="text" size="mini"  v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
+                <el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
+            </template>
+            </el-table-column>
+        </el-table>
+        </div>
+    </el-card> -->
+  <el-alert type="error" :closable="false">
+    <template>
+      <div style="cursor: pointer" @click="toAlarm">设备告警</div>
+    </template>
+  </el-alert>
+</template>
+<script>
+export default {
+  props: {
+    tableData: {
+      require: true,
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toAlarm() {
+      this.$router.push({ path: "/dzjk/gzgj", query: this.$route.query });
+    },
+    toTicket() {
+      this.$router.push({ path: "/ticket" });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//实时告警
+.ssgj-container {
+  padding: 20px;
+  height: 250px;
+  box-sizing: border-box;
+  ::v-deep {
+    .el-table .el-table__header-wrapper th,
+    .el-table .el-table__fixed-header-wrapper th {
+      background: #fff2cb;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
+    <div slot="header">
+      <span class="card-title">策略信息</span>
+    </div>
+    <!-- <el-empty :image-size="100" ></el-empty> -->
+    <div
+      style="
+        box-sizing: border-box;
+        height: 250px;
+        padding: 20px 15px;
+        overflow-y: auto;
+      "
+    >
+      <el-descriptions class="home-normal-info" :column="2">
+        <el-descriptions-item size="mini" label="模板名称">{{
+          info.mainStrategyName || "-"
+        }}</el-descriptions-item>
+        <el-descriptions-item size="mini" label="SOC限制">{{
+          mainInfo.sdcLimit === 1 ? "开" : mainInfo.sdcLimit === 0 ? "关" : "-"
+        }}</el-descriptions-item>
+        <el-descriptions-item size="mini" label="SOC下限（%）">{{
+          formatNumber(mainInfo.sdcDown)
+        }}</el-descriptions-item>
+        <el-descriptions-item size="mini" label="SOC上限（%）">{{
+          formatNumber(mainInfo.sdcUp)
+        }}</el-descriptions-item>
+      </el-descriptions>
+      <el-table
+        :data="info.siteMonitorDataVo || []"
+        border
+        size="mini"
+        style="width: 100%; margin-top: 15px"
+      >
+        <el-table-column prop="startTime" label="开始时间"> </el-table-column>
+        <el-table-column prop="endTime" label="结束时间"> </el-table-column>
+        <el-table-column prop="chargeDischargePower" label="充放功率（kW）">
+        </el-table-column>
+        <el-table-column prop="chargeStatus" label="充电状态">
+          <template slot-scope="scope">
+            {{ chargeStatusOptions[scope.row.chargeStatus] }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+</template>
+<script>
+import { mapState } from "vuex";
+import { formatNumber } from "@/filters/ems";
+export default {
+  props: {
+    info: {
+      require: true,
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  computed: {
+    ...mapState({
+      chargeStatusOptions: (state) => state?.ems?.chargeStatusOptions || {},
+    }),
+    mainInfo() {
+      return this.info?.siteMonitorDataVo?.length > 0
+        ? this.info.siteMonitorDataVo[0]
+        : {};
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    formatNumber,
+  },
+};
+</script>
+<style lang="scss" scoped></style>

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

@@ -1,148 +0,0 @@
-
-<template>
-  <el-row style="background:#fff;margin-top:30px;">
-    <el-col :xs="24" :sm="24" :lg="24">
-      <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="height: 310px" id="nllzChart"></div>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatNumber} from "@/filters/ems";
-
-export default {
-  mixins: [resize],
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#nllzChart'))
-    },
-    setOption(data) {
-      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
-      const source = [['日期','充电量','放电量']]
-      siteMonitorDataVo.forEach(item=>{
-        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
-      })
-      this.chart.setOption({
-        title: [
-          // 右上角
-          {
-            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
-            top: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 右下角
-          {
-            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
-            bottom: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第一行
-          {
-            text: '储能',
-            bottom: 40,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第二行
-          {
-            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第三行
-          {
-            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
-            bottom: 10,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          }
-        ],
-        grid:{
-          left:200
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        textStyle:{
-          color:"#333333",
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
-        },
-        dataset:{
-          source
-          // source: [['日期','充电量','放电量']]
-        },
-        series: [
-          {
-            name:'充电量',
-            type: 'line',
-          },{
-            name:'放电量',
-            type: 'line',
-          }]
-      })
-    }
-  }
-}
-
-</script>
-

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

@@ -0,0 +1,121 @@
+
+<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>
+</template>
+
+<script>
+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:'',
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.timeRange=data
+      this.getWeekKData()
+    },
+    getWeekKData(){
+      this.showLoading()
+      const {siteId,timeRange}=this
+      this.hideLoading()
+      getSevenChargeData({siteId,startDate:timeRange[0],endDate:timeRange[1]}).then(response => {
+        this.setOption(response?.data || [])
+      }).finally(()=>this.hideLoading())
+    },
+    init(siteId){
+      //初始化 清空数据
+      this.siteId = siteId
+      this.timeRange=[]
+      this.deviceId=''
+      this.$refs.dateRangeSelect.init()
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#weekChart'))
+    },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
+    setOption(data,unit) {
+      const source = [['日期','充电量','放电量']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      this.chart && this.chart.setOption({
+        color:['#FFBD00','#3C81FF','#05AEA3'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          containLabel: true
+        },
+        legend: {
+          left: 'center',
+          bottom: '15',
+        },
+        xAxis: {
+          type: 'category',
+          name:unit,
+          nameLocation:'center'
+        },
+        yAxis: [{
+          type: 'value',
+          name:'充电量/放电量kWh',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        dataset:{
+          source
+        },
+        series: [
+          {
+            yAxisIndex:0,
+            type: 'line',
+          },
+          {
+            yAxisIndex:0,
+            type: 'line',
+          },
+        ]
+      })
+    }
+  }
+}
+</script>

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

@@ -1,148 +1,221 @@
 <template>
-  <div v-loading="loading" class="ems-dashboard-editor-container">
-    <el-row :gutter="32" style="background:#fff;">
-      <el-col :xs="24" :sm="24" :lg="10">
-        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <div
+    class="ems-dashboard-editor-container ems-content-container-padding"
+    v-loading="loading"
+  >
+    <el-row style="background: #fff" class="row-container" :gutter="15">
+      <el-col v-if="tableData.length > 0" :xs="24" :sm="24" :lg="24">
+        <alarm-table :tableData="tableData" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="6">
+        <el-card
+          shadow="always"
+          class="common-card-container common-card-container-body-no-padding"
+        >
           <div slot="header">
-            <span class="card-title">数据概览</span>
+            <span class="card-title">静态信息</span>
           </div>
-          <div style="height: 310px" >
+          <div
+            style="box-sizing: border-box; height: 250px; 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
+              >
+            </el-descriptions>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <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 :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
-                  <div class="sjgl-title">{{item.title}}</div>
-                  <div class="sjgl-value">{{item.value | formatNumber}}</div>
+              <el-col
+                :span="12"
+                v-for="(item, index) in sjglData"
+                :key="index + 'sjglData'"
+                class="sjgl-data"
+              >
+                <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="14">
-        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
-          <div slot="header">
-            <span class="card-title">实时告警</span>
-<!--            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>-->
-          </div>
-          <div class="ssgj-container">
-            <el-table
-              class="common-table"
-              :data="tableData"
-              height="100%"
-              stripe
-              style="width: 100%">
-              <el-table-column
-                prop="deviceName"
-                label="名称">
-              </el-table-column>
-              <el-table-column
-                label="状态"
-                >
-                  <template slot-scope="scope">
-                    <span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
-                  </template>
-              </el-table-column>
-              <el-table-column
-                class-name="alarm-content"
-                prop="alarmContent"
-                label="告警内容">
-              </el-table-column>
-              <el-table-column
-                label="工单"
-                fixed="right"
-                width="250"
-              >
-                <template slot-scope="scope">
-                  <el-button type="text" size="mini"  v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
-                  <el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-card>
+      <el-col :xs="24" :sm="24" :lg="10">
+        <cl-info :info="runningInfo.strategyTempInfo" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="24">
+        <week-chart ref="weekChart" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="24">
+        <active-chart ref="activeChart" />
       </el-col>
     </el-row>
-    <nllz-chart ref="nllzChart"/>
   </div>
 </template>
 
 <script>
-import {getDzjkHomeView} from '@/api/ems/dzjk'
-import NllzChart from "./NllzChart.vue";
-import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
+import { getSingleSiteBaseInfo } from "@/api/ems/zddt";
+import { getDzjkHomeView } from "@/api/ems/dzjk";
+import WeekChart from "./WeekChart.vue";
+import ActiveChart from "./ActiveChart.vue";
+import AlarmTable from "./AlarmTable.vue";
+import ClInfo from "./ClInfo.vue";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 export default {
-  name:'DzjkSbjkHome',
-  components: {NllzChart},
+  name: "DzjkSbjkHome",
+  components: { WeekChart, ActiveChart, AlarmTable, ClInfo },
   mixins: [getQuerySiteId],
   data() {
     return {
-      loading:false,
-      sjglData:[{
-        title:'今日充电量（MWh）',
-        value:'',
-        attr:'dayChargedCap'
-      },{
-        title:'今日放电量（MWh）',
-        value:'',
-        attr:'dayDisChargedCap'
-      },{
-        title:'总充电量（MWh）',
-        value:'',
-        attr:'totalChargedCap'
-      },{
-        title:'总放电量（MWh）',
-        value:'',
-        attr:'totalDischargedCap'
-      }],
-      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
-      tableData:[]
-    }
+      loading: false,
+      singleZdInfo: [
+        {
+          title: "电站位置",
+          attr: "siteAddress",
+        },
+        {
+          title: "投运时间",
+          attr: "runningTime",
+        },
+        {
+          title: "装机功率(MW)",
+          attr: "installPower",
+        },
+        {
+          title: "装机容量(MW)",
+          attr: "installCapacity",
+        },
+      ],
+      sjglData: [
+        {
+          title: "今日充电量（MWh）",
+          attr: "dayChargedCap",
+        },
+        {
+          title: "今日放电量（MWh）",
+          attr: "dayDisChargedCap",
+        },
+        {
+          title: "总充电量（MWh）",
+          attr: "totalChargedCap",
+        },
+        {
+          title: "总放电量（MWh）",
+          attr: "totalDischargedCap",
+        },
+      ],
+      info: {}, //基本信息
+      runningInfo: {}, //总累计运行数据+报警表格
+    };
   },
-  methods:{
-    toTicket(){
-      this.$router.push({path:'/ticket'})
+  computed: {
+    tableData() {
+      console.log(
+        "this.runningInfo?.siteMonitorHomeAlarmVo ",
+        this.runningInfo?.siteMonitorHomeAlarmVo
+      );
+      return this.runningInfo?.siteMonitorHomeAlarmVo || [];
     },
-    init(){
-      this.loading = true
-      getDzjkHomeView(this.siteId).then(response => {
-        const data = response?.data || {}
-        this.sjglData.forEach(item=>{
-          item.value =data[item.attr]
-        })
-        this.tableData = data?.siteMonitorHomeAlarmVo || []
-        this.$refs.nllzChart.setOption(data)
-      }).finally(() => {this.loading = false})
-    }
   },
-}
+  methods: {
+    getBaseInfo() {
+      return getSingleSiteBaseInfo(this.siteId).then((response) => {
+        this.info = response?.data || {};
+      });
+    },
+    getRunningInfo() {
+      return getDzjkHomeView(this.siteId).then((response) => {
+        this.runningInfo = response?.data || {};
+      });
+    },
+    init() {
+      this.loading = true;
+      // 功率曲线
+      this.$refs.activeChart.init(this.siteId);
+      // 一周冲放曲线
+      this.$refs.weekChart.init(this.siteId);
+      // 静态信息  this.getBaseInfo()
+      // 总累计运行数据+故障告警 this.getRunningInfo()
+      Promise.all([this.getBaseInfo(), this.getRunningInfo()]).finally(() => {
+        this.loading = false;
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
+.row-container {
+  & > .el-col {
+    margin-bottom: 20px;
+  }
+}
+
 //数据概览
-  .sjgl-data{
-    text-align: center;
-    margin-top:20px;
-    .sjgl-title{
+.sjgl-data {
+  text-align: center;
+  &:nth-child(1),
+  &:nth-child(2) {
+    margin-bottom: 25px;
+  }
+  .sjgl-title {
+    color: #666666;
+    line-height: 14px;
+  }
+  .sjgl-value {
+    color: rgba(51, 51, 51, 1);
+    font-size: 26px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-top: 14px;
+    word-wrap: break-word;
+  }
+}
+</style>
+
+<style lang="scss">
+.home-normal-info {
+  font-size: 12px;
+  .el-descriptions-item__container {
+    .el-descriptions-item__label {
       color: #666666;
-      line-height: 14px;
-      padding-top: 18px;
     }
-    .sjgl-value{
-      color: rgba(51,51,51,1);
-      font-size: 26px;
-      line-height: 26px;
-      font-weight: 500;
-      margin-top: 14px;
+    .el-descriptions-item__content {
+      color: #333333;
     }
   }
-  //实时告警
-  .ssgj-container{
-    padding:20px;
-    height: 310px;
-    box-sizing: border-box;
-    ::v-deep{
-      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
-        background:#FFF2CB ;
+}
+/* card标题里的时间选择器 */
+.time-range-card {
+  &.common-card-container .el-card__header {
+    padding-top: 0;
+    padding-bottom: 0;
+    .time-range-header {
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .card-title {
+        line-height: 40px;
       }
     }
   }
+}
 </style>
-