总能耗接口对接/代码优化

src/utils/common.js

@@ -0,0 +1,22 @@
+import CaretCenter from '@/assets/images/energyManage/CaretCenter.png'
+import CaretTop from '@/assets/images/energyManage/CaretTop.png'
+import CaretBottom from '@/assets/images/energyManage/CaretBottom.png'
+
+
+/**
+ * @判断是否为正数并返回图片数据
+ */
+export function isPositiveNumber(value) {
+    let list = {}
+    if (value == 0 || value == null) {
+        list.color = '#cacaca'
+        list.icons = CaretCenter
+    } else if (typeof value === 'number' && !Number.isNaN(value) && value > 0 && value !== Infinity) {
+        list.color = '#FF0000'
+        list.icons = CaretTop
+    } else {
+        list.color = '#00C309'
+        list.icons = CaretBottom
+    }
+    return list
+};

src/views/energyManage/totalEnergyC/components/StatPanelItem.vue

@@ -17,11 +17,9 @@
 import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
 /*----------------------------------组件引入-----------------------------------*/
-import CaretCenter from '@/assets/images/energyManage/CaretCenter.png'
-import CaretTop from '@/assets/images/energyManage/CaretTop.png'
-import CaretBottom from '@/assets/images/energyManage/CaretBottom.png'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
+import { isPositiveNumber } from '@/utils/common.js'
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({
     title: Object,
@@ -33,23 +31,4 @@ const props = defineProps({
 }) //数据双向绑定
 const emit = defineEmits([]);
 /*----------------------------------变量声明-----------------------------------*/
-
-
-function isPositiveNumber(value) {
-    let list = {}
-
-    if (value == 0 || value == null) {
-        list.color = '#cacaca'
-        list.icons = CaretCenter
-    } else if (typeof value === 'number' && !Number.isNaN(value) && value > 0 && value !== Infinity) {
-        list.color = '#FF0000'
-        list.icons = CaretTop
-    } else {
-        list.color = '#00C309'
-        list.icons = CaretBottom
-    }
-
-    return list
-};
-
 </script>

src/views/energyManage/totalEnergyC/components/StatSideItem.vue

@@ -18,6 +18,7 @@ import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
+import { isPositiveNumber } from '@/utils/common.js'
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({
     title: String,
@@ -26,21 +27,4 @@ const props = defineProps({
 }) //数据双向绑定
 const emit = defineEmits([]);
 /*----------------------------------变量声明-----------------------------------*/
-
-
-function isPositiveNumber(value) {
-    let list = {}
-    if (value == 0 || value == null) {
-        list.color = '#cacaca'
-        list.icons = '/images/energyManage/CaretCenter.png'
-    } else if (typeof value === 'number' && !Number.isNaN(value) && value > 0 && value !== Infinity) {
-        list.color = '#FF0000'
-        list.icons = '/images/energyManage/CaretTop.png'
-    } else {
-        list.color = '#00C309'
-        list.icons = '/images/energyManage/CaretBottom.png'
-    }
-    return list
-};
-
 </script>

src/views/energyManage/totalEnergyC/components/pieChart.vue

@@ -43,7 +43,13 @@ function initEcharts() {
             },
         ],
         tooltip: {
-            trigger: 'item'
+            trigger: 'item',
+            formatter: function (parms) {
+                var str =
+                    parms.seriesName + '100%' + '</br>' +
+                    parms.data.value + ' ' + props.chartData.subtext
+                return str
+            },
         },
         legend: {
             bottom: '0',

src/views/energyManage/totalEnergyC/expense.vue

@@ -1,60 +1,63 @@
 <template>
     <el-row :gutter="20">
         <el-col :md="24" :lg="8" style="margin-bottom: 20px;">
-            <el-card class="card-area"
+            <el-card class="card-area" v-loading="props.expenseLoading"
                 :body-style="{ height: '400px', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignContent: 'space-between' }">
                 <div class="card-area-header">
                     <img class="image" src="@/assets/images/energyManage/overall.png" alt="整体图片">
-                    <div class="title"> 当日总能耗 </div>
+                    <div class="title"> {{ props.expenseList.title }}总能耗 </div>
                 </div>
                 <div class="card-area-center inline">
-                    <div class="countValue">3.515</div>
-                    <div class="unit">吨标准煤</div>
+                    <div class="countValue">{{ props.expenseList.oneArea.centerValue }}</div>
+                    <div class="unit"> {{ props.expenseList.unit }}</div>
                 </div>
                 <div class="card-area-footer">
-                    <span class="title">昨日同期：</span>
-                    <span class="value">2.888</span>
-                    <span class="percent" style="color: #00C309; margin-right: 5px;">-2.4%</span>
-                    <img class="image" src="@/assets/images/energyManage/CaretBottom.png" alt="整体图片">
+                    <span class="title">{{ props.expenseList.subTitle }}同期：</span>
+                    <span class="value">{{ props.expenseList.oneArea.footerValue }}</span>
+                    <span class="percent"
+                        :style="{ color: isPositiveNumber(props.expenseList.oneArea.footerPercent).color, marginRight: '7px' }">
+                        {{ props.expenseList.oneArea.footerPercent || 0 }}%
+                    </span>
+                    <img class="image" :src="isPositiveNumber(props.expenseList.oneArea.footerPercent).icons" alt="整体图片">
                 </div>
             </el-card>
         </el-col>
         <el-col :md="24" :lg="16" style="margin-bottom: 20px;">
-            <el-card class="card-area" :body-style="{ height: '400px' }">
+            <el-card class="card-area" v-loading="props.expenseLoading" :body-style="{ height: '400px' }">
                 <div class=" card-area-header" style="margin-bottom: 20px;">
                     <img class="image" src="@/assets/images/energyManage/overall.png" alt="整体图片">
-                    <div class="title"> 当日能源同比/环比 </div>
+                    <div class="title"> {{ props.expenseList.title }}能源同比/环比 </div>
                 </div>
 
-                <el-table :data="tableData" style="width: 100%;height: calc(100% - 60px);">
-                    <el-table-column prop="date" label="能源类型" />
-                    <el-table-column prop="name" label="能源用途" />
-                    <el-table-column prop="address" label="能源量" />
-                    <el-table-column prop="name" label="能源量 (吨标准煤)" width="240" />
-                    <el-table-column prop="address" label="同比 (吨标准煤)" width="220" />
-                    <el-table-column prop="name" label="环比 (吨标准煤)" width="220" />
+                <el-table :data="props.expenseList.tableData" style="width: 100%;height: calc(100% - 60px);">
+                    <el-table-column prop="energyType" label="能源类型" />
+                    <el-table-column prop="energyPurpose" label="能源用途" />
+                    <el-table-column prop="energyQuantity" label="能源量" width="240" />
+                    <el-table-column prop="energyQuantityUnit" :label="'能源量' + `（${props.expenseList.unit}）`" width="240" />
+                    <el-table-column prop="yearOnYear" :label="'同比' + `（${props.expenseList.unit}）`" width="220" />
+                    <el-table-column prop="monthOnMonth" :label="'环比' + `（${props.expenseList.unit}）`" width="220" />
                 </el-table>
             </el-card>
         </el-col>
         <el-col :md="24" :lg="8" style="margin-bottom: 20px;">
-            <el-card class="card-area">
+            <el-card class="card-area" v-loading="props.expenseLoading">
                 <div class="card-area-header">
                     <img class="image" src="@/assets/images/energyManage/overall.png" alt="整体图片">
-                    <div class="title"> 当日用能能源占比 </div>
+                    <div class="title"> {{ props.expenseList.title }}用能能源占比 </div>
                 </div>
                 <div class="card-area-chart">
-                    <pieChart ref="pieChartRef" height="440px" :chartData="pieChartData" />
+                    <pieChart ref="pieChartRef" height="440px" :chartData="props.expenseList.pieChartData" />
                 </div>
             </el-card>
         </el-col>
         <el-col :md="24" :lg="16" style="margin-bottom: 20px;">
-            <el-card class="card-area">
+            <el-card class="card-area" v-loading="props.expenseList.oneChartLoading">
                 <div class="card-area-header">
                     <img class="image" src="@/assets/images/energyManage/overall.png" alt="整体图片">
-                    <div class="title"> 当日能源趋势 </div>
+                    <div class="title"> {{ props.expenseList.title }}能源趋势 </div>
                 </div>
                 <div class="card-area-chart">
-                    <countChart ref="countChartRef" height="440px" :chartData="oneChartData" />
+                    <countChart ref="countChartRef" height="440px" :chartData="props.expenseList.oneChartData" />
                 </div>
             </el-card>
         </el-col>
@@ -71,56 +74,29 @@ import countChart from './components/countChart.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
 import { GetTimeIntervals } from '@/utils/timeProcessing.utils.js'
+import { isPositiveNumber } from '@/utils/common.js'
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({
-    dataType: String
+    expenseLoading: Boolean,
+    expenseList: Object,
 }) //数据双向绑定
 const emit = defineEmits([]);
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
-const state = reactive({
-    tableData: [],
-    oneChartLoading: true,
-    oneChartData: {
-        subtext: '吨标准煤',
-        legendData: ['电'],
-        xAxisData: [],
-        seriesData: [
-            { name: '电', type: 'bar', data: [], },
-        ]
-    },
-    pieChartData: {
-        text: '6239.05',
-        subtext: '元',
-        seriesData: [
-            { value: 1048, name: '电' },
-        ]
-    }
-})
-const { tableData, oneChartData, pieChartData } = toRefs(state)
 
-function initChartData() {
+//初始化图表
+function initChart() {
     proxy.$refs["pieChartRef"].initEcharts()
-
-    state.oneChartData.subtext = "吨标准煤"
-    state.oneChartData.xAxisData = []
-    state.oneChartData.seriesData[0].data = []
-
-    state.oneChartData.xAxisData = GetTimeIntervals('day', 60)
-    state.oneChartData.xAxisData.forEach(() => {
-        state.oneChartData.seriesData[0].data.push(0)
-    })
-
     proxy.$refs["countChartRef"].initEcharts()
-    state.oneChartLoading = false
 }
 
 onMounted(() => {
-    initChartData()
+    initChart();
 })
 
 // 暴露变量
 defineExpose({
+    initChart,
 });
 </script>
 <style lang="scss" scoped></style>

src/views/energyManage/totalEnergyC/index.vue

@@ -2,14 +2,15 @@
   <div class="app-container page-nesting totalEnergyC">
     <!-- 筛选start -->
     <div class="filter-container mb-20" style="justify-content: left">
-      <el-radio-group v-model="timeRangeType" @change="(val) => handleTimeRangeChange(val)" style="margin-right: 50px">
+      <el-radio-group v-model="timeRangeType" @change="(val) => handleDateChange(val, dataViewType)"
+        style="margin-right: 50px">
         <el-radio-button value="overview">概览</el-radio-button>
         <el-radio-button value="day">按日</el-radio-button>
         <el-radio-button value="month">按月</el-radio-button>
         <el-radio-button value="year">按年</el-radio-button>
       </el-radio-group>
 
-      <el-radio-group v-model="dataViewType" @change="(val) => handleDataViewChange(val, 3)">
+      <el-radio-group v-model="dataViewType" @change="(val) => handleDateChange(timeRangeType, val)">
         <el-radio-button value="usage">用量</el-radio-button>
         <el-radio-button value="cost">费用</el-radio-button>
       </el-radio-group>
@@ -18,12 +19,12 @@
 
     <!-- 概览（用量） -->
     <overviewUsage v-if="timeRangeType == 'overview' && dataViewType == 'usage'" ref="overviewUsageRef"
-      :overviewLoading="overviewLoading" :overviewList="overviewList" :timeRangeType="timeRangeType" />
+      :overviewLoading="statisticsLoading" :overviewList="statisticsList" />
     <!-- 概览（费用） -->
     <overviewCost v-else-if="timeRangeType == 'overview' && dataViewType == 'cost'" ref="overviewCostRef"
-      :overviewLoading="overviewLoading" :overviewList="overviewList" :timeRangeType="timeRangeType" />
+      :overviewLoading="statisticsLoading" :overviewList="statisticsList" />
     <!-- 日、月、年 -->
-    <expense v-else ref="expenseRef" :timeRangeType="timeRangeType" :dataViewType="dataViewType"></expense>
+    <expense v-else ref="expenseRef" :expenseLoading="statisticsLoading" :expenseList="expenseList"></expense>
   </div>
 </template>
 
@@ -46,6 +47,8 @@ import overviewCost from './overview-cost'
 import expense from './expense.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
+import { GetTimeIntervals } from '@/utils/timeProcessing.utils.js'
+import dayjs from 'dayjs';
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({}) //数据双向绑定
 const emit = defineEmits([])
@@ -55,57 +58,176 @@ const state = reactive({
   timeRangeType: 'overview',
   dataViewType: 'usage',
 
-  overviewLoading: false,
-  overviewList: [],
-})
-const { timeRangeType, dataViewType, overviewLoading, overviewList } = toRefs(state)
+  statisticsLoading: false,
+  statisticsList: [],
 
+  expenseList: {
+    title: "当日",
+    subTitle: "昨日",
+    unit: "吨标准煤",
+    oneArea: {
+      centerValue: 0,
+      footerValue: 0,
+      footerPercent: 0
+    },
+    tableData: [
+      {
+        energyType: "电",
+        energyPurpose: "用能",
+        energyQuantity: "-",
+        energyQuantityUnit: "",
+        yearOnYear: "-",
+        monthOnMonth: "-"
+      }, {
+        energyType: "总能耗",
+        energyPurpose: "用能",
+        energyQuantity: "-",
+        energyQuantityUnit: "",
+        yearOnYear: "-",
+        monthOnMonth: "-"
+      }
+    ],
+    pieChartData: {
+      text: '0',
+      subtext: '吨标准煤',
+      seriesData: [
+        { value: 0, name: '电' },
+      ]
+    },
+    oneChartLoading: true,
+    oneChartData: {
+      subtext: '吨标准煤',
+      legendData: ['电'],
+      xAxisData: [],
+      seriesData: [
+        { name: '电', type: 'bar', data: [], },
+      ]
+    },
+  },
+})
+const { timeRangeType, dataViewType, statisticsLoading, statisticsList, expenseList } = toRefs(state)
 
 
 
 function initData() {
-  state.overviewLoading = true;
+  state.statisticsLoading = true;
   energyApi()
     .Statistics({
       siteId: 395,
       timeType: state.timeRangeType,
       consume: state.dataViewType == "usage" ? 1 : 2
-
     })
     .then((requset) => {
-      state.overviewLoading = false;
-      state.overviewList = requset.data;
+      var li = requset.data
+      state.statisticsList = requset.data;
+
+      if (state.dataViewType == 'usage') {
+        state.expenseList.oneArea.centerValue = state.timeRangeType == 'day' ? li.today : state.timeRangeType == 'month' ? li.month : li.year;//能源量
+        state.expenseList.oneArea.footerValue = state.timeRangeType == 'day' ? li.yesterday : state.timeRangeType == 'month' ? li.lastMonth : li.lastYear
+        state.expenseList.oneArea.footerPercent = state.timeRangeType == 'day' ? li.todayRingRatio : state.timeRangeType == 'month' ? li.monthRingRatio : li.yearRingRatio
+      } else if (state.dataViewType == 'cost') {
+        state.expenseList.oneArea.centerValue = state.timeRangeType == 'day' ? li.todayCost : state.timeRangeType == 'month' ? li.monthCost : li.yearCost;//能源量
+        state.expenseList.oneArea.footerValue = state.timeRangeType == 'day' ? li.dayCostRingRatio : state.timeRangeType == 'month' ? li.monthCostRingRatio : li.yearCostRingRatio
+        state.expenseList.oneArea.footerPercent = state.timeRangeType == 'day' ? li.todayRingRatio : state.timeRangeType == 'month' ? li.monthRingRatio : li.yearRingRatio
+      }
+      state.expenseList.tableData.forEach((e) => {
+        e.energyQuantity = (state.timeRangeType == 'day' ? li.todayElectricity : state.timeRangeType == 'month' ? li.monthElectricity : li.yearElectricity) + ' kWh';//能源量
+        if (state.dataViewType == 'usage') {
+          e.energyQuantityUnit = state.timeRangeType == 'day' ? li.today : state.timeRangeType == 'month' ? li.month : li.year;//能源量
+          e.monthOnMonth = (state.timeRangeType == 'day' ? li.yesterday + `（${li.todayRingRatio}%）` : state.timeRangeType == 'month' ? li.lastMonth + `（${li.monthRingRatio}%）` : li.lastYear + `（${li.yearRingRatio}%）`);//环比
+        } else if (state.dataViewType == 'cost') {
+          e.energyQuantityUnit = state.timeRangeType == 'day' ? li.todayCost : state.timeRangeType == 'month' ? li.monthCost : li.yearCost;//能源量
+          e.monthOnMonth = (state.timeRangeType == 'day' ? li.dayCostRingRatio + `（${li.todayRingRatio}%）` : state.timeRangeType == 'month' ? li.monthCostRingRatio + `（${li.monthRingRatio}%）` : li.yearCostRingRatio + `（${li.yearRingRatio}%）`)//环比
+        }
+        e.yearOnYear = li.yearOnYear + `（${li.yearOnYearPercent}%）`//同比
+      })
+
+      if (state.dataViewType == 'usage') {
+        state.expenseList.pieChartData.subtext = "吨标准煤"
+        state.expenseList.pieChartData.text = state.timeRangeType == 'day' ? li.today : state.timeRangeType == 'month' ? li.month : li.year;//能源量
+        state.expenseList.pieChartData.seriesData[0].value = state.timeRangeType == 'day' ? li.today : state.timeRangeType == 'month' ? li.month : li.year;//能源量
+      } else if (state.dataViewType == 'cost') {
+        state.expenseList.pieChartData.subtext = "元"
+        state.expenseList.pieChartData.text = state.timeRangeType == 'day' ? li.todayCost : state.timeRangeType == 'month' ? li.monthCost : li.yearCost;//能源量
+        state.expenseList.pieChartData.seriesData[0].value = state.timeRangeType == 'day' ? li.todayCost : state.timeRangeType == 'month' ? li.monthCost : li.yearCost;//能源量
+      }
+      proxy.$refs['expenseRef'].initChart();
+
+      state.statisticsLoading = false;
     })
     .catch((err) => {
-      state.overviewLoading = false;
+      state.statisticsLoading = false;
     });
 }
 
 
-function handleTimeRangeChange(val) {
-  if (val == 'overview' && state.dataViewType == 'usage') {
-    initData()
-    proxy.$refs['overviewUsageRef'].initChartData()
-    proxy.$refs['overviewUsageRef'].getDayChartData();
-    proxy.$refs['overviewUsageRef'].getMonthChartData();
-  }
+// 取图表数据
+function getChartData({ param, success, error }) {
+  energyApi()
+    .EchartsData(param)
+    .then((requset) => {
+      success(requset)
+    })
+    .catch((err) => {
+      error(err)
+    });
 }
 
-function handleDataViewChange(val, type) {
+
+function handleDateChange(timeRangeType, dataViewType) {
   initData()
-  if (state.timeRangeType == 'overview' && val == 'usage') {
-    proxy.$refs['overviewUsageRef'].initChartData()
-    proxy.$refs['overviewUsageRef'].getDayChartData();
-    proxy.$refs['overviewUsageRef'].getMonthChartData();
-  } else {
-    proxy.$refs['overviewCostRef'].initChartData()
-    proxy.$refs['overviewCostRef'].getMonthChartData();
-    proxy.$refs['overviewCostRef'].getYearChartData();
+  if (timeRangeType == 'overview') {
+    if (dataViewType == 'usage') {
+      proxy.$refs['overviewUsageRef'].initChartData()
+      proxy.$refs['overviewUsageRef'].getDayChartData();
+      proxy.$refs['overviewUsageRef'].getMonthChartData();
+    } else if (dataViewType == 'cost') {
+      proxy.$refs['overviewCostRef'].initChartData()
+      proxy.$refs['overviewCostRef'].getMonthChartData();
+      proxy.$refs['overviewCostRef'].getYearChartData();
+    }
+  } else if (timeRangeType == 'day' || timeRangeType == 'month' || timeRangeType == 'year') {
+    state.expenseList.title = timeRangeType == 'day' ? "当日" : timeRangeType == 'month' ? "当月" : "当年"
+    state.expenseList.subTitle = timeRangeType == 'day' ? "昨日" : timeRangeType == 'month' ? "上月" : "上年"
+    state.expenseList.unit = dataViewType == 'usage' ? "吨标准煤" : "元"
+
+    getExpenseChartData();
+
+    proxy.$refs['expenseRef'].initChart();//初始化图表
   }
 }
 
+//获取日月年图表数据
+function getExpenseChartData() {
+  state.expenseList.oneChartData.subtext = "吨标准煤"
+  state.expenseList.oneChartData.xAxisData = GetTimeIntervals('day', 60)
+  state.expenseList.oneChartData.seriesData[0].data = []
+  state.expenseList.oneChartLoading = false
+
+
+  state.expenseList.oneChartLoading = true;
+  state.expenseList.oneChartData.subtext = state.dataViewType == 'usage' ? "吨标准煤" : "元"
+  state.expenseList.oneChartData.xAxisData = state.timeRangeType == 'day' ? GetTimeIntervals('day', 60) : state.timeRangeType == 'month' ? GetTimeIntervals('month', 1) : GetTimeIntervals('year', null)
+  getChartData({
+    param: {
+      siteId: 395,
+      queryPeriod: state.timeRangeType,
+      queryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      queryType: 'electric'
+    },
+    success: (res) => {
+      state.expenseList.oneChartLoading = false;
+      state.expenseList.oneChartData.seriesData[0].data = res.data.amountList || []
+      proxy.$refs['expenseRef'].initChart();
+    },
+    error: (err) => {
+      state.expenseList.oneChartLoading = false;
+    },
+  });
+}
+
 onMounted(() => {
-  handleTimeRangeChange("overview")
+  handleDateChange(state.timeRangeType, state.dataViewType)
 })
 </script>
 

src/views/historyData/report/index.vue

@@ -8,8 +8,13 @@
 
             <el-table :data="tableData" stripe style="width: 100%">
                 <el-table-column prop="date" label="时间" width="180" />
-                <el-table-column prop="name" label="A相电流(A)" width="180" />
-                <el-table-column prop="address" label="B相电流(A)" />
+                <el-table-column prop="aa" label="A相电流(A)" width="180" />
+                <el-table-column prop="ab" label="B相电流(A)" />
+                <el-table-column prop="ac" label="C相电流(A)" />
+                <el-table-column prop="va" label="A相电压(V)" />
+                <el-table-column prop="vb" label="B相电压(V)" />
+                <el-table-column prop="vc" label="C相电压(V)" />
+                <el-table-column prop="p" label="实时负荷" />
             </el-table>
         </el-tab-pane>
     </el-tabs>
@@ -37,28 +42,7 @@ const state = reactive({
         name: '1',
         content: 'Tab 1 content',
     }],
-    tableData: [
-        {
-            date: '01:00',
-            name: '37.17',
-            address: '36.855',
-        },
-        {
-            date: '02:00',
-            name: '51.525',
-            address: '50.88',
-        },
-        {
-            date: '03:00',
-            name: '50.88',
-            address: '50.88',
-        },
-        {
-            date: '04:00',
-            name: '50.88',
-            address: '50.88',
-        },
-    ],
+    tableData: [],
     datePicker: {
         type: "date",
         format: "YYYY-MM-DD",
@@ -67,6 +51,20 @@ const state = reactive({
 })
 const { editableTabsValue, editableTabs, tableData, datePicker } = toRefs(state)
 
+function initData() {
+    for (let i = 1; i <= 5; i++) {
+        state.tableData.push({
+            date: `0${i}:00`,
+            aa: Math.floor(Math.random() * i * 100).toFixed(2),
+            ab: Math.floor(Math.random() * i * 100).toFixed(2),
+            ac: Math.floor(Math.random() * i * 100).toFixed(2),
+            va: Math.floor(Math.random() * i * 100).toFixed(2),
+            vb: Math.floor(Math.random() * i * 100).toFixed(2),
+            vc: Math.floor(Math.random() * i * 100).toFixed(2),
+            p: Math.floor(Math.random() * i * 1000).toFixed(2),
+        })
+    }
+}
 
 let tabIndex = 2
 function handleTabsEdit(targetName, action) {
@@ -98,10 +96,17 @@ function handleTabsEdit(targetName, action) {
 }
 
 onMounted(() => {
+    initData()
 })
 
 // 暴露变量
 defineExpose({
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep() {
+    .el-tabs__new-tab {
+        margin: 10px;
+    }
+}
+</style>

vue.config.js

@@ -47,7 +47,7 @@ module.exports = {
     publicPath,
     assetsDir,
     outputDir,
-    lintOnSave:false,
+    lintOnSave: false,
     transpileDependencies,
     devServer: {
         hot: true,
@@ -133,7 +133,7 @@ module.exports = {
             config.devtool('source-map')
         })
 
-        config.when(process.env.NODE_ENV !== 'development', (config) => {
+        config.when(process.env.NODE_ENV !== 'production', (config) => {
             config.performance.set('hints', false)
             config.devtool('none')
             config.optimization.splitChunks({