2026-02-11 02:06:04 +00:00
107 changed files with 11873 additions and 30 deletions
--- a/src/views/ems/dzjk/sbjk/db/index.vue
+++ b/src/views/ems/dzjk/sbjk/db/index.vue
@ -135,7 +135,7 @@ export default {
 </script>

 <style scoped lang="scss">
-.common-card-container {
+.sbjk-card-container {
  ::v-deep {
    .el-table__row td{
      &:not(:first-child){
--- a/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
@ -7,31 +7,18 @@
    lock-scroll
    append-to-body
    width="700px"
-    class="ems-dialog"
+    class="ems-dialog chart-detail-dialog"
    :before-close="handleColsed"
  >
-    <div>
-      <el-form size="medium" label-width="100px" inline>
-        <el-form-item label="时间选择">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOptions"
-            end-placeholder="结束时间"
-            :clearable="false"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getData">搜索</el-button>
-          <el-button @click="onReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="lineChart" style="height: 360px; width: 100%"></div>
-    </div>
+    <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+      <div slot="header" class="time-range-header">
+      <span class="card-title"></span>
+        <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
+      </div>
+      <div class="card-main" v-loading="loading">
+        <div id="lineChart" style="height: 310px;"></div>
+      </div>
+    </el-card>
  </el-dialog>
 </template>

@ -39,8 +26,9 @@
 import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import { getSingleBatteryData } from "@/api/ems/dzjk";
-import { formatDate } from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
+  components: {DateRangeSelect},
  mixins: [resize],
  data() {
    return {
@ -56,18 +44,13 @@ export default {
      },
      dialogTableVisible: false,
      dateRange: [],
-      defaultDateRange: [],
    };
  },
  methods: {
-    resetDefaultDateRange() {
-      const now = new Date(),
-        formatNow = formatDate(now);
-      const weekAgo = formatDate(
-        new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
-      );
-      this.dateRange = [weekAgo, formatNow];
-      this.defaultDateRange = [weekAgo, formatNow];
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
+      this.getData()
    },
    handleColsed(done) {
      if (!this.chart) {
@ -102,22 +85,16 @@ export default {
          this.chart.hideLoading();
        });
    },
-    // 重置
-    onReset() {
-      this.dateRange = this.defaultDateRange;
-      this.getData();
-    },
    initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
      this.siteId = siteId;
      this.clusterDeviceId = clusterDeviceId;
      this.deviceId = deviceId;
      this.dataType = dataType;
-      this.resetDefaultDateRange();
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        !this.chart &&
          (this.chart = echarts.init(document.querySelector("#lineChart")));
-        this.getData();
+        this.$refs.dateRangeSelect.init()
      });
    },
    setOption(data) {
@ -208,3 +185,12 @@ export default {
  mounted() {},
 };
 </script>
+<style lang="scss" scoped>
+.chart-detail-dialog{
+  ::v-deep{
+    .el-dialog__body{
+      padding-top:0;
+    }
+  }
+}
+</style>
--- a/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
@ -83,17 +83,16 @@ export default {
            end: 100
          }
        ],
-        // POC昨日有功功率、POC昨日无功功率
        series: [
          {
-            name:'POC实时有功功率',
+            name:'PCS实时有功功率',
            type: 'line',
            areaStyle: {
              color:'#FFBD00'
            },
            data: data1,
          },{
-            name:'POC实时无功功率',
+            name:'PCS实时无功功率',
            type: 'line',
            areaStyle: {
              color: '#3C81FF'
--- a/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
+++ b/src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
@ -2,7 +2,7 @@
 <template>
  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
    <div slot="header">
-      <span class="card-title">Poc平均温度</span>
+      <span class="card-title">PCS平均温度</span>
    </div>
    <div style="height: 360px" id="pocpjwdChart"/>
  </el-card>
@ -80,7 +80,7 @@ export default {
        ],
        series: [
          {
-            name:'Poc平均温度',
+            name:'PCS平均温度',
            data: data,
            type: 'line',
            areaStyle: {
--- a/src/views/ems/dzjk/tjbb/dcdqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/dcdqx/index.vue
@ -1,56 +1,29 @@
-
 <template>
-  <div v-loading="loading">
-    <div class="select-container">
-      <el-form :inline="true">
-<!--        <el-form-item label="电池堆">-->
-<!--          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-<!--            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="时间选择">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            :picker-options="pickerOptions"
-            :default-value="defaultDateRange"
-            end-placeholder="结束时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="onReset" native-type="button">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div style="margin:30px 0;">
-      <!--        二个选择按钮-->
-      <el-row style="">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">
+        <el-button-group class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
          </el-button-group>
-        </el-col>
-      </el-row>
-      <!--echart-->
-      <div id="dcdEchart" style="height:360px;"></div>
+      </span>
+      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
-  </div>
+    <div class="card-main" v-loading="loading">
+      <div id="dcdEchart" style="height: 310px;"></div>
+    </div>
+  </el-card>
 </template>

-
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getStackData, getStackNameList} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
  name:'DzjkTjbbDcdqx',
+  components: {DateRangeSelect},
  mixins: [resize,getQuerySiteId],
  data() {
    return {
@ -59,11 +32,8 @@ export default {
          return time.getTime() > Date.now();
        },
      },
-      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      loading:false,
-      // pcs:'',
-      // pcsOptions: [],
      activeBtn:'1',
      btnList:[
        {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
@ -80,23 +50,11 @@ export default {
        this.getData()
      }
    },
-    // 搜索
-    onSearch(){
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
      this.getData()
    },
-    // 重置
-    onReset(){
-      // this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
-      this.dateRange=''
-      this.getData()
-    },
-    // getPcsList(){
-    //   return getStackNameList(this.siteId).then(response => {
-    //     const data = JSON.parse(JSON.stringify(response?.data || []))
-    //     this.pcsOptions = data
-    //     this.pcs = data.length>0?data[0].id:'';
-    //   })
-    // },
    getData(){
      const {siteId,activeBtn}=this;
      const [start='',end='']=(this.dateRange || [])
@ -189,18 +147,12 @@ export default {
      this.chart = echarts.init(document.querySelector('#dcdEchart'));
    },
    init(){
-      this.loading = true
-      // this.pcs=''
-      // this.pcsOptions=[]
-      this.initChart()
-      this.onReset()
+      this.$nextTick(()=>{
+        this.initChart()
+        this.$refs.dateRangeSelect.init()
+      })
    }
  },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  },
  beforeDestroy() {
    if (!this.chart) {
      return
--- a/src/views/ems/dzjk/tjbb/glqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/glqx/index.vue
@ -1,31 +1,14 @@

 <template>
-  <div v-loading="loading">
-    <div class="select-container">
-      <el-form :inline="true">
-        <el-form-item label="时间选择">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            :picker-options="pickerOptions"
-            :default-value="defaultDateRange"
-            end-placeholder="结束时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="onReset" native-type="button">重置</el-button>
-        </el-form-item>
-      </el-form>
+  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">功率曲线</span>
+      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
-    <div style="margin:30px 0;">
-      <div id="glqxEchart" style="height:360px;"></div>
+    <div class="card-main" v-loading="loading">
+      <div id="glqxEchart" style="height: 310px;"></div>
    </div>
-  </div>
+  </el-card>
 </template>


@ -35,8 +18,10 @@ import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
 import {formatDate} from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
  name:'DzjkTjbbGlqx',
+  components: {DateRangeSelect},
  mixins: [resize,getQuerySiteId],
  data() {
    return {
@ -45,19 +30,14 @@ export default {
          return time.getTime() > Date.now();
        },
      },
-      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      loading:false,
    }
  },
  methods: {
-    // 搜索
-    onSearch(){
-      this.getData()
-    },
-    // 重置
-    onReset(){
-      this.dateRange=[]
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
      this.getData()
    },
    getData(){
@ -118,16 +98,12 @@ export default {
      this.chart = echarts.init(document.querySelector('#glqxEchart'));
    },
    init(){
-      this.loading = true
-      this.initChart()
-      this.getData()
+      this.$nextTick(()=>{
+        this.initChart()
+        this.$refs.dateRangeSelect.init()
+      })
    }
  },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  },
  beforeDestroy() {
    if (!this.chart) {
      return
--- a/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
+++ b/src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
@ -1,31 +1,10 @@
 <template>
-  <el-card shadow="always" class="common-card-container" style="margin-top:20px">
-    <div slot="header">
+  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <div slot="header" class="time-range-header">
      <span class="card-title">电量指标</span>
+      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
    <div class="card-main" v-loading="loading">
-      <!--    搜索栏-->
-      <div class="select-container">
-        <el-form :inline="true">
-          <el-form-item label="时间选择">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              :picker-options="pickerOptions"
-              :default-value="defaultDateRange"
-              end-placeholder="结束时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="getData" native-type="button">搜索</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="onReset" native-type="button">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
      <div class="total-data">
        <div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
@ -42,7 +21,9 @@ import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getElectricData} from '@/api/ems/dzjk'
 import {formatDate} from '@/filters/ems'
+import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
 export default {
+  components: {DateRangeSelect},
  mixins: [resize,getQuerySiteId],
  data() {
    return {
@ -51,7 +32,6 @@ export default {
          return time.getTime() > Date.now();
        },
      },
-      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      loading:false,
      chart: null,
@ -61,9 +41,9 @@ export default {
    }
  },
  methods: {
-    // 重置
-    onReset(){
-      this.dateRange=[]
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
      this.getData()
    },
    setOption(data,unit){
@ -80,7 +60,12 @@ export default {
          top:40,
          containLabel: true
        },
-        tooltip: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
        xAxis: [{
          type: 'category',
          name:`单位：${unit}`,
@ -145,15 +130,13 @@ export default {
      })
    },
    init(){
-      this.chart = echarts.init(document.querySelector('#dlzbChart'));
-      this.onReset()
+      this.$nextTick(()=>{
+        this.chart = echarts.init(document.querySelector('#dlzbChart'));
+        this.$refs.dateRangeSelect.init()
+      })
+
    }
  },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-  },
  beforeDestroy() {
    if (!this.chart) {
      return
--- a/src/views/ems/dzjk/tjbb/pcsqx/index.vue
+++ b/src/views/ems/dzjk/tjbb/pcsqx/index.vue
@ -1,56 +1,30 @@

 <template>
-  <div v-loading="loading">
-    <div class="select-container">
-      <el-form :inline="true">
-<!--        <el-form-item label="PCS">-->
-<!--          <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-<!--            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="时间选择">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            :picker-options="pickerOptions"
-            :default-value="defaultDateRange"
-            end-placeholder="结束时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="onReset" native-type="button">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div style="margin:30px 0;">
-      <!--        二个选择按钮-->
-      <el-row style="">
-        <el-col :xs="24" :sm="24" :lg="24">
-          <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+    <div slot="header" class="time-range-header">
+      <span class="card-title">
+         <el-button-group class="ems-btns-group">
+            <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
          </el-button-group>
-        </el-col>
-      </el-row>
-      <!--echart-->
-      <div id="pcsEchart" style="height:360px;"></div>
+      </span>
+      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
    </div>
-  </div>
+    <div class="card-main" v-loading="loading">
+      <div id="pcsEchart" style="height: 310px;"></div>
+    </div>
+  </el-card>
 </template>

-
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
  name:'DzjkTjbbPcsqx',
+  components: {DateRangeSelect},
  mixins: [resize,getQuerySiteId],
  data() {
    return {
@ -59,17 +33,12 @@ export default {
          return time.getTime() > Date.now();
        },
      },
-      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      loading:false,
-      // pcs:'',
-      // pcsOptions: [],
      activeBtn:'1',
      btnList:[
        {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
        {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
-        // {name:'温度',id:'wd'},
-        // {name:'三相电压',id:'sxdy'},
        {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
      ],

@ -83,23 +52,11 @@ export default {
        this.getData()
      }
    },
-    // 搜索
-    onSearch(){
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.dateRange=data || []
      this.getData()
    },
-    // 重置
-    onReset(){
-      // this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
-      this.dateRange=[]
-      this.getData()
-    },
-    // getPcsList(){
-    //   return getPcsNameList(this.siteId).then(response => {
-    //     const data = response?.data || [];
-    //     this.pcsOptions = data
-    //     this.pcs = data.length>0?data[0].id:'';
-    //   })
-    // },
    getData(){
      const {siteId,activeBtn}=this;
      const [start='',end='']=(this.dateRange || [])
@ -108,7 +65,6 @@ export default {
      getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
        this.setOption(response?.data || [])
      }).finally(()=>{this.loading=false;})
-
    },
    compareDate(date1,date2){
      console.log('比较时间',date1,date2)
@ -194,27 +150,12 @@ export default {
      this.chart = echarts.init(document.querySelector('#pcsEchart'));
    },
    init(){
-      this.loading = true
-      // this.pcs=''
-      // this.pcsOptions=[]
-      this.initChart()
-      this.onReset()
-      // this.getPcsList().then(()=>{
-      //   if(this.pcs){
-      //     this.onReset()
-      //   }else{
-      //     this.loading=false;
-      //   }
-      //
-      // })
+      this.$nextTick(()=>{
+        this.initChart()
+        this.$refs.dateRangeSelect.init()
+      })
    }
  },
-  mounted(){
-    const now = new Date();
-    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    this.defaultDateRange = [lastMonth, now];
-
-  },
  beforeDestroy() {
    if (!this.chart) {
      return