From 1525a55e78514c1df1c0462db5adbfb89887a162 Mon Sep 17 00:00:00 2001
From: 17630416519 <qazwsx123>
Date: Mon, 8 Sep 2025 11:48:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=83=BD=E8=80=97?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=EF=BC=9A=E7=BB=BC=E5=90=88=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=88=86=E6=9E=90(=E6=97=A5/=E6=9C=88=EF=BC=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dailyComprehensive/index.vue              | 300 +++++++++++++-----
 .../monthlyComprehensive/index.vue            | 211 +++++++++---
 2 files changed, 403 insertions(+), 108 deletions(-)

diff --git a/src/views/comprehensive/dailyComprehensive/index.vue b/src/views/comprehensive/dailyComprehensive/index.vue
index 0305ae7..1a30c11 100644
--- a/src/views/comprehensive/dailyComprehensive/index.vue
+++ b/src/views/comprehensive/dailyComprehensive/index.vue
@@ -4,24 +4,13 @@
       <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
         <el-form-item label="能源类型" prop="energyType">
           <el-select v-model="queryParams.energyType" placeholder="请选择能源类型">
-            <el-option
-              :label="item.enername"
-              :value="item.enersno"
-              v-for="item in energyTypeList"
-              :key="item.enersno"
-            />
+            <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
+              :key="item.enersno" />
           </el-select>
         </el-form-item>
         <el-form-item label="统计时间">
-          <el-date-picker
-            v-model="queryParams.dataTime"
-            type="date"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            style="width: 100%"
-            :clearable="false"
-          />
+          <el-date-picker v-model="queryParams.dataTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            placeholder="选择日期" style="width: 100%" :clearable="false" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -39,27 +28,13 @@
           <el-table-column fixed prop="indexName" label="指标名称" width="210px">
             <template #default="scope">
               <div style="width: 100%; text-align: left">
-                <el-button
-                  v-if="scope.row.indexId == queryParams.indexId"
-                  icon="search"
-                  circle
+                <el-button v-if="scope.row.indexId == queryParams.indexId" icon="search" circle
                   @click="selectChange(scope.row)"
-                  style="color: #fff; background: #409eff; margin-right: 8px"
-                ></el-button>
-                <el-button
-                  v-else
-                  icon="search"
-                  circle
-                  @click="selectChange(scope.row)"
-                  style="margin-right: 8px"
-                ></el-button>
-                <el-tooltip
-                  v-if="scope.row.indexName && scope.row.indexName.length > 9"
-                  class="item"
-                  effect="dark"
-                  :content="scope.row.indexName"
-                  placement="top-end"
-                >
+                  style="color: #fff; background: #409eff; margin-right: 8px"></el-button>
+                <el-button v-else icon="search" circle @click="selectChange(scope.row)"
+                  style="margin-right: 8px"></el-button>
+                <el-tooltip v-if="scope.row.indexName && scope.row.indexName.length > 9" class="item" effect="dark"
+                  :content="scope.row.indexName" placement="top-end">
                   <span>
                     {{ scope.row.indexName.substr(0, 9) + "..." }}
                   </span>
@@ -122,53 +97,234 @@ let queryParams = ref({
 
 const energyList = ref([])
 const lineChartData = ref({})
+// 模拟数据 - energyList
+function generateMockEnergyList() {
+  const mockData = []
+  
+  // 定义一些模拟的指标名称和单位
+  const indexNames = [
+    "注塑车间注塑电源1",
+    "注塑车间注塑电源2",
+    "注塑车间注塑辅助电源1",
+    "注塑车间辅助电源2",
+    "总装车间电力电源（一层）",
+    "总装车间电力电源（二层）",
+    "总装车间电力电源（三层）",
+    "3#厂房照明",
+    "备用",
+    '涂装空调机操室电源',
+    "4#楼照明",
+    '涂装车间空压机、电梯',
+    "2#楼空调",
+    "2#楼照明",
+    "2#楼电力电源"
+  ]
+  
+  const units = ["m³/h", "kWh", "t/h"]
+  
+
+  for (let i = 0; i < indexNames.length; i++) {
+    const item = {
+      indexId: (i + 1).toString(),
+      indexName: indexNames[i],
+      unitId: units[i % units.length]
+    }
+    
+    // 使用 for 循环生成31天的数据（value1 到 value31）
+    for (let j = 1; j <= 31; j++) {
+      const valueKey = `value${j}`
+      // 根据不同的指标类型设置不同的数值范围
+      if (i === 0 || i === 4 || i === 5) { // 水表类
+        // 生成0.01-0.05之间的随机数，保留3位小数
+        item[valueKey] = parseFloat((0.01 + Math.random() * 0.04).toFixed(3))
+      } else if (i === 1 || i === 6) { // 电能类
+        // 生成5.0-6.5之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((5.0 + Math.random() * 1.5).toFixed(2))
+      } else if (i === 2) { // 蒸汽类
+        // 生成0.2-0.3之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((0.2 + Math.random() * 0.1).toFixed(2))
+      } else if (i === 3) { // 冷却系统
+        // 生成0.005-0.02之间的随机数，保留3位小数
+        item[valueKey] = parseFloat((0.005 + Math.random() * 0.015).toFixed(3))
+      } else {
+        // 默认数据 1-10之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((1 + Math.random() * 9).toFixed(2))
+      }
+    }
+    
+    mockData.push(item)
+  }
+  
+  return mockData
+}
+// function getList() {
+//   queryParams.value.indexCode = proxy.$route.query.modelCode
+//   getDataList({
+//     ...queryParams.value,
+//     timeType: "HOUR",
+//   }).then((response) => {
+//     energyList.value = response.data
+//     if (response.data && response.data.length !== 0) {
+//       selectChange(response.data[0])
+//     } else {
+//       lineChartData.value = {}
+//     }
+//   })
+// }
+function generateMockLineChartData(selectedRow) {
+  const xData = []
+  const yData = []
+
+  // 生成24小时的时间轴数据
+  for (let i = 0; i < 24; i++) {
+    xData.push(`${i}时`)
+  }
+
+  // 根据选中的行生成对应的数据
+  if (selectedRow) {
+    // 生成24小时的数值数据
+    for (let i = 0; i < 24; i++) {
+      // 根据指标名称设置不同的数值范围
+      if (selectedRow.indexName.includes("冷却用水") || selectedRow.indexName.includes("流量智控水表") || selectedRow.indexName.includes("原料处理")) {
+        // 水表类数据，数值较小 0.01-0.05
+        yData.push(parseFloat((0.01 + Math.random() * 0.04).toFixed(3)))
+      } else if (selectedRow.indexName.includes("蒸汽")) {
+        // 蒸汽类数据 0.2-0.3
+        yData.push(parseFloat((0.2 + Math.random() * 0.1).toFixed(3)))
+      } else if (selectedRow.indexName.includes("冷却系统")) {
+        // 冷却系统数据，数值最小 0.005-0.02
+        yData.push(parseFloat((0.005 + Math.random() * 0.015).toFixed(3)))
+      } else if (selectedRow.indexName.includes("配电室") || selectedRow.indexName.includes("其他能源")) {
+        // 电能类数据，数值较大 5.0-6.5
+        yData.push(parseFloat((5.0 + Math.random() * 1.5).toFixed(2)))
+      } else {
+        // 默认数据 1-10
+        yData.push(parseFloat((1 + Math.random() * 9).toFixed(2)))
+      }
+    }
+
+    return {
+      xData: xData,
+      yData: yData,
+      title: `${selectedRow.indexName}(${selectedRow.unitId || ""})`
+    }
+  } else {
+    // 默认数据 1-10
+    for (let i = 0; i < 24; i++) {
+      yData.push(parseFloat((1 + Math.random() * 9).toFixed(2)))
+    }
+
+    return {
+      xData: xData,
+      yData: yData,
+      title: "默认图表"
+    }
+  }
+}
+
 function getList() {
   queryParams.value.indexCode = proxy.$route.query.modelCode
-  getDataList({
-    ...queryParams.value,
-    timeType: "HOUR",
-  }).then((response) => {
-    energyList.value = response.data
-    if (response.data && response.data.length !== 0) {
-      selectChange(response.data[0])
-    } else {
-      lineChartData.value = {}
-    }
-  })
+  
+  // 使用 for 循环生成的模拟数据
+  energyList.value = generateMockEnergyList()
+  
+  // 默认选中第一行并显示图表
+  if (energyList.value && energyList.value.length > 0) {
+    setTimeout(() => {
+      selectChange(energyList.value[0])
+    }, 100)
+  }
+  
+  // 如果需要从接口获取数据，取消下面的注释
+  // getDataList({
+  //   ...queryParams.value,
+  // }).then((response) => {
+  //   console.log("1111111111", response)
+  //   energyList.value = response.data.tabledata
+  //   if (energyList.value && energyList.value.length !== 0) {
+  //     selectChange(energyList.value[0])
+  //   } else {
+  //     lineChartData.value = {}
+  //   }
+  // })
 }
-
 const LineChartRef = ref()
+// function selectChange(row) {
+//   queryParams.value.indexId = row ? row.indexId : undefined
+//   queryParams.value.timeType = "HOUR"
+//   getlistChart(queryParams.value).then((response) => {
+//     let actualData = []
+//     let expectedData = []
+//     let title = ""
+//     response.data.forEach((item) => {
+//       expectedData.push(numFilter(item.value))
+//       actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
+//       title = item.indexName + "(" + (item.unitId || "") + ")"
+//     })
+
+//     console.log(response)
+//     console.log(actualData)
+//     console.log(expectedData)
+
+//     lineChartData.value = {
+//       xData: actualData,
+//       yData: expectedData,
+//       title,
+//     }
+//     // LineChartRef.value.initChart()
+//     // this.lineChartData.actualData = actualData;
+//     // this.lineChartData.expectedData = expectedData;
+//     // this.lineChartData.title = title;
+//     // this.$refs.LineChart.initChart(this.lineChartData);
+//     // this.$refs.BarChart.initChart(this.lineChartData);
+//   })
+// }
 function selectChange(row) {
+  console.log('selectChange 被调用，选中的行：', row)
   queryParams.value.indexId = row ? row.indexId : undefined
   queryParams.value.timeType = "HOUR"
-  getlistChart(queryParams.value).then((response) => {
-    let actualData = []
-    let expectedData = []
-    let title = ""
-    response.data.forEach((item) => {
-      expectedData.push(numFilter(item.value))
-      actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
-      title = item.indexName + "(" + (item.unitId || "") + ")"
-    })
 
-    console.log(response)
-    console.log(actualData)
-    console.log(expectedData)
+  // 使用 for 循环生成的模拟数据
+  const mockChartData = generateMockLineChartData(row)
+  console.log('生成的图表数据：', mockChartData)
+  lineChartData.value = mockChartData
 
-    lineChartData.value = {
-      xData: actualData,
-      yData: expectedData,
-      title,
-    }
-    // LineChartRef.value.initChart()
-    // this.lineChartData.actualData = actualData;
-    // this.lineChartData.expectedData = expectedData;
-    // this.lineChartData.title = title;
-    // this.$refs.LineChart.initChart(this.lineChartData);
-    // this.$refs.BarChart.initChart(this.lineChartData);
-  })
+  // 如果需要从接口获取数据，取消下面的注释
+  // getlistChart(queryParams.value).then((response) => {
+  //   let actualData = []
+  //   let expectedData = []
+  //   let title = ""
+  //   response.data.forEach((item) => {
+  //     expectedData.push(numFilter(item.value))
+  //     actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时")
+  //     title = item.indexName + "(" + (item.unitId || "") + ")"
+  //   })
+
+  //   console.log(response)
+  //   console.log(actualData)
+  //   console.log(expectedData)
+
+  //   lineChartData.value = {
+  //     xData: actualData,
+  //     yData: expectedData,
+  //     title,
+  //   }
+  // })
+}
+// 模拟数据 - lineChartData
+const mockLineChartData = {
+  xData: [
+    "0时", "1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时", "9时",
+    "10时", "11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时",
+    "19时", "20时", "21时", "22时", "23时"
+  ],
+  yData: [
+    0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03,
+    0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03,
+    0.03, 0.03, 0.03, 0.03, 0.03
+  ],
+  title: "加工车间原料处理用水表(m³/h)"
 }
-
 function getTime() {
   var date = new Date()
   var year = date.getFullYear()
diff --git a/src/views/comprehensive/monthlyComprehensive/index.vue b/src/views/comprehensive/monthlyComprehensive/index.vue
index 1d62895..0caa994 100644
--- a/src/views/comprehensive/monthlyComprehensive/index.vue
+++ b/src/views/comprehensive/monthlyComprehensive/index.vue
@@ -118,52 +118,191 @@ let queryParams = ref({
 
 const energyList = ref([])
 const lineChartData = ref({})
+
+//模拟数据
+function generateMockEnergyList() {
+  const mockData = []
+  
+  // 定义一些模拟的指标名称和单位
+  const indexNames = [
+    "注塑车间注塑电源1",
+    "注塑车间注塑电源2",
+    "注塑车间注塑辅助电源1",
+    "注塑车间辅助电源2",
+    "总装车间电力电源（一层）",
+    "总装车间电力电源（二层）",
+    "总装车间电力电源（三层）",
+    "3#厂房照明",
+    "备用",
+    '涂装空调机操室电源',
+    "4#楼照明",
+    '涂装车间空压机、电梯',
+    "2#楼空调",
+    "2#楼照明",
+    "2#楼电力电源"
+  ]
+  
+  const units = ["m³/h", "kWh", "t/h"]
+  
+ 
+  for (let i = 0; i < indexNames.length; i++) {
+    const item = {
+      indexId: (i + 1).toString(),
+      indexName: indexNames[i],
+      unitId: units[i % units.length]
+    }
+    
+    // 使用 for 循环生成31天的数据（value1 到 value31）
+    for (let j = 1; j <= 31; j++) {
+      const valueKey = `value${j}`
+      // 根据不同的指标类型设置不同的数值范围
+      if (i === 0 || i === 4 || i === 5) { // 水表类
+        // 生成0.01-0.05之间的随机数，保留3位小数
+        item[valueKey] = parseFloat((0.01 + Math.random() * 0.04).toFixed(3))
+      } else if (i === 1 || i === 6) { // 电能类
+        // 生成5.0-6.5之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((5.0 + Math.random() * 1.5).toFixed(2))
+      } else if (i === 2) { // 蒸汽类
+        // 生成0.2-0.3之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((0.2 + Math.random() * 0.1).toFixed(2))
+      } else if (i === 3) { // 冷却系统
+        // 生成0.005-0.02之间的随机数，保留3位小数
+        item[valueKey] = parseFloat((0.005 + Math.random() * 0.015).toFixed(3))
+      } else {
+        // 默认数据 1-10之间的随机数，保留2位小数
+        item[valueKey] = parseFloat((1 + Math.random() * 9).toFixed(2))
+      }
+    }
+    
+    mockData.push(item)
+  }
+  
+  return mockData
+}
+
+
 function getList() {
   queryParams.value.indexCode = proxy.$route.query.modelCode
-  getDataList({
-    ...queryParams.value,
-  }).then((response) => {
-    console.log("1111111111", response)
-    energyList.value = response.data.tabledata
-    if (energyList.value && energyList.value.length !== 0) {
+  
+  // 使用 for 循环生成的模拟数据
+  energyList.value = generateMockEnergyList()
+  
+  // 默认选中第一行并显示图表
+  if (energyList.value && energyList.value.length > 0) {
+    setTimeout(() => {
       selectChange(energyList.value[0])
-    } else {
-      lineChartData.value = {}
-    }
-  })
+    }, 100)
+  }
+  
+  // 如果需要从接口获取数据，取消下面的注释
+  // getDataList({
+  //   ...queryParams.value,
+  // }).then((response) => {
+  //   console.log("1111111111", response)
+  //   energyList.value = response.data.tabledata
+  //   if (energyList.value && energyList.value.length !== 0) {
+  //     selectChange(energyList.value[0])
+  //   } else {
+  //     lineChartData.value = {}
+  //   }
+  // })
 }
 
+
+
+
+
+// function getList() {
+//   queryParams.value.indexCode = proxy.$route.query.modelCode
+//   getDataList({
+//     ...queryParams.value,
+//   }).then((response) => {
+//     console.log("1111111111", response)
+//     energyList.value = response.data.tabledata
+//     if (energyList.value && energyList.value.length !== 0) {
+//       selectChange(energyList.value[0])
+//     } else {
+//       lineChartData.value = {}
+//     }
+//   })
+// }
+
 const LineChartRef = ref()
+// function selectChange(row) {
+//   queryParams.value.indexId = row ? row.indexId : undefined
+//   getlistChart(queryParams.value).then((response) => {
+//     let actualData = []
+//     let expectedData = []
+//     let title = ""
+//     response.data.forEach((item) => {
+//       expectedData.push(numFilter(item.value))
+//       actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日")
+//       title = item.indexName + "(" + (item.unitId || "") + ")"
+//     })
+
+//     console.log(response)
+//     console.log(actualData)
+//     console.log(expectedData)
+
+//     lineChartData.value = {
+//       xData: actualData,
+//       yData: expectedData,
+//       title,
+//     }
+//     // LineChartRef.value.initChart()
+//     // this.lineChartData.actualData = actualData;
+//     // this.lineChartData.expectedData = expectedData;
+//     // this.lineChartData.title = title;
+//     // this.$refs.LineChart.initChart(this.lineChartData);
+//     // this.$refs.BarChart.initChart(this.lineChartData);
+//   })
+// }
 function selectChange(row) {
+  console.log('selectChange 被调用，选中的行：', row)
   queryParams.value.indexId = row ? row.indexId : undefined
-  getlistChart(queryParams.value).then((response) => {
-    let actualData = []
-    let expectedData = []
-    let title = ""
-    response.data.forEach((item) => {
-      expectedData.push(numFilter(item.value))
-      actualData.push(item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "日")
-      title = item.indexName + "(" + (item.unitId || "") + ")"
-    })
-
-    console.log(response)
-    console.log(actualData)
-    console.log(expectedData)
-
-    lineChartData.value = {
-      xData: actualData,
-      yData: expectedData,
-      title,
+  
+  // 按月份生成图表数据
+  const xData = []
+  const yData = []
+  let title = ""
+  
+  if (row) {
+    // 生成12个月的数据（value1 到 value12）
+    for (let i = 1; i <= 12; i++) {
+      xData.push(`${i}月`)
+      const valueKey = `value${i}`
+      // 如果数据中没有value1-value12，我们生成模拟的月度数据
+      if (row[valueKey] !== undefined) {
+        yData.push(numFilter(row[valueKey]))
+      } else {
+        // 生成模拟的月度数据
+        let monthlyValue = 0
+        if (row.indexName.includes("冷却用水") || row.indexName.includes("流量智控水表") || row.indexName.includes("原料处理")) {
+          // 水表类：每月 0.5-2.0
+          monthlyValue = 0.5 + Math.random() * 1.5
+        } else if (row.indexName.includes("配电室") || row.indexName.includes("其他能源")) {
+          // 电能类：每月 100-200
+          monthlyValue = 100 + Math.random() * 100
+        } else if (row.indexName.includes("蒸汽")) {
+          // 蒸汽类：每月 5-15
+          monthlyValue = 5 + Math.random() * 10
+        } else {
+          // 默认：每月 20-80
+          monthlyValue = 20 + Math.random() * 60
+        }
+        yData.push(parseFloat(monthlyValue.toFixed(2)))
+      }
     }
-    // LineChartRef.value.initChart()
-    // this.lineChartData.actualData = actualData;
-    // this.lineChartData.expectedData = expectedData;
-    // this.lineChartData.title = title;
-    // this.$refs.LineChart.initChart(this.lineChartData);
-    // this.$refs.BarChart.initChart(this.lineChartData);
-  })
+    
+    title = `${row.indexName}(${row.unitId || ""})`
+  }
+  
+  lineChartData.value = {
+    xData: xData,
+    yData: yData,
+    title: title,
+  }
 }
-
 function getTime() {
   var date = new Date()
   var year = date.getFullYear()