环比分析

psdc-ui/src/views/analyse/nhfx/index.vue

@@ -15,8 +15,8 @@
             <el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item>
         </el-form>
         <div class="chartBox" ref="container">
-          <div v-show="isShow1" id="tongbiChart" ref="div"></div>
-          <el-empty v-show="isShow2" description="暂无数据" ref="el-empty"/>
+          <div v-show="isShow1" id="tongbiChart"></div>
+          <el-empty v-show="isShow2" description="暂无数据"/>
         </div>
         <div class="tableBox1">
           <el-table :data="tbfxDataTable" height="345px">
@@ -49,7 +49,7 @@
             <el-table-column label="环比(%)" align="center" prop="compute"/>
             <el-table-column label="操作" align="center">
               <template v-slot="scope">
-                <el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button>
+                <el-button type="primary" size="small" :icon="Histogram" @click="handleChart(scope)">图表</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -79,6 +79,8 @@
 </template>
 
 <script setup name="Index">
+
+
 import {Histogram} from '@element-plus/icons-vue'
 import {ref, reactive, onMounted, nextTick, onBeforeUnmount} from "vue";
 import { getHuanbiFx,getTongbiFx } from "@/api/analyse/nhfx/nhfx"
@@ -209,8 +211,6 @@ function getTongbiFxFun(){
 }
 let tongbiChart;
 function tongbiChartFun(){
-  console.log('echart数据本期：',tongbiBenqi.value)
-  console.log('echart数据同期：',tongbiTongqi.value)
   const chartDom = document.getElementById('tongbiChart')
   tongbiChart = echarts.init(chartDom);
   const option = {
@@ -230,7 +230,7 @@ function tongbiChartFun(){
       show: true,
       top: '20%',
       bottom:'6%',
-      left:'2%',
+      left:'3%',
       right:'2%',
       borderWidth: 1,
       borderColor: '#767da1',
@@ -413,6 +413,7 @@ const dateType = ref('date')
 const format = ref('YYYY-MM-DD')
 const valueFormat = ref('YYYY-MM-DD')
 const timeType = ref(1)
+const echartLegend = ref([])
 //按日
 function handleDaily(){
   activeIndex.value = 0;
@@ -425,6 +426,7 @@ function handleDaily(){
   valueFormat.value = 'YYYY-MM-DD'
   timeType.value = 1
   dateValue2.value = `${year}-${month}-${day}`
+  echartLegend.value = ['当日','上日']
   console.log(dateValue2.value)
   getHuanbiFxFun()
 }
@@ -440,6 +442,7 @@ function handleMonthly(){
   valueFormat.value = 'YYYY-MM'
   timeType.value = 2
   dateValue2.value = `${year}-${month}`
+  echartLegend.value = ['本月','上月']
   console.log(dateValue2.value)
   getHuanbiFxFun()
 }
@@ -481,9 +484,16 @@ function getHuanbiFxFun(){
 /** 生成图表按鈕操作*/
 const title = ref()
 const open = ref(false)
-function handleChart(){
+//生成图表按钮
+const lastMonthData = ref([])
+const thisMonthData = ref([])
+function handleChart(scope){
   open.value = true;
-
+  lastMonthData.value = scope.row.lastMonthTotal
+  thisMonthData.value = scope.row.thisMonthTotal
+  setTimeout(()=>{
+    huanbiChartFun()
+  },100)
 
 };
 //关闭弹框按钮
@@ -491,13 +501,115 @@ function close(){
   open.value = false;
 }
 
+/** echart处理*/
+let huanbiChart;
+function huanbiChartFun(){
+  dateValue2.value = dateValue2.value.toString()
+  console.log('X轴：',dateValue2.value)
+  console.log('本月：',thisMonthData.value,'上月：',lastMonthData.value)
+  const chartDom = document.getElementById('huanbiChart')
+  tongbiChart = echarts.init(chartDom);
+  const option = {
+    legend: {
+      data: echartLegend.value,
+      // selectedMode: 'single',
+      textStyle: {
+        color: "#333"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      // borderColor: '#00fcff',
+      borderWidth: 1
+    },
+    grid:{
+      show: true,
+      top: '20%',
+      bottom:'6%',
+      left:'4%',
+      right:'3%',
+      borderWidth: 1,
+      borderColor: '#767da1',
+    },
+    xAxis: {
+      type: 'category',
+      name:'',
+      data: [dateValue2.value],
+      nameTextStyle: {
+        color: "#333",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#333"
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#767da1' // 设置x轴的线条颜色
+        }
+      },
+      axisTick: {
+        show: false // 去掉x轴刻度
+      },
+      splitArea: {
+        show: true,
+        interval:0,
+        areaStyle: {
+          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
+          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name:'kWh',
+      nameTextStyle: {
+        color: "#333",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#333"
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {color: "#767da1", type: "solid"} //dashed
+      } //s是否显示为虚线的条纹背景
+    },
+    series: [
+      {
+        name: echartLegend.value[0],
+        data:  thisMonthData.value,
+        type: 'bar',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: 'rgba(51,221,223)',
+        },
+      },
+      {
+        name: echartLegend.value[1],
+        data:  lastMonthData.value,
+        type: 'bar',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: 'rgba(182,162,222)',
+        },
+      },
+    ],
+  };
+  option && tongbiChart.setOption(option);
+}
 
 
 
 /** 页面销毁时*/
 onBeforeUnmount(() => {
   tongbiChart.dispose(); // 销毁实例，防止内存泄漏
-  // huanbiChart.dispose();
+  huanbiChart.dispose();
 });
 
 </script>
@@ -561,7 +673,9 @@ onBeforeUnmount(() => {
 .floatRight{
   margin-left: 90%;
 }
-
+::v-deep .el-dialog{
+  background-color: rgba(47,61,138) !important;
+}
 
 ::v-deep .el-tabs__item{
   color: #fff;

psdc-ui/src/views/control/timer/index.vue

@@ -55,6 +55,7 @@
               <el-table-column label="执行日期" align="center" prop="runday"/>
               <el-table-column label="执行时间" align="center" prop="runtime"/>
               <el-table-column label="创建时间" align="center" prop="createTime"/>
+              <el-table-column label="创建者" align="center" prop="createBy"/>
               <el-table-column label="操作" align="center" prop="handle">
                 <template v-slot="scope">
                   <el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button>